/* ==========================================================================
   custom-home-design.hbs — single, consolidated responsive layer.

   All section base styles live inline in the .hbs file. Every responsive
   adjustment for this page lives here, organised top-down by breakpoint.

   Breakpoints (desktop-first, matching the inline base):
     <= 1024px  laptops / small desktops
     <=  880px  tablets landscape
     <=  768px  tablets portrait
     <=  540px  phones
     <=  380px  small phones

   No !important. Specificity matches the inline <style> blocks, and this
   file loads after them so it naturally wins for matching selectors.
   ========================================================================== */


/* ============================================================
   Base styles for layout classes that replaced inline grids
   in the .hbs (kept here so the .hbs has only semantic markup).
   ============================================================ */

.zb-craft__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 2fr 1fr 1fr;
}

.zb-craft__tile {
    padding: 0;
    overflow: hidden;
}

.zb-craft__tile--feature {
    grid-row: span 2;
    min-height: 480px;
}

.zb-craft__feature-media {
    aspect-ratio: 16/10;
    background: var(--zb-surface-sunken);
    overflow: hidden;
}

.zb-craft__feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zb-craft__feature-body {
    padding: 28px;
}

.zb-craft__tile--split {
    grid-column: span 2;
    min-height: 232px;
}

.zb-craft__split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}

.zb-craft__split-media {
    background: var(--zb-surface-sunken);
    overflow: hidden;
}

.zb-craft__split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zb-craft__split-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zb-bigquote__inner {
    display: grid;
    gap: 56px;
    grid-template-columns: 240px 1fr;
    align-items: center;
}

.zb-bigquote__avatar {
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zb-blue), var(--zb-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}


/* ============================================================
   Laptop / small desktop (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .zb-hero__inner {
        max-width: 700px;
    }

    .zb-section {
        padding-block: clamp(64px, 8vw, 96px);
    }

    /* Pricing — 2 columns at this width so prices stay readable */
    .zb-price__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Craft bento: keep three columns until tablet */
}


/* ============================================================
   Tablet landscape (<= 880px)
   ============================================================ */
@media (max-width: 880px) {
    .zb-hero__inner {
        max-width: 600px;
    }

    .zb-container {
        padding-inline: 20px;
    }

    .zb-section {
        padding-block: clamp(56px, 9vw, 80px);
    }

    /* ---- Side dot nav ---- */
    .zb-sidenav {
        display: none;
    }

    /* ---- Hero ---- */
    .zb-h1 {
        font-size: clamp(40px, 9vw, 72px);
    }

    .zb-h2 {
        font-size: clamp(28px, 5.5vw, 44px);
    }

    .zb-hero {
        min-height: clamp(480px, 70vh, 720px);
        padding-block: clamp(64px, 9vh, 96px);
    }

    .zb-hero__inner {
        padding-inline: 0;
    }

    /* hide the extra cursor decorations; keep the 4 main ones */
    .zb-cursor--lime,
    .zb-cursor--mid-right,
    .zb-cursor--bot-mid,
    .zb-cursor--top-mid {
        display: none;
    }

    /* ---- Metrics bar ---- */
    .zb-metrics {
        padding-block: 40px;
        gap: 12px;
    }

    .zb-metric__num {
        font-size: clamp(22px, 5.2vw, 30px);
    }

    .zb-metric__label {
        font-size: 11px;
    }

    /* ---- Tilted plane — drop the rotation, render as a stacked grid ---- */
    .zb-plane {
        position: relative;
        width: 100%;
        margin-inline: 0;
        height: auto;
        perspective: none;
    }

    .zb-plane__inner {
        position: relative;
        inset: auto;
        transform: none;
        transform-origin: initial;
    }

    .zb-plane__grid {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 12px;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .zb-plane__tile {
        height: 160px;
    }

    .zb-plane__tile--wide,
    .zb-plane__tile--tall {
        grid-column: auto;
        grid-row: auto;
    }

    .zb-plane__tile--label {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        padding: 16px;
    }

    .zb-plane::before,
    .zb-plane::after {
        display: none;
    }

    /* ---- Craft bento (2 columns at tablet, reset row/col spans) ---- */
    .zb-craft__grid {
        grid-template-columns: 1fr 1fr;
    }

    .zb-craft__tile--feature {
        grid-row: auto;
        min-height: 0;
    }

    .zb-craft__tile--split {
        grid-column: span 2;
    }

    .zb-craft__feature-media {
        aspect-ratio: 16/9;
    }

    /* ---- AI hub orbit ---- */
    .zb-ai-orbit {
        position: relative;
        aspect-ratio: auto;
        max-width: 100%;
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .zb-ai-node {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }

    /* ---- Steps ---- */
    .zb-step {
        padding: 24px;
    }

    .zb-step h3 {
        font-size: 18px;
    }

    /* ---- Stacked cards (now a vertical stack) ---- */
    .zb-stack {
        height: auto;
        display: grid;
        gap: 16px;
    }

    .zb-stack__card {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    /* ---- Bento (2 columns on tablet) ---- */
    .zb-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .zb-bento__hero {
        grid-column: span 2;
        grid-row: span 2;
    }

    .zb-bento--c2-r2 {
        grid-column: span 2;
        grid-row: span 1;
    }

    /* ---- Trusted tiles ---- */
    .zb-trusted {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ---- Showcase tabs ---- */
    .zb-show__panel.is-active {
        grid-template-columns: 1fr;
    }

    .zb-show__visual {
        border-left: 0;
        border-top: 1px solid var(--zb-border);
    }

    .zb-show__tabs {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    .zb-show__tab {
        font-size: 12px;
        padding: 8px 12px;
    }

    .zb-show__copy {
        padding: 28px 22px;
    }

    .zb-show__visual {
        padding: 16px;
    }

    /* ---- Compare card ---- */
    .zb-vs__grid {
        grid-template-columns: 1fr;
    }

    .zb-vs__col+.zb-vs__col {
        border-left: 0;
        border-top: 1px solid var(--zb-border);
    }

    .zb-vs__col {
        padding: 24px 20px;
    }

    .zb-vs__val {
        font-size: 14px;
    }

    /* ---- Testimonials ---- */
    .zb-quotes__grid {
        grid-template-columns: 1fr;
    }

    .zb-quote {
        padding: 28px 24px;
    }

    .zb-quote__who {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .zb-quote__source {
        margin-left: auto;
    }

    /* ---- Big quote ---- */
    .zb-bigquote__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
        justify-items: center;
    }

    .zb-bigquote__avatar {
        width: 160px;
        height: 160px;
        font-size: 52px;
    }

    /* ---- Journey ---- */
    .zb-journey {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ---- FAQ ---- */
    .zb-faq__wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .zb-faq__item summary {
        font-size: 15px;
        padding: 18px 0;
        gap: 12px;
    }

    .zb-faq__answer {
        font-size: 14px;
    }

    /* ---- Hero cursors get smaller and pull in ---- */
    .zb-cursor {
        font-size: 12px;
    }

    .zb-cursor__pill {
        padding: 4px 10px;
    }

    .zb-cursor--tony {
        top: -10%;
        left: 0;
    }

    .zb-cursor--rovo {
        top: -4%;
        right: 0;
    }

    .zb-cursor--kyah {
        bottom: -14%;
        left: 0;
    }

    .zb-cursor--you {
        bottom: -8%;
        right: 0;
    }

    /* ---- Buttons ---- */
    .zb-btn {
        padding: 11px 18px;
        font-size: 14px;
    }
}


/* ============================================================
   Tablet portrait (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    .zb-hero__inner {
        max-width: 500px;
    }

    /* Craft bento collapses to a single column at portrait */
    .zb-craft__grid {
        grid-template-columns: 1fr;
    }

    .zb-craft__tile--split {
        grid-column: auto;
    }

    .zb-craft__split-inner {
        grid-template-columns: 1fr;
    }

    .zb-craft__split-media {
        aspect-ratio: 16/9;
    }
}


/* ============================================================
   Phones (<= 540px)
   ============================================================ */
@media (max-width: 540px) {
    .zb-container {
        padding-inline: 16px;
    }

    .zb-section {
        padding-block: 52px;
    }

    /* ---- Hero ---- */
    .zb-hero {
        min-height: clamp(420px, 50vh, 600px);
        padding-block: clamp(56px, 8vh, 80px);
    }

    .zb-hero__inner {
        max-width: min(990px, 100% - 32px);
    }

    .zb-h1 {
        font-size: clamp(32px, 11vw, 52px);
        line-height: 1.05;
    }

    .zb-lead {
        font-size: 15px;
    }

    /* hide all decorative cursors — they crowd the title at this size */
    .zb-cursor {
        display: none;
    }

    /* stack hero CTA full-width */
    .zb-hero__cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 40px;
    }

    .zb-hero__cta .zb-btn {
        justify-content: center;
    }

    .zb-hero__login {
        text-align: center;
        padding: 6px 0;
    }

    /* ---- Metrics: 2 columns + last spans full ---- */
    .zb-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 20px 12px;
        padding-block: 32px;
    }

    .zb-metric:nth-child(3) {
        grid-column: span 2;
    }

    /* ---- Plane: single column of stacked tiles ---- */
    .zb-plane__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 16px;
    }

    .zb-plane__tile {
        height: 200px;
    }

    /* ---- AI rovo halo ---- */
    .zb-rovo {
        width: 80px;
        height: 80px;
    }

    /* ---- Bento: single column ---- */
    .zb-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .zb-bento__hero,
    .zb-bento--c2-r2 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .zb-bento__tile {
        padding: 22px;
        border-radius: 24px;
        min-height: 180px;
    }

    .zb-bento__hero p {
        font-size: clamp(22px, 6vw, 30px);
    }

    /* ---- Trusted tiles: 2 columns ---- */
    .zb-trusted {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* ---- Journey: 2 columns ---- */
    .zb-journey {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- Pricing: single column ---- */
    .zb-price__grid {
        grid-template-columns: 1fr;
    }

    .zb-plan {
        padding: 22px 20px;
    }

    .zb-plan__price .amt {
        font-size: 32px;
    }

    /* ---- Pricing toggle wraps cleanly ---- */
    .zb-price__toggle {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
    }

    .zb-price__save {
        flex-basis: 100%;
        text-align: center;
        padding: 0;
    }

    /* ---- Compare card ---- */
    .zb-vs__brand {
        margin-bottom: 16px;
    }

    .zb-vs__row {
        padding: 12px 0;
    }

    /* ---- Quote ---- */
    .zb-quote__text {
        font-size: 15px;
    }

    .zb-quote::before {
        font-size: 56px;
        top: 4px;
        left: 16px;
    }

    /* ---- Big quote ---- */
    .zb-bigquote__avatar {
        width: 128px;
        height: 128px;
        font-size: 42px;
    }

    /* ---- FAQ ---- */
    .zb-faq__item summary {
        font-size: 14px;
    }

    /* ---- Showcase visuals ---- */
    .zb-show__visual img {
        border-radius: 8px;
    }
}


/* ============================================================
   Small phones (<= 380px)
   ============================================================ */
@media (max-width: 380px) {
    .zb-h1 {
        line-height: 1.08;
    }

    .zb-h2 {
        font-size: 24px;
    }

    .zb-plan__price .amt {
        font-size: 28px;
    }
}