/* Sourced pSEO pages (estimating software overview, timber cladding cost per m2 and its calculator).
   Page-specific only; tokens and base styles come from site.css. */

/* ---- how to read this page ---- */
.ps-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ps-head .lede { max-width: 30em; }
.ps-notes { list-style: none; border-top: 1px solid var(--line-2); }
.ps-notes li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.ps-notes .num { font-size: 13px; color: var(--accent-hi); padding-top: 3px; }
.ps-stamp { margin-top: 20px; font-size: 13.5px; color: var(--ink-3); }
.ps-stamp time { color: var(--ink-2); }

/* ---- sourced claims ---- */
.ps-group { margin-top: 72px; }
.ps-group:first-of-type { margin-top: 56px; }
.ps-group > h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; margin-bottom: 8px; }
.ps-group > p { font-size: 15px; color: var(--ink-3); max-width: 46em; margin-bottom: 8px; }
.ps-claims { list-style: none; border-top: 1px solid var(--line-2); margin-top: 20px; }
.ps-claim { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 12px 36px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.ps-claim .ps-what { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.ps-claim .ps-val { font-size: 17px; line-height: 1.55; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ps-claim .ps-src { font-size: 13px; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.ps-claim .ps-src a { display: inline-block; color: var(--accent-hi); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .45); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.ps-claim .ps-src a:hover { text-decoration-color: currentColor; }
.ps-claim .ps-src time { display: block; margin-top: 3px; }

/* ---- where Modou fits ---- */
.ps-fit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ps-fit p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
.ps-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 32px; font-size: 15px; }
.ps-links a { color: var(--accent-hi); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .45); text-underline-offset: 3px; }
.ps-links a:hover { text-decoration-color: currentColor; }

/* ---- own-prices calculator ---- */
.ps-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 56px; }
.ps-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; align-items: start; }
.ps-f:not(.wide) .ps-hint { min-height: 3.9em; }
.ps-f { min-width: 0; }
.ps-f.wide { grid-column: 1 / -1; }
.ps-f label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.ps-f .ps-hint { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.ps-field { position: relative; margin-top: 10px; }
.ps-field input { display: block; width: 100%; min-width: 0; height: 52px; padding: 0 56px 0 14px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 5px; color: var(--ink); font: inherit; font-size: 18px; font-variant-numeric: tabular-nums; transition: border-color .2s, background-color .2s; }
.ps-field input:hover { border-color: var(--line-3); }
.ps-field input:focus { border-color: var(--accent-hi); background: var(--bg-3); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.ps-field input[aria-invalid="true"] { border-color: var(--warn); }
.ps-field .ps-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ink-3); pointer-events: none; }
.ps-err { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--warn); }
.ps-err[hidden] { display: none; }
.ps-reset { grid-column: 1 / -1; justify-self: start; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); padding: 6px 0; }
.ps-reset:hover { color: var(--ink); }
.ps-result { position: sticky; top: calc(var(--hd) + 24px); }
.ps-result .panel-body { padding: 24px; }
.ps-empty { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.ps-big { display: block; font-size: clamp(34px, 4vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ps-big-l { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }
.ps-total { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius); background: var(--accent); color: var(--accent-fg); }
.ps-total span { display: block; font-size: 13px; opacity: .85; }
.ps-total strong { display: block; margin-top: 2px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ps-rows { margin-top: 22px; border-top: 1px solid var(--line); }
.ps-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ps-rows dt { color: var(--ink-2); }
.ps-rows dd { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.ps-rows .sum { font-weight: 500; }
.ps-rows .sum dt { color: var(--ink); }
.ps-formula { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.ps-formula summary { cursor: pointer; padding: 6px 0; color: var(--ink); }
.ps-formula ul { list-style: none; margin-top: 8px; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.ps-formula li { line-height: 1.5; overflow-wrap: anywhere; }
.ps-disc { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 1100px) {
  .ps-head, .ps-fit { grid-template-columns: 1fr; gap: 32px; }
  .ps-calc { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
  .ps-result { position: static; }
  .ps-claim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ps-claim .ps-src { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ps-group { margin-top: 52px; }
  .ps-claim { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .ps-claim .ps-src { grid-column: auto; }
  .ps-form { grid-template-columns: 1fr; gap: 22px; }
  .ps-f:not(.wide) .ps-hint { min-height: 0; }
  .ps-result .panel-body { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ps-field input, .ps-claim .ps-src a { transition: none; } }