:root {
  --ink: #172027;
  --muted: #68737b;
  --line: #d9dee1;
  --paper: #f4f5f2;
  --white: #ffffff;
  --asphalt: #202a31;
  --asphalt-2: #11181d;
  --safety: #f2b632;
  --safety-dark: #bd7c00;
  --blueprint: #dce8eb;
  --radius: 8px;
  --shadow: 0 18px 50px rgba(20, 29, 34, .10);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }

.site-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 1rem; letter-spacing: -.02em; }
.brand strong { font-weight: 760; }
.brand-mark {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  background: var(--safety); color: var(--asphalt-2); font-weight: 900;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 76% 100%, 0 100%);
}
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { text-decoration: none; color: #44515a; font-weight: 650; }
.site-header nav a:hover { color: var(--ink); }

main { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; }
.breadcrumb { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: .82rem; padding: 22px 0 10px; }
.breadcrumb a { text-decoration: none; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 32px 0 28px; }
.eyebrow, .step-label { margin: 0 0 7px; font-size: .75rem; letter-spacing: .14em; font-weight: 850; color: var(--safety-dark); }
h1, h2 { margin-top: 0; line-height: 1.12; letter-spacing: -.04em; }
h1 { margin-bottom: 12px; font-size: clamp(2.5rem, 6vw, 4.65rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
.lede { max-width: 760px; margin: 0; color: #536069; font-size: 1.08rem; }
.trust-note { white-space: nowrap; color: #4d5b63; font-size: .88rem; }
.trust-note span { color: #287f52; font-weight: 900; }
.method-strip { display: flex; justify-content: space-between; gap: 20px; margin: -8px 0 18px; color: #6b767d; font-size: .79rem; }
.method-strip a { color: #52646d; text-underline-offset: 3px; }

.calculator-shell { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); background: var(--white); box-shadow: var(--shadow); border: 1px solid #d4dadd; border-radius: var(--radius); overflow: hidden; }
.calculator-panel { padding: 32px; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.panel-heading h2 { margin-bottom: 24px; font-size: 1.55rem; }
.text-button { border: 0; background: transparent; color: #52616a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.unit-toggle, .mode-toggle { display: flex; width: fit-content; margin: 0 0 19px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.unit-toggle legend, .mode-toggle legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.unit-toggle button, .mode-toggle button { padding: 8px 14px; border: 0; border-radius: 4px; background: transparent; color: #5f6a72; font-weight: 750; }
.unit-toggle button.active, .mode-toggle button.active { background: var(--asphalt); color: var(--white); }
.fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dimension-fields, .area-field { margin-bottom: 18px; }
.field { min-width: 0; }
.full-field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; color: #36434b; font-size: .88rem; font-weight: 760; }
.optional { color: #7b858b; font-weight: 500; }
.input-with-unit { display: flex; align-items: center; min-height: 48px; background: #fbfcfb; border: 1px solid #bfc8cd; border-radius: 5px; overflow: hidden; }
.input-with-unit:focus-within { border-color: #8b5f00; box-shadow: 0 0 0 3px rgba(242,182,50,.25); }
input { width: 100%; min-width: 0; padding: 11px 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 720; }
.input-with-unit > span { padding: 0 12px; color: #68737b; font-size: .86rem; white-space: nowrap; }
.input-with-unit .currency { padding-right: 0; color: #44515a; }
select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; color: var(--ink); font-weight: 680; }
select:focus-visible, summary:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgba(242,182,50,.65); outline-offset: 2px; }
.field-help { margin: 5px 0 0; color: var(--muted); font-size: .78rem; }
.advanced { margin-top: 22px; border-top: 1px solid var(--line); }
.advanced summary { padding: 15px 0 0; font-weight: 780; cursor: pointer; }
.advanced-grid { padding-top: 15px; }
.error-message { color: #a02d2d; font-weight: 700; }

.results-panel { position: relative; padding: 34px; background: var(--asphalt); color: var(--white); overflow: hidden; }
.results-panel::after { content: ""; position: absolute; right: -80px; bottom: -100px; width: 280px; height: 280px; border: 44px solid rgba(255,255,255,.035); border-radius: 50%; }
.step-label.light { color: #fac957; }
.main-result { display: flex; align-items: baseline; gap: 10px; padding: 5px 0 0; }
.main-result strong { font-size: clamp(3.6rem, 7vw, 5.7rem); line-height: 1; letter-spacing: -.065em; }
.main-result span { font-weight: 800; color: #dce3e6; }
.result-caption { margin: 8px 0 29px; color: #b9c3c8; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.result-grid div { padding: 14px; background: var(--asphalt); }
.result-grid span, .result-grid strong { display: block; }
.result-grid span { color: #9daab1; font-size: .77rem; text-transform: uppercase; letter-spacing: .08em; }
.result-grid strong { margin-top: 3px; font-size: 1rem; }
.result-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 72px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 4px; border: 0; font-weight: 820; text-decoration: none; }
.light-button { background: var(--safety); color: #172027; }
#copyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.result-disclaimer { position: relative; z-index: 1; margin: 0; color: #95a2a9; font-size: .76rem; line-height: 1.5; }

.ad-slot { min-height: 88px; display: grid; place-items: center; margin: 28px 0 70px; color: #9aa1a5; border: 1px dashed #cbd0d2; font-size: .66rem; letter-spacing: .15em; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 80px; align-items: start; }
.content-layout article { max-width: 720px; }
.content-layout article h2 { margin: 48px 0 14px; }
.content-layout article > .eyebrow + h2 { margin-top: 0; }
.content-layout article p { color: #4b5860; }
.formula-card { margin: 28px 0; padding: 20px 23px; background: var(--blueprint); border-left: 4px solid #527a84; }
.formula-card p { margin: 6px 0; color: #283940 !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; }
.source-note { margin-top: 35px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.source-note p { margin: 4px 0 0; font-size: .85rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--white); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--asphalt); color: var(--white); font-size: .82rem; letter-spacing: .03em; }
tbody tr:last-child td { border-bottom: 0; }
td:last-child { font-weight: 760; }
.related-card { position: sticky; top: 20px; padding: 25px; background: var(--white); border-top: 4px solid var(--safety); box-shadow: 0 10px 30px rgba(20,29,34,.07); }
.related-card h2 { margin-bottom: 20px; font-size: 1.45rem; }
.related-item { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); color: #455159; }
.related-item small { color: #899297; white-space: nowrap; }
.related-item.available { text-decoration: none; color: var(--ink); font-weight: 720; }
.related-item.available small { color: var(--safety-dark); }
.related-item.available:hover span { text-decoration: underline; text-underline-offset: 3px; }
.faq-section { max-width: 820px; margin: 90px auto 0; }
.faq-section > h2 { margin-bottom: 24px; }
.faq-section details { border-top: 1px solid #cbd1d4; }
.faq-section details:last-child { border-bottom: 1px solid #cbd1d4; }
.faq-section summary { padding: 19px 2px; font-weight: 780; cursor: pointer; }
.faq-section details p { margin: -4px 0 19px; color: #526068; }

footer { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: center; padding: 34px max(24px, calc((100vw - 1180px) / 2)); background: var(--asphalt-2); color: #aeb8bd; font-size: .82rem; }
.brand.compact { color: var(--white); }
.brand.compact .brand-mark { width: 28px; height: 28px; }

.holding-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--asphalt-2); }
.holding-card { max-width: 620px; padding: 48px; background: var(--white); border-top: 7px solid var(--safety); box-shadow: var(--shadow); }
.holding-card h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); }
.holding-card p:not(.eyebrow) { color: var(--muted); }
.holding-card .primary { margin-top: 15px; background: var(--asphalt); color: var(--white); }
.holding-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.holding-tools .button { margin-top: 0; }
.holding-tools .secondary { border: 1px solid #aeb7bc; color: var(--ink); background: transparent; }

.home-page { --safety: #f2b632; --safety-dark: #8b5a00; background: #f3f4f1; }
.home-page main { padding-bottom: 90px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); min-height: 535px; border-bottom: 1px solid #cfd5d8; }
.home-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 76px 70px 76px 0; }
.home-hero h1 { max-width: 780px; margin-bottom: 18px; font-size: clamp(3.5rem, 7vw, 6.5rem); }
.home-lede { max-width: 740px; margin: 0; color: #4e5b63; font-size: 1.16rem; line-height: 1.65; }
.home-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.home-actions .primary { background: var(--asphalt); color: var(--white); }
.home-text-link { color: #37454d; font-weight: 780; text-underline-offset: 4px; }
.home-proof { display: grid; align-content: center; gap: 1px; margin: 56px 0; background: #46535b; border: 1px solid #46535b; box-shadow: 16px 16px 0 var(--safety); }
.home-proof div { padding: 27px 30px; background: var(--asphalt); color: var(--white); }
.home-proof strong, .home-proof span { display: block; }
.home-proof strong { font-size: 1.45rem; letter-spacing: -.03em; }
.home-proof span { margin-top: 3px; color: #aeb9be; font-size: .82rem; }
.featured-section, .category-section { padding-top: 90px; }
.section-heading { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 32px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 500px; margin: 0; color: #5b676e; }
.featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cdd3d6; background: #cdd3d6; gap: 1px; }
.featured-tool { min-height: 286px; display: flex; flex-direction: column; padding: 27px; background: var(--white); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.featured-tool:hover { position: relative; z-index: 1; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,29,34,.12); }
.tool-number, .category-code { color: var(--safety-dark); font-size: .73rem; font-weight: 850; letter-spacing: .12em; }
.featured-tool h3, .category-card h3 { margin: 28px 0 10px; font-size: 1.34rem; line-height: 1.2; letter-spacing: -.025em; }
.featured-tool p, .category-card p { margin: 0; color: #5a666d; font-size: .92rem; }
.tool-link { margin-top: auto; padding-top: 24px; color: #2e3c44; font-weight: 800; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.category-card { padding: 32px; background: var(--white); border-top: 4px solid var(--asphalt); box-shadow: 0 8px 28px rgba(20,29,34,.06); }
.category-card h3 { margin-top: 16px; }
.category-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 25px; border-top: 1px solid var(--line); }
.category-links a { padding: 11px 0; border-bottom: 1px solid var(--line); color: #27363e; font-weight: 720; text-decoration: none; }
.category-links a::after { content: "→"; float: right; color: var(--safety-dark); }
.category-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-method { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 80px; margin-top: 90px; padding: 48px; background: var(--asphalt); color: var(--white); }
.home-method h2 { margin-bottom: 18px; }
.home-method > div > p:last-child { color: #bdc6ca; }
.home-method ol { margin: 0; padding: 0; list-style: none; }
.home-method li { display: flex; gap: 18px; padding: 17px 0; border-top: 1px solid #49545b; }
.home-method li:last-child { border-bottom: 1px solid #49545b; }
.home-method li > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--safety); color: var(--asphalt); font-weight: 900; }
.home-method li strong { font-size: 1rem; }
.home-method li p { margin: 3px 0 0; color: #aeb9be; font-size: .88rem; }
.home-note { max-width: 860px; margin: 72px auto 0; text-align: center; }
.home-note h2 { margin-bottom: 14px; }
.home-note p { margin: 0; color: #5b676e; }

.gravel-page { --safety: #c5d63d; --safety-dark: #647600; --blueprint: #e7eddc; }
.gravel-page .material-note { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.gravel-page .allowance-grid { margin-top: 18px; }
.gravel-page .result-caption strong { color: #f0f4f5; }
.gravel-page #gravelPriceBasis { margin-top: 7px; min-height: 40px; }

.stone-page { --safety: #d59b62; --safety-dark: #8b4f20; --blueprint: #eee5dc; }
.stone-page .shape-toggle { width: 100%; flex-wrap: wrap; }
.stone-page .shape-toggle button { flex: 1 1 auto; }
.stone-page .stone-dimensions { margin-bottom: 18px; }
.stone-page .allowance-grid { margin-top: 18px; }
.stone-page .material-note { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.stone-page .density-field { padding-top: 15px; }
.stone-page #stonePriceBasis { margin-top: 7px; min-height: 40px; }
.stone-page .coverage-callout { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.stone-page .coverage-callout span { color: #aeb9be; font-size: .8rem; }
.stone-page .coverage-callout strong { text-align: right; }

.river-page { --safety: #73b7b5; --safety-dark: #2c7473; --blueprint: #dcebea; }
.river-page .river-mode-toggle { width: 100%; }
.river-page .river-mode-toggle button { flex: 1 1 auto; }
.river-page .river-dimensions { margin-bottom: 18px; }
.river-page .allowance-grid { margin-top: 18px; }
.river-page .material-note { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.river-page #riverPriceBasis { margin-top: 7px; min-height: 40px; }
.river-page .coverage-callout { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.river-page .coverage-callout span { color: #aeb9be; font-size: .8rem; }
.river-page .coverage-callout strong { text-align: right; }

.block-page { --safety: #e15c3f; --safety-dark: #a42e1b; --blueprint: #eee1dc; }
.block-page .block-mode-toggle { width: 100%; }
.block-page .block-mode-toggle button { flex: 1; }
.block-page .block-dimensions { margin-bottom: 18px; }
.block-page .block-options-grid { margin-top: 18px; }
.block-page .custom-block-grid { margin-top: 18px; }
.block-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.block-page .standalone-input:focus { border-color: #8b5f00; box-shadow: 0 0 0 3px rgba(242,182,50,.25); }
.block-page .block-layout-callout { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.block-page .block-layout-callout span { color: #aeb9be; font-size: .8rem; }
.block-page .block-layout-callout strong { text-align: right; }
.block-page .block-results::after { border-radius: 3px; transform: rotate(18deg); }

.roof-page { --safety: #68b5e6; --safety-dark: #176a9e; --blueprint: #dceaf3; }
.roof-page .roof-mode-toggle { width: 100%; }
.roof-page .roof-mode-toggle button { flex: 1; }
.roof-page .roof-input-group { margin-bottom: 18px; }
.roof-page .roof-diagram { margin: 22px 0 3px; padding: 8px 12px 0; background: #eef4f6; border: 1px solid #d5e0e4; border-radius: 6px; }
.roof-page .roof-diagram svg { display: block; width: 100%; height: 190px; overflow: visible; }
.roof-page .roof-diagram text { fill: #4d646f; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.roof-page .roof-grid-line { fill: none; stroke: #d6e1e5; stroke-width: 1; }
.roof-page .roof-base-line, .roof-page .roof-rise-line { fill: none; stroke: #73858e; stroke-width: 3; }
.roof-page .roof-rafter-line { fill: none; stroke: var(--safety-dark); stroke-width: 8; stroke-linecap: square; }
.roof-page .roof-angle-arc { fill: none; stroke: var(--safety-dark); stroke-width: 2; }
.roof-page .roof-callout { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.roof-page .roof-callout span { color: #aeb9be; font-size: .8rem; }
.roof-page .roof-callout strong { text-align: right; }
.roof-page .roof-results::after { border-radius: 0; transform: rotate(35deg); }
.roof-page #roofCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }

.slab-page { --safety: #e6a44d; --safety-dark: #9a5a08; --blueprint: #eee5d8; }
.slab-page .slab-mode-toggle { width: 100%; }
.slab-page .slab-mode-toggle button { flex: 1; }
.slab-page .slab-dimensions { margin-bottom: 18px; }
.slab-page .slab-options-grid { margin-top: 18px; }
.slab-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.slab-page .standalone-input:focus { border-color: #8b5f00; box-shadow: 0 0 0 3px rgba(242,182,50,.25); }
.slab-page .preset-row { display: flex; gap: 7px; margin-top: 7px; }
.slab-page .preset-row button { flex: 1; padding: 5px 7px; border: 1px solid #c8d0d4; border-radius: 4px; background: #fff; color: #52616a; font-size: .76rem; font-weight: 760; }
.slab-page .slab-bag-breakdown { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.slab-page .slab-bag-breakdown span, .slab-page .slab-bag-breakdown strong { display: block; }
.slab-page .slab-bag-breakdown span { color: #aeb9be; font-size: .77rem; text-transform: uppercase; letter-spacing: .08em; }
.slab-page .slab-bag-breakdown strong { margin-top: 4px; font-size: .93rem; }
.slab-page .slab-cost-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.slab-page .slab-cost-grid div { padding: 13px; background: var(--asphalt); }
.slab-page .slab-cost-grid span, .slab-page .slab-cost-grid strong { display: block; }
.slab-page .slab-cost-grid span { color: #9daab1; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.slab-page .slab-cost-grid strong { margin-top: 3px; }
.slab-page #slabCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.slab-page .slab-results::after { border-radius: 2px; transform: rotate(12deg); }

.drywall-page { --safety: #8fb8d3; --safety-dark: #356d92; --blueprint: #e0eaf0; }
.drywall-page .drywall-mode-toggle { width: 100%; }
.drywall-page .drywall-mode-toggle button { flex: 1; }
.drywall-page .drywall-dimensions { margin-bottom: 18px; }
.drywall-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.drywall-page .drywall-supplies { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.drywall-page .drywall-supplies div { padding: 13px; background: var(--asphalt); }
.drywall-page .drywall-supplies span, .drywall-page .drywall-supplies strong { display: block; }
.drywall-page .drywall-supplies span { color: #9daab1; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.drywall-page .drywall-supplies strong { margin-top: 3px; font-size: .9rem; }
.drywall-page #drywallCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.drywall-page .drywall-results::after { border-radius: 1px; transform: rotate(-11deg); }

.wallpaper-page { --safety: #d77eb2; --safety-dark: #8d3268; --blueprint: #eee0e9; }
.wallpaper-page .wallpaper-mode-toggle { width: 100%; }
.wallpaper-page .wallpaper-mode-toggle button { flex: 1; }
.wallpaper-page .wallpaper-dimensions { margin-bottom: 18px; }
.wallpaper-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.wallpaper-page .wallpaper-roll-card { margin: 20px 0 0; padding: 18px; background: #f3edf1; border: 1px solid #ddcbd6; border-left: 4px solid var(--safety-dark); }
.wallpaper-page .wallpaper-options-grid { margin-top: 16px; }
.wallpaper-page .wallpaper-cut-summary { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.wallpaper-page .wallpaper-cut-summary span, .wallpaper-page .wallpaper-cut-summary strong { display: block; }
.wallpaper-page .wallpaper-cut-summary span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.wallpaper-page .wallpaper-cut-summary strong { margin-top: 4px; font-size: .92rem; }
.wallpaper-page #wallpaperCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.wallpaper-page .wallpaper-results::after { border-radius: 0; transform: rotate(45deg); }

.topsoil-page { --safety: #90ad5e; --safety-dark: #55752b; --blueprint: #e6ebdd; }
.topsoil-page .topsoil-mode-toggle { width: 100%; flex-wrap: wrap; }
.topsoil-page .topsoil-mode-toggle button { flex: 1 1 auto; }
.topsoil-page .topsoil-dimensions { margin-bottom: 18px; }
.topsoil-page .topsoil-options-grid { margin-top: 18px; }
.topsoil-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.topsoil-page .preset-row { display: flex; gap: 7px; margin-top: 7px; }
.topsoil-page .preset-row button { flex: 1; padding: 5px 7px; border: 1px solid #c8d0d4; border-radius: 4px; background: #fff; color: #52616a; font-size: .76rem; font-weight: 760; }
.topsoil-page #topsoilPriceBasis { margin-top: 7px; min-height: 40px; }
.topsoil-page .topsoil-coverage-callout { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.topsoil-page .topsoil-coverage-callout span { color: #aeb9be; font-size: .8rem; }
.topsoil-page .topsoil-coverage-callout strong { text-align: right; }
.topsoil-page #topsoilCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.topsoil-page .topsoil-results::after { border-radius: 50% 4px 50% 4px; transform: rotate(18deg); }

.brick-page { --safety: #df7853; --safety-dark: #983b22; --blueprint: #eee0da; }
.brick-page .brick-mode-toggle { width: 100%; }
.brick-page .brick-mode-toggle button { flex: 1; }
.brick-page .brick-dimensions { margin-bottom: 18px; }
.brick-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.brick-page .brick-size-card { margin: 20px 0 0; padding: 18px; background: #f3eae6; border: 1px solid #ddc9c1; border-left: 4px solid var(--safety-dark); }
.brick-page .brick-size-grid, .brick-page .brick-joint-field, .brick-page .brick-options-grid { margin-top: 16px; }
.brick-page #brickPriceBasis { margin-top: 7px; min-height: 40px; }
.brick-page .brick-order-callout { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.brick-page .brick-order-callout span, .brick-page .brick-order-callout strong { display: block; }
.brick-page .brick-order-callout span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.brick-page .brick-order-callout strong { margin-top: 4px; }
.brick-page #brickCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.brick-page .brick-results::after { border-radius: 2px; transform: rotate(-8deg); }

.insulation-page { --safety: #e8bf42; --safety-dark: #936a00; --blueprint: #eee8d8; }
.insulation-page .insulation-area-toggle, .insulation-page .insulation-material-toggle { width: 100%; }
.insulation-page .insulation-area-toggle button, .insulation-page .insulation-material-toggle button { flex: 1; }
.insulation-page .insulation-dimensions { margin-bottom: 18px; }
.insulation-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.insulation-page .insulation-material-card { margin: 20px 0 0; padding: 18px; background: #f4f0df; border: 1px solid #ddd4ac; border-left: 4px solid var(--safety-dark); }
.insulation-page .insulation-material-toggle { margin-bottom: 16px; }
.insulation-page .insulation-board-pack, .insulation-page .insulation-options-grid { margin-top: 16px; }
.insulation-page .insulation-label-callout { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.insulation-page .insulation-label-callout span, .insulation-page .insulation-label-callout strong { display: block; }
.insulation-page .insulation-label-callout span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.insulation-page .insulation-label-callout strong { margin-top: 4px; }
.insulation-page #insulationCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.insulation-page .insulation-results::after { border-radius: 50%; transform: scaleX(1.7); }

.shingle-page { --safety: #cf7d3d; --safety-dark: #8a4317; --blueprint: #eee3da; }
.shingle-page .shingle-mode-toggle { width: 100%; }
.shingle-page .shingle-mode-toggle button { flex: 1; }
.shingle-page .shingle-secondary-grid { margin-top: 16px; }
.shingle-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.shingle-page .shingle-product-card { margin: 20px 0 0; padding: 18px; background: #f5ece5; border: 1px solid #dfcbbb; border-left: 4px solid var(--safety-dark); }
.shingle-page #shinglePriceBasis { min-height: 48px; }
.shingle-page .shingle-order-callout { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.shingle-page .shingle-order-callout span, .shingle-page .shingle-order-callout strong { display: block; }
.shingle-page .shingle-order-callout span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.shingle-page .shingle-order-callout strong { margin-top: 4px; }
.shingle-page #shingleCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.shingle-page .shingle-results::after { border-radius: 2px; transform: skewX(-18deg); }

.fence-page { --safety: #66a574; --safety-dark: #27673a; --blueprint: #dce9df; }
.fence-page .fence-mode-toggle { width: 100%; margin-bottom: 16px; }
.fence-page .fence-mode-toggle button { flex: 1; }
.fence-page .fence-secondary-grid { margin-top: 16px; }
.fence-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.fence-page .fence-material-card { margin: 20px 0 0; padding: 18px; background: #e9f1eb; border: 1px solid #c3d6c7; border-left: 4px solid var(--safety-dark); }
.fence-page .fence-order-callout { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.fence-page .fence-order-callout span, .fence-page .fence-order-callout strong { display: block; }
.fence-page .fence-order-callout span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.fence-page .fence-order-callout strong { margin-top: 4px; }
.fence-page #fenceCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.fence-page .fence-results::after { border-radius: 2px; transform: rotate(45deg); }

.deck-page { --safety: #c9974b; --safety-dark: #76501b; --blueprint: #eee6d9; }
.deck-page .deck-secondary-grid { margin-top: 16px; }
.deck-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.deck-page .deck-material-card, .deck-page .deck-frame-card { margin: 20px 0 0; padding: 18px; background: #f3ede3; border: 1px solid #ddcfb9; border-left: 4px solid var(--safety-dark); }
.deck-page .deck-frame-card { background: #ece9e2; border-color: #d4cec1; }
.deck-page #deckLayout { min-height: 48px; }
.deck-page .deck-order-callout { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.deck-page .deck-order-callout span, .deck-page .deck-order-callout strong { display: block; }
.deck-page .deck-order-callout span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.deck-page .deck-order-callout strong { margin-top: 4px; }
.deck-page #deckCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.deck-page .deck-results::after { border-radius: 2px; transform: rotate(12deg) skewX(-10deg); }

.flooring-page { --safety: #4d9f9c; --safety-dark: #19615f; --blueprint: #d9e9e8; }
.flooring-page .flooring-mode-toggle { width: 100%; margin-bottom: 16px; }
.flooring-page .flooring-mode-toggle button { flex: 1; }
.flooring-page .flooring-secondary-grid { margin-top: 16px; }
.flooring-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.flooring-page .flooring-product-card { margin: 20px 0 0; padding: 18px; background: #e5f0ef; border: 1px solid #bfd6d4; border-left: 4px solid var(--safety-dark); }
.flooring-page .flooring-order-callout { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.flooring-page .flooring-order-callout span, .flooring-page .flooring-order-callout strong { display: block; }
.flooring-page .flooring-order-callout span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.flooring-page .flooring-order-callout strong { margin-top: 4px; }
.flooring-page #flooringCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.flooring-page .flooring-results::after { border-radius: 2px; transform: rotate(30deg); }

.tile-page { --safety: #4d86b8; --safety-dark: #24547d; --blueprint: #dce7f0; }
.tile-page .tile-surface-toggle { width: 100%; margin-bottom: 16px; }
.tile-page .tile-surface-toggle button { flex: 1; }
.tile-page .tile-secondary-grid, .tile-page .tile-options-grid { margin-top: 16px; }
.tile-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.tile-page .tile-product-card { margin: 20px 0 0; padding: 18px; background: #e7eef4; border: 1px solid #c3d2df; border-left: 4px solid var(--safety-dark); }
.tile-page .tile-order-callout { position: relative; z-index: 1; margin-top: 20px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.tile-page .tile-order-callout span, .tile-page .tile-order-callout strong { display: block; }
.tile-page .tile-order-callout span { color: #aeb9be; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.tile-page .tile-order-callout strong { margin-top: 4px; }
.tile-page .tile-supplies { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.tile-page .tile-supplies div { padding: 13px; background: var(--asphalt); }
.tile-page .tile-supplies span, .tile-page .tile-supplies strong { display: block; }
.tile-page .tile-supplies span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.tile-page .tile-supplies strong { margin-top: 3px; }
.tile-page #tileCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.tile-page .tile-results::after { border-radius: 2px; transform: rotate(45deg); }

.paver-page { --safety: #d4a33c; --safety-dark: #745113; --blueprint: #eee7d5; }
.paver-page .paver-secondary-grid { margin-top: 16px; }
.paver-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.paver-page .paver-product-card { margin: 20px 0 0; padding: 18px; background: #f3eddf; border: 1px solid #ded0ad; border-left: 4px solid var(--safety-dark); }
.paver-page .paver-materials { position: relative; z-index: 1; display: grid; gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.paver-page .paver-materials div { padding: 13px; background: var(--asphalt); }
.paver-page .paver-materials span, .paver-page .paver-materials strong { display: block; }
.paver-page .paver-materials span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.paver-page .paver-materials strong { margin-top: 3px; }
.paver-page #paverCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.paver-page .paver-results::after { border-radius: 3px; transform: rotate(45deg) skew(-7deg,-7deg); }

.retaining-page { --safety: #8795c9; --safety-dark: #3b4e8a; --blueprint: #e1e5f0; }
.retaining-page .retaining-secondary-grid { margin-top: 16px; }
.retaining-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.retaining-page .retaining-product-card { margin: 20px 0 0; padding: 18px; background: #eceef6; border: 1px solid #cbd0e2; border-left: 4px solid var(--safety-dark); }
.retaining-page .retaining-materials { position: relative; z-index: 1; display: grid; gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.retaining-page .retaining-materials div { padding: 13px; background: var(--asphalt); }
.retaining-page .retaining-materials span, .retaining-page .retaining-materials strong { display: block; }
.retaining-page .retaining-materials span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.retaining-page .retaining-materials strong { margin-top: 3px; }
.retaining-page .retaining-warning { position: relative; z-index: 1; margin-top: 18px; padding: 14px; background: #fff1cc; border-left: 4px solid #d39a13; color: #3f3216; }
.retaining-page .retaining-warning strong, .retaining-page .retaining-warning span { display: block; }
.retaining-page .retaining-warning span { margin-top: 5px; font-size: .82rem; line-height: 1.5; }
.retaining-page #retainingCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.retaining-page .retaining-results::after { border-radius: 2px 50%; transform: rotate(-14deg); }

.siding-page { --safety: #55a0a8; --safety-dark: #22616a; --blueprint: #dcebed; }
.siding-page .siding-secondary-grid { margin-top: 16px; }
.siding-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.siding-page .siding-gable-card { margin: 20px 0 0; padding: 18px; background: #e6f0f1; border: 1px solid #bfd6d9; border-left: 4px solid var(--safety-dark); }
.siding-page .siding-materials { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.siding-page .siding-materials div { padding: 13px; background: var(--asphalt); }
.siding-page .siding-materials span, .siding-page .siding-materials strong { display: block; }
.siding-page .siding-materials span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.siding-page .siding-materials strong { margin-top: 3px; }
.siding-page .siding-order-callout { position: relative; z-index: 1; margin-top: 18px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.siding-page .siding-order-callout span, .siding-page .siding-order-callout strong { display: block; }
.siding-page .siding-order-callout span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.siding-page .siding-order-callout strong { margin-top: 4px; }
.siding-page #sidingCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.siding-page .siding-results::after { border-radius: 2px; transform: rotate(90deg) skewX(-16deg); }

.paint-page { --safety: #d97854; --safety-dark: #923f25; --blueprint: #eee0da; }
.paint-page .paint-secondary-grid { margin-top: 16px; }
.paint-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.paint-page .paint-openings-card { margin: 20px 0 0; padding: 18px; background: #f4e9e5; border: 1px solid #dfc8bf; border-left: 4px solid var(--safety-dark); }
.paint-page .paint-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.paint-page .paint-options label { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid #c8ced1; border-radius: 5px; background: #fbfcfb; font-weight: 700; }
.paint-page .paint-options input { width: 18px; height: 18px; accent-color: var(--safety-dark); }
.paint-page .paint-materials { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.paint-page .paint-materials div { padding: 13px; background: var(--asphalt); }
.paint-page .paint-materials span, .paint-page .paint-materials strong { display: block; }
.paint-page .paint-materials span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.paint-page .paint-materials strong { margin-top: 3px; }
.paint-page .paint-order-callout { position: relative; z-index: 1; margin-top: 18px; padding: 14px; background: rgba(255,255,255,.07); border-left: 3px solid var(--safety); }
.paint-page .paint-order-callout span, .paint-page .paint-order-callout strong { display: block; }
.paint-page .paint-order-callout span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.paint-page .paint-order-callout strong { margin-top: 4px; }
.paint-page #paintCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.paint-page .paint-results::after { border-radius: 50% 2px 50% 2px; transform: rotate(24deg); }

.mulch-page { --safety: #87a450; --safety-dark: #506b20; --blueprint: #e5eadb; }
.mulch-page .mulch-shape-toggle { width: 100%; margin-bottom: 18px; }
.mulch-page .mulch-shape-toggle button { flex: 1; }
.mulch-page .mulch-secondary-grid { margin-top: 16px; }
.mulch-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.mulch-page .mulch-materials { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.mulch-page .mulch-materials div { padding: 13px; background: var(--asphalt); }
.mulch-page .mulch-materials span, .mulch-page .mulch-materials strong { display: block; }
.mulch-page .mulch-materials span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.mulch-page .mulch-materials strong { margin-top: 3px; }
.mulch-page .mulch-warning { position: relative; z-index: 1; margin-top: 18px; padding: 14px; color: #e9efdf; background: rgba(135,164,80,.12); border-left: 3px solid var(--safety); }
.mulch-page .mulch-warning strong, .mulch-page .mulch-warning span { display: block; }
.mulch-page .mulch-warning span { margin-top: 4px; font-size: .82rem; line-height: 1.5; }
.mulch-page #mulchCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.mulch-page .mulch-results::after { border-radius: 50%; transform: scaleX(1.6) rotate(-9deg); }

.sand-page { --safety: #d6aa58; --safety-dark: #795717; --blueprint: #eee6d6; }
.sand-page .sand-shape-toggle { width: 100%; margin-bottom: 18px; }
.sand-page .sand-shape-toggle button { flex: 1; }
.sand-page .sand-secondary-grid { margin-top: 16px; }
.sand-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.sand-page .sand-materials { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.sand-page .sand-materials div { padding: 13px; background: var(--asphalt); }
.sand-page .sand-materials span, .sand-page .sand-materials strong { display: block; }
.sand-page .sand-materials span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.sand-page .sand-materials strong { margin-top: 3px; }
.sand-page .sand-warning { position: relative; z-index: 1; margin-top: 18px; padding: 14px; color: #f2e8d4; background: rgba(214,170,88,.12); border-left: 3px solid var(--safety); }
.sand-page .sand-warning strong, .sand-page .sand-warning span { display: block; }
.sand-page .sand-warning span { margin-top: 4px; font-size: .82rem; line-height: 1.5; }
.sand-page #sandCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.sand-page .sand-results::after { border-radius: 50%; transform: scaleX(1.7) rotate(-12deg); }

.concrete-page { --safety: #c98f48; --safety-dark: #744714; --blueprint: #e9e2d8; }
.concrete-page .concrete-mode-toggle { width: 100%; margin-bottom: 18px; }
.concrete-page .concrete-mode-toggle button { flex: 1; }
.concrete-page .concrete-thickness-field { margin-top: 16px; }
.concrete-page .concrete-secondary-grid { margin-top: 16px; }
.concrete-page .standalone-input { min-height: 48px; border: 1px solid #bfc8cd; border-radius: 5px; background: #fbfcfb; }
.concrete-page .concrete-materials { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.concrete-page .concrete-materials div { padding: 13px; background: var(--asphalt); }
.concrete-page .concrete-materials span, .concrete-page .concrete-materials strong { display: block; }
.concrete-page .concrete-materials span { color: #aeb9be; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.concrete-page .concrete-materials strong { margin-top: 3px; }
.concrete-page .concrete-warning { position: relative; z-index: 1; margin-top: 18px; padding: 14px; color: #f0e8dc; background: rgba(201,143,72,.12); border-left: 3px solid var(--safety); }
.concrete-page .concrete-warning strong, .concrete-page .concrete-warning span { display: block; }
.concrete-page .concrete-warning span { margin-top: 4px; font-size: .82rem; line-height: 1.5; }
.concrete-page #concreteCopyStatus { margin: 0; color: #dce3e6; font-size: .84rem; }
.concrete-page .concrete-results::after { border-radius: 50% 35% 45% 40%; transform: rotate(-12deg); }

@media (max-width: 850px) {
  .calculator-shell, .content-layout { grid-template-columns: 1fr; }
  .content-layout { gap: 45px; }
  .related-card { position: static; }
  .intro { align-items: start; flex-direction: column; }
  .trust-note { white-space: normal; }
  .method-strip { flex-direction: column; gap: 2px; }
  footer { grid-template-columns: 1fr; gap: 8px; }
  .home-hero { grid-template-columns: 1fr; min-height: auto; }
  .home-hero-copy { padding: 64px 0 35px; }
  .home-proof { margin: 0 16px 70px 0; }
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .home-method { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 560px) {
  .site-header { height: 62px; padding: 0 16px; }
  .site-header nav { display: none; }
  main { padding: 0 14px 60px; }
  .breadcrumb { padding-top: 15px; }
  .intro { padding: 16px 0 17px; gap: 10px; }
  .intro h1 { font-size: 2.45rem; margin-bottom: 8px; }
  .lede { font-size: .98rem; line-height: 1.5; }
  .trust-note { font-size: .78rem; }
  .method-strip { margin-top: -4px; font-size: .74rem; }
  .calculator-panel, .results-panel { padding: 23px 18px; }
  .fields-grid { gap: 12px; }
  .unit-toggle button, .mode-toggle button { padding: 8px 11px; }
  .result-grid { grid-template-columns: 1fr; }
  .main-result strong { font-size: 4rem; }
  .main-result { flex-wrap: wrap; }
  .ad-slot { margin-bottom: 48px; }
  .faq-section { margin-top: 60px; }
  .holding-card { padding: 32px 24px; }
  .home-page main { padding-bottom: 65px; }
  .home-hero-copy { padding-top: 48px; }
  .home-hero h1 { font-size: 3rem; }
  .home-lede { font-size: 1rem; }
  .home-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .home-proof { box-shadow: 8px 8px 0 var(--safety); }
  .featured-section, .category-section { padding-top: 65px; }
  .featured-grid, .category-grid { grid-template-columns: 1fr; }
  .featured-tool { min-height: 230px; }
  .home-method { margin-top: 65px; padding: 30px 22px; }
  .stone-page .shape-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stone-page .shape-toggle button { width: 100%; }
  .stone-page .fields-grid { grid-template-columns: 1fr; }
  .river-page .river-mode-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .river-page .river-mode-toggle button { width: 100%; }
  .river-page .fields-grid { grid-template-columns: 1fr; }
  .block-page .fields-grid { grid-template-columns: 1fr; }
  .roof-page .fields-grid { grid-template-columns: 1fr; }
  .roof-page .roof-mode-toggle { display: grid; grid-template-columns: 1fr; }
  .roof-page .roof-diagram svg { height: 165px; }
  .slab-page .fields-grid { grid-template-columns: 1fr; }
  .slab-page .slab-cost-grid { grid-template-columns: 1fr; }
  .drywall-page .fields-grid { grid-template-columns: 1fr; }
  .drywall-page .drywall-supplies { grid-template-columns: 1fr; }
  .wallpaper-page .fields-grid { grid-template-columns: 1fr; }
  .topsoil-page .topsoil-mode-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topsoil-page .topsoil-mode-toggle button { width: 100%; }
  .topsoil-page .fields-grid { grid-template-columns: 1fr; }
  .brick-page .fields-grid { grid-template-columns: 1fr; }
  .insulation-page .fields-grid { grid-template-columns: 1fr; }
  .insulation-page .insulation-material-toggle { display: grid; grid-template-columns: 1fr; }
  .shingle-page .fields-grid { grid-template-columns: 1fr; }
  .fence-page .fields-grid { grid-template-columns: 1fr; }
  .deck-page .fields-grid { grid-template-columns: 1fr; }
  .flooring-page .fields-grid { grid-template-columns: 1fr; }
  .flooring-page .flooring-mode-toggle { display: grid; grid-template-columns: 1fr; }
  .tile-page .fields-grid { grid-template-columns: 1fr; }
  .paver-page .fields-grid { grid-template-columns: 1fr; }
  .retaining-page .fields-grid { grid-template-columns: 1fr; }
  .siding-page .fields-grid, .siding-page .siding-materials { grid-template-columns: 1fr; }
  .paint-page .fields-grid, .paint-page .paint-materials, .paint-page .paint-options { grid-template-columns: 1fr; }
  .mulch-page .fields-grid, .mulch-page .mulch-materials { grid-template-columns: 1fr; }
  .sand-page .fields-grid, .sand-page .sand-materials { grid-template-columns: 1fr; }
  .concrete-page .fields-grid, .concrete-page .concrete-materials { grid-template-columns: 1fr; }
  .concrete-page .concrete-mode-toggle { flex-direction: column; }
}

@media (max-width: 390px) {
  .fields-grid { grid-template-columns: 1fr; }
  .unit-toggle, .mode-toggle { width: 100%; }
  .unit-toggle button, .mode-toggle button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }