/* MPN DigiTech — pricing.html Custom Site quote + questionnaire.
   Loads after site.css/landing.css. */

/* ---------- red CTA (Custom Site route) ----------
   Reuses the crimson exception already established for the home page's
   "Custom Digital Platform" card (l-price-card.is-custom), so the one
   deliberate break from the green CTA rule stays a single, consistent
   pattern rather than two different reds. */
.btn-highlight {
  background: var(--color-highlight);
  color: #fff;
  border-color: var(--color-highlight);
}
.btn-highlight:hover { background: var(--color-highlight-hover); border-color: var(--color-highlight-hover); }

/* ---------- Custom Application band ----------
   Dark card, not another bordered card matching the tier grid's own border
   treatment — the sitewide "pay attention" navy (cta-band/footer/
   l-industries), but sized to the same .container bounds as the tier grid
   below it (left/right edges match exactly) rather than full-bleed, with
   the grid's own corner radius. The section around it stays bg-surface —
   the same white as the H1 section above — so the box is the only color
   change on the page, not a color seam in its own gutter. Heading and
   description reuse .text-h1/.lede verbatim (the exact classes "Pricing."
   and its own lede use above) rather than a smaller one-off size, so the
   two headings read as one typographic system stacked vertically. */
.custom-site-band-inner {
  background: var(--color-surface-dark);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
}
.custom-site-band-desc { margin-top: 4px; color: rgba(255, 255, 255, 0.85); }
.custom-site-band-cta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.custom-site-band-price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .custom-site-band-inner { align-items: flex-start; }
  .custom-site-band-cta { align-items: flex-start; width: 100%; }
  /* .btn is sitewide nowrap (every other button's text is short enough
     that this is correct); this is the one button whose copy is long
     enough to overflow a narrow viewport at a fixed nowrap width, so it
     alone gets to wrap and take the full column width instead. */
  #quiz-open-btn { white-space: normal; text-align: center; width: 100%; }
}

/* ---------- included / not-included lists (pricing.html tier panes) ----------
   Replaces each item's own decorative feature icon with a plain yes/no
   mark, so "included" and "not included" read the same way at a glance
   instead of needing the reader to parse a different pictogram per line. */
.check-mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.check-yes { background: rgba(26, 100, 70, 0.12); color: var(--color-accent); }
.check-no { background: rgba(154, 32, 53, 0.12); color: var(--color-highlight); }

/* ---------- quote card, left column of the pricing-page contact section ----------
   Same navy-box, white-text, rounded-corner treatment as the Custom
   Application band above it, so the two read as one language. The "Your
   estimate" label sits above the box, in normal ink on the page ground
   (sized off .text-h3, matching "MPN DigiTech (Pty) Ltd" below), rather
   than inside it — the box itself always stays navy, the same as the
   band; only the figure inside turns crimson once a real number exists,
   matching the quiz's own reveal step. */
.quote-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-6);
}
.quote-card-head h3 { margin: 0; color: var(--color-highlight); }
.quote-card-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface-alt);
  color: var(--color-highlight);
}
.quote-card {
  margin-top: var(--space-3);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-dark);
  text-align: center;
}
.quote-card-text { margin: 0; font-size: 0.9375rem; color: #fff; }
.quote-card-text .amount {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  color: var(--color-highlight-on-dark); /* --color-highlight itself fails
    contrast on this navy box (1.95:1) — this is the token the system
    already defines for crimson-on-dark use */
}
.quote-card-text .amount-caption { display: block; color: rgba(255, 255, 255, 0.85); }

/* Left column becomes a flex column so the quote box can absorb whatever
   height difference .grid-2's stretch creates against the form column,
   instead of leaving a gap under .l-contact-company. */
.l-contact-section .grid-2 > div:first-child { display: flex; flex-direction: column; }
.l-contact-section .grid-2 > div:first-child .quote-card { flex: 1; }

/* ---------- quiz overlay ---------- */
.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 12, 24, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.quiz-overlay[hidden] { display: none; }

.quiz-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: min(640px, 90vh);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  box-shadow: 0 32px 64px -24px rgba(6, 12, 28, 0.55);
}
.quiz-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.quiz-close:hover { color: var(--color-primary); border-color: var(--color-primary); }

.quiz-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.quiz-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-back { margin-bottom: var(--space-4); }

.quiz-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.quiz-step h2 { font-size: 1.375rem; }
.quiz-step .quiz-subtitle { margin-top: var(--space-2); color: var(--color-text-muted); }

.quiz-options {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.quiz-option:hover { border-color: var(--color-accent); background: rgba(26, 100, 70, 0.04); }
.quiz-option-label { display: block; font-weight: 600; color: var(--color-primary); font-size: 0.9375rem; }
.quiz-option-sub { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--color-text-muted); }

/* multi-select ("select all that apply") state */
.quiz-option.is-selected { border-color: var(--color-accent); background: rgba(26, 100, 70, 0.06); }
.quiz-option.is-selected .quiz-option-label { color: var(--color-accent); }

/* Checkable (multi-select) cards reserve space on the right for the check
   badge and animate it in on selection: the circle scales in on the same
   ease-out-quint curve used sitewide (landing.css's card/panel reveals),
   the tick draws in just after via stroke-dashoffset — the same
   self-drawing SVG device already used elsewhere on this site's icons
   (e.g. index.html's included-features row), not a new motion language. */
.quiz-option-checkable { position: relative; padding-right: 52px; }
.quiz-check {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%) scale(0);
  opacity: 0;
  color: var(--color-accent);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
}
.quiz-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 220ms ease 90ms; }
.quiz-option.is-selected .quiz-check { transform: translateY(-50%) scale(1); opacity: 1; }
.quiz-option.is-selected .quiz-check path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .quiz-check, .quiz-check path { transition: none; }
}

.quiz-inline-input {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.quiz-inline-input input[type="text"] {
  width: 120px;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px minimum to avoid iOS Safari's focus auto-zoom */
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.quiz-inline-input input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(26, 100, 70, 0.25);
}
.quiz-skip {
  margin-top: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quiz-skip:hover { color: var(--color-primary); }

/* ---------- result step ----------
   The revealed total is the one peak of the whole quiz, so it gets the
   system's boldest number treatment: hero-scale mono, the crimson reserved
   for this exact custom-quote moment (matching the CTA that opened the quiz
   and the quote card it hands off to), tabular so the count-up animation
   (see animateCount in quote-quiz.js) doesn't jitter in width as it climbs. */
.quiz-result-amount {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quiz-result-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-highlight);
}
.quiz-result-amount .period { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.quiz-result-note { margin-top: var(--space-3); font-size: 0.8125rem; color: var(--color-text-muted); }
.quiz-breakdown {
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.quiz-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text);
}
.quiz-breakdown li span:last-child { font-family: var(--font-mono); color: var(--color-text-muted); flex: none; }
.quiz-guess-compare { margin-top: var(--space-4); font-size: 0.875rem; color: var(--color-text-muted); }

/* pricing.html's tier grid has 3 cards, not index.html's 4, but must not
   touch landing.css's own two mobile/tablet breakpoints for .l-pricing-grid
   (max-width: 1000px -> 2 cols, max-width: 620px -> 1 col). An inline style
   on the element was the previous approach and it silently broke both of
   those breakpoints, since an inline style beats any stylesheet media query
   regardless of specificity. min-width: 1001px doesn't overlap either
   breakpoint, so this only ever fires where landing.css's own rules don't. */
@media (min-width: 1001px) {
  .l-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}