/* RP design system — built by scripts/build-css.mjs. Edit the sources in design-system/, not this file. */

/*
 * RP design system — tokens.
 *
 * Components reference only --rp-* tokens. Colour and font tokens resolve through the
 * theme's site 1 variables — Rent Painters' current look, read from the live CSS on
 * 2026-10-01 — never through literal values. Tokens are scoped to .rp-section so they
 * cannot leak into the rest of the page. The fallbacks only matter if a theme variable
 * disappears: the colours are site 1's values, the neutrals were carried over from the
 * Rent Maids seed, and the display font is confirmed on the sandbox (Phase 1, Task 21).
 *
 *   --color-red-600   #af071b  brand: headings, links, buttons, list marks
 *   --color-red-800   #810008  brand dark: strong text, hover
 *   --color-red-100   #fee6dc  the tint band and boxes
 *   --color-peach-500 #fbae88  accent: decorative only (1.5:1 on the tint, too faint for a focus ring)
 *
 * Red text on the tint measures 6.1:1 (tests/tokens.test.mjs). If the sandbox shows the
 * tint reads poorly behind red, --rp-tint becomes a lighter mix of --color-red-100 — still
 * derived from the theme variable — and so does the band rule in base.css.
 */
.rp-section {
  /* Colour */
  --rp-brand: var(--color-red-600, #af071b);
  --rp-ink: var(--color-red-800, #810008);
  --rp-text: var(--color-base-content, #474747);
  --rp-muted: color-mix(in oklab, var(--rp-text) 75%, transparent);
  --rp-accent: var(--color-peach-500, #fbae88);
  --rp-tint: var(--color-red-100, #fee6dc);
  --rp-rule: var(--color-neutral-500, #d6d3c7);
  --rp-surface: #ffffff;
  --rp-on-brand: #ffffff;
  /* Boxes and panels: tinted on a white band, white on a tinted band */
  --rp-box: var(--rp-tint);

  /* Type */
  --rp-font-display: var(--font-bio-rhyme, BioRhyme), Georgia, serif;
  --rp-font-body: var(--font-open-sans, "Open Sans"), system-ui, sans-serif;

  /* Type scale — ratio ~1.25, fluid between 375px and 1280px viewports */
  --rp-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --rp-step-0: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  /* Running text: the theme's own paragraph size, so our copy matches untouched pages. */
  --rp-body: clamp(1rem, 1vw + 0.5rem, 1.25rem);
  --rp-step-1: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
  --rp-step-2: clamp(1.25rem, 1.15rem + 0.45vw, 1.5625rem);
  --rp-step-3: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --rp-leading-snug: 1.3;
  --rp-leading-body: 1.65;
  --rp-tracking-eyebrow: 0.12em;

  /* Spacing — one scale on a 4px base */
  --rp-space-1: 0.25rem;
  --rp-space-2: 0.5rem;
  --rp-space-3: 0.75rem;
  --rp-space-4: 1rem;
  --rp-space-6: 1.5rem;
  --rp-space-8: 2rem;
  --rp-space-12: 3rem;
  --rp-section-y: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  --rp-stack-xs: var(--rp-space-2);
  --rp-stack-sm: var(--rp-space-4);
  --rp-stack-md: var(--rp-space-6);
  --rp-stack-lg: var(--rp-space-12);
  --rp-gutter: clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);

  /* Layout */
  --rp-measure: 68ch;
  --rp-content: 72rem;
  --rp-narrow: 46rem;

  /* Shape */
  --rp-radius: 1rem;
  --rp-radius-sm: 0.375rem;
  --rp-border: 1px solid var(--rp-rule);
  --rp-border-width-thick: 1.5px;
  --rp-transparent: transparent;

  /* Motion */
  --rp-duration: 480ms;
  --rp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rp-stagger: 70ms;
  --rp-rise: 12px;
}

.rp-section[data-rp-band="tint"] { --rp-box: var(--rp-surface); }

.rp-section { --rp-icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--check { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--clock { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--shield-check { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--star { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--calendar { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--clipboard-check { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%2F%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--sparkle { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%205.4L19%2010l-5.2%201.6L12%2017l-1.8-5.4L5%2010l5.2-1.6z%22%2F%3E%3Cpath%20d%3D%22M19%203v4M17%205h4%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--home { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5%22%2F%3E%3Cpath%20d%3D%22M5%209v12h14V9%22%2F%3E%3Cpath%20d%3D%22M10%2021v-6h4v6%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--key { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%225.5%22%2F%3E%3Cpath%20d%3D%22m11.5%2011.5%209.5-9.5M17%206l3%203%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--droplet { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--bed { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204v16M2%208h18a2%202%200%200%201%202%202v10M2%2017h20M6%208v9%22%2F%3E%3C%2Fsvg%3E"); }
.rp-section .rp-icon--calculator { --rp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%206h8M8%2010h.01M12%2010h.01M16%2010h.01M8%2014h.01M12%2014h.01M16%2014h.01M8%2018h.01M12%2018h.01M16%2018h.01%22%2F%3E%3C%2Fsvg%3E"); }

/*
 * RP design system — primitives.
 *
 * Convention: every selector starts with .rp-section. That gives each rule at least
 * two-class specificity, which beats the theme's global element rules (it styles bare h2,
 * p and ul) and the reset below. Exceptions: the band rules, which paint the theme's own
 * wrapper, and the motion rules under .rp-motion.
 */

/* Bands paint the theme's full-width module wrapper. Needs the module's background_color
   empty so no inline background competes — see design-system/README.md, "Theme contract". */
.section-titletext:has(> .container .rp-section[data-rp-band="plain"]) { background-color: #ffffff; }
.section-titletext:has(> .container .rp-section[data-rp-band="tint"]) { background-color: var(--color-red-100, #fee6dc); }

/* Shell */
.rp-section {
  padding-block: var(--rp-section-y);
  font-family: var(--rp-font-body);
  font-size: var(--rp-step-0);
  line-height: var(--rp-leading-body);
  color: var(--rp-text);
}
.rp-section *,
.rp-section *::before,
.rp-section *::after { box-sizing: border-box; }

/* Undo the theme's global typography inside our sections only */
.rp-section :is(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, details, summary) {
  margin: 0;
  padding: 0;
}

.rp-section .rp-container { width: 100%; max-width: var(--rp-content); margin-inline: auto; }

/* Type */
.rp-section .rp-eyebrow {
  font-size: var(--rp-step--1);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--rp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rp-muted);
}
.rp-section .rp-h2 {
  font-family: var(--rp-font-display);
  font-size: var(--rp-step-3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--rp-brand);
  text-wrap: balance;
}
.rp-section .rp-lead { max-width: var(--rp-measure); font-size: var(--rp-step-1); line-height: 1.55; }
.rp-section .rp-lead > * + * { margin-top: var(--rp-stack-sm); }
.rp-section strong { font-weight: 600; color: var(--rp-ink); }

/* Section head */
.rp-section .rp-head { display: grid; gap: var(--rp-stack-sm); max-width: var(--rp-narrow); margin-bottom: var(--rp-stack-lg); }
.rp-section .rp-head--start { justify-items: start; text-align: left; }
.rp-section .rp-head--center { justify-items: center; margin-inline: auto; text-align: center; }

/* Running text */
.rp-section .rp-prose { max-width: var(--rp-measure); }
.rp-section .rp-prose > * + * { margin-top: var(--rp-stack-sm); }

/* Links */
.rp-section a:not(.rp-button),
.rp-section .rp-link {
  color: var(--rp-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 160ms var(--rp-ease), text-decoration-thickness 160ms var(--rp-ease);
}
.rp-section a:not(.rp-button):hover { color: var(--rp-ink); text-decoration-thickness: 2px; }

/* Lists — never browser defaults */
.rp-section .rp-list { display: grid; gap: var(--rp-space-2); list-style: none; }
/* The theme pads every list in a title_text module with
   `.section-titletext .container ul { padding-left: 72px }` (0,2,1), which outranks the
   reset above. Doubling the list class (0,3,0) wins without depending on load order. */
.rp-section .rp-list.rp-list { padding-left: 0; margin-inline: 0; margin-bottom: 0; }
/* margin-top is left to the flow rules (.rp-prose > * + *), so a lead-in line keeps its gap
   above the list while the items themselves sit tighter than paragraphs. */
.rp-section .rp-list > li { position: relative; padding-left: 1.6em; }
/* The theme sizes every bare <p> (0,0,1) and nothing else, so list items came out smaller
   than the paragraphs beside them. Both use the body token (0,1,1 and 0,2,1 win). */
.rp-section p,
.rp-section .rp-list > li { font-size: var(--rp-body); }
.rp-section .rp-list--check > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  top: calc((1lh - 0.95em) / 2); /* centred on the first line; 0.28em where lh is unsupported */
  width: 0.95em;
  height: 0.95em;
  background: var(--rp-brand);
  -webkit-mask: var(--rp-icon-check) center / contain no-repeat;
  mask: var(--rp-icon-check) center / contain no-repeat;
}
.rp-section .rp-list--numbered { counter-reset: rp-n; }
.rp-section .rp-list--numbered > li { padding-left: 2.2em; counter-increment: rp-n; }
.rp-section .rp-list--numbered > li::before {
  content: counter(rp-n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--rp-font-display);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  color: var(--rp-brand);
}
/* Auto columns: as many ~15rem columns as fit, reading down each column. */
.rp-section .rp-list--auto { display: block; columns: 15rem 2; column-gap: var(--rp-gutter); }
.rp-section .rp-list--auto > li { break-inside: avoid; }
.rp-section .rp-list--auto > li + li { margin-top: var(--rp-space-2); }
@media (min-width: 640px) {
  .rp-section .rp-list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rp-gutter); }
}

/* Buttons — pill-shaped, like the site's own "Get a quote" */
.rp-section .rp-button {
  display: inline-flex;
  align-items: center;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  background: var(--rp-brand);
  font-size: var(--rp-step-0);
  font-weight: 600;
  line-height: 1;
  color: var(--rp-on-brand);
  text-decoration: none;
  transition: background-color 200ms var(--rp-ease);
}
.rp-section .rp-button:hover { background: var(--rp-ink); color: var(--rp-on-brand); }
/* The lesser of two actions: outlined in the brand colour, filled on hover. */
.rp-section .rp-button--secondary { background: var(--rp-transparent); color: var(--rp-brand); box-shadow: inset 0 0 0 var(--rp-border-width-thick) currentColor; }
.rp-section .rp-button--secondary:hover { background: var(--rp-brand); color: var(--rp-on-brand); box-shadow: none; }

.rp-section a:focus-visible,
.rp-section summary:focus-visible {
  outline: 2px solid var(--rp-brand);
  outline-offset: 3px;
  border-radius: var(--rp-radius-sm);
}

/* Images — complete <img> markup from design-system/lib/media.mjs. The frame owns the
   shape (each pattern sets its aspect-ratio); the image covers it, so any photo fits. */
.rp-section .rp-frame { position: relative; overflow: hidden; border-radius: var(--rp-radius); background: var(--rp-box); }
.rp-section .rp-frame > .rp-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Icons — mask images generated from design-system/icons.mjs */
.rp-section .rp-icon {
  display: inline-block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  -webkit-mask: var(--rp-icon) center / contain no-repeat;
  mask: var(--rp-icon) center / contain no-repeat;
}

/* Motion. The hidden state exists only after motion.js has loaded and confirmed motion is
   allowed, so if the script fails, content is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .rp-motion .rp-section [data-rp-reveal] {
    opacity: 0;
    transform: translateY(var(--rp-rise));
    transition: opacity var(--rp-duration) var(--rp-ease), transform var(--rp-duration) var(--rp-ease);
    transition-delay: calc(var(--rp-i, 0) * var(--rp-stagger));
  }
  .rp-motion .rp-section [data-rp-reveal].is-revealed { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-section *,
  .rp-section *::before,
  .rp-section *::after { transition: none !important; animation: none !important; }
}
@media print {
  .rp-section [data-rp-reveal] { opacity: 1 !important; transform: none !important; }
}

/* accordion — BYQ wireframe faq-1: intro on the left, expandable items on the right. */
.rp-section .rp-accordion { display: grid; gap: var(--rp-stack-lg); }
.rp-section .rp-accordion__intro { display: grid; align-content: start; justify-items: start; gap: var(--rp-stack-sm); }
.rp-section .rp-accordion__intro .rp-button { margin-top: var(--rp-space-2); }
.rp-section .rp-accordion__list { border-top: var(--rp-border); }
.rp-section .rp-accordion__item { border-bottom: var(--rp-border); }
.rp-section .rp-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--rp-space-6);
  padding-block: var(--rp-space-6);
  list-style: none;
  cursor: pointer;
  font-family: var(--rp-font-display);
  font-size: var(--rp-step-1);
  line-height: var(--rp-leading-snug);
  color: var(--rp-ink);
}
.rp-section .rp-accordion__summary::-webkit-details-marker { display: none; }
.rp-section .rp-accordion__summary:hover { color: var(--rp-brand); }
.rp-section .rp-accordion__summary:focus-visible { outline: 2px solid var(--rp-brand); outline-offset: 2px; }
.rp-section .rp-accordion__icon {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3em;
  color: var(--rp-brand);
}
.rp-section .rp-accordion__icon::before,
.rp-section .rp-accordion__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.75px);
  height: 1.5px;
  background: currentColor;
  transition: transform 220ms var(--rp-ease);
}
.rp-section .rp-accordion__icon::after { transform: rotate(90deg); }
.rp-section .rp-accordion__item[open] .rp-accordion__icon::after { transform: rotate(0deg); }
.rp-section .rp-accordion__body { max-width: var(--rp-measure); padding-bottom: var(--rp-space-6); }
.rp-section .rp-accordion__body > * + * { margin-top: var(--rp-stack-sm); }

@media (min-width: 900px) {
  .rp-section .rp-accordion {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: calc(var(--rp-gutter) * 2);
    align-items: start;
  }
}

/* bento — BYQ wireframe value-and-features-56: soft rounded boxes on an even grid. */
.rp-section .rp-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rp-space-4);
}
.rp-section .rp-bento__box {
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-3);
  --rp-box-pad: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  padding: var(--rp-box-pad);
  overflow: hidden;
  border-radius: var(--rp-radius);
  background: var(--rp-box);
}
/* A box image runs edge to edge across the top of the box, whatever the photo's shape. */
.rp-section .rp-bento__figure {
  aspect-ratio: 16 / 10;
  margin: calc(-1 * var(--rp-box-pad)) calc(-1 * var(--rp-box-pad)) var(--rp-space-2);
  border-radius: 0;
}
.rp-section .rp-bento__box .rp-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--rp-space-2);
  color: var(--rp-brand);
}
.rp-section .rp-bento__title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-step-2);
  font-weight: 500;
  line-height: var(--rp-leading-snug);
  color: var(--rp-brand);
}
.rp-section .rp-bento__body > * + * { margin-top: var(--rp-stack-xs); }
.rp-section .rp-bento__link { margin-top: auto; padding-top: var(--rp-space-2); font-weight: 600; }

@media (min-width: 640px) {
  .rp-section .rp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-section .rp-bento__box--wide { grid-column: span 2; }
  /* Three boxes on two columns: the first spans the row, the others share the next. */
  .rp-section .rp-bento[data-rp-count="3"] > :first-child { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .rp-section .rp-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three boxes: one large beside two stacked, as in the wireframe. */
  .rp-section .rp-bento[data-rp-count="3"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .rp-section .rp-bento[data-rp-count="3"] > :first-child { grid-column: auto; grid-row: span 2; }
}

/* checklist — BYQ wireframe structured-data-3: one checked list, in one or two columns.
   The list styles themselves (.rp-list--check, .rp-list--cols-2) live in base.css. */
.rp-section .rp-checklist { display: grid; gap: var(--rp-stack-md); max-width: 56rem; }
.rp-section .rp-checklist--center { margin-inline: auto; }
/* Centred: the columns hug their content and sit centred under the heading, instead of
   two left-aligned columns spread across the band. */
.rp-section .rp-checklist--center .rp-list { justify-content: center; grid-template-columns: minmax(0, max-content); }
@media (min-width: 640px) {
  .rp-section .rp-checklist--center .rp-list--cols-2 {
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: calc(var(--rp-gutter) * 2);
  }
}
.rp-section .rp-checklist--center .rp-checklist__outro { margin-inline: auto; text-align: center; }

/* columns — BYQ wireframe value-and-features-48: two or three parallel blocks under a heading. */
.rp-section .rp-columns { display: grid; gap: var(--rp-stack-lg); }
.rp-section .rp-columns__item {
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-3);
  padding-top: var(--rp-space-6);
  border-top: var(--rp-border);
}
.rp-section .rp-columns__item .rp-icon { width: 1.75rem; height: 1.75rem; color: var(--rp-brand); }
.rp-section .rp-columns__title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-step-2);
  font-weight: 500;
  line-height: var(--rp-leading-snug);
  color: var(--rp-brand);
}
.rp-section .rp-columns__body > * + * { margin-top: var(--rp-stack-xs); }

@media (min-width: 768px) {
  .rp-section .rp-columns { column-gap: calc(var(--rp-gutter) * 1.5); }
  .rp-section .rp-columns[data-rp-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-section .rp-columns[data-rp-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* cta — BYQ wireframe cta-2, without its image: a centred heading, short text and buttons. */
.rp-section .rp-cta {
  display: grid;
  justify-items: center;
  gap: var(--rp-stack-md);
  max-width: var(--rp-narrow);
  margin-inline: auto;
  text-align: center;
}
.rp-section .rp-cta .rp-lead { margin-inline: auto; }
.rp-section .rp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rp-space-3);
  margin-top: var(--rp-space-2);
}

/* media — BYQ wireframe value-and-features-17: an image beside a heading and text.
   Stacks below 900px with the image first; side-by-side halves above it. */
.rp-section .rp-media { display: grid; gap: var(--rp-stack-lg); align-items: center; }
.rp-section .rp-media__figure { aspect-ratio: 4 / 3; }
.rp-section .rp-media__text { display: grid; justify-items: start; gap: var(--rp-stack-md); }
.rp-section .rp-media__text .rp-head { margin-bottom: 0; }

@media (min-width: 900px) {
  .rp-section .rp-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--rp-gutter) * 2);
  }
  .rp-section .rp-media__figure { aspect-ratio: 4 / 5; }
  .rp-section .rp-media--image-left .rp-media__figure { grid-column: 1; grid-row: 1; }
  .rp-section .rp-media--image-left .rp-media__text { grid-column: 2; grid-row: 1; }
  .rp-section .rp-media--image-right .rp-media__figure { grid-column: 2; grid-row: 1; }
  .rp-section .rp-media--image-right .rp-media__text { grid-column: 1; grid-row: 1; }
}

/* tabs — BYQ wireframe tabs-2: a segmented toggle over one content panel.
   Radio inputs drive it. The per-position rules below cover five tabs, the contract's maximum. */
.rp-section .rp-tabs { position: relative; display: grid; gap: var(--rp-space-4); }
.rp-section .rp-tabs__input { position: absolute; opacity: 0; pointer-events: none; }
.rp-section .rp-tabs__list {
  display: inline-flex;
  justify-self: start;
  max-width: 100%;
  gap: var(--rp-space-1);
  padding: var(--rp-space-1);
  overflow-x: auto;
  border-radius: 999px;
  background: var(--rp-box);
  scrollbar-width: none;
}
.rp-section .rp-tabs__tab {
  flex: none;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--rp-step-0);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--rp-text);
  transition: background-color 200ms var(--rp-ease), color 200ms var(--rp-ease);
}
.rp-section .rp-tabs__tab:hover { color: var(--rp-brand); }
.rp-section .rp-tabs__panel {
  display: none;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border-radius: var(--rp-radius);
  background: var(--rp-box);
}
.rp-section .rp-tabs__panel > * + * { margin-top: var(--rp-stack-sm); }

/* The visible panel */
.rp-section .rp-tabs__input:nth-of-type(1):checked ~ .rp-tabs__panels > :nth-child(1),
.rp-section .rp-tabs__input:nth-of-type(2):checked ~ .rp-tabs__panels > :nth-child(2),
.rp-section .rp-tabs__input:nth-of-type(3):checked ~ .rp-tabs__panels > :nth-child(3),
.rp-section .rp-tabs__input:nth-of-type(4):checked ~ .rp-tabs__panels > :nth-child(4),
.rp-section .rp-tabs__input:nth-of-type(5):checked ~ .rp-tabs__panels > :nth-child(5) { display: block; }

/* The active tab */
.rp-section .rp-tabs__input:nth-of-type(1):checked ~ .rp-tabs__list > :nth-child(1),
.rp-section .rp-tabs__input:nth-of-type(2):checked ~ .rp-tabs__list > :nth-child(2),
.rp-section .rp-tabs__input:nth-of-type(3):checked ~ .rp-tabs__list > :nth-child(3),
.rp-section .rp-tabs__input:nth-of-type(4):checked ~ .rp-tabs__list > :nth-child(4),
.rp-section .rp-tabs__input:nth-of-type(5):checked ~ .rp-tabs__list > :nth-child(5) {
  background: var(--rp-brand);
  color: var(--rp-on-brand);
}

/* Keyboard focus lands on the hidden radio; show it on its tab */
.rp-section .rp-tabs__input:nth-of-type(1):focus-visible ~ .rp-tabs__list > :nth-child(1),
.rp-section .rp-tabs__input:nth-of-type(2):focus-visible ~ .rp-tabs__list > :nth-child(2),
.rp-section .rp-tabs__input:nth-of-type(3):focus-visible ~ .rp-tabs__list > :nth-child(3),
.rp-section .rp-tabs__input:nth-of-type(4):focus-visible ~ .rp-tabs__list > :nth-child(4),
.rp-section .rp-tabs__input:nth-of-type(5):focus-visible ~ .rp-tabs__list > :nth-child(5) {
  outline: 2px solid var(--rp-brand);
  outline-offset: 2px;
}

/* Centred: the heading and the toggle centre; panel text stays left for easy reading. */
.rp-section .rp-tabs--center .rp-tabs__list { justify-self: center; }

/* text — BYQ wireframe intro-and-text-17: a contained heading and text block. */
.rp-section .rp-text { max-width: var(--rp-narrow); }
.rp-section .rp-text .rp-head { margin-bottom: var(--rp-stack-md); }
.rp-section .rp-text--left { margin-inline: 0; }
.rp-section .rp-text--center { margin-inline: auto; text-align: center; }
.rp-section .rp-text--center .rp-prose { margin-inline: auto; }
/* A list in centred text stays left-aligned, as a centred block. */
.rp-section .rp-text--center .rp-list { display: inline-grid; text-align: left; }

/* Split: heading on the left, prose on the right — the accordion's 5/7 columns, so the two
   read as one family. Stacks, left-aligned, below 900px. */
.rp-section .rp-text--split { max-width: none; }

/* Split with an image: the heading and the image share the left column. */
.rp-section .rp-text__aside { display: grid; align-content: start; gap: var(--rp-stack-md); margin-bottom: var(--rp-stack-md); }
.rp-section .rp-text__aside .rp-head { margin-bottom: 0; }
.rp-section .rp-text__figure { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .rp-section .rp-text--split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: calc(var(--rp-gutter) * 2);
    align-items: start;
  }
  .rp-section .rp-text--split .rp-head { margin-bottom: 0; }
  .rp-section .rp-text--split .rp-prose { max-width: var(--rp-measure); }
  .rp-section .rp-text__aside { margin-bottom: 0; }
  .rp-section .rp-text__figure { aspect-ratio: 4 / 5; }
}