/* Pricing page — page-specific rules only; the chassis, type and footer are ar-site.css. */

.price-head { margin-bottom: var(--ar-s-6); }
.price-head h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: var(--ar-s-4); }
.price-head .lede { max-width: 54ch; }

.price-box {
  border: var(--ar-border); background: var(--ar-ink);
  padding: var(--ar-s-6); max-width: 52ch;
}
.price {
  margin: 0; display: flex; align-items: baseline; gap: 2px;
  font-family: var(--ar-font-display); font-weight: 700;
  letter-spacing: var(--ar-tracking-display); color: var(--ar-text);
  font-size: 64px; line-height: 1;
}
.price .currency { font-size: 30px; color: var(--ar-text-2); font-weight: 400; }
/* Revealed by the discount logic with style.display = "", so it must not be display:none
   here - see the note in the markup. Inline-block keeps it on the price's baseline. */
#priceStrike {
  font-size: 24px; font-weight: 500; color: var(--ar-text-2);
  text-decoration: line-through; margin-left: var(--ar-s-3);
}
.price-label {
  margin: var(--ar-s-3) 0 0;
  font-family: var(--ar-font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ar-text-2);
}
.tax-line { margin: var(--ar-s-2) 0 0; font-family: var(--ar-font-mono); font-size: 11px; color: var(--ar-text); }
.tax-note { margin: var(--ar-s-2) 0 0; font-size: 12.5px; color: var(--ar-text-3); }
#discountNote { margin: var(--ar-s-3) 0 0; font-size: 12.5px; color: var(--ar-green); }

.price-box .btn { margin-top: var(--ar-s-5); min-width: 240px; }
.guarantee { margin: var(--ar-s-4) 0 0; font-size: 12.5px; color: var(--ar-text-3); line-height: 1.6; }

.feature-list { list-style: none; padding-left: var(--ar-s-5); margin: var(--ar-s-6) 0 0; max-width: 52ch; }
.feature-list li { position: relative; margin-bottom: var(--ar-s-3); color: var(--ar-text-2); }
.feature-list li::before {
  content: "\2713"; position: absolute; left: calc(var(--ar-s-5) * -1); color: var(--ar-green);
}

/* Reviews. A horizontal scroller with arrows is a fine pattern with a mouse, and a bad
   one on a phone - it is the same cropped-content-behind-a-scrollbar that read as broken
   on the landing page. Desktop scrolls; phones get a plain stack of the first three, with
   the full set one tap away on /testimonials. */
.testimonial-scroll-wrap { position: relative; }
.testimonial-scroll {
  display: flex; gap: var(--ar-s-4); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding-bottom: var(--ar-s-3);
  /* The native scrollbar sat under the cards as a bright grey bar the full width of the
     section - the loudest horizontal line on a page whose whole job is to look composed.
     The arrows are the affordance; the track adds nothing. Scrolling still works by
     trackpad swipe, arrow keys and the buttons, so nothing is lost with the bar hidden. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
.testimonial-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.scroll-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; cursor: pointer;
  background: var(--ar-panel); border: 1px solid var(--ar-line-2); color: var(--ar-text);
  font-size: 18px; line-height: 1;
}
.scroll-arrow:hover { background: #313131; border-color: var(--ar-text-2); }
.scroll-arrow[hidden] { display: none; }
.scroll-arrow-left  { left: calc(var(--ar-s-4) * -1); }
.scroll-arrow-right { right: calc(var(--ar-s-4) * -1); }

@media (max-width: 560px) {
  .testimonial-scroll { display: block; overflow-x: visible; }
  .testimonial-card { margin-bottom: var(--ar-s-3); }
  .testimonial-card:nth-child(n+4) { display: none; }
  .scroll-arrow { display: none; }
  .price { font-size: 52px; }
  .price-box { padding: var(--ar-s-5); }
  .price-box .btn { width: 100%; min-width: 0; }
}

/* --- Bits the conversion missed ------------------------------------------ */
/* .hero-kicker holds the LED plus the discount badge the pricing script reveals; without a
   rule the LED sat on the text baseline with no gap. */
.hero-kicker {
  display: flex; align-items: center; gap: var(--ar-s-2);
  margin-bottom: var(--ar-s-3);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase;
  color: var(--ar-text-2);
}
.ticks { list-style: none; }
.cta-note {
  margin-top: var(--ar-s-5);
  font-family: var(--ar-font-mono); font-size: 11px; letter-spacing: .06em;
}