/* =====================================================
   RESUME TARGET - HUB PAGES CSS
   /asset/css/templates/hub-pages.css
   Styles for how-it-works.php and our-services.php
   v20260217 - Extracted from inline styles for SEO
   
   IMPORTANT: SHARED STYLES LOCATION
   The following styles are in shared-pages.css:
   - .breadcrumb (breadcrumb navigation)
   - .container (max-width wrapper)
   - .btn-primary, .btn-outline (buttons)
   
   This file contains:
   - hiw-* classes (How It Works hub page)
   - svc-* classes (Our Services hub page)
   - Shared visual card components
   ===================================================== */


/* ================================================
   HOW IT WORKS HUB (hiw-* classes)
   ================================================ */
/* ================================================
   HOW IT WORKS HUB v2.0 — SEO + Mobile Fixes
   ================================================ */

/* ── Hero (Light Blue) ── */
.hiw-hero {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%) !important;
    color: #1f295e !important;
    padding: 52px 0 60px;
    position: relative; overflow: hidden;
}
.hiw-hero * { color: #1f295e; }

.hiw-hero-layout {
    display: grid; grid-template-columns: 1fr 400px;
    gap: 48px; align-items: center;
}
.hiw-hero-content .eyebrow-text {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #1f295e !important;
    margin-bottom: 14px; display: block;
}
/* v2.0: Now targets <p> instead of <h1> — header H1 is the only H1 */
.hiw-hero-content .hiw-hero-headline,
.hiw-hero-content h1 {
    font-size: 40px; line-height: 1.2; color: #1f295e !important; margin: 0 0 20px 0;
    font-weight: 700;
}
.hiw-hero-content .hiw-hero-headline em,
.hiw-hero-content h1 em { font-style: italic; color: #47BB5C !important; }
.hiw-hero-content .hero-desc {
    font-size: 17px; line-height: 1.75; color: #475569 !important;
    margin-bottom: 32px; max-width: 560px;
}
.hiw-stats-row { display: flex; gap: 48px; margin-bottom: 32px; }
.hiw-stat-item .stat-number {
    display: block; font-size: 32px; font-weight: 700; color: #1f295e !important; line-height: 1.1;
}
.hiw-stat-item .stat-label { display: block; font-size: 13px; color: #64748b !important; margin-top: 4px; }
.hiw-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hiw-hero-buttons .btn-green {
    display: inline-block; background: #47BB5C; color: #fff !important;
    padding: 14px 28px; border-radius: 8px; font-weight: 600;
    font-size: 15px; text-decoration: none; transition: background 0.2s;
}
.hiw-hero-buttons .btn-green:hover { background: #3da04d; color: #fff !important; text-decoration: none; }
.hiw-hero-buttons .btn-ghost {
    display: inline-block; background: #fff; color: #1f295e !important;
    padding: 14px 28px; border-radius: 8px; font-weight: 600;
    font-size: 15px; text-decoration: none; border: 2px solid #1f295e; transition: all 0.2s;
}
.hiw-hero-buttons .btn-ghost:hover { background: #1f295e; color: #fff !important; text-decoration: none; }
.hiw-hero-image { text-align: right; }
.hiw-hero-image img { max-width: 100%; height: auto; display: block; margin-left: auto; }

/* ── Opening Promise ── */
.hiw-promise {
    padding: 56px 0;
    background: linear-gradient(135deg, #f0faf2 0%, #e8f5eb 100%);
    text-align: center; border-bottom: 1px solid #d4edda;
}
.hiw-promise-inner { max-width: 720px; margin: 0 auto; }
.hiw-promise h2 { font-size: 30px; color: #1a1a1a; margin-bottom: 16px; line-height: 1.3; }
.hiw-promise p { font-size: 18px; color: #4a5568; line-height: 1.8; }
.hiw-promise .highlight-line {
    display: inline-block;
    background: linear-gradient(to bottom, transparent 60%, rgba(71,187,92,0.15) 60%);
    padding: 0 4px;
}

/* ── Journey Timeline ── */
.hiw-journey { position: relative; padding: 0; }
.hiw-journey::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #47BB5C, #1f295e, #47BB5C, #bae6fd, #47BB5C);
    transform: translateX(-50%); z-index: 0;
}
.hiw-step { position: relative; padding: 80px 0; z-index: 1; }
.hiw-step:first-child { padding-top: 64px; }
.hiw-step:last-child { padding-bottom: 64px; }
.hiw-step-light { background: #f7f8fa; }
.hiw-step-white { background: #fff; }
.hiw-step-blue { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%); }

.hiw-step-layout {
    display: grid; grid-template-columns: 1fr 80px 1fr;
    gap: 0; align-items: center;
}
.hiw-step-node {
    display: flex; justify-content: center; align-items: center;
    position: relative; z-index: 2;
}
.hiw-step-number {
    width: 64px; height: 64px; background: #1f295e; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; border: 4px solid #fff;
    box-shadow: 0 4px 16px rgba(31,41,94,0.2); z-index: 3;
}
.hiw-step-blue .hiw-step-number { background: #47BB5C; }

.hiw-step-content { padding: 0 40px; }
.hiw-step-visual { padding: 0 40px; }
.hiw-step-left .hiw-step-content { grid-column: 1; }
.hiw-step-left .hiw-step-node { grid-column: 2; }
.hiw-step-left .hiw-step-visual { grid-column: 3; }
.hiw-step-right .hiw-step-visual { grid-column: 1; }
.hiw-step-right .hiw-step-node { grid-column: 2; }
.hiw-step-right .hiw-step-content { grid-column: 3; }

.hiw-step-content .step-eyebrow {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #47BB5C; margin-bottom: 8px; display: block;
}
.hiw-step-content h3 { font-size: 28px; color: #1a1a1a; margin: 0 0 6px 0; line-height: 1.2; }
.hiw-step-content .step-subtitle {
    font-size: 15px; font-weight: 600; color: #1f295e; margin-bottom: 14px; display: block;
}
.hiw-step-content .step-desc {
    font-size: 16px; line-height: 1.7; color: #4a5568; margin-bottom: 16px;
}
.hiw-step-content .step-quote {
    font-size: 15px; font-style: italic; color: #718096;
    border-left: 3px solid #47BB5C; padding-left: 16px; margin: 16px 0; line-height: 1.6;
}
.hiw-step-content .step-link {
    display: inline-block; font-size: 15px; font-weight: 600;
    color: #47BB5C; text-decoration: none; transition: all 0.2s;
}
.hiw-step-content .step-link:hover { text-decoration: underline; }

/* ── VISUAL CARDS ── */
.step-visual-card {
    background: #fff; border: 2px solid #e2e8f0; border-radius: 14px;
    padding: 28px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.hiw-step-blue .step-visual-card { border-color: #bae6fd; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.scene-header {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: #94a3b8; margin-bottom: 16px; display: block;
}

/* Phone conversation transcript */
.phone-transcript { display: flex; flex-direction: column; gap: 10px; }
.transcript-bubble {
    padding: 10px 14px; border-radius: 12px; font-size: 13px;
    line-height: 1.5; max-width: 88%; position: relative;
}
.bubble-writer {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    align-self: flex-start; border-bottom-left-radius: 4px;
}
.bubble-client {
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    align-self: flex-end; border-bottom-right-radius: 4px;
}
.bubble-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 3px; display: block;
}
.bubble-writer .bubble-label { color: #3b82f6; }
.bubble-client .bubble-label { color: #47BB5C; }
.transcript-insight {
    background: #fefce8; border: 1px solid #fde68a; border-radius: 8px;
    padding: 8px 12px; font-size: 11px; color: #92400e; text-align: center;
    font-weight: 600;
}

/* Workflow pipeline */
.workflow-pipeline { display: flex; flex-direction: column; gap: 0; }
.pipeline-step {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; position: relative;
}
.pipeline-step::before {
    content: ''; width: 2px; height: 16px; background: #d1d5db;
    position: absolute; top: -9px; left: 25px;
}
.pipeline-step:first-child::before { display: none; }
.pipeline-dot {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff; font-weight: 700;
}
.pipeline-dot-done { background: #47BB5C; }
.pipeline-dot-active { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.2); }
.pipeline-dot-pending { background: #d1d5db; }
.pipeline-text { font-size: 13px; color: #475569; }
.pipeline-text strong { color: #1a1a1a; }
.pipeline-tag {
    font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
    margin-left: auto;
}
.tag-complete { background: #dcfce7; color: #166534; }
.tag-active { background: #dbeafe; color: #1e40af; }
.tag-pending { background: #f3f4f6; color: #6b7280; }

/* ATS scanner */
.ats-scanner { display: flex; flex-direction: column; gap: 8px; }
.ats-check-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px; font-size: 12px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.ats-icon-pass { color: #47BB5C; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.ats-icon-fail { color: #ef4444; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.ats-label { flex: 1; color: #475569; }
.ats-score {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.score-pass { background: #dcfce7; color: #166534; }
.score-fail { background: #fee2e2; color: #991b1b; }
.ats-result-bar {
    margin-top: 8px; padding: 12px 16px; background: #f0fdf4;
    border: 2px solid #bbf7d0; border-radius: 8px; text-align: center;
}
.ats-result-bar .ats-big-score {
    font-size: 32px; font-weight: 700; color: #166534; display: block;
}
.ats-result-bar .ats-big-label {
    font-size: 11px; color: #47BB5C; text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 600;
}

/* Revision tracker */
.revision-doc {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 16px; font-size: 12px; line-height: 1.7;
}
.revision-doc .doc-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #e2e8f0;
    font-size: 11px; color: #94a3b8;
}
.doc-toolbar .toolbar-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.toolbar-red { background: #ef4444; }
.toolbar-yellow { background: #fbbf24; }
.toolbar-green { background: #47BB5C; }
.revision-line { padding: 3px 0; color: #475569; }
.revision-delete {
    text-decoration: line-through; color: #ef4444; background: #fee2e2;
    padding: 1px 4px; border-radius: 3px;
}
.revision-add {
    color: #166534; background: #dcfce7; padding: 1px 4px; border-radius: 3px;
    font-weight: 500;
}
.revision-comment {
    margin-top: 10px; background: #fefce8; border: 1px solid #fde68a;
    border-radius: 6px; padding: 8px 10px; font-size: 11px; color: #92400e;
}
.revision-comment .comment-author {
    font-weight: 700; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.3px; color: #b45309; margin-bottom: 2px; display: block;
}
.revision-status {
    display: flex; gap: 12px; margin-top: 12px;
}
.rev-stat {
    flex: 1; text-align: center; padding: 8px; border-radius: 6px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
}
.rev-stat .rs-num { font-size: 18px; font-weight: 700; color: #1f295e; display: block; }
.rev-stat .rs-lbl { font-size: 10px; color: #718096; text-transform: uppercase; }

/* Writer profile card */
.writer-card { display: flex; gap: 16px; align-items: flex-start; }
.writer-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #1f295e, #3b82f6);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.writer-info { flex: 1; }
.writer-name { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.writer-role { font-size: 12px; color: #47BB5C; font-weight: 600; margin-bottom: 8px; }
.writer-creds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.writer-cred {
    font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
    background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
}
.writer-stats { display: flex; gap: 16px; }
.writer-stat { text-align: center; }
.writer-stat .ws-num { font-size: 16px; font-weight: 700; color: #1f295e; display: block; }
.writer-stat .ws-lbl { font-size: 10px; color: #718096; text-transform: uppercase; }
.writer-match {
    margin-top: 14px; padding: 10px 14px; background: #f0fdf4;
    border: 1px solid #bbf7d0; border-radius: 8px;
    font-size: 12px; color: #166534; font-weight: 500;
}
.writer-match .match-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: #47BB5C; letter-spacing: 0.5px; display: block; margin-bottom: 2px;
}

/* Guarantee shield */
.guarantee-visual { text-align: center; }
.shield-icon {
    width: 72px; height: 72px; margin: 0 auto 14px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 3px solid #47BB5C; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; box-shadow: 0 4px 16px rgba(71,187,92,0.15);
}
.guarantee-headline {
    font-size: 28px; font-weight: 700; color: #1f295e; margin-bottom: 4px;
}
.guarantee-sub { font-size: 14px; color: #475569; margin-bottom: 16px; }
.guarantee-terms { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.guarantee-term {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: #4a5568; line-height: 1.4;
}
.guarantee-term .gt-icon { color: #47BB5C; font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.guarantee-big-stat {
    margin-top: 14px; padding: 12px; background: #eff6ff;
    border: 1px solid #bfdbfe; border-radius: 8px; text-align: center;
}
.guarantee-big-stat .gbs-num { font-size: 32px; font-weight: 700; color: #1f295e; display: block; }
.guarantee-big-stat .gbs-lbl { font-size: 11px; color: #3b82f6; text-transform: uppercase; font-weight: 600; }

/* Welcome back card */
.welcome-card {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 2px solid #86efac; border-radius: 12px; padding: 20px; text-align: center;
}
.welcome-icon { font-size: 36px; margin-bottom: 8px; }
.welcome-title { font-size: 18px; font-weight: 700; color: #166534; margin-bottom: 4px; }
.welcome-sub { font-size: 13px; color: #4a5568; margin-bottom: 14px; line-height: 1.5; }
.welcome-perks { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.welcome-perk {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: #475569;
    padding: 6px 10px; background: #fff; border-radius: 6px;
    border: 1px solid #bbf7d0;
}
.welcome-perk .wp-icon { color: #47BB5C; font-size: 14px; }
.welcome-savings {
    margin-top: 12px; padding: 10px; background: #fff;
    border-radius: 8px; border: 2px solid #47BB5C;
}
.welcome-savings .ws-amount { font-size: 24px; font-weight: 700; color: #47BB5C; display: block; }
.welcome-savings .ws-label { font-size: 11px; color: #718096; text-transform: uppercase; }

/* ── What's Included ── */
.hiw-included {
    padding: 64px 0;
    background: linear-gradient(135deg, #eef0f7 0%, #e8eaf4 100%);
    border-top: 1px solid #d4d8e8;
}
.hiw-included h2 { text-align: center; margin-bottom: 12px; color: #1a1a1a; }
.hiw-included .included-desc {
    text-align: center; color: #4a5568; max-width: 520px;
    margin: 0 auto 40px; line-height: 1.7;
}
.hiw-check-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 16px; max-width: 900px; margin: 0 auto;
}
.hiw-check-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 18px;
    background: #fff; border-radius: 10px; border: 1px solid #d4d8e8;
    box-shadow: 0 2px 8px rgba(31,41,94,0.04);
}
.hiw-check-icon { color: #47BB5C; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.hiw-check-text strong { display: block; font-size: 14px; color: #1a1a1a; margin-bottom: 2px; }
.hiw-check-text span { font-size: 12px; color: #718096; line-height: 1.4; }

/* ── FAQ ── */
.hiw-faq {
    padding: 64px 0; background: #f7f8fa; border-top: 1px solid #e2e8f0;
}
.hiw-faq h2 { text-align: center; margin-bottom: 40px; color: #1a1a1a; }
.hiw-faq-list {
    max-width: 800px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 12px;
}
.hiw-faq-item {
    background: #fff; border: 2px solid #e2e8f0;
    border-radius: 10px; padding: 24px 28px;
}
.hiw-faq-item h3 { margin: 0 0 8px 0; font-size: 17px; color: #1f295e; }
.hiw-faq-item p { margin: 0; line-height: 1.7; color: #4a5568; font-size: 15px; }
.hiw-faq-item a { color: #47BB5C; font-weight: 500; text-decoration: none; }
.hiw-faq-item a:hover { text-decoration: underline; }

/* ── CTA ── */
.hiw-cta {
    padding: 56px 0; text-align: center;
    background: linear-gradient(135deg, #1f295e 0%, #2d3a7c 100%); color: #fff;
}
.hiw-cta h2 { color: #fff; margin-bottom: 12px; }
.hiw-cta p { max-width: 520px; margin: 0 auto 24px; color: rgba(255,255,255,0.8); line-height: 1.6; }
.hiw-cta .cta-btn-green {
    display: inline-block; background: #47BB5C; color: #fff;
    padding: 14px 28px; border-radius: 8px; font-weight: 600;
    text-decoration: none; margin: 0 6px 10px; transition: background 0.2s;
}
.hiw-cta .cta-btn-green:hover { background: #3da04d; color: #fff; text-decoration: none; }
.hiw-cta .cta-btn-outline {
    display: inline-block; color: #fff; padding: 14px 28px;
    border-radius: 8px; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3); margin: 0 6px 10px; transition: all 0.2s;
}
.hiw-cta .cta-btn-outline:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.hiw-cta .cta-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 12px; }

/* ── Responsive — Tablet ── */
@media (max-width: 900px) {
    .hiw-hero-layout { grid-template-columns: 1fr; }
    .hiw-hero-content { text-align: center; }
    .hiw-hero-content .hero-desc { margin-left: auto; margin-right: auto; }
    .hiw-stats-row { justify-content: center; }
    .hiw-hero-buttons { justify-content: center; }
    .hiw-hero-image { text-align: center; margin-top: 24px; }
    .hiw-hero-image img { max-width: 340px; margin: 0 auto; }
    /* v2.0 FIX: Reduced from 80px to 56px to prevent text squishing */
    .hiw-journey::before { left: 28px; }
    .hiw-step-layout { grid-template-columns: 56px 1fr; }
    .hiw-step-node { grid-column: 1 !important; grid-row: 1 / 3; align-self: start; padding-top: 4px; }
    .hiw-step-content { grid-column: 2 !important; grid-row: 1; padding: 0; }
    .hiw-step-visual { grid-column: 2 !important; grid-row: 2; padding: 16px 0 0; }
    /* v2.0 FIX: Reduced step number from 64px to 44px */
    .hiw-step-number {
        width: 44px; height: 44px; font-size: 18px; border-width: 3px;
    }
}
@media (max-width: 768px) {
    .hiw-hero-content .hiw-hero-headline,
    .hiw-hero-content h1 { font-size: 30px; }
    .hiw-stats-row { gap: 28px; }
    .hiw-stat-item .stat-number { font-size: 26px; }
    .hiw-hero-buttons { flex-direction: column; }
    .hiw-hero-buttons .btn-green,
    .hiw-hero-buttons .btn-ghost { width: 100%; text-align: center; }
    .hiw-check-grid { grid-template-columns: 1fr; }
    .hiw-step { padding: 48px 0; }
    .writer-card { flex-direction: column; }
}
@media (max-width: 480px) {
    .hiw-stats-row { flex-wrap: wrap; gap: 20px; }
}


/* ================================================
   OUR SERVICES HUB (svc-* classes)
   ================================================ */
/* ================================================
   OUR SERVICES HUB v2.0 — SEO + Mobile Fixes
   ================================================ */

/* ── Hero (Light Blue) ── */
.svc-hero {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%) !important;
    padding: 52px 0 60px; position: relative; overflow: hidden;
}
.svc-hero * { color: #1f295e; }

.svc-hero-layout {
    display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center;
}
.svc-hero-content .eyebrow-text {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #1f295e !important; margin-bottom: 14px; display: block;
}
/* v2.0: Now targets <p> instead of <h1> — header H1 is the only H1 */
.svc-hero-content .svc-hero-headline,
.svc-hero-content h1 {
    font-size: 40px; line-height: 1.2; color: #1f295e !important; margin: 0 0 20px 0;
    font-weight: 700;
}
.svc-hero-content .svc-hero-headline em,
.svc-hero-content h1 em { font-style: italic; color: #47BB5C !important; }
.svc-hero-content .hero-desc {
    font-size: 17px; line-height: 1.75; color: #475569 !important; margin-bottom: 32px; max-width: 560px;
}
.svc-stats-row { display: flex; gap: 48px; margin-bottom: 32px; }
.svc-stat-item .stat-number { display: block; font-size: 32px; font-weight: 700; color: #1f295e !important; line-height: 1.1; }
.svc-stat-item .stat-label { display: block; font-size: 13px; color: #64748b !important; margin-top: 4px; }
.svc-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.svc-hero-buttons .btn-green {
    display: inline-block; background: #47BB5C; color: #fff !important;
    padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px;
    text-decoration: none; transition: background 0.2s;
}
.svc-hero-buttons .btn-green:hover { background: #3da04d; color: #fff !important; text-decoration: none; }
.svc-hero-buttons .btn-ghost {
    display: inline-block; background: #fff; color: #1f295e !important;
    padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px;
    text-decoration: none; border: 2px solid #1f295e; transition: all 0.2s;
}
.svc-hero-buttons .btn-ghost:hover { background: #1f295e; color: #fff !important; text-decoration: none; }
.svc-hero-image { text-align: right; }
.svc-hero-image img { max-width: 100%; height: auto; display: block; margin-left: auto; }

/* ── Opening ── */
.svc-opening {
    padding: 56px 0; background: linear-gradient(135deg, #f0faf2 0%, #e8f5eb 100%);
    text-align: center; border-bottom: 1px solid #d4edda;
}
.svc-opening-inner { max-width: 720px; margin: 0 auto; }
.svc-opening h2 { font-size: 30px; color: #1a1a1a; margin-bottom: 16px; line-height: 1.3; }
.svc-opening p { font-size: 18px; color: #4a5568; line-height: 1.8; }
.svc-opening .highlight-line {
    display: inline-block; background: linear-gradient(to bottom, transparent 60%, rgba(71,187,92,0.15) 60%); padding: 0 4px;
}

/* ── Journey ── */
.svc-journey { position: relative; padding: 0; }
.svc-journey::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, #47BB5C, #1f295e, #47BB5C, #bae6fd, #47BB5C);
    transform: translateX(-50%); z-index: 0;
}
.svc-step { position: relative; padding: 80px 0; z-index: 1; }
.svc-step:first-child { padding-top: 64px; }
.svc-step:last-child { padding-bottom: 64px; }
.svc-step-light { background: #f7f8fa; }
.svc-step-white { background: #fff; }
.svc-step-blue { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%); }

.svc-step-layout { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 0; align-items: center; }
.svc-step-node { display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; }
.svc-step-icon {
    width: 64px; height: 64px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    border: 4px solid #47BB5C; box-shadow: 0 4px 16px rgba(71,187,92,0.15); z-index: 3;
}

.svc-step-content { padding: 0 40px; }
.svc-step-visual { padding: 0 40px; }
.svc-step-left .svc-step-content { grid-column: 1; }
.svc-step-left .svc-step-node { grid-column: 2; }
.svc-step-left .svc-step-visual { grid-column: 3; }
.svc-step-right .svc-step-visual { grid-column: 1; }
.svc-step-right .svc-step-node { grid-column: 2; }
.svc-step-right .svc-step-content { grid-column: 3; }

.svc-step-content .step-eyebrow {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #47BB5C; margin-bottom: 8px; display: block;
}
.svc-step-content h3 { font-size: 28px; color: #1a1a1a; margin: 0 0 6px 0; line-height: 1.2; }
.svc-step-content .step-subtitle { font-size: 15px; font-weight: 600; color: #1f295e; margin-bottom: 14px; display: block; }
.svc-step-content .step-desc { font-size: 16px; line-height: 1.7; color: #4a5568; margin-bottom: 16px; }
.svc-step-content .step-quote {
    font-size: 15px; font-style: italic; color: #718096;
    border-left: 3px solid #47BB5C; padding-left: 16px; margin: 16px 0; line-height: 1.6;
}
.svc-step-content .step-link {
    display: inline-block; font-size: 15px; font-weight: 600;
    color: #47BB5C; text-decoration: none; transition: all 0.2s;
}
.svc-step-content .step-link:hover { text-decoration: underline; }

/* ── Visual Cards ── */
.svc-visual-card {
    background: #fff; border: 2px solid #e2e8f0; border-radius: 14px;
    padding: 28px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.svc-step-blue .svc-visual-card { border-color: #bae6fd; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.scene-header {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: #94a3b8; margin-bottom: 16px; display: block;
}

/* ── Resume Writing: Conversation + Result ── */
.svc-phone-convo { display: flex; flex-direction: column; gap: 8px; }
.svc-bubble {
    padding: 10px 14px; border-radius: 12px; font-size: 13px;
    line-height: 1.5; max-width: 88%; position: relative;
}
.svc-bubble-writer {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    align-self: flex-start; border-bottom-left-radius: 4px;
}
.svc-bubble-you {
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    align-self: flex-end; border-bottom-right-radius: 4px;
}
.svc-bubble .bub-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 3px; display: block;
}
.svc-bubble-writer .bub-label { color: #3b82f6; }
.svc-bubble-you .bub-label { color: #47BB5C; }
.svc-convo-result {
    margin-top: 10px; padding: 10px 14px; background: #f0fdf4;
    border: 2px solid #bbf7d0; border-radius: 8px;
}
.svc-convo-result .result-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #47BB5C; margin-bottom: 4px; display: block;
}
.svc-convo-result .result-text {
    font-size: 13px; color: #166534; font-weight: 500; line-height: 1.5;
}

/* ── Distribution: Network visualization ── */
.svc-network { position: relative; }
.svc-network-center {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg, #1f295e, #3b82f6);
    color: #fff !important; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; text-align: center; line-height: 1.2;
    margin: 0 auto 16px; box-shadow: 0 4px 16px rgba(31,41,94,0.2);
}
.svc-network-rings { display: flex; flex-direction: column; gap: 8px; }
.svc-network-ring {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; font-size: 12px;
}
.ring-icon {
    width: 32px; height: 32px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.ring-info { flex: 1; }
.ring-name { font-weight: 600; color: #1a1a1a; display: block; font-size: 13px; }
.ring-detail { font-size: 11px; color: #64748b; }
.ring-count {
    font-size: 14px; font-weight: 700; color: #1f295e;
    background: #f1f5f9; padding: 4px 10px; border-radius: 6px;
}
.ring-tech { background: #eff6ff; }
.ring-tech .ring-icon { background: #dbeafe; color: #1e40af; }
.ring-finance { background: #fefce8; }
.ring-finance .ring-icon { background: #fef3c7; color: #92400e; }
.ring-health { background: #f0fdf4; }
.ring-health .ring-icon { background: #dcfce7; color: #166534; }
.ring-eng { background: #faf5ff; }
.ring-eng .ring-icon { background: #f3e8ff; color: #7c3aed; }
.svc-network-total {
    margin-top: 12px; text-align: center; padding: 10px;
    background: #f0fdf4; border: 2px solid #bbf7d0; border-radius: 8px;
}
.svc-network-total .nt-num { font-size: 28px; font-weight: 700; color: #166534; display: block; }
.svc-network-total .nt-label { font-size: 11px; color: #47BB5C; text-transform: uppercase; font-weight: 600; }

/* ── LinkedIn: Profile comparison ── */
.svc-linkedin-comp { display: flex; flex-direction: column; gap: 10px; }
.svc-li-profile { padding: 14px; border-radius: 10px; font-size: 12px; }
.svc-li-before { background: #fef2f2; border: 1px solid #fecaca; }
.svc-li-after { background: #f0fdf4; border: 1px solid #bbf7d0; }
.svc-li-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.svc-li-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.svc-li-before .svc-li-avatar { background: #fee2e2; color: #991b1b; }
.svc-li-after .svc-li-avatar { background: #dcfce7; color: #166534; }
.svc-li-name { font-weight: 700; font-size: 14px; color: #1a1a1a; }
.svc-li-headline { font-size: 12px; line-height: 1.4; margin-top: 1px; }
.svc-li-before .svc-li-headline { color: #991b1b; }
.svc-li-after .svc-li-headline { color: #166534; }
.svc-li-stats { display: flex; gap: 12px; margin-top: 8px; padding-top: 8px; }
.svc-li-before .svc-li-stats { border-top: 1px solid #fecaca; }
.svc-li-after .svc-li-stats { border-top: 1px solid #bbf7d0; }
.svc-li-stat { text-align: center; flex: 1; }
.svc-li-stat .ls-num { font-size: 16px; font-weight: 700; display: block; }
.svc-li-before .ls-num { color: #991b1b; }
.svc-li-after .ls-num { color: #166534; }
.svc-li-stat .ls-lbl { font-size: 10px; color: #64748b; text-transform: uppercase; }
.svc-li-arrow { text-align: center; font-size: 18px; color: #47BB5C; font-weight: 700; }

/* ── 2nd Resume: Two paths visual ── */
.svc-two-paths { display: flex; gap: 10px; }
.svc-path-card {
    flex: 1; padding: 14px; border-radius: 10px; font-size: 12px;
    border: 2px solid; position: relative;
}
.svc-path-a { border-color: #3b82f6; background: #eff6ff; }
.svc-path-b { border-color: #8b5cf6; background: #faf5ff; }
.svc-path-badge {
    position: absolute; top: -10px; left: 14px;
    font-size: 10px; font-weight: 700; padding: 2px 10px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.svc-path-a .svc-path-badge { background: #3b82f6; color: #fff; }
.svc-path-b .svc-path-badge { background: #8b5cf6; color: #fff; }
.svc-path-title { font-size: 15px; font-weight: 700; margin: 6px 0 4px; display: block; }
.svc-path-a .svc-path-title { color: #1e40af; }
.svc-path-b .svc-path-title { color: #6d28d9; }
.svc-path-focus { font-size: 11px; color: #475569; line-height: 1.5; margin-bottom: 10px; }
.svc-path-bullets { display: flex; flex-direction: column; gap: 4px; }
.svc-path-bullet { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #475569; }
.svc-path-bullet .pb-icon { font-size: 12px; flex-shrink: 0; }
.svc-path-a .pb-icon { color: #3b82f6; }
.svc-path-b .pb-icon { color: #8b5cf6; }
.svc-paths-note {
    margin-top: 12px; padding: 10px; background: #fefce8;
    border: 1px solid #fde68a; border-radius: 8px;
    font-size: 12px; color: #92400e; text-align: center; font-weight: 500;
}

/* ── Outplacement: Employer dashboard ── */
.svc-employer-dash { }
.svc-dash-header {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e2e8f0;
}
.svc-dash-logo {
    width: 40px; height: 40px; border-radius: 8px;
    background: linear-gradient(135deg, #1f295e, #3b82f6);
    display: flex; align-items: center; justify-content: center;
    color: #fff !important; font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.svc-dash-company { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.svc-dash-plan { font-size: 11px; color: #47BB5C; font-weight: 600; }
.svc-emp-rows { display: flex; flex-direction: column; gap: 8px; }
.svc-emp-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: 12px;
}
.svc-emp-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: #e2e8f0; display: flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: 600;
    color: #475569; flex-shrink: 0;
}
.svc-emp-name { font-weight: 600; color: #1a1a1a; flex: 1; }
.svc-emp-status { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 10px; }
.status-complete { background: #dcfce7; color: #166534; }
.status-writing { background: #dbeafe; color: #1e40af; }
.status-interview { background: #fef3c7; color: #92400e; }
.svc-dash-stats { display: flex; gap: 12px; margin-top: 12px; }
.svc-dash-stat {
    flex: 1; text-align: center; padding: 10px; border-radius: 8px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
}
.svc-dash-stat .ds-num { font-size: 20px; font-weight: 700; color: #1f295e; display: block; }
.svc-dash-stat .ds-lbl { font-size: 10px; color: #718096; text-transform: uppercase; }

/* ── Employer Divider ── */
.svc-divider {
    padding: 48px 0; text-align: center; position: relative; z-index: 1;
    background: #fff; border-top: 3px solid #47BB5C; border-bottom: 3px solid #47BB5C;
}
.svc-divider-inner { max-width: 600px; margin: 0 auto; }
.svc-divider .divider-eyebrow {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 2px; color: #47BB5C; margin-bottom: 10px; display: block;
}
.svc-divider h2 { color: #1f295e; font-size: 32px; margin: 0 0 8px; line-height: 1.3; }
.svc-divider .divider-sub { font-size: 16px; color: #475569; line-height: 1.6; }

/* ── FAQ ── */
.svc-faq {
    padding: 64px 0; background: #f7f8fa; border-top: 1px solid #e2e8f0;
}
.svc-faq h2 { text-align: center; margin-bottom: 40px; color: #1a1a1a; }
.svc-faq-list {
    max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
}
.svc-faq-item {
    background: #fff; border: 2px solid #e2e8f0; border-radius: 10px; padding: 24px 28px;
}
.svc-faq-item h3 { margin: 0 0 8px 0; font-size: 17px; color: #1f295e; }
.svc-faq-item p { margin: 0; line-height: 1.7; color: #4a5568; font-size: 15px; }
.svc-faq-item a { color: #47BB5C; font-weight: 500; text-decoration: none; }
.svc-faq-item a:hover { text-decoration: underline; }

/* ── CTA ── */
.svc-cta {
    padding: 56px 0; text-align: center;
    background: linear-gradient(135deg, #1f295e 0%, #2d3a7c 100%); color: #fff;
}
.svc-cta h2 { color: #fff; margin-bottom: 12px; }
.svc-cta p { max-width: 520px; margin: 0 auto 24px; color: rgba(255,255,255,0.8); line-height: 1.6; }
.svc-cta .cta-btn-green {
    display: inline-block; background: #47BB5C; color: #fff;
    padding: 14px 28px; border-radius: 8px; font-weight: 600; text-decoration: none;
    margin: 0 6px 10px; transition: background 0.2s;
}
.svc-cta .cta-btn-green:hover { background: #3da04d; color: #fff; text-decoration: none; }
.svc-cta .cta-btn-outline {
    display: inline-block; color: #fff; padding: 14px 28px;
    border-radius: 8px; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3); margin: 0 6px 10px; transition: all 0.2s;
}
.svc-cta .cta-btn-outline:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.svc-cta .cta-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 12px; }

/* ── Responsive — Tablet ── */
@media (max-width: 900px) {
    .svc-hero-layout { grid-template-columns: 1fr; }
    .svc-hero-content { text-align: center; }
    .svc-hero-content .hero-desc { margin-left: auto; margin-right: auto; }
    .svc-stats-row { justify-content: center; }
    .svc-hero-buttons { justify-content: center; }
    .svc-hero-image { text-align: center; margin-top: 24px; }
    .svc-hero-image img { max-width: 340px; margin: 0 auto; }
    /* v2.0 FIX: Reduced from 80px to 56px to prevent text squishing */
    .svc-journey::before { left: 28px; }
    .svc-step-layout { grid-template-columns: 56px 1fr; }
    .svc-step-node { grid-column: 1 !important; grid-row: 1 / 3; align-self: start; padding-top: 4px; }
    .svc-step-content { grid-column: 2 !important; grid-row: 1; padding: 0; }
    .svc-step-visual { grid-column: 2 !important; grid-row: 2; padding: 16px 0 0; }
    /* v2.0 FIX: Reduced icon from 64px to 44px */
    .svc-step-icon {
        width: 44px; height: 44px; font-size: 20px; border-width: 3px;
    }
}
@media (max-width: 768px) {
    .svc-hero-content .svc-hero-headline,
    .svc-hero-content h1 { font-size: 30px; }
    .svc-stats-row { gap: 28px; }
    .svc-stat-item .stat-number { font-size: 26px; }
    .svc-hero-buttons { flex-direction: column; }
    .svc-hero-buttons .btn-green,
    .svc-hero-buttons .btn-ghost { width: 100%; text-align: center; }
    .svc-step { padding: 48px 0; }
    .svc-two-paths { flex-direction: column; }
}
@media (max-width: 480px) {
    .svc-stats-row { flex-wrap: wrap; gap: 20px; }
}


/* ================================================
   SOLUTIONS BY SITUATION HUB (sol-* classes)
   ================================================ */

/* ── Hero ── */
.sol-hero {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%) !important;
    padding: 52px 0 60px;
    position: relative;
    overflow: hidden;
}

.sol-hero-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: center;
}
.sol-hero-content .eyebrow-text {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #1f295e; margin-bottom: 14px; display: block;
}
/* v2.0: Now targets <p> instead of <h1> — header H1 is the only H1 */
.sol-hero-content .sol-hero-headline,
.sol-hero-content h1 {
    font-size: 40px; line-height: 1.2; color: #1f295e; margin: 0 0 20px 0;
    font-weight: 700;
}
.sol-hero-content .sol-hero-headline em,
.sol-hero-content h1 em { font-style: italic; color: #47BB5C; }
.sol-hero-content .hero-desc {
    font-size: 17px; line-height: 1.75; color: #475569;
    margin-bottom: 32px; max-width: 560px;
}
.sol-stats-row { display: flex; gap: 48px; margin-bottom: 32px; }
.sol-stat-item .stat-number {
    display: block; font-size: 32px; font-weight: 700; color: #1f295e; line-height: 1.1;
}
.sol-stat-item .stat-label { display: block; font-size: 13px; color: #64748b; margin-top: 4px; }
.sol-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.sol-hero-buttons .btn-green {
    display: inline-block; background: #47BB5C; color: #fff;
    padding: 14px 28px; border-radius: 8px; font-weight: 600;
    font-size: 15px; text-decoration: none; transition: background 0.2s;
}
.sol-hero-buttons .btn-green:hover { background: #3da04d; color: #fff; text-decoration: none; }
.sol-hero-buttons .btn-ghost {
    display: inline-block; background: #fff; color: #1f295e;
    padding: 14px 28px; border-radius: 8px; font-weight: 600;
    font-size: 15px; text-decoration: none; border: 2px solid #1f295e; transition: all 0.2s;
}
.sol-hero-buttons .btn-ghost:hover { background: #1f295e; color: #fff; text-decoration: none; }
.sol-hero-image { text-align: right; }
.sol-hero-image img { max-width: 100%; height: auto; display: block; margin-left: auto; }

/* ── Opening ── */
.sol-opening {
    padding: 56px 0;
    background: linear-gradient(135deg, #f0faf2 0%, #e8f5eb 100%);
    text-align: center; border-bottom: 1px solid #d4edda;
}
.sol-opening-inner { max-width: 720px; margin: 0 auto; }
.sol-opening h2 { font-size: 30px; color: #1a1a1a; margin-bottom: 16px; line-height: 1.3; }
.sol-opening p { font-size: 18px; color: #4a5568; line-height: 1.8; }
.sol-opening .highlight-line {
    display: inline-block;
    background: linear-gradient(to bottom, transparent 60%, rgba(71,187,92,0.15) 60%);
    padding: 0 4px;
}

/* ── Journey ── */
.sol-journey { position: relative; padding: 0; }
.sol-journey::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #47BB5C, #1f295e, #47BB5C, #bae6fd, #47BB5C);
    transform: translateX(-50%); z-index: 0;
}
.sol-step { position: relative; padding: 80px 0; z-index: 1; }
.sol-step:first-child { padding-top: 64px; }
.sol-step:last-child { padding-bottom: 64px; }
.sol-step-light { background: #f7f8fa; }
.sol-step-white { background: #fff; }
.sol-step-blue { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%); }

.sol-step-layout {
    display: grid; grid-template-columns: 1fr 80px 1fr;
    gap: 0; align-items: center;
}
.sol-step-node {
    display: flex; justify-content: center; align-items: center;
    position: relative; z-index: 2;
}
.sol-step-icon {
    width: 64px; height: 64px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; border: 4px solid #47BB5C;
    box-shadow: 0 4px 16px rgba(71,187,92,0.15); z-index: 3;
}
.sol-step-content { padding: 0 40px; }
.sol-step-visual { padding: 0 40px; }
.sol-step-left .sol-step-content { grid-column: 1; }
.sol-step-left .sol-step-node { grid-column: 2; }
.sol-step-left .sol-step-visual { grid-column: 3; }
.sol-step-right .sol-step-visual { grid-column: 1; }
.sol-step-right .sol-step-node { grid-column: 2; }
.sol-step-right .sol-step-content { grid-column: 3; }

.sol-step-content .step-eyebrow {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #47BB5C; margin-bottom: 8px; display: block;
}
.sol-step-content h3 { font-size: 28px; color: #1a1a1a; margin: 0 0 6px 0; line-height: 1.2; }
.sol-step-content .step-subtitle {
    font-size: 15px; font-weight: 600; color: #1f295e; margin-bottom: 14px; display: block;
}
.sol-step-content .step-desc {
    font-size: 16px; line-height: 1.7; color: #4a5568; margin-bottom: 16px;
}
.sol-step-content .step-quote {
    font-size: 15px; font-style: italic; color: #718096;
    border-left: 3px solid #47BB5C; padding-left: 16px; margin: 16px 0; line-height: 1.6;
}
.sol-step-content .step-link {
    display: inline-block; font-size: 15px; font-weight: 600;
    color: #47BB5C; text-decoration: none; transition: all 0.2s;
}
.sol-step-content .step-link:hover { text-decoration: underline; }

/* ── CREATIVE VISUAL CARDS ── */
.sol-visual-card {
    background: #fff; border: 2px solid #e2e8f0;
    border-radius: 14px; padding: 28px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.sol-step-blue .sol-visual-card { border-color: #bae6fd; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

/* Resume snippet mock */
.resume-mock {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 16px; font-size: 12px; line-height: 1.5; color: #475569;
    position: relative;
}
.resume-mock .mock-name {
    font-size: 16px; font-weight: 700; color: #1f295e; margin-bottom: 2px;
}
.resume-mock .mock-title {
    font-size: 12px; color: #47BB5C; font-weight: 600; margin-bottom: 10px;
}
.resume-mock .mock-line {
    height: 6px; background: #e2e8f0; border-radius: 3px; margin-bottom: 6px;
}
.resume-mock .mock-line-short { width: 65%; }
.resume-mock .mock-line-med { width: 85%; }
.resume-mock .mock-highlight {
    background: #f0fdf4; border-left: 3px solid #47BB5C;
    padding: 6px 10px; margin: 8px 0; border-radius: 0 4px 4px 0;
    font-size: 11px; color: #166534; font-weight: 500;
}
.resume-mock .mock-badge {
    position: absolute; top: 12px; right: 12px; background: #47BB5C;
    color: #fff; font-size: 9px; font-weight: 700; padding: 3px 8px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Before → After transformation */
.transform-visual {
    display: flex; flex-direction: column; gap: 12px;
}
.transform-stage {
    padding: 14px 16px; border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.transform-before {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
}
.transform-after {
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.transform-arrow {
    text-align: center; font-size: 20px; color: #47BB5C; font-weight: 700;
}
.transform-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 4px; display: block;
}

/* Career path */
.career-path {
    display: flex; align-items: center; gap: 0; margin: 12px 0;
}
.path-node {
    width: 42px; height: 42px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 14px;
    flex-shrink: 0; border: 2px solid;
}
.path-node-old { background: #fef2f2; border-color: #fecaca; }
.path-node-bridge { background: #fff7ed; border-color: #fdba74; }
.path-node-new { background: #f0fdf4; border-color: #86efac; }
.path-connector {
    flex: 1; height: 3px; position: relative;
}
.path-connector::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(to right, #fca5a5, #fdba74, #86efac);
    border-radius: 2px;
}
.path-connector::after {
    content: '▸'; position: absolute; right: -4px; top: -8px;
    font-size: 14px; color: #86efac;
}

/* Progress ladder */
.ladder-visual { display: flex; flex-direction: column; gap: 0; }
.ladder-rung {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px; font-size: 12px;
    font-weight: 500; margin-bottom: 2px; position: relative;
}
.ladder-rung::before {
    content: ''; width: 2px; height: 12px; background: #d1d5db;
    position: absolute; top: -8px; left: 22px;
}
.ladder-rung:first-child::before { display: none; }
.ladder-dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.rung-past { color: #94a3b8; }
.rung-past .ladder-dot { background: #d1d5db; }
.rung-current { color: #1f295e; font-weight: 700; background: #eff6ff; }
.rung-current .ladder-dot { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.rung-target { color: #166534; font-weight: 700; background: #f0fdf4; }
.rung-target .ladder-dot { background: #47BB5C; box-shadow: 0 0 0 3px rgba(71,187,92,0.2); }

/* Inbox visual */
.inbox-visual { display: flex; flex-direction: column; gap: 6px; }
.inbox-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px; font-size: 12px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.inbox-status {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.inbox-rejected .inbox-status { background: #ef4444; }
.inbox-rejected { color: #94a3b8; text-decoration: line-through; }
.inbox-pending .inbox-status { background: #fbbf24; }
.inbox-pending { color: #92400e; }
.inbox-interview .inbox-status { background: #47BB5C; }
.inbox-interview {
    color: #166534; font-weight: 600;
    background: #f0fdf4; border-color: #bbf7d0;
}
.inbox-divider {
    text-align: center; font-size: 11px; font-weight: 700;
    color: #47BB5C; padding: 4px 0;
    border-top: 2px dashed #bbf7d0; margin: 4px 0;
}

/* Gap timeline */
.gap-timeline {
    display: flex; align-items: center; gap: 0; margin: 12px 0;
}
.gap-block {
    flex: 1; height: 28px; border-radius: 4px; display: flex;
    align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.3px;
}
.gap-filled { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.gap-empty {
    background: repeating-linear-gradient(
        45deg, #fef2f2, #fef2f2 4px, #fff 4px, #fff 8px
    );
    border: 1px dashed #fca5a5; color: #dc2626;
}
.gap-fixed { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.gap-arrow { flex-shrink: 0; font-size: 16px; color: #47BB5C; margin: 0 4px; }

/* Map visual */
.map-visual { position: relative; padding: 16px; }
.map-pins { display: flex; justify-content: space-between; align-items: center; }
.map-pin {
    text-align: center; padding: 10px 14px; border-radius: 10px; font-size: 12px;
}
.map-pin-from { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.map-pin-to { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.map-pin .pin-city { font-weight: 700; font-size: 14px; display: block; margin-bottom: 2px; }
.map-pin .pin-detail { font-size: 11px; }
.map-flight {
    flex: 1; text-align: center; position: relative;
}
.map-flight::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 2px; background: linear-gradient(to right, #fca5a5, #94a3b8, #86efac);
    border-radius: 1px;
}
.map-flight-icon { position: relative; font-size: 20px; z-index: 1; }

/* Two worlds visual */
.worlds-visual { display: flex; gap: 8px; }
.world-card {
    flex: 1; padding: 14px; border-radius: 8px; font-size: 12px;
    text-align: center;
}
.world-old { background: #fff7ed; border: 1px solid #fdba74; }
.world-new { background: #f0fdf4; border: 1px solid #bbf7d0; }
.world-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.world-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 4px;
}
.world-items { font-size: 11px; line-height: 1.6; color: #64748b; }
.worlds-merge {
    display: flex; align-items: center; font-size: 18px; color: #47BB5C;
    font-weight: 700; padding: 0 2px;
}

/* Card stat row */
.card-stat-row {
    display: flex; gap: 16px; margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.card-stat { text-align: center; flex: 1; }
.card-stat .cs-num { font-size: 22px; font-weight: 700; color: #1f295e; display: block; }
.card-stat .cs-lbl { font-size: 10px; color: #718096; text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Included ── */
.sol-included {
    padding: 64px 0;
    background: linear-gradient(135deg, #eef0f7 0%, #e8eaf4 100%);
    border-top: 1px solid #d4d8e8;
}
.sol-included h2 { text-align: center; margin-bottom: 12px; color: #1a1a1a; }
.sol-included .included-desc {
    text-align: center; color: #4a5568; max-width: 520px;
    margin: 0 auto 40px; line-height: 1.7;
}
.sol-check-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 16px; max-width: 900px; margin: 0 auto;
}
.sol-check-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 18px;
    background: #fff; border-radius: 10px; border: 1px solid #d4d8e8;
    box-shadow: 0 2px 8px rgba(31,41,94,0.04);
}
.sol-check-icon { color: #47BB5C; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sol-check-text strong { display: block; font-size: 14px; color: #1a1a1a; margin-bottom: 2px; }
.sol-check-text span { font-size: 12px; color: #718096; line-height: 1.4; }

/* ── FAQ ── */
.sol-faq {
    padding: 64px 0; background: #f7f8fa; border-top: 1px solid #e2e8f0;
}
.sol-faq h2 { text-align: center; margin-bottom: 40px; color: #1a1a1a; }
.sol-faq-list {
    max-width: 800px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 12px;
}
.sol-faq-item {
    background: #fff; border: 2px solid #e2e8f0;
    border-radius: 10px; padding: 24px 28px;
}
.sol-faq-item h3 { margin: 0 0 8px 0; font-size: 17px; color: #1f295e; }
.sol-faq-item p { margin: 0; line-height: 1.7; color: #4a5568; font-size: 15px; }
.sol-faq-item a { color: #47BB5C; font-weight: 500; text-decoration: none; }
.sol-faq-item a:hover { text-decoration: underline; }

/* ── CTA ── */
.sol-cta {
    padding: 56px 0; text-align: center;
    background: linear-gradient(135deg, #1f295e 0%, #2d3a7c 100%); color: #fff;
}
.sol-cta h2 { color: #fff; margin-bottom: 12px; }
.sol-cta p { max-width: 520px; margin: 0 auto 24px; color: rgba(255,255,255,0.8); line-height: 1.6; }
.sol-cta .cta-btn-green {
    display: inline-block; background: #47BB5C; color: #fff;
    padding: 14px 28px; border-radius: 8px; font-weight: 600;
    text-decoration: none; margin: 0 6px 10px; transition: background 0.2s;
}
.sol-cta .cta-btn-green:hover { background: #3da04d; color: #fff; text-decoration: none; }
.sol-cta .cta-btn-outline {
    display: inline-block; color: #fff; padding: 14px 28px;
    border-radius: 8px; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3); margin: 0 6px 10px; transition: all 0.2s;
}
.sol-cta .cta-btn-outline:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.sol-cta .cta-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 12px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .sol-hero-layout { grid-template-columns: 1fr; }
    .sol-hero-content { text-align: center; }
    .sol-hero-content .hero-desc { margin-left: auto; margin-right: auto; }
    .sol-stats-row { justify-content: center; }
    .sol-hero-buttons { justify-content: center; }
    .sol-hero-image { text-align: center; margin-top: 24px; }
    .sol-hero-image img { max-width: 340px; margin: 0 auto; }
    /* v2.0 FIX: Reduced from 80px to 56px to prevent text squishing */
    .sol-journey::before { left: 28px; }
    .sol-step-layout { grid-template-columns: 56px 1fr; }
    .sol-step-node { grid-column: 1 !important; grid-row: 1 / 3; align-self: start; padding-top: 4px; }
    .sol-step-content { grid-column: 2 !important; grid-row: 1; padding: 0; }
    .sol-step-visual { grid-column: 2 !important; grid-row: 2; padding: 16px 0 0; }
    /* v2.0 FIX: Reduced step icon from 64px to 44px */
    .sol-step-icon {
        width: 44px; height: 44px; font-size: 20px; border-width: 3px;
    }
}
@media (max-width: 768px) {
    .sol-hero-content .sol-hero-headline,
    .sol-hero-content h1 { font-size: 30px; }
    .sol-stats-row { gap: 28px; }
    .sol-stat-item .stat-number { font-size: 26px; }
    .sol-hero-buttons { flex-direction: column; }
    .sol-hero-buttons .btn-green,
    .sol-hero-buttons .btn-ghost { width: 100%; text-align: center; }
    .sol-check-grid { grid-template-columns: 1fr; }
    .sol-step { padding: 48px 0; }
    .career-path { flex-wrap: wrap; justify-content: center; }
    .worlds-visual { flex-direction: column; }
    .map-pins { flex-direction: column; gap: 8px; }
    .map-flight { display: none; }
}
@media (max-width: 480px) {
    .sol-stats-row { flex-wrap: wrap; gap: 20px; }
}


/* ================================================
   LOCATIONS HUB (hub-* classes)
   City pages hub with competition visualization
   ================================================ */

/* ── Hero (Light Blue matching other hubs) ── */
.hub-hero-section {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%) !important;
    padding: 52px 0 60px; position: relative; overflow: hidden;
}

.hub-hero-layout { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; }
.hub-hero-content .eyebrow-text {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #1f295e; margin-bottom: 14px; display: block;
}
/* v2.0: Now targets <p> as well for single-H1 compliance */
.hub-hero-content .hub-hero-headline,
.hub-hero-content h1 {
    font-size: 40px; line-height: 1.2; color: #1f295e; margin: 0 0 20px 0;
    font-weight: 700;
}
.hub-hero-content .hub-hero-headline em,
.hub-hero-content h1 em { font-style: italic; color: #47BB5C; }
.hub-hero-content .hero-desc {
    font-size: 17px; line-height: 1.75; color: #475569; margin-bottom: 32px; max-width: 560px;
}
.hub-stats-row { display: flex; gap: 48px; margin-bottom: 32px; }
.hub-stat-item .stat-number { display: block; font-size: 32px; font-weight: 700; color: #1f295e; line-height: 1.1; }
.hub-stat-item .stat-label { display: block; font-size: 13px; color: #64748b; margin-top: 4px; }
.hub-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hub-hero-buttons .btn-green {
    display: inline-block; background: #47BB5C; color: #fff;
    padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px;
    text-decoration: none; transition: background 0.2s;
}
.hub-hero-buttons .btn-green:hover { background: #3da04d; color: #fff; text-decoration: none; }
.hub-hero-buttons .btn-ghost {
    display: inline-block; background: #fff; color: #1f295e;
    padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px;
    text-decoration: none; border: 2px solid #1f295e; transition: all 0.2s;
}
.hub-hero-buttons .btn-ghost:hover { background: #1f295e; color: #fff; text-decoration: none; }
.hub-hero-image { text-align: right; }
.hub-hero-image img { max-width: 100%; height: auto; display: block; margin-left: auto; }

/* ── Opening Promise ── */
.hub-promise {
    padding: 36px 0; background: linear-gradient(135deg, #f0faf2 0%, #e8f5eb 100%);
    text-align: center; border-bottom: 1px solid #d4edda;
}
.hub-promise-inner { max-width: 720px; margin: 0 auto; }
.hub-promise h2 { font-size: 26px; color: #1a1a1a; margin-bottom: 10px; line-height: 1.3; }
.hub-promise p { font-size: 16px; color: #4a5568; line-height: 1.7; margin: 0; }
.hub-promise .highlight-line {
    display: inline-block; background: linear-gradient(to bottom, transparent 60%, rgba(71,187,92,0.15) 60%); padding: 0 4px;
}

/* ── Locations Section ── */
.hub-locations { padding: 64px 0; background: #f7f8fa; }
.hub-locations-intro { text-align: center; margin-bottom: 36px; }
.hub-locations-intro .eyebrow-green {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #47BB5C; display: block; margin-bottom: 8px;
}
.hub-locations-intro h2 { color: #1a1a1a; margin-bottom: 8px; }
.hub-locations-intro p { color: #4a5568; max-width: 560px; margin: 0 auto; }

/* Country Tabs */
.hub-country-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.hub-country-tab {
    padding: 14px 28px; border-radius: 8px; border: 2px solid #e2e8f0;
    background: #fff; cursor: pointer; font-weight: 600; font-size: 15px;
    color: #475569; transition: all 0.2s; display: flex; align-items: center; gap: 8px;
}
.hub-country-tab:hover { border-color: #47BB5C; }
.hub-country-tab.active { background: #1f295e; border-color: #1f295e; color: #fff; }
.hub-country-tab .flag { font-size: 18px; }
.hub-country-tab .count-badge {
    font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.hub-country-tab.active .count-badge { background: rgba(255,255,255,0.2); color: #fff; }
.hub-country-tab:not(.active) .count-badge { background: #f1f5f9; color: #64748b; }
.hub-panel { display: none; }
.hub-panel.active { display: block; }

/* City Cards */
.hub-cities-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.hub-city-card {
    background: #fff; border: 2px solid #e2e8f0; border-radius: 14px;
    padding: 24px 28px; transition: all 0.2s; display: flex; flex-direction: row;
    gap: 24px; align-items: center; text-decoration: none; position: relative;
    overflow: hidden;
}
.hub-city-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: #47BB5C; opacity: 0; transition: opacity 0.2s;
}
.hub-city-card:hover {
    border-color: #47BB5C; box-shadow: 0 6px 20px rgba(71,187,92,0.1);
    transform: translateY(-2px);
}
.hub-city-card:hover::before { opacity: 1; }

.hub-city-info { flex: 1; min-width: 0; }
.hub-city-info h3 { margin: 0 0 2px 0; color: #1a1a1a; font-size: 20px; }
.hub-city-info .card-state { font-size: 13px; color: #718096; display: block; margin-bottom: 12px; }

.hub-city-stats-row { display: flex; gap: 20px; margin-bottom: 10px; }
.hub-city-stat .stat-val { font-size: 20px; font-weight: 700; color: #1f295e; display: block; line-height: 1.1; }
.hub-city-stat .stat-lbl { font-size: 11px; color: #64748b; line-height: 1.3; }

/* Competition bar */
.hub-competition-bar {
    height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden;
    margin-bottom: 6px; max-width: 200px;
}
.hub-competition-fill {
    height: 100%; border-radius: 3px; transition: width 0.6s ease;
}
.competition-low { background: #47BB5C; }
.competition-med { background: #fbbf24; }
.competition-high { background: #f97316; }
.competition-intense { background: #ef4444; }

.hub-competition-label {
    font-size: 11px; font-weight: 600; margin-bottom: 10px; display: block;
}
.comp-label-low { color: #166534; }
.comp-label-med { color: #92400e; }
.comp-label-high { color: #c2410c; }
.comp-label-intense { color: #dc2626; }

/* Competition legend */
.hub-legend {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; margin-bottom: 28px; padding: 14px 20px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    max-width: 700px; margin-left: auto; margin-right: auto;
}
.hub-legend-title {
    font-size: 12px; font-weight: 700; color: #1f295e;
    text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.hub-legend-items { display: flex; gap: 16px; flex-wrap: wrap; }
.hub-legend-item {
    display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569;
}
.legend-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.legend-dot-low { background: #47BB5C; }
.legend-dot-med { background: #fbbf24; }
.legend-dot-high { background: #f97316; }
.legend-dot-intense { background: #ef4444; }

.hub-city-employers .emp-heading {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #94a3b8; display: block; margin-bottom: 2px;
}
.hub-city-employers .emp-names { font-size: 12px; color: #64748b; line-height: 1.4; }

.hub-city-action { flex-shrink: 0; }
.hub-city-link {
    display: inline-block; background: #47BB5C; color: #fff; padding: 10px 20px;
    border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none;
    transition: background 0.2s; white-space: nowrap;
}
.hub-city-link:hover { background: #3da04d; color: #fff; text-decoration: none; }

/* ── FAQ ── */
.hub-faq-section { padding: 64px 0; background: #fff; border-top: 1px solid #e2e8f0; }
.hub-faq-section h2 { text-align: center; margin-bottom: 40px; color: #1a1a1a; }
.hub-faq-grid {
    max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
}
.hub-faq-item {
    background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 10px; padding: 24px 28px;
}
.hub-faq-item h3 { margin: 0 0 8px 0; font-size: 17px; color: #1f295e; }
.hub-faq-item p { margin: 0; line-height: 1.7; color: #4a5568; font-size: 15px; }
.hub-faq-item a { color: #47BB5C; font-weight: 500; text-decoration: none; }
.hub-faq-item a:hover { text-decoration: underline; }

/* ── CTA ── */
.hub-cta-section {
    padding: 56px 0; text-align: center;
    background: linear-gradient(135deg, #1f295e 0%, #2d3a7c 100%); color: #fff;
}
.hub-cta-section h2 { color: #fff; margin-bottom: 12px; }
.hub-cta-section p { max-width: 520px; margin: 0 auto 24px; color: rgba(255,255,255,0.8); line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .hub-hero-layout { grid-template-columns: 1fr; }
    .hub-hero-content { text-align: center; }
    .hub-hero-content .hero-desc { margin-left: auto; margin-right: auto; }
    .hub-stats-row { justify-content: center; }
    .hub-hero-buttons { justify-content: center; }
    .hub-hero-image { text-align: center; margin-top: 24px; }
    .hub-hero-image img { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 768px) {
    .hub-hero-content .hub-hero-headline,
    .hub-hero-content h1 { font-size: 30px; }
    .hub-stats-row { gap: 28px; }
    .hub-stat-item .stat-number { font-size: 26px; }
    .hub-hero-buttons { flex-direction: column; }
    .hub-hero-buttons .btn-green,
    .hub-hero-buttons .btn-ghost { width: 100%; text-align: center; }
    .hub-cities-grid { grid-template-columns: 1fr; }
    .hub-city-card { flex-direction: column; gap: 16px; }
    .hub-city-action { align-self: stretch; }
    .hub-city-link { display: block; text-align: center; width: 100%; }
    .hub-country-tab { padding: 12px 18px; font-size: 14px; }
    .hub-legend { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
    .hub-stats-row { flex-wrap: wrap; gap: 20px; }
}