/* ============================================
   ZOHO-BOOKS.CSS - Zoho Books Page Specific Styles
   Sub-theme A: Indigo (#4F46E5)
   Imports after: style.css
   ============================================ */

/* ── THEME RULES (DO NOT DEVIATE) ──────────────
   Font sizes:
   - Hero body:        20px  (.hero-body)
   - Section subtitle: 18px  (.section-subtitle) — use base, no overrides
   - Section body:     16px  (.section-body)
   - Card body:        14px  (all card text)

   Typography:
   - H1 (hero):        56px, 700
   - H2 (section):     40px, 700  (.section-h2)
   - H3 (subsection):  24px, 700
   - H4 (card title):  20px, 700

   Colors — CSS variables only:
   - --color-indigo:           #4F46E5
   - --color-indigo-light-bg:  #E0E7FF
   - --color-indigo-dark:      #3730A3
   - --color-text-primary:     #1F2937
   - --color-text-secondary:   #6B7280
   - --color-white:            #FFFFFF
   - --color-navy:             #1F2937
   - --color-slate-light:      #F3F4F6
   - --color-green:            #10B981

   Icons:
   - Library: Phosphor Icons (ph-bold weight for UI)
   - Container: 48px, border-radius: 12px
   - Default: bg var(--color-indigo-light-bg), color var(--color-indigo)
   - Hover: bg var(--color-indigo), color var(--color-white)

   Cards:
   - border-radius: 16px
   - padding: 32px
   - border: 1px solid var(--color-border)
   - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
   - hover: translateY(-3px) + box-shadow

   Spacing:
   - Section padding: 96px 0
   - Container: max-width 1200px, padding 0 24px
   - Card gap: 24px

   Pill: .section-pill (from style.css — do not redefine)
   Buttons: .btn-primary, .btn-secondary (from style.css)
   ─────────────────────────────────────────────── */

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

.bks-hero-wrapper {
    width: 100%;
    background-color: var(--color-slate);
    background-image:
        linear-gradient(rgba(229, 231, 235, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 231, 235, 0.5) 1px, transparent 1px);
    background-size: 40px 40px;
    padding: 80px 0 96px 0;
}

.bks-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

/* Re-use .hero-h1 and .hero-body from style.css */

/* Buttons */
.bks-hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* Trust Row */
.bks-trust-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}

.bks-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.bks-trust-icon {
    color: var(--color-green);
    font-size: 16px;
}

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

.bks-dashboard-preview {
    max-width: 860px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.16);
}

.bks-dashboard {
    display: flex;
    background-color: var(--color-slate);
    min-height: 420px;
}

/* ── Sidebar ── */
.bks-sidebar {
    width: 130px;
    background-color: #1E293B;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.bks-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
}

.bks-brand-avatar {
    width: 36px;
    height: 36px;
    background-color: var(--color-indigo);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
}

.bks-brand-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-white);
}

.bks-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

.bks-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    cursor: default;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bks-nav-item i {
    font-size: 14px;
    flex-shrink: 0;
}

.bks-nav-active {
    background-color: rgba(79, 70, 229, 0.25);
    color: var(--color-white);
    font-weight: 600;
}

/* ── Main Area ── */
.bks-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    overflow: hidden;
}

/* Top Bar */
.bks-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
}

.bks-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-slate);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 10px;
    color: var(--color-text-secondary);
    flex: 1;
    max-width: 280px;
}

.bks-search i { font-size: 11px; }

.bks-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.bks-user-badge {
    width: 28px;
    height: 28px;
    background-color: var(--color-indigo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 9px;
    font-weight: 700;
}

/* Dashboard Content */
.bks-content {
    padding: 16px;
    flex: 1;
}

.bks-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.bks-content-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.bks-fiscal-year {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-indigo);
}

/* 3 Metric Cards */
.bks-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.bks-metric-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
}

.bks-metric-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.bks-metric-label {
    font-size: 8px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bks-metric-icon {
    font-size: 14px;
}

.bks-metric-icon.orange { color: #F97316; }
.bks-metric-icon.red    { color: #EF4444; }
.bks-metric-icon.green  { color: var(--color-green); }

.bks-metric-sub {
    font-size: 9px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.bks-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

/* Progress Bar */
.bks-progress-bar {
    height: 3px;
    background-color: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.bks-progress {
    height: 100%;
    border-radius: 2px;
}

.bks-progress.orange { background-color: #F97316; }
.bks-progress.red    { background-color: #EF4444; }
.bks-progress.green  { background-color: var(--color-green); }

/* Bottom Row */
.bks-bottom-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 10px;
}

/* Chart Card */
.bks-chart-card,
.bks-bank-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
}

.bks-chart-header,
.bks-bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bks-chart-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.bks-chart-legend {
    display: flex;
    gap: 10px;
    font-size: 8px;
    color: var(--color-text-secondary);
    align-items: center;
}

.bks-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 3px;
}

.bks-dot.purple { background-color: #7C3AED; }
.bks-dot.orange { background-color: #F97316; }

.bks-chart-area { height: 80px; }

.bks-svg {
    width: 100%;
    height: 100%;
}

/* Bank Accounts */
.bks-bank-header i {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.bks-bank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bks-bank-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bks-bank-logo {
    width: 32px;
    height: 32px;
    background-color: #1E3A5F;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 7px;
    font-weight: 700;
    flex-shrink: 0;
}

.bks-bank-logo.hdfc {
    background-color: #C41E3A;
}

.bks-bank-info {
    flex: 1;
}

.bks-bank-name {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.bks-bank-acct {
    font-size: 8px;
    color: var(--color-text-secondary);
}

.bks-bank-right {
    text-align: right;
}

.bks-bank-amount {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.bks-bank-synced {
    font-size: 8px;
    color: var(--color-green);
    font-weight: 500;
}

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

@media (max-width: 768px) {
    .bks-hero-wrapper { padding: 64px 0 80px 0; }
    .bks-trust-row { gap: 16px; }
    .bks-dashboard-preview { border-radius: 12px; }
    .bks-sidebar { width: 100px; }
    .bks-metrics { grid-template-columns: repeat(3, 1fr); }
    .bks-bottom-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .bks-sidebar { display: none; }
    .bks-metrics { grid-template-columns: 1fr 1fr; }

    .bks-dashboard-preview {
        overflow: hidden;
    }
}

/* ============================================
   WHY CHOOSE ZOHO BOOKS SECTION
   ============================================ */

.bks-why-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding: 96px 0;
}

.bks-why-section { width: 100%; }

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

/* Header — centered, no pill */
.bks-why-header {
    text-align: center;
    margin-bottom: 56px;
}

.bks-why-header .section-h2 {
    margin-bottom: 16px;
}

/* Override section-subtitle auto margin for centered layout */
.bks-why-header .section-subtitle {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/* 2-column grid */
.bks-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Card — horizontal icon + text layout */
.bks-why-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bks-why-card:hover {
    transform: translateY(-3px);
    background-color: var(--color-indigo-light-bg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* Icon container */
.bks-why-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-indigo-light-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-indigo);
    font-size: 24px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bks-why-card:hover .bks-why-icon {
    background-color: var(--color-indigo);
    color: var(--color-white);
}

/* Text content */
.bks-why-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 2px;
}

.bks-why-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.bks-why-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

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

@media (max-width: 768px) {
    .bks-why-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   REAL RESULTS SECTION
   ============================================ */

.bks-results-wrapper {
    width: 100%;
    background-color: var(--color-navy);
    padding: 96px 0;
}

.bks-results-section { width: 100%; }

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

/* 2-column grid — left 45%, right 55% */
.bks-results-grid {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 64px;
    align-items: center;
}

/* ── Left Column ── */
.bks-results-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Dark pill variant */
.bks-dark-pill {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

/* H2 — white, large, left-aligned */
.bks-results-h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Blockquote */
.bks-results-quote {
    border-left: 4px solid var(--color-indigo);
    padding: 4px 0 4px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bks-results-quote p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

.bks-results-quote footer {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

.bks-results-quote footer strong {
    color: var(--color-white);
    font-weight: 700;
}

/* 2×2 Stats Grid */
.bks-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
}

.bks-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bks-stat-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-indigo);
    line-height: 1;
}

.bks-stat-label {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Right Column — Chart Panel ── */
.bks-results-right {
    display: flex;
    align-items: center;
}

.bks-chart-panel {
    width: 100%;
    background-color: #1E293B;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.bks-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
}

/* Bar Chart */
.bks-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.bks-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 16px;
}

.bks-bar-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
    line-height: 1.4;
}

.bks-bar-tracks {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bks-bar-track {
    height: 10px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Dashed vertical grid lines via gradient */
.bks-bar-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(25% - 1px),
        rgba(255,255,255,0.08) calc(25% - 1px),
        rgba(255,255,255,0.08) 25%
    );
}

.bks-bar-fill {
    height: 100%;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: width 0.8s ease;
}

.bks-bar-fill.before {
    background-color: rgba(148, 163, 184, 0.45);
}

.bks-bar-fill.after {
    background-color: var(--color-indigo);
}

/* X-axis labels */
.bks-x-axis {
    display: flex;
    justify-content: space-between;
    padding-left: 136px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 4px;
}

/* Legend */
.bks-chart-legend-row {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.bks-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.bks-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.bks-legend-dot.grey   { background-color: rgba(148, 163, 184, 0.45); }
.bks-legend-dot.indigo { background-color: var(--color-indigo); }

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

@media (max-width: 1024px) {
    .bks-results-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .bks-results-h2 { font-size: 40px; }
}

@media (max-width: 768px) {
    .bks-results-h2 { font-size: 32px; }
    .bks-stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .bks-bar-row { grid-template-columns: 80px 1fr; }
    .bks-x-axis { padding-left: 96px; }
}

/* ============================================
   SECTION 4: ZOHO BOOKS IMPLEMENTATION SERVICES
   ============================================ */

.bks-services-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding: 96px 0;
}

.bks-services-section { width: 100%; }

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

/* Header — centered, no pill */
.bks-services-header {
    text-align: center;
    margin-bottom: 48px;
}

.bks-services-header .section-h2 {
    margin-bottom: 16px;
}

.bks-services-header .section-subtitle {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/* Table wrapper */
.bks-table-wrapper {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}

.bks-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
}

.bks-table thead tr {
    background-color: var(--color-slate);
    border-bottom: 1px solid var(--color-border);
}

.bks-table th {
    padding: 14px 24px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.bks-table th:first-child  { width: 18%; }
.bks-table th:nth-child(2) { width: 52%; }
.bks-table th:last-child   { width: 30%; }

.bks-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bks-table tbody tr:last-child {
    border-bottom: none;
}

.bks-table tbody tr:hover {
    background-color: var(--color-indigo-light-bg);
}

.bks-table td {
    padding: 18px 24px;
    vertical-align: middle;
}

/* Service name — indigo, bold */
.bks-service-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-indigo);
}

/* Deliverables — secondary text */
.bks-service-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* Perfect For badge — pill shape */
.bks-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: var(--color-slate-light);
    color: var(--color-text-secondary);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ============================================
   SECTION 5: IMPLEMENTATION PROCESS
   ============================================ */

.bks-process-wrapper {
    width: 100%;
    background-color: var(--color-slate);
    padding: 96px 0;
}

.bks-process-section { width: 100%; }

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

/* Header — LEFT aligned, no pill */
.bks-process-header {
    margin-bottom: 48px;
}

.bks-process-header .section-h2 {
    margin-bottom: 16px;
}

.bks-process-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* 3-column grid */
.bks-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Process card */
.bks-process-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bks-process-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    background-color: var(--color-indigo-light-bg);
}

/* Numbered badge — indigo square */
.bks-step-badge {
    width: 28px;
    height: 28px;
    background-color: var(--color-indigo);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.bks-process-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.bks-process-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

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

@media (max-width: 1024px) {
    .bks-process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .bks-process-grid { grid-template-columns: 1fr; }
    .bks-table-wrapper { overflow-x: visible; }
    .bks-table { min-width: 0; }

    .bks-table thead { display: none; }

    .bks-table tbody tr {
        display: flex;
        flex-direction: column;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 12px;
    }

    .bks-table tbody tr:last-child {
        border-bottom: 1px solid var(--color-border);
    }

    .bks-table td {
        padding: 0;
        border: none;
        font-size: 14px;
        line-height: 1.6;
    }

    .bks-table td:first-child {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 8px;
    }

    .bks-table td:nth-child(2) {
        color: var(--color-text-secondary);
        margin-bottom: 8px;
    }

    .bks-table td:last-child {
        color: var(--color-text-secondary);
        font-size: 13px;
        font-style: italic;
    }
}

/* ============================================
   SECTION 6: SEAMLESS MIGRATION
   ============================================ */

.bks-migration-wrapper {
    width: 100%;
    background-color: var(--color-slate);
    padding: 96px 0;
}

.bks-migration-section { width: 100%; }

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

/* Header */
.bks-migration-header {
    text-align: center;
    margin-bottom: 56px;
}

.bks-migration-header .section-h2 { margin-bottom: 16px; }

.bks-migration-header .section-subtitle {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/* 2 logo cards — centered row */
.bks-migration-cards {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bks-logo-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 240px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bks-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* Logo badge area */
.bks-logo-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* QuickBooks wordmark */
.bks-logo-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.bks-logo-intuit {
    font-size: 9px;
    color: var(--color-text-secondary);
    letter-spacing: 0.5px;
}

.bks-logo-product {
    font-size: 14px;
    font-weight: 700;
    color: #2CA01C;
}

/* Name & sub */
.bks-logo-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.bks-logo-sub {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ============================================
   SECTION 7: SPLIT CTA WITH FORM
   ============================================ */

.bks-cta-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding: 96px 0;
}

.bks-cta-section { width: 100%; }

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

/* Outer card — split two panels */
.bks-cta-panel {
    display: grid;
    grid-template-columns: 45fr 55fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* ── Left dark panel ── */
.bks-cta-left {
    background-color: #1E293B;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.bks-cta-h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
}

.bks-cta-body {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}

/* Checklist */
.bks-cta-checklist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bks-cta-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bks-cta-check-icon {
    font-size: 20px;
    color: var(--color-indigo);
    flex-shrink: 0;
    margin-top: 1px;
}

.bks-cta-check-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 3px;
}

.bks-cta-check-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* Response time */
.bks-response-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: auto;
}

.bks-green-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-green);
    flex-shrink: 0;
}

/* ── Right form panel ── */
.bks-cta-right {
    background-color: var(--color-white);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bks-form-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.bks-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bks-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bks-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.bks-input,
.bks-select,
.bks-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    background-color: var(--color-white);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.bks-input::placeholder,
.bks-textarea::placeholder {
    color: #9CA3AF;
}

.bks-input:focus,
.bks-select:focus,
.bks-textarea:focus {
    border-color: var(--color-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Select wrapper for custom chevron */
.bks-select-wrapper {
    position: relative;
}

.bks-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
}

.bks-select-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.bks-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* Submit button */
.bks-submit-btn {
    width: 100%;
    background-color: var(--color-indigo);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-family-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 4px;
}

.bks-submit-btn i { font-size: 18px; }

.bks-submit-btn:hover {
    background-color: var(--color-indigo-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.bks-form-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-align: center;
}

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

@media (max-width: 1024px) {
    .bks-cta-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bks-migration-cards { flex-direction: column; align-items: center; }
    .bks-logo-card { width: 100%; max-width: 300px; }
    .bks-cta-left, .bks-cta-right { padding: 32px 24px; }
    .bks-cta-h3 { font-size: 26px; }
}