/* ==========================================================================
   NetrAI — Pricing Page
   Build-your-package shop: itemized line items, combo deals, live cart,
   and an animated receipt. Built entirely from the existing Iris tokens
   in style.css. Pricing page only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Layout: itemized builder (left) + sticky cart (right)
   -------------------------------------------------------------------- */
.pricing-layout {
  display: block;   /* the cart is a slide-over now, not a second column */
}

/* --------------------------------------------------------------------
   Combo deals
   -------------------------------------------------------------------- */
.combo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 64px; }
@media (max-width: 900px) { .combo-grid { grid-template-columns: 1fr; } }

.combo-card {
  display: flex;
  flex-direction: column;
  position: relative;
}
.combo-card .combo-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-fill);
  padding: 4px 10px;
  border-radius: 999px;
}
.combo-card h3 { margin-bottom: 6px; }
.combo-card .combo-desc { color: var(--mist); font-size: 0.92rem; margin-bottom: 22px; flex-grow: 1; }
.combo-card .combo-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink);
  margin-bottom: 20px;
}
.combo-card .combo-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--mist-dim);
  margin-bottom: 20px;
  margin-top: -14px;
}
.combo-select-btn {
  width: 100%;
  justify-content: center;
  background: var(--surface-canvas);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 13px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
}
.combo-select-btn:hover { border-color: var(--iris-violet); background: var(--accent-tint-strong); }
.combo-select-btn.active {
  background: var(--accent-fill);
  border-color: var(--accent);
  color: #fff;
}
.combo-select-btn .check-mark { display: none; }
.combo-select-btn.active .check-mark { display: inline; }
.combo-select-btn.active .add-label { display: none; }
.combo-select-btn .remove-label { display: none; }
.combo-select-btn.active .remove-label { display: inline; }
.combo-card.selected { border-color: var(--accent); box-shadow: none; }

/* --------------------------------------------------------------------
   Tier select bar
   -------------------------------------------------------------------- */
/* Four tiers, not three — the bar keeps its proportions by giving each column
   a little less horizontal padding rather than by shrinking the type. */
.tier-select-bar {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: none;
  max-width: 860px;
  margin-bottom: 14px;
}
.tier-thumb {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-fill);
  box-shadow: none;
  z-index: 0;
  transition: transform 0.5s cubic-bezier(0.28, 0.11, 0.32, 1), width 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
  pointer-events: none;
  will-change: transform, width;
}
.tier-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  border: 1.5px solid var(--glass-border);
  background: var(--surface-canvas);
  color: var(--ink);
  padding: 22px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), color 0.2s ease 0.26s, border-color var(--transition), transform 0.2s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.tier-btn:hover { border-color: var(--iris-violet); background: var(--surface-hover); }
.tier-btn:active { transform: scale(0.96); }
.tier-btn .tier-name { display: block; }
.tier-btn .tier-sub {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--mist);
  margin-top: 6px;
  letter-spacing: 0.02em;
  transition: color 0.2s ease 0.26s;
}
.tier-btn.active {
  background: transparent;
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}
.tier-btn.active:hover { border-color: transparent; background: transparent; }
.tier-btn.active:active { transform: translateY(-1px) scale(0.97); }
.tier-btn.active .tier-sub { color: #fff; opacity: 0.92; }
@media (prefers-reduced-motion: reduce) {
  .tier-thumb { transition: none; }
  .tier-btn { transition: background var(--transition), color var(--transition), border-color var(--transition); }
}
.tier-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--mist-dim);
  max-width: 620px;
  margin-bottom: 0;
}
.tier-recommended-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-iris);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: none;
  z-index: 2;
}
.tier-bar-flash { animation: tierBarFlash 0.9s ease; }
@keyframes tierBarFlash {
  0% { box-shadow: none; }
  35% { box-shadow: none; }
  100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .tier-bar-flash { animation: none; } }

/* Read-only status readout — current tier is set by the Tier Advisor or by
   tapping a column in the comparison table, not by clicking here directly. */
.tier-current-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}
.tier-select-bar-readonly .tier-btn { cursor: default; pointer-events: none; }
.tier-select-bar-readonly .tier-btn:hover { border-color: var(--glass-border); background: var(--surface-canvas); }
.tier-select-bar-readonly .tier-btn.active:hover { border-color: transparent; background: transparent; }
/* At tablet width four columns stop being readable long before they stop
   fitting, so fold to a 2x2 grid before folding to a single column. */
@media (max-width: 760px) and (min-width: 481px) {
  .tier-select-bar { flex-wrap: wrap; }
  .tier-thumb { display: none; }
  .tier-btn { flex: 1 1 calc(50% - 5px); padding: 16px 12px; }
  .tier-btn.active {
    background: var(--accent-fill);
    border-color: var(--accent);
    color: #fff;
  }
}
@media (max-width: 480px) {
  .tier-select-bar { flex-direction: column; gap: 8px; }
  .tier-thumb { display: none; }
  .tier-btn { padding: 14px 16px; }
  .tier-btn.active {
    background: var(--accent-fill);
    border-color: var(--accent);
    color: #fff;
  }
}

/* --------------------------------------------------------------------
   Tier step layout: tier bar (left) + Tier Advisor widget (right)
   -------------------------------------------------------------------- */
.tier-step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.tier-select-col { min-width: 0; }

/* --------------------------------------------------------------------
   Tier Advisor — collapsed prompt by default; opens into a compact
   one-question-at-a-time wizard so it never dwarfs the tier bar.
   -------------------------------------------------------------------- */
.tier-advisor {
  position: relative;
  background: var(--glass-bg-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 26px 26px 24px;
  margin-bottom: 14px;
  overflow: hidden;
}
.tier-advisor::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -30%;
  width: 260px;
  height: 260px;
  background: var(--gradient-iris-soft);
  filter: blur(50px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.tier-advisor > * { position: relative; z-index: 1; }

.tier-advisor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tier-advisor-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.tier-advisor-kicker svg {
  width: 14px;
  height: 14px;
  animation: advisorSpin 6s linear infinite;
}
@keyframes advisorSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tier-advisor-kicker svg { animation: none; } }

.tier-advisor-title { font-size: 1.15rem; margin-bottom: 4px; }
.tier-advisor-lead {
  font-size: 0.85rem;
  color: var(--mist);
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------
   The quiz — one question at a time inside the same box.

   The stage is a grid with a single cell that every question shares, so
   they stack on top of one another and the box keeps the height of the
   tallest question. Nothing jumps as you move between steps.
   -------------------------------------------------------------------- */
.advisor-quiz { display: block; }
.advisor-quiz.is-done { display: none; }

.advisor-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.advisor-step-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.advisor-dots { display: inline-flex; gap: 6px; }
.advisor-dot {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--surface-pebble);
  transition: background var(--transition), width 0.35s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.advisor-dot.is-done { background: var(--iris-violet); }
.advisor-dot.is-current {
  width: 34px;
  background: var(--accent-fill);
}

.advisor-stage { display: grid; }
.advisor-q {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}
.advisor-q.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.advisor-q-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 14px;
}

.advisor-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.advisor-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--glass-border);
  background: var(--surface-canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.35;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
              transform 0.2s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.advisor-option:hover {
  border-color: var(--iris-violet);
  background: var(--surface-hover);
}
.advisor-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.advisor-option:active { transform: scale(0.985); }

/* The letter key. Doubles as the "chosen" indicator — it fills with the
   accent rather than a separate tick appearing, so the row changes state
   without changing size. */
.advisor-option-key {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mist);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.advisor-option-text { min-width: 0; }

.advisor-option.is-picked {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.advisor-option.is-picked .advisor-option-key {
  background: var(--accent-fill);
  border-color: var(--accent);
  color: #fff;
}

/* Shown when someone reaches the end with fewer than three answers. */
.advisor-warn {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ember);
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}
.advisor-warn.visible {
  max-height: 90px;
  opacity: 1;
  margin-top: 14px;
}

.advisor-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.advisor-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mist-dim);
  padding: 4px 2px;
  transition: color var(--transition), opacity var(--transition);
}
.advisor-nav-btn svg { width: 13px; height: 13px; }
.advisor-nav-btn:hover { color: var(--accent); }
.advisor-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.advisor-nav-btn:disabled:hover { color: var(--mist-dim); }
.advisor-skip-btn { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .advisor-q { transition: none; }
  .advisor-dot { transition: none; }
  .advisor-warn { transition: none; }
}

.advisor-result {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.28, 0.11, 0.32, 1), opacity 0.4s ease, margin-top 0.5s ease;
}
.advisor-result.visible {
  max-height: 340px;
  opacity: 1;
  margin-top: 6px;
}
.advisor-result-inner {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.advisor-result-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin-bottom: 8px;
}
.advisor-result-tier {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink);
  margin-bottom: 8px;
  transition: transform 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.advisor-result-tier.pop { animation: advisorPop 0.4s cubic-bezier(0.28, 0.11, 0.32, 1); }
@keyframes advisorPop { 0% { transform: scale(0.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.advisor-result-why {
  font-size: 0.82rem;
  color: var(--mist);
  margin-bottom: 8px;
  max-width: 480px;
}
/* Says how many answers the recommendation rests on — three answers and five
   answers both produce a tier, and the client deserves to know which they
   got. */
.advisor-result-basis {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--mist-dim);
  margin-bottom: 18px;
}
.advisor-apply-btn { width: auto; min-width: 220px; justify-content: center; margin-bottom: 10px; }
.advisor-restart-btn {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--mist-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}
.advisor-restart-btn:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .advisor-result { transition: none; }
  .advisor-result-tier.pop { animation: none; }
}

/* --------------------------------------------------------------------
   Aisle group headers (groups of categories within the builder)
   -------------------------------------------------------------------- */
.pricing-aisle-head {
  padding-top: 28px;
  margin-bottom: 8px;
  border-top: 1px solid var(--line);
}
.pricing-aisle-head:first-child { border-top: none; padding-top: 0; }
.pricing-aisle-head h2 { font-size: 1.5rem; }

/* --------------------------------------------------------------------
   Itemized categories
   -------------------------------------------------------------------- */
.price-category { margin-bottom: 56px; }
.price-category[hidden] { display: none; }
.price-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.price-category-head h3 { font-size: 1.3rem; }
.price-category-head .cat-icon-title { display: flex; align-items: center; gap: 12px; }
.price-category-head .cat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--gradient-icon), var(--surface-2);
  border: 1px solid var(--icon-tile-border);
  color: var(--mist);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition), color var(--transition);
}
.price-category-head .cat-icon svg { width: 20px; height: 20px; }
.cat-selectall-btn {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 7px 14px;
  border-radius: 999px;
  transition: all var(--transition);
  white-space: nowrap;
}
.cat-selectall-btn:hover { border-color: var(--iris-violet); color: var(--ink); }
.cat-selectall-btn.active { border-color: var(--accent); color: var(--accent); }
.price-category-note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--mist-dim);
  margin: -4px 0 14px;
}

/* A grid, not a list. Forty-nine stacked rows meant scrolling to the bottom
   of the page to know what was on offer; three columns turns the same
   catalogue into something you can take in at a glance. */
.price-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}
.price-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 4px 14px;
  padding: 20px 22px 18px;
  cursor: pointer;

  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  box-shadow: none;

  transition: border-color var(--transition), transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow var(--transition), background var(--transition);
}
.price-item:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hover);
  box-shadow: none;
}
.price-item.checked {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-tint-strong), var(--accent-tint)), var(--glass-bg);
  box-shadow: none;
}

.price-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 22px; height: 22px;
  margin: 0;
  cursor: pointer;
}
.price-item .box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.price-item .box svg {
  width: 13px; height: 13px;
  stroke: var(--void);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.price-item input[type="checkbox"]:checked ~ .box {
  background: var(--accent-fill);
  border-color: var(--accent);
}
.price-item input[type="checkbox"]:checked ~ .box svg { opacity: 1; transform: scale(1); }
.price-item input[type="checkbox"]:focus-visible ~ .box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Card anatomy: name and blurb fill the left, the tick sits top-right out
   of the reading path, and the price owns its own row at the bottom. */
.price-item .box { grid-column: 2; grid-row: 1; align-self: start; }
.price-item .item-text {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.price-item .item-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.price-item .item-desc { font-size: 0.82rem; color: var(--mist-dim); line-height: 1.5; }

/* The number is the thing people came for — larger, and the only accent
   colour on the card, so the eye lands on it before anything else. */
.price-item .item-price {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  white-space: nowrap;
  transition: color var(--transition), text-shadow var(--transition);
}
.price-item.checked .item-price {
  color: var(--accent);
  text-shadow: none;
}

.category-total-note {
  text-align: right;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--mist-dim);
}
.category-total-note b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------
   Sticky cart panel
   -------------------------------------------------------------------- */
/* The cart is a slide-over. As a sticky column it ate a third of the width
   on every screen whether or not anything was in it; as a panel it costs
   nothing until asked for, and the catalogue gets the whole page. */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9200;
  width: min(430px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--glass-bg-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-left: 1px solid var(--glass-border);
  border-radius: 0;
  box-shadow: none;
  padding: 30px 28px 40px;

  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0.42s;
}
.cart-panel.open { transform: none; visibility: visible; }

@media (max-width: 560px) {
  .cart-panel {
    width: 100%;
    top: auto; bottom: 0;
    height: min(86vh, 720px);
    border-left: 0;
    border-top: 1px solid var(--glass-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
}

.cart-close {
  position: absolute;
  top: 18px; right: 20px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-canvas);
  color: var(--mist);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.cart-close:hover { color: var(--ink); border-color: var(--accent); }

.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.cart-scrim[hidden] { display: none; }
.cart-scrim.open { opacity: 1; }

body.cart-open { overflow: hidden; }
.cart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cart-header h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  transition: transform 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.cart-count.bump { animation: cartBump 0.35s cubic-bezier(0.28, 0.11, 0.32, 1); }
@keyframes cartBump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }

.cart-tier-flag {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--accent-fill);
  padding: 6px 0;
  border-radius: 999px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.cart-empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--mist-dim);
  font-size: 0.9rem;
}
.cart-empty svg { width: 32px; height: 32px; margin: 0 auto 12px; color: var(--mist-dim); }

.cart-items { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; margin-bottom: 18px; }
.cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  animation: cartItemIn 0.35s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.cart-item-row:last-child { border-bottom: none; }
@keyframes cartItemIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.cart-item-row .ci-name { flex: 1; font-size: 0.86rem; color: var(--ink); }
.cart-item-row .ci-price { font-family: var(--font-mono); font-size: 0.82rem; color: var(--mist); }
.cart-item-row .ci-remove {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mist-dim);
  transition: all var(--transition);
  flex-shrink: 0;
}
.cart-item-row .ci-remove:hover { background: var(--accent-tint-strong); color: var(--accent); }
.cart-item-row .ci-remove svg { width: 12px; height: 12px; }

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1.5px solid var(--line-strong);
  margin-bottom: 20px;
}
.cart-total-row .ct-label { font-family: var(--font-mono); font-size: 0.82rem; color: var(--mist); text-transform: uppercase; letter-spacing: 0.04em; }
.cart-total-row .ct-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--ink);
  transition: transform 0.2s ease;
}
.cart-total-row .ct-value.pulse { animation: totalPulse 0.4s ease; }
@keyframes totalPulse { 0% { transform: scale(1); } 45% { transform: scale(1.08); color: var(--accent); } 100% { transform: scale(1); } }

.cart-actions { display: flex; flex-direction: column; gap: 10px; }
.cart-actions .btn { width: 100%; justify-content: center; }
.cart-actions .btn-ghost-sm {
  background: transparent;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 8px;
  text-align: center;
  transition: color var(--transition);
}
.cart-actions .btn-ghost-sm:hover { color: var(--accent); }

/* --------------------------------------------------------------------
   Receipt
   -------------------------------------------------------------------- */
.receipt {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  display: none;
}
.receipt.visible { display: block; animation: receiptIn 0.4s cubic-bezier(0.28, 0.11, 0.32, 1); }
@keyframes receiptIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.receipt-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.receipt-meta { font-size: 0.72rem; color: var(--mist-dim); margin-bottom: 14px; }
.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--mist);
  padding: 5px 0;
  border-bottom: 1px dotted var(--line);
}
.receipt-row:last-of-type { border-bottom: none; }
.receipt-row .r-name { flex: 1; }
.receipt-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.receipt-copy-btn {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
  font-size: 0.8rem;
  padding: 10px 16px;
}
.receipt-pdf-btn {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  font-size: 0.8rem;
  padding: 10px 16px;
}
.receipt-pdf-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.receipt-send-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.receipt-send-row .btn-ghost-sm {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.74rem;
  padding: 8px 10px;
}
.receipt-send-row svg { flex-shrink: 0; }

/* --------------------------------------------------------------------
   Mobile cart sheet
   --------------------------------------------------------------------
   NOTE — this block used to describe a completely different cart: a bar
   that peeked 84px above the bottom edge and slid up when you tapped it
   (`.cart-panel.expanded`). That design was replaced by the slide-over
   above, which is driven by `.open` from js/pages/pricing.js, but the old rules
   were left behind.

   They did not just sit there harmlessly. The stale block set
   `z-index: 50` on the panel, and because it appears later in the file it
   beat the base rule's `z-index: 9200` at every width under 1000px. The
   scrim sits at 9100 — so on phones and tablets the cart opened
   *underneath* its own backdrop, and the blurred 62%-black overlay
   painted straight over it. That is the "cart is all blurry and nothing
   is visible" bug: the panel was there and correct the whole time, buried
   one layer too low.

   Everything that belonged to the old interaction (`translateY(calc(100%
   - 84px))`, `.expanded`, `max-height: 66vh`, the clickable header) is
   gone. Only the drag handle survives, because the new bottom sheet wants
   one too.
   -------------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* Restated, not inherited: this is the width range the stale rule used
     to break, so the correct stacking is pinned here explicitly. */
  .cart-panel { z-index: 9200; }
}

/* The handle is an affordance for a sheet you drag up from the bottom edge,
   so it only appears at the widths where the cart actually is one. Above
   640px it is a slide-over from the right and a grab handle floating at its
   top centre is just a stray pill. */
.cart-drag-handle { display: none; }
@media (max-width: 640px) {
  .cart-drag-handle {
    display: block;
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    margin: 0 auto 16px;
  }
}

/* --------------------------------------------------------------------
   Reveal stagger for price rows / combo cards
   -------------------------------------------------------------------- */
.combo-grid .reveal:nth-child(1) { transition-delay: 0s; }
.combo-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.combo-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

.price-list .reveal { transition-duration: 0.5s; }
.price-list .reveal:nth-child(1) { transition-delay: 0s; }
.price-list .reveal:nth-child(2) { transition-delay: 0.05s; }
.price-list .reveal:nth-child(3) { transition-delay: 0.1s; }
.price-list .reveal:nth-child(4) { transition-delay: 0.15s; }
.price-list .reveal:nth-child(5) { transition-delay: 0.2s; }
.price-list .reveal:nth-child(6) { transition-delay: 0.25s; }

/* ==========================================================================
   Unified premium glass finish — matches the nav "Get Started" button.
   ========================================================================== */
.price-list,
.cart-panel,
.tier-select-bar {
  border-top-color: var(--glass-border-top);
  border-left-color: var(--glass-border-left);
}

/* ==========================================================================
   Compare tiers — side-by-side table, columns sync with the tier selector
   above (clicking a column header switches the active tier site-wide).
   ========================================================================== */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-left-color: var(--glass-border-left);
  box-shadow: none;
}
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.compare-table thead th {
  padding: 26px 16px 16px;
  text-align: center;
  vertical-align: bottom;
  border-bottom: 1px solid var(--glass-border);
}
.compare-row-label { width: 26%; }
.compare-col { position: relative; width: 24.6%; }
.compare-col-featured { background: var(--accent-tint); }
.compare-recommended-tag {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-iris);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.compare-col-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.compare-col-btn:hover { background: var(--surface-hover); }
.compare-col-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compare-col-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.compare-col-mult { font-family: var(--font-mono); font-size: 0.76rem; color: var(--mist); transition: color var(--transition); }
.compare-col.compare-active .compare-col-btn { border-color: var(--accent); background: var(--accent-tint); }
.compare-col.compare-active .compare-col-mult { color: var(--accent); }
.compare-table tbody th {
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 16px 18px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.compare-table tbody td {
  text-align: center;
  padding: 16px 12px;
  font-size: 0.86rem;
  color: var(--mist);
  border-bottom: 1px solid var(--line);
  transition: background var(--transition), color var(--transition);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td.compare-active { background: var(--accent-tint); color: var(--ink); }
.compare-table .cell-yes { color: var(--accent); }
.compare-table .cell-yes svg { width: 17px; height: 17px; margin: 0 auto; }
.compare-table .cell-no { color: var(--mist-dim); }
.compare-scroll-hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--mist-dim);
  text-align: right;
  margin-top: 10px;
}
@media (max-width: 760px) { .compare-scroll-hint { display: block; } }

/* Brief highlight pulse on item & table prices whenever the tier changes,
   so the recalculation reads as an event rather than a silent swap. */
.item-price.price-flash,
.compare-col-mult.price-flash { animation: priceFlash 0.6s ease; }
@keyframes priceFlash {
  0% { color: var(--accent); }
  100% { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .item-price.price-flash,
  .compare-col-mult.price-flash { animation: none; }
}

/* ==========================================================================
   FAQ accordion — single-open, animated with the CSS grid-rows technique
   (0fr -> 1fr) so height animates smoothly with no JS measurement.
   ========================================================================== */
.faq-section .section-head.center p.lead { margin: 0 auto; }

/* The section eyebrow becomes a proper badge pill here rather than the
   plain uppercase caption used elsewhere — sentence case, bordered,
   accent-tinted, closer to a label than a chapter marker. */
.faq-section .section-head .eyebrow {
  text-transform: none;
  letter-spacing: normal;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.8rem;
}

.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-left-color: var(--glass-border-left);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.open { border-color: var(--glass-border-hover); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--transition);
}
.faq-question:hover { color: var(--accent); }
.faq-question:hover .faq-icon { border-color: var(--accent); color: var(--accent); }
.faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--glass-border);
  color: var(--accent);
  transition: transform 0.35s cubic-bezier(0.28, 0.11, 0.32, 1), background var(--transition), border-color var(--transition), color var(--transition);
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-icon { transform: rotate(135deg); background: var(--accent-fill); color: #fff; border-color: transparent; }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { padding: 0 24px 22px; color: var(--mist); font-size: 0.92rem; line-height: 1.6; max-width: 62ch; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-contact-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-icon { transition: none; }
}
@media (max-width: 640px) {
  .faq-question { padding: 16px 18px; font-size: 0.94rem; }
  .faq-answer-inner p { padding: 0 18px 18px; }
}


/* ======================================================================
   Category filter + cart dock
   Added with the grid redesign of the builder.
   ====================================================================== */

/* ---- Category tabs --------------------------------------------------
   A tab bar, not a row of buttons. Pills around every name turned ten
   category titles into ten competing objects and made the bar the loudest
   thing on a page whose job is to show prices. Set as plain type on a
   hairline, the names read as navigation and the cards get the attention.

   The underline is the same gesture as the header nav, so the site has one
   way of saying "this is where you are" rather than two.
   -------------------------------------------------------------------- */
.cat-filter-wrap {
  position: sticky;
  top: 72px;
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 44px;
  padding: 0;

  background: var(--chrome-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}

.cat-filter {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(18px, 2.2vw, 34px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline: 24px;
}
.cat-filter::-webkit-scrollbar { display: none; }

/* Fade only on the side that still has names to show, so the mask doubles
   as a hint about which arrow is worth pressing. */
.cat-filter-wrap.can-prev.can-next .cat-filter {
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.cat-filter-wrap.can-prev:not(.can-next) .cat-filter {
  mask-image: linear-gradient(90deg, transparent 0, #000 34px);
}
.cat-filter-wrap.can-next:not(.can-prev) .cat-filter {
  mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
}

.cat-chip {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 18px 0 17px;
  border: 0;
  background: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;

  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--mist);
  transition: color 0.28s ease;
}

/* The same underline the header nav uses: grows from the centre on hover,
   and simply stays put once a category is the active one. */
.cat-chip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.cat-chip:hover { color: var(--ink); }
.cat-chip:hover::after { transform: scaleX(1); }
.cat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cat-chip.is-active {
  color: var(--ink);
  font-weight: 600;
}
.cat-chip.is-active::after {
  transform: scaleX(1);
  background: var(--accent-fill);
}

/* The count is a footnote, not a badge. Tabular figures so the numbers do
   not shuffle the names sideways as the row is scrolled. */
.cat-chip-n {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--mist-dim);
  transition: color 0.28s ease;
}
.cat-chip:hover .cat-chip-n { color: var(--mist); }
.cat-chip.is-active .cat-chip-n { color: var(--accent); }

/* ---- Rail arrows ----------------------------------------------------
   Quiet until needed. No fill, no border — just a mark that brightens.
   -------------------------------------------------------------------- */
.cat-nav {
  flex-shrink: 0;
  width: 34px;
  align-self: center;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;

  color: var(--mist-dim);
  transition: color 0.25s ease, opacity 0.25s ease;
}
.cat-nav svg { width: 18px; height: 18px; }
.cat-nav:hover { color: var(--ink); }
.cat-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-nav[hidden] { display: none; }
.cat-nav:disabled { opacity: 0.22; pointer-events: none; }

/* When a single category is showing, its own heading is redundant — the
   chip above already says where you are. */
.pricing-builder.is-filtered .pricing-aisle-head,
.pricing-builder.is-filtered .price-category-head,
.pricing-builder.is-filtered .price-category-note { display: none; }
.pricing-builder.is-filtered .price-category { margin-bottom: 0; }

/* ---- Cart dock ------------------------------------------------------
   The one piece of the cart that stays on screen. It only appears once
   something has been selected, so an empty build costs no attention. */
/* Top-right, tucked just under the sticky header. --hdr-h is measured by
   js/layout/mobile.js on every page; the fallback covers the moment before it runs.
   Moving it out of the bottom-right corner also clears the site-tour launcher
   and the back-to-top button, which both live down there. */
.cart-dock {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  top: calc(var(--hdr-h, 92px) + 14px);
  bottom: auto;
  z-index: 9000;

  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 16px;
  border-radius: 999px;
  cursor: pointer;

  background: var(--glass-bg-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  box-shadow: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px) scale(0.96);
  transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0.34s;
}

.cart-dock.visible { opacity: 1; visibility: visible; transform: none; }
.cart-dock:hover { transform: translateY(2px); }

.cart-dock-icon { position: relative; display: grid; place-items: center; color: var(--accent); }
.cart-dock-icon svg { width: 22px; height: 22px; }

.cart-dock-badge {
  position: absolute;
  top: -7px; right: -9px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent-fill);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
}

.cart-dock-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.cart-dock-label { font-size: 0.72rem; color: var(--mist-dim); }
.cart-dock-total {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

.cart-dock-cta {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
}

/* A quick pulse when the total changes, so the dock confirms the tick you
   just made without you having to open it. */
.cart-dock.bump { animation: cartDockBump 0.42s cubic-bezier(0.22,1,0.36,1); }
@keyframes cartDockBump {
  0% { transform: none; }
  40% { transform: translateY(-4px) scale(1.04); }
  100% { transform: none; }
}

@media (max-width: 560px) {
  .cart-dock { left: 16px; right: 16px; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-dock, .cart-panel, .cart-scrim, .price-item { transition: none; animation: none; }
}


/* ======================================================================
   Estimate caveat
   Prices on this page are planning figures, not a quote. Saying so where
   people actually look — under the heading, and again inside the cart at
   the moment they are about to act on a number — is the honest thing and
   heads off the awkward conversation later.
   ====================================================================== */
.price-estimate-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 74ch;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface-canvas);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--mist);
}
.price-estimate-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.price-estimate-note strong { color: var(--ink); font-weight: 600; }

.cart-estimate-note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--mist-dim);
}

/* --------------------------------------------------------------------------
   Indicative-estimate disclaimer (pricing.html)

   Placed between the total and the export buttons. Small, but not fine
   print: a disclaimer that has to be hunted for is not a disclaimer.
   -------------------------------------------------------------------------- */

.receipt-disclaimer {
  margin: 14px 0 16px;
  padding: 12px 14px;
  background: var(--fill-subtle);
  border-left: 3px solid var(--accent-fill);
  border-radius: 6px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--mist);
  text-align: left;
}

.receipt-disclaimer strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-weight: var(--font-weight-semibold);
}

.receipt-disclaimer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}