/* product-page.css: the shell every public product page shares. Moved out of
   for-cpa-firms.html on 5 November 2026 so the pages cannot drift apart. */
  /* ── .hero USED TO BE REDEFINED HERE, AND IT WON ──────────────────────────
     Removed 5 October 2026. I wrote in styles.css that `.hero` was "defined
     NOWHERE" and that was wrong: it was defined right here, in a page-local
     <style> that loads AFTER the stylesheet and therefore beat it. So the
     shared rule was edited three times, the page did not move, and the headline
     stayed centred through two rounds of "it looks like a mess".
     THE LESSON IS THE VANTAGE POINT: I grepped the stylesheet and reported on
     the stylesheet, when the question was what the BROWSER computes. The
     computed style named `.hero` as centred while the file I was editing said
     nothing of the kind.
     `.pain-grid` and `.feature-row` stay: they are this page's own components
     and nothing else defines them. */
  .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 32px 0; }
  .feature-row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 28px; }
  .feature-row .num { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--gold); flex-shrink: 0; width: 44px; }
  body.portal-body { margin: 0; padding: 0; }
  /* L-156 round 25: the top bar and the wide container moved to styles.css,
     which owns .unified-site-topbar and .portal-container -- a copy here
     loaded after it and silently won (onePageOneMenuClick test 24). */
  /* .comparison-table and its scroll cue: in styles.css with their 720px rules
     (C-447), which this page used to repeat (L-156 round 25). */
  .firms-persona-gateway { background: var(--ribbon-bg, #111827); color: var(--ribbon-text, #f9fafb); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 10px 25px rgba(17, 24, 39, 0.08); }
  .firms-persona-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .firms-persona-step { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ribbon-accent, #fbbf24); }
  .firms-persona-sub { font-size: 12.5px; color: #d1d5db; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .firms-persona-pills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .firms-persona-pill { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; height: 62px; min-height: 62px; max-height: 62px; overflow: hidden; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #f9fafb; text-decoration: none; transition: all 0.15s ease; text-align: left; width: 100%; }
  .firms-persona-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
  .firms-persona-pill.active { background: #ffffff; color: #111827; border-color: var(--ribbon-accent, #fbbf24); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
  .firms-persona-pill-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; overflow: hidden; }
  .firms-persona-pill-title .pill-brand-wrap { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .firms-persona-pill-title img { width: 28px; height: 28px; flex-shrink: 0; }
  .firms-persona-pill-meta { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .firms-persona-pill.active .firms-persona-pill-meta { color: #92400e; font-weight: 600; opacity: 1; }
  .persona-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .persona-under-links {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap;
    height: 28px; padding: 0 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px; font-size: 11.5px; font-family: var(--font-mono);
  }
  .persona-under-links a { color: #fbbf24; text-decoration: none; font-weight: 700; white-space: nowrap; }
  .persona-under-links a:hover { color: #ffffff; text-decoration: underline; }
  .persona-under-links .sep { color: rgba(255, 255, 255, 0.3); }
  .firms-mobile-doors-toggle { display: none; width: 100%; background: #ffffff; border: 1px solid #d8d2c5; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #1f2937; text-align: left; cursor: pointer; margin-bottom: 12px; justify-content: space-between; align-items: center; }
  .firms-top-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
  /* The first view, 5 November 2026: one headline, one sentence, two buttons. */
  .firms-doors-line { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; margin: 18px 0 14px; font-size: 13px; color: var(--muted, #5d6b63); }
  .firms-door summary { cursor: pointer; list-style: none; text-align: right; }
  .firms-door summary::before, .sitemenu-more summary::before { content: none !important; }
  .firms-door summary::-webkit-details-marker { display: none; }
  .firms-door[open] { max-width: 420px; }
  .firms-door span { display: block; margin: 4px 0; line-height: 1.4; }
  .price-fine { font-size: 0.72em; font-weight: 500; opacity: 0.75; white-space: nowrap; }
  /* All products: every product, with its video and demo, in one small menu. */
  .firms-all-products { position: relative; }
  .firms-all-products[open] { max-width: none; }
  .all-products-list { position: absolute; right: 0; top: 22px; z-index: 30; min-width: 320px; margin: 0; padding: 8px 12px; list-style: none; background: #fff; border: 1px solid var(--line, #e3e6e3); border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); }
  .all-products-list li { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 13px; }
  .all-products-list a { color: var(--accent, #0b6b5e); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .all-products-list a:hover { text-decoration: underline; }
  .all-products-list .all-products-name { flex: 1; color: var(--ink, #1b241f); }
  .all-products-compare { justify-content: flex-end; border-top: 1px solid var(--line, #e3e6e3); margin-top: 4px; }
  .firms-door a, .firms-hero-also a { color: var(--accent, #0b6b5e); font-weight: 600; text-decoration: none; }
  .firms-door a:hover, .firms-hero-also a:hover { text-decoration: underline; }
  .firms-doors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 14px 0 16px; }
  /* One body width, 5 November 2026. Hari: shrink the top and the footer "to the
     body size ... so everything looks uniform". */
  main.portal-container.page-wide, header.unified-site-topbar, footer.site-footer { width: 100%; max-width: min(94vw, 1800px); margin-left: auto; margin-right: auto; box-sizing: border-box; }
  /* Every product page, not one panel id: tied to #problem, Household never got
     these and the footer sat 187px away from the CPA page. */
  /* Cards in a panel line up with the top bar: the body has no side padding of its
     own, and text outside a card keeps the same inset as the top bar's contents.
     Hari, 5 November 2026: "top header bar and body bar should be same size". */
  main.portal-container.page-wide { padding-left: 0; padding-right: 0; }
  .firms-doors-line, [data-sitemenu] { margin-left: 40px; margin-right: 40px; }
  .page > .hero { padding: 7vh 40px 9vh; }
  .page > .hero h1 { margin-bottom: 18px; font-size: clamp(34px, 3.8vw, 78px); }
  .firms-hero-lede { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; min-height: 3em; }
  .firms-hero-terms { font-size: 14px; }
  .firms-hero-also { font-size: 13.5px; margin-top: 26px !important; }
  .sitemenu-more { position: relative; }
  .sitemenu-more summary { list-style: none; cursor: pointer; color: var(--muted, #5d6b63); font-size: 14.5px; font-weight: 500; padding: 10px 14px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
  .sitemenu-more summary::-webkit-details-marker { display: none; }
  .sitemenu-more summary::after { content: " \25BE"; margin-left: 5px; font-size: 11px; }
  .sitemenu-more-list { position: absolute; right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 180px; background: #fff; border: 1px solid var(--line, #e3e6e3); border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); padding: 6px; }
  .firms-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
  @media (max-width: 980px) {
    .firms-persona-pills { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    [data-sitemenu] { justify-content: flex-start; margin-bottom: 8px; }
    [data-sitemenu] a, .sitemenu-more summary { font-size: 13px; padding: 6px 7px; min-height: 36px; }
    .firms-doors-line, [data-sitemenu] { margin-left: 16px; margin-right: 16px; }
    .page > .hero { padding: 24px 16px 32px; min-height: 640px; box-sizing: border-box; }
    .firms-hero-lede { min-height: 0; }
    .firms-doors-line { min-height: 36px; align-content: flex-start; }
    .firms-hero-lede { font-size: 16.5px; }
    .firms-persona-pills { grid-template-columns: 1fr; }
    .firms-mobile-doors-toggle { display: flex; }
    .firms-top-grid { display: none; }
    .firms-top-grid.mobile-open { display: grid; }
  }
  @media (max-width: 480px) {
    .feature-row { gap: 12px; margin-bottom: 20px; }
    .feature-row .num { font-size: 22px; width: 34px; }
  }

/* Household sections, carried over from household/index.html. */
.hh-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 390px)); gap: 16px; margin: 12px 0; }
.hh .point-card, .hh .price-card { --line: #e2e8f0; --card: #fff; --muted: #475569; --ok: #15803d; }
.hh .badge-sym {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
  }
.hh .point-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  }
.hh .point-card strong { display: block; font-size: 14px; margin-bottom: 3px; }
.hh .point-card span { font-size: 12.5px; color: var(--muted); }
.hh .section-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 3vw, 32px);
    margin: 0 0 8px;
  }
.hh .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--line);
  }
.hh table.wealth-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 540px;
  }
.hh table.wealth-tbl th, .hh table.wealth-tbl td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
  }
.hh table.wealth-tbl th {
    background: #f1f5f9;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
.hh .hero-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
  }
.hh .price-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
.hh .price-card.featured {
    border: 2px solid var(--accent);
    box-shadow: 0 10px 26px rgba(11, 107, 94, 0.08);
  }
.hh .price-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
    font-size: 13px;
    color: var(--muted);
  }
.hh .price-list li {
    margin-bottom: 7px;
    padding-left: 18px;
    position: relative;
  }
.hh .price-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ok);
    font-weight: 800;
  }
.hh .price-tag {
    font-size: 30px;
    font-weight: 800;
    margin: 8px 0 4px;
  }
.hh .price-tag span { font-size: 14px; font-weight: 500; color: var(--muted); }
@media (max-width: 640px) { .hh .hero-points { grid-template-columns: 1fr; } }

/* Compare all products: the video is the one dark window. Hari, 6 November 2026:
   "too many black background windows". vertical-theme.js and the banner script set
   their dark colours inline, so these rules need !important. */
#products .firms-persona-gateway { background: #fff !important; color: var(--ink, #1b241f) !important; border: 1px solid var(--line, #e3e6e3); box-shadow: none; margin-top: 14px; }
#products .firms-persona-step { color: var(--accent, #0b6b5e) !important; }
#products .firms-persona-sub { color: var(--muted, #5d6b63); }
#products .firms-persona-pill { background: #f8fafc; color: var(--ink, #1b241f); border-color: var(--line, #e3e6e3) !important; }
#products .firms-persona-pill:hover { background: #ecfdf5; }
#products .firms-persona-pill.active { background: #ecfdf5; border-color: var(--accent, #0b6b5e) !important; box-shadow: none; }
#products .firms-persona-pill.active .firms-persona-pill-meta { color: inherit; font-weight: 400; opacity: 0.85; }
#products .persona-under-links { background: #f8fafc; border-color: var(--line, #e3e6e3); }
#products .persona-under-links a { color: var(--accent, #0b6b5e); }
#products .persona-under-links .sep { color: #94a3b8; }
#practitioner-depth-showcase-banner { background: #f8fafc !important; color: var(--ink, #1b241f) !important; border-color: var(--line, #e3e6e3) !important; }
#practitioner-depth-showcase-banner div { color: inherit !important; }
#practitioner-depth-showcase-banner a:last-child { color: var(--accent, #0b6b5e) !important; background: #fff !important; border-color: var(--accent, #0b6b5e) !important; }