/* The category page. One dark band: the questions, the button, then the one result. Then hairlines. No boxes except the fields you type in. */
.calc [hidden] { display: none; }

/* The dark runs down to the footer, so a short page has no white gap in the middle. */
main { background: var(--night); }
.all { background: #fff; }
/* Until the list is there, the footer belongs to the dark too. */
body:has([data-all][hidden]) .site-footer { --ink: #f5f5f7; --muted: #a1a1a6; --line: #424245; background: var(--night); color: var(--muted); }

.hero { --figure: 24px; padding: 12px 0 24px; }
.hero-noscript { margin: 16px 0 24px; font-size: 17px; }

/* Card #156: the answer under the title, and the FAQ fold after the list. Quiet: the questions stay first. The FAQ is
   white under the white list and, like the footer, belongs to the dark until the list is there. */
.faq-band { padding: 4px 0 24px; background: #fff; color: var(--ink); }
body:has([data-all][hidden]) .faq-band { --ink: #f5f5f7; --muted: #a1a1a6; --line: #424245; background: var(--night); -webkit-font-smoothing: antialiased; }
.cat-answer { margin: 16px 0 0; max-width: 700px; font-size: 15px; line-height: 20px; color: var(--muted); }
.cat-answer strong { font-weight: 600; color: var(--ink); }
/* Its own classes, not calc-more's, so nothing that looks for the method tap finds this one. */
.faq-panel { padding-bottom: 8px; }
.faq-q { margin: 14px 0 6px; font-size: 15px; line-height: 20px; font-weight: 600; }
/* Tarvo, 2026-11-07: once the visitor has a result, an answer worked out for the example home or the default price is
   gone; what stays holds for anyone (shop prices, counts, sources). Crawlers and a first visit see them all. */
.calc:has([data-result]:not([hidden])) [data-default-figures] { display: none; }
.faq-a { padding: 8px max(0px, calc(100% - 700px)) 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 20px; color: var(--muted); }

.calc-form { margin-top: 14px; }
/* The one line a screen reader hears when the answer changes under live edits. Seen by nobody. */
.say { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ask .calc-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: start; min-height: 66px; padding: 8px 0; border-top: 1px solid var(--line); }
.ask .calc-row:last-child { border-bottom: 1px solid var(--line); }
.ask .calc-label { font-size: 17px; line-height: 48px; color: var(--ink); }
.ask .opts { min-height: 48px; }
.ask .calc-note, .ask .calc-error { grid-column: 2; }
.ask .calc-note { margin-top: 2px; font-size: 13px; line-height: 16px; }
.calc-taxes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 15px; }
.calc-tick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.calc-tick input { width: 20px; height: 20px; margin: 0; accent-color: #fff; }
.calc-sum { color: var(--ink); font-weight: 600; }
.opts-stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.opts-stack .opt { white-space: normal; padding-right: 0; }
.ask input[type="text"]::placeholder { font-size: 15px; letter-spacing: 0; }
/* Arvuta stays on the first screen of a phone. */
@media (max-height: 600px) { .calc-form { margin-top: 0; } .title-top { margin-top: 0; } .title-top h1 { font-size: 22px; line-height: 26px; } .ask .opt { min-height: 40px; } .calc-tick { min-height: 38px; } }
@media (max-width: 480px) {
  .ask .calc-row { min-height: 54px; padding: 3px 0; }
  .hero { padding-top: 4px; }
  .calc-form { margin-top: 8px; }
  .cat-grouped .ask .calc-row { grid-template-columns: 92px minmax(0, 1fr); column-gap: 6px; }
  .cat-grouped .ask .calc-label { font-size: 16px; line-height: 22px; padding-top: 12px; }
  .cat-grouped .ask .opt { padding-right: 8px; font-size: 15px; }
  /* A note keeps air above the next hairline. Three short options (Tüüp) share one line: each is still 44px to tap. */
  .ask .calc-note { margin-bottom: 8px; }
  .cat-page .ask .opt { padding-right: 8px; }
}
/* 320: `Keskmine` ran into `Uus`. Only here, on the bespoke page: a category's longer labels need the wider column, and its options wrap. */
@media (max-width: 359px) {
  [data-calc] .ask .calc-row { grid-template-columns: 104px minmax(0, 1fr); column-gap: 8px; }
  [data-calc] .ask .opt { padding-right: 8px; font-size: 15px; }
  /* A range in words ("1 015 kuni 1 166€") is a little wider than with a dash: on the narrowest phones it keeps one line. */
  .row .row-part { column-gap: 8px; }
  .row .row-figures .row-figure { font-size: 14px; }
}

/* The one big thing to press. */
.calc-go {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 18px;
  border: 0;
  border-radius: 6px;
  background: #f5f5f7;
  color: #1d1d1f;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.calc-go:active { transform: scale(0.99); background: #fff; }
@media (hover: hover) { .calc-go:hover { background: #fff; } }
/* Once there is an answer, the filled button on the screen is the answer's. Arvuta steps back. */
.calc-form:has(.result:not([hidden])) .calc-go { border: 1px solid #86868b; background: transparent; color: var(--ink); }
@media (hover: hover) { .calc-form:has(.result:not([hidden])) .calc-go:hover { background: #2c2c2e; } }
.calc-form:has(.result:not([hidden])) .calc-go:active { background: #2c2c2e; }
.calc-promise { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); text-wrap: balance; }

/* The result: one model, big. */
.result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: -2px; } /* Lands with its hairline just off the screen. */
.result:focus { outline: none; }
.lead-label { font-size: 15px; line-height: 20px; color: var(--muted); text-wrap: balance; }
.lead-name { text-wrap: balance; margin-top: 4px; font-size: clamp(28px, 8vw, 32px); line-height: 1.1; letter-spacing: -0.025em; }
.lead-name .row-code { white-space: nowrap; }
.lead-price { margin-top: 6px; font-size: 15px; line-height: 20px; color: var(--muted); }
.lead-advice { margin-top: 12px; font-size: 17px; line-height: 24px; text-wrap: pretty; }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 16px; }
.lead-actions a { display: inline-flex; align-items: center; min-height: 48px; font-size: 17px; font-weight: 600; text-decoration: none; }
.lead-buy, .lead-ask-main { padding: 0 22px; border-radius: 6px; background: #f5f5f7; color: #1d1d1f; }
.lead-actions .row-choose { flex-basis: 100%; color: var(--muted); }
.calc-notes { padding: 8px 0 10px; font-size: 15px; line-height: 20px; color: var(--muted); }
.calc-notes + .calc-notes { padding-top: 0; }
.calc-rule { padding: 8px 0 10px; border-top: 1px solid var(--line); font-size: 15px; line-height: 20px; color: var(--muted); }

/* What to look at when choosing: quiet, above the list (card #160). */
.all-head { padding-top: 24px; }
.all-head h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.022em; }
.choose { padding: 24px 0 32px; }
.choose + .all-head { padding-top: 0; }
.choose h2 { font-size: 24px; line-height: 1.15; }
.choose-points { margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 21px; color: var(--muted); }
.choose-points li { padding: 10px 0; border-top: 1px solid var(--line); }
.choose-points strong { display: inline; font-weight: 600; color: var(--ink); }
.choose-points strong + .info + span { display: block; }
/* 44px tap area from the link's own box; the margin gives the padding back so the lines stay even. */
.choose-points a { display: inline-block; padding: 12px 0; margin: -12px 0; text-underline-offset: 2px; }

.calc-label { display: block; font-size: 14px; color: var(--muted); }
.calc-value { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.calc-unit { font-size: 15px; color: var(--muted); white-space: nowrap; }

/* The answer is a sentence. Blue only on the two numbers that are the answer. */
.answer-sentence {
  margin-top: 10px;
  font-size: clamp(19px, 5.4vw, 21px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.answer-figure { color: var(--cold); }
.figures { padding: 10px 0 12px; border-top: 1px solid var(--line); }
.figures [data-pump] { margin-top: 10px; }
.figure { font-weight: 600; }
.figure-words { display: block; font-size: 17px; font-weight: 400; line-height: 22px; color: var(--muted); }
.figure-line { display: block; font-size: var(--figure); line-height: 1.1; letter-spacing: -0.025em; color: var(--muted); }
.figure-electric { color: var(--ink); }
.figure-cold { color: var(--cold); }

/* One real scale. No track behind the pump's bar: the empty rest of the line is the saving. */
.bar { display: flex; height: 12px; margin-top: 6px; }
.bar span { display: block; height: 100%; transition: width 0.35s ease; }
.bar-electric { width: 100%; background: #8e8e93; }
.bar-low { background: var(--cold); }
.bar-span { background: var(--cold); opacity: 0.45; }

.answer-note { margin-top: 6px; font-size: 14px; line-height: 20px; text-wrap: balance; }
.answer-compare { margin-top: 12px; font-size: 15px; line-height: 21px; color: var(--muted); text-wrap: balance; }
.answer-note + .answer-note { margin-top: 4px; }

.calc input[type="text"] {
  width: 76px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #86868b;
  border-radius: 6px;
  background: var(--paper);
  font-size: 17px;
  font-weight: 600;
}
.calc input::placeholder { color: var(--muted); opacity: 1; }
.calc input[aria-invalid="true"] { border-color: var(--error); }
.ask input[type="text"] { width: 92px; height: 48px; font-size: 22px; letter-spacing: -0.015em; }
/* The ring stays inside the field: outside, it crosses the label above and reads as an underline. */
.calc input[type="text"]:focus-visible { outline-offset: -2px; }

/* Fixed choices: plain text, a thin underline on the chosen one. */
.opts { display: flex; }
.opt { position: relative; display: flex; align-items: center; min-width: 44px; min-height: 44px; padding-right: 12px; cursor: pointer; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Only the word's own span: a span inside it (the sort's years, [data-years]) takes the word's colour, not muted. */
.opt > span { padding: 3px 0 2px; border-bottom: 2px solid transparent; color: var(--muted); }
.opt input:checked + span { border-bottom-color: var(--ink); color: var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.calc-error { flex-basis: 100%; margin-top: 2px; color: var(--error); font-size: 14px; }

.calc-more, .cat-faq { margin-top: 10px; }
.calc-more summary, .cat-faq summary, .lead-assumes > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.calc-more summary::-webkit-details-marker, .cat-faq summary::-webkit-details-marker, .lead-assumes > summary::-webkit-details-marker { display: none; }
.calc-chevron { font-size: 20px; line-height: 1; color: var(--muted); }
.calc-more[open] .calc-chevron, .cat-faq[open] .calc-chevron, .lead-assumes[open] > summary .calc-chevron { transform: rotate(90deg); }

.calc-range { padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 20px; color: var(--muted); }
.calc-panel { padding-bottom: 8px; }
/* Final audit: the running text behind the tap keeps a readable measure (700px, about 68ch at 15px) on a wide screen.
   Padding, not max-width, so a paragraph's hairline still runs the full width. */
.calc-panel .calc-rule, .calc-panel .calc-notes, .calc-panel .calc-range, .calc-panel .calc-coverage { padding-right: max(0px, calc(100% - 700px)); }
.calc-row { padding: 8px 0; border-top: 1px solid var(--line); }
.calc-note { color: var(--muted); font-size: 14px; }
.calc-sources { display: flex; flex-direction: column; border-top: 1px solid var(--line); font-size: 15px; }
.calc-sources a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }

.calc-coverage { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.calc-coverage span { display: block; text-wrap: balance; }

/* Sort and filter: a segmented control, plainly buttons (Tarvo, 2026-11-07: plain words melted into the text above).
   One hairline box, each choice a 44 px segment, the chosen one filled. Its own block, with air above it. */
.calc-sort { padding: 20px 0 8px; }
.calc-sort .wrap { display: flex; flex-direction: column; align-items: flex-start; row-gap: 8px; }
.calc-sort .calc-label { font-size: 15px; line-height: 20px; color: var(--muted); }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid #86868b; border-radius: 8px; overflow: hidden; }
.seg .opt { min-height: 44px; padding: 0; border-left: 1px solid #86868b; }
.seg .opt:first-child { border-left: 0; }
.seg .opt > span { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.seg .opt input:checked + span { background: var(--ink); color: var(--paper); border: 0; }
.band-dark .seg .opt input:checked + span { color: #1d1d1f; }
.seg .opt input:focus-visible + span { outline: 2px solid var(--cold); outline-offset: -4px; }
@media (hover: hover) { .seg .opt:hover input:not(:checked) + span { background: var(--soft); } }
.calc-panel .opts { flex-wrap: wrap; }
@media (max-width: 480px) {
  /* A phone: equal cells the line's width, a word may wrap inside its cell; the hairlines are the 1 px gaps. */
  .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; width: 100%; background: #86868b; }
  .seg .opt { border-left: 0; background: var(--paper); }
  .seg .opt > span { justify-content: center; width: 100%; padding: 4px 8px; font-size: 14px; line-height: 18px; text-align: center; white-space: normal; }
  /* The four sorts: two by two, so none sits alone on a line of its own (390 and 320 px). */
  .calc-sort .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .calc-sort { padding-top: 28px; }
  .seg .opt > span { padding: 0 18px; font-size: 16px; }
}

/* Full-bleed bands: colder on white, average on the soft grey. The footer goes white here, so the band has an end. */
.group { padding: 10px 0 18px; }
.group-average { padding-top: 22px; background: var(--soft); }
.site-footer { background: var(--paper); }
.group h2 { font-size: 24px; line-height: 1.15; }
.group-text { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 20px; text-wrap: balance; }
.group-text-ink { color: var(--ink); }
.group-line { display: block; text-wrap: balance; }

/* The scale for the bars below it: the same heat with direct electric. Not a row. */
.group-ref { margin-top: 10px; padding-bottom: 8px; font-size: 14px; line-height: 18px; color: var(--muted); }
.group-ref-line { text-wrap: pretty; }
.group-ref-figure { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.group-ref-bar { display: block; height: 4px; margin-top: 3px; background: #8e8e93; }

.rows { margin: 0; padding: 0; list-style: none; }
.row { border-top: 1px solid var(--line); }
.group-ref + .rows .row:first-child { border-top: 0; } /* The reference bar already rules it off. */
.group-text + .rows, .group-pinned + .rows { margin-top: 10px; }
.group-pinned { margin-top: 8px; color: var(--ink); }
.row-more summary { list-style: none; cursor: pointer; }
.row-more summary::-webkit-details-marker { display: none; }

/* At rest: name and size, the numbers in buying order in plain words, the bar. The rest is one tap away. */
.row-rest { display: block; position: relative; padding: 11px 0 12px; }
/* The mark has its own short line under the name, so the rows keep one rhythm. */
.row-name { padding-right: 18px; font-size: 15px; line-height: 22px; letter-spacing: 0; overflow-wrap: anywhere; }
.row-title { display: block; }
.row-shown-size { font-weight: 400; color: var(--muted); }
.row-mark { display: block; font-size: 13px; font-weight: 400; line-height: 16px; color: var(--muted); }
.row-mark-best { font-weight: 600; color: var(--ink); }
.calc-row[hidden] { display: none !important; }
@media (max-width: 767px) {
  /* The two short options on the first line, the long one under: the DOM has them in that order, so seen = read = tabbed. */
  .ask .opts-stack { flex-direction: row; flex-wrap: wrap; column-gap: 12px; }
  .ask .opts-stack .opt { padding-right: 0; }
  .ask .calc-row { min-height: 50px; padding: 1px 0; }
}
/* Desktop: Pump on's three options on one line, spaced as Maja's, so the questions take two rows and Arvuta comes up.
   Under 800 the line would not fit beside Maja, so the column stays. */
@media (min-width: 800px) {
  .ask .opts-stack { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .ask .opts-stack .opt { padding-right: 12px; }
}
.calc-select { height: 48px; width: 100%; max-width: 220px; padding: 0 10px; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid #86868b; border-radius: 6px; }
.ask label[for="c-praegu"] { line-height: 22px; padding-top: 2px; }
.row-months, .row-years { font-size: 13px; line-height: 18px; color: var(--muted); }
.answer-january { margin-top: 12px; font-size: 15px; line-height: 21px; color: var(--muted); text-wrap: balance; }
.row-chevron { position: absolute; top: 11px; right: 0; font-size: 20px; line-height: 22px; color: var(--muted); }
.row-more[open] .row-chevron { transform: rotate(90deg); }

/* Three short lines, words left, euros right, so the money reads down: price, a year, the total. */
.row-figures { display: block; max-width: 420px; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row-part { display: flex; align-items: baseline; justify-content: space-between; column-gap: 12px; }
.row-gap { display: block; }
.row-figure { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.row-noprice .row-figure { font-weight: 400; }
.row-from { font-size: 14px; font-weight: 400; color: var(--muted); }
/* Under it, how far a real year has been from the average one (card #167). */
.lead-years { margin-top: 4px; color: var(--muted); text-wrap: pretty; }
/* Its › to the method page's #m-backtest, which names the example home: a quiet link, a finger wide. */
/* 44 px each way to tap, with negative margins as wide and as tall as the growth, so the line keeps its height and its
   two lines (#175): the box overlaps the air around the › and nothing moves. */
.years-more { display: inline-block; min-width: 44px; min-height: 44px; margin: -14px -10px; line-height: 44px; vertical-align: baseline; color: var(--ink); text-align: center; text-decoration: none; }
/* Why this one: one plain sentence, under the name. */
.lead-why { margin-top: 8px; font-size: 15px; line-height: 21px; color: var(--ink); text-wrap: pretty; }
/* The lead (card #160, Tarvo's 2026-11-07 review): from a tablet up two columns, the name, why and a small table of
   figures on the left, the picture, the price big and Osta on the right. On a phone the name, then the picture beside
   the price and Osta, then the table: Osta stays on the first screen. */
.lead-top { display: flex; flex-direction: column; }
.lead-main { display: contents; }
.lead-main > * { order: 5; }
.lead-top .lead-label { order: 1; }
.lead-top .lead-name { order: 2; }
.lead-top .lead-why { order: 3; }
.lead-top .lead-buy-block { order: 4; }
.lead-top-advice .lead-buy-block { order: 6; }
.lead-buy-block { display: flex; align-items: center; column-gap: 16px; margin-top: 14px; }
.lead-media { flex: none; width: 112px; }
.lead-media:empty { display: none; }
.lead-media .product-lead { width: 100%; margin: 0; }
.lead-offer { flex: 1 1 auto; min-width: 0; }
.lead-buy-block .lead-price { margin-top: 0; }
.lead-price-what { display: block; font-size: 15px; line-height: 20px; color: var(--muted); }
.lead-offer-price { display: block; font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lead-price-source { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.lead-installment { margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--muted); }
.lead-buy-block .lead-actions { margin-top: 10px; column-gap: 16px; }
.lead-buy-block .lead-buy { min-height: 52px; padding: 0 28px; font-size: 19px; }
.lead-buy-block .lead-offer-note { margin-top: 8px; }
/* The figures: label left, value right, one hairline a row, so the euros read down. The month first. */
.lead-figures { display: block; max-width: 460px; margin-top: 16px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 20px; }
.lead-figures .row-part { display: flex; align-items: baseline; justify-content: space-between; column-gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.lead-figures .row-words { color: var(--muted); }
.lead-figures .row-figure { font-size: 17px; line-height: 22px; text-align: right; }
.lead-figures .row-month .row-figure { font-size: 19px; }
.list-count-sort { display: inline-block; } /* `· järjestatud: …` keeps together on a line of its own when the line is full. */
/* The notes under the lead, behind one tap, as `Kuidas see arvutatud on`. Its lines keep their own look inside. */
.lead-assumes { margin-top: 12px; }
.lead-assumes + .calc-more { margin-top: 0; }
.lead-assumes .calc-panel { padding-bottom: 8px; padding-right: max(0px, calc(100% - 700px)); }
/* An average-climate cost must not look as sure as a colder one, so nothing in that list is bold. */
.group-average .row-figure { font-weight: 400; }

/* Flat and square. The fill is the cost, the whole line is the same heat with electric, as the line above the rows says. */
.row-bar { display: block; height: 4px; margin-top: 5px; background: #ededf0; }
.row-bar-fill { display: block; height: 100%; background: var(--cold); }
.group-average .row-bar { background: #e0e0e5; }
.group-average .row-bar-fill { background: #6e6e73; }

/* In the opened row: one black button, one text link, the size note right under them. */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; margin-top: 8px; font-size: 15px; }
.row-actions a { display: flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; }
.row-actions .row-buy { padding: 0 16px; border-radius: 6px; background: var(--ink); color: #fff; font-weight: 600; }
.row-choose { order: 1; flex-basis: 100%; margin-top: 8px; font-size: 13px; line-height: 16px; color: var(--ink); }

/* One tap away. */
.row-panel { padding: 8px 0 2px; font-size: 14px; line-height: 19px; color: var(--muted); }
select.row-size { min-width: 44px; min-height: 44px; margin: -11px 0 -11px -4px; padding: 0 4px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
span.row-size { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.row-nums { margin: 4px 0 0; }
.num { font-size: 14px; }
.row-nums .num { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 2px 0; }
.row-nums .num-value { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-notes { margin-top: 10px; }
/* Other shops: rows on a hairline, the link at the end of its line. */
.row-offers { margin-top: 14px; }
.row-offers-title { color: var(--ink); font-weight: 600; }
.row-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.row-offer-what { flex: 1 1 0; min-width: 0; color: var(--ink); }
.row-offer-what > span, .row-offer-cheaper { display: block; }
.row-offer-shop { color: var(--muted); }
.row-offer-cheaper { font-weight: 600; }
.row-offer-buy { display: flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.row-offer-note { flex-basis: 100%; padding-bottom: 4px; font-size: 13px; line-height: 18px; }
.row-offer-code { white-space: nowrap; }
.row-notes p + p { margin-top: 6px; }
.row-parts { margin-bottom: 8px; font-weight: 600; }
.row-parts p + p { margin-top: 0; font-weight: 400; }
.row-best { color: var(--ink); }
.row-best strong { font-weight: 600; }
.row-why { color: var(--ink); }
.row-noise-line { color: var(--ink); }
.row-noise-source { display: flex; align-items: center; min-height: 44px; min-width: 44px; width: fit-content; color: var(--ink); text-decoration: none; }
.row-page { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }

/* The smallest phones: the field gives way so the area and the house stay on one line. */
@media (max-width: 360px) {
  .calc input[type="text"] { width: 64px; }
}

@media (min-width: 768px) {
  .hero { --figure: 32px; padding: 44px 0 44px; }
  .calc-form { margin-top: 28px; }
  .ask { display: flex; flex-wrap: wrap; column-gap: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ask label[for="c-praegu"] { line-height: 20px; padding-top: 0; }
  .ask .calc-row, .ask .calc-row:last-child { display: block; min-height: 0; padding: 14px 0; border: 0; }
  .ask .calc-label { margin-bottom: 4px; font-size: 15px; line-height: 20px; color: var(--muted); }
  .ask .calc-note { margin-top: 2px; }
  .calc-go { width: 280px; margin-top: 24px; }
  .result { margin-top: 40px; padding-top: 32px; }
  .lead-label { font-size: 17px; line-height: 24px; }
  .lead-name { margin-top: 6px; font-size: 56px; line-height: 1.06; letter-spacing: -0.032em; }
  /* Beside the picture column the name has less room: a step down, so a 24-letter name keeps one line. */
  .lead-top .lead-name { font-size: 48px; }
  .lead-tail { white-space: nowrap; }
  .lead-advice { max-width: 34em; font-size: 19px; line-height: 27px; }
  .all-head { padding-top: 48px; }
  .all-head h2 { font-size: 40px; }
  .choose { padding: 48px 0 56px; }
  .choose h2 { font-size: 32px; }
  .choose-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 16px; }
  .lead-why { margin-top: 10px; font-size: 17px; line-height: 24px; }
  .lead-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 48px; align-items: start; }
  .lead-main { display: block; grid-column: 1; }
  .lead-buy-block { grid-column: 2; grid-row: 1; flex-direction: column; align-items: stretch; margin-top: 0; }
  .lead-media { width: 100%; margin-bottom: 14px; }
  .lead-offer-price { font-size: 40px; }
  .lead-buy-block .lead-actions { flex-direction: column; align-items: stretch; row-gap: 6px; }
  .lead-buy-block .lead-actions a { justify-content: center; }
  .lead-buy-block .lead-buy { min-height: 56px; }
  .lead-figures { margin-top: 22px; font-size: 17px; line-height: 22px; }
  .lead-figures .row-figure { font-size: 19px; line-height: 24px; }
  .lead-figures .row-month .row-figure { font-size: 22px; }
  .answer-sentence { max-width: 30em; margin-top: 14px; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
  .bar { height: 16px; margin-top: 8px; }
  .answer-note { margin-top: 10px; font-size: 15px; line-height: 21px; }
  .answer-compare { margin-top: 14px; font-size: 19px; line-height: 27px; }
  .calc-panel .calc-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .calc-panel .calc-row .calc-note, .calc-panel .calc-row .calc-error { grid-column: 2; }
  .calc-panel .calc-row .calc-label { font-size: 15px; }
  .calc-sources { flex-direction: row; flex-wrap: wrap; column-gap: 28px; }

  .group { padding: 24px 0 32px; }
  .group-average { padding-top: 40px; padding-bottom: 48px; }
  .group h2 { font-size: 32px; }
  .group-text { margin-top: 6px; font-size: 17px; line-height: 24px; }
  .group-ref { margin-top: 20px; }
  .row-panel { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; padding: 4px 0 8px; font-size: 15px; line-height: 21px; }
  .row-panel .row-notes { grid-column: 2; grid-row: 1 / span 3; }
  .num { font-size: 15px; }
  .row-notes { margin-top: 0; max-width: 560px; }
}

/* The row on one line: the name on the left, the three numbers in columns and their bar on the right.
   Under this width the columns would squeeze the name, so the phone's stacked row stays. */
@media (min-width: 980px) {
  /* One rule above the result is the form's own. Card #160: the answer is one column, the buy block under its figures. */
  .result { margin-top: 0; border-top: 0; }
  /* The scale sits over the bars' own column. */
  /* The words over the whole row, so the yearly figure never sits over the 10-year column; the scale over the bars. */
  .group-ref-bar { margin-left: auto; margin-right: 36px; width: 520px; }
  .row-rest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px 16px;
    grid-template-areas: "name figures ." "name bar .";
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    min-height: 66px;
    padding: 13px 0 14px;
  }
  .row-name { grid-area: name; padding-right: 0; font-size: 17px; }
  /* Three equal columns that hold the longest words on one line, each set to its right edge, so the euros of every row
     end under each other as in a table. */
  .row-figures:not(.lead-figures) { grid-area: figures; display: grid; grid-template-columns: repeat(3, 160px); column-gap: 20px; max-width: none; margin-top: 0; line-height: 18px; }
  .row-figures:not(.lead-figures) .row-part { display: block; text-align: right; }
  .row-figures:not(.lead-figures) .row-figure { display: block; font-size: 17px; line-height: 22px; }
  .row-figures .row-gap { grid-column: 2 / -1; align-self: end; line-height: 22px; }
  .row-bar { grid-area: bar; align-self: start; }
  .row-chevron { top: 13px; }
  /* Opened, the notes keep the column the two numbers stand in. */
  .row-panel { grid-template-columns: minmax(0, 1fr) 556px; column-gap: 20px; }
  .row-facts, .row-panel > .row-actions, .row-panel > .row-page { max-width: 340px; }
  .row-panel .row-notes { max-width: 520px; }
}

/* The whole list, one press away: on every category page, heat pumps too (card #160). */
.list-more { display: block; width: 100%; min-height: 48px; margin: 16px 0 8px; border: 1px solid #86868b; border-radius: 6px; background: transparent; color: var(--ink); font-size: 17px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .list-more:hover { background: #f5f5f7; } }
.list-more[hidden] { display: none; }
@media (min-width: 734px) { .list-more { width: 280px; } }
/* Card #160: under `Võrdle`, how many and in which order, in the sort's own words. */
.list-count { margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--muted); text-wrap: pretty; }
@media (min-width: 768px) { .list-count { margin-top: 6px; font-size: 17px; line-height: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .bar span, .calc-go { transition: none; }
  .calc-go:active { transform: none; }
}
/* Air-to-water's advice block keeps the first row close. */
.lead-top-advice .lead-buy-block { margin-top: 4px; }
.lead-top-advice .lead-buy-block .lead-actions { margin-top: 8px; }