/* ==========================================================================
   demo-site.css — Ridgeline Retreats site chrome for the standalone demo.
   Design language follows tahoesignature.com (recon 2026-07-22, computed
   styles read off the live site): Jost (300/400/500) + Cormorant Garamond
   italic; navy #0a1f35, blue #006bad, light blue #5ab8ff, mint #b8ddd5,
   cream #faf8f5; letter-spaced uppercase micro-labels with an em-dash rule;
   arrow CTAs; alternating navy/cream/white bands.

   Demo-only file — NOT part of the real plugin (which gets its chrome from
   the WordPress theme). Loaded AFTER the plugin's tokens.css, so the :root
   block below re-skins the plugin's own .lx-next components (cards, booking
   card, tabs, calendar) purely via their CSS variables — zero plugin edits.
   ========================================================================== */

/* ── Plugin token overrides (re-themes .lx-next surfaces) ─────────────────── */
:root {
    --lx-color-brand:      #006bad;
    --lx-color-brand-ink:  #00558a;
    --lx-color-brand-tint: #e8f1f8;
    --lx-color-accent:     #006bad;
    --lx-color-accent-ink: #00558a;
    --lx-color-ink:        #101f30;
    --lx-color-ink-2:      #3d4c5e;
    --lx-color-ink-3:      #7c8794;
    --lx-color-bg-2:       #faf8f5;
    --lx-color-bg-3:       #f1eee8;
    --lx-color-line:       #e7e3db;
    --lx-color-line-2:     #d6d1c6;
    --lx-font-sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lx-font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;

    /* Demo-chrome palette (rr = Ridgeline Retreats) */
    --rr-navy:      #0a1f35;
    --rr-navy-2:    #10294a;   /* hero gradient upper stop */
    --rr-blue:      #006bad;
    --rr-blue-ink:  #00558a;
    --rr-sky:       #5ab8ff;
    --rr-mint:      #b8ddd5;
    --rr-cream:     #faf8f5;
    --rr-ink:       #101f30;
    --rr-line-dark: rgba(255, 255, 255, 0.14);
}

body {
    /* Zero the browser's default 8px body margin. Without this, the
       transparent html/body let the browser's white canvas show through as an
       8px frame around every (dark) page — the "border" the demo appeared to
       have on all pages. */
    margin: 0;
    font-family: var(--lx-font-sans);
    color: var(--rr-ink);
    -webkit-font-smoothing: antialiased;
}

/* ── Shared primitives ────────────────────────────────────────────────────── */

/* Micro-label: — SMALL CAPS LABEL (dash drawn with a pseudo-element) */
.rr-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rr-blue);
}
.rr-label::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}
.rr-label--ondark { color: var(--rr-mint); }
.rr-label--muted  { color: #6b6b66; }

/* CTA buttons: uppercase, letter-spaced, arrow */
.rr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    font-family: var(--lx-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.rr-btn::after {
    content: "\2192";               /* → */
    font-size: 14px;
    line-height: 1;
    transition: transform 0.18s ease;
}
.rr-btn:hover::after { transform: translateX(3px); }
.rr-btn--solid   { background: var(--rr-blue); color: #fff; }
.rr-btn--solid:hover { background: var(--rr-blue-ink); }
.rr-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.rr-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.rr-btn--outline-navy { background: transparent; color: var(--rr-navy); border-color: rgba(10,31,53,0.4); }
.rr-btn--outline-navy:hover { border-color: var(--rr-navy); background: rgba(10,31,53,0.05); }
.rr-btn--noarrow::after { content: none; }

.rr-container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* Serif italic accent (the Tahoe signature move) */
.rr-accent {
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-weight: 500;
}

/* ── Demo disclaimer banner ───────────────────────────────────────────────── */
.lx-demo-banner {
    background: #061422 !important;
    color: var(--rr-mint) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 7px 10px !important;
}
.lx-demo-banner a { color: var(--rr-sky) !important; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.lx-demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lx-space-4, 16px);
    padding: 18px clamp(16px, 4vw, 48px);
    background: var(--rr-navy);
    border-bottom: none;
    position: relative;
    z-index: 50;
}
.lx-demo-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}
.lx-demo-header__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rr-mint);
    color: var(--rr-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lx-font-serif);
    font-size: 19px;
    font-weight: 600;
    flex: none;
}
/* Real per-site logo (manifest `logo`), rendered INSTEAD of the avatar+lockup by
   lx_demo_brand_logo(). Height-locked to the avatar's 40px so the header row
   keeps its rhythm whatever aspect ratio a client's mark happens to be;
   max-width stops a very wide wordmark crowding the nav on small screens. */
.lx-demo-header__logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    flex: none;
}
.lx-demo-footer__logo {
    display: block;
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    flex: none;
}
@media (max-width: 640px) {
    .lx-demo-header__logo { height: 34px; max-width: 170px; }
}
.lx-demo-header__lockup { display: flex; flex-direction: column; line-height: 1.15; }
.lx-demo-header__mark {
    font-family: var(--lx-font-sans);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #fff;
}
.lx-demo-header__tagline {
    display: block;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.lx-demo-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 34px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.lx-demo-header__nav a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.lx-demo-header__nav a:hover { color: var(--rr-mint); }
.lx-demo-header__nav a.is-active { color: var(--rr-mint); border-bottom-color: var(--rr-mint); }
.lx-demo-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.lx-demo-header__phone:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.lx-demo-header__phone svg { flex: none; }

/* Right-side actions: phone button + the favorites heart lx-favorites.js
   injects beside it (via the header-phone class). Keeping the heart here — in
   the navy header, grouped with the phone — replaces the fixed-position FAB it
   otherwise drops in the top-right corner, where the scrollbar crowds it and
   it floats in dead space. */
.lx-demo-header__actions { display: flex; align-items: center; gap: 6px; }
/* The injected heart button sets its own inline color:#1f4e8c (invisible on
   navy); the SVG is fill:currentColor, so overriding color to white shows it.
   The red count badge already reads fine on navy. */
.lx-demo-header .lx-fav-headerbtn { color: #fff !important; }
.lx-demo-header .lx-fav-headerbtn:hover { color: var(--rr-mint) !important; }
.lx-demo-header .lx-fav-headerfav { margin-left: 0; }
@media (max-width: 880px) {
    .lx-demo-header__nav { display: none; }
}

/* ── Hero (navy band) ─────────────────────────────────────────────────────── */
.lx-demo-hero {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(90, 184, 255, 0.14), transparent 60%),
        radial-gradient(900px 480px at 8% 110%, rgba(0, 107, 173, 0.25), transparent 55%),
        linear-gradient(165deg, var(--rr-navy-2) 0%, var(--rr-navy) 55%, #071527 100%);
    color: #fff;
    padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
    text-align: left;
}
.lx-demo-hero__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
@media (max-width: 900px) {
    .lx-demo-hero__inner { grid-template-columns: 1fr; }
}
.lx-demo-hero__eyebrow { margin: 0 0 26px; }
.lx-demo-hero h1 {
    font-family: var(--lx-font-sans);
    font-weight: 300;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.04;
    letter-spacing: -1.5px;
    margin: 0 0 26px;
    color: #fff;
}
.lx-demo-hero h1 .rr-accent { color: var(--rr-mint); font-weight: 400; letter-spacing: -1px; }
.lx-demo-hero__sub {
    font-size: clamp(15px, 1.5vw, 17.5px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    margin: 0 0 14px;
    line-height: 1.65;
}
.lx-demo-hero__motto {
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--rr-mint);
    margin: 0 0 34px;
}
.lx-demo-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero visual: photo collage card */
.lx-demo-hero__visual { position: relative; min-height: 340px; }
.lx-demo-hero__photo {
    width: 100%;
    height: clamp(340px, 40vw, 480px);
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    display: block;
}
.lx-demo-hero__card {
    position: absolute;
    right: -14px;
    bottom: -30px;
    background: var(--rr-cream);
    color: var(--rr-ink);
    padding: 22px 26px;
    max-width: 300px;
    border-radius: 2px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.lx-demo-hero__card q, .lx-demo-hero__card p.rr-quote {
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-size: 16.5px;
    line-height: 1.5;
    display: block;
    margin: 10px 0 12px;
    quotes: "\201C" "\201D";
}
.lx-demo-hero__card cite {
    font-style: normal;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #6b6b66;
}
@media (max-width: 900px) {
    .lx-demo-hero__visual { display: none; }
}

/* Stats row */
.lx-demo-stats {
    display: flex;
    gap: clamp(24px, 4vw, 56px);
    margin-top: clamp(36px, 5vw, 64px);
    padding-top: 30px;
    border-top: 1px solid var(--rr-line-dark);
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}
.lx-demo-stats__item { min-width: 120px; }
.lx-demo-stats__num {
    font-weight: 300;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1;
    color: #fff;
}
.lx-demo-stats__num .rr-accent { color: var(--rr-mint); font-size: 0.55em; }
.lx-demo-stats__cap {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Section bands ────────────────────────────────────────────────────────── */
.rr-band { padding: clamp(44px, 7vw, 96px) clamp(16px, 4vw, 48px); }
.rr-band--cream { background: var(--rr-cream); }
.rr-band--white { background: #fff; }
.rr-band--navy  { background: var(--rr-navy); color: #fff; }
.rr-band__head { max-width: 1240px; margin: 0 auto clamp(24px, 4vw, 48px); }
.rr-band h2 {
    font-family: var(--lx-font-sans);
    font-weight: 300;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 14px 0 0;
    color: var(--rr-ink);
}
.rr-band--navy h2 { color: #fff; }
.rr-band h2 .rr-accent { color: var(--rr-blue); }
.rr-band--navy h2 .rr-accent { color: var(--rr-mint); }
.rr-band__sub {
    margin: 14px 0 0;
    max-width: 560px;
    color: var(--lx-color-ink-2, #3d4c5e);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
}
.rr-band--navy .rr-band__sub { color: rgba(255,255,255,0.8); }

/* Value-prop cards */
.rr-props {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.rr-prop {
    background: #fff;
    border: 1px solid var(--rr-line, #e7e3db);
    border-radius: 3px;
    padding: 28px 26px;
}
.rr-band--navy .rr-prop {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--rr-line-dark);
}
.rr-prop__num {
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--rr-blue);
    display: block;
    margin-bottom: 14px;
}
.rr-band--navy .rr-prop__num { color: var(--rr-mint); }
.rr-prop h3 {
    font-weight: 400;
    font-size: 19px;
    margin: 0 0 10px;
    color: inherit;
}
.rr-prop p {
    margin: 0;
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--lx-color-ink-2, #3d4c5e);
}
.rr-band--navy .rr-prop p { color: rgba(255, 255, 255, 0.75); }

/* Pull-quote */
.rr-quoteband {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.rr-quoteband blockquote {
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.45;
    color: var(--rr-ink);
    margin: 18px 0 16px;
}
.rr-band--navy .rr-quoteband blockquote { color: #fff; }
.rr-quoteband cite {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6b6b66;
}
.rr-band--navy .rr-quoteband cite { color: var(--rr-mint); }

/* Guest reviews strip */
.rr-reviews {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.rr-review {
    background: #fff;
    border: 1px solid #e7e3db;
    border-radius: 3px;
    padding: 26px;
}
.rr-review__stars { color: var(--lx-color-star, #f5a623); font-size: 13px; letter-spacing: 3px; }
.rr-review__text {
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    margin: 12px 0 16px;
    color: var(--rr-ink);
}
.rr-review__who {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #6b6b66;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Featured properties (landing page) */
.rr-featured { max-width: 1240px; margin: 0 auto; }
.rr-featured__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.rr-featured__more { text-align: center; margin-top: 38px; }

.rr-fcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e7e3db;
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    color: var(--rr-ink);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rr-fcard:hover {
    box-shadow: 0 16px 44px rgba(10, 31, 53, 0.14);
    transform: translateY(-3px);
}
.rr-fcard__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.rr-fcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.rr-fcard:hover .rr-fcard__media img { transform: scale(1.04); }
.rr-fcard__body { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px 20px; }
.rr-fcard__city {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--rr-blue);
}
.rr-fcard__name {
    font-family: var(--lx-font-sans);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: 0.2px;
    color: var(--rr-ink);
}
.rr-fcard__specs { font-size: 13px; font-weight: 300; color: #7c8794; }
.rr-fcard__price { font-size: 14.5px; font-weight: 500; color: var(--rr-ink); margin-top: 6px; }
.rr-fcard__price em { font-style: normal; font-weight: 300; color: #7c8794; font-size: 12.5px; }

/* CTA band */
.rr-ctaband { text-align: center; }
.rr-ctaband .rr-band__sub { margin-left: auto; margin-right: auto; }
.rr-ctaband__actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.lx-demo-footer {
    margin-top: 0;
    border-top: none;
    background: var(--rr-navy);
    color: rgba(255, 255, 255, 0.78);
    padding: clamp(44px, 6vw, 80px) clamp(16px, 4vw, 48px) 28px;
    font-size: 14px;
    font-weight: 300;
}
.lx-demo-footer__top {
    max-width: 1240px;
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--rr-line-dark);
    flex-wrap: wrap;
}
.lx-demo-footer__brandrow { display: flex; align-items: center; gap: 14px; }
.lx-demo-footer__motto {
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 28px);
    color: #fff;
    text-align: right;
}
.lx-demo-footer__motto .rr-accent { color: var(--rr-mint); }
.lx-demo-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 36px;
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 820px) {
    .lx-demo-footer__grid { grid-template-columns: 1fr 1fr; }
}
.lx-demo-footer__brand {
    font-family: var(--lx-font-sans);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
    margin: 0 0 10px;
}
.lx-demo-footer p { line-height: 1.7; }
.lx-demo-footer__col h4 {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lx-demo-footer__col h4::before {
    content: "";
    width: 22px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.lx-demo-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lx-demo-footer__col a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.15s ease;
}
.lx-demo-footer__col a:hover { color: var(--rr-mint); }
.lx-demo-footer__fake-badge {
    display: inline-block;
    border: 1px solid rgba(184, 221, 213, 0.5);
    color: var(--rr-mint);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 10.5px;
    letter-spacing: 0.6px;
    background: transparent;
}
.lx-demo-footer__bottom {
    max-width: 1240px;
    margin: 40px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--rr-line-dark);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12.5px;
}

/* ── Booking funnel (confirm / payment / complete) ────────────────────────── */
.rr-funnel-wrap { background: var(--rr-cream); }
.lx-demo-funnel {
    max-width: 1020px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 32px) clamp(48px, 6vw, 88px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    align-items: start;
}
@media (max-width: 760px) {
    .lx-demo-funnel { grid-template-columns: 1fr; }
}
.lx-demo-funnel__main {
    background: #fff;
    border: 1px solid #e7e3db;
    border-radius: 3px;
    padding: clamp(22px, 3vw, 38px);
}
.lx-demo-funnel__main h1 {
    font-family: var(--lx-font-sans);
    font-weight: 300;
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -0.5px;
    margin: 0 0 8px;
    color: var(--rr-ink);
}
.lx-demo-funnel__sub { color: #7c8794; font-size: 14.5px; font-weight: 300; margin: 0 0 26px; }

.lx-demo-steps {
    display: flex;
    gap: 8px;
    margin: 0 0 30px;
    list-style: none;
    padding: 0;
}
.lx-demo-steps li {
    flex: 1;
    text-align: center;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #a9a49a;
    padding-bottom: 10px;
    border-bottom: 2px solid #e7e3db;
}
.lx-demo-steps li.is-done   { color: var(--rr-blue-ink); border-color: var(--rr-blue); }
.lx-demo-steps li.is-active { color: var(--rr-ink); border-color: var(--rr-blue); }

.lx-demo-field-row { display: flex; gap: 14px; margin-bottom: 14px; }
.lx-demo-field-row > div { flex: 1; }
.lx-demo-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.lx-demo-field label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #6b6b66;
}
.lx-demo-field input,
.lx-demo-field select {
    font-family: var(--lx-font-sans);
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid #d6d1c6;
    border-radius: 2px;
    background: #fff;
    color: var(--rr-ink);
}
.lx-demo-field input:focus,
.lx-demo-field select:focus {
    outline: 1.5px solid var(--rr-blue);
    outline-offset: 0;
    border-color: var(--rr-blue);
}

.lx-demo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 22px;
    background: var(--rr-blue);
    color: #fff;
    border: none;
    border-radius: 2px;
    font-family: var(--lx-font-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease;
}
.lx-demo-cta::after { content: "\2192"; font-size: 14px; }
.lx-demo-cta:hover:not(:disabled) { background: var(--rr-blue-ink); }
.lx-demo-cta:disabled { opacity: 0.7; cursor: default; }

.lx-demo-terms { margin: 6px 0 14px; font-size: 13.5px; }
.lx-demo-terms summary {
    cursor: pointer;
    color: var(--rr-blue);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 4px 0;
}
.lx-demo-terms__body {
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--rr-cream);
    border-left: 2px solid var(--rr-blue);
    border-radius: 0 2px 2px 0;
    color: var(--lx-color-ink-2, #3d4c5e);
    font-weight: 300;
    line-height: 1.6;
}
.lx-demo-terms__body p { margin: 0 0 10px; }
.lx-demo-terms__body p:last-child { margin-bottom: 0; }
.lx-demo-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--rr-ink);
    cursor: pointer;
}
.lx-demo-agree input { width: 16px; height: 16px; accent-color: var(--rr-blue); }

.lx-demo-testcard-hint {
    font-size: 12.5px;
    color: #6b6b66;
    background: var(--rr-cream);
    border-left: 2px solid var(--rr-blue);
    border-radius: 0 2px 2px 0;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.lx-demo-funnel__summary {
    background: var(--rr-navy);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    padding: 26px;
    font-size: 14px;
    font-weight: 300;
    position: sticky;
    top: 20px;
}
.lx-demo-funnel__summary h3 {
    font-family: var(--lx-font-sans);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.3px;
    margin: 0 0 14px;
    color: #fff;
}
.lx-demo-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    color: rgba(255, 255, 255, 0.8);
}
.lx-demo-summary-row.total {
    border-top: 1px solid var(--rr-line-dark);
    margin-top: 10px;
    padding-top: 14px;
    font-weight: 500;
    color: #fff;
    font-size: 16.5px;
}
.lx-demo-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rr-line-dark);
    font-size: 12px;
    color: var(--rr-mint);
}
.lx-demo-trust span { display: inline-flex; align-items: center; gap: 5px; }

/* Complete page */
.lx-demo-complete { text-align: center; padding: 24px 0 8px; }
.lx-demo-complete h1 { margin-top: 4px; }
.lx-demo-complete__check {
    width: 66px; height: 66px; margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--rr-navy);
    display: flex; align-items: center; justify-content: center;
}
.lx-demo-complete__check svg { stroke: var(--rr-mint); }
.lx-demo-complete__conf {
    display: inline-block;
    margin: 8px 0 24px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--rr-cream);
    border: 1px solid #e7e3db;
    color: var(--rr-blue-ink);
    font-weight: 500;
    letter-spacing: 1.5px;
    font-size: 12px;
    text-transform: uppercase;
}
/* Complete page reuses the summary card full-width; keep it navy */
.lx-demo-complete + .lx-demo-funnel__summary { position: static; }

/* ── Content pages (About / Contact) ──────────────────────────────────────── */
.rr-page-hero {
    background: linear-gradient(165deg, var(--rr-navy-2) 0%, var(--rr-navy) 70%);
    color: #fff;
    padding: clamp(44px, 7vw, 90px) clamp(16px, 4vw, 48px);
}
.rr-page-hero__inner { max-width: 1240px; margin: 0 auto; }
.rr-page-hero h1 {
    font-weight: 300;
    font-size: clamp(34px, 5vw, 62px);
    letter-spacing: -1px;
    margin: 18px 0 0;
    color: #fff;
}
.rr-page-hero h1 .rr-accent { color: var(--rr-mint); }
.rr-page-hero__sub {
    margin: 16px 0 0;
    max-width: 560px;
    font-weight: 300;
    font-size: 16.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
}

.rr-twocol {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
@media (max-width: 860px) { .rr-twocol { grid-template-columns: 1fr; } }
.rr-prose { font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--lx-color-ink-2, #3d4c5e); }
.rr-prose p { margin: 0 0 18px; }
.rr-sidequote {
    border-left: 2px solid var(--rr-blue);
    padding-left: 24px;
    font-family: var(--lx-font-serif);
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 27px);
    line-height: 1.5;
    color: var(--rr-ink);
}
.rr-sidequote .rr-accent { color: var(--rr-blue); }

/* Contact info card */
.rr-infocard {
    background: #fff;
    border: 1px solid #e7e3db;
    border-radius: 3px;
    padding: 30px;
}
.rr-infocard dl { margin: 0; display: grid; gap: 16px; }
.rr-infocard dt {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #6b6b66;
    margin-bottom: 3px;
}
.rr-infocard dd { margin: 0; font-size: 16px; color: var(--rr-ink); }
.rr-infocard dd a { color: var(--rr-blue); text-decoration: none; }

/* ── Results-page & unit-page cohesion touches ───────────────────────────── */
/* Page headline strip above the search grid (used on /rentals listing view) */
.rr-listing-head {
    background: var(--rr-cream);
    padding: clamp(30px, 5vw, 60px) clamp(16px, 4vw, 48px) clamp(20px, 3vw, 36px);
}
.rr-listing-head__inner { max-width: 1240px; margin: 0 auto; }
.rr-listing-head h1 {
    font-weight: 300;
    font-size: clamp(30px, 4vw, 52px);
    letter-spacing: -0.8px;
    margin: 14px 0 0;
    color: var(--rr-ink);
}
.rr-listing-head h1 .rr-accent { color: var(--rr-blue); }

/* ── Header dropdowns (manifest `nav` with children) ────────────────────────
   Shared chrome, opt-in by data: a site with no nav.children never renders
   .lx-demo-header__sub, so this is inert for the demo. Hover AND focus-within
   so the menu is keyboard-reachable, which a hover-only dropdown is not. */
.lx-demo-header__has-sub { position: relative; }
.lx-demo-header__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 232px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--lx-color-line, #e6e9f2);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 42, 82, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    z-index: 120;   /* over the page, under the date picker (90 is the picker's
                       own stacking context on the page, not a sibling here) */
}
.lx-demo-header__has-sub:hover > .lx-demo-header__sub,
.lx-demo-header__has-sub:focus-within > .lx-demo-header__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lx-demo-header__sub li { display: block; }
.lx-demo-header__sub a {
    display: block;
    padding: 8px 16px;
    white-space: nowrap;
    font-size: 14px;
    color: var(--lx-color-ink, #17313d);
    text-decoration: none;
}
.lx-demo-header__sub a:hover,
.lx-demo-header__sub a:focus { background: var(--lx-color-brand-tint, #eef4f8); }
/* Small screens: the header nav wraps, so show children inline rather than
   trapping them behind a hover that touch cannot perform. */
@media (max-width: 900px) {
    .lx-demo-header__sub {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0;
        background: transparent;
    }
    .lx-demo-header__sub a { padding: 4px 8px; font-size: 13px; }
}