/* Optional building page sections (tools/pages/sections-extra.mjs). Loaded after
   building.css, only on pages that use them, with the same tokens. */
.bx-special { background: var(--surface); }
.bx-screen { background: var(--ground); }
.bx-reviews { background: var(--surface); padding-top: 0 !important; }
.bx-walk { background: var(--ground); }
.bx-floors { background: var(--surface); }
.bx-why { background: var(--ground); }
.bx .two-wide > * { min-width: 0; }

/* What the full special would be worth */
.bx-special table.data td.num strong { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 400; color: var(--lake); }
.bx-note p { font-size: var(--fs-md); line-height: 1.6; margin: 0 0 1rem; max-width: 52ch; }
.bx-note p:first-child { border-left: 3px solid var(--lake); padding-left: 1.1rem; }

/* Applying here */
.bx-items h3 { margin-top: 1.75rem; }
.bx-items h3:first-child { margin-top: 0; }
.bx-items p, .bx-screen .two-wide > div > p:not(.fine) { line-height: 1.6; margin: 0 0 .75rem; max-width: 60ch; }
.bx-inc li strong { text-align: right; }
.bx-inc li strong small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.bx-lease .risk-grid p { margin: 0 0 .6rem; }

/* How the reviews changed */
.bx-reviews h2 { font-size: var(--fs-xl); max-width: none; }
.bx-prose p { line-height: 1.65; margin: 0 0 1rem; max-width: 60ch; }

/* Getting around */
.bx-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 720px; }
.bx-scores > div { border-top: 1px solid var(--ink); padding-top: .9rem; }
.bx-n { display: block; font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--lake); }
.bx-l { display: block; font-family: var(--font-ui); font-size: var(--fs-sm); margin-top: .35rem; }
.bx-l small { display: block; color: var(--muted); }
.bx-cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.5rem; }
.bx-cols > div { border-top: 1px solid var(--stone); padding-top: 1rem; }
.bx-cols p { line-height: 1.6; margin: 0 0 .75rem; }

/* Floor by floor */
.bx-bands { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bx-band { background: #fff; border: 1px solid var(--stone); border-radius: var(--radius); padding: 1.25rem 1.3rem; }
.bx-band > p:not(.bx-tag):not(.fine) { line-height: 1.55; margin: 0 0 1rem; }
.bx-tag { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--lake); margin: 0 0 .35rem; letter-spacing: .02em; }
.bx-band .fee-list li span small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.bx-band .fine { margin-top: .5rem; }

/* Price comparison */
.bx-compare > .wrap > p:not(.sub):not(.fine):not(.callout) { line-height: 1.6; max-width: 62ch; }

/* Why work with us */
.bx-why p { font-size: var(--fs-md); line-height: 1.65; margin: 0 0 1rem; }

@media (max-width: 560px) {
  .bx-scores { gap: .6rem; }
  .bx-n { font-size: 2rem; }
  .bx table.data th, .bx table.data td { padding: .6rem .4rem; }
  .bldg .bx table.data thead th.num { white-space: normal; }
  .bx-special table.data tbody th { white-space: nowrap; }
  .bx-special table.data td.num strong { font-size: var(--fs-md); }
}