/* Pricing page-specific styles. */

.pricing-hero { padding: 80px 0 40px; text-align: center; background: linear-gradient(180deg, #FDFDFE, var(--off-white-60)); }
.pricing-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 56px; letter-spacing: -0.025em; line-height: 1.08; margin: 20px auto; max-width: 780px; }
.pricing-hero p { font-size: 19px; color: var(--color-text-muted); max-width: 640px; margin: 0 auto; line-height: 1.5; }
.billing-toggle { display: inline-flex; margin-top: 32px; background: #fff; padding: 4px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); }
.billing-toggle button { padding: 10px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.billing-toggle button.on { background: var(--anthracite-100); color: #fff; }
.save-badge { margin-left: 8px; font-size: 11px; background: var(--green-100); color: var(--anthracite-100); padding: 2px 7px; border-radius: var(--radius-pill); }
.tiers { padding: 48px 0 96px; background: var(--off-white-40); }
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.tier { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.tier.featured { border-color: var(--anthracite-100); box-shadow: var(--shadow-lg); transform: scale(1.02); }
.tier.featured::before { content: 'Most popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--green-100); color: var(--anthracite-100); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: 0.04em; }
.tier h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.tier .desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; min-height: 44px; }
.tier .price { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: -0.025em; line-height: 1; }
.tier .price .per { font-size: 14px; color: var(--color-text-subtle); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.tier .price .custom { font-size: 28px; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--color-border); padding-top: 18px; }
.tier li { display: flex; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; }
.tier li svg { width: 16px; height: 16px; stroke: var(--green-100); fill: none; stroke-width: 2.25; flex-shrink: 0; margin-top: 1px; }
.tier li .bullet-body { display: block; }
/* Editors append overage / fine-print to a bullet by wrapping it in <small>.
   Render that on a new line, lighter, slightly smaller — a sub-bullet feel
   for "100 inspections / month then $0.50 each"-style copy. */
.tier li .bullet-body small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-subtle);
}
.tier .btn { margin-top: auto; justify-content: center; }
.included { padding: 96px 0; }
.inc-head { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; margin-bottom: 48px; align-items: end; }
.inc-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; line-height: 1.1; }
/* "What you always get" cards — matched to the .cap-card visual treatment
   on the use-case / case-study pages so the included-features grid reads
   as the same component family across the marketing site (white tile, 1px
   border, soft hover lift, green-20 icon chip). Previously these were bare
   icon-stacks with no card chrome. */
.inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.inc-card { padding: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; transition: border-color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.inc-card:hover { border-color: var(--green-100); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.inc-card .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--green-20); color: #1E7A2B; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.inc-card .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.inc-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 6px; }
.inc-card p { font-size: 14px; color: var(--color-text-muted); line-height: 1.55; }
.ent-section { padding: 96px 0; background: var(--gradient-deep); color: #fff; }
.ent-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ent-inner h2 { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.02em; color: #fff; line-height: 1.1; margin: 16px 0; }
.ent-inner p { color: rgba(255,255,255,0.75); font-size: 17px; line-height: 1.55; margin-bottom: 24px; }
.ent-ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ent-ul li { font-size: 16px; color: rgba(255,255,255,0.85); display: flex; gap: 8px; align-items: start; }
.ent-ul svg { width: 16px; height: 16px; stroke: var(--green-100); stroke-width: 2.25; fill: none; flex-shrink: 0; margin-top: 2px; }
.final-cta { background: var(--gradient-primary); color: #fff; padding: 96px 0; text-align: center; }
.final-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: 48px; letter-spacing: -0.02em; color: #fff; }
.final-cta .btns { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }

/* ===== Feature comparison table ===== */
.compare-head { margin-top: 96px; margin-bottom: 32px; max-width: 680px; }
.compare-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; line-height: 1.1; margin-top: 16px; }
.compare-sub { font-size: 16px; color: var(--color-text-muted); line-height: 1.55; margin-top: 12px; }

.compare-wrap { background: #fff; border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); }

/* "Not sure if it's worth switching?" link below the compare table — sits
   inside the same .included container so it aligns with the table edges. */
.compare-switch { margin-top: 28px; text-align: center; font-size: 16px; color: var(--color-text-muted); line-height: 1.55; }
.compare-switch a { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--anthracite-100); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.18); padding-bottom: 1px; transition: color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard); }
.compare-switch a:hover { color: var(--green-100); border-bottom-color: var(--green-100); }
.compare-switch a svg { width: 14px; height: 14px; transition: transform var(--motion-base) var(--ease-standard); }
.compare-switch a:hover svg { transform: translateX(3px); }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare .col-feat { width: 34%; }
.compare .col-featured { background: linear-gradient(180deg, rgba(97,206,112,0.04) 0%, rgba(97,206,112,0.015) 100%); }

.compare thead th {
  vertical-align: bottom;
  padding: 28px 20px 24px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  background: var(--off-white-40);
}
.compare thead th.featured-col {
  background: linear-gradient(180deg, rgba(27,32,38,0.02) 0%, rgba(97,206,112,0.06) 100%);
  border-bottom: 2px solid var(--green-100);
  position: relative;
}
.compare thead th.feat-col { text-align: left; background: var(--off-white-40); }
.hdr-legend { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); }

.tier-hdr { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tier-badge {
  display: inline-block;
  background: var(--green-100);
  color: var(--anthracite-100);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 2px;
}
.tier-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.tier-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.tier-price em { font-family: var(--font-ui); font-weight: 500; font-style: normal; font-size: 11px; color: var(--color-text-subtle); letter-spacing: 0; margin-left: 3px; }
.tier-price.tier-custom { font-size: 18px; letter-spacing: -0.01em; }

.compare tbody tr.group td {
  padding: 14px 20px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--off-white-60);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.compare tbody tr.group:first-child td { border-top: none; }

.compare tbody tr { transition: background var(--motion-fast) var(--ease-standard); }
.compare tbody tr:hover:not(.group) { background: var(--off-white-40); }
.compare tbody tr:hover:not(.group) .featured-col { background: rgba(97,206,112,0.10); }

.compare tbody th[scope="row"] {
  text-align: left;
  padding: 16px 20px;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
.compare tbody th[scope="row"] strong {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text);
  margin-bottom: 2px;
}
.feat-sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-subtle);
  font-weight: 400;
  line-height: 1.4;
}

.compare tbody td {
  padding: 16px 20px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.compare tbody tr:last-child th[scope="row"],
.compare tbody tr:last-child td { border-bottom: none; }

.compare .yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-20);
  color: #1E7A2B;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.compare .featured-col .yes {
  background: var(--green-100);
  color: var(--anthracite-100);
}
.compare .no {
  color: var(--color-text-subtle);
  font-size: 18px;
  opacity: 0.5;
  line-height: 1;
}

.compare tfoot td {
  padding: 24px 20px;
  text-align: center;
  background: var(--off-white-40);
  border-top: 1px solid var(--color-border);
}
.compare tfoot td.featured-col {
  background: linear-gradient(180deg, rgba(97,206,112,0.06) 0%, rgba(97,206,112,0.02) 100%);
}
.compare tfoot td .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .compare-wrap { overflow-x: auto; }
  .compare { min-width: 820px; }
  /* Included-features grid drops to 2-up at tablet — 3 columns × 6 cards
     starts to read crowded once the viewport narrows past the package
     pricing tier widths. */
  .inc-grid { grid-template-columns: repeat(2, 1fr); }
  /* Package tier cards: 4-up squeezes the pricing + bullet copy to the
     point of illegibility on tablet. Drop to 2-up here, then 1-up at
     phone widths below. */
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  /* Enterprise section: stack the copy + stats card vertically so the
     right-hand canvas (8m+ / 200k+ / 85% / 40+ / 99.98% stats panel)
     wraps below the headline + bullets instead of getting squashed into
     half the viewport width. Tighten the gap from 56px → 40px since the
     visual separation comes from the section's own padding once stacked. */
  .ent-inner { grid-template-columns: 1fr; gap: 40px; }
  .ent-inner h2 { font-size: 36px; }
}
@media (max-width: 600px) {
  .inc-grid { grid-template-columns: 1fr; }
  /* Phones: stack package cards one per row so the full price + every
     bullet stays readable without horizontal squeeze. */
  .tier-grid { grid-template-columns: 1fr; }
  /* Collapse the "What you always get" header from 2-col (heading | lead)
     to a single stack so the lead paragraph drops below the heading and
     gets the full viewport width to read on. Tighten the gap since they
     now stack vertically rather than sit side-by-side. */
  .inc-head { grid-template-columns: 1fr; gap: 16px; }
  /* Enterprise feature bullets: 2-col gets very narrow on phone widths
     (each cell ~150px). Stack to single-column so each bullet has the
     full row width to wrap cleanly. */
  .ent-ul { grid-template-columns: 1fr; }
  /* Tighter section padding + smaller display size on phone — 96px top/
     bottom feels excessive once the section is single-column. */
  .ent-section { padding: 64px 0; }
  .ent-inner h2 { font-size: 30px; }
}