/* =========================================================
   REDESIGN OVERRIDES  (customer-focused landing)
   Loaded last. Keep all landing-redesign changes here so
   they are easy to review and port back into the real site.
   ========================================================= */

/* ---------- 0. Brand tokens ---------- */
:root {
  --tp-orange: #ff6a00;        /* primary brand orange (unified from #ff6a1d / #ff6a00) */
  --tp-orange-hover: #e85f00;
  --tp-orange-2: #ff8a4d;      /* light accent / gradients */
  --tp-orange-wash: #fff3ea;   /* pale orange fill */
  --tp-ink: #16181d;
  --tp-muted: #667085;
  --tp-line: #e7e5e1;
  --tp-panel: #faf9f7;         /* warm off-white section bg */
  --tp-verified: #16a34a;      /* green "verified" */
}

/* ---------- 1. Main navbar: own white section ---------- */
.tp-navbar {
  position: static;          /* was fixed/overlay on the hero */
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e7e5e1;
  box-shadow: none;
  z-index: 100;
}

.tp-navbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  height: 88px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.tp-navbar-logo { display: flex; align-items: center; flex-shrink: 0; }
.tp-navbar-logo img { height: 28px; width: auto; display: block; }

.tp-navbar-spacer { flex: 1 1 auto; }

.tp-navbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  padding: 11px 22px;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.tp-navbar-pill--pros {
  color: #16181d !important;
  background: #ffffff;
  border: 1.5px solid #16181d;
}
.tp-navbar-pill--pros:hover {
  background: #16181d;
  color: #ffffff !important;
}

.tp-navbar-pill--login {
  color: #16181d !important;
  background: #ffffff;
  border: 1px solid #e7e5e1;
  padding: 11px 20px 11px 16px;
}
.tp-navbar-pill--login:hover { border-color: #16181d; }
.tp-navbar-pill--login .fa { font-size: 12px; }

/* ---------- 2. Hero: shorter than stock, copy pinned to the left ---------- */
.tp-page--landing .bannerSectionWrp.hero-ai {
  height: auto;                 /* was 75vh */
  min-height: 540px;            /* was 720px; taller than the 360 trial so more photo shows */
  padding: 40px 0;              /* was 150px 0 120px */
  align-items: center;
}
/* tighten the stacked hero content */
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-title { margin-bottom: 12px; }
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-subtitle { margin-bottom: 18px; }
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-chips { margin-top: 16px; }

/* left-align the whole hero block so it doesn't sit over the photos */
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-inner {
  max-width: 640px;
  margin: 0;                    /* was 0 auto */
  text-align: left;
}
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-title,
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
/* headline sized to sit on two lines in the left column */
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-title {
  font-size: 44px;
  line-height: 1.15;
}
/* the input box / chips stay narrower than the headline block */
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-inputbox { max-width: 560px; }
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-inputbox {
  margin-left: 0;
  margin-right: 0;
}
.tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-chips {
  justify-content: flex-start;
  margin-left: 0;
}

/* ---------- 3. Popular Services: tighten the gap under the banner ---------- */
.tp-category-section {
  padding-top: 40px;           /* was 80px  -> halved */
}

/* ---------- 4. Hero banner: rotating photo slideshow + left->right tint ---------- */
.tp-page--landing .bannerSectionWrp.hero-ai {
  background: #14100c;          /* was header.webp; slideshow sits on top */
  overflow: hidden;
}
.tp-page--landing .squireBanner::before { display: none; }   /* kill the old .5 grey overlay */

.hero-slideshow { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* photos are cropped to fill, not shown full-size */
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}
.hero-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* left -> right tint over the photos */
.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(16, 10, 6, 0.66)   0%,
    rgba(90, 38, 14, 0.36)  42%,
    rgba(255, 106, 29, 0.12) 74%,
    rgba(255, 106, 29, 0.02) 100%
  );
}

/* ---------- 5. Hero: service + zip search bar (replaces the AI box) ---------- */
.tp-page--landing .bannerSectionWrp.hero-ai .hero-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin: 4px 0 0;
  background: #ffffff;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.hero-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.hero-search-field > i {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: #9aa0a6;
  pointer-events: none;
}
.hero-search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: #16181d;
  padding: 12px 12px 12px 38px;
}
.hero-search-field input::placeholder { color: #9aa0a6; }
.hero-search-zip {
  flex: 0 0 138px;
  border-left: 1px solid #e7e5e1;
}
.hero-search-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--tp-orange);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 0 24px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.hero-search-btn:hover { background: var(--tp-orange-hover); }
@media (max-width: 640px) {
  .tp-page--landing .bannerSectionWrp.hero-ai .hero-search { flex-wrap: wrap; }
  .hero-search-zip { flex-basis: 100%; border-left: 0; border-top: 1px solid #e7e5e1; }
  .hero-search-btn { flex-basis: 100%; padding: 12px; }
}

/* keep the hero text above the slideshow + tint, and line its
   left edge up with the TopProz logo in the navbar (same box:
   max-width 1320, centered, 40px side padding) */
.bannerSectionWrp.hero-ai .container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  padding-left: 40px;
  padding-right: 40px;
}

/* =========================================================
   5. Popular Services in Your Area  -  visual polish (phase 1)
   ========================================================= */

/* section frame: warm off-white + hairline so it lifts off the hero */
.tp-page--landing .tp-category-section {
  background: #faf9f7;
  border-top: 1px solid #efece7;
  padding: 44px 0 56px;
}

/* heading + intro: tighter, intro copy smaller so cards rise up */
.tp-page--landing .tp-category-heading {
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.tp-page--landing .tp-category-section .container > p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #7a828f !important;
  max-width: 560px !important;
  margin: 0 auto 22px !important;
}

/* category selector -> centered pill chips (also fixes the left-clipped row) */
.tp-page--landing .tp-category-tabs {
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  overflow: visible;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 24px;
}
.tp-page--landing .tp-category-tab {
  padding: 9px 18px;
  border: 1px solid #e4e0d9;
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.tp-page--landing .tp-category-tab:hover {
  border-color: var(--tp-orange);
  color: #16181d;
}
.tp-page--landing .tp-category-tab.is-active {
  background: var(--tp-orange);
  border-color: var(--tp-orange);
  color: #fff;
}
.tp-page--landing .tp-category-tab.is-active::after { display: none; }  /* old underline */

/* card row: room for the hover lift, plus a right-edge fade hinting "more" */
.tp-page--landing .tp-category-rows { position: relative; }
.tp-page--landing .tp-category-row.is-active {
  gap: 20px;
  padding: 6px 4px 10px;
}
.tp-page--landing .tp-category-rows::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(250,249,247,0), #faf9f7);
}

/* cards: edge-to-edge photo, resting shadow, richer hover */
.tp-page--landing .tp-category-card {
  flex: 0 0 236px;
  min-width: 236px;
  border: 1px solid #ece8e2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tp-page--landing .tp-category-card:hover {
  transform: translateY(-4px);
  border-color: #ffd8bf;
  box-shadow: 0 12px 30px rgba(255,106,29,.14), 0 4px 10px rgba(16,24,40,.06);
}
.tp-page--landing .tp-category-card-media {
  padding: 0;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.tp-page--landing .tp-category-card-img {
  height: 168px;
  border-radius: 0;
  transition: transform .45s ease;
}
.tp-page--landing .tp-category-card:hover .tp-category-card-img { transform: scale(1.06); }

.tp-page--landing .tp-category-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 62px;            /* keep 1- and 2-line titles bottom-aligned */
  padding: 14px 16px 16px;
  text-align: left;
  font-size: 14.5px;
  font-weight: 700;
  color: #1f2937;
}
.tp-page--landing .tp-category-card-title::after {
  content: "\2192";
  color: var(--tp-orange);
  font-weight: 800;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.tp-page--landing .tp-category-card:hover .tp-category-card-title::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .tp-page--landing .tp-category-section { padding: 36px 0 44px; }
  .tp-page--landing .tp-category-heading { font-size: 24px; }
  .tp-page--landing .tp-category-card { flex-basis: 200px; min-width: 200px; }
  .tp-page--landing .tp-category-card-img { height: 148px; }
}

/* deal badge on service cards - same language as the find-a-pro promo panel
   (.fp-promo: orange value + uppercase "OFF"), pinned to the photo corner */
.tp-page--landing .tp-category-card-media { position: relative; }
.tp-page--landing .tp-deal-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: #fff;
  border-radius: 999px;
  padding: 5px 11px 5px 10px;
  box-shadow: 0 2px 8px rgba(16,24,40,.18);
}
.tp-page--landing .tp-deal-badge b {
  color: var(--tp-orange);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.tp-page--landing .tp-deal-badge i {
  color: #6b7280;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-style: normal;
  line-height: 1;
}

/* =========================================================
   6. "Every job, kept on the record"  section  (landing)
   ========================================================= */
.tp-page--landing .tp-records-section {
  background: #ffffff;
  border-top: 1px solid #efece7;
  padding: 88px 0;
}
.tp-page--landing .tp-records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.tp-page--landing .tp-records-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-orange);
  margin-bottom: 12px;
}
.tp-page--landing .tp-records-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111;
  margin: 0 0 14px;
}
.tp-page--landing .tp-records-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: #667085;
  margin: 0 0 26px;
  max-width: 520px;
}
.tp-page--landing .tp-records-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.tp-page--landing .tp-records-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.tp-page--landing .tp-records-ic {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 11px;
  background: #faf9f7;
  border: 1px solid #ece8e2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.tp-page--landing .tp-records-list strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 2px;
}
.tp-page--landing .tp-records-list li > div > span {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: #667085;
}

.tp-page--landing .tp-record-card {
  background: #faf9f7;
  border: 1px solid #ece8e2;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(16,24,40,.10), 0 4px 12px rgba(16,24,40,.05);
  padding: 8px;
  max-width: 420px;
  margin-left: auto;
}
.tp-page--landing .tp-record-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px 12px;
}
.tp-page--landing .tp-record-card-head > span:first-child {
  font-weight: 800;
  font-size: 14px;
  color: #16181d;
}
.tp-page--landing .tp-record-count {
  font-size: 11.5px;
  color: #9aa0a6;
  font-weight: 600;
}
.tp-page--landing .tp-record-item {
  border: 1px solid #f0eee9;
  border-radius: 14px;
  padding: 13px 14px;
  margin: 6px;
  background: #ffffff;
}
.tp-page--landing .tp-record-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.tp-page--landing .tp-record-row strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f2937;
}
.tp-page--landing .tp-record-cost {
  font-size: 13.5px;
  font-weight: 800;
  color: #16181d;
  white-space: nowrap;
}
.tp-page--landing .tp-record-meta {
  font-size: 11.5px;
  color: #8a8f98;
  margin: 4px 0 8px;
}
.tp-page--landing .tp-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tp-page--landing .tp-record-tags span {
  font-size: 10.5px;
  font-weight: 600;
  color: #4b5563;
  background: #f3f2ef;
  border-radius: 999px;
  padding: 4px 9px;
}
.tp-page--landing .tp-record-tags .tp-record-save {
  background: #fff3ea;
  color: var(--tp-orange);
}

@media (max-width: 900px) {
  .tp-page--landing .tp-records-section { padding: 56px 0; }
  .tp-page--landing .tp-records-grid { grid-template-columns: 1fr; gap: 36px; }
  .tp-page--landing .tp-records-title { font-size: 25px; }
  .tp-page--landing .tp-record-card { margin: 0 auto; }
}

/* =========================================================
   7. "What you can do with TopProz"  -  capability cards + mini-visuals
   ========================================================= */
.tp-page--landing .tp-why-card {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tp-page--landing .tp-why-body { flex: 1 1 auto; min-width: 0; }
/* keep the trailing emoji next to the last word instead of the card's right edge */
.tp-page--landing .tp-why-body h3 { display: block; }
.tp-page--landing .tp-why-body .tp-why-emoji { margin-left: 5px; }

/* "Get the app" store badges under the phone mockup */
.tp-page--landing .tp-why-getapp {
  margin-top: 24px;
  text-align: center;
}
.tp-page--landing .tp-why-getapp-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #667085;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.tp-page--landing .tp-why-getapp-badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.tp-page--landing .tp-why-getapp-badges a {
  display: block;
  transition: transform .15s ease, opacity .15s ease;
}
.tp-page--landing .tp-why-getapp-badges a:hover { transform: translateY(-2px); opacity: .9; }
.tp-page--landing .tp-why-getapp-badges img {
  height: 46px;
  width: auto;
  display: block;
}
.tp-page--landing .tp-why-visual {
  flex: 0 0 140px;
  height: 118px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 10px;
  overflow: hidden;
}

/* 1 - vetted pro badge */
.tp-page--landing .tpv-vetted {
  background: linear-gradient(160deg, #ecfdf3, #dcfce7);
  border: 1px solid #bbf7d0;
  gap: 5px;
}
.tp-page--landing .tpv-shield {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-page--landing .tpv-vetted b {
  font-size: 12.5px;
  font-weight: 800;
  color: #14532d;
}
.tp-page--landing .tpv-vetted em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: #15803d;
  line-height: 1.25;
}

/* 2 - coupon, styled after the printed A/C tune-up coupon */
.tp-page--landing .tpv-coupon {
  background: #16293b;
  padding: 7px;
}
.tp-page--landing .tpv-coupon-in {
  width: 100%;
  height: 100%;
  border: 1.5px dashed rgba(255, 255, 255, .55);
  border-radius: 9px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.tp-page--landing .tpv-c-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #e0574a;
}
.tp-page--landing .tpv-c-price {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #e0574a;
  letter-spacing: -.01em;
}
.tp-page--landing .tpv-c-fine {
  font-size: 8px;
  font-weight: 600;
  color: #8a8f98;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* 3 - verified review */
.tp-page--landing .tpv-review {
  background: #fff;
  border: 1px solid #ece8e2;
  gap: 6px;
}
.tp-page--landing .tpv-stars {
  color: #ff9500;
  font-size: 13px;
  letter-spacing: 1px;
}
.tp-page--landing .tpv-quote {
  font-size: 10px;
  font-style: italic;
  color: #4b5563;
  line-height: 1.35;
}
.tp-page--landing .tpv-vjob {
  font-size: 8.5px;
  font-weight: 700;
  color: #16a34a;
  background: #ecfdf3;
  border-radius: 999px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

@media (max-width: 991px) {
  .tp-page--landing .tp-why-card { gap: 14px; }
  .tp-page--landing .tp-why-visual { flex-basis: 120px; height: 108px; }
}
@media (max-width: 380px) {
  .tp-page--landing .tp-why-card { flex-direction: column; align-items: flex-start; }
  .tp-page--landing .tp-why-visual { flex-basis: auto; width: 100%; height: 96px; }
}

/* =========================================================
   8. Hero AI assistant entry point (under the search bar)
   ========================================================= */
.tp-page--landing .hero-ai-assist {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 11px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  max-width: 100%;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-page--landing .hero-ai-assist:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-1px);
}
.tp-page--landing .hero-ai-assist:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.tp-page--landing .hero-ai-assist-icon {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--tp-orange-2), var(--tp-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
}
.tp-page--landing .hero-ai-assist-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  line-height: 1.3;
}
.tp-page--landing .hero-ai-assist-text b { font-weight: 700; color: #fff; }
.tp-page--landing .hero-ai-assist-go {
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
  margin-left: 2px;
}

.tp-page--landing .hero-ai-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tp-page--landing .hero-ai-prompt {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.tp-page--landing .hero-ai-prompt:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .55);
}

/* let the assistant trigger open the hidden chat overlay in this static preview */
#tp-chat-overlay.is-open { display: block !important; }

@media (max-width: 640px) {
  .tp-page--landing .hero-ai-assist { width: 100%; }
}

/* =========================================================
   9. Trust strip (thin band under the hero)
   ========================================================= */
.tp-page--landing .tp-trust-strip {
  background: #fff;
  border-bottom: 1px solid #efece7;
}
.tp-page--landing .tp-trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.tp-page--landing .tp-trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}
.tp-page--landing .tp-trust-num {
  font-family: 'Sora', 'Poppins', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: #16181d;
  letter-spacing: -0.01em;
}
.tp-page--landing .tp-trust-star { color: var(--tp-orange); margin-left: 2px; }
.tp-page--landing .tp-trust-cap {
  font-size: 12px;
  font-weight: 600;
  color: #8a8f98;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 3px;
}
.tp-page--landing .tp-trust-sep {
  width: 1px;
  height: 30px;
  background: #e7e5e1;
}
@media (max-width: 700px) {
  .tp-page--landing .tp-trust-sep { display: none; }
  .tp-page--landing .tp-trust-strip-inner { gap: 16px 26px; }
  .tp-page--landing .tp-trust-stat { flex: 0 0 40%; }
  .tp-page--landing .tp-trust-num { font-size: 18px; }
}

/* =========================================================
   10. "How we verify every pro" section
   ========================================================= */
.tp-page--landing .tp-verify-section {
  background: #faf9f7;
  border-top: 1px solid #efece7;
  padding: 72px 0;
}
.tp-page--landing .tp-verify-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.tp-page--landing .tp-verify-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-orange);
  margin-bottom: 10px;
}
.tp-page--landing .tp-verify-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: #111;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.tp-page--landing .tp-verify-head p { font-size: 15.5px; line-height: 1.65; color: #667085; margin: 0; }
.tp-page--landing .tp-verify-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tp-page--landing .tp-verify-step {
  background: #fff;
  border: 1px solid #ece8e2;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}
.tp-page--landing .tp-verify-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff3ea;
  font-size: 20px;
  margin-bottom: 14px;
}
.tp-page--landing .tp-verify-step h3 { font-size: 15px; font-weight: 700; color: #16181d; margin: 0 0 6px; }
.tp-page--landing .tp-verify-step p { font-size: 13px; line-height: 1.55; color: #667085; margin: 0; }
.tp-page--landing .tp-verify-note {
  text-align: center;
  margin: 28px 0 0;
  font-size: 14px;
  color: #667085;
}
.tp-page--landing .tp-verify-badge {
  display: inline-block;
  background: #ecfdf3;
  color: #15803d;
  font-weight: 700;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 11px;
  margin: 0 2px;
}
@media (max-width: 900px) {
  .tp-page--landing .tp-verify-section { padding: 52px 0; }
  .tp-page--landing .tp-verify-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-page--landing .tp-verify-head h2 { font-size: 25px; }
}
@media (max-width: 480px) {
  .tp-page--landing .tp-verify-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   11. Testimonials
   ========================================================= */
.tp-page--landing .tp-testi-section { background: #fff; padding: 76px 0; }
.tp-page--landing .tp-testi-head { text-align: center; margin-bottom: 40px; }
.tp-page--landing .tp-testi-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: #111;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.tp-page--landing .tp-testi-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #667085;
}
.tp-page--landing .tp-testi-stars { color: #ff9500; letter-spacing: 1px; font-size: 15px; }
.tp-page--landing .tp-testi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tp-page--landing .tp-testi-card {
  margin: 0;
  background: #faf9f7;
  border: 1px solid #ece8e2;
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tp-page--landing .tp-testi-cardstars { color: #ff9500; letter-spacing: 1px; font-size: 13px; }
.tp-page--landing .tp-testi-card blockquote {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #33383f;
}
.tp-page--landing .tp-testi-card blockquote::before { content: "\201C"; }
.tp-page--landing .tp-testi-card blockquote::after { content: "\201D"; }
.tp-page--landing .tp-testi-card figcaption {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tp-page--landing .tp-testi-card figcaption b { font-size: 13px; font-weight: 700; color: #16181d; }
.tp-page--landing .tp-testi-card figcaption span { font-size: 11.5px; color: #8a8f98; }
.tp-page--landing .tp-testi-verified { color: #15803d !important; font-weight: 700; }
@media (max-width: 980px) {
  .tp-page--landing .tp-testi-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-page--landing .tp-testi-head h2 { font-size: 25px; }
  .tp-page--landing .tp-testi-section { padding: 54px 0; }
}
@media (max-width: 540px) {
  .tp-page--landing .tp-testi-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   12. The TopProz Guarantee
   ========================================================= */
.tp-page--landing .tp-guarantee-section {
  background: #fff6f0;
  border-top: 1px solid #ffe6d5;
  border-bottom: 1px solid #ffe6d5;
  padding: 64px 0;
}
.tp-page--landing .tp-guarantee-inner {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.tp-page--landing .tp-guarantee-badge {
  flex: 0 0 68px;
  height: 68px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(22, 163, 74, .28);
}
.tp-page--landing .tp-guarantee-body { flex: 1 1 auto; max-width: 720px; }
.tp-page--landing .tp-guarantee-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d2691e;
  margin-bottom: 8px;
}
.tp-page--landing .tp-guarantee-body h2 {
  font-size: 30px;
  font-weight: 800;
  color: #111;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.tp-page--landing .tp-guarantee-body p { font-size: 15.5px; line-height: 1.65; color: #5b4636; margin: 0 0 16px; }
.tp-page--landing .tp-guarantee-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tp-page--landing .tp-guarantee-list li {
  font-size: 14px;
  font-weight: 600;
  color: #3a2e22;
}
.tp-page--landing .tp-guarantee-cta {
  display: inline-block;
  background: #16181d;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 10px;
  transition: background .18s ease;
}
.tp-page--landing .tp-guarantee-cta:hover { background: #000; }
.tp-page--landing .tp-guarantee-co {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  color: #9c8574;
  font-weight: 600;
}
@media (max-width: 700px) {
  .tp-page--landing .tp-guarantee-section { padding: 46px 0; }
  .tp-page--landing .tp-guarantee-inner { gap: 18px; }
  .tp-page--landing .tp-guarantee-badge { flex-basis: 52px; height: 52px; font-size: 24px; }
  .tp-page--landing .tp-guarantee-body h2 { font-size: 24px; }
}

/* =========================================================
   13. Inline icon set (replaces emoji in the trust sections)
   ========================================================= */
.tp-page--landing .tp-ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tp-page--landing .tp-why-emoji {
  display: inline-flex;
  color: var(--tp-orange);
  font-size: 18px;
}
.tp-page--landing .tp-verify-ic .tp-ico {
  width: 22px;
  height: 22px;
  color: var(--tp-orange);
}
.tp-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   14. Verification & security strip
   ========================================================= */
.tp-page--landing .tp-cred-strip {
  background: #fff;
  border-top: 1px solid var(--tp-line);
  border-bottom: 1px solid var(--tp-line);
  padding: 26px 0;
}
.tp-page--landing .tp-cred-label {
  text-align: center;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9aa0a6;
}
.tp-page--landing .tp-cred-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.tp-page--landing .tp-cred-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a3f4a;
}
.tp-page--landing .tp-cred-item .tp-ico {
  width: 17px;
  height: 17px;
  color: var(--tp-verified);
}

/* =========================================================
   15. Comparison table
   ========================================================= */
.tp-page--landing .tp-compare-section {
  background: var(--tp-panel);
  border-top: 1px solid #efece7;
  padding: 76px 0;
}
.tp-page--landing .tp-compare-head { text-align: center; max-width: 600px; margin: 0 auto 36px; }
.tp-page--landing .tp-compare-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.tp-page--landing .tp-compare-head p { font-size: 15px; line-height: 1.6; color: var(--tp-muted); margin: 0; }
.tp-page--landing .tp-compare-tablewrap {
  max-width: 760px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #ece8e2;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16,24,40,.06);
}
.tp-page--landing .tp-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.tp-page--landing .tp-compare-table th,
.tp-page--landing .tp-compare-table td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid #f0eee9;
}
.tp-page--landing .tp-compare-table tbody tr:last-child th,
.tp-page--landing .tp-compare-table tbody tr:last-child td { border-bottom: 0; }
.tp-page--landing .tp-compare-table thead th {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a8f98;
  background: #faf9f7;
}
.tp-page--landing .tp-compare-table thead th.tp-compare-us {
  color: var(--tp-orange);
}
.tp-page--landing .tp-compare-table tbody th {
  font-size: 13.5px;
  font-weight: 600;
  color: #33383f;
  width: 56%;
}
.tp-page--landing .tp-compare-table td {
  text-align: center;
  width: 22%;
}
.tp-page--landing .tp-compare-table td.tp-compare-us { background: #fff8f2; }
.tp-page--landing .tp-compare-table td.tp-compare-us .tp-ico {
  width: 20px;
  height: 20px;
  color: var(--tp-verified);
  stroke-width: 2.4;
}
.tp-page--landing .tp-ico-dim { color: #c4c8ce !important; }
.tp-page--landing .tp-compare-no {
  font-size: 12px;
  font-weight: 600;
  color: #9aa0a6;
}
@media (max-width: 700px) {
  .tp-page--landing .tp-compare-section { padding: 52px 0; }
  .tp-page--landing .tp-compare-head h2 { font-size: 25px; }
}

/* =========================================================
   16. "Real pros, real work" gallery
   ========================================================= */
.tp-page--landing .tp-gallery-section {
  background: #fff;
  padding: 76px 0;
}
.tp-page--landing .tp-gallery-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 36px;
}
.tp-page--landing .tp-gallery-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-orange);
  margin-bottom: 10px;
}
.tp-page--landing .tp-gallery-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.tp-page--landing .tp-gallery-head p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tp-muted);
  margin: 0;
}
.tp-page--landing .tp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tp-page--landing .tp-gallery-item {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #ece8e2;
}
.tp-page--landing .tp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.tp-page--landing .tp-gallery-item:hover img { transform: scale(1.05); }
.tp-page--landing .tp-gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  background: linear-gradient(to top, rgba(10, 14, 20, .82), rgba(10, 14, 20, 0));
}
@media (max-width: 900px) {
  .tp-page--landing .tp-gallery-section { padding: 52px 0; }
  .tp-page--landing .tp-gallery-head h2 { font-size: 25px; }
  .tp-page--landing .tp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tp-page--landing .tp-gallery-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   17. "How TopProz works" - 3 steps
   ========================================================= */
.tp-page--landing .tp-how-section {
  background: #fff;
  border-bottom: 1px solid #efece7;
  padding: 72px 0;
}
.tp-page--landing .tp-how-head { text-align: center; margin-bottom: 44px; }
.tp-page--landing .tp-how-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-orange);
  margin-bottom: 10px;
}
.tp-page--landing .tp-how-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
  margin: 0;
}
.tp-page--landing .tp-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tp-page--landing .tp-how-step {
  position: relative;
  text-align: center;
  padding: 0 14px;
}
.tp-page--landing .tp-how-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px;
  right: -12px;
  width: 24px;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--tp-orange-2) 0 6px, transparent 6px 12px);
}
.tp-page--landing .tp-how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--tp-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
}
.tp-page--landing .tp-how-ic {
  display: block;
  margin: 0 auto 12px;
  color: var(--tp-orange);
  font-size: 26px;
  line-height: 1;
}
.tp-page--landing .tp-how-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tp-ink);
  margin: 0 0 8px;
}
.tp-page--landing .tp-how-step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tp-muted);
  margin: 0;
  max-width: 260px;
  margin-inline: auto;
}
@media (max-width: 780px) {
  .tp-page--landing .tp-how-section { padding: 52px 0; }
  .tp-page--landing .tp-how-head h2 { font-size: 25px; }
  .tp-page--landing .tp-how-steps { grid-template-columns: 1fr; gap: 30px; }
  .tp-page--landing .tp-how-step:not(:last-child)::after { display: none; }
}

/* =========================================================
   18. Top-rated pros near you
   ========================================================= */
.tp-page--landing .tp-pros-section {
  background: var(--tp-panel);
  border-top: 1px solid #efece7;
  padding: 72px 0;
}
.tp-page--landing .tp-pros-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.tp-page--landing .tp-pros-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-orange);
  margin-bottom: 8px;
}
.tp-page--landing .tp-pros-head h2 {
  font-size: 30px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
  margin: 0;
}
.tp-page--landing .tp-pros-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tp-ink);
  text-decoration: none;
  white-space: nowrap;
}
.tp-page--landing .tp-pros-all .tp-ico { width: 15px; height: 15px; color: var(--tp-orange); }
.tp-page--landing .tp-pros-all:hover { color: var(--tp-orange); }
.tp-page--landing .tp-pros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.tp-page--landing .tp-pro-card {
  background: #fff;
  border: 1px solid #ece8e2;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05);
}
.tp-page--landing .tp-pro-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tp-page--landing .tp-pro-photo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: #ece8e2;
}
.tp-page--landing .tp-pro-id h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tp-ink);
  margin: 0 0 2px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tp-page--landing .tp-pro-verif .tp-ico {
  width: 14px;
  height: 14px;
  color: var(--tp-verified);
  flex-shrink: 0;
}
.tp-page--landing .tp-pro-trade {
  font-size: 11.5px;
  color: #8a8f98;
  font-weight: 600;
  margin: 0;
}
.tp-page--landing .tp-pro-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--tp-muted);
  font-weight: 600;
}
.tp-page--landing .tp-pro-rating {
  color: #ff9500;
  font-weight: 800;
}
.tp-page--landing .tp-pro-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tp-page--landing .tp-pro-tags li {
  font-size: 10px;
  font-weight: 700;
  color: #15803d;
  background: #ecfdf3;
  border-radius: 999px;
  padding: 3px 8px;
}
.tp-page--landing .tp-pro-cta {
  margin-top: auto;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--tp-ink);
  text-decoration: none;
  border: 1px solid #e4e0d9;
  border-radius: 9px;
  padding: 9px 12px;
  transition: border-color .16s ease, color .16s ease;
}
.tp-page--landing .tp-pro-cta:hover {
  border-color: var(--tp-orange);
  color: var(--tp-orange);
}
@media (max-width: 980px) {
  .tp-page--landing .tp-pros-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-page--landing .tp-pros-head h2 { font-size: 24px; }
  .tp-page--landing .tp-pros-section { padding: 52px 0; }
}
@media (max-width: 520px) {
  .tp-page--landing .tp-pros-grid { grid-template-columns: 1fr; }
}

/* fuller footer legitimacy line */
.tp-page--landing .vl-footer-copy { line-height: 1.6; }

/* =========================================================
   19. Landing AI chat  ->  right-side slide-in drawer
   ========================================================= */
#tp-chat-overlay .tp-chat-backdrop {
  background: rgba(10, 18, 28, .5);
}
#tp-chat-overlay .tp-chat-container {
  position: fixed !important;
  inset: 0 0 0 auto !important;      /* pin to the right edge, full height */
  width: min(440px, 100vw) !important;
  max-width: none !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: translateX(100%) !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: -24px 0 60px rgba(10, 18, 28, .28);
  display: flex;
  flex-direction: column;
}
#tp-chat-overlay.is-visible .tp-chat-container {
  transform: translateX(0) !important;
}
#tp-chat-overlay .tp-chat-header {
  flex-shrink: 0;
  position: relative;
  padding-right: 60px;              /* room for the corner close button */
}
#tp-chat-overlay .tp-chat-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f3f2ef;
  border: 0;
  color: #16181d;
  font-size: 15px;
  cursor: pointer;
  transition: background .16s ease;
}
#tp-chat-overlay .tp-chat-close:hover { background: #e7e5e1; }
#tp-chat-overlay .tp-chat-messages { flex: 1 1 auto; overflow-y: auto; }
#tp-chat-overlay .tp-chat-input-area { flex-shrink: 0; }
@media (max-width: 480px) {
  #tp-chat-overlay .tp-chat-container { width: 100vw !important; }
}

/* =========================================================
   20. Dispatch notification card  -  right column of Why TopProz
   ========================================================= */

/* "Track your pro in real time" list card mini-visual */
.tp-page--landing .tpv-dispatch {
  background: linear-gradient(150deg, #1447c9, #2f6fed);
  border: 1px solid #1447c9;
  gap: 8px;
}
.tp-page--landing .tpv-dispatch-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.tp-page--landing .tpv-dispatch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7CFFB2;
  box-shadow: 0 0 0 3px rgba(124, 255, 178, .35);
}
.tp-page--landing .tpv-dispatch-eta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.tp-page--landing .tpv-dispatch-eta svg { width: 11px; height: 11px; }

.tp-page--landing .tp-disp {
  --dblue: #1447c9;
  --dblue2: #2f6fed;
  --dtint: #eaf0ff;
  --dgreen-tint: #e9f9ef;
  --dink: #111827;
  --dsub: #4b5563;
  --dmuted: #9ca3af;
  --dline: #eceef1;
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
}
.tp-page--landing .tp-disp-phone {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  background: #f4f5f7;
  box-shadow: 0 30px 70px rgba(13, 20, 38, .28), 0 0 0 8px #0a0a0a;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Helvetica, Arial, sans-serif;
}
.tp-page--landing .tp-disp-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 5px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 600;
}
.tp-page--landing .tp-disp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px 11px;
  background: #fff;
  border-bottom: 1px solid var(--dline);
}
.tp-page--landing .tp-disp-back { color: var(--dblue); font-size: 14px; font-weight: 600; flex-shrink: 0; }
.tp-page--landing .tp-disp-contact { text-align: center; }
.tp-page--landing .tp-disp-num { font-size: 12.5px; font-weight: 600; color: var(--dink); }
.tp-page--landing .tp-disp-subnum { font-size: 10.5px; color: var(--dmuted); margin-top: 1px; }
.tp-page--landing .tp-disp-spacer { width: 40px; flex-shrink: 0; }
.tp-page--landing .tp-disp-body { padding: 16px 14px 20px; background: #f4f5f7; }
.tp-page--landing .tp-disp-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
  overflow: hidden;
}
.tp-page--landing .tp-disp-top {
  background: linear-gradient(135deg, var(--dblue), var(--dblue2));
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tp-page--landing .tp-disp-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.tp-page--landing .tp-disp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7CFFB2;
  box-shadow: 0 0 0 3px rgba(124, 255, 178, .35);
}
.tp-page--landing .tp-disp-eta {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
}
.tp-page--landing .tp-disp-photo { width: 100%; height: 224px; position: relative; overflow: hidden; }
.tp-page--landing .tp-disp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-page--landing .tp-disp-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
}
.tp-page--landing .tp-disp-prorow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}
.tp-page--landing .tp-disp-namerow { display: flex; align-items: center; }
.tp-page--landing .tp-disp-name { font-size: 15px; font-weight: 700; color: var(--dink); }
.tp-page--landing .tp-disp-verif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--dblue);
  margin-left: 5px;
  flex-shrink: 0;
}
.tp-page--landing .tp-disp-verif svg { width: 10px; height: 10px; }
.tp-page--landing .tp-disp-company { font-size: 12px; color: var(--dsub); margin-top: 1px; }
.tp-page--landing .tp-disp-actions { margin-left: auto; display: flex; gap: 8px; }
.tp-page--landing .tp-disp-ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.tp-page--landing .tp-disp-ic--call { background: var(--dgreen-tint); }
.tp-page--landing .tp-disp-ic--text { background: var(--dtint); }
.tp-page--landing .tp-disp-divider { height: 1px; background: var(--dline); margin: 0 16px; }
.tp-page--landing .tp-disp-details { padding: 13px 16px 4px; }
.tp-page--landing .tp-disp-drow { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.tp-page--landing .tp-disp-dic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--dtint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 1px;
}
.tp-page--landing .tp-disp-k {
  font-size: 10.5px;
  color: var(--dmuted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tp-page--landing .tp-disp-v { font-size: 13px; color: var(--dink); font-weight: 600; line-height: 1.4; margin-top: 1px; }
.tp-page--landing .tp-disp-progress { padding: 4px 16px 16px; }
.tp-page--landing .tp-disp-track { height: 5px; background: var(--dline); border-radius: 10px; overflow: hidden; }
.tp-page--landing .tp-disp-fill {
  height: 100%;
  width: 82%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--dblue), var(--dblue2));
}
.tp-page--landing .tp-disp-plabels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--dmuted);
  margin-top: 6px;
  font-weight: 600;
}
.tp-page--landing .tp-disp-disclaimer {
  text-align: center;
  color: var(--dmuted);
  font-size: 11px;
  margin-top: 14px;
}
/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .tp-navbar-inner { height: 64px; padding: 0 20px; gap: 10px; }
  .tp-navbar-pill { padding: 9px 16px; font-size: 13px; }
  .tp-navbar-pill--login { padding: 9px 14px 9px 12px; }
}
@media (max-width: 480px) {
  .tp-navbar-inner { padding: 0 14px; gap: 8px; }
  .tp-navbar-logo img { height: 22px; }
  .tp-navbar-pill { padding: 8px 11px; font-size: 12px; gap: 5px; }
  .tp-navbar-pill--login { padding: 8px 11px 8px 9px; }
  .tp-navbar-pill--login .fa { font-size: 11px; }
  /* hero copy fits the narrow column */
  .tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-inner { max-width: 100%; }
  .tp-page--landing .bannerSectionWrp.hero-ai .hero-ai-title { font-size: 30px; }
}

/* ==========================================================================
   Repo-side additions — not part of the _preview bundle.

   The prototype replaced the site header with its own solid-white .tp-navbar.
   We keep include/menu instead (it carries the mega-menu, the mobile drawer,
   the logged-in/out states and the GTM demo hooks), so the header stays
   transparent over the hero. The slideshow is much brighter than the old
   static banner, which left the white nav links and the white-outlined
   "Book a Demo" button unreadable on the lighter slides.

   Fix: a top-down scrim over the slideshow, under the hero copy. Sized to the
   header band only, so it darkens the nav without touching the artwork below.
   ========================================================================== */
.tp-page--landing .bannerSectionWrp.hero-ai::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  z-index: 1;                 /* same layer as .hero-tint, below .container */
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(16, 10, 6, 0.62) 0%,
    rgba(16, 10, 6, 0.34) 45%,
    rgba(16, 10, 6, 0)    100%
  );
}

/* Once the header goes solid on scroll the scrim is redundant, but it is part
   of the hero (not the header), so it simply scrolls away with it. */
@media (max-width: 991px) {
  .tp-page--landing .bannerSectionWrp.hero-ai::after { height: 140px; }
}

/* The prototype's navbar sat above the hero, so the hero only needed 40px of
   top padding. Our .tp-header is absolutely positioned over it, so the hero
   copy has to clear the header band itself — otherwise the h1 runs into the
   logo once the content is tall enough to stop centring (mobile). */
.tp-page--landing .bannerSectionWrp.hero-ai {
  padding-top: 104px;
}
@media (max-width: 991px) {
  .tp-page--landing .bannerSectionWrp.hero-ai { padding-top: 92px; }
}

/* Comparison table on phones: fit all three columns instead of scrolling.
   .tp-compare-table carries min-width:520px, so inside the 376px wrapper a
   third of the table sat off-screen behind an overflow-x scroll the reader had
   to discover. Dropping the min-width and fixing the column ratios shows the
   whole comparison at once; the row labels wrap, which is fine for this
   content, and the wrapper then has nothing left to scroll. */
@media (max-width: 767px) {
  .tp-page--landing .tp-compare-tablewrap { overflow-x: visible; }

  .tp-page--landing .tp-compare-table {
    min-width: 0;
    table-layout: fixed;
  }

  .tp-page--landing .tp-compare-table th,
  .tp-page--landing .tp-compare-table td {
    padding: 12px 8px;
  }

  .tp-page--landing .tp-compare-table thead th { font-size: 10px; letter-spacing: .02em; }

  /* table-layout:fixed takes column widths from the first row, so the header
     cells must carry them too or every column ends up an equal third. */
  .tp-page--landing .tp-compare-table thead th:first-child { width: 52%; }
  .tp-page--landing .tp-compare-table thead th:nth-child(2),
  .tp-page--landing .tp-compare-table thead th:nth-child(3) { width: 24%; }

  .tp-page--landing .tp-compare-table tbody th {
    width: 52%;
    font-size: 12.5px;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .tp-page--landing .tp-compare-table td {
    width: 24%;
    font-size: 11.5px;
  }

  .tp-page--landing .tp-compare-no { font-size: 11px; overflow-wrap: break-word; }
}