/* =========================================================
   LiftCom — shared stylesheet
   ========================================================= */

:root {
  --color-primary: #2ca1d6;
  --color-primary-dark: #1f7ea8;
  --color-primary-light: #cde4f1;
  --color-band: #2d9cd0;
  /* The 09.2026 redesign's deeper blue, used by its new icons and comps. */
  --color-blue-deep: #2e92c6;
  /* The redesign's light-gray panel (behind the Pro and Connect copy). */
  --color-bg-panel: #f3f3f3;
  --color-charcoal: #535354;
  --color-slate: #4f5154;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-text-light: #999999;
  --color-border: #dddddd;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f8fa;
  --color-bg-muted: #f4f4f4;
  --color-bg-gray: #cdcdcd;
  --color-bg-dark: #1c2b33;
  --color-white: #ffffff;

  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --max-width: 1200px;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.14);
  --transition: 0.2s ease;

  /* The live site's (Divi's) band spacing: sections pad 4% and rows 2% of
     the page width, capped at 54px / 27px from 1350px up. */
  --section-pad: min(54px, 4vw);
  --row-pad: min(27px, 2vw);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Keep the hidden attribute authoritative over components' display values
   (persona-specific content is toggled with it). */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* The homepage header scrolls away with the hero instead of sticking, so
   there's nothing to clear: sections land flush with the top, as on the
   live site. */
html:has(.site-header--overlay) {
  scroll-padding-top: 0;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.6em;
  line-height: 1.25;
}

p {
  margin: 0 0 1em;
}

/* The trademark sign, set small and raised so its top sits level with the
   capitals. Every ™ on the site uses it, since the full size sign looks
   heavy. */
.tm {
  font-size: 0.45em;
  line-height: 0;
  vertical-align: 0.9em;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* The live site's standard content row (Divi's default): 80% wide, capped at
   1080px. The commercial sections use it so they line up with the source. */
.content-row {
  width: 80%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

section {
  padding: 72px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-light {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-outline-light:hover {
  background: #fff;
  color: var(--color-primary-dark);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Squared-off buttons used across the commercial sections, matching the live
   site's: 8px corners, a 4px border in the fill color, and a chevron that
   slides in on hover (the demo buttons also shift their text left to make
   room for it, as the source does). */
.btn-square {
  position: relative;
  padding: 12px 20px;
  border-width: 4px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 20px;
  line-height: 34px;
  transition: all 0.3s ease;
}

.btn-square::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: 0;
  transform: translateX(-12px) rotate(45deg);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-square:hover::after {
  opacity: 1;
  transform: rotate(45deg);
}

.btn-primary.btn-square:hover {
  background: var(--color-primary);
  transform: none;
  padding: 12px 40px 12px 14px;
}

/* A white button with blue type, for photos. */
.btn-light {
  background: var(--color-white);
  border-color: var(--color-white);
  color: #2d9bcf;
}

.btn-light.btn-square:hover {
  background: var(--color-white);
  color: #2d9bcf;
  padding: 12px 40px 12px 14px;
}

/* ---------- Header ----------
   The logo asset is a solid-white mark, matching the live site (whose header
   is either transparent over a hero photo, or solid brand-blue once fixed —
   never white). Default header: solid blue, white text. Homepage overrides
   this with the transparent overlay variant below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--color-primary);
}

.site-header .main-nav a:not(.btn) {
  color: #fff;
}

.site-header .main-nav a:not(.btn):hover {
  color: rgba(255, 255, 255, 0.8);
}

/* inline-block (not the .btn flex default) so "Dealer Login" keeps a normal
   word space instead of the flex gap. */
.header-actions .btn {
  display: inline-block;
  padding: 15px;
  border-width: 3px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 14px;
  letter-spacing: 0.25px;
}

.header-actions .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #3c3c3c;
}

.site-header .nav-toggle span,
.site-header .nav-toggle::before,
.site-header .nav-toggle::after {
  background: #fff;
}

/* Transparent overlay variant: sits directly on top of the hero photo on the
   homepage, matching the live site (no solid bar above the hero). */
.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

/* Full-bleed like the live site: logo pinned to the left edge, nav to the
   right, not centered in a content container. */
.site-header .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  height: 83px;
  padding: 0 32px 0 34px;
}

.site-logo {
  margin-top: 19px;
}

.site-logo img {
  height: 45px;
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 33px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a:not(.btn) {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.25px;
  color: var(--color-text);
}

.main-nav a:not(.btn):hover {
  color: var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  background: var(--color-text);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform var(--transition);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  padding: 120px 0 100px;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 39, 51, 0.78), rgba(18, 39, 51, 0.65));
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 0.4em;
}

.hero .lead {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2em;
}

/* Homepage hero, sized like the live site: a fixed 626px band with type set
   in viewport-height units, and no tint overlay (the photo is pre-tinted).
   The vw cap only kicks in on tall/portrait windows, where 7.5vh would
   overflow the band. */
.hero-main {
  height: 626px;
  padding: 214px 0 0;
}

.hero-main::before {
  display: none;
}

.hero-main .container {
  width: 80%;
  max-width: 1080px;
  padding: 0;
}

.hero-main h1 {
  font-weight: 500;
  font-size: min(7.5vh, 7.5vw);
  line-height: 1;
  margin: 0;
  padding-bottom: 10px;
}

.hero-main .lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 2.3vh;
  line-height: 1.3;
  color: #fff;
  margin: 29px 0 0;
}

/* ========== Residential top section (Home Owner) ==========
   As on the live site: a 732px photo band with the headline over its sky,
   3vw in and 7vh below the band's row padding, then a centered introduction.
   Phones move the headline under the photo (see the 767px block). */
.home-top {
  position: relative;
  padding: 0;
}

.home-hero {
  height: 732px;
  background-size: cover;
  background-position: center;
}

.home-hero-title {
  position: absolute;
  top: calc(var(--row-pad) + 7vh);
  left: 3vw;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--color-band);
}

.home-hero-title strong,
.home-hero-title span {
  display: block;
}

.home-hero-title strong {
  font-weight: 700;
}

.home-intro {
  margin: 1.6px 0 24px;
  padding: var(--row-pad) 160px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22.4px;
  line-height: 1;
  color: var(--color-band);
  text-align: center;
}

.home-intro p {
  margin: 0;
}

.home-intro-lead {
  padding-bottom: 10px;
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-primary);
}

/* ========== Residential feature bands (Home Owner) ==========
   As on the live site: the copy takes 57.8% of a blue band and the photo
   36.7%, with a 5.5% gutter of blue between them; the markup's order sets
   which side the photo is on. Sizes are the live site's fixed pixels; only
   the gap under the text is a share (4.758%) of the copy column's width. */
/* From 981px to about 1020px the feature lists run past the window, as they
   do on the live site, which clips them at the page's edge. The bands clip
   them the same way instead of letting the page scroll sideways. */
.home-band {
  display: flex;
  column-gap: 5.5%;
  padding: 0;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
}

.home-band-copy {
  width: 57.8%;
  min-width: 0;
}

.home-band-photo {
  width: 36.7%;
  background-size: cover;
  background-position: center;
}

.home-band-title {
  margin: 0 0 0 14px;
  padding: 150px 5px 10px 45px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--color-white);
}

/* A second heading line, capped at 73% of the column as on the live site. */
.home-band-subtitle {
  max-width: 73%;
  margin: 0 0 0 14px;
  padding: 0 5px 10px 45px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
}

.home-band-text {
  margin: 50px 60px 4.758%;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22.4px;
  line-height: 1.3;
}

.home-band-text p {
  margin: 0;
}

.home-band-lead {
  padding-bottom: 10px;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}

/* The features, two to a row: an 80px icon beside Arial text, as on the
   live site. */
.home-band-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
  padding: 32px 32px 32px 42px;
}

.home-band-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.home-band-list img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.home-band-list span {
  padding-top: 4px;
  font-family: Arial, sans-serif;
  font-size: 25px;
  line-height: 1.45;
}

/* Phones show each band's photo in full above it, as on the live site.
   Wider screens hide it, though above Why and New Construction the live
   site leaves a blank pixel in its place. */
.home-band-phone-photo {
  display: none;
}

.home-band-phone-photo--pixel {
  display: block;
  width: 100%;
  height: 1px;
  visibility: hidden;
}

/* LiftCom Pro's title sits 30px higher on the live site. */
.home-band--pro .home-band-title {
  margin-top: -30px;
}

/* Building a New Home? sets both heading lines bold and 20px in, with the
   title 100px down, as on the live site. */
.home-band--construction .home-band-title,
.home-band--construction .home-band-subtitle {
  max-width: none;
  margin-left: 20px;
  font-weight: 700;
}

.home-band--construction .home-band-title {
  padding-top: 100px;
}

/* A Safer Home for Everyone is bold and 20px in too, with the title 75px
   down and kept 45px clear of the photo side. */
.home-band--family .home-band-title {
  margin-left: 20px;
  padding: 75px 45px 10px;
  font-weight: 700;
}

/* ========== Residential plan comparison (Home Owner) ==========
   As on the live site: a centered heading, then Core beside Pro in a table
   framed in blue, 71% of the width. Divi's table styles come along too: a
   gray rule above each row, just under its blue divider, and 15px of space
   under the last row. */
.home-plans {
  padding: 76px 0;
}

.home-plans-title {
  margin: 0 0 5px;
  padding-bottom: 10px;
  font-size: 40px;
  line-height: 1;
  color: var(--color-band);
  text-align: center;
}

.home-plans-subtitle {
  max-width: 82%;
  margin: 0 auto 2.75%;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 25.6px;
  line-height: 1;
  color: var(--color-band);
  text-align: center;
}

.home-plans-box {
  max-width: 71%;
  margin: 0 auto 2.75%;
  border: 2px solid var(--color-band);
  border-radius: 25px;
  overflow: hidden;
}

.home-plans-table {
  width: 100%;
  margin: 0 0 15px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-body);
  line-height: 23.8px;
}

.home-plans-table thead th {
  padding: 20px 10px 20px 16px;
  border: 1px solid var(--color-band);
  background: var(--color-band);
  font-weight: 700;
  font-size: 30px;
  color: var(--color-white);
  text-align: center;
  vertical-align: middle;
}

.home-plans-table tbody th,
.home-plans-table td {
  position: relative;
  padding: 10px 16px;
  border-top: 1px solid #eee;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text);
  text-align: center;
  vertical-align: middle;
}

.home-plans-table tbody th {
  padding-left: 32px;
  text-align: left;
}

.home-plans-table td:last-child {
  padding-right: 32px;
}

/* Each row's blue divider, inset 10px at the frame's sides. */
.home-plans-table tbody tr:not(:last-child) > *::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-primary-light);
}

.home-plans-table tbody tr:not(:last-child) > :first-child::after {
  left: 10px;
}

.home-plans-table tbody tr:not(:last-child) > :last-child::after {
  right: 10px;
}

.home-plans-table img {
  display: inline;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.home-plans-table .home-plans-text {
  font-style: italic;
  color: var(--color-band);
}

/* The live site sets Core's written values a little tighter than Pro's. */
.home-plans-table .home-plans-text[data-plan="core"] {
  line-height: 1.3;
}

/* The plan switcher and the Yes / No words are for phones. */
.home-plans-switch,
.home-plans-word {
  display: none;
}

/* ========== Upgrade an existing elevator (Home Owner) ==========
   As on the live site: a centered introduction 80% wide (1080px at most),
   then the two plans as cards in a narrower row (882px at most). The rows'
   top padding works out to 2% of the page width, 27px at most. */
.home-upgrade {
  padding: 0;
}

.home-upgrade-intro {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: min(2%, 27px) 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22.4px;
  line-height: 23.8px;
  color: var(--color-band);
  text-align: center;
}

.home-upgrade-title {
  margin: 0 0 2.75%;
  padding-top: 40px;
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  color: inherit;
}

.home-upgrade-title strong {
  font-weight: 700;
}

.home-upgrade-intro p {
  margin: 0;
}

.home-upgrade-lead {
  padding-bottom: 1em;
  font-weight: 700;
}

.home-upgrade-cards {
  display: flex;
  column-gap: calc(5.5% + 100px);
  width: 80%;
  max-width: 882px;
  margin: 0 auto;
  padding: min(2%, 27px) 0 40px;
}

.home-upgrade-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  border: 3px solid #2d9bcf;
  border-radius: 15px;
  overflow: hidden;
}

/* The Pro card leaves room for its ribbon to reach past its sides, so
   its title clips itself instead, as the whole Core card does. */
.home-upgrade-card--pro {
  overflow: visible;
}

.home-upgrade-card--pro .home-upgrade-card-title {
  overflow: hidden;
}

/* 56px as on the live site, scaled down only on phones narrower than
   about 365px, where "LiftCom™" would otherwise run past the card. */
.home-upgrade-card-title {
  margin: 0 0 16px;
  padding: 31px 11px 16px;
  background: var(--color-primary);
  font-weight: 700;
  font-size: min(56px, calc(17vw - 6px));
  line-height: 1;
  color: var(--color-white);
  text-align: center;
}

.home-upgrade-card--pro .home-upgrade-card-title {
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/* The points are set and spaced like the business tier cards' points. */
.home-upgrade-list {
  margin: 0 48px 44px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18.24px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.home-upgrade-list li {
  margin-left: 14px;
}

.home-upgrade-list li + li {
  margin-top: 29.24px;
}

/* The blue check sits on each point's first line, hanging to its left, as
   the live site's list marker does, but drawn from the full size artwork so
   it stays sharp. It is lowered to center on the capitals, as the tier
   cards' checks do. */
.home-upgrade-list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 7.5px 0 -27.5px;
  vertical-align: -2.5px;
  background: url("../images/icon-residential-plan-yes.png") 50% calc(50% + 0.6px) / 20.5px no-repeat;
}

/* The live site gives the last Core point 48px more room on the right. */
.home-upgrade-card:not(.home-upgrade-card--pro) .home-upgrade-list li:last-child {
  margin-right: -48px;
}

.home-upgrade-btn {
  display: block;
  margin: auto 48.4px 16px;
  padding: 18px 28px;
  border-radius: 8px;
  background: #58595b;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 23.8px;
  color: var(--color-white);
  text-align: center;
}

.home-upgrade-btn:hover,
.home-upgrade-btn:focus-visible {
  background: #444;
  color: var(--color-white);
}

/* The ribbon, drawn to the user's reference: a flat band crosses the Pro
   card and runs 0.9em past each side, where it folds back behind the card,
   and its notched tails come out 0.85em lower. Every part is in ems of the
   ribbon's type, which is sized to the card: 8.78% of its width side by
   side, as in the reference. The tails shorten on phones to stay inside
   the window. */
.home-upgrade-ribbon {
  --tail: 1.59em;
  position: relative;
  margin: 0 calc(-3px - 0.9em) 26px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(0.04149 * min(80vw, 882px) - 4.39px);
  line-height: 1.2;
  color: var(--color-white);
  text-align: center;
}

.home-upgrade-ribbon span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.69em 0.5em 0.86em;
  background: #969da6;
}

/* The folds, where the band turns back behind the card. */
.home-upgrade-ribbon span::before,
.home-upgrade-ribbon span::after {
  content: "";
  position: absolute;
  top: 100%;
  border-top: 0.853em solid #70777e;
}

.home-upgrade-ribbon span::before {
  left: 0;
  border-left: 0.9em solid transparent;
}

.home-upgrade-ribbon span::after {
  right: 0;
  border-right: 0.9em solid transparent;
}

/* The tails, cut with a notch at their ends. */
.home-upgrade-ribbon::before,
.home-upgrade-ribbon::after {
  content: "";
  position: absolute;
  top: 0.853em;
  bottom: -0.853em;
  width: calc(0.9em + var(--tail));
  background: #888f97;
}

.home-upgrade-ribbon::before {
  left: calc(-1 * var(--tail));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.68em 50%);
}

.home-upgrade-ribbon::after {
  right: calc(-1 * var(--tail));
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.68em) 50%, 100% 100%, 0 100%);
}

/* ========== Closing band (Home Owner) ==========
   As on the live site: a band 1000px tall with the dusk photo covering it,
   the heading 2% of the window's height below its padding and the button
   702px lower (65% of the window's height on tablets). Where the live site
   lets the button hang off the band's foot, on tablets and short windows,
   the band grows to keep it on the photo, 20px clear of the foot. */
.home-cta {
  min-height: 1000px;
  max-width: 2560px;
  margin: 0 auto;
  padding: min(2%, 27px) 0 20px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.home-cta-title {
  max-width: 88%;
  margin: 2vh auto 0;
  padding-bottom: 10px;
  font-size: 64px;
  line-height: 1;
  color: var(--color-white);
}

.home-cta-action {
  margin-top: 702.08px;
}

/* ---------- Persona selector ("I am a:") ---------- */
/* Six equal columns ("I am a:" plus five icons) across 93% of the viewport,
   with type in viewport-height units — all as on the live site. The vw caps
   only matter on tall/portrait windows. */
.persona-selector {
  background: var(--color-white);
  padding: 0 0 20px;
}

.persona-selector-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 5.5%;
  width: 93%;
  margin: 0 auto;
}

.persona-selector h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: min(4.5vh, 2.9vw);
  line-height: 1;
  color: var(--color-primary);
  text-align: right;
  margin: 50px 0 0;
}

.persona-icon {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.persona-icon:hover,
.persona-icon:focus,
.persona-icon:active {
  background: none;
}

.persona-icon:focus {
  outline: none;
}

.persona-icon:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.persona-icon img {
  width: 70%;
  height: auto;
  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.persona-icon:hover img {
  transform: scale(1.1) translateZ(0);
  filter: grayscale(1);
}

/* The live site leaves this in the browser's default sans-serif. */
.persona-icon .persona-label {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: min(1.7vh, 1.1vw);
  line-height: 1;
  color: var(--color-text-muted);
  text-align: center;
}

/* Clicking a persona dims every other icon — the live site's
   ".opaque{opacity:.5}", which applies to the image only, not its label. */
.persona-icon.is-dimmed img {
  opacity: 0.5;
}

/* ========== Feature bands ("Why LiftCom?" panels) ==========
   Ported from the live site's full-bleed rows: a 2/3 copy column and a 1/3
   media column with a 5.5% gutter. The big title and icon-led feature list
   are inset 11vw from the edge. Vertical rhythm follows the source too:
   items sit in 100px slots separated by a 2.75vw gap, so the list tightens
   on smaller screens. Grid (not flex) on purpose — Safari has a known bug
   stretching a flex child that has no content of its own (the photo column
   is only a background-image), so grid's row-stretch is used instead for a
   result that's reliable across browsers. */
.feature-band {
  --feature-gap: max(30px, 2.75vw);
  display: grid;
  grid-template-columns: 64.833% 29.667%;
  column-gap: 5.5%;
  padding: 0;
}

.feature-band-copy {
  min-width: 0;
  padding-bottom: 20px;
}

/* 4vh from the top; the list starts one slot plus one gap down (or just
   below the title, should it run taller). */
.feature-band-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 4vw;
  line-height: 1;
  color: inherit;
  padding-top: 4vh;
  margin: 0 0 max(16px, calc(100px + var(--feature-gap) - 4vh - 4vw)) calc(11vw + 30px);
}

.feature-band .feature-grid {
  gap: var(--feature-gap);
  margin: 0 5px 0 11vw;
}

/* Small print under a panel's feature list. */
.feature-band-footnote {
  margin: 40px 5px 0 11vw;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 1.5;
}

/* The 130px icon hangs out of its 100px slot into the gap below, and long
   text may too, stopping 14px short of the next item (the live site lets it
   run into it). */
.feature-band .feature-card {
  min-height: 100px;
}

.feature-band .feature-icon {
  margin-bottom: -30px;
}

.feature-band .feature-card-text {
  margin-bottom: calc(14px - var(--feature-gap));
}

/* The first two items also sit 1vh down in their slots, as on the live
   site's "Why LiftCom?" panel. */
.why-liftcom-band .feature-card:nth-child(-n+2) {
  position: relative;
  top: 1vh;
}

/* ---------- "Why LiftCom?" per-persona panels ---------- */
.why-liftcom-band {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0;
}

.why-liftcom-band .feature-band {
  min-height: 805px;
}

.why-liftcom-band .feature-card h3 {
  font-size: 24px;
}

.why-liftcom-band .feature-card p {
  font-size: 21px;
}

.persona-panel-photo {
  background-size: cover;
  background-position: center;
}

/* ========== "Why LiftCom?" panels (09.2026 redesign) ==========
   Every business persona's panel follows the contractor's comp. At every
   width it takes the redesign's deeper blue and the comp's type weights and
   tracking. From 981px up it also takes the comp's layout: the copy on the
   left 57.8% and the photo beside it, sized in comp pixels like the photo
   bands. Narrower screens stack it with the photo on top. */
.why-liftcom-band .feature-band--redesign {
  background: var(--color-blue-deep);
}

.feature-band--redesign .feature-band-title {
  font-weight: 600;
}

.feature-band--redesign .feature-card h3,
.feature-band--redesign .feature-card p,
.feature-band--redesign .feature-band-footnote {
  letter-spacing: 0.025em;
}

.feature-band--redesign .feature-card p {
  font-weight: 400;
}

@media (min-width: 981px) {
  .why-liftcom-band .feature-band--redesign {
    --comp: calc(100vw / 2000);
    grid-template-columns: 57.8125% 42.1875%;
    column-gap: 0;
    min-height: 0;
  }

  .feature-band--redesign .feature-band-copy {
    padding: calc(105.4 * var(--comp)) 0 calc(19.2 * var(--comp));
  }

  .feature-band--redesign .feature-band-title {
    font-size: calc(60.45 * var(--comp));
    padding-top: 0;
    margin: 0 0 calc(36.2 * var(--comp)) calc(195.9 * var(--comp));
  }

  .feature-band--redesign .feature-grid {
    gap: calc(46.5 * var(--comp));
    margin: 0;
  }

  /* The text starts 384.7 comp pixels in, or a little less where a
     window's scrollbar would squeeze it below its full width. Headings and
     text share one size, as in the comp. Each item fills at least the slot
     of a heading and three lines, as the contractor's items do, so shorter
     items keep the same rhythm; the slot is a hair under four lines so a
     full item never grows. Each icon is centered on its item in a column
     centered 266.5 in, at the size the comp draws it (its PNG's padding
     included), and stays out of the text's flow. */
  .why-liftcom-band .feature-band--redesign .feature-card {
    position: relative;
    top: 0;
    min-height: 5.05em;
    padding-left: min(calc(384.7 * var(--comp)), calc(100% - 23.37em - 4px));
    font-size: max(16px, calc(28.65 * var(--comp)));
  }

  /* A panel without small print keeps the room the small print takes, so
     every panel is as tall as the contractor's. */
  .feature-band--redesign .feature-grid:last-child {
    margin-bottom: calc(83 * var(--comp) + 1.5 * max(12px, calc(12.34 * var(--comp))));
  }

  /* The other personas' 130px icons are drawn at 152 comp pixels, as in
     their 09.24 comps. */
  .feature-band--redesign .feature-icon {
    --icon-size: 152;
    position: absolute;
    top: 50%;
    left: calc(266.5 * var(--comp));
    width: calc(var(--icon-size) * var(--comp));
    height: calc(var(--icon-size) * var(--comp));
    margin: 0;
    transform: translate(-50%, -50%);
  }

  /* The Consultant comp draws its chart and people icons a little larger. */
  .feature-band--redesign .feature-icon--large {
    --icon-size: 157.2;
  }

  .feature-band--redesign .feature-icon--edge {
    --icon-size: 148.3;
  }

  /* The comp sets the clipboard a little below center. */
  .feature-band--redesign .feature-icon--calls {
    --icon-size: 159.8;
    margin-top: calc(9 * var(--comp));
  }

  .feature-band--redesign .feature-icon--conversations {
    --icon-size: 142.4;
  }

  .feature-band--redesign .feature-icon--revenue {
    --icon-size: 154.8;
  }

  /* The text box is sized in ems, so the lines break where the comp breaks
     them even once the type stops shrinking at its readability floor. */
  .feature-band--redesign .feature-card-text {
    max-width: 23.37em;
    margin-bottom: 0;
  }

  .feature-band--redesign .feature-card h3 {
    font-size: 1em;
    line-height: 1.222;
    padding-bottom: 0.168em;
  }

  .feature-band--redesign .feature-card p {
    font-size: 1em;
    line-height: 1.222;
  }

  /* The small print sits in the panel's bottom left corner. */
  .feature-band--redesign .feature-band-footnote {
    margin: calc(83 * var(--comp)) 0 0 calc(20.8 * var(--comp));
    font-size: max(12px, calc(12.34 * var(--comp)));
  }
}

.feature-icon {
  width: 130px;
  height: 130px;
  object-fit: contain;
  flex: none;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The feature list with icons, shared by the persona panels, the photo
   bands, and the install band. Text color comes from the surrounding band. */
.feature-grid {
  display: flex;
  flex-direction: column;
}

.feature-card {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.feature-card-text {
  min-width: 0;
}

.feature-card h3 {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1px;
  color: inherit;
  margin: 0;
  padding-bottom: 10px;
}

.feature-card p {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 23.8px;
  letter-spacing: 1px;
  margin: 0;
}

/* ---------- Checklist ---------- */
.check-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
}

.check-list img {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ---------- Cards for upgrade / product tiers ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.tier-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  position: relative;
}

.tier-card h3 {
  color: var(--color-primary-dark);
  font-size: 1.4rem;
}

.tier-card .tier-tagline {
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.tier-card ul.check-list {
  display: block;
  margin: 0 0 28px;
  flex: 1;
}

.tier-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.95rem;
}

.tier-card li img {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* "What We Offer" cards specifically: a solid-blue header band (title +
   tagline) over a white body, scoped to #products so it doesn't affect the
   residential upgrade cards, which reuse .tier-card with a different,
   simpler internal structure. Spacing and type follow the live site. */
#products {
  padding: var(--section-pad) 0;
}

#products .products-title {
  font-weight: 600;
  font-size: 4.5vh;
  line-height: 1;
  color: var(--color-primary);
  text-align: center;
  margin: calc(var(--row-pad) + 50px) 0 0;
  padding-bottom: 10px;
}

#products .card-grid {
  width: 80%;
  max-width: 1316px;
  margin: calc(var(--row-pad) * 2) auto 0;
  column-gap: 5.5%;
}

#products .tier-card {
  padding: 0;
  border: 3px solid var(--color-band);
  border-radius: 15px;
  box-shadow: none;
  overflow: hidden;
}

#products .tier-card-header {
  background: var(--color-primary);
  text-align: center;
  padding: 31px 11px 35px;
}

/* 56px as on the live site, scaled down only once "LiftCom™" would crowd
   the card's edges (below ~1300px wide). */
#products .tier-card-header h3 {
  color: #fff;
  font-size: clamp(36px, calc(4.6vw - 4px), 56px);
  line-height: 1;
  margin: 0;
  padding-bottom: 10px;
}

#products .tier-card-header .tier-tagline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 23.8px;
  color: var(--color-charcoal);
  margin: 11px 24px 0;
}

/* The gap under the header scales with the card (as on the live site). */
#products .tier-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: calc(5px + 9.27%) 20px 20px;
}

#products .tier-plus,
#products .tier-card li {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18.24px;
  color: var(--color-text-muted);
}

#products .tier-plus {
  line-height: 23.8px;
  margin: 0 0 19px;
}

#products .tier-card ul.check-list {
  margin: 0 0 44px;
  flex: none;
}

#products .tier-card li {
  position: relative;
  display: block;
  padding: 0 0 0 18px;
  line-height: 26px;
}

#products .tier-card li + li {
  margin-top: 29.24px;
}

#products .tier-card li img {
  position: absolute;
  left: -9px;
  top: 2px;
  width: 20px;
  height: 20px;
  margin: 0;
}

#products .tier-card-body > a.btn {
  align-self: center;
  margin-top: auto;
}

/* The tier cards (Monitor, Analyze, Verify) lead with a verb, and the three
   cards share rows (header, "plus" line, list, button), so their titles,
   lists, and buttons line up. Core's list sits level with the others' even
   though it has no "plus" line. */
#products .tier-card-header .tier-tagline--verb {
  font-size: 20px;
  line-height: 1.25;
}

#products .tier-verb {
  display: block;
  text-transform: uppercase;
}

#products .card-grid--aligned .tier-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}

/* The same header gap as above (5px + 9.27% of the card's width), in
   viewport units: percentage padding on a subgrid breaks its row sizing in
   Chrome. */
#products .card-grid--aligned .tier-card-body {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-top: calc(4.44px + min(2.2vw, 36.19px));
}

#products .card-grid--aligned .tier-plus {
  grid-row: 1;
}

#products .card-grid--aligned ul.check-list {
  grid-row: 2;
}

#products .card-grid--aligned .tier-card-body > a.btn {
  grid-row: 3;
  justify-self: center;
  align-self: end;
  margin-top: 0;
}

#products .tier-cta {
  text-align: center;
  margin: calc(var(--row-pad) * 2 + 20px) 0 calc(var(--row-pad) + 20px);
}

.btn-dark {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: #fff;
}

.btn-dark:hover {
  color: #fff;
}

.btn-dark.btn-square {
  padding: 10px 30px;
}

/* Learn More doesn't grow on hover, so its chevron tucks into the padding. */
.btn-dark.btn-square::after {
  right: 8px;
}

/* ========== Plan comparison ==========
   A View Full Comparison button beside Request Demo opens a feature chart
   under the What We Offer cards. The chart spans the cards' width, so the
   cmp unit is one pixel of the 2000px comp measured against that width (the
   comp's chart is 1613.8px wide): the values below are the comp's own
   measurements, with type floors for narrower screens. */
.plan-compare {
  --cmp: calc(min(80vw, 1316px) / 1613.8);
  --cmp-rule: max(1px, calc(2 * var(--cmp)));
}

/* The comp centers the gap between the two buttons, so each gets half the
   row: the comparison button ends at the gap and Request Demo starts there
   (its hover chevron then widens it outward, moving nothing else). */
.plan-compare-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 34px;
}

.plan-compare-actions > :first-child {
  justify-self: end;
}

.plan-compare-actions > :last-child {
  justify-self: start;
}

.plan-compare-actions .btn-primary,
.plan-compare-actions .btn-primary:hover {
  background: var(--color-blue-deep);
}

/* Standard button height, with the label on two lines as in the comp. */
.btn-square.plan-compare-toggle {
  min-width: 215px;
  padding: 6px 30px;
  line-height: 23px;
  text-align: center;
}

.plan-compare-toggle[aria-expanded="true"] .plan-compare-label-closed,
.plan-compare-toggle[aria-expanded="false"] .plan-compare-label-open {
  display: none;
}

/* View Full Comparison is blue like Request Demo, and the button turns dark
   gray once the chart is open. */
.plan-compare-toggle[aria-expanded="false"] {
  background: var(--color-blue-deep);
  border-color: var(--color-blue-deep);
}

.plan-compare :focus-visible {
  outline: 3px solid var(--color-blue-deep);
  outline-offset: 3px;
}

/* The button offsets subtract half the 66px button height, keeping each
   button's center where the comp puts it. */
.plan-compare-panel {
  width: 80%;
  max-width: 1316px;
  margin: calc(163.3 * var(--cmp) - 33px) auto 0;
  font-family: var(--font-heading);
  color: var(--color-blue-deep);
}

.plan-compare-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The header and every feature row share one grid: the feature text, then
   a column for each plan, centered on the comp's plan columns. */
.plan-compare-head,
.plan-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, calc(228.4 * var(--cmp)));
  column-gap: calc(28.4 * var(--cmp));
  align-items: center;
}

/* The plan names stay in view while the chart scrolls past. */
.plan-compare-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: calc(133.2 * var(--cmp));
  padding: 6px 0;
  border-top: var(--cmp-rule) solid var(--color-blue-deep);
  border-bottom: var(--cmp-rule) solid var(--color-blue-deep);
  background: var(--color-white);
}

/* Padding on the header's two blocks and the rows' cells sets their text
   where the comp does within the height they're centered in. */
.plan-compare-title {
  margin: 0;
  padding-top: calc(6.2 * var(--cmp));
  font-weight: 600;
  font-size: max(24px, calc(45.5 * var(--cmp)));
  line-height: 1.105;
  color: inherit;
}

.plan-compare-plan {
  margin: 0;
  padding-top: calc(3.6 * var(--cmp));
  font-weight: 600;
  font-size: max(24px, calc(46 * var(--cmp)));
  line-height: 1.059;
  text-align: center;
}

.plan-compare-plan span {
  display: block;
  font-weight: 400;
  font-size: max(15px, calc(29.4 * var(--cmp)));
  line-height: 1.187;
}

/* Rows keep the comp's height, with their text centered in it. Text that
   outgrows it at the type floors makes the row taller, and the padding keeps
   it clear of the rules (at 1280px and up it has room to spare). */
.plan-compare-row {
  min-height: calc(112.9 * var(--cmp));
  padding: 8px 0;
  border-bottom: var(--cmp-rule) solid var(--color-blue-deep);
}

/* The width is the middle of the range that keeps the comp's line breaks. */
.plan-compare-feature {
  max-width: calc(840.75 * var(--cmp));
  padding-top: calc(5.8 * var(--cmp));
}

.plan-compare-feature b,
.plan-compare-feature span {
  display: block;
}

.plan-compare-feature b {
  font-weight: 700;
  font-size: max(13px, calc(20.7 * var(--cmp)));
  line-height: 1.126;
}

.plan-compare-feature span {
  font-size: max(13px, calc(20.6 * var(--cmp)));
  line-height: 1.223;
}

.plan-compare-value {
  padding-top: calc(3.2 * var(--cmp));
  font-size: max(13px, calc(20.9 * var(--cmp)));
  line-height: 1.206;
  text-align: center;
}

/* The check box image pads its box, which fills 74.8% of it, so it is drawn
   larger to keep the box the comp's size. */
.plan-compare-icon {
  display: block;
  width: max(26px, calc(48.8 * var(--cmp)));
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
}

.plan-compare-icon--no {
  width: max(14px, calc(25.6 * var(--cmp)));
  aspect-ratio: 1;
  color: #5f6060;
}

/* The plan switcher and the Included / Not included words are for phones. */
.plan-compare-switch,
.plan-compare-word {
  display: none;
}

.plan-compare-close {
  margin: calc(160.1 * var(--cmp) - 33px) 0 calc(var(--row-pad) + 20px);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .plan-compare .btn-square,
  .plan-compare .btn-square::after {
    transition: none;
  }
}

/* ---------- Accordion (tier details) ---------- */
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-bg-alt);
  border: none;
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: left;
  color: var(--color-text);
}

.accordion-trigger .chevron {
  transition: transform var(--transition);
  flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-panel-inner {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.accordion-panel-inner .feature-item h4 {
  font-size: 1rem;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}

.accordion-panel-inner .feature-item p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ---------- CTA band ---------- */
/* ---------- About ---------- */
.about-section {
  background: var(--color-bg-gray);
  text-align: center;
  padding: 150px 0;
}

.about-section h2 {
  font-weight: 600;
  font-size: 52px;
  line-height: 1;
  color: var(--color-slate);
  margin: var(--row-pad) 0 0;
}

.about-section p {
  width: 80%;
  max-width: 1225px;
  margin: calc(var(--row-pad) * 2) auto var(--row-pad);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: var(--color-slate);
}

/* The second paragraph sits one blank line below the first, as in the comp. */
.about-section p + p {
  margin-top: 1.8em;
}

/* ---------- Alliance partner band ---------- */
/* Logo and tagline share one line, split where the live site's 2/5 + 3/5
   columns meet. */
.alliance-band {
  display: flex;
  align-items: center;
  min-height: 166px;
  background: var(--color-band);
  color: var(--color-white);
  padding: 0;
}

.alliance-inner {
  display: grid;
  grid-template-columns: 41.5% 1fr;
  column-gap: 0.65%;
  align-items: center;
}

.alliance-logo {
  justify-self: end;
  width: 405px;
  max-width: 100%;
  height: auto;
}

.alliance-band p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
}

/* ========== Photo bands (the LiftCom tiers) ==========
   Copy on the left 57.4% of the page, a full-bleed photo on the right. Sized
   in proportion to the page width to match the 2000px-wide design comp:
   --comp is one comp pixel, so the values below are measurements taken from
   the comp itself (type sizes and weights included). Font sizes have a floor
   so text stays readable on narrow screens. */
.photo-band {
  --comp: calc(100vw / 2000);
  display: grid;
  grid-template-columns: 57.4% 42.6%;
  color: var(--color-blue-deep);
  padding: 0;
}

/* The button keeps the site's standard (fixed) size, so its offsets subtract
   half its 66px height to keep its center where the comp puts it. */
.photo-band-copy {
  min-width: 0;
  padding: calc(104.5 * var(--comp)) 0 calc(166.5 * var(--comp) - 33px) calc(187 * var(--comp));
}

.photo-band-title {
  margin: 0;
  color: inherit;
}

.photo-band-title strong,
.photo-band-title > span {
  display: block;
  line-height: 1;
}

.photo-band-title strong {
  font-size: calc(61.3 * var(--comp));
  font-weight: 600;
}

.photo-band-title > span {
  margin-top: 0.125em;
  font-size: calc(51.3 * var(--comp));
  font-weight: 400;
}

.photo-band-intro {
  max-width: calc(862 * var(--comp));
  margin: calc(12.7 * var(--comp)) 0 calc(46.7 * var(--comp));
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: max(16px, calc(20.6 * var(--comp)));
  line-height: 1.226;
}

.photo-band .feature-grid {
  gap: calc(19.3 * var(--comp));
}

.photo-band .feature-card,
.install-band .feature-card {
  gap: calc(35.6 * var(--comp));
}

/* The icon PNGs carry 5% padding; the negative margin lines their artwork
   up with the text above. */
.photo-band .feature-icon,
.install-band .feature-icon {
  width: calc(116.6 * var(--comp));
  height: calc(116.6 * var(--comp));
  margin-left: calc(-5.8 * var(--comp));
}

.photo-band .feature-card-text,
.install-band .feature-card-text {
  max-width: calc(598 * var(--comp));
  padding-top: calc(2.7 * var(--comp));
}

.photo-band .feature-card h3,
.install-band .feature-card h3 {
  font-size: max(18px, calc(25.6 * var(--comp)));
  letter-spacing: 0;
  padding-bottom: 0.16em;
}

.photo-band .feature-card p,
.install-band .feature-card p {
  font-weight: 400;
  font-size: max(16px, calc(20.7 * var(--comp)));
  line-height: 1.208;
  letter-spacing: 0;
}

.photo-band-cta {
  max-width: calc(858 * var(--comp));
  margin-top: calc(155 * var(--comp) - 33px);
  text-align: center;
}

.photo-band .btn-primary,
.photo-band .btn-primary:hover {
  background: var(--color-blue-deep);
}

.photo-band-photo {
  background-size: cover;
  background-position: 73% center;
}

/* Pro flips the band: the photo takes the left 42.08% and the copy sits on
   a light-gray panel, inset from the photo's edge. Its comp sets the copy a
   little lower than Core's and ends the band 3px sooner. */
.photo-band--reverse {
  grid-template-columns: 42.08% 57.92%;
  background: var(--color-bg-panel);
}

.photo-band--reverse .photo-band-copy {
  grid-column: 2;
  grid-row: 1;
  padding: calc(106.5 * var(--comp)) 0 calc(160.5 * var(--comp) - 33px) calc(198.4 * var(--comp));
}

.photo-band--reverse .photo-band-photo {
  grid-column: 1;
  grid-row: 1;
  background-position: 29.6% center;
}

/* Wider than Core's, so the lines break where the comps break them. */
.photo-band--reverse .feature-card-text,
.photo-band--premier .feature-card-text {
  max-width: calc(616 * var(--comp));
}

/* The Pro comp draws its Health Score and door icons 3% smaller. */
.photo-band .feature-icon--small {
  padding: calc(1.8 * var(--comp));
}

/* Premier keeps Core's layout with Pro's copy inset and a slightly narrower
   photo. Its intro runs a line shorter, but the comp keeps the band at full
   height, so the extra room goes below the button. */
.photo-band--premier {
  grid-template-columns: 57.79% 42.21%;
}

.photo-band--premier .photo-band-copy {
  padding-left: calc(198.4 * var(--comp));
  padding-bottom: calc(185.9 * var(--comp) - 33px);
}

/* Room for its longest intro line to stay put across browsers. */
.photo-band--premier .photo-band-intro {
  max-width: calc(871 * var(--comp));
}

.photo-band--premier .photo-band-photo {
  background-position: 71% center;
}

/* Connect flips like Pro, with a slightly wider photo and Core's top inset.
   A second add-on (Guardian) follows its features, and the comp sets one
   card's lines narrower than the other's. */
.photo-band--connect {
  grid-template-columns: 42.32% 57.68%;
}

.photo-band--connect .photo-band-copy {
  padding: calc(104.5 * var(--comp)) 0 calc(154.3 * var(--comp) - 33px) calc(198.4 * var(--comp));
}

.photo-band--connect .photo-band-photo {
  background-position: 74.5% center;
}

.photo-band-addon {
  margin-top: calc(99.4 * var(--comp));
}

.photo-band-addon .photo-band-intro {
  max-width: calc(813 * var(--comp));
  margin-bottom: 0;
}

.photo-band--connect .photo-band-cta {
  margin-top: calc(205.3 * var(--comp) - 33px);
}

/* ========== Install band ==========
   A centered column on the redesign blue, sized in comp units like the photo
   bands, whose feature-list sizes it shares: the title, the product photo in
   a white frame with a drop shadow, then the features as a centered block. */
.install-band {
  --comp: calc(100vw / 2000);
  background: var(--color-blue-deep);
  color: var(--color-white);
  padding: calc(102.5 * var(--comp)) 0 calc(108.2 * var(--comp));
}

.install-band-title {
  margin: 0;
  color: inherit;
  font-weight: 600;
  font-size: calc(61.9 * var(--comp));
  line-height: 1;
  text-align: center;
}

.install-band-photo {
  width: calc(886.2 * var(--comp));
  margin: calc(39.4 * var(--comp)) auto 0;
  border: calc(15 * var(--comp)) solid var(--color-white);
  box-shadow: calc(10 * var(--comp)) calc(10 * var(--comp)) calc(21 * var(--comp)) rgba(0, 0, 0, 0.52);
}

.install-band .feature-grid {
  width: fit-content;
  margin: calc(97.6 * var(--comp)) auto 0;
  gap: calc(39.4 * var(--comp));
}

/* The wider card's text box sets the list's width, which centers it where
   the comp does. */
.install-band .feature-card-text {
  max-width: calc(607.6 * var(--comp));
}

/* A card whose comp sets its lines narrower than its neighbor's. */
.photo-band .feature-card-text--narrow,
.install-band .feature-card-text--narrow {
  max-width: calc(545 * var(--comp));
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background: #fff;
  color: var(--color-text);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-light);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* The live site sizes this label and "Contact Details:" to the window's
   height, on a fixed line. */
.contact-form-label {
  font-size: 2vh;
  line-height: 23.8px;
  color: var(--color-text-muted);
  margin: 0 0 15px;
}

/* Consent checkbox styled like the live site's: an 18px gray square set
   inline at the start of the text, with a blue check when ticked. As there,
   the text scales with the window's height, and the gap below it with the
   form's width. */
.form-checkbox {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.2vh;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 1.545%;
  cursor: pointer;
}

.form-checkbox input {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  background: #eee;
  border: 0;
  cursor: pointer;
}

.form-checkbox input:checked {
  background: #eee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%232ca1d6' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.form-checkbox input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The live site's consent text is plain, so the Privacy Policy link takes
   the text's gray and only shows itself on hover or focus. */
.form-checkbox a,
.form-checkbox a:hover {
  color: inherit;
}

.form-checkbox a:hover,
.form-checkbox a:focus-visible {
  text-decoration: underline;
}

.form-success {
  display: none;
  background: #e7f7ee;
  border: 1px solid #8fd6ac;
  color: #1c6b3f;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
}

.form-success.is-visible {
  display: block;
}

/* Contact section layout (live site: a 3/5 + 2/5 row capped at 1413px) */
.contact-section {
  background: var(--color-white);
  padding: 0;
}

.contact-title {
  font-size: 3vw;
  line-height: 1;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
  padding: calc(var(--row-pad) + 50px) 0 10px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 57.8% 36.7%;
  column-gap: 5.5%;
  align-items: start;
  width: 80%;
  max-width: 1413px;
  margin: calc(var(--row-pad) * 2) auto 0;
  padding-bottom: var(--row-pad);
}

/* Field spacing scales with the form's width, as on the live site. (The
   half-width pair spaces from the grid, since percentages on grid items
   resolve against their cell.) */
#contactus .form-grid {
  column-gap: 3.09%;
  row-gap: 0;
  margin-bottom: 3.09%;
}

#contactus .form-field {
  margin-bottom: 3.09%;
}

/* The pair may shrink below its inputs' built in width, so it never runs
   past the fields under it. */
#contactus .form-grid .form-field {
  margin-bottom: 0;
  min-width: 0;
}

#contactus .form-field input,
#contactus .form-field textarea {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  padding: 16px;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  color: var(--color-text-muted);
}

#contactus .form-field input::placeholder,
#contactus .form-field textarea::placeholder {
  color: #a8afb3;
}

#contactus .form-field textarea {
  height: 150px;
}

/* The live form's submit is chunkier than the other buttons and doesn't
   shift on hover. It sits where the live one does: 18px in from a box that
   starts 3% of the form's width left of the fields. */
.btn-square.contact-submit,
.btn-square.contact-submit:hover {
  margin-left: calc(18px - 3%);
  padding: 6px 50px;
  border-width: 1vh;
}

.contact-details {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 23.8px;
}

/* The heading and rows are spaced by 7.49% of the column's width, the live
   site's module spacing. */
.contact-details h3 {
  font-size: 2vh;
  line-height: 23.8px;
  color: var(--color-text-muted);
  margin: 0 0 7.49%;
}

.contact-details .detail-row {
  margin-bottom: 7.49%;
}

.contact-details .detail-row:last-child {
  margin-bottom: 0;
}

.contact-details .detail-label {
  display: block;
  font-weight: 700;
  color: var(--color-text-muted);
}

.contact-details a {
  font-weight: 500;
}

/* ---------- Modal (Dealer Login) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 38, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: #fff;
  border-radius: var(--radius);
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-light);
  padding: 6px;
}

.modal-close:hover {
  color: var(--color-text);
}

.modal h2 {
  font-size: 1.4rem;
  text-align: center;
}

/* ---------- Footer ---------- */
/* Two centered lines on charcoal, as on the live site. */
.site-footer {
  background: var(--color-charcoal);
  color: var(--color-white);
  text-align: center;
  padding: calc(var(--row-pad) + 10px) 0;
}

.footer-copyright {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: max(2.1vh, 16px);
  line-height: 1.6;
}

.footer-links {
  margin: 2.75vw 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: max(1vw, 14px);
  line-height: 23.8px;
}

.footer-links a {
  color: var(--color-primary);
  text-decoration: underline;
  white-space: nowrap;
}

.footer-links a:hover {
  color: var(--color-white);
}

/* =========================================================
   Responsive
   ========================================================= */
/* Below 1280px the photo column turns narrow and tall (the text stops
   shrinking at its readability floor), so recenter on the monitor to keep
   it whole in the frame. */
@media (min-width: 981px) and (max-width: 1279px) {
  .photo-band-photo,
  .photo-band--premier .photo-band-photo {
    background-position: 63% center;
  }

  .photo-band--reverse .photo-band-photo {
    background-position: 36% center;
  }

  .photo-band--connect .photo-band-photo {
    background-position: 74.5% center;
  }
}

@media (max-width: 980px) {
  /* Heading on its own line; icons wrap three to a row. */
  .persona-selector-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 5%;
    padding-bottom: 12px;
  }

  .persona-selector h2 {
    flex: 0 0 100%;
    font-size: 40px;
    text-align: left;
    margin-top: 32px;
  }

  .persona-icon {
    width: 28%;
  }

  .persona-icon .persona-label {
    font-size: 14px;
  }

  /* Feature bands stack, with the persona photo leading as a banner. */
  .feature-band {
    grid-template-columns: 1fr;
  }

  .why-liftcom-band .feature-band {
    min-height: 0;
  }

  .persona-panel-photo {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  .feature-band-copy {
    padding: 40px 24px;
  }

  .feature-band-title {
    font-size: 40px;
    padding-top: 0;
    margin: 0 0 28px;
  }

  .feature-band-footnote {
    margin: 32px 0 0;
  }

  .feature-band .feature-grid {
    gap: 28px;
    margin: 0;
  }

  .feature-band .feature-card {
    min-height: 0;
  }

  .why-liftcom-band .feature-card:nth-child(-n+2) {
    top: 0;
  }

  .feature-band .feature-icon,
  .feature-band .feature-card-text {
    margin-bottom: 0;
  }

  /* Photo bands stack with the photo leading as a banner. */
  .photo-band {
    grid-template-columns: 1fr;
  }

  .photo-band--reverse .photo-band-copy,
  .photo-band--reverse .photo-band-photo {
    grid-column: auto;
    grid-row: auto;
  }

  .photo-band-photo,
  .photo-band--reverse .photo-band-photo,
  .photo-band--premier .photo-band-photo {
    order: -1;
    aspect-ratio: 16 / 9;
    background-position: 50% 25%;
  }

  /* The lobby shot is a tall one: show its elevators and floor. */
  .photo-band--connect .photo-band-photo {
    background-position: 50% 68%;
  }

  .photo-band-copy,
  .photo-band--reverse .photo-band-copy,
  .photo-band--premier .photo-band-copy {
    padding: 40px 24px;
  }

  .photo-band-title strong {
    font-size: 40px;
  }

  .photo-band-title > span {
    font-size: 33px;
  }

  .photo-band-intro,
  .photo-band--premier .photo-band-intro,
  .photo-band-addon .photo-band-intro,
  .photo-band .feature-card-text,
  .install-band .feature-card-text,
  .photo-band-cta {
    max-width: none;
  }

  .photo-band-intro {
    margin: 16px 0 28px;
  }

  .photo-band .feature-grid {
    gap: 24px;
  }

  .photo-band .feature-card,
  .install-band .feature-card {
    gap: 20px;
  }

  .photo-band .feature-icon,
  .install-band .feature-icon {
    width: 80px;
    height: 80px;
    margin-left: -4px;
  }

  .photo-band-addon {
    margin-top: 40px;
  }

  .install-band {
    padding: 48px 24px;
  }

  .install-band-title {
    font-size: 40px;
  }

  .install-band-photo {
    width: 100%;
    margin-top: 28px;
    border-width: 8px;
  }

  .install-band .feature-grid {
    width: auto;
    margin-top: 36px;
    gap: 24px;
  }

  .photo-band-cta,
  .photo-band--connect .photo-band-cta {
    margin-top: 32px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #products .products-title {
    font-size: 40px;
    margin-top: 24px;
  }

  #products .card-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  #products .tier-card-header h3 {
    font-size: 48px;
  }

  #products .card-grid--aligned .tier-card-body {
    padding-top: 36px;
  }

  /* The plan comparison keeps all three plans side by side, at fixed
     sizes in place of the comp's. */
  .plan-compare-panel {
    width: auto;
    margin: 48px 24px 0;
  }

  .plan-compare-head,
  .plan-compare-row {
    grid-template-columns: minmax(0, 1fr) repeat(3, clamp(88px, 15vw, 112px));
    column-gap: 12px;
  }

  .plan-compare-head {
    min-height: 0;
    padding: 14px 0;
  }

  .plan-compare-title,
  .plan-compare-plan,
  .plan-compare-feature,
  .plan-compare-value {
    padding-top: 0;
  }

  .plan-compare-title {
    font-size: 26px;
  }

  .plan-compare-plan {
    font-size: 22px;
  }

  .plan-compare-plan span {
    font-size: 15px;
  }

  .plan-compare-row {
    min-height: 0;
    padding: 14px 0;
  }

  .plan-compare-feature {
    max-width: none;
  }

  .plan-compare-feature b {
    font-size: 15px;
    line-height: 1.25;
  }

  .plan-compare-feature span,
  .plan-compare-value {
    font-size: 14px;
  }

  /* The comp's hand line break only suits the wide desktop column. */
  .plan-compare-break {
    display: none;
  }

  .plan-compare-icon {
    width: 28px;
  }

  .plan-compare-icon--no {
    width: 15px;
  }

  .plan-compare-close {
    margin-top: 40px;
  }

  .about-section {
    padding: 80px 0;
  }

  .about-section h2 {
    font-size: 40px;
  }

  .about-section p {
    font-size: 18px;
    margin-top: 32px;
  }

  .alliance-band {
    padding: 32px 0;
  }

  .alliance-inner {
    grid-template-columns: 1fr;
    row-gap: 16px;
    text-align: center;
  }

  .alliance-logo {
    justify-self: center;
    width: 280px;
  }

  .alliance-band p {
    font-size: 22px;
  }

  /* The live site's tablet layout: its rows pad 30px, and its modules and
     stacked columns space 30px apart. */
  .contact-section,
  .home-top {
    --row-pad: 30px;
  }

  /* The live site sets the residential lead flush right on tablets. */
  .home-intro-lead {
    text-align: right;
  }

  /* The live site stacks these bands on tablets, 30px apart: the copy with
     a far larger lead, and the photo column, which shrinks to a thin strip.
     It also pads the second heading line 150px from the top. */
  .home-band {
    flex-direction: column;
    row-gap: 30px;
  }

  .home-band-copy,
  .home-band-photo {
    width: auto;
  }

  .home-band-photo {
    height: 5px;
  }

  .home-band-title {
    padding-left: 5px;
  }

  .home-band-subtitle {
    padding: 150px 5px 10px;
  }

  .home-band-text {
    margin-bottom: 30px;
  }

  .home-band-lead {
    font-size: 59px;
  }

  .home-band--construction .home-band-title {
    padding-top: 150px;
  }

  .home-band--family .home-band-title {
    padding: 150px 5px 10px;
  }

  /* The live site widens the plan table to 90% here, with 30px gaps. */
  .home-plans-subtitle {
    margin-bottom: 30px;
  }

  .home-plans-box {
    max-width: 90%;
    margin-bottom: 30px;
  }

  /* The upgrade rows take the live site's 30px padding, and the plan cards
     stack 30px apart. The live site also moves the Pro card 100px right
     here, past the edge of the window; these stay in line. */
  .home-upgrade-intro {
    padding: 30px 0;
  }

  .home-upgrade-title {
    margin-bottom: 30px;
  }

  .home-upgrade-cards {
    display: block;
    padding: 30px 0 40px;
  }

  .home-upgrade-card + .home-upgrade-card {
    margin-top: 30px;
  }

  .home-upgrade-ribbon {
    font-size: 28px;
  }

  .home-cta {
    padding: 30px 0 20px;
  }

  .home-cta-action {
    margin-top: 65vh;
  }

  .contact-title {
    font-size: 46px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .contact-details h3,
  .contact-details .detail-row {
    margin-bottom: 30px;
  }

  .footer-links {
    margin-top: 20px;
  }

  .hero-main {
    height: auto;
    min-height: 520px;
    padding: 170px 0 90px;
  }

  .hero-main h1 {
    font-size: clamp(40px, 8vw, 72px);
  }

  .hero-main .lead {
    font-size: 20px;
  }
}

/* The live site's phone layout, from 767px down: the contact form's title
   shrinks and its Name and Phone stack, spaced like the fields below them,
   and the residential headline moves under its photo. */
@media (max-width: 767px) {
  .contact-title {
    font-size: 30px;
  }

  /* The photo stands alone and the headline follows it, centered and set in
     Open Sans, as on the live site. */
  .home-hero-title {
    position: static;
    margin: 33.2px 16px 24px;
    font-family: var(--font-body);
    font-size: 40px;
    text-align: center;
  }

  .home-hero-title strong {
    padding-bottom: 10px;
    font-size: 48px;
  }

  .home-intro {
    padding: 0 16px 31.6px;
    font-size: 16px;
  }

  .home-intro p {
    max-width: 90%;
    margin: 0 auto;
  }

  .home-intro-lead {
    font-size: 22.4px;
    text-align: center;
  }

  .home-band-photo {
    height: 1px;
  }

  .home-band-phone-photo,
  .home-band-phone-photo--pixel {
    display: block;
    width: 100%;
    height: auto;
    visibility: visible;
  }

  .home-band-title {
    padding-top: 24px;
    font-size: 28.8px;
  }

  .home-band-subtitle {
    padding-top: 0;
    font-size: 24px;
  }

  .home-band-text {
    margin: 16px 20px 30px;
  }

  .home-band-lead {
    font-size: 16px;
  }

  .home-band--why .home-band-lead {
    font-size: 17.6px;
  }

  .home-band--construction .home-band-title {
    padding-top: 0;
  }

  .home-band--construction .home-band-title,
  .home-band--construction .home-band-subtitle {
    font-size: 36px;
  }

  .home-band--family .home-band-title {
    padding-top: 20px;
    font-size: 36px;
  }

  /* The plan table shows one plan at a time, as the business chart does on
     phones: a Core and Pro switcher takes the place of the plan names, and
     each row pairs the feature with that plan's value. The frame is capped
     at 400px, as on the live site. */
  .home-plans-box {
    max-width: min(400px, 95%);
    margin-bottom: 0;
  }

  .home-plans-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 18px 12px;
    background: var(--color-band);
  }

  .home-plans-switch button {
    min-height: 44px;
    padding: 8px 6px;
    border: 2px solid var(--color-white);
    border-radius: 999px;
    background: transparent;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--color-white);
  }

  .home-plans-switch button[aria-pressed="true"] {
    background: var(--color-white);
    color: var(--color-band);
  }

  .home-plans-switch button:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
  }

  .home-plans-table thead,
  .home-plans-table[data-show="core"] [data-plan="pro"],
  .home-plans-table[data-show="pro"] [data-plan="core"] {
    display: none;
  }

  .home-plans-table tbody th,
  .home-plans-table td,
  .home-plans-table td:last-child,
  .home-plans-table .home-plans-text[data-plan="core"] {
    padding: 14px 20px 14px 10px;
    border-top-color: var(--color-primary-light);
    font-size: 14px;
    line-height: 1.4;
  }

  .home-plans-table tbody th {
    width: 55%;
    padding: 14px 10px 14px 20px;
  }

  .home-plans-table td {
    text-align: right;
  }

  .home-plans-table tbody tr:first-child > * {
    border-top: 0;
  }

  .home-plans-table tbody tr:not(:last-child) > *::after {
    content: none;
  }

  .home-plans-table img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }

  .home-plans-word {
    display: inline;
    margin-left: 6px;
    font-size: 13px;
    vertical-align: middle;
  }

  .home-plans-word--no {
    color: var(--color-text-muted);
  }

  /* The upgrade introduction sets flush left, with the heading's two lines
     as separate paragraphs, as on the live site. */
  .home-upgrade-intro {
    text-align: left;
  }

  .home-upgrade-title {
    font-size: 32px;
  }

  .home-upgrade-title strong {
    display: block;
    padding-bottom: 1em;
  }

  .home-upgrade-title br {
    display: none;
  }

  .home-upgrade-ribbon {
    --tail: min(1.59em, 10vw - 0.9em - 2px);
    font-size: 22.4px;
  }

  .home-cta-title {
    margin-top: 40px;
    font-size: 40px;
  }

  .home-cta-action {
    margin-top: 576px;
  }

  #contactus .form-grid {
    grid-template-columns: 1fr;
  }

  #contactus .form-grid .form-field:first-child {
    margin-bottom: 3.09%;
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    top: 83px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px;
    gap: 18px;
    border-bottom: 1px solid var(--color-border);
    /* Fully above the viewport while closed (not just its own height up,
       which left it covering the header), and out of the tab order. */
    transform: translateY(calc(-100% - 83px));
    visibility: hidden;
    transition: transform var(--transition), visibility 0s linear 0.2s;
    max-height: calc(100vh - 83px);
    overflow-y: auto;
  }

  .main-nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--transition);
  }

  .main-nav.is-open a:not(.btn) {
    color: var(--color-text);
  }

  .header-actions .btn .btn-label-full {
    display: none;
  }

  .persona-icon {
    width: 42%;
  }

  .feature-card {
    gap: 20px;
  }

  .feature-icon {
    width: 72px;
    height: 72px;
  }

  .card-grid,
  .form-grid,
  .accordion-panel-inner,
  .check-list {
    grid-template-columns: 1fr;
  }

  section {
    padding: 52px 0;
  }

  .hero {
    padding: 90px 0 70px;
  }

  .hero-main {
    min-height: 460px;
    padding: 140px 0 72px;
  }

  .hero-main .lead {
    font-size: 17px;
    margin-top: 20px;
  }
}

/* Phones: the plan comparison shows one plan at a time. The plan names give
   way to a Core, Pro and Premier switcher that stays in view, and each row
   pairs the feature with that plan's value, spelled out beside its icon. */
@media (max-width: 640px) {
  .plan-compare-head {
    display: block;
    position: static;
    padding: 16px 0;
    border-bottom: 0;
  }

  .plan-compare-plan {
    display: none;
  }

  .plan-compare-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-blue-deep);
    background: var(--color-white);
  }

  .plan-compare-switch button {
    min-height: 44px;
    padding: 8px 4px;
    border: 2px solid var(--color-blue-deep);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-blue-deep);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
  }

  .plan-compare-switch button[aria-pressed="true"] {
    background: var(--color-blue-deep);
    color: var(--color-white);
  }

  .plan-compare-row {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .plan-compare-rows[data-show="core"] .plan-compare-value:not([data-plan="core"]),
  .plan-compare-rows[data-show="pro"] .plan-compare-value:not([data-plan="pro"]),
  .plan-compare-rows[data-show="premier"] .plan-compare-value:not([data-plan="premier"]) {
    display: none;
  }

  .plan-compare-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    text-align: right;
  }

  .plan-compare-icon {
    flex: none;
    width: 26px;
    margin: 0;
  }

  .plan-compare-icon--no {
    width: 14px;
  }

  .plan-compare-word {
    display: inline;
    font-size: 13px;
  }

  .plan-compare-icon--no + .plan-compare-word {
    color: #5f6060;
  }
}

/* The live site stacks the residential features one to a row here, each
   centered under its icon. */
@media (max-width: 600px) {
  .home-band-list {
    grid-template-columns: 1fr;
  }

  .home-band-list li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* The two buttons above the chart stack once they no longer fit side by
   side. */
@media (max-width: 480px) {
  .plan-compare-actions {
    grid-template-columns: 1fr;
    row-gap: 16px;
    justify-items: center;
  }

  .plan-compare-actions > :first-child,
  .plan-compare-actions > :last-child {
    justify-self: center;
  }

  .plan-compare-actions .btn-primary {
    min-width: 215px;
  }
}

/* =========================================================
   Inner pages: Request Demo, Get In Touch, Privacy Policy, Terms of Use
   ========================================================= */
/* As on the live site: the lobby photo with the page's name under the
   header, then the page on a light-gray band. Sizes are the live site's.
   The top padding clears the 83px header. */
.page-hero {
  background: url("../images/hero-commercial-bg.jpg") center / cover no-repeat;
  padding: calc(83px + var(--section-pad) + var(--row-pad)) 0 calc(var(--section-pad) + var(--row-pad));
  text-align: center;
}

.page-hero h1 {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 10px;
  font-weight: 500;
  font-size: 67.5px;
  line-height: 1;
  color: var(--color-white);
}

.page-body,
.booking {
  background: var(--color-bg-muted);
  padding: var(--section-pad) 0;
}

.page-body .content-row {
  padding-bottom: var(--row-pad);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 23.8px;
  color: var(--color-text-muted);
}

/* The live text's numbered section labels are bold paragraphs set off by
   blank ones. Here they're headings, spaced the same. */
.page-body h2,
.page-body h3,
.page-body h4 {
  margin: 39.8px 0 0;
  padding-bottom: 16px;
  font: inherit;
  font-weight: 700;
  color: inherit;
}

.page-body p,
.page-body ul,
.page-body ol {
  margin: 0;
  padding-bottom: 16px;
}

/* The live lists sit inside a second, bulletless list, which doubles the
   space below them. */
.page-body ul {
  list-style: disc;
  padding: 0 0 32px 32px;
}

.page-body ol {
  list-style: decimal;
  padding: 0 0 32px 32px;
}

.page-body li {
  line-height: 26px;
}

.page-body b,
.page-body strong {
  font-weight: 700;
}

.page-body .content-row > :first-child {
  margin-top: 0;
}

/* Divi's rule: the last paragraph, not the last element, drops its space. */
.page-body .content-row > p:last-of-type {
  padding-bottom: 0;
}

/* ---------- Request Demo: the booking form ----------
   The live page's Booking Calendar: a month calendar beside the time slots,
   then the contact fields as a second step. It fills 99% of the row, as
   there. Without JavaScript both steps show, with a plain date field in
   place of the calendar. */
.booking .content-row {
  padding: 28px 0 var(--row-pad);
  font-family: var(--font-body);
}

.booking-form,
.booking-thanks {
  width: 99%;
}

.booking-thanks {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 23.8px;
  color: var(--color-text-muted);
}

.booking-step1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3%;
  align-items: start;
}

/* Grid cells may shrink below their fields' built in widths. */
.booking-step1 > *,
.booking-fields > * {
  min-width: 0;
}

.booking-date {
  padding: 9.8px 0 24.8px;
}

.booking-calendar {
  width: 341px;
  max-width: 100%;
  margin: 11.5px auto 0;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.08);
}

.booking-calendar-head {
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 17px;
}

.booking-calendar-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 40px;
  color: #000;
}

.booking-calendar-head button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 4px;
  color: #555;
}

.booking-calendar-head button:disabled {
  visibility: hidden;
}

.booking-calendar-head button:hover {
  color: #000;
}

.booking-calendar-head button:focus-visible {
  outline: 2px solid #5b89c5;
  outline-offset: -2px;
}

.booking-calendar-head svg {
  width: 8px;
  height: 14px;
}

.booking-calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.booking-calendar-grid th {
  height: 23.8px;
  padding: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 21.8px;
  text-align: center;
  text-transform: uppercase;
  color: #555;
  border: 2px solid var(--color-white);
}

.booking-calendar-grid abbr {
  text-decoration: none;
}

.booking-calendar-grid td {
  height: 44.5px;
  padding: 0;
  vertical-align: top;
  border: 2px solid transparent;
}

/* A square a little narrower than its cell, against the cell's top left, as
   the live calendar draws it. */
.booking-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 4px);
  aspect-ratio: 1;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  color: rgba(212, 212, 212, 0.78);
  background: none;
  border: 2px solid transparent;
  border-radius: 7%;
}

.booking-day:not(:disabled) {
  color: #2b5524;
}

.booking-day:not(:disabled):hover,
.booking-day:focus-visible {
  border-color: #5b89c5;
  outline: none;
}

.booking-day[aria-pressed="true"] {
  color: var(--color-white);
  background: rgba(91, 137, 197, 0.8);
  border-color: #5b89c5;
}

.booking-day:disabled {
  cursor: default;
}

/* Every slot requested. */
.booking-day--booked {
  color: #973030;
  border-color: #710d0d;
}

.booking-legend-day--booked span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #973030;
  border: 2px solid #710d0d;
}

.booking-legend {
  display: flex;
  justify-content: center;
  margin-top: 39px;
  font-size: 15px;
  font-weight: 500;
  line-height: 23.8px;
  color: var(--color-text-muted);
}

.booking-legend li {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 7px 15px 7px 0;
}

.booking-legend-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 41px;
  font-size: 14px;
  font-weight: 600;
}

.booking-legend-day--open {
  color: #2b5524;
}

.booking-label {
  display: block;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 35px;
  color: var(--color-text-muted);
}

.booking-date-fallback input {
  display: block;
  width: 100%;
  max-width: 341px;
}

.booking-slots {
  min-width: 0;
  margin: 0;
  padding: 9.8px 0;
  border: 0;
}

/* Floated, so the legend sits inside the fieldset's padding like any label
   instead of on its top edge. */
.booking-slots legend {
  float: left;
  width: 100%;
}

/* The live slot picker's rules: as many slots to a row as fit, each growing
   to at most 250px. */
.booking-slot-grid {
  display: flex;
  flex-wrap: wrap;
  clear: both;
  gap: 15px;
}

.booking-slot {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: min(90px, 100%);
  max-width: 250px;
  margin: 1.5px 0;
}

.booking-slot input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.booking-slot span {
  display: block;
  padding: 3.75px 15px;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  color: #5599dd;
  background: rgba(249, 253, 255, 0.1);
  border: 2px solid #5599dd;
  border-radius: 5px;
  cursor: pointer;
}

.booking-slot input:checked + span {
  color: var(--color-white);
  background: #5599dd;
}

.booking-slot input:focus-visible + span {
  outline: 2px solid #1f5f99;
  outline-offset: 2px;
}

/* Booked, or already started today. */
.booking-slot input:disabled + span {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: default;
}

.booking-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19.6px 3%;
  padding-top: 9.8px;
}

.booking-field--wide {
  grid-column: 1 / -1;
}

.booking-field input,
.booking-field textarea,
.booking-date-fallback input {
  height: 43px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}

.booking-field input,
.booking-field textarea {
  display: block;
  width: 100%;
}

.booking-field textarea {
  height: 92.4px;
  padding: 14px;
  line-height: 20.8px;
  resize: vertical;
}

.booking-field input:focus,
.booking-field textarea:focus,
.booking-date-fallback input:focus {
  outline: none;
  border-color: #5599dd;
  box-shadow: 0 0 0 3px rgba(85, 153, 221, 0.25);
}

/* The live form's divider and step buttons. */
.booking-nav {
  display: flex;
  justify-content: flex-end;
  margin: 16.8px 0 9.8px;
  padding-top: 16.8px;
  border-top: 1.2px solid #ececec;
}

/* The live button's type scales with the window, from 14px to 15.75px. */
.booking-button {
  height: 44px;
  padding: 0 2.2em;
  font-family: var(--font-body);
  font-size: clamp(14px, 13.4176px + 0.208vw, 15.75px);
  font-weight: 500;
  line-height: 40px;
  color: rgba(68, 68, 68, 0.88);
  background: #fdfdfd;
  border: 2px solid rgba(238, 238, 238, 0.71);
  border-radius: 5.9px;
  box-shadow: 0 2px 10px 2px rgba(255, 255, 255, 0.33);
}

.booking-button:hover {
  color: #333;
  border-color: #ddd;
}

.booking-button:focus-visible {
  outline: 2px solid #5599dd;
  outline-offset: 2px;
}

/* Kept right when Back is hidden, which it is without JavaScript. */
.booking-button--send {
  margin-left: auto;
  font-weight: 400;
}

/* ---------- Form errors ----------
   Server-side problems: a box above the form like .form-success, in the
   Dealer Login message's red, and a line under each field it names. */
.form-error {
  background: #fdecea;
  border: 1px solid #f3b4ac;
  color: #a52f22;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
}

.form-error p {
  margin: 0;
}

.form-error p + p {
  margin-top: 8px;
}

.errorlist,
.booking-hint {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #a52f22;
}

.form-field > .errorlist {
  margin-top: 0;
}

#contactus .form-field [aria-invalid="true"],
.booking-field [aria-invalid="true"],
.booking-date-fallback [aria-invalid="true"] {
  border-color: #a52f22;
}

/* Focused on load so screen readers read a form's result first. */
[data-form-result]:focus {
  outline: none;
}

@media (max-width: 980px) {
  .page-hero {
    padding: 339px 0 260px;
  }

  .page-hero h1 {
    font-size: 100px;
  }

  .page-body,
  .booking {
    padding: 50px 0;
  }

  .page-body .content-row,
  .booking .content-row {
    padding-bottom: 30px;
  }
}

/* The live booking form stacks its fields from 782px down. */
@media (max-width: 782px) {
  .booking-step1,
  .booking-fields {
    grid-template-columns: 1fr;
  }

  .booking-step1 {
    row-gap: 9.8px;
  }
}

@media (max-width: 767px) {
  .page-hero h1 {
    font-size: 28px;
  }

  .booking-calendar-grid td {
    height: 38.2px;
  }
}