/* Best Flooring Sacramento. Design: Claude Design system "BF Sacramento" (tokens, components) plus page styles. */
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/SourceSerif4-Variable-latin.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Variable-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Variable-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{--sand:#f4f2ec;--surface:#ffffff;--ink:#14304a;--ink-2:#45607a;--hairline:#ddd3c0;--seaglass:#cfe3dc;--seaglass-ink:#2f6b5c;--accent:#e46a2b;--on-accent:#ffffff;--good:#3f8a63;--mixed:#e0a33a;--poor:#c4502b;--link:var(--ink);--link-hover:var(--accent);--focus-ring:var(--ink);--dot-google:var(--ink);--dot-yelp:var(--accent);--bar-fill:var(--ink);--bar-track:var(--hairline);--font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;--font-sans:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--radius-none:0px;--radius-card:14px;--radius-pill:999px;--page-max:1280px;--measure:68ch;--rule:1px}

a{color:var(--ink)}a:hover{color:var(--accent)}

/* Best Flooring Sacramento: component styles. Every value comes from tokens.css (var(--…)); sizes below mirror the type styles. */

/* ---------- Base ---------- */
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.bf-page { box-sizing: border-box; max-width: calc(var(--page-max) + 2 * var(--space-7)); margin: 0 auto; padding: 0 var(--space-7); }
:where(.bf-page) *, :where(.bf-page) *::before, :where(.bf-page) *::after { box-sizing: border-box; }
:where(.bf-page) :where(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; }
:where(.bf-page) :where(ul, ol) { padding: 0; list-style: none; }
:where(.bf-page) :where(img) { max-width: 100%; display: block; }
.bf-h1 { font-family: var(--font-serif); font-size: 52px; line-height: 56px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.bf-h2 { font-family: var(--font-serif); font-size: 32px; line-height: 38px; font-weight: 600; color: var(--ink); }
.bf-h4 { font-family: var(--font-serif); font-size: 19px; line-height: 26px; font-weight: 600; color: var(--ink); }
.bf-body { font-size: 17px; line-height: 27px; max-width: var(--measure); }
.bf-small { font-size: 15px; line-height: 22px; }
.bf-caption { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.bf-muted { color: var(--ink-2); }
.bf-num { font-family: var(--font-mono); font-weight: 600; font-size: 0.94em; }
.bf-nowrap { white-space: nowrap; }
.bf-sep { color: var(--ink-2); }
.bf-icon { flex: none; display: inline-block; vertical-align: -3px; }
.bf-drawing { mix-blend-mode: multiply; }
.bf-rule { border: 0; border-top: var(--rule) solid var(--hairline); margin: 0; }

/* Links: ink + underline at rest, accent on hover only */
.bf-link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: var(--space-1); }
.bf-link:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.bf-link:focus-visible, .bf-navlink:focus-visible, .bf-sort:focus-visible, .bf-type:focus-visible, .bf-faq summary:focus-visible, .bf-menu summary:focus-visible, .bf-brand:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* Placeholder: visibly marked, never mistaken for data */
.bf-ph { font-family: var(--font-mono); font-size: 0.88em; color: var(--ink-2); border: 1px dashed var(--ink-2); border-radius: 4px; padding: 0 var(--space-1); white-space: nowrap; }

/* ---------- Header ---------- */
.bf-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: var(--rule) solid var(--hairline); }
.bf-brand { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--ink); text-decoration: none; margin: 0; }
.bf-mono { font-family: var(--font-serif); font-size: 34px; line-height: 34px; font-weight: 600; letter-spacing: -0.04em; padding-right: var(--space-4); border-right: var(--rule) solid var(--hairline); }
.bf-brand-name { font-family: var(--font-serif); font-size: 26px; line-height: 30px; font-weight: 500; }
.bf-nav-list { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.bf-navlink { color: var(--ink); text-decoration: none; font-size: 16px; line-height: 24px; padding: var(--space-1) 0; }
.bf-navlink:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 6px; }
.bf-navlink[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bf-menu { display: none; position: relative; }
.bf-menu summary { list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; padding: var(--space-2) var(--space-3); border: var(--rule) solid var(--ink-2); border-radius: var(--radius-pill); }
.bf-menu summary::-webkit-details-marker { display: none; }
.bf-menu-list { position: absolute; right: 0; top: calc(100% + var(--space-2)); background: var(--surface); border: var(--rule) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-2) var(--space-4); min-width: 200px; z-index: 5; list-style: none; margin: 0; }
.bf-menu-list li + li { border-top: var(--rule) solid var(--hairline); }
.bf-menu-list .bf-navlink { display: block; padding: var(--space-3) 0; }

/* ---------- Pills ---------- */
.bf-pill { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; padding: 3px var(--space-3); border-radius: var(--radius-pill); background: var(--seaglass); color: var(--seaglass-ink); font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; }
.bf-pill .bf-sep { color: var(--seaglass-ink); }
.bf-bestfor { margin-top: var(--space-2); }

/* ---------- Breadcrumbs ---------- */
.bf-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.bf-crumbs li { display: inline-flex; gap: var(--space-2); align-items: baseline; }
.bf-crumb-sep { color: var(--ink-2); }
.bf-crumbs [aria-current="page"] { color: var(--ink-2); }

/* ---------- Answer box ---------- */
.bf-answer p { font-size: 19px; line-height: 29px; color: var(--ink); max-width: var(--measure); margin: 0; }
.bf-answer b, .bf-answer strong { font-weight: 600; }
.bf-answer--boxed { background: var(--surface); border: var(--rule) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-5); }

/* ---------- Rank badge ---------- */
.bf-rank { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-family: var(--font-serif); font-size: 20px; line-height: 1; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Score block ---------- */
.bf-score { min-width: 0; }
.bf-score-total { display: flex; align-items: baseline; gap: 2px; margin: 0; }
.bf-score-num { font-family: var(--font-serif); font-size: 40px; line-height: 44px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.bf-score-of { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.bf-score-bar { display: flex; gap: 2px; height: 8px; margin: var(--space-2) 0; max-width: 240px; }
.bf-seg { flex-basis: 0; background: var(--bar-track); overflow: hidden; }
.bf-seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.bf-seg:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.bf-seg-fill { display: block; height: 100%; background: var(--bar-fill); }
.bf-score-parts { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 var(--space-4); font-size: 14px; line-height: 21px; color: var(--ink-2); margin: 0; }
.bf-score-parts .bf-sep { display: none; }
.bf-score-parts .bf-num { color: var(--ink); }

/* ---------- Quote cell ---------- */
.bf-quote p { margin: 0; }
.bf-quote-fig { font-family: var(--font-serif); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; }
.bf-quote-unit { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--ink); }
.bf-quote-detail { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.bf-quote-status { font-family: var(--font-serif); font-size: 19px; line-height: 26px; color: var(--ink-2); }

/* ---------- Reply pill: four states ---------- */
.bf-reply { display: inline-flex; align-items: center; padding: 3px var(--space-3); border-radius: var(--radius-pill); font-size: 14px; line-height: 20px; font-weight: 600; border: var(--rule) solid transparent; max-width: 100%; }
.bf-reply--fast { background: var(--seaglass); color: var(--seaglass-ink); }
.bf-reply--none { background: var(--hairline); color: var(--ink); }
.bf-reply--notasked { background: transparent; color: var(--ink-2); border-color: var(--ink-2); }
.bf-reply--bounced { background: transparent; color: var(--ink-2); border-color: var(--ink-2); border-style: dashed; font-weight: 400; }

/* ---------- License line ---------- */
.bf-license p { margin: 0; }
.bf-years { display: block; width: 120px; height: 4px; margin-top: var(--space-2); background: var(--bar-track); border-radius: var(--radius-pill); overflow: hidden; }
.bf-years > span { display: block; height: 100%; background: var(--bar-fill); }

/* ---------- Ratings line ---------- */
.bf-ratings p { margin: 0; }
.bf-dot { display: inline-block; width: 9px; height: 9px; border-radius: var(--radius-pill); margin-right: 5px; vertical-align: 1px; }
.bf-dot--google { background: var(--dot-google); }
.bf-dot--yelp { background: var(--dot-yelp); }
.bf-scale { position: relative; height: 26px; width: 180px; margin: var(--space-1) 0 0 6px; }
.bf-scale-line { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--bar-track); }
.bf-scale-line::before, .bf-scale-line::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--ink-2); }
.bf-scale-line::before { left: 0; } .bf-scale-line::after { right: 0; }
.bf-scale-dot { position: absolute; width: 10px; height: 10px; margin-left: -5px; border-radius: var(--radius-pill); top: 3.5px; box-shadow: 0 0 0 2px var(--surface); }
.bf-scale-dot.bf-dot--google { top: 0px; }
.bf-scale-dot.bf-dot--yelp { top: 7px; }
.bf-scale-end { position: absolute; top: 14px; font-size: 11px; line-height: 12px; color: var(--ink-2); transform: translateX(-50%); }
.bf-scale-end--min { left: 0; } .bf-scale-end--max { left: 100%; }
.bf-ratings .bf-caption { margin-top: 2px; }

/* ---------- Aspect dots: color + shape + word ---------- */
.bf-aspects { display: grid; grid-template-columns: 1fr; gap: 2px var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 21px; }
.bf-aspects--2 { grid-template-columns: 1fr 1fr; }
.bf-aspects--3 { grid-template-columns: repeat(3, 1fr); }
.bf-aspect { display: flex; align-items: baseline; gap: var(--space-1); min-width: 0; }
.bf-aspect-name { color: var(--ink); }
.bf-aspect-val { color: var(--ink-2); margin-left: auto; padding-left: var(--space-2); white-space: nowrap; }
.bf-adot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-pill); align-self: center; margin-right: 2px; box-sizing: border-box; }
.bf-adot--good { background: var(--good); }
.bf-adot--mixed { border: 1.5px solid var(--mixed); background: linear-gradient(90deg, var(--mixed) 50%, transparent 50%); }
.bf-adot--poor { border: 2.5px solid var(--poor); background: transparent; }
.bf-adot--none { border: 1px dashed var(--ink-2); background: transparent; }

/* ---------- Complaint chip ---------- */
.bf-chip { display: inline-block; margin: var(--space-3) 0 0; padding: 5px var(--space-3); border-radius: var(--radius-card); border: var(--rule) solid var(--hairline); background: var(--surface); font-size: 14px; line-height: 20px; color: var(--ink); }
.bf-chip-k { color: var(--ink-2); }
.bf-chip--none { color: var(--ink-2); }

/* ---------- Pros and cons ---------- */
.bf-pc { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.bf-pc-h { margin: 0 0 var(--space-1); font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.bf-pc-list { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.bf-pc-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.bf-pc-list li + li { margin-top: var(--space-1); }
.bf-pc-list .bf-icon { margin-top: 2px; }
.bf-pc-list--pro .bf-icon { color: var(--good); }
.bf-pc-list--con .bf-icon { color: var(--poor); }

/* ---------- Outbound links ---------- */
.bf-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.bf-links-profile { margin-left: auto; font-weight: 600; }

/* ---------- Company block ---------- */
.bf-co { border-top: var(--rule) solid var(--hairline); padding: var(--space-6) 0; display: grid; gap: var(--space-5); }
.bf-co p { margin: 0; }
.bf-co-head { grid-area: head; display: flex; gap: var(--space-3); align-items: flex-start; }
.bf-co-name { font-family: var(--font-serif); font-size: 24px; line-height: 30px; font-weight: 600; margin: 2px 0 0; color: var(--ink); }
.bf-co-city { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.bf-co-score { grid-area: score; }
.bf-co-quote { grid-area: quote; }
.bf-co-lic { grid-area: lic; }
.bf-co-asp { grid-area: asp; }
.bf-co-pc { grid-area: pc; }
.bf-co-tl { grid-area: tl; font-family: var(--font-serif); font-size: 19px; line-height: 26px; font-weight: 600; }
.bf-co-take { grid-area: take; }
.bf-co-take > p { font-size: 17px; line-height: 27px; max-width: var(--measure); }
.bf-co-take > .bf-links { margin-top: var(--space-4); }
.bf-field { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--space-1) !important; }
.bf-field--gap { margin-top: var(--space-4) !important; }

/* Row: five data columns, then Our take with pros and cons */
.bf-co--row { grid-template-columns: 250px 210px 190px 250px minmax(220px, 1fr); grid-template-areas: "head score quote lic asp" "tl take take take pc"; column-gap: var(--space-5); row-gap: var(--space-5); }
.bf-co--row .bf-co-tl { padding-left: 48px; }
/* Card: one column, on surface */
.bf-co--card { grid-template-columns: 1fr; grid-template-areas: "head" "score" "quote" "lic" "asp" "pc" "tl" "take"; background: var(--surface); border: var(--rule) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-5); gap: var(--space-4); }
.bf-co--card .bf-co-cell + .bf-co-cell, .bf-co--card .bf-co-pc { border-top: var(--rule) solid var(--hairline); padding-top: var(--space-4); }
.bf-co--card .bf-co-tl { margin-bottom: calc(-1 * var(--space-3)); border-top: var(--rule) solid var(--hairline); padding-top: var(--space-4); }
.bf-co--card .bf-co-quote { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); align-items: start; }
.bf-co--card .bf-co-quote > .bf-field:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.bf-co--card .bf-co-quote > .bf-quote { grid-column: 1; grid-row: 2; }
.bf-co--card .bf-co-quote > .bf-field--gap { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
.bf-co--card .bf-co-quote > .bf-reply { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; }
.bf-co--card .bf-score-bar, .bf-co--card .bf-score-parts { max-width: none; }
.bf-co--card .bf-links-profile { margin-left: 0; flex-basis: 100%; }
@media (max-width: 1100px) {
  .bf-co--row { grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "score quote" "lic asp" "pc pc" "tl tl" "take take"; }
  .bf-co--row .bf-co-tl { padding-left: 0; }
}
@media (max-width: 640px) {
  .bf-co--row { grid-template-columns: 1fr; grid-template-areas: "head" "score" "quote" "lic" "asp" "pc" "tl" "take"; background: var(--surface); border: var(--rule) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-4); gap: var(--space-4); }
  .bf-co--card { padding: var(--space-4); }
  .bf-co .bf-aspects { grid-template-columns: 1fr; }
}

/* ---------- Ranking table ---------- */
.bf-table-wrap { width: 100%; }
.bf-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.bf-table caption { text-align: left; font-size: 13px; line-height: 18px; color: var(--ink-2); padding-bottom: var(--space-2); }
.bf-table thead th { text-align: left; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding: var(--space-3) var(--space-3) var(--space-3) 0; border-top: var(--rule) solid var(--ink-2); border-bottom: var(--rule) solid var(--ink-2); white-space: nowrap; }
.bf-table tbody th, .bf-table tbody td { text-align: left; vertical-align: middle; padding: var(--space-4) var(--space-3) var(--space-4) 0; border-bottom: var(--rule) solid var(--hairline); font-weight: 400; }
.bf-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.bf-sort:hover { color: var(--ink); }
.bf-sort-icons { display: inline-flex; flex-direction: column; line-height: 0; }
.bf-sort-icons .bf-icon { opacity: 0.45; vertical-align: 0; margin: -2px 0; }
.bf-sort-icons .bf-icon.is-on { opacity: 1; color: var(--ink); }
.bf-td-in { display: flex; align-items: center; gap: var(--space-3); }
.bf-td-in > span:last-child { display: flex; flex-direction: column; }
.bf-table .bf-td-name { font-family: var(--font-serif); font-size: 19px; line-height: 24px; font-weight: 600; text-decoration-color: var(--hairline); }
.bf-td-city { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.bf-num-lg { font-family: var(--font-serif); font-size: 30px; line-height: 34px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.bf-table .bf-quote-fig { font-size: 19px; line-height: 24px; }
.bf-table .bf-quote-unit, .bf-table .bf-quote-detail { font-size: 14px; line-height: 20px; }
.bf-table .bf-quote-status { font-size: 16px; line-height: 22px; }
.bf-table td[data-label="License"] { white-space: nowrap; }
.bf-empty { color: var(--ink-2); text-align: center !important; padding: var(--space-6) 0 !important; }
@media (max-width: 640px) {
  .bf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bf-table caption { display: block; }
  .bf-table, .bf-table tbody { display: block; width: 100%; }
  .bf-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-3); row-gap: 12px; align-items: start; padding: 16px 0; border-bottom: var(--rule) solid var(--hairline); }
  .bf-table tbody th, .bf-table tbody td { border: 0; padding: 0; }
  .bf-table .bf-td-co { grid-column: 1 / 3; grid-row: 1; align-self: center; }
  .bf-table .bf-td-num { grid-column: 3; grid-row: 1; text-align: right; align-self: center; }
  .bf-table td[data-m] { grid-row: 2; min-width: 0; font-size: 14px; line-height: 20px; white-space: normal; }
  .bf-table td[data-m]::before { content: attr(data-m); display: block; margin-bottom: 4px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .bf-table .bf-quote-fig { font-size: 18px; line-height: 22px; white-space: nowrap; }
  .bf-table .bf-quote-unit { font-size: 12px; }
  .bf-table .bf-quote-detail { display: block; font-size: 12px; line-height: 16px; }
  .bf-table .bf-quote-status { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-2); }
  .bf-num-lg { font-size: 26px; line-height: 30px; }
  .bf-table .bf-reply { font-size: 13px; line-height: 18px; padding: 2px var(--space-2); }
}

/* ---------- Finding tile ---------- */
.bf-finding p { margin: 0; }
.bf-finding--lead { background: var(--surface); border: var(--rule) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); text-align: center; }
.bf-finding--lead .bf-finding-big { font-family: var(--font-serif); font-size: 64px; line-height: 64px; font-weight: 600; color: var(--accent); font-variant-numeric: lining-nums; }
.bf-finding--lead .bf-finding-text { font-size: 19px; line-height: 27px; margin-top: var(--space-3); color: var(--ink); text-wrap: balance; }
.bf-finding--lead .bf-finding-more { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--rule) solid var(--hairline); font-weight: 600; display: flex; justify-content: center; }
.bf-finding--row { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-top: var(--rule) solid var(--hairline); }
.bf-finding--row .bf-finding-big { font-family: var(--font-serif); font-size: 40px; line-height: 44px; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; }
.bf-finding--row .bf-finding-text { font-size: 17px; line-height: 26px; }
.bf-finding--row .bf-finding-more { grid-column: 2; }

/* ---------- Flooring type tile (index row with texture swatch) ---------- */
.bf-type { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: var(--rule) solid var(--hairline); color: var(--ink); text-decoration: none; }
.bf-type-img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-card); }
.bf-type-body { display: flex; flex-direction: column; }
.bf-type-name { font-family: var(--font-serif); font-size: 22px; line-height: 28px; font-weight: 600; }
.bf-type-count { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.bf-type-arrow { color: var(--ink-2); }
.bf-type:hover .bf-type-name { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bf-type:hover .bf-type-arrow { color: var(--ink); }

/* ---------- FAQ item ---------- */
.bf-faq { border-top: var(--rule) solid var(--hairline); }
.bf-faq:last-child { border-bottom: var(--rule) solid var(--hairline); }
.bf-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink); }
.bf-faq summary::-webkit-details-marker { display: none; }
.bf-faq summary:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.bf-faq-icon { flex: none; color: var(--ink-2); padding-top: 3px; }
.bf-faq-minus { display: none !important; }
.bf-faq[open] .bf-faq-minus { display: inline-block !important; }
.bf-faq[open] .bf-faq-plus { display: none !important; }
.bf-faq-a { padding: 0 var(--space-7) var(--space-5) 0; }
.bf-faq-a p { margin: 0; font-size: 17px; line-height: 27px; max-width: var(--measure); }
.bf-faq-a p + p { margin-top: var(--space-3); }

/* ---------- What changed, sources ---------- */
.bf-change { border-top: var(--rule) solid var(--ink-2); padding-top: var(--space-3); }
.bf-change-h { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: 19px; line-height: 26px; font-weight: 600; }
.bf-change ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 24px; }
.bf-change li + li { margin-top: var(--space-1); }
.bf-sources { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-2); max-width: var(--measure); }
.bf-sources b { font-weight: 600; color: var(--ink); }

/* ---------- Footer ---------- */
.bf-footer { border-top: var(--rule) solid var(--ink-2); padding: var(--space-7) 0 var(--space-6); margin-top: var(--space-9); }
.bf-footer p { margin: 0; }
.bf-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.bf-foot-about { display: flex; flex-direction: column; gap: var(--space-3); max-width: 380px; }
.bf-foot-about .bf-mono { font-size: 26px; line-height: 26px; padding-right: var(--space-3); }
.bf-foot-about .bf-brand-name { font-size: 20px; line-height: 26px; }
.bf-foot-h { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: 17px; line-height: 24px; font-weight: 600; }
.bf-foot-col ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.bf-foot-col li + li { margin-top: var(--space-2); }
.bf-foot-base { margin-top: var(--space-6) !important; padding-top: var(--space-4); border-top: var(--rule) solid var(--hairline); font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* ---------- Responsive base ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 25px; }
  .bf-page { padding: 0 var(--space-4); }
  .bf-h1 { font-size: 34px; line-height: 38px; }
  .bf-h2 { font-size: 26px; line-height: 32px; }
  .bf-header { padding: var(--space-3) 0; }
  .bf-nav { display: none; }
  .bf-menu { display: block; }
  .bf-mono { font-size: 26px; line-height: 26px; padding-right: var(--space-3); }
  .bf-brand { gap: var(--space-3); }
  .bf-brand-name { font-size: 17px; line-height: 22px; white-space: nowrap; }
  .bf-menu summary { padding: 6px var(--space-3); }
  .bf-answer p { font-size: 16px; line-height: 24px; }
  .bf-finding--lead { padding: var(--space-5) var(--space-4); }
  .bf-finding--lead .bf-finding-big { font-size: 52px; line-height: 56px; }
  .bf-finding--row { grid-template-columns: 84px 1fr; }
  .bf-finding--row .bf-finding-big { font-size: 32px; line-height: 38px; }
  .bf-foot-grid { grid-template-columns: 1fr 1fr; }
  .bf-foot-about { grid-column: 1 / -1; }
  .bf-faq-a { padding-right: 0; }
}

/* ---------- page: Main ---------- */
.hp-hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;padding-top:32px;align-items:start}
.hp-hero .bf-h1{margin:16px 0 8px;max-width:820px}
.hp-sub{font-family:var(--font-serif);font-size:24px;line-height:30px;font-weight:400;color:var(--ink-2);margin:0 0 16px}
.hp-hero .bf-answer{margin-bottom:24px}
.hp-art{display:flex;flex-direction:column;gap:16px}
.hp-art img{width:100%;height:auto}
.hp-more{margin-top:12px;font-weight:600}
.hp-section{margin-top:64px}
.hp-section .bf-h2{margin-bottom:12px}
.hp-intro{font-size:17px;line-height:27px;max-width:68ch;margin:0 0 24px}
.hp-findings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
.hp-tophead{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
.hp-bf{display:flex;flex-wrap:wrap;gap:12px 32px;margin:20px 0 0;padding:0;list-style:none}
.hp-bf li{display:flex;align-items:center;gap:8px;font-size:15px;line-height:22px}
.hp-bf .bf-bestfor{margin:0}
.hp-legend{margin:32px 0 0;padding:12px 0;border-top:1px solid var(--ink-2);font-size:15px;line-height:22px;color:var(--ink-2)}
.hp-legend b{color:var(--ink);font-weight:600}
.hp-legend .bf-adot{display:inline-block;vertical-align:-1px;margin:0 4px 0 8px}
.hp-legend .bf-dot{margin-left:6px}
.hp-also{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.hp-also caption{text-align:left;font-size:13px;line-height:18px;color:var(--ink-2);padding-bottom:8px}
.hp-also th,.hp-also td{text-align:left;vertical-align:middle;padding:12px 16px 12px 0;border-bottom:1px solid var(--hairline);font-weight:400}
.hp-also thead th{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--ink-2);border-bottom-color:var(--ink-2);white-space:nowrap}
.hp-also .hp-co{display:flex;align-items:center;gap:12px}
.hp-also .hp-co-name{font-family:var(--font-serif);font-size:19px;line-height:24px;font-weight:600}
.hp-also .hp-city{display:block;font-size:14px;line-height:20px;color:var(--ink-2)}
.hp-also .hp-score{font-family:var(--font-serif);font-size:24px;line-height:28px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.hp-also .hp-of{font-size:14px;color:var(--ink-2)}
.hp-browse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.hp-cities{margin:0;padding:0;list-style:none}
.hp-cities li{border-top:1px solid var(--hairline);padding:14px 0}
.hp-city-name{font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:600}
.hp-cities p{margin:2px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.hp-nr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.hp-nr h3{font-family:var(--font-serif);font-size:19px;line-height:26px;font-weight:600;margin:0 0 4px;padding-top:12px;border-top:1px solid var(--ink-2)}
.hp-nr .hp-count{font-size:15px;line-height:22px;color:var(--ink-2);margin:0 0 8px}
.hp-nr ul{margin:0;padding:0;list-style:none;font-size:15px;line-height:22px}
.hp-nr ul li{padding:8px 0;border-bottom:1px solid var(--hairline)}
.hp-faq{display:grid;grid-template-columns:360px minmax(0,1fr);gap:48px;align-items:start}
.hp-faq img{width:100%;height:auto;margin-top:24px}
.hp-sources{margin-top:32px}
@media (max-width:1100px){.hp-hero,.hp-tophead,.hp-nr{grid-template-columns:1fr}}
@media (max-width:640px){.hp-hero,.hp-tophead,.hp-browse,.hp-nr,.hp-faq,.hp-findings{grid-template-columns:1fr;gap:24px}.hp-section{margin-top:48px}.hp-also-wrap{overflow-x:auto}}

/* ---------- page: List-Hardwood ---------- */
.lp-crumbs{margin-top:20px}
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;padding-top:16px;align-items:start}
.lp-hero .bf-h1{margin:12px 0 16px;max-width:820px}
.lp-art img{width:100%;height:auto}
.lp-filters{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.lp-filters-h{margin:0;font-size:15px;line-height:22px;color:var(--ink-2)}
.lp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lp-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--ink-2);border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;font-size:15px;line-height:22px;background:transparent}
.lp-chip:hover{color:var(--link-hover);border-color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lp-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.lp-chip[aria-current="page"]{border:2px solid var(--ink);padding:0 15px;font-weight:600;background:var(--surface)}
.lp-section{margin-top:64px}
.lp-section .bf-h2{margin-bottom:8px}
.lp-intro{font-size:17px;line-height:27px;max-width:68ch;margin:0}
.lp-rowshead{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
.lp-legend{margin:32px 0 0;padding:12px 0;border-top:1px solid var(--ink-2);font-size:15px;line-height:22px;color:var(--ink-2)}
.lp-legend b{color:var(--ink);font-weight:600}
.lp-legend .bf-adot{display:inline-block;vertical-align:-1px;margin:0 4px 0 8px}
.lp-legend .bf-dot{margin-left:6px}
.lp-compact{width:100%;border-collapse:collapse;font-size:15px;line-height:22px;margin-top:16px}
.lp-compact caption{text-align:left;font-size:13px;line-height:18px;color:var(--ink-2);padding-bottom:8px}
.lp-compact th,.lp-compact td{text-align:left;vertical-align:middle;padding:12px 16px 12px 0;border-bottom:1px solid var(--hairline);font-weight:400}
.lp-compact thead th{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--ink-2);border-bottom-color:var(--ink-2);white-space:nowrap}
.lp-co{display:flex;align-items:center;gap:12px}
.lp-co-name{font-family:var(--font-serif);font-size:19px;line-height:24px;font-weight:600}
.lp-city{display:block;font-size:14px;line-height:20px;color:var(--ink-2)}
.lp-score{font-family:var(--font-serif);font-size:24px;line-height:28px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.lp-of{font-size:14px;color:var(--ink-2)}
.lp-more{display:inline-flex;margin-top:16px;font-weight:600}
.lp-nr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.lp-nr h3{font-family:var(--font-serif);font-size:19px;line-height:26px;font-weight:600;margin:0 0 4px;padding-top:12px;border-top:1px solid var(--ink-2)}
.lp-nr .lp-count{font-size:15px;line-height:22px;color:var(--ink-2);margin:0 0 8px}
.lp-nr ul{margin:0;padding:0;list-style:none;font-size:15px;line-height:22px}
.lp-nr ul li{padding:8px 0;border-bottom:1px solid var(--hairline)}
.lp-faq{display:grid;grid-template-columns:360px minmax(0,1fr);gap:48px;align-items:start}
.lp-sources{margin-top:32px}
@media (max-width:1100px){.lp-hero,.lp-rowshead,.lp-nr{grid-template-columns:1fr}}
@media (max-width:640px){.lp-hero,.lp-rowshead,.lp-nr,.lp-faq{grid-template-columns:1fr;gap:24px}.lp-art{display:none}.lp-chip{min-height:44px}}

/* ---------- page: List-Roseville ---------- */
.lp-nearby{margin:16px 0 0;padding:12px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);font-size:15px;line-height:22px;max-width:68ch}
.lp-nearby b{font-weight:600}
.lp-empty{color:var(--ink-2);padding:24px 0 !important}
@media (max-width:1100px){.lp-hero,.lp-rowshead{grid-template-columns:1fr}}
@media (max-width:640px){.lp-hero,.lp-rowshead,.lp-faq{grid-template-columns:1fr;gap:24px}.lp-art{display:none}.lp-chip{min-height:44px}}

/* ---------- page: Profile-HIS ---------- */
.pf-crumbs{margin-top:20px}
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start;margin-top:24px}
.pf-main{min-width:0}
.pf-h1{margin:0}
.pf-meta{margin:8px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.pf-rank{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.pf-rank-text{font-family:var(--font-serif);font-size:19px;line-height:26px;font-weight:600}
.pf-rank .bf-bestfor{margin:0}
.pf-why{margin-top:24px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:24px}
.pf-why h2{font-family:var(--font-serif);font-size:24px;line-height:30px;font-weight:600;margin:0 0 8px}
.pf-why p{margin:0;font-size:19px;line-height:29px;max-width:68ch}
.pf-sec{margin-top:48px}
.pf-sec > h2{font-family:var(--font-serif);font-size:24px;line-height:30px;font-weight:600;margin:0 0 12px;padding-top:16px;border-top:1px solid var(--ink-2)}
.pf-pc .bf-pc{grid-template-columns:1fr 1fr;gap:32px}
.pf-pc .bf-pc-list{font-size:16px;line-height:24px}
.pf-links{margin-top:24px}
.pf-links .bf-links{margin:0;font-size:16px}
.pf-note{margin:12px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.pf-quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 32px}
.pf-k{margin:0 0 4px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pf-v{margin:0;font-size:16px;line-height:24px}
.pf-quote .bf-quote-fig{font-size:32px;line-height:38px}
.pf-offer{margin:0;display:grid;grid-template-columns:200px minmax(0,1fr)}
.pf-offer dt,.pf-offer dd{margin:0;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:16px;line-height:24px}
.pf-offer dt{color:var(--ink-2)}
.pf-similar{margin:0;padding:0;list-style:none}
.pf-similar li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hairline)}
.pf-similar li:first-child{border-top:1px solid var(--hairline)}
.pf-sim-name{font-family:var(--font-serif);font-size:19px;line-height:24px;font-weight:600}
.pf-sim-sub{display:block;font-size:14px;line-height:20px;color:var(--ink-2)}
.pf-sim-score{font-family:var(--font-serif);font-size:22px;line-height:26px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.pf-sim-of{font-size:13px;color:var(--ink-2)}
.pf-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
.pf-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:20px 24px}
.pf-card h2{font-family:var(--font-serif);font-size:19px;line-height:26px;font-weight:600;margin:0 0 12px}
.pf-total{display:flex;align-items:baseline;gap:4px;margin:0}
.pf-total-num{font-family:var(--font-serif);font-size:40px;line-height:44px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.pf-total-of{font-size:15px;color:var(--ink-2)}
.pf-total-rank{margin-left:auto;font-size:14px;line-height:20px;color:var(--ink-2)}
.pf-bars{margin:16px 0 0;padding:0;list-style:none}
.pf-bars li{padding:8px 0;border-top:1px solid var(--hairline)}
.pf-bar-row{display:flex;justify-content:space-between;font-size:15px;line-height:22px}
.pf-bar-row b{font-family:var(--font-mono);font-weight:600;font-size:14px}
.pf-bar{display:block;height:8px;margin-top:6px;background:var(--bar-track);border-radius:var(--radius-pill);overflow:hidden}
.pf-bar > span{display:block;height:100%;background:var(--bar-fill)}
.pf-lic{margin:0;display:grid;grid-template-columns:110px minmax(0,1fr)}
.pf-lic dt,.pf-lic dd{margin:0;padding:7px 0;border-top:1px solid var(--hairline);font-size:15px;line-height:22px}
.pf-lic dt{color:var(--ink-2)}
.pf-lic .bf-num{font-size:14px}
.pf-years{display:block;width:100%;max-width:180px;height:4px;margin-top:6px;background:var(--bar-track);border-radius:var(--radius-pill);overflow:hidden}
.pf-years > span{display:block;height:100%;background:var(--bar-fill)}
.pf-years-cap{display:block;font-size:12px;line-height:16px;color:var(--ink-2);margin-top:2px}
.pf-verify{display:inline-flex;margin-top:12px;font-weight:600;font-size:15px}
.pf-card .bf-ratings .bf-small{font-size:15px}
.pf-card .bf-scale{width:200px}
@media (max-width:1100px){.pf-grid{grid-template-columns:1fr;gap:32px}.pf-side{position:static}}
@media (max-width:640px){.pf-pc .bf-pc{grid-template-columns:1fr}.pf-quote{grid-template-columns:1fr}.pf-offer{grid-template-columns:1fr}.pf-offer dt{padding-bottom:0;border-bottom:0}.pf-why{padding:16px}.pf-why p{font-size:16px;line-height:24px}}

/* ---------- page: Profile-NotRanked ---------- */
.pf-nr-pill{display:inline-flex;align-items:center;padding:3px 12px;border:1px solid var(--ink-2);border-radius:var(--radius-pill);font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.pf-why p + p{margin-top:12px;font-size:16px;line-height:24px}
.pf-card p{margin:0;font-size:15px;line-height:22px}
.pf-status{font-family:var(--font-serif);font-size:24px;line-height:30px;font-weight:600;margin:0 0 6px !important}
.pf-muted{color:var(--ink-2)}
@media (max-width:640px){.pf-offer{grid-template-columns:1fr}.pf-offer dt{padding-bottom:0;border-bottom:0}.pf-why{padding:16px}.pf-why p{font-size:16px;line-height:24px}}

/* ---------- page: Cost-LVP ---------- */
.cp-crumbs{margin-top:20px}
.cp-hero{padding-top:16px;max-width:900px}
.cp-hero .bf-h1{margin:12px 0 20px}
.cp-method{margin:16px 0 0;font-size:15px;line-height:22px;color:var(--ink-2);max-width:68ch}
.cp-sec{margin-top:64px}
.cp-sec .bf-h2{margin-bottom:8px}
.cp-intro{margin:0 0 20px;font-size:17px;line-height:27px;max-width:68ch}
.cp-tiers{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink-2)}
.cp-tier{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:32px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hairline)}
.cp-tier-name{margin:0;font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:600}
.cp-tier-spec{margin:2px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.cp-range{position:relative;height:14px;border:1px dashed var(--ink-2);border-radius:var(--radius-pill)}
.cp-range-cap{display:block;margin-top:6px;font-size:13px;line-height:18px;color:var(--ink-2)}
.cp-tier-val{margin:0;font-size:17px;line-height:26px}
.cp-tier-val .cp-unit{color:var(--ink-2);font-size:15px}
.cp-pair{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:start}
.cp-table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.cp-table caption{text-align:left;font-size:13px;line-height:18px;color:var(--ink-2);padding-bottom:8px}
.cp-table th,.cp-table td{text-align:left;vertical-align:middle;padding:12px 16px 12px 0;border-bottom:1px solid var(--hairline);font-weight:400}
.cp-table thead th{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--ink-2);border-bottom-color:var(--ink-2);white-space:nowrap}
.cp-table tbody th{font-family:var(--font-serif);font-size:19px;line-height:24px;font-weight:600}
.cp-h3{margin:0 0 12px;font-family:var(--font-serif);font-size:24px;line-height:30px;font-weight:600}
.cp-split{height:16px;border:1px dashed var(--ink-2);border-radius:var(--radius-pill)}
.cp-split-legend{display:flex;justify-content:space-between;gap:16px;margin:8px 0 0;font-size:15px;line-height:22px}
.cp-extra{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink-2)}
.cp-extra li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hairline)}
.cp-extra-name{font-weight:600;font-size:16px;line-height:24px}
.cp-extra-desc{grid-column:1;font-size:14px;line-height:20px;color:var(--ink-2)}
.cp-extra-count{grid-row:1 / 3;grid-column:2;font-size:15px;line-height:22px;text-align:right;align-self:center}
.cp-co{display:flex;align-items:center;gap:12px}
.cp-co-name{font-family:var(--font-serif);font-size:19px;line-height:24px;font-weight:600}
.cp-city{display:block;font-size:14px;line-height:20px;color:var(--ink-2)}
.cp-score{font-family:var(--font-serif);font-size:22px;line-height:26px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.cp-of{font-size:13px;color:var(--ink-2)}
.cp-table .bf-quote-status{font-size:16px;line-height:22px}
.cp-faq{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px;align-items:start}
.cp-faq img{width:100%;max-width:280px;height:auto;margin-top:24px}
.cp-sources{margin-top:32px}
@media (max-width:1100px){.cp-tier{grid-template-columns:1fr;gap:10px}.cp-pair,.cp-faq{grid-template-columns:1fr;gap:40px}}
@media (max-width:640px){.cp-tablewrap{overflow-x:auto}}

/* ---------- page: Cost-Hub ---------- */
.ch-crumbs{margin-top:20px}
.ch-hero{padding-top:16px;max-width:900px}
.ch-hero .bf-h1{margin:12px 0 20px}
.ch-sec{margin-top:64px}
.ch-sec .bf-h2{margin-bottom:8px}
.ch-intro{margin:0 0 20px;font-size:17px;line-height:27px;max-width:68ch}
.ch-table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
.ch-table caption{text-align:left;font-size:13px;line-height:18px;color:var(--ink-2);padding-bottom:8px}
.ch-table thead th{text-align:left;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:12px 24px 12px 0;border-top:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);white-space:nowrap}
.ch-table td{vertical-align:middle;padding:12px 24px 12px 0;border-bottom:1px solid var(--hairline)}
.ch-table td:first-child{width:38%}
.ch-table .bf-type{border-top:0;padding:0}
.ch-price{margin:0;font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:600}
.ch-price-unit{font-family:var(--font-sans);font-size:15px;font-weight:400;color:var(--ink-2)}
.ch-sub{display:block;font-size:14px;line-height:20px;color:var(--ink-2)}
.ch-count{font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.ch-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:start}
.ch-note p{margin:0 0 12px;font-size:17px;line-height:27px;max-width:68ch}
.ch-stats{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink-2)}
.ch-stats li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hairline)}
.ch-stat-big{font-family:var(--font-serif);font-size:32px;line-height:36px;font-weight:600;font-variant-numeric:lining-nums}
.ch-stat-text{font-size:16px;line-height:24px}
.ch-faq{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px;align-items:start}
.ch-sources{margin-top:32px}
@media (max-width:1100px){.ch-split,.ch-faq{grid-template-columns:1fr;gap:40px}}

/* ---------- page: Article-License ---------- */
.ar-crumbs{margin-top:20px}
.ar-head{max-width:960px;margin:32px 0 0 120px}
.ar-head .bf-h1{margin:0}
.ar-updated{margin:16px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.ar-col{max-width:680px;margin:32px 0 0 120px}
.ar-col p{margin:0 0 22px;font-size:19px;line-height:31px}
.ar-col h2{font-family:var(--font-serif);font-size:32px;line-height:38px;font-weight:600;margin:64px 0 18px}
.ar-col .bf-answer--boxed{padding:24px 28px}
.ar-col .bf-answer p{margin:0}
.ar-fig{float:right;width:320px;margin:4px -400px 24px 32px}
.ar-fig img{width:100%;height:auto;display:block}
.ar-facts{width:100%;border-collapse:collapse;margin:40px 0 8px;font-size:16px;line-height:24px}
.ar-facts caption{text-align:left;font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:600;padding-bottom:12px}
.ar-facts th,.ar-facts td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--hairline)}
.ar-facts tr:first-child th,.ar-facts tr:first-child td{border-top:1px solid var(--ink-2)}
.ar-facts th{width:44%;font-weight:400;color:var(--ink-2)}
.ar-facts td{font-weight:600}
.ar-callout{margin:40px 0 44px}
.ar-steps{margin:8px 0 24px;padding:0;list-style:none;counter-reset:step}
.ar-steps li{counter-increment:step;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:8px;padding:18px 0;border-top:1px solid var(--hairline)}
.ar-steps li:last-child{border-bottom:1px solid var(--hairline)}
.ar-steps li::before{content:counter(step);grid-row:1 / 3;font-family:var(--font-serif);font-size:32px;line-height:34px;font-weight:600;font-variant-numeric:lining-nums}
.ar-step-t{margin:0 0 4px !important;font-weight:600;font-size:19px !important;line-height:28px !important}
.ar-step-d{margin:0 !important;font-size:17px !important;line-height:27px !important}
.ar-faq{margin-top:8px}
.ar-sources{margin-top:48px;padding-top:16px;border-top:1px solid var(--ink-2)}
.ar-sources .bf-sources{font-size:14px;line-height:21px}
.ar-corr{margin:10px 0 0 !important;font-size:14px !important;line-height:21px !important;color:var(--ink-2)}
@media (max-width:1100px){.ar-head,.ar-col{margin-left:0}.ar-fig{width:240px;margin:4px 0 16px 24px}}
@media (max-width:640px){.ar-col p{font-size:17px;line-height:28px}.ar-fig{width:128px;margin:4px 0 12px 16px}.ar-col h2{font-size:26px;line-height:32px;margin-top:48px}}

/* ---------- page: Article-HowWeRank ---------- */
.ar-col h3{font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:600;margin:32px 0 8px}
.ar-col h3 .ar-pts{font-family:var(--font-sans);font-size:15px;font-weight:400;color:var(--ink-2)}

/* ---------- Site additions (not in the canvas) ---------- */
/* Text for screen readers and crawlers that the layout shows by position */
.bf-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf-why--nr{border-color:var(--ink-2)}
.pf-card--nr h2{margin-bottom:8px}
.pf-offer dd ul{margin:0;padding:0;list-style:none}
.ar-col ul.ar-list{margin:0 0 22px;padding-left:20px;list-style:disc}
.ar-col ul.ar-list li{margin:0 0 8px;font-size:19px;line-height:31px}
.hp-cities .hp-city-plain{font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:600}
.nf-page{padding:64px 0}
/* Compact ranking tables become rows on a phone: badge and name, score, then one line of facts */
@media (max-width:640px){
  .bf-page{overflow-x:hidden}
  .hp-art img,.lp-art{display:none}
  .bf-rowtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bf-rowtable,.bf-rowtable tbody{display:block;width:100%}
  .bf-rowtable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;padding:12px 0;border-top:1px solid var(--hairline)}
  .bf-rowtable tbody th,.bf-rowtable tbody td{display:block;border:0;padding:0}
  .bf-rowtable tbody th{grid-column:1}
  .bf-rowtable td.bf-rt-score{grid-column:2;grid-row:1;text-align:right}
  .bf-rowtable td.bf-rt-fact{grid-column:1 / -1;font-size:14px;line-height:20px;color:var(--ink-2);padding-left:48px}
  .bf-rowtable td.bf-rt-fact .bf-reply{font-size:13px;padding:2px 8px}
  .ar-col ul.ar-list li{font-size:17px;line-height:28px}
}
.bf-co-link{color:inherit;text-decoration:none}
.bf-co-link:hover{color:var(--link-hover);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cp-range--on{display:block;border:0;background:var(--bar-track)}
.cp-range--on > span{position:absolute;top:0;bottom:0;background:var(--bar-fill);border-radius:var(--radius-pill)}
.cp-split--on{display:flex;border:0;background:var(--seaglass);overflow:hidden}
.cp-split--on > span{display:block;height:100%;background:var(--ink)}
/* Fixes found on the built pages */
.bf-co--row .bf-score-parts{grid-template-columns:1fr}
.bf-finding--row{grid-template-columns:140px 1fr}
@media (max-width:640px){.bf-finding--row{grid-template-columns:108px 1fr}}
.bf-finding-big{white-space:nowrap}
.hp-also .bf-reply{white-space:nowrap}
.hp-also td:nth-child(5){white-space:nowrap}
.hp-also th[scope="row"]{min-width:260px}
@media (max-width:640px){.bf-co--row + .bf-co--row{margin-top:16px}}
.pf-card .pf-status{font-size:24px;line-height:30px}
/* Company row v2: tighter data columns, scale with end labels, no glued chip */
.bf-co--row{grid-template-columns:250px 236px 180px 240px minmax(240px,1fr)}
.bf-co--row .bf-score-parts{grid-template-columns:auto auto;gap:2px 14px;font-size:13px;line-height:20px}
.bf-co--row .bf-score-bar{max-width:100%}
.bf-co .bf-chip{margin-top:12px}
.bf-co .bf-quote--none .bf-quote-status{font-family:var(--font-sans);font-size:16px;line-height:24px;color:var(--ink-2)}
.bf-co .bf-field--gap{margin-top:20px !important}
.bf-years{width:140px}
.bf-scale{height:20px;width:200px;margin:8px 0 0;--ring:var(--sand)}
.pf-card .bf-scale,.bf-co--card .bf-scale{--ring:var(--surface)}
.bf-scale-line{left:14px;right:14px;top:9px}
.bf-scale-line::before,.bf-scale-line::after{display:none}
.bf-scale-end{top:3px;transform:none;font-size:11px;line-height:14px}
.bf-scale-end--min{left:0}
.bf-scale-end--max{left:auto;right:0}
.bf-scale-dot{box-shadow:0 0 0 2px var(--ring)}
.bf-scale-dot.bf-dot--google{top:0}
.bf-scale-dot.bf-dot--yelp{top:9px}
@media (max-width:640px){.bf-co--row{grid-template-columns:1fr}.bf-scale{--ring:var(--surface)}}
@media (min-width:641px) and (max-width:1100px){.bf-co--row{grid-template-columns:1fr 1fr}}

/* ---------- Company card v2: header + four facts + take beside the breakdown ---------- */
.co2{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:28px 32px 30px;margin-top:20px}
.co2 p{margin:0}
.co2-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;align-items:start}
.co2-head .bf-rank{margin-top:4px}
.co2-name{margin:0;font-family:var(--font-serif);font-size:28px;line-height:34px;font-weight:600;color:var(--ink);text-wrap:balance}
.co2-meta{margin-top:4px !important;font-size:15px;line-height:22px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.co2-bf{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);background:var(--seaglass);color:var(--seaglass-ink);font-size:13px;line-height:20px;font-weight:600}
.co2-score{text-align:right;white-space:nowrap}
.co2-score-num{font-family:var(--font-serif);font-size:48px;line-height:48px;font-weight:600;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.co2-score-of{font-size:16px;color:var(--ink-2);margin-left:2px}
.co2-score-cap{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.co2-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.co2-fact{padding:16px 20px 18px;min-width:0}
.co2-fact + .co2-fact{border-left:1px solid var(--hairline)}
.co2-fact:first-child{padding-left:0}
.co2-fact dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.co2-fact dd{margin:0}
.co2-val{margin-top:8px !important;font-family:var(--font-serif);font-size:26px;line-height:30px;font-weight:600;color:var(--ink);font-variant-numeric:lining-nums}
.co2-val small{font-family:var(--font-sans);font-size:14px;font-weight:400;color:var(--ink-2);margin-right:6px}
.co2-val--none{font-size:20px;line-height:30px;color:var(--ink-2);font-weight:500}
.co2-sub{margin-top:6px !important;font-size:14px;line-height:20px;color:var(--ink-2)}
.co2-sub b{color:var(--poor);font-weight:600}
.co2-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;margin-top:24px}
.co2-tl{font-family:var(--font-serif);font-size:19px;line-height:26px;font-weight:600;margin-bottom:6px !important}
.co2-take{font-size:17px;line-height:28px;max-width:68ch}
.co2-main .bf-pc{grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.co2-main .bf-links{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline)}
.co2-side{border-left:1px solid var(--hairline);padding-left:32px}
.co2-k{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px !important}
.co2-k:not(:first-child){margin-top:24px !important}
.co2-bars{margin:0;padding:0;list-style:none}
.co2-bars li{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:14px;line-height:20px;padding:4px 0}
.co2-bar{display:block;height:8px;background:var(--bar-track);border-radius:var(--radius-pill);overflow:hidden}
.co2-bar > span{display:block;height:100%;background:var(--ink);border-radius:var(--radius-pill)}
.co2-bars b{font-family:var(--font-mono);font-size:13px;font-weight:600;text-align:right}
.co2-asp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.co2-cell{position:relative;height:12px;border-radius:3px}
.co2-cell::after{content:attr(data-short);position:absolute;top:16px;left:0;right:0;font-size:11px;line-height:14px;color:var(--ink-2);text-align:center;white-space:nowrap}
.co2-asp{margin-bottom:20px}
.co2-cell--good,.co2-key.co2-cell--good{background:var(--good)}
.co2-cell--mixed,.co2-key.co2-cell--mixed{background:var(--mixed)}
.co2-cell--poor,.co2-key.co2-cell--poor{background:var(--poor)}
.co2-cell--none,.co2-key.co2-cell--none{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-2)}
.co2-key{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin:0 4px 0 10px}
.co2-asp-sum{font-size:14px;line-height:20px}
.co2-compl{margin-top:16px !important;padding-top:12px;border-top:1px solid var(--hairline);font-size:14px;line-height:20px}
.co2-compl span{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
/* Best-for index */
.bfx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink-2)}
.bfx li{padding:14px 0 16px;border-bottom:1px solid var(--hairline)}
.bfx-k{margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--seaglass-ink)}
.bfx-name{display:inline-block;margin-top:4px;font-family:var(--font-serif);font-size:19px;line-height:25px;font-weight:600;color:var(--ink);text-decoration:none}
.bfx-name:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:4px}
.bfx-meta{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--ink-2)}
@media (max-width:1100px){
  .co2-facts{grid-template-columns:1fr 1fr}
  .co2-fact:nth-child(3){padding-left:0;border-left:0}
  .co2-fact:nth-child(n+3){border-top:1px solid var(--hairline)}
  .co2-body{grid-template-columns:1fr}
  .co2-side{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:20px}
  .bfx{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .co2{padding:20px 16px 22px;margin-top:16px}
  .co2-head{grid-template-columns:auto minmax(0,1fr)}
  .co2-score{grid-column:1 / -1;text-align:left;margin-top:12px;display:flex;align-items:baseline;gap:4px}
  .co2-score-cap{display:inline;margin:0 0 0 8px}
  .co2-name{font-size:23px;line-height:28px}
  .co2-fact{padding:14px 12px 14px 0}
  .co2-fact + .co2-fact{padding-left:12px}
  .co2-fact:nth-child(3){padding-left:0}
  .co2-val{font-size:22px;line-height:26px}
  .co2-main .bf-pc{grid-template-columns:1fr}
  .bfx{grid-template-columns:1fr}
}
.co2-asp{margin-bottom:28px}
.co2-rt{display:inline-block;white-space:nowrap}
/* Card rank: a large numeral, no badge */
.co2-head{column-gap:20px}
.co2-rank{font-family:var(--font-serif);font-size:76px;line-height:62px;font-weight:600;letter-spacing:-0.04em;color:var(--accent);font-variant-numeric:lining-nums;min-width:48px;text-align:left;margin-top:-2px}
@media (max-width:640px){.co2-rank{font-size:56px;line-height:46px;min-width:34px}.co2-head{column-gap:14px}}
.co2-rank{line-height:72px;margin-top:-8px}@media (max-width:640px){.co2-rank{line-height:54px;margin-top:-6px}}
/* Best-for tiles v2: nomination first */
.bfx{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:0;margin-top:28px}
.bfx li.bfx-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:20px 22px 0}
.bfx-k{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.bfx-title{margin:4px 0 0;font-family:var(--font-serif);font-size:26px;line-height:31px;font-weight:600;color:var(--ink)}
.bfx-title::first-letter{text-transform:uppercase}
.bfx-why{margin:6px 0 18px;font-size:15px;line-height:22px;color:var(--seaglass-ink);font-weight:500}
.bfx-co{margin-top:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:14px 0 16px;border-top:1px solid var(--hairline);color:var(--ink);text-decoration:none}
.bfx-rank{font-family:var(--font-serif);font-size:28px;line-height:28px;font-weight:600;color:var(--accent);font-variant-numeric:lining-nums}
.bfx-name{font-family:var(--font-serif);font-size:18px;line-height:24px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfx-co:hover .bfx-name{color:var(--link-hover);text-decoration:underline;text-underline-offset:4px}
.bfx-score{font-family:var(--font-serif);font-size:18px;font-weight:600;font-variant-numeric:lining-nums}
.bfx-score small{font-family:var(--font-sans);font-size:13px;font-weight:400;color:var(--ink-2)}
@media (max-width:1100px){.bfx{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bfx{grid-template-columns:1fr;gap:12px}.bfx-title{font-size:23px;line-height:28px}}

/* ---------- Rank numerals everywhere (no badges) ---------- */
.bf-rank{display:inline-block;width:auto;min-width:30px;height:auto;border-radius:0;background:none;color:var(--accent);font-family:var(--font-serif);font-size:30px;line-height:30px;font-weight:600;letter-spacing:-0.03em;text-align:left;font-variant-numeric:lining-nums tabular-nums}
.bf-td-in,.hp-co,.cp-co{align-items:baseline}
.pf-similar li{grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline}
.pf-rank .bf-rank{font-size:40px;line-height:40px}
/* Outbound links: brand logo + name + arrow, no underline */
.bf-links{align-items:center}
.bf-ext{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border:1px solid var(--hairline);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;line-height:20px;font-weight:500}
.bf-ext img{display:block;width:16px;height:16px}
.bf-ext .bf-icon{color:var(--ink-2);vertical-align:0}
.bf-ext:hover{border-color:var(--ink-2)}
.bf-ext:hover .bf-icon{color:var(--accent)}
.bf-ext:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Captions of row tables are normal paragraphs on a phone */
@media (max-width:640px){
  .bf-rowtable caption,.bf-table caption{display:block;width:auto;max-width:none;text-align:left;padding-bottom:8px}
  .bf-rowtable tr{row-gap:6px;padding:14px 0}
  .bf-rowtable td.bf-rt-fact{padding-left:40px;font-size:15px;line-height:21px}
  .bf-rowtable tbody th .hp-co{gap:10px}
  .bf-rank{font-size:26px;line-height:26px;min-width:28px}
  /* card: score sits under the name, not under the rank numeral */
  .co2-score{grid-column:2 / -1;margin-top:10px}
  .co2-head{column-gap:16px}
}
.hp-co{align-items:flex-start}.hp-co .bf-rank{margin-top:-3px}
.co2-quotes{margin:16px 0 0;padding:0;list-style:none}.co2-quotes li{font-family:var(--font-serif);font-style:italic;font-size:17px;line-height:26px;padding:4px 0}.co2-quotes li + li{margin-top:8px}.co2-quotes span{display:block;font-family:var(--font-sans);font-size:13px;line-height:18px;color:var(--ink-2);margin-top:2px}
.pf-digest p{margin:0 0 10px;font-size:17px;line-height:27px;max-width:68ch}.pf-digest p:first-child{font-family:var(--font-serif);font-size:20px;line-height:29px;font-weight:600}
.co2-digest{margin-top:14px !important;padding-top:12px;border-top:1px solid var(--hairline);font-size:14px;line-height:21px;color:var(--ink)}
.pf-dg-h{margin:0 0 6px;font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.pf-dg-h span{text-transform:none;letter-spacing:0;font-weight:400}
.pf-dg-sites{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)}
.pf-dg-site p{font-size:16px !important;line-height:25px !important;font-family:var(--font-sans) !important;font-weight:400 !important}
.pf-dg-q{font-family:var(--font-serif) !important;font-style:italic;color:var(--ink)}
@media (max-width:640px){.pf-dg-sites{grid-template-columns:1fr}}
.tier-note{margin:32px 0 4px;padding:12px 16px;border-radius:var(--radius-card);background:var(--seaglass);color:var(--seaglass-ink);font-size:15px;line-height:22px;font-weight:500}
.hp-also tr.tier-row td{padding:12px 16px;background:var(--seaglass);color:var(--seaglass-ink);font-size:14px;line-height:20px;font-weight:500;border-radius:8px}
@media (max-width:640px){.bf-rowtable tr.tier-row{display:block;padding:8px 0}.bf-rowtable tr.tier-row td{display:block;padding:10px 12px}}
/* Cost page: every quote on one scale */
.cp-chart{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink-2)}
.cp-chart li{display:grid;grid-template-columns:260px minmax(0,1fr) 170px;gap:6px 24px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hairline)}
.cp-chart-name{font-family:var(--font-serif);font-size:18px;line-height:24px;font-weight:600;color:var(--ink);text-decoration:none}
.cp-chart-name:hover{color:var(--link-hover);text-decoration:underline}
.cp-chart-track{position:relative;height:12px;background:var(--bar-track);border-radius:var(--radius-pill)}
.cp-chart-track > span{position:absolute;top:0;bottom:0;min-width:12px;background:var(--accent);border-radius:var(--radius-pill)}
.cp-chart-val{font-family:var(--font-serif);font-size:19px;font-weight:600;text-align:right}
.cp-chart-val small{font-family:var(--font-sans);font-size:13px;font-weight:400;color:var(--ink-2)}
.cp-chart-label{grid-column:2 / 4;font-size:14px;line-height:20px;color:var(--ink-2)}
@media (max-width:640px){.cp-chart li{grid-template-columns:1fr auto}.cp-chart-track{grid-column:1 / -1;grid-row:2}.cp-chart-label{grid-column:1 / -1}}
.ch-price--none{font-family:var(--font-sans) !important;font-size:16px !important;font-weight:400 !important;color:var(--ink-2)}

/* ---------- Cost page v2 ---------- */
.cp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 0;max-width:900px}
.cp-tiles div{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:16px 18px}
.cp-tiles dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.cp-tiles dd{margin:6px 0 0;font-size:14px;line-height:20px;color:var(--ink-2)}
.cp-tiles dd b{display:block;font-family:var(--font-serif);font-size:28px;line-height:34px;font-weight:600;color:var(--ink)}
.cp-chart-band .cp-chart-name{color:var(--ink-2);font-weight:500}
.cp-band{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,var(--hairline) 0 6px,transparent 6px 12px);border:1px solid var(--ink-2);border-radius:var(--radius-pill);opacity:.7}
.cp-band--ghost{border:0;opacity:.35}
.cp-chart-track > .cp-q{position:absolute;top:0;bottom:0;min-width:12px;background:var(--accent);border-radius:var(--radius-pill)}
.cp-chart-track > span:not(.cp-q):not(.cp-band){display:none}
/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:28px}
.calc[hidden]{display:none}
.calc-in{display:flex;flex-direction:column;gap:16px}
.calc-f{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.calc-f legend{padding:0;margin-bottom:6px}
.calc-f small{font-weight:400;color:var(--ink-2)}
.calc input[type=number],.calc select{font:inherit;font-weight:400;font-size:16px;padding:10px 12px;border:1px solid var(--ink-2);border-radius:10px;background:var(--surface);color:var(--ink);min-height:44px;box-sizing:border-box;width:100%}
.calc input:focus-visible,.calc select:focus-visible,.calc button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.calc-r{display:flex;gap:8px;align-items:flex-start;font-weight:500;padding:6px 0}
.calc-r small{display:block}
.calc-c{display:flex;gap:8px;align-items:center;font-size:15px;font-weight:500}
.calc-presets{display:flex;flex-wrap:wrap;gap:8px}
.calc-presets button,.calc-share button{font:inherit;font-size:14px;padding:8px 12px;min-height:40px;border:1px solid var(--hairline);border-radius:var(--radius-pill);background:var(--sand);color:var(--ink);cursor:pointer}
.calc-presets button:hover,.calc-share button:hover{border-color:var(--ink-2)}
.calc-out{background:var(--sand);border-radius:12px;padding:22px}
.calc-k{margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.calc-total{margin:6px 0 0;font-family:var(--font-serif);font-size:48px;line-height:52px;font-weight:600;color:var(--ink);font-variant-numeric:lining-nums}
.calc-range{margin:4px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.calc-lines{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px;line-height:20px}
.calc-lines th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:6px 8px 6px 0;border-bottom:1px solid var(--ink-2)}
.calc-lines td{padding:8px 8px 8px 0;border-bottom:1px solid var(--hairline)}
.calc-lines td small{color:var(--ink-2)}
.calc-lines td:nth-child(n+2),.calc-lines th:nth-child(n+2){text-align:right}
.calc-miss{margin:12px 0 0;font-size:14px;line-height:20px;color:var(--poor)}
.calc-near{margin:12px 0 0;font-size:14px;line-height:21px}
.calc-share{margin:14px 0 0;font-size:14px;color:var(--seaglass-ink)}
.calc-static{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:24px}
.calc-static[hidden]{display:none}
/* included matrix */
.cp-matrix td.cp-m{font-size:13px;font-weight:600;text-align:center;white-space:nowrap}
.cp-matrix thead th:nth-child(n+3){text-align:center}
.cp-m--yes{color:var(--good)}
.cp-m--no{color:var(--poor)}
.cp-m--na::before{content:"";display:inline-block;width:14px;height:2px;background:var(--hairline);vertical-align:middle}
/* material list */
.cp-mat{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink-2)}
.cp-mat li{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hairline)}
.cp-mat-tier{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.cp-mat-name{font-weight:600;font-size:15px}
.cp-mat-price{font-family:var(--font-serif);font-weight:600;font-size:17px}
.cp-mat-desc{grid-column:2 / 4;font-size:13px;line-height:18px;color:var(--ink-2)}
.cp-extra-count b{font-family:var(--font-serif);font-size:17px}
/* funnel */
.cp-funnel{margin:0;padding:0;list-style:none;max-width:760px}
.cp-funnel li{display:grid;grid-template-columns:minmax(0,1fr) 56px 220px;gap:16px;align-items:center;padding:8px 0}
.cp-fun-bar{display:block;height:22px;background:var(--bar-track);border-radius:6px;overflow:hidden}
.cp-fun-bar > span{display:block;height:100%;background:var(--ink);border-radius:6px}
.cp-funnel b{font-family:var(--font-serif);font-size:24px;text-align:right}
.cp-funnel li > span:last-child{font-size:15px;color:var(--ink-2)}
@media (max-width:900px){.calc{grid-template-columns:1fr}.cp-tiles{grid-template-columns:1fr}}
@media (max-width:640px){.calc{padding:18px}.calc-total{font-size:38px;line-height:42px}.cp-funnel li{grid-template-columns:minmax(0,1fr) 44px;}.cp-funnel li > span:last-child{grid-column:1 / -1;margin-top:-6px}.cp-mat li{grid-template-columns:1fr auto}.cp-mat-tier{grid-column:1 / -1}.cp-mat-desc{grid-column:1 / -1}}
.cp-chart-track > span.cp-band{background:repeating-linear-gradient(45deg,var(--hairline) 0 5px,var(--surface) 5px 10px);border:1px solid var(--ink-2);min-width:0;opacity:1}
.cp-chart-track > span.cp-band--ghost{background:var(--surface);border:1px dashed var(--hairline);opacity:1}
.chk .calc-total{font-size:30px;line-height:36px}
.cmp-list{margin:12px 0 0;padding:0;list-style:none}
.cmp-list li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hairline)}
.cmp-name{font-family:var(--font-serif);font-size:19px;font-weight:600}
.cmp-list b{font-family:var(--font-serif);font-size:26px;font-weight:600}
.cmp-range,.cmp-list small{grid-column:2;font-size:14px;line-height:20px;color:var(--ink-2)}

/* ---------- City page: the city at a glance ---------- */
.lp-local-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 16px 0 0; border-top: var(--rule) solid var(--ink-2); }
.lp-local-facts > div { padding: 14px 0 16px; border-bottom: var(--rule) solid var(--hairline); }
.lp-local-facts dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.lp-local-facts dd { margin: 6px 0 0; font-size: 16px; line-height: 24px; color: var(--ink); }
.lp-local-facts dd b { font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
@media (max-width: 640px) { .lp-local-facts { grid-template-columns: 1fr; } }
.bfx-title a.bfx-page { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 5px; }
.bfx-title a.bfx-page:hover { text-decoration-color: currentColor; }

/* ---------- Best-for page: the ranking for one pick ---------- */
.ar-rank { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: 16px; line-height: 23px; }
.ar-rank caption { text-align: left; font-size: 13px; line-height: 18px; color: var(--ink-2); padding-bottom: 10px; }
.ar-rank th, .ar-rank td { text-align: left; vertical-align: top; font-weight: 400; padding: 12px 14px 12px 0; border-bottom: var(--rule) solid var(--hairline); }
.ar-rank thead th { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-top: var(--rule) solid var(--ink-2); border-bottom-color: var(--ink-2); }
.ar-rank tbody th { width: 38%; }
.ar-rank .ar-rank-n { width: 28px; font-family: var(--font-serif); font-weight: 600; color: var(--accent); }
.ar-rank .ar-rank-s { white-space: nowrap; text-align: right; padding-right: 0; font-family: var(--font-serif); font-weight: 600; }

/* ---------- Chain comparison table ---------- */
.vs-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.vs-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.vs-table th, .vs-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: var(--rule) solid var(--hairline); font-weight: 400; }
.vs-table thead th { font-family: var(--font-serif); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); border-top: var(--rule) solid var(--ink-2); border-bottom-color: var(--ink-2); }
.vs-table tbody th { width: 170px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.vs-table td:last-child { background: color-mix(in srgb, var(--seaglass) 35%, transparent); padding-left: 12px; }
.vs-table thead th:last-child { padding-left: 12px; }
.vs-note { font-size: 13px; line-height: 19px; color: var(--ink-2); margin-top: 10px; max-width: 80ch; }
.room-table { min-width: 720px; }
.room-table tbody th { width: 190px; font-family: var(--font-serif); font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.room-table td:last-child { background: none; padding-left: 0; }
.room-table thead th:last-child { padding-left: 0; }
.room-table thead th { font-family: var(--font-sans); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }