/* ===== CUSTOM PROPERTIES ===== */
:root {
    --orange: #E8830C;
    --orange-light: #f5a623;
    --iq-blue: #2f9bef;   /* SmartBarIQ wordmark accent (matches the logo's "IQ") */
    --black: #1a1a1a;
    --dark: #111111;
    --gray-900: #222222;
    --gray-800: #333333;
    --gray-600: #666666;
    --gray-400: #999999;
    --gray-200: #e0e0e0;
    --white: #ffffff;
    --bamboo: #c8935a;
    --nav-height: 70px;
    --section-padding: 100px;

    /* Home v2 (Solo) design tokens — additive, doesn't touch the palette above */
    --ink: #0a0a0d;
    --gold: #c9a35b;
    --gold-light: #dbb878;
    --off-white: #f2f2f2;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--white);
    background: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: var(--section-padding) 0;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.section-subtitle {
    text-align: center;
    font-size: 1.15rem;
    color: var(--gray-400);
    max-width: 560px;
    margin: 0 auto 64px;
}

/* ===== ANIMATIONS ===== */
.animate-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav.scrolled {
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo img {
    height: 55px;
    width: auto;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-400);
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--orange);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== HERO ===== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../Images/Bar-Gallery-12.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(17, 17, 17, 1) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-logo {
    max-width: 400px;
    margin: 0 auto 24px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.hero-tagline {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-200);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Hero supporting line — sits under the tagline, sets up the hosting
   thesis in one breath before the CTA. Mixed-case for readability;
   the tagline above is the all-caps line, this is the human one. */
.hero-supporting {
    margin-top: 18px;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.01em;
}

/* "See how it works" CTA — outlined-on-dark, jumps to #idea. Subtle
   bamboo glow on hover so it doesn't shout above the video. */
.hero-cta {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.hero-cta:hover {
    border-color: var(--bamboo);
    color: var(--bamboo);
    background: rgba(200, 147, 90, 0.08);
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.scroll-indicator span {
    display: block;
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    position: relative;
}

.scroll-indicator span::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--orange);
    border-radius: 2px;
    animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(12px); opacity: 0.3; }
}

/* ===== THE IDEA ===== */
/* §5.2 — single-column thesis section. Centered ~620px column on a dark
   bamboo-grain background, no images. Pure copy. Sets up the hosting
   thesis before the flagship sections that follow. */
.idea {
    background: var(--dark);
    /* Subtle bamboo grain — diagonal warm streaks, very low contrast. */
    background-image:
        linear-gradient(
            135deg,
            rgba(200, 147, 90, 0.06) 0%,
            rgba(200, 147, 90, 0.0) 25%,
            rgba(200, 147, 90, 0.06) 50%,
            rgba(200, 147, 90, 0.0) 75%,
            rgba(200, 147, 90, 0.06) 100%
        );
    text-align: center;
}

.idea-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-eyebrow {
    display: inline-block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 32px;
}

.idea-line {
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 28px;
    letter-spacing: -0.01em;
}

.idea-intro {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.7;
    color: var(--gray-200);
    margin: 0 0 80px;
    font-weight: 300;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Hosting cycle: Plan → Open → Perform → Review → loop. The four phases
   are the conceptual spine of the entire site; the dedicated sections
   below (§5.3–§5.6) deepen each phase. Here we only need to make the
   shape of the cycle obvious in 5 seconds.

   Layout grid:
     - desktop (>1100px): 4 columns, connected with a thin horizontal rule
     - tablet (≥640px): 2x2 grid
     - mobile: stacked vertical
*/
.idea-cycle {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: left;
    counter-reset: cycle;
    position: relative;
}

/* The horizontal connector line between cards on desktop — sits behind
   the cards at the height of the image media so the eye reads them as
   one continuous flow. */
.idea-cycle::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(200, 147, 90, 0.35) 12%,
        rgba(200, 147, 90, 0.35) 88%,
        transparent 100%
    );
    z-index: 0;
}

.cycle-step {
    position: relative;
    z-index: 1;
}

.cycle-step__media {
    position: relative;
    aspect-ratio: 6 / 5;
    background: var(--gray-900, #1a1a1a);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(200, 147, 90, 0.18);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.cycle-step__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Illustration variant — used where we don't have a real screenshot yet
   (Phases 02 and 04). The SVG inherits currentColor from this rule, so
   we just set color here once. */
.cycle-step__media--illustration {
    color: var(--bamboo);
    background: linear-gradient(
        135deg,
        rgba(200, 147, 90, 0.04) 0%,
        rgba(200, 147, 90, 0.10) 100%
    );
}
.cycle-step__media--illustration svg {
    width: 80%;
    height: 80%;
}

.cycle-step__num {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 8px;
}

.cycle-step__title {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 500;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}

.cycle-step__body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gray-200);
    margin: 0;
    font-weight: 300;
}

.idea-loop {
    margin: 64px auto 0;
    text-align: center;
    color: var(--bamboo);
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* ===== REUSABLE FEATURE-DEEP PATTERN =====
   Used by every flagship section after "The Idea": For Your Guests,
   For You the Host, Plan the Event, Review the Event, Always Accurate
   Inventory, Scales to 100 Guests, The Cabinet, Smart Lock, Ambient
   Lighting, Companion App.

   Structure (per concept doc §5):
     [eyebrow]
     [headline]
     [visual area — shape varies per section]
     [body — 2-4 paragraphs]
     [specs strip — monospace technical list]
*/
.feature-deep {
    background: var(--dark);
    padding: 120px 0;
}

.feature-deep + .feature-deep {
    /* Alternate sections by tinting every other one with a barely-there
       bamboo wash. Gives the eye something to grip without literal
       dividers between sections. */
    background:
        linear-gradient(
            180deg,
            var(--dark) 0%,
            #131313 100%
        );
}

.feature-deep__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.feature-deep__eyebrow {
    /* Reuses .section-eyebrow's visual style; this class exists so each
       feature section can tweak independently without bleeding. */
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 18px;
}

.feature-deep__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 60px;
    max-width: 720px;
    letter-spacing: -0.012em;
}

/* The visual area is intentionally flexible. Sections supply their own
   layout (split, single image, sequence, photo collage, etc.) by adding
   variant modifiers. */
.feature-deep__visual {
    margin-bottom: 60px;
}

.feature-deep__visual--split {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.3fr);
    gap: 32px;
    align-items: stretch;
}

/* Single centered hero image — used by sections that earn a "money
   shot" treatment (e.g. §5.4 the tablet+scale active pour). Caps the
   width below the container so it feels framed, not edge-to-edge. */
.feature-deep__visual--hero {
    max-width: 920px;
    margin: 0 auto 60px;
}
.feature-deep__visual--hero .feature-deep__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

/* Multi-step sequence — used by sections that show a workflow across
   several screens (§5.5 Plan the Event: menu → shopping → mise → layout).
   4 cards in a row on wide screens, 2x2 below, stacked on mobile. Each
   card has a small step label above the media. */
.feature-deep__visual--sequence {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: seq-step;
}
.feature-deep__visual--sequence .seq-step {
    display: flex;
    flex-direction: column;
    counter-increment: seq-step;
}
.feature-deep__visual--sequence .seq-step__media {
    aspect-ratio: 4 / 5;
    min-height: 0;
    margin-bottom: 16px;
}
/* Reset the inherited box-shadow + border on .feature-deep__media so the
   sequence cards sit lighter than a hero image. They're a flow, not a
   showcase. */
.feature-deep__visual--sequence .feature-deep__media {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.seq-step__label {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin: 0 0 6px;
}
.seq-step__caption {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}
.seq-step__sub {
    font-size: 0.82rem;
    color: var(--gray-200);
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
}
@media (max-width: 1100px) {
    .feature-deep__visual--sequence {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .feature-deep__visual--sequence {
        grid-template-columns: 1fr;
    }
}

.feature-deep__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0d0d0d;
    border: 1px solid rgba(200, 147, 90, 0.18);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-deep__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Illustration variant — used until real photography lands. The SVG
   inherits currentColor so the bamboo accent threads through. */
.feature-deep__media--illustration {
    color: var(--bamboo);
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(200, 147, 90, 0.10) 0%,
            rgba(200, 147, 90, 0.0) 65%
        ),
        #0d0d0d;
}
.feature-deep__media--illustration svg {
    width: 75%;
    height: 75%;
    max-width: 320px;
}

/* Wide-landscape illustration variant — used for sections whose hero
   visual is a dashboard, diagram, or schematic that needs the full
   media width to read. Overrides the small-illustration size cap. */
.feature-deep__media--dashboard svg,
.feature-deep__media--diagram svg {
    width: 96%;
    height: 96%;
    max-width: none;
}

.feature-deep__body {
    max-width: 760px;
    margin-bottom: 80px;
}

.feature-deep__body p {
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
    color: var(--gray-200);
    margin: 0 0 22px;
    font-weight: 300;
}

.feature-deep__body p:last-child {
    margin-bottom: 0;
}

/* In-body cross-section reference. Same hue as the bamboo accent so it
   reads as part of the brand palette, with a subtle dotted underline
   that doesn't fight the body copy weight. */
.inline-link {
    color: var(--bamboo);
    text-decoration: none;
    border-bottom: 1px dotted rgba(200, 147, 90, 0.5);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.inline-link:hover {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

/* Mono specs strip — quiet, factual, anti-marketing. Each line a single
   point of evidence the section's claims rest on. */
.feature-deep__specs {
    margin-top: 0;
    padding-top: 36px;
    border-top: 1px solid rgba(200, 147, 90, 0.18);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px 36px;
    list-style: none;
    padding-left: 0;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--gray-200);
}

.feature-deep__specs li {
    position: relative;
    padding-left: 18px;
    line-height: 1.55;
}

.feature-deep__specs li::before {
    content: '·';
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--bamboo);
    font-weight: 700;
    font-size: 1.1em;
}

/* ── Pricing & Availability (§5.14) ────────────────────────────────
   Quiet luxury treatment: workshop-run notice up top, prominent price
   panel, secondary Stand Alone Kit upsell, three CTAs at the bottom.
   No discount language. No countdown timers. Numbers and parts. */

.pricing-card {
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 56px 48px;
    border: 1px solid rgba(200, 147, 90, 0.35);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(200, 147, 90, 0.08) 0%,
            rgba(200, 147, 90, 0.0) 60%
        ),
        rgba(255, 255, 255, 0.02);
    text-align: center;
}

.pricing-card__notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 36px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.35);
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(34, 197, 94, 0.95);
}

.pricing-card__notice-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.95);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.pricing-card__price-label {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin: 0 0 8px;
}

.pricing-card__price {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 300;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pricing-card__price-detail {
    font-size: 1rem;
    color: var(--gray-200);
    line-height: 1.65;
    max-width: 520px;
    margin: 0 auto;
    font-weight: 300;
}

/* Stand Alone Kit upsell — smaller secondary card, sits below the
   main pricing card. 2-column on desktop, stacks on mobile. */
.pricing-addon {
    max-width: 720px;
    margin: 0 auto 60px;
    padding: 28px 36px;
    border: 1px solid rgba(200, 147, 90, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.015);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
}

.pricing-addon__eyebrow {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 8px;
}

.pricing-addon__title {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}

.pricing-addon__sub {
    font-size: 0.92rem;
    color: var(--gray-200);
    line-height: 1.55;
    margin: 0;
    font-weight: 300;
}

.pricing-addon__col--right {
    text-align: right;
}

.pricing-addon__price {
    font-size: 1.05rem;
    color: #fff;
    margin: 0 0 4px;
    font-weight: 300;
}

.pricing-addon__price strong {
    color: var(--bamboo);
    font-weight: 600;
    font-size: 1.15em;
}

.pricing-addon__price-alt {
    font-size: 0.82rem;
    color: var(--gray-200);
    margin: 0;
    font-weight: 300;
}

/* CTA row — three buttons in descending visual weight */
.pricing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 auto;
    max-width: 720px;
}

.pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
    white-space: nowrap;
}
.pricing-cta:hover {
    transform: translateY(-1px);
}

.pricing-cta--primary {
    background: #8e6230;
    color: #fff;
    border: 1px solid #8e6230;
}
.pricing-cta--primary:hover {
    background: var(--orange);
    border-color: var(--orange);
}

.pricing-cta--secondary {
    background: transparent;
    color: var(--bamboo);
    border: 1px solid rgba(200, 147, 90, 0.55);
}
.pricing-cta--secondary:hover {
    background: rgba(200, 147, 90, 0.10);
    border-color: var(--bamboo);
}

.pricing-cta--tertiary {
    background: transparent;
    color: var(--gray-200);
    border: 1px solid transparent;
}
.pricing-cta--tertiary:hover {
    color: var(--bamboo);
}

@media (max-width: 700px) {
    .pricing-card {
        padding: 40px 24px;
    }
    .pricing-addon {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pricing-addon__col--right {
        text-align: left;
    }
    .pricing-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── App-pair layout + parity divider (§5.12) ──────────────────────
   Pairs the existing tablet-mockup carousel with a phone mockup, with
   a "PARITY" divider in between. Larger column for the tablet (which
   carries the carousel content), smaller column for the phone. */

.feature-deep__visual--app-pair {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.feature-deep__visual--app-pair .tablet-mockup {
    width: 100%;
}

.parity-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--bamboo);
}

.parity-divider__line {
    width: 1px;
    height: 60px;
    background: linear-gradient(
        180deg,
        rgba(200, 147, 90, 0) 0%,
        rgba(200, 147, 90, 0.6) 50%,
        rgba(200, 147, 90, 0) 100%
    );
}

.parity-divider__badge {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bamboo);
    padding: 6px 12px;
    border: 1px solid rgba(200, 147, 90, 0.4);
    border-radius: 999px;
    background: rgba(200, 147, 90, 0.06);
    white-space: nowrap;
}

.parity-divider__caption {
    font-size: 0.78rem;
    color: var(--gray-200);
    font-weight: 300;
    text-align: center;
    max-width: 120px;
    line-height: 1.45;
}

.app-phone-mockup {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .feature-deep__visual--app-pair {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .parity-divider {
        flex-direction: row;
        gap: 12px;
    }
    .parity-divider__line {
        width: 60px;
        height: 1px;
        background: linear-gradient(
            90deg,
            rgba(200, 147, 90, 0) 0%,
            rgba(200, 147, 90, 0.6) 50%,
            rgba(200, 147, 90, 0) 100%
        );
    }
    .parity-divider__caption {
        max-width: none;
    }
}

/* ── Lighting state pills + scene picker strip (§5.11) ──────────────
   The Ambient Lighting section uses two paired photos (closed/open) with
   small state pills overlaid in the corner of each. Below the body, a
   scene-picker strip shows the 4 named lighting modes as color swatches. */

.lighting-state {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(13, 13, 13, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(200, 147, 90, 0.35);
    color: var(--bamboo);
    z-index: 1;
    pointer-events: none;
}

/* Scene picker — 4 named lighting modes as small swatch cards. */
.lighting-scenes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 60px;
}

.lighting-scene {
    text-align: left;
}

.lighting-scene__swatch {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    border: 1px solid rgba(200, 147, 90, 0.18);
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.lighting-scene__name {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}

.lighting-scene__sub {
    font-size: 0.82rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .lighting-scenes {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Cabinet finish swatches & hardware photo grid (§5.9) ────────────
   Two reusable strips that sit between body paragraphs in The Cabinet
   section. Each is its own grid; both fall back to single-column on
   narrow screens. */

.cabinet-finishes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 60px;
}

.cabinet-finish {
    text-align: left;
}

.cabinet-finish__swatch {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    border: 1px solid rgba(200, 147, 90, 0.25);
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.cabinet-finish__brand {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin: 0 0 6px;
}

.cabinet-finish__name {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 4px;
}

.cabinet-finish__detail {
    font-size: 0.82rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
}

/* Hardware mini-grid — three small photos showing the named hardware
   components (SOSS hinges, casters, drawers). Used to anchor the
   hardware paragraph in real material rather than just words. */
.cabinet-hardware {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 40px;
}

.cabinet-hardware__item {
    text-align: left;
}

.cabinet-hardware__photo {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(200, 147, 90, 0.18);
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cabinet-hardware__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cabinet-hardware__label {
    font-size: 1rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}

.cabinet-hardware__sub {
    font-size: 0.85rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .cabinet-finishes {
        grid-template-columns: repeat(2, 1fr);
    }
    .cabinet-hardware {
        grid-template-columns: 1fr;
    }
}

/* Lifestyle pane variant — used as a stand-in until the real
   "guest at dinner table" photography lands (§10 asset gaps). Warm
   amber glow + a quote-style overlay communicates the moment without
   reading as a missing asset. Swap this DOM block for an <img> when
   the photo arrives. */
.feature-deep__media--lifestyle {
    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(232, 131, 12, 0.20) 0%,
            rgba(232, 131, 12, 0.0) 55%
        ),
        radial-gradient(
            circle at 30% 80%,
            rgba(200, 147, 90, 0.18) 0%,
            rgba(200, 147, 90, 0.0) 60%
        ),
        #0d0d0d;
}

.lifestyle-overlay {
    text-align: center;
    padding: 40px 36px;
    max-width: 360px;
}

.lifestyle-eyebrow {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 24px;
}

.lifestyle-quote {
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
    font-weight: 300;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 20px;
    font-style: italic;
    letter-spacing: -0.01em;
}

.lifestyle-attrib {
    font-size: 0.92rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .feature-deep {
        padding: 80px 0;
    }
    .feature-deep__visual--split {
        grid-template-columns: 1fr;
    }
    .feature-deep__media {
        min-height: 280px;
    }
}

@media (max-width: 1100px) {
    .idea-cycle {
        grid-template-columns: repeat(2, 1fr);
        max-width: 760px;
    }
    /* The horizontal connector doesn't track 2x2 cleanly — drop it. */
    .idea-cycle::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .idea-cycle {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

/* Tablet Mockup */
.tablet-mockup {
    display: flex;
    justify-content: center;
}

.tablet-frame {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4 / 3;
    background: var(--gray-900);
    border-radius: 20px;
    padding: 16px;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.5);
    position: relative;
}

.tablet-frame::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.tablet-screen {
    width: 100%;
    height: 100%;
    background: var(--gray-800);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet Carousel */
.tablet-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.tablet-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.tablet-slide.active {
    opacity: 1;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}

.carousel-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.3s ease;
}

.carousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--gray-600);
    transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-dot.active::before {
    background: var(--orange);
    transform: scale(1.3);
}

/* ===== GALLERY ===== */
.gallery {
    background: var(--black);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item:hover::after {
    background: rgba(232, 131, 12, 0.15);
}

/* ===== LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    font-size: 2.5rem;
    padding: 16px;
    transition: color 0.3s ease, transform 0.2s ease;
    line-height: 1;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    color: var(--orange);
    transform: scale(1.1);
}

.lightbox-close {
    top: 20px;
    right: 24px;
    font-size: 3rem;
}

.lightbox-prev {
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.lightbox-next {
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.1);
}

/* ===== FOOTER ===== */
.footer {
    padding: 80px 0 40px;
    text-align: center;
    background: var(--dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-logo {
    height: 60px;
    margin: 0 auto 16px;
}

.footer-tagline {
    font-size: 1rem;
    color: var(--gray-400);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.footer-links {
    margin-bottom: 32px;
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--orange);
    font-size: 1.05rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.footer-links a:hover {
    opacity: 0.8;
}

.footer-copy {
    font-size: 0.85rem;
    color: var(--gray-400);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    :root {
        --section-padding: 70px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(17, 17, 17, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .nav-links.open {
        opacity: 1;
        visibility: visible;
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .tablet-frame {
        max-width: 360px;
    }

    .hero-logo {
        max-width: 280px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lightbox-prev,
    .lightbox-next {
        font-size: 2.5rem;
    }

    .section-subtitle {
        margin-bottom: 48px;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== PRIVACY POLICY PAGE ===== */
.privacy-page {
    padding-top: calc(var(--nav-height) + 60px);
    padding-bottom: var(--section-padding);
    min-height: 100vh;
}

.privacy-page h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 8px;
}

.privacy-date {
    color: var(--gray-400);
    font-size: 0.95rem;
    margin-bottom: 40px;
}

.privacy-page h2 {
    font-size: 1.3rem;
    color: var(--orange);
    margin-top: 36px;
    margin-bottom: 12px;
}

.privacy-page p {
    color: var(--gray-200);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
}

.privacy-page ul {
    color: var(--gray-200);
    line-height: 1.8;
    margin-bottom: 16px;
    padding-left: 24px;
    max-width: 800px;
}

.privacy-page ul li {
    margin-bottom: 8px;
}

.privacy-page a {
    color: var(--orange);
    text-decoration: none;
    transition: color 0.3s;
}

.privacy-page a:hover {
    color: var(--orange-light);
}

/* ===== 2026-06 REDESIGN — e-commerce components ===== */

/* Nav reserve button */
.nav-links .nav-cta {
    background: var(--orange);
    color: var(--black) !important;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    transition: background 0.15s ease;
}
.nav-links .nav-cta:hover { background: var(--orange-light); }
.nav-links .nav-cta::after { display: none; }

/* Hero buy row */
.hero-buy {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}
.hero-cta--buy {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--black);
    font-weight: 700;
}
.hero-cta--buy:hover { background: var(--orange-light); border-color: var(--orange-light); color: var(--black); }
.hero-cta--ghost { background: transparent; }
.hero-price {
    margin-top: 18px;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    text-transform: uppercase;
}

/* One bar, two sides — split */
.bar-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin: 48px 0 40px;
    align-items: start;
}
.bar-side__media {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
}
.bar-side__media img { display: block; width: 100%; }
.bar-side__media.feature-deep__media--illustration {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    color: var(--bamboo);
}
.bar-side__media.feature-deep__media--illustration svg { max-height: 420px; width: auto; }
.bar-side__eyebrow {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 8px;
}
.bar-side__text { color: var(--gray-200); opacity: 0.85; line-height: 1.7; }

/* Mid-page reserve band */
.cta-band {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    padding: 44px 24px;
    background: linear-gradient(90deg, rgba(232, 131, 12, 0.12), rgba(200, 147, 90, 0.10));
    border-top: 1px solid rgba(232, 131, 12, 0.25);
    border-bottom: 1px solid rgba(232, 131, 12, 0.25);
}
.cta-band__line {
    font-size: 1.25rem;
    color: var(--white);
}
.cta-band__line strong { color: var(--orange); }

/* Feature grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}
.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 28px 26px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 147, 90, 0.45);
}
.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(200, 147, 90, 0.15);
    color: var(--bamboo);
    font-size: 1.2rem;
    margin-bottom: 16px;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.feature-card p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--gray-400);
}

@media (max-width: 1100px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .bar-split { grid-template-columns: 1fr; gap: 36px; }
    .feature-grid { grid-template-columns: 1fr; }
    .cta-band { text-align: center; }
    .nav-links .nav-cta { display: inline-block; margin-top: 4px; }
}

/* ===== 2026-06 CAPTURES — real screenshots + theme pairs ===== */

/* Real phone screenshot in the bar split (replaces the SVG mock) */
.bar-side__media--phone {
    max-width: 300px;
    margin: 0 auto 22px;
    border: 1px solid rgba(200, 147, 90, 0.35);
    border-radius: 26px;
    padding: 10px;
    background: #0d0d0d;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.bar-side__media--phone img { border-radius: 16px; }

/* Live order composite video (phone left, tablet right) */
.bar-video { margin: 8px 0 44px; }
.bar-video video {
    display: block;
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(200, 147, 90, 0.18);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.bar-video__caption {
    margin-top: 12px;
    text-align: center;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
}

/* Theme pairs — tablet capture with guest phone overlapping the corner */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 28px;
    margin-top: 44px;
}
.theme-pair { margin: 0; }
.theme-pair__media { position: relative; }
.theme-pair__tablet {
    display: block;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(200, 147, 90, 0.25);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}
.theme-pair__phone {
    position: absolute;
    right: -10px;
    bottom: -20px;
    width: 22%;
    border-radius: 10px;
    border: 2px solid #0d0d0d;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.theme-pair figcaption {
    margin-top: 32px;
    text-align: center;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bamboo);
}
.theme-grid__note {
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
    color: var(--gray-200);
    opacity: 0.85;
    line-height: 1.7;
}
@media (max-width: 768px) {
    .theme-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Two-step explainer under the order video */
.bar-video__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin: 20px auto 0;
    padding: 0;
    max-width: 1100px;
    list-style: none;
    counter-reset: barstep;
}
.bar-video__steps li {
    position: relative;
    counter-increment: barstep;
    padding-left: 54px;
    color: var(--gray-200);
    opacity: 0.9;
    line-height: 1.65;
    font-size: 0.95rem;
}
.bar-video__steps li::before {
    content: counter(barstep);
    position: absolute;
    left: 0;
    top: 2px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(200, 147, 90, 0.15);
    border: 1px solid rgba(200, 147, 90, 0.4);
    color: var(--bamboo);
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}
.bar-video__steps li strong { color: var(--white); }
@media (max-width: 768px) {
    .bar-video__steps { grid-template-columns: 1fr; }
}

/* Real phone capture in the companion-app pair (replaces the SVG mock) */
.app-phone-mockup img {
    display: block;
    width: 100%;
    border-radius: 22px;
    border: 1px solid rgba(200, 147, 90, 0.35);
    background: #0d0d0d;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* ===== 2026-06 CABINET SHOWCASE (furniture-first lead section) ===== */
.cabinet-lead {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    color: var(--gray-200);
    font-size: 1.05rem;
    line-height: 1.7;
}
.cabinet-showcase {
    margin: 44px auto 0;
    text-align: center;
}
.cabinet-showcase img {
    display: block;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.cabinet-reveal {
    margin: 52px auto 0;
    max-width: 1080px;
    text-align: center;
}
.cabinet-reveal img {
    display: block;
    width: 100%;
    filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.6));
}
.cabinet-detail {
    margin: 48px auto 0;
    max-width: 760px;
    text-align: center;
}
.cabinet-detail img {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.cabinet-showcase figcaption,
.cabinet-reveal figcaption,
.cabinet-detail figcaption {
    margin: 16px auto 0;
    max-width: 600px;
    color: var(--gray-400);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ── Presale waitlist (phase-1 email capture + launch countdown) ──────── */
.waitlist {
    max-width: 640px;
    margin: 48px auto 0;
    padding: 40px 36px;
    border: 1px solid rgba(200, 147, 90, 0.22);
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 50% 0%,
            rgba(200, 147, 90, 0.10) 0%,
            rgba(200, 147, 90, 0.0) 55%),
        rgba(255, 255, 255, 0.02);
    text-align: center;
}

.waitlist__eyebrow {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 10px;
}

.waitlist__title {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}

/* Countdown */
.countdown {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 0 28px;
}

.countdown__unit {
    min-width: 66px;
    padding: 14px 8px;
    border-radius: 12px;
    border: 1px solid rgba(200, 147, 90, 0.18);
    background: rgba(0, 0, 0, 0.25);
}

.countdown__num {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 500;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown__label {
    display: block;
    margin-top: 8px;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.countdown--done .countdown__num { color: var(--orange); }

.waitlist__copy {
    font-size: 1rem;
    color: var(--gray-200);
    line-height: 1.65;
    font-weight: 300;
    max-width: 480px;
    margin: 0 auto 24px;
}

/* Email form */
.waitlist-form {
    display: flex;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}

.waitlist-form__input {
    flex: 1;
    padding: 15px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.30);
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.25s ease;
}
.waitlist-form__input::placeholder { color: var(--gray-400); }
.waitlist-form__input:focus { border-color: var(--bamboo); }

.waitlist-form__btn { flex-shrink: 0; }
.waitlist-form__btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.waitlist-form__msg {
    margin: 16px auto 0;
    max-width: 480px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.waitlist-form__msg--ok { color: rgba(34, 197, 94, 0.95); }
.waitlist-form__msg--error { color: var(--orange-light); }

.waitlist__legal {
    margin: 18px auto 0;
    font-size: 0.78rem;
    color: var(--gray-400);
    line-height: 1.5;
}

.pricing-actions--single {
    margin-top: 24px;
}

@media (max-width: 700px) {
    .waitlist {
        padding: 32px 20px;
    }
    .countdown {
        gap: 8px;
    }
    .countdown__unit {
        min-width: 0;
        flex: 1;
        padding: 12px 4px;
    }
    .waitlist-form {
        flex-direction: column;
    }
    .waitlist-form__input,
    .waitlist-form__btn {
        width: 100%;
    }
}

/* ── SmartBarIQ wordmark (temporary text logo in nav + footer) ──────────
   The full lockup graphic (Images/smartbariq-logo.jpg) is used as the hero
   centerpiece; in the tight nav/footer slots it's illegible, so we render a
   matching text wordmark — white "SMARTBAR" + blue "IQ" — to mirror the logo. */
.wordmark {
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
}
.wordmark__iq { color: var(--iq-blue); }

.footer-wordmark {
    display: inline-block;
    font-size: 1.6rem;
    margin: 0 auto 16px;
}

/* Hero wordmark: large text lockup over the video (no image — the photo
   sells the product; the wordmark just states the brand). */
.hero-wordmark {
    display: block;
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    letter-spacing: 0.1em;
    margin: 0 auto 18px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

@media (max-width: 700px) {
    .wordmark { font-size: 1.2rem; }
    .footer-wordmark { font-size: 1.4rem; }
    .hero-wordmark { font-size: clamp(2rem, 11vw, 3rem); }
}

/* ============================================================
   HOME v2 (Solo) — implements Figma "Home — v2" (node 32:103).
   Namespaced under body.solo / .solo-* so it can't leak into
   order.html or privacy.html, which don't carry that class.
   ============================================================ */

body.solo {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--ink);
}

/* Nav — transparent over the hero (default .nav has no background),
   solid ink once .scrolled is toggled by main.js. Only the accent
   color changes from the site-wide orange to gold. */
/* Scrolled header — a slight translucent-dark tint; the inherited blur(20px)
   from .nav.scrolled keeps the links crisp and readable over any content. */
.nav--solo.scrolled {
    background: rgba(10, 10, 13, 0.6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav--solo .nav-links a:hover,
.nav--solo .nav-links a.active { color: var(--gold); }
.nav--solo .nav-links a::after { background: var(--gold); }
.nav--solo .nav-links a.nav-cta {
    background: rgba(16, 13, 9, 0.6);
    color: var(--gold) !important;   /* beats the base .nav-cta color !important */
    border: 1px solid rgba(201, 163, 91, 0.55);
    padding: 9px 21px;              /* -1px to absorb the border */
    border-radius: 999px;
    font-weight: 600;
    position: relative;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.nav--solo .nav-links a.nav-cta:hover {
    background: rgba(201, 163, 91, 0.14);
    border-color: var(--gold);
    color: var(--gold-light) !important;
    opacity: 1;
}
.nav--solo .nav-links a.nav-cta::after { display: none; }

/* Reserve CTA text glows gold once the reader reaches the Reserve section. */
.nav--solo .nav-links a.nav-cta.active {
    color: var(--gold-light) !important;
    animation: solo-cta-textglow 2.4s ease-in-out infinite;
}
@keyframes solo-cta-textglow {
    0%, 100% { text-shadow: 0 0 5px rgba(201,163,91,0.45); }
    50%      { text-shadow: 0 0 11px rgba(255,214,150,0.9), 0 0 20px rgba(201,163,91,0.5); }
}

/* Reserve CTA — once the reader reaches the Reserve/signup section (the
   scroll-spy marks it .active), a glowing dot traces the pill's border with a
   fading comet trail. A masked conic-gradient ring hugs the actual rounded
   border; @property lets us spin the gradient angle for the orbit. */
@property --cta-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.nav--solo .nav-links a.nav-cta.active::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--cta-angle),
        rgba(201,163,91,0) 0deg,
        rgba(201,163,91,0) 200deg,
        rgba(201,163,91,0.35) 288deg,
        rgba(255,214,150,0.85) 340deg,
        rgba(255,240,220,1) 357deg,
        #ffffff 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    filter: drop-shadow(0 0 4px rgba(255,206,130,0.9));
    pointer-events: none;
    animation: solo-cta-orbit 2s linear infinite;
}
@keyframes solo-cta-orbit { to { --cta-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .nav--solo .nav-links a.nav-cta.active { animation: none; text-shadow: 0 0 9px rgba(201,163,91,0.6); }
    .nav--solo .nav-links a.nav-cta.active::before { animation: none; }
}

.nav-logo img.solo-logo { height: 32px; width: auto; display: block; }
img.solo-logo--footer { height: 40px; width: auto; margin-bottom: 8px; }

/* Shared type / layout primitives */
.solo-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 16px;
}
.solo-eyebrow--center { text-align: center; }

.solo-h1 {
    font-weight: 300;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--off-white);
    max-width: 1100px;
    margin: 0 auto 24px;
    text-align: center;
}

.solo-h2 {
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--off-white);
    margin: 0 0 24px;
}
.solo-h2--center { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }

.solo-lead {
    font-weight: 300;
    font-size: 18px;
    line-height: 32px;
    color: var(--gray-200);
    width: 100%;
    max-width: 812px;
    margin: 0 auto 28px;
    text-align: center;
}

.solo-body {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.65;
    color: var(--gray-400);
    max-width: 620px;
}
.solo-body--center { max-width: 720px; margin: 0 auto 8px; text-align: center; }

.solo-mono-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray-400);
}
.solo-mono-label--center { text-align: center; margin-top: 24px; }
.solo-mono-label--gold { color: var(--gold-light); }

.solo-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.solo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: opacity 0.25s ease, background-color 0.25s ease;
    cursor: pointer;
    border: none;
}
.solo-btn--primary { background: var(--gold); color: var(--ink); }
.solo-btn--primary:hover { opacity: 0.88; }
.solo-btn--ghost { background: transparent; color: var(--off-white); border: 1px solid var(--off-white); }
.solo-btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }

.solo-cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.solo-stat-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    text-align: center;
}

.solo-section { padding: 120px 0; }
.solo-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Meet Solo — intro blurb under the hero; the following section brings its own
   top padding, so keep the bottom short to hold the page rhythm. */
.solo-intro { padding: 104px 0 0; }
.solo-intro__body { max-width: 720px; }

/* Hero */
.solo-hero {
    position: relative;
    height: 92vh;
    min-height: 640px;
    overflow: hidden;
    background: var(--ink);
}
.solo-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.solo-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(5,5,8,0.5) 45%, rgba(10,10,13,0.85) 80%, #0a0a0d 100%);
}

/* Drop animation seam — sits at the hero ↔ Cocktail Library boundary.
   A gold droplet falls from the base of the hero and dissolves into the fade-to-black. */
.solo-seam { position: relative; height: 0; z-index: 3; }
/* Continuous drip: the droplet falls the whole cycle and dissolves as it reaches
   the bottom (~50px above the seam, so it never crosses into the section below).
   No dead time — the fall flows straight into the fade and the next drop begins. */
.solo-seam__drop {
    position: absolute; left: 50%; top: -84px; transform: translateX(-50%);
    filter: drop-shadow(0 0 6px rgba(201,163,91,0.5));
    animation: solo-drop-fall 1.8s linear infinite;
}
.solo-seam__drop svg { display: block; }
@keyframes solo-drop-fall {
    0%   { top: -157px; opacity: 0; }   /* starts lower, clear of the video */
    16%  { opacity: 1; }                /* quick, gentle fade-in */
    66%  { opacity: 1; }               /* stays visible through the steady fall */
    100% { top: 34px; opacity: 0; }     /* dissolves below the seam, in the black section after the video */
}
/* Gold ripple at the point the droplet dissolves (its tip reaches ~-50px).
   Fires as the drop reaches the bottom, flowing out of the fade — same 3.2s
   cycle so it stays in lockstep with the fall. */
.solo-seam__ripple {
    position: absolute; left: 50%; top: 60px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--gold);
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    animation: solo-drop-ripple 1.8s linear infinite;
}
@keyframes solo-drop-ripple {
    0%, 74% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    84%     { opacity: 0.32; }
    100%    { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .solo-seam__drop { animation: none; top: 0; }
    .solo-seam__ripple { animation: none; opacity: 0; }
}

/* Headline — solid-background section, separate from the hero video */
.solo-intro {
    background: var(--ink);
    padding: 100px 24px;
    display: flex;
    justify-content: center;
}
.solo-intro__content {
    max-width: 1200px;
    text-align: center;
}

/* 01 — How It Works */
.solo-how__head { max-width: 700px; margin-bottom: 64px; }
.solo-how__body {
    display: flex;
    gap: 88px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.solo-how__media {
    flex: 1 1 480px;
    max-width: 540px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(200, 163, 91, 0.25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.solo-how__media img { width: 100%; height: auto; object-fit: cover; display: block; }

.solo-steps { list-style: none; flex: 1 1 420px; }
.solo-steps__item {
    display: flex;
    gap: 28px;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.solo-steps__item:first-child { padding-top: 0; border-top: none; }
.solo-steps__num {
    font-weight: 300;
    font-size: 56px;
    color: var(--gold);
    letter-spacing: -0.02em;
    line-height: 1;
    flex-shrink: 0;
}
.solo-steps__item h3 { font-weight: 500; font-size: 25px; color: var(--off-white); margin-bottom: 10px; letter-spacing: -0.01em; }
.solo-steps__item p { font-weight: 300; font-size: 16px; line-height: 1.65; color: var(--gray-200); }

/* Stat Band */
.solo-stats { padding: 110px 24px; text-align: center; }
.solo-stats__grid {
    max-width: 1200px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.solo-stat__num { font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--off-white); letter-spacing: -0.02em; }
.solo-stat__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-top: 12px;
}

/* Split sections (Scale / Inventory / Digitized) */
.solo-split__inner {
    display: flex;
    align-items: center;
    gap: 90px;
}
.solo-split--reverse .solo-split__inner { flex-direction: row-reverse; }
.solo-split--top .solo-split__inner { align-items: flex-start; }
.solo-split__text { flex: 1 1 420px; }
.solo-split__media { flex: 1 1 480px; border-radius: 16px; overflow: hidden; }
.solo-split__media img,
.solo-split__media video { width: 100%; height: auto; display: block; }

/* Scale section — horizontal pour video (4:3), matching the design. */
#scale .solo-split__media { flex: 0 1 660px; width: 100%; max-width: 660px; border-radius: 16px; overflow: hidden; }
#scale .solo-split__media img,
#scale .solo-split__media video { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }

.solo-bullets {
    list-style: none;
    margin-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}
.solo-bullets li {
    font-size: 14px;
    color: var(--gray-200);
    padding: 10px 0;
}

/* AI Planner */
.solo-planner__grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.solo-planner__card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 32px;
}
.solo-planner__card h3 { font-weight: 500; font-size: 20px; color: var(--off-white); margin: 12px 0 10px; }
.solo-planner__card p { font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--gray-400); }

/* Guest / Bartender modes — asymmetric: a narrower guest column, a wider host column */
.solo-modes__grid {
    margin-top: 56px;
    display: flex;
    justify-content: center;
    gap: 48px;
    align-items: start;
    flex-wrap: wrap;
}
.solo-modes__col--guest { flex: 1 1 320px; max-width: 420px; }
.solo-modes__col--host { flex: 1 1 520px; max-width: 660px; }
.solo-modes__media {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
}
.solo-modes__media img,
.solo-modes__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.solo-modes__media--guest { aspect-ratio: 362 / 482; }
.solo-modes__media--host { aspect-ratio: 642 / 482; }
.solo-modes__col .solo-mono-label { margin-bottom: 10px; }

/* For Hotels — teaser that routes to hotels.html. Its own title size (44px)
   rather than .solo-h2, since it sits a step below the section headings. */
.solo-hotels-teaser { padding: 96px 0; }
.solo-hotels-teaser__inner {
    display: flex;
    align-items: center;
    gap: 72px;
}
.solo-hotels-teaser__text { flex: 0 1 520px; min-width: 0; }
.solo-hotels-teaser__title {
    font-weight: 300;
    font-size: clamp(2rem, 3.4vw, 44px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--off-white);
    margin: 0 0 24px;
}
.solo-hotels-teaser__text .solo-body { margin-bottom: 24px; }
.solo-hotels-teaser__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 16px 28px;
    border-radius: 8px;
    background: linear-gradient(-80.69deg, #f5d185 1.94%, #cc994d 98.06%);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.solo-hotels-teaser__cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.solo-hotels-teaser__cta svg { flex: none; }
.solo-hotels-teaser__media {
    flex: 1 1 608px;
    min-width: 0;
    aspect-ratio: 608 / 410;
    border: 1px solid rgba(200, 163, 91, 0.22);
    border-radius: 20px;
    overflow: hidden;
}
/* The design crops this photo hard to the right edge of the frame. */
.solo-hotels-teaser__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}
@media (max-width: 860px) {
    .solo-hotels-teaser__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
    .solo-hotels-teaser__text,
    .solo-hotels-teaser__media { flex: 1 1 auto; width: 100%; }
}

/* Cocktail Library — full-bleed auto-scrolling marquee */
.solo-marquee {
    margin-top: 56px;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.solo-marquee__track { display: flex; width: max-content; animation: solo-marquee-scroll 70s linear infinite; }
.solo-marquee:hover .solo-marquee__track { animation-play-state: paused; }
.solo-marquee__group { display: flex; gap: 18px; padding-right: 18px; }
.solo-cocktail-card { width: 226px; flex-shrink: 0; }
.solo-cocktail-card__img {
    position: relative;
    height: 260px;
    border-radius: 14px;
    background: rgba(74, 74, 74, 0.16);
    overflow: hidden;
}
/* Each drink is positioned with the exact width/height/left/top from the
   Figma marquee component (percentages of the 226×260 card) via inline style. */
.solo-cocktail-card__img img { position: absolute; max-width: none; display: block; }
.solo-cocktail-card__name { font-weight: 500; font-size: 16px; color: var(--off-white); margin-top: 14px; }
.solo-cocktail-card .solo-mono-label { text-align: left; margin-top: 6px; }
@keyframes solo-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .solo-marquee__track { animation: none; }
}

/* Everything Else — feature grid */
.solo-feature-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.solo-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 28px 26px;
}
.solo-feature-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(200, 147, 90, 0.15);
    color: var(--gold);
    font-size: 20px;
    margin-bottom: 14px;
}
.solo-feature-card h3 { font-weight: 500; font-size: 17px; color: var(--off-white); margin-bottom: 10px; }
.solo-feature-card p { font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--gray-400); }

/* Zig-zag feature rows — shared by the AI Planner and Guest + Bartender sections.
   Media and text alternate sides; --reverse puts the text first (media right). */
.solo-zig {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
}
.solo-zig--reverse { grid-template-columns: 1fr 1.2fr; }
.solo-zig__media {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.solo-zig__media img,
.solo-zig__media video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
/* Planner stills/clips are framed slightly wider than the 4:3 bar shots. */
#ai-planner .solo-zig__media img,
#ai-planner .solo-zig__media video { aspect-ratio: 16 / 10; }
.solo-zig__text .solo-mono-label { margin-bottom: 14px; }
.solo-planner__lead {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--off-white);
    max-width: 380px;
    margin: 0;
}
.solo-planner .solo-mono-label--center { margin-top: 48px; margin-bottom: -8px; }
.solo-planner__grid { margin-top: 28px; }

/* Themes */
.solo-themes__grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.solo-theme__img {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.solo-theme__img img { width: 100%; aspect-ratio: 285 / 380; object-fit: cover; display: block; }
.solo-theme__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-align: center;
    margin-top: 16px;
}
.solo-themes__note { margin-top: 40px; }

/* Reserve — no photo; a warm glow fading to black */
.solo-reserve {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(78% 120% at 50% 108%, rgba(201,163,91,0.18) 0%, rgba(201,163,91,0.05) 38%, transparent 62%),
        linear-gradient(to bottom, #0a0a0d 0%, #0c0a09 55%, #14110b 100%);
    text-align: center;
}
.solo-reserve .solo-container { position: relative; z-index: 1; }
.solo-reserve__stats { margin-top: 28px; }

.solo-reserve__form {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin: 40px auto 0;
    flex-wrap: wrap;
}
.solo-reserve__input {
    flex: 1 1 260px;
    padding: 16px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--off-white);
    font-size: 15px;
}
.solo-reserve__input::placeholder { color: var(--gray-400); }
.solo-reserve__input:focus,
.solo-reserve__input:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(201, 163, 91, 0.3);
}
.solo-reserve__btn { flex: 0 0 auto; }

/* Full Video Experience — button after the Scale section + the popup modal */
/* Nested in the Scale section's media column, directly beneath the clip it
   extends — on its own it sat in a large empty band and read as unrelated. */
.solo-fullvideo { text-align: left; padding: 20px 0 0; }
.solo-fullvideo__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 30px;
    border-radius: 999px;
    background: rgba(16, 13, 9, 0.6);
    border: 1px solid rgba(201, 163, 91, 0.55);
    color: var(--gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.solo-fullvideo__btn:hover {
    background: rgba(201, 163, 91, 0.14);
    border-color: var(--gold);
    color: var(--gold-light);
}
.solo-fullvideo__play {
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

.solo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.solo-modal[hidden] { display: none; }
.solo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.solo-modal__dialog {
    position: relative;
    display: flex;
    animation: solo-modal-in 0.28s ease;
}
@keyframes solo-modal-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.solo-modal__video {
    max-height: 86vh;
    max-width: 92vw;
    border-radius: 16px;
    display: block;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.solo-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(201, 163, 91, 0.5);
    background: rgba(16, 13, 9, 0.9);
    color: var(--gold);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.solo-modal__close:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 560px) {
    .solo-modal__close { top: -8px; right: -8px; }
}

/* Footer */
.footer--solo {
    background: #0A0A0D;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 24px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer--solo__tagline {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-200);
    margin-bottom: 16px;
}
.footer--solo__links {
    display: flex;
    gap: 24px;
    font-weight: 500;
    font-size: 15px;
    color: var(--gold);
    margin-bottom: 20px;
}
.footer--solo__copy { font-weight: 300; font-size: 13px; color: var(--gray-200); }

@media (max-width: 900px) {
    .solo-how__body,
    .solo-split__inner,
    .solo-modes__grid { flex-direction: column; }
    .solo-split--reverse .solo-split__inner { flex-direction: column; }
    .solo-stats__grid,
    .solo-planner__grid,
    .solo-feature-grid,
    .solo-themes__grid { grid-template-columns: repeat(2, 1fr); }
    .solo-modes__col--guest,
    .solo-modes__col--host { max-width: 560px; }
    .solo-zig,
    .solo-zig--reverse { grid-template-columns: 1fr; gap: 24px; }
    .solo-zig--reverse .solo-zig__media { order: -1; } /* image first when stacked */
    .solo-planner__lead { max-width: none; }
}

@media (max-width: 560px) {
    .solo-section { padding: 80px 0; }
    .solo-stats__grid,
    .solo-planner__grid,
    .solo-feature-grid,
    .solo-themes__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   HOTELS PAGE (hotels.html)
   Shares the solo nav/footer + eyebrow/container primitives; everything
   below is specific to the hotel narrative.
   ============================================================ */

/* Shared type for the page — 40px section heads, 46px hero. */
.hotel-h2 {
    font-weight: 300;
    font-size: clamp(1.9rem, 3vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--off-white);
    margin: 0 0 22px;
}
.hotel-h2--center { text-align: center; }
.hotel-lead {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-200);
    margin: 0 0 22px;
}
.hotel-lead--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.hotel-body {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-400);
    margin: 0 0 22px;
}

/* ── Hero ─────────────────────────────────────────────────── */
/* Two stacked bands: the photograph, then a solid black band holding the copy.
   Making them real elements — rather than floating the text over a full-bleed
   image with viewport units — keeps the headline centred on black at every
   window height. With vh units it rode up onto the photo on short windows. */
.hotel-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Column flex, so align-items is the HORIZONTAL axis — this is what centres
       the copy block. Without it the max-width'd inner aligns to the left edge. */
    align-items: center;
    overflow: hidden;
    background: var(--ink);
}
.hotel-hero__media {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 62vh;
}
/* Anchored below centre: `center top` cropped ~260px off the bottom at desktop
   widths, cutting the device screen — the whole point of the shot — out of frame. */
.hotel-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
/* Fades the photo down into the black band. Held light through the upper two
   thirds so the device screen stays legible. */
.hotel-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.12) 45%, rgba(5,5,8,0.38) 74%, rgba(10,10,13,0.85) 92%, var(--ink) 100%);
}
.hotel-hero__inner {
    position: relative;
    width: 100%;
    max-width: 940px;
    text-align: center;
    /* Trimmed to hand vertical space back to the photograph above. */
    padding: 44px 24px 60px;
}
.hotel-hero__title {
    font-weight: 300;
    font-size: clamp(2.2rem, 3.4vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--off-white);
    margin: 0 0 26px;
}
.hotel-hero__body {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-400);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Guest Mode ───────────────────────────────────────────── */
.hotel-guest {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: var(--ink);
}
.hotel-guest__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}
/* Fades in from black at the top as well as out at the bottom, so the photo
   doesn't begin on a hard horizontal edge against the hero above it. */
.hotel-guest__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--ink) 0%, rgba(10,10,13,0.6) 10%, rgba(5,5,8,0) 30%),
        linear-gradient(180deg, rgba(0,0,0,0.2) 16%, rgba(5,5,8,0.5) 70%, rgba(10,10,13,0.96) 96%, var(--ink) 100%);
}
.hotel-guest__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 80px;
}
.hotel-guest__text { flex: 0 1 500px; min-width: 0; }
.hotel-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.hotel-steps li { display: flex; gap: 16px; align-items: flex-start; }
.hotel-steps__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--gold);
    flex: none;
}
.hotel-steps h3 { font-size: 17px; font-weight: 500; color: var(--off-white); margin: 0 0 3px; }
.hotel-steps p { font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--gray-200); margin: 0; }

.hotel-guest__visual { position: relative; flex: 1 1 560px; min-width: 0; min-height: 660px; }
.hotel-phone {
    position: absolute;
    right: 0;
    top: 20px;
    width: 300px;
    height: 620px;
    background: #0a0908;
    border: 6px solid #332e26;
    border-radius: 34px;
    overflow: hidden;
    /* Screen is inset 8px inside the bezel, per the design. That makes the
       screen 272x592 — the same aspect as the screenshot, so it seats with no
       crop; filling the full bezel instead would clip the top and bottom. */
    padding: 8px;
}
.hotel-phone img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 26px;
    display: block;
}
.hotel-qr {
    position: absolute;
    left: 20px;
    top: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 16px;
    background: #0f0e0d;
    border: 1px solid rgba(201,163,91,0.35);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.hotel-qr__table,
.hotel-qr__cta {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
}
.hotel-qr__table { font-size: 10.5px; letter-spacing: 0.08em; color: var(--gray-400); }
.hotel-qr__cta { font-size: 11px; letter-spacing: 0.06em; color: var(--gold); }
.hotel-qr__code { width: 125px; height: 125px; display: block; }

/* ── Behind the Bar (split) ───────────────────────────────── */
.hotel-split__inner { display: flex; align-items: center; gap: 80px; }
.hotel-split__text { flex: 0 1 480px; min-width: 0; }
.hotel-split__media {
    flex: 1 1 640px;
    min-width: 0;
    aspect-ratio: 640 / 560;
    border: 1px solid rgba(230,191,111,0.2);
    border-radius: 20px;
    overflow: hidden;
}
/* The design lightens this shot against the black page rather than sitting it
   in a hard-edged box. */
.hotel-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    mix-blend-mode: lighten;
    opacity: 0.8;
    display: block;
}
.hotel-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hotel-points li { display: flex; gap: 12px; align-items: flex-start; }
.hotel-points__dot { flex: none; line-height: 0; }
.hotel-points h3 { font-size: 16px; font-weight: 500; color: var(--off-white); margin: 0 0 3px; }
.hotel-points p { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--gray-600, #666); margin: 0; }

/* ── Ecosystem ────────────────────────────────────────────── */
.hotel-ecosystem { background: #07070a; }
.hotel-ecosystem__head { text-align: center; margin-bottom: 52px; }
/* Top-aligned, so the Command Center card hugs its content rather than
   stretching to match the two stacked cards beside it. */
.hotel-ecosystem__grid { display: flex; gap: 24px; align-items: flex-start; }
.hotel-ecosystem__col { display: flex; flex-direction: column; gap: 24px; flex: 0 1 360px; min-width: 0; }
.hotel-card {
    background: #0d0d11;
    border: 1px solid rgba(201,163,91,0.12);
    border-radius: 16px;
    padding: 28px 32px;
}
.hotel-card--wide { flex: 1 1 auto; min-width: 0; padding: 32px; }
.hotel-card h3 { font-size: 18px; font-weight: 500; color: var(--off-white); margin: 0 0 14px; }
.hotel-card--wide h3 { font-size: 22px; }
.hotel-card p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--gray-400); margin: 0; }
.hotel-card--wide > p { font-size: 15px; margin-bottom: 14px; }
.hotel-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(201,163,91,0.12);
    margin-bottom: 14px;
}
.hotel-telemetry { background: #050507; border-radius: 10px; padding: 18px 16px; }
.hotel-telemetry__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.hotel-telemetry__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--gold); margin: 0;
}
.hotel-telemetry__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #ccd1c7; margin: 0; }
.hotel-telemetry__stats { display: flex; gap: 12px; }
.hotel-telemetry__stats > div { flex: 1 1 0; min-width: 0; background: #0f0f14; border-radius: 10px; padding: 16px; }
.hotel-stat { font-size: 26px; font-weight: 300; letter-spacing: -0.01em; color: var(--off-white); margin: 0 0 6px; }
.hotel-stat__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--gray-400); margin: 0;
}

/* ── Hospitality Standard ─────────────────────────────────── */
.hotel-standard__head { display: flex; align-items: flex-end; gap: 60px; margin-bottom: 44px; }
.hotel-standard__head .hotel-h2 { flex: 1 1 auto; margin-bottom: 0; }
.hotel-standard__head .hotel-body { flex: 0 0 340px; margin-bottom: 0; }
.hotel-standard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hotel-feature__media {
    aspect-ratio: 384 / 288;
    border: 1px solid rgba(200,163,91,0.22);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.hotel-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-feature h3 { font-size: 20px; font-weight: 500; color: var(--off-white); margin: 0 0 16px; }
.hotel-feature p { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--gray-400); margin: 0; }

/* ── Design philosophy quote ──────────────────────────────── */
.hotel-quote { position: relative; padding: 150px 0; overflow: hidden; background: var(--ink); }
.hotel-quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The design layers two scrims so the photo fades out of black at the top and
   back into it at the bottom — without the top fade the image starts on a hard
   horizontal edge against the section above. */
.hotel-quote__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, var(--ink) 0%, rgba(10,10,13,0.55) 12%, rgba(5,5,8,0) 34%),
        linear-gradient(180deg, rgba(0,0,0,0.2) 26%, rgba(5,5,8,0.35) 70%, rgba(10,10,13,0.96) 94%, var(--ink) 100%);
}
.hotel-quote__inner { position: relative; max-width: 760px; margin-right: auto; }
.hotel-quote__text {
    font-weight: 300; font-size: 22px; line-height: 1.45;
    color: #e5e3db; margin: 0 0 22px; border: 0; padding: 0;
}
.hotel-quote__attr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--gold); margin: 0;
}

/* ── Book a Demo ──────────────────────────────────────────── */
.hotel-demo {
    padding: 120px 0;
    background: linear-gradient(180deg, rgba(8,8,11,0) 47%, rgba(230,191,111,0.2) 98%);
}
.hotel-demo__inner { text-align: center; }
.hotel-demo__title {
    font-weight: 300;
    font-size: clamp(2.4rem, 4.4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--off-white);
    margin: 0 0 22px;
}
.hotel-demo__body {
    font-weight: 300; font-size: 18px; line-height: 1.7;
    color: var(--gray-200); max-width: 560px; margin: 0 auto 22px;
}
.hotel-demo__form { display: flex; gap: 12px; max-width: 520px; margin: 14px auto 22px; }
.hotel-demo__form input {
    flex: 1 1 auto; min-width: 0;
    padding: 16px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.35);
    color: var(--off-white);
    font-size: 15px;
    font-weight: 300;
    font-family: inherit;
}
.hotel-demo__form input::placeholder { color: var(--gray-400); }
.hotel-demo__form input:focus { outline: none; border-color: var(--gold); }
.hotel-demo__form button {
    flex: none;
    padding: 16px 28px;
    border-radius: 999px;
    border: 0;
    background: var(--gold);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.hotel-demo__form button:hover { filter: brightness(1.08); }
.hotel-demo__msg { min-height: 20px; margin: 0 0 6px; font-size: 14px; color: var(--gold-light); }
.hotel-demo__specs,
.hotel-demo__note {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 0 auto;
}
.hotel-demo__specs { font-size: 11.5px; letter-spacing: 0.08em; max-width: 620px; margin-bottom: 14px; }
.hotel-demo__note { font-size: 10.5px; letter-spacing: 0.1em; max-width: 440px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
    .hotel-ecosystem__grid { flex-direction: column; }
    .hotel-ecosystem__col { flex: 1 1 auto; flex-direction: row; }
    .hotel-ecosystem__col .hotel-card { flex: 1 1 0; min-width: 0; }
    .hotel-standard__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .hotel-guest__inner,
    .hotel-split__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
    .hotel-guest__text,
    .hotel-split__text,
    .hotel-guest__visual,
    .hotel-split__media { flex: 1 1 auto; width: 100%; }
    /* Phone + QR are absolutely placed for the desktop composition; stack them. */
    .hotel-guest__visual { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
    .hotel-phone, .hotel-qr { position: static; }
    .hotel-phone { width: 260px; height: 540px; }
    .hotel-standard__head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .hotel-standard__head .hotel-body { flex: 1 1 auto; }
    .hotel-standard__grid { grid-template-columns: 1fr; }
    .hotel-ecosystem__col { flex-direction: column; }
    .hotel-demo__form { flex-direction: column; }
    .hotel-hero { min-height: 88vh; padding-bottom: 100px; }
}

/* ── Any bar, any setting — full-bleed poolside loop with copy over it ──── */
.hotel-setting {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1440 / 810;
    min-height: 520px;
    overflow: hidden;
    background: var(--ink);
}
.hotel-setting__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Darkens the lower-left where the copy sits, and blends the clip into the
   black sections above and below it. */
.hotel-setting__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--ink) 0%, rgba(10,10,13,0.45) 9%, rgba(5,5,8,0) 26%),
        linear-gradient(180deg, rgba(5,5,8,0) 55%, rgba(5,5,8,0.55) 82%, rgba(10,10,13,0.92) 96%, var(--ink) 100%),
        linear-gradient(90deg, rgba(5,5,8,0.7) 0%, rgba(5,5,8,0.25) 45%, rgba(5,5,8,0) 70%);
}
.hotel-setting__inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding-bottom: 66px;
}
.hotel-setting__title {
    font-weight: 300;
    font-size: clamp(2rem, 3.9vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--off-white);
    max-width: 760px;
    margin: 0 0 16px;
}
.hotel-setting__body {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    color: var(--off-white);
    opacity: 0.85;
    max-width: 600px;
    margin: 0 0 20px;
}
.hotel-setting__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hotel-setting__chips li {
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid rgba(242, 242, 242, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: var(--off-white);
    font-size: 13px;
    font-weight: 500;
}
@media (max-width: 860px) {
    /* Portrait crop so the scene still reads once the copy stacks under it. */
    .hotel-setting { aspect-ratio: auto; min-height: 0; padding-top: 46vh; }
    .hotel-setting__bg { height: 62%; inset: 0 0 auto; }
    .hotel-setting__scrim {
        background:
            linear-gradient(180deg, var(--ink) 0%, rgba(10,10,13,0.45) 8%, rgba(5,5,8,0) 24%),
            linear-gradient(180deg, rgba(5,5,8,0) 34%, rgba(5,5,8,0.7) 56%, var(--ink) 66%);
    }
    .hotel-setting__inner { padding-bottom: 56px; }
}

/* ── Inside Solo — scroll-scrubbed exploded assembly ─────────────────────
   Intro sits in normal page flow so the section reads as part of the
   narrative; the tall wrapper below it supplies the scrub distance. */
/* Half the standard 120px section padding: the section above it ends on sparse
   content (a short bullet list and the video button), so a full 120px on top of
   that reads as a void rather than breathing room. Keeps the gap below it — the
   sticky pane runs flush into How It Works — in the same range. */
.solo-build { position: relative; padding: 60px 0 0; background: var(--ink); }
.solo-build__intro { margin-bottom: 8px; }
.solo-build__lead { max-width: 660px; }

.solo-build__scrub {
    position: relative;
    /* Scroll distance for the scrub. Shorter than a hero would need — 81
       frames over ~220vh keeps roughly a frame every 2-3 wheel notches. */
    height: 220vh;
}
.solo-build__pane {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.solo-build__canvas,
.solo-build__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* Contain, not cover: the exploded parts spread wide and cover would crop
   them off the edges at narrow viewports. */
.solo-build__fallback { object-fit: contain; }
.solo-build.is-scrubbing .solo-build__fallback { display: none; }

/* Stage label — names the part currently assembling, so the animation reads
   as an explanation rather than decoration. */
.solo-build__stage {
    position: absolute;
    left: 50%;
    bottom: 46px;
    transform: translateX(-50%);
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
}
.solo-build__stage.is-visible { opacity: 0.9; }

@media (max-width: 860px) {
    .solo-build { padding-top: 88px; }
    .solo-build__scrub { height: 180vh; }
    .solo-build__stage { bottom: 32px; font-size: 11px; }
}
/* Reduced motion: one static frame, no scrub distance. */
@media (prefers-reduced-motion: reduce) {
    .solo-build__scrub { height: auto; }
    .solo-build__pane { position: relative; height: 64vh; min-height: 420px; }
    .solo-build__stage { display: none; }
}