/* Solar Second Look: public sample preview (site/sample-report.html, built by engine/preview.cjs).
   A column of Letter sheets on screen, one sheet per page in print, fluid sections on phones.
   Tokens follow design/DESIGN_SYSTEM.md, Amendments 1.6 and 1.9. Standalone: site.css is not loaded here. */
@font-face { font-family: 'Fraunces Fallback'; src: local('Times New Roman'), local('Liberation Serif'); size-adjust: 103.5%; ascent-override: 94.5%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 100.8%; ascent-override: 94.2%; descent-override: 24.8%; line-gap-override: 0%; }

:root {
  --paper: #faf9f6; --paper-deep: #f1eee8; --paper-sheet: #fffefb;
  --ink: #0b1f3a; --slate: #56627a; --line: #dedad0; --line-deep: #c9c4b6;
  --navy-deep: #071527; --scrim: 7, 21, 39;
  --on-dark: #f6f4ef; --on-dark-muted: #b7c0d0;
  --sun: #f6b40e; --pen: #c2362b; --use: #b9c0cc;
  --serif: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --sans: 'Figtree', 'Figtree Fallback', system-ui, sans-serif;
  --u: 8px;                       /* baseline unit: text sits on 24px lines, small text on 16 or 20 */
  --mx: 64px;                     /* sheet side margin */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper-deep); color: var(--ink); font: 400 15px/24px var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, table { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1, h2 { font-family: var(--serif); font-weight: 360; font-variation-settings: 'opsz' 72; font-synthesis: none; letter-spacing: -0.015em; }
small { font-size: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- top bar (screen only) ---------- */
.bar { display: flex; align-items: center; gap: 16px; max-width: 880px; margin: 0 auto; padding: 16px 32px; }
.bar-label { margin-right: auto; padding-left: 16px; border-left: 1px solid var(--line-deep); color: var(--slate); font-weight: 500; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--on-dark); font: 600 16px/1.2 var(--sans); text-decoration: none; transition: background-color 150ms, border-color 150ms, color 150ms; }
.btn:hover { background: #17335c; border-color: #17335c; }
.btn-small { min-height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
.btn-light { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.btn-light:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn-ghost { background: transparent; border-color: rgba(246, 244, 239, 0.55); color: var(--on-dark); }
.btn-ghost:hover { background: transparent; border-color: var(--sun); color: var(--on-dark); }

/* ---------- sheets ---------- */
.stack { display: grid; justify-content: center; gap: 32px; padding: 8px 0 72px; }
.sheet { position: relative; width: 816px; height: 1056px; padding: 60px var(--mx) 72px; overflow: hidden; background: var(--paper-sheet); box-shadow: 0 1px 2px rgba(11, 31, 58, 0.08), 0 14px 40px rgba(11, 31, 58, 0.10); }
.sheet-foot { position: absolute; left: var(--mx); right: var(--mx); bottom: 28px; display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--slate); font-size: 12.5px; line-height: 16px; }
.sheet-foot img { height: 20px; width: auto; }
.foot-light { z-index: 2; color: var(--on-dark-muted); border-top-color: rgba(246, 244, 239, 0.18); }
.sheet-foot.foot-light .folio { color: var(--on-dark); }
.sheet-foot .folio { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

.head { margin-bottom: 32px; }
.p-compare .head { margin-bottom: 16px; }
.p-bench .head { margin-bottom: 20px; }
.head h2 { font-size: 40px; line-height: 48px; }
.head p { max-width: 36rem; margin-top: 12px; color: var(--slate); }
h3 { font: 600 15px/24px var(--sans); }

/* status: square plus word */
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12.5px; line-height: 16px; white-space: nowrap; }
.st i { flex: none; width: 9px; height: 9px; border: 1.5px solid var(--ink); }
.st-fix { color: var(--pen); } .st-fix i { background: var(--pen); border-color: var(--pen); }
.st-ask i { background: transparent; }
.st-ok i { background: var(--ink); }
.st-dna { color: var(--slate); } .st-dna i { border-color: var(--line-deep); }

/* ---------- 1. cover ---------- */
.cover { padding: 0; background: var(--navy-deep); color: var(--on-dark); }
.cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.cover::before { content: ''; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(var(--scrim), 0.86) 0%, rgba(var(--scrim), 0.62) 34%, rgba(var(--scrim), 0.08) 58%, rgba(var(--scrim), 0) 74%, rgba(var(--scrim), 0.72) 100%); }
.cover-in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 60px var(--mx) 44px; }
.cover-logo { width: 158px; height: auto; }
.cover-title { margin-top: 128px; }
.cover h1 { font-size: 84px; line-height: 88px; letter-spacing: -0.025em; }
.cover-for { margin-top: 16px; font: 400 22px/32px var(--sans); }
.gold-rule { width: 72px; height: 2px; margin: 32px 0; border: 0; background: var(--sun); }
.cover-meta { display: flex; gap: 48px; }
.cover-meta dt { color: var(--on-dark-muted); font-size: 13px; line-height: 16px; }
.cover-meta dd { margin-top: 4px; font-weight: 500; font-size: 16px; }
.cover-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: auto; font-size: 14px; color: var(--on-dark); }

/* ---------- 2. verdict ---------- */
.kicker { color: var(--slate); font-weight: 500; }
.verdict { margin-top: 8px; font-size: 64px; line-height: 72px; letter-spacing: -0.025em; }
.verdict.v-red { text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 3px; text-underline-offset: 10px; }
.lead-line { margin-top: 24px; font-size: 17px; }
.money-line { max-width: 36rem; margin-top: 8px; font-size: 17px; }
.money-line b { font-weight: 600; }
.ledger { width: 100%; margin-top: 32px; border-collapse: collapse; }
.ledger thead th { padding: 0 0 8px; text-align: left; font-weight: 500; font-size: 13px; line-height: 16px; color: var(--slate); border-bottom: 1.5px solid var(--ink); }
.ledger tbody th { width: 128px; padding: 22px 16px 22px 0; text-align: left; vertical-align: top; font-weight: 600; line-height: 20px; }
.ledger td { padding: 16px 16px 16px 0; vertical-align: top; border: 0; }
.ledger tbody tr { border-bottom: 1px solid var(--line); }
.ledger .fig { width: 164px; white-space: nowrap; }
.ledger .fig span { font-family: var(--serif); font-weight: 360; font-variation-settings: 'opsz' 72; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; }
.ledger .fig small { margin-left: 5px; font-size: 13px; color: var(--slate); }
.ledger .fig:not(.ours) span { color: var(--slate); }
.ledger .struck span { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2.5px; }
.ledger .fig-range span { font-size: 25px; line-height: 28px; display: block; }
.ledger .fig-range em { display: block; font-style: normal; font-size: 12.5px; line-height: 20px; color: var(--slate); }
.ledger .note { padding-right: 0; padding-top: 20px; font-size: 13.5px; line-height: 20px; color: var(--slate); }
.two { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; margin-top: 36px; }
.two h3 { padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.two p, .two li { font-size: 14px; line-height: 20px; }
.holds p + p { margin-top: 8px; }
.holds-name { font-weight: 600; }
.holds-name .st { margin-right: 4px; }
.holds-name .st { font-size: 0; gap: 0; }
.first ol { counter-reset: n; }
.first li { position: relative; padding-left: 36px; counter-increment: n; }
.first li + li { margin-top: 12px; }
.first li::before { content: counter(n); position: absolute; left: 0; top: -3px; font-family: var(--serif); font-weight: 360; font-size: 26px; line-height: 28px; }

/* ---------- 3. comparison ---------- */
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; line-height: 20px; font-variant-numeric: tabular-nums; }
.cmp col, .cmp .corner { width: 21%; }
.cmp th, .cmp td { padding: 7px 12px; text-align: left; vertical-align: top; }
.cmp thead th { padding-top: 12px; padding-bottom: 10px; vertical-align: bottom; border-bottom: 1.5px solid var(--ink); font-weight: 400; }
.q-letter { display: block; font-family: var(--serif); font-weight: 360; font-size: 36px; line-height: 36px; }
.q-name { display: block; margin-top: 4px; font-weight: 600; }
.q-inv { display: block; font-size: 12.5px; line-height: 16px; color: var(--slate); }
.cmp tbody th { padding-left: 0; font-weight: 500; color: var(--slate); }
.cmp tbody tr { border-bottom: 1px solid var(--line); }
.cmp td { font-weight: 500; }
.cmp td small { display: block; font-weight: 400; color: var(--slate); font-size: 12.5px; line-height: 16px; }
.c-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cmp-verdict td .st { display: flex; margin-bottom: 4px; }
.cmp .pick { background: var(--paper-deep); }
.cmp thead .pick { box-shadow: inset 0 4px 0 var(--ink); }
.cmp-verdict td strong { display: block; font-weight: 600; font-size: 14px; }
.cmp-verdict { border-bottom: 1.5px solid var(--ink) !important; }
.keyline { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; font-size: 12.5px; line-height: 16px; color: var(--slate); }
.keyline .st { color: var(--ink); } .keyline .st-fix { color: var(--pen); }

/* ---------- charts ---------- */
.chart { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.chart text { fill: var(--slate); font-size: 11.5px; }
.chart .t-axis { font-variant-numeric: tabular-nums; }
.chart .t-label { fill: var(--ink); font-size: 12px; }
.chart .t-halo { paint-order: stroke; stroke: var(--paper-sheet); stroke-width: 3px; stroke-linejoin: round; }
.chart .t-strong { fill: var(--ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .t-pen { fill: var(--pen); font-size: 12.5px; font-weight: 600; }
.chart .t-qletter { fill: #fff; font-size: 14px; font-weight: 600; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-deep); stroke-width: 1; }
.chart .rule-dash { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 3 4; }
figcaption { margin-top: 8px; font-size: 12.5px; line-height: 16px; color: var(--slate); }

/* ---------- 4. benchmark ---------- */
.split { display: grid; grid-template-columns: 430fr 226fr; gap: 32px; align-items: start; }
.against { padding-top: 12px; border-top: 1.5px solid var(--ink); font-size: 13.5px; line-height: 20px; }
.against h3 { margin-bottom: 8px; }
.against p { color: var(--slate); }
.against .limits { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.counts { margin-top: 16px; }
.counts div { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.counts dt { font-family: var(--serif); font-weight: 360; font-size: 34px; line-height: 36px; letter-spacing: -0.02em; }
.counts dd { font-size: 13px; line-height: 16px; }
.families { margin-top: 20px; padding-top: 12px; border-top: 1.5px solid var(--ink); }
.families ul { columns: 2; column-gap: 28px; margin-top: 8px; font-size: 12.5px; line-height: 16px; }
.families li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--slate); break-inside: avoid; }
.families b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.by-quote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 24px; font-size: 13px; line-height: 20px; color: var(--slate); }
.by-quote li { padding-top: 10px; border-top: 1.5px solid var(--ink); }
.bq-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bq-fig { font-family: var(--serif); font-weight: 360; font-size: 34px; line-height: 40px; letter-spacing: -0.02em; color: var(--ink); }
.bq-name { color: var(--ink); font-weight: 500; }

/* ---------- 5. energy ---------- */
.p-energy .head { margin-bottom: 20px; }
.plot { display: grid; grid-template-columns: 186px 1fr; gap: 32px; padding: 16px 0 14px; border-top: 1px solid var(--line); }
.plot:first-of-type { border-top: 1.5px solid var(--ink); }
.plot-note p { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--slate); }
.plot-note .plot-fig { margin-top: 12px; color: var(--ink); line-height: 16px; }
.plot-fig span { display: block; font-family: var(--serif); font-weight: 360; font-size: 40px; line-height: 44px; letter-spacing: -0.02em; }
.swatches { display: grid; gap: 2px; }
.swatches span { display: flex; align-items: center; gap: 8px; }
.sw { width: 10px; height: 10px; border-radius: 2px; }
.sw-use { background: var(--use); } .sw-ink { background: var(--ink); } .sw-sun { background: var(--sun); }
.plot figcaption { margin-top: 4px; }

/* ---------- 6. roof ---------- */
.roof-frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy-deep); }
.roof-frame img { width: 100%; height: 100%; object-fit: cover; }
.roof-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--scrim), 0.5) 0%, rgba(var(--scrim), 0.3) 40%, rgba(var(--scrim), 0.3) 100%); }
.roof-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.roof-svg .panel { fill: rgba(11, 31, 58, 0.82); }
.roof-svg .panel-grid { fill: none; stroke: rgba(246, 244, 239, 0.34); stroke-width: 0.8; }
.roof-svg .array-edge { fill: none; stroke: var(--sun); stroke-width: 2.5; stroke-linejoin: miter; }
.roof-svg .setback { fill: none; stroke: rgba(246, 244, 239, 0.85); stroke-width: 1.5; stroke-dasharray: 7 6; }
.roof-svg .clear { fill: none; stroke: #fff; stroke-width: 2; }
.roof-svg .north-disc { fill: rgba(var(--scrim), 0.7); stroke: rgba(246, 244, 239, 0.6); stroke-width: 1; }
.roof-svg .north-arrow { fill: var(--sun); }
.roof-svg .north-n { fill: #fff; font: 600 13px var(--sans); }
.roof figcaption { margin-top: 12px; max-width: 36rem; }
.roof-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.roof-facts div { padding-top: 12px; border-top: 1.5px solid var(--ink); }
.roof-facts dt { font-family: var(--serif); font-weight: 360; font-size: 34px; line-height: 40px; letter-spacing: -0.02em; white-space: nowrap; }
.roof-facts dt small { font: 400 13px/16px var(--sans); letter-spacing: 0; color: var(--slate); }
.roof-facts dd { margin-top: 6px; font-size: 13.5px; line-height: 20px; color: var(--slate); }
.roof-key { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 16px; color: var(--slate); }
.roof-key li { display: flex; align-items: center; gap: 8px; }
.k { flex: none; width: 22px; height: 14px; }
.k-panel { width: 10px; height: 16px; background: var(--ink); outline: 1.5px solid var(--sun); }
.k-setback { height: 0; border-top: 1.5px dashed var(--ink); }
.k-north { width: 0; height: 0; border: 6px solid transparent; border-bottom: 13px solid var(--sun); border-top: 0; }
.k-clear { width: 14px; border: 1.5px solid var(--ink); border-radius: 50%; }

/* ---------- 7. where the sample stops ---------- */
.p-cut { padding-bottom: 0; }
.cut-top { position: relative; height: 320px; overflow: hidden; }
.p-cut .head { margin-bottom: 24px; }
.asks { counter-reset: q; max-width: 36rem; }
.asks li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); counter-increment: q; font-size: 16px; }
.asks li::before { content: counter(q); position: absolute; left: 0; top: 8px; font-family: var(--serif); font-weight: 360; font-size: 28px; line-height: 32px; }
.cut-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(180deg, rgba(255, 254, 251, 0) 0%, var(--paper-sheet) 88%); }
.stop { position: absolute; left: 0; right: 0; bottom: 0; top: 404px; padding: 52px var(--mx) 96px; background: var(--ink); color: var(--on-dark); }
.stop h2 { font-size: 48px; line-height: 56px; }
.stop-lede { margin-top: 12px; color: var(--on-dark-muted); font-size: 16px; }
.toc { margin-top: 24px; columns: 2; column-gap: 48px; font-size: 14px; line-height: 20px; }
.toc li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(246, 244, 239, 0.18); break-inside: avoid; }
.toc-h { flex: 1; }
.toc-p { color: #8d98ad; font-variant-numeric: tabular-nums; }
.toc-sub { margin-top: 16px; max-width: 36rem; font-size: 13px; line-height: 20px; color: var(--on-dark-muted); }
.stop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.stop :focus-visible { outline-color: var(--sun); }

/* ---------- phones and narrow windows: sheets become fluid sections ---------- */
@media screen and (max-width: 879px) {
  :root { --mx: 20px; }
  body { background: var(--paper-sheet); font-size: 16px; }
  .bar { padding: 12px 20px; gap: 12px; }
  .bar-label { font-size: 14px; padding-left: 12px; }
  .stack { display: block; padding: 0; }
  .sheet { width: auto; height: auto; padding: 44px var(--mx) 76px; box-shadow: none; border-top: 1px solid var(--line-deep); }
  .sheet-foot { flex-wrap: wrap; gap: 4px 12px; bottom: 20px; }
  .head h2 { font-size: 32px; line-height: 40px; }
  .cover { min-height: min(150vw, 760px); padding: 0; border-top: 0; }
  .cover-in { min-height: min(150vw, 760px); padding: 32px var(--mx) 28px; }
  .cover-title { margin-top: 56px; }
  .cover::before { background: linear-gradient(180deg, rgba(var(--scrim), 0.88) 0%, rgba(var(--scrim), 0.78) 52%, rgba(var(--scrim), 0.5) 76%, rgba(var(--scrim), 0.8) 100%); }
  .cover h1 { font-size: 48px; line-height: 52px; }
  .cover-for { font-size: 18px; line-height: 28px; }
  .gold-rule { margin: 24px 0; }
  .cover-meta { flex-wrap: wrap; gap: 16px 32px; }
  .verdict { font-size: 44px; line-height: 50px; }
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: auto; }
  .ledger thead { display: none; }
  .ledger tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 16px 0; }
  .ledger tbody th, .ledger .note { grid-column: 1 / -1; padding: 0; }
  .ledger td.fig { padding: 8px 0 4px; white-space: normal; }
  .ledger td.fig::before { content: 'The quote says'; display: block; font-size: 13px; line-height: 16px; color: var(--slate); }
  .ledger td.fig.ours::before { content: 'Our check'; }
  .ledger td.fig-range::before { content: none; }
  .ledger .fig span { font-size: 36px; line-height: 44px; }
  .ledger .fig-range span { font-size: 22px; line-height: 44px; }
  .ledger .fig-range em { font-size: 13px; line-height: 16px; }
  .two { grid-template-columns: 1fr; gap: 32px; }
  .cmp, .cmp thead, .cmp tbody { display: block; }
  .cmp tr { display: grid; grid-template-columns: repeat(3, 1fr); }
  .cmp .corner { display: none; }
  .cmp tbody th { grid-column: 1 / -1; padding: 10px 0 2px; }
  .cmp th, .cmp td { padding: 6px 8px 10px; font-size: 13px; overflow-wrap: anywhere; }
  .c-main { flex-wrap: wrap; gap: 2px 8px; }
  .cmp td .st { overflow-wrap: normal; }
  .q-letter { font-size: 32px; line-height: 36px; }
  .split { grid-template-columns: 1fr; }
  .scroll { overflow-x: auto; padding-bottom: 6px; }
  .scroll .chart { width: var(--w); max-width: none; }
  .fig-chart, .plot figure { min-width: 0; }
  .families ul { columns: 1; }
  .by-quote { grid-template-columns: 1fr; gap: 20px; }
  .plot { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .roof-facts { grid-template-columns: 1fr; gap: 20px; }
  .cut-top { height: 360px; }
  .p-cut { padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .cut-top { padding: 0 var(--mx); }
  .cut-fade { height: 120px; }
  .stop { position: static; padding: 44px var(--mx) 84px; }
  .stop h2 { font-size: 36px; line-height: 44px; }
  .toc { columns: 1; }
}


@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- print: one sheet per Letter page, backgrounds kept ---------- */
@page { size: letter; margin: 0; }
@media print {
  html, body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar { display: none; }
  .stack { display: block; padding: 0; }
  .sheet { width: 8.5in; height: 11in; box-shadow: none; break-after: page; break-inside: avoid; }
  .sheet:last-child { break-after: auto; }
}