/* Multi-page bill review site (Reuben's spec, 17 Oct 2026): Home (5 sections), /sample-report, /pricing, /free-tools, /resources.
   Builds on css/home.css (.hx scope). Colours are tokens only (check_site.py). */
.hx.mp{font-size:16px}
.hx.mp h1{text-align:left;margin:14px 0 0;max-width:none;font:700 clamp(34px,4.6vw,54px)/1.08 var(--display);letter-spacing:-.025em}
.hx.mp h2{font:700 clamp(26px,3vw,34px)/1.15 var(--display);letter-spacing:-.02em;margin:0;color:var(--text)}
.hx .mp-h3{font:600 16px/1.3 var(--display);margin:22px 0 8px}
.hx .mp-s{padding:56px 0 0}
.hx .mp-sub{color:var(--text-2);margin:12px 0 0;max-width:720px}
.hx .mp-k{display:inline-block;flex:0 0 auto;min-width:92px;text-align:center;font:600 12px/1 var(--body);border-radius:999px;padding:6px 9px}
.hx .k-keep{background:var(--selected);color:var(--accent)}
.hx .k-inv{background:var(--sun-soft);color:var(--hx-sun-ink);border:1px solid var(--hx-sun-line)}
.hx .k-ren{background:var(--coral-soft);color:var(--coral-ink)}
/* compact sample */
.hx .mp-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.hx .mp-find{padding:20px 22px}
.hx .mp-find h3{font:600 18px/1.3 var(--display);margin:12px 0 8px}
.hx .mp-find p{margin:8px 0 0;font-size:14.5px;color:var(--text-2)}
.hx .mp-find b{color:var(--text)}
.hx .mp-more{margin:18px 0 0}.hx .mp-more a{font-weight:600;color:var(--accent);display:inline-flex;min-height:var(--tap);align-items:center}
/* steps */
.hx .mp-steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hx .mp-steps li{padding:22px}
.hx .mp-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 16px/1 var(--display)}
.hx .mp-steps h3{font:600 18px/1.3 var(--display);margin:12px 0 6px}
.hx .mp-steps p{margin:0;font-size:15px;color:var(--text-2)}
/* the one pricing card */
.hx .mp-plan-wrap{margin-top:24px;max-width:520px}
.hx .mp-plan{padding:30px 28px 24px;position:relative}
.hx .mp-plan .then{color:var(--text-2);margin-top:6px}
.hx .mp-plan-list{margin:18px 0 0;padding:0 0 0 20px;display:grid;gap:6px;color:var(--text-2);font-size:15px}
.hx .mp-plan-cta{margin-top:20px!important;width:100%;justify-content:center}
.hx .mp-plan-fine{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.hx .mp-plan-more{margin:10px 0 0}.hx .mp-plan-more a{font-weight:600;color:var(--accent);display:inline-flex;min-height:var(--tap);align-items:center}
.hx .mp-plan-mascot{position:absolute;right:16px;top:-30px;width:64px;height:auto;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(32,37,34,.10))}
/* FAQ accordion */
.hx .mp-faq{margin-top:20px;max-width:820px}
.hx .mp-faq details{border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:none;margin:0;padding:0}
.hx .mp-faq details:last-child{border-bottom:1px solid var(--line)}
.hx .mp-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 0;font:600 17px/1.35 var(--display);border-radius:0}
.hx .mp-faq summary::-webkit-details-marker{display:none}
.hx .mp-faq summary::after{content:"+";font:500 22px/1 var(--body);color:var(--accent)}
.hx .mp-faq details[open] summary::after{content:"−"}
.hx .mp-faq summary:focus-visible{outline:none;box-shadow:var(--focus)}
.hx .mp-faq details>p{margin:0 0 18px;padding:0;color:var(--text-2);max-width:740px}
/* inner pages */
.hx.mp-page .page-head{padding:20px 0 0}
.hx .mp-banner{margin:14px 0 0;color:var(--text-2);max-width:820px}
.hx .mp-list{margin:14px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--text-2);max-width:820px}
.hx .mp-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--text-2);font-size:15px}
.hx .mp-legend .tag{margin-right:8px}
.hx .mp-end{padding-bottom:8px}
.hx .mp-pricing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px;align-items:start;margin-top:8px}
.hx .mp-pricing-grid .mp-plan-wrap{position:sticky;top:96px}
.hx .mp-terms section{padding:22px 0 0}
.hx .mp-terms h2{font-size:22px}
.hx .mp-terms p{margin:8px 0 0;color:var(--text-2)}
.hx .mp-terms .std-link{font-weight:600}
.hx .mp-jump{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.hx .mp-jump a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;color:var(--accent)}
.hx .mp-calc{padding:40px 0 0;min-height:760px}
.hx .mp-calc .hb-calc-h{margin:0 0 6px}
.hx .mp-dir{margin-top:20px}
.hx .mp-dir .card h3{font-size:16px}

.hx a:focus-visible,.hx .cta:focus-visible{outline:none;box-shadow:var(--focus)}
@media (max-width:980px){
  .hx .mp-cards3,.hx .mp-steps{grid-template-columns:1fr}
  .hx .mp-pricing-grid{grid-template-columns:1fr}
  .hx .mp-pricing-grid .mp-plan-wrap{position:static}
}
@media (max-width:599px){
  .hx .mp-s{padding-top:44px}
  .hx .mp-cta-row .cta{width:100%;justify-content:center}
  .hx .mp-calc{min-height:1000px}
  .hx .mp-plan-mascot{width:52px;top:-26px}
}

/* ---- v2 (Reuben, 23:38): calm centred hero, trolley mascot in the gutter, aligned stat tiles, no stray section margins ---- */
.hx.mp section{margin:0}
.hx .mp-s{padding:80px 0 0}
.hx .mp-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.hx.mp .cta{margin-top:0;min-height:52px}
.hx .mp-textlink{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.hx .mp-price{margin:12px 0 0;font:600 15px/1.45 var(--body);color:var(--text)}
.hx .mp-reassure{margin:12px 0 0;font-size:14px;color:var(--muted)}
.hx .mp-illus{display:inline-block;font:600 12px/1.3 var(--body);letter-spacing:.01em;background:var(--sun-soft);color:var(--hx-sun-ink);border:1px solid var(--hx-sun-line);border-radius:6px;padding:5px 9px}
.hx .mp-hero{padding:56px 0 24px}
.hx .mp-hero-in{position:relative;max-width:760px;margin:0 auto;text-align:center}
.hx .mp-hero .hx-eyebrow{margin:0}
.hx.mp .mp-hero h1{text-align:center;margin:18px auto 0;max-width:720px}
.hx .mp-hero .hx-lead{max-width:640px;margin:22px auto 0;text-align:center}
.hx .mp-hero .mp-cta-row{justify-content:center;margin-top:34px}
.hx .mp-hero .mp-price{margin:22px auto 0;max-width:560px}
.hx .mp-hero .mp-reassure{margin:10px auto 0;max-width:560px}
.hx .mp-hero-mascot{display:block;width:96px;height:auto;margin:0 auto 14px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(32,37,34,.10))}
@media (min-width:1200px){
  .hx .mp-hero-mascot{position:absolute;left:calc(100% + 8px);top:96px;width:190px;margin:0;transform:rotate(-3deg)}
}
@media (max-width:599px){
  .hx .mp-hero{padding:20px 0 8px}
  .hx .mp-hero-mascot{width:88px;margin-bottom:10px}
  .hx .mp-hero .mp-cta-row{flex-direction:column;gap:6px;margin-top:26px}
  .hx .mp-s{padding-top:56px}
}
/* stat tiles: equal columns, labels one line at a fixed height, values on one baseline, tabular numbers */
.hx .mp-preview{margin-top:24px}
.hx .mp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--surface-1);overflow:hidden}
.hx .mp-tile{padding:18px 22px;border-left:1px solid var(--line);text-align:left;display:grid;grid-template-rows:20px auto;align-items:end}
.hx .mp-tile:first-child{border-left:0}
.hx .mp-tile .l{font-size:13px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx .mp-tile .v{margin-top:6px;font:600 30px/1.1 var(--display);letter-spacing:-.01em}
.hx .num,.hx .mp-tiles,.hx .kpis{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.hx .mp-tiles-note,.hx .mp-kpi-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.hx .mp-kpi-note{padding:8px 20px 12px;border-bottom:1px solid var(--line)}
.hx .mp-preview .mp-cards3{margin-top:18px}
@media (max-width:599px){.hx .mp-tile{padding:14px}.hx .mp-tile .v{font-size:24px}.hx .mp-tile .l{font-size:12px}}
/* sample report KPI tiles: same alignment rules */
.hx .kpis{align-items:start}
.hx .kpi{display:grid;grid-template-rows:18px auto auto;text-align:left}
.hx .kpi .l{line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.hx .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* /pricing: right column flows (no stretched rows) */
.hx .mp-pricing-grid{align-items:start}
.hx .mp-terms{display:flex;flex-direction:column;gap:0;align-self:start}
.hx .mp-terms section{margin:0;padding:0 0 22px}
.hx .mp-terms section:first-child{padding-top:4px}

/* "Other AI tools on request" note (Reuben, 18 Oct 2026) */
.hx .mp-other-tools{margin:12px 0 0;font-size:13.5px;color:var(--muted)}.hx .mp-terms .mp-other-tools{margin:8px 0 0;color:var(--muted)}.hx .mp-other-tools a{color:var(--accent);font-weight:600}
