/* Pressure washing pricing calculator. The form sits on the light reading sheet; the price is a graphite
   plate beside it (below it on a phone), the one object on the page. Its bar splits the price by surface,
   and the split always adds up to the price. Tokens only. */
article.pwcalc { max-width: var(--wp-page); margin-inline: auto; padding: var(--wp-8) 0 var(--wp-16); }
.pwcalc h1 { max-width: 16ch; margin: 0 0 var(--wp-4); font: 600 clamp(2.5rem, 5.2vw, 4.5rem)/.98 var(--wp-font-display); letter-spacing: -.035em; text-wrap: balance; }
.pwcalc h2 { font: 500 var(--wp-text-title)/1.02 var(--wp-font-display); letter-spacing: -.03em; margin: 0 0 var(--wp-4); }
.pwcalc h3 { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); margin: 0 0 var(--wp-2); letter-spacing: 0; }
.pwcalc .pw-kicker { margin: 0 0 var(--wp-3); font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted); }
.pwcalc .pw-intro { max-width: 46rem; margin-bottom: var(--wp-8); }
.pwcalc .pw-lede { margin: 0 0 var(--wp-3); font-size: var(--wp-text-lede); line-height: 1.5; }
.pwcalc .pw-private { margin: 0; font-size: 1rem; color: var(--wp-muted); }
.pwcalc .pw-noscript { padding: var(--wp-4); border-left: var(--wp-rule-strong) solid var(--wp-rust); background: var(--wp-panel); }

/* the tool: on a wide screen the plate stands beside the title and the form, and stays in view while you type */
.pwcalc .pw-tool { display: grid; gap: var(--wp-8); align-items: start; }
.pwcalc .pw-tool .pw-intro { margin-bottom: 0; }
@media (min-width: 64rem) {
  .pwcalc .pw-tool { grid-template-columns: minmax(0, 1fr) minmax(22rem, 25rem); grid-template-rows: auto 1fr; gap: var(--wp-8) var(--wp-12); }
  .pwcalc .pw-intro, .pwcalc .pw-form { grid-column: 1; }
  .pwcalc .pw-plate { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--wp-4); }
}
.pwcalc .pw-form:focus { outline: none; }

/* fieldsets: a strong rule, a numbered legend */
.pwcalc .pw-set { margin: 0 0 var(--wp-8); padding: var(--wp-4) 0 0; border: 0; border-top: var(--wp-rule-strong) solid var(--wp-ink); min-width: 0; }
.pwcalc legend { display: flex; align-items: center; gap: var(--wp-3); padding: 0; margin: 0 0 var(--wp-3); font: 500 1.5rem/1.1 var(--wp-font-display); letter-spacing: -.02em; float: left; width: 100%; }
.pwcalc legend + * { clear: both; }
.pwcalc .pw-step { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--wp-ink); color: var(--oa-paper); font: 500 .875rem/1 var(--wp-font-mono); letter-spacing: 0; }
.pwcalc .pw-hint { margin: 0 0 var(--wp-4); max-width: 44em; color: var(--wp-muted); font-size: 1rem; line-height: 1.5; clear: both; }

/* one field: label, input (with a $ or % mark), note, error */
.pwcalc .pw-f { display: flex; flex-direction: column; gap: var(--wp-1); min-width: 0; }
.pwcalc .pw-f label { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.pwcalc .pw-f input, .pwcalc .pw-f select { font: 400 1.0625rem/1.3 var(--wp-font-body); font-variant-numeric: tabular-nums; min-height: var(--wp-tap); }
.pwcalc .pw-in { position: relative; display: block; }
.pwcalc .pw-in .pw-unit { position: absolute; top: 50%; transform: translateY(-50%); color: var(--wp-muted); font: 500 1rem/1 var(--wp-font-mono); pointer-events: none; }
.pwcalc .pw-usd .pw-unit { left: var(--wp-3); }
.pwcalc .pw-usd input { padding-left: 1.75rem; }
.pwcalc .pw-pct .pw-unit { right: var(--wp-3); }
.pwcalc .pw-pct input { padding-right: 2rem; }
.pwcalc .pw-note { font-size: var(--wp-text-meta); line-height: 1.4; color: var(--wp-muted); }
.pwcalc input[aria-invalid="true"] { border-color: var(--wp-rust); box-shadow: inset 4px 0 0 var(--wp-rust); }
.pwcalc .pw-field-err { font-size: var(--wp-text-meta); line-height: 1.4; font-weight: 600; color: var(--wp-rust); }
.pwcalc .pw-grid { display: grid; gap: var(--wp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr)); align-items: start; }
@media (min-width: 40rem) { .pwcalc .pw-grid { gap: var(--wp-4) var(--wp-6); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } }
/* two fields a line on a phone: a two-line label box keeps the inputs level */
@media (max-width: 39.99rem) { .pwcalc .pw-grid .pw-f > label, .pwcalc .pw-row .pw-f:not(.pw-f-name) > label { min-height: 2.6em; display: flex; align-items: flex-end; } }

/* surfaces: a card per row on a phone; a ruled table row from 40rem, labels shown once */
.pwcalc .pw-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp-3); counter-reset: surf; }
.pwcalc .pw-row { counter-increment: surf; position: relative; display: grid; gap: var(--wp-3); grid-template-columns: 1fr 1fr; padding: var(--wp-4); padding-right: 3.75rem; background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-hair); }
.pwcalc .pw-row.has-err { border-color: var(--wp-rust); }
.pwcalc .pw-row .pw-f-name { grid-column: 1 / -1; }
#rows .pw-remove { position: absolute; top: var(--wp-2); right: var(--wp-2); width: var(--wp-tap); height: var(--wp-tap); min-height: var(--wp-tap); padding: 0; border: var(--wp-rule) solid transparent; border-radius: 50%; background: transparent; color: var(--wp-muted); font: 400 1.75rem/1 var(--wp-font-body); }
#rows .pw-remove:hover { color: var(--wp-ink); border-color: var(--wp-ink); background: transparent; }
#rows.is-single .pw-remove { display: none; }
@media (min-width: 40rem) {
  .pwcalc .pw-rows { gap: 0; }
  .pwcalc .pw-row { grid-template-columns: minmax(9rem, 2.4fr) repeat(4, minmax(4.5rem, 1fr)); align-items: start; padding: var(--wp-3) 3.5rem var(--wp-3) 0; background: none; border: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .pwcalc .pw-row .pw-f-name { grid-column: auto; }
  .pwcalc .pw-row.has-err { border-color: var(--wp-hair); }
  /* the first row carries the column labels in a two-line box, so every input sits on one line and a field message grows the row downward */
  .pwcalc .pw-row:first-child .pw-f > label { min-height: 2.6em; display: flex; align-items: flex-end; }
  .pwcalc .pw-row + .pw-row label { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .pwcalc .pw-row .pw-f label { font-size: var(--wp-text-meta); }
  #rows .pw-remove { top: var(--wp-3); right: 0; }
  #rows .pw-row:first-child .pw-remove { top: calc(var(--wp-3) + 2.6 * var(--wp-text-meta) + var(--wp-1)); }
}
.pwcalc .pw-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-2) var(--wp-4); margin: var(--wp-4) 0 0; }
.pwcalc .pw-add[disabled] { opacity: .45; cursor: not-allowed; }
.pwcalc .pw-count { font-size: var(--wp-text-meta); color: var(--wp-muted); }
.pwcalc .pw-reset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-2) var(--wp-4); margin: 0; }

/* the plate: graphite, paper type, pale blue for the price and the check */
.pwcalc .pw-plate { background: var(--oa-ground); color: var(--oa-paper); padding: var(--wp-6); border-top: 3px solid var(--oa-blue); scroll-margin-top: var(--wp-4); }
.pwcalc .pw-plate-h:focus { outline: none; }
.pwcalc .pw-plate a { color: var(--oa-paper); text-decoration-color: var(--oa-blue); }
.pwcalc .pw-plate a:focus-visible, .pwcalc .pw-plate summary:focus-visible { outline-color: var(--wp-focus-field); }
.pwcalc .pw-plate-h { margin: 0; font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oa-muted); }
.pwcalc .pw-price { margin: var(--wp-1) 0 var(--wp-2); font: 600 clamp(3rem, 4.6vw, 4rem)/1 var(--wp-font-display); letter-spacing: -.04em; color: var(--oa-blue); font-variant-numeric: tabular-nums; }
.pwcalc .pw-price-none { color: var(--oa-paper); font-size: clamp(2rem, 3.4vw, 2.75rem); }
.pwcalc .pw-price-how { margin: 0 0 var(--wp-4); color: var(--oa-muted); font-size: 1rem; line-height: 1.45; }
.pwcalc .pw-plate dl { margin: 0; }
.pwcalc .pw-plate dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wp-4); padding: 6px 0; border-bottom: var(--wp-rule) solid var(--oa-line); }
.pwcalc .pw-plate dt { color: var(--oa-muted); font-size: .9375rem; line-height: 1.35; }
.pwcalc .pw-plate dd { margin: 0; font: 500 1rem/1.3 var(--wp-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pwcalc .pw-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--wp-4); margin-bottom: var(--wp-4) !important; }
.pwcalc .pw-pay > div { flex-direction: column; justify-content: flex-start; gap: 0; }
.pwcalc .pw-pay > div:last-child { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
.pwcalc .pw-pay dd { font-size: 1.25rem; text-align: left; }
.pwcalc .pw-pay > div:last-child dd { font-size: 1rem; text-align: right; }
.pwcalc .pw-profit dt, .pwcalc .pw-profit dd { color: var(--oa-paper); font-weight: 600; }
.pwcalc .pw-check { display: flex; gap: var(--wp-2); margin: var(--wp-3) 0 var(--wp-4); font-size: var(--wp-text-meta); line-height: 1.45; }
.pwcalc .pw-tick { color: var(--oa-blue); font-weight: 700; }
.pwcalc .pw-check.is-below .pw-tick { color: #f0a27c; }

.pwcalc .pw-split-h { margin: 0 0 var(--wp-2); font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oa-muted); }
.pwcalc .pw-bar { display: block; width: 100%; height: 14px; }
.pwcalc .pw-bar .pw-seg { stroke: var(--oa-ground); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.pwcalc .pw-seg-1 { fill: #b2c8f0; background: #b2c8f0; } .pwcalc .pw-seg-2 { fill: #e8e9e7; background: #e8e9e7; }
.pwcalc .pw-seg-3 { fill: #7c7f8a; background: #7c7f8a; } .pwcalc .pw-seg-4 { fill: #6f8cc6; background: #6f8cc6; }
.pwcalc .pw-seg-5 { fill: #c4c6cc; background: #c4c6cc; } .pwcalc .pw-seg-6 { fill: #dbe6fa; background: #dbe6fa; }
.pwcalc .pw-seg-7 { fill: #9a9da7; background: #9a9da7; } .pwcalc .pw-seg-8 { fill: #8ea9dc; background: #8ea9dc; }
.pwcalc .pw-lines { list-style: none; margin: var(--wp-3) 0 0; padding: 0; }
.pwcalc .pw-lines li { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--wp-3); padding: var(--wp-1) 0; font-size: .9375rem; line-height: 1.4; }
.pwcalc .pw-key { width: .75rem; height: .75rem; border-radius: 2px; transform: translateY(.05rem); }
.pwcalc .pw-line-sq { color: var(--oa-muted); font-size: var(--wp-text-meta); white-space: nowrap; }
.pwcalc .pw-lines data { font: 500 .9375rem/1.4 var(--wp-font-mono); font-variant-numeric: tabular-nums; }
.pwcalc .pw-sum { margin: var(--wp-2) 0 0; padding-top: var(--wp-2); border-top: var(--wp-rule) solid var(--oa-line); font-size: var(--wp-text-meta); color: var(--oa-muted); }
.pwcalc .pw-sum data { color: var(--oa-paper); font-family: var(--wp-font-mono); }
.pwcalc .pw-cost { margin-top: var(--wp-2); }
.pwcalc .pw-cost summary { min-height: var(--wp-tap); display: flex; align-items: center; width: fit-content; cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-color: var(--oa-blue); text-underline-offset: 4px; }
.pwcalc .pw-ledger-small dt, .pwcalc .pw-ledger-small dd { font-size: .875rem; }
.pwcalc .pw-to-buy { margin: var(--wp-2) 0 0; padding-top: var(--wp-2); border-top: var(--wp-rule) solid var(--oa-line); font-size: var(--wp-text-meta); }
.pwcalc .pw-to-buy a { display: inline-flex; align-items: center; min-height: var(--wp-tap); }
.pwcalc .pw-plate[data-state="done"] .pw-err-only, .pwcalc .pw-plate[data-state="error"] .pw-ok-only { display: none; }
.pwcalc .pw-err-text { margin: 0 0 var(--wp-2); line-height: 1.5; }
.pwcalc .pw-err-go { display: inline-flex; align-items: center; min-height: var(--wp-tap); font-weight: 600; }

/* the paid file: a ruled panel, words left, the button right */
.pwcalc .pw-buy { display: grid; gap: var(--wp-6); margin: var(--wp-16) 0 0; padding: var(--wp-6); background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); }
@media (min-width: 52rem) { .pwcalc .pw-buy { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: var(--wp-12); padding: var(--wp-8); align-items: end; } }
.pwcalc .pw-buy h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.pwcalc .pw-buy-line { margin: 0 0 var(--wp-3); max-width: 40em; }
.pwcalc .pw-buy-same { margin: 0; font-size: 1rem; color: var(--wp-muted); }
.pwcalc .pw-buy-button { width: 100%; }
.pwcalc .pw-buy-fine { margin: var(--wp-3) 0 0; font-size: 1rem; line-height: 1.5; color: var(--wp-muted); }

/* how the math works: numbered steps, each a formula line and the worked line under it */
.pwcalc .pw-math { margin-top: var(--wp-16); padding-top: var(--wp-8); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.pwcalc .pw-math-lede { max-width: 44em; margin: 0 0 var(--wp-8); font-size: var(--wp-text-lede); line-height: 1.5; }
.pwcalc .pw-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 52rem; }
.pwcalc .pw-steps > li { counter-increment: step; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--wp-4); padding: var(--wp-6) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.pwcalc .pw-steps > li::before { content: counter(step); grid-row: 1 / span 4; font: 500 2rem/1 var(--wp-font-display); color: var(--wp-muted); }
.pwcalc .pw-steps > li > * { grid-column: 2; }
.pwcalc .pw-formula { margin: 0 0 var(--wp-2); padding: var(--wp-3) var(--wp-4); background: var(--wp-panel); border-left: var(--wp-rule-strong) solid var(--wp-ink); font: 500 1rem/1.6 var(--wp-font-mono); overflow-wrap: anywhere; }
.pwcalc .pw-worked { margin: 0; line-height: 1.6; }
.pwcalc .pw-worked data { font-weight: 600; white-space: nowrap; }
.pwcalc .pw-key-step .pw-formula { background: var(--wp-cited); }
.pwcalc .pw-steps > li.pw-key-step::before { color: var(--wp-ink); }
.pwcalc .pw-why { margin: var(--wp-3) 0 0; max-width: 44em; font-size: 1rem; line-height: 1.6; color: var(--wp-muted); }
.pwcalc .pw-aside { max-width: 44em; margin-top: var(--wp-8); padding: var(--wp-4) 0 0 var(--wp-4); border-left: var(--wp-rule-strong) solid var(--oa-blue-deep); }
.pwcalc .pw-aside p { margin: 0; }

.pwcalc .pw-foot { margin-top: var(--wp-12); max-width: 44em; font-size: 1rem; line-height: 1.6; color: var(--wp-muted); }
.pwcalc .pw-foot strong { color: var(--wp-ink); }
.pwcalc .pw-foot p { margin: 0 0 var(--wp-3); }
@media (max-width: 30rem) { .pwcalc .pw-steps > li { grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--wp-3); } .pwcalc .pw-steps > li::before { font-size: 1.5rem; } .pwcalc .pw-plate { padding: var(--wp-6) var(--wp-4); } }

/* phone and tablet: while the form is on screen and the plate is not, a dock keeps the price in sight */
.pwcalc .pw-dock { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--wp-3); padding: var(--wp-2) var(--wp-gutter); padding-bottom: max(var(--wp-2), env(safe-area-inset-bottom)); background: var(--oa-ground); color: var(--oa-paper); border-top: 3px solid var(--oa-blue); }
.pwcalc .pw-dock[hidden] { display: none; }
.pwcalc .pw-dock-p { margin: 0; display: flex; align-items: baseline; gap: var(--wp-2); }
.pwcalc .pw-dock-l { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oa-muted); }
.pwcalc #d-price { font: 600 1.5rem/1.1 var(--wp-font-display); letter-spacing: -.03em; color: var(--oa-blue); font-variant-numeric: tabular-nums; }
.pwcalc .pw-dock.is-error #d-price { font: 600 1rem/1.3 var(--wp-font-body); color: var(--oa-paper); letter-spacing: 0; }
#dock .pw-dock-go { min-height: var(--wp-tap); padding: var(--wp-2) var(--wp-4); border: var(--wp-rule-strong) solid var(--oa-control); border-radius: var(--wp-pill); background: transparent; color: var(--oa-paper); font: 600 .9375rem/1.2 var(--wp-font-body); white-space: nowrap; }
#dock .pw-dock-go:hover { border-color: var(--oa-blue); background: var(--oa-ground-2); }
#dock .pw-dock-go:focus-visible { outline: 3px solid var(--wp-focus-field); outline-offset: 2px; }
@media (min-width: 64rem) { .pwcalc .pw-dock { display: none !important; } }
/* the browser scrolls a focused field clear of the dock */
@media (max-width: 63.99rem) { html:has(.pw-dock:not([hidden])) { scroll-padding-bottom: 5.5rem; } }

/* the buyer's download page (unlisted): the two files, the refund line, the contact */
.pwcalc.pw-files { max-width: 44rem; padding: var(--wp-12) 0 var(--wp-16); }
.pwcalc .pw-files-list { list-style: none; margin: var(--wp-8) 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-4) var(--wp-8); }
.pwcalc.pw-files p { margin: 0 0 var(--wp-3); }
.pwcalc .pw-files-keep { font-weight: 600; }
.pwcalc .pw-files-who { margin-top: var(--wp-8) !important; font-size: var(--wp-text-meta); color: var(--wp-muted); }