/* Shared styles for the comparison pages (/compare/lofty-front/*, ported from the Lofty Front site).
   Ported from blaze-frontend pages/comparison/components/comparison.less and the
   blaze design tokens / .wrap / .btn / .section-eyebrow it depends on.
   Styles for the lead modal / inline form / hidden header Sign In live in the standalone component LoftyNew/Partials/lofty-front-lead/index.css.
   The closing CTA of the original Front page (BlazeCompareCtaStrip) is intentionally not ported, per requirements.
   Everything is scoped under .lf-compare and does not affect other pages of the site; when the business is retired, just delete the whole
   LoftyNew/Templates/compare/lofty-front/ directory. */

@font-face {
  font-family: 'STK Bureau Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://static.chimeroi.com/servicetool-temp/2026-7-6/8/31a86efac73a4a75_STKBureauSans-SemiBold.woff2') format('woff2');
}

/* ============ Design tokens + root scope (maps to the blaze-doc layout root) ============ */
.lf-compare {
  --bg: #F6F7F9; --bg-soft: #F6F7F9; --bg-card: #FFFFFF;
  --border: #E7E8EC;
  --text: #1A1622; --text-dim: #4B4754; --text-muted: #6C6775;
  --accent: #6E52BE; --accent-deep: #5B3F9E; --accent-light: #7C5CC4;
  --accent-soft: #EFE9F6; --sand: #F3F0FB;
  --gold: #8A8A93;
  --error: #E5484D;
  --shadow-sm: 0 1px 2px rgba(20,16,32,.04);
  --shadow-md: 0 4px 16px rgba(20,16,32,.06), 0 1px 4px rgba(20,16,32,.04);
  --shadow-lg: 0 24px 48px -12px rgba(20,16,32,.12), 0 6px 18px rgba(20,16,32,.05);

  /* The site header nav is position:fixed and covers about 60px at the top of the page (same on desktop/mobile); reserve that space here */
  padding-top: 60px;
  background: var(--bg); color: var(--text);
  font-family: 'Manrope', -apple-system, sans-serif;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(91, 63, 158, 0.06), transparent 35%),
    radial-gradient(circle at 90% 4%, rgba(91, 63, 158, 0.04), transparent 40%);
}
.lf-compare * { margin: 0; padding: 0; box-sizing: border-box; }
/* The site's global a color is blue #3B5CDE */
.lf-compare a { color: inherit; text-decoration: none; }
.lf-compare .wrap { width: 90%; max-width: 1280px; margin: 0 auto; padding: 0; }
.lf-compare section { padding: 72px 0; }

/* ============ Buttons / eyebrow (blaze base.less) ============ */
.lf-compare .btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px;
  padding: 0 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  transition: all 0.25s ease; cursor: pointer; border: none;
  font-family: inherit;
}
.lf-compare .btn-accent { background: var(--accent); color: #fff; }
.lf-compare .btn-accent:hover { background: var(--accent-light); color: #fff; }
.lf-compare .btn-xl { padding: 0 36px; height: 44px; font-size: 16px; width: auto; }

.lf-compare .section-eyebrow {
  color: var(--gold);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 24px; text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.lf-compare .section-eyebrow.center { justify-content: center; }
.lf-compare h2.section-h {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.06; text-align: center;
}
.lf-compare h2.section-h em {
  font-family: 'STK Bureau Sans', 'Manrope', sans-serif; font-style: normal;
  font-weight: inherit; color: inherit; letter-spacing: -0.015em;
}
.lf-compare .section-sub {
  font-size: 16px; color: var(--text-dim); line-height: 1.6;
  max-width: 540px; margin: 10px auto 20px; text-align: center;
}

/* ============ VERSUS CARD ============ */
.lf-compare .versus-section { padding: 80px 0 56px; }
.lf-compare .vs-head { margin-bottom: 36px; }
.lf-compare .vs-head .vs-title { margin-bottom: 0; }
.lf-compare .vs-intro {
  font-size: 16px; color: var(--text-dim); line-height: 1.6;
  max-width: 720px; margin: 20px auto 0; text-align: center;
}
.lf-compare .vs-title {
  font-family: 'Manrope', sans-serif; font-size: 50px; font-weight: 500;
  letter-spacing: -0.035em; line-height: 1.06; color: var(--text);
  text-align: center; margin: 0 0 28px;
}
.lf-compare .versus-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 32px; box-shadow: var(--shadow-lg);
  padding: 40px; position: relative; overflow: hidden;
}
.lf-compare .versus-card::before {
  content: ''; position: absolute; top: -30%; right: -15%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(91,63,158,.05), transparent 65%);
  pointer-events: none;
}
.lf-compare .vs-headline {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 0;
  align-items: end; position: relative;
}
.lf-compare .vs-side-them, .lf-compare .vs-side-us {
  display: flex; flex-direction: column; gap: 0;
  align-items: center; text-align: center; padding: 48px 16px 28px;
}
.lf-compare .vs-side-us {
  background: rgba(91,63,158,0.05); padding-top: 48px;
  border-top-left-radius: 14px; border-top-right-radius: 14px; position: relative;
}
.lf-compare .vs-brand {
  font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 600;
  line-height: 1; letter-spacing: -0.015em; margin-bottom: 20px;
}
.lf-compare .vs-side-them .vs-brand { color: var(--text-muted); }
.lf-compare .vs-side-us .vs-brand { color: var(--text); }
.lf-compare .vs-brand-logo { height: 24px; width: auto; max-width: 100%; display: block; margin: 0 auto 20px; }
.lf-compare .vs-side-them .vs-brand-logo { height: 30px; }
.lf-compare .vs-side-us .vs-brand-logo { height: 20px; }
/* Lofty logo (3.36:1, much squarer than the original Lofty Front wide wordmark at 8.8:1): same height as the competitor logo opposite */
.lf-compare .vs-side-us .vs-brand-logo-lofty { height: 30px; width: auto; }
/* Visual corrections for each competitor logo; see the comments in blaze comparison.less for why */
.lf-compare.comparison-agent-image-page .vs-side-them .vs-brand-logo { height: 36px; }
.lf-compare.comparison-boldtrail-page .vs-side-them .vs-brand-logo { height: 24px; }
.lf-compare .vs-statement {
  font-family: 'STK Bureau Sans', 'Manrope', sans-serif;
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.lf-compare .vs-side-them .vs-statement { color: #1A1622; }
.lf-compare .vs-side-us .vs-statement { color: var(--accent); }

.lf-compare .vs-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; position: relative; }
.lf-compare .vs-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.lf-compare .vs-row > div { padding: 18px 12px; display: flex; align-items: center; }
.lf-compare .vs-row:not(:first-child) > .vs-row-label,
.lf-compare .vs-row:not(:first-child) > .vs-them { border-top: 1px dashed var(--border); }
/* The .vs-us divider is drawn with a pseudo-element, leaving 12px blank on the right (a border can only span the full width) */
.lf-compare .vs-row:not(:first-child) > .vs-us::before {
  content: ''; position: absolute; top: 0; left: 0; right: 12px;
  border-top: 1px dashed var(--border);
}
.lf-compare .vs-row-label {
  text-align: left; font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; color: #1A1622;
}
.lf-compare .vs-row .vs-them {
  color: #1A1622; font-size: 14px; line-height: 1.5;
  justify-content: center; text-align: center;
}
.lf-compare .vs-row .vs-us {
  position: relative;
  background: rgba(91,63,158,0.05); color: var(--text);
  font-size: 16px; line-height: 1.5; font-weight: 600;
  justify-content: center; text-align: center;
  padding-left: 20px; padding-right: 20px;
}
.lf-compare .vs-row:last-child > .vs-us {
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
}
.lf-compare .vs-cell-brand, .lf-compare .vs-versus-badge, .lf-compare .vs-row-vs, .lf-compare .vs-row-toggle { display: none; }
.lf-compare .vs-row .vs-them strong, .lf-compare .vs-row .vs-us strong { font-weight: 700; margin-right: 3px; }
.lf-compare .vs-row .vs-us strong { color: var(--accent-deep); }

.lf-compare .vs-corner-pill {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; height: 28px; box-sizing: border-box;
  padding: 0 24px; white-space: nowrap; max-width: calc(100% - 16px);
  background: var(--accent); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; border-radius: 0 0 24px 24px; text-transform: uppercase; z-index: 3;
}

.lf-compare .vs-footnote {
  margin: 0; padding-top: 4px; text-align: center;
  font-size: 12px; line-height: 1.6; color: var(--text-muted);
}
.lf-compare .vs-footnote-extra { padding-top: 2px; }

.lf-compare .vs-footer .btn-xl {
  height: auto; min-height: 44px; padding: 12px 36px;
  max-width: 100%; white-space: normal; text-align: center; justify-content: center;
}
.lf-compare .vs-footer {
  padding-top: 15px; display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; position: relative;
}

.lf-compare .method {
  background: var(--sand); border-radius: 22px; padding: 26px 30px; margin-top: 36px;
  font-size: 14px; line-height: 1.65; color: var(--text-dim);
}
.lf-compare .method b { color: var(--accent-deep); }
.lf-compare .method a { color: var(--accent); text-decoration: underline; }

/* ============ WHY ============ */
.lf-compare .why-section { padding: 64px 0 56px; }
.lf-compare .why-section-head { text-align: center; margin-bottom: 40px; }
.lf-compare .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lf-compare .why-card {
  background: var(--bg-card); border: none; border-radius: 22px; padding: 32px;
  box-shadow: var(--shadow-sm); transition: all .25s ease; display: flex; flex-direction: column;
}
.lf-compare .why-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(91,63,158,.18), 0 2px 6px rgba(91,63,158,.10); }
.lf-compare .why-icon {
  width: 50px; height: 50px; border-radius: 14px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0;
}
.lf-compare .why-icon svg { width: 24px; height: 24px; }
.lf-compare .why-title { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.lf-compare .why-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; flex: 1; }

/* ============ MIGRATION ============ */
.lf-compare .migration-section { padding: 64px 0 72px; }
.lf-compare .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lf-compare .tl-step {
  background: var(--bg-card); border: none; border-radius: 24px; padding: 36px;
  box-shadow: var(--shadow-sm); transition: all .25s ease; display: flex; flex-direction: column;
}
.lf-compare .tl-step:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(91,63,158,.18), 0 2px 6px rgba(91,63,158,.10); }
.lf-compare .tl-num { font-family: 'Manrope', sans-serif; font-size: 50px; font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -0.02em; margin-bottom: 24px; }
.lf-compare .tl-title { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.lf-compare .tl-desc { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

/* ============ responsive ============ */
@media (max-width: 1024px) {
  .lf-compare h2.section-h { font-size: 32px; }
  .lf-compare .versus-card { padding: 32px 24px; border-radius: 22px; }

  .lf-compare .vs-headline { grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 24px; }
  .lf-compare .vs-headline-spacer { display: none; }
  .lf-compare .vs-side-them, .lf-compare .vs-side-us { justify-content: flex-end; padding: 28px 16px 24px; }
  .lf-compare .vs-side-us { padding-top: 44px; border-radius: 16px; }
  .lf-compare .vs-statement { font-size: 27px; }

  .lf-compare .vs-rows { gap: 14px; margin-bottom: 24px; }
  .lf-compare .vs-row { display: block; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
  .lf-compare .vs-row > div { display: block; padding: 16px 18px; }
  .lf-compare .vs-row:not(:first-child) > .vs-row-label,
  .lf-compare .vs-row:not(:first-child) > .vs-them { border-top: none; }
  .lf-compare .vs-row-label {
    padding: 12px 18px; background: var(--bg);
    border-bottom: 1px solid var(--border); font-size: 10.5px; letter-spacing: .14em;
  }
  .lf-compare .vs-row .vs-them, .lf-compare .vs-row .vs-us { text-align: left; font-size: 14px; }
  .lf-compare .vs-row .vs-them { color: #1A1622; }
  .lf-compare .vs-row .vs-us .vs-cell-text { font-weight: 700; font-size: 16px; }
  .lf-compare .vs-row .vs-us, .lf-compare .vs-row:last-child > .vs-us { border-radius: 0; }
  .lf-compare .vs-cell-brand {
    display: block; margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
  }
  .lf-compare .vs-row .vs-us .vs-cell-brand { color: var(--accent-deep); }

  .lf-compare .vs-versus-badge {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; left: calc(50% + 8px); top: 50%; transform: translate(-50%, -50%);
    width: 42px; height: 42px; border-radius: 50%; box-sizing: border-box;
    background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-md);
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
    letter-spacing: .08em; color: var(--accent); z-index: 4;
  }
  .lf-compare .vs-row-vs {
    display: flex; align-items: center; gap: 10px; padding: 7px 18px;
    background: var(--bg-card);
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
    letter-spacing: .16em; color: var(--accent);
  }
  .lf-compare .vs-row-vs::before, .lf-compare .vs-row-vs::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  .lf-compare .vs-footer { flex-direction: column; align-items: stretch; gap: 14px; }
  .lf-compare .vs-footer .btn { justify-content: center; }
  .lf-compare .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lf-compare .timeline { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .lf-compare .method { padding: 22px 20px; border-radius: 18px; margin-top: 28px; }
}

@media (max-width: 640px) {
  .lf-compare .vs-headline { margin-bottom: 20px; }
  .lf-compare .vs-side-them, .lf-compare .vs-side-us { padding: 20px 8px 16px; }
  .lf-compare .vs-side-us { padding-top: 0; border-radius: 14px; }
  .lf-compare .vs-brand { font-size: clamp(14px, 3.6vw, 18px); margin-bottom: 14px; }
  .lf-compare .vs-brand-logo { margin-bottom: 14px; }
  .lf-compare .vs-side-them .vs-brand-logo { height: 24px; }
  .lf-compare.comparison-agent-image-page .vs-side-them .vs-brand-logo { height: 29px; }
  .lf-compare.comparison-boldtrail-page .vs-side-them .vs-brand-logo { height: 18px; }
  .lf-compare .vs-side-us .vs-brand-logo { height: auto; width: min(100%, 132px); }
  /* The previous rule sizes the 8.8:1 wide wordmark by width; applied to the Lofty logo it becomes 39px tall. Switch back to sizing by height, aligned with the competitor logos' 24px */
  .lf-compare .vs-side-us .vs-brand-logo-lofty { height: 24px; width: auto; }
  .lf-compare .vs-statement { font-size: clamp(16px, 4.8vw, 24px); }
  .lf-compare .vs-versus-badge { width: 34px; height: 34px; font-size: 11px; }
  .lf-compare .vs-corner-pill {
    position: static; transform: none; align-self: stretch;
    width: auto; max-width: none; height: auto; margin: 0 -8px 14px; padding: 5px 8px;
    justify-content: center; text-align: center; white-space: normal;
    font-size: 9px; letter-spacing: .04em; line-height: 1.35;
    border-radius: 14px 14px 0 0;
  }
  .lf-compare .vs-row-vs { padding: 7px 16px; }

  /* ── Comparison-row accordion (.is-accordion only) ── collapsed via display:none; content stays in the DOM and is still indexed */
  .lf-compare .vs-rows.is-accordion { gap: 6px; margin-bottom: 14px; }
  .lf-compare .vs-rows.is-accordion .vs-row-label { display: none; }
  .lf-compare .vs-rows.is-accordion .vs-row-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; box-sizing: border-box; padding: 13px 16px; min-height: 44px;
    margin: 0; border: 0; border-bottom: 1px solid var(--border);
    background: var(--bg); cursor: pointer; text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: #1A1622;
    -webkit-tap-highlight-color: transparent;
  }
  .lf-compare .vs-rows.is-accordion .vs-row-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .lf-compare .vs-rows.is-accordion .vs-row:not(.is-open) .vs-row-toggle { border-bottom: 0; }
  .lf-compare .vs-rows.is-accordion .vs-row.is-open .vs-row-toggle { color: var(--accent-deep); }
  .lf-compare .vs-rows.is-accordion .vs-row-caret {
    flex: none; width: 0; height: 0;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform .18s ease;
  }
  .lf-compare .vs-rows.is-accordion .vs-row.is-open .vs-row-caret { transform: rotate(90deg) translateX(1px); }
  .lf-compare .vs-rows.is-accordion .vs-row:not(.is-open) > .vs-them,
  .lf-compare .vs-rows.is-accordion .vs-row:not(.is-open) > .vs-row-vs,
  .lf-compare .vs-rows.is-accordion .vs-row:not(.is-open) > .vs-us { display: none; }

  .lf-compare .vs-row > div { padding: 14px 16px; }
  .lf-compare .vs-row-label { padding: 11px 16px; }
  .lf-compare .why-grid { grid-template-columns: 1fr; gap: 14px; }
  .lf-compare .why-section-head { margin-bottom: 20px; }
  .lf-compare .timeline { grid-template-columns: 1fr; gap: 16px; }
  .lf-compare .versus-section { padding: 48px 0 36px; }
  .lf-compare .why-section, .lf-compare .migration-section { padding: 30px 0; }
  .lf-compare .versus-card { padding: 24px 16px; }
  .lf-compare .vs-intro { font-size: 15px; }
  .lf-compare .vs-title, .lf-compare h2.section-h { font-size: 28px; }

  /* ── Above-the-fold budget compression (only pages with the accordion enabled); where :has() is unsupported it simply doesn't compress ── */
  .lf-compare:has(.vs-rows.is-accordion) .versus-section { padding-top: 20px; }
  .lf-compare:has(.vs-rows.is-accordion) .vs-intro { display: none; }
  .lf-compare:has(.vs-rows.is-accordion) .versus-card { padding: 18px 14px; }
  .lf-compare:has(.vs-rows.is-accordion) .vs-headline { margin-bottom: 12px; }
  .lf-compare:has(.vs-rows.is-accordion) .vs-side-them,
  .lf-compare:has(.vs-rows.is-accordion) .vs-side-us { padding: 14px 8px 12px; }
  .lf-compare:has(.vs-rows.is-accordion) .vs-side-us { padding-top: 0; }
  .lf-compare:has(.vs-rows.is-accordion) .vs-row > div { padding: 11px 14px; }
}

/* ============ PRICING (BlazeComparePricing + BlazePlanCard) ============
   Card colors use the blue-theme version directly (the rules at the end of comparison.less where Front overrides .lf-plan-card / .lf-feat-check /
   .lf-plan-brand / .lf-expert-cta); pill button radius and #C4CEF5 divider synced from 6d04a6f; other sizes and shadows copied from BlazePlanCard.vue. */
.lf-compare .pricing-section { background: #FFFFFF; padding: 60px 0 120px; }
.lf-compare .pricing-section .head { text-align: center; margin-bottom: 48px; }
.lf-compare .pricing-section h2 { font-family: 'Manrope', sans-serif; font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; color: var(--text); margin-bottom: 20px; }
.lf-compare .pricing-section .head-sub { color: var(--text-dim); font-size: 16px; }

.lf-compare .lf-plan-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 0;
  background: linear-gradient(to top left, #C4CEF5, #EBEFFC);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 28px;
  padding: 56px 60px;
  box-shadow: 0 24px 60px -30px rgba(74, 48, 126, .35), 0 1px 3px rgba(18, 18, 40, .05);
}
.lf-compare .lf-plan-brand-col { flex: 0 0 42%; padding-left: 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lf-compare .lf-plan-brand {
  font-family: 'STK Bureau Sans', 'Manrope', sans-serif; font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.03em; line-height: 1.06;
  color: #3B5CDE; text-wrap: balance;
}
.lf-compare .lf-plan-tagline { font-size: 16px; color: #4B4754; line-height: 1.6; margin: 16px 0 0; }
.lf-compare .lf-plan-rule { width: 100%; height: 1px; background: #C4CEF5; margin: 30px 0; }
.lf-compare .lf-expert-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; color: #fff;
  background: #3B5CDE;
  box-shadow: 0 14px 30px -12px rgba(74, 48, 126, .55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lf-compare .lf-expert-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(74, 48, 126, .6); }
.lf-compare .lf-expert-cta svg { flex: none; }
.lf-compare .lf-plan-note { font-size: 14px; color: #8A8A93; line-height: 1.5; margin: 16px 0 0; }
.lf-compare .lf-plan-divider { align-self: stretch; width: 1px; background: #C4CEF5; flex: none; }
.lf-compare .lf-plan-feats-col { flex: 1; padding-right: 56px; }
.lf-compare .lf-plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.lf-compare .lf-plan-feats li { display: flex; gap: 14px; align-items: flex-start; }
.lf-compare .lf-feat-check { flex: none; line-height: 0; margin-top: 1px; }
.lf-compare .lf-feat-text { display: flex; flex-direction: column; gap: 3px; }
.lf-compare .lf-feat-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; color: #1A1622; line-height: 1.3; }
.lf-compare .lf-feat-desc { font-family: 'Manrope', sans-serif; font-size: 14.5px; color: #4B4754; line-height: 1.45; }

@media (max-width: 1024px) {
  .lf-compare .pricing-section { padding: 64px 0; }
  .lf-compare .pricing-section h2 { font-size: 38px; }
}
@media (max-width: 860px) {
  .lf-compare .lf-plan-card { flex-direction: column; align-items: stretch; padding: 36px 20px; }
  /* Mobile order: brand/CTA → divider → features */
  .lf-compare .lf-plan-brand-col { order: 1; flex: none; padding-left: 0; }
  .lf-compare .lf-plan-divider { order: 2; width: 100%; height: 1px; margin: 32px 0; }
  .lf-compare .lf-plan-rule { display: none; }
  .lf-compare .lf-expert-cta { margin-top: 30px; }
  .lf-compare .lf-plan-feats-col { order: 3; padding-right: 0; }
}
@media (max-width: 640px) {
  .lf-compare .pricing-section { padding: 30px 0; }
  .lf-compare .pricing-section .head { margin-bottom: 20px; }
  .lf-compare .pricing-section h2 { font-size: 28px; margin-bottom: 10px; }
}

/* ============ Shared visual baseline for the seven comparison pages ============
   Synced from blaze-frontend 361f5d3 / 346afe3 / 0899aff: theme color changed from Front purple to the blue of the site's svc-* component library
   (#3b5cde → #6f20d6 gradient); radii and backgrounds aligned as well, unified across all seven pages.
   Overridden by reassigning --accent etc. on the root, so every rule that reads var(--accent*) recolors automatically.
   Placed at the end of the file with the same specificity as the earlier rules, so it wins by source order (including each breakpoint).
   Synced to blaze-frontend 890a353 (10/14 16:10). The closing-CTA rules from the original Front version are not synced (that block was removed);
   inline form buttons live in the lead component; the site has no mobile sticky Book a demo bar (BlazeMobileCta), so N/A. */
.lf-compare {
  font-family: 'Manrope', 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --accent: #3b5cde;        /* theme blue of the site's svc-* component library */
  --accent-deep: #6f20d6;   /* gradient end color paired with the theme blue */
  --accent-light: #4f6ce1;  /* light blue for hover state */
  --accent-soft: #eef1ff;   /* tag / highlight background */
  /* The 60px at the top reserved for the site's fixed header shows the root background; the site header is transparent at page top,
     so use the versus section color here, otherwise a grayish-purple band appears under the header (the Front site has no 60px offset, hence no such rule originally) */
  background: #F1F5FE;
}
/* Background of the whole versus section (title + cards) */
.lf-compare .versus-section { background: #F1F5FE; }
.lf-compare .why-section { background: #FFFFFF; }
.lf-compare .migration-section { background: #F1F4FD; }

/* Radii aligned with the site's .svc-card (24px) and .svc-btn (pill, 25px); no shadow on cards at rest */
.lf-compare .versus-card { border-radius: 24px; }
.lf-compare .tl-step { border-radius: 24px; box-shadow: none; }
.lf-compare .btn { border-radius: 25px; }

/* why / migration section titles and subtitles aligned with the site's .mg-title / .mg-subtitle (synced from 483002d) */
.lf-compare .why-section-head h2.section-h { font-size: 34px; font-weight: 500; color: #202437; }
.lf-compare .why-section-head .section-sub { font-size: 16px; font-weight: 500; color: #515666; }
.lf-compare .migration-section h2.section-h { font-size: 34px; font-weight: 500; color: #202437; margin-bottom: 20px; }
.lf-compare .migration-section .section-sub { margin-top: 0; margin-bottom: 48px; color: #515666; }
.lf-compare .why-card { border-radius: 20px; border: 1px solid #ebecf1; box-shadow: none; }

/* why card icons: light-blue badge + brand-blue glyph. The original inline svgs are white (fill="white" / stroke="#fff"),
   recolored to blue according to how each one is painted; attribute selectors match exactly */
.lf-compare .why-icon { width: 48px; height: 48px; border-radius: 12px; background: #EEF1FF; }
.lf-compare .why-icon svg [fill='white'] { fill: #3B5CDE; }
.lf-compare .why-icon svg[stroke='#fff'] { stroke: #3B5CDE; }

/* "us" highlight panel: turn off the decorative glow at the card's top-right, otherwise it muddies the solid background toward gray */
.lf-compare .versus-card::before { display: none; }
.lf-compare .vs-side-us { background: #F1F5FE; }
.lf-compare .vs-row .vs-us { background: #F2F5FE; }
/* hover: translateY(-3px) + single-layer long drop shadow (same as the site's .svc-prob-item:hover); migration step cards no longer have hover */
.lf-compare .why-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -18px rgba(32, 36, 55, 0.22); }
.lf-compare .tl-step:hover { transform: none; box-shadow: none; }
/* "Compare your real cost in 2 minutes" button */
.lf-compare .btn-accent.btn-xl { font-size: 16px; font-weight: 700; }
/* Remove the eyebrows above sections (WHY LOFTY / MIGRATION / LOFTY FRONT) everywhere; the form's kicker lives in the lead component */
.lf-compare .section-eyebrow { display: none; }
/* Mobile collapsed table: the expanded row title/arrow and the brand tag in our cell originally read --accent-deep,
   which here is the gradient-end purple #6f20d6; switch them all to the theme blue */
.lf-compare .vs-rows.is-accordion .vs-row.is-open .vs-row-toggle,
.lf-compare .vs-row .vs-us .vs-cell-brand { color: var(--accent); }
/* Emphasis copy switched to Manrope; em in section titles follows the parent title's weight and color (see the base rule above) */
.lf-compare .vs-statement,
.lf-compare h2.section-h em { font-family: 'Manrope', sans-serif; }
.lf-compare .vs-statement { font-weight: 600; }

/* ============ Pricing section re-layout (synced from 669acb0 / 483002d) ============
   The feature list becomes a three-column card grid (icon badge + title + description), followed by a centered CTA;
   "See plans" says the same thing as the tagline and section title, so it is hidden. */
.lf-compare .pricing-section h2 { font-size: 34px; font-weight: 500; color: #202437; }
.lf-compare .pricing-section .head-sub { font-size: 16px; font-weight: 500; color: #515666; }
.lf-compare .lf-plan-card {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 32px; max-width: 100%; margin: 0;
  background: transparent; border: none; box-shadow: none; padding: 0;
  /* No clipping, otherwise the shadow overflowing on card hover gets cut off */
  overflow: visible;
}
.lf-compare .lf-plan-feats-col,
.lf-compare .lf-plan-brand-col { width: 100%; background: transparent; border: none; box-shadow: none; padding: 0; }
/* List on top, button below, on both desktop and mobile */
.lf-compare .lf-plan-feats-col { order: 1; }
.lf-compare .lf-plan-brand-col { order: 2; align-items: center; justify-content: center; }
.lf-compare .lf-plan-divider,
.lf-compare .lf-plan-rule,
.lf-compare .lf-plan-brand,
.lf-compare .lf-plan-tagline { display: none; }
.lf-compare .lf-expert-cta { width: auto; padding: 0 32px; box-shadow: none; }
.lf-compare .lf-expert-cta svg { display: none; }

.lf-compare .lf-plan-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* White cards: aligned with the site's .mct-item (1px #ebecf1 border, 20px radius, 30px padding);
   raise the stacking level on hover so the shadow isn't covered by adjacent cards */
.lf-compare .lf-plan-feats li {
  position: relative; z-index: 0;
  flex-direction: column; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid #ebecf1; border-radius: 20px; padding: 30px;
  box-shadow: none; transition: box-shadow .25s ease, transform .25s ease;
}
.lf-compare .lf-plan-feats li:hover {
  z-index: 1;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -18px rgba(32, 36, 55, 0.22);
}
/* icon: hide the original uniform "blue circle with white check" and use the solid icon for the matching concept from the design system.
   mask-image takes the icon shape, filled with brand blue; the 6 icons map to the 6 features in DOM order */
.lf-compare .lf-feat-check {
  width: 48px; height: 48px; border-radius: 12px; margin-top: 0;
  background: #EEF1FF; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.lf-compare .lf-feat-check svg { display: none; }
.lf-compare .lf-feat-check::before {
  content: ''; width: 24px; height: 24px; background-color: #3B5CDE;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-image: var(--feat-icon); mask-image: var(--feat-icon);
}
.lf-compare .lf-plan-feats li:nth-child(1) .lf-feat-check { --feat-icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block%3B' width='32' height='28' viewBox='0 0 32 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Vector' d='M28 0H4C2.93913 0 1.92172 0.421427 1.17157 1.17157C0.421427 1.92172 0 2.93913 0 4L0 20C0 21.0609 0.421427 22.0783 1.17157 22.8284C1.92172 23.5786 2.93913 24 4 24H15V26H9C8.73478 26 8.48043 26.1054 8.29289 26.2929C8.10536 26.4804 8 26.7348 8 27C8 27.2652 8.10536 27.5196 8.29289 27.7071C8.48043 27.8946 8.73478 28 9 28H23C23.2652 28 23.5196 27.8946 23.7071 27.7071C23.8946 27.5196 24 27.2652 24 27C24 26.7348 23.8946 26.4804 23.7071 26.2929C23.5196 26.1054 23.2652 26 23 26H17V24H28C29.0609 24 30.0783 23.5786 30.8284 22.8284C31.5786 22.0783 32 21.0609 32 20V4C32 2.93913 31.5786 1.92172 30.8284 1.17157C30.0783 0.421427 29.0609 0 28 0ZM30 20C30 20.5304 29.7893 21.0391 29.4142 21.4142C29.0391 21.7893 28.5304 22 28 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H28C28.5304 2 29.0391 2.21071 29.4142 2.58579C29.7893 2.96086 30 3.46957 30 4V20ZM9 14C8.80222 14 8.60888 14.0586 8.44443 14.1685C8.27998 14.2784 8.15181 14.4346 8.07612 14.6173C8.00043 14.8 7.98063 15.0011 8.01921 15.1951C8.0578 15.3891 8.15304 15.5673 8.29289 15.7071C8.43275 15.847 8.61093 15.9422 8.80491 15.9808C8.99889 16.0194 9.19996 15.9996 9.38268 15.9239C9.56541 15.8482 9.72159 15.72 9.83147 15.5556C9.94135 15.3911 10 15.1978 10 15C10 14.7348 9.89464 14.4804 9.70711 14.2929C9.51957 14.1054 9.26522 14 9 14ZM9 8C8.80222 8 8.60888 8.05865 8.44443 8.16853C8.27998 8.27841 8.15181 8.43459 8.07612 8.61732C8.00043 8.80004 7.98063 9.00111 8.01921 9.19509C8.0578 9.38907 8.15304 9.56725 8.29289 9.70711C8.43275 9.84696 8.61093 9.9422 8.80491 9.98079C8.99889 10.0194 9.19996 9.99957 9.38268 9.92388C9.56541 9.84819 9.72159 9.72002 9.83147 9.55557C9.94135 9.39112 10 9.19778 10 9C10 8.73478 9.89464 8.48043 9.70711 8.29289C9.51957 8.10536 9.26522 8 9 8ZM23 14H13C12.7348 14 12.4804 14.1054 12.2929 14.2929C12.1054 14.4804 12 14.7348 12 15C12 15.2652 12.1054 15.5196 12.2929 15.7071C12.4804 15.8946 12.7348 16 13 16H23C23.2652 16 23.5196 15.8946 23.7071 15.7071C23.8946 15.5196 24 15.2652 24 15C24 14.7348 23.8946 14.4804 23.7071 14.2929C23.5196 14.1054 23.2652 14 23 14ZM23 8H13C12.7348 8 12.4804 8.10536 12.2929 8.29289C12.1054 8.48043 12 8.73478 12 9C12 9.26522 12.1054 9.51957 12.2929 9.70711C12.4804 9.89464 12.7348 10 13 10H23C23.2652 10 23.5196 9.89464 23.7071 9.70711C23.8946 9.51957 24 9.26522 24 9C24 8.73478 23.8946 8.48043 23.7071 8.29289C23.5196 8.10536 23.2652 8 23 8Z' fill='black'/%3E %3C/svg%3E"); }
.lf-compare .lf-plan-feats li:nth-child(2) .lf-feat-check { --feat-icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block%3B' width='32' height='28' viewBox='0 0 32 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Vector' d='M30 0H2C0.9 0 0 0.9 0 2V26C0 27.1 0.9 28 2 28H30C31.1 28 32 27.1 32 26V2C32 0.9 31.1 0 30 0ZM30 26H2V7H30V26ZM30 5H2V2H30V5ZM7.37 19.22C6.91 19.22 6.45 19.15 5.98 19C5.51 18.85 5.1 18.66 4.74 18.42L4 20.1C4.38 20.37 4.87 20.58 5.48 20.75C6.09 20.91 6.71 20.99 7.36 20.99C8.12 20.99 8.76 20.87 9.29 20.64C9.82 20.41 10.22 20.09 10.48 19.7C10.75 19.31 10.88 18.87 10.88 18.38C10.88 17.82 10.73 17.37 10.44 17.05C10.15 16.72 9.8 16.48 9.4 16.33C9 16.18 8.5 16.04 7.89 15.91C7.35 15.79 6.96 15.68 6.72 15.58C6.48 15.47 6.36 15.31 6.36 15.1C6.36 14.89 6.46 14.71 6.67 14.58C6.88 14.45 7.2 14.38 7.65 14.38C8.36 14.38 9.1 14.59 9.86 15L10.55 13.31C10.16 13.08 9.72 12.9 9.21 12.79C8.7 12.67 8.19 12.61 7.66 12.61C6.89 12.61 6.25 12.73 5.72 12.96C5.19 13.19 4.8 13.5 4.53 13.9C4.26 14.3 4.13 14.74 4.13 15.23C4.13 15.79 4.27 16.24 4.56 16.57C4.85 16.9 5.19 17.14 5.6 17.29C6 17.44 6.5 17.58 7.1 17.71C7.65 17.83 8.04 17.95 8.29 18.06C8.54 18.17 8.66 18.34 8.66 18.57C8.66 19.01 8.23 19.23 7.36 19.23L7.37 19.22ZM21.3 20.46C21.97 20.82 22.73 21 23.57 21C24.41 21 25.17 20.82 25.84 20.46C26.51 20.1 27.04 19.6 27.42 18.96C27.8 18.32 27.99 17.6 27.99 16.8C27.99 16 27.8 15.28 27.42 14.64C27.04 14 26.51 13.5 25.84 13.14C25.17 12.78 24.41 12.6 23.57 12.6C22.73 12.6 21.97 12.78 21.3 13.14C20.63 13.5 20.1 14 19.72 14.64C19.34 15.28 19.15 16 19.15 16.8C19.15 17.6 19.34 18.32 19.72 18.96C20.1 19.6 20.63 20.1 21.3 20.46ZM21.71 15.6C21.9 15.25 22.16 14.98 22.48 14.79C22.81 14.6 23.17 14.5 23.57 14.5C23.97 14.5 24.34 14.6 24.66 14.79C24.99 14.98 25.24 15.25 25.43 15.6C25.62 15.95 25.71 16.35 25.71 16.81C25.71 17.27 25.61 17.67 25.43 18.02C25.24 18.37 24.98 18.64 24.66 18.83C24.33 19.02 23.97 19.12 23.57 19.12C23.17 19.12 22.8 19.02 22.48 18.83C22.15 18.64 21.9 18.37 21.71 18.02C21.52 17.67 21.43 17.27 21.43 16.81C21.43 16.35 21.52 15.95 21.71 15.6ZM18.32 19.07H14.15V17.59H17.69V15.88H14.15V14.52H18.17V12.76H11.92V20.84H18.32V19.08V19.07Z' fill='black'/%3E %3C/svg%3E"); }
.lf-compare .lf-plan-feats li:nth-child(3) .lf-feat-check { --feat-icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block%3B' width='32.0026' height='32' viewBox='0 0 32.0026 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Vector' d='M30.1026 5.38C28.4526 4.84 27.1626 3.55 26.6226 1.9L26.0026 0L25.3826 1.9C24.8426 3.55 23.5526 4.84 21.9026 5.38L20.0026 6L21.9026 6.63C23.5526 7.17 24.8426 8.46 25.3826 10.11L26.0026 12.01L26.6226 10.11C27.1626 8.46 28.4526 7.18 30.1026 6.63L32.0026 6.01L30.1026 5.39V5.38ZM19.0326 11.56C18.4426 10.97 17.6826 10.68 16.9126 10.68C16.1426 10.68 15.3726 10.97 14.7926 11.56L1.39263 24.96C0.912634 25.44 0.602634 26.07 0.532634 26.75L0.00263384 31.44C-0.0273662 31.74 0.202634 32 0.502634 32C0.522634 32 0.542634 32 0.562634 32L5.26263 31.48C5.94263 31.4 6.57263 31.1 7.05263 30.62L20.4526 17.22C21.6226 16.05 21.6226 14.15 20.4526 12.98L19.0426 11.57L19.0326 11.56ZM5.63263 29.2C5.47263 29.36 5.26263 29.46 5.03263 29.49L2.20263 29.8L2.51263 26.97C2.53263 26.75 2.64263 26.53 2.80263 26.37L13.3726 15.8L16.2026 18.63L5.63263 29.2ZM19.0326 15.8L17.6226 17.21L14.7926 14.38L16.2026 12.97C16.4526 12.72 16.7526 12.68 16.9126 12.68C17.0726 12.68 17.3626 12.72 17.6226 12.97L19.0326 14.38C19.4226 14.77 19.4226 15.4 19.0326 15.79V15.8ZM10.5826 8.73L11.0026 10L11.4226 8.73C11.7826 7.63 12.6426 6.77 13.7426 6.41L15.0126 5.99L13.7426 5.57C12.6426 5.21 11.7826 4.35 11.4226 3.25L11.0026 1.98L10.5826 3.24C10.2226 4.34 9.36263 5.2 8.26263 5.56L6.99263 5.98L8.26263 6.4C9.36263 6.76 10.2226 7.62 10.5826 8.72V8.73ZM26.3126 17.95L26.0026 17L25.6926 17.95C25.4226 18.77 24.7726 19.42 23.9526 19.69L23.0026 20L23.9526 20.31C24.7726 20.58 25.4226 21.23 25.6926 22.05L26.0026 23L26.3126 22.05C26.5826 21.23 27.2326 20.58 28.0526 20.31L29.0026 20L28.0526 19.69C27.2326 19.42 26.5826 18.77 26.3126 17.95Z' fill='black'/%3E %3C/svg%3E"); }
.lf-compare .lf-plan-feats li:nth-child(4) .lf-feat-check { --feat-icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block%3B' width='32' height='28' viewBox='0 0 32 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Vector' d='M0 6V26C0 26.5304 0.210714 27.0391 0.585786 27.4142C0.960859 27.7893 1.46957 28 2 28H26C26.5304 28 27.0391 27.7893 27.4142 27.4142C27.7893 27.0391 28 26.5304 28 26V4H2C1.46957 4 0.960859 4.21071 0.585786 4.58579C0.210714 4.96086 0 5.46957 0 6H0ZM26 26H2V14H26V26ZM26 12H2V6H26V12ZM24 21H4V23H24V21ZM18 17H4V19H18V17ZM9 10C9.19778 10 9.39112 9.94135 9.55557 9.83147C9.72002 9.72159 9.84819 9.56541 9.92388 9.38268C9.99957 9.19996 10.0194 8.99889 9.98079 8.80491C9.9422 8.61093 9.84696 8.43275 9.70711 8.29289C9.56725 8.15304 9.38907 8.0578 9.19509 8.01921C9.00111 7.98063 8.80004 8.00043 8.61732 8.07612C8.43459 8.15181 8.27841 8.27998 8.16853 8.44443C8.05865 8.60888 8 8.80222 8 9C8 9.26522 8.10536 9.51957 8.29289 9.70711C8.48043 9.89464 8.73478 10 9 10ZM30 0H6C5.46957 0 4.96086 0.210714 4.58579 0.585786C4.21071 0.960859 4 1.46957 4 2H30V26C30.5304 26 31.0391 25.7893 31.4142 25.4142C31.7893 25.0391 32 24.5304 32 24V2C32 1.46957 31.7893 0.960859 31.4142 0.585786C31.0391 0.210714 30.5304 0 30 0ZM13 10C13.1978 10 13.3911 9.94135 13.5556 9.83147C13.72 9.72159 13.8482 9.56541 13.9239 9.38268C13.9996 9.19996 14.0194 8.99889 13.9808 8.80491C13.9422 8.61093 13.847 8.43275 13.7071 8.29289C13.5673 8.15304 13.3891 8.0578 13.1951 8.01921C13.0011 7.98063 12.8 8.00043 12.6173 8.07612C12.4346 8.15181 12.2784 8.27998 12.1685 8.44443C12.0586 8.60888 12 8.80222 12 9C12 9.26522 12.1054 9.51957 12.2929 9.70711C12.4804 9.89464 12.7348 10 13 10ZM5 10C5.19778 10 5.39112 9.94135 5.55557 9.83147C5.72002 9.72159 5.84819 9.56541 5.92388 9.38268C5.99957 9.19996 6.01937 8.99889 5.98079 8.80491C5.9422 8.61093 5.84696 8.43275 5.70711 8.29289C5.56725 8.15304 5.38907 8.0578 5.19509 8.01921C5.00111 7.98063 4.80004 8.00043 4.61732 8.07612C4.43459 8.15181 4.27841 8.27998 4.16853 8.44443C4.05865 8.60888 4 8.80222 4 9C4 9.26522 4.10536 9.51957 4.29289 9.70711C4.48043 9.89464 4.73478 10 5 10Z' fill='black'/%3E %3C/svg%3E"); }
.lf-compare .lf-plan-feats li:nth-child(5) .lf-feat-check { --feat-icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block%3B' width='30.8731' height='30.87' viewBox='0 0 30.8731 30.87' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Vector' d='M3.00657 10.08L4.43657 11.49L6.96657 14.03L8.38657 12.61L5.82657 10.08L10.0766 5.83L12.6066 8.37L14.0266 6.95L7.94657 0.880001C7.57185 0.507499 7.06494 0.298415 6.53657 0.298415C6.0082 0.298415 5.5013 0.507499 5.12657 0.880001L0.876573 5.13C0.504072 5.50473 0.294988 6.01163 0.294988 6.54C0.294988 7.06837 0.504072 7.57528 0.876573 7.95L3.00657 10.08ZM6.53657 2.3L8.65657 4.44L4.43657 8.66L2.29657 6.54L6.53657 2.3ZM23.9266 16.85L22.5066 18.27L27.2966 23.06L28.1466 28.15L23.0566 27.3L18.2666 22.51L16.8466 23.93L22.0966 29.17L29.8866 30.44H29.9766C30.0487 30.4395 30.1199 30.4234 30.1852 30.3928C30.2505 30.3622 30.3084 30.3178 30.355 30.2627C30.4015 30.2076 30.4356 30.1431 30.4549 30.0736C30.4741 30.0041 30.4781 29.9312 30.4666 29.86L29.1666 22.07L23.9266 16.85ZM30.2866 4.85L26.0466 0.590001C25.8605 0.402832 25.6393 0.254338 25.3955 0.153077C25.1518 0.0518166 24.8905 -0.000208492 24.6266 6.27931e-07C24.097 0.00223342 23.5899 0.214413 23.2166 0.590001L0.586573 23.22C0.40062 23.4057 0.253102 23.6263 0.152454 23.8691C0.0518053 24.1119 0 24.3722 0 24.635C0 24.8978 0.0518053 25.1581 0.152454 25.4009C0.253102 25.6437 0.40062 25.8643 0.586573 26.05L4.82657 30.29C5.01345 30.4754 5.23509 30.622 5.47876 30.7215C5.72244 30.8211 5.98336 30.8715 6.24657 30.87C6.77472 30.8704 7.28159 30.6619 7.65657 30.29L30.2866 7.66C30.4725 7.47425 30.62 7.25368 30.7207 7.01088C30.8213 6.76809 30.8731 6.50783 30.8731 6.245C30.8731 5.98217 30.8213 5.72192 30.7207 5.47912C30.62 5.23632 30.4725 5.01575 30.2866 4.83V4.85ZM6.28657 28.85L2.00657 24.63L6.94657 19.63L9.07657 21.75L10.4866 20.44L8.36657 18.27L12.6066 14.03L14.7266 16.15L16.1466 14.73L14.0266 12.61L18.2666 8.37L20.4366 10.49L21.8466 9.08L19.6766 6.95L24.6766 2.01L28.9266 6.26L6.28657 28.85Z' fill='black'/%3E %3C/svg%3E"); }
.lf-compare .lf-plan-feats li:nth-child(6) .lf-feat-check { --feat-icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block%3B' width='32' height='30' viewBox='0 0 32 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Vector' d='M21.7447 11.52C22.4356 11.52 23.1111 11.3152 23.6858 10.9315C24.2605 10.5478 24.7088 10.0023 24.9741 9.36397C25.2394 8.7256 25.3098 8.02289 25.1765 7.34451C25.0431 6.66613 24.712 6.04246 24.2249 5.55219C23.7377 5.06192 23.1164 4.72701 22.4393 4.58971C21.7621 4.45241 21.0595 4.51888 20.4201 4.78072C19.7807 5.04256 19.233 5.48805 18.8463 6.06099C18.4596 6.63392 18.2511 7.30863 18.2472 8C18.2446 8.46131 18.3331 8.91859 18.5077 9.34554C18.6823 9.77249 18.9395 10.1607 19.2645 10.4878C19.5896 10.8149 19.976 11.0745 20.4017 11.2517C20.8273 11.4288 21.2838 11.52 21.7447 11.52ZM21.7447 6.52C22.0421 6.52003 22.3326 6.60853 22.5796 6.77425C22.8265 6.93998 23.0186 7.17544 23.1314 7.45069C23.2442 7.72595 23.2727 8.02857 23.2133 8.32007C23.1538 8.61158 23.009 8.8788 22.7974 9.08776C22.5858 9.29672 22.3168 9.43798 22.0247 9.49358C21.7327 9.54918 21.4307 9.5166 21.1571 9.4C20.8836 9.28339 20.6509 9.08803 20.4886 8.83874C20.3264 8.58944 20.2418 8.29749 20.2458 8C20.2511 7.60565 20.4113 7.22924 20.6918 6.95225C20.9724 6.67525 21.3506 6.51997 21.7447 6.52V6.52ZM12.7511 9C13.6404 9 14.5099 8.73608 15.2494 8.24162C15.9889 7.74715 16.5652 7.04434 16.9056 6.22208C17.246 5.39981 17.335 4.49501 17.1615 3.6221C16.988 2.74918 16.5597 1.94736 15.9308 1.31802C15.3019 0.688685 14.5006 0.260102 13.6283 0.0864683C12.756 -0.0871652 11.8519 0.00194976 11.0302 0.342544C10.2085 0.683138 9.50618 1.25991 9.01206 1.99994C8.51794 2.73996 8.25421 3.60999 8.25421 4.5C8.25421 5.69348 8.72798 6.83807 9.5713 7.68198C10.4146 8.5259 11.5584 9 12.7511 9V9ZM12.7511 2C13.2452 2 13.7282 2.14662 14.139 2.42133C14.5498 2.69603 14.87 3.08648 15.0591 3.54329C15.2482 4.00011 15.2977 4.50278 15.2013 4.98773C15.1049 5.47268 14.867 5.91814 14.5176 6.26777C14.1682 6.6174 13.7231 6.8555 13.2384 6.95197C12.7538 7.04843 12.2515 6.99892 11.795 6.8097C11.3385 6.62048 10.9483 6.30005 10.6738 5.88893C10.3993 5.4778 10.2528 4.99446 10.2528 4.5C10.2528 3.83696 10.516 3.20108 10.9845 2.73224C11.453 2.26339 12.0885 2 12.7511 2V2ZM31.5978 19.74C31.3423 19.3132 30.9806 18.9598 30.5481 18.7145C30.1155 18.4691 29.6268 18.3401 29.1296 18.34C28.9998 18.3301 28.8696 18.3301 28.7398 18.34V17.25C28.7398 14.68 26.3115 12.59 23.3436 12.59H22.3443C22.8284 13.2022 23.2314 13.8745 23.5435 14.59C25.3122 14.69 26.7213 15.83 26.7213 17.24V19.4L22.2844 22.73V18.21C22.2791 17.2571 22.0862 16.3145 21.7167 15.4363C21.3471 14.558 20.8081 13.7613 20.1306 13.0916C19.4531 12.422 18.6503 11.8926 17.7681 11.5337C16.886 11.1748 15.9417 10.9934 14.9895 11H10.4627C8.54291 10.992 6.69847 11.7469 5.33445 13.0987C3.97042 14.4506 3.19834 16.2889 3.18776 18.21V21H1.9986C1.46854 21 0.960186 21.2107 0.585376 21.5858C0.210566 21.9609 0 22.4696 0 23L0 28C0 28.5304 0.210566 29.0391 0.585376 29.4142C0.960186 29.7893 1.46854 30 1.9986 30H21.2451C21.7074 30.0014 22.1559 29.8424 22.5142 29.55L30.8084 23.55C31.3904 23.1273 31.7938 22.5025 31.9398 21.7979C32.0858 21.0932 31.9639 20.3594 31.5978 19.74V19.74ZM5.18636 18.21C5.19693 16.8193 5.75844 15.4897 6.74766 14.5129C7.73687 13.5361 9.07296 12.992 10.4627 13H14.9895C16.3792 12.992 17.7153 13.5361 18.7045 14.5129C19.6937 15.4897 20.2552 16.8193 20.2658 18.21V23H13.9902V22L15.9888 21.5C16.6148 21.3425 17.1617 20.9616 17.5268 20.429C17.8919 19.8964 18.0501 19.2486 17.9715 18.6075C17.893 17.9664 17.5831 17.3761 17.1002 16.9475C16.6174 16.5189 15.9947 16.2815 15.3492 16.28H15.0794L8.72388 16.92C8.25552 16.9615 7.81676 17.1668 7.48475 17.5L5.18636 19.78V18.21ZM29.6392 21.93L21.345 27.93L21.2451 28H1.9986V23H3.9972C4.26092 23.0002 4.52208 22.9482 4.76562 22.8469C5.00917 22.7457 5.23027 22.5972 5.4162 22.41L8.93373 18.93L15.2793 18.29H15.3492C15.5067 18.2924 15.658 18.3519 15.7749 18.4575C15.8918 18.5632 15.9663 18.7077 15.9847 18.8643C16.003 19.0208 15.9639 19.1787 15.8745 19.3085C15.7852 19.4383 15.6518 19.5313 15.4991 19.57L13.5005 20.07C13.0707 20.1787 12.6892 20.4273 12.4161 20.7767C12.1429 21.126 11.9936 21.5564 11.9916 22V23C11.9916 23.5304 12.2022 24.0391 12.577 24.4142C12.9518 24.7893 13.4601 25 13.9902 25H21.9846C22.417 25 22.8378 24.8596 23.1837 24.6L28.6299 20.51C28.7841 20.3988 28.9695 20.3392 29.1595 20.34C29.3441 20.3421 29.5234 20.4022 29.6719 20.5119C29.8204 20.6216 29.9307 20.7753 29.9871 20.9512C30.0435 21.1271 30.0431 21.3163 29.986 21.4919C29.929 21.6676 29.8181 21.8209 29.6692 21.93H29.6392Z' fill='black'/%3E %3C/svg%3E"); }

@media (max-width: 980px) {
  .lf-compare .lf-plan-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .lf-compare .lf-plan-feats { grid-template-columns: 1fr; }
}

/* ============ Inline lead form (synced from 483002d / 890a353) ============
   The form component's styles are in LoftyNew/Partials/lofty-front-lead/index.css; these rules apply only on the comparison pages:
   card title copy left-aligned, kicker removed, submit button without shadow and arrow */
.lf-compare .lf-lead .cmp-form-card h2 { font-weight: 500; text-align: left; }
/* Subtitle as wide as the inputs: drop the component's max-width: 42ch */
.lf-compare .lf-lead .cmp-form-sub { margin: 12px 0 0; max-width: none; text-align: left; }
.lf-compare .lf-lead .cmp-form-kicker { display: none; }
.lf-compare .lf-lead .cmp-form-submit { box-shadow: none; font-size: 16px; font-weight: 700; }
.lf-compare .lf-lead .cmp-form-submit svg { display: none; }