.material-compare { background: #f3f2e9; color: #203c32; }
.material-compare .brand { display: inline-flex; align-items: center; gap: 9px; }
.material-compare .brand-symbol { display: inline-flex; width: 28px; height: 28px; }
.material-compare .brand-symbol svg { width: 100%; height: 100%; }
.material-compare .skip-link { position: absolute; top: 8px; left: -9999px; z-index: 5; background: #fffefa; padding: 8px 12px; }
.material-compare .skip-link:focus { left: 12px; }
.compare-main { max-width: 1040px; padding-top: 8px; }
.compare-main .path { margin: 0 0 10px; color: #56685d; font-size: .84rem; }
.compare-main h1 { margin: 0; max-width: 22ch; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.045em; }
.compare-main .lead { max-width: 63ch; margin: 12px 0 21px; color: #486155; font-size: 1.03rem; line-height: 1.55; }
.answer { border: 1px solid #bdcabe; border-top: 6px solid #386e54; background: #fffefa; padding: clamp(16px, 3vw, 28px); }
.answer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 1px solid #cbd6cb; padding-bottom: 16px; }
.answer h2 { margin: 0 0 4px; font-size: 1.17rem; }
.answer-head p { margin: 0; }
#example-label { max-width: 40ch; color: #53675a; font-size: .83rem; }
#answer { max-width: 28ch; color: #17533d; font-size: clamp(1rem, 2vw, 1.34rem); font-weight: 800; text-align: right; line-height: 1.3; }
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.total { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 17px 12px 16px 0; }
.total + .total { border-left: 1px solid #cbd6cb; padding-left: 25px; }
.total span { color: #32654e; font-size: .86rem; font-weight: 750; }
.total.pine span { color: #775a32; }
.total strong { font-size: clamp(1.85rem, 4vw, 3rem); font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.total small { color: #506156; font-size: .8rem; line-height: 1.4; }
#status { border-top: 1px solid #cbd6cb; margin: 0; padding: 11px 0 0; color: #445b4d; font-size: .83rem; line-height: 1.5; }
.break-even { margin: 10px 0 0; border-left: 3px solid #bd9d62; padding-left: 11px; color: #50482e; font-size: .87rem; }
.inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 27px 0 14px; }
.inputs fieldset { min-width: 0; margin: 0; border: 0; border-top: 2px solid #527b60; padding: 12px 0 0; }
.inputs .area { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 24px; }
.inputs legend { padding: 0; color: #203c32; font-size: 1.18rem; font-weight: 780; }
.inputs .wood { border-color: #2f6b7a; }
.inputs .pine { border-color: #9b7540; }
.inputs p { max-width: 49ch; margin: 3px 0 15px; color: #4e6154; font-size: .85rem; line-height: 1.5; }
.inputs .area p { margin: 0 0 8px; }
.inputs label { display: grid; gap: 5px; min-width: 0; font-size: .86rem; font-weight: 740; }
.inputs label span { color: #596b60; font-size: .76rem; font-weight: 500; }
.inputs input { box-sizing: border-box; width: 100%; min-height: 46px; padding: 7px 10px; border: 1px solid #a9b9ad; border-radius: 3px; background: #fffefa; color: #203c32; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.inputs .area label { flex: 0 1 250px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.material-compare :is(a, input):focus-visible { outline: 3px solid #b46727; outline-offset: 2px; }
.method-sketch { margin: 15px 0 24px; border-top: 1px solid #b9c8ba; border-bottom: 1px solid #b9c8ba; padding: 15px 0; }
.method-sketch img { display: block; max-width: 100%; height: auto; }
.method-sketch figcaption { margin-top: 8px; color: #516458; font-size: .82rem; }
.notes { max-width: 76ch; margin-bottom: 30px; }
.notes h2 { margin: 0 0 9px; font-size: 1.4rem; letter-spacing: -.025em; }
.notes p { margin: 0 0 12px; color: #344b3c; line-height: 1.65; }
.compare-faq details { border-top: 1px solid #b9c8ba; padding: 11px 0; }
.compare-faq details:last-child { border-bottom: 1px solid #b9c8ba; }
.compare-faq summary { cursor: pointer; font-weight: 740; }
.compare-faq details p { margin: 8px 0 0; }
@media (max-width: 700px) { .inputs { grid-template-columns: 1fr; } .inputs .area { grid-column: auto; } .answer-head { display: block; } #answer { max-width: none; margin-top: 10px; text-align: left; } }
@media (max-width: 390px) { .compare-main { width: calc(100% - 24px); } .compare-main .lead { font-size: .94rem; } .total + .total { padding-left: 10px; } .total { padding-right: 8px; } .total strong { font-size: 1.75rem; } .field-grid { gap: 10px; } }