/* ============================================================
   DepreciMax — "For Firms" preview section
   Scoped under .firms root class on <body>. Zero collision risk
   with the live site's styles. Design tokens repainted 2026-09-29
   to match deprecimax.com live palette + system font stack.
   ============================================================ */

.firms {
  /* ---- design tokens (live-site palette) ---- */
  --nav: #1a1a2e;
  --nav-2: #232339;
  --calc-card: #232339;
  --line-dark-1: #2a2a4a;
  --line-dark-2: #303054;

  --txt-dark: #E8EDF4;
  --txt-dark-mute-1: #A9B7CA;
  --txt-dark-mute-2: #93A1B5;
  --txt-dark-mute-3: #7F95B5;

  --page: #f5f5f5;
  --surface: #FFFFFF;
  --border-1: #E2E7EE;
  --border-2: #E4E9EF;

  --ink: #1a1a2e;
  --ink-2: #1B2837;
  --body: #4A5A6B;
  --mute-1: #5A6677;
  --mute-2: #6B7A8C;
  --mute-3: #8595A6;

  --green: #1f9d57;
  --green-hover: #188a4e;
  --green-ink-light: #1f9d57;
  --green-on-dark-1: #1eb866;
  --green-on-dark-2: #6fe39a;
  --mint: #e3f5ea;
  --mint-border: #BFE3CB;
  --green-chip: #e3f5ea;
  --green-chip-ink: #1f9d57;

  /* Filled CTA button green — muted sage, mirrors live site's
     .chrome-cta-primary on 01-landing.html. Secondary accents
     (eyebrows, chips, text links) stay on --green above. */
  --green-cta: #4a8e5c;
  --green-cta-hover: #3f7d50;

  --blue: #4fc3f7;
  --blue-link: #0288d1;
  --pill-blue-bg: #EAF1FD;
  --pill-blue-border: #C9D9F5;
  --pill-blue-ink: #2F5FD0;
  --subnav-active: #4fc3f7;

  --gold-dark: #C09A4C;
  --gold-light: #9A6E10;

  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: 110px; /* room for mobile demo bar */
}

@media (min-width: 820px) {
  .firms { padding-bottom: 0; }
}

.firms *, .firms *::before, .firms *::after { box-sizing: border-box; }

/* FIX: global link color was leaking into every button/nav/pill styled as <a>.
   Scope the blue-link color to body-copy contexts only. Any button-style or
   nav-style link below gives itself an explicit color. */
.firms .prose a,
.firms-live-section__disclaimer a,
.firms-cc__disclaimer a,
.firms-quiet-band a { color: var(--blue-link); }
.firms .prose a:hover,
.firms-live-section__disclaimer a:hover,
.firms-cc__disclaimer a:hover,
.firms-quiet-band a:hover { color: var(--ink); }

.firms img { max-width: 100%; display: block; }

/* ---- layout ---- */
.firms-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}

.firms-section {
  padding: clamp(56px, 6.5vw, 104px) 0;
}

.firms-section--tight { padding: clamp(32px, 4vw, 56px) 0; }

.firms-section--navy {
  background: var(--nav);
  color: var(--txt-dark);
}

.firms-section--navy h1, .firms-section--navy h2, .firms-section--navy h3,
.firms-section--navy strong { color: #FFFFFF; }

/* ---- typography ---- */
.firms h1, .firms h2, .firms h3, .firms h4 { margin: 0; }

.firms h1 {
  font-size: clamp(34px, 4.5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.firms h2 {
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.firms h3 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; letter-spacing: -0.02em; }

.firms p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.firms-section--navy p { color: var(--txt-dark-mute-1); }

.firms-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-on-dark-1);
}
.firms-eyebrow--ink { color: var(--mute-1); }
.firms-eyebrow--green-light { color: var(--green-chip-ink); }

.firms-pill-blue {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--pill-blue-bg);
  border: 1px solid var(--pill-blue-border);
  color: var(--pill-blue-ink);
  font: 700 11.5px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- buttons ---- */
.firms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 22px; border-radius: 12px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 0; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.firms-btn--green {
  background: var(--green-cta); color: #FFFFFF;
  box-shadow: 0 10px 24px -10px rgba(74,142,92,.75);
}
.firms-btn--green:hover { background: var(--green-cta-hover); color: #FFFFFF; }

.firms-btn--outline-ink {
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink);
}
.firms-btn--outline-ink:hover { background: var(--ink); color: #FFFFFF; }

.firms-btn--outline-light {
  background: var(--surface); color: var(--ink);
  border: 1px solid #C9D2DD; font-weight: 600;
}
.firms-btn--outline-light:hover { border-color: var(--green); color: var(--green-ink-light); }

.firms-btn--xl { height: 58px; padding: 0 30px; font-size: 18px; font-weight: 800; }
.firms-btn--lg { height: 56px; padding: 0 26px; font-size: 17px; font-weight: 800; }
.firms-btn--sm { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 10px; }

/* ---- global HEADER (preview-only) — mirrors live-site nav ---- */
.firms-header {
  background: var(--nav); color: #FFFFFF;
  height: 76px; padding: 0 clamp(20px, 5vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
}
.firms-header__wordmark {
  display: inline-flex; flex-direction: column; gap: 4px; line-height: 1;
  text-decoration: none;
}
.firms-header__wordmark strong {
  color: #e8eef4; font: 800 22px/1 system-ui, -apple-system, sans-serif; letter-spacing: -0.5px;
}
.firms-header__wordmark strong span { color: var(--blue); }
.firms-header__divider {
  height: 1px; margin-top: 4px;
  background: linear-gradient(90deg, rgba(79,195,247,.7), rgba(79,195,247,.05));
}
.firms-header__tag {
  margin-top: 4px;
  font: 700 9.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.2em; color: #6a829c;
  text-transform: uppercase;
}
.firms-header__nav {
  display: flex; align-items: center; gap: 22px;
  font-size: 14.5px; font-weight: 500; color: #ccc;
}
.firms-header__nav a { color: #ccc; text-decoration: none; }
.firms-header__nav a:hover { color: #FFFFFF; }

.firms-header__item--gold { color: #E3B341; font-weight: 600; }
.firms-header__item--gold:hover { color: #E3B341; }

/* Tool Center / Resources caret triggers — plain text w/ caret, no pill */
.firms-header__caret {
  background: transparent; border: 0; padding: 0;
  color: #ccc; font: 500 14.5px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.firms-header__caret:hover { color: #FFFFFF; }
.firms-header__dropdown.is-open .firms-header__caret { color: #FFFFFF; }

/* Log In link */
.firms-header__item--login {
  color: #ccc !important; font-weight: 500;
  padding: 0;
}
.firms-header__item--login:hover { color: #FFFFFF !important; }

.firms-header__dropdown { position: relative; }
.firms-header__item--firms {
  /* Mirrors live-site .mob-nav-cta treatment: subtle blue pill w/
     thin blue border and blue text (deprecimax.com/01-landing.html L713). */
  background: rgba(79, 195, 247, 0.14);
  border: 1px solid rgba(79, 195, 247, 0.35);
  padding: 7px 14px; border-radius: 10px; font-weight: 700;
  cursor: pointer; color: #4fc3f7; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.firms-header__item--firms:hover { background: rgba(79, 195, 247, 0.26); color: #FFFFFF; }

.firms-header__panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: #FFFFFF; width: 276px; border-radius: 14px; padding: 8px;
  box-shadow: 0 30px 60px -16px rgba(0,0,0,.5);
  display: none; flex-direction: column; gap: 2px;
  z-index: 70;
}
.firms-header__dropdown.is-open .firms-header__panel { display: flex; }

.firms-header__panel a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600;
}
.firms-header__panel a:hover { background: #F1F5F9; }
.firms-header__panel a span { font-size: 12px; font-weight: 500; color: var(--mute-1); }
.firms-header__panel hr { border: 0; border-top: 1px solid #EEF1F5; margin: 4px 0; }
.firms-header__panel .firms-btn { width: 100%; margin-top: 4px; }

.firms-header__item--search {
  color: #e8eef4 !important; font-weight: 500;
  padding: 8px 4px; white-space: nowrap;
}
.firms-header__item--search:hover { color: #FFFFFF !important; }

/* mobile hamburger */
.firms-header__burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #FFFFFF; cursor: pointer;
}
@media (max-width: 980px) {
  .firms-header { height: 64px; }
  .firms-header__nav { display: none; }
  .firms-header__nav.is-open {
    display: flex; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--nav); flex-direction: column; align-items: stretch;
    padding: 16px clamp(20px, 5vw, 80px); gap: 16px; z-index: 60;
    border-top: 1px solid var(--line-dark-1);
  }
  .firms-header__burger { display: inline-flex; }
}

/* ---- SUB-NAV ---- per FIX spec */
.firms-subnav {
  position: sticky; top: 0; z-index: 50;
  background: #111F33; border-bottom: 1px solid #22334C;
  height: 54px; padding: 0 clamp(20px, 5vw, 80px);
  display: flex; align-items: center; gap: 24px;
}
.firms-subnav__label {
  font: 700 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em; color: var(--green-on-dark-1);
  text-transform: uppercase;
}
.firms-subnav__items {
  display: flex; align-items: center; gap: 18px; flex: 1; overflow-x: auto; height: 100%;
  scrollbar-width: none;
}
.firms-subnav__items::-webkit-scrollbar { display: none; }
.firms-subnav__item {
  color: #A9B7CA; text-decoration: none;
  font: 500 14px/1 system-ui, -apple-system, sans-serif; white-space: nowrap;
  position: relative; height: 100%; display: inline-flex; align-items: center;
}
.firms-subnav__item:hover { color: #FFFFFF; }
.firms-subnav__item.is-active {
  color: #FFFFFF; font-weight: 600;
}
.firms-subnav__item.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: #6CC3FF;
}
/* Sub-nav Book demo button — same green as hero CTA, white text */
.firms-subnav__cta {
  margin-left: auto; height: 36px; padding: 0 16px;
  font-size: 14px; font-weight: 700;
  background: #23A04F; color: #FFFFFF;
}
.firms-subnav__cta:hover { background: #1C8A43; color: #FFFFFF; }

@media (max-width: 820px) {
  .firms-subnav { height: 48px; }
  .firms-subnav__label { font-size: 10px; }
  .firms-subnav__cta { display: none; }
}

/* ---- MOBILE DEMO BAR ---- */
.firms-mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-1);
  box-shadow: 0 -10px 30px -12px rgba(26,26,46,.35);
  padding: 12px 16px 14px;
  display: flex; gap: 10px;
}
.firms-mobile-bar .firms-btn { flex: 1; height: 50px; border-radius: 12px; }
@media (min-width: 820px) { .firms-mobile-bar { display: none; } }

/* ---- DEMO CLOSE ---- */
.firms-demo-close {
  background: var(--nav); color: var(--txt-dark);
  padding: clamp(56px, 6vw, 96px) clamp(20px, 5vw, 80px);
  text-align: center;
}
.firms-demo-close .firms-eyebrow { color: var(--green-on-dark-1); margin-bottom: 14px; }
.firms-demo-close h2 { color: #FFFFFF; font-size: clamp(28px, 3.5vw, 48px); font-weight: 800; margin-bottom: 14px; }
.firms-demo-close p { color: var(--txt-dark-mute-1); max-width: 620px; margin: 0 auto 24px; }
.firms-demo-close .firms-btn { margin-right: 10px; }
.firms-demo-close__link {
  color: var(--green-on-dark-2); font-weight: 700; text-decoration: none;
  display: inline-flex; margin-top: 14px;
}
.firms-demo-close__link:hover { color: #FFFFFF; }

/* ---- FOOTER (preview-only) — mirrors live-site footer ---- */
.firms-footer {
  background: #12122a; color: rgba(255,255,255,0.72);
  padding: 48px clamp(20px, 5vw, 80px) 32px;
  font-size: 0.84rem; line-height: 1.6;
}
.firms-footer__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.firms-footer__links {
  display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px;
}
.firms-footer__links a { color: rgba(255,255,255,0.85); text-decoration: none; }
.firms-footer__links a:hover { color: var(--blue); }
.firms-footer__links a.firms-footer__item--firms { font-weight: 600; }
.firms-footer__legal {
  font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px;
}

/* ---- quiet band (hub only) ---- */
.firms-quiet-band {
  background: var(--page); border-top: 1px solid var(--border-1);
  padding: 22px clamp(20px, 5vw, 80px); text-align: center;
  font-size: 15px; color: var(--mute-1);
}
.firms-quiet-band a {
  color: var(--ink); font-weight: 700; text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- HERO ---- */
.firms-hero {
  padding: clamp(40px, 5.5vw, 88px) 0 clamp(120px, 12vw, 180px);
  text-align: center;
}
.firms-hero__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.firms-hero h1 { color: #FFFFFF; }
.firms-hero h1 .highlight { color: var(--blue); }
.firms-hero__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px;
}
.firms-hero__picker {
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 14px; border-radius: 12px;
  box-shadow: inset 0 0 0 1px #2A3B55;
  background: transparent;
  color: #FFFFFF;
}
.firms-hero__picker span { font-size: 14px; color: var(--txt-dark-mute-1); white-space: nowrap; }
.firms-hero__picker select {
  height: 40px; border: 0; background: transparent; color: #FFFFFF;
  font: 700 15px system-ui, -apple-system, sans-serif; min-width: 0; padding-right: 10px;
}
.firms-hero__picker select option { color: var(--ink); background: #FFFFFF; }
.firms-hero__picker a { color: var(--blue); font-weight: 800; text-decoration: none; }

/* ---- KEY COMPARISON CARD (hub, pulled up over hero) ---- */
.firms-key-card {
  margin-top: clamp(-150px, -10vw, -96px);
  background: #FFFFFF; border-radius: 22px;
  padding: clamp(18px, 3vw, 44px);
  box-shadow: 0 40px 80px -40px rgba(26,26,46,.55);
  display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px);
}
.firms-key-card__head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; max-width: 900px; margin: 0 auto;
}
.firms-key-card__head h2 {
  font-size: clamp(24px, 3vw, 38px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15;
}
.firms-key-card__head h2 .spread { color: var(--green-ink-light); }
.firms-key-card__head h2 .max-brand { color: var(--blue); }
.firms-key-card__notes {
  display: flex; justify-content: space-between; gap: 24px;
}
.firms-key-card__note {
  max-width: 300px;
  border: 1px solid #C9D4E0;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: Georgia, serif; font-style: italic;
  font-size: 14px; line-height: 1.45; color: var(--body);
}
.firms-key-card__note--right { text-align: right; }
@media (max-width: 820px) { .firms-key-card__notes { display: none; } }

/* ---- UNLIMITED CALC band (hub) ---- */
.firms-calc-band {
  background: var(--nav); color: var(--txt-dark);
  border-radius: 22px; padding: clamp(22px, 4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 28px clamp(32px, 4.5vw, 72px); align-items: center;
}
.firms-calc-band__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.firms-calc-band__text h2 { color: #FFFFFF; }
.firms-calc-band__text p { color: var(--txt-dark-mute-1); }
.firms-calc-band__widget { flex: 1 1 440px; min-width: 0; }

/* ---- BY THE NUMBERS strip ---- */
.firms-proof-strip {
  background: var(--nav); color: var(--txt-dark);
  padding: 28px clamp(20px, 5vw, 80px); text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.firms-proof-strip__line { font-size: clamp(17px, 1.6vw, 22px); }
.firms-proof-strip__line strong { color: #FFFFFF; }

/* ---- comparison each firm runs: tiles ---- */
.firms-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}
.firms-tile {
  background: var(--surface); border: 1px solid var(--border-1);
  border-radius: 16px; padding: clamp(16px, 1.8vw, 26px);
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.firms-tile:hover { border-color: var(--green); background: var(--mint); }
.firms-tile strong { font-size: clamp(16px, 1.35vw, 20px); letter-spacing: -0.01em; }
.firms-tile__chips {
  display: flex; align-items: center; gap: 8px;
  font-size: clamp(12.5px, 1vw, 14px); font-weight: 600; color: var(--green-chip-ink);
}
.firms-tile__chips span.c { padding: 3px 8px; border-radius: 6px; background: var(--green-chip); }
.firms-tile p { font-size: clamp(13px, 1vw, 15px); color: var(--mute-1); }

/* ---- how offices use it ---- */
.firms-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.firms-use {
  background: #FFFFFF; border: 1px solid var(--border-1); border-radius: 16px;
  padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 12px;
}
.firms-use--active { background: var(--mint); border-color: var(--mint-border); }
.firms-use__badge {
  width: 32px; height: 32px; border-radius: 9px;
  background: #EEF1F5; color: var(--body);
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 15px system-ui, -apple-system, sans-serif;
}
.firms-use--active .firms-use__badge { background: var(--green); color: #FFFFFF; }
.firms-use strong { font-size: 20px; letter-spacing: -0.015em; }
.firms-use p { font-size: 15px; color: var(--body); }

/* on-dark variant: use-case cards sitting inside the navy hero band */
.firms-use--on-dark {
  background: var(--nav-2);
  border-color: var(--line-dark-1);
  transition: border-color .15s ease;
}
.firms-use--on-dark:hover { border-color: var(--green); }
.firms-use--on-dark strong { color: #FFFFFF; }
.firms-use--on-dark p { color: var(--txt-dark-mute-1); }
.firms-use--on-dark .firms-use__badge { background: var(--nav-2); color: var(--txt-dark-mute-1); box-shadow: inset 0 0 0 1px var(--line-dark-1); }
.firms-use--on-dark.firms-use--active { background: var(--nav-2); border-color: var(--line-dark-1); }
.firms-use--on-dark.firms-use--active .firms-use__badge { background: var(--green); color: #FFFFFF; box-shadow: none; }

/* hero-embedded wrapper: thin divider + spacing above the 3-card grid */
.firms-hero-uses {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line-dark-1);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}
.firms-hero-uses h2 { color: #FFFFFF; }
.firms-hero-uses > p { max-width: 720px; color: var(--txt-dark-mute-1); }
.firms-hero-uses .firms-uses { margin-top: clamp(16px, 1.6vw, 24px); }

/* ---- market tracking row ---- */
.firms-mt-row {
  display: flex; flex-wrap: wrap; gap: 32px 72px; align-items: center;
}
.firms-mt-row__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.firms-mt-row__widget { flex: 1 1 480px; min-width: 0; }

/* ---- UNLIMITED CALC component ---- */
.firms-calc {
  background: var(--calc-card); border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line-dark-2);
  padding: clamp(20px, 2.2vw, 32px); color: var(--txt-dark);
  display: flex; flex-direction: column; gap: 22px;
}
.firms-calc__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.firms-calc__eyebrow { font: 600 11px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; color: var(--txt-dark-mute-2); text-transform: uppercase; }
.firms-calc__eq { font: 500 11px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.12em; color: var(--subnav-active); font-variant-numeric: tabular-nums; }

.firms-calc__slider { display: flex; flex-direction: column; gap: 10px; }
.firms-calc__slider > div { display: flex; justify-content: space-between; font-size: 14px; color: #C4CEDC; }
.firms-calc__slider strong { color: #FFFFFF; font-size: 16px; }
.firms-calc__slider input[type=range] { width: 100%; accent-color: var(--subnav-active); margin: 0; }

.firms-calc__results {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line-dark-2); border-radius: 12px; overflow: hidden;
}
.firms-calc__cell { background: #0F1C30; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.firms-calc__cell span.label { font-size: 13px; color: var(--txt-dark-mute-2); }
.firms-calc__cell .amt { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.firms-calc__cell .amt.strike {
  color: #C4CEDC;
  text-decoration: line-through;
  text-decoration-color: #E06C6C;
  text-decoration-thickness: 2px;
}
.firms-calc__cell .amt.plan-amt { color: var(--green-on-dark-2); }
.firms-calc__cell .amt span { font-size: 15px; font-weight: 600; }

.firms-calc__footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.firms-calc__footer strong { color: #FFFFFF; }
.firms-calc__footer span { color: var(--txt-dark-mute-2); }

/* ---- CABIN COMPARE ---- */
.firms-cc { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }
.firms-cc__strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--border-2); border: 1px solid var(--border-2);
  border-radius: 12px; overflow: hidden;
}
.firms-cc__strip-cell { background: #FFFFFF; padding: clamp(10px, 1.4vw, 18px); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.firms-cc__strip-cell.is-winner { background: #F3F9FF; }
.firms-cc__strip-cell .short { font-size: clamp(11px, 0.95vw, 13px); font-weight: 700; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firms-cc__strip-cell .big { font-size: clamp(24px, 2.8vw, 40px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--green-ink-light); font-variant-numeric: tabular-nums; }
.firms-cc__strip-cell .bar { height: 6px; background: #EEF1F5; border-radius: 3px; overflow: hidden; }
.firms-cc__strip-cell .bar > span { display: block; height: 100%; background: var(--green-ink-light); }
.firms-cc__strip-cell .meta { font-size: clamp(10.5px, 0.9vw, 12.5px); color: var(--mute-2); }

.firms-cc__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.firms-cc__card {
  background: #FFFFFF; border: 1px solid var(--border-2); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.firms-cc__card.is-winner { border: 2px solid var(--blue); }
.firms-cc__photo {
  height: 190px; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #E9EDF2 0 10px, #F2F5F8 10px 20px);
}
.firms-cc__photo img { width: 100%; height: 100%; object-fit: cover; }

.firms-cc__card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.firms-cc__card-head .left { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.firms-cc__card-head .market { font-size: 13px; font-weight: 700; color: var(--body); }
.firms-cc__card-head .addr  { font-size: 13px; color: var(--body); }
.firms-cc__card-head .spec  { font-size: 12px; color: var(--mute-3); }
.firms-cc__card-head .right { flex: none; text-align: right; display: flex; flex-direction: column; gap: 3px; }
.firms-cc__card-head .right .big {
  font-size: 34px; font-weight: 900; letter-spacing: -0.04em; line-height: 1;
  color: var(--green-ink-light); font-variant-numeric: tabular-nums;
}
.firms-cc__card-head .right .label {
  font: 800 10px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mute-3);
}

.firms-cc__quad {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-2); border-radius: 10px;
}
.firms-cc__quad div {
  padding: 9px 12px; border-bottom: 1px solid var(--border-2);
}
.firms-cc__quad div:nth-child(odd) { border-right: 1px solid var(--border-2); }
.firms-cc__quad div:nth-last-child(-n+2) { border-bottom: 0; }
.firms-cc__quad .v { font-size: 16px; font-weight: 900; }
.firms-cc__quad .v.g { color: var(--green-ink-light); }
.firms-cc__quad .k { font: 800 9.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute-3); margin-top: 2px; }

.firms-cc__rows { border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; font-size: 13px; }
.firms-cc__rows .row {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
}
.firms-cc__rows .row.r5 { background: #F6FBF7; color: var(--body); }
.firms-cc__rows .row.r5 strong { color: var(--green-ink-light); }
.firms-cc__rows .row.r15 { background: #F5F9FE; border-top: 1px solid var(--border-2); color: var(--body); }
.firms-cc__rows .row.r15 strong { color: var(--blue-link); }
.firms-cc__rows .row .inner-tag { font-weight: 700; }
.firms-cc__rows .row.r5 .inner-tag { color: var(--green-ink-light); }
.firms-cc__rows .row.r15 .inner-tag { color: var(--blue-link); }

.firms-cc__items { margin: 0; padding-left: 16px; font-size: 13px; color: #5C6B7A; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.firms-cc__caption { font-family: Georgia, serif; font-style: italic; font-size: 13.5px; color: var(--body); line-height: 1.45; margin-top: auto; }

.firms-cc__stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.firms-cc__stack > .s5 { background: var(--green-ink-light); }
.firms-cc__stack > .s15 { background: var(--blue); }
.firms-cc__stack > .s39 { background: #D7DEE8; }
.firms-cc__stack > .sl { background: repeating-linear-gradient(45deg, #55606E 0 3px, #6C7887 3px 6px); }

.firms-cc__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--body); }
.firms-cc__legend .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.firms-cc__legend .sw.c5 { background: var(--green-ink-light); }
.firms-cc__legend .sw.c15 { background: var(--blue); }
.firms-cc__legend .sw.c39 { background: #D7DEE8; }
.firms-cc__legend .sw.cl { background: repeating-linear-gradient(45deg, #55606E 0 3px, #6C7887 3px 6px); }

.firms-cc__disclaimer { font-size: 12px; color: var(--mute-2); text-align: center; }

@media (max-width: 760px) {
  .firms-cc__cards {
    display: flex; grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 4px;
  }
  .firms-cc__card { flex: 0 0 290px; scroll-snap-align: start; }
  .firms-cc__photo { height: 150px; }
  .firms-cc__hint { font-size: 12px; color: var(--mute-2); text-align: center; }
}

/* ---- SAMPLE LIBRARY ---- */
.firms-set-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.firms-set-tab {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 11px 16px; border-radius: 12px;
  border: 1.5px solid #D5DCE5; background: #FFFFFF;
  color: var(--ink); font: 700 14.5px system-ui, -apple-system, sans-serif; cursor: pointer; text-align: left;
}
.firms-set-tab[aria-pressed="true"] { border-color: var(--green); background: var(--mint); }
.firms-set-tab span { font-size: 12.5px; font-weight: 500; color: var(--mute-1); }

.firms-filter-chips { display: flex; gap: 8px; overflow-x: auto; }
.firms-chip {
  flex: none; height: 38px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #D5DCE5; background: #FFFFFF; color: var(--ink);
  font: 600 14px system-ui, -apple-system, sans-serif; cursor: pointer;
}
.firms-chip[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

.firms-library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.firms-library-row {
  background: #FFFFFF; border: 1px solid var(--border-1); border-radius: 14px;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink);
}
.firms-library-row.is-selected { border-color: var(--green); }
.firms-library-row__ck {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid #C9D2DD; background: #FFFFFF; color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 13px system-ui, -apple-system, sans-serif; cursor: pointer;
}
.firms-library-row.is-selected .firms-library-row__ck { border-color: var(--green); background: var(--green); }
.firms-library-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.firms-library-row__head { display: flex; align-items: center; gap: 8px; }
.firms-library-row__market { font-size: 15.5px; font-weight: 700; }
.firms-library-row__meta { font-size: 12.5px; color: var(--mute-1); }
.firms-library-row__writeoff { font-size: 21px; font-weight: 900; color: var(--green-ink-light); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.firms-compare-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 10px;
  background: var(--nav); color: var(--txt-dark);
  border-radius: 14px; padding: 12px 12px 12px 18px;
}
.firms-compare-bar.is-ghost { opacity: .5; }
.firms-compare-bar__text { font-size: 14px; color: #FFFFFF; }
.firms-compare-bar .firms-btn[disabled] { opacity: .55; pointer-events: none; }

.firms-disclaimer { font-size: 12px; color: var(--mute-2); }

/* ---- SAMPLE REPORT ---- */
.firms-report {
  background: #FFFFFF; border-radius: 14px; border: 1px solid var(--border-1);
  box-shadow: 0 30px 70px -30px rgba(26,26,46,.45);
  overflow: hidden;
}
.firms-report__nav {
  padding: 12px clamp(14px, 2vw, 24px); background: var(--nav);
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px 16px; flex-wrap: wrap;
}
.firms-report__wordmark { display: flex; flex-direction: column; gap: 2px; }
.firms-report__wordmark strong { font-size: 15px; color: #FFFFFF; letter-spacing: -0.01em; line-height: 1; }
.firms-report__wordmark span { font: 600 8px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.16em; color: #7D8CA3; }
.firms-report__nav-addr { font: 600 10.5px/1.3 system-ui, -apple-system, sans-serif; letter-spacing: 0.12em; color: var(--txt-dark-mute-1); text-transform: uppercase; }

.firms-report__strip {
  padding: 10px clamp(14px, 2vw, 24px);
  background: #EEF6FD; border-bottom: 1px solid #DCEAF6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 13px; color: var(--body);
}
.firms-report__strip strong { color: var(--ink); }
.firms-report__strip strong.g { color: #0E8A5B; }
.firms-report__strip .arrow { color: var(--mute-3); }

.firms-report__body { display: flex; flex-wrap: wrap; }
.firms-report__left {
  flex: 1 1 320px; min-width: 0; padding: clamp(16px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid #EEF1F5;
}
.firms-report__title { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; letter-spacing: -0.015em; }
.firms-report__sub { font-size: 13px; color: var(--mute-1); }

.firms-report__pairgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--border-1); border-radius: 10px; overflow: hidden;
}
.firms-report__pair {
  background: #F7F9FB; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.firms-report__pair .v { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.firms-report__pair .k { font: 600 10px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.16em; color: var(--mute-1); text-transform: uppercase; }

.firms-report__conf {
  display: flex; flex-direction: column; gap: 4px; font-size: 13px;
}
.firms-report__conf-row { display: flex; align-items: center; gap: 8px; }
.firms-report__conf-row strong { font-weight: 600; white-space: nowrap; color: var(--ink); }
.firms-report__conf-row strong .dot { color: #0E8A5B; }

.firms-report__id { font: 500 10.5px/1.4 system-ui, -apple-system, sans-serif; letter-spacing: 0.08em; color: var(--mute-3); text-transform: uppercase; }

.firms-report__right {
  flex: 1 1 320px; min-width: 0; padding: clamp(16px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 16px;
}
.firms-report__tier-banner {
  display: flex; align-items: center; gap: 12px;
  background: #E3F2FE; border-radius: 10px; padding: 10px 14px;
}
.firms-report__tier-banner .tier {
  display: flex; flex-direction: column; gap: 2px;
}
.firms-report__tier-banner .tier strong { font-size: 13px; letter-spacing: 0.22em; color: #0B5C99; }
.firms-report__tier-banner .tier span { font: 600 9.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; color: #3B7AB3; }
.firms-report__tier-banner .about {
  margin-left: auto; font-size: 12px; line-height: 1.35; color: #0B5C99;
  text-align: right; max-width: 190px;
}

.firms-report__hero {
  display: flex; flex-direction: column; gap: 4px;
}
.firms-report__hero .k { font: 600 10.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; color: var(--mute-1); text-transform: uppercase; }
.firms-report__hero .v { font-size: clamp(44px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #0E8A5B; }
.firms-report__hero small { font-size: 13.5px; color: var(--body); }

.firms-report__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--border-1); border-radius: 10px; overflow: hidden;
}
.firms-report__stats .cell { background: #F7F9FB; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.firms-report__stats .v { font-size: 17px; font-weight: 800; }
.firms-report__stats .k { font-size: 11px; line-height: 1.3; color: var(--mute-1); }

.firms-report__dist {
  padding: 16px clamp(14px, 2vw, 24px) 20px;
  border-top: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 12px;
}
.firms-report__dist-head {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px;
}
.firms-report__dist-head .k { font: 600 10.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; color: var(--mute-1); text-transform: uppercase; }
.firms-report__dist-head strong { font-size: 14px; color: #0B5C99; }

.firms-report__dist-bar { position: relative; height: 10px; background: #EEF1F5; border-radius: 5px; }
.firms-report__dist-bar .mid { position: absolute; left: 29.5%; width: 40%; top: 0; bottom: 0; background: #C9DDF0; border-radius: 5px; }
.firms-report__dist-bar .median { position: absolute; left: 49%; top: -3px; bottom: -3px; width: 2px; background: var(--mute-1); }
.firms-report__dist-bar .marker {
  position: absolute; top: -5px; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; background: #0E8A5B; border: 3px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(26,26,46,.3);
}

.firms-report__dist-labels {
  position: relative; height: 28px; font-size: 11px; color: var(--mute-1);
}
.firms-report__dist-labels span {
  position: absolute; transform: translateX(-50%); text-align: center; line-height: 1.25;
}
.firms-report__dist-labels span.this { color: #0E8A5B; font-weight: 700; }

.firms-report__photos-head { padding: 0 clamp(14px, 2vw, 24px); margin-top: 8px; }
.firms-report__photos-head .k { font: 600 10.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; color: var(--mute-1); text-transform: uppercase; }
.firms-report__photos {
  padding: 10px clamp(14px, 2vw, 24px) 18px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.firms-report__photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }

.firms-report__break-head {
  border-top: 1px solid var(--border-1);
  padding: 16px clamp(14px, 2vw, 24px) 6px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline;
}
.firms-report__break-head strong { font-size: 15px; }
.firms-report__break-head span { font-size: 12px; color: var(--mute-1); }

.firms-report__break-cols { display: flex; flex-wrap: wrap; }
.firms-report__break-col { flex: 1 1 320px; min-width: 0; padding: 12px clamp(14px, 2vw, 24px) 18px; display: flex; flex-direction: column; gap: 8px; }
.firms-report__break-title {
  display: flex; align-items: center; gap: 8px;
  background: #F3F6F9; border-radius: 8px; padding: 9px 12px;
}
.firms-report__break-title .k { display: flex; flex-direction: column; gap: 1px; }
.firms-report__break-title strong { font-size: 12px; letter-spacing: 0.06em; }
.firms-report__break-title .ok { font-size: 11px; color: #0E8A5B; font-weight: 600; }
.firms-report__break-title .no { font-size: 11px; color: var(--mute-3); }
.firms-report__break-title .total {
  margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 1px;
}
.firms-report__break-title .total strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.firms-report__break-title .total span { font-size: 11px; color: var(--mute-1); }

.firms-report__li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; color: var(--body);
  border-bottom: 1px dashed var(--border-1); padding: 2px 0 7px;
}
.firms-report__li .name { flex: 1; min-width: 0; }
.firms-report__li .src {
  flex: none; font: 600 9.5px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.12em; padding: 3px 5px;
  border-radius: 4px; background: #F1F3F6; color: var(--mute-1);
}
.firms-report__li .amt { flex: none; width: 72px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.firms-report__more { font-size: 12.5px; color: var(--blue-link); font-weight: 600; }

.firms-report__total {
  margin: 0 clamp(14px, 2vw, 24px) 18px;
  background: var(--nav); color: var(--txt-dark);
  border-radius: 10px; padding: 14px 16px;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 8px 16px;
}
.firms-report__total strong { color: #FFFFFF; font-size: 14px; }
.firms-report__total .right { text-align: right; }
.firms-report__total .right strong { font-size: 24px; color: var(--green-on-dark-2); letter-spacing: -0.02em; }

.firms-report__notes {
  padding: 16px clamp(14px, 2vw, 24px);
  border-top: 1px solid var(--border-1); background: #FAFBFC;
  display: flex; flex-direction: column; gap: 10px;
}
.firms-report__notes-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.firms-report__notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 24px; }
.firms-report__note { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--body); }
.firms-report__note .bul { color: var(--mute-3); }

.firms-report__foot {
  padding: 10px clamp(14px, 2vw, 24px);
  border-top: 1px solid var(--border-1);
  font-size: 11.5px; color: var(--mute-1); font-style: italic;
}

/* annotated circles */
.firms-report__ann {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #1F6FB8; color: #FFFFFF;
  font: 800 11px/1 system-ui, -apple-system, sans-serif; margin-right: 4px;
}

.firms-report__legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 32px; padding-top: 20px;
}
.firms-report__legend-item { display: flex; gap: 12px; align-items: flex-start; }
.firms-report__legend-item .n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #1F6FB8; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
  font: 800 13px/1 system-ui, -apple-system, sans-serif;
}
.firms-report__legend-item strong { font-size: 15px; }
.firms-report__legend-item p { font-size: 14px; line-height: 1.5; color: var(--body); }

/* ---- MONDAY EMAIL ---- */
.firms-mail {
  background: #FFFFFF; border-radius: 14px; border: 1px solid var(--border-1);
  box-shadow: 0 24px 60px -30px rgba(26,26,46,.35);
  overflow: hidden;
}
.firms-mail__head {
  padding: 16px 20px; border-bottom: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 6px; background: #FAFBFC;
}
.firms-mail__meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--mute-1); }
.firms-mail__meta strong { color: var(--ink); }
.firms-mail__subject { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.firms-mail__example { font-size: 11px; color: var(--mute-2); text-transform: uppercase; letter-spacing: 0.1em; }

.firms-mail__row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid #EEF1F5;
}
.firms-mail__row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.firms-mail__row-addr { font-size: 14.5px; font-weight: 600; }
.firms-mail__row-meta { font-size: 13px; color: var(--mute-1); }
.firms-mail__badge {
  font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
}
.firms-mail__badge.d { background: #E3F2FE; color: #0B5C99; }
.firms-mail__badge.g { background: #FBF0D6; color: #7F5A0E; }
.firms-mail__row a { font-size: 13px; font-weight: 600; color: #1F6FB8; text-decoration: none; white-space: nowrap; }

.firms-mail__foot {
  padding: 12px 20px; display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; font: 500 11.5px/1.4 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.08em; color: var(--mute-1); text-transform: uppercase;
}
.firms-mail__foot a { color: #1F6FB8; text-decoration: none; }

/* ---- MARKET CHECK ---- */
.firms-mc {
  background: #FFFFFF; border: 1px solid var(--border-1);
  border-radius: 16px; padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
}
.firms-mc__head { display: flex; flex-direction: column; gap: 6px; }
.firms-mc__head .k { font: 600 11px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; color: var(--mute-1); text-transform: uppercase; }
.firms-mc__head h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

.firms-mc__row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.firms-mc__row > span.label { font-size: 15px; color: var(--mute-1); }
.firms-mc__row select {
  flex: 1 1 180px; height: 46px; padding: 0 12px;
  border-radius: 8px; border: 1px solid #C9D2DD; background: #FFFFFF;
  font: 600 15px system-ui, -apple-system, sans-serif; color: var(--ink);
}
.firms-mc__status {
  height: 46px; padding: 0 16px; border-radius: 8px;
  font-weight: 700; font-size: 15px; display: inline-flex; align-items: center;
}
.firms-mc__status.available { background: #E4F6EE; color: #0B6B47; }
.firms-mc__status.claimed { background: #F1F3F6; color: #3D4756; }
.firms-mc__status.waitlist { background: #FBF0D6; color: #7F5A0E; }

.firms-mc p { font-size: 14.5px; line-height: 1.5; color: var(--body); }

.firms-mc__legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 12.5px; color: var(--mute-1);
  border-top: 1px solid #EEF1F5; padding-top: 14px;
}
.firms-mc__legend .d { color: var(--green-ink-light); }
.firms-mc__legend .c { color: #8A96A8; }
.firms-mc__legend .w { color: #C99A2E; }

/* ---- FIRM PLANS ---- */
.firms-plans { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 48px); }
.firms-plans__toggle { display: flex; justify-content: center; }
.firms-plans__toggle .inner { display: flex; padding: 4px; background: #E8ECF1; border-radius: 10px; gap: 4px; }
.firms-plans__toggle button {
  height: 40px; padding: 0 18px; border: 0; border-radius: 8px;
  font: 600 14px system-ui, -apple-system, sans-serif; cursor: pointer; background: transparent; color: var(--ink);
}
.firms-plans__toggle button.is-active { background: #FFFFFF; box-shadow: 0 1px 3px rgba(26,26,46,.15); }
.firms-plans__toggle button .green { color: #0E8A5B; }

.firms-plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 1.8vw, 24px); align-items: stretch; padding-top: 12px;
}
.firms-plan-card {
  position: relative; background: #FFFFFF; border: 1px solid var(--border-1);
  border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.firms-plan-card.is-pro {
  background: var(--mint); border: 2px solid var(--green);
  box-shadow: 0 24px 50px -24px rgba(31,157,87,.4);
}
.firms-plan-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; height: 26px; padding: 0 14px; border-radius: 999px;
  background: var(--green); box-shadow: 0 4px 10px -4px rgba(31,157,87,.6);
  color: #FFFFFF; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center;
}
.firms-plan-card__head { display: flex; justify-content: space-between; align-items: baseline; }
.firms-plan-card__head strong { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-1); }
.firms-plan-card.is-pro .firms-plan-card__head strong { color: var(--green-chip-ink); }
.firms-plan-card__head span { font-size: 14px; color: var(--mute-1); }

.firms-plan-card__price { display: flex; align-items: baseline; gap: 4px; }
.firms-plan-card__price .v { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.firms-plan-card__price .u { font-size: 16px; color: var(--mute-1); font-weight: 600; }

.firms-plan-card__perseat { font-size: 14px; color: #3D4756; }

.firms-plan-card__compare {
  background: #F3F6F9; border-radius: 10px; padding: 12px 14px;
  font-size: 13.5px; color: #3D4756;
  display: flex; justify-content: space-between; gap: 10px;
}
.firms-plan-card__compare .ind { text-decoration: line-through; color: var(--mute-1); font-weight: 600; }

.firms-plan-card .firms-btn { width: 100%; height: 48px; border-radius: 12px; }

.firms-plan-card__foot {
  margin-top: auto; font-size: 12.5px; color: var(--mute-1);
  border-top: 1px solid var(--border-1); padding-top: 14px;
}

.firms-plan-includes { display: flex; flex-direction: column; gap: 18px; }
.firms-plan-includes h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.firms-plan-includes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px; }
.firms-plan-includes__item {
  display: flex; gap: 10px; font-size: 15px; line-height: 1.4;
  border-top: 1px solid var(--border-1); padding-top: 12px;
}
.firms-plan-includes__item .ck { color: var(--green); font-weight: 800; }
.firms-plan-includes__item a { color: var(--gold-light); font-weight: 600; text-decoration: none; }
.firms-plan-includes__item a:hover { color: var(--gold-light); text-decoration: underline; }

.firms-network-band {
  background: var(--nav); color: var(--txt-dark);
  border-radius: 16px; padding: clamp(22px, 2.6vw, 36px);
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  align-items: center; justify-content: space-between;
}
.firms-network-band__text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 360px; }
.firms-network-band__text strong { color: #FFFFFF; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; }
.firms-network-band__text span { color: var(--txt-dark-mute-1); font-size: 15px; }

.firms-secondary-actions {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  align-items: center; justify-content: center;
  font-size: 14px; color: var(--mute-1);
}

.firms-pricing-faq { display: flex; flex-direction: column; gap: 18px; }
.firms-pricing-faq h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.firms-pricing-faq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 40px; }
.firms-pricing-faq__q {
  border-top: 1px solid var(--border-1); padding: 16px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.firms-pricing-faq__q strong { font-size: 15.5px; }
.firms-pricing-faq__q p { font-size: 14.5px; line-height: 1.55; color: #3D4756; }

/* ---- COMPACT 3-tier firm pricing block (below-hero on firm-type pages).
       Mirrors live /pricing tile treatment: white tier cards with checkmark
       feature list; recommended tier gets dark-navy card + light-blue border
       + light-blue pill badge. Static — no toggle, no dynamic calc. ---- */
.firms-tier-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.firms-tier-head h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; }
.firms-tier-head p { color: var(--mute-1); max-width: 640px; }

.firms-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 1.8vw, 24px); align-items: stretch;
  /* extra top padding so the pill badge doesn't collide with the section bg */
  padding-top: 20px;
}
.firms-tier {
  position: relative; background: #FFFFFF; border: 1px solid var(--border-1);
  border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.firms-tier__eyebrow {
  font: 800 11px ui-monospace, Menlo, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: #2a7fb8;
}
.firms-tier__price { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.firms-tier__price .v { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.firms-tier__price .u { font-size: 15px; color: var(--mute-1); font-weight: 700; }
.firms-tier__sub { font-size: 13.5px; color: var(--mute-1); margin-top: -2px; }
.firms-tier__body { font-size: 14.5px; line-height: 1.5; color: #3D4756; }
.firms-tier__features { list-style: none; padding: 0; margin: 2px 0; display: flex; flex-direction: column; gap: 8px; }
.firms-tier__features li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
}
.firms-tier__features .ck { color: var(--green); font-weight: 800; flex: none; margin-top: 1px; }
.firms-tier .firms-btn { width: 100%; height: 48px; border-radius: 10px; margin-top: auto; }

/* Recommended (dark navy + light-blue border) — mirrors .pc.featured
   on live /pricing. Palette hardcoded to match the live site tile. */
.firms-tier--featured {
  background: #131c31;
  border: 2px solid #4fb6ec;
  box-shadow: 0 20px 50px -22px rgba(14,22,39,.45);
}
.firms-tier--featured .firms-tier__eyebrow { color: #7ccdf4; }
.firms-tier--featured .firms-tier__price .v { color: #FFFFFF; }
.firms-tier--featured .firms-tier__price .u { color: #a9bad2; }
.firms-tier--featured .firms-tier__sub { color: #a9bad2; }
.firms-tier--featured .firms-tier__body { color: #cdd9e9; }
.firms-tier--featured .firms-tier__features li { color: #e8edf4; }
.firms-tier--featured .firms-tier__features .ck { color: #7ccdf4; }
.firms-tier--featured .firms-btn--green {
  background: #4fb6ec; color: #0e1627; font-weight: 800;
  box-shadow: 0 10px 24px -10px rgba(79,182,236,.55);
}
.firms-tier--featured .firms-btn--green:hover { background: #7ccdf4; color: #0e1627; }

.firms-tier__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; height: 28px; padding: 0 16px; border-radius: 999px;
  background: #4fb6ec; color: #0e1627;
  font-size: 12px; font-weight: 800; letter-spacing: 0.01em;
  display: inline-flex; align-items: center;
  box-shadow: 0 4px 10px -4px rgba(14,22,39,.3);
}

/* ---- INDIVIDUAL vs FIRM ladder (brokers compact pricing) ---- */
.firms-ladder {
  background: #FFFFFF; border: 1px solid var(--border-1);
  border-radius: 16px; overflow: hidden;
}
.firms-ladder-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: 16px clamp(16px, 2vw, 24px); border-bottom: 1px solid #EEF1F5;
}
.firms-ladder-row strong { flex: 0 0 150px; font-size: 16px; }
.firms-ladder-row strong span { font-weight: 500; color: var(--mute-1); }
.firms-ladder-row .bars { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; }
.firms-ladder-row .barline { display: flex; align-items: center; gap: 10px; }
.firms-ladder-row .barline span.bar { height: 10px; background: #C9D2DD; border-radius: 5px; }
.firms-ladder-row .barline span.bar.green { background: var(--green); }
.firms-ladder-row .barline span.label { font-size: 13.5px; color: var(--mute-1); white-space: nowrap; }
.firms-ladder-row .barline span.label.firm { font-weight: 700; color: var(--green-chip-ink); }
.firms-ladder a {
  display: flex; justify-content: center; padding: 14px; font-weight: 700;
  text-decoration: none; background: var(--mint); color: var(--green-chip-ink);
}

/* ---- BROKERS/ live example row ---- */
.firms-live-row {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch;
}
.firms-live-row__left { flex: 1.6 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.firms-live-row__right { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.firms-live-row__label { font: 700 11px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; }
.firms-live-row__label--green { color: var(--green-chip-ink); }
.firms-live-row__label--mute { color: var(--mute-1); }

.firms-pair-card {
  flex: 1; background: #FFFFFF; border: 2px solid var(--blue);
  border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.firms-pair-card img { width: 100%; height: 170px; object-fit: cover; border-radius: 10px; }
.firms-pair-card__title strong { font-size: 17px; }
.firms-pair-card__title span { display: block; font-size: 13.5px; color: var(--mute-1); }
.firms-pair-card__writeoff { display: flex; flex-direction: column; gap: 4px; }
.firms-pair-card__writeoff .k { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-3); }
.firms-pair-card__writeoff .v { font-size: clamp(38px, 3.6vw, 52px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--green-ink-light); font-variant-numeric: tabular-nums; }
.firms-pair-card__writeoff .meta { font-size: 13.5px; color: var(--body); }
.firms-pair-card__delta {
  margin-top: auto; background: var(--nav); color: var(--txt-dark);
  border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.firms-pair-card__delta span.top { font-size: 13px; color: var(--txt-dark-mute-1); }
.firms-pair-card__delta strong { font-size: 24px; color: var(--green-on-dark-1); letter-spacing: -0.02em; }
.firms-pair-card__delta span.bot { font-size: 13px; color: var(--txt-dark-mute-1); }

/* ---- faq list on broker page ---- */
.firms-faq { display: flex; flex-direction: column; }
.firms-faq__item {
  border-top: 1px solid #D5DCE5; padding: 18px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.firms-faq__item strong { font-size: 17px; }
.firms-faq__item p { font-size: 15px; color: var(--body); line-height: 1.55; }

/* ---- more-comparisons link grid ---- */
.firms-link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.firms-link-card {
  background: #FFFFFF; border: 1px solid var(--border-1); border-radius: 14px;
  padding: 16px 18px; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
}
.firms-link-card:hover { border-color: var(--green); }
.firms-link-card strong { font-size: 16px; }
.firms-link-card .d { font-size: 13.5px; color: var(--mute-1); }
.firms-link-card .arrow { color: var(--green); font-weight: 800; }

/* ---- testimonial band ---- */
.firms-testimonial {
  background: var(--nav); color: var(--txt-dark);
  padding: clamp(40px, 5.5vw, 88px) clamp(20px, 5vw, 80px);
}
.firms-testimonial__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 80px); align-items: center; }
.firms-testimonial__num {
  flex: 0 1 auto; font-size: clamp(56px, 7vw, 104px); letter-spacing: -0.05em;
  line-height: 0.95; color: var(--green-on-dark-1); font-weight: 800;
}
.firms-testimonial__num span { display: block; font-size: 0.42em; color: var(--txt-dark-mute-3); font-weight: 600; letter-spacing: -0.02em; }
.firms-testimonial__quote { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.firms-testimonial__quote p { font-size: clamp(19px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -0.01em; color: #FFFFFF; }
.firms-testimonial__quote span { font-size: 14px; color: var(--txt-dark-mute-1); }

/* ---- utility ---- */
.firms-row-wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; }
.firms-link-underline { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }

/* ============================================================
   HUB HERO V2 — 2026-10-03 mockup
   Row 1 = split H1 + CTA. Row 2 = "Choose your firm" 4 cards
   inside the same dark navy section (no white break).
   ============================================================ */
.firms-hub-hero-v2 {
  /* Compressed 2026-10-03 so H1 fits 2 lines + 4 cards + Live Examples peek
     above the fold at 1440x900. */
  padding: clamp(28px, 3.2vw, 48px) 0 clamp(28px, 3.2vw, 48px);
}
.firms-hub-hero-v2__top {
  /* Flex row (not grid): H1 column gets a flexible big share, CTA is a
     fixed ~280px block on the right, vertically centered. This keeps the
     H1 wide enough that "Know the Year-1 write-off before your client
     bids." fits on a single line at desktop. */
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  padding-bottom: clamp(28px, 3.2vw, 48px);
}
@media (max-width: 820px) {
  .firms-hub-hero-v2__top {
    gap: 18px;
  }
}
.firms-hub-hero-v2__text {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
  flex: 1 1 820px;
  max-width: 1050px;
}
.firms-hub-hero-v2__text h1 {
  color: #FFFFFF;
  /* Sized so the longer line ("Know the Year-1 write-off before your
     client bids.") fits on ONE line inside the ~840px H1 text column
     at 1440px desktop. Measured: 36px * 49 chars * ~0.44 effective
     char-width ≈ 776px — single-line w/ breathing room. */
  font-size: clamp(26px, 2.75vw, 36px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}
.firms-hub-hero-v2__text h1 .l1 { display: block; color: #FFFFFF; }
.firms-hub-hero-v2__text h1 .l2 { display: block; color: var(--blue); }

.firms-hub-hero-v2__cta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; min-width: 0;
  flex: 0 0 260px;
}
@media (max-width: 820px) {
  .firms-hub-hero-v2__cta { align-items: stretch; flex-basis: auto; width: 100%; }
  .firms-hub-hero-v2__cta .firms-btn { width: 100%; }
}
.firms-hub-hero-v2__cta .firms-btn--xl { width: auto; min-width: 260px; }
.firms-hub-hero-v2__anchor {
  color: var(--txt-dark-mute-1);
  font-size: 14px; font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(169, 183, 202, 0.4);
}
.firms-hub-hero-v2__anchor:hover { color: #FFFFFF; }

.firms-hub-hero-v2__picker {
  display: flex; flex-direction: column; gap: 12px;
}
.firms-hub-hero-v2__picker-label {
  font: 700 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-dark-mute-1);
}

/* 4 numbered dark firm-type cards (hero row 2) */
.firms-hero-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 18px);
}
@media (max-width: 1100px) {
  .firms-hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .firms-hero-cards { grid-template-columns: 1fr; }
}
.firms-hero-card {
  position: relative;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 14px;
  padding: 18px 20px 18px;
  display: flex; flex-direction: column; gap: 9px;
  text-decoration: none; color: var(--txt-dark);
  min-height: 220px;
  max-height: 240px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.firms-hero-card:hover {
  border-color: var(--green);
  background: #1e1e36;
  color: var(--txt-dark);
}
.firms-hero-card__num {
  font: 700 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.22em;
  color: var(--green-on-dark-1);
}
.firms-hero-card h3 {
  color: #FFFFFF;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.firms-hero-card p {
  color: var(--txt-dark-mute-1);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}
.firms-hero-card__chips {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.firms-hero-card__chips .c {
  background: rgba(31, 157, 87, 0.15);
  color: var(--green-on-dark-1);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.firms-hero-card__chips .vs {
  color: var(--txt-dark-mute-1);
  font-weight: 600;
}
.firms-hero-card__link {
  margin-top: auto;
  color: var(--green-on-dark-1);
  font-size: 14px; font-weight: 600;
  padding-top: 4px;
}
.firms-hero-card:hover .firms-hero-card__link { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   LIVE REPORT EXAMPLES — 5-card strip (hub)
   ============================================================ */
/* Tighter top padding than the default .firms-section so the Live
   Examples pill peeks above the fold at 1440x900, right after the
   compressed hero. */
.firms-live-section {
  padding: clamp(32px, 3.6vw, 56px) 0 clamp(40px, 4.5vw, 72px);
}
.firms-live-section__head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 16px 32px;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
.firms-live-section__head > div {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.firms-live-section__head h2 {
  color: var(--ink);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.firms-live-section__all {
  color: var(--green-ink-light); font-weight: 600;
  text-decoration: none; font-size: 15px;
}
.firms-live-section__all:hover { text-decoration: underline; text-underline-offset: 4px; }
.firms-live-section__disclaimer {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: 12.5px; color: var(--mute-1);
}

.firms-live-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 16px);
}
@media (max-width: 1100px) {
  .firms-live-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 0 -16px;
    padding: 0 16px 4px;
    scrollbar-width: thin;
  }
  .firms-live-card { flex: 0 0 260px; scroll-snap-align: start; }
}

.firms-live-card {
  background: #FFFFFF;
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  min-width: 0;
}
.firms-live-card:hover {
  border-color: var(--green);
  box-shadow: 0 18px 36px -20px rgba(26,26,46,.35);
  color: var(--ink);
}
.firms-live-card__photo {
  position: relative;
  height: 180px;
  background: repeating-linear-gradient(135deg, #E9EDF2 0 10px, #F2F5F8 10px 20px);
  overflow: hidden;
}
.firms-live-card__photo::after {
  content: "listing photo";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px system-ui, -apple-system, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(90, 102, 119, 0.55);
}
.firms-live-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  position: relative; z-index: 1;
}
.firms-live-card__tier {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  font: 700 11px/1 system-ui, -apple-system, sans-serif;
}
.firms-live-card__tier.t-diamond { background: #eaf1fd; color: #2f5fd0; }
.firms-live-card__tier.t-gold    { background: #fbf0d6; color: #7f5a0e; }
.firms-live-card__tier.t-silver  { background: #f1f3f6; color: #3d4756; }
.firms-live-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: #1a1a2e; color: #FFFFFF;
  font: 700 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.06em;
}
.firms-live-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-on-dark-1);
  box-shadow: 0 0 0 2px rgba(31, 157, 87, 0.25);
}

.firms-live-card__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.firms-live-card__market {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.firms-live-card__addr {
  font-size: 13px; font-weight: 500; color: var(--mute-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.firms-live-card__eye {
  margin-top: 4px;
  font: 700 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green-ink-light);
}
.firms-live-card__big {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  color: var(--green-ink-light);
  font-variant-numeric: tabular-nums;
}
.firms-live-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #EEF1F5;
}
.firms-live-card__stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.firms-live-card__stats strong {
  font-size: 14px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.firms-live-card__stats span {
  font-size: 10.5px; color: var(--mute-1); letter-spacing: 0.02em;
}
.firms-live-card__link {
  margin-top: 10px;
  color: var(--green-ink-light);
  font-size: 14px; font-weight: 600;
}
.firms-live-card:hover .firms-live-card__link { text-decoration: underline; text-underline-offset: 3px; }

/* small-screen stacking */
@media (max-width: 760px) {
  .firms-hero__row { gap: 10px 12px; }
  .firms-plans__toggle .inner button { padding: 0 12px; }
}

/* ============================================================
   HUB HERO V3 — 2026-10-04 mockup
   Row 1 = eyebrow.
   Row 2 = 2-col split (H1 + checklist LEFT, 3 mini pricing cards
           + reco + CTA RIGHT).
   Row 3 = "SEE IT FOR" pill row.
   Mobile: columns stack. Mini pricing cards STAY 3-across.
   ============================================================ */
.firms-hub-hero-v3 {
  padding: clamp(28px, 3.6vw, 56px) 0 clamp(24px, 2.8vw, 40px);
}
/* Widen the hero container only (other sections keep the shared 1280px cap).
   At 1440px viewport this yields ~1312px of content for the split row,
   so the left (H1) column can grow to ~830–890px and the H1 wraps 2–3 lines. */
.firms-hub-hero-v3 > .firms-container {
  max-width: 100%;
  padding: 0 clamp(24px, 4vw, 64px);
}
.firms-hub-hero-v3__eyebrow {
  display: inline-block;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

/* 2-col split L/R — flex per Claude Design FIX spec, rebalanced for H1 fit */
.firms-hero-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px clamp(32px, 4vw, 64px);
  padding-bottom: clamp(24px, 2.8vw, 36px);
}

.firms-hero-split__left {
  flex: 2 1 540px;
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}
h1.firms-hero-split__h1 {
  color: #FFFFFF;
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
.firms-hero-split__h1 .w { color: #FFFFFF; }
.firms-hero-split__h1 .b { color: #3D9CE6; }

/* 6-bullet feature checklist — 3 columns, centered under the hero split */
.firms-hero-check-list {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  column-gap: 44px;
  row-gap: 12px;
}
@media (max-width: 820px) {
  .firms-hero-check-list { grid-template-columns: 1fr 1fr; max-width: 560px; column-gap: 32px; }
}
@media (max-width: 480px) {
  .firms-hero-check-list { grid-template-columns: 1fr; max-width: 360px; }
}
.firms-hero-check-list li {
  display: flex; align-items: flex-start; gap: 9px;
  color: #C4CEDC;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.4;
  font-weight: 500;
  min-width: 0;
}
.firms-hero-check-list .ck {
  color: #3DCB6E;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  flex: none;
  margin-top: 1px;
}

/* RIGHT column: 3 mini cards + reco + CTA */
.firms-hero-split__right {
  flex: 1 1 420px;
  display: flex; flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}

/* 3-up compact pricing cards per FIX spec — cards hug content */
.firms-tier-mini-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}
.firms-tier-mini {
  position: relative;
  background: #12213A;
  box-shadow: inset 0 0 0 1px #26385A;
  border: 0;
  border-radius: 14px;
  padding: clamp(12px, 1.3vw, 18px);
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: #FFFFFF;
}
.firms-tier-mini__eyebrow {
  font: 800 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93A1B5;
}
.firms-tier-mini__price {
  display: flex; align-items: baseline;
  gap: 3px;
  min-width: 0;
}
.firms-tier-mini__price .v {
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.firms-tier-mini__price .u {
  font-size: 13px; font-weight: 700;
  color: #93A1B5;
}
.firms-tier-mini__seats {
  font-size: 14px; font-weight: 700;
  color: #FFFFFF;
}
.firms-tier-mini__was {
  font-size: 12.5px; font-weight: 500;
  color: #93A1B5;
  /* strike only the dollar amount — see .firms-tier-mini__was .amt below */
  text-decoration: none;
}
.firms-tier-mini__was .amt {
  text-decoration: line-through;
  text-decoration-color: #E06C6C;
}
/* Featured (Firm Pro) — forest-green card per FIX spec */
.firms-tier-mini--featured {
  position: relative;
  background: #123321;
  box-shadow: inset 0 0 0 2px #23A04F;
  border: 0;
}
.firms-tier-mini--featured .firms-tier-mini__eyebrow {
  color: #3DCB6E;
}
.firms-tier-mini__pop {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #23A04F;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.5);
}

/* Reco line (right column, below mini cards) */
.firms-hero-split__reco {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #93A1B5;
  white-space: normal;
}
.firms-hero-split__reco strong {
  color: #3DCB6E;
  font-weight: 700;
}
.firms-hero-split__reco .muted {
  color: #93A1B5;
}
.firms-hero-split__reco a {
  color: #3D9CE6;
  font-weight: 600;
  text-decoration: none;
}
.firms-hero-split__reco a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* CTA row — green button + Stripe link (per FIX spec) */
.firms-hero-split__cta {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
}
/* Primary CTA inside the hero: fills right column width.
   Overrides generic .firms-btn / .firms-btn--xl values. */
.firms-hero-split__cta .firms-btn--xl {
  flex: 1 1 220px;
  height: 52px;
  border-radius: 12px;
  background: #23A04F;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 16.5px;
  padding: 0 24px;
  box-shadow: 0 10px 24px -10px rgba(35,160,79,.8);
  opacity: 1;
  filter: none;
}
.firms-hero-split__cta .firms-btn--xl:hover {
  background: #1C8A43;
  color: #FFFFFF;
}
@media (max-width: 980px) {
  .firms-hero-split__cta { align-items: stretch; }
  .firms-hero-split__cta .firms-btn--xl { width: 100%; min-width: 0; }
}
.firms-hero-split__stripe {
  color: #A9B7CA;
  font-size: 14.5px; font-weight: 600;
  text-decoration: none;
}
.firms-hero-split__stripe:hover { color: #FFFFFF; }

/* SEE IT FOR pill row — per FIX spec */
.firms-see-it-row {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid #22334C;
}
.firms-see-it-row__label {
  font: 700 11.5px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7F95B5;
  padding-right: 4px;
}
.firms-see-it-row__pills {
  display: flex; flex-wrap: wrap;
  gap: 8px 10px;
}
@media (max-width: 640px) {
  .firms-see-it-row { gap: 10px 10px; }
  .firms-see-it-row__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    width: calc(100% + 32px);
  }
  .firms-see-it-pill { flex: 0 0 auto; }
}
.firms-see-it-pill {
  display: inline-flex; align-items: center;
  background: transparent;
  box-shadow: inset 0 0 0 1px #2A3B55;
  border: 0;
  color: #E8EDF4;
  font-size: 14px; font-weight: 600;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
}
.firms-see-it-pill:hover {
  box-shadow: inset 0 0 0 1.5px #3DCB6E;
  color: #E8EDF4;
}
/* The arrow glyph gets a green tint via a span. Fallback: tint any inline svg. */
.firms-see-it-pill .arr { color: #3DCB6E; margin-left: 6px; font-weight: 700; }

/* ============================================================
   FIRM-TYPE PAGES (brokers / cpas / pms / other)
   Shared hero + sections. Added 2026-10-04 from design pack.
   All classes prefixed .firms-ft-*. Scoped under .firms.
   ============================================================ */

/* ---- hero wrapper (overrides default navy section padding) ---- */
.firms .firms-ft-hero {
  background: #0D1929;
  color: #E8EDF4;
  padding: clamp(28px, 3.4vw, 52px) 0 clamp(32px, 3.6vw, 56px);
}
.firms-ft-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px clamp(32px, 4vw, 64px);
  align-items: center;
}
.firms-ft-hero__left {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}
.firms-ft-hero__right {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- hero copy ---- */
.firms-ft-hero__eyebrow {
  font: 700 12px/1.3 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3DCB6E;
}
/* Qualified with h1. to beat the generic .firms h1 selector
   (which has specificity 0,0,1,1 vs our 0,0,2,0). */
h1.firms-ft-hero__h1 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  text-wrap: balance;
}
h1.firms-ft-hero__h1 .accent { color: #3D9CE6; }
.firms-ft-hero__sub {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.55;
  color: #A9B7CA;
  text-wrap: pretty;
  max-width: 600px;
}

/* ---- CTA row ---- */
.firms-ft-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.firms-ft-hero__cta {
  height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  background: #23A04F;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 16.5px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(35,160,79,.8);
}
.firms-ft-hero__cta:hover { background: #1C8A43; color: #FFFFFF; }
.firms-ft-hero__cta-note {
  font-size: 14.5px;
  color: #A9B7CA;
  text-decoration: none;
}
.firms-ft-hero__cta-note:hover { color: #FFFFFF; }

/* ---- use rows ---- */
.firms-ft-uses {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #22334C;
  margin-top: 4px;
}
.firms-ft-uses__label {
  padding: 14px 0 6px;
  font: 700 11.5px/1 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7F95B5;
}
.firms-ft-use {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #1A2A40;
}
.firms-ft-use__badge {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #22344E;
  color: #C4CEDC;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.firms-ft-use--first .firms-ft-use__badge {
  background: #23A04F;
  color: #FFFFFF;
}
.firms-ft-use__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.firms-ft-use__body strong {
  font-size: 15px;
  color: #FFFFFF;
  font-weight: 700;
}
.firms-ft-use__body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #A9B7CA;
  text-wrap: pretty;
}

/* ---- live example (right) ---- */
.firms-ft-live__label {
  font: 700 11px/1.3 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3DCB6E;
}
.firms-ft-live__card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: clamp(10px, 1.2vw, 16px);
  color: #0D1929;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.firms-ft-live__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}
.firms-ft-list {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #E4E9EF;
  background: #FFFFFF;
}
.firms-ft-list--winner { border: 2px solid #3D9CE6; }
.firms-ft-list__photo {
  height: clamp(96px, 10vw, 150px);
  background: repeating-linear-gradient(135deg, #E9EDF2 0 10px, #F2F5F8 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.firms-ft-list__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.firms-ft-list__photo .ph {
  font: 500 10.5px ui-monospace, Menlo, monospace;
  color: #7D8796;
}
.firms-ft-list__body {
  padding: clamp(8px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.firms-ft-list__addr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.firms-ft-list__addr strong {
  font-size: clamp(12.5px, 1vw, 14.5px);
  font-weight: 700;
  color: #0D1929;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.firms-ft-list__addr span {
  font-size: clamp(11px, 0.85vw, 12.5px);
  color: #6B7A8C;
}
.firms-ft-list__k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8595A6;
  text-transform: uppercase;
}
.firms-ft-list__v {
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #2E7D4E;
}
.firms-ft-list__bar {
  height: 6px;
  background: #EEF1F5;
  border-radius: 3px;
  overflow: hidden;
}
.firms-ft-list__bar span {
  display: block;
  height: 100%;
  background: #2E7D4E;
  border-radius: 3px;
}
.firms-ft-list__stats {
  font-size: clamp(11px, 0.85vw, 12.5px);
  color: #4A5A6B;
}
.firms-ft-chip {
  align-self: flex-start;
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.firms-ft-chip--diamond { border-color: #7CC0EF; background: #EAF5FE; color: #0F3A5C; }
.firms-ft-chip--gold    { border-color: #CF9A1C; background: #FDF3DA; color: #6B4A05; }

.firms-ft-live__delta {
  background: #0D1929;
  color: #E8EDF4;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 14px;
}
.firms-ft-live__delta-text {
  font-size: 13.5px;
  color: #A9B7CA;
}
.firms-ft-live__delta-text .amt {
  color: #3DCB6E;
  font-size: 18px;
  font-weight: 800;
}
.firms-ft-live__delta-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #3D9CE6;
  text-decoration: none;
}
.firms-ft-live__delta-link:hover { color: #FFFFFF; }
.firms-ft-live__disc {
  font-size: 11px;
  color: #6B7A8C;
}

/* ---- below the hero ---- */
.firms-ft-section {
  padding: clamp(44px, 5.5vw, 88px) 0;
}
.firms-ft-section__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 20px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.firms-ft-section__head h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}
.firms-ft-section__head .firms-link-underline {
  color: #0D1929;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 600;
  font-size: 14.5px;
}
.firms-ft-section__head .firms-link-underline:hover { color: #23A04F; }

/* ---- compact sample report (fallback / wrapper around full component) ---- */
.firms-ft-sample {
  background: #FFFFFF;
  border: 1px solid #E4E9EF;
  border-radius: 18px;
  padding: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.firms-ft-sample__photo {
  border-radius: 14px;
  overflow: hidden;
  background: #EEF1F5;
  aspect-ratio: 4 / 3;
}
.firms-ft-sample__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.firms-ft-sample__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.firms-ft-sample__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.firms-ft-sample__head .market {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7A8C;
}
.firms-ft-sample__head .addr {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0D1929;
}
.firms-ft-sample__head .spec {
  font-size: 13.5px;
  color: #6B7A8C;
}
.firms-ft-sample__hero {
  background: #F5F8FB;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: baseline;
  justify-content: space-between;
}
.firms-ft-sample__hero .k {
  font: 800 10.5px/1 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B7A8C;
}
.firms-ft-sample__hero .v {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #2E7D4E;
  line-height: 1;
  display: block;
  margin-top: 4px;
}
.firms-ft-sample__quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.firms-ft-sample__quad > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.firms-ft-sample__quad .v {
  font-size: 15px;
  font-weight: 800;
  color: #0D1929;
}
.firms-ft-sample__quad .v.g { color: #2E7D4E; }
.firms-ft-sample__quad .k {
  font-size: 12px;
  color: #6B7A8C;
}
.firms-ft-sample__break {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.firms-ft-sample__break-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
}
.firms-ft-sample__break-row.r5  { background: rgba(46,125,78,.08); color: #0D1929; }
.firms-ft-sample__break-row.r15 { background: rgba(61,156,230,.1); color: #0D1929; }
.firms-ft-sample__break-row.r39 { background: #F2F5F8; color: #4A5A6B; }
.firms-ft-sample__break-row .tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.firms-ft-sample__link {
  font-size: 14px;
  font-weight: 700;
  color: #0D1929;
  text-decoration: none;
  border-bottom: 1.5px solid #0D1929;
  padding-bottom: 1px;
  align-self: flex-start;
}
.firms-ft-sample__link:hover { color: #23A04F; border-color: #23A04F; }
.firms-ft-sample__disc {
  font-size: 11.5px;
  color: #6B7A8C;
  line-height: 1.5;
}

/* ---- 3 comparison cards ---- */
.firms-ft-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.firms-ft-compare-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #E4E9EF;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #0D1929;
  transition: border-color .15s, transform .15s;
}
.firms-ft-compare-card:hover {
  border-color: #23A04F;
  color: #0D1929;
  transform: translateY(-2px);
}
.firms-ft-compare-card__photo {
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(135deg, #E9EDF2 0 10px, #F2F5F8 10px 20px);
  overflow: hidden;
}
.firms-ft-compare-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.firms-ft-compare-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.firms-ft-compare-card__eye {
  font: 700 11px/1 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3DCB6E;
}
.firms-ft-compare-card__head {
  font-size: 15.5px;
  font-weight: 800;
  color: #0D1929;
  line-height: 1.25;
}
.firms-ft-compare-card__sub {
  font-size: 13.5px;
  color: #4A5A6B;
  line-height: 1.4;
}
.firms-ft-compare-card__delta {
  font-size: 13.5px;
  font-weight: 800;
  color: #2E7D4E;
  margin-top: 2px;
}
.firms-ft-compare-card__arrow {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: #23A04F;
}

/* ---- testimonial band (shared style — Clay G.) ---- */
.firms-ft-testimonial {
  background: #0D1929;
  color: #E8EDF4;
  padding: clamp(44px, 5vw, 72px) 0;
}
.firms-ft-testimonial__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.firms-ft-testimonial__stars {
  color: #F5B840;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.firms-ft-testimonial__quote {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.4;
  color: #FFFFFF;
  text-wrap: balance;
}
.firms-ft-testimonial__by {
  font-size: 14px;
  color: #A9B7CA;
}

/* ---- FAQ + market-check grid ---- */
.firms-ft-faq-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(32px, 4vw, 64px);
  align-items: flex-start;
}
.firms-ft-faq-row__left { flex: 1 1 520px; min-width: 0; }
.firms-ft-faq-row__right { flex: 1 1 400px; min-width: 0; }
.firms-ft-faq {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.firms-ft-faq__item {
  padding: 16px 0;
  border-bottom: 1px solid #E4E9EF;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.firms-ft-faq__item strong {
  font-size: 17px;
  color: #0D1929;
  font-weight: 700;
}
.firms-ft-faq__item p {
  margin: 0;
  font-size: 15px;
  color: #4A5A6B;
  line-height: 1.55;
}

/* ---- firm-type page pricing block (3 tiles — copied markup from hub) ---- */
.firms-ft-pricing-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.firms-ft-pricing-head h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  margin: 0;
}
.firms-ft-pricing-head p { color: #4A5A6B; max-width: 640px; margin: 0; font-size: 15px; }
.firms-ft-pricing-foot {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-size: 14px;
  color: #4A5A6B;
}
.firms-ft-pricing-foot a {
  color: #0D1929;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.firms-ft-pricing-foot a:hover { color: #23A04F; }

/* ---- MOBILE ---- */
@media (max-width: 820px) {
  .firms-ft-hero__inner { gap: 20px; }
  .firms-ft-hero__left,
  .firms-ft-hero__right { flex: 1 1 100%; }
  .firms-ft-sample {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .firms-ft-live__grid { gap: 8px; }
  h1.firms-ft-hero__h1 { font-size: clamp(28px, 7vw, 34px); }
  .firms-ft-section { padding-bottom: calc(clamp(44px,5.5vw,88px) + 72px); }
}

/* Also pad bottom site-wide so mobile sticky demo bar never covers footer. */
@media (max-width: 820px) {
  .firms-footer { padding-bottom: calc(32px + 72px); }
}