/* ---------- Jobber comparison page (/jobber-alternative) ----------
   Written for someone already paying Jobber: the hero answers the money
   question with a calculator, the move is spelled out in three steps, and the
   rest is what they have the morning after.

   Nothing here fades in on scroll. The .reveal-item pattern used elsewhere
   starts at opacity 0 and waits for an IntersectionObserver, which leaves the
   content blank in any renderer that does not scroll. Motion on this page is
   limited to hover and to the price swap, so the content is correct the
   instant it paints. */

/* ---------- Hero ---------- */
.mkt .compare-hero { padding-bottom: 64px; }
.mkt .compare-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.mkt .compare-hero-copy h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 18px; text-wrap: balance; }
.mkt .compare-hero-sub { color: var(--slate); font-size: 1.12rem; max-width: 34rem; text-wrap: pretty; margin-bottom: 26px; }
.mkt .compare-hero .cta-row { justify-content: flex-start; }
.mkt .compare-head h2 { text-wrap: balance; }
.mkt .compare-head p { text-wrap: pretty; }
.mkt .compare-guarantee { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--slate); }
.mkt .compare-guarantee svg { width: 18px; height: 18px; margin-top: 2px; color: var(--teal-deep); flex: none; }

/* ---------- Savings calculator ----------
   Team size in, yearly saving out, with the two monthly figures it came from
   underneath: a saving with no arithmetic shown is a number a buyer discounts. */
.mkt .compare-calc { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 26px 28px; box-shadow: var(--shadow-card); max-width: 460px; }
.mkt .compare-calc-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.mkt .compare-calc select { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--mist); padding: 12px 14px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.mkt .compare-calc select:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.mkt .compare-calc-result { display: block; margin-top: 18px; font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--teal-deep); line-height: 1.15; }
.mkt .compare-calc-figures { display: flex; gap: 10px; margin-top: 14px; }
.mkt .compare-calc-fig { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-align: center; }
.mkt .compare-calc-fig.is-ours { border-color: rgba(11, 110, 108, .35); background: rgba(230, 246, 245, .5); }
.mkt .compare-calc-fig small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.mkt .compare-calc-fig strong { display: block; margin-top: 3px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--slate); }
.mkt .compare-calc-fig.is-ours strong { color: var(--teal-deep); }
.mkt .compare-calc-note { margin-top: 10px; font-size: 13px; color: var(--slate-light); line-height: 1.5; }

/* ---------- Switching ---------- */
.mkt .compare-switch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: center; }
.mkt .compare-steps { list-style: none; display: grid; gap: 22px; padding: 0; margin: 0; }
.mkt .compare-steps li { display: flex; gap: 16px; align-items: flex-start; }
.mkt .compare-step-number { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); box-shadow: 0 8px 18px -8px rgba(11, 110, 108, .6); }
.mkt .compare-steps h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.mkt .compare-steps p { color: var(--slate); font-size: 15px; line-height: 1.55; }

/* ---------- What you get ---------- */
.mkt .compare-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.mkt .compare-reason { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; box-shadow: var(--shadow-card); }
.mkt .compare-reason .icon-tile { width: 46px; height: 46px; margin-bottom: 16px; }
.mkt .compare-reason .icon-tile svg { width: 23px; height: 23px; }
.mkt .compare-reason h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.25; }
.mkt .compare-reason p { color: var(--slate); font-size: 14.5px; line-height: 1.55; }

/* ---------- Price table ---------- */
.mkt .compare-table-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; border-radius: 22px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.mkt .compare-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
.mkt .compare-table th,
.mkt .compare-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mkt .compare-table tbody tr:last-child th,
.mkt .compare-table tbody tr:last-child td { border-bottom: 0; }
.mkt .compare-table thead th { font-family: "Sora", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); background: var(--mist); }
.mkt .compare-table tbody th { font-weight: 500; color: var(--ink); }
.mkt .compare-table thead .is-jeero { color: var(--teal-deep); background: var(--teal-tint); }
.mkt .compare-table .is-jeero { background: rgba(230, 246, 245, .45); }
.mkt .compare-table .is-rival { color: var(--slate); }

.mkt .compare-band-row { display: flex; justify-content: center; margin-bottom: 26px; }
.mkt .compare-band { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mkt .compare-band svg { color: var(--teal-deep); }
.mkt .compare-band-select { border: 0; border-radius: 999px; background: var(--white); padding: 7px 12px; font: inherit; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.mkt .compare-band-select:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.mkt .compare-prices .compare-tier { display: block; font-family: "Sora", sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.mkt .compare-prices .compare-tier-note { display: block; margin-top: 2px; font-size: 13px; color: var(--slate-light); max-width: 22rem; }
.mkt .compare-prices .is-jeero { font-family: "Sora", sans-serif; font-weight: 700; font-size: 17px; color: var(--teal-deep); }
.mkt .compare-plan { display: block; margin-top: 2px; font-size: 13px; color: var(--slate-light); }
.mkt .compare-saving { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 90, 31, .1); color: #B93A0C; font-size: 13px; font-weight: 700; }
.mkt .compare-extra th[scope="row"] .compare-tier { font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 15px; }
.mkt .compare-extra .is-jeero { font-size: 15px; }

/* The source sits under the table it dates. */
.mkt .compare-source { max-width: 900px; margin: 18px auto 0; font-size: 13px; line-height: 1.55; color: var(--slate); text-align: center; text-wrap: pretty; }
.mkt .compare-source a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.mkt .compare-source a:hover { color: var(--teal-deeper); }
.mkt .compare-trademark { margin-top: 20px; text-align: center; font-size: 12px; color: var(--slate-light); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .mkt .compare-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .mkt .compare-calc { max-width: none; }
  .mkt .compare-switch { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  /* Every column stays in view: the rival's column is the point of the table,
     so it may not hide behind a sideways scroll. The side padding is sized so
     that the longest rival name in a header, "Housecall Pro", still fits the
     four columns into a 390px phone. */
  .mkt .compare-table { font-size: 13.5px; }
  .mkt .compare-table th,
  .mkt .compare-table td { padding: 11px 7px; }
  .mkt .compare-table thead th { font-size: 10.5px; letter-spacing: .05em; }
  .mkt .compare-prices .compare-tier { font-size: 14.5px; }
  .mkt .compare-prices .compare-tier-note { display: none; }
  .mkt .compare-prices .is-jeero { font-size: 15px; }
  .mkt .compare-plan,
  .mkt .compare-saving { font-size: 11.5px; }
  .mkt .compare-saving { padding: 3px 7px; }
}