/* Pricing calculator — ported from the Claude Design project
   "Pricing calculator design request" (Pricing Calculator.dc.html).
   Everything is scoped under .pricing so it can't leak into other
   sections; it reuses the site's existing --cream/--orange/--black
   tokens (defined in styles.css) rather than redeclaring its own, since
   the design's own color tokens resolved to the exact same values. Fonts
   are the site's self-hosted Inter/Playfair Display — the design's own
   fonts.css (which pulled from Google) is intentionally not used.
   Inter weight 700 isn't self-hosted (only 400/500/800/900 are), so
   every place the source design used Inter 700 is mapped to 800 here —
   the same weight the browser would fall back to anyway. */

/* The portfolio sheet directly above this section is pure #000000; this
   section's own background is the slightly softer var(--black) (#111111).
   That flat color difference reads as a hard seam right where the two
   sections meet, so the top of the background fades from the portfolio's
   exact black into this section's own black over the first 140px, then
   stays solid for the rest — a single gradient, no extra element needed. */
.pricing {
  background: linear-gradient(to bottom, #000000, var(--black) 140px);
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Inter', sans-serif;
}

.pricing__intro {
  text-align: center;
  max-width: 640px;
  margin-bottom: 56px;
}

.pricing__eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}

.pricing__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.025em;
  font-size: 44px;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 0 16px;
}

.pricing__accent {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--orange);
}

.pricing__subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.pricing__grid {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1040px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Left panel — controls */
.pricing__panel {
  flex: 1 1 440px;
  background: #1A1A1A;
  border-radius: 24px;
  padding: 44px;
}

.pricing__label {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #FFFFFF;
  margin-bottom: 18px;
}

.pricing__label--inline {
  margin-bottom: 0;
}

.pricing__radio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.pricing__radio {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
}

.pricing__radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 160ms ease;
}

.pricing__radio-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 160ms ease, transform 160ms ease;
}

.pricing__radio[aria-pressed="true"] .pricing__radio-dot {
  border-color: var(--orange);
}

.pricing__radio[aria-pressed="true"] .pricing__radio-dot::after {
  opacity: 1;
  transform: scale(1);
}

.pricing__radio span:not(.pricing__radio-dot) {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #FFFFFF;
}

.pricing__radio--row {
  width: 100%;
}

.pricing__radio-text {
  flex: 1;
}

.pricing__radio-price {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
  white-space: nowrap;
  flex-shrink: 0;
}

.pricing__radio-price--muted {
  color: rgba(255, 255, 255, 0.4);
}

.pricing__qty-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.pricing__qty-value {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--orange);
}

.pricing__slider {
  width: 100%;
  height: 6px;
  margin: 4px 0 6px;
  accent-color: var(--orange);
}

.pricing__qty-bounds {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 36px;
}

.pricing__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.pricing__checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  width: 100%;
}

.pricing__checkbox-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 160ms ease, background 160ms ease;
}

.pricing__checkbox-check {
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease;
}

.pricing__checkbox[aria-pressed="true"] .pricing__checkbox-box {
  border-color: var(--orange);
  background: var(--orange);
}

.pricing__checkbox[aria-pressed="true"] .pricing__checkbox-check {
  opacity: 1;
}

.pricing__checkbox-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #FFFFFF;
  flex: 1;
}

.pricing__checkbox-price {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
}

.pricing__note {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 18px;
}

.pricing__note--solid {
  font-size: 15px;
  color: #FFFFFF;
  margin: 0 0 18px;
}

.pricing__footnote {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.4);
  margin: 16px 0 0;
}

/* Right column — cost summary */
.pricing__summary {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing__summary-intro {
  margin-bottom: 4px;
}

.pricing__summary-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.pricing__summary-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.pricing__card {
  background: #1A1A1A;
  border-radius: 16px;
  padding: 24px;
}

.pricing__card-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #FFFFFF;
  margin-bottom: 10px;
}

.pricing__card-value {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.pricing__card-note {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
}

.pricing__card--accent {
  background: var(--orange);
}

.pricing__card--accent .pricing__card-note {
  color: rgba(255, 255, 255, 0.85);
}

.pricing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #111111;
  background: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 18px 28px;
  cursor: pointer;
  margin-top: 8px;
  text-decoration: none;
  transition: opacity 160ms ease;
}

.pricing__cta:hover {
  opacity: 0.85;
}

@media (max-width: 640px) {
  .pricing {
    padding: 64px 20px;
  }

  .pricing__heading {
    font-size: 32px;
  }

  .pricing__panel {
    padding: 28px;
  }

  .pricing__intro {
    margin-bottom: 40px;
  }
}