/* /prp-kosten/ only (design-v2 B): hero with a photo card instead of the form card, the two extra tariff tiles under the price cards, the year-one sum card, facts row */

/* hero: photo card under the copy on mobile, in columns 8-12 from 1024 */
.hero--kosten .hero__photo{margin:0}
.hero--kosten .hero__photo .photo-card{position:relative;aspect-ratio:3/2}
.hero--kosten .hero__photo .photo-card img{aspect-ratio:auto;border-radius:0;box-shadow:none;object-position:45% 50%}
.hero--kosten .hero__actions{margin-top:26px}
@media (min-width:1024px){
  .hero--kosten .hero__photo{grid-column:8 / -1;grid-row:1;align-self:center}
  .hero--kosten .hero__photo .photo-card{aspect-ratio:4/5}
  .hero--kosten .hero__photo .photo-card img{object-position:34% 50%}
}

/* 01: the two rows that are not a card (onderhoud, adviesgesprek) */
.tariff-extra{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.tariff-extra li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);padding:18px 22px;min-width:0}
.tariff-extra li > div{flex:1 1 200px;min-width:0}
.tariff-extra b{display:block;color:var(--c-navy);font-size:1rem;line-height:1.3}
.tariff-extra small{display:block;font-size:.85rem;color:var(--c-muted);line-height:1.4;margin-top:2px}
.tariff-extra .amount{flex:none;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--c-navy);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.tariff-extra .amount--free{font-size:1rem;color:var(--c-teal-dark);background:var(--c-teal-tint);padding:8px 14px;border-radius:var(--r-pill);letter-spacing:0}
@media (min-width:768px){.tariff-extra{grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.tariff-extra li{padding:22px 28px}}

/* 03: the year-one sum as a card with a navy total row */
.sum{width:100%;max-width:36rem;margin-top:var(--s-4);background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);overflow:hidden;border-collapse:separate;border-spacing:0;font-size:.95rem;line-height:1.45;font-variant-numeric:tabular-nums lining-nums}
.sum th,.sum td{padding:14px 20px;border-bottom:1px solid var(--c-rule);vertical-align:top}
.sum th{font-weight:400;color:var(--c-ink)}
.sum td{text-align:right;white-space:nowrap;font-weight:700;color:var(--c-navy)}
.sum .sum__total th,.sum .sum__total td{background:var(--c-navy);color:#fff;border-bottom:0;font-weight:700}
.prose .sum + h3{margin-top:1.5em}
@media (max-width:479px){.sum td{white-space:normal}}

/* 02: facts row sits between the prose and the note */
.notes-grid > .facts{margin-top:var(--s-4)}

/* 04: the included-list card follows the answer */
.notes-grid > .listcard{margin-top:var(--s-5)}
.listcard p{font-size:.95rem;line-height:1.55;color:var(--c-ink)}

/* 05: split with the photo card and the photo note (site.css); the note text is the photo note here */
.split--kosten{align-items:start}
.split--kosten .photo-card{aspect-ratio:4/3}
@media (min-width:1024px){.split--kosten .photo-card{aspect-ratio:5/4}}

/* 06: the inline CTA after the comparison */
.inline-cta--kosten{margin-top:40px}