.pricing {
  background: #f0eee6;
  padding: 0 0 80px;
  scroll-margin-top: 80px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 6 row tracks — header / image / Service / Hardware / Benefits / Pricing.
     The cards use grid-template-rows: subgrid below to inherit these tracks,
     so adding/removing a card-section here MUST be mirrored by adjusting
     this row count or the extra section gets dropped into an implicit row
     and disappears from the layout. */
  grid-template-rows: auto auto auto auto auto auto;
  column-gap: 20px;
  align-items: stretch;
}
.pricing-fineprint {
  text-align: center; font-size: 13px; color: #141413; opacity: 0.7; margin-top: 20px;
}
.pricing-fineprint a { color: #141413; text-decoration: underline; text-underline-offset: 2px; }
/* Financing footnote — pairs with the * asterisk on each card's
   "Starting from $X/mo*" and "After N months* it's free" lines. Slightly
   tighter and italicized to read as a clarifying note rather than legal
   fineprint (which sits below it). */
.pricing-footnote-finance {
  max-width: 720px; margin-left: auto; margin-right: auto;
  font-size: 12px; font-style: italic; margin-top: 32px; margin-bottom: 12px;
}

/* ─── Pricing card ─── */
.card {
  background: #fefdf9;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 4px 16px rgba(20,20,19,0.08), 0 1px 4px rgba(20,20,19,0.04);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
}
.card.is-featured {
  box-shadow: 0 6px 24px rgba(20,20,19,0.12), 0 2px 6px rgba(20,20,19,0.06);
}
.card-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 9999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; z-index: 3;
  background: #fff; color: #141413; border: 1.5px solid #141413;
  box-shadow: 0 2px 0 #e3dacc, 0 2px 6px rgba(20,20,19,0.08);
}
.card.is-featured .card-badge {
  background: #141413; color: #fff; border: none;
  box-shadow: 0 2px 0 #e3dacc, 0 4px 12px rgba(20,20,19,0.18);
}

.card-header {
  padding: 22px 28px 16px;
  text-align: center;
  border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.card-header.theme-pro    { background: #5A4F46; }
.card-header.theme-ultra  { background: #3E3530; }
.card-header.theme-elite  { background: #2E2620; }
.card-eyebrow-light {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: #f0eee6; opacity: 0.75; text-transform: uppercase; margin-bottom: 6px;
}

/* Small "for who is this plan?" banner — sits inside the card right above
   the Benefits section, replacing the old white-on-dark eyebrow that lived
   in the card-header. Theme-tinted background to keep the color cue. */
.card-benefit-banner {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #f0eee6;
}
.card-benefit-banner.theme-pro    { background: #5A4F46; }
.card-benefit-banner.theme-ultra  { background: #3E3530; }
.card-benefit-banner.theme-elite  { background: #2E2620; }
.card-title {
  font-size: 32px; font-weight: 700; color: #f0eee6;
  letter-spacing: 0.02em; text-transform: uppercase;
  font-style: italic; line-height: 1.05;
}

.card-image {
  width: 100%; aspect-ratio: 16 / 9;
  display: block; overflow: hidden; position: relative;
}
.card-image.theme-pro    { background: #5A4F46; }
.card-image.theme-ultra  { background: #3E3530; }
.card-image.theme-elite  { background: #2E2620; }
.card-image img { width: 100%; height: 100%; object-fit: cover; }

.ai-badge {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; letter-spacing: 0.04em; color: #fff;
  padding: 5px 14px 6px; border-radius: 7px;
  line-height: 1; text-transform: uppercase; font-weight: 900;
}
.ai-badge.tier-pro {
  background: #fff;
  color: transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(110deg, #ffa8cd 0%, #e082d2 12%, #b14ad6 24%, #9c7ce0 38%, #7dd3fc 55%, #4f9ce8 72%, #2563eb 84%, #9c7ce0 94%, #ffa8cd 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-size: 100% 100%, 500% 100%;
  border: 1.5px solid transparent;
  padding: 3.5px 12.5px 4.5px;
  animation: aiPlusShine 18s ease-in-out infinite;
  box-shadow: 0 1px 3px rgba(99,102,241,0.20);
  font-size: 0;
  position: relative;
}
.ai-badge.tier-pro::before {
  content: "AI";
  background: linear-gradient(110deg, #ffa8cd 0%, #e082d2 12%, #b14ad6 24%, #9c7ce0 38%, #7dd3fc 55%, #4f9ce8 72%, #2563eb 84%, #9c7ce0 94%, #ffa8cd 100%);
  background-size: 500% 100%;
  animation: aiPlusShine 18s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ai-badge.tier-ultra {
  /* Twilight-sky palette sampled from the user-supplied reference:
     dusky pink → rose → warm purple → deep twilight, mirrored so the
     aiPlusShine animation slides smoothly without a visible seam. */
  background: linear-gradient(110deg, #e8a4b8 0%, #c97c97 12%, #a06080 24%, #6b3d7c 38%, #4d2a5e 55%, #6b3d7c 72%, #a06080 84%, #c97c97 94%, #e8a4b8 100%);
  background-size: 500% 100%;
  animation: aiPlusShine 18s ease-in-out infinite;
  box-shadow: 0 2px 6px rgba(107, 61, 124, 0.38);
}
@keyframes aiPlusShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── Card sections (Service / Hardware / Pricing) ─── */
.card-section {
  background: linear-gradient(180deg, #fbfaf5 0%, #f5f3ec 100%);
  padding: 22px 28px 24px;
  text-align: left;
}
.card-section + .card-section { border-top: 1px solid #e6e0d2; }
.card-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: #3d2b1a; margin-bottom: 12px;
}
.section-head {
  /* Cross-axis aligned to flex-start so the (i)/term-pill on the right hugs
     the top of the row when the title wraps to multiple lines, instead of
     centering vertically across the whole title. */
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.section-title {
  /* Inline flow (not inline-flex): when "Lawn Intelligence" wraps to 2 lines,
     the .tier-pill (badge) follows naturally at the end of the last line of
     text, sitting on the baseline of the title — instead of being centered
     across both lines like inline-flex would force it to. */
  flex: 1 1 auto; min-width: 0;
  font-size: 16px; font-weight: 700; color: #3d2b1a;
  letter-spacing: -0.005em;
}
.tier-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 0.04em; color: #fff;
  padding: 2px 8px 3px; border-radius: 4px;
  line-height: 1; text-transform: uppercase;
  font-weight: 900; vertical-align: middle; position: relative; top: -0.5px;
  margin-left: 4px;  /* preserves the gap that .section-title's old gap:4px provided */
}
.tier-pill.tier-pro {
  background: #fff;
  color: transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(110deg, #d946a6 0%, #b14ad6 30%, #8b5cf6 60%, #b14ad6 85%, #d946a6 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-size: 100% 100%, 220% 100%;
  border: 1.5px solid transparent;
  animation: aiPlusShine 7s ease-in-out infinite;
  box-shadow: 0 1px 2px rgba(139,92,246,0.18);
  font-size: 0;
  position: relative;
}
.tier-pill.tier-pro::before {
  content: "PRO";
  background: linear-gradient(110deg, #d946a6 0%, #b14ad6 30%, #8b5cf6 60%, #b14ad6 85%, #d946a6 100%);
  background-size: 220% 100%;
  animation: aiPlusShine 7s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.tier-pill.tier-ultra {
  background: linear-gradient(110deg, #d946a6 0%, #b14ad6 30%, #8b5cf6 60%, #b14ad6 85%, #d946a6 100%);
  background-size: 220% 100%;
  animation: aiPlusShine 7s ease-in-out infinite;
  box-shadow: 0 1px 2px rgba(139,92,246,0.25);
}
.term-pill-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.term-pill {
  display: inline-block;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: #3d2b1a;
  padding: 3px 10px; border-radius: 9999px;
  /* When the pill text wraps to multiple lines (e.g. translated "PLAN 2 ANS"
     in narrow columns), keep it centered horizontally inside the pill. */
  text-align: center; line-height: 1.2;
  user-select: none;
}
.units-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: #3d2b1a;
  padding: 3px 8px; border-radius: 9999px;
}

/* Service description + Hardware coverage line share the same typography
   as the Benefits copy below — same font-size / line-height / color so the
   three body paragraphs in the pricing card read at one consistent rhythm. */
.section-desc,
.coverage-line {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #141413;
}
.section-desc b,
.coverage-line b { font-weight: 700; }

.feature-list {
  margin: 0; padding: 12px 0 0;
  border-top: 1px solid rgba(61,43,26,0.157);
}
.feature-list.tight { padding-top: 6px; }
/* Collapsed by default — JS hides every <li> and inserts a
   .feature-list-toggle button right after the list. While collapsed the
   list also drops its top border + padding so the section above doesn't
   look orphaned by a stray hairline. */
.feature-list.is-collapsed { padding-top: 0; border-top: none; }
.feature-list.is-collapsed li[data-fl-hidden] { display: none; }
.feature-list-toggle {
  background: none; border: none; padding: 12px 0 4px 0;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: #506a78; cursor: pointer; text-align: left;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(80,106,120,0.4);
  text-decoration-thickness: 1px;
  display: block;
}
.feature-list-toggle:hover { color: #3d2b1a; text-decoration-color: #3d2b1a; }
.feature-list li {
  font-size: 14px; color: #3d2b1a;
  padding: 6px 0;
  /* flex-wrap is required so a nested .subitems (UL with flex-basis:100%)
     gets pushed onto its own row. The text container is flex:1 1 0 with
     min-width:0 so the V (svg) and the text never wrap to separate rows
     — the text wraps internally as needed. */
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  font-weight: 500; line-height: 1.625;
}
.feature-list li > svg { flex-shrink: 0; margin-top: 1px; }
/* Text containers behave as inline-flow blocks (so the (i) button stays glued
   to the last word via &nbsp; in the markup, never wrapping to its own line). */
.feature-list li > .feature-text,
.feature-list li > .feature-text-block {
  flex: 1 1 0; min-width: 0;
  display: inline;
}
.subitems {
  /* flex-basis: 100% forces this nested UL onto its own row inside the parent
     flex container (.feature-list li). Combined with flex-wrap on the LI, the
     subitems always sit BELOW the V + main text, indented under the parent. */
  flex-basis: 100%;
  margin: 4px 0 0 28px; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 3px;
}

/* Inline "specifications" link — replaces the (i) tooltip on Lawn Companion
   line. Underlined so it reads as a clickable cross-reference; subdued color
   so it doesn't dominate the bold "1×" / product name. */
.spec-link {
  margin-left: 8px;
  color: #3d2b1a; opacity: 0.78;
  text-decoration: underline; text-underline-offset: 2px;
  font-weight: 500; font-size: 0.92em;
  white-space: nowrap;
  transition: opacity 160ms ease;
}
.spec-link:hover { opacity: 1; }
.subitems li {
  font-size: 13px; color: #3d2b1a; opacity: 0.85;
  /* flex-wrap: nowrap is critical: the descendant selector .feature-list li
     matches these nested LIs too and inherits flex-wrap:wrap from there,
     which would push the span onto a new row below the ↳ when the text
     is long. Forcing nowrap here keeps ↳ and text on the same row; the
     text wraps internally inside the span (via min-width:0 below). */
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 4px;
  font-weight: 500; line-height: 1.625;
  padding: 0;
}
.subitems li > span { min-width: 0; }
.subitems li::before {
  content: '↳';
  opacity: 0.55; flex-shrink: 0;
}

/* ─── Pricing block ─── */
.price-block { padding: 26px 28px 30px; }
.price-choose {
  font-size: 14px; color: #141413; font-weight: 500;
  text-align: center; margin: 12px 0 18px;
  letter-spacing: -0.005em;
}
.toggle-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 18px;
}
.toggle-or {
  font-size: 13px; font-style: italic; font-weight: 500;
  color: #5a5a5e; letter-spacing: 0.01em;
  flex-shrink: 0; align-self: center; line-height: 1;
}
.toggle-btn {
  flex: 1; padding: 10px 14px; border-radius: 9999px;
  border: 1.5px solid transparent;
  background: #efe9dc; color: #141413;
  cursor: pointer; transition: all 180ms ease;
  font-size: 13px; font-weight: 600;
}
.toggle-btn:hover {
  background: #e6dfce;
  border-color: rgba(20,20,19,0.18);
}
.toggle-btn[aria-pressed="true"] {
  border-color: #141413;
  background: #141413;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(20,20,19,0.18);
}
.toggle-btn[aria-pressed="true"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20,20,19,0.18);
}

.spring-flag { text-align: center; margin-bottom: 8px; }
.spring-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #1f7a3a;
  padding: 3px 10px; border-radius: 9999px;
}
.spring-through {
  font-size: 11px; color: #76767a; font-weight: 400;
  margin-top: 5px; letter-spacing: 0.01em;
}

.price-row {
  margin-bottom: 8px; text-align: center;
}
/* Small label "starting from" sitting just above the Reg. strikethrough */
.price-starting-from {
  font-size: 12px; font-weight: 500; color: #141413;
  opacity: 0.55; text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.price-reg {
  font-size: 15px; font-weight: 500; color: #141413;
  opacity: 0.85; margin-right: 8px; letter-spacing: -0.005em;
}
.price-reg .reg-label { opacity: 1; }
.price-reg .strike { text-decoration: line-through; }
.price-amount {
  font-size: 42px; font-weight: 700; letter-spacing: -0.02em; color: #141413;
}
.price-mu {
  font-size: 16px; color: #141413;
}

.price-disclaimer {
  font-size: 12px; font-weight: 500; color: #141413; opacity: 0.92;
  line-height: 1.65; text-align: center; margin-bottom: 18px;
}
/* Payment-method icon (Finance) and inclusion-icon (Cash) replacing the
   old "Affirm · PayPal · ShopPay" / "includes 2-year plan…" text rows. */
.price-disclaimer img {
  display: block; margin: 4px auto 0;
  max-width: 100%; max-height: 28px; height: auto; width: auto;
  opacity: 1;
}
.price-disclaimer a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.price-disclaimer a:hover { border-bottom-color: currentColor; }

.cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 0;
  border-radius: 9999px;
  font-size: 15px; font-weight: 500; text-decoration: none; text-align: center;
  transition: transform 260ms cubic-bezier(0.34,1.4,0.64,1), box-shadow 260ms ease, background 260ms ease, color 260ms ease;
  will-change: transform;
  background: #141413; color: #fff; border: none;
}
.cta.cta-outline {
  background: transparent; color: #141413; border: 1.5px solid #141413;
}
.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20,20,19,0.22);
}
.cta.cta-outline:hover { background: #141413; color: #fff; }
.cta .cta-label { position: relative; z-index: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.cta .arrow {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; opacity: 0.6;
  transition: transform 260ms cubic-bezier(0.34,1.4,0.64,1), opacity 260ms ease;
}
.cta:hover .arrow { transform: translateX(4px); opacity: 1; }
.cta .sheen {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.cta:hover .sheen {
  animation: sheenSweep 700ms cubic-bezier(0.22,1,0.36,1);
}
.cta-foot {
  margin-top: 14px; font-size: 12px; color: #76767a;
  font-weight: 400; text-align: center;
}
.cta.cta-full { width: 100%; display: flex; }

/* ─── Pricing block v2 — Compact Flower Days + countdown layout ─── */
/* Compact variant: no section eyebrows for Finance/Cash, no full-width OR
   divider, cash on a single inline row "or [strike] [cash] cash" with smaller
   font (20px vs 56px monthly), strikethrough rules in soft-pink to call out
   the discount. */
.price-block-v2 {
  padding: 24px 26px 22px;
  display: flex; flex-direction: column;
  font-family: inherit;
}
/* Pricing eyebrow now uses the shared .card-eyebrow class for visual
   parity with Service / Hardware / Benefits. Cancel its inherited
   margin-bottom so the gap to the first payment-option box is owned
   solely by that box's own margin-top (14 px, matches PayPal/Affirm). */
.price-block-v2 > .card-eyebrow { margin-bottom: 0; line-height: 1; }

/* Benefits section copy — sits between Hardware and Pricing. The plan
   monthly-equivalent ("$70/mo") is treated as a mini-headline (22 px,
   weight 800) to anchor the value argument; "Less than" stays inline
   bold so the reader's eye lands on the round dollar number. */
.benefits-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #141413;
}
.benefits-copy strong { font-weight: 700; }
/* Price keeps the bold weight for emphasis but inherits the surrounding
   font-size so the whole copy reads at one consistent size. */
.benefits-copy .benefits-price {
  font-weight: 700;
}
/* When two Benefits paragraphs are stacked, space them with the same gap
   the Service description (.section-desc) and Hardware coverage line use,
   so the body rhythm across the three card-sections stays consistent. */
.benefits-copy + .benefits-copy { margin-top: 12px; }
.price-block-v2 .pb2-plan-name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: #141413; margin: 0; line-height: 1;
}
/* Pill + "Save N%" as an inline group on the same baseline, right-aligned
   next to the plan name. */
.price-block-v2 .pb2-promo-group {
  display: inline-flex; align-items: baseline; gap: 10px;
  flex-shrink: 0;
}
.price-block-v2 .pb2-promo-pill {
  display: inline-flex; align-items: center;
  background: #15803d; color: #fff;
  padding: 5px 12px; border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  animation: pb2-promo-blink 1.6s ease-in-out infinite;
}
.price-block-v2 .pb2-promo-save {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #15803d;
  white-space: nowrap;
}
@keyframes pb2-promo-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  50%      { opacity: 0.72; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) {
  .price-block-v2 .pb2-promo-pill { animation: none; }
}

/* Countdown: HH:MM:SS chips, right-aligned */
.price-block-v2 .pb2-countdown {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; margin-bottom: 18px;
  color: #15803d; font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.price-block-v2 .pb2-cd-label {
  color: #15803d; font-size: 13px;
  letter-spacing: 0.14em; font-weight: 700;
  margin-right: 4px;
}
.price-block-v2 .pb2-cd-chip {
  background: #2a2826; color: #fff;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 8px; border-radius: 6px;
  min-width: 30px; text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}
.price-block-v2 .pb2-cd-colon {
  color: #15803d;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, monospace;
  font-weight: 700;
  animation: pb2-colon-blink 1s step-end infinite;
}
@keyframes pb2-colon-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .price-block-v2 .pb2-cd-colon { animation: none; }
}
.price-block-v2 .pb2-cd-unit {
  color: #15803d; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: lowercase;
}
.price-block-v2 .pb2-cd-unit .cd-short { display: none; }
.price-block-v2 .pb2-cd-unit .cd-word  { display: inline; }

/* Finance — hero block. Marks now sit inline to the right of the monthly
   price (no longer stacked vertically). */
.price-block-v2 .pb2-finance { margin-bottom: 14px; }
.price-block-v2 .pb2-finance-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.price-block-v2 .pb2-finance-left { min-width: 0; }
.price-block-v2 .pb2-price-row {
  display: flex; align-items: baseline; gap: 12px; margin: 4px 0 6px;
  flex-wrap: wrap;
}
.price-block-v2 .pb2-price-strike {
  font-size: 19px; font-weight: 600; color: #141413;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #15803d;
}
.price-block-v2 .pb2-price-big {
  font-size: 52px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: #141413;
}
.price-block-v2 .pb2-price-unit { font-size: 18px; color: rgba(20,20,19,0.62); }
.price-block-v2 .pb2-apr {
  font-size: 12.5px; color: #0071e3;
  font-weight: 500; line-height: 1.45;
}
.price-block-v2 .pb2-apr-sub { color: rgba(20,20,19,0.46); font-weight: 500; }

/* Cash — wrapped in a soft cream panel that mirrors the shape of the
   PayPal-blue and Affirm-grey boxes below. All three payment options
   share the same box treatment so the eye reads them as parallel
   choices. Prices render at normal weight + size (no big-number
   emphasis): both strike and current price are 14 px / weight 500. */
.price-block-v2 .pb2-cash {
  margin-top: 14px;
  /* Stripped down: no white card / border / payment marks anymore.
     Just the two prices centered side-by-side. */
  display: flex; align-items: baseline; justify-content: center;
}

/* "-or-" separator between payment-option boxes (cash → PayPal → Affirm).
   Symmetric vertical margin: spacing above/below is owned entirely by
   this element so the gaps above and below the "-or-" text are equal.
   The PayPal/Affirm boxes below have margin-top: 0 to honor this. */
.price-block-v2 .pb2-or {
  text-align: center;
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.04em;
  color: #141413;
  margin: 12px 0;
}
.price-block-v2 .pb2-cash-row {
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.price-block-v2 .pb2-cash-prices {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.price-block-v2 .pb2-cash-strike {
  font-size: 28px; font-weight: 300; color: #7a7a76;
  letter-spacing: -0.01em;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #7a7a76;
}
.price-block-v2 .pb2-cash-big {
  font-size: 28px; font-weight: 300; letter-spacing: -0.01em;
  color: #141413;
}

/* Payment-mark strips (inline SVG) — always horizontal */
.price-block-v2 .pb2-marks {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.price-block-v2 .pb2-marks.is-tight { gap: 6px; }
.price-block-v2 .pb2-marks svg { display: block; }

/* Affirm messaging — minimalistic footnote under the cash price. The
   Affirm SDK injects its own DOM with inline styles, so we use
   !important on the descendant selector to force consistent sizing and
   color. NOTE: do NOT force `font-family: inherit` on descendants —
   Affirm renders its brand wordmark via a custom font ("Affirm Display"),
   and overriding the family makes the logo glyph fail and the browser
   draws a missing-glyph "tofu" rectangle. Let Affirm's own font cascade
   reach the logo span, and override only size/weight/line-height/color. */
.price-block-v2 .pb2-affirm-msg {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: center;
}
/* Affirm: slightly bigger, black. */
.price-block-v2 .pb2-affirm-msg,
.price-block-v2 .pb2-affirm-msg * {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #141413 !important;
  letter-spacing: 0 !important;
}
/* Match the surrounding site typography on plain text nodes (the copy
   "as low as $X/mo with"), but leave the Affirm logo span/icon alone so
   the brand wordmark renders correctly. */
.price-block-v2 .pb2-affirm-msg,
.price-block-v2 .pb2-affirm-msg .affirm-as-low-as-text,
.price-block-v2 .pb2-affirm-msg .affirm-ala-price {
  font-family: inherit !important;
}
.price-block-v2 .pb2-affirm-msg .affirm-modal-trigger,
.price-block-v2 .pb2-affirm-msg .affirm-as-low-as-text,
.price-block-v2 .pb2-affirm-msg a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(20,20,19,0.5);
  cursor: pointer;
}

/* CTA neutral break */
.price-block-v2 .pb2-gap-32 { height: 24px; }
.price-block-v2 .pb2-gap-28 { height: 20px; }
.price-block-v2 .pb2-hairline {
  height: 1px; background: #e5e4e0; margin: 0 -4px;
}

/* CTA — flex order: 2 so it renders AFTER the checkout-note (order: 1)
   below in the .price-block-v2 flex column. DOM order is unchanged;
   visual order is inverted via flexbox. */
.price-block-v2 .pb2-cta {
  width: 100%;
  padding: 16px 22px;
  border-radius: 9999px; border: none;
  background: #141413; color: #fff;
  font-family: inherit; text-decoration: none;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  transition: transform 150ms ease, box-shadow 250ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  order: 2;
  margin-top: 10px;
}
.price-block-v2 .pb2-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.price-block-v2 .pb2-cta .pb2-cta-arrow {
  font-size: 18px; font-weight: 400; line-height: 1;
  transform: translateY(-1px);
}
/* Checkout note — visually sits ABOVE the CTA (flex order: 1). Black
   text for strong call-out (was muted grey before the swap). */
.price-block-v2 .pb2-checkout-note {
  margin-top: 0; text-align: center;
  font-size: 12.5px; color: #141413; font-weight: 500;
  letter-spacing: 0.01em;
  order: 1;
}

@media (max-width: 480px) {
  /* Mobile keeps the same compact layout as desktop. Only soften padding
     and shrink the hero monthly price so it doesn't dominate small screens. */
  .price-block-v2 { padding: 22px 20px 18px; }
  .price-block-v2 .pb2-price-big { font-size: 44px; }
  .price-block-v2 .pb2-price-strike { font-size: 17px; }
}

/* ── Standalone use on /qualified (#qr-proposal) ──────────────────────────
   The homepage card is a subgrid child of .pricing-grid. Here it stands
   alone, so neutralize the subgrid layout and center it with a sensible cap. */
.qr-ultra-wrap { max-width: 380px; margin: 32px auto 0; }
.qr-ultra-wrap .card { display: block; }
@media (max-width: 480px) { .qr-ultra-wrap { max-width: 100%; } }