/* UI "bold" (config/themes.py): playful and loud, but still the brand.
   Green blocks, amber marks, pill shapes, 2px outlines with a hard offset shadow, cream bands.
   Mobile first: 375px, then 768px and 1200px. Class names are prefixed bo- so nothing here
   collides with static/css/main.css (which this UI does not load). */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.70880e42f07b.woff2") format("woff2-variations"),
       url("../fonts/Satoshi-Variable.70880e42f07b.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-400.82dccf33188f.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-500.5b10ff4d624f.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  --bo-green: #0D4D3A;
  --bo-amber: #F5A623;
  --bo-ink: #1A1A1A;
  --bo-cream: #F5F0E8;
  --bo-sage: #F0F5F1;
  --bo-white: #FFFFFF;
  --bo-display: "Satoshi", "General Sans", Helvetica, Arial, sans-serif;
  --bo-body: "General Sans", Helvetica, Arial, sans-serif;
  --bo-shadow: 4px 4px 0 var(--bo-green);
  --bo-shadow-ink: 4px 4px 0 var(--bo-ink);
  --bo-shadow-amber: 6px 6px 0 var(--bo-amber);
  --bo-radius-lg: 24px;
  --bo-radius: 16px;
  --bo-pill: 999px;
  --bo-ul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M4 11 C 40 4, 72 15, 110 8 S 168 4, 196 10' fill='none' stroke='%23F5A623' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Nothing scrolls the page sideways on a phone, whatever hangs over the edge (the founder,
   2026-10-08: sideways scroll on the listing page outside incognito). clip, not hidden: it
   makes no scroll container, so position: sticky keeps working. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.bo-body {
  margin: 0;
  font-family: var(--bo-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bo-ink);
  background: var(--bo-white);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--bo-amber); color: var(--bo-ink); }
img, svg { max-width: 100%; }
a { color: var(--bo-green); }
:focus-visible { outline: 3px solid var(--bo-amber); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--bo-display); margin: 0; }
p { margin: 0 0 12px; }
section[id], div[id] { scroll-margin-top: 96px; }

.bo-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.bo-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--bo-amber); color: var(--bo-ink); padding: 10px 18px;
  border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); font-weight: 700;
}
.bo-skip:focus { top: 12px; }

.bo-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.bo-main { min-height: 50vh; }
.bo-page { padding: 28px 16px 64px; }
.bo-page--center { max-width: 600px; }
.bo-center { text-align: center; }
.bo-muted { opacity: 0.72; }
.bo-small { font-size: 13px; }
.bo-lead { font-size: 18px; line-height: 1.6; max-width: 740px; margin: 4px 0 32px; }
.bo-link-muted { color: var(--bo-green); font-weight: 500; }

/* Type */
.bo-h1 {
  font-size: clamp(32px, 7vw, 48px); font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere;
  line-height: 1.05; color: var(--bo-green); margin: 0 0 12px;
}
.bo-h2 {
  font-size: clamp(30px, 6.5vw, 46px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--bo-green); margin: 0 0 12px;
}
.bo-h2--sm { font-size: clamp(24px, 4.5vw, 30px); }
.bo-h3 { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--bo-ink); margin: 0 0 8px; }
.bo-eyebrow {
  display: inline-block; font-family: var(--bo-display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bo-green);
  border: 2px solid var(--bo-green); border-radius: var(--bo-pill); padding: 4px 12px; margin-bottom: 14px;
}
.bo-section__head { text-align: center; margin-bottom: 32px; }
.bo-section__head--left { text-align: left; }
.bo-section__head--row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; text-align: left; margin-bottom: 20px;
}
.bo-section__head--row .bo-h2, .bo-section__head--row .bo-h3 { margin-bottom: 0; }
.bo-section__sub { font-size: 17px; max-width: 640px; margin: 0 auto; }
.bo-section__head--left .bo-section__sub { margin: 0; }

/* The rough amber underline: an inline SVG stroke, drawn under key words. */
.bo-ul, .hero__headline-accent, .hv1-section-title span, .text-accent {
  background: var(--bo-ul) no-repeat left bottom / 100% 0.28em;
  padding-bottom: 0.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Sections and bands (cream may be a whole band in this UI; the page default stays white) */
.bo-section { padding: 56px 0; }
.bo-band { background: var(--bo-cream); }
.bo-band--page { background: var(--bo-cream); min-height: 60vh; }

/* ---------- 4. Buttons, pills, stickers, cards ---------- */
.bo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--bo-display); font-weight: 700; font-size: 15px; letter-spacing: -0.2px;
  line-height: 1.2; padding: 14px 28px; border-radius: var(--bo-pill);
  border: 2px solid var(--bo-ink); text-decoration: none; cursor: pointer;
  background: var(--bo-white); color: var(--bo-ink); box-shadow: var(--bo-shadow-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.bo-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bo-ink); }
.bo-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--bo-ink); }
.bo-btn--primary { background: var(--bo-amber); color: var(--bo-ink); }
.bo-btn--outline { background: var(--bo-white); color: var(--bo-green); border-color: var(--bo-green); box-shadow: var(--bo-shadow); }
.bo-btn--outline:hover { box-shadow: 6px 6px 0 var(--bo-green); }
.bo-btn--outline:active { box-shadow: 0 0 0 var(--bo-green); }
.bo-btn--ghost { background: transparent; color: var(--bo-white); border-color: var(--bo-white); box-shadow: 4px 4px 0 var(--bo-amber); }
.bo-btn--ghost:hover { box-shadow: 6px 6px 0 var(--bo-amber); }
.bo-btn--ghost:active { box-shadow: 0 0 0 var(--bo-amber); }
.bo-btn--ghost-green { background: transparent; color: var(--bo-green); border-color: var(--bo-green); box-shadow: none; }
.bo-btn--ghost-green:hover { box-shadow: var(--bo-shadow); }
.bo-btn--ghost-green:active { box-shadow: none; }
.bo-btn--sm { padding: 10px 18px; font-size: 14px; }
.bo-btn--xs { padding: 6px 14px; font-size: 13px; box-shadow: 2px 2px 0 currentColor; }
.bo-btn--lg { padding: 17px 34px; font-size: 17px; }
.bo-btn--block { display: flex; width: 100%; }
.bo-btn[hidden] { display: none; }
[hidden] { display: none !important; } /* an author display rule must never show what the markup hides (the reacted block showed both states, founder 2026-10-20) */

.bo-pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--bo-display);
  font-weight: 700; font-size: 14px; color: var(--bo-green); background: var(--bo-white);
  border: 2px solid var(--bo-green); border-radius: var(--bo-pill); padding: 8px 16px;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.bo-pill:hover, .bo-pill.is-active { background: var(--bo-green); color: var(--bo-white); }
.bo-pill small { font-size: 12px; font-weight: 500; opacity: 0.75; }
.bo-pill--static:hover { background: var(--bo-white); color: var(--bo-green); }
.bo-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
/* One swipeable row on the landing pages (M26.37, founder 2026-10-22: the cities "stacked on
   top of each other" on a phone): the pills never wrap; a cut-off pill at the edge says there
   is more, as the carousel under them does. */
.bo-pills--row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 6px; margin: 0 -6px 24px; }
.bo-pills--row::-webkit-scrollbar { display: none; }
.bo-pills--row .bo-pill { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
[data-landing-listings].is-loading .bo-carousel { opacity: 0.5; }
[data-landing-listings] .bo-carousel { transition: opacity 0.2s; }

.bo-sticker {
  display: inline-block; background: var(--bo-amber); color: var(--bo-ink);
  border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 6px 14px;
  font-family: var(--bo-display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--bo-ink);
}
.bo-sticker--tilt-l { transform: rotate(-6deg); }
.bo-sticker--tilt-r { transform: rotate(5deg); }
.bo-sticker--flat { text-transform: none; letter-spacing: 0; font-size: 14px; }
.bo-sticker--white { background: var(--bo-white); }
.bo-sticker--big { font-size: 26px; padding: 12px 22px; transform: rotate(-8deg); }

.bo-card {
  background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg);
  box-shadow: var(--bo-shadow); padding: 24px; position: relative;
}
.bo-card--cream { background: var(--bo-cream); }
.bo-card--green { background: var(--bo-green); color: var(--bo-white); box-shadow: var(--bo-shadow-amber); }
.bo-card--green .bo-h3 { color: var(--bo-white); }

.bo-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bo-ink);
  font-weight: 800; font-size: 13px; line-height: 1; color: var(--bo-ink); background: var(--bo-white);
}
.bo-mark--check { background: var(--bo-amber); }

.bo-checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.bo-checks li { position: relative; padding-left: 36px; font-size: 15px; line-height: 1.5; }
.bo-checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  border-radius: 50%; background: var(--bo-amber); border: 2px solid var(--bo-ink);
  font-weight: 800; font-size: 13px; line-height: 20px; text-align: center; color: var(--bo-ink);
}

.bo-reassure { display: block; font-size: 13px; line-height: 1.4; margin: 10px 0 0; opacity: 0.85; }
.bo-reassure--light { color: var(--bo-white); opacity: 0.9; }
.bo-fine { font-size: 12.5px; line-height: 1.5; opacity: 0.72; margin: 14px 0 0; }
.bo-fine a { color: inherit; }

.bo-alert {
  border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); padding: 12px 16px;
  margin: 12px 0; font-size: 14px; background: var(--bo-cream);
}
.bo-alert--error { background: #FFF0EA; }
.bo-alert--success { background: var(--bo-sage); }
.bo-alert--info { background: var(--bo-cream); }

/* A notice strip: one line of text and one action, quieter than a card (the account
   page's email switch, 2026-10-05). Stacks on phones, one row from 768px. */
.bo-notice {
  display: grid; gap: 10px; align-items: center; padding: 12px 16px; margin: 0 0 20px;
  background: var(--bo-sage); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius);
  font-size: 14px; line-height: 1.45;
}
.bo-notice__text { margin: 0; }
.bo-notice__text strong { color: var(--bo-green); }
.bo-notice .bo-btn { justify-self: start; white-space: nowrap; }
.bo-notice__link {
  justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--bo-green); text-decoration: underline; cursor: pointer;
}
@media (min-width: 768px) {
  .bo-notice { grid-template-columns: 1fr auto; }
}

.bo-doodle { display: block; max-width: 100%; height: auto; }

/* Forms */
.bo-field { display: grid; gap: 6px; margin-bottom: 14px; }
.bo-label {
  font-family: var(--bo-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bo-green);
}
.bo-input, .bo-select {
  width: 100%; font-family: var(--bo-body); font-size: 15px; color: var(--bo-ink);
  background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-pill);
  padding: 11px 18px; line-height: 1.3; min-width: 0;
}
.bo-input::placeholder { color: #7a7a7a; }
.bo-input:focus, .bo-select:focus { outline: 3px solid var(--bo-amber); outline-offset: 1px; }
/* A textarea is a box, not a pill: the pill's radius clipped a letter's lines (M26.22) */
textarea.bo-input { border-radius: var(--bo-radius); line-height: 1.5; }
.bo-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; font-family: var(--bo-display);
  font-weight: 700; color: var(--bo-green); border-color: var(--bo-green); cursor: pointer;
  background: var(--bo-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D4D3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
.bo-select--block { width: 100%; }
.bo-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-field__row--wrap { grid-template-columns: 1fr; }
/* The checkout's plan chooser (M22): two cards, a radio in each, the offer first */
.bo-choice { display: grid; gap: 10px; margin: 4px 0 18px; }
.bo-choice__card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--bo-ink); border-radius: 16px; background: #fff; cursor: pointer; position: relative; }
.bo-choice__card:has(input:checked) { background: var(--bo-sage); box-shadow: 0 0 0 2px var(--bo-green); }
.bo-choice__card input { width: 20px; height: 20px; flex-shrink: 0; margin: 4px 0 0; accent-color: var(--bo-green); }
.bo-choice__body { display: grid; gap: 4px; min-width: 0; }
.bo-choice__sticker { position: absolute; top: -12px; right: 12px; }
.bo-choice__title { font-weight: 700; }
.bo-choice__lead { font-size: 16px; }
.bo-choice__lead .bo-prices__amount { font-family: var(--bo-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--bo-green); letter-spacing: -0.02em; }
.bo-choice__line { font-size: 14px; line-height: 1.5; color: var(--bo-muted, #5C615C); }
.bo-choice__note { font-size: 14px; font-weight: 700; color: var(--bo-green); }
.bo-consent { margin: 12px 0; }
.bo-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.bo-consent input { width: 20px; height: 20px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--bo-green); }
.bo-pay { display: grid; gap: 10px; margin-top: 18px; }

/* Prices (D2: both stated alike) */
.bo-prices { display: grid; gap: 4px; margin: 12px 0 20px; }
.bo-prices__lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.bo-prices__lead .bo-prices__amount { font-family: var(--bo-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--bo-green); letter-spacing: -0.03em; }
/* A thin amber line under the trial price (founder, 2026-09-26: the thick band was too much) */
.bo-prices__mark { text-decoration-line: underline; text-decoration-color: var(--bo-amber); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.bo-prices__for { font-family: var(--bo-display); font-weight: 700; font-size: 20px; color: var(--bo-green); }
/* D2's floor: bold, never below body size, directly under the trial price */
.bo-prices__renewal { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--bo-ink); }
.bo-prices__renewal strong { font-family: var(--bo-display); font-weight: 800; font-size: 22px; color: var(--bo-green); }

/* ---------- 5. Header ---------- */
.bo-header {
  position: sticky; top: 0; z-index: 50; background: var(--bo-white);
  border-bottom: 4px solid var(--bo-green);
}
.bo-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 16px; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bo-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.bo-logo__icon { width: 40px; height: 40px; }
.bo-logo__word {
  font-family: var(--bo-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em;
  color: var(--bo-green); line-height: 1;
}
.bo-logo__accent { color: var(--bo-green); }
.bo-logo--big .bo-logo__icon { width: 52px; height: 52px; }
.bo-logo--big .bo-logo__word { font-size: 34px; }
.bo-nav { display: none; align-items: center; gap: 6px; }
.bo-nav__link {
  font-family: var(--bo-display); font-weight: 700; font-size: 16px; color: var(--bo-ink);
  text-decoration: none; padding: 10px 14px; border-radius: var(--bo-pill);
}
.bo-nav__link:hover { background: var(--bo-sage); color: var(--bo-green); }
/* The language switch shows the other language's flag (founder, 2026-09-26); its name is the
   link's accessible label. A flag is content, the one place blue appears. */
.bo-nav__lang, .bo-header__lang {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 2px solid var(--bo-green); border-radius: 50%; background: var(--bo-white); text-decoration: none;
}
.bo-nav__lang { margin: 0 8px; }
.bo-nav__lang img, .bo-header__lang img {
  width: 26px; height: 18px; object-fit: cover; border-radius: 3px; display: block;
  box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.2);
}
.bo-nav__lang:hover, .bo-header__lang:hover, .bo-header__lang:active { background: var(--bo-sage); }

.bo-header__phone { display: flex; align-items: center; gap: 10px; }
/* A visitor's header (D75, founder 2026-10-23): on a laptop the flag, the start of the
   onboarding and the login in a row; on a phone the flag and the menu that holds the two
   (the logged-in header's breakpoint, 1024 px). */
.bo-nav__login { min-height: 44px; display: inline-flex; align-items: center; }
.bo-nav--visitor .bo-nav__lang { margin: 0 4px 0 0; }
.bo-nav--visitor .bo-nav__cta { min-height: 44px; }
.bo-header__phone .bo-header__lang { width: 48px; height: 48px; }
.bo-menu { position: relative; }
.bo-menu__toggle {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 48px; height: 48px; padding: 0 10px; border: 2px solid var(--bo-ink);
  border-radius: var(--bo-pill); background: var(--bo-white); box-shadow: 2px 2px 0 var(--bo-ink);
}
.bo-menu__toggle::-webkit-details-marker { display: none; }
.bo-menu__bar { display: block; height: 3px; background: var(--bo-ink); border-radius: 2px; }
.bo-menu[open] .bo-menu__toggle { background: var(--bo-amber); }
/* The closed menu has no box at all: its panel was laid out off to the right while closed
   (about 500px wide), which real phone browsers can turn into a sideways scroll. */
.bo-menu:not([open]) .bo-menu__panel { display: none; }
.bo-menu__panel {
  position: fixed; left: 0; right: 0; top: 76px; background: var(--bo-white);
  border-bottom: 4px solid var(--bo-green); padding: 16px 16px 24px; display: grid; gap: 4px;
  box-shadow: 0 12px 0 rgba(13, 77, 58, 0.08); max-height: calc(100vh - 76px); overflow: auto;
}
.bo-menu__link {
  font-family: var(--bo-display); font-weight: 700; font-size: 22px; color: var(--bo-ink);
  text-decoration: none; padding: 12px 8px; border-bottom: 2px dotted rgba(13, 77, 58, 0.25);
}
.bo-menu__cta { margin-top: 16px; justify-content: center; }
.bo-menu__cta--second { margin-top: 10px; }

/* ---------- 6. Footer: cream top band, then green ---------- */
.bo-footer { margin-top: 0; }
.bo-footer__band { background: var(--bo-cream); border-top: 4px solid var(--bo-ink); padding: 40px 0; }
.bo-footer__band-inner { display: grid; gap: 24px; align-items: center; }
.bo-footer__tagline { font-family: var(--bo-display); font-weight: 600; font-size: 18px; color: var(--bo-green); margin: 12px 0 0; }
.bo-footer__cta .bo-reassure { max-width: 320px; }
.bo-footer__green { background: var(--bo-green); color: var(--bo-white); padding: 48px 0 24px; }
.bo-footer__cols { display: grid; gap: 32px; }
.bo-footer__heading {
  font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bo-amber); margin: 0 0 12px;
}
.bo-footer__link {
  display: block; color: var(--bo-white); text-decoration: none; font-family: var(--bo-display);
  font-weight: 600; font-size: 16px; padding: 5px 0; opacity: 0.92;
}
.bo-footer__link:hover { text-decoration: underline; text-decoration-color: var(--bo-amber); text-decoration-thickness: 3px; opacity: 1; }
.bo-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  border-top: 2px solid rgba(255, 255, 255, 0.2); margin-top: 40px; padding-top: 20px; font-size: 13px;
}
.bo-footer__bottom p { margin: 0; }
.bo-footer__langs a, .bo-footer__langs strong { color: var(--bo-white); margin-left: 12px; font-weight: 700; }
.bo-footer__langs strong { color: var(--bo-amber); }
.bo-footer__contact a { color: var(--bo-white); font-weight: 700; }
/* The review block (M26.16), off until a Trustpilot address is set */
.bo-trustpilot { margin: 12px 0; font-weight: 600; }

/* ---------- 7. Hero ---------- */
.bo-hero { background: var(--bo-green); color: var(--bo-white); padding: 48px 0 64px; overflow: hidden; }
.bo-hero__inner { display: grid; gap: 40px; align-items: center; }
.bo-hero__sticker { margin-bottom: 18px; }
/* The day's figure as the hero's sticker (founder, 2026-10-07): the number large, the label small */
.bo-hero__count { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 18px 8px 16px; box-shadow: 3px 3px 0 var(--bo-ink); }
.bo-hero__count-num { font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.bo-hero__count-label { font-size: 13px; }
.bo-hero__headline {
  font-size: clamp(42px, 11vw, 76px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98;
  color: var(--bo-white); margin: 0 0 20px;
}
.bo-hero__sub { font-family: var(--bo-display); font-weight: 700; font-size: clamp(24px, 6vw, 38px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 16px; }
.hero__subheadline-brand { color: var(--bo-amber); }
.hero__subheadline-dark { color: var(--bo-white); }
.bo-hero__stat { font-size: 17px; line-height: 1.55; opacity: 0.92; max-width: 520px; margin-bottom: 28px; }

.bo-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
.bo-hero__cta-primary { display: grid; }
.bo-hero__visual { position: relative; max-width: 400px; margin: 0 auto; width: 100%; }
.bo-phone { width: 100%; height: auto; display: block; }

/* ---------- 7c. The checkout's pay buttons while the payment is made (founder, 2026-10-09) ---------- */
.is-busy .bo-pay .bo-btn { pointer-events: none; }
.is-busy .bo-pay .bo-btn:not(.is-busy) { opacity: 0.5; }
.bo-btn.is-busy { position: relative; padding-left: 44px; }
.bo-btn.is-busy::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -9px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: bo-spin 0.8s linear infinite;
}
@keyframes bo-spin { to { transform: rotate(360deg); } }

/* The signup page's question before the account exists (founder, 2026-10-09): the address
   in a cream box, everything close together */
.bo-auth__confirm { display: grid; gap: 10px; }
.bo-auth__question { margin: 0; font-family: var(--bo-display); font-weight: 700; font-size: 20px; color: var(--bo-green); }
.bo-auth__email {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px;
  background: var(--bo-cream); border: 2px solid var(--bo-ink); border-radius: 16px; box-shadow: var(--bo-shadow-amber);
  font-family: var(--bo-display); font-size: 18px; word-break: break-all;
}
.bo-auth__email svg { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--bo-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-auth__why { margin: 0 0 6px; font-size: 14px; }
.bo-auth__confirm .bo-btn + .bo-btn { margin-top: -2px; }

/* The cookie settings page (founder, 2026-10-09): two choices, "Allow all" highlighted */
.bo-cookiepage { max-width: 560px; }
.bo-modal__card.bo-cookiepage { max-width: 520px; }
.bo-cookiepage__policy { margin: 12px 0 0; font-size: 13px; }
.bo-cookiepage__choices { display: grid; gap: 16px; margin: 20px 0 8px; }
.bo-cookiepage__choice { position: relative; padding: 20px; border: 2px solid var(--bo-ink); border-radius: 20px; background: var(--bo-white); }
.bo-cookiepage__choice p { margin: 4px 0 14px; font-size: 15px; }
.bo-cookiepage__choice--all { background: var(--bo-cream); box-shadow: var(--bo-shadow-amber); }

/* ---------- 8. Marquee ---------- */
.bo-marquee {
  overflow: hidden; background: var(--bo-white); border-top: 3px solid var(--bo-ink);
  border-bottom: 3px solid var(--bo-ink); padding: 12px 0;
}
.bo-marquee__track { display: flex; width: max-content; animation: bo-marquee 36s linear infinite; }
.bo-marquee:hover .bo-marquee__track { animation-play-state: paused; }
.bo-marquee__list { display: flex; list-style: none; margin: 0; padding: 0 0 0 40px; gap: 40px; }
.bo-marquee__list li { display: flex; align-items: center; gap: 40px; }
.bo-marquee__list a {
  font-family: var(--bo-display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--bo-green); text-decoration: none; white-space: nowrap;
}
.bo-marquee__list a:hover { text-decoration: underline; text-decoration-color: var(--bo-amber); text-decoration-thickness: 2px; }
.bo-marquee__star { color: var(--bo-amber); font-size: 18px; }
@keyframes bo-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .bo-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .bo-marquee__list[aria-hidden="true"] { display: none; }
}

/* ---------- 9. Offer ---------- */
.bo-offer__inner { display: grid; gap: 32px; align-items: center; }
.bo-offer__visual { position: relative; max-width: 380px; margin: 0 auto; width: 100%; }
.bo-doodle--jumping { width: 100%; }
.bo-offer__sticker { position: absolute; right: 8px; top: 12px; font-size: 16px; padding: 8px 18px; }
.bo-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bo-benefit { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 20px; }
.bo-benefit p { margin: 0; font-size: 15px; }
.bo-benefit__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--bo-sage);
  border: 2px solid var(--bo-ink); display: inline-flex; align-items: center; justify-content: center;
}
.bo-benefits--grid .bo-benefit { align-items: flex-start; }
.bo-benefit__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--bo-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 10. Reviews ---------- */
.bo-reviews__title { display: inline-flex; align-items: center; gap: 12px; }
.bo-reviews__heart { width: 40px; height: 40px; }
.bo-reviews__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 6px 16px;
  margin: 0 -6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bo-reviews__track::-webkit-scrollbar { display: none; }
.bo-review { flex: 0 0 calc(100% - 12px); scroll-snap-align: center; padding: 0 24px 28px; overflow: hidden; }
/* The photo is the card's top, edge to edge (founder, 2026-10-08: the only real faces on the page) */
.bo-review__photo { display: block; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 -24px 18px; border-bottom: 2px solid var(--bo-ink); }
.bo-review__photo--face { object-position: 50% 20%; }
.bo-reviews__real { margin: 6px 0 0; font-size: 14px; opacity: 0.8; }
.bo-review__stars { display: flex; gap: 2px; margin-bottom: 12px; }
.bo-review__stars svg { width: 20px; height: 20px; fill: var(--bo-amber); stroke: var(--bo-ink); stroke-width: 1.2; }
.bo-review__quote { margin: 0 0 14px; }
.bo-review__quote p { font-family: var(--bo-display); font-weight: 600; font-size: 19px; line-height: 1.35; margin: 0; color: var(--bo-ink); }
.bo-review__more { margin-top: 10px; }
.bo-review__more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--bo-green); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.bo-review__more summary::-webkit-details-marker { display: none; }
.bo-review__more[open] summary { margin-bottom: 8px; }
.bo-review__more p { font-family: var(--bo-body); font-weight: 400; font-size: 15px; line-height: 1.5; margin: 0; }
.bo-review__author { margin: 0; font-size: 14px; }
.bo-review__author span { opacity: 0.7; margin-left: 6px; }
.bo-dots { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.bo-dots__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bo-green); background: var(--bo-white); display: block; }
.bo-dots__dot.is-active { background: var(--bo-amber); }

/* ---------- 11. Comparison ---------- */
.bo-compare .bo-wrap { position: relative; }
.bo-compare__grid { display: grid; gap: 24px; align-items: stretch; }
.bo-compare__col { padding: 28px 24px; }
.bo-compare__col--bad { background: var(--bo-cream); }
.bo-compare__heading { font-size: 24px; margin-bottom: 16px; }
.bo-compare__logo { width: 40px; height: 40px; margin-bottom: 12px; }
.bo-compare__list { list-style: none; margin: 0; padding: 0; }
.bo-compare__list li {
  display: flex; gap: 12px; align-items: center; padding: 12px 0; font-size: 15px; line-height: 1.4;
  border-bottom: 2px dotted rgba(26, 26, 26, 0.2);
}
.bo-card--green .bo-compare__list li { border-bottom-color: rgba(255, 255, 255, 0.25); }
.bo-compare__list li:last-child { border-bottom: 0; }
.bo-compare__vs { justify-self: center; align-self: center; margin: -8px 0; z-index: 1; }
.bo-doodle--running { display: none; }

/* ---------- 12. Listings carousel ---------- */
.bo-carousel {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 6px 20px; margin: 0 -6px 16px; scrollbar-width: none;
}
.bo-carousel::-webkit-scrollbar { display: none; }
.bo-carousel__item { flex: 0 0 min(82%, 320px); scroll-snap-align: start; display: flex; }
.bo-carousel__item .bo-lcard { width: 100%; }

/* Listing card: outlined, hard shadow, price in a pill */
.bo-lcard {
  display: flex; flex-direction: column; background: var(--bo-white); color: var(--bo-ink);
  border: 2px solid var(--bo-ink); border-radius: 20px; box-shadow: var(--bo-shadow);
  text-decoration: none; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bo-lcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bo-green); }
.bo-lcard { position: relative; }
.bo-lcard__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
/* The heart (founder, 2026-10-09): over the photo on a card, beside the title on the page */
.bo-fav { margin: 0; }
.bo-fav--compact { position: absolute; top: 10px; right: 10px; z-index: 2; }
.bo-fav__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  background: var(--bo-white); color: var(--bo-ink); border: 2px solid var(--bo-ink); border-radius: var(--bo-pill);
  font-family: var(--bo-display); font-weight: 700; font-size: 14px; box-shadow: 2px 2px 0 var(--bo-ink);
}
.bo-fav--compact .bo-fav__btn { padding: 7px; border-radius: 50%; }
.bo-fav__btn svg { width: 20px; height: 20px; fill: none; stroke: var(--bo-ink); stroke-width: 2; stroke-linejoin: round; transition: transform 0.15s ease; }
.bo-fav__btn:hover svg { transform: scale(1.12); }
.bo-fav.is-saved .bo-fav__btn svg { fill: var(--bo-amber); stroke: var(--bo-ink); }
.bo-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bo-detail__head .bo-fav { flex-shrink: 0; margin-top: 6px; }
.bo-account__gone { margin: 32px 0 8px; }
.bo-account__gone-list { margin: 0; padding-left: 20px; }
.bo-account__gone-list li { margin: 6px 0; }
.bo-inline-form { display: inline; margin-left: 8px; }
.bo-link-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.bo-lcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--bo-sage); border-bottom: 2px solid var(--bo-ink); }
.bo-lcard__media { overflow: hidden; }
.bo-lcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-lcard__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bo-green); }
.bo-lcard__placeholder svg { width: 44px; height: 44px; }
.bo-lcard__price {
  position: absolute; left: 12px; bottom: 12px; background: var(--bo-green); color: var(--bo-white);
  border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 6px 14px;
  font-family: var(--bo-display); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums;
  box-shadow: 2px 2px 0 var(--bo-ink);
}
.bo-lcard__price small { font-size: 12px; font-weight: 500; opacity: 0.85; margin-left: 2px; }
.bo-lcard__body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.bo-lcard__city { font-family: var(--bo-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bo-green); opacity: 0.8; }
.bo-lcard__title {
  margin: 4px 0 0; font-family: var(--bo-display); font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--bo-green);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bo-lcard__desc { font-size: 14px; line-height: 1.5; margin: 6px 0 14px; opacity: 0.85; flex: 1; }
.bo-lcard__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bo-lcard__fact {
  background: var(--bo-sage); border: 1.5px solid var(--bo-green); border-radius: var(--bo-pill);
  padding: 3px 10px; font-size: 12px; font-weight: 500; color: var(--bo-green);
}
.bo-lcard__more { margin-left: auto; font-family: var(--bo-display); font-weight: 700; font-size: 13px; color: var(--bo-green); }

.bo-grid { display: grid; gap: 24px; }
.bo-empty { text-align: center; padding: 40px 24px; }
.bo-empty p { margin: 0; }

/* ---------- 13. Pricing ---------- */
.bo-pricing__inner { display: grid; gap: 32px; align-items: start; }
.bo-pricing__text .bo-section__sub { margin: 0 0 24px; }
.bo-doodle--sitting { width: min(100%, 300px); }
.bo-pricing__card { padding: 32px 24px 28px; }
.bo-pricing__sticker { position: absolute; top: -16px; right: 20px; }
.bo-pricing__card .bo-h3 { color: var(--bo-green); font-size: 24px; }
.bo-pricing__trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bo-pricing-page { display: grid; gap: 32px; align-items: start; }
.bo-pricing-page__aside { display: grid; gap: 24px; justify-items: center; }
.bo-doodle--loving { width: min(100%, 340px); }
.bo-stats { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 16px; }
.bo-stats--stack { width: 100%; margin: 0; }
.bo-stat { text-align: center; padding: 22px 16px; display: grid; gap: 4px; }
.bo-stat__num { font-family: var(--bo-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--bo-green); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bo-stat__label { font-size: 14px; font-weight: 500; }

/* ---------- 14. FAQ (the country's own partial, hv1-* classes) ---------- */
.bo-faq { position: relative; padding: 56px 0; }
.bo-faq .hv1-wrap { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.bo-faq .hv1-section-header { text-align: center; margin-bottom: 28px; }
.hv1-section-label {
  display: inline-block; font-family: var(--bo-display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bo-green);
  border: 2px solid var(--bo-green); border-radius: var(--bo-pill); padding: 4px 12px; margin-bottom: 14px;
}
.hv1-section-title {
  font-size: clamp(30px, 6.5vw, 46px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--bo-green); margin: 0 0 12px;
}
.hv1-faq-list { display: grid; gap: 14px; }
.hv1-faq-item { background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: 18px; box-shadow: var(--bo-shadow); }
.hv1-faq-q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer; padding: 18px 20px;
  font-family: var(--bo-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--bo-ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.hv1-faq-chevron { width: 24px; height: 24px; flex-shrink: 0; color: var(--bo-green); transition: transform 0.2s ease; }
.hv1-faq-item.is-open .hv1-faq-chevron { transform: rotate(180deg); }
.hv1-faq-a { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; }
.hv1-faq-a p { margin: 0; }
.bo-js .hv1-faq-item:not(.is-open) .hv1-faq-a { display: none; }
.bo-doodle--reading { display: none; }

/* ---------- 15. Mission (the country's partial; no founder card, founder 2026-10-05) ---------- */
.bo-founder__mission { max-width: 760px; }
.bo-founder__mission .hv1-wrap { padding: 0; }
.bo-founder__mission .hv1-section { padding: 0; }
.bo-founder__mission p { font-size: 17px; line-height: 1.6; }
.hv1-mission-values { display: grid; gap: 10px; margin-top: 20px; }
.hv1-mission-value { display: flex; align-items: center; gap: 12px; font-family: var(--bo-display); font-weight: 600; font-size: 16px; }
.hv1-mission-value svg {
  width: 26px; height: 26px; flex-shrink: 0; padding: 4px; border-radius: 50%;
  background: var(--bo-amber); border: 2px solid var(--bo-ink); color: var(--bo-ink);
}

/* ---------- 16. Social proof + support ---------- */
.bo-proof__cta { margin-bottom: 40px; }
.bo-proof__cta .bo-reassure { text-align: center; }
.bo-support { display: grid; gap: 20px; align-items: center; padding: 28px 24px; }
.bo-support__text p { margin-bottom: 10px; }
.bo-support__hours { margin: 4px 0 16px; }
.bo-support__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bo-doodle--coffee { width: min(100%, 240px); margin: 0 auto; }

/* ---------- The contact showcase on the landing pages (M26.63, D78) ---------- */
/* The listing on a phone with the contact card sliding up, on a green band (founder's pick) */
.bo-show { background: var(--bo-green); color: var(--bo-white); }
.bo-show .bo-h2 { color: var(--bo-white); }
.bo-show .bo-eyebrow { color: var(--bo-white); border-color: var(--bo-white); }
.bo-show__inner { display: grid; gap: 36px; align-items: center; }
.bo-show__sub { font-size: 17px; line-height: 1.6; margin: 0 0 20px; max-width: 540px; }
.bo-show .bo-checks { margin-bottom: 26px; }
.bo-show .bo-checks li { font-size: 16px; }
.bo-show__visual { position: relative; display: grid; place-items: center; padding: 18px 8px 28px; }
.bo-show__visual::before {
  content: ""; position: absolute; inset: 4% 2% 8%; background: var(--bo-sage);
  border: 2px solid var(--bo-ink); border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%; transform: rotate(-5deg);
}
/* the example card */
.bo-show__card {
  position: relative; width: min(100%, 380px); background: var(--bo-white); color: var(--bo-ink);
  border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow);
  padding: 24px 18px 18px; text-align: left;
}
.bo-show__sticker { position: absolute; top: -15px; right: 18px; }
.bo-show__card-title { font-family: var(--bo-display); font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--bo-green); margin: 0 0 14px; }
.bo-show__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bo-show__row {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center;
  padding: 9px 12px; background: var(--bo-sage); border-radius: 14px;
}
.bo-show__icon {
  grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bo-white); color: var(--bo-green); border: 1.5px solid rgba(13, 77, 58, 0.2);
}
.bo-show__label { font-size: 12px; line-height: 1.2; opacity: 0.7; }
.bo-show__value { font-weight: 700; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; transition: filter 0.9s ease; }
.bo-show__value--link { color: var(--bo-green); text-decoration: underline; text-underline-offset: 3px; }
.bo-show__row:nth-child(2) .bo-show__value { transition-delay: 0.35s; }
.bo-show__row:nth-child(3) .bo-show__value { transition-delay: 0.7s; }
/* armed by the script out of view, revealed in view (static/js/site.js) */
[data-bo-unblur].is-armed .bo-show__value { filter: blur(6px); }
[data-bo-unblur].is-armed.is-revealed .bo-show__value { filter: none; }
/* the phone */
.bo-show__phone {
  position: relative; width: min(100%, 300px); aspect-ratio: 300 / 560; background: var(--bo-white);
  border: 3px solid var(--bo-ink); border-radius: 42px; box-shadow: 8px 8px 0 var(--bo-ink); padding: 12px;
}
.bo-show__notch { position: absolute; top: 18px; left: 50%; width: 70px; height: 14px; margin-left: -35px; border-radius: 8px; background: var(--bo-ink); z-index: 2; }
.bo-show__screen { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: var(--bo-cream); color: var(--bo-ink); }
.bo-show__photo { position: relative; height: 40%; background: var(--bo-sage); }
.bo-show__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bo-show__heart {
  position: absolute; top: 34px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bo-white); color: var(--bo-green); border: 2px solid var(--bo-ink);
}
.bo-show__count {
  position: absolute; right: 12px; bottom: 10px; padding: 2px 9px; border-radius: var(--bo-pill);
  background: rgba(26, 26, 26, 0.72); color: var(--bo-white); font-size: 11px; font-weight: 600;
}
.bo-show__listing { padding: 14px 16px; }
.bo-show__price { margin: 0; font-family: var(--bo-display); font-weight: 800; font-size: 24px; color: var(--bo-green); }
.bo-show__price span { font-weight: 500; font-size: 13px; color: var(--bo-ink); opacity: 0.7; }
.bo-show__place { margin: 2px 0 12px; font-size: 13px; opacity: 0.8; }
.bo-show__tap {
  display: block; text-align: center; padding: 9px 0; border-radius: var(--bo-pill); background: var(--bo-amber);
  border: 2px solid var(--bo-ink); font-family: var(--bo-display); font-weight: 800; font-size: 14px;
}
.bo-show__screen .bo-show__card {
  position: absolute; left: 8px; right: 8px; bottom: 8px; width: auto; padding: 18px 12px 12px;
  border-radius: 22px; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bo-show__screen .bo-show__card-title { font-size: 15px; margin-bottom: 10px; }
.bo-show__screen .bo-show__row { grid-template-columns: 30px 1fr; padding: 7px 10px; }
.bo-show__screen .bo-show__icon { width: 30px; height: 30px; }
.bo-show__screen .bo-show__value { font-size: 12.5px; overflow-wrap: normal; white-space: nowrap; }
.bo-show__screen .bo-show__sticker { top: -13px; right: 12px; }
.bo-show__screen [data-bo-unblur].is-armed { transform: translateY(72%); }
.bo-show__screen [data-bo-unblur].is-armed.is-revealed { transform: none; }
@media (min-width: 768px) {
  .bo-show__inner { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-bo-unblur].is-armed .bo-show__value { filter: none; transition: none; }
  .bo-show__screen [data-bo-unblur].is-armed { transform: none; transition: none; }
}

/* ---------- 17. Final call to action ---------- */
.bo-final { padding-top: 24px; }
.bo-final__card {
  background: var(--bo-green); color: var(--bo-white); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow-amber); padding: 36px 24px;
  display: grid; gap: 24px; align-items: center;
}
.bo-doodle--unboxing {
  width: 200px; height: 200px; object-fit: contain; background: var(--bo-cream);
  border: 2px solid var(--bo-ink); border-radius: 50%; padding: 12px; margin: 0 auto;
}
.bo-final__title { color: var(--bo-white); }
.bo-final__sub { font-size: 17px; opacity: 0.92; margin-bottom: 24px; }
.bo-final__ctas { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
@media (min-width: 768px) {
  /* Founder, 2026-09-26: the two buttons side by side, the reassurance directly under the
     payment button, not holding the second button 57 px away. */
  .bo-final__ctas { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 10px 16px; }
  .bo-final__ctas > div { display: contents; }
  .bo-final__ctas .bo-reassure { grid-row: 2; grid-column: 1 / -1; margin: 0; }
}

/* ---------- 18. Search ---------- */
.bo-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 16px; opacity: 0.85; }
.bo-crumbs a { color: var(--bo-green); font-weight: 500; }
.bo-search__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.bo-search__head .bo-h1 { margin: 0; }
.bo-search__layout { display: grid; gap: 24px; align-items: start; }
.bo-filters { display: block; }
.bo-filters__toggle { list-style: none; cursor: pointer; display: inline-block; }
.bo-filters__toggle::-webkit-details-marker { display: none; }
.bo-filters__toggle svg { width: 16px; height: 16px; }
.bo-filters__panel {
  background: var(--bo-cream); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg);
  box-shadow: var(--bo-shadow); padding: 20px; margin-top: 14px;
}
.bo-filters__actions { display: grid; gap: 10px; margin-top: 6px; }
.bo-sortbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.bo-sortbar__field { display: block; }
.bo-sortbar .bo-select { width: auto; }
.bo-save {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--bo-sage);
  border: 2px solid var(--bo-ink); border-radius: 20px; padding: 12px 16px; margin-bottom: 24px;
}
.bo-save__icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--bo-amber); border: 2px solid var(--bo-ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bo-save__icon svg { width: 20px; height: 20px; }
.bo-save__form { display: contents; }
.bo-save__text { flex: 1 1 200px; font-size: 14px; font-weight: 500; }
.bo-save.is-saved { background: var(--bo-sage); }
.bo-save.is-saved .bo-save__text { font-weight: 700; color: var(--bo-green); }
.bo-save.is-empty .bo-save__text { font-weight: 700; }
.bo-save [data-bo-save-button][aria-disabled="true"] { cursor: default; }
.bo-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.bo-pagination__link {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: 2px solid var(--bo-green); border-radius: var(--bo-pill); color: var(--bo-green);
  font-family: var(--bo-display); font-weight: 700; text-decoration: none; background: var(--bo-white);
}
.bo-pagination__link.is-current { background: var(--bo-green); color: var(--bo-white); }
a.bo-pagination__link:hover { background: var(--bo-sage); }

/* ---------- 19. Listing page ---------- */
.bo-gallery { position: relative; display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
.bo-gallery__item {
  display: block; border: 2px solid var(--bo-ink); border-radius: 16px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--bo-sage);
}
.bo-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-gallery__item--main { grid-column: 1 / -1; border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow); }
.bo-gallery--single .bo-gallery__item--main { max-height: 520px; }
.bo-gallery__sticker { position: absolute; top: 14px; left: 14px; z-index: 1; }
.bo-gallery__item { position: relative; }
.bo-gallery__item--locked { padding: 0; cursor: pointer; font: inherit; color: var(--bo-white); background: var(--bo-green); }
.bo-gallery__item--locked img { filter: blur(10px) saturate(0.8); transform: scale(1.1); opacity: 0.7; }
.bo-gallery__lock {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 8px; font-family: var(--bo-display); font-size: 14px; line-height: 1.2;
}
.bo-gallery__lock strong { font-weight: 800; }
.bo-gallery__lock span { font-weight: 700; }
.bo-gallery__item--locked:focus-visible { outline: 3px solid var(--bo-amber); outline-offset: 2px; }
.bo-gallery__lock span { display: none; }
.bo-gallery__lock strong { font-size: 18px; }
.bo-gallery__unlock {
  display: block; width: 100%; margin-top: 10px; padding: 12px 16px; border: 2px solid var(--bo-ink);
  border-radius: var(--bo-pill); background: var(--bo-cream); color: var(--bo-green); cursor: pointer;
  font-family: var(--bo-display); font-weight: 700; font-size: 15px; min-height: 44px;
}
@media (min-width: 768px) {
  .bo-gallery__lock span { display: inline; }
  .bo-gallery__lock strong { font-size: 26px; }
  .bo-gallery__unlock { display: none; }
}
.bo-gallery__more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(26, 26, 26, 0.55); color: var(--bo-white);
  font-family: var(--bo-display); font-weight: 800; font-size: 24px;
}

/* Photo viewer: a <dialog> opened by static/js/site.js; closed and inert without it */
.bo-viewer {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh;
  max-width: 100vw; max-height: 100vh; max-height: 100dvh;
  background: var(--bo-ink); color: var(--bo-white);
}
.bo-viewer::backdrop { background: rgba(26, 26, 26, 0.92); }
.bo-viewer[open] { display: flex; flex-direction: column; }
.bo-viewer__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.bo-viewer__counter { font-family: var(--bo-display); font-weight: 700; font-size: 15px; }
.bo-viewer__close, .bo-viewer__nav {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid var(--bo-white); background: rgba(26, 26, 26, 0.6); color: var(--bo-white);
  cursor: pointer; line-height: 1;
}
.bo-viewer__close { width: 40px; height: 40px; font-size: 24px; }
.bo-viewer__stage {
  position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.bo-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bo-viewer__img.is-loading { opacity: 0; }
.bo-viewer__stage:has(.is-loading)::after {
  content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: var(--bo-amber); animation: bo-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .bo-viewer__stage:has(.is-loading)::after { animation: none; } }
.bo-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 30px; padding-bottom: 4px; }
.bo-viewer__nav--prev { left: 8px; }
.bo-viewer__nav--next { right: 8px; }
.bo-viewer__strip { display: flex; gap: 8px; padding: 10px 16px 14px; overflow-x: auto; scrollbar-width: thin; }
.bo-viewer__thumb {
  flex: 0 0 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; background: none; cursor: pointer; opacity: 0.55;
}
.bo-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-viewer__thumb[aria-current="true"] { border-color: var(--bo-amber); opacity: 1; }
.bo-viewer__close:focus-visible, .bo-viewer__nav:focus-visible, .bo-viewer__thumb:focus-visible {
  outline: 3px solid var(--bo-amber); outline-offset: 2px;
}
body:has(.bo-viewer[open]) { overflow: hidden; }
@media (min-width: 768px) {
  .bo-viewer__nav--prev { left: 20px; }
  .bo-viewer__nav--next { right: 20px; }
  .bo-viewer__thumb { flex-basis: 96px; height: 72px; }
}
.bo-gallery--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 220px; border: 2px dashed var(--bo-ink); border-radius: var(--bo-radius-lg);
  background: var(--bo-cream); color: var(--bo-green);
}
.bo-detail { display: grid; gap: 32px; margin-top: 28px; }
.bo-detail__title { margin-bottom: 4px; }
.bo-detail__address { font-size: 16px; opacity: 0.75; margin-bottom: 16px; }
.bo-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.bo-fact {
  display: inline-flex; align-items: baseline; gap: 4px; background: var(--bo-white);
  border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 8px 16px;
  font-family: var(--bo-display); font-weight: 700; font-size: 15px;
}
.bo-fact--price { background: var(--bo-green); color: var(--bo-white); box-shadow: 2px 2px 0 var(--bo-ink); }
.bo-fact small { font-size: 12px; font-weight: 500; }
.bo-detail__section { margin-top: 32px; }
.bo-prose { font-size: 16px; line-height: 1.7; white-space: pre-line; }
.bo-paywall { position: relative; margin-top: 8px; }
.bo-paywall__blur { filter: blur(5px); user-select: none; opacity: 0.55; pointer-events: none; }
.bo-paywall__bars { display: grid; gap: 12px; padding: 4px 0 24px; }
.bo-paywall__bars span { display: block; height: 14px; border-radius: 7px; background: rgba(26, 26, 26, 0.45); }
.bo-paywall__bars span:nth-child(2) { width: 94%; }
.bo-paywall__bars span:nth-child(3) { width: 88%; }
.bo-paywall__bars span:nth-child(4) { width: 58%; }
.bo-paywall__cta { text-align: center; margin-top: -32px; padding: 28px 24px; }
.bo-paywall__cta p { max-width: 420px; margin-left: auto; margin-right: auto; }
.bo-features { margin: 0; display: grid; }
.bo-features__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 2px dotted rgba(26, 26, 26, 0.25); }
.bo-features__row dt { font-weight: 500; opacity: 0.75; }
.bo-features__row dd { margin: 0; font-family: var(--bo-display); font-weight: 700; text-align: right; }
.bo-price-card { padding: 28px 24px; }
.bo-price-card__amount { font-family: var(--bo-display); font-weight: 800; font-size: 42px; line-height: 1; color: var(--bo-green); letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.bo-price-card__period { font-size: 14px; opacity: 0.75; margin-bottom: 16px; }
.bo-price-card__list { list-style: none; margin: 0 0 20px; padding: 0; }
.bo-price-card__list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(26, 26, 26, 0.3); font-size: 15px; }
.bo-price-card__list li span:last-child { font-weight: 500; }
.bo-contact {
  background: var(--bo-green); color: var(--bo-white); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow-amber); padding: 32px 24px;
  margin-top: 48px; display: grid; gap: 20px; align-items: center;
}
.bo-contact__title { color: var(--bo-white); }
.bo-contact__text p { margin: 0; font-size: 16px; opacity: 0.92; }
/* The landlord's contact block in the price card, blurred for everyone (M26.62, after
   huurstunt.nl); placeholder text under the blur */
.bo-reach {
  margin: 0 0 20px; padding: 14px 14px 12px; background: var(--bo-sage);
  border: 1.5px solid rgba(13, 77, 58, 0.16); border-radius: var(--bo-radius);
}
.bo-reach__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.bo-reach__title { margin: 0; font-family: var(--bo-display); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--bo-green); }
.bo-reach__lock { flex: none; color: var(--bo-green); }
.bo-reach__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bo-reach__row {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center;
  padding: 7px 10px; background: var(--bo-white); border-radius: 12px;
}
.bo-reach__icon {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(13, 77, 58, 0.08); color: var(--bo-green);
}
.bo-reach__label { font-size: 12px; line-height: 1.2; opacity: 0.7; }
.bo-reach__value {
  font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--bo-ink);
  filter: blur(5px); user-select: none; pointer-events: none; white-space: nowrap; overflow: hidden;
}
.bo-reach__note { margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--bo-green); }
/* The subscriber's card behind Contact (M26.61) */
.bo-contact-card { margin: 0 0 20px; display: grid; gap: 10px; }
.bo-contact-card__row { display: grid; gap: 2px; padding: 10px 14px; background: var(--bo-sage); border-radius: 12px; }
.bo-contact-card__row dt { font-size: 13px; opacity: 0.75; }
.bo-contact-card__row dd { margin: 0; font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.bo-contact-card__row a { color: var(--bo-green); text-decoration: underline; text-underline-offset: 3px; }
.bo-dialog .bo-contact-card__small { margin: 14px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(26, 26, 26, 0.62); }
.bo-contact-card__small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bo-contact-card__close { font-size: 17px; padding-top: 14px; padding-bottom: 14px; }
.bo-related { margin-top: 64px; }

/* ---------- 20. City page ---------- */
.bo-cityhero { background: var(--bo-green); color: var(--bo-white); padding: 44px 0 52px; }
.bo-cityhero__inner { display: grid; gap: 24px; align-items: center; }
.bo-cityhero__title { font-size: clamp(36px, 9vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--bo-white); margin: 0 0 18px; }
.bo-cityhero__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.bo-othercities { margin-top: 56px; }

/* ---------- 21. Static and legal pages ---------- */
.bo-static { max-width: 820px; margin: 0 auto; padding: 32px 22px; }
.bo-static h1 { font-size: clamp(32px, 7vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--bo-green); margin: 0 0 16px;  overflow-wrap: anywhere; }
.bo-static h2 { font-size: 24px; font-weight: 700; color: var(--bo-green); margin: 32px 0 10px; }
.bo-static h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.bo-static p, .bo-static li { font-size: 16px; line-height: 1.7; }
.bo-static .lead { font-family: var(--bo-display); font-weight: 600; font-size: 20px; line-height: 1.45; color: var(--bo-ink); }
.bo-static ul, .bo-static ol { padding-left: 22px; }
.bo-static li { margin-bottom: 8px; }
.bo-static a { color: var(--bo-green); font-weight: 500; }
.bo-static .text-muted { opacity: 0.7; font-size: 14px; }
.bo-static .company-block, .bo-static address { font-style: normal; background: var(--bo-cream); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); padding: 16px 20px; line-height: 1.7; display: inline-block; }
.bo-static table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto; }
.bo-static th, .bo-static td { text-align: left; padding: 8px 10px; border-bottom: 1px dashed rgba(26, 26, 26, 0.3); }
/* The cancellation page's two routes (M26.15) */
.bo-static .bo-cancel-route { background: var(--bo-sage); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); padding: 18px 20px; margin: 16px 0; }
.bo-static .bo-cancel-route h3 { margin-top: 0; }
.bo-static .bo-cancel-route__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 22. Account, sign-up, checkout ---------- */
.bo-auth { padding: 32px 22px; }
.bo-auth .bo-h1 { margin-top: 0; }
.bo-auth__sticker { position: absolute; top: -16px; right: 20px; }
.bo-auth__foot { margin-top: 20px; }
.bo-checkout { max-width: 640px; margin: 0 auto; padding: 32px 22px; }
.bo-checkout__sticker { position: absolute; top: -16px; right: 20px; }
.bo-account__head { margin-bottom: 20px; }
.bo-account__head p { margin: 0; }
.bo-account__grid { display: grid; gap: 24px; align-items: start; }
.bo-account__side { display: grid; gap: 24px; }
.bo-account__card { padding: 26px 22px; }
.bo-account__card .bo-h3 { color: var(--bo-green); font-size: 22px; }
/* Without an active subscription the offer comes first (founder, 2026-10-10) */
.bo-account__grid--offer .bo-account__subscription { order: -1; }
.bo-account__main { display: grid; gap: 24px; }
.bo-account__card--small { padding: 18px 22px; }
.bo-account__card--small .bo-h3 { font-size: 18px; }
.bo-account__emails { margin-top: 24px; }
.bo-account__note { margin-top: 20px; }  /* room between a button and the line after it (founder, 2026-10-10) */
.bo-account__confirm { border-color: var(--bo-amber); margin-bottom: 24px; }
.bo-account__confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.bo-account__cancel { margin-top: 18px; }
.bo-account__logout { margin-top: 32px; }
.bo-status {
  display: inline-block; font-family: var(--bo-display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid var(--bo-ink);
  border-radius: var(--bo-pill); padding: 5px 14px; margin: 4px 0 12px; background: var(--bo-white);
}
.bo-status--on { background: var(--bo-amber); }
.bo-status--free { background: var(--bo-sage); }
.bo-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bo-table td { padding: 8px 4px; border-bottom: 1px dashed rgba(26, 26, 26, 0.3); }
.bo-table td:nth-child(2) { font-family: var(--bo-display); font-weight: 700; }
.bo-table th { text-align: left; font-size: 13px; font-weight: 600; padding: 4px; color: rgba(26, 26, 26, 0.7); }
.bo-payments td:last-child { text-align: right; }
/* The billing page's plan card (M26.18; the Phase 3 doc, section 7): one dominant green block,
   the price per month the one big number, the date small beneath, the cancel entry a ghost
   in amber text with no fill */
.bo-plan-card {
  background: var(--bo-green); color: var(--bo-white); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow-amber); padding: 24px 22px;
}
.bo-plan-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bo-plan-card__period { font-family: var(--bo-display); font-weight: 700; font-size: 22px; margin: 0; color: var(--bo-white); }
.bo-plan-card__head .bo-status { margin: 0 0 0 auto; color: var(--bo-ink); }  /* dark text on the light pill, also "Opgezegd" on white */
.bo-plan-card__price { margin: 18px 0 2px; font-size: 16px; }
.bo-plan-card__price strong { font-family: var(--bo-display); font-weight: 700; font-size: 52px; letter-spacing: -1.5px; line-height: 1; margin-right: 6px; }
.bo-plan-card__total { margin: 0; font-size: 15px; opacity: 0.85; }
.bo-plan-card__date { margin: 14px 0 0; font-size: 14px; }
.bo-plan-card__body { font-size: 15px; }
.bo-plan-card__body p { margin: 12px 0 0; }
.bo-plan-card__act { margin-top: 20px; }
.bo-plan-card .bo-reassure { color: var(--bo-white); opacity: 0.85; }
.bo-btn--ghost-amber { background: transparent; color: var(--bo-amber); border-color: var(--bo-amber); box-shadow: none; }
.bo-btn--ghost-amber:hover { box-shadow: 4px 4px 0 var(--bo-amber); }
.bo-btn--ghost-amber:active { box-shadow: none; }
/* The 14-day guarantee's countdown above the card (M26.18) */
.bo-guarantee {
  background: var(--bo-sage); border: 2px solid var(--bo-green); border-radius: var(--bo-radius);
  padding: 12px 18px; margin-bottom: 24px; font-size: 16px;
}
.bo-guarantee p { margin: 0; }
/* The dashboard's tiles (M26.20): the account's own numbers, five small cards, then the week */
.bo-tiles { margin-bottom: 24px; }
.bo-tiles__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.bo-tiles__item { background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); padding: 12px 14px; }
.bo-tiles__item dt { font-size: 13px; color: rgba(26, 26, 26, 0.7); }
.bo-tiles__item dd { margin: 4px 0 0; font-family: var(--bo-display); font-weight: 700; font-size: 22px; color: var(--bo-green); }
.bo-tiles__item:last-child { grid-column: 1 / -1; }
.bo-tiles__week { margin: 14px 0 0; background: var(--bo-sage); border-radius: var(--bo-radius); padding: 12px 16px; font-size: 15px; }
@media (min-width: 768px) {
  .bo-tiles__list { grid-template-columns: repeat(5, 1fr); }
  .bo-tiles__item:last-child { grid-column: auto; }
}
/* The listing page's letter, reaction state and dialogs (M26.21, after rentbird's match page) */
.bo-letter { margin: 0 0 12px; }
.bo-letter__button { list-style: none; cursor: pointer; }
.bo-letter__button::-webkit-details-marker { display: none; }
.bo-letter__button.is-copied { background: var(--bo-sage); }
.bo-letter__hint { margin: 10px 0 6px; }
.bo-letter__text { width: 100%; font-size: 14px; line-height: 1.5; resize: vertical; }
.bo-reacted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 16px; padding: 10px 14px; border: 2px dashed var(--bo-ink); border-radius: var(--bo-radius); font-size: 14px; }
.bo-reacted--on { border-style: solid; background: var(--bo-sage); }
.bo-reacted__text { font-family: var(--bo-display); font-weight: 700; }
.bo-reacted--on .bo-reacted__text { color: var(--bo-green); }
.bo-reacted--on .bo-reacted__text::before { content: "✓ "; }
.bo-price-card__more { margin-top: 10px; }
.bo-plans__terms { margin: 10px 0 0; }
.bo-lcard__reacted {
  position: absolute; left: 10px; top: 10px; z-index: 2; background: var(--bo-sage); color: var(--bo-ink);
  border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 4px 10px;
  font-family: var(--bo-display); font-weight: 700; font-size: 12px; box-shadow: 2px 2px 0 var(--bo-ink);
}
.bo-dialog p { margin: 0 0 14px; }
.bo-dialog__check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; font-size: 15px; }
.bo-dialog__check input { margin-top: 4px; }
.bo-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.bo-tabs__link {
  font-family: var(--bo-display); font-weight: 700; font-size: 14px; color: var(--bo-green);
  background: var(--bo-white); border: 2px solid var(--bo-green); border-radius: var(--bo-pill); padding: 8px 16px; text-decoration: none;
}
.bo-tabs__link.is-active { background: var(--bo-green); color: var(--bo-white); }
.bo-account__links { display: flex; flex-wrap: wrap; gap: 8px; }
/* Report this listing (2026-10-20) */
.bo-report { margin: 14px 0 0; }
.bo-report__open { cursor: pointer; list-style: none; width: 100%; justify-content: center; }
.bo-report__open::-webkit-details-marker { display: none; }
.bo-report__form { margin: 12px 0 0; padding: 14px 16px; border: 2px dashed var(--bo-ink); border-radius: var(--bo-radius); display: grid; gap: 10px; text-align: left; }
.bo-report__reasons { display: grid; gap: 6px; }
.bo-report__reason { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.bo-report__reason input { margin-top: 4px; }
.bo-report__done { margin: 0; }
.bo-report__mark { font-weight: 600; color: var(--bo-green); }
.bo-report__mark::before { content: "✓ "; }
.bo-report__result { margin: 0; font-weight: 600; color: var(--bo-green); }
/* Behind a flag, off (M26.27): the discount pop-up */
.bo-discount { text-align: left; }
.bo-discount__sticker { margin: 0 0 10px; }
.bo-discount__title { padding-right: 44px; }
.bo-discount__result { margin: 10px 0 0; font-weight: 700; color: var(--bo-green); }
/* The tip bubble (M26.26, after rentbird's "Tips van Kim"): the bubble, its tail, the portrait slot */
.bo-tip { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 20px 0; }
.bo-tip__bubble {
  position: relative; background: var(--bo-cream); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius);
  padding: 14px 16px; font-size: 14px; line-height: 1.5;
}
.bo-tip__bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -12px; width: 20px; height: 20px; background: var(--bo-cream);
  border-right: 2px solid var(--bo-ink); border-bottom: 2px solid var(--bo-ink); transform: rotate(45deg);
}
.bo-tip__name { margin: 0 0 6px; font-family: var(--bo-display); font-weight: 700; color: var(--bo-green); font-size: 14px; }
.bo-tip__list { margin: 0; padding-left: 18px; }
.bo-tip__list li + li { margin-top: 4px; }
/* The portrait: 112 px, a white ring on the ink line, a little tilt, an amber key badge (founder, 2026-10-21: bigger and more interesting) */
.bo-tip__portrait { position: relative; display: inline-block; width: 112px; height: 112px; margin: 12px 0 6px 10px; transform: rotate(-3deg); }
.bo-tip__face { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 3px solid var(--bo-white); outline: 2px solid var(--bo-ink); border-radius: 50%; background: var(--bo-sage); overflow: hidden; box-shadow: 3px 3px 0 var(--bo-ink); }
.bo-tip__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.bo-tip__badge { position: absolute; right: -8px; bottom: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--bo-amber); border: 2px solid var(--bo-ink); box-shadow: 2px 2px 0 var(--bo-ink); display: grid; place-content: center; transform: rotate(10deg); color: var(--bo-ink); }
.bo-tip__badge svg { width: 18px; height: 18px; display: block; }
.bo-tip--compact { margin: 16px 0 0; }
.bo-tip--compact .bo-tip__bubble { font-size: 13px; padding: 12px 14px; }
/* The soft filters per search (M26.24) */
.bo-saved__options { margin: 8px 0 0; display: grid; gap: 6px; }
.bo-saved__option { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; }
.bo-saved__option input { margin-top: 3px; flex: none; }
/* The history and the card states (M26.23, after rentbird's match history) */
.bo-lcard__state {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; border: 2px solid var(--bo-ink); border-radius: var(--bo-pill);
  padding: 3px 10px; font-family: var(--bo-display); font-weight: 700; font-size: 12px; background: var(--bo-white); color: var(--bo-ink);
}
.bo-lcard__state--new { background: var(--bo-amber); }
.bo-lcard__state--viewed { background: var(--bo-sage); }
.bo-lcard__state--old { background: var(--bo-cream); }
.bo-matches__bar { display: grid; gap: 12px; margin: 0 0 20px; }
.bo-matches__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bo-matches__sort .bo-tabs__link { cursor: pointer; font: inherit; font-family: var(--bo-display); font-weight: 700; font-size: 14px; }
.bo-tiles__link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--bo-green); }
@media (min-width: 768px) { .bo-matches__bar { grid-template-columns: 1fr auto; align-items: center; } }
/* The reaction letter's editor (M26.22) */
.bo-letter-page__tabs { margin-bottom: 14px; }
.bo-letter-page__tabs .bo-tabs__link { cursor: pointer; font: inherit; font-family: var(--bo-display); font-weight: 700; font-size: 14px; }
.bo-js .bo-letter-page [role=tabpanel][hidden] { display: none; }
/* The withdrawal function's form (M26.19b) */
.bo-withdraw__error { margin: 0; color: #9B1C1C; font-size: 14px; font-weight: 600; }
.bo-withdraw__hint { margin: 0; font-size: 13px; }
.bo-withdraw__contract { margin: 0; font-weight: 600; }
.bo-withdraw__declaration { margin: 6px 0 16px; font-size: 15px; }
/* The cancel flow (M26.19): one narrow column, the questions as full-width buttons that
   answer on the click, every one skippable; the confirm screen's plan card, numbers and the
   filled "Ik zeg RentQuick op" (the Phase 3 doc, section 7) */
.bo-cancel { max-width: 620px; margin: 0 auto; }
.bo-cancel__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 14px; }
.bo-cancel__progress { font-family: var(--bo-display); font-weight: 700; color: var(--bo-green); }
.bo-cancel__card { padding: 24px 20px; margin-bottom: 20px; }
.bo-cancel__title { font-family: var(--bo-display); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 18px; color: var(--bo-ink); }
.bo-cancel__choices { display: grid; gap: 10px; }
.bo-cancel__choice {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 16px; line-height: 1.35;
  background: var(--bo-white); color: var(--bo-ink); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius); padding: 14px 18px; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.bo-cancel__choice:hover, .bo-cancel__choice:focus-visible { background: var(--bo-sage); box-shadow: var(--bo-shadow); }
.bo-cancel__choice.is-picked { background: var(--bo-sage); border-color: var(--bo-green); }
.bo-cancel__skip { margin: 16px 0 0; font-size: 15px; }
.bo-cancel__guard { margin: 14px 0 0; font-size: 13px; color: rgba(26, 26, 26, 0.7); }
.bo-cancel__comment { display: block; width: 100%; box-sizing: border-box; min-height: 120px; border-radius: var(--bo-radius); resize: vertical; }  /* inside the card's padding */
.bo-cancel__next { margin-top: 14px; }
.bo-cancel__confirm .bo-plan-card { margin-bottom: 20px; }
.bo-cancel__keep { margin-bottom: 20px; }
.bo-cancel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 16px 0 0; }
.bo-cancel__done .bo-muted { color: inherit; }
.bo-journey__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.bo-journey__item { background: var(--bo-cream); border-radius: var(--bo-radius); padding: 12px 14px; }
.bo-journey__item dt { font-size: 13px; color: rgba(26, 26, 26, 0.7); }
.bo-journey__item dd { margin: 4px 0 0; font-family: var(--bo-display); font-weight: 700; font-size: 18px; }
@media (min-width: 768px) {
  .bo-cancel__card { padding: 30px 28px; }
  .bo-cancel__title { font-size: 30px; }
  .bo-cancel__choices--row { grid-template-columns: repeat(3, 1fr); }
  .bo-cancel__choices--row .bo-cancel__choice { text-align: center; }
  .bo-journey__list { grid-template-columns: repeat(4, 1fr); }
  .bo-journey__item dd { font-size: 20px; }
}
.bo-saved { list-style: none; margin: 0; padding: 0; }
.bo-saved__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 2px dotted rgba(26, 26, 26, 0.25); }
.bo-saved__item:last-child { border-bottom: 0; }
.bo-saved__name { font-family: var(--bo-display); font-weight: 700; font-size: 16px; }
.bo-saved__actions { display: flex; gap: 8px; }
.bo-form .bo-btn { margin-top: 6px; }

/* ---------- 23. 404 ---------- */
.bo-oops { text-align: center; padding: 40px 22px; }
.bo-oops__sticker { position: absolute; top: -18px; left: 20px; font-size: 18px; padding: 8px 18px; }
.bo-doodle--oops { width: min(100%, 260px); margin: 0 auto 8px; }

/* ---------- 24. Paywall modal (ids and .pw-step are used by the script in base.html) ---------- */
.bo-modal {
  /* a <dialog>: the browser's top layer, opened by showModal() in base.html */
  border: 0; margin: 0; padding: 16px; width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: inherit;
  align-items: center; justify-content: center;
}
.bo-modal[open] { display: flex; }
.bo-modal::backdrop { background: rgba(13, 77, 58, 0.72); }
.bo-modal__card {
  position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto;
  background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg);
  box-shadow: var(--bo-shadow-amber); padding: 28px 22px;
}
/* The entrance (founder, 2026-10-08): the backdrop fades in while the card rises into its
   place; on a phone the card is a sheet on the bottom edge that slides up. A keyframe
   animation on the two compositor properties only, started by [open]; nothing on the
   dialog element itself. The earlier version transitioned the dialog's display/overlay and
   its backdrop, which made the browser recalculate styles on every frame of the slide and
   stuttered on phones (measured 2026-10-10). The page-wide `body:has(dialog[open])` rules
   went too: they made the browser restyle the whole page at the moment of opening; the
   script sets `body.has-dialog` instead. Closing is instant, as a native dialog closes. */
.bo-modal { padding: 0; align-items: flex-end; }
.bo-modal::backdrop { background: rgba(13, 77, 58, 0.72); }
.bo-modal[open]::backdrop { animation: bo-fade-in 0.22s ease both; }
.bo-modal__card {
  border-radius: var(--bo-radius-lg) var(--bo-radius-lg) 0 0; max-height: 92vh;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.bo-modal[open] .bo-modal__card { animation: bo-sheet-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bo-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bo-card-in { from { transform: translateY(28px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) {
  .bo-modal { padding: 16px; align-items: center; }
  .bo-modal__card { border-radius: var(--bo-radius-lg); padding-bottom: 32px; }
  .bo-modal[open] .bo-modal__card { animation-name: bo-card-in; }
}
@media (max-width: 767px) {
  /* On a phone the pop-up fades in where it stands (founder, 2026-10-10): the sliding
     sheet kept bouncing on opening, and an opacity-only entrance cannot move anything. */
  .bo-modal[open]::backdrop { animation: bo-fade-in 0.18s ease both; }
  .bo-modal[open] .bo-modal__card { animation: bo-fade-in 0.22s ease both; }
  .bo-modal__card { box-shadow: none; }
  /* The page's own animations rest while a pop-up is open: each costs a style pass per frame */
  body.has-dialog .bo-marquee__track, body.has-dialog .bo-burst__marks,
  body.has-dialog .bo-saved__dots i { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .bo-modal[open]::backdrop, .bo-modal[open] .bo-modal__card { animation: none; }
}
.bo-modal__close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--bo-ink); background: var(--bo-white); font-size: 22px; line-height: 1;
  cursor: pointer; box-shadow: 2px 2px 0 var(--bo-ink);
}
.bo-modal__steps { display: flex; gap: 6px; margin: 0 40px 20px 0; }
.bo-modal__step {
  flex: 1; text-align: center; font-family: var(--bo-display); font-weight: 700; font-size: 12px;
  padding: 6px 2px; border-bottom: 4px solid rgba(26, 26, 26, 0.15); color: rgba(26, 26, 26, 0.7);
}
.bo-modal__step.active { color: var(--bo-green); border-bottom-color: var(--bo-amber); }
.bo-modal__step.completed { color: var(--bo-green); border-bottom-color: var(--bo-green); }
.bo-modal__title { font-size: 26px; font-weight: 800; color: var(--bo-green); letter-spacing: -0.02em; margin-bottom: 8px; }
.bo-modal__email {
  background: var(--bo-cream); border: 2px solid var(--bo-ink); border-radius: var(--bo-pill);
  padding: 12px 18px; text-align: center; font-family: var(--bo-display); font-weight: 700; margin: 12px 0 16px;
  word-break: break-all;
}
.bo-modal__buttons { display: grid; gap: 10px; margin-top: 12px; }
.bo-modal__prices { margin: 12px 0; padding: 14px 16px; background: var(--bo-cream); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); }
.bo-modal__prices .bo-prices { margin: 0; }
.bo-modal__prices .bo-prices__lead .bo-prices__amount { font-size: 48px; }
.bo-modal .bo-checks { margin-bottom: 8px; }
.bo-modal .bo-reassure { text-align: center; }

/* ---------- 25. Breakpoints ---------- */
@media (min-width: 480px) {
  .bo-grid { grid-template-columns: repeat(2, 1fr); }
  .bo-benefits--grid { grid-template-columns: repeat(2, 1fr); }
  .bo-field__row--wrap { grid-template-columns: 1fr 1fr; }
  .bo-filters__actions { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 768px) {
  .bo-wrap { padding: 0 24px; }
  .bo-page { padding: 36px 24px 80px; }
  .bo-section { padding: 80px 0; }
  .bo-header__inner { height: 84px; padding: 0 24px; }
  .bo-logo__icon { width: 44px; height: 44px; }
  .bo-logo__word { font-size: 28px; }
  .bo-menu__panel { top: 88px; max-height: calc(100vh - 88px); }
  .bo-footer__band-inner { display: flex; justify-content: space-between; }
  .bo-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .bo-hero { padding: 72px 0 88px; }
  .bo-hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: 40px; }
  .bo-hero__visual { margin: 0 0 0 auto; }
  .bo-marquee__list a { font-size: 26px; }
  .bo-hero__count-num { font-size: 36px; }
  .bo-offer__inner { grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
  .bo-review { flex: 0 0 calc(50% - 10px); }
  .bo-compare__grid { grid-template-columns: 1fr auto 1fr; gap: 20px; }
  .bo-compare__vs { margin: 0 -12px; }
  .bo-carousel__item { flex: 0 0 calc(50% - 10px); }
  .bo-pricing__inner { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .bo-pricing__card { padding: 36px 32px 32px; }
  .bo-pricing-page { grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
  .bo-stats { grid-template-columns: repeat(3, 1fr); }
  .bo-stats--stack { grid-template-columns: 1fr; }
  .bo-support { grid-template-columns: 1fr 260px; padding: 32px 40px; }
  .bo-doodle--coffee { width: 240px; }
  .bo-final__card { grid-template-columns: auto 1fr; gap: 40px; padding: 48px 40px; }
  .bo-doodle--unboxing { width: 240px; height: 240px; }
  .bo-gallery { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; }
  .bo-gallery__item { aspect-ratio: auto; }
  .bo-gallery__item--main { grid-column: 1; grid-row: 1 / span 2; }
  .bo-gallery--single .bo-gallery__item--main { grid-column: 1 / -1; grid-row: 1 / span 2; }
  .bo-detail { grid-template-columns: 1fr 340px; gap: 40px; }
  .bo-price-card { position: sticky; top: 104px; }
  .bo-contact { grid-template-columns: 1fr auto; padding: 36px 40px; }
  .bo-contact__action { text-align: center; }
  .bo-cityhero__inner { grid-template-columns: 1fr auto; }
  .bo-static { padding: 48px 48px; }
  .bo-auth, .bo-checkout { padding: 40px 36px; }
  .bo-account__grid { grid-template-columns: 1.15fr 0.85fr; }
  .bo-account__grid--offer { grid-template-columns: 0.85fr 1.15fr; }
  .bo-account__card { padding: 30px 28px; }
  .bo-modal__card { padding: 32px 30px; }
  .bo-modal__title { font-size: 28px; }
}

@media (min-width: 1024px) {
  .bo-nav { display: flex; }
  .bo-menu { display: none; }
  .bo-header__phone { display: none; }
  .bo-grid { grid-template-columns: repeat(3, 1fr); }
  .bo-benefits--grid { grid-template-columns: repeat(3, 1fr); }
  .bo-search__layout { grid-template-columns: 300px 1fr; gap: 32px; }
  .bo-filters__panel { position: sticky; top: 104px; }
  .bo-filters__actions { grid-template-columns: 1fr; }
  .bo-review { flex: 1 1 0; scroll-snap-align: none; }
  .bo-reviews__track { overflow: visible; }
  .bo-review:nth-child(1) { transform: rotate(-2deg); }
  .bo-review:nth-child(3) { transform: rotate(2deg); }
  .bo-dots { display: none; }
  .bo-carousel__item { flex: 0 0 calc(33.333% - 14px); }
  .bo-doodle--running { display: block; position: absolute; right: -10px; top: -70px; width: 220px; }
  .bo-doodle--reading { display: block; position: absolute; left: 0; bottom: 40px; width: 240px; }
}

@media (min-width: 1200px) {
  .bo-hero__headline { font-size: 80px; }
  .bo-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .bo-marquee__list a { font-size: 30px; }
  .bo-doodle--reading { width: 300px; left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bo-btn, .bo-lcard, .hv1-faq-chevron { transition: none; }
}

/* ---------- Listing page: folded description, the original-listing button with its burst ---------- */
/* Folded only with JavaScript (html.bo-js): without it the whole text shows and the button is gone. */
.bo-js .bo-more:not(.is-open) .bo-more__body { max-height: 12.5em; overflow: hidden; position: relative; }
.bo-js .bo-more:not(.is-open) .bo-more__body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4em;
  background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF);
}
.bo-more__label { display: none; margin-top: 12px; cursor: pointer; }
.bo-js .bo-more__label { display: inline-flex; }
.bo-more__close { display: none; }
.bo-more.is-open .bo-more__open { display: none; }
.bo-more.is-open .bo-more__close { display: inline; }

.bo-burst { position: relative; margin-top: 28px; }
.bo-burst__marks { position: absolute; top: -24px; width: 40px; height: 30px; pointer-events: none; transform-origin: bottom center; animation: bo-pop 2.4s ease-in-out infinite; }
.bo-burst__marks--left { left: -14px; }
.bo-burst__marks--right { right: -14px; animation-delay: 0.3s; }
.bo-price-card__reassure { margin: 10px 0 12px; text-align: center; }
@keyframes bo-pop {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bo-burst__marks { animation: none; } }

/* ---------- The cookie choice (config/tracking.py) ----------
   An overlay over the whole page (founder, 2026-10-21): a dark backdrop, one card in the
   middle, the choice before anything else. Pure CSS, so it holds without JavaScript. */
.bo-cookies {
  position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px;
  background: rgba(13, 77, 58, 0.8); overflow-y: auto;
}
body:has(#bo-cookies) { overflow: hidden; }  /* the page waits behind the choice */
.bo-cookies__form {
  width: 100%; max-width: 520px; display: grid; gap: 12px; padding: 24px 20px;
  background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow-amber);
}
.bo-cookies__title { margin: 0; font-family: var(--bo-display); font-weight: 700; font-size: 24px; color: var(--bo-green); }
.bo-cookies__text { margin: 0; font-size: 15px; line-height: 1.5; }
.bo-cookies__text a { color: var(--bo-green); font-weight: 600; }
/* The two controls side by side, the same size; on a phone "Accept" sits on the right, under
   the thumb (founder, 2026-09-26), on a desktop first */
.bo-cookies__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.bo-cookies__actions .bo-btn { min-width: 0; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.bo-cookies__actions [value="granted"] { order: 2; }
@media (min-width: 768px) {
  .bo-cookies__form { padding: 32px 28px; gap: 14px; }
  .bo-cookies__title { font-size: 28px; }
  .bo-cookies__text { font-size: 16px; }
  .bo-cookies__actions [value="granted"] { order: 0; }
}
}
.bo-footer__form { display: inline; margin: 0; }
.bo-footer__link--button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---------- All cities (M9.7) ---------- */
.bo-cities { display: grid; gap: 24px; margin-top: 8px; }
.bo-cities__letter { margin-bottom: 8px; }
.bo-cities__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bo-cities__list a { color: var(--bo-green); font-weight: 600; }
.bo-cities__list small { opacity: 0.6; margin-left: 4px; }

/* ---------- Place autocomplete (M11.1, static/js/site.js) ---------- */
.bo-suggest { position: relative; }
.bo-suggest__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; margin: 0; padding: 6px;
  list-style: none; background: var(--bo-white); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius); box-shadow: var(--bo-shadow); max-height: 320px; overflow-y: auto;
}
.bo-suggest__option {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; color: var(--bo-ink); font-weight: 600;
}
.bo-suggest__option small { font-weight: 500; opacity: 0.65; white-space: nowrap; }
.bo-suggest__option[aria-selected="true"], .bo-suggest__option:hover { background: var(--bo-sage); color: var(--bo-green); }
.bo-search__corrected {
  margin: 0 0 16px; padding: 10px 14px; background: var(--bo-cream); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius); font-size: 15px;
}

/* Flash messages at the top of a page (base.html) */
.bo-flash { padding-top: 20px; }
.bo-flash .bo-alert { margin: 0; }

/* ---------- City text, below the listings (2026-09-29) ---------- */
.bo-citytext { margin: 48px 0 8px; max-width: 72ch; }
.bo-citytext__body p { font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
/* Folded to about four lines (founder, 2026-09-29: the text took a lot of room) */
.bo-js .bo-more--short:not(.is-open) .bo-more__body { max-height: 6.8em; }

/* Invite friends (referrals/, M14): phone first, one column in reading order (the link,
   the earnings, the steps, the bank account); two columns from 768px. */
.bo-account__invite { position: relative; }
.bo-account__invite-sticker { position: absolute; top: -12px; right: 16px; }
.bo-invite .bo-account__head .bo-muted { font-size: 15px; }
.bo-invite__grid { display: grid; gap: 16px; align-items: start; }
.bo-invite .bo-account__card { padding: 20px 18px; }
.bo-invite .bo-account__card .bo-h3 { font-size: 20px; margin-bottom: 12px; }
.bo-invite__url {
  margin: 0 0 12px; padding: 12px 14px; background: var(--bo-sage); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius); font-weight: 600; font-size: 15px; line-height: 1.4;
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.bo-invite__actions { display: flex; gap: 10px; }
.bo-invite__actions .bo-btn { flex: 1 1 0; }
.bo-invite__actions:not(:has(.bo-btn:not([hidden]))) { display: none; }
.bo-invite__hint { margin: 12px 0 0; }
.bo-invite__steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
.bo-invite__how .bo-fine { margin-top: 12px; }
.bo-invite__change { margin-top: 8px; }
.bo-invite__change summary { cursor: pointer; }
.bo-invite__change .bo-form { margin-top: 12px; }
@media (min-width: 768px) {
  .bo-invite__grid { grid-template-columns: 1.15fr 0.85fr; gap: 24px; grid-template-areas: "link earn" "how pay"; }
  .bo-invite__link { grid-area: link; }
  .bo-invite__earnings { grid-area: earn; }
  .bo-invite__how { grid-area: how; }
  .bo-invite__payout { grid-area: pay; }
  .bo-invite .bo-account__card { padding: 26px 24px; }
  .bo-invite__actions .bo-btn { flex: 0 0 auto; }
}

/* The sticky bottom bar on phones (M17.6) */
.bo-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #FFFFFF; border-top: 3px solid var(--bo-green); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); visibility: hidden; opacity: 0; transform: translateY(110%); transition: transform 0.35s ease, opacity 0.3s ease, visibility 0s linear 0.35s; }
.bo-sticky.is-shown { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .bo-sticky { transition: none; } }
@media (max-width: 767px) { body.has-sticky { padding-bottom: 96px; } }
.bo-sticky__inner { max-width: 480px; margin: 0 auto; }
.bo-sticky__line { margin: 6px 0 0; text-align: center; font-size: 13px; line-height: 1.3; }
body.has-dialog .bo-sticky, body:has(#bo-cookies) .bo-sticky { visibility: hidden; opacity: 0; } /* not under the modal, not behind the cookie banner */
@media (min-width: 768px) { .bo-sticky { display: none; } }
.bo-perday { font-weight: 500; color: var(--bo-green); }
/* D70: how many searched this week, under the price per day, a live dot before it */
.bo-joined { margin: 10px auto 0; font-weight: 600; color: var(--bo-ink); text-wrap: balance; }
/* D71: the personal code's line on the plan page */
.bo-codebar { margin: 0 auto 20px; max-width: 760px; text-align: center; border: 2px solid var(--bo-amber); }
.bo-joined__dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 0.12em; border-radius: 50%; background: var(--bo-green); box-shadow: 0 0 0 4px rgba(13, 77, 58, 0.15); }
.bo-paymarks { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 14px 0 0; }
.bo-paymarks img { width: 40px; height: 30px; border: 1px solid rgba(26, 26, 26, 0.15); border-radius: 6px; padding: 2px; background: #FFFFFF; }
.bo-paymarks__via { text-align: center; margin: 6px 0 0; }
.bo-sticky__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bo-sticky__rent { margin: 0; font-size: 14px; line-height: 1.2; }
.bo-sticky__rent strong { display: block; font-family: var(--bo-display); font-size: 22px; color: var(--bo-green); font-variant-numeric: tabular-nums; }

/* The free search (M17.12): the card among the results, the panel after saving, the page */
.bo-lcard--free { background: var(--bo-green); color: #FFFFFF; display: flex; }
.bo-lcard__free { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; width: 100%; justify-content: center; }
.bo-lcard__free .bo-h3 { color: #FFFFFF; margin: 0; }
.bo-lcard__free p { margin: 0; opacity: 0.9; font-size: 14px; }
.bo-lcard__free-icon svg { width: 36px; height: 36px; color: var(--bo-amber); }
.bo-lcard__free .bo-input { background: #FFFFFF; }
.bo-saved { position: relative; padding: 20px 48px 18px 20px; margin-bottom: 20px; }
.bo-saved__close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--bo-green); }
.bo-saved__count { font-family: var(--bo-display); font-size: 18px; margin: 6px 0 6px; }
.bo-saved__count strong { font-size: 30px; color: var(--bo-green); font-variant-numeric: tabular-nums; }
.bo-saved__scan { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.bo-saved__dots i { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: var(--bo-amber); animation: bo-dot 1.2s infinite ease-in-out; }
.bo-saved__dots i:nth-child(2) { animation-delay: 0.2s; }
.bo-saved__dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes bo-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bo-saved__dots i { animation: none; } }
.bo-free__checks { margin: 0 0 20px; }
.bo-free__form .bo-field__row { display: flex; gap: 12px; }
.bo-free__form .bo-field__row .bo-field { flex: 1 1 0; min-width: 0; }

/* The listing's map (frontend/maps.py): a clipped mosaic, the pin in the middle */
.bo-map__box { display: block; position: relative; overflow: hidden; height: 240px; border-radius: 16px; border: 2px solid var(--bo-ink); background: #DCEBF5; }
.bo-map__mosaic { position: absolute; left: calc(50% - var(--map-x)); top: calc(50% - var(--map-y)); display: block; }
.bo-map__mosaic img { position: absolute; width: 256px; height: 256px; max-width: none; }
.bo-map__pin { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -100%); }
.bo-map__pin svg { width: 36px; height: 36px; fill: var(--bo-amber); stroke: var(--bo-ink); stroke-width: 1.4; }
.bo-map__pin circle { fill: var(--bo-ink); stroke: none; }
.bo-map__open { position: absolute; right: 12px; bottom: 12px; background: #FFFFFF; border: 2px solid var(--bo-ink); border-radius: 999px; padding: 6px 12px; font-family: var(--bo-display); font-weight: 700; font-size: 13px; color: var(--bo-green); box-shadow: 3px 3px 0 var(--bo-amber); }
.bo-map__note { margin: 8px 0 0; }
@media (min-width: 768px) { .bo-map__box { height: 300px; } }

/* M26.9: the search wizard (three full-page steps, the account step) and the hero's place field */
.bo-wizard { max-width: 520px; margin: 0 auto; }
.bo-wizard__steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 4px; }
.bo-wizard__count-step { margin: 10px 0 2px; }
.bo-wizard__found { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 0 18px; font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--bo-green); }
.bo-wizard__found-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bo-amber); border: 2px solid var(--bo-ink); flex-shrink: 0; }
.bo-wizard__form .bo-btn + .bo-btn { margin-top: 10px; }
.bo-wizard__pick { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.bo-wizard__pick .bo-choice { margin: 8px 0 12px; }
.bo-wizard__summary { padding: 14px 16px; border-radius: 16px; background: var(--bo-sage); margin: 0 0 18px; }
.bo-wizard__summary .bo-label { margin: 0 0 4px; }
.bo-wizard__summary-text { margin: 0; font-weight: 700; color: var(--bo-green); }
.bo-wizard .bo-auth__confirm .bo-btn + .bo-btn { margin-top: 10px; }
.bo-hero__search { margin: 4px 0 18px; max-width: 560px; }
.bo-hero__search-label { display: block; font-family: var(--bo-display); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.bo-hero__search-row { display: grid; gap: 10px; }
.bo-hero__search-row .bo-input { width: 100%; }
@media (min-width: 768px) { .bo-hero__search-row { grid-template-columns: 1fr auto; align-items: start; } }

/* M26.11: the plan page's cards, the 14-day box beside the button */
.bo-plans { padding: 28px 20px; }
.bo-plans .bo-choice { gap: 14px; margin-top: 14px; }
.bo-plans__card { align-items: center; }
.bo-plans__card .bo-choice__lead .bo-prices__amount { font-size: 30px; }
.bo-plans__off { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--bo-sage); color: var(--bo-green); font-size: 13px; font-weight: 700; }
.bo-plans__act { display: grid; gap: 14px; margin: 6px 0 18px; }
.bo-plans__guarantee { padding: 14px 16px; border: 2px dashed var(--bo-green); border-radius: 16px; background: var(--bo-cream); font-size: 14px; line-height: 1.5; }
.bo-plans__guarantee p { margin: 0; }
.bo-plans__guarantee-title { font-family: var(--bo-display); font-weight: 700; font-size: 16px; color: var(--bo-green); margin-bottom: 4px !important; }
@media (min-width: 768px) {
  .bo-plans { padding: 36px 32px; }
  .bo-plans__act { grid-template-columns: 1fr 1fr; align-items: start; }
}
.bo-section__head .bo-wizard__found { justify-content: center; text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; }

/* M26.12: the checkout's summary and the paragraph under its button */
.bo-checkout__summary { margin: 4px 0 18px; padding: 14px 16px; border-radius: 16px; background: var(--bo-sage); display: grid; gap: 8px; }
.bo-checkout__row { display: flex; justify-content: space-between; gap: 12px; margin: 0; flex-wrap: wrap; }
.bo-checkout__change { font-size: 14px; margin-left: 6px; }
.bo-checkout__total { padding-top: 8px; border-top: 2px solid rgba(26, 26, 26, 0.12); font-size: 18px; }
.bo-checkout__total strong { font-family: var(--bo-display); font-size: 22px; color: var(--bo-green); }
.bo-checkout__terms { margin-top: 14px; line-height: 1.6; }
.bo-checkout .bo-checkout__terms + .bo-checks, .bo-checkout form + .bo-checks { margin-top: 22px; }

/* ---------- 22. The design pass (M26.28): the account page ----------
   One number owns the page on the one high-contrast block (DESIGN.md rules 1 and 2), the
   progress beneath it, the newest matches next as a row that scrolls on a phone (the
   founder's pick, 2026-10-21: variant 1 with variant 2's carousel), the cards after. A free
   account sees one number, today's new homes, and the offer: no progress row. */
.bo-dash-page__head { margin-bottom: 16px; }
.bo-dash-top { display: grid; gap: 24px; margin-bottom: 28px; }
.bo-dash {
  background: var(--bo-green); color: var(--bo-white); border: 2px solid var(--bo-ink);
  border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow-amber); padding: 26px 22px 22px;
  display: grid; gap: 6px; position: relative;
}
.bo-dash__label { margin: 0; font-family: var(--bo-display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.bo-dash__num { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.bo-dash__big { font-family: var(--bo-display); font-weight: 800; font-size: clamp(56px, 16vw, 84px); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bo-dash__unit { font-family: var(--bo-display); font-weight: 700; font-size: 20px; }
.bo-dash__line { margin: 6px 0 0; font-size: 15px; line-height: 1.5; opacity: 0.92; max-width: 56ch; }
.bo-dash__line a { color: var(--bo-amber); }
.bo-dash__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.bo-dash__item dt { font-size: 13px; opacity: 0.8; }
.bo-dash__item dd { margin: 2px 0 0; font-family: var(--bo-display); font-weight: 700; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bo-dash__offer { margin-top: 14px; display: grid; gap: 4px; justify-items: start; }
.bo-dash__offer--only { margin-top: 0; gap: 6px; }
.bo-dash__offer--only .bo-prices { margin: 4px 0 2px; }
.bo-dash__offer--only .bo-prices__amount { font-size: clamp(48px, 13vw, 64px); }
.bo-dash__offer--only .bo-dash__line { margin: 0; }
.bo-dash__act { display: grid; gap: 6px; justify-items: start; margin-top: 12px; }
.bo-dash__offer .bo-prices { margin: 0 0 8px; }
.bo-dash__offer .bo-prices__amount, .bo-dash__offer .bo-prices__mark { color: var(--bo-white); }
.bo-dash__offer .bo-prices__for { color: var(--bo-white); opacity: 0.9; }  /* "vanaf" and "per maand" were green on green */
.bo-dash__offer .bo-reassure { color: var(--bo-white); opacity: 0.85; }
.bo-dash__offer .bo-prices__renewal { color: var(--bo-white); font-weight: 400; font-size: 14px; opacity: 0.9; }
.bo-dash-matches { display: grid; gap: 14px; }
.bo-dash-matches__head { margin-bottom: 0; }
.bo-dash-matches__head .bo-h3 { color: var(--bo-green); font-size: 22px; }
/* The three newest homes: a row that scrolls with snap points on a phone, a grid from a tablet */
.bo-dash-matches__grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 6px 14px; margin: 0 -6px; scrollbar-width: none; }
.bo-dash-matches__grid::-webkit-scrollbar { display: none; }
.bo-dash-matches__grid .bo-lcard { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
.bo-dash-cards { display: grid; gap: 20px; margin-bottom: 28px; }
.bo-dash-sub { display: grid; gap: 4px; justify-items: start; padding: 20px 22px; border: 2px dashed rgba(26, 26, 26, 0.35); border-radius: var(--bo-radius); }
.bo-dash-sub .bo-h3 { font-size: 18px; margin: 0; }
.bo-dash-sub .bo-status { margin: 4px 0 8px; }
.bo-dash-sub .bo-muted { margin: 0 0 8px; }
.bo-dash-sub__links { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.bo-dash-sub__mail { font-size: 14px; opacity: 0.8; }
@media (min-width: 768px) {
  .bo-dash { padding: 32px 32px 26px; }
  .bo-dash__row { grid-template-columns: repeat(4, 1fr); }
  .bo-dash-cards { grid-template-columns: repeat(3, 1fr); }
  .bo-dash-matches__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; overflow: visible; padding: 0; margin: 0; }
  .bo-dash-matches__grid .bo-lcard { flex: none; }
  .bo-dash__offer--only { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
  .bo-dash__offer--only .bo-dash__act { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-items: center; text-align: center; }
}
/* The email settings page (M26.28) */
.bo-mailset__grid { display: grid; gap: 24px; align-items: start; }
.bo-mailset__state { margin: 0; }
.bo-mailset__what { margin: 10px 0 18px; }
.bo-mailset__form { margin: 0; }
.bo-mailset__searches { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.bo-mailset__searches li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-bottom: 2px dotted rgba(26, 26, 26, 0.25); }
.bo-mailset__name { font-family: var(--bo-display); font-weight: 700; }
@media (min-width: 768px) { .bo-mailset__grid { grid-template-columns: 1.1fr 0.9fr; } }

/* ---------- 23. The design pass (M26.28): real faces in the hero ----------
   frontend/people.py: a collage of four photo cards with first names in the phone's place
   (the founder's pick, 2026-10-21). The phone mockup stays on the international pages. */
.bo-faces img { display: block; object-fit: cover; }
.bo-faces--collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; padding: 8px 10px 12px; }
.bo-faces__card { margin: 0; background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: 14px; padding: 6px 6px 8px; box-shadow: 3px 3px 0 var(--bo-ink); }
.bo-faces__card img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 8px; }
.bo-faces__card figcaption { font-family: var(--bo-display); font-weight: 700; font-size: 13px; color: var(--bo-ink); text-align: center; margin-top: 6px; }
.bo-faces__card--1 { transform: rotate(-3deg); }
.bo-faces__card--2 { transform: rotate(2deg) translateY(10px); }
.bo-faces__card--3 { transform: rotate(2deg); }
.bo-faces__card--4 { transform: rotate(-2deg) translateY(10px); }
.bo-faces__caption { grid-column: 1 / -1; margin: 12px 0 0; justify-self: center; background: var(--bo-cream); color: var(--bo-ink); border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 8px 16px; font-family: var(--bo-display); font-weight: 700; font-size: 15px; box-shadow: 2px 2px 0 var(--bo-ink); }

/* ---------- 24. The design pass (M26.28): the billing page ----------
   DESIGN.md's billing numbers: the price at least 3x the next size, the only loud thing on
   the one dark block; the guarantee in body size in the background family; the cancel
   entry a ghost inside the block; the date smallest; "what you have" beside the block (the
   founder's pick, 2026-10-21). The discount sticker and the state keep their amber bubbles
   (founder, 2026-10-21): the sticker beside the period, the state on the block's top edge
   so it never pushes the price down on a phone. */
.bo-plan-card { position: relative; }
.bo-plan-card__period { font-size: 18px; font-weight: 700; }
.bo-plan-card__sticker { font-size: 12px; padding: 5px 12px; }
.bo-plan-card__head .bo-status { position: absolute; top: -14px; right: 18px; margin: 0; font-size: 12px; padding: 5px 12px; box-shadow: 2px 2px 0 var(--bo-ink); }
.bo-plan-card__price { margin: 22px 0 2px; }
.bo-plan-card__price strong { font-size: clamp(56px, 15vw, 64px); font-weight: 800; letter-spacing: -0.03em; }
.bo-plan-card__total { font-size: 14px; }
.bo-plan-card__date { font-size: 13px; opacity: 0.85; }
.bo-guarantee { background: transparent; border: 0; padding: 0 2px; margin-bottom: 18px; font-size: 16px; color: var(--bo-green); }
.bo-billing__have .bo-h3 { color: var(--bo-green); }
.bo-billing__have .bo-checks { margin-bottom: 0; }
.bo-cancel__confirm .bo-plan-card__price strong { font-size: 48px; }

/* ---------- 25. The design pass (M26.28): the lists ----------
   The searches first, each a card with its count as the number; the new-search form after.
   The favourites, the reactions and the matches carry their count in the title. */
.bo-lists__count { display: inline-block; vertical-align: 0.2em; margin-left: 6px; font-size: 0.5em; background: var(--bo-amber); color: var(--bo-ink); border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 2px 12px; box-shadow: 2px 2px 0 var(--bo-ink); font-variant-numeric: tabular-nums; }
.bo-searches__head { margin-bottom: 14px; }
.bo-searches__head .bo-h3 { color: var(--bo-green); font-size: 22px; }
.bo-searches .bo-saved { display: grid; gap: 16px; padding: 0; margin: 0; position: static; }
.bo-searches .bo-saved__item { display: grid; gap: 12px; padding: 20px 20px 18px; border-bottom: 2px solid var(--bo-ink); align-items: start; }
.bo-searches .bo-saved__name { font-size: 18px; color: var(--bo-green); }
.bo-saved__count { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 14px; }
.bo-saved__count strong { font-family: var(--bo-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--bo-green); font-variant-numeric: tabular-nums; }
.bo-saved__state { display: inline-block; margin-left: 4px; border: 1.5px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 1px 9px; font-family: var(--bo-display); font-weight: 700; font-size: 12px; }
.bo-saved__state.is-on { background: var(--bo-sage); border-color: var(--bo-green); color: var(--bo-green); }
.bo-searches .bo-saved__options { margin-top: 10px; }
.bo-searches .bo-saved__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bo-searches__new .bo-h3 { color: var(--bo-green); font-size: 22px; }
@media (min-width: 768px) {
  .bo-searches .bo-saved__item { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- 26. The design pass (M26.28): the plan page and the checkout ----------
   The plan page: the price per month the one big number per card, the chosen card dark
   (the founder's pick, 2026-10-21) with its radio filled amber (the brand's mark colour;
   rentbird fills the chosen period's circle too), "Meest gekozen" a tiny tag, the button
   full width, the guarantee in body size below it, never amber. The checkout: the period's
   total the one big number on the one dark block. */
.bo-plans__tag { position: absolute; top: -11px; left: 16px; background: var(--bo-green); color: var(--bo-white); border-radius: var(--bo-pill); padding: 2px 10px; font-family: var(--bo-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.bo-plans__card .bo-choice__lead .bo-prices__amount { font-size: 40px; }
.bo-plans__card .bo-choice__title { font-size: 15px; }
.bo-plans__off { background: transparent; color: var(--bo-ink); opacity: 0.7; font-weight: 500; padding: 0; margin-left: 4px; }
.bo-plans__card input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 8px 0 0; border: 2px solid var(--bo-ink); border-radius: 50%; background: var(--bo-white); display: grid; place-content: center; cursor: pointer; }
.bo-plans__card input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bo-ink); transform: scale(0); transition: transform 0.12s ease-out; }
.bo-plans__card input:checked { background: var(--bo-amber); box-shadow: 0 0 0 2px var(--bo-white); }
.bo-plans__card input:checked::before { transform: scale(1); }
.bo-plans__card input:focus-visible { outline: 3px solid var(--bo-amber); outline-offset: 3px; }
.bo-plans__card:has(input:checked) { background: var(--bo-green); color: var(--bo-white); box-shadow: var(--bo-shadow-amber); }
.bo-plans__card:has(input:checked) .bo-choice__lead .bo-prices__amount { color: var(--bo-white); }
.bo-plans__card:has(input:checked) .bo-plans__off { color: var(--bo-white); }
.bo-plans__card:has(input:checked) .bo-plans__tag { background: var(--bo-amber); color: var(--bo-ink); }
.bo-plans__act { grid-template-columns: 1fr; gap: 10px; }
.bo-plans__guarantee { border: 0; background: transparent; padding: 4px 2px 0; font-size: 15px; color: var(--bo-green); }
.bo-plans__guarantee-title { font-family: var(--bo-display); font-weight: 700; margin: 0; }
.bo-pricing-page__aside .bo-tip { margin: 0; width: 100%; }
.bo-checkout__sticker { display: none; }
.bo-checkout__summary { background: var(--bo-green); color: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); padding: 18px 20px; margin: 8px 0 20px; display: grid; gap: 6px; }
.bo-checkout__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: 15px; }
.bo-checkout__change { color: var(--bo-amber); font-size: 13px; margin-left: 6px; }
.bo-checkout__total { border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 10px; margin-top: 4px; }
.bo-checkout__total strong { font-family: var(--bo-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--bo-white); }

/* ---------- 27. The design pass (M26.28): the cancel flow as a takeover ----------
   A separate world (section 7): the green page, the logo and an X in a thin bar, four
   segments, the questions on white cards (the founder's pick, 2026-10-21), 60 px option
   buttons, the account's numbers large on the confirm screen, the confirm filled and the
   keep option an outline. */
.bo-takeover { background: var(--bo-green); color: var(--bo-white); min-height: 80vh; }
.bo-takeover__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bo-green); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.bo-takeover__logo { color: var(--bo-white); }
.bo-takeover__logo .bo-logo__word { color: var(--bo-white); }
.bo-takeover__logo .bo-logo__accent { color: var(--bo-amber); }
.bo-takeover__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; color: var(--bo-white); text-decoration: none; font-size: 26px; line-height: 1; }
.bo-takeover__steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 24px; padding: 0; }
.bo-takeover__steps li { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.bo-takeover__steps li.is-done { background: var(--bo-amber); }
.bo-takeover .bo-cancel__top { color: var(--bo-white); }
.bo-takeover .bo-cancel__top .bo-link-muted { color: var(--bo-white); }
.bo-takeover .bo-cancel__progress { color: var(--bo-amber); }
.bo-takeover .bo-cancel__card { background: var(--bo-white); color: var(--bo-ink); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg); box-shadow: var(--bo-shadow-amber); padding: 24px 20px; margin-bottom: 28px; }
.bo-takeover .bo-cancel__title { color: var(--bo-green); font-size: 30px; }
.bo-takeover .bo-cancel__choice { min-height: 60px; background: var(--bo-white); color: var(--bo-ink); border-color: var(--bo-ink); font-size: 18px; box-shadow: none; }
.bo-takeover .bo-cancel__choice:hover, .bo-takeover .bo-cancel__choice:focus-visible { background: var(--bo-sage); box-shadow: none; }
.bo-takeover .bo-cancel__choice.is-picked { background: var(--bo-sage); color: var(--bo-ink); border-color: var(--bo-green); }
.bo-takeover .bo-cancel__skip a { color: var(--bo-green); }
.bo-takeover .bo-cancel__guard { color: var(--bo-ink); opacity: 0.75; }
.bo-takeover .bo-cancel__comment { color: var(--bo-ink); }
.bo-takeover .bo-cancel__next { background: var(--bo-white); color: var(--bo-green); }
.bo-takeover .bo-cancel__confirm > .bo-cancel__title { color: var(--bo-white); }
.bo-takeover .bo-cancel__confirm .bo-plan-card { box-shadow: 4px 4px 0 var(--bo-amber); background: rgba(255, 255, 255, 0.06); }
.bo-takeover .bo-cancel__confirm .bo-h3 { color: var(--bo-green); }
.bo-takeover .bo-journey__item { background: var(--bo-cream); color: var(--bo-ink); min-width: 0; }
.bo-takeover .bo-journey__item dt { color: rgba(26, 26, 26, 0.7); }
.bo-takeover .bo-journey__item dd { font-size: 18px; color: var(--bo-green); }
.bo-takeover .bo-journey__list { grid-template-columns: 1fr 1fr; }
.bo-takeover .bo-cancel__final { padding: 0; border: 0; box-shadow: none; background: transparent; }
.bo-takeover .bo-cancel__keep .bo-btn--outline { background: transparent; color: var(--bo-white); border-color: var(--bo-white); box-shadow: none; }
.bo-takeover .bo-cancel__done, .bo-takeover .bo-cancel__offer { background: var(--bo-white); color: var(--bo-ink); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg); padding: 24px 20px; box-shadow: var(--bo-shadow-amber); }
.bo-takeover .bo-cancel__done .bo-h3, .bo-takeover .bo-cancel__offer .bo-h3 { color: var(--bo-green); }
.bo-takeover .bo-cancel__offer .bo-prices__amount, .bo-takeover .bo-cancel__offer .bo-prices__mark { color: var(--bo-green); }
.bo-takeover .bo-cancel__offer .bo-prices__renewal { color: var(--bo-ink); font-weight: 400; font-size: 14px; }
.bo-takeover .bo-cancel__offer .bo-reassure { color: var(--bo-ink); }
.bo-takeover .bo-link-muted { color: var(--bo-white); }
.bo-takeover .bo-alert { color: var(--bo-ink); }
@media (min-width: 768px) {
  .bo-takeover__bar { padding: 14px 32px; }
  .bo-takeover .bo-cancel__title { font-size: 34px; }
}

/* The pricing page (D72, 2026-10-23, the founder's design "RentQuick Pricing Page v2"): the search
   and this week's homes, the cards with the total today and the saving, the button with its lines,
   the newest homes, the trust boxes, what is included, safety, the questions, the button again. */
.bo-pp { background: var(--bo-cream); }
.bo-pp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.bo-pp-hero { padding: 20px 0 8px; }
.bo-pp-hero__grid { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 40px; }
.bo-pp-hero__text { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.bo-pp-hero__plans { flex: 1 1 400px; min-width: 0; }
.bo-pp-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; }
.bo-pp-chip__words { display: inline-flex; align-items: center; gap: 6px; background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-pill); padding: 4px 12px; font-weight: 600; line-height: 1.4; }
.bo-pp-chip__words svg { flex: none; color: var(--bo-green); }
.bo-pp-chip__edit { color: var(--bo-green); font-weight: 700; }
.bo-pp-hero__title { margin: 4px 0 0; font-size: clamp(30px, 7.6vw, 54px); max-width: 13em; text-wrap: balance; overflow-wrap: normal; }
.bo-pp-hero__sub { margin: 6px 0 0; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.45; max-width: 34em; }
.bo-pp-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 6px; }
.bo-pp-hero__proof .bo-joined { margin: 0; font-size: 14px; }
.bo-pp-thumbs { display: flex; align-items: center; padding-right: 10px; }
.bo-pp-thumbs__one { display: block; flex: none; width: 60px; height: 44px; margin-right: -10px; border: 2px solid var(--bo-ink); border-radius: 10px; overflow: hidden; background: var(--bo-sage); }
.bo-pp-thumbs__one img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bo-pp-hero__more { font-weight: 700; font-size: 14px; color: var(--bo-green); }
.bo-plans.bo-pp-plans { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bo-pp-plans .bo-codebar { margin: 0; text-align: left; font-size: 14px; padding: 12px 14px; box-shadow: none; }
.bo-pp-plans__title { margin: 0; font-family: var(--bo-display); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--bo-ink); }
.bo-pp-plans .bo-choice { gap: 14px; padding-top: 8px; margin: 0; }
.bo-pp-card.bo-plans__card { padding: 10px 14px; align-items: center; gap: 12px; }
.bo-pp-card.bo-plans__card input { margin: 0; }
.bo-pp-card .bo-choice__body { flex: 1 1 auto; gap: 1px; }
.bo-pp-card.bo-plans__card .bo-choice__title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.bo-pp-card.bo-plans__card .bo-choice__lead .bo-prices__amount { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }
.bo-pp-card__per { font-size: 13px; font-weight: 500; }
.bo-pp-card .bo-choice__lead { white-space: nowrap; }
@media (max-width: 400px) {
  .bo-pp-card.bo-plans__card { padding: 10px 12px; gap: 10px; }
  .bo-pp-card.bo-plans__card .bo-choice__lead .bo-prices__amount { font-size: 20px; }
  .bo-pp-card__per { font-size: 12px; }
}
.bo-pp-card .bo-plans__tag { top: -12px; left: 12px; background: var(--bo-amber); color: var(--bo-ink); border: 1.5px solid var(--bo-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; padding: 1px 8px; line-height: 1.5; white-space: nowrap; }
.bo-pp-card__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: 13px; line-height: 1.35; }
.bo-pp-card__today { font-weight: 600; white-space: nowrap; }
.bo-pp-card__save { font-weight: 800; white-space: nowrap; color: var(--bo-green); }
.bo-plans__card:has(input:checked) .bo-pp-card__save { color: var(--bo-amber); }
.bo-pp-plans .bo-plans__act { grid-template-columns: 1fr; gap: 12px; margin: 4px 0 0; }
.bo-pp-plans .bo-plans__cta .bo-btn { min-height: 56px; }
.bo-pp-plans .bo-plans__cta .bo-reassure { text-align: center; margin-top: 10px; }
.bo-pp-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
.bo-pp-lines li { display: flex; align-items: flex-start; gap: 8px; }
.bo-pp-lines svg { flex: none; margin-top: 1px; color: var(--bo-green); }
.bo-pp-lines__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bo-pp-badges { display: inline-flex; gap: 4px; }
.bo-pp-badges span { border: 1.5px solid var(--bo-ink); border-radius: 5px; padding: 0 5px; font-size: 10.5px; font-weight: 800; line-height: 17px; background: var(--bo-white); letter-spacing: 0.02em; }
.bo-pp-plans .bo-pp-renewal, .bo-pp-plans .bo-plans__terms { margin: 0; }
/* The total today follows the chosen card; a browser without :has keeps the plain line */
.bo-pp-today__plan { display: none; }
.bo-pp:has(input[name="plan"]:checked) .bo-pp-today__any { display: none; }
.bo-pp:has(input[name="plan"][value="1-month"]:checked) .bo-pp-today__plan[data-plan="1-month"],
.bo-pp:has(input[name="plan"][value="2-months"]:checked) .bo-pp-today__plan[data-plan="2-months"],
.bo-pp:has(input[name="plan"][value="3-months"]:checked) .bo-pp-today__plan[data-plan="3-months"] { display: inline; }
.bo-pp-section { padding: 32px 0 8px; }
.bo-pp-section--roomy { padding: 40px 0; }
.bo-pp-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.bo-pp-h2 { margin: 0; font-family: var(--bo-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.1; letter-spacing: -0.02em; color: var(--bo-green); text-wrap: balance; }
.bo-pp-section__head .bo-pp-h2 { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.15; }
.bo-pp-section__count { font-size: 14px; font-weight: 600; color: #555049; }
.bo-pp-homes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 20px); }
.bo-pp-home { background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.bo-pp-home__media { position: relative; aspect-ratio: 4 / 3; background: var(--bo-sage); border-bottom: 2px solid var(--bo-ink); }
.bo-pp-home__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bo-pp-home__body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-pp-home__price { font-family: var(--bo-display); font-weight: 800; font-size: clamp(16px, 2vw, 22px); line-height: 1.2; color: var(--bo-green); white-space: nowrap; }
.bo-pp-home__price small { font-family: var(--bo-body); font-weight: 500; font-size: 12px; color: #555049; }
.bo-pp-home__facts { font-size: 12.5px; line-height: 1.35; font-weight: 600; min-height: 1.35em; }
.bo-pp-home__place { font-size: 12.5px; line-height: 1.35; color: #555049; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-pp-home__lock { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; min-width: 0; color: var(--bo-green); }
.bo-pp-home__lock svg { flex: none; }
.bo-pp-home__blur { filter: blur(3.5px); user-select: none; white-space: nowrap; overflow: hidden; color: var(--bo-ink); }
.bo-pp-note { margin: 12px 0 0; display: flex; align-items: center; gap: 6px; font-size: 14px; color: #555049; }
.bo-pp-note svg { flex: none; color: var(--bo-green); }
.bo-pp-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; }
.bo-pp-box { background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bo-pp-box p { margin: 0; font-size: 15px; line-height: 1.5; }
.bo-pp-box--sage { background: var(--bo-sage); border-color: var(--bo-green); }
.bo-pp-box__head { display: flex; align-items: center; gap: 12px; }
.bo-pp-box__icon { flex: none; width: 44px; height: 44px; border-radius: var(--bo-pill); background: var(--bo-amber); border: 2px solid var(--bo-ink); display: flex; align-items: center; justify-content: center; color: var(--bo-ink); }
.bo-pp-box__icon--chat { background: var(--bo-sage); color: var(--bo-green); }
.bo-pp-h3 { margin: 0; font-family: var(--bo-display); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--bo-green); }
.bo-pp-box .bo-pp-box__by { margin-top: 2px; font-size: 14px; color: #555049; }
.bo-pp-box__more { border-top: 2px dashed var(--bo-green); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.bo-pp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; }
.bo-pp-steps li { display: flex; align-items: flex-start; gap: 12px; }
.bo-pp-steps__num { flex: none; width: 28px; height: 28px; border-radius: var(--bo-pill); background: var(--bo-green); color: var(--bo-white); font-family: var(--bo-display); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.bo-pp-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.bo-pp-contact__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--bo-green); overflow-wrap: anywhere; }
.bo-pp-contact__link svg { flex: none; }
.bo-pp-section__intro { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.bo-pp-section__intro p { margin: 0; font-size: 16px; color: #555049; }
.bo-checks.bo-pp-checks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px 28px; margin: 0; }
.bo-pp-checks li { font-size: 16px; line-height: 1.45; }
.bo-pp-safe { background: var(--bo-sage); border-top: 2px solid var(--bo-green); border-bottom: 2px solid var(--bo-green); margin-top: 8px; }
.bo-pp-safe__grid { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 20px 56px; }
.bo-pp-safe__intro { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bo-pp-safe__intro p { margin: 0; font-size: 16px; line-height: 1.5; max-width: 26em; }
.bo-pp-safe__list { flex: 2 1 440px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bo-pp-safe__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; }
.bo-pp-safe__icon { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--bo-white); border: 2px solid var(--bo-green); display: flex; align-items: center; justify-content: center; color: var(--bo-green); }
.bo-pp-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 12px 20px; align-items: start; margin-top: 18px; }
.bo-pp-faq__item { background: var(--bo-white); border: 2px solid var(--bo-ink); border-radius: var(--bo-radius); }
.bo-pp-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 16px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.bo-pp-faq__item summary::-webkit-details-marker { display: none; }
.bo-pp-faq__item summary::after { content: "+"; flex: none; font-family: var(--bo-display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--bo-green); }
.bo-pp-faq__item[open] summary::after { content: "\2212"; }
.bo-pp-faq__item summary:focus-visible { outline: 3px solid var(--bo-amber); outline-offset: 2px; border-radius: 14px; }
.bo-pp-faq__item p { margin: 0; padding: 0 16px 16px; font-size: 15px; line-height: 1.5; }
.bo-pp-final { background: var(--bo-green); color: var(--bo-white); }
.bo-pp-final__grid { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.bo-pp-final__text { flex: 1 1 320px; min-width: 0; }
.bo-pp-final__title { margin: 0; font-family: var(--bo-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--bo-white); text-wrap: balance; }
.bo-pp-final__sub { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #E2F5EB; }
.bo-pp-final__act { flex: 0 1 380px; min-width: 0; width: 100%; }
.bo-pp-final__act .bo-btn { min-height: 56px; }
.bo-pp-final .bo-reassure { color: var(--bo-white); opacity: 0.9; text-align: center; }