/* =====================================================================
   TILBUDSSYSTEM · utkast 3 (lyst og midtstilt)
   Bare det siden trenger utover undersider.css:
   - «Regn på det selv» i det mørke båndet, med svaret som et stort tynt tall
   - e-posten bedriften får, som et hvitt kort
   - regnestykket med eksempelpriser fra maler-demoen, i et hvitt kort
   ===================================================================== */

/* Overskrifter med id lander litt lenger ned, så etiketten over også vises */
.seksjonshode > [id] { scroll-margin-top: 3rem; }

/* ---------- Spalter (som på de andre tjenestesidene) ---------- */
.spalte { max-width: 820px; margin-inline: auto; }
.smal { max-width: 1000px; margin-inline: auto; }
.mork-band { margin-inline: clamp(8px, 1.2vw, 16px); border-radius: 24px; }

/* ---------- Regn på det selv ----------
   Feltene side om side, svaret midtstilt under: liten tekst, stort tynt
   tall, liten tekst. Når et felt er tomt, får svaret klassen «tom». */
.tb-regner { max-width: 820px; margin-inline: auto; }
.tb-regner .felt input { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.tb-regner .regner-svar {
  display: grid; justify-items: center; align-content: center; gap: .55rem; min-height: 11rem;
  padding: 1.75rem 1rem 1.5rem; border-top: 1px solid var(--strek); text-align: center;
}
.tb-regner [data-regn-for], .tb-regner [data-regn-etter] { font-size: 1rem; letter-spacing: 0; color: var(--svak); }
.tb-regner .regner-svar strong { font-size: var(--t-tall); font-weight: 300; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
/* Enheten liten og grå, som i de andre store tallene (.tall-etter) */
.tb-regner .regn-enhet { margin-left: .06em; font-size: .42em; letter-spacing: -.02em; color: var(--svak); }
/* «under en time» står i ord og vises litt mindre */
.tb-regner .regner-svar strong.regn-ord { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.04em; }
.tb-regner .regner-svar.tom strong { display: none; }
.tb-regner .regner-svar.tom [data-regn-for], .tb-regner .regner-svar.tom [data-regn-etter] { font-size: var(--t-ingress); color: var(--tekst); }
.tb-regner .regner-merknad { text-align: center; }

/* ---------- E-posten i innboksen: et hvitt kort ---------- */
.tb-epost { display: grid; gap: 1rem; max-width: 820px; margin: 0 auto; }
.tb-epost-kort { padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius); box-shadow: 0 30px 60px -45px color-mix(in srgb, var(--tekst) 35%, transparent); }
.tb-epost .faktaboks { border-top: 0; }
.tb-epost .faktaboks > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tb-epost .tb-emne { padding-top: 0; }
.tb-epost .tb-emne dd { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.02em; }
.tb-epost .tb-overslag dd { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tb-svarene { list-style: none; display: grid; gap: .4rem; }
.tb-svarene span { color: var(--svak); }

/* ---------- Regnestykket: tabell i et hvitt kort ---------- */
.tb-prisene { display: grid; gap: 1.1rem; max-width: 720px; margin-inline: auto; text-align: center; color: var(--svak); }
.tb-tabellkort { margin-bottom: 1.4rem; padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius); text-align: left; }
/* Tabelltall bare i beløpene: skriften gir komma og kolon tallbredde med tabular-nums */
.tb-regnestykke { width: 100%; border-collapse: collapse; }
.tb-regnestykke caption { caption-side: top; text-align: left; padding-bottom: 1rem; font-size: var(--t-liten); font-weight: 500; color: var(--svak); }
.tb-regnestykke th, .tb-regnestykke td { padding: .9rem 0; border-top: 1px solid var(--strek); vertical-align: top; }
.tb-regnestykke th { text-align: left; font-weight: 400; color: var(--tekst); padding-right: 1rem; }
.tb-regnestykke th span { display: block; font-size: var(--t-liten); font-weight: 400; color: var(--svak); }
.tb-regnestykke td { text-align: right; white-space: nowrap; color: var(--tekst); font-variant-numeric: tabular-nums; }
.tb-regnestykke tfoot th, .tb-regnestykke tfoot td { font-weight: 500; }
.tb-regnestykke tfoot tr:first-child > * { border-top-color: var(--strek-sterk); }
/* Det kunden ser: stort og tynt, som prisene ellers på siden */
.tb-regnestykke .tb-kunden-ser > * { padding-bottom: 0; }
.tb-regnestykke .tb-kunden-ser td { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.15; }
/* Smal skjerm: radene som rutenett, og det kunden ser under teksten i stedet for ved siden av */
@media (max-width: 560px) {
  .tb-regnestykke, .tb-regnestykke caption, .tb-regnestykke tbody, .tb-regnestykke tfoot { display: block; }
  .tb-regnestykke tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .tb-regnestykke .tb-kunden-ser { grid-template-columns: minmax(0, 1fr); }
  .tb-regnestykke .tb-kunden-ser td { text-align: left; border-top: 0; padding-top: .35rem; }
}

/* ---------- Prisen ---------- */
.prisboks-tall .tall { margin-top: .35rem; }