/* ===========================================================================
   Pricing calculator
   Loaded only on pages that declare it in front matter (see custom-head.html).

   The accent is a single custom property. Set --upc-accent to the site's
   primary (#425ad6) if you want the calculator to match the header buttons
   rather than carry its own magenta.
   ======================================================================== */
.upc {
  --upc-accent: #E6007E;
  --upc-accent-dark: #C4006C;
  --upc-accent-tint: #FFF7FB;
  --upc-accent-tint-strong: #FCE0EF;

  font-family: 'Inter', system-ui, sans-serif;
  color: #111827;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 48px 80px;
  box-sizing: border-box;
}

.upc * { box-sizing: border-box; }

.upc-hero { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.upc-kicker { color: var(--upc-accent); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.upc-hero h1 { font-size: 42px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.02em; }
.upc-hero p { font-size: 17px; line-height: 1.6; color: #6B7280; margin: 0; }

.upc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.upc-plan { position: relative; cursor: pointer; border: 2px solid #E5E7EB; background: #fff; border-radius: 14px; padding: 24px; transition: border-color .15s, box-shadow .15s, background .15s; }
.upc-plan:hover { border-color: var(--upc-accent); }
.upc-plan.sel { border-color: var(--upc-accent); background: var(--upc-accent-tint); box-shadow: 0 4px 20px rgba(230, 0, 126, .12); }
.upc-pop { position: absolute; top: -11px; right: 16px; background: var(--upc-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 99px; }
.upc-plan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.upc-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D1D5DB; display: flex; align-items: center; justify-content: center; }
.upc-plan.sel .upc-dot { border-color: var(--upc-accent); }
.upc-dot i { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.upc-plan.sel .upc-dot i { background: var(--upc-accent); }
.upc-plan-name { font-size: 19px; font-weight: 700; }
.upc-plan-desc { font-size: 13.5px; line-height: 1.55; color: #6B7280; margin-bottom: 16px; min-height: 63px; }
.upc-fees { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; border-top: 1px solid #F3F4F6; padding-top: 14px; }
.upc-fees div { display: flex; justify-content: space-between; }
.upc-fees span:first-child { color: #6B7280; }
.upc-fees span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.upc-fees .upc-fees-note { font-size: 12px; color: #9CA3AF; margin-top: 2px; display: block; }

.upc-grid { display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; }
.upc-panel { border: 1px solid #E5E7EB; border-radius: 14px; padding: 28px; }
.upc-panel h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.upc-panel .upc-sub { font-size: 14px; color: #6B7280; margin: 0 0 24px; }
.upc-panel h2.upc-h2-spaced { margin-top: 32px; }
.upc-panel .upc-sub-tight { margin-bottom: 16px; }

.upc-rowwrap { overflow: hidden; max-height: 180px; opacity: 1; margin-bottom: 18px; transition: max-height .3s ease, margin-bottom .3s ease, opacity .18s ease .3s; }
.upc-rowwrap.hid { max-height: 0; opacity: 0; margin-bottom: 0; pointer-events: none; transition: opacity .18s ease, max-height .3s ease .18s, margin-bottom .3s ease .18s; }
.upc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #F3F4F6; border-radius: 10px; background: #FAFAFA; }
.upc-row-main { flex: 1; }
.upc-row-label { font-size: 15px; font-weight: 600; }
.upc-row-sub { font-size: 13px; color: #6B7280; }
.upc-flag { font-size: 12px; font-weight: 600; color: #B45309; background: #FEF3C7; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.upc-limit { font-size: 12.5px; color: #9CA3AF; white-space: nowrap; }

.upc-step { display: flex; align-items: center; border: 1px solid #E5E7EB; border-radius: 8px; background: #fff; overflow: hidden; }
.upc-step button { width: 36px; height: 36px; border: none; background: #fff; cursor: pointer; font-size: 18px; color: #6B7280; font-family: inherit; }
.upc-step button:hover { background: var(--upc-accent-tint-strong); color: var(--upc-accent); }
/* Wide enough for six digits: large portfolios run to tens of thousands of
   applications. The near-zero side padding matters as much as the width --
   the theme's base input padding (12px each side) was eating most of a
   border-box 52px, clipping even three digits. flex-shrink:0 stops the row
   layout squeezing it back down on narrower panels. */
.upc-step input { width: 76px; flex-shrink: 0; height: 36px; padding: 0 4px; border: none; border-left: 1px solid #F3F4F6; border-right: 1px solid #F3F4F6; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: inherit; }
.upc-step { flex-shrink: 0; }
.upc-step input.over { color: #B45309; }

.upc-addon { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #F3F4F6; border-radius: 10px; background: #FAFAFA; cursor: pointer; margin-bottom: 12px; }
.upc-addon:hover { border-color: var(--upc-accent); }
.upc-addon.on { border-color: var(--upc-accent); background: var(--upc-accent-tint); }
.upc-switch { width: 42px; height: 24px; border-radius: 99px; background: #D1D5DB; position: relative; transition: background .15s; flex-shrink: 0; }
.upc-addon.on .upc-switch { background: var(--upc-accent); }
.upc-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s; }
.upc-addon.on .upc-switch i { left: 21px; }
.upc-noaddon { padding: 14px 16px; border: 1px dashed #E5E7EB; border-radius: 10px; font-size: 14px; color: #9CA3AF; }

.upc-summary { position: sticky; top: 96px; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(17, 24, 39, .06); background: #fff; }
.upc-summary-head { background: var(--upc-accent); color: #fff; padding: 18px 24px; }
.upc-summary-head small { display: block; font-size: 13px; font-weight: 600; opacity: .85; }
.upc-summary-head strong { font-size: 22px; font-weight: 700; }
.upc-summary-body { padding: 22px 24px; }
.upc-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 10px; }
.upc-line em { font-style: normal; color: #9CA3AF; }
.upc-line b { font-variant-numeric: tabular-nums; }
.upc-hr { border-top: 1px solid #F3F4F6; margin: 18px 0 14px; }
.upc-total { display: flex; justify-content: space-between; align-items: baseline; }
.upc-total strong { font-size: 15px; }
.upc-total .upc-amount { font-size: 28px; font-weight: 800; color: var(--upc-accent); font-variant-numeric: tabular-nums; }

.upc-onetime { margin-top: 14px; padding: 12px 14px; background: #FAFAFA; border-radius: 10px; font-size: 13.5px; }
.upc-onetime-row { display: flex; justify-content: space-between; }
.upc-onetime-row span { color: #6B7280; }
.upc-onetime-row b { font-variant-numeric: tabular-nums; }
.upc-onetime .upc-ot-total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; border-top: 1px solid #E5E7EB; margin-top: 8px; padding-top: 8px; }

.upc-warn { font-size: 13px; line-height: 1.5; color: #92400E; background: #FEF3C7; border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.upc-incl { font-size: 12.5px; color: #9CA3AF; margin-bottom: 16px; }
.upc-feat { display: flex; gap: 8px; font-size: 13.5px; color: #374151; margin-bottom: 7px; }
.upc-feat b { color: var(--upc-accent); }

.upc-cta { display: block; text-align: center; background: var(--upc-accent); color: #fff !important; padding: 13px 0; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; margin-top: 20px; }
.upc-cta:hover { background: var(--upc-accent-dark); }

.upc button:focus-visible,
.upc [role="button"]:focus-visible,
.upc input:focus-visible,
.upc a:focus-visible { outline: 2px solid var(--upc-accent); outline-offset: 2px; }

/* Screen-reader-only live region for the running total. */
.upc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Graceful no-JS fallback: the calculator is interactive by nature, so show a
   short note and let the plan cards stand on their own. */
.upc-nojs { padding: 16px 18px; border: 1px solid #FDE68A; background: #FEF3C7; color: #92400E; border-radius: 10px; font-size: 14px; margin-bottom: 24px; }

@media (max-width: 1024px) {
  .upc-grid { grid-template-columns: 1fr; }
  .upc-summary { position: static; }
}

@media (max-width: 760px) {
  .upc { padding: 32px 20px 56px; }
  .upc-plans { grid-template-columns: 1fr; }
  .upc-hero h1 { font-size: 32px; }
  .upc-row { flex-wrap: wrap; }
  .upc-limit { order: 5; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .upc-rowwrap,
  .upc-plan,
  .upc-switch,
  .upc-switch i { transition: none; }
}

/* ---------------------------------------------------------------------------
   Role tooltips
   The bubble is a single shared element fixed-positioned on <body>, because
   .upc-rowwrap must keep overflow:hidden for its collapse animation.
--------------------------------------------------------------------------- */
.upc-row-label { display: inline-flex; align-items: center; gap: 6px; }

.upc .upc-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #9CA3AF;
  cursor: help;
  border-radius: 50%;
  transition: color .15s;
  flex-shrink: 0;
}

.upc .upc-tip:hover,
.upc .upc-tip:focus-visible { color: var(--upc-accent); }

.upc .upc-tip svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.upc-bubble {
  position: fixed;
  z-index: 60;
  max-width: 270px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #111827;
  color: #F9FAFB;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .18);
  pointer-events: none;
}

/* Arrow, horizontally aligned to the icon via --arrow-x. */
.upc-bubble::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  margin-left: -5px;
  border: 5px solid transparent;
  top: 100%;
  border-top-color: #111827;
}

.upc-bubble.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #111827;
}

@media (prefers-reduced-motion: reduce) {
  .upc-tip { transition: none; }
}

/* --- Plan card inclusions -------------------------------------------------
   Added so the tiers can be compared on the cards themselves rather than by
   selecting each one and reading the summary. */
.upc-plan-incl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; border-top: 1px solid #F3F4F6; padding-top: 14px; margin-top: 14px; }
.upc-incl-row { display: flex; align-items: center; gap: 8px; color: #374151; }
.upc-incl-row b { color: var(--upc-accent); font-weight: 700; flex-shrink: 0; }
/* Excluded items recede but stay legible, so the gap between tiers is explicit. */
.upc-incl-row.is-out { color: #9CA3AF; }
.upc-incl-row.is-out b { color: #D1D5DB; }

/* --- Deployment segmented control ---------------------------------------- */
.upc-seg { display: inline-flex; border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
.upc-seg-btn {
  padding: 10px 24px; border: 0; cursor: pointer;
  font-size: 14.5px; font-family: inherit; font-weight: 500;
  background: #fff; color: #6B7280;
  transition: background .15s, color .15s;
}
.upc-seg-btn:hover { color: var(--upc-accent); }
.upc-seg-btn.is-on { background: var(--upc-accent-tint); color: var(--upc-accent); font-weight: 700; }

/* --- Sales note (replaces the one-time fee block) ------------------------- */
.upc-salesnote { margin-top: 14px; padding: 12px 14px; background: #FAFAFA; border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: #374151; }
.upc-salesnote-title { font-weight: 700; margin-bottom: 4px; }
.upc-salesnote-body { margin: 0; }
.upc-salesnote-body a { color: var(--upc-accent); font-weight: 600; text-decoration: underline; }