/* ==========================================================================
   TIVANIX - checkout / payment page
   --------------------------------------------------------------------------
   Scoped under .tvx-checkout so it cannot affect any other page.

   Palette matches the site's existing brand, taken from style.css:
     #0493d3  primary cyan-blue  (12 uses)
     #0379a8  AA-safe shade used for buttons and badges

   Button/badge shades are darkened where needed so white text still meets
   WCAG AA 4.5:1 - #0493d3 on white text is only ~3.5:1, which fails.

   Font sizes are declared explicitly at each breakpoint (and marked important
   inside this scope only) so no global rule in style.css can blow up a heading
   on small screens.
   ========================================================================== */

.tvx-checkout,
.tvx-pricing {
  /* --- Brand tokens --- */
  --tvx-primary:      #0493d3;   /* brand cyan - borders, rings, accents */
  --tvx-primary-btn:  #0379a8;   /* AA-safe button bg  (5.0:1 vs white) */
  --tvx-primary-dark: #026d97;   /* hover */
  --tvx-primary-soft: #E8F6FC;
  --tvx-primary-line: #B6E1F2;

  --tvx-accent:       #0493d3;   /* brand blue */
  --tvx-accent-btn:   #0379a8;   /* AA-safe brand blue (5.0:1 vs white) */
  --tvx-accent-soft:  #EFF8FC;

  --tvx-navy:      #0B1220;
  --tvx-green:     #0E9F6E;
  --tvx-green-soft:#E7F8F1;
  --tvx-bg:        #FFFFFF;
  --tvx-bg-alt:    #F5F7F9;
  --tvx-text:      #16202B;
  --tvx-muted:     #5B6B7B;
  --tvx-border:    #E2E8ED;
  --tvx-error:     #DC2626;

  --tvx-r-sm: 10px;
  --tvx-r:    14px;
  --tvx-r-lg: 20px;

  /* Layered shadows: a tight contact shadow plus a soft ambient one reads as
     depth, where a single large blur reads as a smudge. */
  --tvx-shadow-sm: 0 1px 2px rgba(16, 32, 43, .06);
  --tvx-shadow:    0 1px 2px rgba(16, 32, 43, .05), 0 8px 24px -6px rgba(16, 32, 43, .10);
  --tvx-shadow-lg: 0 2px 4px rgba(16, 32, 43, .06), 0 18px 40px -12px rgba(16, 32, 43, .18);

  /* Brand gradients, used sparingly - on the recommended plan and the primary
     CTA only, so they stay a signal rather than decoration. */
  --tvx-grad:      linear-gradient(135deg, #0493d3 0%, #0379a8 100%);
  --tvx-grad-hi:   linear-gradient(135deg, #05a3e8 0%, #0483bb 100%);
  --tvx-grad-gold: linear-gradient(135deg, #F59E0B 0%, #EA8C04 100%);

  /* One easing for everything, so the whole page decelerates the same way. */
  --tvx-ease: cubic-bezier(.2, .7, .3, 1);

  color: var(--tvx-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* Respect a user's stated preference. Everything below is decoration; none of
   it should move for someone who has asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) {
  .tvx-checkout *, .tvx-pricing * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Full-page chrome applies to the checkout pages only, so the pricing section
   can share the tokens above without taking a page background. */
.tvx-checkout {
  background: var(--tvx-bg-alt);
  padding-bottom: 2.5rem;
}

.tvx-checkout *,
.tvx-checkout *::before,
.tvx-checkout *::after { box-sizing: border-box; }

/* Never allow a horizontal scrollbar on mobile. */
.tvx-checkout img, .tvx-checkout svg { max-width: 100%; }

.tvx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.tvx-head {
  background: linear-gradient(180deg, #0B1220 0%, #10263A 100%);
  color: #fff;
  padding: 22px 0 20px;
  margin-bottom: 18px;
}
.tvx-checkout .tvx-head h1 {
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  letter-spacing: -.01em;
}
.tvx-head .tvx-sub { color: #C3D2DE; font-size: .9rem; margin: 0; }
.tvx-vin {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  padding: 3px 11px; margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; letter-spacing: .03em; color: #fff;
  word-break: break-all;
}
.tvx-found {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(14, 159, 110, .18);
  border: 1px solid rgba(14, 159, 110, .40);
  color: #6EE7B7;
  border-radius: 999px; padding: 3px 10px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}

/* ---------- Layout ---------- */
.tvx-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 992px) {
  .tvx-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr); gap: 24px; align-items: start; }
  .tvx-head { padding: 28px 0 26px; margin-bottom: 24px; }
  .tvx-checkout .tvx-head h1 { font-size: 1.6rem !important; }
  .tvx-head .tvx-sub { font-size: .95rem; }
  .tvx-vin { font-size: .9rem; padding: 5px 14px; }
}

/* ---------- Cards / steps ---------- */
.tvx-card {
  background: var(--tvx-bg);
  border: 1px solid var(--tvx-border);
  border-radius: var(--tvx-r-lg);
  box-shadow: var(--tvx-shadow-sm);
  padding: 16px;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .tvx-card { padding: 24px; margin-bottom: 20px; } }

.tvx-step { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.tvx-step-n {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tvx-primary-btn); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem !important; font-weight: 700; line-height: 1;
}
/* Explicit + scoped important: stops any global heading rule enlarging or
   recolouring these on small screens. */
.tvx-checkout .tvx-step h2 {
  font-size: 1rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--tvx-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media (min-width: 768px) { .tvx-checkout .tvx-step h2 { font-size: 1.08rem !important; } }

.tvx-hint {
  color: var(--tvx-muted) !important;
  font-size: .82rem !important;
  margin: 0 0 14px 36px !important;
  font-weight: 400 !important;
}
@media (max-width: 575.98px) { .tvx-hint { margin-left: 0 !important; } }

/* ---------- Package cards ----------
   Three states matter and must be instantly distinguishable: resting,
   hovered/considered, and chosen. The chosen state is the loudest, because on a
   checkout the question "which one did I pick?" should never need a second
   look.

   Extra top padding on the grid leaves room for the badges, which sit above the
   card edge - without it they clip on mobile. */
.tvx-plans { display: grid; grid-template-columns: 1fr; gap: 22px; padding-top: 18px; }
@media (min-width: 700px) { .tvx-plans { grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 18px; } }

.tvx-checkout .pack.tvx-plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--tvx-bg);
  border: 2px solid var(--tvx-border);
  border-radius: var(--tvx-r-lg);
  padding: 20px 18px 18px;
  cursor: pointer;
  height: auto;
  min-height: 0;
  /* Transform is included so the lift is animated, but only translate/opacity
     and shadow change - never width or height, which would reflow the grid. */
  transition: border-color .22s var(--tvx-ease),
              box-shadow   .22s var(--tvx-ease),
              transform    .22s var(--tvx-ease);
}

/* A gradient hairline that fills in on hover and stays lit when chosen. It
   reads as the card "switching on" without moving anything.

   No `overflow: hidden` on the card: the badge overhangs the top edge and would
   be clipped. The bar rounds its own corners instead. */
.tvx-checkout .pack.tvx-plan::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--tvx-grad);
  border-radius: var(--tvx-r-lg) var(--tvx-r-lg) 0 0;
  opacity: 0; transition: opacity .22s var(--tvx-ease);
}

@media (hover: hover) {
  .tvx-checkout .pack.tvx-plan:hover {
    border-color: var(--tvx-primary-line);
    box-shadow: var(--tvx-shadow-lg);
    transform: translateY(-4px);
  }
  .tvx-checkout .pack.tvx-plan:hover::before { opacity: .55; }
}

.tvx-checkout .pack.tvx-plan.active {
  border-color: var(--tvx-primary);
  box-shadow: 0 0 0 4px rgba(4, 147, 211, .16), var(--tvx-shadow-lg);
  transform: translateY(-2px);
}
.tvx-checkout .pack.tvx-plan.active::before { opacity: 1; }

/* Touch: no hover state to rely on, so the press itself gives the feedback. */
.tvx-checkout .pack.tvx-plan:active { transform: translateY(0) scale(.995); }
.tvx-checkout .pack.tvx-plan:focus-visible { outline: 3px solid var(--tvx-primary); outline-offset: 3px; }

/* The recommended plan carries a tinted wash so it is the card the eye lands on
   first, before any badge has been read. */
.tvx-checkout .pack.tvx-plan.tvx-plan-featured {
  background: linear-gradient(180deg, #F7FCFE 0%, #FFFFFF 46%);
  border-color: var(--tvx-primary-line);
}

/* ---------- Badges ---------- */
.tvx-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--tvx-grad); color: #fff;
  font-size: .68rem !important; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(4, 147, 211, .5);
  z-index: 2;
}
/* "Best value" earns a warmer colour so two badges never look like one label
   repeated. Amber is darkened enough to hold white text at AA. */
.tvx-plan-badge.tvx-badge-value {
  background: var(--tvx-grad-gold);
  box-shadow: 0 4px 12px -2px rgba(234, 140, 4, .5);
}

.tvx-checkout .tvx-plan-name {
  font-size: 1.02rem !important; font-weight: 800 !important;
  margin: 4px 0 2px !important; color: var(--tvx-text) !important;
  letter-spacing: -.01em;
}
.tvx-plan-desc { font-size: .82rem !important; color: var(--tvx-muted) !important; margin: 0 0 12px !important; }
@media (min-width: 700px) { .tvx-plan-desc { min-height: 36px; } }

.tvx-checkout .tvx-plan-price {
  font-size: 2rem !important; font-weight: 800 !important;
  letter-spacing: -.035em; line-height: 1.1 !important;
  color: var(--tvx-navy) !important;
}
@media (min-width: 700px) { .tvx-checkout .tvx-plan-price { font-size: 2.1rem !important; } }

.tvx-checkout .tvx-plan-per {
  font-size: .74rem !important; color: var(--tvx-muted) !important;
  margin-bottom: 14px !important; font-weight: 500 !important;
}

.tvx-plan-feats {
  list-style: none !important; margin: 0 !important;
  padding: 14px 0 0 !important; border-top: 1px solid var(--tvx-border);
}
.tvx-plan-feats li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .82rem !important; padding: 4px 0; color: var(--tvx-text);
  line-height: 1.45;
}
/* Excluded features stay legible rather than being hidden - the comparison IS
   the argument for the tier above. */
.tvx-plan-feats li.tvx-off { color: #94A3B3; }
.tvx-tick { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; }

/* The in-card select control. Not a real <button>, so it must not look
   disabled - it fills with brand colour the moment its card is chosen. */
.tvx-plan-select {
  margin-top: 16px; text-align: center;
  border: 1.5px solid var(--tvx-border); border-radius: var(--tvx-r-sm);
  padding: 12px 10px; font-size: .84rem; font-weight: 700; color: var(--tvx-muted);
  background: var(--tvx-bg-alt);
  letter-spacing: .01em;
  transition: background .2s var(--tvx-ease), color .2s var(--tvx-ease),
              border-color .2s var(--tvx-ease);
}
@media (hover: hover) {
  .tvx-checkout .pack.tvx-plan:hover .tvx-plan-select {
    border-color: var(--tvx-primary-line);
    color: var(--tvx-primary-dark);
    background: var(--tvx-primary-soft);
  }
}
.tvx-checkout .pack.tvx-plan.active .tvx-plan-select {
  background: var(--tvx-grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px -3px rgba(4, 147, 211, .45);
}

/* ---------- Mobile and touch ----------
   Kept together rather than scattered so the small-screen behaviour can be read
   in one place. */
@media (max-width: 699.98px) {
  /* On a phone the plan cards are the page. Give them room and let the chosen
     one sit slightly proud of the others. */
  .tvx-plans { gap: 14px; }
  .tvx-checkout .pack.tvx-plan { padding: 18px 16px 16px; }
  .tvx-checkout .tvx-plan-price { font-size: 1.85rem !important; }

  /* A hovered card cannot exist on touch; the lift would stick after a tap. */
  .tvx-checkout .pack.tvx-plan { transform: none !important; }
  .tvx-checkout .pack.tvx-plan.active { transform: none !important; }

  /* Thumb-sized targets throughout. */
  .tvx-checkout .tvx-btn { min-height: 58px; font-size: 1.06rem !important; }
  .tvx-plan-select { padding: 13px 10px; }
  .tvx-checkout .tvx-coupon-row button { padding: 12px 18px; }

  /* The pay button follows the page down, so the action is always one tap away
     however far someone has scrolled. */
  #pay-btn { position: sticky; bottom: 12px; z-index: 5; }
}

/* Stop iOS zooming the page when a field is focused - it happens below 16px. */
@media (max-width: 767.98px) {
  .tvx-checkout input, .tvx-checkout select, .tvx-checkout textarea { font-size: 16px !important; }
}

/* Remove the grey tap flash; the :active states above are the feedback. */
.tvx-checkout a, .tvx-checkout button, .tvx-checkout .pack.tvx-plan {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---------- Coupon ----------
   Deliberately quieter than the pay button: a discount field competing with the
   CTA costs more conversions than it wins. */
.tvx-coupon { margin: 16px 0 4px; }
.tvx-checkout .tvx-coupon label {
  display: block; font-size: .82rem !important; font-weight: 700 !important;
  margin-bottom: 8px !important; color: var(--tvx-text) !important;
}
.tvx-coupon-row { display: flex; gap: 8px; }
.tvx-checkout .tvx-coupon-row input {
  flex: 1; min-width: 0;
  padding: 12px 14px !important;
  border: 1.5px solid var(--tvx-border) !important; border-radius: var(--tvx-r-sm) !important;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .9rem !important; font-weight: 600 !important;
  background: var(--tvx-bg) !important;
  transition: border-color .18s var(--tvx-ease), box-shadow .18s var(--tvx-ease);
}
.tvx-checkout .tvx-coupon-row input::placeholder { letter-spacing: normal; font-weight: 400; text-transform: none; }
.tvx-checkout .tvx-coupon-row input:focus {
  border-color: var(--tvx-primary) !important;
  box-shadow: 0 0 0 4px rgba(4, 147, 211, .13) !important; outline: none !important;
}
.tvx-checkout .tvx-coupon-row button {
  flex: 0 0 auto; min-height: 46px; padding: 12px 20px;
  border: 0; border-radius: var(--tvx-r-sm);
  background: var(--tvx-navy); color: #fff;
  font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: transform .16s var(--tvx-ease), background .16s var(--tvx-ease);
}
@media (hover: hover) { .tvx-checkout .tvx-coupon-row button:hover { background: #1B2738; transform: translateY(-1px); } }
.tvx-checkout .tvx-coupon-row button:active { transform: translateY(1px); transition-duration: .06s; }
.tvx-checkout .tvx-coupon-row button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.tvx-checkout .tvx-coupon-row button:focus-visible { outline: 3px solid var(--tvx-primary); outline-offset: 2px; }

.tvx-coupon-msg { margin: 9px 0 0 !important; font-size: .8rem !important; display: none; font-weight: 600; }

/* The discount line slides in rather than appearing, so a total that just
   changed is noticed. */
.tvx-discount-row { display: none; }
.tvx-discount-row.is-shown { display: flex; animation: tvx-slide-in .32s var(--tvx-ease); }
.tvx-checkout .tvx-discount-row dd { color: var(--tvx-green) !important; font-weight: 700 !important; }
.tvx-checkout .tvx-discount-row #coupon-line-code { font-weight: 700; color: var(--tvx-green); }
.tvx-checkout .tvx-discount-row #coupon-remove {
  font-size: .74rem; margin-left: 8px; color: var(--tvx-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
@keyframes tvx-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* The total is the number people check twice - give it weight and let it flash
   briefly when it changes. */
.tvx-checkout .tvx-t-val {
  font-size: 1.65rem !important; font-weight: 800 !important;
  letter-spacing: -.03em; color: var(--tvx-navy) !important;
}
.tvx-checkout .tvx-t-val.is-updated { animation: tvx-pop .42s var(--tvx-ease); }
@keyframes tvx-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.07); color: var(--tvx-green); }
  100% { transform: scale(1); }
}

/* ---------- Form fields ---------- */
.tvx-field { margin-bottom: 14px; }
.tvx-checkout .tvx-field label {
  display: block; font-size: .85rem !important; font-weight: 600 !important;
  margin-bottom: 6px !important; color: var(--tvx-text) !important;
}
.tvx-checkout .form-control,
.tvx-checkout input[type="text"],
.tvx-checkout input[type="tel"],
.tvx-checkout input[type="email"] {
  width: 100%; min-height: 48px;
  padding: 11px 14px;
  font-size: 16px !important;   /* 16px stops iOS Safari zooming on focus */
  color: var(--tvx-text);
  background: var(--tvx-bg);
  border: 1px solid #C3CED8; border-radius: var(--tvx-r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tvx-checkout .form-control:focus {
  border-color: var(--tvx-primary);
  box-shadow: 0 0 0 4px rgba(4, 147, 211, .16);
  outline: none;
}
.tvx-checkout .form-control.is-invalid { border-color: var(--tvx-error); }
.tvx-checkout .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); }
.tvx-help { font-size: .76rem !important; color: var(--tvx-muted) !important; margin-top: 5px; }
@media (min-width: 640px) { .tvx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } }

/* ---------- Payment method selector ---------- */
.tvx-checkout .payment-options-wrapper { display: grid !important; grid-template-columns: 1fr; gap: 10px; }
.tvx-checkout .payment-option {
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 11px 12px;
  background: var(--tvx-bg);
  border: 2px solid var(--tvx-border); border-radius: var(--tvx-r);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tvx-checkout .payment-option:hover { border-color: var(--tvx-primary-line); }
.tvx-checkout .payment-option.selected {
  border-color: var(--tvx-primary); background: var(--tvx-primary-soft);
  box-shadow: 0 0 0 3px rgba(4, 147, 211, .12);
}
.tvx-checkout .payment-option:focus-visible { outline: 3px solid var(--tvx-primary); outline-offset: 2px; }

.tvx-checkout .payment-radio {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #C3CED8; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.tvx-checkout .payment-option.selected .payment-radio { border-color: var(--tvx-primary); }
.tvx-checkout .payment-radio .radio-dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.tvx-checkout .payment-option.selected .radio-dot { background: var(--tvx-primary); }

.tvx-pm-body { min-width: 0; flex: 1 1 auto; }
.tvx-pm-name { font-size: .92rem !important; font-weight: 600 !important; line-height: 1.25; color: var(--tvx-text); }
.tvx-pm-desc { font-size: .75rem !important; color: var(--tvx-muted) !important; margin-top: 2px; line-height: 1.35; }
.tvx-checkout .tvx-pm-icon { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; }
.tvx-pm-logos { display: flex; align-items: center; gap: 5px; margin-left: auto; flex: 0 0 auto; }
.tvx-checkout .tvx-pm-logos .card-icon { height: 18px !important; width: auto !important; }
/* On the narrowest phones the card logos would crowd the label - hide them
   there; the method name and description still say what is accepted. */
@media (max-width: 420px) { .tvx-pm-logos { display: none; } }

/* ---------- Order summary ---------- */
.tvx-sum { position: static; }
@media (min-width: 992px) { .tvx-sum { position: sticky; top: 20px; } }

.tvx-sum-card {
  background: var(--tvx-bg); border: 1px solid var(--tvx-border);
  border-radius: var(--tvx-r-lg); box-shadow: var(--tvx-shadow);
  overflow: hidden;
}
.tvx-sum-head {
  background: var(--tvx-navy); color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.tvx-checkout .tvx-sum-head h2 {
  font-size: .98rem !important; font-weight: 700 !important;
  margin: 0 !important; color: #fff !important;
}
.tvx-sum-veh { width: 40px; height: 40px; object-fit: contain; opacity: .95; flex: 0 0 40px; }
.tvx-sum-body { padding: 16px; }

.tvx-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .86rem; }
.tvx-row dt { color: var(--tvx-muted); margin: 0; font-weight: 500; flex: 0 0 auto; }
.tvx-row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; min-width: 0; }
.tvx-sep { height: 1px; background: var(--tvx-border); margin: 10px 0; }
.tvx-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 2px; }
.tvx-total .tvx-t-label { font-size: .98rem !important; font-weight: 700 !important; }
.tvx-checkout .tvx-total .tvx-t-val {
  font-size: 1.5rem !important; font-weight: 800 !important;
  letter-spacing: -.02em; color: var(--tvx-primary-dark) !important; line-height: 1.1;
}

/* ---------- Buttons ----------
   The primary CTA is the most important element on the page, so it is the only
   thing wearing a gradient and a coloured glow. 56px tall clears the 44px touch
   target guidance with room for a thumb rather than exactly enough. */
.tvx-checkout .tvx-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; width: 100%;
  padding: 15px 20px;
  font-size: 1.04rem !important; font-weight: 800 !important; line-height: 1.2 !important;
  letter-spacing: .01em;
  color: #fff !important; background: var(--tvx-grad) !important;
  border: 0 !important; border-radius: var(--tvx-r) !important;
  cursor: pointer; text-align: center; text-transform: none !important;
  transition: transform .18s var(--tvx-ease), box-shadow .18s var(--tvx-ease),
              background .18s var(--tvx-ease), filter .18s var(--tvx-ease);
  box-shadow: 0 4px 14px -2px rgba(3, 121, 168, .45), 0 1px 2px rgba(16, 32, 43, .1);
}

/* A sheen that sweeps across on hover. Purely transform-driven, so it costs the
   compositor nothing and cannot cause layout. */
.tvx-checkout .tvx-btn::before {
  content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-160%); pointer-events: none;
}
@media (hover: hover) {
  .tvx-checkout .tvx-btn:hover:not(:disabled) {
    background: var(--tvx-grad-hi) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -4px rgba(3, 121, 168, .55), 0 2px 4px rgba(16, 32, 43, .12);
  }
  .tvx-checkout .tvx-btn:hover:not(:disabled)::before {
    transform: translateX(320%); transition: transform .75s var(--tvx-ease);
  }
}
/* Press: settle back down. On touch this is the only feedback there is, so it
   must be immediate rather than eased in. */
.tvx-checkout .tvx-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 2px 8px -2px rgba(3, 121, 168, .5);
  transition-duration: .06s;
}
.tvx-checkout .tvx-btn:focus-visible { outline: 3px solid #7FCDEA; outline-offset: 3px; }
.tvx-checkout .tvx-btn:disabled {
  opacity: .6; cursor: not-allowed; box-shadow: none; transform: none;
  filter: saturate(.6);
}
/* While submitting, the sheen would read as "still interactive". */
.tvx-checkout .tvx-btn.is-loading::before { display: none; }
.tvx-checkout .tvx-btn .tvx-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  display: none; flex: 0 0 16px;
}
.tvx-checkout .tvx-btn.is-loading .tvx-spin { display: inline-block; animation: tvx-spin .7s linear infinite; }
@keyframes tvx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tvx-checkout .tvx-btn.is-loading .tvx-spin { animation: none; }
  .tvx-checkout * { transition: none !important; }
}

/* ---------- Trust panel ---------- */
.tvx-trust { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; }
.tvx-trust li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .79rem !important; color: #3B4B59; padding: 4px 0; line-height: 1.4;
}
.tvx-trust svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; }
.tvx-secure-note {
  margin-top: 12px; padding: 10px 12px;
  background: var(--tvx-green-soft); border: 1px solid #A7E3CD;
  border-radius: var(--tvx-r-sm);
  font-size: .78rem !important; color: #0B5B43;
  display: flex; gap: 8px; align-items: flex-start; line-height: 1.4;
}
.tvx-secure-note svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; }

.tvx-accepted {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tvx-border);
}
.tvx-accepted > span:first-child {
  font-size: .7rem !important; color: var(--tvx-muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700;
}
.tvx-checkout .tvx-accepted img { height: 18px !important; width: auto !important; }
/* The Norton mark is a CSS sprite from style.css that needs explicit
   dimensions - without them it collapses to zero and appears "missing". */
.tvx-checkout .tvx-accepted .pay-norton-icon {
  display: inline-block !important;
  width: 68px !important; height: 22px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  align-self: center !important;
  flex: 0 0 auto;
}

.tvx-note {
  margin-top: 14px; padding: 11px 13px;
  background: var(--tvx-accent-soft); border: 1px solid #BFE3F1; border-radius: var(--tvx-r-sm);
  font-size: .79rem !important; color: #0B4A63; line-height: 1.45;
}

/* ---------- Screen-reader only ---------- */
.tvx-sr {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- Small-phone tightening ---------- */
@media (max-width: 575.98px) {
  .tvx-checkout { font-size: 15px; }
  .tvx-wrap { padding: 0 12px; }
  .tvx-card { padding: 14px; border-radius: 12px; }
  .tvx-checkout .tvx-head h1 { font-size: 1.06rem !important; }
  .tvx-head { padding: 18px 0 16px; }
  .tvx-checkout .tvx-plan-price { font-size: 1.4rem !important; }
  .tvx-checkout .tvx-total .tvx-t-val { font-size: 1.35rem !important; }
  .tvx-sum-body { padding: 14px; }
  .tvx-plan-desc { margin-bottom: 8px !important; }
}

/* ==========================================================================
   LEGACY OVERRIDES - must stay last in this file
   --------------------------------------------------------------------------
   The checkout JavaScript requires the .pack class, which drags in rules from
   style.css that were written for the old card design:

     .pack span            font-size: 24px -> 36px -> 42px, display:block
     .pack p               font-size: 20px, UPPERCASE, font-weight:800
     .pack div             color:#ff001f, font-size:12px
     div.pack.active       background: var(--primary) !important, color:#fff !important
     .pack::before         content: url(/images/radio-0.svg)   <- 404, showed as a
                                                                  broken icon

   Those are the cause of the oversized package text, the coloured fill on
   select, and the missing icon. They are neutralised here for .tvx-plan only,
   so every other page that uses .pack is completely unaffected.
   ========================================================================== */

/* Keep selected cards white with a coloured ring instead of a solid fill. */
.tvx-checkout .pack.tvx-plan,
.tvx-checkout div.pack.tvx-plan.active {
  background: var(--tvx-bg) !important;
  color: var(--tvx-text) !important;
}
.tvx-checkout div.pack.tvx-plan.active {
  border-color: var(--tvx-primary) !important;
  box-shadow: 0 0 0 4px rgba(4, 147, 211, .16), var(--tvx-shadow) !important;
}

/* Stop the legacy font sizes / uppercase / white-on-active text. */
.tvx-checkout .pack.tvx-plan span,
.tvx-checkout div.pack.tvx-plan.active span {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  display: inline !important;
  margin: 0 !important;
  text-transform: none !important;
}
.tvx-checkout .pack.tvx-plan p,
.tvx-checkout div.pack.tvx-plan.active p {
  text-transform: none !important;
  font-weight: 400 !important;
  font-size: .8rem !important;
  color: var(--tvx-muted) !important;
  line-height: 1.4 !important;
  margin: 0 0 10px !important;
}

/* Re-assert the pieces the reset above would otherwise flatten.
   Selector specificity deliberately matches the reset, declared after it. */
.tvx-checkout .pack.tvx-plan span.tvx-plan-badge {
  display: inline-block !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 5px 10px !important;
  background: var(--tvx-accent-btn) !important;
}
.tvx-checkout .pack.tvx-plan div.tvx-plan-name {
  font-size: .95rem !important; font-weight: 700 !important; color: var(--tvx-text) !important;
}
.tvx-checkout .pack.tvx-plan div.tvx-plan-price {
  font-size: 1.45rem !important; font-weight: 800 !important; color: var(--tvx-text) !important;
  line-height: 1.15 !important;
}
.tvx-checkout .pack.tvx-plan div.tvx-plan-per {
  font-size: .74rem !important; font-weight: 400 !important; color: var(--tvx-muted) !important;
}
.tvx-checkout .pack.tvx-plan ul.tvx-plan-feats li {
  font-size: .8rem !important; font-weight: 400 !important; line-height: 1.4 !important;
  display: flex !important;
}
.tvx-checkout .pack.tvx-plan div.tvx-plan-select {
  font-size: .8rem !important; font-weight: 700 !important; color: var(--tvx-muted) !important;
}
.tvx-checkout div.pack.tvx-plan.active div.tvx-plan-select {
  color: var(--tvx-primary-dark) !important; background: var(--tvx-primary-soft) !important;
}

/* Radio indicator. The sprite path in style.css was absolute (/images/...) and
   404'd; it is corrected there, and re-anchored here so it cannot collide with
   the "Most popular" badge at top-centre. */
.tvx-checkout .pack.tvx-plan::before {
  content: "" !important;
  position: absolute !important;
  top: 11px !important; right: 11px !important;
  width: 20px !important; height: 20px !important;
  margin: 0 !important;
  background: url(../images/radio-0.svg) no-repeat center !important;
  background-size: contain !important;
}
.tvx-checkout div.pack.tvx-plan.active::before {
  background-image: url(../images/radio-2.svg) !important;
}

/* The pay button carries .btn-r, whose ::after chevron pointed at a missing
   file. The path is fixed in style.css; keep it clear of the label here. */
.tvx-checkout .tvx-btn { padding-right: 34px !important; }
.tvx-checkout .tvx-btn::after { right: 12px !important; opacity: .9; }

/* ---------- Reassurance grid (invalid-VIN / completed pages) ---------- */
.tvx-adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 768px) { .tvx-adv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tvx-adv-grid { grid-template-columns: repeat(5, 1fr); } }

.tvx-checkout .tvx-adv { padding: 6px 4px; }
.tvx-checkout .tvx-adv img { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 8px; display: block; }
.tvx-checkout .tvx-adv h5 {
  font-size: .86rem !important; font-weight: 700 !important;
  margin: 0 0 5px !important; color: var(--tvx-text) !important; line-height: 1.3;
}
.tvx-checkout .tvx-adv .txt {
  font-size: .76rem !important; color: var(--tvx-muted) !important; line-height: 1.4;
}

/* ---------- Generic status page pieces (awaiting / crypto status / completed) ---------- */
.tvx-status-card { max-width: 680px; margin: 0 auto; text-align: center; }
.tvx-status-icon { width: 64px; height: 64px; margin: 4px auto 14px; display: block; }
.tvx-checkout .tvx-status-card h2 {
  font-size: 1.12rem !important; font-weight: 700 !important; margin: 0 0 10px !important;
  color: var(--tvx-text) !important;
}
.tvx-status-msg { font-size: .9rem !important; color: #3B4B59 !important; margin: 0 0 14px !important; line-height: 1.5; }
.tvx-meta {
  display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 16px;
}
.tvx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tvx-bg-alt); border: 1px solid var(--tvx-border);
  border-radius: 999px; padding: 5px 12px;
  font-size: .78rem; color: var(--tvx-text);
}
.tvx-chip strong { font-weight: 700; }
.tvx-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border: 1px solid var(--tvx-primary-btn) !important;
  color: var(--tvx-primary-dark) !important; background: #fff !important;
  border-radius: var(--tvx-r); font-weight: 700; font-size: .95rem;
  text-decoration: none !important;
}
.tvx-btn-ghost:hover { background: var(--tvx-primary-soft) !important; }
.tvx-spinner-lg {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--tvx-primary-line); border-top-color: var(--tvx-primary-btn);
  animation: tvx-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .tvx-spinner-lg { animation: none; } }

/* ---------- "What your report can include" grid ---------- */
.tvx-incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (min-width: 768px) { .tvx-incl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tvx-incl-grid { grid-template-columns: repeat(4, 1fr); } }
.tvx-checkout .tvx-incl {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .82rem !important; color: var(--tvx-text); line-height: 1.4; padding: 3px 0;
}
.tvx-checkout .tvx-incl svg { flex: 0 0 16px; margin-top: 2px; }

/* ==========================================================================
   TIVANIX - Plans & Pricing section
   --------------------------------------------------------------------------
   Same visual language as the checkout pages. Used by the homepage and the
   /pricing page (both include partials/plans-pricing), so this styles every
   place plans appear.

   All JS hooks are preserved in the markup: .priceBtn[data-plan],
   data-bs-target="#basicPrice" and the .plan-input hidden field.
   ========================================================================== */
.tvx-pricing { padding: 48px 0; background: var(--tvx-bg-alt); }
.tvx-pricing .tvx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.tvx-pricing .tvx-p-head { text-align: center; max-width: 680px; margin: 0 auto 32px; }
.tvx-pricing .tvx-p-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tvx-primary-soft); border: 1px solid var(--tvx-primary-line);
  color: var(--tvx-primary-dark);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
  font-size: .72rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.tvx-pricing h2.tvx-p-title {
  font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.25 !important;
  color: var(--tvx-text) !important; margin: 0 0 10px !important; letter-spacing: -.02em;
}
.tvx-pricing p.tvx-p-sub {
  font-size: .92rem !important; color: var(--tvx-muted) !important; margin: 0 !important;
  font-weight: 400 !important;
}
@media (min-width: 768px) { .tvx-pricing h2.tvx-p-title { font-size: 2rem !important; } }

/* ---- Grid ---- */
.tvx-p-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 700px)  { .tvx-p-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---- Card ----
   Same visual language as the checkout plan cards, so a visitor moving from the
   homepage to the payment page recognises what they picked. */
.tvx-pricing .tvx-p-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--tvx-bg);
  border: 2px solid var(--tvx-border);
  border-radius: var(--tvx-r-lg);
  box-shadow: var(--tvx-shadow-sm);
  padding: 26px 20px 20px;
  transition: border-color .22s var(--tvx-ease),
              box-shadow   .22s var(--tvx-ease),
              transform    .22s var(--tvx-ease);
}

/* Gradient hairline that fills in on hover; permanently lit on the recommended
   card so it is marked before any badge is read.

   The card must NOT be `overflow: hidden` - the badge sits above its top edge
   and would be sliced off. The bar rounds its own top corners instead, which
   is the only thing overflow was doing for it. */
.tvx-pricing .tvx-p-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--tvx-grad);
  border-radius: var(--tvx-r-lg) var(--tvx-r-lg) 0 0;
  opacity: 0; transition: opacity .22s var(--tvx-ease);
}
.tvx-pricing .tvx-p-card.is-popular::before { opacity: 1; }

@media (hover: hover) {
  .tvx-pricing .tvx-p-card:hover {
    border-color: var(--tvx-primary-line);
    box-shadow: var(--tvx-shadow-lg);
    transform: translateY(-6px);
  }
  .tvx-pricing .tvx-p-card:hover::before { opacity: .6; }
  /* The recommended card is already raised, so it lifts from there rather than
     dropping to the same height as the others. */
  @media (min-width: 700px) {
    .tvx-pricing .tvx-p-card.is-popular:hover { transform: translateY(-6px) scale(1.03); }
  }
}

.tvx-pricing .tvx-p-card.is-popular {
  border-color: var(--tvx-primary);
  box-shadow: 0 0 0 4px rgba(4, 147, 211, .14), var(--tvx-shadow-lg);
  background: linear-gradient(180deg, #F7FCFE 0%, #FFFFFF 46%);
}
@media (min-width: 700px) { .tvx-pricing .tvx-p-card.is-popular { transform: scale(1.03); } }

.tvx-pricing .tvx-p-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--tvx-grad); color: #fff;
  font-size: .68rem !important; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px -2px rgba(4, 147, 211, .5);
  z-index: 2;
}
/* Warmer colour so two badges never read as the same label twice. */
.tvx-pricing .tvx-p-badge.tvx-badge-value {
  background: var(--tvx-grad-gold);
  box-shadow: 0 4px 12px -2px rgba(234, 140, 4, .5);
}

/* ---- Badges: shared behaviour ----
   A light sweeps across every few seconds. It is the one thing on the page that
   moves on its own, which is what makes the recommended plan catch the eye -
   any more movement than this and it reads as an advert rather than a label.

   The sweep is clipped to the badge (which CAN be overflow:hidden - nothing
   overhangs IT) and is transform-only, so it stays on the compositor. */
.tvx-pricing .tvx-p-badge,
.tvx-checkout .tvx-plan-badge { overflow: hidden; }

.tvx-pricing .tvx-p-badge::after,
.tvx-checkout .tvx-plan-badge::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tvx-pricing .tvx-p-badge::after,
  .tvx-checkout .tvx-plan-badge::after {
    animation: tvx-badge-shine 4.5s var(--tvx-ease) 1.2s infinite;
  }
}
@keyframes tvx-badge-shine {
  /* One quick pass, then a long pause - a sweep every 4.5s reads as a highlight;
     a continuous one reads as a loading bar. */
  0%        { transform: translateX(-160%); }
  18%, 100% { transform: translateX(320%); }
}

.tvx-pricing .tvx-p-name {
  font-size: 1.05rem !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--tvx-text) !important; margin: 2px 0 4px !important;
}
.tvx-pricing .tvx-p-desc {
  font-size: .82rem !important; color: var(--tvx-muted) !important;
  margin: 0 0 16px !important; line-height: 1.45; font-weight: 400 !important;
}
@media (min-width: 700px) { .tvx-pricing .tvx-p-desc { min-height: 38px; } }

.tvx-pricing .tvx-p-price {
  display: flex; align-items: baseline; gap: 3px;
  padding: 14px 0; margin: 0 0 4px;
  border-top: 1px solid var(--tvx-border); border-bottom: 1px solid var(--tvx-border);
}
.tvx-pricing .tvx-p-cur {
  font-size: 1.05rem !important; font-weight: 700 !important; color: var(--tvx-muted) !important;
}
.tvx-pricing .tvx-p-amt {
  font-size: 2.5rem !important; font-weight: 800 !important; line-height: 1 !important;
  letter-spacing: -.035em; color: var(--tvx-navy) !important;
}
@media (max-width: 699.98px) { .tvx-pricing .tvx-p-amt { font-size: 2.25rem !important; } }
.tvx-pricing .tvx-p-per {
  font-size: .76rem !important; color: var(--tvx-muted) !important; margin-left: 4px;
  font-weight: 400 !important;
}

.tvx-pricing ul.tvx-p-feats {
  list-style: none !important; margin: 14px 0 18px !important; padding: 0 !important;
  flex: 1 1 auto;
}
.tvx-pricing ul.tvx-p-feats li {
  display: flex !important; align-items: flex-start; gap: 9px;
  font-size: .84rem !important; line-height: 1.45; padding: 5px 0;
  color: var(--tvx-text) !important; font-weight: 400 !important;
}
.tvx-pricing ul.tvx-p-feats li.is-off { color: #8A9AA8 !important; }
.tvx-pricing ul.tvx-p-feats li svg { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px; }

.tvx-pricing button.priceBtn,
.tvx-pricing .priceBtn {
  position: relative; overflow: hidden;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 9px;
  width: 100% !important; min-height: 54px;
  padding: 15px 20px !important;
  font-size: 1rem !important; font-weight: 800 !important; line-height: 1.2 !important;
  letter-spacing: .01em;
  color: #fff !important; background: var(--tvx-grad) !important;
  border: 0 !important;
  border-radius: var(--tvx-r) !important;
  cursor: pointer; text-align: center !important; text-transform: none !important;
  box-shadow: 0 4px 14px -2px rgba(3, 121, 168, .42), 0 1px 2px rgba(16, 32, 43, .1);
  transition: transform .18s var(--tvx-ease), box-shadow .18s var(--tvx-ease),
              background .18s var(--tvx-ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Sheen sweep, transform-only so it cannot cause layout. */
.tvx-pricing button.priceBtn::before {
  content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-160%); pointer-events: none;
}
/* The arrow nudges forward on hover - a small "go" cue on the action itself. */
.tvx-pricing button.priceBtn svg { transition: transform .22s var(--tvx-ease); }

@media (hover: hover) {
  .tvx-pricing button.priceBtn:hover {
    background: var(--tvx-grad-hi) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -4px rgba(3, 121, 168, .5), 0 2px 4px rgba(16, 32, 43, .12);
  }
  .tvx-pricing button.priceBtn:hover::before { transform: translateX(320%); transition: transform .75s var(--tvx-ease); }
  .tvx-pricing button.priceBtn:hover svg { transform: translateX(3px); }
}
.tvx-pricing button.priceBtn:active {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 2px 8px -2px rgba(3, 121, 168, .45);
  transition-duration: .06s;
}
.tvx-pricing button.priceBtn:focus-visible { outline: 3px solid #7FCDEA; outline-offset: 3px; }

/* Non-popular cards get a quieter, outline CTA so the recommendation stands
   out. Still a full-size target - quieter in colour, not in tappability. */
.tvx-pricing .tvx-p-card:not(.is-popular) button.priceBtn {
  background: #fff !important; color: var(--tvx-primary-dark) !important;
  border: 1.5px solid var(--tvx-primary-line) !important;
  box-shadow: none;
}
@media (hover: hover) {
  .tvx-pricing .tvx-p-card:not(.is-popular) button.priceBtn:hover {
    background: var(--tvx-primary-soft) !important;
    border-color: var(--tvx-primary) !important;
    box-shadow: 0 6px 16px -4px rgba(3, 121, 168, .25);
  }
}

.tvx-pricing .tvx-p-note {
  text-align: center; margin: 26px auto 0; max-width: 640px;
  font-size: .8rem !important; color: var(--tvx-muted) !important; line-height: 1.5;
}

/* ---- Pricing on small screens ----
   The scale-up that makes the recommended card stand out on desktop only works
   when the cards sit side by side. Stacked, it just makes one card wider than
   the others and misaligns the column, so it is dropped below 700px. */
@media (max-width: 699.98px) {
  /* The badge overhangs the card by 13px, so the grid needs clearance above the
     first row or it is cut off by whatever sits before the section. */
  .tvx-p-grid { gap: 24px; padding-top: 18px; }
  .tvx-pricing .tvx-p-card { transform: none !important; padding: 26px 16px 18px; }
  .tvx-pricing .tvx-p-card:hover { transform: none !important; }

  /* Thumb-sized, and wide enough that the label never wraps. */
  .tvx-pricing button.priceBtn { min-height: 56px; font-size: 1.02rem !important; }
}

/* ---- Badges on narrow screens ----
   At 320px the card is ~288px wide; a badge with generous tracking and padding
   can exceed that and get clipped at the card edge. Tighten it and cap its
   width so it always sits inside the card it labels. */
@media (max-width: 480px) {
  .tvx-pricing .tvx-p-badge,
  .tvx-checkout .tvx-plan-badge {
    font-size: .62rem !important;
    letter-spacing: .045em;
    padding: 6px 11px;
    max-width: calc(100% - 24px);
    /* Belt and braces: if a longer label is ever added, it ellipsises rather
       than spilling out of the card. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* Cards animate in as they enter the viewport - a short, subtle rise that makes
   the section feel considered rather than dumped on screen. Opacity/transform
   only, so it never triggers layout. Skipped entirely for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .tvx-pricing .tvx-p-card {
    animation: tvx-rise .5s var(--tvx-ease) both;
  }
  .tvx-pricing .tvx-p-card:nth-child(2) { animation-delay: .07s; }
  .tvx-pricing .tvx-p-card:nth-child(3) { animation-delay: .14s; }
}
@keyframes tvx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* The recommended card must land at its scaled size, not at scale(1). */
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  .tvx-pricing .tvx-p-card.is-popular { animation-name: tvx-rise-pop; }
}
@keyframes tvx-rise-pop {
  from { opacity: 0; transform: translateY(14px) scale(1.03); }
  to   { opacity: 1; transform: scale(1.03); }
}
.tvx-pricing .tvx-p-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px;
  margin: 18px auto 0; padding: 0; list-style: none;
}
.tvx-pricing .tvx-p-trust li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem !important; color: #3B4B59 !important; font-weight: 500;
}
.tvx-pricing .tvx-p-trust svg { flex: 0 0 15px; width: 15px; height: 15px; }

/* ---- VIN modal ---- */
.tvx-modal .modal-content { border: 0; border-radius: var(--tvx-r-lg); overflow: hidden; }
.tvx-modal .tvx-m-head {
  background: linear-gradient(180deg, #0B1220 0%, #10263A 100%);
  color: #fff; padding: 20px;
}
.tvx-modal .tvx-m-head h3 {
  font-size: 1.15rem !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 6px !important;
}
.tvx-modal .tvx-m-head p { font-size: .86rem !important; color: #C3D2DE !important; margin: 0 !important; }
.tvx-modal .modal-body { padding: 20px; }
.tvx-modal .tvx-m-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 576px) { .tvx-modal .tvx-m-form { grid-template-columns: 1fr auto; } }
.tvx-modal .tvx-m-form input[type="text"] {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-size: 16px; border: 1px solid #C3CED8; border-radius: var(--tvx-r-sm);
  text-transform: uppercase; letter-spacing: .04em;
}
.tvx-modal .tvx-m-form input[type="text"]:focus {
  border-color: var(--tvx-primary); box-shadow: 0 0 0 4px rgba(4, 147, 211, .16); outline: none;
}
.tvx-modal .tvx-m-form button {
  min-height: 50px; padding: 12px 22px; white-space: nowrap;
  font-size: .98rem; font-weight: 700; color: #fff;
  background: var(--tvx-primary-btn); border: 1px solid var(--tvx-primary-dark);
  border-radius: var(--tvx-r); cursor: pointer;
}
.tvx-modal .tvx-m-form button:hover { background: var(--tvx-primary-dark); }
.tvx-modal .tvx-m-hint { font-size: .78rem; color: var(--tvx-muted); margin-top: 10px; }
.tvx-modal .tvx-m-hint a { color: var(--tvx-primary-dark); font-weight: 600; }

/* ==========================================================================
   LEGACY BUTTON OVERRIDES - keep last
   --------------------------------------------------------------------------
   style.css contains ID-level rules that outrank class selectors:

     button#bankPay2, button#bankPay1 {
       margin-left: 45px; background: black !important;
       border-radius: 33px; font-size: 20px;
     }                                    <- no media query, ALL screens

   #bankPay2 is (1,0,1) and beats .tvx-checkout .tvx-btn (0,2,0), so the pay
   button rendered black, shifted 45px right and pill-shaped. The selectors
   below are (1,1,2) so they win cleanly.

   Also neutralised: .inputBx input{width:75%} / button{width:25%} (60/40 below
   767px), which squashed the VIN button inside the popup's grid.
   ========================================================================== */

.tvx-checkout #pay-btn button#bankPay2,
.tvx-checkout #pay-btn button#bankPay1,
.tvx-checkout #pay-btn button.tvx-btn {
  margin: 0 !important;
  width: 100% !important;
  background: var(--tvx-primary-btn) !important;
  color: #fff !important;
  border: 1px solid var(--tvx-primary-dark) !important;
  border-radius: var(--tvx-r) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  min-height: 52px !important;
  padding: 13px 18px !important;
  text-transform: none !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(3, 121, 168, .28) !important;
}
.tvx-checkout #pay-btn button#bankPay2:hover:not(:disabled),
.tvx-checkout #pay-btn button#bankPay1:hover:not(:disabled) {
  background: var(--tvx-primary-dark) !important;
}
.tvx-checkout #pay-btn button#bankPay2:disabled,
.tvx-checkout #pay-btn button#bankPay1:disabled {
  opacity: .74 !important; box-shadow: none !important;
}
/* The legacy .btn-r chevron would overlap the label + spinner. */
.tvx-checkout .tvx-btn::after,
.tvx-checkout #pay-btn button#bankPay2::after { display: none !important; }

/* ---- Popup VIN form: kill the percentage widths from .inputBx ---- */
.tvx-modal .tvx-m-form input[type="text"],
.tvx-modal .inputBx input {
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  border: 1px solid #C3CED8 !important;
  border-radius: var(--tvx-r-sm) !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
}
.tvx-modal .tvx-m-form button,
.tvx-modal .inputBx button {
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  border-radius: var(--tvx-r) !important;
  font-size: .98rem !important;
  text-transform: none !important;
  background: var(--tvx-primary-btn) !important;
  color: #fff !important;
  border: 1px solid var(--tvx-primary-dark) !important;
  padding: 12px 22px !important;
}
@media (min-width: 576px) {
  .tvx-modal .tvx-m-form button,
  .tvx-modal .inputBx button { width: auto !important; }
}
.tvx-modal .tvx-m-form button:hover,
.tvx-modal .inputBx button:hover { background: var(--tvx-primary-dark) !important; }

/* ==========================================================================
   PC-ONLY: order summary sticks while the page scrolls
   --------------------------------------------------------------------------
   Everything is inside @media (min-width: 992px). Mobile and tablet are
   deliberately untouched.

   What was stopping it, and what changed:

   1. body { overflow-x: hidden } in style.css (all screens) makes the body a
      scroll container in Chromium/WebKit, which is a well-known way to break
      position:sticky in descendants. Fixed for desktop only by preferring
      overflow-x: clip, which prevents sideways scrolling WITHOUT creating a
      scroll container. The hidden value is declared first as a fallback for
      browsers without clip support, and mobile keeps hidden exactly as before.

   2. will-change: transform on the sticky element (added by me previously)
      promotes it to its own compositing layer and makes sticky behave
      erratically. Removed.

   3. max-height + overflow-y:auto + overscroll-behavior:contain (also mine)
      turned the card into its own scroll box: the wheel scrolled the card
      instead of the page, and contain blocked scroll-chaining so the page felt
      frozen. Removed - the card is now natural height and the page scrolls
      normally underneath it.

   4. #precheck { max-width: 100%; padding-top: 82px !important } is an ID rule
      (1,0,0) that beat .tvx-wrap, so the desktop layout was never centred.
      Overridden with .tvx-checkout #precheck (1,1,0).
   ========================================================================== */
@media (min-width: 992px) {

  /* 1. Let sticky work: clip instead of hidden (desktop only). */
  body {
    overflow-x: hidden;   /* fallback first */
    overflow-x: clip;     /* modern browsers - no scroll container, sticky works */
  }

  /* 4. Centre the two-column layout and drop the stray top padding. */
  .tvx-checkout #precheck {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* No scroll-clipping ancestor between the sticky item and the scroll root. */
  .tvx-checkout #pay-block {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* A sticky grid item must not be stretched. */
  .tvx-checkout .tvx-grid { align-items: start !important; }

  /* 2 + 3. Clean sticky: no promotion, no internal scrolling. */
  .tvx-checkout .tvx-sum {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
    max-height: none !important;
    overflow: visible !important;
    will-change: auto !important;
  }

  /* Keep the card comfortably shorter than a laptop viewport so the pin is
     useful rather than only engaging at the very bottom. */
  .tvx-checkout .tvx-sum-body { padding: 16px !important; }
  .tvx-checkout .tvx-sum .tvx-row { padding: 5px 0 !important; font-size: .84rem !important; }
  .tvx-checkout .tvx-sum .tvx-trust li { padding: 3px 0 !important; font-size: .76rem !important; }
  .tvx-checkout .tvx-sum .tvx-secure-note { margin-top: 10px !important; padding: 9px 11px !important; }
  .tvx-checkout .tvx-sum .tvx-accepted { margin-top: 10px !important; padding-top: 10px !important; }
}
/* ---------- Crypto coin icons (replaces text labels) ---------- */
.tvx-checkout .tvx-coins {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; flex: 0 0 auto;
}
.tvx-checkout .tvx-coin {
  width: 26px !important; height: 26px !important;
  flex: 0 0 26px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(16, 32, 43, .18);
}
/* Coins stay visible on the narrowest phones - they replace the text labels,
   so unlike the card logos they must never be hidden. */
@media (max-width: 420px) {
  .tvx-checkout .tvx-coins { gap: 5px; }
  .tvx-checkout .tvx-coin { width: 24px !important; height: 24px !important; flex: 0 0 24px; }
}