@import url('/calculator-base.css');
@import url('/site-footer.css');

body { background: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.site-header { position: relative; z-index: 20; background: #fff; }

.page-intro, .calculator-shell, .results-section { width: min(75%, 1050px); max-width: none; margin-right: auto; margin-left: auto; }
.page-intro { padding: clamp(1.35rem, 3vw, 2.5rem) 0 2.5rem; background: transparent; }
.breadcrumb { align-items: center; margin: 0 0 1.35rem; font-size: .78rem; }
.breadcrumb a { display: inline-flex; align-items: center; gap: .35rem; color: var(--blue); text-decoration: none; }
.breadcrumb a::before { content: ''; width: .82rem; height: .82rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 0-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 0-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.page-intro h1, .content-section h2, .visual-section h2 { width: 100%; max-width: none; }
.page-intro h1 { margin-bottom: .55rem; font-size: clamp(2.55rem, 5.2vw, 4.8rem); }
.page-intro > .hero-description { width: 100%; max-width: none; margin: 0; color: #426474; font-size: 1.06rem; line-height: 1.62; }
.hero-scope { margin: .75rem 0 0; padding-left: .8rem; border-left: 3px solid var(--blue); color: #426474; font-size: .86rem; font-weight: 500; line-height: 1.55; }

.calculator-shell { margin-top: 0; padding: 0; }
.calculator-head { align-items: center; padding: 1.35rem 1.5rem; border: 1px solid var(--line); border-radius: 13px 13px 0 0; background: var(--navy); }
.calculator-head .eyebrow { color: #7ce4dc; }
.calculator-head h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.calculator-head > p { max-width: 410px; color: #d4ebec; font-size: .84rem; line-height: 1.55; }
.mode-tabs { overflow: hidden; border-color: var(--line); }
.mode-tabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-tab { min-height: 64px; padding: .75rem .8rem; border-right-color: var(--line); color: #365f70; background: #fff; font-size: .78rem; text-align: left; }
.mode-tab small { margin-top: .18rem; color: #67808d; font-size: .66rem; line-height: 1.35; }
.mode-tab.active { color: #fff; background: var(--blue); }
.mode-tab.active small { color: #e5fbf9; }
.calculator-layout { grid-template-columns: minmax(0, 1fr); border-color: var(--line); border-radius: 0 0 13px 13px; }
.calculator-form { min-width: 0; padding: 1.5rem; }
fieldset legend { display: flex; align-items: center; margin-bottom: 1.15rem; line-height: 1.25; }
legend span { flex: 0 0 25px; margin-right: .55rem; background: var(--blue); }
.field-grid { gap: 1rem; }
.field label { font-size: .82rem; }
.calculator-form :is(input, select), .fixture-row :is(input, select) { min-height: 43px; border: 1px solid #c7d7dc; color: var(--ink); background: #fff; font-size: .86rem; }
.calculator-form select, .fixture-row select { padding-right: 3.5rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%230b3150' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: .8rem; }
.calculator-form :is(input, select):focus, .fixture-row :is(input, select):focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); outline: none; }
.helper { font-size: .71rem; }
.fixture-availability { margin: .45rem 0 0; color: #9b3b12; font-weight: 500; line-height: 1.45; }
.fixture-availability[hidden] { display: none; }
.subsection { margin-top: 1.8rem; padding-top: 1.45rem; }
.subsection > legend { margin-bottom: .2rem; }
.form-actions { margin-top: 1.45rem; }
.primary-button { background: var(--blue); }
.primary-button:hover { background: #008b82; }
.text-button { font-size: .78rem; }
.start-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: center; padding: 1.1rem 1.5rem; border-top: 1px solid var(--line); color: #426474; background: #f8fbfb; }
.start-panel h3 { margin: 0 0 .25rem; color: var(--navy); font-size: .92rem; }
.start-panel p { margin: 0; font-size: .77rem; line-height: 1.55; }
.start-points { grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.start-points span { padding: .6rem .7rem; border: 1px solid #dbe8eb; border-left: 3px solid var(--blue); color: #426474; background: #fff; font-size: .68rem; }

.fixture-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .65rem; align-items: end; margin: 0 0 1rem; }
.secondary-button { min-height: 43px; padding: .6rem .8rem; border: 1px solid #b9ced4; border-radius: 7px; color: var(--navy); background: #eef6f7; font: 600 .72rem Poppins, sans-serif; cursor: pointer; }
.secondary-button:hover { color: #fff; border-color: var(--blue); background: var(--blue); }
.schedule-empty { padding: 1.25rem; border: 1px dashed #afc7cd; border-radius: 9px; color: #5b7582; background: #f8fbfb; font-size: .76rem; text-align: center; }
.fixture-list { display: grid; gap: .75rem; }
.fixture-row { padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.fixture-row.needs-review { border-color: #e3a55b; background: #fffaf3; }
.fixture-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.fixture-row h3 { margin: 0; color: var(--navy); font-size: .9rem; line-height: 1.35; }
.row-meta { display: block; margin-top: .15rem; color: #6b818c; font-size: .63rem; }
.remove-fixture { border: 0; color: #8b4d48; background: transparent; font: 600 .67rem Poppins, sans-serif; cursor: pointer; }
.row-grid { display: grid; grid-template-columns: minmax(170px, .85fr) repeat(2, minmax(130px, 1fr)); gap: .7rem; align-items: end; }
.fixture-row-controls { display: grid; gap: .7rem; }
.row-metric { min-height: 66px; padding: .58rem .65rem; border: 1px solid #dbe8eb; border-radius: 7px; background: #f6fbfb; }
.row-metric span { display: block; color: #657f8c; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.row-metric strong { display: block; color: var(--navy); font-size: .84rem; }
.row-metric small { color: #6a818b; font-size: .58rem; }
.source-disclosure { margin-top: .7rem; border-top: 1px solid #e3eaec; }
.source-disclosure summary { display: flex; align-items: center; justify-content: space-between; padding-top: .65rem; color: var(--blue); font-size: .66rem; font-weight: 600; cursor: pointer; list-style: none; }
.source-disclosure summary::-webkit-details-marker { display: none; }
.source-disclosure summary::after { content: '+'; font-size: 1rem; }
.source-disclosure[open] summary::after { content: '−'; }
.source-disclosure p { margin: .35rem 0 0; color: #607984; font-size: .64rem; }
.badge { display: inline-flex; margin-left: .35rem; padding: .13rem .38rem; border-radius: 99px; color: #6a7780; background: #edf2f3; font-size: .55rem; font-weight: 700; }
.badge.custom { color: #76560b; background: #fff0c8; }
.warning-box { margin: .8rem 0; padding: .8rem .9rem; border-left: 4px solid var(--amber); color: #6f5227; background: #fff7ea; font-size: .7rem; }
.custom-fields { display: grid; grid-template-columns: 1.2fr .65fr .65fr; gap: .7rem; }
.mode-supply .dfu-only, .mode-drainage .wsfu-only { display: none; }

.results-section { margin-top: 3rem; }
.results-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.result-header { padding: 1.35rem 1.5rem 1rem; }
.result-header h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.result-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; gap: .43rem; min-height: 2.4rem; padding: .5rem .75rem; border: 1px solid #bcd9d7; border-radius: 7px; color: var(--blue); background: #fff; font-size: .72rem; }
.copy-button:hover { color: #fff; border-color: var(--blue); background: var(--blue); }
.copy-button svg { width: .95rem; height: .95rem; flex: 0 0 .95rem; }
.primary-result { margin-top: 0; padding: 1.45rem 1.5rem; border-radius: 0; background: var(--navy); }
.result-label { color: #7ce4dc; }
.result-summary { color: #d4ebec; font-size: .86rem; }
.result-basis { display: inline-flex; margin-top: .7rem; padding: .25rem .5rem; border: 1px solid #79b7c0; border-radius: 99px; color: #dff7f7; font-size: .64rem; font-weight: 600; }
.metric-grid { gap: .75rem; padding: 1.2rem 1.5rem; border: 0; border-radius: 0; background: #fff; }
.metric-grid article { min-height: 6.5rem; padding: .85rem; border: 1px solid #dbe8eb; border-radius: 8px; background: #fbfdfd; }
.metric-grid span { color: #54717e; }
.metric-grid strong { color: var(--navy); }
.result-details { padding: 0 1.5rem 1.4rem; }
.result-note { margin-top: 0; border-left-color: var(--blue); background: #eff9f8; }
.result-handoffs { display: none; }
.result-handoff { padding: 1rem; border: 1px solid #bcd9d7; border-radius: 8px; background: #f8fbfb; }
.result-handoff:has(#demand-method-title) { grid-column: 1 / -1; }
.result-handoff .eyebrow { margin-bottom: .25rem; font-size: .62rem; }
.result-handoff h3 { margin: 0; color: var(--navy); font-size: .92rem; line-height: 1.35; }
.result-handoff p { margin: .45rem 0 .8rem; color: #536f7c; font-size: .72rem; line-height: 1.58; }
.handoff-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.3rem; padding: .45rem .7rem; border-radius: 7px; color: #fff !important; background: var(--blue); font-size: .69rem; font-weight: 600; text-decoration: none; }
.handoff-button:hover { background: #008b82; }
.handoff-link { display: inline-block; margin-top: .6rem; color: var(--blue) !important; font-size: .68rem; font-weight: 600; line-height: 1.4; }
.breakdown, .demand-handoff { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.breakdown summary, .demand-handoff summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.8rem; padding: 0 .9rem; color: var(--navy); font-size: .78rem; font-weight: 600; cursor: pointer; list-style: none; }
.breakdown summary::-webkit-details-marker, .demand-handoff summary::-webkit-details-marker { display: none; }
.breakdown summary::after, .demand-handoff summary::after { content: '+'; color: var(--blue); font-size: 1.15rem; font-weight: 700; }
.breakdown[open] summary::after, .demand-handoff[open] summary::after { content: '−'; }
.breakdown-grid { display: grid; gap: .55rem; padding: 0 .9rem .9rem; }
.breakdown-row { display: grid; grid-template-columns: minmax(190px, 1.5fr) 70px 1fr 1fr; gap: .6rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 8px; color: #4c6976; font-size: .7rem; }
.breakdown-row strong { color: var(--navy); }
.breakdown-row small { display: block; color: #78909a; }
.demand-handoff { padding-bottom: .9rem; background: #f8fbfb; }
.demand-handoff h3, .demand-handoff p { margin: .45rem .9rem 0; }
.demand-handoff h3 { color: var(--navy); font-size: .9rem; }
.demand-handoff p { color: #536f7c; font-size: .72rem; }
.demand-handoff a, .page-content a { color: var(--blue); font-weight: 600; }

.page-body-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; grid-template-areas: 'content sidebar'; gap: 3.5rem; align-items: start; width: min(75%, 1050px); margin: 3.4rem auto 0; padding-bottom: 3rem; }
.page-content { display: flex; flex-direction: column; grid-area: content; min-width: 0; }
.page-content > * { width: auto; max-width: none; margin: 0; padding: 0; }
.page-content > * + * { margin-top: 2.65rem; }
.page-sidebar { position: sticky; top: 1.5rem; grid-area: sidebar; }
.page-toc { padding: 1.15rem; border: 0; border-radius: 12px; background: var(--blue); }
.toc-intro { margin-bottom: .9rem; }
.page-toc-label { margin: 0 0 .2rem; color: #fff; font-size: .9rem; font-weight: 700; }
.toc-intro > p:last-child { margin: 0; color: #e3fffc; font-size: .68rem; line-height: 1.5; }
.page-toc ol { display: grid; gap: .48rem; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.page-toc li { counter-increment: toc; }
.page-toc a { display: flex; align-items: center; gap: .65rem; min-height: 3.15rem; padding: .5rem .55rem; border: 0; border-radius: 7px; color: #fff; background: rgba(255, 255, 255, .1); font-size: .71rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.page-toc a::before { content: counter(toc, decimal-leading-zero); display: grid; width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; place-items: center; border-radius: 50%; color: #08776f; background: #fff; font-size: .58rem; font-weight: 700; }
.page-toc a:hover, .page-toc a:focus-visible { color: #fff; background: rgba(255, 255, 255, .18); outline-color: #fff; }
.page-toc li:has(> a[href="#fixture-guide"]) { display: none; }
.page-toc li:has(> a[href="#fixture-groups"]) { display: none; }
.page-toc li:has(> a[href="#fixture-mistakes"]) { display: none; }
.visual-card { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 1.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.visual-card p { color: #526f7e; font-size: .85rem; line-height: 1.65; }
.visual-card h2 { margin-bottom: .7rem; }
.fixture-systems-card { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
.fixture-systems-card > div { max-width: none; }
.fixture-systems-card > div > p { max-width: none; font-size: .94rem; }
.fixture-systems-card > div > .eyebrow, .fixture-system-copy > .eyebrow { margin: 0 0 .45rem; color: var(--blue); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.fixture-systems-card #visual-copy { display: none; }
.fixture-systems-card .fixture-network-visual { display: none; }
.fixture-system-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .88fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.25rem); padding: clamp(2rem, 4vw, 3.4rem) 0; }
#wsfu-total { padding-top: clamp(1rem, 2vw, 1.5rem); }
.fixture-system-story + .fixture-system-story { padding-top: 0; }
.fixture-system-story.reverse .fixture-system-copy { order: 2; }
.fixture-system-copy h2 { margin: 0 0 .75rem; color: var(--navy); font-size: clamp(1.55rem, 2.7vw, 2.1rem); line-height: 1.2; }
.fixture-system-copy p { margin: 0 0 .8rem; color: #526f7e; font-size: .92rem; line-height: 1.7; }
.fixture-system-copy p:last-child { margin-bottom: 0; }
.fixture-system-figure { margin: 0; }
.fixture-system-figure svg { display: block; width: 100%; height: auto; }
#wsfu-total .fixture-system-figure { padding: .4rem; border: 1px solid #cbe6e3; border-radius: 16px; background: #f3fbfa; }
#wsfu-total .fixture-system-figure svg { display: none; }
#wsfu-total .fixture-system-figure::before { content: ""; display: block; aspect-ratio: 16 / 10; border-radius: 11px; background-color: #fff; background-image: image-set(url("/images/wsfu-water-supply-plan-1200.webp") type("image/webp") 1x, url("/images/wsfu-water-supply-plan.png") type("image/png") 1x); background-position: center; background-size: contain; background-repeat: no-repeat; }
#dfu-total .fixture-system-figure { padding: .4rem; border: 1px solid #d7e2e5; border-radius: 16px; background: #f7f9fa; }
#dfu-total .fixture-system-figure svg { display: none; }
#dfu-total .fixture-system-figure::before { content: ""; display: block; aspect-ratio: 16 / 10; border-radius: 11px; background-color: #fff; background-image: image-set(url("/images/dfu-drainage-path-1200.webp") type("image/webp") 1x, url("/images/dfu-drainage-path.png") type("image/png") 1x); background-position: center; background-size: contain; background-repeat: no-repeat; }
.fixture-system-figure figcaption { margin-top: .6rem; color: #607984; font-size: .7rem; line-height: 1.5; text-align: center; }
.fixture-system-figure .diagram-label { fill: #52727e; font: 700 13px Poppins, sans-serif; letter-spacing: .11em; }
.fixture-system-figure .diagram-value { fill: #0b3150; font: 700 30px Poppins, sans-serif; }
.fixture-system-figure .diagram-copy { fill: #58737e; font: 500 13px Poppins, sans-serif; }
.fixture-system-figure .diagram-note { fill: #0b3150; font: 600 13px Poppins, sans-serif; }
.fixture-visual .supply { stroke: #00a69b; fill: none; stroke-width: 8; stroke-linecap: round; }
.fixture-visual .drain { stroke: #647d88; fill: none; stroke-width: 10; stroke-linecap: round; }
.fixture-visual .fixture { fill: #f4fbfb; stroke: #0f7180; stroke-width: 4; }
.fixture-visual .label-box { fill: #e7f5f5; stroke: #abd1d5; stroke-width: 2; }
.content-section h2, .visual-section h2 { font-size: clamp(1.55rem, 2.7vw, 2.1rem); line-height: 1.2; }
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.steps li { padding: 1rem; border: 1px solid #dbe8eb; border-top: 3px solid var(--blue); background: #fff; }
.steps h3, .copy-grid h3, .mistake-grid h3 { font-size: .88rem; }
.steps p, .copy-grid p, .mistake-grid p, .section-lede, .source-list li, .faq-grid p { font-size: .82rem; line-height: 1.65; }
.copy-grid { grid-template-columns: 1fr; gap: .75rem; border: 0; overflow: visible; }
.copy-grid article { padding: 1rem; border: 1px solid #dbe8eb; border-radius: 9px; background: #fff; }
#fixture-units h2 { margin-bottom: 1.35rem; }
#fixture-code h2 { margin-bottom: 1.35rem; }
#fixture-limits h2 { margin-bottom: 1.35rem; }
#fixture-faqs h2 { margin-bottom: 1.35rem; }
#fixture-units .copy-grid p { font-size: .9rem; line-height: 1.7; }
#fixture-code .copy-grid p { font-size: .9rem; line-height: 1.7; }
#fixture-units .copy-grid h3 { display: flex; align-items: center; gap: .55rem; }
.unit-card-icon { display: inline-grid; width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; place-items: center; border-radius: 50%; color: var(--blue); background: #e8f7f5; }
.unit-card-icon svg { width: .95rem; height: .95rem; }
#fixture-code .copy-grid h3 { display: flex; align-items: center; gap: .55rem; }
.fixture-choice-icon { display: inline-grid; width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; place-items: center; border-radius: 50%; color: #0f7180; background: #e8f4f5; }
.fixture-choice-icon svg { width: .95rem; height: .95rem; }
.worked-example { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding: 0; border: 0; background: transparent; }
.worked-example > article { padding: 0; border: 0; border-radius: 0; background: transparent; }
.worked-example h3 { margin: 0 0 .45rem; color: var(--navy); font-size: .95rem; }
.worked-example p { margin: 0; color: #526f7e; font-size: .9rem; line-height: 1.65; }
#fixture-example .section-lede { font-size: .9rem; line-height: 1.7; }
.worked-example > article > p + p { margin-top: .75rem; }
.worked-example > article > .eyebrow { margin: 0 0 .45rem; color: var(--blue); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.worked-equation { padding: .8rem .9rem; border-left: 3px solid var(--blue); color: #365f70 !important; background: #f4fafa; }
.worked-next { padding: .8rem .9rem; border-left: 3px solid #9fcdd0; background: #f8fbfb; }
.worked-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.worked-next p { padding: .8rem .9rem; border: 1px solid #dbe8eb; border-radius: 7px; background: #fbfdfd; }
.worked-path { padding: .8rem .9rem; border-left: 3px solid var(--blue); background: #f4fafa; }
.mistake-grid { grid-template-columns: 1fr; gap: .75rem; }
.mistake-grid article { padding: 1rem; border: 1px solid #dbe8eb; border-left: 3px solid var(--blue); background: #fff; }
.mistake-grid p { color: #536f7b; }
.section-lede { max-width: none; color: #526f7e; }
.source-list { gap: .65rem; }
.source-list li { padding: .85rem .95rem; border: 1px solid var(--line); border-left: 3px solid var(--blue); color: #4e6b78; background: #fff; }
.coverage-details { margin: 1rem 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.coverage-details { display: none; }
.coverage-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.8rem; padding: 0 .9rem; color: var(--navy); font-size: .78rem; font-weight: 600; cursor: pointer; list-style: none; }
.coverage-details summary::-webkit-details-marker { display: none; }
.coverage-details summary::after { content: '+'; color: var(--blue); font-size: 1.15rem; font-weight: 700; }
.coverage-details[open] summary::after { content: '−'; }
.coverage-details p { margin: 0; padding: 0 .9rem .9rem; color: #526f7e; font-size: .76rem; line-height: 1.65; }
.limits-table { min-width: 0 !important; }
.limits-table th:first-child { width: 29%; }
.limits-table td { font-size: .82rem; line-height: 1.65; vertical-align: top; }
#fixture-limits .limits-table tbody :is(th, td) { font-size: .9rem; line-height: 1.7; }
#fixture-limits .limits-table tbody th { font-size: .78rem; }
.source-table { min-width: 0 !important; }
.source-table-wrap { margin-top: 1.25rem; }
.source-table th:first-child { width: 36%; }
.source-table td { font-size: .82rem; line-height: 1.65; vertical-align: top; }
.faq-grid { grid-template-columns: 1fr; gap: .75rem; }
.faq-grid details { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: none; }
.faq-grid summary { display: flex; align-items: center; justify-content: space-between; min-height: 0; color: var(--navy); font-size: .9rem; font-weight: 600; list-style: none; cursor: pointer; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: '+'; color: var(--blue); font-size: 1.1rem; font-weight: 700; }
.faq-grid details[open] summary::after { content: '−'; }
.faq-grid p { margin: .7rem 0 0; color: #526f7e; }

.print-report { display: none; }
@media print {
  @page { margin: 16mm; }
  body { color: #000; background: #fff; font-size: 10pt; }
  .site-header, .page-intro, .calculator-shell, .page-body-layout, .site-footer { display: none !important; }
  main, .results-section, .results-card { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .results-section[hidden] { display: none !important; }
  .print-report { display: block; margin-bottom: 1.25rem; }
  .print-report-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: .45rem; border-bottom: 1px solid #80949a; color: var(--navy); }
  .print-report-header p { margin: 0; font-weight: 700; }
  .print-report-title { margin: .7rem 0 1rem; color: var(--navy); font-size: 22pt; font-weight: 700; }
  .print-input-summary { padding: .85rem 1rem; border: 1px solid #b9cbd0; border-radius: 7px; }
  .print-input-summary h2 { margin: 0 0 .45rem; color: var(--navy); font-size: 12pt; }
  .print-input-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem 1rem; margin: 0; }
  .print-input-summary div { display: grid; grid-template-columns: 45% 1fr; gap: .35rem; }
  .print-input-summary dt { color: #526a74; font-weight: 600; }
  .print-input-summary dd { margin: 0; }
  .result-header { padding: 0 0 .7rem; }
  .result-header .eyebrow, .result-actions, .demand-handoff { display: none !important; }
  .result-header h2 { font-size: 16pt; }
  .primary-result { padding: .9rem 1rem; color: #000; background: #eef6f5 !important; border: 1px solid #b9d8d3; }
  .primary-result :is(p, .result-label, .result-summary, .result-basis) { color: #000 !important; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); padding: .85rem 0; }
  .metric-grid article { min-height: 0; break-inside: avoid; }
  .result-details { padding: 0; }
  .result-note { margin: 0; }
}

@media (max-width: 900px) {
  .page-body-layout { gap: 2.5rem; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-panel { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .page-intro, .calculator-shell, .results-section { width: auto; margin-right: clamp(1.25rem, 8vw, 10rem); margin-left: clamp(1.25rem, 8vw, 10rem); }
  .page-intro { padding-top: 1.25rem; padding-bottom: 2rem; }
  .breadcrumb { margin-bottom: 1.1rem; }
  .page-intro h1 { font-size: 2.5rem; }
  .page-intro > .hero-description { font-size: .96rem; }
  .calculator-head { display: block; padding: 1.15rem; }
  .calculator-head > p { margin-top: .7rem; text-align: left; }
  .mode-tabs.three { grid-template-columns: 1fr; }
  .mode-tab { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .mode-tab:last-child { border-bottom: 0; }
  .calculator-form { padding: 1.15rem; }
  .field-grid, .row-grid, .custom-fields { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .primary-button, .text-button { width: 100%; }
  .start-panel { padding: 1rem 1.15rem; }
  .start-points { grid-template-columns: 1fr; }
  .fixture-system-story { grid-template-columns: 1fr; gap: 1.15rem; padding: 2rem 0; }
  .fixture-system-story.reverse .fixture-system-copy { order: initial; }
  .fixture-system-figure { max-width: 460px; margin-right: auto; margin-left: auto; }
  .worked-example { grid-template-columns: 1fr; }
  .fixture-toolbar { grid-template-columns: 1fr; }
  .fixture-toolbar .field { grid-column: auto; }
  .breakdown-row { grid-template-columns: 1fr 1fr; }
  .breakdown-row > div:first-child { grid-column: 1 / -1; }
  .results-section { margin-top: 2.4rem; }
  .result-header { align-items: flex-start; padding: 1.15rem 1.15rem .9rem; }
  .copy-button { min-width: 2.5rem; padding: .6rem; }
  .copy-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .primary-result { padding: 1.2rem 1.15rem; }
  .metric-grid { grid-template-columns: 1fr; padding: 1rem 1.15rem; }
  .metric-grid article { min-height: 0; }
  .result-details { padding: 0 1.15rem 1.15rem; }
  .result-handoffs { grid-template-columns: 1fr; }
  .page-body-layout { grid-template-columns: 1fr; grid-template-areas: 'sidebar' 'content'; gap: 2.4rem; width: auto; margin: 2.4rem clamp(1.25rem, 8vw, 10rem) 0; padding-bottom: 2.4rem; }
  .page-sidebar { position: static; }
  .page-content > * + * { margin-top: 2.25rem; }
  .visual-card { grid-template-columns: 1fr; padding: 1rem; }
  .steps { grid-template-columns: 1fr; }
  .worked-next { grid-template-columns: 1fr; }
}