/* Pricing page (/pricing/) — the price calculator, drawn in the home page's own vocabulary:
   the hero's dark/light split with the calculator where the video sits, the compare cards'
   eyebrow + title + divider, the journey's pattern and white cards, the lime result box.
   Linked from pricing/index.html only (build.py, `css: pricing`), after css/pages.css, which
   carries what every inner page shares; the header, footer, buttons, FAQ and contact
   drawer are the home page's own stylesheets, untouched. */

/* ---------- hero: copy on the brand panel, the calculator on the light one ---------- */
.pricing-hero {
  width: 100%;
  background: var(--surface-card);
  font-family: var(--font);
}
.pricing-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* like the home hero: the split fills the first screen under the sticky header + strip */
  min-height: calc(100vh - 80px - var(--announce-h, 0px));
  min-height: calc(100svh - 80px - var(--announce-h, 0px));
}
.pricing-hero__content {
  background: var(--brand-primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  padding: var(--page-pad);
  box-sizing: border-box;
}
.pricing-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.pricing-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 20px;
  border: 1px solid var(--text-inverse);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  white-space: nowrap;
}
.pricing-hero__title { margin: 0; width: 100%; color: var(--text-inverse); text-wrap: pretty; }
.pricing-hero__lead { margin: 0; width: 100%; color: var(--text-inverse); opacity: .7; }

.pricing-hero__included {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.pricing-hero__included-title { margin: 0; color: var(--text-inverse); opacity: .7; }
.pricing-hero__list { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.pricing-hero__item { display: flex; align-items: center; gap: 12px; color: var(--text-inverse); }
.pricing-hero__item img { width: 24px; height: 24px; flex-shrink: 0; }

.pricing-hero__calc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad);
  box-sizing: border-box;
  overflow: hidden;
}
/* the journey section's logo-tile pattern (04-journey.css), at the same strength */
.pricing-hero__calc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/04-journey/pattern-tile.svg") 0 0 / 100px 100px repeat;
  opacity: .09;
  pointer-events: none;
}

/* ---------- the calculator card ---------- */
.pricing-calc {
  position: relative;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: var(--radius-16);
  background: var(--surface-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06), 0 32px 64px -32px rgba(8, 42, 28, .24);
  color: var(--text-ink);
  scroll-margin-top: calc(80px + var(--announce-h, 0px) + 24px);
}
.pricing-calc__heading { display: flex; flex-direction: column; gap: 12px; }
.pricing-calc__eyebrow { color: var(--text-muted); }
.pricing-calc__title { margin: 0; color: var(--brand-primary); }
.pricing-calc__divider { width: 100%; height: 1px; background: var(--border-divider); }

.pricing-calc__group { display: flex; flex-direction: column; gap: 12px; }
.pricing-calc__label-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.pricing-calc__label { font: 500 16px/20px var(--font); letter-spacing: -0.32px; color: var(--text-ink); }

.pricing-calc__field { display: flex; align-items: stretch; gap: 8px; }
.pricing-calc__step {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--surface-card);
  color: var(--text-ink);
  transition: background-color .25s ease;
}
.pricing-calc__step:hover { background: var(--brand-accent); }
.pricing-calc__step:active { background: var(--surface-subtle); }
.pricing-calc__step:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.pricing-calc__step svg { width: 24px; height: 24px; }

/* the contact form's field (14-contact.css), sized up to carry the one number that matters */
.pricing-calc__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 60px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-12);
  background: var(--surface-white);
  color: var(--brand-primary);
  font: 500 32px/36px var(--font);
  letter-spacing: -0.96px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  appearance: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pricing-calc__input::placeholder { color: var(--text-muted); opacity: 1; }
.pricing-calc__input:hover:not(:focus) { border-color: var(--brand-primary); }
.pricing-calc__input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); }

/* slider: a brand-primary fill up to the thumb (js sets --fill), the accent as the handle */
.pricing-calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 4px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.pricing-calc__range:focus { outline: none; }
.pricing-calc__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--brand-primary) 0 var(--fill, 0%), var(--surface-subtle) var(--fill, 0%) 100%);
}
.pricing-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  background: var(--brand-accent);
  box-shadow: 0 2px 8px rgba(8, 42, 28, .2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-calc__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.pricing-calc__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--surface-white), 0 0 0 5px var(--brand-primary);
}
.pricing-calc__range::-moz-range-track { height: 4px; border-radius: var(--radius-full); background: var(--surface-subtle); }
.pricing-calc__range::-moz-range-progress { height: 4px; border-radius: var(--radius-full); background: var(--brand-primary); }
.pricing-calc__range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  background: var(--brand-accent);
  box-shadow: 0 2px 8px rgba(8, 42, 28, .2);
}
.pricing-calc__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--surface-white), 0 0 0 5px var(--brand-primary);
}
/* each label sits under the thumb's centre at its stop: the thumb travels 12px in from either end */
.pricing-calc__scale {
  position: relative;
  height: 16px;
  margin-top: -6px;
  font: 400 12px/16px var(--font);
  letter-spacing: -0.48px;
  color: var(--text-muted);
}
.pricing-calc__scale span {
  position: absolute;
  top: 0;
  left: calc(12px + (100% - 24px) * var(--t));
  transform: translateX(-50%);
  white-space: nowrap;
}
.pricing-calc__hint { margin: 0; color: var(--text-muted); }

/* breakdown: the FAQ's divided rows */
.pricing-calc__rows { margin: 0; display: flex; flex-direction: column; }
.pricing-calc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border-divider);
}
.pricing-calc__row dt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pricing-calc__row-label { color: var(--text-ink); }
.pricing-calc__row-hint { color: var(--text-muted); }
.pricing-calc__row-value {
  margin: 0;
  flex-shrink: 0;
  font: 500 24px/28px var(--font);
  letter-spacing: -0.72px;
  color: var(--text-ink);
  font-variant-numeric: tabular-nums;
}

/* the total: the compare cards' lime "result" box, carrying the number */
.pricing-calc__total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "value per";
  align-items: end;
  gap: 8px 16px;
  padding: 20px 24px;
  border-radius: var(--radius-12);
  background: var(--brand-accent);
  color: var(--text-ink);
}
.pricing-calc__total-label { grid-area: label; margin: 0; }
.pricing-calc__total-value {
  grid-area: value;
  margin: 0;
  font: 500 48px/52px var(--font);
  letter-spacing: -1.92px;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pricing-calc__total-per {
  grid-area: per;
  margin: 0 0 6px;
  color: var(--text-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pricing-calc__total-per[hidden] { display: none; }

.pricing-calc__actions { display: flex; align-items: center; gap: 12px; }
.pricing-calc__actions .btn { flex: 1 1 0; min-width: 0; padding: 11px 24px; } /* 48px tall, as every Figma button */

/* ---------- how the price works: the compare cards, three across ---------- */
.pricing-model {
  width: 100%;
  background: var(--surface-subtle);
  font-family: var(--font);
}
.pricing-model__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--section-pad) var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.pricing-model__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 864px;
  text-align: center;
}
.pricing-model__title { margin: 0; color: var(--text-ink); }
.pricing-model__lead { margin: 0; color: var(--text-muted); text-wrap: balance; }
.pricing-model__grid {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.pricing-model__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 32px;
  border-radius: var(--radius-16);
  background: var(--surface-section);
  box-sizing: border-box;
}
.pricing-model__card--dark { background: var(--brand-primary); }
.pricing-model__eyebrow { color: var(--text-muted); white-space: nowrap; }
.pricing-model__figure {
  margin: 0;
  font: 500 clamp(40px, 3.4vw, 54px)/1.08 var(--font);
  letter-spacing: -0.04em;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricing-model__arrow { display: inline-block; margin: 0 .16em; }
.pricing-model__divider { width: 100%; height: 1px; background: var(--border-divider); }
.pricing-model__text { margin: 0; color: var(--text-muted); }
.pricing-model__card--dark .pricing-model__eyebrow { color: var(--text-inverse); opacity: .7; }
.pricing-model__card--dark .pricing-model__figure { color: var(--brand-accent); }
.pricing-model__card--dark .pricing-model__divider { background: var(--text-inverse); }
.pricing-model__card--dark .pricing-model__text { color: var(--text-inverse); }

/* ---------- FAQ: the home page's accordion (12-faq.css); only the inline link is new ---------- */
.pricing-faq .faq-a a {
  color: var(--text-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brand-secondary);
  transition: text-decoration-color .2s ease;
}
.pricing-faq .faq-a a:hover { text-decoration-color: var(--text-ink); }

/* ---------- tablet ---------- */
@media (max-width: 1200px) {
  .pricing-hero__content { padding: 64px 48px; gap: 32px; }
  .pricing-hero__title { font-size: 54px; line-height: 58px; }
  .pricing-hero__lead { font-size: 20px; line-height: 24px; }
  .pricing-hero__calc { padding: 48px 32px; }
}
/* below 1100 the two halves stack: the copy, then the calculator at full card width */
@media (max-width: 1100px) {
  .pricing-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pricing-hero__text, .pricing-hero__included { max-width: 720px; }
  .pricing-hero__calc { padding: 64px 48px; }
  .pricing-model__inner { padding: 80px 48px; }
  .pricing-model__grid { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
}

/* ---------- mobile (375) ---------- */
@media (max-width: 767px) {
  /* the home hero's mobile treatment (02-hero.css): 48/16 padding, centred copy */
  .pricing-hero__content { padding: 48px 16px; gap: 32px; align-items: stretch; }
  .pricing-hero__text { gap: 12px; align-items: center; text-align: center; }
  .pricing-hero__badge { padding: 8px 16px; }
  .pricing-hero__title { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; text-align: center; }
  .pricing-hero__lead { font-size: 18px; line-height: 24px; letter-spacing: -0.54px; text-align: center; opacity: 1; }
  .pricing-hero__included { align-items: center; gap: 12px; padding-top: 24px; }
  .pricing-hero__list { justify-content: center; gap: 12px 20px; }
  .pricing-hero__item { gap: 8px; }
  .pricing-hero__item img { width: 20px; height: 20px; }

  .pricing-hero__calc { padding: 24px 16px 48px; }
  .pricing-calc { gap: 20px; padding: 24px; border-radius: var(--radius-12); }
  .pricing-calc__title { font-size: 20px; line-height: 24px; letter-spacing: -0.4px; }
  .pricing-calc__step { width: 56px; height: 56px; }
  .pricing-calc__input { height: 56px; font-size: 28px; line-height: 32px; letter-spacing: -0.84px; }
  .pricing-calc__row { padding: 12px 0; }
  .pricing-calc__row-value { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
  .pricing-calc__total { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "per"; gap: 4px; padding: 20px; }
  .pricing-calc__total-value { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
  .pricing-calc__total-per { margin: 0; text-align: left; white-space: normal; }
  .pricing-calc__actions { flex-direction: column; align-items: stretch; }
  .pricing-calc__actions .btn { flex: none; width: 100%; box-sizing: border-box; }

  .pricing-model__inner { padding: 64px 16px; gap: 32px; }
  .pricing-model__head { gap: 12px; width: 100%; }
  .pricing-model__title { font-size: 32px; line-height: 36px; letter-spacing: -0.96px; }
  .pricing-model__lead { font-size: 18px; line-height: 24px; letter-spacing: -0.54px; }
  .pricing-model__grid { gap: 16px; }
  .pricing-model__card { gap: 16px; padding: 24px; border-radius: var(--radius-12); }
  .pricing-model__figure { font-size: 40px; line-height: 44px; }
}