/* =====================================================
   MAPRESTO B - A THEME ALIGNMENT
   Same core palette / typography rhythm as mapresto.css
   ===================================================== */
:root {
    --ink: #111315;
    --muted: #62666d;
    --gold: #c9902e;
    --gold-2: #e1b45f;
    --cream: #faf7f0;
    --line: #e9e5dc;
    --shadow: 0 24px 70px rgba(21, 24, 28, .12);
}

/* =====================================================
   MAPRESTO HOME B - CLEAN TYPOGRAPHY PASS
   2026-08-17
   - Original structure/cascade preserved
   - Very small text sizes raised for readability
   - No selectors removed without HTML/CFM cross-check
   ===================================================== */

/* =====================================================
   HOME B - HERO
   ===================================================== */

.homeb-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(42px, 6vw, 86px)
        0
        clamp(52px, 7vw, 96px);

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(201, 157, 69, .10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #fcfaf7 100%
        );
}


.homeb-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, .82fr)
        minmax(520px, 1.35fr);

    align-items: center;

    gap:
        clamp(34px, 5vw, 78px);
}


/* =====================================================
   HERO COPY
   ===================================================== */

.homeb-copy {
    position: relative;
    z-index: 2;
}


.homeb-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color: #9b7937;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .11em;
    text-transform: uppercase;
}


.homeb-eyebrow::before {
    content: "";

    width: 22px;
    height: 1px;

    background: currentColor;
}


.homeb-title {
    max-width: 650px;

    margin:
        0
        0
        20px;

    color: #22201d;

    font-size:
        clamp(40px, 4.8vw, 68px);

    line-height: .99;

    letter-spacing: -.04em;
}


.homeb-title span {
    color: #b58a38;
}


.homeb-lead {
    max-width: 610px;

    margin:
        0
        0
        24px;

    color: #625e58;

    font-size:
        clamp(16px, 1.35vw, 19px);

    line-height: 1.6;
}


.homeb-main-message {
    display: grid;

    gap: 10px;

    margin:
        0
        0
        27px;
}


.homeb-main-message-item {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: #35322e;

    font-size: 14px;
    line-height: 1.45;
}


.homeb-check {
    width: 21px;
    height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 21px;

    margin-top: 1px;

    border-radius: 50%;

    background: #f2eadb;

    color: #a77c2e;

    font-size: 12px;
    font-weight: 800;
}


/* =====================================================
   CTA
   ===================================================== */

.homeb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 11px;

    margin-top: 28px;
}


.homeb-actions .btn {
    min-height: 48px;
}


.homeb-secondary-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 10px 2px;

    color: #5f5a53;

    border: 0;

    background: transparent;

    font: inherit;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    text-decoration: none;
}


.homeb-secondary-link:hover {
    color: #a77c2e;
}


/* =====================================================
   MICRO TRUST / SETUP MESSAGE
   ===================================================== */

.homeb-setup-note {
    max-width: 590px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 24px;

    padding-top: 18px;

    border-top: 1px solid #ebe6df;

    color: #716c65;

    font-size: 12px;
    line-height: 1.5;
}


.homeb-setup-note-icon {
    flex: 0 0 auto;

    color: #b58a38;

    font-size: 16px;
}


.homeb-setup-note strong {
    color: #403c37;
}


/* =====================================================
   PRODUCT STAGE
   ===================================================== */

.homeb-product {
    position: relative;

    min-width: 0;
}


.homeb-product-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}


.homeb-product-caption-text {
    color: #7a756e;

    font-size: 12px;
    line-height: 1.4;
}


.homeb-product-caption-text strong {
    color: #38342f;
}


/* =====================================================
   DESKTOP / MOBILE SWITCH
   ===================================================== */

.homeb-device-switch,
.homeb-calendar-switch {
    display: inline-flex;
    align-items: center;

    padding: 3px;

    border: 1px solid #e8e2d9;
    border-radius: 999px;

    background: rgba(255,255,255,.82);

    box-shadow:
        0 3px 12px rgba(31, 27, 22, .04);
}


.homeb-device-switch button,
.homeb-calendar-switch button {
    border: 0;

    padding: 6px 11px;

    border-radius: 999px;

    background: transparent;

    color: #77716a;

    font: inherit;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.homeb-device-switch button.active,
.homeb-calendar-switch button.active {
    background: #fff;

    color: #332f2b;

    box-shadow:
        0 2px 7px rgba(31, 27, 22, .08);
}


/* =====================================================
   DEMO FRAME
   ===================================================== */

.homeb-stage {
    position: relative;

    min-width: 0;

    border: 1px solid #e2dcd3;
    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 26px 70px rgba(48, 39, 26, .12),
        0 7px 24px rgba(48, 39, 26, .07);

    overflow: hidden;
}


.homeb-device-view {
    display: none;
}


.homeb-device-view.active {
    display: block;
}


/* =====================================================
   DESKTOP APP
   ===================================================== */

.homeb-desktop {
    min-height: 515px;

    display: grid;

    grid-template-columns:
        118px
        minmax(0, 1fr);

    background: #faf9f7;
}


/* Sidebar */

.homeb-sidebar {
    padding:
        17px
        9px;

    background:
        linear-gradient(
            180deg,
            #292724 0%,
            #1f1e1c 100%
        );

    color: #fff;
}


.homeb-logo {
    margin:
        0
        7px
        21px;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: -.04em;
}


.homeb-logo span {
    color: #d4a94f;
}


.homeb-side-nav {
    display: grid;

    gap: 3px;
}


.homeb-side-nav button {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        7px
        8px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: rgba(255,255,255,.67);

    text-align: left;

    font: inherit;

    font-size: 12px;

    cursor: pointer;
}


.homeb-side-nav button:hover {
    color: #fff;

    background: rgba(255,255,255,.06);
}


.homeb-side-nav button.active {
    color: #fff;

    background:
        rgba(209, 166, 79, .17);

    box-shadow:
        inset 2px 0 0 #d1a64f;
}


.homeb-side-nav-icon {
    width: 14px;

    display: inline-flex;
    justify-content: center;
}


/* =====================================================
   DESKTOP MAIN
   ===================================================== */

.homeb-desktop-main {
    position: relative;

    min-width: 0;

    padding:
        17px
        16px
        14px;

    background: #faf9f7;
}


.homeb-desktop-screen {
    display: none;
}


.homeb-desktop-screen.active {
    display: block;
}


.homeb-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 42px;

    margin-bottom: 11px;
}


.homeb-app-title {
    margin: 0;

    color: #2e2a26;

    font-size: 17px;
    line-height: 1.1;

    letter-spacing: -.025em;
}


.homeb-app-sub {
    margin-top: 3px;

    color: #8a847d;

    font-size: 12px;
}


.homeb-app-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}


/* =====================================================
   DESKTOP CALENDAR WEEK
   ===================================================== */

.homeb-calendar-view {
    display: none;
}


.homeb-calendar-view.active {
    display: block;
}


.homeb-week {
    display: grid;

    grid-template-columns:
        36px
        repeat(7, minmax(0, 1fr));

    width: 100%;

    border:
        1px
        solid
        #e9e4dc;

    border-radius: 11px;

    background: #fff;

    overflow: hidden;
}


.homeb-week-head {
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-width: 0;

    border-right: 1px solid #eee9e2;
    border-bottom: 1px solid #e9e4dc;

    background: #faf8f5;

    overflow: hidden;
}


.homeb-week-head strong {
    color: #67615a;

    font-size: 12px;

    text-transform: uppercase;
}


.homeb-week-head span {
    margin-top: 2px;

    color: #36322e;

    font-size: 11px;
    font-weight: 700;
}


.homeb-week-head.weekend {
    background: #f7f2e9;
}


.homeb-week-time {
    height: 48px;

    padding-top: 6px;

    box-sizing: border-box;

    border-right: 1px solid #eee9e2;
    border-bottom: 1px solid #eee9e2;

    color: #989188;

    text-align: center;

    font-size: 11px;
}


.homeb-week-cell {
    min-width: 0;
    height: 48px;

    padding: 3px;

    box-sizing: border-box;

    border-right: 1px solid #eee9e2;
    border-bottom: 1px solid #eee9e2;

    background: #fff;

    overflow: hidden;
}


.homeb-week-cell.weekend {
    background: #fdfbf8;
}


.homeb-event {
    width: 100%;
    height: 100%;

    display: block;

    padding: 4px;

    box-sizing: border-box;

    border: 0;
    border-radius: 6px;

    background: #efeae3;

    color: #393530;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.homeb-event:hover {
    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(42, 35, 27, .09);
}


.homeb-event strong {
    display: block;

    font-size: 11px;
    line-height: 1.1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.homeb-event small {
    display: block;

    margin-top: 2px;

    color: #746e67;

    font-size: 10px;
    line-height: 1.1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.homeb-event.blue {
    background: #e8eff3;
}


.homeb-event.gold {
    background: #f4ecd9;
}


.homeb-event.training {
    background: #f2e7ca;

    box-shadow:
        inset 3px 0 0 #c9942e;
}


.homeb-event.blocked {
    background:
        repeating-linear-gradient(
            -45deg,
            #f3f1ee,
            #f3f1ee 5px,
            #ebe8e3 5px,
            #ebe8e3 10px
        );

    color: #746e67;
}


/* =====================================================
   DESKTOP DAY VIEW
   ===================================================== */

.homeb-day-view {
    min-height: 330px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    border: 1px solid #e9e4dc;
    border-radius: 11px;

    background: #fff;

    overflow: hidden;
}


.homeb-day-time {
    min-height: 52px;

    padding-top: 8px;

    box-sizing: border-box;

    border-right: 1px solid #ece7df;
    border-bottom: 1px solid #ece7df;

    color: #918a82;

    text-align: center;

    font-size: 12px;
}


.homeb-day-slot {
    min-height: 52px;

    padding: 4px;

    box-sizing: border-box;

    border-bottom: 1px solid #ece7df;
}


.homeb-day-slot .homeb-event {
    min-height: 43px;
}


/* =====================================================
   APPOINTMENT DETAIL POPOVER DESKTOP
   ===================================================== */

.homeb-event-detail {
    position: absolute;

    right: 17px;
    bottom: 16px;

    width: min(235px, calc(100% - 34px));

    padding: 11px;

    border:
        1px
        solid
        #e3dbcf;

    border-radius: 11px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 12px 35px rgba(40, 33, 25, .16);

    opacity: 0;
    pointer-events: none;

    transform:
        translateY(8px)
        scale(.98);

    transition:
        opacity .16s ease,
        transform .16s ease;
}


.homeb-event-detail.open {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}

.homeb-event-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 9px;
}


.homeb-event-detail h4 {
    margin: 0;

    color: #332f2a;

    font-size: 12px;
}


.homeb-event-detail p {
    margin:
        3px
        0
        0;

    color: #777068;

    font-size: 12px;
    line-height: 1.4;
}


.homeb-event-detail-close {
    border: 0;

    background: transparent;

    color: #8d867d;

    font-size: 14px;

    cursor: pointer;
}


.homeb-event-detail-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 8px;
}


.homeb-event-detail-meta span {
    padding:
        3px
        5px;

    border-radius: 999px;

    background: #f5f1eb;

    color: #686159;

    font-size: 11px;
}

/* =====================================================
   APPOINTMENT DETAIL POPOVER MOBILE
   ===================================================== */

.homeb-mobile-event-detail {
    position: absolute;

    right: 17px;
    bottom: 60px;

    width: min(235px, calc(100% - 34px));

    padding: 11px;

    border:
        1px
        solid
        #e3dbcf;

    border-radius: 11px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 12px 35px rgba(40, 33, 25, .16);

    opacity: 0;
    pointer-events: none;

    transform:
        translateY(8px)
        scale(.98);

    transition:
        opacity .16s ease,
        transform .16s ease;
}


.homeb-mobile-event-detail.open {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
    
    z-index: 10;
}

.homeb-mobile-event-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 9px;
}


.homeb-mobile-event-detail h4 {
    margin: 0;

    color: #332f2a;

    font-size: 12px;
}


.homeb-mobile-event-detail p {
    margin:
        3px
        0
        0;

    color: #777068;

    font-size: 12px;
    line-height: 1.4;
}


.homeb-mobile-event-detail-close {
    border: 0;

    background: transparent;

    color: #8d867d;

    font-size: 14px;

    cursor: pointer;
}


.homeb-mobile-event-detail-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 8px;
}


.homeb-mobile-event-detail-meta span {
    padding:
        3px
        5px;

    border-radius: 999px;

    background: #f5f1eb;

    color: #686159;

    font-size: 11px;
}


/* =====================================================
   DASHBOARD
   ===================================================== */

.homeb-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}


.homeb-stat {
    padding: 11px;

    border: 1px solid #e9e4dc;
    border-radius: 10px;

    background: #fff;
}


.homeb-stat small {
    display: block;

    color: #8b847b;

    font-size: 11px;
}


.homeb-stat strong {
    display: block;

    margin:
        4px
        0;

    color: #332f2b;

    font-size: 15px;
}


.homeb-dashboard-panel {
    margin-top: 10px;

    padding: 12px;

    border: 1px solid #e9e4dc;
    border-radius: 10px;

    background: #fff;
}


.homeb-dashboard-panel strong {
    font-size: 11px;
}


.homeb-dashboard-panel p {
    margin:
        5px
        0
        0;

    color: #777068;

    font-size: 12px;
    line-height: 1.45;
}


/* =====================================================
   OTHER DESKTOP SCREENS
   ===================================================== */

.homeb-list-panel {
    display: grid;

    gap: 6px;

    padding: 8px;

    border: 1px solid #e9e4dc;
    border-radius: 10px;

    background: #fff;
}


.homeb-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 8px;

    border-radius: 7px;

    background: #faf8f5;
}


.homeb-list-row strong {
    font-size: 12px;
}


.homeb-list-row span,
.homeb-list-row small {
    color: #7c756d;

    font-size: 11px;
}

/* =====================================================
   CONCIERGE BUTTON
   ===================================================== */

.homeb-concierge-fab {
    position: absolute;

    right: 125px;
    top: 20px;

    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 5px 10px 5px 6px;

    border: 1px solid #e4dbca;
    border-radius: 999px;

    background: #fff;
    color: #2b241c;

    box-shadow:
        0 4px 13px rgba(44, 35, 24, .08);

    cursor: pointer;
}


.homeb-concierge-fab-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 27px;

    border-radius: 50%;

    color: #b18437;

    font-size: 15px;
    line-height: 1;
}


.homeb-concierge-fab-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
}
/* =====================================================
   MOBILE DEVICE
   ===================================================== */

.homeb-mobile-shell {
    min-height: 515px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding:
        16px
        16px
        0;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #f7f4ef,
            #fcfbf9
        );
}


.homeb-phone {
    width: 282px;
    height: 500px;

    position: relative;

    padding:
        8px;

    box-sizing: border-box;

    border-radius: 32px;

    background: #1f1e1c;

    box-shadow:
        0 18px 45px rgba(28, 24, 19, .21);
}


.homeb-phone-notch {
    position: absolute;

    top: 9px;
    left: 50%;

    width: 76px;
    height: 17px;

    z-index: 10;

    transform:
        translateX(-50%);

    border-radius:
        0
        0
        13px
        13px;

    background: #1f1e1c;
}


.homeb-phone-screen {
    position: relative;

    height: 100%;

    box-sizing: border-box;

    padding:
        26px
        9px
        46px;

    border-radius: 25px;

    background: #faf9f7;

    overflow: hidden;
}


.homeb-mobile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;
}


.homeb-mobile-head h3 {
    margin: 0;

    color: #302c28;

    font-size: 13px;
}


.homeb-mobile-head small {
    display: block;

    margin-top: 2px;

    color: #8a837a;

    font-size: 11px;
}


.homeb-mobile-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 7px;

    margin-bottom: 7px;
}


/* =====================================================
   MOBILE CALENDAR VIEWS
   ===================================================== */

.homeb-mobile-calendar-view {
    display: none;
}


.homeb-mobile-calendar-view.active {
    display: block;
}


/* week list */

.homeb-mobile-week {
    height: 354px;

    padding-right: 2px;

    overflow-y: auto;

    scrollbar-width: thin;
}


.homeb-mobile-week-day {
    margin-bottom: 5px;

    border: 1px solid #ebe5dd;
    border-radius: 8px;

    background: #fff;

    overflow: hidden;
}


.homeb-mobile-week-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;

    padding:
        5px
        7px;

    background: #faf8f5;
}


.homeb-mobile-week-day-head strong {
    font-size: 12px;
}


.homeb-mobile-week-day-head span {
    margin-left: 3px;

    color: #777068;

    font-size: 11px;
}


.homeb-mobile-week-day-head small {
    color: #958e85;

    font-size: 10px;
}


.homeb-mobile-events {
    display: grid;

    gap: 3px;

    padding:
        4px
        5px;
}


.homeb-mobile-event {
    display: grid;

    grid-template-columns:
        30px
        minmax(0,1fr);

    gap: 4px;

    align-items: stretch;

    padding: 0;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;
}


.homeb-mobile-event-time {
    padding-top: 5px;

    color: #918a82;

    text-align: center;

    font-size: 10px;
}


.homeb-mobile-event-card {
    min-width: 0;

    padding:
        5px
        6px;

    border-radius: 6px;

    background: #efeae3;
}


.homeb-mobile-event-card strong {
    display: block;

    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.homeb-mobile-event-card small {
    display: block;

    margin-top: 1px;

    color: #746e67;

    font-size: 8px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.homeb-mobile-event-card.blue {
    background: #e8eff3;
}


.homeb-mobile-event-card.gold {
    background: #f4ecd9;
}


.homeb-mobile-event-card.training {
    background: #f1e5c8;

    box-shadow:
        inset 3px 0 0 #c9942e;
}


.homeb-mobile-free {
    padding:
        7px;

    color: #918a82;

    text-align: center;

    font-size: 11px;
}


/* =====================================================
   MOBILE DAY VIEW
   ===================================================== */

.homeb-mobile-day-selector {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0,1fr));

    gap: 2px;

    margin-bottom: 8px;
}


.homeb-mobile-day-selector button {
    min-width: 0;

    padding:
        4px
        1px;

    border: 0;
    border-radius: 6px;

    background: transparent;

    font: inherit;

    cursor: pointer;
}


.homeb-mobile-day-selector span,
.homeb-mobile-day-selector strong {
    display: block;
}


.homeb-mobile-day-selector span {
    color: #8e877e;

    font-size: 8px;
}


.homeb-mobile-day-selector strong {
    margin-top: 2px;

    color: #403b36;

    font-size: 12px;
}


.homeb-mobile-day-selector button.active {
    background: #eee8df;
}


.homeb-mobile-day-pane {
    display: none;
}


.homeb-mobile-day-pane.active {
    display: block;
}


.homeb-mobile-day-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;

    margin-bottom: 5px;

    padding-bottom: 6px;

    border-bottom: 1px solid #eae4dc;
}


.homeb-mobile-day-title strong {
    font-size: 12px;
}


.homeb-mobile-day-title small {
    color: #8e877e;

    font-size: 10px;
}


.homeb-mobile-day-list {
    display: grid;

    gap: 5px;
}


.homeb-mobile-day-row {
    display: grid;

    grid-template-columns:
        32px
        minmax(0,1fr);

    gap: 5px;
}


.homeb-mobile-day-time {
    padding-top: 7px;

    color: #918a82;

    text-align: center;

    font-size: 10px;
}


.homeb-mobile-day-card {
    padding:
        6px
        7px;

    border-radius: 7px;

    background: #efeae3;
}


.homeb-mobile-day-card strong {
    display: block;

    font-size: 12px;
}


.homeb-mobile-day-card small {
    display: block;

    margin-top: 2px;

    color: #746e67;

    font-size: 10px;
}


.homeb-mobile-day-card span {
    display: block;

    margin-top: 3px;

    color: #958e85;

    font-size: 8px;
}


.homeb-mobile-day-card.blue {
    background: #e8eff3;
}


.homeb-mobile-day-card.gold {
    background: #f4ecd9;
}


.homeb-mobile-day-card.training {
    background: #f1e5c8;

    box-shadow:
        inset 3px 0 0 #c9942e;
}


/* =====================================================
   MOBILE OTHER SCREENS
   ===================================================== */

.homeb-mobile-screen {
    display: none;
}


.homeb-mobile-screen.active {
    display: block;
}


.homeb-mobile-cards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 6px;
}


.homeb-mobile-card {
    padding: 9px;

    border:
        1px
        solid
        #ebe5dd;

    border-radius: 8px;

    background: #fff;
}


.homeb-mobile-card small {
    display: block;

    color: #8c857c;

    font-size: 10px;
}


.homeb-mobile-card strong {
    display: block;

    margin:
        3px
        0;

    color: #37332e;

    font-size: 12px;
}


/* =====================================================
   MOBILE NAV
   ===================================================== */

.homeb-mobile-nav {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 42px;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    border-top:
        1px
        solid
        #e7e1d9;

    background:
        rgba(255,255,255,.96);
    
    z-index: 10;
}


.homeb-mobile-nav button {
    border: 0;

    background: transparent;

    color: #8c857c;

    font: inherit;

    font-size: 8px;

    cursor: pointer;
}


.homeb-mobile-nav button span {
    display: block;

    margin-bottom: 1px;

    font-size: 11px;
}


.homeb-mobile-nav button.active {
    color: #a47a30;

    font-weight: 700;
}


/* =====================================================
   SMALL VALUE LABEL
   ===================================================== */

.homeb-value-strip {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 8px;

    margin-top: 13px;
}


.homeb-value {
    padding:
        9px
        10px;

    border:
        1px
        solid
        rgba(224, 216, 204, .9);

    border-radius: 10px;

    background:
        rgba(255,255,255,.65);

    backdrop-filter:
        blur(4px);
}


.homeb-value strong {
    display: block;

    color: #37322d;

    font-size: 12px;
}


.homeb-value small {
    display: block;

    margin-top: 2px;

    color: #817a72;

    font-size: 11px;
    line-height: 1.35;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1100px) {

    .homeb-hero-grid {
        grid-template-columns:
            minmax(280px, .8fr)
            minmax(470px, 1.2fr);

        gap: 30px;
    }

}


@media (max-width: 900px) {

    .homeb-hero-grid {
        grid-template-columns: 1fr;
    }

    .homeb-copy {
        max-width: 720px;
    }

    .homeb-product {
        max-width: 760px;
    }

}


@media (max-width: 620px) {

    .homeb-hero {
        padding-top: 32px;
    }

    .homeb-title {
        font-size: 41px;
    }

    .homeb-lead {
        font-size: 16px;
    }

    .homeb-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .homeb-actions .btn,
    .homeb-secondary-link {
        justify-content: center;
    }

    .homeb-product-caption {
        align-items: flex-start;
        flex-direction: column;
    }

    .homeb-value-strip {
        grid-template-columns: 1fr;
    }

    /*
        Auf echten kleinen Browsern zeigen wir
        vorzugsweise die Mobile Demo.
        Der JS Switch funktioniert trotzdem.
    */
    .homeb-stage {
        border-radius: 16px;
    }

}

/* =====================================================
   HOME B
   CUSTOMER BOOKING
   ===================================================== */

.homeb-booking {
    position: relative;

    padding:
        clamp(72px, 8vw, 120px)
        0;

    background: #f7f4ef;

    overflow: hidden;
}


.homeb-booking::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -240px;
    top: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(196, 151, 65, .10),
            transparent 67%
        );

    pointer-events: none;
}


/* =====================================================
   HEADER
   ===================================================== */

.homeb-booking-head {
    max-width: 760px;

    margin:
        0
        auto
        54px;

    text-align: center;
}


.homeb-section-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    color: #a27b34;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.homeb-section-eyebrow::before,
.homeb-section-eyebrow::after {
    content: "";

    width: 18px;
    height: 1px;

    background: currentColor;
}


.homeb-booking-head h2 {
    margin:
        0
        0
        18px;

    color: #292622;

    font-size:
        clamp(34px, 4vw, 54px);

    line-height: 1.04;

    letter-spacing: -.035em;
}


.homeb-booking-head h2 span {
    color: #ad8338;
}


.homeb-booking-head p {
    max-width: 650px;

    margin:
        0
        auto;

    color: #706a63;

    font-size: 16px;
    line-height: 1.65;
}


/* =====================================================
   MAIN GRID
   ===================================================== */

.homeb-booking-grid {
    display: grid;

    grid-template-columns:
        minmax(260px, .72fr)
        70px
        minmax(360px, 1fr);

    align-items: center;

    gap: 24px;

    max-width: 1080px;

    margin: 0 auto;
}


/* =====================================================
   SOURCES
   ===================================================== */

.homeb-booking-sources {
    display: grid;

    gap: 9px;
}


.homeb-booking-source-intro {
    margin-bottom: 8px;
}


.homeb-booking-source-intro strong {
    display: block;

    color: #37332e;

    font-size: 15px;
}


.homeb-booking-source-intro span {
    display: block;

    margin-top: 3px;

    color: #8a837b;

    font-size: 12px;
}


.homeb-booking-source {
    width: 100%;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        22px;

    align-items: center;

    gap: 10px;

    padding:
        11px
        12px;

    border: 1px solid #e4ded5;
    border-radius: 11px;

    background:
        rgba(255,255,255,.68);

    color: #393530;

    text-align: left;

    font: inherit;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.homeb-booking-source:hover {
    transform:
        translateX(3px);

    border-color: #d4c29f;

    background: #fff;

    box-shadow:
        0 6px 18px rgba(42, 34, 24, .06);
}


.homeb-booking-source.active {
    border-color: #c9a45e;

    background: #fff;

    box-shadow:
        0 8px 24px rgba(42, 34, 24, .08);
}


.homeb-booking-source-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eee8df;

    color: #9d7632;

    font-size: 15px;
    font-weight: 700;
}


.homeb-booking-source.active
.homeb-booking-source-icon {
    background: #f2e7d2;

    color: #9c7025;
}


.homeb-booking-source-copy {
    min-width: 0;
}


.homeb-booking-source-copy strong {
    display: block;

    font-size: 12px;
}


.homeb-booking-source-copy small {
    display: block;

    margin-top: 2px;

    color: #857e76;

    font-size: 12px;
}


.homeb-booking-source-arrow {
    color: #b28b47;

    font-size: 17px;

    transition:
        transform .18s ease;
}


.homeb-booking-source:hover
.homeb-booking-source-arrow {
    transform:
        translateX(3px);
}


/* =====================================================
   NO WEBSITE NOTE
   ===================================================== */

.homeb-booking-source-note {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: 10px;

    padding:
        11px
        12px;

    border-radius: 10px;

    background:
        rgba(232, 226, 216, .65);
}


.homeb-booking-source-note > span {
    width: 19px;
    height: 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 19px;

    border-radius: 50%;

    background: #fff;

    color: #a27a31;

    font-size: 11px;
    font-weight: 800;
}


.homeb-booking-source-note p {
    margin: 0;

    color: #756f67;

    font-size: 12px;
    line-height: 1.45;
}


.homeb-booking-source-note strong {
    color: #45403a;
}


/* =====================================================
   FLOW ARROW
   ===================================================== */

.homeb-booking-flow {
    display: flex;
    align-items: center;

    width: 100%;
}


.homeb-booking-flow span {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d6c9b4
        );
}


.homeb-booking-flow span:last-child {
    background:
        linear-gradient(
            90deg,
            #d6c9b4,
            transparent
        );
}


.homeb-booking-flow div {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    border:
        1px
        solid
        #ddd1bd;

    border-radius: 50%;

    background: #fff;

    color: #ad8338;

    box-shadow:
        0 4px 12px rgba(41, 34, 25, .06);
}


/* =====================================================
   DEMO WRAPPER
   ===================================================== */

.homeb-booking-demo-wrap {
    position: relative;
}


.homeb-booking-demo-label {
    display: flex;
    align-items: center;

    gap: 7px;

    margin:
        0
        0
        9px
        5px;

    color: #79736b;

    font-size: 12px;
}


.homeb-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #68a06f;

    box-shadow:
        0 0 0 4px rgba(104,160,111,.12);
}


/* =====================================================
   BOOKING PHONE / PANEL
   ===================================================== */

.homeb-booking-phone {
    position: relative;

    min-height: 515px;

    padding:
        20px
        22px;

    box-sizing: border-box;

    border: 1px solid #ded7cc;
    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 24px 65px rgba(47, 39, 29, .13),
        0 5px 18px rgba(47, 39, 29, .06);

    overflow: hidden;
}


.homeb-booking-phone-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding-bottom: 14px;

    border-bottom:
        1px
        solid
        #eee9e2;
}


.homeb-booking-demo-brand {
    display: block;

    margin-bottom: 4px;

    color: #a27a31;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
}


.homeb-booking-phone-top strong {
    display: block;

    color: #332f2b;

    font-size: 14px;
}


.homeb-booking-powered {
    color: #393530;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: -.03em;
}


.homeb-booking-powered span {
    color: #c19543;
}


/* =====================================================
   PROGRESS
   ===================================================== */

.homeb-booking-progress {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 4px;

    margin:
        13px
        0
        17px;
}


.homeb-booking-progress span {
    height: 3px;

    border-radius: 999px;

    background: #ebe6df;
}


.homeb-booking-progress span.active {
    background: #c59a4b;
}


/* =====================================================
   STEPS
   ===================================================== */

.homeb-booking-step {
    display: none;
}


.homeb-booking-step.active {
    display: block;

    animation:
        homebBookingIn
        .24s
        ease;
}


@keyframes homebBookingIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.homeb-booking-step-head {
    margin-bottom: 13px;
}


.homeb-booking-step-head > small {
    display: block;

    margin-bottom: 4px;

    color: #999188;

    font-size: 12px;
}


.homeb-booking-step-head h3 {
    margin: 0;

    color: #302c28;

    font-size: 17px;
    line-height: 1.2;

    letter-spacing: -.02em;
}


.homeb-booking-back {
    display: block;

    margin-bottom: 7px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #9d7939;

    font: inherit;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


/* =====================================================
   SERVICES
   ===================================================== */

.homeb-booking-service-list {
    display: grid;

    gap: 7px;
}


.homeb-booking-service {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        11px
        12px;

    border:
        1px
        solid
        #e8e2da;

    border-radius: 9px;

    background: #faf9f7;

    color: #3c3833;

    text-align: left;

    font: inherit;

    cursor: pointer;

    transition:
        border-color .16s ease,
        transform .16s ease,
        background .16s ease;
}


.homeb-booking-service:hover {
    transform:
        translateY(-1px);

    border-color: #cdb27f;

    background: #fff;
}


.homeb-booking-service strong {
    display: block;

    font-size: 11px;
}


.homeb-booking-service small {
    display: block;

    margin-top: 2px;

    color: #8c857d;

    font-size: 11px;
}


.homeb-booking-service-price {
    color: #98722f;

    font-size: 12px;
    font-weight: 700;
}


/* =====================================================
   MONTH
   ===================================================== */

.homeb-booking-month {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;
}


.homeb-booking-month strong {
    color: #47423c;

    font-size: 11px;
}


.homeb-booking-month button {
    width: 26px;
    height: 26px;

    border:
        1px
        solid
        #e7e1d9;

    border-radius: 7px;

    background: #fff;

    color: #706961;

    cursor: pointer;
}


/* =====================================================
   CALENDAR
   ===================================================== */

.homeb-booking-calendar {
    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 4px;
}


.homeb-booking-calendar > span {
    min-height: 26px;
}


.homeb-booking-weekday {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #989087;

    font-size: 11px;
    font-weight: 600;
}


.homeb-booking-calendar button {
    position: relative;

    min-height: 34px;

    border: 0;
    border-radius: 7px;

    background: #f8f6f3;

    color: #554f48;

    font: inherit;

    font-size: 12px;

    cursor: pointer;
}


.homeb-booking-calendar button.disabled {
    color: #c4beb6;

    background: transparent;

    cursor: default;
}


.homeb-booking-calendar button.available {
    border:
        1px
        solid
        #e2d7c4;

    background: #fff;

    color: #3e3934;

    font-weight: 700;
}


.homeb-booking-calendar button.available:hover,
.homeb-booking-calendar button.recommended {
    border-color: #c79b4c;

    background: #f8f0e1;
}


.homeb-booking-calendar button small {
    position: absolute;

    right: 3px;
    bottom: 2px;

    color: #b0863b;

    font-size: 5px;
}


.homeb-booking-calendar-hint {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 9px;

    color: #8c857c;

    font-size: 11px;
}


.homeb-booking-calendar-hint span {
    width: 7px;
    height: 7px;

    border:
        1px
        solid
        #c79b4c;

    border-radius: 2px;

    background: #f8f0e1;
}


/* =====================================================
   TIMES
   ===================================================== */

.homeb-booking-time-intro {
    margin-bottom: 7px;

    color: #817a72;

    font-size: 12px;
}


.homeb-booking-times {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 7px;
}


.homeb-booking-times button {
    min-height: 43px;

    border:
        1px
        solid
        #e2d9ca;

    border-radius: 8px;

    background: #fff;

    color: #3f3a35;

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}


.homeb-booking-times button:hover {
    transform:
        translateY(-1px);

    border-color: #c59a4b;

    background: #f9f1e3;
}


.homeb-booking-smart-note {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    margin-top: 14px;

    padding:
        9px
        10px;

    border-radius: 8px;

    background: #f5f1ea;
}


.homeb-booking-smart-note span {
    color: #ad8338;
}


.homeb-booking-smart-note p {
    margin: 0;

    color: #7b746c;

    font-size: 11px;
    line-height: 1.45;
}


/* =====================================================
   SUMMARY
   ===================================================== */

.homeb-booking-summary {
    display: grid;

    gap: 1px;

    border:
        1px
        solid
        #e8e2da;

    border-radius: 9px;

    background: #e8e2da;

    overflow: hidden;
}


.homeb-booking-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        7px
        9px;

    background: #fff;
}


.homeb-booking-summary span {
    color: #8b847c;

    font-size: 11px;
}


.homeb-booking-summary strong {
    color: #403b36;

    text-align: right;

    font-size: 12px;
}


/* =====================================================
   CUSTOMER
   ===================================================== */

.homeb-booking-customer {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    margin-top: 10px;
}


.homeb-booking-customer label {
    color: #817a72;

    font-size: 11px;
}


.homeb-booking-customer input {
    width: 100%;

    box-sizing: border-box;

    margin-top: 4px;

    padding:
        8px
        9px;

    border:
        1px
        solid
        #e6e0d8;

    border-radius: 7px;

    background: #faf9f7;

    color: #514b44;

    font: inherit;

    font-size: 12px;
}


/* =====================================================
   CONFIRM
   ===================================================== */

.homeb-booking-confirm {
    width: 100%;

    margin-top: 11px;

    padding:
        11px
        12px;

    border: 0;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #c99d4b,
            #ad7f2e
        );

    color: #fff;

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 6px 16px rgba(174, 128, 45, .20);
}


.homeb-booking-demo-hint {
    display: block;

    margin-top: 6px;

    color: #a29b93;

    text-align: center;

    font-size: 8px;
}


/* =====================================================
   SUCCESS
   ===================================================== */

.homeb-booking-success {
    padding:
        24px
        5px
        10px;

    text-align: center;
}


.homeb-booking-success-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0
        auto
        12px;

    border-radius: 50%;

    background: #edf4ed;

    color: #639069;

    font-size: 20px;
    font-weight: 800;
}


.homeb-booking-success > small {
    color: #7e776f;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.homeb-booking-success h3 {
    margin:
        5px
        0;

    color: #332f2b;

    font-size: 18px;
}


.homeb-booking-success > p {
    margin: 0;

    color: #706961;

    font-size: 12px;
}


.homeb-booking-success-calendar {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 20px;

    padding:
        11px;

    border:
        1px
        solid
        #e4ded5;

    border-radius: 9px;

    background: #faf8f5;

    text-align: left;
}


.homeb-booking-success-calendar > span {
    color: #b18437;

    font-size: 18px;
}


.homeb-booking-success-calendar strong {
    display: block;

    color: #46413b;

    font-size: 12px;
}


.homeb-booking-success-calendar small {
    display: block;

    margin-top: 2px;

    color: #8b847c;

    font-size: 11px;
}


.homeb-booking-restart {
    margin-top: 17px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #9d7939;

    font: inherit;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


/* =====================================================
   BOTTOM FLOW
   ===================================================== */

.homeb-booking-bottom {
    max-width: 920px;

    display: grid;

    grid-template-columns:
        1fr
        30px
        1fr
        30px
        1fr;

    align-items: center;

    gap: 12px;

    margin:
        62px
        auto
        0;

    padding-top: 26px;

    border-top:
        1px
        solid
        #dfd8ce;
}


.homeb-booking-bottom > div {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}


.homeb-booking-bottom-number {
    color: #b58b42;

    font-size: 11px;
    font-weight: 800;
}


.homeb-booking-bottom p {
    margin: 0;

    color: #7a736b;

    font-size: 12px;
    line-height: 1.45;
}


.homeb-booking-bottom p strong {
    display: block;

    margin-bottom: 2px;

    color: #423d37;

    font-size: 11px;
}


.homeb-booking-bottom-arrow {
    color: #c1b39d;

    text-align: center;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

    .homeb-booking-grid {
        grid-template-columns:
            minmax(230px, .75fr)
            minmax(340px, 1fr);

        max-width: 760px;
    }


    .homeb-booking-flow {
        display: none;
    }

}


@media (max-width: 680px) {

    .homeb-booking-head {
        margin-bottom: 35px;

        text-align: left;
    }


    .homeb-section-eyebrow::after {
        display: none;
    }


    .homeb-booking-head p {
        margin-left: 0;
    }


    .homeb-booking-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .homeb-booking-sources {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .homeb-booking-source-intro,
    .homeb-booking-source-note {
        grid-column:
            1
            /
            -1;
    }


    .homeb-booking-source {
        grid-template-columns:
            34px
            minmax(0,1fr);

        padding: 10px;
    }


    .homeb-booking-source-arrow {
        display: none;
    }


    .homeb-booking-demo-wrap {
        max-width: 430px;

        width: 100%;

        margin: 0 auto;
    }


    .homeb-booking-phone {
        min-height: 510px;

        padding:
            18px
            16px;
    }


    .homeb-booking-bottom {
        grid-template-columns: 1fr;

        gap: 17px;

        margin-top: 45px;
    }


    .homeb-booking-bottom-arrow {
        display: none;
    }

}


@media (max-width: 430px) {

    .homeb-booking-sources {
        grid-template-columns: 1fr;
    }


    .homeb-booking-source-intro,
    .homeb-booking-source-note {
        grid-column: auto;
    }


    .homeb-booking-customer {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   HOME B - ONBOARDING
   ===================================================== */

.homeb-onboarding {
    position: relative;
    padding: clamp(78px, 9vw, 130px) 0;
    background: #fff;
    overflow: hidden;
}

.homeb-onboarding::before {
    content: "";
    position: absolute;
    left: -250px;
    bottom: 30px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(192, 151, 78, .09),
            transparent 68%
        );
    pointer-events: none;
}


/* HEADER */

.homeb-onboarding-head {
    max-width: 790px;
    margin: 0 auto 58px;
    text-align: center;
}

.homeb-onboarding-head h2 {
    margin: 0 0 18px;
    color: #292622;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.homeb-onboarding-head h2 span {
    color: #ad8338;
}

.homeb-onboarding-head p {
    max-width: 680px;
    margin: 0 auto;
    color: #706a63;
    font-size: 16px;
    line-height: 1.65;
}


/* =====================================================
   STAGE
   ===================================================== */

.homeb-onboarding-stage {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(420px, 1.25fr);
    align-items: center;
    gap: clamp(45px, 7vw, 95px);
    max-width: 1050px;
    margin: 0 auto;
}


/* =====================================================
   STORY
   ===================================================== */

.homeb-onboarding-story {
    position: relative;
}

.homeb-onboarding-story::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 35px;
    bottom: 112px;
    width: 1px;
    background: #e4ddd3;
}

.homeb-onboarding-story-item {
    position: relative;
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 14px;
    padding: 0 0 28px;
    opacity: .42;
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.homeb-onboarding-story-item.active {
    opacity: 1;
    transform: translateX(4px);
}

.homeb-onboarding-story-number {
    position: relative;
    z-index: 2;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ded6ca;
    border-radius: 50%;
    background: #fff;
    color: #948b81;
    font-size: 12px;
    font-weight: 800;
}

.homeb-onboarding-story-item.active
.homeb-onboarding-story-number {
    border-color: #c99d4b;
    background: #f8f0e1;
    color: #a47729;
}

.homeb-onboarding-story-item strong {
    display: block;
    padding-top: 2px;
    color: #403b36;
    font-size: 12px;
}

.homeb-onboarding-story-item p {
    margin: 4px 0 0;
    color: #817a72;
    font-size: 12px;
    line-height: 1.5;
}


/* TRUST */

.homeb-onboarding-trust {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 5px;
    padding: 13px;
    border-radius: 11px;
    background: #f7f4ef;
}

.homeb-onboarding-trust-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    border-radius: 50%;
    background: #fff;
    color: #9f7833;
    font-size: 11px;
    font-weight: 800;
}

.homeb-onboarding-trust p {
    margin: 0;
    color: #777068;
    font-size: 12px;
    line-height: 1.5;
}

.homeb-onboarding-trust strong {
    display: block;
    margin-bottom: 2px;
    color: #45403a;
    font-size: 12px;
}


/* =====================================================
   DEMO
   ===================================================== */

.homeb-onboarding-demo {
    position: relative;
}

.homeb-onboarding-window {
    min-height: 525px;
    box-sizing: border-box;
    border: 1px solid #ded7cc;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 28px 70px rgba(47, 39, 29, .13),
        0 6px 18px rgba(47, 39, 29, .05);
    overflow: hidden;
}


/* WINDOW TOP */

.homeb-onboarding-window-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid #eee9e2;
    background: #fbfaf8;
}

.homeb-onboarding-window-dots {
    display: flex;
    gap: 5px;
}

.homeb-onboarding-window-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ddd5ca;
}

.homeb-onboarding-window-brand {
    color: #393530;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.homeb-onboarding-window-brand span {
    color: #bf9140;
}

.homeb-onboarding-window-demo {
    justify-self: end;
    color: #999188;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}


/* =====================================================
   PROGRESS
   ===================================================== */

.homeb-onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 25px 0;
}

.homeb-onboarding-progress > div {
    display: grid;
    grid-template-columns: repeat(4, 35px);
    gap: 4px;
}

.homeb-onboarding-progress span {
    height: 3px;
    border-radius: 999px;
    background: #ebe6df;
}

.homeb-onboarding-progress span.active {
    background: #c59a4b;
}

.homeb-onboarding-progress small {
    color: #a0988f;
    font-size: 11px;
}


/* =====================================================
   STEP
   ===================================================== */

.homeb-onboarding-step {
    display: none;
    padding: 37px 45px 40px;
}

.homeb-onboarding-step.active {
    display: block;
    animation: homebOnboardingIn .28s ease;
}

@keyframes homebOnboardingIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.homeb-onboarding-mini-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #a57b32;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.homeb-onboarding-step h3 {
    max-width: 430px;
    margin: 0 0 9px;
    color: #332f2b;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.homeb-onboarding-step-copy {
    max-width: 420px;
    margin: 0 0 23px;
    color: #7c756d;
    font-size: 11px;
    line-height: 1.55;
}


/* =====================================================
   URL
   ===================================================== */

.homeb-onboarding-url-box {
    max-width: 410px;
    margin-top: 24px;
}

.homeb-onboarding-url-box label {
    display: block;
    margin-bottom: 6px;
    color: #69635c;
    font-size: 12px;
    font-weight: 600;
}

.homeb-onboarding-url-input {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #ddd5ca;
    border-radius: 9px;
    background: #faf9f7;
}

.homeb-onboarding-url-input > span {
    color: #a27a31;
    font-size: 13px;
}

.homeb-onboarding-url-input input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #49443e;
    font: inherit;
    font-size: 11px;
}


/* PRIMARY */

.homeb-onboarding-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 42px;
    margin-top: 10px;
    padding: 0 17px;
    border: 0;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #c99d4b,
            #ad7f2e
        );
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 6px 16px rgba(174,128,45,.18);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.homeb-onboarding-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 9px 20px rgba(174,128,45,.23);
}

.homeb-onboarding-primary span {
    font-size: 14px;
}

.homeb-onboarding-url-box
.homeb-onboarding-primary {
    width: 100%;
}


/* TEXT BUTTON */

.homeb-onboarding-text-button,
.homeb-onboarding-back,
.homeb-onboarding-restart {
    border: 0;
    background: transparent;
    color: #967032;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.homeb-onboarding-text-button {
    display: block;
    margin: 17px 0 0;
    padding: 0;
}

.homeb-onboarding-demo-note {
    display: block;
    margin-top: 8px;
    color: #aaa29a;
    font-size: 8px;
}


/* =====================================================
   SCAN
   ===================================================== */

.homeb-onboarding-scan {
    max-width: 390px;
    margin: 5px auto 0;
    text-align: center;
}

.homeb-onboarding-scan-icon {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.homeb-onboarding-scan-icon > span {
    position: absolute;
    inset: 0;
    border: 1px solid #d8c39c;
    border-radius: 50%;
    animation: homebScanPulse 1.4s ease infinite;
}

.homeb-onboarding-scan-icon strong {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5ecdc;
    color: #aa7d30;
    font-size: 17px;
}

@keyframes homebScanPulse {
    0% {
        transform: scale(.85);
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.homeb-onboarding-scan h3 {
    margin-left: auto;
    margin-right: auto;
}

.homeb-onboarding-scan > p {
    max-width: 350px;
    margin: 0 auto 21px;
    color: #7d766e;
    font-size: 12px;
    line-height: 1.55;
}

.homeb-onboarding-scan-status {
    display: grid;
    gap: 7px;
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
}

.homeb-onboarding-scan-status > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #faf8f5;
    color: #a49c93;
    font-size: 12px;
    transition: all .25s ease;
}

.homeb-onboarding-scan-status > div.active {
    background: #f5efe4;
    color: #4f4943;
}

.homeb-scan-check {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ebe6df;
    color: transparent;
    font-size: 12px;
}

.homeb-onboarding-scan-status > div.active
.homeb-scan-check {
    background: #fff;
    color: #9d7632;
}

.homeb-onboarding-loader {
    height: 3px;
    max-width: 320px;
    margin: 17px auto 0;
    border-radius: 999px;
    background: #eee9e2;
    overflow: hidden;
}

.homeb-onboarding-loader span {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: #c49a4c;
    animation: homebScanLoader 1s ease infinite;
}

@keyframes homebScanLoader {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(300%);
    }
}


/* =====================================================
   FOUND / REVIEW
   ===================================================== */

.homeb-onboarding-found-card {
    margin-top: 10px;
    border: 1px solid #e5ded5;
    border-radius: 9px;
    background: #faf9f7;
    overflow: hidden;
}

.homeb-onboarding-found-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 11px;
    border-bottom: 1px solid #e9e3db;
}

.homeb-onboarding-found-head span {
    color: #7e776f;
    font-size: 11px;
    font-weight: 600;
}

.homeb-onboarding-found-head strong {
    color: #9a7635;
    font-size: 11px;
}

.homeb-onboarding-found-studio {
    display: grid;
    grid-template-columns: 35px 1fr 25px;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
}

.homeb-onboarding-found-logo {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eee7dc;
    color: #a37a32;
    font-size: 13px;
    font-weight: 800;
}

.homeb-onboarding-found-studio strong {
    display: block;
    color: #45403a;
    font-size: 12px;
}

.homeb-onboarding-found-studio span {
    display: block;
    margin-top: 2px;
    color: #8d867e;
    font-size: 11px;
}

.homeb-onboarding-found-studio button {
    border: 0;
    background: transparent;
    color: #a27a31;
    cursor: pointer;
}

.homeb-onboarding-found-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 11px;
}

.homeb-onboarding-found-services label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5f5952;
    font-size: 11px;
    cursor: pointer;
}

.homeb-onboarding-found-services input {
    accent-color: #b78b3d;
}

.homeb-onboarding-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.homeb-onboarding-review-actions
.homeb-onboarding-primary {
    margin-top: 0;
}


/* =====================================================
   READY
   ===================================================== */

.homeb-onboarding-ready {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 2px;
    text-align: center;
}

.homeb-onboarding-ready-check {
    width: 49px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #edf4ed;
    color: #65906b;
    font-size: 19px;
    font-weight: 800;
}

.homeb-onboarding-ready h3 {
    margin-left: auto;
    margin-right: auto;
}

.homeb-onboarding-ready > p {
    max-width: 350px;
    margin: 0 auto 18px;
    color: #777068;
    font-size: 12px;
    line-height: 1.55;
}

.homeb-onboarding-ready-preview {
    display: grid;
    gap: 1px;
    margin-top: 16px;
    border: 1px solid #e7e0d7;
    border-radius: 9px;
    background: #e7e0d7;
    overflow: hidden;
    text-align: left;
}

.homeb-onboarding-ready-preview > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    background: #faf9f7;
}

.homeb-onboarding-ready-preview span {
    color: #8d857d;
    font-size: 11px;
}

.homeb-onboarding-ready-preview strong {
    color: #4d4741;
    font-size: 12px;
}

.homeb-onboarding-start {
    width: 100%;
    margin-top: 14px;
}

.homeb-onboarding-ready > small {
    display: block;
    margin-top: 6px;
    color: #a39b92;
    font-size: 8px;
}

.homeb-onboarding-restart {
    display: block;
    margin: 13px auto 0;
}


/* =====================================================
   MANUAL
   ===================================================== */

.homeb-onboarding-manual {
    max-width: 400px;
    margin: 15px auto 0;
    text-align: center;
}

.homeb-onboarding-manual-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #f5ecdc;
    color: #a87b2d;
    font-size: 20px;
}

.homeb-onboarding-manual h3 {
    margin-left: auto;
    margin-right: auto;
}

.homeb-onboarding-manual > p {
    margin: 0 auto 17px;
    color: #7c756d;
    font-size: 12px;
    line-height: 1.55;
}

.homeb-onboarding-manual-fields {
    display: grid;
    gap: 8px;
    text-align: left;
}

.homeb-onboarding-manual-fields > div {
    display: grid;
    grid-template-columns: .55fr 1fr;
    gap: 8px;
}

.homeb-onboarding-manual-fields label {
    color: #7a736b;
    font-size: 11px;
}

.homeb-onboarding-manual-fields input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 9px;
    border: 1px solid #e2dcd4;
    border-radius: 7px;
    background: #faf9f7;
    color: #514b44;
    font: inherit;
    font-size: 12px;
}

.homeb-onboarding-manual
.homeb-onboarding-primary {
    width: 100%;
}


/* =====================================================
   FLOATING BENEFIT
   ===================================================== */

.homeb-onboarding-floating {
    position: absolute;
    left: 55%;
    right: auto;
    transform: translateX(-50%);
    top: 35px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid #e3dbcf;
    border-radius: 10px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 10px 30px rgba(47,39,29,.10);
}

.homeb-onboarding-floating > span {
    color: #b18437;
    font-size: 17px;
}

.homeb-onboarding-floating strong {
    display: block;
    color: #48423c;
    font-size: 12px;
}

.homeb-onboarding-floating small {
    display: block;
    margin-top: 1px;
    color: #8c857d;
    font-size: 11px;
}


/* =====================================================
   PROMISE
   ===================================================== */

.homeb-onboarding-promise {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 950px;
    margin: 65px auto 0;
    padding-top: 26px;
    border-top: 1px solid #e6dfd5;
}

.homeb-onboarding-promise > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.homeb-onboarding-promise > div > span {
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 19px;
    border-radius: 50%;
    background: #f4ecdf;
    color: #9f7732;
    font-size: 12px;
    font-weight: 800;
}

.homeb-onboarding-promise p {
    margin: 0;
    color: #7c756d;
    font-size: 12px;
    line-height: 1.45;
}

.homeb-onboarding-promise strong {
    display: block;
    margin-bottom: 2px;
    color: #48423c;
    font-size: 12px;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

    .homeb-onboarding-stage {
        grid-template-columns: .65fr 1fr;
        gap: 35px;
    }

    .homeb-onboarding-step {
        padding: 32px 30px 35px;
    }

    .homeb-onboarding-floating {
        right: -30px;
    }

}


@media (max-width: 720px) {

    .homeb-onboarding-head {
        margin-bottom: 38px;
        text-align: left;
    }

    .homeb-onboarding-head p {
        margin-left: 0;
    }

    .homeb-onboarding-stage {
        grid-template-columns: 1fr;
    }

    .homeb-onboarding-story {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .homeb-onboarding-story::before {
        display: none;
    }

    .homeb-onboarding-story-item {
        display: block;
        padding: 0;
    }

    .homeb-onboarding-story-item > div {
        display: none;
    }

    .homeb-onboarding-story-number {
        margin: 0 auto;
    }

    .homeb-onboarding-trust {
        grid-column: 1 / -1;
        margin-top: 13px;
    }

    .homeb-onboarding-demo {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .homeb-onboarding-floating {
        display: none;
    }

    .homeb-onboarding-promise {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 45px;
    }

}


@media (max-width: 480px) {

    .homeb-onboarding-window {
        min-height: 535px;
    }

    .homeb-onboarding-progress {
        padding-left: 17px;
        padding-right: 17px;
    }

    .homeb-onboarding-progress > div {
        grid-template-columns: repeat(4, 26px);
    }

    .homeb-onboarding-step {
        padding: 28px 20px 32px;
    }

    .homeb-onboarding-step h3 {
        font-size: 21px;
    }

    .homeb-onboarding-found-services {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   HOME B - AI / CONCIERGE
   ===================================================== */

.homeb-ai {
    position: relative;

    padding:
        clamp(80px, 9vw, 135px)
        0;

    background:
        linear-gradient(
            180deg,
            #24221f 0%,
            #1d1c1a 100%
        );

    color: #fff;

    overflow: hidden;
}


.homeb-ai::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -310px;
    right: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(205, 160, 76, .18),
            transparent 68%
        );

    pointer-events: none;
}


.homeb-ai::after {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    left: -260px;
    bottom: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.045),
            transparent 70%
        );

    pointer-events: none;
}


/* =====================================================
   HEADER
   ===================================================== */

.homeb-ai-head {
    position: relative;

    z-index: 2;

    max-width: 820px;

    margin:
        0
        auto
        58px;

    text-align: center;
}


.homeb-ai
.homeb-section-eyebrow {
    color: #d2a651;
}


.homeb-ai-head h2 {
    margin:
        0
        0
        18px;

    color: #fff;

    font-size:
        clamp(36px, 4.3vw, 58px);

    line-height: 1.02;

    letter-spacing: -.04em;
}


.homeb-ai-head h2 span {
    color: #d0a14c;
}


.homeb-ai-head p {
    max-width: 690px;

    margin:
        0
        auto;

    color: rgba(255,255,255,.62);

    font-size: 16px;
    line-height: 1.7;
}


/* =====================================================
   STAGE
   ===================================================== */

.homeb-ai-stage {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(260px, .68fr)
        minmax(470px, 1.35fr);

    gap:
        clamp(35px, 6vw, 80px);

    max-width: 1080px;

    margin: 0 auto;
}


/* =====================================================
   IDEAS
   ===================================================== */

.homeb-ai-ideas {
    display: grid;

    align-content: start;

    gap: 8px;
}


.homeb-ai-ideas-label {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,.44);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.homeb-ai-idea {
    display: grid;

    grid-template-columns:
        35px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 9px;

    padding:
        11px
        10px;

    border:
        1px
        solid
        rgba(255,255,255,.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);

    color: rgba(255,255,255,.70);

    text-align: left;

    font: inherit;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.homeb-ai-idea:hover {
    transform:
        translateX(3px);

    border-color:
        rgba(209,164,80,.30);

    background:
        rgba(255,255,255,.05);
}


.homeb-ai-idea.active {
    border-color:
        rgba(209,164,80,.44);

    background:
        rgba(209,164,80,.10);

    color: #fff;
}


.homeb-ai-idea-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        rgba(255,255,255,.06);

    color: #d1a451;

    font-size: 14px;
}


.homeb-ai-idea strong {
    display: block;

    font-size: 11px;
}


.homeb-ai-idea small {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.42);

    font-size: 11px;
    line-height: 1.4;
}


.homeb-ai-idea-arrow {
    color: rgba(210,166,81,.65);

    font-size: 14px;
}


/* =====================================================
   TRUST
   ===================================================== */

.homeb-ai-trust {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: 11px;

    padding: 12px;

    border:
        1px
        solid
        rgba(255,255,255,.07);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);
}


.homeb-ai-trust > span {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;

    border-radius: 50%;

    background:
        rgba(210,166,81,.14);

    color: #d1a451;

    font-size: 12px;
}


.homeb-ai-trust p {
    margin: 0;

    color: rgba(255,255,255,.46);

    font-size: 11px;
    line-height: 1.5;
}


.homeb-ai-trust strong {
    display: block;

    margin-bottom: 2px;

    color: rgba(255,255,255,.78);

    font-size: 12px;
}


/* =====================================================
   CONSOLE
   ===================================================== */

.homeb-ai-console {
    position: relative;

    min-height: 540px;

    display: flex;
    flex-direction: column;

    border:
        1px
        solid
        rgba(255,255,255,.11);

    border-radius: 18px;

    background: #f9f8f6;

    color: #37322e;

    box-shadow:
        0 30px 90px rgba(0,0,0,.32);

    overflow: hidden;
}


.homeb-ai-console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 54px;

    padding:
        0
        16px;

    border-bottom:
        1px
        solid
        #e7e1d9;

    background: #fff;
}


.homeb-ai-console-person {
    display: flex;
    align-items: center;

    gap: 9px;
}


.homeb-ai-logo {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #f0e7d6;

    color: #b08334;

    font-size: 14px;
}


.homeb-ai-console-person strong {
    display: block;

    color: #3c3732;

    font-size: 11px;
}


.homeb-ai-console-person small {
    display: block;

    margin-top: 2px;

    color: #918980;

    font-size: 11px;
}


.homeb-ai-online {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #858078;

    font-size: 11px;
}


.homeb-ai-online i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #6ea675;

    box-shadow:
        0
        0
        0
        3px
        rgba(110,166,117,.11);
}


/* =====================================================
   CHAT
   ===================================================== */

.homeb-ai-chat {
    flex: 1;

    padding:
        20px
        18px
        14px;

    overflow-y: auto;
}


.homeb-ai-message {
    display: flex;

    margin-bottom: 15px;
}


.homeb-ai-message.user {
    justify-content: flex-end;
}


.homeb-ai-message.assistant {
    align-items: flex-start;

    gap: 8px;
}


.homeb-ai-bubble {
    max-width: 74%;

    padding:
        10px
        12px;

    border-radius:
        12px
        12px
        3px
        12px;

    background: #312e2a;

    color: #fff;

    font-size: 12px;
    line-height: 1.45;
}


.homeb-ai-message-logo {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 27px;

    border-radius: 8px;

    background: #f0e7d6;

    color: #b08334;

    font-size: 12px;
}


.homeb-ai-answer {
    min-width: 0;

    flex: 1;
}


.homeb-ai-answer-name {
    display: block;

    margin-bottom: 4px;

    color: #9b7736;

    font-size: 11px;
    font-weight: 700;
}


.homeb-ai-answer > p {
    margin:
        0
        0
        10px;

    color: #615b54;

    font-size: 12px;
    line-height: 1.5;
}


/* =====================================================
   RESULT
   ===================================================== */

.homeb-ai-result {
    display: none;
}


.homeb-ai-result.active {
    display: block;

    animation:
        homebAIResult
        .25s
        ease;
}


@keyframes homebAIResult {

    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.homeb-ai-result-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;
}


.homeb-ai-result-title strong {
    color: #48423c;

    font-size: 12px;
}


.homeb-ai-result-title span {
    color: #938b82;

    font-size: 10px;
}


/* =====================================================
   SLOTS
   ===================================================== */

.homeb-ai-slots {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 5px;
}


.homeb-ai-slot {
    min-width: 0;

    padding:
        8px
        7px;

    border:
        1px
        solid
        #e4ddd4;

    border-radius: 8px;

    background: #fff;

    color: #49433d;

    text-align: left;

    font: inherit;

    cursor: pointer;
}


.homeb-ai-slot.selected {
    border-color: #c7a261;

    background: #f7f0e4;
}


.homeb-ai-slot span,
.homeb-ai-slot strong,
.homeb-ai-slot small {
    display: block;
}


.homeb-ai-slot span {
    color: #8b837b;

    font-size: 8px;
}


.homeb-ai-slot strong {
    margin:
        2px
        0;

    font-size: 11px;
}


.homeb-ai-slot small {
    color: #9d958c;

    font-size: 8px;
}


/* =====================================================
   SUGGESTION
   ===================================================== */

.homeb-ai-suggestion {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    margin-top: 8px;

    padding:
        8px;

    border-radius: 7px;

    background: #f0ece5;
}


.homeb-ai-suggestion > span {
    color: #b08334;

    font-size: 12px;
}


.homeb-ai-suggestion strong {
    display: block;

    color: #544e47;

    font-size: 11px;
}


.homeb-ai-suggestion p {
    margin:
        2px
        0
        0;

    color: #817970;

    font-size: 10px;
    line-height: 1.4;
}


/* =====================================================
   MOVE
   ===================================================== */

.homeb-ai-move-current {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;

    padding:
        7px
        8px;

    border-radius: 7px;

    background: #f0ece6;
}


.homeb-ai-move-current small {
    color: #918980;

    font-size: 8px;
}


.homeb-ai-move-current strong {
    color: #514b45;

    font-size: 11px;
}


/* =====================================================
   ACTION BUTTON
   ===================================================== */

.homeb-ai-action {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    min-height: 34px;

    margin-top: 9px;

    border: 0;
    border-radius: 7px;

    background: #332f2b;

    color: #fff;

    font: inherit;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* =====================================================
   NUMBERS
   ===================================================== */

.homeb-ai-number-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 6px;
}


.homeb-ai-number-grid > div {
    padding:
        9px;

    border:
        1px
        solid
        #e4ddd4;

    border-radius: 8px;

    background: #fff;
}


.homeb-ai-number-grid small,
.homeb-ai-number-grid strong,
.homeb-ai-number-grid span {
    display: block;
}


.homeb-ai-number-grid small {
    color: #918980;

    font-size: 8px;
}


.homeb-ai-number-grid strong {
    margin:
        3px
        0;

    color: #413c37;

    font-size: 12px;
}


.homeb-ai-number-grid span {
    color: #918980;

    font-size: 8px;
}


.homeb-ai-number-grid span.positive {
    color: #638d68;
}


/* =====================================================
   MINI CHART
   ===================================================== */

.homeb-ai-mini-chart {
    height: 85px;

    display: flex;
    align-items: flex-end;

    gap: 7px;

    margin-top: 10px;

    padding:
        7px
        8px;

    border:
        1px
        solid
        #e5ded5;

    border-radius: 8px;

    background: #fff;
}


.homeb-ai-mini-chart > div {
    height: 100%;

    flex: 1;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;

    gap: 3px;
}


.homeb-ai-mini-chart span {
    width: 100%;
    height: var(--bar);

    max-width: 20px;

    border-radius:
        4px
        4px
        2px
        2px;

    background: #ddd6cc;
}


.homeb-ai-mini-chart .current span {
    background: #c99d4b;
}


.homeb-ai-mini-chart small {
    color: #958d84;

    font-size: 8px;
}


/* =====================================================
   INVOICE
   ===================================================== */

.homeb-ai-invoice {
    border:
        1px
        solid
        #e4ddd4;

    border-radius: 8px;

    background: #fff;

    overflow: hidden;
}


.homeb-ai-invoice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        8px
        9px;

    border-bottom:
        1px
        solid
        #ebe5de;
}


.homeb-ai-invoice-head small {
    display: block;

    color: #948c83;

    font-size: 8px;
}


.homeb-ai-invoice-head strong {
    display: block;

    margin-top: 2px;

    color: #4b453f;

    font-size: 12px;
}


.homeb-ai-invoice-head > span {
    padding:
        3px
        6px;

    border-radius: 999px;

    background: #f2eee7;

    color: #8c847c;

    font-size: 8px;
}


.homeb-ai-invoice-row,
.homeb-ai-invoice-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        7px
        9px;
}


.homeb-ai-invoice-row {
    color: #777068;

    font-size: 10px;
}


.homeb-ai-invoice-total {
    border-top:
        1px
        solid
        #e8e2da;

    color: #49433d;

    font-size: 11px;
}


/* =====================================================
   CUSTOMERS
   ===================================================== */

.homeb-ai-customers {
    display: grid;

    gap: 4px;
}


.homeb-ai-customers > div {
    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        6px
        7px;

    border-radius: 7px;

    background: #fff;

    border:
        1px
        solid
        #e8e2da;
}


.homeb-ai-avatar {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 25px;

    border-radius: 50%;

    background: #eee7dc;

    color: #9e7835;

    font-size: 8px;
    font-weight: 700;
}


.homeb-ai-customers p {
    margin: 0;
}


.homeb-ai-customers strong {
    display: block;

    color: #4a443e;

    font-size: 11px;
}


.homeb-ai-customers small {
    display: block;

    margin-top: 1px;

    color: #958d84;

    font-size: 8px;
}


.homeb-ai-more-result {
    margin-top: 5px;

    color: #9b938a;

    text-align: center;

    font-size: 8px;
}


/* =====================================================
   PROMPT
   ===================================================== */

.homeb-ai-prompt {
    padding:
        10px
        13px
        12px;

    border-top:
        1px
        solid
        #e7e1d9;

    background: #fff;
}


.homeb-ai-input {
    display: grid;

    grid-template-columns:
        21px
        minmax(0,1fr)
        29px;

    align-items: center;

    gap: 6px;

    padding:
        5px
        6px
        5px
        9px;

    border:
        1px
        solid
        #ded7ce;

    border-radius: 9px;

    background: #faf9f7;
}


.homeb-ai-input > span {
    color: #af8338;

    font-size: 12px;
}


.homeb-ai-input input {
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #4c4640;

    font: inherit;

    font-size: 12px;
}


.homeb-ai-input button {
    width: 27px;
    height: 27px;

    border: 0;
    border-radius: 7px;

    background: #332f2b;

    color: #fff;

    cursor: pointer;
}


.homeb-ai-prompt > small {
    display: block;

    margin-top: 5px;

    color: #aaa29a;

    text-align: center;

    font-size: 8px;
}


/* =====================================================
   APPROVAL MODAL
   ===================================================== */

.homeb-ai-approval {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(22,20,18,.58);

    opacity: 0;
    pointer-events: none;

    transition: opacity .2s ease;
}


.homeb-ai-approval.open {
    opacity: 1;
    pointer-events: auto;
}


.homeb-ai-approval-card {
    position: relative;

    width: min(420px, 100%);

    padding:
        31px
        30px
        25px;

    box-sizing: border-box;

    border-radius: 15px;

    background: #fff;

    color: #3e3934;

    text-align: center;

    box-shadow:
        0 25px 80px rgba(0,0,0,.27);

    transform: translateY(8px);

    transition:
        transform .2s ease;
}


.homeb-ai-approval.open
.homeb-ai-approval-card {
    transform: translateY(0);
}


.homeb-ai-approval-close {
    position: absolute;

    top: 12px;
    right: 13px;

    border: 0;

    background: transparent;

    color: #918980;

    font-size: 18px;

    cursor: pointer;
}


.homeb-ai-approval-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0
        auto
        11px;

    border-radius: 50%;

    background: #f2e9d9;

    color: #b18437;

    font-size: 17px;
}


.homeb-ai-mini-eyebrow {
    display: block;

    color: #a57c33;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.homeb-ai-approval h3 {
    margin:
        5px
        0
        8px;

    font-size: 19px;
}


.homeb-ai-approval > p,
.homeb-ai-approval-card > p {
    margin:
        0
        auto;

    max-width: 330px;

    color: #777068;

    font-size: 12px;
    line-height: 1.5;
}


.homeb-ai-approval-preview {
    margin-top: 15px;

    padding:
        11px;

    border:
        1px
        solid
        #e5ded5;

    border-radius: 8px;

    background: #faf8f5;

    text-align: left;
}


.homeb-ai-approval-preview small,
.homeb-ai-approval-preview strong {
    display: block;
}


.homeb-ai-approval-preview small {
    color: #948c83;

    font-size: 8px;
}


.homeb-ai-approval-preview strong {
    margin-top: 3px;

    color: #4b453f;

    font-size: 12px;
}


.homeb-ai-approval-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    margin-top: 16px;
}


.homeb-ai-approval-actions button {
    min-height: 39px;

    border-radius: 8px;

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.homeb-ai-approval-cancel {
    border:
        1px
        solid
        #ded7ce;

    background: #fff;

    color: #625c55;
}


.homeb-ai-approval-confirm {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #c99d4b,
            #ad7f2e
        );

    color: #fff;
}


.homeb-ai-approval-demo-note {
    display: block;

    margin-top: 7px;

    color: #aaa29a;

    font-size: 8px;
}


/* =====================================================
   BOTTOM
   ===================================================== */

.homeb-ai-bottom {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    max-width: 940px;

    margin:
        62px
        auto
        0;

    padding-top: 26px;

    border-top:
        1px
        solid
        rgba(255,255,255,.08);
}


.homeb-ai-bottom > div {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}


.homeb-ai-bottom > div > span {
    color: #d0a14c;

    font-size: 14px;
}


.homeb-ai-bottom p {
    margin: 0;

    color: rgba(255,255,255,.44);

    font-size: 12px;
    line-height: 1.5;
}


.homeb-ai-bottom strong {
    display: block;

    margin-bottom: 2px;

    color: rgba(255,255,255,.82);

    font-size: 12px;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 850px) {

    .homeb-ai-stage {
        grid-template-columns:
            minmax(210px,.55fr)
            1fr;

        gap: 28px;
    }

}


@media (max-width: 680px) {

    .homeb-ai-head {
        text-align: left;
        margin-bottom: 38px;
    }


    .homeb-ai-head p {
        margin-left: 0;
    }


    .homeb-ai-stage {
        grid-template-columns: 1fr;
    }


    .homeb-ai-ideas {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .homeb-ai-ideas-label,
    .homeb-ai-trust {
        grid-column:
            1
            /
            -1;
    }


    .homeb-ai-idea {
        grid-template-columns:
            31px
            minmax(0,1fr);
    }


    .homeb-ai-idea-arrow {
        display: none;
    }


    .homeb-ai-console {
        min-height: 510px;
    }


    .homeb-ai-bottom {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 44px;
    }

}


@media (max-width: 430px) {

    .homeb-ai-ideas {
        grid-template-columns: 1fr;
    }


    .homeb-ai-ideas-label,
    .homeb-ai-trust {
        grid-column: auto;
    }


    .homeb-ai-slots {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   HOME B - FEATURES
   ===================================================== */

.homeb-features {
    position: relative;

    padding:
        clamp(80px, 9vw, 135px)
        0
        0;

    background:
        linear-gradient(
            180deg,
            #fbfaf8 0%,
            #fff 55%,
            #f7f4ef 100%
        );

    overflow: hidden;
}


/* =====================================================
   HEADER
   ===================================================== */

.homeb-features-head {
    max-width: 790px;

    margin:
        0
        auto
        58px;

    text-align: center;
}


.homeb-features-head h2 {
    margin:
        0
        0
        18px;

    color: #292622;

    font-size:
        clamp(36px, 4vw, 54px);

    line-height: 1.04;

    letter-spacing: -.035em;
}


.homeb-features-head h2 span {
    color: #ad8338;
}


.homeb-features-head p {
    max-width: 680px;

    margin: 0 auto;

    color: #706a63;

    font-size: 16px;

    line-height: 1.65;
}


/* =====================================================
   EXPLORER
   ===================================================== */

.homeb-features-explorer {
    display: grid;

    grid-template-columns:
        minmax(230px, .58fr)
        minmax(500px, 1.4fr);

    gap:
        clamp(30px, 5vw, 65px);

    max-width: 1080px;

    margin: 0 auto;
}


/* =====================================================
   FEATURE NAV
   ===================================================== */

.homeb-features-nav {
    display: grid;

    align-content: start;

    gap: 7px;
}


.homeb-features-nav button {
    width: 100%;

    display: grid;

    grid-template-columns:
        34px
        minmax(0,1fr);

    align-items: center;

    gap: 10px;

    padding:
        10px
        11px;

    border:
        1px
        solid
        transparent;

    border-radius: 10px;

    background: transparent;

    color: #706961;

    text-align: left;

    font: inherit;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.homeb-features-nav button:hover {
    transform:
        translateX(3px);

    background: #fff;
}


.homeb-features-nav button.active {
    border-color: #ded1ba;

    background: #fff;

    color: #36322d;

    box-shadow:
        0 8px 22px rgba(45, 37, 28, .06);
}


.homeb-feature-nav-icon {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #eee8df;

    color: #a37b34;

    font-size: 13px;
}


.homeb-features-nav button.active
.homeb-feature-nav-icon {
    background: #f3e8d4;
}


.homeb-features-nav strong {
    display: block;

    font-size: 11px;
}


.homeb-features-nav small {
    display: block;

    margin-top: 2px;

    color: #989087;

    font-size: 10px;

    line-height: 1.35;
}


/* =====================================================
   DISPLAY
   ===================================================== */

.homeb-features-display {
    min-height: 520px;

    border:
        1px
        solid
        #ded7cd;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 25px 70px rgba(45,37,28,.10);

    overflow: hidden;
}


/* APP TOP */

.homeb-features-app-top {
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        17px;

    border-bottom:
        1px
        solid
        #eee8e0;

    background: #faf9f7;
}


.homeb-features-brand {
    color: #38342f;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: -.04em;
}


.homeb-features-brand span {
    color: #bd8e3b;
}


.homeb-features-app-user {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #817970;

    font-size: 11px;
}


.homeb-features-app-user span {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eee8df;

    color: #957034;

    font-weight: 700;
}


/* =====================================================
   SCREEN
   ===================================================== */

.homeb-feature-screen {
    display: none;

    padding:
        25px
        27px
        30px;
}


.homeb-feature-screen.active {
    display: block;

    animation:
        homebFeatureIn
        .24s
        ease;
}


@keyframes homebFeatureIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.homeb-feature-screen-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 20px;
}


.homeb-feature-screen-head > div:first-child {
    max-width: 440px;
}


.homeb-feature-screen-head > div > span {
    display: block;

    margin-bottom: 5px;

    color: #a27a31;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.homeb-feature-screen-head h3 {
    margin:
        0
        0
        7px;

    color: #332f2b;

    font-size: 21px;

    letter-spacing: -.025em;
}


.homeb-feature-screen-head p {
    margin: 0;

    color: #807970;

    font-size: 12px;

    line-height: 1.5;
}


.homeb-feature-screen-icon {
    width: 41px;
    height: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 41px;

    border-radius: 11px;

    background: #f1eadf;

    color: #a77b30;

    font-size: 18px;
}


/* =====================================================
   COMMON
   ===================================================== */

.homeb-feature-search {
    min-height: 35px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        0
        10px;

    box-sizing: border-box;

    border:
        1px
        solid
        #e6e0d8;

    border-radius: 8px;

    background: #faf9f7;

    color: #9b938a;

    font-size: 11px;
}


.homeb-feature-callout {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 10px;

    padding:
        8px
        9px;

    border-radius: 8px;

    background: #f1f4f0;
}


.homeb-feature-callout > span {
    color: #69916d;

    font-size: 11px;
}


.homeb-feature-callout p {
    margin: 0;

    color: #6e776d;

    font-size: 11px;
}


.homeb-feature-callout.gold {
    background: #f6f0e4;
}


.homeb-feature-callout.gold > span {
    color: #ad8134;
}


/* =====================================================
   CUSTOMER
   ===================================================== */

.homeb-customer-demo {
    display: grid;

    gap: 10px;
}


.homeb-customer-profile {
    border:
        1px
        solid
        #e7e1d9;

    border-radius: 10px;

    background: #fff;

    overflow: hidden;
}


.homeb-customer-profile-head {
    display: grid;

    grid-template-columns:
        39px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 9px;

    padding: 11px;
}


.homeb-customer-avatar {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #efe7dc;

    color: #9e7735;

    font-size: 12px;
    font-weight: 700;
}


.homeb-customer-profile-head strong {
    display: block;

    color: #443f39;

    font-size: 12px;
}


.homeb-customer-profile-head small {
    display: block;

    margin-top: 2px;

    color: #938b82;

    font-size: 8px;
}


.homeb-customer-status {
    padding:
        3px
        6px;

    border-radius: 999px;

    background: #edf3ec;

    color: #67886b;

    font-size: 8px;
}


.homeb-customer-stats {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px
        solid
        #ebe5dd;

    border-bottom:
        1px
        solid
        #ebe5dd;
}


.homeb-customer-stats > div {
    padding:
        8px
        10px;

    border-right:
        1px
        solid
        #ebe5dd;
}


.homeb-customer-stats > div:last-child {
    border-right: 0;
}


.homeb-customer-stats small,
.homeb-customer-stats strong {
    display: block;
}


.homeb-customer-stats small {
    color: #978f86;

    font-size: 8px;
}


.homeb-customer-stats strong {
    margin-top: 2px;

    color: #49433d;

    font-size: 12px;
}


.homeb-customer-note {
    padding:
        8px
        10px;
}


.homeb-customer-note span {
    color: #9c7534;

    font-size: 8px;
    font-weight: 700;
}


.homeb-customer-note p {
    margin:
        3px
        0
        0;

    color: #777068;

    font-size: 10px;
}


.homeb-feature-mini-list {
    display: grid;

    gap: 4px;
}


.homeb-feature-mini-list > div {
    display: grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding:
        7px
        8px;

    border-radius: 7px;

    background: #faf8f5;
}


.homeb-feature-mini-list span,
.homeb-feature-mini-list small {
    color: #928a81;

    font-size: 8px;
}


.homeb-feature-mini-list strong {
    color: #4a443e;

    font-size: 11px;
}


/* =====================================================
   COMMUNICATION
   ===================================================== */

.homeb-communication-today {
    display: flex;
    justify-content: space-between;

    margin-bottom: 10px;

    padding:
        9px
        10px;

    border-radius: 8px;

    background: #f4f0e9;
}


.homeb-communication-today span {
    color: #8b837a;

    font-size: 11px;
}


.homeb-communication-today strong {
    color: #4a443e;

    font-size: 12px;
}


.homeb-communication-flow {
    display: grid;

    gap: 5px;
}


.homeb-communication-flow > div {
    display: grid;

    grid-template-columns:
        24px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding:
        8px;

    border:
        1px
        solid
        #e8e2da;

    border-radius: 8px;
}


.homeb-communication-flow strong {
    display: block;

    color: #4a443e;

    font-size: 11px;
}


.homeb-communication-flow small {
    display: block;

    margin-top: 2px;

    color: #978f86;

    font-size: 8px;
}


.homeb-communication-flow > div > span:last-child {
    color: #958d84;

    font-size: 8px;
}


.homeb-communication-check,
.homeb-communication-clock {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 12px;
}


.homeb-communication-check {
    background: #ecf2eb;

    color: #66876a;
}


.homeb-communication-clock {
    background: #f3eee6;

    color: #a17a35;
}


/* =====================================================
   CASH
   ===================================================== */

.homeb-cash-stats,
.homeb-statistics-cards {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 6px;
}


.homeb-cash-stats > div,
.homeb-statistics-cards > div {
    padding: 9px;

    border:
        1px
        solid
        #e7e1d9;

    border-radius: 8px;

    background: #faf9f7;
}


.homeb-cash-stats small,
.homeb-cash-stats strong,
.homeb-cash-stats span,
.homeb-statistics-cards small,
.homeb-statistics-cards strong,
.homeb-statistics-cards span {
    display: block;
}


.homeb-cash-stats small,
.homeb-statistics-cards small {
    color: #948c83;

    font-size: 8px;
}


.homeb-cash-stats strong,
.homeb-statistics-cards strong {
    margin:
        3px
        0;

    color: #47413b;

    font-size: 12px;
}


.homeb-cash-stats span,
.homeb-statistics-cards span {
    color: #948c83;

    font-size: 8px;
}


.homeb-statistics-cards span.positive {
    color: #648a69;
}


.homeb-receipt {
    margin-top: 10px;

    border:
        1px
        solid
        #e4ded6;

    border-radius: 9px;

    overflow: hidden;
}


.homeb-receipt-head,
.homeb-receipt > div {
    display: flex;
    justify-content: space-between;

    gap: 10px;

    padding:
        8px
        10px;

    border-bottom:
        1px
        solid
        #ebe5dd;

    font-size: 10px;
}


.homeb-receipt-head {
    background: #faf8f5;
}


.homeb-receipt-total {
    border-bottom: 0 !important;

    background: #faf8f5;
}


/* =====================================================
   STOCK
   ===================================================== */

.homeb-stock-toolbar {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 10px;

    margin-bottom: 9px;
}


.homeb-stock-count {
    color: #918980;

    font-size: 8px;
}


.homeb-stock-table {
    border:
        1px
        solid
        #e6e0d8;

    border-radius: 9px;

    overflow: hidden;
}


.homeb-stock-row {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        65px
        65px;

    align-items: center;

    gap: 8px;

    padding:
        8px
        9px;

    border-bottom:
        1px
        solid
        #ebe5dd;
}


.homeb-stock-row:last-child {
    border-bottom: 0;
}


.homeb-stock-row.head {
    background: #faf8f5;

    color: #958d84;

    font-size: 8px;
}


.homeb-stock-row strong {
    color: #4d4741;

    font-size: 11px;
}


.homeb-stock-row > span {
    color: #847d75;

    font-size: 8px;
}


.homeb-stock-row .ok {
    color: #668a6b;
}


.homeb-stock-row .low {
    color: #a97b32;
}


/* =====================================================
   STATISTICS
   ===================================================== */

.homeb-statistics-chart {
    margin-top: 10px;

    padding:
        10px
        11px;

    border:
        1px
        solid
        #e6e0d8;

    border-radius: 9px;
}


.homeb-statistics-chart-head {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}


.homeb-statistics-chart-head strong {
    display: block;

    font-size: 11px;
}


.homeb-statistics-chart-head small {
    display: block;

    margin-top: 1px;

    color: #918980;

    font-size: 8px;
}


.homeb-statistics-chart-head > span {
    color: #9c7534;

    font-size: 8px;
}


.homeb-statistics-bars {
    height: 115px;

    display: flex;
    align-items: flex-end;

    gap: 8px;

    margin-top: 10px;
}


.homeb-statistics-bars > div {
    height: 100%;

    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    gap: 3px;
}


.homeb-statistics-bars span {
    width: 100%;
    max-width: 25px;

    height: var(--height);

    border-radius:
        4px
        4px
        2px
        2px;

    background: #ddd5ca;
}


.homeb-statistics-bars .current span {
    background: #c99d4b;
}


.homeb-statistics-bars small,
.homeb-statistics-bars label {
    color: #918980;

    font-size: 5px;
}


/* =====================================================
   ONLINE BOOKING
   ===================================================== */

.homeb-online-demo {
    display: grid;

    gap: 6px;
}


.homeb-online-service {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        9px
        10px;

    border:
        1px
        solid
        #e6e0d8;

    border-radius: 8px;
}


.homeb-online-service strong {
    display: block;

    color: #47413b;

    font-size: 12px;
}


.homeb-online-service small {
    display: block;

    margin-top: 2px;

    color: #918980;

    font-size: 8px;
}


.homeb-demo-toggle {
    position: relative;

    width: 31px;
    height: 17px;

    display: block;

    flex: 0 0 31px;

    border-radius: 999px;

    background: #ddd7cf;
}


.homeb-demo-toggle i {
    position: absolute;

    width: 13px;
    height: 13px;

    left: 2px;
    top: 2px;

    border-radius: 50%;

    background: #fff;

    transition: transform .2s ease;
}


.homeb-demo-toggle.active {
    background: #c99d4b;
}


.homeb-demo-toggle.active i {
    transform: translateX(14px);
}


.homeb-online-times {
    margin-top: 5px;

    padding:
        10px;

    border-radius: 8px;

    background: #f5f1ea;
}


.homeb-online-times > span {
    display: block;

    margin-bottom: 7px;

    color: #967137;

    font-size: 8px;
    font-weight: 700;
}


.homeb-online-times > div {
    display: flex;
    justify-content: space-between;

    gap: 10px;

    padding:
        5px
        0;

    border-bottom:
        1px
        solid
        #e6dfd5;
}


.homeb-online-times > div:last-child {
    border-bottom: 0;
}


.homeb-online-times strong {
    color: #514b44;

    font-size: 11px;
}


.homeb-online-times small {
    color: #8f877e;

    font-size: 8px;
}


/* =====================================================
   SUMMARY
   ===================================================== */

.homeb-features-summary {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 20px;

    max-width: 1030px;

    margin:
        60px
        auto
        0;

    padding:
        25px
        0;

    border-top:
        1px
        solid
        #e4ddd3;

    border-bottom:
        1px
        solid
        #e4ddd3;
}


.homeb-features-summary > div {
    display: flex;
    align-items: flex-start;

    gap: 8px;
}


.homeb-features-summary > div > span {
    color: #ad8338;

    font-size: 13px;
}


.homeb-features-summary p {
    margin: 0;

    color: #817a72;

    font-size: 11px;
    line-height: 1.45;
}


.homeb-features-summary strong {
    display: block;

    margin-bottom: 2px;

    color: #46413b;

    font-size: 12px;
}


/* =====================================================
   FINAL CTA
   ===================================================== */

.homeb-final-cta {
    display: grid;

    grid-template-columns:
        minmax(330px,1fr)
        minmax(290px,.65fr);

    align-items: center;

    gap:
        clamp(40px,7vw,90px);

    max-width: 1050px;

    margin:
        80px
        auto
        0;

    padding:
        65px
        0
        80px;
}


.homeb-final-cta-copy h2 {
    margin:
        0
        0
        16px;

    color: #292622;

    font-size:
        clamp(35px,4vw,52px);

    line-height: 1.03;

    letter-spacing: -.035em;
}


.homeb-final-cta-copy h2 span {
    color: #ad8338;
}


.homeb-final-cta-copy > p {
    max-width: 560px;

    margin:
        0;

    color: #706a63;

    font-size: 14px;

    line-height: 1.65;
}


.homeb-final-cta-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;
}


.homeb-final-price-link {
    color: #6f685f;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;
}


.homeb-final-price-link:hover {
    color: #a77b30;
}


/* CTA CARD */

.homeb-final-cta-card {
    padding:
        25px
        24px;

    border:
        1px
        solid
        #dfd7cc;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 20px 55px rgba(45,37,28,.09);
}


.homeb-final-cta-card-label {
    display: block;

    margin-bottom: 15px;

    color: #a37a32;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.homeb-final-step {
    display: grid;

    grid-template-columns:
        28px
        minmax(0,1fr);

    gap: 10px;

    padding:
        10px
        0;

    border-bottom:
        1px
        solid
        #eee8e0;
}


.homeb-final-step > span {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f3eadb;

    color: #a47930;

    font-size: 12px;
    font-weight: 700;
}


.homeb-final-step p {
    margin: 0;

    color: #817a72;

    font-size: 11px;

    line-height: 1.45;
}


.homeb-final-step strong {
    display: block;

    margin-bottom: 2px;

    color: #48423c;

    font-size: 12px;
}


.homeb-final-ready {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 14px;

    color: #817a72;

    font-size: 11px;
}


.homeb-final-ready > span {
    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf3ec;

    color: #678b6c;

    font-size: 12px;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 850px) {

    .homeb-features-explorer {
        grid-template-columns:
            minmax(190px,.45fr)
            1fr;

        gap: 25px;
    }

}


@media (max-width: 700px) {

    .homeb-features-head {
        margin-bottom: 38px;

        text-align: left;
    }


    .homeb-features-head p {
        margin-left: 0;
    }


    .homeb-features-explorer {
        grid-template-columns: 1fr;
    }


    .homeb-features-nav {
        grid-template-columns:
            repeat(3,1fr);
    }


    .homeb-features-nav button {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .homeb-feature-nav-icon {
        margin: 0 auto;
    }


    .homeb-features-nav small {
        display: none;
    }


    .homeb-features-summary {
        grid-template-columns:
            repeat(2,1fr);
    }


    .homeb-final-cta {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 450px) {

    .homeb-features-nav {
        grid-template-columns:
            repeat(2,1fr);
    }


    .homeb-feature-screen {
        padding:
            21px
            17px
            25px;
    }


    .homeb-cash-stats,
    .homeb-statistics-cards {
        grid-template-columns: 1fr;
    }


    .homeb-features-summary {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   MOBILE CLASSIC WEEK CALENDAR
   ===================================================== */

.homeb-mobile-classic-calendar {
    position: relative;

    width: 100%;

    height: 365px;

    border:
        1px
        solid
        #ded9d1;

    border-radius: 8px;

    background: #fff;

    overflow: auto;

    scrollbar-width: thin;
}


/*
    Wichtig:
    Der Kalender darf etwas breiter als der Phone-Screen sein.
    Dadurch bleiben 7 Tage lesbar.
*/
.homeb-mobile-week-grid {
    display: grid;

    grid-template-columns:
        39px
        repeat(7, 43px);

    min-width:
        calc(39px + (7 * 43px));

    background: #fff;
}


/* =====================================================
   HEADER
   ===================================================== */

.homeb-mobile-cal-head {
    position: sticky;

    top: 0;

    z-index: 7;

    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    box-sizing: border-box;

    border-right:
        1px
        solid
        #e6e1da;

    border-bottom:
        1px
        solid
        #ddd7cf;

    background: #fff;

    color: #554f48;
}


.homeb-mobile-cal-head.time {
    left: 0;

    z-index: 9;

    color: #797169;

    font-size: 8px;
    font-weight: 700;
}


.homeb-mobile-cal-head strong {
    font-size: 11px;

    text-transform: uppercase;
}


.homeb-mobile-cal-head span {
    margin-top: 2px;

    font-size: 12px;
    font-weight: 700;
}


.homeb-mobile-cal-head.today {
    background: #f6e2ac;

    color: #604914;
}


.homeb-mobile-cal-head.weekend {
    background: #faf7f2;
}


/* =====================================================
   TIME
   ===================================================== */

.homeb-mobile-cal-time {
    position: sticky;

    left: 0;

    z-index: 5;

    height: 31px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    box-sizing: border-box;

    padding-top: 5px;

    border-right:
        1px
        solid
        #ddd7cf;

    border-bottom:
        1px
        solid
        #ebe7e1;

    background: #fff;

    color: #72706b;

    font-size: 8px;
}


/* =====================================================
   CELLS
   ===================================================== */

.homeb-mobile-cal-cell {
    position: relative;

    height: 31px;

    box-sizing: border-box;

    border-right:
        1px
        solid
        #e5e1db;

    border-bottom:
        1px
        solid
        #ebe7e1;

    background: #fff;

    overflow: visible;
}


.homeb-mobile-cal-cell.weekend {
    background: #fdfbf8;
}


/*
    Jede volle Stunde etwas stärker markieren.
    Durch die Reihenfolge:
    Header = 8 Elemente
    danach jede Zeile = 8 Elemente.
*/
.homeb-mobile-week-grid
.homeb-mobile-cal-time:nth-of-type(16n + 9) {
    border-bottom-color: #ddd7cf;
}


/* =====================================================
   APPOINTMENTS
   ===================================================== */

.homeb-mobile-cal-event {
    position: absolute;

    z-index: 4;

    top: 2px;
    left: 2px;
    right: 2px;

    min-height: 27px;

    box-sizing: border-box;

    padding:
        3px
        3px;

    border: 0;

    border-radius: 4px;

    color: #37332f;

    text-align: left;

    font: inherit;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 1px 2px
        rgba(0,0,0,.06);
}


.homeb-mobile-cal-event strong {
    display: block;

    font-size: 8px;
    line-height: 1.05;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.homeb-mobile-cal-event span {
    display: block;

    margin-top: 2px;

    font-size: 4.8px;
    line-height: 1.05;

    opacity: .75;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* appointment styles */

.homeb-mobile-cal-event.beige {
    background: #eee8df;
}


.homeb-mobile-cal-event.blue {
    background: #dce9f4;

    color: #294f72;
}


.homeb-mobile-cal-event.gold {
    background: #f4e4bd;

    color: #745720;
}


/* =====================================================
   TRAINING / LONG BLOCK
   ===================================================== */

.homeb-mobile-cal-event.training {
    background: #e8d7ad;

    color: #5d471d;

    box-shadow:
        inset 3px 0 0 #bc8830;
}


.homeb-mobile-cal-training-fill {
    position: absolute;

    inset:
        0
        2px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f0e5c9;

    color: #85672e;

    font-size: 4.5px;

    border-left:
        3px
        solid
        #bc8830;
}


.homeb-mobile-cal-training-fill.training-end {
    border-radius:
        0
        0
        4px
        4px;
}


/* =====================================================
   CALENDAR SCROLL
   ===================================================== */

.homeb-mobile-classic-calendar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}


.homeb-mobile-classic-calendar::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #cfc7bc;
}


.homeb-mobile-classic-calendar::-webkit-scrollbar-track {
    background: transparent;
}

.homeb-mobile-classic-calendar {
    position: relative;

    width: 100%;
    height: 365px;

    border: 1px solid #ded9d1;
    border-radius: 8px;

    background: #fff;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
}


.homeb-mobile-week-grid {
    display: grid;

    /*
        1 Zeitspalte + 7 Tage.
        Alles muss in die Phone-Breite passen.
    */
    grid-template-columns:
        34px
        repeat(7, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    background: #fff;
}

/* =====================================================
   MOBILE APPOINTMENT DETAIL
   ===================================================== */

.homeb-mobile-appt-detail {
    position: absolute;

    inset: 0;

    z-index: 40;

    display: flex;
    align-items: flex-end;

    padding: 8px;

    box-sizing: border-box;

    background: rgba(30, 27, 24, .28);

    opacity: 0;
    pointer-events: none;

    transition: opacity .18s ease;
}


.homeb-mobile-appt-detail.open {
    opacity: 1;
    pointer-events: auto;
}


.homeb-mobile-appt-detail-card {
    width: 100%;

    padding: 13px;

    box-sizing: border-box;

    border-radius:
        14px
        14px
        10px
        10px;

    background: #fff;

    box-shadow:
        0 -10px 35px rgba(35, 29, 23, .15);

    transform: translateY(12px);

    transition:
        transform .18s ease;
}


.homeb-mobile-appt-detail.open
.homeb-mobile-appt-detail-card {
    transform: translateY(0);
}


/* HEAD */

.homeb-mobile-appt-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;

    padding-bottom: 8px;

    border-bottom: 1px solid #ebe5dd;
}


.homeb-mobile-appt-detail-head small {
    display: block;

    color: #a17a35;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.homeb-mobile-appt-detail-head strong {
    display: block;

    margin-top: 2px;

    color: #3f3a35;

    font-size: 12px;
}


.homeb-mobile-appt-detail-head button {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: #f3efe9;

    color: #716a62;

    font-size: 14px;

    cursor: pointer;
}


/* CUSTOMER */

.homeb-mobile-appt-customer {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 0;
}


.homeb-mobile-appt-avatar {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 29px;

    border-radius: 50%;

    background: #eee7dc;

    color: #9c7432;

    font-size: 11px;
    font-weight: 700;
}


.homeb-mobile-appt-customer strong {
    display: block;

    color: #47413b;

    font-size: 12px;
}


.homeb-mobile-appt-customer small {
    display: block;

    margin-top: 1px;

    color: #958d84;

    font-size: 8px;
}


/* META */

.homeb-mobile-appt-meta {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 5px;
}


.homeb-mobile-appt-meta > div {
    padding: 7px;

    border-radius: 7px;

    background: #f8f6f2;
}


.homeb-mobile-appt-meta span,
.homeb-mobile-appt-meta strong {
    display: block;
}


.homeb-mobile-appt-meta span {
    color: #928a81;

    font-size: 8px;
}


.homeb-mobile-appt-meta strong {
    margin-top: 2px;

    color: #4a443e;

    font-size: 10px;
}


/* ACTIONS */

.homeb-mobile-appt-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 6px;

    margin-top: 9px;
}


.homeb-mobile-appt-actions button {
    min-height: 32px;

    border-radius: 7px;

    font: inherit;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


.homeb-mobile-appt-secondary {
    border: 1px solid #ddd6cc;

    background: #fff;

    color: #5d5750;
}


.homeb-mobile-appt-primary {
    border: 0;

    background: #332f2b;

    color: #fff;
}


.homeb-mobile-appt-demo {
    display: block;

    margin-top: 6px;

    color: #aaa29a;

    text-align: center;

    font-size: 5px;
}

   HOME B - PRICING
   ===================================================== */

.homeb-pricing {
    position: relative;

    padding:
        clamp(70px, 8vw, 115px)
        0;

    background: #fff;
}


/* =====================================================
   HEADER
   ===================================================== */

.homeb-pricing-head {
    max-width: 700px;

    margin:
        0
        auto
        44px;

    text-align: center;
}


.homeb-pricing-head h2 {
    margin:
        0
        0
        12px;

    color: #292622;

    font-size:
        clamp(34px, 4vw, 50px);

    line-height: 1.05;

    letter-spacing: -.035em;
}


.homeb-pricing-head p {
    max-width: 600px;

    margin: 0 auto;

    color: #777068;

    font-size: 15px;

    line-height: 1.55;
}


/* =====================================================
   GRID
   ===================================================== */

.homeb-pricing-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 18px;

    max-width: 1030px;

    margin: 0 auto;
}


/* =====================================================
   CARDS
   ===================================================== */

.homeb-price-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding:
        27px
        25px
        24px;

    box-sizing: border-box;

    border: 1px solid #e3ddd4;
    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 10px 32px rgba(44, 36, 27, .045);
}


.homeb-price-card.featured {
    border-color: #caa45f;

    box-shadow:
        0 20px 50px rgba(58, 44, 24, .11);

    transform: translateY(-8px);
}


/* BADGE */

.homeb-price-badge {
    position: absolute;

    top: -12px;
    left: 50%;

    transform: translateX(-50%);

    padding:
        5px
        11px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #c99d4b,
            #ad7f2e
        );

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* TOP */

.homeb-price-type {
    color: #a27a31;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.homeb-price-card h3 {
    margin:
        6px
        0
        8px;

    color: #37322e;

    font-size: 20px;

    letter-spacing: -.025em;
}


.homeb-price-card-top p {
    min-height: 58px;

    margin: 0;

    color: #7c756d;

    font-size: 11px;

    line-height: 1.5;
}


/* =====================================================
   PRICE
   ===================================================== */

.homeb-price {
    display: flex;
    align-items: baseline;

    gap: 5px;

    margin:
        22px
        0
        15px;

    padding-bottom: 17px;

    border-bottom:
        1px
        solid
        #ebe5dd;
}


.homeb-price strong {
    color: #2f2b27;

    font-size: 30px;

    line-height: 1;
}


.homeb-price span {
    color: #8d867e;

    font-size: 12px;
}


/* =====================================================
   BEST FOR
   ===================================================== */

.homeb-price-best-for {
    margin-bottom: 16px;

    color: #918980;

    font-size: 11px;
}


.homeb-price-best-for strong {
    display: block;

    margin-top: 3px;

    color: #49433d;

    font-size: 12px;
}


/* =====================================================
   INCLUDES
   ===================================================== */

.homeb-price-includes {
    display: grid;

    gap: 9px;

    margin-bottom: 24px;
}


.homeb-price-includes > div {
    display: flex;
    align-items: flex-start;

    gap: 7px;
}


.homeb-price-includes > div > span {
    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 17px;

    border-radius: 50%;

    background: #f3eee6;

    color: #a37a32;

    font-size: 11px;
    font-weight: 800;
}


.homeb-price-includes p {
    margin: 1px 0 0;

    color: #656059;

    font-size: 12px;

    line-height: 1.4;
}


.homeb-price-includes p strong {
    color: #423d37;
}


.homeb-price-includes .highlight {
    margin-top: 4px;

    padding: 9px;

    border-radius: 8px;

    background: #f7f1e6;
}


.homeb-price-includes .highlight p {
    color: #604c29;
}


/* =====================================================
   BUTTON
   ===================================================== */

.homeb-price-button {
    width: 100%;

    min-height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    margin-top: auto;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .17s ease,
        box-shadow .17s ease;
}


.homeb-price-button:hover {
    transform: translateY(-1px);
}


.homeb-price-button.primary {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #c99d4b,
            #ad7f2e
        );

    color: #fff;

    box-shadow:
        0 7px 18px rgba(173, 127, 46, .18);
}


.homeb-price-button.secondary {
    border:
        1px
        solid
        #d8d0c5;

    background: #fff;

    color: #49433d;
}


.homeb-price-trial {
    display: block;

    margin-top: 7px;

    color: #9c948b;

    text-align: center;

    font-size: 10px;
}


/* =====================================================
   EASY START
   ===================================================== */

.homeb-pricing-start {
    display: grid;

    grid-template-columns:
        42px
        minmax(0,1fr);

    gap: 16px;

    max-width: 830px;

    margin:
        38px
        auto
        0;

    padding:
        24px
        26px;

    box-sizing: border-box;

    border: 1px solid #e4ddd3;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #faf8f4,
            #f7f2e9
        );
}


.homeb-pricing-start-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #efe3cc;

    color: #a47b32;

    font-size: 16px;
}


.homeb-pricing-start-label {
    display: block;

    margin-bottom: 4px;

    color: #a27a31;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.homeb-pricing-start-content > h3 {
    margin:
        0
        0
        8px;

    color: #37322e;

    font-size: 20px;

    letter-spacing: -.02em;
}


.homeb-pricing-start-content > p {
    max-width: 680px;

    margin: 0;

    color: #706961;

    font-size: 11px;

    line-height: 1.55;
}


/* =====================================================
   START STEPS
   ===================================================== */

.homeb-pricing-start-steps {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    margin-top: 20px;
}


.homeb-pricing-start-steps > div {
    padding: 10px;

    border:
        1px
        solid
        #e6ded2;

    border-radius: 9px;

    background: rgba(255,255,255,.72);
}


.homeb-pricing-start-steps > div > span {
    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    border-radius: 50%;

    background: #f0e6d4;

    color: #9d7430;

    font-size: 11px;
    font-weight: 800;
}


.homeb-pricing-start-steps p {
    margin: 0;

    color: #777068;

    font-size: 11px;

    line-height: 1.45;
}


.homeb-pricing-start-steps strong {
    display: block;

    margin-bottom: 3px;

    color: #49433d;

    font-size: 12px;
}


/* =====================================================
   CONTROL
   ===================================================== */

.homeb-pricing-control {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: 15px;

    padding:
        11px
        12px;

    border-radius: 9px;

    background: #fff;
}


.homeb-pricing-control > span {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;

    border-radius: 50%;

    background: #edf3ec;

    color: #668a6b;

    font-size: 12px;
}


.homeb-pricing-control p {
    margin: 0;

    color: #6f6860;

    font-size: 12px;

    line-height: 1.5;
}


.homeb-pricing-control strong {
    color: #45403a;
}


/* =====================================================
   HELP
   ===================================================== */

.homeb-pricing-help {
    display: grid;

    grid-template-columns:
        32px
        minmax(0,1fr);

    gap: 10px;

    margin-top: 13px;

    padding:
        12px;

    border-radius: 9px;

    background: #302d29;
}


.homeb-pricing-help-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(209,164,80,.15);

    color: #d0a14c;

    font-size: 12px;
    font-weight: 800;
}


.homeb-pricing-help strong {
    display: block;

    color: #fff;

    font-size: 12px;
}


.homeb-pricing-help p {
    margin:
        3px
        0
        5px;

    color: rgba(255,255,255,.60);

    font-size: 11px;

    line-height: 1.5;
}


.homeb-pricing-help a {
    color: #d5aa59;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}


/* =====================================================
   NOTE
   ===================================================== */

.homeb-pricing-note {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 27px;

    color: #817a72;

    font-size: 12px;
}


.homeb-pricing-note a {
    color: #9d7531;

    font-weight: 700;

    text-decoration: none;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 820px) {

    .homeb-pricing-start-steps {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media (max-width: 760px) {

    .homeb-pricing-grid {
        grid-template-columns: 1fr;

        max-width: 440px;
    }


    .homeb-price-card.featured {
        transform: none;
    }

}


@media (max-width: 560px) {

    .homeb-pricing-head {
        text-align: left;
    }


    .homeb-pricing-head p {
        margin-left: 0;
    }


    .homeb-pricing-start {
        grid-template-columns: 1fr;

        padding:
            20px
            17px;
    }


    .homeb-pricing-start-steps {
        grid-template-columns: 1fr;
    }


    .homeb-pricing-start-icon {
        width: 34px;
        height: 34px;
    }

}

.homeb-pricing-start-concierge {
    margin-top: 9px !important;
}

.homeb-pricing-start-concierge strong {
    color: #9c7430;
}

/* =====================================================
   PRICING - ONBOARDING CONCIERGE
   ===================================================== */

.homeb-price-onboarding {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 9px;

    padding:
        9px
        10px;

    border-radius: 8px;

    background: #f8f4ed;
}


.homeb-price-onboarding-icon {
    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 23px;

    border-radius: 50%;

    background: #eee2cd;

    color: #a47a31;

    font-size: 12px;
}


.homeb-price-onboarding strong {
    display: block;

    color: #4b443d;

    font-size: 12px;
}


.homeb-price-onboarding small {
    display: block;

    margin-top: 2px;

    color: #8a8279;

    font-size: 10px;

    line-height: 1.35;
}

/* =====================================================
   BOOKING - SOURCE EXPERIENCE
   ===================================================== */

.homeb-booking-origin-stage {
    min-height: 515px;

    box-sizing: border-box;

    border: 1px solid #ded7cc;
    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 24px 65px rgba(47,39,29,.13),
        0 5px 18px rgba(47,39,29,.06);

    overflow: hidden;
}


.homeb-booking-origin-stage.hidden {
    display: none;
}


.homeb-booking-origin-screen {
    display: none;

    min-height: 515px;

    box-sizing: border-box;

    padding: 22px;

    animation:
        homebOriginIn
        .22s
        ease;
}


.homeb-booking-origin-screen.active {
    display: block;
}


@keyframes homebOriginIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* PHONE IS HIDDEN UNTIL ENTRY BUTTON */

.homeb-booking-phone[data-homeb-booking-phone] {
    display: none;
}


.homeb-booking-phone[data-homeb-booking-phone].active {
    display: block;
}


/* =====================================================
   COMMON CTA
   ===================================================== */

.homeb-origin-main-action {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        17px;

    border: 0;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #c99d4b,
            #ad7f2e
        );

    color: #fff;

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 6px 15px rgba(173,127,46,.18);
}


.homeb-origin-message {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: 16px;

    padding:
        10px
        11px;

    border-radius: 9px;

    background: #f7f3ec;
}


.homeb-origin-message > span {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;

    border-radius: 50%;

    background: #fff;

    color: #9c7430;

    font-size: 10px;
    font-weight: 800;
}


.homeb-origin-message p {
    margin: 1px 0 0;

    color: #706961;

    font-size: 11px;
    line-height: 1.45;
}


/* =====================================================
   WEBSITE
   ===================================================== */

.homeb-origin-browser {
    overflow: hidden;

    border: 1px solid #e4ddd4;
    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(42,35,27,.07);
}


.homeb-origin-browser-top {
    height: 35px;

    display: flex;
    align-items: center;

    gap: 5px;

    padding:
        0
        10px;

    background: #f2efeb;

    border-bottom:
        1px
        solid
        #e5ded5;
}


.homeb-origin-browser-top > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #cbc5be;
}


.homeb-origin-browser-top small {
    margin-left: 8px;

    color: #827b73;

    font-size: 9px;
}


.homeb-origin-website {
    padding:
        42px
        28px
        37px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #faf7f1,
            #fff
        );
}


.homeb-origin-mini-logo {
    display: block;

    margin-bottom: 17px;

    color: #a67d33;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
}


.homeb-origin-website h3 {
    margin:
        0
        0
        9px;

    color: #332f2b;

    font-size: 25px;
}


.homeb-origin-website p {
    max-width: 330px;

    margin:
        0
        auto
        21px;

    color: #777068;

    font-size: 12px;
    line-height: 1.55;
}


/* =====================================================
   INSTAGRAM
   ===================================================== */

.homeb-origin-instagram {
    max-width: 370px;

    margin: 0 auto;

    border: 1px solid #e4ddd4;
    border-radius: 13px;

    background: #fff;

    overflow: hidden;
}


.homeb-origin-instagram-head,
.homeb-origin-whatsapp-head {
    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        11px
        12px;

    border-bottom:
        1px
        solid
        #ebe5dd;
}


.homeb-origin-social-avatar {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 35px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #e5d4b4,
            #bb8e3b
        );

    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


.homeb-origin-social-avatar.large {
    width: 45px;
    height: 45px;

    flex-basis: 45px;
}


.homeb-origin-instagram-head strong,
.homeb-origin-whatsapp-head strong {
    display: block;

    color: #433e38;

    font-size: 11px;
}


.homeb-origin-instagram-head small,
.homeb-origin-whatsapp-head small {
    display: block;

    margin-top: 2px;

    color: #938b82;

    font-size: 9px;
}


.homeb-origin-social-more {
    margin-left: auto;

    color: #918980;
}


.homeb-origin-instagram-profile {
    padding: 22px;
}


.homeb-origin-instagram-profile > strong {
    font-size: 14px;
}


.homeb-origin-instagram-profile p {
    margin:
        7px
        0;

    color: #6f6860;

    font-size: 11px;
    line-height: 1.5;
}


.homeb-origin-instagram-profile a {
    display: block;

    margin-bottom: 18px;

    color: #866324;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;
}


/* =====================================================
   WHATSAPP
   ===================================================== */

.homeb-origin-whatsapp {
    max-width: 370px;

    margin: 0 auto;

    border: 1px solid #ddd7cf;
    border-radius: 13px;

    background: #ebe5db;

    overflow: hidden;
}


.homeb-origin-whatsapp-head {
    background: #fff;
}


.homeb-origin-chat {
    display: grid;

    gap: 12px;

    padding:
        25px
        14px
        28px;
}


.homeb-origin-chat-bubble {
    max-width: 78%;

    padding:
        10px
        11px;

    border-radius: 10px;

    color: #47413b;

    font-size: 11px;
    line-height: 1.45;
}


.homeb-origin-chat-bubble.customer {
    justify-self: start;

    background: #fff;

    border-radius:
        4px
        10px
        10px
        10px;
}


.homeb-origin-chat-bubble.studio {
    justify-self: end;

    background: #dceccf;

    border-radius:
        10px
        4px
        10px
        10px;
}


.homeb-origin-chat-bubble small {
    display: block;

    margin-top: 5px;

    color: #817970;

    text-align: right;

    font-size: 8px;
}


.homeb-origin-chat-bubble button {
    display: block;

    width: 100%;

    margin-top: 9px;

    padding:
        8px;

    border: 0;
    border-radius: 7px;

    background: #fff;

    color: #866324;

    font: inherit;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


/* =====================================================
   FACEBOOK
   ===================================================== */

.homeb-origin-facebook {
    max-width: 370px;

    margin: 0 auto;

    border: 1px solid #e1dbd3;
    border-radius: 13px;

    background: #fff;

    overflow: hidden;
}


.homeb-origin-facebook-cover {
    height: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #e7dfd2,
            #f8f5f0
        );

    color: #9c7430;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .13em;
}


.homeb-origin-facebook-profile {
    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        12px
        14px;
}


.homeb-origin-facebook-profile strong {
    display: block;

    font-size: 13px;
}


.homeb-origin-facebook-profile small {
    display: block;

    margin-top: 2px;

    color: #918980;

    font-size: 9px;
}


.homeb-origin-facebook
.homeb-origin-main-action {
    width: calc(100% - 28px);

    margin:
        0
        14px
        14px;
}


/* =====================================================
   DIRECT LINK
   ===================================================== */

.homeb-origin-direct {
    max-width: 400px;

    margin: 20px auto 0;

    padding:
        30px
        25px;

    box-sizing: border-box;

    border: 1px solid #e2dbd1;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #faf7f1,
            #fff
        );

    text-align: center;
}


.homeb-origin-direct-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0
        auto
        12px;

    border-radius: 50%;

    background: #efe5d2;

    color: #a37a32;

    font-size: 17px;
}


.homeb-origin-direct-label {
    display: block;

    color: #918980;

    font-size: 10px;
}


.homeb-origin-direct > strong {
    display: block;

    margin:
        6px
        0
        10px;

    color: #423d37;

    font-size: 15px;
}


.homeb-origin-direct > p {
    margin:
        0
        auto
        14px;

    max-width: 320px;

    color: #777068;

    font-size: 11px;
    line-height: 1.5;
}


.homeb-origin-direct-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 18px;
}


.homeb-origin-direct-options span {
    padding:
        5px
        8px;

    border-radius: 999px;

    background: #f0ece5;

    color: #686159;

    font-size: 9px;
}


/* =====================================================
   BACK TO SOURCE
   ===================================================== */

.homeb-booking-origin-back {
    margin-bottom: 10px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #9c7430;

    font: inherit;

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}


/* =====================================================
   MAPRESTO B - PUBLIC TYPOGRAPHY / COLOR ALIGNMENT
   Keeps the product mockups compact, but aligns all
   marketing / sales copy with the A version.
   ===================================================== */

/* Core public copy colors */
.homeb-title,
.homeb-booking-head h2,
.homeb-onboarding-head h2,
.homeb-ai-head h2,
.homeb-features-head h2,
.homeb-pricing-head h2,
.homeb-final-cta-copy h2 {
    color: var(--ink);
}

.homeb-lead,
.homeb-booking-head p,
.homeb-onboarding-head p,
.homeb-ai-head p,
.homeb-features-head p,
.homeb-pricing-head p,
.homeb-final-cta-copy > p {
    color: var(--muted);
}

/* Same Mapresto gold family as A */
.homeb-title span,
.homeb-booking-head h2 span,
.homeb-onboarding-head h2 span,
.homeb-ai-head h2 span,
.homeb-features-head h2 span,
.homeb-final-cta-copy h2 span {
    color: var(--gold);
}

.homeb-eyebrow,
.homeb-section-eyebrow,
.homeb-price-type,
.homeb-pricing-start-label,
.homeb-pricing-start-concierge strong,
.homeb-pricing-note a {
    color: #9f6f1f;
}

/* Section headings: same visual scale as A */
.homeb-booking-head h2,
.homeb-onboarding-head h2,
.homeb-features-head h2,
.homeb-pricing-head h2 {
    font-size: clamp(36px, 4.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.homeb-ai-head h2,
.homeb-final-cta-copy h2 {
    font-size: clamp(38px, 4.5vw, 58px);
    line-height: 1.05;
    letter-spacing: -2.2px;
}

.homeb-booking-head p,
.homeb-onboarding-head p,
.homeb-features-head p,
.homeb-pricing-head p,
.homeb-ai-head p,
.homeb-final-cta-copy > p {
    font-size: 18px;
    line-height: 1.6;
}

.homeb-section-eyebrow,
.homeb-eyebrow {
    font-size: 13px;
    font-weight: 800;
}

/* Booking explanation (outside the product mockup) */
.homeb-booking-source-intro strong {
    font-size: 16px;
}
.homeb-booking-source-intro span,
.homeb-booking-source-copy small,
.homeb-booking-source-note p,
.homeb-booking-bottom p {
    font-size: 13px;
}
.homeb-booking-source-copy strong,
.homeb-booking-bottom p strong {
    font-size: 14px;
}

/* Onboarding story copy outside the demo window */
.homeb-onboarding-story-item strong,
.homeb-onboarding-trust strong,
.homeb-onboarding-promise strong {
    font-size: 14px;
}
.homeb-onboarding-story-item p,
.homeb-onboarding-trust p,
.homeb-onboarding-promise p {
    font-size: 13px;
}

/* Concierge explanatory copy outside its console */
.homeb-ai-idea strong,
.homeb-ai-trust strong,
.homeb-ai-bottom strong {
    font-size: 14px;
}
.homeb-ai-idea small,
.homeb-ai-trust p,
.homeb-ai-bottom p {
    font-size: 13px;
}

/* Features navigation / sales copy outside screenshots */
.homeb-features-nav strong,
.homeb-features-summary strong,
.homeb-final-step strong {
    font-size: 14px;
}
.homeb-features-nav small,
.homeb-features-summary p,
.homeb-final-step p {
    font-size: 13px;
}

/* Pricing aligned to A readability */
.homeb-pricing-grid {
    max-width: 1080px;
}

.homeb-price-card {
    border-color: var(--line);
}

.homeb-price-card.featured {
    border-color: var(--gold);
}

.homeb-price-badge,
.homeb-price-button.primary {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
}

.homeb-price-badge {
    font-size: 12px;
    font-weight: 800;
}

.homeb-price-type {
    font-size: 12px;
}

.homeb-price-card h3 {
    font-size: 23px;
    line-height: 1.2;
}

.homeb-price-card-top p {
    font-size: 14px;
    line-height: 1.5;
}

.homeb-price strong {
    font-size: 36px;
    font-weight: 800;
    color: var(--ink);
}

.homeb-price span {
    font-size: 13px;
    color: var(--muted);
}

.homeb-price-best-for {
    font-size: 12px;
}
.homeb-price-best-for strong {
    font-size: 13px;
}

.homeb-price-includes p {
    font-size: 13px;
    line-height: 1.45;
}

.homeb-price-includes > div > span {
    color: var(--gold);
}

.homeb-price-button {
    min-height: 48px;
    font-size: 14px;
    font-weight: 800;
}

.homeb-price-trial,
.homeb-price-onboarding small {
    font-size: 11px;
}
.homeb-price-onboarding strong {
    font-size: 13px;
}

/* Pricing onboarding reassurance */
.homeb-pricing-start-content > h3 {
    font-size: 22px;
}
.homeb-pricing-start-content > p,
.homeb-pricing-start-steps p,
.homeb-pricing-control p,
.homeb-pricing-help p {
    font-size: 13px;
}
.homeb-pricing-start-steps strong,
.homeb-pricing-help strong {
    font-size: 14px;
}
.homeb-pricing-help a,
.homeb-pricing-note {
    font-size: 13px;
}

/* Keep demo UI intentionally smaller than public copy. */
@media (max-width: 640px) {
    .homeb-booking-head p,
    .homeb-onboarding-head p,
    .homeb-features-head p,
    .homeb-pricing-head p,
    .homeb-ai-head p,
    .homeb-final-cta-copy > p {
        font-size: 17px;
    }

    .homeb-price-card-top p {
        font-size: 14px;
    }

    .homeb-price-includes p {
        font-size: 13px;
    }
}

/* =========================================================
   HOME B – BOOKING SOURCE PHONE PREVIEWS
   Instagram / WhatsApp / Facebook

   Website bleibt Browser/Desktop.
   Mapresto Booking Phone bleibt unverändert.
   ========================================================= */


/* ---------------------------------------------------------
   PHONE SHELL
   --------------------------------------------------------- */

.homeb-origin-phone {
    position: relative;
    width: min(100%, 330px);
    margin: 0 auto;
    padding: 9px;
    background: #111315;
    border: 1px solid rgba(17, 19, 21, 0.18);
    border-radius: 34px;
    box-shadow:
        0 24px 55px rgba(17, 19, 21, 0.16),
        0 8px 20px rgba(17, 19, 21, 0.08);
}


/* inner phone display */

.homeb-origin-phone-screen {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    background: #ffffff;
    border-radius: 26px;
}


/* ---------------------------------------------------------
   PHONE STATUS BAR
   --------------------------------------------------------- */

.homeb-origin-phone-status {
    position: relative;
    z-index: 5;

    height: 31px;
    padding: 7px 14px 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    color: #111315;
    background: #ffffff;
}


.homeb-origin-phone-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;

    font-size: 9px;
    letter-spacing: -0.02em;
}


/* optional camera / dynamic-island look */

.homeb-origin-phone::before {
    content: "";
    position: absolute;
    z-index: 10;

    top: 14px;
    left: 50%;
    transform: translateX(-50%);

    width: 76px;
    height: 18px;

    background: #111315;
    border-radius: 20px;
}


/* ---------------------------------------------------------
   PHONE HOME INDICATOR
   --------------------------------------------------------- */

.homeb-origin-phone-screen::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);

    width: 92px;
    height: 4px;

    background: rgba(17, 19, 21, 0.75);
    border-radius: 999px;

    z-index: 10;
}


/* =========================================================
   INSTAGRAM – MOBILE
   ========================================================= */

.homeb-origin-phone .homeb-origin-instagram {
    min-height: 465px;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


.homeb-origin-phone .homeb-origin-instagram-head {
    min-height: 54px;
    padding: 10px 14px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-bottom: 1px solid #eeeeee;
}


.homeb-origin-phone .homeb-origin-instagram-head::before {
    content: "Instagram";

    margin-right: auto;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.03em;

    color: #111315;
}


/*
   If the existing head contains avatar/name etc.,
   don't let the ::before push everything apart too much.
*/

.homeb-origin-phone .homeb-origin-instagram-head
.homeb-origin-social-avatar {
    flex: 0 0 auto;
}


.homeb-origin-phone .homeb-origin-instagram-profile {
    padding: 18px 16px 28px;
}


.homeb-origin-phone .homeb-origin-instagram-profile > strong {
    display: block;

    margin-bottom: 7px;

    font-size: 15px;
    line-height: 1.3;

    color: #111315;
}


.homeb-origin-phone .homeb-origin-instagram-profile p {
    margin: 0 0 12px;

    font-size: 12px;
    line-height: 1.55;

    color: #44484d;
}


.homeb-origin-phone .homeb-origin-instagram-profile a {
    display: inline-block;

    margin-bottom: 16px;

    font-size: 12px;
    font-weight: 700;

    color: #315b88;
    text-decoration: none;
}


.homeb-origin-phone
.homeb-origin-instagram
.homeb-origin-main-action {
    width: 100%;
    min-height: 38px;

    padding: 9px 14px;

    border: 0;
    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   WHATSAPP – MOBILE
   ========================================================= */

.homeb-origin-phone .homeb-origin-whatsapp {
    min-height: 465px;

    background:
        linear-gradient(
            rgba(245, 240, 232, 0.94),
            rgba(245, 240, 232, 0.94)
        );

    border: 0;
    border-radius: 0;
    box-shadow: none;
}


.homeb-origin-phone .homeb-origin-whatsapp-head {
    min-height: 58px;
    padding: 9px 12px;

    display: flex;
    align-items: center;
    gap: 9px;

    background: #f7f7f7;
    border-bottom: 1px solid rgba(17, 19, 21, 0.08);
}


.homeb-origin-phone .homeb-origin-whatsapp-head::before {
    content: "‹";

    margin-right: 1px;

    font-size: 25px;
    font-weight: 400;
    line-height: 1;

    color: #111315;
}


.homeb-origin-phone .homeb-origin-whatsapp-head strong {
    display: block;

    font-size: 12px;
    line-height: 1.2;

    color: #111315;
}


.homeb-origin-phone .homeb-origin-whatsapp-head small {
    display: block;

    margin-top: 2px;

    font-size: 9px;

    color: #777b80;
}


.homeb-origin-phone .homeb-origin-chat {
    padding: 18px 12px 42px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}


.homeb-origin-phone .homeb-origin-chat-bubble {
    position: relative;

    max-width: 84%;

    padding: 9px 10px 17px;

    border-radius: 10px;

    font-size: 11px;
    line-height: 1.45;

    box-shadow: 0 1px 2px rgba(17, 19, 21, 0.08);
}


.homeb-origin-phone .homeb-origin-chat-bubble.customer {
    align-self: flex-start;

    background: #ffffff;
    color: #222426;

    border-top-left-radius: 3px;
}


.homeb-origin-phone .homeb-origin-chat-bubble.studio {
    align-self: flex-end;

    background: #e6f5dc;
    color: #222426;

    border-top-right-radius: 3px;
}


.homeb-origin-phone .homeb-origin-chat-bubble small {
    position: absolute;

    right: 8px;
    bottom: 4px;

    font-size: 8px;

    color: #74787b;
}


.homeb-origin-phone .homeb-origin-chat-bubble button {
    display: block;

    width: 100%;
    margin-top: 9px;
    padding: 8px 10px;

    border: 0;
    border-top: 1px solid rgba(17, 19, 21, 0.08);
    background: transparent;

    font-size: 10px;
    font-weight: 700;

    color: var(--gold, #c9902e);

    cursor: pointer;
}


/* =========================================================
   FACEBOOK – MOBILE
   ========================================================= */

.homeb-origin-phone .homeb-origin-facebook {
    min-height: 465px;

    background: #ffffff;

    border: 0;
    border-radius: 0;
    box-shadow: none;
}


.homeb-origin-phone .homeb-origin-facebook::before {
    content: "facebook";

    display: flex;
    align-items: center;

    height: 45px;
    padding: 0 14px;

    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.04em;

    color: #1877f2;
    background: #ffffff;

    border-bottom: 1px solid #eeeeee;
}


.homeb-origin-phone .homeb-origin-facebook-cover {
    position: relative;

    height: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eee8dd 0%,
            #f8f5ef 55%,
            #e7dcc7 100%
        );
}


.homeb-origin-phone .homeb-origin-facebook-cover span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;

    color: #393531;
}


.homeb-origin-phone .homeb-origin-facebook-profile {
    position: relative;

    padding: 13px 14px 8px;

    display: flex;
    align-items: center;
    gap: 11px;
}


.homeb-origin-phone .homeb-origin-facebook-profile strong {
    display: block;

    font-size: 14px;
    line-height: 1.25;

    color: #111315;
}


.homeb-origin-phone .homeb-origin-facebook-profile small {
    display: block;

    margin-top: 3px;

    font-size: 10px;

    color: #6c7075;
}


.homeb-origin-phone
.homeb-origin-facebook
.homeb-origin-main-action {
    width: calc(100% - 28px);
    min-height: 38px;

    margin: 8px 14px 30px;
    padding: 9px 14px;

    border: 0;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   SOCIAL AVATAR INSIDE PHONE
   ========================================================= */

.homeb-origin-phone .homeb-origin-social-avatar {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;

    color: #ffffff;
    background: #26282a;
}


.homeb-origin-phone .homeb-origin-social-avatar.large {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    font-size: 12px;
}


/* =========================================================
   MESSAGE UNDER PHONE
   ========================================================= */

.homeb-booking-origin-screen .homeb-origin-message {
    width: min(100%, 360px);

    margin: 16px auto 0;
}


.homeb-booking-origin-screen .homeb-origin-message p {
    margin: 0;
}


/* =========================================================
   SOURCE SCREEN TRANSITIONS
   ========================================================= */

.homeb-booking-origin-screen {
    display: none;
}


.homeb-booking-origin-screen.active {
    display: block;

    animation: homebOriginPhoneIn 0.28s ease;
}


@keyframes homebOriginPhoneIn {

    from {
        opacity: 0;
        transform: translateY(7px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   HOVER / INTERACTION
   ========================================================= */

.homeb-origin-phone button {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}


.homeb-origin-phone button:hover {
    transform: translateY(-1px);
}


.homeb-origin-phone button:active {
    transform: translateY(0);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .homeb-origin-phone {
        width: min(100%, 320px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .homeb-origin-phone {
        width: min(100%, 310px);

        border-radius: 30px;
    }


    .homeb-origin-phone-screen {
        min-height: 470px;
        border-radius: 23px;
    }


    .homeb-origin-phone .homeb-origin-instagram,
    .homeb-origin-phone .homeb-origin-whatsapp,
    .homeb-origin-phone .homeb-origin-facebook {
        min-height: 435px;
    }


    .homeb-booking-origin-screen .homeb-origin-message {
        margin-top: 13px;
    }

}

/* =====================================================
   CONCIERGE SEND BUTTON – LOADING
   ===================================================== */

[data-homeb-ai-send].loading {
    cursor: wait;
}

/* Drehender Loader */
.ai-send-spinner {
    display: inline-block;

    width: 16px;
    height: 16px;

    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;

    vertical-align: middle;

    animation: aiSendSpin 0.7s linear infinite;
}

/* Rotation */
@keyframes aiSendSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   REGISTER – FEATURE VERGLEICH
   STUDIO-SICHT / TECHNIK-SICHT
   ========================================================= */

.register-feature-compare {
    margin-top: 72px;
    padding-top: 64px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* =========================================================
   VIEW TABS
   ========================================================= */

.feature-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 760px;
    margin: 32px auto 42px;
}

.feature-view-tab {
    appearance: none;
    width: 100%;
    padding: 18px 20px;

    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;

    background: #fff;
    cursor: pointer;

    text-align: left;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.feature-view-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(176, 139, 62, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.feature-view-tab.active {
    border-color: rgba(176, 139, 62, 0.65);
    background: rgba(176, 139, 62, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.feature-view-tab strong {
    display: block;
    margin-bottom: 5px;

    font-size: 16px;
    line-height: 1.3;
}

.feature-view-tab span {
    display: block;

    font-size: 13px;
    line-height: 1.45;
    opacity: 0.68;
}


/* =========================================================
   VIEW CONTENT
   ========================================================= */

.feature-view-content {
    width: 100%;
}

.feature-view-panel {
    width: 100%;
}

.feature-view-panel[hidden] {
    display: none !important;
}


/* =========================================================
   VIEW HEADER
   ========================================================= */

.feature-view-head {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

.feature-view-head .eyebrow {
    display: inline-block;
    margin-bottom: 10px;
}

.feature-view-head h3 {
    margin: 0 0 12px;

    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
}

.feature-view-head p {
    max-width: 680px;
    margin: 0 auto;

    font-size: 15px;
    line-height: 1.65;
    opacity: 0.72;
}


/* =========================================================
   FEATURE GROUP GRID
   ========================================================= */

.feature-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


/* =========================================================
   FEATURE GROUP CARD
   ========================================================= */

.feature-group-card {
    padding: 26px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;

    background: #fff;

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.035);
}


/* =========================================================
   GROUP HEADER
   ========================================================= */

.feature-group-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    margin-bottom: 22px;
}

.feature-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: rgba(176, 139, 62, 0.10);

    font-size: 20px;
    line-height: 1;
}

.feature-group-head h4 {
    margin: 1px 0 5px;

    font-size: 17px;
    line-height: 1.3;
}

.feature-group-head p {
    margin: 0;

    font-size: 13px;
    line-height: 1.5;
    opacity: 0.65;
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.feature-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-group-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 10px 0;

    border-top: 1px solid rgba(0, 0, 0, 0.055);

    font-size: 14px;
    line-height: 1.45;
}

.feature-group-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.feature-check {
    flex: 0 0 auto;

    margin-top: 1px;

    font-weight: 700;
    color: #a17d32;
}

.feature-group-list li > span:last-child {
    min-width: 0;
}

.feature-group-list small {
    display: block;
    margin-top: 3px;

    font-size: 12px;
    line-height: 1.45;
    opacity: 0.58;
}


/* =========================================================
   REGISTER PLAN FOOTER
   ========================================================= */

.register-feature-compare + .register-plan-footer {
    margin-top: 48px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {

    .register-feature-compare {
        margin-top: 52px;
        padding-top: 48px;
    }

    .feature-groups {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {

    .feature-view-tabs {
        grid-template-columns: 1fr;
        gap: 10px;

        margin-top: 26px;
        margin-bottom: 34px;
    }

    .feature-view-tab {
        padding: 16px 17px;
    }

    .feature-group-card {
        padding: 20px;
        border-radius: 16px;
    }

    .feature-group-head {
        gap: 12px;
    }

    .feature-group-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;

        font-size: 18px;
    }

}

/* =========================================================
   ONBOARDING LINKS – SECTION HIERARCHY
   ========================================================= */

.onboarding-link-section {
    margin-top: 34px;
    padding-top: 30px;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.onboarding-link-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.onboarding-link-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.onboarding-link-section-head > div {
    min-width: 0;
}

.onboarding-link-section-head strong {
    display: block;

    margin-bottom: 7px;

    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.onboarding-link-section-head .onboarding-link-explain {
    max-width: 640px;
    margin: 0;

    font-size: 14px;
    line-height: 1.55;

    opacity: 0.7;
}


/* =========================================================
   STATUS BADGE – WICHTIG / OPTIONAL
   ========================================================= */

.onboarding-link-section-head > span {
    flex: 0 0 auto;

    padding: 5px 9px;

    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);

    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    opacity: 0.72;
}


/* =========================================================
   RECHTLICHES – HERVORHEBEN
   ========================================================= */

.onboarding-link-section:first-of-type {
    padding: 24px;

    border: 1px solid rgba(176, 139, 62, 0.22);
    border-radius: 18px;

    background: rgba(176, 139, 62, 0.035);
}

.onboarding-link-section:first-of-type
.onboarding-link-section-head strong {
    font-size: 23px;
}

.onboarding-link-section:first-of-type
.onboarding-link-section-head > span {
    border-color: rgba(176, 139, 62, 0.35);
    background: rgba(176, 139, 62, 0.08);
}


/* =========================================================
   LEGAL HINT
   ========================================================= */

.onboarding-legal-hint {
    margin: 22px 0 26px;
    padding: 20px;

    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);

    background: #fff;
}

.onboarding-legal-hint > strong {
    display: block;

    margin-bottom: 7px;

    font-size: 16px;
    line-height: 1.3;
}

.onboarding-legal-hint > p {
    margin: 0 0 16px;

    font-size: 13px;
    line-height: 1.55;

    opacity: 0.72;
}


/* =========================================================
   FELDER INNERHALB DER BEREICHE
   ========================================================= */

.onboarding-link-section .field + .field {
    margin-top: 18px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .onboarding-link-section {
        margin-top: 28px;
        padding-top: 24px;
    }

    .onboarding-link-section-head {
        gap: 12px;
    }

    .onboarding-link-section-head strong {
        font-size: 18px;
    }

    .onboarding-link-section:first-of-type {
        padding: 18px;
    }

    .onboarding-link-section:first-of-type
    .onboarding-link-section-head strong {
        font-size: 21px;
    }

}

/* =========================================================
   ONBOARDING LEGAL INFO
   ========================================================= */

.onboarding-legal-info {
    margin-top: 20px;
}

.onboarding-legal-info-title {
    display: block;
    margin-bottom: 8px;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.onboarding-legal-info > p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    opacity: 0.75;
}


/* =========================================================
   LEGAL OPTIONS
   ========================================================= */

.onboarding-legal-options {
    margin-top: 22px;
}

.onboarding-legal-options-title {
    display: block;
    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 700;
}


/* einzelne Auswahl / Erklärung */

.onboarding-legal-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 0;

    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.onboarding-legal-option:first-of-type {
    border-top: 0;
}


/* Icon */

.onboarding-legal-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;
    width: 34px;
    height: 34px;

    border-radius: 10px;

    background: rgba(176, 139, 62, 0.10);

    font-size: 15px;
    font-weight: 700;
}


/* Text */

.onboarding-legal-option > div {
    min-width: 0;
}

.onboarding-legal-option strong {
    display: block;
    margin-bottom: 4px;

    font-size: 14px;
    line-height: 1.35;
}

.onboarding-legal-option p {
    margin: 0;

    font-size: 13px;
    line-height: 1.55;

    opacity: 0.68;
}


/* =========================================================
   LEGAL TIP
   ========================================================= */

.onboarding-legal-tip {
    margin-top: 18px;
    padding: 14px 16px;

    border-radius: 12px;

    background: rgba(0, 0, 0, 0.035);
}

.onboarding-legal-tip strong {
    display: block;
    margin-bottom: 4px;

    font-size: 13px;
    font-weight: 700;
}

.onboarding-legal-tip p {
    margin: 0;

    font-size: 12px;
    line-height: 1.55;

    opacity: 0.68;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .onboarding-legal-info-title {
        font-size: 17px;
    }

    .onboarding-legal-option {
        gap: 10px;
    }

    .onboarding-legal-option-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

}
/* =========================================================
   AGB FLOW
   ========================================================= */

.onboarding-agb-flow {
    margin-top: 24px;
    padding: 24px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;

    background: #fff;
}


/* HEADER */

.onboarding-agb-flow-title {
    max-width: 650px;
    margin-bottom: 24px;
}

.onboarding-agb-flow-title strong {
    display: block;

    margin-bottom: 6px;

    font-size: 18px;
    line-height: 1.3;
}

.onboarding-agb-flow-title p {
    margin: 0;

    font-size: 13px;
    line-height: 1.55;

    opacity: 0.7;
}


/* =========================================================
   BOOKING PREVIEW
   ========================================================= */

.agb-flow-booking {
    display: flex;
    justify-content: center;
}

.agb-flow-window {
    width: 100%;
    max-width: 390px;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 15px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

.agb-flow-window-head {
    padding: 10px 14px;

    background: rgba(0, 0, 0, 0.035);

    font-size: 11px;
    font-weight: 700;

    opacity: 0.65;
}

.agb-flow-service {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 18px;
}

.agb-flow-service strong {
    font-size: 16px;
}

.agb-flow-service span {
    font-size: 12px;
    opacity: 0.65;
}


/* CHECKBOX */

.agb-flow-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 18px 16px;
    padding: 11px 12px;

    border-radius: 10px;

    background: rgba(176, 139, 62, 0.06);

    font-size: 12px;
}

.agb-flow-check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius: 5px;

    background: rgba(176, 139, 62, 0.14);

    font-weight: 700;
}

.agb-flow-checkbox strong {
    text-decoration: underline;
    cursor: default;
}


/* BUTTON */

.agb-flow-book-button {
    width: calc(100% - 36px);

    margin: 0 18px 18px;
    padding: 11px 14px;

    border: 0;
    border-radius: 10px;

    background: #111;

    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   ARROW
   ========================================================= */

.agb-flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 16px 0;
}

.agb-flow-arrow span {
    font-size: 24px;
    line-height: 1;
}

.agb-flow-arrow small {
    margin-top: 4px;

    font-size: 11px;
    opacity: 0.55;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.agb-flow-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.agb-flow-option {
    position: relative;

    padding: 20px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 15px;

    background: rgba(0, 0, 0, 0.015);
}

.agb-flow-option-mapresto {
    border-color: rgba(176, 139, 62, 0.28);
    background: rgba(176, 139, 62, 0.04);
}

.agb-flow-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 12px;

    border-radius: 10px;

    background: rgba(176, 139, 62, 0.10);

    font-weight: 700;
}

.agb-flow-option-number {
    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    opacity: 0.5;
}

.agb-flow-option > strong {
    display: block;

    margin-bottom: 6px;

    font-size: 15px;
    line-height: 1.35;
}

.agb-flow-option > p {
    margin: 0 0 16px;

    font-size: 12px;
    line-height: 1.55;

    opacity: 0.68;
}


/* =========================================================
   MINI WEBSITE
   ========================================================= */

.agb-flow-mini-browser {
    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;

    background: #fff;
}

.agb-flow-browser-bar {
    display: flex;
    gap: 4px;

    padding: 7px 9px;

    background: rgba(0, 0, 0, 0.035);
}

.agb-flow-browser-bar span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.18);
}

.agb-flow-browser-url {
    padding: 7px 10px;

    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    font-size: 9px;

    opacity: 0.55;
}

.agb-flow-browser-content {
    padding: 18px 12px;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   MAPRESTO PREVIEW
   ========================================================= */

.agb-flow-mapresto-preview {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 15px;

    border: 1px solid rgba(176, 139, 62, 0.18);
    border-radius: 10px;

    background: #fff;
}

.agb-flow-mapresto-logo {
    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 700;

    opacity: 0.62;
}

.agb-flow-mapresto-preview strong {
    font-size: 11px;
}

.agb-flow-mapresto-preview > span:last-child {
    font-size: 10px;
    opacity: 0.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .onboarding-agb-flow {
        padding: 18px;
    }

    .agb-flow-options {
        grid-template-columns: 1fr;
    }

}

.homeb-feature-panel {
    display: none;
}

.homeb-feature-panel.active {
    display: block;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-body {
    margin: 0;

    background: #f7f6f3;

    color: #171717;
}


.mapresto-dashboard {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);

    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.dashboard-sidebar {
    position: sticky;
    top: 0;

    display: flex;
    flex-direction: column;

    height: 100vh;

    padding: 28px 18px 20px;

    border-right: 1px solid rgba(0, 0, 0, 0.06);

    background: #fff;
}


.dashboard-brand {
    padding: 0 12px 28px;

    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.dashboard-brand span {
    color: #b28a3f;
}


.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-nav a {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 12px;

    border-radius: 10px;

    color: inherit;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    opacity: 0.72;
}

.dashboard-nav a > span {
    width: 21px;

    text-align: center;
}

.dashboard-nav a:hover,
.dashboard-nav a.active {
    background: rgba(178, 138, 63, 0.08);

    opacity: 1;
}

.dashboard-nav a.active {
    color: #8d6725;
}


.dashboard-sidebar-bottom {
    margin-top: auto;
}


.dashboard-concierge-button {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 13px;

    border: 1px solid rgba(178, 138, 63, 0.2);
    border-radius: 12px;

    background: rgba(178, 138, 63, 0.05);

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.dashboard-concierge-button > span {
    font-size: 18px;
}

.dashboard-concierge-button strong,
.dashboard-concierge-button small {
    display: block;
}

.dashboard-concierge-button strong {
    font-size: 12px;
}

.dashboard-concierge-button small {
    margin-top: 2px;

    font-size: 10px;

    opacity: 0.6;
}


.dashboard-settings-link {
    display: block;

    margin-top: 12px;
    padding: 10px 12px;

    color: inherit;
    text-decoration: none;

    font-size: 12px;

    opacity: 0.6;
}


/* =========================================================
   MAIN
   ========================================================= */

.dashboard-main {
    min-width: 0;

    padding: 0 34px 50px;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 82px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-eyebrow {
    display: block;

    margin-bottom: 2px;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    opacity: 0.45;
}

.dashboard-topbar h1 {
    margin: 0;

    font-size: 18px;
}


.dashboard-topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dashboard-icon-button {
    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: #fff;

    cursor: pointer;
}


.dashboard-user {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dashboard-user > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: rgba(178, 138, 63, 0.12);

    font-size: 12px;
    font-weight: 700;
}

.dashboard-user strong,
.dashboard-user small {
    display: block;
}

.dashboard-user strong {
    font-size: 12px;
}

.dashboard-user small {
    margin-top: 2px;

    font-size: 10px;

    opacity: 0.5;
}


/* =========================================================
   WELCOME
   ========================================================= */

.dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    padding: 34px 0 26px;
}

.dashboard-date {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 700;

    opacity: 0.48;
}

.dashboard-welcome h2 {
    margin: 0 0 5px;

    font-size: 30px;
    letter-spacing: -0.035em;
}

.dashboard-welcome p {
    margin: 0;

    font-size: 13px;

    opacity: 0.62;
}


/* =========================================================
   KPIS
   ========================================================= */

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-bottom: 18px;
}

.dashboard-kpi-card {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 18px;

    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 15px;

    background: #fff;
}

.dashboard-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 39px;
    width: 39px;
    height: 39px;

    border-radius: 11px;

    background: rgba(178, 138, 63, 0.08);

    font-size: 12px;
    font-weight: 700;
}

.dashboard-kpi-card small,
.dashboard-kpi-card strong,
.dashboard-kpi-card div > span {
    display: block;
}

.dashboard-kpi-card small {
    margin-bottom: 3px;

    font-size: 10px;

    opacity: 0.5;
}

.dashboard-kpi-card strong {
    font-size: 18px;
}

.dashboard-kpi-card div > span {
    margin-top: 3px;

    font-size: 10px;

    opacity: 0.55;
}

.dashboard-kpi-card .positive {
    color: #49865c;

    opacity: 1;
}


/* =========================================================
   PANELS
   ========================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
    gap: 18px;
}

.dashboard-panel {
    padding: 22px;

    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 17px;

    background: #fff;
}

.dashboard-panel-large {
    grid-row: span 2;
}

.dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;
}

.dashboard-panel-head h3 {
    margin: 2px 0 0;

    font-size: 18px;
}

.dashboard-panel-head > a {
    color: inherit;

    font-size: 11px;
    text-decoration: none;

    opacity: 0.55;
}

.dashboard-panel-eyebrow {
    display: block;

    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    opacity: 0.46;
}


/* =========================================================
   APPOINTMENTS
   ========================================================= */

.dashboard-appointment {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 14px;

    padding: 13px 0;

    border-top: 1px solid rgba(0, 0, 0, 0.055);
}

.dashboard-appointment:first-child {
    border-top: 0;
}

.dashboard-appointment.next {
    margin: 4px -10px;
    padding: 14px 10px;

    border-top-color: transparent;
    border-radius: 11px;

    background: rgba(178, 138, 63, 0.055);
}

.dashboard-appointment.done {
    opacity: 0.58;
}

.dashboard-appointment-time strong,
.dashboard-appointment-time small {
    display: block;
}

.dashboard-appointment-time strong {
    font-size: 13px;
}

.dashboard-appointment-time small {
    margin-top: 2px;

    font-size: 9px;

    opacity: 0.5;
}


.dashboard-appointment-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: rgba(178, 138, 63, 0.09);

    font-size: 10px;
    font-weight: 700;
}

.dashboard-avatar.large {
    width: 56px;
    height: 56px;

    font-size: 16px;
}

.dashboard-appointment-person strong,
.dashboard-appointment-person small {
    display: block;
}

.dashboard-appointment-person strong {
    font-size: 12px;
}

.dashboard-appointment-person small {
    margin-top: 2px;

    font-size: 10px;

    opacity: 0.52;
}


.dashboard-appointment-status {
    font-size: 9px;

    white-space: nowrap;
}

.status-next {
    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(178, 138, 63, 0.1);

    color: #8d6725;

    font-weight: 700;
}

.status-done {
    color: #558260;
}

.dashboard-more-button {
    border: 0;
    background: transparent;

    cursor: pointer;

    opacity: 0.45;
}


/* =========================================================
   NEXT CUSTOMER
   ========================================================= */

.dashboard-next-customer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dashboard-next-customer > strong {
    margin-top: 12px;

    font-size: 18px;
}

.dashboard-next-customer > span:not(.dashboard-avatar) {
    margin-top: 3px;

    font-size: 12px;

    opacity: 0.68;
}

.dashboard-next-customer > small {
    margin-top: 3px;

    opacity: 0.45;
}

.dashboard-next-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    margin-top: 20px;
}


/* =========================================================
   REVENUE
   ========================================================= */

.dashboard-revenue-number strong,
.dashboard-revenue-number span {
    display: block;
}

.dashboard-revenue-number strong {
    font-size: 26px;
}

.dashboard-revenue-number span {
    margin-top: 3px;

    font-size: 10px;

    color: #518362;
}

.dashboard-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;

    height: 120px;

    margin-top: 20px;
}

.dashboard-chart-bars > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;

    height: 100%;
}

.dashboard-chart-bars span {
    height: var(--height);

    border-radius: 5px 5px 2px 2px;

    background: rgba(178, 138, 63, 0.18);
}

.dashboard-chart-bars .current span {
    background: rgba(178, 138, 63, 0.55);
}

.dashboard-chart-bars small {
    margin-top: 6px;

    text-align: center;

    font-size: 8px;

    opacity: 0.5;
}


/* =========================================================
   STOCK
   ========================================================= */

.dashboard-stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 0;

    border-top: 1px solid rgba(0, 0, 0, 0.055);
}

.dashboard-stock-item:first-child {
    border-top: 0;
}

.dashboard-stock-item strong,
.dashboard-stock-item small {
    display: block;
}

.dashboard-stock-item strong {
    font-size: 12px;
}

.dashboard-stock-item small {
    margin-top: 2px;

    font-size: 9px;

    opacity: 0.5;
}

.dashboard-stock-item > span {
    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(178, 138, 63, 0.08);

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   CONCIERGE
   ========================================================= */

.dashboard-concierge-card {
    position: relative;

    overflow: hidden;

    border-color: rgba(178, 138, 63, 0.17);

    background:
        linear-gradient(
            135deg,
            rgba(178, 138, 63, 0.055),
            #fff
        );
}

.dashboard-concierge-star {
    position: absolute;
    top: 15px;
    right: 18px;

    font-size: 21px;

    opacity: 0.25;
}

.dashboard-concierge-card h3 {
    margin: 4px 0 5px;

    font-size: 19px;
}

.dashboard-concierge-card p {
    margin: 0;

    font-size: 11px;
    line-height: 1.55;

    opacity: 0.62;
}

.dashboard-concierge-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 16px 0;
}

.dashboard-concierge-suggestions button {
    padding: 9px 10px;

    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9px;

    background: #fff;

    font: inherit;
    font-size: 10px;
    text-align: left;

    cursor: pointer;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .mapresto-dashboard {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        display: none;
    }

    .dashboard-main {
        padding-left: 20px;
        padding-right: 20px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel-large {
        grid-row: auto;
    }

}


@media (max-width: 600px) {

    .dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-appointment {
        grid-template-columns: 56px 1fr;
    }

    .dashboard-appointment-status,
    .dashboard-more-button {
        display: none;
    }

}

.dashboard-logout-link {
    display: block;

    margin-top: 4px;
    padding: 10px 12px;

    border-radius: 9px;

    color: inherit;
    text-decoration: none;

    font-size: 12px;

    opacity: 0.55;
}

.dashboard-logout-link:hover {
    background: rgba(0, 0, 0, 0.04);

    opacity: 0.9;
}

/* =========================================================
   ONBOARDING CUSTOMER IMPORT
   ========================================================= */

.onboarding-import-card {
    padding: 22px;

    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;

    background: #fff;
}


.onboarding-import-card-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-bottom: 18px;
}


.onboarding-import-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
    width: 38px;
    height: 38px;

    border-radius: 11px;

    background: rgba(176, 139, 62, 0.09);

    font-weight: 700;
}


.onboarding-import-card-head strong {
    display: block;

    margin-bottom: 4px;

    font-size: 15px;
}


.onboarding-import-card-head p {
    margin: 0;

    font-size: 12px;
    line-height: 1.55;

    opacity: 0.65;
}


/* DROPZONE */

.onboarding-import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 25px 18px;

    border: 1px dashed rgba(176, 139, 62, 0.38);
    border-radius: 13px;

    background: rgba(176, 139, 62, 0.025);

    text-align: center;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.onboarding-import-dropzone:hover {
    border-color: rgba(176, 139, 62, 0.75);

    background: rgba(176, 139, 62, 0.055);
}


.onboarding-import-drop-icon {
    margin-bottom: 9px;

    font-size: 24px;

    opacity: 0.55;
}


.onboarding-import-dropzone strong {
    margin-bottom: 4px;

    font-size: 14px;
}


.onboarding-import-dropzone > span:not(.onboarding-import-drop-icon) {
    font-size: 12px;

    opacity: 0.65;
}


.onboarding-import-dropzone small {
    margin-top: 7px;

    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;

    opacity: 0.42;
}


.onboarding-import-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}


/* SELECTED FILE */

.onboarding-import-selected {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 12px;
    padding: 11px 13px;

    border-radius: 10px;

    background: rgba(73, 134, 92, 0.07);
}


.onboarding-import-selected[hidden] {
    display: none;
}


.onboarding-import-selected > span {
    color: #49865c;

    font-weight: 700;
}


.onboarding-import-selected strong,
.onboarding-import-selected small {
    display: block;
}


.onboarding-import-selected strong {
    font-size: 12px;
}


.onboarding-import-selected small {
    margin-top: 2px;

    font-size: 9px;

    opacity: 0.55;
}


/* FIELDS */

.onboarding-import-fields {
    margin-top: 20px;
    padding: 18px;

    border-radius: 14px;

    background: rgba(0, 0, 0, 0.025);
}


.onboarding-import-fields-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 13px;
}


.onboarding-import-fields-head strong {
    font-size: 13px;
}


.onboarding-import-fields-head span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    opacity: 0.45;
}


.onboarding-import-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}


.onboarding-import-field-grid span {
    font-size: 11px;

    opacity: 0.72;
}


/* HELP */

.onboarding-import-help {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-top: 18px;
    padding: 14px;

    border: 1px solid rgba(176, 139, 62, 0.13);
    border-radius: 12px;

    background: rgba(176, 139, 62, 0.035);
}


.onboarding-import-help > span {
    font-size: 16px;
}


.onboarding-import-help strong {
    display: block;

    margin-bottom: 3px;

    font-size: 11px;
}


.onboarding-import-help p {
    margin: 0;

    font-size: 10px;
    line-height: 1.5;

    opacity: 0.62;
}


/* ACTIONS */

.onboarding-import-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}


.onboarding-skip-link {
    color: inherit;

    font-size: 11px;
    text-decoration: none;

    opacity: 0.55;
}


.onboarding-skip-link:hover {
    opacity: 0.9;
}


.onboarding-submit:disabled {
    cursor: not-allowed;

    opacity: 0.4;
}


@media (max-width: 620px) {

    .onboarding-import-field-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-import-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .onboarding-skip-link {
        text-align: center;
    }

}

/* =========================================================
   ONBOARDING - APPOINTMENT IMPORT
   ========================================================= */


/* Alternative zum vollständigen Terminimport */

.onboarding-appointment-block-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-top: 18px;
    padding: 18px;

    border: 1px solid rgba(176, 139, 62, 0.16);
    border-radius: 14px;

    background: rgba(176, 139, 62, 0.035);
}


.onboarding-appointment-block-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
    width: 38px;
    height: 38px;

    border-radius: 11px;

    background: rgba(176, 139, 62, 0.09);

    font-size: 17px;
}


.onboarding-appointment-block-content {
    flex: 1;
    min-width: 0;
}


.onboarding-appointment-block-content strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
}


.onboarding-appointment-block-content p {
    margin: 0 0 10px;

    font-size: 11px;
    line-height: 1.55;

    opacity: 0.64;
}


.onboarding-appointment-block-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #8d6725;

    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}


.onboarding-appointment-block-action:hover {
    text-decoration: underline;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .onboarding-appointment-block-option {
        padding: 15px;
    }

}

/* =========================================================
   MAPRESTO HOMEPAGE B
   READY STEP: CUSTOMER + CALENDAR IMPORT PREVIEW
   ========================================================= */

.homeb-onboarding-transfer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
}

.homeb-onboarding-transfer-card {
    padding: 14px;
    border: 1px solid rgba(150, 120, 70, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
}

.homeb-onboarding-transfer-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.homeb-onboarding-transfer-head > div {
    min-width: 0;
}

.homeb-onboarding-transfer-head small,
.homeb-onboarding-transfer-head strong {
    display: block;
}

.homeb-onboarding-transfer-head small {
    margin-bottom: 2px;
    opacity: 0.62;
    font-size: 0.72rem;
}

.homeb-onboarding-transfer-head strong {
    line-height: 1.25;
}

.homeb-onboarding-transfer-card > p {
    margin: 10px 0 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 0.78;
}

.homeb-onboarding-transfer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(150, 120, 70, 0.28);
    border-radius: 12px;
    font-weight: 700;
}

.homeb-onboarding-calendar-icon {
    font-size: 0.82rem;
}

.homeb-onboarding-transfer-demo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.homeb-onboarding-transfer-options {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.homeb-onboarding-transfer-options span,
.homeb-onboarding-calendar-sources span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.045);
    font-size: 0.7rem;
    line-height: 1.25;
}

.homeb-onboarding-calendar-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.homeb-onboarding-transfer-note {
    display: block;
    margin: 2px 0 14px;
    opacity: 0.62;
}


/* ---------------------------------------------------------
   DEMO QR
   Kein scanbarer QR-Code.
   Im echten Onboarding kommt hier später der echte Token-QR.
   --------------------------------------------------------- */

.homeb-onboarding-qr-demo {
    position: relative;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 9px;
    background: #fff;
}

.homeb-onboarding-qr-demo .qr-a,
.homeb-onboarding-qr-demo .qr-b,
.homeb-onboarding-qr-demo .qr-c {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 4px solid currentColor;
}

.homeb-onboarding-qr-demo .qr-a {
    top: 5px;
    left: 5px;
}

.homeb-onboarding-qr-demo .qr-b {
    top: 5px;
    right: 5px;
}

.homeb-onboarding-qr-demo .qr-c {
    bottom: 5px;
    left: 5px;
}

.homeb-onboarding-qr-demo i {
    position: relative;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 1px;
    background: currentColor;
    opacity: 0.78;
}

.homeb-onboarding-qr-demo i:nth-of-type(3n) {
    transform: translateX(15px);
}

.homeb-onboarding-qr-demo i:nth-of-type(4n) {
    transform: translateY(15px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .homeb-onboarding-transfer {
        grid-template-columns: 1fr;
    }

}