/* ==========================================================================
   Awditify for Firms — pricing and seat calculator (/accountants/pricing).

   Self-contained on purpose. It shares the site palette and rhythm with
   municipal.css but does not depend on it: loading a file named "municipal"
   on the firm page would mislead whoever maintains this next. The primitives
   below (fp-title, fp-cta, fp-reveal) mirror the mg-* equivalents.

   Locked decisions:
     Accent      one — anchor navy #003366 / #0055A4. Emerald only as the
                 "included" affordance. Amber only on the promo tag, which is
                 a time-boxed commercial flag, not a second brand accent.
     Radius      cards 16px · controls 12px · pills 9999px.
     Motion      scroll reveal + hover lift + a 220ms figure tween. No loops.
   ========================================================================== */

/* ---------- Motion ---------- */
@keyframes fp-fade-up { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
.fp-fade   { animation: fp-fade-up .7s ease-out both; }
.fp-fade-1 { animation: fp-fade-up .7s ease-out .12s both; }

.fp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.fp-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fp-reveal { opacity: 1 !important; transform: none !important; }
  .fp-fade, .fp-fade-1 { animation: none !important; }
}

/* ---------- Shell ---------- */
.fp-sec { padding: 4.5rem 0; }
@media (min-width: 1024px) { .fp-sec { padding: 6rem 0; } }

.fp-hero { background: #F6F9FD; position: relative; overflow: hidden; border-bottom: 1px solid #E4EAF3; }
.fp-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(#C9D8EC 1px, transparent 1px);
  background-size: 30px 30px; opacity: .5; pointer-events: none;
}
.fp-hero > * { position: relative; z-index: 1; }

.fp-dark { background: linear-gradient(160deg, #0a1628 0%, #003366 100%); position: relative; overflow: hidden; }
.fp-dark::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none;
}
.fp-dark > * { position: relative; z-index: 1; }

/* ---------- Type ---------- */
.fp-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #003366; background: #E8F4FD; border: 1px solid #B8D9F2;
  border-radius: 9999px; padding: 5px 14px;
}
.fp-badge--light { color: #BBD9F5; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

.fp-title { font-weight: 800; font-size: clamp(2.25rem, 4.6vw, 3.6rem); line-height: 1.07; letter-spacing: -.03em; color: #0a1628; }
.fp-h2    { font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.14; letter-spacing: -.025em; color: #0a1628; }
.fp-h3    { font-weight: 700; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.25; letter-spacing: -.018em; color: #0a1628; }
.fp-title.text-white, .fp-h2.text-white, .fp-h3.text-white { color: #fff; }
.fp-dark .fp-title, .fp-dark .fp-h2, .fp-dark .fp-h3 { color: #fff; }

.fp-hl { background: linear-gradient(120deg, #0055A4, #003366); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fp-lede { color: #46586c; line-height: 1.7; font-size: 1.0625rem; max-width: 62ch; }
.fp-note { font-size: .8rem; color: #7c8b9b; }

/* ---------- Buttons ---------- */
.fp-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; background: #003366; color: #fff;
  font-size: .98rem; font-weight: 700; border-radius: 12px; text-decoration: none;
  transition: all .2s ease; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,51,102,.25), 0 10px 24px rgba(0,51,102,.22);
}
.fp-cta::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.fp-cta:hover { background: #0055A4; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,51,102,.32); color: #fff; }
.fp-cta:hover::after { left: 140%; }

.fp-cta-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; background: #fff; color: #003366;
  font-size: .98rem; font-weight: 700; border-radius: 12px; border: 1.5px solid #C5D4E8;
  text-decoration: none; transition: all .2s ease;
}
.fp-cta-ghost:hover { border-color: #003366; background: #E8F4FD; color: #003366; transform: translateY(-2px); }
.fp-cta-light { background: #fff; color: #003366; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.fp-cta-light:hover { background: #E8F4FD; color: #003366; }
.fp-cta-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.32); }
.fp-cta-outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.fp-textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 700; color: #0055A4; text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.fp-textlink:hover { gap: 11px; color: #003366; }

/* ---------- The plan card ---------- */
.fp-plan {
  background: #fff; border: 1px solid #003366; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px #003366, 0 22px 48px -22px rgba(0,51,102,.45);
}
.fp-plan__head {
  padding: 1.5rem; border-bottom: 1px solid #EDF2F8; background: #FBFDFF;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.fp-plan__body { padding: 1.5rem; }
@media (min-width: 640px) { .fp-plan__head, .fp-plan__body { padding: 1.75rem; } }

.fp-plan__fig {
  font-weight: 800; letter-spacing: -.035em; color: #0a1628;
  font-size: clamp(2.75rem, 6vw, 3.5rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.fp-plan__was { font-size: .9rem; color: #8397ab; text-decoration: line-through; font-variant-numeric: tabular-nums; }

/* Time-boxed commercial flag. Amber is used ONLY here. */
.fp-promo {
  font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #8a5a08; background: #FEF6E7; border: 1px solid #F5E2BC;
  border-radius: 9999px; padding: .25rem .7rem; white-space: nowrap;
}
.fp-chip {
  font-size: .72rem; font-weight: 600; color: #003366;
  background: #E8F4FD; border: 1px solid #CFE4F6; border-radius: 9999px; padding: .22rem .65rem;
}

.fp-plan__list { display: grid; gap: .6rem; }
.fp-plan__list li { display: flex; gap: .6rem; font-size: .9375rem; color: #46586c; line-height: 1.5; }
.fp-plan__list svg { width: 1rem; height: 1rem; flex: none; margin-top: .22rem; color: #059669; }

/* ---------- Billing toggle ---------- */
.fp-seg { display: inline-flex; padding: 4px; background: #EDF3FA; border: 1px solid #DCE6F2; border-radius: 9999px; }
.fp-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: .5rem 1.1rem; border-radius: 9999px;
  font-size: .8125rem; font-weight: 700; color: #46586c;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap;
}
.fp-seg button:hover { color: #003366; }
.fp-seg button[aria-pressed="true"] { background: #fff; color: #003366; box-shadow: 0 1px 2px rgba(10,22,40,.12); }
.fp-seg button:focus-visible { outline: 2px solid #0055A4; outline-offset: 2px; }

/* ---------- Seat calculator ---------- */
.fp-calc { background: #fff; border: 1px solid #E4EAF3; border-radius: 16px; overflow: hidden; }
.fp-calc__grid { display: grid; }
@media (min-width: 1024px) { .fp-calc__grid { grid-template-columns: 1fr 23rem; } }
.fp-calc__panel { padding: 1.5rem; }
@media (min-width: 1024px) { .fp-calc__panel { padding: 2rem; } }
.fp-calc__side { background: #F6F9FD; border-top: 1px solid #E4EAF3; padding: 1.5rem; }
@media (min-width: 1024px) { .fp-calc__side { border-top: 0; border-left: 1px solid #E4EAF3; padding: 2rem; } }

.fp-field + .fp-field { margin-top: 1.75rem; }
.fp-field__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem;
}
.fp-field__label span:first-child { font-weight: 700; font-size: .9375rem; color: #0a1628; }
.fp-field__val {
  font-weight: 800; font-size: 1.25rem; color: #003366; font-variant-numeric: tabular-nums;
}

/* Range input, styled consistently across engines. */
.fp-range { width: 100%; appearance: none; background: transparent; cursor: pointer; }
.fp-range:focus-visible { outline: 2px solid #0055A4; outline-offset: 4px; }
.fp-range::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: #DCE6F2; }
.fp-range::-moz-range-track { height: 6px; border-radius: 9999px; background: #DCE6F2; }
.fp-range::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 9999px;
  background: #003366; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,51,102,.4);
  transition: transform .15s ease;
}
.fp-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 9999px;
  background: #003366; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,51,102,.4);
}
.fp-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.fp-ticks { display: flex; justify-content: space-between; font-size: .7rem; color: #8397ab; margin-top: .5rem; }

/* Comparison bars */
.fp-bar { padding: .85rem 0; border-top: 1px solid #EDF2F8; }
.fp-bar:first-child { border-top: 0; }
.fp-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.fp-bar__name { font-size: .875rem; font-weight: 600; color: #0a1628; }
.fp-bar__sub { font-size: .72rem; color: #8397ab; font-weight: 400; }
.fp-bar__fig { font-size: .9375rem; font-weight: 700; color: #0a1628; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-bar__track { height: 10px; border-radius: 9999px; background: #EDF2F8; overflow: hidden; }
.fp-bar__fill { height: 100%; border-radius: 9999px; transition: width .35s cubic-bezier(.25,.8,.25,1); }
.fp-bar__fill--us { background: linear-gradient(90deg, #0055A4, #003366); }
.fp-bar__fill--them { background: #C5D4E8; }

.fp-sum__fig {
  font-weight: 800; letter-spacing: -.035em; color: #0a1628;
  font-size: clamp(2.5rem, 5vw, 3.25rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.fp-sum__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; padding: .5rem 0; border-bottom: 1px dashed #DCE6F2;
}
.fp-sum__line span:first-child { color: #5a6b7e; }
.fp-sum__line span:last-child { color: #0a1628; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-sum__line--total { border-bottom: 0; border-top: 1.5px solid #C5D4E8; margin-top: .25rem; padding-top: .75rem; font-size: .9375rem; }

.fp-verdict { border-radius: 12px; padding: .95rem 1.05rem; font-size: .8125rem; line-height: 1.6; }
.fp-verdict--win { background: #ECF7F1; border: 1px solid #CDECD8; color: #14532d; }
.fp-verdict--even { background: #E8F4FD; border: 1px solid #B8D9F2; color: #003366; }

/* ---------- Cards, tables, disclosures ---------- */
.fp-card {
  background: #fff; border: 1px solid #E4EAF3; border-radius: 16px; padding: 1.5rem;
  transition: transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.fp-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(10,22,40,.10); border-color: #B8D9F2; }

.fp-mod { display: flex; gap: .65rem; padding: .7rem 0; border-top: 1px solid #F2F6FA; }
.fp-mod:first-child { border-top: 0; }
.fp-mod svg { width: .95rem; height: .95rem; flex: none; margin-top: .28rem; color: #059669; }
.fp-mod__name { font-weight: 600; font-size: .875rem; color: #0a1628; }
.fp-mod__what { font-size: .8125rem; color: #6b7f95; line-height: 1.55; margin-top: .1rem; }

.fp-tablewrap { overflow-x: auto; border: 1px solid #E4EAF3; border-radius: 16px; background: #fff; -webkit-overflow-scrolling: touch; }
.fp-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 34rem; }
.fp-table th, .fp-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; }
.fp-table thead th {
  background: #F6F9FD; border-bottom: 1px solid #E4EAF3;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #003366;
}
.fp-table tbody tr + tr td { border-top: 1px solid #EDF2F8; }
.fp-table tbody tr:hover td { background: #FBFDFF; }
.fp-table td.fp-num, .fp-table th.fp-num { text-align: right; font-variant-numeric: tabular-nums; }
.fp-table .fp-rowlab { font-weight: 600; color: #0a1628; }
.fp-table .fp-rownote { display: block; font-size: .75rem; font-weight: 400; color: #8397ab; margin-top: .15rem; }

.fp-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.fp-faq.open .fp-faq-a { max-height: 720px; }
.fp-faq.open .fp-faq-ic { transform: rotate(45deg); }
.fp-faq-ic { transition: transform .25s ease; }

.fp-tween { transition: opacity .18s ease; }
.fp-tween.is-updating { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .fp-card, .fp-cta, .fp-bar__fill, .fp-tween, .fp-faq-ic, .fp-seg button { transition: none !important; }
  .fp-card:hover { transform: none; }
}

@media print {
  .fp-hero::before, .fp-dark::before { display: none; }
  .fp-tablewrap { overflow: visible; border: 0; }
  .fp-table { min-width: 0; font-size: .75rem; }
}