@layer base, pages, system;
/* ==========================================================================
   R-98 step 4, THE DESIGN (build-pg4, 20 Oct): ported from R-98_S4_UI.css and R-145_BRAND.css (design-p7's FINAL, 8c689dd).
   The cascade is the mockup's, with LAYERS instead of !important (brief § 0 item 3). The layer 'pages' holds what the
   mockup loads unlayered, in its order: 3a's rules, 3c's form (intake.css), R-98_S4_UI.css, R-145_BRAND.css; between
   them specificity and order decide, exactly as in the mockup. The layer 'system' above it holds what the mockup forced
   with !important (the three text sizes, the one tag, a few margins): a later layer wins whatever its specificity, as
   !important did. 'base' (below) is notice.css, which the mockup does not load. Dropped, never built: the mockup's
   frame (.mk-*), the states page, Chci prodat.
   ========================================================================== */
@layer pages {
/*
 * rb-site's stylesheet (R-98 step 3a): the theme's tokens and its chrome, rebuilt as clean CSS.
 * Source of truth: the :root of bold-properties-child/style.css (survey section 4) and its header, drawer, footer and
 * toast rules, with the theme's Customizer variants fixed to what the live site used (dark drawer, links centred,
 * the single-button language switch, the green location dot). No !important, no Elementor, nothing from a third party.
 */

/* Fonts: self-hosted, variable, BOTH subsets (latin-ext carries the Czech diacritics). Licences: fonts/OFL-*.txt */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg-canvas: #FDFBF7;
  --text-primary: #1E1C1C;
  --text-body: #1E1C1C;
  --text-muted: rgba(30, 28, 28, 0.8);
  --text-light: rgba(30, 28, 28, 0.45);
  --accent-green-start: #4A5A4E;
  --accent-terracotta: #A53F2B;
  --accent-sandstone: #D1A082;
  --success-green: #1E6B4B;
  --input-bg: #F5F2EA;
  --border-warm: rgba(30, 28, 28, 0.08);
  --card-bg: #FFFFFF;
  --header-bg-translucent: rgba(253, 251, 247, 0.5);
  --header-border-scrolled: rgba(30, 28, 28, 0.04);
  --form-input-bg: #FFFFFF;
  --whatsapp-text: #4A5A4E;
  --whatsapp-bg-hover: rgba(74, 90, 78, 0.05);
  --whatsapp-border-hover: rgba(74, 90, 78, 0.2);
  --font-headings: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-tactile: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --shadow-soft: 0 10px 30px rgba(30, 28, 28, 0.02);
  --shadow-premium: 0 15px 40px rgba(30, 28, 28, 0.04);
  --shadow-hover: 0 20px 45px rgba(30, 28, 28, 0.08);
  --layout-width-boxed: 1400px;
  --layout-width-prose: 840px;
  --layout-gutter: 5%;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.mobile-menu-active { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); color: var(--text-primary); line-height: 1.25; font-weight: 700; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.weight-slim { font-weight: 300; }
.weight-bold { font-weight: 800; text-transform: uppercase; }
.container { width: 90%; max-width: var(--layout-width-boxed); margin-left: auto; margin-right: auto; }
.template-reading .site-main .container { max-width: var(--layout-width-prose); }

/* Header */
.site-navigation-bar { position: sticky; top: 0; z-index: 999; background: transparent; border-bottom: 1px solid transparent; padding: 24px 0; transition: var(--transition-smooth); }
.site-navigation-bar.scrolled { padding: 16px 0; background-color: var(--header-bg-translucent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-bottom-color: var(--header-border-scrolled); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; }
.site-logo { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-headings); font-size: 1.4rem; font-weight: 300; letter-spacing: -0.04em; text-transform: uppercase; text-decoration: none; color: var(--text-primary); }
.site-logo .weight-bold, .hamburger-logo .weight-bold { font-weight: 800; }
.desktop-nav { margin-left: auto; margin-right: 32px; }
.desktop-menu-list { display: flex; align-items: center; list-style: none; gap: 32px; margin: 0; padding: 0; }
.desktop-menu-list a { position: relative; padding: 6px 0; text-decoration: none; color: var(--text-muted); font-family: var(--font-headings); font-weight: 500; letter-spacing: 0.03em; transition: var(--transition-smooth); }
.desktop-menu-list a:hover, .desktop-menu-list a[aria-current="page"] { color: var(--accent-terracotta); }
.desktop-menu-list a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-terracotta); transition: var(--transition-smooth); }
.desktop-menu-list a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.lang-switcher-wrapper { display: inline-flex; align-items: center; }
.lang-switcher-single-btn { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border-warm); font-family: var(--font-headings); font-weight: 700; letter-spacing: 0.08em; line-height: 1; color: var(--text-primary); text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.lang-switcher-single-btn:hover { border-color: var(--accent-terracotta); color: var(--accent-terracotta); background-color: rgba(165, 63, 43, 0.08); transform: translateY(-1px); }
.location-tag { display: inline-flex; align-items: center; font-size: 0.75rem; font-family: var(--font-headings); font-weight: 700; letter-spacing: 0.15em; color: var(--text-light); text-transform: uppercase; white-space: nowrap; user-select: none; }
.location-dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; display: inline-block; flex-shrink: 0; }
/* H6.3 (adopted 19 Oct, every page): the header's place line in muted ink (was 2.83:1) */
.location-tag .location-text { color: var(--text-muted); }
.location-tag-green .location-dot { background-color: var(--success-green); }
.hamburger-toggle { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: none; border: none; cursor: pointer; z-index: 1001; padding: 0; }
.hamburger-toggle span { display: block; width: 100%; height: 2px; background-color: var(--text-primary); transition: var(--transition-smooth); transform-origin: center; }
.hamburger-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-toggle.is-active span:nth-child(2) { opacity: 0; }
.hamburger-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 768px) { .header-actions { gap: 12px; } .header-actions .lang-switcher-single-btn { padding: 5px 12px; border-radius: 16px; } }
@media (max-width: 767px) {
  .site-navigation-bar { padding: 15px 0; }
  .desktop-nav, .lang-switcher-wrapper { display: none; }
  .hamburger-toggle { display: flex; }
}

/* The mobile drawer: the live site's dark set */
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background-color: var(--bg-canvas); color: var(--text-primary); z-index: 1000; transform: translateY(-100%); visibility: hidden; transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.5s; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.mobile-menu-overlay.is-active { transform: translateY(0); visibility: visible; transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0s; }
.mobile-menu-overlay.menu-theme-dark { --bg-canvas: #1E1C1C; --text-primary: #FAF7F2; --text-body: #FAF7F2; --text-muted: rgba(250, 247, 242, 0.8); --text-light: rgba(250, 247, 242, 0.45); --accent-green-start: #D1A082; --success-green: #52C291; --border-warm: rgba(209, 160, 130, 0.28); --card-bg: #262424; --whatsapp-text: #9AB2A1; }
.hamburger-top-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 60px; flex-shrink: 0; }
.hamburger-logo { font-family: var(--font-headings); font-weight: 300; text-transform: uppercase; text-decoration: none; color: var(--text-primary); }
.hamburger-close-btn { position: relative; width: 24px; height: 24px; background: none; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; padding: 0; }
.hamburger-close-btn span { display: block; width: 20px; height: 2px; background-color: var(--text-primary); position: absolute; }
.hamburger-close-btn span:nth-child(1) { transform: rotate(45deg); }
.hamburger-close-btn span:nth-child(2) { transform: rotate(-45deg); }
.hamburger-close-btn:hover span { background-color: var(--accent-terracotta); }
.mobile-menu-content-scroll { flex-grow: 1; width: 100%; max-height: calc(100dvh - 180px); overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 20px 0; scrollbar-width: none; }
.mobile-menu-list { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; padding: 0; }
.mobile-menu-list a { text-decoration: none; color: var(--text-primary); font-family: var(--font-headings); font-size: 1.6rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; transition: var(--transition-smooth); }
.mobile-menu-list a:hover { color: var(--accent-terracotta); font-weight: 700; }
.hamburger-contact-block { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 320px; padding-top: 24px; border-top: 1px solid var(--border-warm); }
.hamburger-contact-details { display: flex; flex-direction: column; gap: 6px; }
.hamburger-scout-name { font-family: var(--font-headings); font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
.hamburger-scout-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--text-light); margin-bottom: 4px; }
.hamburger-phone-link, .hamburger-email-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--text-muted); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; transition: var(--transition-smooth); }
.hamburger-phone-link:hover, .hamburger-email-link:hover { color: var(--accent-terracotta); }
.hamburger-whatsapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background-color: var(--accent-terracotta); color: #FFFFFF; text-decoration: none; font-weight: 700; font-family: var(--font-headings); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 50px; box-shadow: 0 4px 12px rgba(165, 63, 43, 0.2); border: 1px solid transparent; padding: 12px 24px; font-size: 0.85rem; transition: var(--transition-smooth); }
.hamburger-whatsapp-btn:hover { background-color: transparent; color: var(--accent-terracotta); border-color: var(--accent-terracotta); box-shadow: none; }
.hamburger-whatsapp-btn svg, .btn-whatsapp-subtle svg { width: 16px; height: 16px; fill: currentColor; }
.mobile-menu-switchers-footer { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 15px; border-top: 1px solid var(--border-warm); width: 100%; flex-shrink: 0; }
.mobile-lang-btn { padding: 6px 16px; font-size: 0.85rem; border-radius: 20px; border: 1px solid var(--accent-terracotta); color: var(--accent-terracotta); background-color: rgba(165, 63, 43, 0.06); }
.mobile-lang-btn:hover { background-color: var(--accent-terracotta); color: #FFFFFF; }
body.mobile-menu-active #hamburgerBtn { opacity: 0; pointer-events: none; }

/* Buttons */
.btn-terracotta, .btn-whatsapp-subtle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; border-radius: 30px; font-family: var(--font-headings); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: var(--transition-tactile); }
.btn-terracotta { font-size: 0.85rem; }
.btn-terracotta { background-color: var(--accent-terracotta); color: #FFFFFF; border-color: var(--accent-terracotta); }
.btn-terracotta:hover { background-color: transparent; color: var(--accent-terracotta); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(165, 63, 43, 0.12); }
.btn-whatsapp-subtle { background-color: var(--input-bg); color: var(--whatsapp-text); border: 1px solid var(--border-warm); text-transform: none; font-weight: 600; padding: 12px 24px; }
.btn-whatsapp-subtle:hover { background-color: var(--whatsapp-bg-hover); border-color: var(--whatsapp-border-hover); transform: translateY(-2px); }

/* The placeholder body of 3a (the components arrive in step 4) */
.site-main { min-height: 50vh; }
.placeholder-body { padding: var(--space-xl) 0; }
.placeholder-tag { font-family: var(--font-headings); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-terracotta); margin: 0 0 var(--space-sm); }
.placeholder-title { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 var(--space-md); }
.placeholder-copy { color: var(--text-muted); max-width: var(--layout-width-prose); font-size: 1.1rem; }

/* Footer (footer-simple, the only one the live site used) */
.site-footer-simple { background-color: #FAF7F2; border-top: 1px solid var(--border-warm); padding: 100px 0 60px; width: 100%; }
.site-footer-simple .container { max-width: 800px; text-align: center; }
.footer-tag { display: block; font-family: var(--font-headings); color: var(--accent-terracotta); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-email-trigger { position: relative; display: inline-block; font-family: var(--font-headings); font-weight: 700; color: var(--text-primary); line-height: 1.1; cursor: pointer; margin: 0 0 var(--space-xl); background: none; border: 0; padding: 0; transition: var(--transition-smooth); word-break: break-word; }
.footer-email-trigger:hover { color: var(--accent-terracotta); transform: scale(1.02); }
.footer-email-trigger::after { content: attr(data-copy-label); position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%) translateY(5px); font-size: 0.8rem; color: var(--text-light); font-weight: 500; opacity: 0; letter-spacing: 0.02em; transition: var(--transition-smooth); pointer-events: none; white-space: nowrap; }
.footer-email-trigger:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.whatsapp-footer-wrapper { margin-bottom: 40px; }
.footer-phone { margin: 0 0 32px; }
.footer-phone a { font-family: var(--font-headings); font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: 0.02em; }
/* H6.2 (adopted 19 Oct, every page): the footer's small lines in muted ink at 400, 9.3:1 (were --text-light at 300, 2.81:1) */
.footer-credits, .footer-identity { color: var(--text-muted); font-weight: 400; margin: 0; }
.footer-identity { margin-top: 6px; }
.footer-legal-links { list-style: none; padding: 0; margin: 10px 0 0; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-weight: 400; color: var(--text-muted); }
.footer-legal-links li { margin: 0; }
.footer-legal-links a, .footer-cookie-settings { text-decoration: none; color: inherit; background: none; border: 0; padding: 0; font-size: inherit; font-weight: inherit; cursor: pointer; transition: var(--transition-smooth); }
.footer-legal-links a:hover, .footer-cookie-settings:hover { color: var(--accent-terracotta); }

/* The copy toast */
.toast-notification { position: fixed; bottom: 40px; right: 40px; background-color: var(--text-primary); color: var(--bg-canvas); padding: 18px 28px; border-radius: 12px; display: flex; align-items: center; gap: 12px; font-family: var(--font-headings); font-weight: 500; box-shadow: var(--shadow-hover); z-index: 999999; transform: translateY(120px) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.25); }
.toast-notification.active { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.toast-check-icon { width: 20px; height: 20px; background-color: var(--success-green); color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-check-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 576px) {
  .site-footer-simple { padding: 60px 0 40px; }
  .toast-notification { bottom: 24px; left: 24px; right: 24px; justify-content: center; }
}

/* ── Step 4 (R-98, build-p4): the page components, ported from the theme's widgets with their class names ──────────
 * Sources: rb-value-prop.css, rb-process-cards.css, rb-community.css, the hero's and the carousel's inline <style>,
 * style.css's page heading and tea-link, and each live page's own Elementor rules (post-<id>.css, fetched 19 Oct),
 * written here once per page as `.layout-<layout>.lang-<en|cs>` rules. Not ported: the 100vw negative-margin bleeds
 * (a full-width part is simply full width here), D9's per-instance inline CSS, Font Awesome's webfont (inline SVG). */
:where(.part) p { margin: 0; }
.pt-hero-title b, .page-title b, .section-title b, .community-title b { font-weight: 800; text-transform: uppercase; }
.p-hero .pt-hero-copy b, .page-intro b, .community-desc b, .pillar-subtext b, .rb-process-card-copy b, .pt-review-quote-text b { font-weight: var(--rb-emphasis-weight); color: var(--rb-emphasis-color); }
:root { --rb-emphasis-weight: 700; --rb-emphasis-color: var(--text-primary); --rb-copy-color: var(--text-muted); }
.bg-style-dark { --rb-copy-color: rgba(250, 247, 242, 0.86); --rb-emphasis-color: #FFFFFF; }
.bg-style-terracotta { --rb-copy-color: rgba(250, 247, 242, 0.95); --rb-emphasis-color: #FFFFFF; }

/* tea-link (style.css) */
.tea-link { font-family: var(--font-headings); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-terracotta); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: var(--transition-smooth); display: inline-flex; align-items: center; gap: 12px; }
.tea-link:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.tea-link svg.tea-arrow { width: 16px; height: 16px; fill: currentColor; stroke: none; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); flex-shrink: 0; margin-top: -2px; margin-left: 2px; }
.tea-link:hover svg.tea-arrow { transform: translateX(5px); }
.tea-link.no-underline, .tea-link.no-underline:hover { border-bottom-color: transparent; }
.tea-link.underline-tuned-down { border-bottom-color: rgba(165, 63, 43, 0.35); }
.tea-link.no-underline-hover:hover { border-bottom-color: transparent; }

/* rb_hero (its inline <style>, full variant) */
.pt-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
.pt-hero-text { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.pt-hero-subtitle { font-family: var(--font-headings); color: var(--accent-terracotta); font-weight: 400; display: inline-flex; align-items: center; gap: 12px; line-height: 1.7; }
.pt-hero-subtitle::before { content: ''; width: 40px; height: 2px; background-color: currentColor; display: inline-block; }
.pt-hero-title { line-height: 0.9; color: var(--text-primary); font-weight: 300; letter-spacing: -0.04em; margin-top: 0.67em; margin-bottom: 24px; }
.pt-hero-title b { line-height: 1.2; color: var(--text-primary); }
.pt-hero-copy { color: var(--text-primary); font-weight: 300; max-width: 580px; }
.pt-hero-copy p { color: var(--text-primary); margin: 0 0 1em; }
.pt-hero-ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pt-hero-ctas .btn-charcoal-primary { background-color: var(--text-primary); color: var(--bg-canvas); text-decoration: none; padding: 14px 32px; border-radius: 30px; font-family: var(--font-headings); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: var(--transition-tactile); border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.pt-hero-ctas .btn-charcoal-primary:hover { background-color: var(--accent-terracotta); border-color: var(--accent-terracotta); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(165, 63, 43, 0.2); color: #FFFFFF; }
.pt-hero-visual { display: inline-flex; justify-content: center; align-items: center; position: relative; width: fit-content; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; align-self: center; }
.pt-hero-has-spin::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed var(--accent-terracotta); animation: rotateDashed 30s linear infinite; z-index: 1; pointer-events: none; }
.pt-hero-visual .profile-photo { display: block; border-radius: 50%; object-fit: cover; aspect-ratio: 1 / 1; width: 400px; max-width: 100%; height: auto; filter: drop-shadow(0 20px 45px rgba(30, 28, 28, 0.16)); border: 4px solid var(--bg-canvas); z-index: 2; transition: var(--transition-smooth); }
.pt-hero-visual .profile-photo:hover { transform: scale(1.03); }
@keyframes rotateDashed { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.p-hero .pt-hero-grid { margin-top: 60px; margin-bottom: 120px; }
.p-hero .pt-hero-subtitle { margin-bottom: 24px; }
.p-hero .pt-hero-copy { margin-bottom: 40px; }
.p-hero .pt-hero-ctas { margin-top: 30px; }
@media (max-width: 1024px) {
  .pt-hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .pt-hero-text { align-items: center; text-align: center; }
  .pt-hero-subtitle::before { display: none; }
  .pt-hero-ctas { justify-content: center; }
  .pt-hero-mobile-image-first .pt-hero-visual { order: -1; }
  .pt-hero-visual .profile-photo { width: 250px; }
}
@media (max-width: 767px) {
  .p-hero .pt-hero-copy { margin-bottom: 20px; }
  .p-hero .pt-hero-grid { width: auto; padding: 0 20px; }
  .lang-cs .p-hero .pt-hero-visual .profile-photo { width: 350px; }
}

/* rb_page_heading (style.css) */
.pt-page-header { display: block; width: 100%; text-align: center; margin-left: auto; margin-right: auto; }
.pt-page-header .section-tag { display: block; font-family: var(--font-headings); letter-spacing: 0.15em; font-weight: 700; text-transform: uppercase; color: var(--accent-terracotta); margin: 0 0 12px; line-height: 1.7; }
.pt-page-header .page-title { font-family: var(--font-headings); line-height: 1.05; font-weight: 300; margin: 0 0 24px; color: var(--text-primary); }
/* R-185: the section is the whole page wide, so a long centred title ran past line A (1..1279 at 1280 px); held to it */
.pt-page-header .page-title { max-width: min(90vw, var(--layout-width-boxed)); margin-left: auto; margin-right: auto; }
.lang-cs .pt-page-header .page-title b { line-height: 1.25; }
.pt-page-header .page-intro { display: inline-block; width: 100%; font-family: var(--font-body); font-size: 1.2rem; color: var(--text-muted); font-weight: 300; line-height: 1.6; }
.pt-page-header .page-intro p { color: var(--text-muted); margin: 0 0 1em; }
.pt-page-header .page-intro p:last-child { margin-bottom: 0; }

/* rb_value_prop (rb-value-prop.css, dark) */
.rb-value-prop-widget { padding: 90px 0; position: relative; z-index: 10; width: 100%; overflow: hidden; background-color: #1E1C1C; color: #FAF7F2; border-top: 1px solid rgba(250, 247, 242, 0.08); border-bottom: 1px solid rgba(250, 247, 242, 0.08); }
.rb-value-prop-widget .container { width: auto; max-width: var(--layout-width-boxed); margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; }
@media (min-width: 993px) { .rb-value-prop-widget .container { padding-left: 0; padding-right: 0; } }
.rb-value-prop-widget .ambient-glow-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; clip-path: inset(0); background-image: radial-gradient(circle at 50% 30%, rgba(196, 90, 69, 0.16) 0%, rgba(196, 90, 69, 0.104) 25%, rgba(196, 90, 69, 0.048) 50%, rgba(196, 90, 69, 0.016) 75%, transparent 45%); filter: blur(40px); }
.rb-value-prop-widget .pillars-header { margin-bottom: 64px; text-align: center; }
.rb-value-prop-widget .section-tag { font-family: var(--font-headings); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 14px; display: block; color: var(--accent-sandstone); line-height: 1.7; }
.rb-value-prop-widget .section-title { font-family: var(--font-headings); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: #FFFFFF; }
.rb-value-prop-widget .section-title b { color: var(--accent-terracotta); }
.rb-value-prop-widget .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.rb-value-prop-widget .pillar-card { background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(250, 247, 242, 0.08); border-top: 2px solid rgba(209, 160, 130, 0.3); border-radius: 14px; padding: 44px 36px; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 24px; text-align: left; }
.rb-value-prop-widget .pillar-card:hover { transform: translateY(-6px); background-color: rgba(255, 255, 255, 0.06); border-color: rgba(223, 183, 157, 0.25); border-top-color: rgba(223, 183, 157, 0.65); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4); }
.rb-value-prop-widget .icon-wrapper-clean { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.rb-value-prop-widget .icon-wrapper-clean svg { display: block; width: 50px; height: 50px; stroke: var(--accent-sandstone); stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.rb-value-prop-widget .pillar-card:hover .icon-wrapper-clean svg { transform: scale(1.05); }
.rb-value-prop-widget.icon-fill-accent_dual svg { fill: rgba(223, 183, 157, 0.16); filter: drop-shadow(0 4px 14px rgba(223, 183, 157, 0.25)); }
.rb-value-prop-widget.icon-fill-accent_dual .pillar-card:hover svg { fill: rgba(223, 183, 157, 0.28); stroke: #F7E3D3; }
.rb-value-prop-widget .pillar-content { flex: 1; min-width: 0; }
.rb-value-prop-widget .pillar-title { font-family: var(--font-headings); font-size: 1.45rem; font-weight: 700; color: #FFFFFF; margin: 0 0 20px; letter-spacing: -0.01em; line-height: 1.25; }
.rb-value-prop-widget .pillar-subtext { font-family: var(--font-body); font-size: 0.98rem; color: rgba(250, 247, 242, 0.75); line-height: 1.65; margin: 0; font-weight: 400; --rb-emphasis-color: rgba(250, 247, 242, 0.9); }
.lang-en .rb-value-prop-widget .pillars-header { margin-bottom: 75px; }
.lang-en .rb-value-prop-widget .section-tag { margin-bottom: 50px; }
.lang-en .rb-value-prop-widget .pillar-subtext { line-height: 1.6rem; }
@media (max-width: 992px) { .rb-value-prop-widget .pillars-grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 767px) {
  .rb-value-prop-widget { padding: 50px 0; }
  .rb-value-prop-widget .container { padding: 0 20px; }
  .rb-value-prop-widget .pillars-header, .lang-en .rb-value-prop-widget .pillars-header { margin-bottom: 36px; }
  .rb-value-prop-widget .section-tag, .lang-en .rb-value-prop-widget .section-tag { margin-bottom: 37px; }
  .rb-value-prop-widget .pillar-card { padding: 30px 22px; flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .rb-value-prop-widget .icon-wrapper-clean { margin-bottom: 20px; }
  .rb-value-prop-widget .icon-wrapper-clean svg { width: 82px; height: 82px; }
  .rb-value-prop-widget .pillar-title { font-size: 1.25rem; }
  .rb-value-prop-widget .pillar-subtext { font-size: 0.95rem; }
}

/* rb_reviews_carousel (its inline <style>, and the page's card rules) */
.pt-reviews-marquee-wrap { overflow: hidden; width: 100%; position: relative; padding: 20px 0; -webkit-user-select: none; user-select: none; }
.pt-reviews-marquee-wrap.has-edge-fade { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
@keyframes ptReviewsScroll { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.pt-reviews-track { display: flex; width: max-content; will-change: transform; animation: ptReviewsScroll var(--scroll-duration, 100s) linear infinite reverse; }
.pt-reviews-marquee-wrap:hover .pt-reviews-track, .pt-reviews-track:focus-within { animation-play-state: paused; }
.pt-reviews-list { display: flex; flex-shrink: 0; align-items: flex-start; gap: 30px; padding-right: 30px; }
.pt-review-card { flex-shrink: 0; display: flex; flex-direction: column; width: 950px; min-height: 400px; padding: 50px; background-color: #FAF7F2; border: 1px solid rgba(30, 28, 28, 0.04); border-left: 4px solid var(--accent-terracotta); border-radius: 0 12px 12px 0; }
.pt-review-tag { font-family: var(--font-headings); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; display: block; color: var(--accent-terracotta); margin-bottom: 20px; }
.pt-review-quote { font-family: var(--font-body); font-size: 1.25rem; font-weight: 300; line-height: 1.7; flex-grow: 1; display: flex; flex-direction: column; color: var(--text-muted); margin-bottom: 30px; }
.pt-review-quote-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pt-review-card.is-expanded .pt-review-quote-text { display: block; overflow: visible; -webkit-line-clamp: none; }
.pt-read-more-toggle { font-family: var(--font-headings); font-weight: 700; color: var(--accent-terracotta); cursor: pointer; margin-top: 10px; display: inline-block; text-transform: uppercase; letter-spacing: 0.05em; align-self: flex-start; background: none; border: 0; padding: 0; }
.pt-read-more-toggle[hidden] { display: none; }
.pt-review-author { display: flex; align-items: center; gap: 16px; }
.pt-review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; }
.pt-review-author-meta { display: flex; flex-direction: column; }
.pt-review-author-name { font-family: var(--font-headings); font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.pt-review-author-title { font-family: var(--font-body); color: var(--text-muted); }
.lang-en .p-reviews { margin: 150px 0; }
.lang-cs .p-reviews { margin: 0 0 150px; }
@media (max-width: 768px) {
  .pt-reviews-marquee-wrap.has-edge-fade { -webkit-mask-image: none; mask-image: none; }
  .pt-reviews-marquee-wrap { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pt-reviews-marquee-wrap::-webkit-scrollbar { display: none; }
  .pt-reviews-track { animation: none; transform: none; will-change: auto; }
  .pt-reviews-list { gap: 16px; padding-left: 20px; padding-right: 20px; }
  .pt-reviews-list[aria-hidden="true"] { display: none; }
  .pt-review-card { width: 85vw; max-width: 85vw; min-height: auto; padding: 24px; scroll-snap-align: start; }
  .pt-review-quote { font-size: 1rem; margin-bottom: 20px; }
}
@media (max-width: 767px) { .lang-en .p-reviews, .lang-cs .p-reviews { margin: 50px 0; } }

/* rb_process_cards (rb-process-cards.css) */
.rb-process-cards-section { width: min(90vw, var(--layout-width-boxed)); max-width: 100%; margin-inline: auto; }
.rb-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1365px) { .rb-process-grid:where(:has(> :nth-child(4)):not(:has(> :nth-child(5)))) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 608px) { .rb-process-grid:where(:has(> :nth-child(4)):not(:has(> :nth-child(5)))) { grid-template-columns: 1fr; } }
.rb-process-card { background: var(--card-bg); border: 1px solid var(--border-warm); border-radius: 20px; padding: 32px; position: relative; transition: var(--transition-smooth); }
.rb-process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.rb-process-num { font-family: var(--font-headings); font-weight: 800; color: var(--accent-sandstone); line-height: 1; margin-bottom: 18px; }
.rb-process-card-title { font-family: var(--font-headings); font-weight: 600; color: var(--text-primary); margin: 0 0 10px; }
.rb-process-card-copy { color: var(--text-muted); line-height: 1.6; margin: 0; --rb-emphasis-color: rgba(30, 28, 28, 0.9); }
@media (max-width: 767px) { .rb-process-card { text-align: center; } }

/* rb_community (rb-community.css, terracotta) */
.rb-community-widget { padding: 120px 0; position: relative; z-index: 10; width: 100%; overflow-x: clip; background-color: var(--accent-terracotta); color: #FAF7F2; }
.rb-community-widget .community-container { width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; }
.rb-community-widget .community-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }
.rb-community-widget .community-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; }
.rb-community-widget .section-tag { font-family: var(--font-headings); letter-spacing: 0.15em; font-weight: 700; text-transform: uppercase; margin-bottom: 16px; display: block; width: 100%; color: rgba(250, 247, 242, 0.9); line-height: 1.7; }
.rb-community-widget .community-title { font-family: var(--font-headings); line-height: 1.05; margin: 0 0 24px; font-weight: 800; letter-spacing: -0.02em; width: 100%; color: #FFFFFF; }
.rb-community-widget .community-desc { font-family: var(--font-body); font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 300; line-height: 1.7; margin-bottom: 36px; max-width: 640px; width: 100%; color: rgba(250, 247, 242, 0.95); }
.rb-community-widget .community-desc p { margin-bottom: 12px; }
.rb-community-widget .community-desc p:last-child { margin-bottom: 0; }
.rb-community-widget .community-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 40px; width: 100%; }
.rb-community-widget .stat-card { flex: 1 1 140px; min-width: 130px; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.rb-community-widget .stat-card:hover { transform: translateY(-2px); }
.rb-community-widget .stat-number { font-family: var(--font-headings); font-weight: 800; line-height: 1.1; margin-bottom: 6px; letter-spacing: -0.02em; color: #FFFFFF; }
.rb-community-widget .stat-label { font-family: var(--font-headings); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250, 247, 242, 0.8); line-height: 1.7; }
.rb-community-widget .community-actions { margin-bottom: 16px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; width: 100%; }
.rb-community-widget .tea-link { color: #FAF7F2; padding: 6px 0; margin-top: -2px; margin-left: 2px; }
.rb-community-widget .tea-link:hover { color: #FFFFFF; }
.rb-community-widget .community-visual { position: relative; width: 100%; }
.rb-community-widget .community-carousel-wrapper { position: relative; width: 100%; }
.rb-community-widget .community-carousel-wrapper::before { content: ''; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; background: radial-gradient(circle, #A53F2B 0%, transparent 70%); filter: blur(78px); z-index: 0; pointer-events: none; opacity: 0.75; }
.lang-cs .rb-community-widget .community-carousel-wrapper::before { top: 5%; left: 5%; width: 90%; height: 90%; filter: blur(45px); opacity: 0.85; }
.rb-community-widget .community-carousel { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 25px 55px rgba(0, 0, 0, 0.3); background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); }
.rb-community-widget .community-slides { position: relative; width: 100%; height: 100%; }
.rb-community-widget .community-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); transform: scale(1.03); }
.rb-community-widget .community-slide.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; }
.rb-community-widget .community-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-community-widget .community-dots { position: absolute; bottom: 18px; right: 20px; z-index: 10; display: flex; gap: 8px; align-items: center; background-color: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.15); }
.rb-community-widget .community-dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); border: none; padding: 0; cursor: pointer; transition: var(--transition-smooth); }
.rb-community-widget .community-dot.active { background-color: var(--accent-terracotta); width: 20px; border-radius: 10px; }
@media (max-width: 992px) {
  .rb-community-widget { padding: 90px 0; }
  .rb-community-widget .community-grid { display: flex; flex-direction: column; gap: 50px; }
  .rb-community-widget.mobile-pic-first .community-visual { order: -1; }
  .rb-community-widget .community-carousel { aspect-ratio: 16 / 10; }
  .rb-community-widget .community-text { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 1024px) {
  .rb-community-widget .community-text { align-items: center; text-align: center; }
  .rb-community-widget .community-actions { justify-content: center; }
  .rb-community-widget .section-tag { margin-bottom: 32px; }
  .lang-en .rb-community-widget .community-title { margin-bottom: 23px; }
  .lang-en .rb-community-widget .community-desc { margin-bottom: 52px; }
  .lang-en .rb-community-widget .community-stats { margin-bottom: 54px; gap: 0; }
}
@media (max-width: 767px) {
  .rb-community-widget { padding: 70px 0; }
  .rb-community-widget .community-stats, .lang-en .rb-community-widget .community-stats { gap: 30px; margin-bottom: 47px; }
  .rb-community-widget .stat-card { flex: 1 1 40%; min-width: 110px; }
  .rb-community-widget .community-desc, .lang-en .rb-community-widget .community-desc { margin-bottom: 51px; }
  .rb-community-widget .community-actions { margin-bottom: 23px; }
}
@media (max-width: 480px) { .rb-community-widget .stat-card { flex: 1 1 100%; } }

/* HOME: today's order and spacing (post-126.css .com, post-423.css .cz). 3c's form (`.rb-intake`) is drawn after the
   parts; the column's order puts it under the form's heading, where it is today. */
.layout-home .site-main { display: flex; flex-direction: column; }
.layout-home .p-hero { order: 1; }
.layout-home .p-value { order: 2; }
.layout-home .p-reviews_heading { order: 3; }
.layout-home .p-reviews { order: 4; }
.layout-home .p-form { order: 5; }
.layout-home .site-main > .rb-intake { order: 6; }
.layout-home .p-steps_heading { order: 7; }
.layout-home .p-steps { order: 8; }
.layout-home .p-community { order: 9; }
.layout-home .p-reviews_heading { max-width: 800px; margin-top: 150px; margin-bottom: 60px; }
.layout-home .p-form { max-width: 80%; margin-bottom: 25px; }
.layout-home .p-form .page-intro { max-width: 54%; }
.layout-home .site-main > .rb-intake { width: 800px; max-width: 100%; align-self: center; }
.lang-en.layout-home .p-form { padding-top: 100px; background: #FFFFFF; box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax); }
.lang-en.layout-home .site-main > .rb-intake { padding-bottom: 100px; background: #FFFFFF; box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax); }
.lang-cs.layout-home .site-main > .rb-intake { margin-bottom: 150px; }
.layout-home .p-steps_heading { margin-bottom: 60px; }
.lang-en.layout-home .p-steps_heading { margin-top: 150px; }
.lang-en.layout-home .p-steps { margin-bottom: 150px; }
.lang-cs.layout-home .p-steps_heading { padding-top: 100px; }
.lang-cs.layout-home .p-steps { padding-bottom: 100px; }
@media (max-width: 767px) {
  .layout-home .p-form .page-intro, .layout-home .p-reviews_heading .page-intro { max-width: 100%; }
  .lang-en.layout-home .p-steps { margin-bottom: 100px; }
  .lang-cs.layout-home .site-main > .rb-intake { margin-bottom: 100px; }
  .lang-cs.layout-home .p-steps_heading { padding-top: 50px; }
  .lang-cs.layout-home .p-steps { padding-bottom: 50px; }
}
/* the shout on its own line where today's title has a <br> before it */
.lang-en .p-hero .pt-hero-title b, .lang-cs.layout-home .p-form .page-title b, .lang-cs.layout-home .p-steps_heading .page-title b { display: block; }

/* ==========================================================================
   The English homepage as Richard ADOPTED it, 19 Oct (R-98_S4_DESIGN.md § 0.1, § W): the designer's rules of
   R-98_S4_UI.css without the mockup's scope, on `.lang-en.layout-home` only (the Czech home and About keep today's
   look until their own round). H6.2 and H6.3 are the shared chrome, above. Not adopted: H6.1, H6.6.
   ========================================================================== */
/* H1 How it goes moves up: after the three cards, before the reviews and the form. Only `order` changes */
.lang-en.layout-home .p-steps_heading { order: 3; }
.lang-en.layout-home .p-steps { order: 4; margin-bottom: 0; }
.lang-en.layout-home .p-reviews_heading { order: 5; }
.lang-en.layout-home .p-reviews { order: 6; }
.lang-en.layout-home .p-form { order: 7; }
.lang-en.layout-home .site-main > .rb-intake { order: 8; }
@media (max-width: 767px) {
  .lang-en.layout-home .p-steps_heading { margin-top: 100px; }
  .lang-en.layout-home .p-steps { margin-bottom: 50px; }
}
/* H2 laptop: the reviews stand still, three cards in a row, the loop's copy not drawn; the phone keeps the swipe row */
@media (min-width: 769px) {
  .lang-en.layout-home .pt-reviews-marquee-wrap.has-edge-fade { -webkit-mask-image: none; mask-image: none; }
  .lang-en.layout-home .pt-reviews-track { animation: none; transform: none; width: auto; will-change: auto; }
  .lang-en.layout-home .pt-reviews-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; width: min(90vw, var(--layout-width-boxed)); margin: 0 auto; padding: 0; flex-shrink: 1; }
  .lang-en.layout-home .pt-reviews-list[aria-hidden="true"] { display: none; }
  .lang-en.layout-home .pt-review-card { width: auto; min-height: 0; padding: 36px; }
  .lang-en.layout-home .pt-review-quote { font-size: 1.05rem; }
}
/* H3 laptop: the form's heading beside the form, 4 : 7, on the form's one white band; the phone keeps it above.
   Only where 3c's form is on the page (`:has`), so a home without it stays a column. 3c's markup is untouched */
@media (min-width: 993px) {
  .lang-en.layout-home .site-main:has(> .rb-intake) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .lang-en.layout-home .site-main:has(> .rb-intake) > * { grid-column: 1 / -1; }
  .lang-en.layout-home .site-main:has(> .rb-intake) > .p-form { grid-column: 1; align-self: start; max-width: none; width: auto; margin: 0 0 0 max(5vw, calc((100vw - var(--layout-width-boxed)) / 2)); padding: 100px 48px 100px 0; text-align: left; position: sticky; top: 90px; z-index: 2; background: transparent; box-shadow: none; clip-path: none; }
  .lang-en.layout-home .site-main:has(> .rb-intake) > .p-form .page-intro { max-width: 46ch; }
  /* stretch, never start: the form is a size container, and shrink-to-fit makes it 0 px wide */
  .lang-en.layout-home .site-main:has(> .rb-intake) > .rb-intake { grid-column: 2; width: auto; max-width: none; align-self: start; justify-self: stretch; margin: 0 max(5vw, calc((100vw - var(--layout-width-boxed)) / 2)) 0 0; padding: 100px 0; }
}
/* H4 the dashed ring stays, and stops turning */
.lang-en.layout-home .pt-hero-has-spin::before { animation: none; }
/* H5 Middle: the cards keep their icons, the glow goes */
.lang-en.layout-home .rb-value-prop-widget .ambient-glow-layer { display: none; }
/* H6.4 the stat labels on terracotta in full cream (were 80%, 4.35:1; now 5.9:1) */
.lang-en.layout-home .rb-community-widget .stat-label { color: #FAF7F2; }
/* H6.5 running text 17 px and over (cards, steps), a reviewer's role 14 px */
.lang-en.layout-home .rb-value-prop-widget .pillar-subtext { font-size: 1.0625rem; line-height: 1.65; }
.lang-en.layout-home .rb-process-card-copy { line-height: 1.65; }

/* ===== 3c's form (was intake.css; the mockup loads it here, before the design) ===== */
/* rb-site's INTAKE FORMS (R-98 step 3c): docs/tasks/R-98_3C_UI.css half A, PORTED AS DRAWN (R-98_3C_DESIGN.md § 0.3),
   then the few rules the build adds below the line (the honeypot, the date picker, the hidden states). On site.css's
   tokens. No em dash in anything it renders. */

/* ==========================================================================
   A. rb-site: the two public forms (DESIGN § 0.1)
   One column on a phone, two on a laptop. The form answers to ITS OWN WIDTH
   (a container query on .rb-intake), not the window's: below 600 px it is the
   phone layout wherever it sits.
   ========================================================================== */

.rb-intake--one {
  --f-line: rgba(30, 28, 28, .12);
  --f-bubble-line: rgba(30, 28, 28, .18);
  --f-placeholder: rgba(30, 28, 28, .5);
  --f-field-tint: #FAF8F3;
  --f-focus-ring: rgba(165, 63, 43, .12);
  --f-press: #8C3020;
  --f-err: var(--rb-error);
  --f-err-ring: var(--rb-error-soft);
  --f-ok: #1E6B4B;
  --f-ok-bg: #DFEFE6;
  --f-ok-line: #A9CFBB;
  --f-ok-ink: #2A6E50;
  container: intake / inline-size;
  max-width: 780px;
  margin: 0 auto;
}

/* the box: two columns, the air of round 5 (gaps 28 × 32, padding 44 × 48) */
.rb-intake--one .bse-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  margin: 0;
  padding: 44px 48px;
  border: 1px solid var(--f-line);
  border-radius: 20px;
  background: var(--input-bg, #F5F2EA);
  box-shadow: 0 4px 16px rgba(30, 28, 28, .02);
  text-align: left;
}
.rb-intake--one fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.rb-intake--one .bse-form-box-heading { grid-column: 1 / -1; margin-bottom: 8px; }
.rb-intake--one .bse-form-box-title { margin: 0 0 4px; color: var(--text-primary); font-family: var(--font-headings); font-weight: 800; line-height: 1.25; }
.rb-intake--one .bse-form-box-desc { margin: 0; color: var(--text-muted); line-height: 1.7; }

/* the optional fields follow name and phone with no divider and no title (§ 1.10b) */
.rb-intake--one .bse-form__more { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; grid-column: 1 / -1; }

.rb-intake--one .bse-form__field { display: flex; flex-direction: column; min-width: 0; grid-column: 1 / -1; }
.rb-intake--one .bse-form__field.is-half { grid-column: span 1; }

.rb-intake--one .bse-form__label {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  color: var(--text-primary);
  font-family: var(--font-headings);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rb-intake--one .bse-form__required-mark { color: var(--f-err); font-weight: 700; }
/* the date a move-in chip sets, beside its title: MOVE-IN → 14 Nov (D9) */
.rb-intake--one .bse-form__date-preset-result { margin-left: 10px; color: var(--text-muted); font-weight: 500; line-height: 1; font-family: var(--font-body); letter-spacing: 0; text-transform: none; }

/* text, the two-line notes box, the phone and the price boxes */
.rb-intake--one .bse-form__input,
.rb-intake--one .bse-form__textarea,
.rb-intake--one .ph {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--f-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(30, 28, 28, .02);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.rb-intake--one .bse-form__input { min-height: 50px; padding: 14px 20px; outline: none; }
.rb-intake--one .bse-form__textarea { height: calc(2 * 1.5em + 28px); padding: 14px 20px; line-height: 1.5; outline: none; resize: vertical; }
.rb-intake--one .bse-form__input::placeholder,
.rb-intake--one .bse-form__textarea::placeholder,
.rb-intake--one .ph__num::placeholder { color: var(--f-placeholder); }
.rb-intake--one .bse-form__input:focus,
.rb-intake--one .bse-form__textarea:focus,
.rb-intake--one .ph:focus-within { border-color: var(--accent-terracotta); box-shadow: 0 0 0 4px var(--f-focus-ring); }

/* the phone: the dialling code only (+420 preselected, 84 px; people know their own code) and the number; a price: the number and its unit */
.rb-intake--one .ph { display: flex; align-items: stretch; height: 50px; overflow: hidden; }
.rb-intake--one .ph__cc {
  flex: none;
  width: 84px;
  padding: 0 24px 0 12px;
  border: 0;
  border-right: 1px solid var(--f-line);
  border-radius: 0;
  background: var(--f-field-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E1C1C'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 6px center / 18px;
  color: var(--text-primary);
  font-weight: 600; line-height: normal; font-family: var(--font-body);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.rb-intake--one .ph__cc:focus-visible { outline: 2px solid var(--accent-terracotta); outline-offset: -2px; }
.rb-intake--one .ph__num { flex: 1; min-width: 0; padding: 0 16px; border: 0; outline: none; background: transparent; color: inherit; font: inherit; }
.rb-intake--one .ph__unit { display: flex; flex: none; align-items: center; padding: 0 14px; border-left: 1px solid var(--f-line); background: var(--f-field-tint); color: var(--text-muted); font-weight: 500; line-height: normal; font-family: var(--font-body); }

/* bubbles: one size in a group, one row a group (--cols set per group: 3, 4 or 6) */
.rb-intake--one .bubbles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.rb-intake--one .bse-form__checkbox-label,
.rb-intake--one .bse-form__date-preset {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 4px;
  border: 1.5px solid var(--f-bubble-line);
  border-radius: 30px;
  background: #fff;
  color: var(--text-primary);
  font-family: var(--font-headings);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  appearance: none;
}
.rb-intake--one .bse-form__checkbox { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; }
.rb-intake--one .bse-form__checkbox-label:hover,
.rb-intake--one .bse-form__date-preset:hover { border-color: var(--text-primary); background: rgba(30, 28, 28, .06); }
.rb-intake--one .bse-form__checkbox-label:has(:checked),
.rb-intake--one .bse-form__date-preset[aria-pressed="true"] {
  border-color: var(--accent-terracotta);
  background: var(--accent-terracotta);
  box-shadow: 0 4px 14px rgba(165, 63, 43, .28);
  color: #fff;
}
.rb-intake--one .bse-form__checkbox-label:focus-within,
.rb-intake--one .bse-form__date-preset:focus-visible { outline: 2px solid var(--accent-terracotta); outline-offset: 2px; }

/* a refusal, in the survey's words */
.rb-intake--one .bse-form__error { display: flex; align-items: center; margin-top: 6px; color: var(--f-err); font-weight: 500; }
.rb-intake--one .bse-form__field--has-error .bse-form__input,
.rb-intake--one .bse-form__field--has-error .ph { border-color: var(--f-err); box-shadow: 0 0 0 4px var(--f-err-ring); }

/* Turnstile: invisible unless Cloudflare is unsure; then its flexible size, edge to edge above Send */
.rb-intake--one .bse-form__turnstile { grid-column: 1 / -1; }
/* P4-6 (§ 1h.5): while Cloudflare draws nothing the cell is 0 px tall but still a grid row, so Send sat TWO gaps below the
   notes (56 px laptop, 48 phone; the mockup 28 and 24). Out of the flow until drawn: `intake.js` sets .is-drawn by its height. */
.rb-intake--one .bse-form { position: relative; }
.rb-intake--one .bse-form__turnstile:not(.is-drawn) { position: absolute; left: 48px; right: 48px; bottom: 0; pointer-events: none; }

/* when Send fails (strings 4 to 6): every answer stays; the message sits right above Send, the theme's soft rust */
.rb-intake--one .bse-form__notice { grid-column: 1 / -1; margin: 0; padding: 14px 20px; border: 1px solid color-mix(in srgb, var(--rb-error) 30%, var(--rb-surface)); border-radius: 12px; background: var(--rb-error-soft); color: var(--f-err); font-weight: 500; line-height: 1.5; }
/* while it sends: "Sending…" / "Už to frčí..", pressed once only */
.rb-intake--one .bse-form__submit:disabled,
.rb-intake--one .bse-form__submit[aria-busy="true"] { opacity: .7; cursor: not-allowed; }

/* Send, then the privacy line under it, then WhatsApp under that (§ 1.9) */
.rb-intake--one .bse-form__submit {
  width: 100%;
  min-height: 56px;
  padding: 18px 28px;
  border: 2px solid var(--accent-terracotta);
  border-radius: 30px;
  background: var(--accent-terracotta);
  color: #fff;
  font-family: var(--font-headings);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.rb-intake--one .bse-form__submit:hover { border-color: var(--f-press); background: var(--f-press); }
.rb-intake--one .bse-form__submit:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.rb-intake--one .form-notice { grid-column: 1 / -1; margin: -14px 0 0; color: var(--text-muted); line-height: 1.5; text-align: center; }
.rb-intake--one .bse-form__consent-link { color: var(--accent-terracotta); text-decoration: underline; }

/* the theme's tea link (its style.css § 5), the arrow rule 3a's site.css lacks */
.rb-intake--one .tea-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 2px;
  border-bottom: 2px solid rgba(165, 63, 43, .35);
  color: var(--accent-terracotta);
  font-family: var(--font-headings);
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}
.rb-intake--one .tea-link:hover { border-bottom-color: var(--text-primary); color: var(--text-primary); }
.rb-intake--one .tea-link svg.tea-arrow { flex: none; width: 16px; height: 16px; fill: currentColor; }

/* under the box: the line that looks safe, black, with a lock (§ 1.12 P2, § 1.13) */
.rb-intake--one .rb-intake__trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; color: var(--text-primary); font-weight: 500; }
.rb-intake--one .rb-intake__trust svg { flex: none; }

/* after a successful Send: the fold, and on .com the 50% offer with its condition in the line (R-118) */
.rb-intake--one .bse-form__done { padding: 36px 40px; border: 1px solid var(--f-ok-line); border-radius: 20px; background: var(--f-ok-bg); }
.rb-intake--one .bse-form__done .bse-form-box-heading { margin-bottom: 0; }
.rb-intake--one .bse-form__done .bse-form-box-title { color: var(--f-ok); }
.rb-intake--one .bse-form__done .bse-form-box-desc { color: var(--f-ok-ink); }
.rb-intake--one .done-offer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--f-ok-line); }
.rb-intake--one .done-offer__h { margin: 0; color: var(--text-primary); font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; }
.rb-intake--one .done-offer__p { margin: 2px 0 10px; color: var(--text-muted); }
.rb-intake--one .bse-form__done-again { margin-top: 20px; padding: 0; border: 0; background: none; color: var(--f-ok); line-height: normal; font-family: var(--font-body); text-decoration: underline; opacity: .7; cursor: pointer; }

/* the form below 600 px wide: one column, 44 px bubbles (a thumb's target) */
@container intake (max-width: 600px) {
  .rb-intake--one .bse-form { grid-template-columns: 1fr; gap: 24px; padding: 30px 22px; }
  .rb-intake--one .bse-form__turnstile:not(.is-drawn) { left: 22px; right: 22px; }
  .rb-intake--one .bse-form__more { grid-template-columns: 1fr; gap: 24px; }
  .rb-intake--one .bse-form__field.is-half { grid-column: 1 / -1; }
  .rb-intake--one .bubbles { gap: 6px; }
  .rb-intake--one .bubbles[style*="--cols:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rb-intake--one .bse-form__checkbox-label,
  .rb-intake--one .bse-form__date-preset { min-height: 44px; }
  .rb-intake--one .bse-form__done { padding: 28px 22px; }
}



/* ── the build's own (3c), on the same tokens ────────────────────────────── */
/* the honeypot: out of sight and out of reach, never display:none (some robots skip those) */
.rb-intake--one .bse-form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* *A date* opens the browser's own picker, under the four chips */
.rb-intake--one .bse-form__date { box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 16px; border: 1px solid var(--f-line); border-radius: 12px; background: #fff; color: var(--text-primary); font: .95rem var(--font-body); }
.rb-intake--one [hidden] { display: none !important; }
.rb-intake--one fieldset.bse-form__field--has-error .bubbles { outline: 2px solid var(--f-err-ring); outline-offset: 4px; border-radius: 30px; }
/* the CSP refuses an inline style attribute (style-src 'self'), so a group's columns are a class, not the mockup's --cols */
.rb-intake--one .bubbles--cols-3 { --cols: 3; }
.rb-intake--one .bubbles--cols-4 { --cols: 4; }
.rb-intake--one .bubbles--cols-6 { --cols: 6; }
@container intake (max-width: 600px) {
  .rb-intake--one .bubbles--cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== R-98_S4_UI.css ===== */
/* ==========================================================================
   R-98_S4_UI.css  ·  the site's pages, the FINAL design (design-p7, 20 Oct)
   The one source with R-98_S4_DESIGN.md § 0.0 (the coders' sheet). Colour and
   type: R-145_BRAND.css, loaded after this file. Overrides on build-p4's port
   (site.css) and 3c's form (intake.css). Laptop and phone are both FINAL.

   READ IN THIS ORDER (search for the marker):
   § SYS    the system: radius, shadow, motion, tags, focus, sending
   § SYS-2  Richard's answers: one primary button, light titles, three text sizes
   § ST     the form's states, the error mark, the small button
   § FF     the form's foot (consent and WhatsApp lines)
   § AF     the success state after the form, its motion
   § CZ3    the .cz site (letting only), the .cz form band
   Then the page blocks, in the order they were drawn (home, the service
   pages, Know a flat?, About, the reading layout, the 404s), each with the
   phone rules under it. A later block overrides an earlier one: the coder
   folds them into components; the result must look like the mockup.
   DEFERRED, not built now: every rule naming Chci prodat (page-cz-sell,
   sell-*). MOCKUP ONLY, never built: .mk-*, mark.mk-copy, [data-mk-focus],
   .page-states.
   ========================================================================== */
/* --------------------------------------------------------------------------
   H1  Order of the parts. How it goes comes after the offer, before the
       reviews and the form (the rebuild: after the form). Only `order`.
   -------------------------------------------------------------------------- */
.layout-home .p-hero { order: 1; }
.layout-home .p-fee { order: 2; }
.layout-home .p-steps_heading { order: 3; }
.layout-home .p-steps { order: 4; }
.layout-home .p-reviews_heading { order: 5; }
.layout-home .p-reviews { order: 6; }
.layout-home .p-form { order: 7; }
.layout-home .site-main > .rb-intake { order: 8; }
.layout-home .p-community { order: 9; }
/* the steps follow a dark section: 150 px above as the rebuild, and the reviews' own 150 px below */
:is(.lang-en, .lang-cs).layout-home .p-steps { margin-bottom: 0; }
/* --------------------------------------------------------------------------
   H2  The reviews stand still: three cards in a row. The marquee's copy is
       not drawn.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .pt-reviews-marquee-wrap.has-edge-fade { -webkit-mask-image: none; mask-image: none; }
  .pt-reviews-track { animation: none; transform: none; width: auto; will-change: auto; }
  .pt-reviews-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; width: min(90vw, var(--layout-width-boxed)); margin: 0 auto; padding: 0; flex-shrink: 1; }
  .pt-reviews-list[aria-hidden="true"] { display: none; }
  .pt-review-card { width: auto; min-height: 0; padding: 36px; }
  .pt-review-quote { font-size: 1.05rem; }
}
/* --------------------------------------------------------------------------
   H3  The form's heading stands beside the form (4 : 7 columns), on the
       form's one white band; it stays in view while he types. 3c's form
       markup is untouched; only where it sits changes. Every page that ends
       in the form: the home and the Fast Track (`.layout-service`).
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
  :is(.layout-home, .layout-service) .site-main { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  /* 7 of 11 columns: 3c's form stays well above its 600 px container breakpoint, its fields keep two columns */
  :is(.layout-home, .layout-service) .site-main > * { grid-column: 1 / -1; }
  :is(.layout-home, .layout-service) .p-form { grid-column: 1; align-self: start; max-width: none; width: auto; margin: 0 0 0 max(5vw, calc((100vw - var(--layout-width-boxed)) / 2)); padding: 100px 48px 100px 0; text-align: left; position: sticky; top: 90px; z-index: 2; }
  :is(.layout-home, .layout-service) .p-form .page-title { text-wrap: balance; }
  :is(.layout-home, .layout-service) .p-form .page-intro { max-width: 46ch; }
  /* stretch, never start: the form is a size container (container-type), and shrink-to-fit makes it 0 px wide */
  :is(.layout-home, .layout-service) .site-main > .rb-intake { grid-column: 2; width: auto; max-width: none; align-self: start; justify-self: stretch; margin: 0 max(5vw, calc((100vw - var(--layout-width-boxed)) / 2)) 0 0; padding: 100px 0; }
  /* ONE white band for the row: the form's (the rebuild's box-shadow 100vmax). The heading draws none, or, being on
     top for its sticky position, its band would cover the form */
  :is(.lang-en, .lang-cs):is(.layout-home, .layout-service) .p-form { background: transparent; box-shadow: none; clip-path: none; }
}
/* --------------------------------------------------------------------------
   H4  The photo's dashed ring stays, but does not turn.
   -------------------------------------------------------------------------- */
.pt-hero-has-spin::before { animation: none; }
/* --------------------------------------------------------------------------
   H5  THE DIRECT WAY (R-140 § 0.2): a new part, `p-fee`, in place of the
       rebuild's three dark cards (`p-value`, no longer in the home layout).
       Dark section, the theme's `rb-value-prop-widget bg-style-dark`.
       Laptop: left, the heading and the three benefits large, then "All in
       the same fee"; right, the cream price card with its terracotta bar,
       and under it the outlined Fast Track tile.
       Markup and words: R-98_S4_DESIGN.md § 0.1 and the mockup.
   -------------------------------------------------------------------------- */
/* clip, never hidden: an overflow:hidden section is a scroll box of its own, where position: sticky never sticks */
.p-fee { overflow: clip; }
.p-fee .fee-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 24% 64%, rgba(165, 63, 43, 0.22), transparent 70%); }
.p-fee .fee-wrap { position: relative; z-index: 2; width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; }
/* the grid: what you get first, then the price, the order people decide in. .fee-grid steps aside (contents) */
@media (min-width: 993px) {
  .p-fee .fee-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head card" "gets card" "gets later" "gets other"; grid-template-rows: auto auto auto 1fr; column-gap: 72px; row-gap: 0; align-items: start; }
  .p-fee .fee-grid { display: contents; }
  .p-fee .fee-head { grid-area: head; }
  .p-fee .fee-card { grid-area: card; }
  .p-fee .fee-gets { grid-area: gets; align-self: start; }
  .p-fee .fee-other { grid-area: other; align-self: start; }
  .p-fee .fee-later { grid-area: later; }
}
/* the paid later visits: one quiet line under the card, never on it (R-140 § 0.2, D2) */
.p-fee .fee-later { margin: 16px 4px 0; line-height: 1.5; text-wrap: pretty; }
/* the heading: tag, light sentence, the shout on its own line, never split; the price line under it */
.p-fee .fee-head { margin-bottom: 48px; max-width: 760px; }
.p-fee .fee-head .section-tag { margin-bottom: 16px; }
.p-fee .fee-head .section-title { text-wrap: balance; }
.p-fee .fee-head .section-title b { display: block; }
.p-fee .fee-kicker { margin: 16px 0 0; font-weight: 300; color: rgba(250, 247, 242, 0.86); }
.p-fee .fee-kicker b { color: #FFFFFF; font-weight: 600; }
/* the three benefits, large, one column, hairlines between, a sandstone tick each */
.p-fee .fee-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.p-fee .fee-list li { position: relative; padding: 22px 0 22px 34px; border-top: 1px solid rgba(209, 160, 130, 0.25); color: var(--accent-sandstone); }
.p-fee .fee-list li:first-child { padding-top: 0; border-top: 0; }
.p-fee .fee-list h3 { margin: 0 0 6px; font-weight: 700; line-height: 1.15; font-family: var(--font-headings); color: #FFFFFF; }
.p-fee .fee-list p { margin: 0; line-height: 1.6; color: rgba(250, 247, 242, 0.86); text-wrap: balance; }
/* the tick, one shape for the benefits and the card */
.p-fee .fee-ticks li::before, .p-fee .fee-list li::before { content: ''; position: absolute; left: 2px; width: 14px; height: 8px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }
.p-fee .fee-list li::before { top: calc(22px + 0.55em); }
.p-fee .fee-list li:first-child::before { top: 0.55em; }
.p-fee .fee-ticks li::before { top: 0.35em; color: var(--accent-terracotta); }
/* All in the same fee: four extras, two columns, a sandstone dot each, the bold words what the client ends up with */
.p-fee .fee-also { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(209, 160, 130, 0.25); }
.p-fee .fee-also-title { margin: 0 0 14px; font-weight: 700; line-height: normal; font-family: var(--font-headings); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-sandstone); }
.p-fee .fee-also ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-items: start; }
.p-fee .fee-also li { position: relative; padding-left: 22px; line-height: 1.5; color: rgba(250, 247, 242, 0.86); text-wrap: pretty; }
.p-fee .fee-also li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-sandstone); }
.p-fee .fee-also li b { color: #FFFFFF; font-weight: 600; }
/* the price card: cream on dark; the 6 px terracotta bar is drawn INSIDE the card and clipped by its corners
   (a border-top on a rounded box shows as a crescent) */
.p-fee .fee-card { position: relative; overflow: hidden; padding: 46px 40px 36px; border-radius: 20px; background: #FAF7F2; color: var(--text-primary); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.p-fee .fee-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--accent-terracotta); }
.p-fee .fee-card-title { margin: 0 0 18px; font-weight: 300; line-height: 1.15; font-family: var(--font-headings); color: var(--text-primary); }
.p-fee .fee-card-title b { font-weight: 800; color: var(--accent-terracotta); text-transform: uppercase; }
.p-fee .fee-amount { margin: 0 0 18px; font-weight: 800; line-height: 1.05; font-family: var(--font-headings); letter-spacing: -0.02em; color: var(--text-primary); }
.p-fee .fee-amount span { display: block; margin-top: 6px; font-weight: 300; letter-spacing: 0; }
.p-fee .fee-when { margin: 0 0 20px; line-height: 1.5; font-weight: 600; }
.p-fee .fee-ticks { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
.p-fee .fee-ticks li { position: relative; padding-left: 30px; }
/* the example: "For example:" on its own line, each half of the sum never split */
.p-fee .fee-example { margin: 0; padding: 14px 16px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--border-warm); line-height: 1.5; text-wrap: pretty; }
.p-fee .fee-example > b:first-child { display: block; margin-bottom: 2px; }
.p-fee .fee-sum { white-space: nowrap; }
.p-fee .fee-guarantee { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border-warm); line-height: 1.5; color: var(--text-muted); }
/* the Fast Track tile: outlined, no fill, under the card */
.p-fee .fee-other { margin: 20px 0 0; padding: 22px 26px; border: 1.5px solid rgba(209, 160, 130, 0.7); border-radius: 20px; color: rgba(250, 247, 242, 0.86); }
.p-fee .fee-other-q { display: block; margin-bottom: 6px; text-wrap: balance; }
.p-fee .fee-other a { font-family: var(--font-headings); font-weight: 600; color: #FAF7F2; text-decoration: none; }
.p-fee .fee-arrow { display: inline-block; transition: transform 0.3s ease; }
.p-fee .fee-other a:hover .fee-arrow { transform: translateX(4px); }
.p-fee .fee-other-sub { display: block; margin-top: 4px; color: rgba(250, 247, 242, 0.78); }
/* --------------------------------------------------------------------------
   P1  The home's hero, tighter (Richard 19 Oct, Q2 "yes"): its title's size
       is R-145_BRAND.css § 3's; the spacing around it is here, so his photo
       and the button sit on a laptop's first screen.
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
  .layout-home .p-hero .pt-hero-title { margin-top: 0.2em; }
  /* and tighter around it (the rebuild: 60 px above the grid, 24 under the tag, 40 under the text), so the button
     sits on the first screen of a real laptop, about 700 px once the browser's bar is counted */
  .layout-home .p-hero .pt-hero-grid { margin-top: 20px; }
  .layout-home .p-hero .pt-hero-subtitle { margin-bottom: 8px; }
  .layout-home .p-hero .pt-hero-copy { margin-bottom: 36px; }
  .layout-home .p-hero .pt-hero-copy p:last-child { margin-bottom: 0; }
}
/* the offer card's name (the home's offer: Richard 19 Oct, the section's left side is "What you get", the name sits on the card) */
.p-fee .fee-tag { margin: 0 0 10px; font-weight: 700; line-height: normal; font-family: var(--font-headings); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-terracotta); }
/* --------------------------------------------------------------------------
   CZ  The Czech home (`cz` `/`): the English home's language (H1 to H6, the
       offer part, the form heading beside the form), with three Czech rules.
       For the coder, a RENDER rule on every .cz text: a one-letter word
       (a i k o s u v z, either case) is tied to the next by a non-breaking
       space, so it never ends a line (Czech typesetting).
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
  /* the shout on its own line, as on the English hero */
  .lang-cs.layout-home .p-hero .pt-hero-title b { display: block; }
  /* Czech runs longer: the title a step down, so the button stays on the first screen */
  .lang-cs.layout-home .p-hero .pt-hero-title { margin-top: 0; }
  .lang-cs.layout-home .p-hero .pt-hero-copy { margin-bottom: 24px; }
  /* Czech runs longer: the form's heading a size down in its 4/11 column */
  .lang-cs.layout-home .p-form .page-title b { line-height: 1.12; }
  /* room for the accents on Czech capitals */
}
/* the owner's first answer, the biggest figure in the card */
/* --------------------------------------------------------------------------
   CZ2 THE .cz site, its pages (R-140 § 0.9, § 0.10; R-151): DRAWN 19 Oct.
       The Czech home is the owners' FRONT DOOR: the hero, two doors (Chci
       pronajmout, Chci prodat) and one line to Maximální výnos, then Prague
       Together and the reviews; no form on it. Chci pronajmout: Prověřený
       nájemník in full on the service layout (§ S). Chci prodat: the sale
       page, NOT PUBLIC BEFORE THE LAWYER'S YES (R-140 § 3.18 to 3.21).
       Menu: Chci pronajmout · Chci prodat · O mně.
   -------------------------------------------------------------------------- */
/* (the `.cz` front door and its two doors: removed 20 Oct, the `.cz` home is § CZ3; see git history) */
/* as every other service's tile, R-145_BRAND.css */
/* the head's right side: a plum card with the one promise on price (never a per cent) */
/* Czech service pages: the steps' shout and the form heading as on the Czech home */
.lang-cs.layout-service .p-steps_heading .page-title b { display: block; }
@media (min-width: 993px) {
  .lang-cs.layout-service .p-form .page-title b { display: block; line-height: 1.12; }
}
/* --------------------------------------------------------------------------
   S   THE SERVICE PAGE (layout `service`; the Fast Track is its first page).
       Richard 19 Oct: "we have to redesign subpages so they dont look like
       main hero pages just recolored". A subpage by LAYOUT, in the brand's
       palette (R-145_BRAND.css, loaded last), never a colour flip:
       a line back up to the home, then the offer part AS the head (its tag,
       title and kicker are the page's name, h1 and promise; no photo, no ring,
       no hero buttons) with the price card beside it, then how it goes and the
       form. Parts: fee (its title the page's h1 here) · steps_heading · steps ·
       form heading beside 3c's form. R-145_BRAND.css
       § 2 colours it on `.layout-service`.
   -------------------------------------------------------------------------- */
.layout-service .site-main > .svc-up { width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; padding: 36px 0 0; font: 600 0.95rem var(--font-headings); }
/* the way back up: rendered by the layout from the page's parent, no slot */
.layout-service .svc-up a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border-warm); padding-bottom: 2px; }
.layout-service .svc-up a:hover { color: var(--accent-terracotta); border-bottom-color: currentColor; }
/* the offer part IS the head: its tag the page's name, its title the page's h1 (light, the shout bold), its kicker the
   promise; the price card beside it, so the price and the visit price are on the first screen */
.layout-service .p-fee .fee-head .section-title { font-weight: 300; line-height: 1.02; font-family: var(--font-headings); letter-spacing: -0.03em; }
.layout-service .p-fee .fee-head .section-title b { display: inline; font-weight: 800; }
.layout-service .p-fee .fee-kicker { line-height: 1.55; }
.layout-service .p-fee .fee-glow { display: none; }
.layout-service .p-fee { padding-bottom: 90px; }
/* the offer follows the way up at once: no 90 px band above it */
.layout-service .p-fee { padding-top: 28px; }
.layout-service .p-steps_heading { margin: 60px 0 60px; padding: 0; }
.layout-service .p-steps { margin-bottom: 0; padding: 0; }
/* steps straight into the form row (no reviews between): the white band never touches the cards */
.layout-service .p-steps:has(+ .p-form) { margin-bottom: 120px; }
/* the reviews before the form (Richard, Q4 "yes"): the home's three cards, 150 px above and below as on the home */
.layout-service .p-reviews { margin: 150px 0; }
/* a reviews heading (the .cz pages) takes the gap above, the reviews follow it closely */
.layout-service .p-reviews_heading { margin: 150px 0 0; }
.layout-service .p-reviews_heading + .p-reviews { margin-top: 24px; }
/* the form's line for the hurried, right under its button (a text slot of the form's own words on this page) */
.layout-service .rb-intake--one .form-incentive { grid-column: 1 / -1; margin: 14px 0 0; text-align: center; font-size: 1.0625rem; color: var(--text-muted); }
.layout-service .rb-intake--one .form-incentive b { color: var(--text-primary); }
/* the order step (R-140 § 0.1, L5): the one express line the law wants, right above the button, never a tick box */
.layout-service .rb-intake--one .form-order { margin: 0 0 16px; line-height: 1.55; text-align: center; text-wrap: balance; color: var(--text-muted); }
.layout-service .rb-intake--one .form-order a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* the card's visit price row */
.p-fee .fee-plus { margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--border-warm); border-bottom: 1px solid var(--border-warm); }
.p-fee .fee-plus-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; font-weight: 600; }
.p-fee .fee-plus-row b { font-weight: 800; line-height: 1.1; font-family: var(--font-headings); letter-spacing: -0.01em; }
.p-fee .fee-plus-note { margin: 4px 0 0; color: var(--text-muted); }
.layout-service .p-fee .fee-plus { border-color: rgba(251, 247, 241, 0.16); }
.layout-service .p-fee .fee-list p { text-wrap: pretty; }
/* --------------------------------------------------------------------------
   A   ABOUT (com /about/, layout `about`; O mně follows): DRAWN 19 Oct,
       Richard's words from his page, in the brand. Parts, as today's page:
       hero · community · saturday (page_heading, tagged How it started) ·
       work · adds_up (page_heading) · cta (the button row): the order and
       the words of R-140 § 0.7 (design-of149 with Richard, 19 Oct). Plum and
       linen alternate: Prague Together (plum), How it started (linen), the
       work (plum, its phone videos 9:16 as shot); How it adds up and the
       buttons close the page as ONE card.
   -------------------------------------------------------------------------- */
/* the hero: the home's tighter rhythm (the title's size: R-145_BRAND.css § 3) */
@media (min-width: 993px) {
  .layout-about .p-hero .pt-hero-grid { margin-top: 20px; margin-bottom: 100px; }
  .layout-about .p-hero .pt-hero-title { margin-top: 0.2em; }
  .layout-about .p-hero .pt-hero-subtitle { margin-bottom: 8px; }
  /* the two-line shout: as tight as the light lines above it, so the two honey swipes sit together */
  .layout-about .p-hero .pt-hero-title b { line-height: 1; }
}
/* the work: rb_work (build-p4 ports it; these are its laptop rules, the theme's look), on plum */
.rb-work-widget { padding: 120px 0 140px; }
.rb-work-container { width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; }
.rb-work-intro { max-width: 760px; margin: 0 0 56px; }
.rb-work-tag { display: inline-block; margin: 0 0 18px; padding: 0 12px; border-radius: 6px; font-weight: 700; line-height: 1.7; font-family: var(--font-headings); letter-spacing: 0.15em; text-transform: uppercase; }
.rb-work-title { margin: 0 0 20px; font-weight: 300; line-height: 1.05; font-family: var(--font-headings); letter-spacing: -0.02em; }
.rb-work-title span { display: block; font-weight: 800; text-transform: uppercase; }
.rb-work-intro-copy p { margin: 0; line-height: 1.6; }
.rb-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rb-work-play { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; }
.rb-work-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rb-work-play-icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; }
.rb-work-play-icon::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent; }
/* R-319: a poster with a video is a <button> (the play mark scales on hover and focus, as on the WordPress site); on a click work.js puts
   Stream's player in the same 9:16 frame and hides the button (.is-playing), and gives the poster back when the video ends */
button.rb-work-play { -webkit-tap-highlight-color: transparent; }
div.rb-work-play { cursor: default; }
.rb-work-play-icon { box-shadow: 0 8px 26px rgba(30, 28, 28, 0.25); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.rb-work-play:hover .rb-work-play-icon, .rb-work-play:focus-visible .rb-work-play-icon { transform: scale(1.07); }
.rb-work-item.is-playing > .rb-work-play { display: none; }
.rb-work-player { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 20px; background: #000; color-scheme: dark; }
.rb-work-cap { margin-top: 16px; }
.rb-work-name { margin: 0 0 6px; font-weight: 700; line-height: 1.3; font-family: var(--font-headings); }
.rb-work-caption { margin: 0; line-height: 1.55; }
.rb-work-outro { max-width: 760px; margin: 56px 0 0; }
.rb-work-outro p { margin: 0; line-height: 1.6; text-wrap: pretty; }
/* How it started (the `saturday` part): on linen BETWEEN the two plum sections, left-aligned, the same space above and
   below so it reads as its own chapter, not a gap */
.layout-about .p-saturday { width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; padding: 120px 0; text-align: left; }
.layout-about .p-saturday .page-title, .layout-about .p-saturday .page-intro { max-width: 820px; margin-left: 0; }
.layout-about .p-saturday .page-title { text-wrap: balance; }
.layout-about .p-saturday .page-title b { display: block; }
/* the shout on its own line, never "SO / I STEPPED IN." */
/* the close: How it adds up and the buttons as ONE white card, signed */
.layout-about .p-adds_up, .layout-about .p-cta { max-width: 840px; margin-left: auto; margin-right: auto; background: var(--rb-surface); }
.layout-about .p-adds_up { margin-top: 140px; padding: 64px 64px 0; border-radius: 20px 20px 0 0; text-align: center; }
.layout-about .p-adds_up .page-title { text-wrap: balance; }
.layout-about .p-adds_up .page-title b { display: block; line-height: 1.08; }
.layout-about .p-adds_up .page-intro p:last-child { margin-top: 18px; font-weight: 600; line-height: normal; font-family: var(--font-headings); }
.layout-about .p-cta { margin-bottom: 140px; padding: 36px 64px 64px; border-radius: 0 0 20px 20px; }
.layout-about .p-cta .pt-hero-grid { display: block; width: auto; margin: 0; }
.layout-about .p-cta .pt-hero-text { align-items: center; }
.layout-about .p-cta .pt-hero-ctas { justify-content: center; }
/* --------------------------------------------------------------------------
   R   THE READING LAYOUT (Terms, Privacy, any long page; `reading`): DRAWN
       19 Oct. A small head (page_heading: tag, the page's h1, the TL;DR as
       its intro, in a soft box), then two columns: the sections' list,
       sticky (the layout's, from the body's h2s; no slot), and the text at a
       reading measure. Parts: head (page_heading) · reading (rich).
       The PHONE version of the section list is for the phone round (Richard
       19 Oct: "make sure to then figure what it does on phones").
   -------------------------------------------------------------------------- */
.layout-reading .p-head { width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; padding: 48px 0 8px; text-align: left; }
.layout-reading .p-head .section-tag { margin: 0 0 18px; }
.layout-reading .p-head .page-title { margin: 0; font-weight: 300; line-height: 1.02; font-family: var(--font-headings); letter-spacing: -0.03em; }
.layout-reading .p-head .page-title b { font-weight: 800; text-transform: uppercase; }
.layout-reading .rd-tldr { position: relative; max-width: 760px; margin: 28px 0 0; padding: 22px 28px 22px 64px; border-radius: 15px; box-shadow: inset 4px 0 0 var(--accent-terracotta); background: var(--rb-surface-2); line-height: 1.6; color: var(--text-primary); }
/* a quote box (Richard 19 Oct: "yes in a separete quote box"): the plum edge and a plum opening mark, signed */
.layout-reading .rd-tldr::before { content: "\201C"; position: absolute; left: 20px; top: 6px; font: 800 3.4rem/1 var(--font-headings); color: var(--accent-terracotta); }
.layout-reading .rd-tldr p { color: var(--text-primary); }
.layout-reading .rd-tldr p { margin: 0; }
.layout-reading .rd-tldr em { display: block; margin-top: 8px; font: 600 1rem var(--font-headings); font-style: normal; }
.rd-grid { display: grid; grid-template-columns: 270px minmax(0, 680px); gap: 72px; width: 90%; max-width: var(--layout-width-boxed); margin: 48px auto 140px; align-items: start; }
.rd-toc { position: sticky; top: 110px; }
.rd-toc-title { margin: 0 0 12px; font-weight: 700; line-height: normal; font-family: var(--font-headings); letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.rd-toc ol { margin: 0; padding: 0 0 0 1.2em; display: grid; gap: 10px; }
.rd-toc li { line-height: 1.4; color: var(--text-muted); }
.rd-toc a { color: var(--text-primary); text-decoration: none; }
.rd-toc a:hover { color: var(--accent-terracotta); text-decoration: underline; text-underline-offset: 3px; }
/* the section in view (the layout's script marks it, aria-current): plum and bold */
.rd-toc a[aria-current="true"] { color: var(--accent-terracotta); font-weight: 700; }
.rd-toc li { text-wrap: pretty; }
.rd-body h2 { margin: 56px 0 14px; font-weight: 700; line-height: 1.3; font-family: var(--font-headings); letter-spacing: 0.04em; scroll-margin-top: 110px; color: var(--text-primary); }
.rd-body h2:first-child { margin-top: 0; }
.rd-body h3 { margin: 28px 0 10px; font: 700 1.05rem var(--font-headings); }
.rd-body p, .rd-body li { line-height: 1.7; color: var(--text-primary); }
.rd-body p { margin: 0 0 16px; }
.rd-body ul, .rd-body ol { margin: 0 0 16px; padding-left: 1.3em; }
.rd-body li { margin-bottom: 8px; }
.rd-body ul li::marker { color: var(--accent-terracotta); }
.rd-body a { color: var(--accent-terracotta); text-underline-offset: 3px; }
.rd-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 1rem; }
.rd-body th, .rd-body td { padding: 10px 12px; border-bottom: 1px solid var(--border-warm); text-align: left; vertical-align: top; }
.rd-body .legal-stamp { margin-top: 40px; color: var(--text-muted); }
/* --------------------------------------------------------------------------
   K   THE INTRODUCTION ASK (R-140 § 0.8, design-of149 with Richard): DRAWN
       19 Oct. (1) 3c's thank-you step on .com: the ask in place of R-118's
       50% panel, a soft plum card, WhatsApp with a ready message, How it
       works, room around it. (2) Know a flat? (the same address, out of the
       main menu) as a service page: the plain head, the credit's card, the
       four conditions, a simple form (name, phone, a message).
   -------------------------------------------------------------------------- */
/* the ask after sending: room to breathe (Richard 19 Oct: "feels super cluttered, would appreciate some breath"): no
   box, a hairline above, the headline and one line, then the button and the link, generous space between */
.rb-intake--one .done-offer { margin-top: 40px; padding: 32px 0 0; border: 0; border-top: 1px solid var(--rb-border); background: none; }
.rb-intake--one .done-offer__h { font-size: 1.35rem; font-weight: 300; line-height: 1.25; }
.rb-intake--one .done-offer__h b { display: block; margin-top: 2px; font-weight: 800; color: var(--rb-main); text-transform: uppercase; }
.rb-intake--one .done-offer__p { max-width: 46ch; margin: 14px 0 24px; line-height: 1.65; color: var(--rb-ink-muted); }
.rb-intake--one .done-offer__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.rb-intake--one .done-offer__wa { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 30px; background: var(--rb-btn); color: var(--rb-btn-ink); font: 700 0.85rem var(--font-headings); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.rb-intake--one .done-offer__wa:hover { background: var(--rb-pop); color: var(--rb-pop-ink); }
.rb-intake--one .bse-form__done-again { margin-top: 36px; }
/* Know a flat? (Richard 19 Oct: "the hero feels weak ... the whole page feels unfinished ... like half empty. maybe simple
   contact form only (name, phone, text)"): drawn as a SERVICE page (§ S): the way up, the offer part as the head (the old
   page's plain line "I'LL PAY FOR THAT.", the three steps, the credit's card: what 5 000 CZK buys), "Does your flat
   count?" as four cards, the form heading beside a simple form (name, phone, a message; a new form kind) */
.page-know-a-flat .p-form .page-intro b { font-weight: 600; }
/* the reason why, under the kicker (R-140 § 0.8, 3A): quieter than the offer, one size down */
.p-fee .fee-why { max-width: 52ch; margin: 14px 0 0; line-height: 1.55; }
.p-fee .fee-why b { font-weight: 700; }
/* the Czech note for the landlord, ready to copy (R-140 § 0.8, I1): a quote box on the form's head, the button inside it */
.kaf-note { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; margin: 22px 0 0; padding: 20px 24px 20px 26px; border-radius: 15px; background: var(--rb-tint); box-shadow: inset 4px 0 0 var(--rb-main); text-align: left; }
.kaf-note blockquote { margin: 0; }
.kaf-note blockquote p { margin: 0; line-height: 1.6; font-style: italic; color: var(--rb-ink); }
.kaf-copy { flex: none; min-height: 40px; padding: 8px 18px; border: 1.5px solid var(--rb-main); border-radius: 999px; background: transparent; color: var(--rb-main); font: 700 0.95rem var(--font-headings); cursor: pointer; transition: filter 0.2s ease, background-color 0.2s ease; }
.kaf-copy:hover { background: var(--rb-main); color: #fff; }
.kaf-copy:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 3px; }
@media (max-width: 767px) {
  .kaf-note { margin: 22px 0 28px; }
}
/* the section gives the 20 px gutter */
/* --------------------------------------------------------------------------
   N   THE 404 BODY (layout `not-found`, both hosts): DRAWN 19 Oct. His words
       from today's page; the rebuild's two-slot body grows to today's hero
       (an existing part kind): tagline, title (the page's h1), copy, the main
       button to the form, the way home as a quiet link. No photo (today's
       gold coin is a stock image); linen, the honey swipe under the shout.
   -------------------------------------------------------------------------- */
.layout-not-found .site-main { min-height: calc(100vh - 380px); display: flex; align-items: center; }
.layout-not-found .p-hero { width: 100%; }
.layout-not-found .p-hero .pt-hero-grid { display: block; max-width: 860px; margin: 64px auto 120px; }
.layout-not-found .p-hero .pt-hero-subtitle { margin-bottom: 12px; }
.layout-not-found .p-hero .pt-hero-title { margin-top: 0; text-wrap: balance; }
.layout-not-found .p-hero .pt-hero-copy { max-width: 620px; margin-bottom: 36px; }
.layout-not-found .p-hero .pt-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
/* --------------------------------------------------------------------------
   H6  Readability (WCAG 2 contrast, each alpha blended over its real
       background). 6.2 and 6.3 are the header and footer: every page.
   -------------------------------------------------------------------------- */
/* H6.2 the footer's small lines: --text-light at 300 was 2.81:1; --text-muted at 400 is 9.3:1 */
.footer-credits, .footer-identity, .footer-legal-links { color: var(--text-muted); font-weight: 400; }
/* H6.3 the header's "Prague, CZ": 2.83:1 at 12 px; the same muted ink */
.location-tag .location-text { color: var(--text-muted); }
/* H6.4 the stat labels on terracotta: 80% cream was 4.35:1 at 12.8 px; full cream 5.9:1 */
.rb-community-widget .stat-label { color: #FAF7F2; }
/* H6.5 running text never under 17 px (cards, steps); a reviewer's role never under 14 px */
.rb-value-prop-widget .pillar-subtext { font-size: 1.0625rem; line-height: 1.65; }
.rb-process-card-copy { line-height: 1.65; }
/* ==========================================================================
   PHONE AND TABLET (below 993 px): PROVISIONAL, kept only so the page
   works. The phone gets its own design round after every page is done.
   ========================================================================== */
@media (max-width: 992px) {
  /* the same reading order as the laptop: heading, benefits, price, the extras, the tile */
  .p-fee .fee-grid { display: flex; flex-direction: column; gap: 32px; }
  .p-fee .fee-gets { display: contents; }
  .p-fee .fee-list { order: 1; }
  .p-fee .fee-card { order: 3; }
  .p-fee .fee-also { order: 4; margin-top: 0; }
  .p-fee .fee-later { order: 3; margin-top: -16px; }
  /* right under the card, as on the laptop */
  .p-fee .fee-other { margin-top: 32px; }
}
@media (max-width: 767px) {
  :is(.lang-en, .lang-cs):is(.layout-home, .layout-service) .p-steps_heading { margin-top: 100px; }
  :is(.lang-en, .lang-cs):is(.layout-home, .layout-service) .p-steps { margin-bottom: 50px; }
  :is(.lang-en, .lang-cs).layout-service .p-steps_heading { margin-bottom: 40px; }
  .p-fee .fee-wrap { width: auto; padding: 0 20px; }
  .p-fee .fee-head { margin-bottom: 32px; }
  .p-fee .fee-kicker { line-height: 1.4; }
  .p-fee .fee-card { padding: 28px 22px; }
  .p-fee .fee-also ul { grid-template-columns: 1fr; }
  .p-fee .fee-list p, .p-fee .fee-example { text-wrap: pretty; }
}
/* The mockup's own bar (not the site): a page menu and the Laptop / Phone switch, one short row at any width (design-p6, 20 Oct). */
/* Phone view: the page live in two phones, side by side; each frame shows the page alone (#<page>/frame). */
@media (max-width: 767px) {
  .page-know-a-flat #kaf-form { margin-bottom: 48px; }
}
/* the privacy page (R-157): ONE table of purpose, basis and period; a quoted reply; a small translation line */
.rd-body .rd-table { margin: 0 0 20px; overflow-x: auto; }
.rd-body .rd-table table { margin: 0; min-width: 560px; }
.rd-body th { font: 700 0.85rem var(--font-headings); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-main); }
.rd-body td { font-size: 1rem; line-height: 1.55; color: var(--rb-ink); }
.rd-body td:first-child { font-weight: 600; }
.rd-body .rd-quote { margin: 0 0 12px; padding: 16px 20px; border-radius: 12px; background: var(--rb-tint); box-shadow: inset 4px 0 0 var(--rb-main); }
.rd-body .rd-quote p { margin: 0; font-style: italic; }
.rd-body .rd-small { color: var(--rb-ink-muted); }
.rd-body .rd-table th:nth-child(1) { width: 33%; }
.rd-body .rd-table th:nth-child(2) { width: 31%; }
/* The reading layout on a phone (Terms, Privacy; design-p6, 20 Oct): one column, the section list as a tinted box
   above the text, never sticky; the table stacks into one card per row, its column names from data-label. */
@media (max-width: 767px) {
  .layout-reading .p-head { width: auto; margin: 0 20px; padding: 32px 0 4px; }
  .layout-reading .p-head .page-title { overflow-wrap: break-word; hyphens: auto; }
  .layout-reading .rd-tldr { margin-top: 20px; padding: 18px 18px 18px 52px; }
  .layout-reading .rd-tldr::before { left: 14px; font-size: 2.8rem; }
  .rd-grid { display: block; width: auto; margin: 28px 20px 80px; }
  .rd-toc { position: static; margin: 0 0 36px; padding: 18px 20px; border-radius: 12px; background: var(--rb-tint); }
  .rd-toc ol { gap: 8px; }
  .rd-body { min-width: 0; overflow-wrap: break-word; }
  .rd-body h2 { margin-top: 44px; }
  .rd-body .rd-table { overflow: visible; }
  .rd-body .rd-table table, .rd-body .rd-table tbody, .rd-body .rd-table tr, .rd-body .rd-table td { display: block; min-width: 0; width: auto; }
  .rd-body .rd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rd-body .rd-table tr { margin: 0 0 12px; padding: 14px 16px; border-radius: 12px; background: var(--rb-tint); }
  .rd-body .rd-table td { padding: 0; border: 0; }
  .rd-body .rd-table td:first-child { margin-bottom: 8px; font-weight: 700; line-height: 1.35; font-family: var(--font-headings); color: var(--rb-main); }
  .rd-body .rd-table td + td { margin-top: 12px; }
  .rd-body .rd-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font: 700 0.75rem var(--font-headings); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rb-ink-muted); }
}
/* The section list's numbers in one 2 em column, so 10. lines up with 1. (judge, 20 Oct). */
.rd-toc ol { list-style: none; padding: 0; counter-reset: rd; }
.rd-toc li { display: grid; grid-template-columns: 2em 1fr; counter-increment: rd; }
.rd-toc li::before { content: counter(rd) "."; color: var(--text-muted); }
/* Phones: the reading head's tag as highlighted lines, not a full-width block; the 404 button and the shared footer fit 360 px. */
@media (max-width: 767px) {
  .layout-reading .p-head .section-tag { display: inline; padding: 3px 8px; line-height: 2.1; letter-spacing: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .layout-reading .p-head .section-tag + .page-title { margin-top: 14px; }
  .layout-reading .p-head { text-wrap: balance; }
  .layout-reading .p-head .rd-tldr { text-wrap: pretty; }
  .layout-not-found .btn-charcoal-primary { padding-left: 20px; padding-right: 20px; letter-spacing: 0.06em; }
  .footer-legal-links { row-gap: 8px; }
}
/* Service pages on a phone: the form section's head stacks above the form, so it joins the form's white band
   (R-145_BRAND.css, the English intake band) instead of sitting on linen with a seam at the card; it gets the form's
   20 px gutter. A steps card centres its number's honey rule as it centres its words; a service page's steps heading
   gets the 20 px gutter; the English form's white band ends 48 px under the card, not on its edge. */
@media (max-width: 767px) {
  .layout-service .p-form { padding-left: 20px; padding-right: 20px; }
  :is(.lang-en, .lang-cs).layout-service .site-main > .p-form:has(+ .rb-intake) { margin-bottom: 0; padding-top: 48px; padding-bottom: 8px; background-color: var(--rb-surface); box-shadow: 0 0 0 100vmax var(--rb-surface); clip-path: inset(0 -100vmax); }
  .rb-process-num::after { margin-left: auto; margin-right: auto; }
  .layout-service .p-steps_heading { padding-left: 20px; padding-right: 20px; }
  :is(.lang-en, .lang-cs).layout-service .site-main > .rb-intake { padding-bottom: 48px; }
}
/* Know a flat? (FINAL, round 3, § W): the four conditions are a `steps` part (`p-checks p-checks-list`) drawn as a
   vertical checklist just before the form: one row each, the honey tick on the left, no number, the title and its line
   beside it, at a reading width; its heading a size smaller than the steps' (it is the small print); an even rhythm. */
.p-checks .rb-process-num { display: none; }
.p-checks-list .rb-process-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 760px; margin-left: auto; margin-right: auto; padding: 0; }
.p-checks-list .rb-process-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; align-items: start; min-height: 0; padding: 18px 24px; text-align: left; }
.p-checks-list .rb-process-card::before { content: "\2713"; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--rb-accent); color: var(--rb-ink); font: 800 1.15rem/38px var(--font-headings); text-align: center; }
.p-checks-list .rb-process-card-title, .p-checks-list .rb-process-card-copy { grid-column: 2; margin: 0; }
.p-checks-list .rb-process-card-title { padding-top: 7px; }
.page-know-a-flat .p-steps + .p-steps_heading { margin-top: 120px; margin-bottom: 40px; }
@media (max-width: 767px) {
  .page-know-a-flat .p-fee + .p-steps_heading { margin-top: 8px; }
  /* the head part keeps its 90 px padding under the card */
  .page-know-a-flat .p-steps + .p-steps_heading { margin-top: 88px; }
}
/* Czech form heads on a phone: the long capitals (NÁJEMNÍKA) fit inside the 20 px gutters at 360 px and up. */
@media (max-width: 767px) {
  .lang-cs:is(.layout-service, .layout-home) .p-form .page-title { overflow-wrap: break-word; }
}
/* the arrow nudges, as on every tile */
/* The home on a laptop: the form's head is sticky to the end of the page, so the Prague Together band after the form
   (Richard, 20 Oct, § W: it "roll[s] out of view as I scroll down") is above it; the pinned head slides under it. */
@media (min-width: 993px) {
  .layout-home .p-community { position: relative; z-index: 3; }
}
/* The home's later visits under the card (Richard, 20 Oct, § W: keep it where it is, "just make it fit the place"): a
   footnote to the card, not a stray sentence: smaller, muted, inset to the card's text, a thin honey mark on its left. */
.layout-home .p-fee .fee-later { margin: 8px 40px 8px; padding-left: 12px; border-left: 2px solid var(--rb-accent); line-height: 1.5; color: var(--rb-on-sec-muted); text-wrap: pretty; }
@media (max-width: 992px) {
  .layout-home .p-fee .fee-later { margin: -16px 22px 0; }
}
/* under the card, inside the column's gap */
/* About on a phone: the three 9:16 videos as a swipeable row (each about 72 % wide, the next one peeking in), never three
   96 px columns. */
@media (max-width: 767px) {
  .rb-work-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .rb-work-item { scroll-snap-align: start; }
}
/* About, judge round (Richard, § W: "make it visually consistent"): every section's tag is the brand's chip (honey,
   ink on it), on plum, linen and the soft plum alike; the hero keeps its own line, as the home's. */
.layout-about .rb-work-tag, .layout-about .rb-community-widget.rb-soft .section-tag { display: inline-block; width: auto; padding: 0 12px; border-radius: 6px; background: var(--rb-pop); color: var(--rb-pop-ink); }
.layout-about .pt-hero-title { text-wrap: balance; }
@media (max-width: 767px) {
  /* the video row runs to the screen's edge, its first video on the text's edge */
  .layout-about .rb-work-grid { margin-left: calc((100% - 100vw) / 2); margin-right: calc((100% - 100vw) / 2); padding-left: calc((100vw - 100%) / 2); padding-right: calc((100vw - 100%) / 2); }
  .layout-about .rb-work-item { scroll-snap-align: start; scroll-margin-left: 20px; }
  /* the container is on the 20 px gutter (R-172 F5) */
  /* Prague Together reads like the parts around it: the tag first, left-aligned */
  .layout-about .rb-community-widget, .layout-about .rb-community-widget .community-text { text-align: left; }
  .layout-about .rb-community-widget :is(.community-text, .community-actions) { align-items: flex-start; justify-content: flex-start; }
  .layout-about .p-cta .btn-charcoal-primary span { text-wrap: balance; }
  /* the closing card on the 20 px gutter, both halves, and a phone's padding (R-172 F4) */
  .layout-about .p-adds_up, .layout-about .p-cta { width: auto; max-width: none; margin-left: 20px; margin-right: 20px; }
  .layout-about .p-adds_up { padding: 40px 22px 0; }
  .layout-about .p-cta { padding: 24px 22px 40px; }
}
/* The home on a phone (Richard, 20 Oct, § W: "the padding on phones seems to be inconsistent ... not sure if to center
   most of the text - your call"): one 20 px gutter for every part, the form included; the text left-aligned, as About,
   because centred paragraphs read badly on a phone; the hero stays centred, as every hero, and the step cards stay
   centred boxes. */
@media (max-width: 767px) {
  .layout-home :is(.p-steps_heading, .p-form) { width: auto; margin-left: 0; margin-right: 0; padding-left: 20px; padding-right: 20px; }
  .layout-home .site-main > .rb-intake { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; }
  /* a size container: never width auto (it would shrink to 0) */
  .layout-home :is(.p-steps_heading, .p-form, .p-community), .layout-home :is(.p-steps_heading, .p-form, .p-community) :is(h2, p, .page-intro, .community-text) { text-align: left; }
  .layout-home .rb-community-widget :is(.community-text, .community-actions, .community-stats) { align-items: flex-start; justify-content: flex-start; }
}
/* phones: the worked example's sum may break after "+", its amounts stay whole (no-break spaces). R-198 C4 (§ 1.2): below
   480 px, not 380 (at 390 /express/'s first sum ran 29 px past its box) */
@media (max-width: 479px) {
  .p-fee .fee-example .fee-sum { white-space: normal; }
}
/* After the form (Richard, 20 Oct, § W: "feels not really like a success - can u make it warmer?"): the brand's warmth,
   never the system green: a honey-cream card, a big honey tick, the heading's shout in plum capitals, and Richard's face
   and name under the promise, like a note signed by him. The offer below stays as it was. */
.rb-intake--one .bse-form__done { padding: 44px 40px 40px; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--rb-accent) 16%, var(--rb-surface)); text-align: left; }
.rb-intake--one .done-tick { display: block; width: 64px; height: 64px; margin: 0 0 22px; border-radius: 50%; background: var(--rb-accent); }
.rb-intake--one .done-tick::after { content: "\2714"; display: block; font: 900 2.6rem/64px var(--font-headings); color: var(--rb-main); text-align: center; }
.rb-intake--one .bse-form__done .bse-form-box-title { margin: 0 0 10px; font-weight: 300; line-height: 1.1; font-family: var(--font-headings); color: var(--rb-ink); }
.rb-intake--one .bse-form__done .bse-form-box-title b { font-weight: 800; text-transform: uppercase; color: var(--rb-main); }
.rb-intake--one .bse-form__done .bse-form-box-desc { margin: 0; line-height: 1.55; color: var(--rb-ink); }
/* R-198 C1, C5 (§ 1.3, § B): the order step's own tick box, white, the words in ink; the two links under it */
.rb-intake--one .form-start { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--rb-border); border-radius: 12px; background: var(--rb-surface); text-align: left; font-weight: 600; color: var(--rb-ink); cursor: pointer; }
.rb-intake--one .form-start input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--rb-main); }
.rb-intake--one .bse-form__field--start_now .bse-form__error { margin: -6px 0 12px; text-align: left; }
.rb-intake--one .form-order--links { margin: 0 0 16px; }
/* R-198 C7 (§ 3.2, § 4.1b, § B): the profile lines after the form, no box (Richard 16:48), the card's own ink; the next
   step bold; the neutral deposit line 14 px, muted */
.done-profile { margin: 14px 0 0; text-align: left; }
.done-profile p { margin: 0; line-height: 1.55; color: var(--rb-ink); }
.done-profile p + p { margin-top: 6px; }
.done-profile .done-deposit { margin-top: 10px; color: var(--rb-ink-muted); }
/* (the three sizes, label, body and small, are the system layer's tokens, R-189) */
.rb-intake--one .done-sign { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; }
.rb-intake--one .done-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--rb-surface); }
.rb-intake--one .done-sign span { font-size: 0.95rem; line-height: 1.35; color: var(--rb-ink-muted); }
.rb-intake--one .done-sign b { display: block; font: 700 1.05rem var(--font-headings); color: var(--rb-ink); }
@media (max-width: 767px) {
  .rb-intake--one .bse-form__done { padding: 32px 22px 28px; }
}
/* The home on a phone, calmer (the clutter round): the hero's portrait smaller so the button nears the first screen;
   the offer's first list without dividers; the worked example a plain note, not a box in the card's box; Prague
   Together's three numbers in one row; the form's head joins the form's white band (no seam). */
@media (max-width: 767px) {
  .layout-home .p-hero .pt-hero-visual { zoom: 0.68; }
  /* 250 to 170 px; for the coder: the portrait 168 px on a phone */
  .layout-home .p-hero .pt-hero-title { margin-top: 16px; }
  .layout-home .p-hero .pt-hero-ctas { margin-top: 22px; }
  .layout-home .p-fee .fee-list li { border-top: 0; padding-top: 10px; padding-bottom: 10px; }
  .layout-home .p-fee .fee-list li, .layout-home .p-fee .fee-list li:first-child { padding-top: 10px; }
  .layout-home .p-fee .fee-list li::before, .layout-home .p-fee .fee-list li:first-child::before { top: 21px; }
  /* on the middle of the heading's first line */
  .layout-home .p-hero .pt-hero-ctas .btn-charcoal-primary span { text-wrap: balance; }
  .layout-home .p-fee .fee-example { padding: 0 0 0 12px; border: 0; border-left: 2px solid var(--rb-border); border-radius: 0; background: none; }
  .layout-home .rb-community-widget .community-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: auto; }
  .layout-home .rb-community-widget .stat-card { width: auto; min-width: 0; }
  :is(.lang-en, .lang-cs).layout-home .site-main > .p-form { margin-bottom: 0; padding-top: 48px; padding-bottom: 36px; background-color: var(--rb-surface); box-shadow: 0 0 0 100vmax var(--rb-surface); clip-path: inset(0 -100vmax); }
}
/* § AF THE AFTER FORM, round 2 (design-p7, 20 Oct, Richard: "B ... people will miss it since it is a blok away. A is going
   to work better but feels off."): A's place, B's look. One honey card where the form was: a drawn tick above the
   heading, the thanks, the signature; the introduction offer a white panel INSIDE the card, its headline a step under
   the thanks; Send another a quiet link at the foot; the form's trust line goes with the form. */
.rb-intake--one:has(.done--one:not([hidden])) .rb-intake__trust { display: none; }
.rb-intake--one .done--one .done-tick { position: relative; width: 56px; height: 56px; margin: 0 0 20px; }
.rb-intake--one .done--one .done-tick::after { content: ""; position: absolute; left: 50%; top: 45%; width: 30%; height: 52%; border: solid var(--rb-main); border-width: 0 0.32em 0.32em 0; border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); font-size: 16px; }
.rb-intake--one .done--one .done-offer { margin: 30px 0 0; padding: 26px 30px 28px; border: 0; border-radius: 16px; background: var(--rb-surface); }
.rb-intake--one .done--one .done-offer__h { font-size: 1.2rem; }
.rb-intake--one .done--one .done-offer__p { max-width: 60ch; margin: 10px 0 20px; }
.rb-intake--one .done--one .done-offer__wa { padding: 10px 22px; background: none; color: var(--rb-main); box-shadow: inset 0 0 0 2px var(--rb-main); }
/* an outline: the thanks stays the loudest */
.rb-intake--one .done--one .done-offer__wa:hover { background: var(--rb-btn-hover); color: var(--rb-btn-hover-ink); box-shadow: none; }
.rb-intake--one .done--one .bse-form__done-again { display: block; margin: 24px 0 0; padding: 0; background: none; border: 0; color: var(--rb-ink-muted); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .rb-intake--one .done--one .done-offer { margin-top: 26px; padding: 22px 20px 24px; }
}
/* round 3 (20 Oct, Richard: "something looks weird ... the nesting is good, visually something is off"), measured: the
   band is white, the card a 16% honey cream (#FEF6E5, its edge barely there), the panel white again, so the panel read as
   a HOLE through the card, and the photo's white ring as a second one. Now the card is a warmer cream with a hairline
   edge, the panel lies ON it like paper (a hairline and a soft shadow), and the ring takes the card's colour. */
.rb-intake--one .bse-form__done.done--one { --done-card: color-mix(in srgb, var(--rb-accent) 26%, var(--rb-surface)); background: var(--done-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rb-accent) 55%, transparent); }
.rb-intake--one .done--one .done-offer { box-shadow: 0 0 0 1px var(--rb-border), 0 8px 22px rgba(36, 24, 42, 0.07); }
.rb-intake--one .done--one .done-face { box-shadow: 0 0 0 3px var(--done-card); }
/* V3, the motion (20 Oct, a version beside the page): the card rises in, the tick pops, the thanks then the offer follow;
   under a second, once, and never for a visitor who asks for reduced motion. The fill is backwards: once it ends, the
   card is exactly the static one. */
@keyframes done-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes done-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes done-check {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.3); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .rb-intake--one .done--motion { animation: done-rise 320ms ease-out backwards; }
  .rb-intake--one .done--motion .done-tick { animation: done-pop 380ms 60ms cubic-bezier(.3,1.4,.6,1) backwards; }
  .rb-intake--one .done--motion .done-tick::after { animation: done-check 260ms 300ms ease-out backwards; }
  .rb-intake--one .done--motion :is(.bse-form-box-heading, .done-sign) { animation: done-rise 300ms 150ms ease-out backwards; }
  .rb-intake--one .done--motion .done-offer { animation: done-rise 340ms 450ms ease-out backwards; }
  .rb-intake--one .done--motion .bse-form__done-again { animation: done-rise 300ms 650ms ease-out backwards; }
}
/* § FF THE FORM'S FOOT, every form (design-p7, 20 Oct, Richard: "too close together or too big of a font"): the
   consent line is fine print at 15 px in a balanced wrap (17 px stays for everything you fill in or tap); the button,
   the consent and the WhatsApp line get room that is larger than their own line height. */
.rb-intake--one .bse-form .form-notice { margin: -8px 0 0; line-height: 1.5; text-wrap: balance; }
/* § CZ3 THE .cz site, letting only (design-p7, 20 Oct, Richard § W): the home sells Prověřený nájemník in the English
   home's look (layout-home, page-cz-home); Chci maximální výnos its own page (layout-service, page-cz-yield, as Express);
   Chci prodat deferred. No upload at launch (the lead): the floor plan comes by WhatsApp or e-mail. */
/* the .cz pages take the EN home's and service pages' rules (Richard: the .cz home "vzhledově podobné Homepage"): the
   form's white band (R-145_BRAND.css § 2 scopes it .lang-en; this is its .lang-cs twin) and the phone rules above */
.lang-cs:is(.layout-home, .layout-service) .site-main > .rb-intake { background-color: var(--rb-surface); box-shadow: 0 0 0 100vmax var(--rb-surface); clip-path: inset(0 -100vmax); }
/* mockup only: a word that waits for the copywriter */
/* § SYS THE SYSTEM (design-p7, 20 Oct, Richard: "consistent, on brand and have reusable elements"): measured across all
   11 launch pages at 1280 and 390 (.tmp/tools/inventory.mjs), the strays brought onto one scale. The coder builds these
   once as variables and uses them everywhere; colour and type stay R-145_BRAND.css's.
   Radius: --rb-r-card 20px (every card, band and carousel) · --rb-r-inner 12px (a box inside a card or text: fields, the
   offer panel, notes, the reading intro) · --rb-r-chip 6px (tags, the language switch) · --rb-r-pill 999px (every
   button and pill) · 50% (avatars, the tick, dots).
   Shadow: --rb-shadow-deep (a card on plum) · --rb-shadow-lift (a panel lying on a card) · the form's own hairline.
   Motion: --rb-t-hover, every hover and focus · --rb-ease-out, entrances (the after-form) · slides keep 0.8 s. */
:root { --rb-r-card: 20px; --rb-r-inner: 12px; --rb-r-chip: 6px; --rb-r-pill: 999px; --rb-shadow-deep: 0 30px 60px rgba(0, 0, 0, 0.35); --rb-shadow-lift: 0 0 0 1px var(--rb-border), 0 8px 22px rgba(36, 24, 42, 0.07); --rb-ease-out: cubic-bezier(0.25, 1, 0.5, 1); --rb-t-hover: 0.25s var(--rb-ease-out); }
/* the strays: 14, 15 and 16 px radii and a second deep shadow */
.community-carousel { border-radius: var(--rb-r-card); box-shadow: var(--rb-shadow-deep); }
.kaf-note, .layout-reading .page-intro, .rb-intake--one .done--one .done-offer { border-radius: var(--rb-r-inner); }
.rb-intake--one .done--one .done-offer { box-shadow: var(--rb-shadow-lift); }
/* one hover: buttons, links, the other service's tile, its arrow, the copy button */
:is(a, button, .fee-other, .fee-arrow, .stat-card, .kaf-copy, .bse-form__submit, .btn-charcoal-primary, .tea-link) { transition-duration: 0.25s; transition-timing-function: var(--rb-ease-out); }
/* one tag: the section's tag and the price card's tag, the same letter spacing (they were 0.2 and 0.15 em) */
.section-tag, .fee-tag, .rd-toc-title { letter-spacing: 0.16em; }
/* one spacing for every CAPS shout in a title (it was -0.04 em in the hero, normal elsewhere; too small a difference to
   ask about, so one value) */
:is(.pt-hero-title, .page-title, .section-title, .bse-form-box-title, .fee-card-title) b { letter-spacing: -0.02em; }
/* the field's focus ring was the old palette's terracotta tint: plum now, the phone number's box included */
.rb-intake--one :is(.bse-form__input, .bse-form__textarea):focus, .rb-intake--one .ph:focus-within { border-color: var(--rb-main); box-shadow: 0 0 0 4px rgba(94, 47, 102, 0.22); outline: none; }
/* NEW, a missing state: sending. The button keeps its plum, never greyed, never a jump in size; its ring is R-461's. */
@keyframes rb-spin {
  to { transform: rotate(360deg); }
}
.rb-intake--one .bse-form__submit[aria-busy="true"] { opacity: 1; cursor: progress; background: var(--rb-main); color: #fff; }
/* § SYS-2 RICHARD'S THREE ANSWERS (20 Oct, "1a ... go with A ... Q3A"), built once each.
   Q1 ONE PRIMARY BUTTON: 16 px Outfit 700 capitals, 0.06 em, a pill exactly 56 px tall (two lines on a phone fit it), 32 px
   sides (24 on a phone): the hero, every form's
   Send, the 404; the outline (the after-form's WhatsApp) is the same button without its fill. Honey on hover (§ 2).
   Q2 every title light with a heavy CAPS shout, the offer's included.
   Q3 THREE TEXT SIZES: intro 20 px (18 on a phone) · body 18 px (17 on a phone, the forms' floor) · small 15 px; since
   R-189 (26 Oct, Richard "Q1 - B") part of ONE SCALE of 8 steps by role, its tokens and classes in the system layer. */
html body :is(.btn-charcoal-primary, .rb-intake--one .bse-form .bse-form__submit, .rb-intake--one .done--one .done-offer__wa) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 56px; padding: 8px 32px; border-radius: var(--rb-r-pill); font-weight: 700; line-height: 20px; font-family: var(--rb-font-head); letter-spacing: 0.06em; text-transform: uppercase; }
html body .rb-intake--one .done--one .done-offer__wa { box-shadow: inset 0 0 0 2px var(--rb-main); }
@media (max-width: 767px) {
  html body :is(.btn-charcoal-primary, .rb-intake--one .bse-form .bse-form__submit) { padding: 8px 24px; white-space: normal; text-align: center; }
}
html body .p-fee .section-title { font-weight: 300; }
html body .p-fee .section-title b { font-weight: 800; }
/* § ST THE FORM'S STATES AND TWO SMALL PIECES (design-p7, 20 Oct, Richard: "Did you visualitze those error messages"; "save
   my number yes"). The page "Form states" draws them.
   Error: the field's edge --rb-error and a 4 px --rb-error-soft ring; the message 17 px, 600, under the field, after a
   16 px mark (a circle with "!"); the notice (a problem on my side) a soft error box above the button. */
.rb-intake--one .bse-form__field--has-error :is(.bse-form__input, .bse-form__textarea, .ph) { border-color: var(--rb-error); box-shadow: 0 0 0 4px var(--rb-error-soft); }
.rb-intake--one .bse-form__error { gap: 8px; margin-top: 8px; font-weight: 600; line-height: 1.35; }
.rb-intake--one .bse-form__error:not([hidden])::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rb-error); color: #fff; font: 800 12px/1 var(--rb-font-head); }
.rb-intake--one .bse-form__notice { padding: 14px 18px; border-radius: var(--rb-r-inner); font-weight: 500; }
.rb-intake--one .bse-form__notice a { color: inherit; font-weight: 700; }
/* the mockup's stand-in for :focus (a still picture cannot hold focus); the coder uses :focus */
/* the page's labels */
/* a tag that wraps on a phone: highlighted lines, never a full-width box (as the reading head's tag) */
@media (max-width: 767px) {
  html body .site-main .p-form .section-tag { display: inline; width: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 2; }
  html body .site-main .p-form .section-tag + * { margin-top: 12px; }
  /* the home's form head on the one 20 px gutter, as every page (it was 80 %) */
  html body.layout-home .site-main > .p-form { max-width: none; }
}
/* NEW, THE SMALL BUTTON (one style for every small action; today Know a flat?'s Copy): 15 px Outfit 700, a pill
   40 px tall, a 2 px plum outline, plum words, honey on hover, an optional 18 px icon. */
html body :is(.rb-btn-small, .kaf-copy) { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 40px; padding: 6px 18px; border: 0; border-radius: var(--rb-r-pill); background: transparent; box-shadow: inset 0 0 0 2px var(--rb-main); color: var(--rb-main); font: 700 15px/20px var(--rb-font-head); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; filter: none; transition: background-color var(--rb-t-hover), box-shadow var(--rb-t-hover); }
html body :is(.rb-btn-small, .kaf-copy):hover { background: var(--rb-btn-hover); color: var(--rb-btn-hover-ink); box-shadow: none; }
/* (Save my number: dropped, Richard 20 Oct: "there is a whatsapp button right below it") */
/* § FIN THE FINAL REVIEW (design-p7, 20 Oct): two judges over every page, laptop and phone; what broke the system */
/* every primary button: its words and arrow keep their gap (the button is a flex box now) */
html body :is(.btn-charcoal-primary, .rb-intake--one .bse-form .bse-form__submit) { gap: 0.5em; }
/* the .cz home has no reviews: no empty band where they stand on the English home */
/* the shout of a title on its own line on a phone, both languages; and when it wraps, its lines as tight as the title's */
@media (max-width: 767px) {
  html body .p-hero .pt-hero-title b { display: block; }
}
html body :is(.pt-hero-title, .page-title, .section-title) b { line-height: 1.05; }
/* the price card's small line (plus VAT, once; pro vás jako majitele) is small text, 15 px, never smaller */
@media (max-width: 767px) {
  /* one 20 px gutter on every page: the reading layout and About's closing card were 16; the card's two halves share
     one inner line, 22 px in (R-172 F4) */
  html body.layout-about .site-main > .p-cta { padding-left: 22px; padding-right: 22px; }
  /* R-172 F5: one 20 px gutter for every part on a phone, never the laptop's 90 % (18 px at 360, 19.5 at 390) */
  html body .site-navigation-bar .nav-inner, html body .site-footer-simple .container, html body .rb-community-widget .community-container,
  html body .rb-work-container, html body.layout-about .site-main > .p-saturday, html body.layout-service .site-main > .svc-up,
  html body .site-main > .rb-process-cards-section, html body.layout-service .site-main > .rb-intake { width: auto; margin-left: 20px; margin-right: 20px; }
  /* the .cz home's portrait as the English one: 168 px on a phone (its base is larger) */
  html body.page-cz-home .p-hero .pt-hero-visual { zoom: 0.486; }
  /* the service pages' heads on a phone are left-aligned, as the home's; the form card 24 px under its head */
  html body.layout-service :is(.p-steps_heading, .p-form) :is(.section-tag, .page-title, .page-intro, .page-intro p) { text-align: left; }
  html body.layout-service .site-main > .p-form:has(+ .rb-intake) { padding-bottom: 24px; }
  /* Prague Together's numbers: the label never touches the number */
  html body .stat-label { margin-top: 6px; }
}
/* one secondary button: the outline pill (the after-form's WhatsApp); the footer's WhatsApp takes it, small */
html body .site-footer-simple .btn-whatsapp-subtle { background: transparent; box-shadow: inset 0 0 0 2px var(--rb-main); color: var(--rb-main); border-radius: var(--rb-r-pill); }
html body .site-footer-simple .btn-whatsapp-subtle:hover { background: var(--rb-btn-hover); color: var(--rb-btn-hover-ink); box-shadow: none; }
/* the mockup's Form states page: its labels on the page's gutter */
/* one tag everywhere (section tags, the price card's, the footer's): 17 px (1.0625 rem, the size most tags had) Outfit 700
   capitals, 0.16 em, a 6 px chip; on a phone a long tag wraps as highlighted lines, never one full-width block.
   !important only against the mockup's older, more specific part rules; the coder builds one tag */
html body :is(.site-main .section-tag, .site-main .fee-tag, .site-main .rb-work-tag, .site-footer-simple .footer-tag) { line-height: 1.7; }
@media (max-width: 767px) {
  html body .site-main .section-tag { -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 2; }
  html body .site-main .section-tag + * { margin-top: 12px; }
}
/* the confirm round: the .cz home's form band keeps the English home's 100 px under the form on a phone; About's last
   card on the 20 px gutter; the service pages' tags left with their heads on a phone */
@media (max-width: 767px) {
  html body.page-cz-home .site-main > .rb-intake { padding-bottom: 100px; }
  html body.layout-service .site-main > :is(.p-steps_heading, .p-form) { text-align: left; }
}

/* ===== R-145_BRAND.css (loaded last in the mockup) ===== */
/* ==========================================================================
   R-145_BRAND.css  ·  the .com and the .cz site  ·  THE BRAND
   design-b145 · R-145 · palette and type only (no layout, no words).
   ONE version, chosen by Richard on 19 Oct (R-145_BRAND.md § W).

   PLUM #5E2F66 AND HONEY #F7C35C ON LINEN #F9F5EE. Nothing else.
   THE RULES
   - Plum: text accents on light (tags on plum ground, links, step numbers,
     shouts), the main button, the deep sections. Never darker than #5E2F66.
   - Honey: on plum, as text or marks (shouts, tags, ticks, numbers). On the
     light ground ONLY as a fill with ink on it (the swipe, the chips, the
     chosen pills, a hovered button). Never honey text on linen (1.7:1).
   - A page has at most two plum sections, never back to back.
   - White only where people type or read the price (the form, the card).
   - The form's red stays red: an error colour, not the brand.

   HOW IT WORKS. § 1 the tokens · § 2 the tokens onto the names site.css,
   intake.css and R-98_S4_UI.css already use, and onto the places they type
   a colour in · § 3 the type · § 4 the honey on light. Load order:
   site.css, intake.css, R-98_S4_UI.css, then this file, last.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1  THE BRAND TOKENS: plum and honey on linen (Richard 19 Oct, § W).
      Two colours and nothing else. Honey lives only on plum.
   -------------------------------------------------------------------------- */
:root { --rb-ground: #F9F5EE; --rb-surface: #FFFFFF; --rb-surface-2: #F4EEEA; --rb-ink: #24182A; --rb-ink-muted: #524458; --rb-border: rgba(36, 24, 42, 0.10); --rb-main: #5E2F66; --rb-main-press: #4D2654; --rb-deep: #5E2F66; --rb-deep-2: #6E3B77; --rb-on-deep: #FBF7F1; --rb-on-deep-muted: rgba(251, 247, 241, 0.95); --rb-line-on-deep: rgba(247, 195, 92, 0.22); --rb-accent: #F7C35C; --rb-accent-rgb: 247, 195, 92; --rb-glow: rgba(160, 100, 170, 0.35); --rb-band: #5E2F66; --rb-on-band: #FBF7F1; --rb-band-num: #F7C35C; --rb-band-glow: #42214A; --rb-card-bar: #F7C35C; --rb-btn: #5E2F66; --rb-btn-ink: #FFFFFF; --rb-btn-hover: #F7C35C; --rb-btn-hover-ink: #24182A; --rb-wa: #5E2F66; --rb-focus: #5E2F66; --rb-tint: #E9DCE6; --rb-error: #7C2617; --rb-error-soft: #FBE3DD; --rb-font-head: 'Outfit', system-ui, sans-serif; --rb-font-body: 'Inter', system-ui, sans-serif; --rb-sec: var(--rb-deep); --rb-on-sec: var(--rb-on-deep); --rb-on-sec-muted: var(--rb-on-deep-muted); --rb-sec-accent: var(--rb-accent); --rb-sec-line: var(--rb-line-on-deep); --rb-sec-glow: var(--rb-glow); --rb-sec-edge: rgba(var(--rb-accent-rgb), 0.6); --rb-sec-card: var(--rb-surface); }
/* .rb-soft on a section: the soft tint instead of the deep, its inks plum and text, the card's bar plum */
.rb-soft { --rb-sec: var(--rb-tint); --rb-on-sec: var(--rb-ink); --rb-on-sec-muted: var(--rb-ink-muted); --rb-sec-accent: var(--rb-main); --rb-sec-line: rgba(36, 24, 42, 0.12); --rb-sec-glow: transparent; --rb-sec-edge: rgba(94, 47, 102, 0.45); --rb-card-bar: var(--rb-main); }
/* --------------------------------------------------------------------------
   2  THE MAP: the brand onto the names the site already uses
   -------------------------------------------------------------------------- */
:root { --bg-canvas: var(--rb-ground); --text-primary: var(--rb-ink); --text-body: var(--rb-ink); --text-muted: var(--rb-ink-muted); --text-light: var(--rb-ink-muted); --accent-terracotta: var(--rb-main); --accent-sandstone: var(--rb-accent); --card-bg: var(--rb-surface); --input-bg: var(--rb-surface-2); --border-warm: var(--rb-border); --header-bg-translucent: color-mix(in srgb, var(--rb-ground) 60%, transparent); --whatsapp-text: var(--rb-wa); --whatsapp-bg-hover: color-mix(in srgb, var(--rb-wa) 6%, transparent); --whatsapp-border-hover: color-mix(in srgb, var(--rb-wa) 25%, transparent); --font-headings: var(--rb-font-head); --font-body: var(--rb-font-body); --f-focus-ring: color-mix(in srgb, var(--rb-focus) 16%, transparent); --f-press: var(--rb-main-press); --f-line: color-mix(in srgb, var(--rb-ink) 14%, transparent); --f-field-tint: var(--rb-surface-2); }
body { background-color: var(--rb-ground); }
/* the header and the footer (every page) */
.lang-switcher-single-btn:hover { background-color: color-mix(in srgb, var(--rb-main) 8%, transparent); }
.site-footer-simple { background-color: var(--rb-ground); }
/* scrolled: solid linen, so over plum it never turns lilac and text never shows through (judges, 19 Oct) */
.site-navigation-bar.scrolled { background-color: var(--rb-ground); }
/* the hero */
.pt-hero-subtitle { color: var(--rb-main); }
.pt-hero-has-spin::before { border-color: var(--rb-main); }
.pt-hero-ctas .btn-charcoal-primary { background-color: var(--rb-btn); border-color: var(--rb-btn); color: var(--rb-btn-ink); }
.pt-hero-ctas .btn-charcoal-primary:hover { background-color: var(--rb-btn-hover); border-color: var(--rb-btn-hover); color: var(--rb-btn-hover-ink); box-shadow: 0 10px 25px color-mix(in srgb, var(--rb-btn-hover) 30%, transparent); }
.tea-link.underline-tuned-down { border-bottom-color: color-mix(in srgb, var(--rb-main) 35%, transparent); }
a.tea-link[href*="wa.me"] { color: var(--rb-wa); border-bottom-color: color-mix(in srgb, var(--rb-wa) 35%, transparent); }
/* the home's offer (The Direct Way): on plum (--rb-sec), or on the soft tint with .rb-soft */
.rb-value-prop-widget { background-color: var(--rb-sec); color: var(--rb-on-sec); }
.rb-value-prop-widget .section-tag { color: var(--rb-sec-accent); }
.rb-value-prop-widget .section-title { color: var(--rb-on-sec); }
.rb-value-prop-widget .section-title b { color: var(--rb-sec-accent); }
.p-fee .fee-glow { background: radial-gradient(ellipse 50% 60% at 24% 64%, var(--rb-sec-glow), transparent 70%); }
.p-fee .fee-kicker, .p-fee .fee-why, .p-fee .fee-list p, .p-fee .fee-also li, .p-fee .fee-later, .p-fee .fee-other, .p-fee .fee-other-sub { color: var(--rb-on-sec-muted); }
.p-fee .fee-kicker b, .p-fee .fee-why b, .p-fee .fee-list h3, .p-fee .fee-also li b, .p-fee .fee-other a { color: var(--rb-on-sec); }
.p-fee .fee-list li { color: var(--rb-sec-accent); border-top-color: var(--rb-sec-line); }
.p-fee .fee-also { border-top-color: var(--rb-sec-line); }
.p-fee .fee-also-title { color: var(--rb-sec-accent); }
.p-fee .fee-also li::before { background: var(--rb-sec-accent); }
.p-fee .fee-other { border-color: var(--rb-sec-edge); }
/* the other-way tile is ONE button (Richard 19 Oct: "The Fast track button on homepage - can u make hover the whole
   button?"): the link covers the whole box; hover or focus: the edge solid in the section's accent, a faint wash, the
   arrow nudges; keyboard focus rings the whole tile (honey on plum) */
.p-fee .fee-other { position: relative; transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.p-fee .fee-other a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* the other service's tile on hover (Richard, 20 Oct, § W: the old hover "underwhelming", the honey fill "a bit too
   much ... try something softer"): a honey edge, a light honey tint, lifted 2 px, the arrow 4 px right; the words keep
   their colours. On every page that has one */
.p-fee .fee-other:is(:hover, :focus-within) { border-color: var(--rb-accent); background-color: color-mix(in srgb, var(--rb-on-sec) 6%, transparent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36, 24, 42, 0.10); }
.p-fee .fee-other:is(:hover, :focus-within) .fee-arrow { transform: translateX(4px); }
.p-fee .fee-other a:focus-visible { outline: none; }
.p-fee .fee-other:has(a:focus-visible) { outline: 2px solid var(--rb-sec-accent); outline-offset: 3px; }
/* the price card: white on the deep, its top bar honey (plum on the soft tint) */
.p-fee .fee-card { background: var(--rb-sec-card); color: var(--rb-ink); }
.p-fee .fee-card::before { background: var(--rb-card-bar); }
.p-fee .fee-card-title, .p-fee .fee-amount { color: var(--rb-ink); }
.p-fee .fee-card-title b { color: var(--rb-main); }
.p-fee .fee-ticks li::before { color: var(--rb-main); }
.p-fee .fee-example { background: var(--rb-surface); }
/* the theme's two section styles set the copy and bold colours; the brand's instead */
.bg-style-dark { --rb-copy-color: var(--rb-on-sec-muted); --rb-emphasis-color: var(--rb-on-sec); }
.bg-style-terracotta { --rb-copy-color: var(--rb-on-band); --rb-emphasis-color: var(--rb-on-band); }
/* the light parts: steps, reviews, the form's band */
.rb-process-num { color: var(--rb-main); }
/* the step numbers pop (Richard 19 Oct: "changing the step number color so they pop a bit more (no honey discs though)"):
   a short honey bar under each, a fill on light as § 4 allows, never honey text and never a disc. Their size is the
   body row's (R-189: 18 px, 17 on a phone, as Richard approved in the B shots; the 3.4rem here was the tester's F1) */
.rb-process-num { letter-spacing: -0.03em; }
.rb-process-num::after { content: ""; display: block; width: 32px; height: 5px; margin-top: 12px; border-radius: 3px; background: var(--rb-accent); }
.rb-process-card-copy { color: var(--rb-ink-muted); }
.pt-review-card, .rb-process-card { background-color: var(--rb-surface-2); }
/* the form's one white band (white is where people type). The FORM draws it, never its heading: the heading is
   sticky and above the form, so a band on it covers the form (R-98_S4_UI.css H3). site.css draws it on the home
   only; a service page ends in the same form, so it gets the same band */
.lang-en:is(.layout-home, .layout-service) .site-main > .rb-intake { background-color: var(--rb-surface); box-shadow: 0 0 0 100vmax var(--rb-surface); clip-path: inset(0 -100vmax); }
/* the one strong section: Prague Together */
.rb-community-widget { background-color: var(--rb-band); color: var(--rb-on-band); }
.rb-community-widget .community-desc, .rb-community-widget .community-desc p, .rb-community-widget .stat-label, .rb-community-widget .tea-link { color: var(--rb-on-band); }
.rb-community-widget .community-title { color: var(--rb-on-band); }
.rb-community-widget .stat-number, .rb-community-widget .section-tag { color: var(--rb-band-num); }
/* links on plum: honey, as every mark on plum */
.rb-value-prop-widget .tea-link { color: var(--rb-accent); border-bottom-color: color-mix(in srgb, var(--rb-accent) 45%, transparent); }
.rb-community-widget .community-carousel-wrapper::before { background: radial-gradient(circle, var(--rb-band-glow) 0%, transparent 70%); }
.rb-community-widget .community-dot.active { background-color: var(--rb-on-band); }
/* 3c's form: the send button is the main button; a chosen pill is honey with ink, like a hovered button */
.rb-intake--one .bse-form__submit { background: var(--rb-btn); border-color: var(--rb-btn); color: var(--rb-btn-ink); }
.rb-intake--one .bse-form__submit:hover { background: var(--rb-btn-hover); border-color: var(--rb-btn-hover); color: var(--rb-btn-hover-ink); }
/* chosen: the plum fill, white words (Richard 19 Oct: "inside form, select tags is weirdly honey - can u make it purple?"; 10.1:1); hover stays a plum edge on a plum wash, so the two never look alike */
.rb-intake--one .bse-form__date-preset[aria-pressed="true"], .rb-intake--one .bse-form__checkbox-label:has(:checked) { background: var(--rb-main); border-color: var(--rb-main); color: var(--rb-btn-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--rb-main) 28%, transparent); }
.rb-intake--one .tea-link { border-bottom-color: color-mix(in srgb, var(--rb-main) 35%, transparent); }
.rb-intake--one a.tea-link[href*="wa.me"] { color: var(--rb-wa); border-bottom-color: color-mix(in srgb, var(--rb-wa) 35%, transparent); }
/* 3c's sent state: the brand's, never a mint green (a judge, 19 Oct): white, plum words, the ink's hairline (3c sets
   these on .rb-intake--one, so the brand sets them there too) */
.rb-intake--one { --f-ok: var(--rb-main); --f-ok-ink: var(--rb-main); --f-ok-bg: var(--rb-surface); --f-ok-line: var(--rb-border); }
/* 3c's "Send another" after sending: the muted ink at full opacity (it was 3.0:1) */
.rb-intake--one .bse-form__done-again { color: var(--rb-ink-muted); opacity: 1; }
/* the choices' hover (Richard 19 Oct: "Can umake hover choices inside forms purple"): a plum edge and a plum wash
   (ink on it 14.5:1), the last grey gone; chosen stays the honey fill, so hover and chosen never look alike; never a
   solid plum hover */
.rb-intake--one .bse-form__checkbox-label:hover:not(:has(:checked)), .rb-intake--one .bse-form__date-preset:hover:not([aria-pressed="true"]) { border-color: var(--rb-main); background: color-mix(in srgb, var(--rb-main) 8%, transparent); }
/* a SERVICE page (layout `service`, R-98_S4_UI.css § S; the Fast Track is the first): no hero; the offer is the head,
   on linen, its price card plum with honey (re-keyed from .layout-service by design-p4, 19 Oct, the lead's ask) */
.layout-service .p-fee { background: transparent; color: var(--rb-ink); }
.layout-service .p-fee .section-title { color: var(--rb-ink); }
.layout-service .p-fee .section-title b { color: var(--rb-main); }
.layout-service .p-fee .fee-also-title { color: var(--rb-main); }
.layout-service .p-fee .fee-kicker, .layout-service .p-fee .fee-why, .layout-service .p-fee .fee-list p, .layout-service .p-fee .fee-also li, .layout-service .p-fee .fee-other, .layout-service .p-fee .fee-other-sub { color: var(--rb-ink-muted); }
.layout-service .p-fee .fee-kicker b, .layout-service .p-fee .fee-why b, .layout-service .p-fee .fee-list h3, .layout-service .p-fee .fee-also li b, .layout-service .p-fee .fee-other a { color: var(--rb-ink); }
.layout-service .p-fee .fee-list li { color: var(--rb-main); border-top-color: rgba(94, 47, 102, 0.18); }
.layout-service .p-fee .fee-also { border-top-color: rgba(94, 47, 102, 0.18); }
.layout-service .p-fee .fee-also li::before { background: var(--rb-main); }
.layout-service .p-fee .fee-other { border-color: rgba(94, 47, 102, 0.35); }
/* plum hairlines on linen */
/* the same one-button tile on linen: the edge and the ring plum, the wash plum */
.layout-service .p-fee .fee-other:is(:hover, :focus-within) { border-color: var(--rb-accent); background-color: color-mix(in srgb, var(--rb-accent) 22%, transparent); }
.layout-service .p-fee .fee-other:has(a:focus-visible) { outline-color: var(--rb-focus); }
/* R-198 C3 (§ 1.1, § B): the line read before paying, under a service page's card, in ink on the light ground (it took
   the plum section's light text and was invisible) */
/* (its size is the system layer's `small`, `p.fee-later`, R-189: a size only from a token there) */
.layout-service .p-fee .fee-later { margin: 18px 4px 0; line-height: 1.55; color: var(--rb-ink-muted); }
.layout-service .p-fee .fee-later b { color: var(--rb-ink); }
/* R-198 C8 (§ 2, § B): two side lines, one under the other, in one wrapper that takes the grid area `other` */
.p-fee .fee-others { display: grid; gap: 12px; align-self: start; margin: 20px 0 0; }
.p-fee .fee-others .fee-other { margin: 0; grid-area: auto; }
@media (min-width: 993px) { .p-fee .fee-others { grid-area: other; } }
.layout-service .p-fee .fee-card { background: var(--rb-deep); color: var(--rb-on-deep); }
.layout-service .p-fee .fee-card::before { background: var(--rb-accent); }
.layout-service .p-fee .fee-card-title, .layout-service .p-fee .fee-amount { color: var(--rb-on-deep); }
/* the card's name on the plum card: honey (it was plum on plum) */
.layout-service .p-fee .fee-tag { color: var(--rb-accent); }
.layout-service .p-fee .fee-card-title b, .layout-service .p-fee .fee-ticks li::before { color: var(--rb-accent); }
.layout-service .p-fee .fee-example { background: var(--rb-deep-2); }
.layout-service .p-fee .fee-plus-note, .layout-service .p-fee .fee-guarantee { color: var(--rb-on-deep-muted); }
/* the phone menu (the drawer): site.css paints it charcoal; it is plum, honey its accent */
.mobile-menu-overlay.menu-theme-dark { --bg-canvas: var(--rb-deep); --text-primary: var(--rb-on-deep); --text-body: var(--rb-on-deep); --text-muted: var(--rb-on-deep-muted); --text-light: var(--rb-on-deep-muted); --accent-terracotta: var(--rb-accent); --accent-green-start: var(--rb-accent); --border-warm: var(--rb-line-on-deep); --card-bg: var(--rb-deep-2); --whatsapp-text: var(--rb-accent); }
.menu-theme-dark .hamburger-whatsapp-btn { color: var(--rb-ink); }
.menu-theme-dark .hamburger-whatsapp-btn:hover { color: var(--rb-accent); }
/* the focus ring, every link and button: plum on light, honey on plum */
:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 3px; }
:is(.rb-value-prop-widget, .rb-community-widget, .menu-theme-dark, .layout-service .fee-card) :focus-visible { outline-color: var(--rb-accent); }
/* About's work (rb_work) on plum, the deep: linen words, the shout and the tag honey, the phone videos on the deep's box */
.rb-work-widget { background: var(--rb-deep); }
.rb-work-tag { color: var(--rb-accent); padding: 0; }
.rb-work-title { color: var(--rb-on-deep); }
.rb-work-title span { color: var(--rb-accent); }
.rb-work-intro-copy p, .rb-work-caption, .rb-work-outro p { color: var(--rb-on-deep-muted); }
.rb-work-name, .rb-work-outro b { color: var(--rb-on-deep); }
.rb-work-play { background: var(--rb-deep-2); }
.rb-work-play-icon { background: color-mix(in srgb, var(--rb-on-deep) 92%, transparent); }
.rb-work-play-icon::after { border-left-color: var(--rb-main); }
.rb-work-widget :focus-visible { outline-color: var(--rb-accent); }
/* --------------------------------------------------------------------------
   3  THE TYPE: Outfit for headings and the logo, Inter for reading. Both
      draw all 28 Czech letters themselves (measured 19 Oct). Sizes: a
      sentence people read is 14 px or more (running text 17 px); labels,
      captions and legal lines may go to 0.78rem (12.5 px), never smaller.
   -------------------------------------------------------------------------- */
/* the hero title of the home and About (Richard 19 Oct, Q2 "yes"): a third smaller than the rebuild's clamp(3.5rem, 8vw, 7.5rem), balanced,
   so his photo and the button are on a laptop's first screen (its spacing is R-98_S4_UI.css § P1) */
@media (min-width: 993px) {
  :is(.layout-home, .layout-about) .p-hero .pt-hero-title { text-wrap: balance; }
}
/* Czech capitals carry accents above the cap height: the hero title's 0.9 let "JÁ VÁM" touch the line above */
.lang-cs .pt-hero-title { line-height: 1.02; }
/* the review quotes were Inter 300 at 16.8 px: too light to read well in a second language */
.pt-review-quote-text { font-weight: 400; }
/* --------------------------------------------------------------------------
   4  HONEY ON LIGHT: a fill with ink on it, rare on purpose (a swipe means
      "this word matters"). The swipe is an underline under the glyphs and
      the chip has no vertical padding, so nothing moves.
   -------------------------------------------------------------------------- */
:root { --rb-pop: var(--rb-accent); --rb-pop-ink: var(--rb-ink); }
/* the swipe: the hero's bold line, the steps heading's bold words and a service head's shout (§ H), nowhere else (on a three-line heading it is a slab) */
.pt-hero-title b, .p-steps_heading .page-title b { text-decoration-line: underline; text-decoration-color: var(--rb-pop); text-decoration-thickness: 0.3em; text-underline-offset: -0.24em; text-decoration-skip-ink: none; }
/* the chips: every section tag on a light ground, the footer's included. The sub-labels inside an offer ("In every
   package" on the Fast Track) stay plum words: they label a list, they do not open a section */
.pt-page-header .section-tag, .layout-service .p-fee .section-tag { display: inline-block; width: auto; padding: 0 12px; border-radius: 6px; background: var(--rb-pop); color: var(--rb-pop-ink); }
/* the footer's tag: the same chip, centred (a table shrinks to its words and keeps its own line) */
.footer-tag { display: table; margin-left: auto; margin-right: auto; padding: 0 12px; border-radius: 6px; background: var(--rb-pop); color: var(--rb-pop-ink); }
/* the step numbers stay plum (§ 2): honey discs made the row heavy */
/* Prague Together on the soft tint (About, 20 Oct: How it started comes first, so the band would touch the plum work part;
   never two plum parts back to back, R-140 § 0.7). Inks from the tint's own measures: ink 12.8:1, plum 7.6:1 */
.rb-community-widget.rb-soft { background-color: var(--rb-tint); color: var(--rb-ink); }
.rb-community-widget.rb-soft .community-desc, .rb-community-widget.rb-soft .community-desc p, .rb-community-widget.rb-soft .stat-label { color: var(--rb-ink-muted); }
.rb-community-widget.rb-soft .community-desc b, .rb-community-widget.rb-soft .community-title { color: var(--rb-ink); }
.rb-community-widget.rb-soft .stat-number, .rb-community-widget.rb-soft .section-tag, .rb-community-widget.rb-soft .tea-link { color: var(--rb-main); }
.rb-community-widget.rb-soft .community-carousel-wrapper::before { background: radial-gradient(circle, rgba(94, 47, 102, 0.18) 0%, transparent 70%); }
.rb-community-widget.rb-soft .community-dot { background-color: rgba(36, 24, 42, 0.25); }
.rb-community-widget.rb-soft .community-dot.active { background-color: var(--rb-main); }
.rb-community-widget.rb-soft :focus-visible { outline-color: var(--rb-focus); }
/* § F THE FORMS, bigger text only (Richard, 20 Oct, § W: "Only the bigger text; keep the old round pills, Honey
   everywhere, as before"): 3c's look as it was (round pills, the plum fill when chosen, the honey hover on the button),
   every size 17 px (1.0625rem) or more. All four forms: 3c's two, Chci prodat's and Know a flat?'s. */
.rb-intake--one .bse-form__label { letter-spacing: 0.04em; }
/* the errors read the brand's token, never intake.css's own --f-err (coder: replace --f-err and the notice's two hex values with these) */
.rb-intake--one { --f-err: var(--rb-error); --f-err-ring: var(--rb-error-soft); }
.rb-intake--one .bse-form__notice { border-color: color-mix(in srgb, var(--rb-error) 30%, var(--rb-surface)); background: var(--rb-error-soft); color: var(--rb-error); }
.rb-intake--one .bse-form__input, .rb-intake--one .ph { min-height: 52px; }
.rb-intake--one .bse-form__submit { font-size: 1.125rem; }
.rb-intake--one .bse-form__consent-link { white-space: nowrap; }
.rb-intake--one .bse-form__textarea:is([rows="3"], [rows="4"]) { height: auto; min-height: calc(3 * 1.5em + 28px); }
/* three lines: a placeholder never cut */
/* at 17 px a pill needs room: a half-width group is two columns (an odd last pill spans the row), the six sizes three */
.rb-intake--one .bse-form__checkbox-label, .rb-intake--one .bse-form__date-preset { min-height: 46px; }
.rb-intake--one .bse-form__field.is-half .bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-intake--one .bse-form__field.is-half .bubbles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.rb-intake--one .bubbles--cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container intake (max-width: 600px) {
  .rb-intake--one .bubbles, .rb-intake--one .bubbles--cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-intake--one .bubbles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rb-intake--one .bse-form__checkbox-label, .rb-intake--one .bse-form__date-preset { min-height: 46px; }
}
/* § H A SERVICE PAGE'S HEAD: the swipe, in ink (Richard, 20 Oct, § W: "the swipe should stay as it was (just the bottom
   half of the font size - the same as primary hero, my previous comment was about color of the font, charcoal/black is
   perfect)"). The shout keeps the hero's swipe, same thickness and offset, and its letters are ink, not plum. The tag
   is a plum chip, so the honey on the page is the swipe alone. Every service page: The Express Search, Know a flat?,
   Chci pronajmout, Chci prodat. */
.layout-service .p-fee .fee-head .section-title b, .p-sellhead .page-title b { color: var(--rb-ink); text-decoration-line: underline; text-decoration-color: var(--rb-pop); text-decoration-thickness: 0.3em; text-underline-offset: -0.24em; text-decoration-skip-ink: none; }
.layout-service .p-fee .section-tag, .p-sellhead .section-tag { background: var(--rb-main); color: var(--rb-on-deep); }

/* ===== build-pg4, after the judges (20 Oct): the site's markup where it differs from the mockup's ===== */
/* the slot sanitiser writes em as i and strong as b: the TL;DR's signature and its lead word as the mockup draws them */
.layout-reading .rd-tldr i { display: block; margin-top: 8px; font: 600 1rem var(--font-headings); font-style: normal; }
.layout-reading .rd-tldr p > b:first-child { font-weight: bolder; color: inherit; }
/* § CK THE COOKIE BANNER (R-98_S4_UI.css § CK, design-ck168 with Richard, R-168; Richard 20 Oct: "I like the C, just make
   the essentials only blank button so people click the Yes thats fine", and 21 Oct: "2 essential outlined"). Drawn on
   the mockup's page "Cookie banner", round 2. It REPLACES notice.css's look, which sat in the layer 'base' and lost
   every button rule to this layer's `button { font: inherit; color: inherit; }` (the Yes drew dark words on plum,
   1.67:1, measured 21 Oct). Behaviour untouched (notice.js, consent.js).
   The card bottom left, 460 px; on a phone (600 px and less) a sheet 12 px from the edges, the buttons stacked,
   Essentials only on top (it is first in the DOM). The two answers: the site's one primary button (SYS-2 Q1), the same
   element, class, size and row, one tap each; they differ in FILL only: Yes plum with white words (10.1:1), Essentials
   only the outline, plum words on white (9.3:1). The title light with a CAPS shout (SYS-2 Q2). After a choice nothing
   floats: there is no badge (consent-view.js); the footer's Cookie settings reopens the card. */
.bc-root { left: 24px; bottom: 24px; max-width: none; width: 460px; }
.bc-notice { box-sizing: border-box; padding: 28px 28px 24px; border: 0; border-radius: var(--rb-r-card); background: var(--rb-surface);
  box-shadow: 0 0 0 1px var(--rb-border), 0 24px 60px rgba(36, 24, 42, 0.18); font-family: var(--rb-font-body); }
.bc-notice__title { margin: 0; font: 300 1.375rem/1.2 var(--rb-font-head); letter-spacing: -0.01em; color: var(--rb-ink); }
.bc-notice__title b { font-weight: 800; letter-spacing: -0.02em; color: var(--rb-main); }
.bc-notice__body { margin-top: 8px; font-size: var(--rb-fs-small); line-height: 1.55; color: var(--rb-ink-muted); }
.bc-notice__link { color: var(--rb-main); text-decoration: underline; text-underline-offset: 2px; }
/* a Yes not saved: one line in the error colour, as the form's notice (§ ST) */
.bc-notice__error { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--rb-r-inner); background: var(--rb-error-soft); color: var(--rb-error); font-size: var(--rb-fs-small); font-weight: 500; line-height: 1.4; }
.bc-notice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.bc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-width: 0; min-height: 56px; padding: 8px 16px;
  border: 0; border-radius: var(--rb-r-pill); font: 700 1rem/20px var(--rb-font-head); letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: background-color var(--rb-t-hover), color var(--rb-t-hover), box-shadow var(--rb-t-hover); }
/* the yes: plum, WHITE words */
.bc-btn--primary { background: var(--rb-btn); color: var(--rb-btn-ink); }
.bc-btn--primary:hover { background: var(--rb-btn-hover); color: var(--rb-btn-hover-ink); box-shadow: none; }
/* Essentials only: the outline, plum words on white, the same size and type */
.bc-btn--secondary { background: transparent; box-shadow: inset 0 0 0 2px var(--rb-main); color: var(--rb-main); }
.bc-btn--secondary:hover { background: var(--rb-btn-hover); box-shadow: none; color: var(--rb-btn-hover-ink); }
.bc-btn:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 3px; }
/* a Yes being saved: notice.js sets aria-busy on the root; the yes keeps its words, a honey ring turns after them (as
   the form's Send, § SYS); never greyed, both buttons stay pressable (the last press wins) */
.bc-root[aria-busy="true"] .bc-btn--primary { cursor: progress; }
.bc-root[aria-busy="true"] .bc-btn--primary::after { content: ""; flex: none; width: 14px; height: 14px; box-sizing: border-box; border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--rb-accent); border-radius: 50%; animation: rb-spin 0.9s linear infinite; }
/* build-ck168, the judge's L1: side by side the pill is 197 px, and the English words (149) with the gap and the ring
   (24) did not fit its 165 px: "YES, THAT'S / FINE" the moment it was pressed. Above a phone the ring sits in the
   pill's right padding, centred in the space after the words, and takes no room from them (test:consent ⑩b). */
@media (min-width: 601px) {
  .bc-root[aria-busy="true"] .bc-btn--primary::after { position: absolute; top: 50%; right: 5px; margin-top: -7px; }
}
@media (max-width: 600px) {
  .bc-root { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .bc-notice { padding: 22px 20px 18px; border-radius: var(--rb-r-card); }
  .bc-notice__title { font-size: 1.25rem; }
  .bc-notice__actions { grid-template-columns: 1fr; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bc-btn { transition: none; } .bc-root[aria-busy="true"] .bc-btn--primary::after { animation-duration: 2.4s; } }
}

@layer system {
@media (max-width: 767px) { :is(.lang-en, .lang-cs).layout-service .site-main > .rb-intake { margin-bottom: 0; } }
@media (max-width: 767px) { .page-know-a-flat .p-checks-list { margin-bottom: 88px; } }
html body.page-cz-home .site-main > .rb-intake { margin-bottom: 0; }
html body.page-cz-home .site-main > .p-community { margin-top: 0; }
html body :is(.site-main .section-tag, .site-main .fee-tag, .site-main .rb-work-tag, .site-footer-simple .footer-tag) { letter-spacing: 0.16em; }
@media (max-width: 767px) { html body .site-main .section-tag { display: inline; width: auto; } }
@media (max-width: 767px) { html body.layout-about .site-main > .p-adds_up { margin-left: 20px; margin-right: 20px; width: auto; } }
/* ==========================================================================
   R-189 ONE TYPE SCALE, 8 STEPS BY ROLE (R-189_TYPE_SCALE_DESIGN.md § 4, FINAL; Richard 26 Oct: "Q1 - B, Q2 - A").
   § 4.1 the tokens: titles fluid from 390 to 1440 px and stopped there, so no title is smaller on a bigger screen;
   the text steps change at 768 as before; 3 fixed UI sizes. § 4.2: each class takes ONE token, here and nowhere else
   (every other size of these classes is gone from this file: check:pages ⑳, tools/site/type.check.mjs). Never
   `.part p`: every section of every page is a `.part`, and that one selector forced every paragraph to the body size.
   ========================================================================== */
:root {
  --rb-fs-display: clamp(3rem, 2.2571rem + 3.0476vw, 5rem);           /* 48 > 80 */
  --rb-fs-title-xl: clamp(2.375rem, 1.7714rem + 2.4762vw, 4rem);      /* 38 > 64 */
  --rb-fs-title-l: clamp(2.125rem, 1.8rem + 1.3333vw, 3rem);          /* 34 > 48 */
  --rb-fs-title-m: clamp(1.5rem, 1.2679rem + 0.9524vw, 2.125rem);     /* 24 > 34 */
  --rb-fs-title-s: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem);    /* 20 > 22 */
  --rb-fs-intro: 1.25rem;                                             /* 20 (18 on a phone) */
  --rb-fs-body: 1.125rem;                                             /* 18 (17 on a phone, the forms' floor) */
  --rb-fs-small: 0.9375rem;                                           /* 15 */
  --rb-fs-label: 1.0625rem;                                           /* 17, fixed UI */
  --rb-fs-button: 1rem;                                               /* 16, fixed UI (§ SYS-2 Q1) */
  --rb-fs-micro: 0.875rem;                                            /* 14, fixed UI, caps only */
}
@media (max-width: 767px) {
  :root { --rb-fs-intro: 1.125rem; --rb-fs-body: 1.0625rem; }
}
/* Czech heroes 40 > 70: longer words */
.lang-cs { --rb-fs-display: clamp(2.5rem, 1.8036rem + 2.8571vw, 4.375rem); }
/* § 4.2, row by row. The body row before the intro row: a class later put in both still renders as intro */
html body .pt-hero-title { font-size: var(--rb-fs-display); }
html body :is(.p-steps_heading:not(.p-checks_heading), .p-story, .p-head) .page-title,
html body :is(.p-fee .section-title, .community-title, .rb-work-title) { font-size: var(--rb-fs-title-xl); }
/* the footer's address fits a phone's line */
html body .footer-email-trigger { font-size: min(var(--rb-fs-title-xl), 6.4vw); }
html body :is(.p-form, .p-adds_up, .p-checks_heading, .p-cta) .page-title,
html body .p-fee .fee-amount { font-size: var(--rb-fs-title-l); }
html body :is(.p-fee .fee-list h3, .p-fee .fee-card-title, .stat-number) { font-size: var(--rb-fs-title-m); }
html body :is(.rb-process-card-title, .rb-work-name, .bse-form-box-title, .pt-hero-subtitle, .rd-body h2, .p-fee .fee-plus-row b) { font-size: var(--rb-fs-title-s); }
/* the form box's title once the form is sent is the card's heading, not a box title: the title-l step (R-189 coder) */
html body .rb-intake--one .bse-form__done .bse-form-box-title { font-size: var(--rb-fs-title-l); }
html body :is(.fee-list p, .fee-ticks li, .fee-also li, .kaf-note p, .rd-body p, .rd-body li, .rd-quote p, p.bse-form-box-desc, p.done-offer__p, p.fee-when, p.fee-why, p.form-order, p.pt-review-quote-text, p.pt-review-author-name, p.rb-process-card-copy, p.rb-work-caption, .rd-table td) { font-size: var(--rb-fs-body); }
/* body too, in a rule of their own: in the row's :is() their (0,2,3) beat the small and intro rows after it, and the legal
   stamp (.rd-body p, p.legal-stamp) drew body (the tester's R1, 27 Oct) */
html body :is(.rb-process-num, .p-fee .fee-other-q, .p-fee .fee-plus-row > span) { font-size: var(--rb-fs-body); }
html body :is(.pt-hero-copy p, .page-intro p, .community-desc p, p.fee-kicker, .rb-work-intro-copy p, .rb-work-outro p, .fee-amount span, .rd-tldr) { font-size: var(--rb-fs-intro); }
/* the price's second line: light, 8 px under the price */
html body .fee-amount span { margin-top: 8px; font-weight: 300; letter-spacing: 0; }
html body :is(p.fee-example, p.fee-guarantee, p.fee-later, p.fee-plus-note, p.form-notice, p.legal-stamp, p.rd-small, p.pt-review-author-title, p.footer-credits, p.footer-identity, p.footer-agents, p.bse-form__stuck, .fee-other-sub, .desktop-menu-list a, .svc-up a, .rd-toc li, .rd-toc a, .footer-legal-links, .tea-link, .page-intro i, .toast-notification) { font-size: var(--rb-fs-small); }
/* label; the forms' 17 px list (§ F) as before, the form's own WhatsApp link with it (the forms' 17 px floor); its box's
   line (body) and its notice (small) keep their rows, as before */
html body :is(.section-tag, .fee-tag, .rb-work-tag, .footer-tag, .fee-also-title, .pt-review-tag, .footer-phone a, .p-fee .fee-other a) { font-size: var(--rb-fs-label); }
/* R-198 (§ 7.4, § 7.5): the order step's start-now box is label; the done card's profile lines body, its deposit line small */
html body .rb-intake--one .form-start { font-size: var(--rb-fs-label); }
html body .done-profile p { font-size: var(--rb-fs-body); }
html body .done-profile p.done-deposit { font-size: var(--rb-fs-small); }
html body .rb-intake--one :is(.bse-form__input, .bse-form__textarea, .ph, .ph__cc, .ph__unit, .bse-form__error, .bse-form__notice, .rb-intake__trust, .bse-form__done-again, .bse-form__date-preset-result, .bse-form__checkbox-label, .bse-form__date-preset, .tea-link, .bse-form__label) { font-size: var(--rb-fs-label); }
html body :is(.btn-charcoal-primary, .rb-intake--one .bse-form .bse-form__submit, .rb-intake--one .done--one .done-offer__wa, .btn-whatsapp-subtle) { font-size: var(--rb-fs-button); }
html body :is(.stat-label, .location-text, .lang-switcher-single-btn, .rd-table th, .pt-read-more-toggle, .rd-toc-title) { font-size: var(--rb-fs-micro); }
/* ==========================================================================
   R-189 § 4.3 THE LAYOUT FIXES. One number: TWO COLUMNS START AT 1200 px, for the form row, the price section and the
   reading pages. Line A stays 1400 px at every width (Richard, Q2 A).
   ========================================================================== */
/* L1 the form row. From 993 to 1199 px the heading stands above the form, full line A (the main a flex column, never a
   block: the home orders its parts) */
@media (min-width: 993px) and (max-width: 1199px) {
  :is(.layout-home, .layout-service) .site-main { display: flex; flex-direction: column; }
  :is(.layout-home, .layout-service) .site-main > .p-form { position: static; width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; padding: 100px 0 32px; text-align: left; }
  :is(.layout-home, .layout-service) .site-main > .p-form .page-intro { max-width: 60ch; }
  :is(.layout-home, .layout-service) .site-main > .rb-intake { width: 90%; max-width: var(--layout-width-boxed); margin: 0 auto; padding: 0 0 100px; }
}
/* From 1200 px the grid itself sits on line A, 5 : 7, so neither column narrows as the window grows (the outer margin
   that held the heading to line A ate its column: 303 px at 2560) */
@media (min-width: 1200px) {
  :is(.layout-home, .layout-service) .site-main { grid-template-columns: minmax(0, 1fr) minmax(0, calc(min(90vw, var(--layout-width-boxed)) * 5 / 12)) minmax(0, calc(min(90vw, var(--layout-width-boxed)) * 7 / 12)) minmax(0, 1fr); }
  :is(.layout-home, .layout-service) .site-main > .p-form { grid-column: 2; margin: 0; padding-right: 56px; }
  :is(.layout-home, .layout-service) .site-main > .rb-intake { grid-column: 3; margin: 0; }
}
/* L1b the price section: side by side from 1200 px too (at 1024 the card had 306 px and a price could not stand on one
   line); below, the phone's order, and the card, the tile and the later line no wider than 640 px */
@media (min-width: 993px) and (max-width: 1199px) {
  .p-fee .fee-wrap { display: block; }
  .p-fee .fee-grid { display: flex; flex-direction: column; gap: 32px; }
  .p-fee .fee-gets { display: contents; }
  .p-fee .fee-list { order: 1; }
  .p-fee .fee-card { order: 3; }
  .p-fee .fee-also { order: 4; margin-top: 0; }
  .p-fee .fee-later { order: 3; margin-top: -16px; }
  .p-fee .fee-other { margin-top: 32px; }
  .p-fee .fee-head { margin-bottom: 32px; }
}
/* L2 the reading layout: the section list beside the text from 1200 px; below, one column up to 760 px, the list the
   phone's tinted box above the text (never sticky), the table still a table */
@media (min-width: 768px) and (max-width: 1199px) {
  .p-fee :is(.fee-card, .fee-other, .fee-later) { max-width: 640px; }
  .rd-grid { display: block; width: 90%; max-width: 760px; margin: 40px auto 120px; }
  .layout-reading .p-head { width: 90%; max-width: 760px; }
  .rd-toc { position: static; margin: 0 0 40px; padding: 20px 24px; border-radius: 12px; background: var(--rb-tint); }
}
/* L5 (R-185 EN2) every title balanced: no word alone on its last line */
:is(.pt-hero-title, .page-title, .section-title, .community-title, .rb-work-title, .fee-card-title, .fee-amount, .fee-list h3, .rb-process-card-title, .bse-form-box-title, .rd-body h2) { text-wrap: balance; }
.rb-intake--one .bse-form .bse-form__submit { position: relative; }
.rb-intake--one .bse-form__state { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.rb-intake--one .bse-form__state::before { content: attr(data-t); }
.rb-intake--one .bse-form__submit[aria-busy="true"] .bse-form__send { opacity: 0; }
.rb-intake--one .bse-form__submit[aria-busy="true"] .bse-form__state { display: flex; }
.rb-intake--one .bse-form__submit[aria-busy="true"]::after { content: none; }
.rb-intake--one .bse-form__submit[aria-busy="true"] .bse-form__state::after { content: ""; flex: none; display: inline-block; width: 16px; height: 16px; margin-left: 12px; box-sizing: border-box; border: 2.5px solid rgba(255, 255, 255, 0.25); border-top-color: var(--rb-accent); border-right-color: var(--rb-accent); border-radius: 50%; animation: rb-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rb-intake--one .bse-form__submit[aria-busy="true"] .bse-form__state::after { animation-duration: 2.4s; } }
.rb-intake--one .bse-form__stuck { max-height: 0; margin: 0; overflow: hidden; visibility: hidden; color: var(--rb-ink); font-weight: 500; line-height: 1.5; text-align: center; text-wrap: balance; animation: rb-stuck 1ms linear 10s forwards; }
.rb-intake--one .bse-form__stuck a { color: var(--rb-main); text-decoration: underline; text-underline-offset: 3px; }
@keyframes rb-stuck { to { max-height: 12em; margin-top: 14px; visibility: visible; } }
@media (scripting: none) { .rb-intake--one .bse-form__stuck { animation-delay: 0s; } }
@media (prefers-reduced-motion: reduce) { .rb-intake--one .bse-form__stuck { max-height: 12em; margin-top: 14px; visibility: visible; } }
.rb-intake--one .bse-form__stuck.is-open { max-height: 12em; margin-top: 14px; visibility: visible; animation: none; }
.rb-intake--one .bse-form__submit[aria-busy="true"] .bse-form__state[data-tick]::after { content: none; }
.rb-intake--one .bse-form__live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footer-agents { margin: 0 0 12px; color: var(--text-muted); font-weight: 400; }
.footer-agents a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-agents a:hover { color: var(--accent-terracotta); }
}

/* ── R-193: the Nájem NaMax form's optional floor plan (a file field, its hint, the done panel's line when it did not
   arrive). The field takes the inputs' tint and line; the browser's own button stays, so a phone shows its own picker. */
.rb-intake--one .bse-form__file {
  display: block; width: 100%; min-height: 50px; padding: 12px 16px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--f-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(30, 28, 28, .02);
  font-family: var(--font-body); font-size: 15px; color: var(--text-primary);
}
.rb-intake--one .bse-form__file:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--f-focus-ring); border-color: var(--accent-terracotta); }
.rb-intake--one .bse-form__file::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; border-radius: var(--rb-r-chip);
  background: var(--rb-main); color: var(--rb-btn-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.rb-intake--one .bse-form__hint { display: block; margin-top: 6px; font-size: 14px; color: var(--text-muted); }
.rb-intake--one .bse-form__field--has-error .bse-form__file { border-color: var(--rb-error); background: var(--rb-error-soft); }
.bse-form__done .done-plan { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--rb-r-inner); background: var(--rb-error-soft); color: var(--rb-error); font-size: 15px; }
.bse-form__done .done-plan a { color: inherit; text-decoration: underline; }