/*
 * The marketing pages' own stylesheet.
 *
 * There are two of them — the homeowner page at / and the contractor page at
 * /aannemer — and they are the same site wearing two faces. Sharing one file
 * rather than carrying a <style> block each is what keeps a nav, a button or a
 * section rhythm from drifting apart the first time one of the two is edited.
 *
 * Everything visual that belongs to the *product* still comes from widget.css,
 * which both pages load first. These rules only lay a marketing page out around
 * it, and are prefixed rp- so the two sets can never collide.
 *
 * Order: shared primitives (band, nav, buttons, sections, footer), then the
 * blocks only one page uses, each under a heading saying which.
 */

/*
 * In-page jumps glide rather than teleport — both marketing pages are long and
 * every nav link is an anchor into them, and landing somewhere new with no
 * sense of how far you travelled is disorienting. Honoured only where the
 * visitor has not asked for less movement.
 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Shared primitives ───────────────────────────────────────────── */
body { margin: 0; }

.fw-root {
  /* The wizard's root is a full-height flex column inside its frame. As a
     page it only needs to stack, and the page's own background is the band
     and the white sections, not the widget canvas. */
  min-height: 0;
  background: var(--fw-surface);
}

.rp-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Nav and hero, both on the band ──────────────────────────────────── */

.rp-dark { background: var(--fw-band); color: var(--fw-band-ink); }

.rp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}

.rp-wordmark {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--fw-band-ink);
  text-decoration: none;
}

.rp-wordmark span { color: var(--fw-on-band); }

.rp-nav-links { display: flex; align-items: center; gap: 26px; }

/*
 * :not() on the button, because the CTA is an anchor inside this container
 * too — and `.rp-nav-links a` outranks `.rp-btn-mint` on specificity. Left
 * bare, the trial button took the dimmed white meant for the plain links
 * and rendered white-on-mint at 2.15:1, which is the least readable thing
 * on the page and the one thing on the band that has to be read.
 */
.rp-nav-links a:not(.rp-btn-mint) {
  font-size: var(--fw-t-body);
  color: rgb(255 255 255 / .74);
  text-decoration: none;
  transition: color 140ms;
}

.rp-nav-toggle { display: none; }

/* The mint button is the one thing on the band that is not text, so it is
   the only place the eye can land. Used for the trial and nothing else. */
.rp-btn-mint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font: inherit;
  font-size: var(--fw-t-body);
  font-weight: 650;
  color: var(--fw-band);
  background: var(--fw-on-band);
  border: 1.5px solid var(--fw-on-band);
  border-radius: var(--fw-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}

.rp-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font: inherit;
  font-size: var(--fw-t-body);
  font-weight: 600;
  color: var(--fw-band-ink);
  background: transparent;
  border: 1.5px solid rgb(255 255 255 / .28);
  border-radius: var(--fw-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}

.rp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 56px 0 40px;
}

.rp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  padding: 6px 12px;
  font-size: var(--fw-t-eyebrow);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fw-on-band);
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
}

.rp-hero h1 {
  margin: 0 0 18px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 650;
}

.rp-hero-lede {
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.6;
  color: rgb(255 255 255 / .74);
  max-width: 46ch;
}

.rp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }

.rp-fineprint { margin: 0; font-size: var(--fw-t-hint); color: rgb(255 255 255 / .5); }

/*
 * The proof, not a picture of one.
 *
 * A screenshot ages the day the result screen changes and a stock photo of
 * a house proves nothing at all. This is the result panel's own markup on
 * the result panel's own rules, shrunk — so what a visitor is looking at is
 * the thing they would be buying.
 */
.rp-proof {
  background: var(--fw-surface);
  border-radius: var(--fw-radius);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .55);
  overflow: hidden;
  color: var(--fw-ink);
}

.rp-proof-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--fw-band);
}

.rp-proof-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fw-band);
  background: var(--fw-surface);
  border-radius: 5px;
}

.rp-proof-name { font-size: 13.5px; font-weight: 600; color: var(--fw-band-ink); }

.rp-proof-body { padding: 20px 18px; }

.rp-proof-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fw-ink-faint);
}

.rp-proof-amount {
  display: block;
  margin-bottom: 16px;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The miniature's copy of .fw-price-caveat. Sits between the amount and the
   first line, so the amount loses its bottom margin when this is present. */
.rp-proof-amount:has(+ .rp-proof-caveat) { margin-bottom: 8px; }

.rp-proof-caveat {
  display: block;
  margin-bottom: 18px;
  font-size: var(--fw-t-hint);
  line-height: 1.5;
  color: var(--fw-ink-soft);
}

/* The real .fw-line is a table row with a hard edge; inside the miniature
   it is a short list, so only the last rule comes off. */
.rp-proof .fw-line { padding: 10px 0; }
.rp-proof .fw-line:last-of-type { border-bottom: 0; }
.rp-proof .fw-btn { width: 100%; margin-top: 14px; padding: 12px 20px; }

/* ── How it works ────────────────────────────────────────────────────── */

.rp-section { padding: 64px 0; }
.rp-section-muted { background: var(--fw-surface-2); }

.rp-steps { display: grid; grid-template-columns: repeat(3, 1fr); }

.rp-step { padding: 0 30px; }
.rp-step:first-child { padding-left: 0; }
.rp-step:last-child { padding-right: 0; }
.rp-step + .rp-step { border-left: 1px solid var(--fw-line); }

.rp-step-number {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fw-t-meta);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--fw-ink-faint);
  font-variant-numeric: tabular-nums;
}

.rp-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.rp-step p { margin: 0; font-size: var(--fw-t-body); line-height: 1.65; color: var(--fw-ink-soft); }

/* ── Admin panel ─────────────────────────────────────────────────────── */

.rp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

.rp-split h2 { margin: 0 0 14px; font-size: 30px; line-height: 1.2; letter-spacing: -.025em; font-weight: 650; }
.rp-split p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--fw-ink-soft); max-width: 44ch; }

.rp-leads {
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-line);
  border-radius: var(--fw-radius);
  box-shadow: var(--fw-shadow);
  overflow: hidden;
}

.rp-leads-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--fw-line);
}

.rp-leads-title { font-size: var(--fw-t-body); font-weight: 650; }
.rp-leads-when { font-size: var(--fw-t-meta); color: var(--fw-ink-faint); }

.rp-lead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  font-size: var(--fw-t-body);
  border-bottom: 1px solid var(--fw-line-soft);
}

.rp-lead:last-child { border-bottom: 0; }
.rp-lead-where { color: var(--fw-ink-faint); }
.rp-lead-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ── Pricing ─────────────────────────────────────────────────────────── */

.rp-pricing-head { text-align: center; margin-bottom: 40px; }

.rp-pricing-head h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 650;
}

.rp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/*
 * A column, so the CTA can be pushed to the floor of the card.
 *
 * Starter lists five features and Pro six, so the two buttons sat a line
 * apart — and two prices being compared side by side are read along a
 * horizontal, which a staggered pair of buttons breaks. The cards are
 * already the same height (grid stretches them), so margin-top:auto on the
 * CTA is enough to land both on the same line whatever the lists do later.
 */
.rp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-line);
  border-radius: var(--fw-radius);
}

.rp-plan[data-featured] {
  border-color: var(--fw-primary);
  box-shadow: 0 18px 40px -28px rgb(22 48 42 / .55);
}

.rp-plan-badge {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #ffffff;
  background: var(--fw-band);
  border-radius: 999px;
}

.rp-plan-name {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fw-t-eyebrow);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fw-ink-faint);
}

.rp-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.rp-plan-amount {
  font-size: 38px;
  font-weight: 650;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rp-plan-period { font-size: var(--fw-t-body); color: var(--fw-ink-soft); }

.rp-plan-lede {
  margin: 0 0 20px;
  font-size: var(--fw-t-body);
  line-height: 1.6;
  color: var(--fw-ink-soft);
}

/* The bottom margin is the gap above the CTA; margin-top:auto on the button
   eats any slack beyond it, so the shorter card grows here and not between
   its features. */
.rp-features { margin: 0 0 24px; padding: 0; list-style: none; }

.rp-features li {
  display: flex;
  gap: 11px;
  margin-bottom: 11px;
  font-size: var(--fw-t-body);
  line-height: 1.5;
}

/* Aligned to the first line of the label rather than centred on the whole
   item, so a feature that wraps keeps its tick beside the word it starts on. */
.rp-features svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--fw-primary);
}

/*
 * Both CTAs to the primary's metrics.
 *
 * In the wizard the ghost is deliberately the quieter half of a pair —
 * "Terug" beside "Volgende" — so it carries a smaller face and less
 * padding. Here the two are peers: same words, same offer, one tariff
 * apart. Left alone the ghost came out 46px against the primary's 48 and
 * the tops of two buttons meant to be compared sat 2px out.
 */
.rp-plan .fw-btn {
  width: 100%;
  margin-top: auto;
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 650;
}

/* ── Benefits ────────────────────────────────────────────────────────── */

.rp-benefits {
  margin-top: 20px;
  padding: 34px;
  background: var(--fw-band);
  color: var(--fw-band-ink);
  border-radius: 16px;
}

.rp-benefits h3 { margin: 0 0 26px; font-size: 24px; letter-spacing: -.02em; font-weight: 650; }

.rp-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }

.rp-benefit { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }

.rp-benefit-number {
  grid-row: 1 / span 2;
  font-size: 15px;
  font-weight: 700;
  color: var(--fw-on-band);
  font-variant-numeric: tabular-nums;
}

.rp-benefit h4 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.rp-benefit p { margin: 0; font-size: 15px; line-height: 1.65; color: rgb(255 255 255 / .72); }

.rp-closing {
  margin: 26px 0 0;
  text-align: center;
  font-size: var(--fw-t-body);
  color: var(--fw-ink-faint);
}

.rp-footer {
  padding: 30px 0 40px;
  border-top: 1px solid var(--fw-line);
  font-size: var(--fw-t-hint);
  color: var(--fw-ink-faint);
}

.rp-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.rp-footer a { color: var(--fw-ink-soft); text-decoration: none; }

/* ── Narrow ──────────────────────────────────────────────────────────── */

/*
 * One breakpoint, at the width where two columns stop being two columns.
 * Everything below collapses to a single column in source order, which is
 * the order the argument is made in: what it is, then how it works, then
 * what it costs.
 */
/* ── The homeowner page (/) ─────────────────────────────────────────────────
 *
 * The one thing this page has to do is get somebody into the calculator, so
 * the choice of trade is not a section further down — it is the hero. The
 * heading, the three promises and the two cards are one block, and the cards
 * are the only white objects on the band, which is what makes them the thing
 * the eye lands on.
 */

/*
 * Every measurement in this block is doing one job: getting the two cards
 * fully above the fold on a 1280×800 screen, which is where this page either
 * works or does not. Anything added here — a line of lede, a fourth promise,
 * a larger heading — pushes the choice under the edge of the screen and has
 * to buy its space from something else in the same block.
 */
.rp-hero-home {
  padding: 30px 0 52px;
  text-align: center;
}

.rp-hero-home h1 {
  margin: 0 auto 14px;
  max-width: 18ch;
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 650;
}

.rp-hero-home .rp-hero-lede {
  margin: 0 auto 22px;
  /* Wide enough to hold the sentence in two lines. A third line here costs
     the bottom of the cards. */
  max-width: 62ch;
  text-align: center;
}

/*
 * The three promises.
 *
 * Left-aligned inside a centred block: a checklist read as centred text loses
 * the ragged left edge the eye uses to find the start of each line, and these
 * are the three sentences most likely to decide whether somebody starts.
 */
.rp-promise {
  /* A grid rather than a wrapping flex row: three equal columns stay three
     equal columns, where flex-wrap put two on one line and left the third
     stranded underneath as soon as the middle one ran long. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 26px;
  margin: 0 auto 26px;
  padding: 0;
  max-width: 900px;
  list-style: none;
}

.rp-promise li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  font-size: var(--fw-t-body);
  line-height: 1.45;
  color: rgb(255 255 255 / .82);
}

.rp-promise svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--fw-on-band);
}

/* The qualifier on the first promise — true for a roof and a facade, and not
   yet for anything else. It has to be readable, not hidden. */
.rp-promise small {
  display: block;
  font-size: var(--fw-t-meta);
  color: rgb(255 255 255 / .5);
}

.rp-choice-head {
  margin: 0 0 12px;
  font-size: var(--fw-t-eyebrow);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fw-on-band);
}

/*
 * One column per trade, and the count is not incidental.
 *
 * This was repeat(2) while there were two trades, so the third card landed
 * alone on a second row — a lone card in a row reads as a mistake rather than
 * as a choice. Three across now, and the drop to one column happens sooner
 * than it used to, because three cards run out of width before two do. There
 * is deliberately no two-column step in between: with three cards that is the
 * orphan row again, one breakpoint further down.
 *
 * A fourth trade wants repeat(2) here and a wider container, not repeat(4).
 */
.rp-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

.rp-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 22px 22px;
  background: var(--fw-surface);
  border: 1.5px solid transparent;
  border-radius: var(--fw-radius);
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / .55);
  color: var(--fw-ink);
  text-align: center;
  text-decoration: none;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}

.rp-choice-card svg {
  width: 76px;
  height: 57px;
  color: var(--fw-primary);
}

.rp-choice-label {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.015em;
}

.rp-choice-hint {
  font-size: var(--fw-t-hint);
  line-height: 1.5;
  color: var(--fw-ink-soft);
  max-width: 26ch;
}

/* Not a button inside the card — the whole card is the link, and a second
   clickable thing inside it would only be a smaller target for the same
   destination. This is the arrow that says so. */
.rp-choice-go {
  margin-top: 4px;
  font-size: var(--fw-t-body);
  font-weight: 650;
  color: var(--fw-primary);
}

/*
 * The quiet links to the page *about* each trade, one under each card.
 *
 * Same grid as .rp-choice above it, so each link sits under its own card
 * instead of floating between them. Deliberately dim and small: the cards are
 * the thing to click, and this is the door for somebody who wants to read
 * first — and the only path a crawler has from here to /gevel and /dak.
 */
.rp-choice-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 14px auto 0;
  text-align: center;
}

.rp-choice-more a {
  font-size: var(--fw-t-hint);
  font-weight: 600;
  color: rgb(255 255 255 / .66);
  text-decoration: none;
}

.rp-hero-home .rp-fineprint { margin-top: 20px; text-align: center; }

/* ── What is not built yet ─────────────────────────────────────────────────
 *
 * Shown, rather than left off. Somebody who came for a badkamer and finds a
 * page about roofs leaves; somebody who finds their job listed with a date
 * attached leaves an address. The chips are visibly not the two cards above —
 * flat, no shadow, no arrow — because the difference between "you can do this
 * now" and "we will write to you" has to be legible before the click.
 */

.rp-soon {
  max-width: 720px;
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--fw-band-line);
}

.rp-soon-title {
  margin: 0 0 14px;
  font-size: var(--fw-t-hint);
  color: rgb(255 255 255 / .6);
}

.rp-soon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.rp-soon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font: inherit;
  font-size: var(--fw-t-body);
  font-weight: 600;
  color: rgb(255 255 255 / .88);
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}

.rp-soon-chip::after {
  content: 'binnenkort';
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fw-on-band);
}

/* ── The waitlist form ─────────────────────────────────────────────────────
 *
 * One field and a dropdown. Everything else — a name, a postcode, a phone
 * number — is something we would have no use for until the calculator for
 * their job exists, and every one of them costs a share of the people who
 * would otherwise have left an address.
 */

.rp-waitlist {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px;
  background: var(--fw-surface);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  box-shadow: var(--fw-shadow);
}

.rp-waitlist h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; }

.rp-waitlist p {
  margin: 0 0 20px;
  font-size: var(--fw-t-body);
  line-height: 1.6;
  color: var(--fw-ink-soft);
}

.rp-field { display: block; margin-bottom: 14px; text-align: left; }

.rp-field span {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fw-t-hint);
  font-weight: 600;
  color: var(--fw-ink-soft);
}

.rp-field input,
.rp-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 13px;
  font: inherit;
  /* Never below 16px: iOS zooms the page when a smaller field is focused, and
     the visitor lands back on a layout they now have to pinch out of. */
  font-size: var(--fw-t-input);
  color: var(--fw-ink);
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-line);
  border-radius: var(--fw-radius-sm);
}

.rp-field input:focus-visible,
.rp-field select:focus-visible {
  outline: none;
  border-color: var(--fw-primary);
  box-shadow: 0 0 0 4px var(--fw-primary-ring);
}

.rp-waitlist .fw-btn { width: 100%; margin-top: 6px; }

.rp-waitlist-note {
  margin: 14px 0 0;
  font-size: var(--fw-t-meta);
  line-height: 1.55;
  color: var(--fw-ink-faint);
}

/* The honeypot. Not display:none — some bots skip hidden fields, and the ones
   that do not are exactly the ones worth catching. Off-screen and out of the
   tab order does the same job to a person. */
.rp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rp-waitlist-done {
  text-align: center;
  font-size: var(--fw-t-body);
  line-height: 1.6;
  color: var(--fw-ink);
}

.rp-waitlist-done strong { display: block; margin-bottom: 6px; font-size: 18px; }

.rp-form-error {
  margin: 12px 0 0;
  font-size: var(--fw-t-hint);
  line-height: 1.55;
  color: var(--fw-danger);
}

/* ── Sections particular to this page ──────────────────────────────────────*/

.rp-section-head { max-width: 60ch; margin: 0 0 34px; }

.rp-section-head h2 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 650;
}

.rp-section-head p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fw-ink-soft);
}

/* The sample raming, reusing the .rp-proof panel the contractor page built. */
.rp-proof-plain { box-shadow: var(--fw-shadow); border: 1px solid var(--fw-line); }

.rp-note {
  margin: 18px 0 0;
  font-size: var(--fw-t-hint);
  line-height: 1.6;
  color: var(--fw-ink-faint);
}

/* ── Beta ──────────────────────────────────────────────────────────────────
 *
 * For a renovatietype whose engine is finished but whose rates have not been
 * held against a real quote yet. It is a small badge and a short paragraph
 * rather than a banner: the point is that nobody can say they were not told,
 * not that they should be scared off.
 *
 * In the accent rather than in a warning red. This is a confidence interval,
 * not a fault, and dressing it as an error would say something untrue about
 * the number underneath it.
 *
 * Both grounds are covered: the chip sits in the dark hero beside the eyebrow
 * and again on the light section below it, so it takes its colour from the
 * accent and carries its own background either way.
 */
.rp-beta {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fw-accent);
  background: rgb(200 135 59 / .14);
  border: 1px solid rgb(200 135 59 / .45);
  border-radius: 999px;
  /* The eyebrow it sits in is uppercase and tracked; this must not inherit
     that a second time or it reads as part of the same word. */
  letter-spacing: .06em;
  vertical-align: middle;
}

/*
 * The callout under a hero that says how far a price can be trusted.
 *
 * Named after the job rather than after bèta, which is what it used to hold.
 * /badkamer now carries the calibration instead — same box, same place, a
 * claim rather than a caveat — and the next trade to ship unproven will want
 * the bèta wording back inside it.
 */
.rp-note-callout {
  max-width: 74ch;
  padding: 22px 26px;
  background: var(--fw-surface);
  border: 1px solid var(--fw-line);
  border-left: 3px solid var(--fw-accent);
  border-radius: var(--fw-radius);
}

.rp-note-callout p {
  margin: 0;
  font-size: var(--fw-t-body);
  line-height: 1.65;
  color: var(--fw-ink-soft);
}

.rp-note-callout-title {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px !important;
  font-weight: 650;
  color: var(--fw-ink) !important;
}

.rp-note-callout-title .rp-beta {
  margin-left: 0;
  margin-right: 12px;
  /* Reset the flex order: the chip leads the line here, the label follows. */
  order: -1;
}

/* ── FAQ ───────────────────────────────────────────────────────────────────
 *
 * <details>, so the answers are in the page for anyone reading it with the
 * page's JavaScript blocked and for a search engine, and closed by default so
 * the questions can be scanned. These four are the objections that actually
 * stop somebody: what it costs, what happens to their address, how close the
 * figure is, and whether they are agreeing to anything.
 */

.rp-faq { max-width: 760px; }

.rp-faq details {
  border-bottom: 1px solid var(--fw-line);
}

.rp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--fw-ink);
  cursor: pointer;
  list-style: none;
}

.rp-faq summary::-webkit-details-marker { display: none; }

.rp-faq summary::after {
  content: '+';
  flex: none;
  font-size: 21px;
  font-weight: 400;
  color: var(--fw-ink-faint);
}

.rp-faq details[open] summary::after { content: '\2212'; }

.rp-faq p {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: var(--fw-t-body);
  line-height: 1.65;
  color: var(--fw-ink-soft);
}

/* ── Closing call to action ────────────────────────────────────────────────*/

.rp-cta { padding: 56px 0; text-align: center; }

.rp-cta h2 {
  margin: 0 auto 10px;
  max-width: 20ch;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 650;
}

.rp-cta p {
  margin: 0 auto 26px;
  max-width: 48ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgb(255 255 255 / .74);
}

.rp-cta .rp-choice { max-width: 860px; }

@media (hover: hover) {
  .rp-choice-card:hover {
    transform: translateY(-2px);
    border-color: var(--fw-primary-line);
    box-shadow: 0 30px 56px -26px rgb(0 0 0 / .6);
  }

  .rp-soon-chip:hover {
    background: rgb(255 255 255 / .12);
    border-color: rgb(255 255 255 / .34);
  }
}

@media (max-width: 860px) {
  .rp-hero-home { padding: 34px 0 44px; }
  .rp-hero-home h1 { font-size: 34px; }
  .rp-promise { grid-template-columns: 1fr; gap: 12px; max-width: 34em; }
  .rp-cta h2 { font-size: 26px; }
  .rp-section-head h2 { font-size: 25px; }
}

/* Three cards need more room than two did; below this they stack rather than
   leaving one of them alone on a second row. */
@media (max-width: 720px) {
  .rp-choice,
  .rp-choice-more { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .rp-hero-home h1 { font-size: 29px; }
  /* Cards side by side at 320px are illustrations nobody can read. */
  .rp-choice { grid-template-columns: 1fr; }
  .rp-choice-card { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 18px; }
  .rp-choice-card svg { width: 56px; height: 42px; }
  .rp-choice-hint { display: none; }
  .rp-choice-go { margin: 0 0 0 auto; }
  /* Follows the cards: one column, so each link stays under its own card. */
  .rp-choice-more { grid-template-columns: 1fr; gap: 8px; }
  .rp-waitlist { padding: 22px 18px; }
}

@media (max-width: 860px) {
  .rp-hero,
  .rp-split,
  .rp-plans,
  .rp-benefit-grid { grid-template-columns: 1fr; }

  .rp-hero { gap: 36px; padding: 40px 0 36px; }
  .rp-hero h1 { font-size: 34px; }
  .rp-split { gap: 32px; }
  .rp-section { padding: 48px 0; }
  .rp-benefits { padding: 26px; }

  .rp-steps { grid-template-columns: 1fr; gap: 28px; }
  .rp-step { padding: 0; }

  /* The rule between the steps was vertical because they stood side by
     side. Stacked, the same separation has to lie down with them. */
  .rp-step + .rp-step { border-left: 0; border-top: 1px solid var(--fw-line); padding-top: 28px; }

  /* Room is the scarce thing here, and the three section links are all
     reachable by scrolling. The trial button is not. */
  .rp-nav-links { display: none; }
  .rp-nav-links.rp-nav-essential { display: flex; gap: 14px; }
}

@media (max-width: 480px) {
  .rp-wrap { padding: 0 16px; }
  .rp-hero h1 { font-size: 29px; }
  .rp-hero-lede { font-size: 16px; }
  .rp-hero-actions .rp-btn-mint,
  .rp-hero-actions .rp-btn-outline { flex: 1 0 100%; }
  .rp-plan { padding: 24px 20px; }
}

@media (hover: hover) {
  .rp-nav-links a:not(.rp-btn-mint):hover { color: var(--fw-band-ink); }
  .rp-btn-mint:hover { background: color-mix(in srgb, var(--fw-on-band) 88%, white); border-color: color-mix(in srgb, var(--fw-on-band) 88%, white); }
  .rp-btn-outline:hover { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .06); }
  .rp-footer a:hover { color: var(--fw-ink); }
}

/* ── Legal pages ───────────────────────────────────────────────────────────
   Privacy, cookies, voorwaarden and the verwerkersovereenkomst. One narrow
   column of prose, because these pages are read top to bottom by somebody
   checking a specific thing — a supervisory authority, a contractor's
   accountant, a homeowner who clicked the footer — and the only layout that
   helps them is a measure short enough to scan and headings they can find.
*/
.rp-legal { max-width: 720px; margin: 0 auto; padding: 48px 24px 72px; }
.rp-legal h1 { font-size: 34px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.02em; }
.rp-legal .rp-legal-date { color: var(--fw-ink-soft); font-size: 14px; margin: 0 0 40px; }
.rp-legal h2 {
  font-size: 21px; line-height: 1.25; margin: 40px 0 12px;
  padding-top: 24px; border-top: 1px solid var(--fw-line);
  letter-spacing: -0.01em;
}
.rp-legal h3 { font-size: 16px; margin: 26px 0 8px; }
.rp-legal p, .rp-legal li { font-size: 15.5px; line-height: 1.65; color: var(--fw-ink-soft); }
.rp-legal li { margin-bottom: 6px; }
.rp-legal ul, .rp-legal ol { padding-left: 22px; margin: 12px 0; }
.rp-legal strong { color: var(--fw-ink); }
.rp-legal a { color: var(--fw-ink); }
.rp-legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.rp-legal th, .rp-legal td {
  text-align: left; vertical-align: top; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--fw-line); color: var(--fw-ink-soft);
}
.rp-legal th { color: var(--fw-ink); font-weight: 600; }

/* An unfilled blank, loud enough that it cannot go live unnoticed. */
.rp-todo {
  background: #fff3cd; color: #6b4e00; border-radius: 4px;
  padding: 1px 6px; font-weight: 600; white-space: nowrap;
}

@media (max-width: 640px) {
  .rp-legal { padding: 32px 16px 56px; }
  .rp-legal h1 { font-size: 27px; }
  .rp-legal table, .rp-legal thead, .rp-legal tbody, .rp-legal tr, .rp-legal th, .rp-legal td { display: block; }
  .rp-legal th { border-bottom: 0; padding-bottom: 2px; }
  .rp-legal td { padding-top: 0; }
}