/* =========================================================================
   Growing Your Business — page-specific styles
   Scoped under .gb-page so nothing here leaks onto other pages.

   COLOR / TOKEN NOTE:
   The custom properties below fall back to sensible defaults matching the
   reference screenshot. If your global stylesheet already defines brand
   variables (primary green, text color, border color, etc.), just update
   the `var(--your-real-variable, #fallback)` calls in the :root block so
   this page automatically inherits your real theme instead of the
   fallback colors.
   ========================================================================= */

.gb-page {
    --gb-green: var(--primary, #1c7a4a);
    --gb-green-dark: var(--primary-dark, #145c38);
    --gb-green-light: var(--primary-light, #e7f6ee);
    --gb-green-border: #cdebd9;
    --gb-navy: var(--text-dark, #14261f);
    --gb-text-muted: var(--text-muted, #5c6b65);
    --gb-border: var(--border-color, #e3ece6);
    --gb-radius-lg: 16px;
    --gb-radius-md: 12px;
    --gb-radius-sm: 10px;
    --gb-gap: 24px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    box-sizing: border-box;
    color: var(--gb-navy);
}

.gb-page,
.gb-page * ,
.gb-page *::before,
.gb-page *::after {
    box-sizing: border-box;
}

.gb-page img,
.gb-page svg {
    max-width: 100%;
}

.gb-page img {
    display: block;
    height: auto;
}

.gb-page h1,
.gb-page h2,
.gb-page h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    margin: 0;
}

.gb-page a {
    text-decoration: none;
    color: inherit;
}

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

/* Font Awesome icons used directly in this page's own markup (badges,
   meta row, hero note, banner, support card, nav buttons) — sized here
   since they aren't wrapped in a shared icon component on this project. */
.gb-page .fa-solid {
    line-height: 1;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.gb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
}

.gb-btn .fa-solid {
    font-size: 14px;
}

.gb-btn--primary {
    background: var(--gb-green);
    color: #fff;
}

.gb-btn--primary:hover {
    background: var(--gb-green-dark);
}

.gb-btn--outline {
    background: transparent;
    color: var(--gb-green);
    border-color: var(--gb-green);
}

.gb-btn--outline:hover {
    background: var(--gb-green-light);
}

/* =========================================================================
   PAGE GRID
   Named grid areas control both the two-column desktop layout AND the
   mobile stacking order — no JS reordering required.
   ========================================================================= */

.gb-layout {
    display: grid;
    row-gap: var(--gb-gap);
    grid-template-columns: 1fr;
    grid-template-areas:
        "hero"
        "progress"
        "sections"
        "related"
        "tips"
        "support"
        "banner"
        "nav";
}

.gb-hero          { grid-area: hero; }
.gb-progress-card { grid-area: progress; }
.gb-sections      { grid-area: sections; display: flex; flex-direction: column; gap: var(--gb-gap); min-width: 0; }
.gb-related-card  { grid-area: related; }
.gb-tips-card     { grid-area: tips; }
.gb-support-card  { grid-area: support; }
.gb-banner        { grid-area: banner; }
.gb-page-nav      { grid-area: nav; }

/* =========================================================================
   BREADCRUMB
   ========================================================================= */

.gb-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: 13px;
    color: var(--gb-text-muted);
}

.gb-breadcrumb a {
    color: var(--gb-text-muted);
}

.gb-breadcrumb a:hover {
    color: var(--gb-green);
}

.gb-breadcrumb li[aria-current="page"] {
    color: var(--gb-navy);
    font-weight: 500;
}

.gb-breadcrumb-sep {
    color: #b7c3bd;
}

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

.gb-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

.gb-hero-content {
    min-width: 0;
}

.gb-badge {
    display: inline-block;
    background: var(--gb-green-light);
    color: var(--gb-green-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.gb-hero-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.12;
    color: var(--gb-navy);
    margin-bottom: 14px;
}

.gb-hero-subtitle {
    font-size: 17px;
    font-weight: 700;
    color: var(--gb-navy);
    margin: 0 0 10px;
}

.gb-hero-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gb-text-muted);
    margin: 0 0 20px;
    max-width: 60ch;
}

.gb-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gb-navy);
}

.gb-meta-row li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gb-meta-row .fa-solid {
    color: var(--gb-green);
    font-size: 14px;
}

.gb-hero-media {
    position: relative;
    width: 100%;
    min-width: 0;
}

.gb-hero-image {
    width: 100%;
    max-width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: var(--gb-radius-lg);
}

.gb-hero-note {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin-top: 16px;
    background: var(--gb-green-light);
    border: 1px solid var(--gb-green-border);
    border-radius: var(--gb-radius-sm);
    padding: 14px 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.gb-hero-note p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gb-navy);
    line-height: 1.35;
}

.gb-hero-note-icon {
    color: var(--gb-green);
    font-size: 18px;
}

/* =========================================================================
   NUMBERED SECTIONS
   ========================================================================= */

.gb-section {
    padding-top: 4px;
}

/*
   FALLBACK STYLES — x-bookings.section-heading (.cbp-section__*)
   ---------------------------------------------------------------
   REMOVE THIS BLOCK if these classes already have site-wide styles.
   Included only so the page renders correctly if they don't yet.
*/
.cbp-section__head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.cbp-section__number {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gb-green);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbp-section__head-text {
    min-width: 0;
}

.cbp-section__head-text h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--gb-navy);
    margin-bottom: 6px;
}

.cbp-section__desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--gb-text-muted);
    margin: 0;
}
/* --- end fallback block --- */

/*
   NEW COMPONENT — x-bookings.checklist (.cbp-checklist)
   This component didn't exist before this page, so these styles are
   the real, permanent styling for it (not a removable fallback).
*/
.cbp-checklist {
    list-style: none;
    margin: 0;
    padding: 20px;
    background: var(--gb-green-light);
    border: 1px solid var(--gb-green-border);
    border-radius: var(--gb-radius-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.cbp-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--gb-navy);
}

.cbp-checklist__icon {
    color: var(--gb-green);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Checklist + supporting media layout */

.gb-checklist-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    min-width: 0;
}

.gb-media-card {
    width: 100%;
    min-width: 0;
    border-radius: var(--gb-radius-md);
    overflow: hidden;
    border: 1px solid var(--gb-border);
}

.gb-media-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.gb-media-card--phone img {
    height: 320px;
    object-fit: contain;
    background: #f4f9f6;
}

/* Feature grid (reputation + time-management sections) — .gb-feature-grid
   is this page's own grid wrapper; the cards inside it are the existing
   x-bookings.feature-card component. */

.gb-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/*
   FALLBACK STYLES — x-bookings.feature-card (.cbp-feature-card*)
   ---------------------------------------------------------------
   REMOVE THIS BLOCK if these classes already have site-wide styles.
   This page uses size="sm" (per the component's own doc comment, that
   variant is intended for four-up grids like these two sections).
*/
.cbp-feature-card {
    background: var(--gb-green-light);
    border: 1px solid var(--gb-green-border);
    border-radius: var(--gb-radius-md);
    padding: 18px;
    min-width: 0;
}

.cbp-feature-card--sm {
    padding: 16px;
}

.cbp-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--gb-green);
    margin-bottom: 12px;
    font-size: 16px;
}

.cbp-feature-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gb-navy);
    margin: 0 0 6px;
}

.cbp-feature-card__desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gb-text-muted);
    margin: 0;
}
/* --- end fallback block --- */

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

.gb-banner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    background: var(--gb-green-light);
    border: 1px solid var(--gb-green-border);
    border-radius: var(--gb-radius-lg);
    padding: 24px;
}

.gb-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--gb-green);
    flex-shrink: 0;
}

.gb-banner-icon .fa-solid {
    font-size: 20px;
}

.gb-banner-content h2 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--gb-navy);
}

.gb-banner-content p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gb-text-muted);
    margin: 0;
}

.gb-banner-btn {
    width: 100%;
    max-width: 100%;
}

/* =========================================================================
   PREV / NEXT NAV
   ========================================================================= */

.gb-page-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gb-nav-btn {
    width: 100%;
    max-width: 100%;
}

/* =========================================================================
   SIDEBAR CARDS (shared)
   ========================================================================= */

.gb-progress-card,
.gb-related-card,
.gb-tips-card,
.gb-support-card {
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    padding: 20px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.gb-progress-card h2,
.gb-related-card h2,
.gb-tips-card h2,
.gb-support-card h2 {
    font-size: 16px;
    font-weight: 800;
    color: var(--gb-navy);
    margin-bottom: 16px;
}

/* --- Progress card --- */

.gb-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.gb-progress-head h2 {
    margin-bottom: 0;
}

.gb-progress-circle {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.gb-progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gb-progress-track,
.gb-progress-value {
    fill: none;
    stroke-width: 6;
}

.gb-progress-track {
    stroke: #e3ece6;
}

.gb-progress-value {
    stroke: var(--gb-green);
    stroke-linecap: round;
    /* circumference = 2 * PI * r(27) ≈ 169.6; 80% shown, 20% gap */
    stroke-dasharray: 169.6;
    stroke-dashoffset: 33.9;
}

.gb-progress-fraction {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--gb-navy);
}

.gb-progress-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*
   FALLBACK STYLES — x-bookings.progress-step (.cbp-progress__*)
   ---------------------------------------------------------------
   REMOVE THIS BLOCK if these classes already have site-wide styles.
   Note the real modifier class is `.is-complete` (from the :complete
   prop), not `.is-done`.
*/
.cbp-progress__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--gb-text-muted);
}

.cbp-progress__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #c3cec8;
    color: #fff;
}

.cbp-progress__item.is-complete {
    color: var(--gb-navy);
}

.cbp-progress__item.is-complete .cbp-progress__icon {
    background: var(--gb-green);
    border-color: var(--gb-green);
}
/* --- end fallback block --- */

.gb-progress-btn {
    width: 100%;
}

/* --- Related resources card --- */

.gb-related-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/*
   FALLBACK STYLES — x-bookings.related-resource (.cbp-related__*)
   ---------------------------------------------------------------
   REMOVE THIS BLOCK if these classes already have site-wide styles.
*/
.cbp-related__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cbp-related__thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--gb-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gb-green-light);
    display: block;
}

.cbp-related__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbp-related__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.cbp-related__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gb-navy);
    line-height: 1.35;
    overflow-wrap: break-word;
}

.cbp-related__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--gb-text-muted);
    flex-wrap: wrap;
}

.cbp-related__type {
    background: var(--gb-green-light);
    color: var(--gb-green-dark);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.cbp-related__arrow {
    color: var(--gb-green);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
/* --- end fallback block --- */

/* --- Top tips card --- */

.gb-tips-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
   FALLBACK STYLES — x-bookings.tip-item (.cbp-tip*)
   ---------------------------------------------------------------
   REMOVE THIS BLOCK if these classes already have site-wide styles.
*/
.cbp-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cbp-tip__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gb-green-light);
    color: var(--gb-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.cbp-tip__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cbp-tip__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gb-navy);
}

.cbp-tip__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--gb-text-muted);
}
/* --- end fallback block --- */

/* --- Support card --- */

.gb-support-card {
    text-align: left;
}

.gb-support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gb-green-light);
    color: var(--gb-green);
    margin-bottom: 14px;
}

.gb-support-icon .fa-solid {
    font-size: 18px;
}

.gb-support-lead {
    font-size: 14px;
    font-weight: 700;
    color: var(--gb-navy);
    margin: 0 0 8px;
}

.gb-support-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gb-text-muted);
    margin: 0 0 16px;
}

.gb-support-btn {
    width: 100%;
}

/* =========================================================================
   SMALL MOBILE — 480px and below
   ========================================================================= */

@media (max-width: 480px) {
    .gb-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gb-progress-card,
    .gb-related-card,
    .gb-tips-card,
    .gb-support-card,
    .cbp-checklist,
    .cbp-feature-card,
    .gb-banner {
        padding: 16px;
    }

    .gb-hero-title {
        font-size: 28px;
    }

    .gb-hero-image {
        height: 200px;
    }
}

/* =========================================================================
   VERY SMALL — 360px and below
   ========================================================================= */

@media (max-width: 360px) {
    .gb-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .gb-meta-row {
        gap: 12px;
        row-gap: 6px;
    }
}

/* =========================================================================
   TABLET — 768px and up
   ========================================================================= */

@media (min-width: 768px) {
    .gb-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
        column-gap: var(--gb-gap);
        grid-template-areas:
            "hero     progress"
            "sections related"
            "sections tips"
            "sections support"
            "banner   ."
            "nav      .";
    }

    .gb-hero-grid {
        grid-template-columns: minmax(0, 1fr) 260px;
    }

    .gb-hero-note {
        position: absolute;
        right: -8px;
        bottom: -18px;
        margin-top: 0;
    }

    .gb-hero-image {
        height: 300px;
    }

    .gb-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gb-checklist-media {
        grid-template-columns: minmax(0, 1fr) 180px;
        align-items: stretch;
    }

    .gb-media-card img,
    .gb-media-card--phone img {
        height: 100%;
    }

    .gb-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .gb-banner-btn {
        width: auto;
        flex-shrink: 0;
    }

    .gb-page-nav {
        flex-direction: row;
        justify-content: space-between;
    }

    .gb-nav-btn {
        width: auto;
    }

    .gb-progress-btn,
    .gb-support-btn {
        width: auto;
    }
}

/* =========================================================================
   LARGE TABLET — 992px and up
   ========================================================================= */

@media (min-width: 992px) {
    .gb-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .gb-feature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gb-checklist-media {
        grid-template-columns: minmax(0, 1fr) 200px;
    }
}

/* =========================================================================
   DESKTOP — 1200px and up
   ========================================================================= */

@media (min-width: 1200px) {
    .gb-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .gb-hero-title {
        font-size: 42px;
    }

    .gb-hero-image {
        height: 340px;
    }
}