/* ============================================
   PRODUCT HIGHLIGHT SECTIONS
   Live Tracking · Route Optimization · Pickup & Drop-off ·
   No-Show Protection · Multi-Branch
   Shares tokens with product.css (--primary-blue, --secondary-blue,
   --gradient, --text-secondary, 1270px container, 36px card radius).
   ============================================ */

.feature-highlight {
    padding: 70px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Alternate white / brand-tinted backgrounds so the highlight sections
   read as a rhythm down the page instead of one long white block,
   without any section overpowering its neighbors.
   Each feature keeps its own background wherever it sits on the page --
   Vehicle Profiles is always tinted, Route Optimization always white --
   so moving a section's position also moves its whole look, background
   included. Page order (mobile-app, product12.blade.php): GPS Tracking,
   Vehicle Profiles, Pickup/Drop-off, Route Optimization. Smart Deposits
   and Multi-Branch live on the main products page (product.blade.php).
   Re-check order with:
   grep -n 'class="feature-highlight' product.blade.php product12.blade.php */
.branch-highlight,
.vehicle-highlight,
.svcaddon-highlight,
.pngap-highlight,
.pdtoggle-highlight {
    background-color: #d8f2fb;
    background-image:
        radial-gradient(circle, rgba(1, 91, 248, 0.16) 1px, transparent 1px),
        linear-gradient(180deg, #e9f8fd 0%, #cdeef9 100%);
    background-size: 22px 22px, 100% 100%;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #01d0fc 0%, #015bf8 100%) 1;
}

.branch-highlight::before,
.vehicle-highlight::before,
.svcaddon-highlight::before,
.pngap-highlight::before,
.pdtoggle-highlight::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(1, 208, 252, 0.32) 0%, rgba(1, 208, 252, 0) 70%);
    pointer-events: none;
}

.noshow-highlight,
.gps-highlight,
.route-highlight,
.pickup-highlight,
.svcprice-highlight,
.svcmenu-highlight,
.pnjourney-highlight {
    border-bottom: 1px solid #eef2f6;
}

.noshow-highlight::before,
.gps-highlight::before,
.route-highlight::before,
.pickup-highlight::before,
.svcprice-highlight::before,
.svcmenu-highlight::before,
.pnjourney-highlight::before {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 176, 0, 0.1) 0%, rgba(255, 176, 0, 0) 70%);
    pointer-events: none;
}

.feature-highlight .section-container {
    max-width: 1270px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.highlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.highlight-grid.reverse .highlight-text {
    order: 2;
}

.highlight-grid.reverse .highlight-visual {
    order: 1;
}

.highlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(1, 208, 252, 0.12) 0%, rgba(1, 91, 248, 0.12) 100%);
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gradient);
    flex-shrink: 0;
}

.badge-dot.pulsing {
    animation: badgeDotPulse 1.6s ease-in-out infinite;
}

@keyframes badgeDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.4); }
}

.highlight-title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--text-primary);
}

.highlight-desc {
    font-size: 16.5px;
    line-height: 1.75;
    color: #4b5563;
    margin-bottom: 28px;
    max-width: 480px;
    padding-left: 18px;
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #01d0fc 0%, #015bf8 100%) 1;
}

.highlight-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.highlight-points li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.highlight-points li i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(1, 208, 252, 0.14) 0%, rgba(1, 91, 248, 0.14) 100%);
    color: var(--primary-blue);
    font-size: 15px;
}

.highlight-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--bg-white);
    box-shadow: 0 6px 20px rgba(1, 91, 248, 0.08);
}

.highlight-stat-chip .stat-num {
    font-size: 20px;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.highlight-stat-chip .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.highlight-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Shared "device/card" shell used by every mockup ===== */
.highlight-mockup {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 36px;
    box-shadow: 0 30px 60px -20px rgba(11, 15, 20, 0.18);
    overflow: hidden;
}

/* ============================================
   1) LIVE GPS TRACKING
   ============================================ */
.gps-map-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #eaf1fb;
}

.map-illustration {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gps-route-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gps-route-path path {
    fill: none;
    stroke: url(#gpsRouteGradient);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 10 10;
    animation: gpsDashMove 2.4s linear infinite;
}

@keyframes gpsDashMove {
    to { stroke-dashoffset: -40; }
}

.gps-pin {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 18px rgba(11, 15, 20, 0.16);
    font-size: 16px;
}

.gps-pin-start {
    top: 58%;
    left: 8%;
    color: #94a3b8;
    z-index: 1;
}

.gps-pin-end {
    top: 16%;
    right: 14%;
    color: #ffb000;
    z-index: 1;
}

.gps-pin-driver {
    top: 42%;
    left: 46%;
    width: 46px;
    height: 46px;
    background: var(--gradient);
    color: #fff;
    z-index: 2;
}

.gps-pin-driver .pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: rgba(1, 91, 248, 0.25);
    animation: gpsPulse 1.8s ease-out infinite;
}

@keyframes gpsPulse {
    0% { transform: scale(0.7); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.gps-eta-card {
    position: absolute;
    left: 20px;
    bottom: 88px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #0b0f14;
    color: #fff;
    padding: 12px 18px;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(11, 15, 20, 0.25);
}

.gps-eta-card .eta-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gps-eta-card .eta-value {
    font-size: 20px;
    font-weight: 800;
}

.gps-chat-bubble {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(11, 15, 20, 0.14);
}

.gps-chat-bubble .chat-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradient);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.gps-chat-bubble .chat-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.gps-chat-bubble .chat-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.gps-chat-bubble .chat-text span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============================================
   2) SMART ROUTE OPTIMIZATION
   ============================================ */
.route-path-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.route-path-svg path {
    fill: none;
    stroke: url(#routeGradient);
    stroke-width: 4;
    stroke-linecap: round;
}

.route-stop {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--primary-blue);
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(11, 15, 20, 0.14);
    transform: translate(-50%, -50%);
}

.route-stop-active {
    width: 44px;
    height: 44px;
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    font-size: 16px;
}

.route-summary-card {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    padding: 16px 18px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(11, 15, 20, 0.14);
}

.route-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.route-summary-row i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(1, 208, 252, 0.14) 0%, rgba(1, 91, 248, 0.14) 100%);
    color: var(--primary-blue);
    font-size: 12.5px;
    flex-shrink: 0;
}

/* ============================================
   3) PICKUP & DROP-OFF CONCIERGE
   ============================================ */
.pickup-mockup {
    padding: 40px 32px;
    display: flex;
    align-items: center;
}

.pickup-steps {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pickup-step {
    position: relative;
    display: flex;
    gap: 18px;
    padding-bottom: 38px;
}

.pickup-step:last-child {
    padding-bottom: 0;
}

.pickup-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 46px;
    bottom: 4px;
    width: 2px;
    background: #e5e9f0;
}

.pickup-step.done:not(:last-child)::before {
    background: var(--gradient);
}

.pickup-step-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #f1f3f6;
    color: #94a3b8;
    font-size: 17px;
}

.pickup-step.done .pickup-step-icon {
    background: var(--gradient);
    color: #fff;
}

.pickup-step.active .pickup-step-icon {
    background: #fff;
    color: var(--primary-blue);
    border: 2.5px solid var(--primary-blue);
    box-shadow: 0 0 0 6px rgba(1, 91, 248, 0.12);
}

.pickup-step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
}

.pickup-step-body .step-time {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.pickup-step.active .step-time {
    color: var(--primary-blue);
}

.pickup-step-body strong {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.pickup-step-body .step-sub {
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* ============================================
   4) SMART DEPOSITS / NO-SHOW REDUCTION
   ============================================ */
.noshow-mockup {
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.noshow-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #0b0f14;
}

.noshow-summary-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #01d0fc;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.noshow-summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.noshow-summary-text strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.noshow-summary-text span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.noshow-summary-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 176, 0, 0.18);
    color: #ffb000;
}

.noshow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.noshow-row.highlighted {
    background: #fff7ed;
    border-color: #ffe3bd;
}

.noshow-customer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.noshow-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gradient);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.noshow-customer-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.noshow-customer-info strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.noshow-history {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.noshow-risk {
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.noshow-risk.low {
    background: #dcfce7;
    color: #16a34a;
}

.noshow-risk.medium {
    background: #fef3c7;
    color: #b45309;
}

.noshow-risk.high {
    background: #ffe4e6;
    color: #dc2626;
}

.noshow-risk-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.noshow-meter {
    width: 64px;
    height: 5px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.noshow-meter-fill {
    height: 100%;
    border-radius: 999px;
}

.noshow-meter-fill.low {
    background: #22c55e;
}

.noshow-meter-fill.medium {
    background: #f59e0b;
}

.noshow-meter-fill.high {
    background: #ef4444;
}

.noshow-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.noshow-footer i {
    font-size: 13px;
    color: #16a34a;
    flex-shrink: 0;
}

.noshow-footer strong {
    color: var(--text-primary);
    font-weight: 800;
}

/* ============================================
   5) MULTI-BRANCH MANAGEMENT
   ============================================ */
.branch-mockup {
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.branch-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #0b0f14;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.branch-switcher i:first-child {
    color: #01d0fc;
}

.branch-switcher span {
    flex: 1;
}

.branch-switcher i:last-child {
    font-size: 12px;
    opacity: 0.6;
}

.branch-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Featured (currently-viewed) branch card ── */
.branch-featured {
    padding: 16px 18px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fc 100%);
    border: 1px solid #e7edf5;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.branch-featured-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.branch-featured-id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.branch-avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    flex-shrink: 0;
    background: var(--gradient);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.branch-featured-id strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
}

.branch-featured-loc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

.branch-featured-loc i {
    font-size: 10px;
}

.branch-live-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
}

.branch-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.branch-featured-stats {
    display: flex;
    gap: 22px;
    padding-top: 12px;
    border-top: 1px dashed #dfe6ee;
}

.branch-featured-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bf-stat-num {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.bf-stat-num i {
    font-size: 11px;
    color: #f59e0b;
}

.bf-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.branch-featured-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 34px;
}

.branch-featured-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: #dbe6f3;
}

.branch-featured-bar.active {
    background: var(--gradient);
}

.branch-featured-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.branch-staff-stack {
    display: flex;
    align-items: center;
}

.branch-staff-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    margin-left: -8px;
}

.branch-staff-avatar:first-child {
    margin-left: 0;
}

.branch-staff-more {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1f5;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    margin-left: -8px;
}

.branch-staff-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ── Other branches, condensed list ── */
.branch-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.branch-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.branch-row-info strong {
    font-size: 13px;
    font-weight: 750;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-row-info span {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

.branch-row i {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* ============================================
   6) MULTIPLE VEHICLE PROFILES
   ============================================ */
.vehicle-mockup {
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.vehicle-header h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.vehicle-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: var(--gradient);
    padding: 7px 13px;
    border-radius: 999px;
}

.vehicle-add-btn i {
    font-size: 11px;
}

.vehicle-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.vehicle-card.default {
    background: #eef8ff;
    border-color: #cfe8fb;
}

.vehicle-swatch {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    color: #fff;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicle-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vehicle-info strong {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-info span {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

.vehicle-default-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dcf3da;
    color: #15803d;
}

.vehicle-chevron {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.5;
}

.vehicle-rebook-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed #e5e9f0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.vehicle-rebook-hint i {
    color: var(--primary-blue);
    font-size: 13px;
}

/* ============================================
   REVIEWS & LOCAL SEARCH
   ============================================ */
.seo-mockup {
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.seo-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #0b0f14;
}

.seo-summary-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #01d0fc;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seo-summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.seo-summary-text strong {
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seo-summary-text span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.seo-summary-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
}

.seo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.seo-row.highlighted {
    background: #eff8ff;
    border-color: #cfe8fb;
}

.seo-row-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 15px;
    color: #fff;
}

.seo-row-avatar.rating {
    background: linear-gradient(135deg, #ffb000, #ff8a00);
}

.seo-row-avatar.google {
    background: #fff;
    color: #4285f4;
    border: 1px solid #eef1f5;
}

.seo-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.seo-row-info strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.seo-row-info span {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seo-row-status {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 999px;
}

.seo-row-status.live {
    background: #dcfce7;
    color: #16a34a;
}

.seo-row-status.sent {
    background: #dbeafe;
    color: #1d4ed8;
}

.seo-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.seo-footer i {
    font-size: 13px;
    color: #16a34a;
    flex-shrink: 0;
}

.seo-footer strong {
    color: var(--text-primary);
    font-weight: 800;
}

/* ============================================
   TIERS, CATALOG & CROSS-PLATFORM BALANCE
   ============================================ */
.tier-mockup {
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tier-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #0b0f14;
}

.tier-summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #ffb000;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tier-summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tier-summary-text strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.tier-summary-text span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.tier-summary-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
}

.tier-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.tier-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient);
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

/* Driven off the wrapper's reveal rather than the bar's own: the bar
   starts at zero width, and a zero-area target is not something to
   trust IntersectionObserver to report as visible. */
.animate-fade-up.visible .tier-progress-fill {
    width: 50%;
}

.tier-progress-label {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.tier-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tier-perk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.tier-perk-chip i {
    color: #015bf8;
    font-size: 12px;
}

.tier-redeem-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #eff8ff;
    border: 1px solid #cfe8fb;
}

.tier-redeem-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    background: var(--gradient);
}

.tier-redeem-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tier-redeem-info strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.tier-redeem-info span {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.tier-redeem-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
}


/* ============================================
   ONLINE SERVICES — PER-VEHICLE PRICING
   ============================================ */
.svcprice-mockup {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
    box-shadow:
        0 2px 0 rgba(11, 15, 20, 0.05),
        30px 40px 70px -25px rgba(1, 91, 248, 0.35),
        50px 70px 110px -35px rgba(11, 15, 20, 0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.svcprice-mockup:hover {
    transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg) translateY(-4px);
}

.svcp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a3a5c 0%, #0b0f14 100%);
}

.svcp-head-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #01d0fc;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svcp-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.svcp-head-text strong {
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
}

.svcp-head-text span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.svcp-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svcp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

/* The size the customer's own vehicle resolves to -- the whole point of the
   section, so it gets the accent treatment rather than sitting flat with
   the other four. */
.svcp-row.active {
    background: #eff8ff;
    border-color: #cfe8fb;
}

.svcp-size {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
}

.svcp-size em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-blue);
}

.svcp-price {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.svcp-row.active .svcp-price {
    color: var(--primary-blue);
}

.svcp-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(34, 197, 94, 0.08);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.svcp-foot i {
    color: #22c55e;
    font-size: 15px;
    flex-shrink: 0;
}

.svcp-foot strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* ============================================
   ONLINE SERVICES — ADD-ONS
   ============================================ */
.svcaddon-mockup {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: perspective(1400px) rotateY(9deg) rotateX(3deg);
    box-shadow:
        0 2px 0 rgba(11, 15, 20, 0.05),
        -30px 40px 70px -25px rgba(1, 91, 248, 0.35),
        -50px 70px 110px -35px rgba(11, 15, 20, 0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.svcaddon-mockup:hover {
    transform: perspective(1400px) rotateY(4deg) rotateX(1.5deg) translateY(-4px);
}

.svca-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.svca-head strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.svca-head span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.svca-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svca-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    box-shadow: 0 2px 8px rgba(11, 15, 20, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.svca-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 15, 20, 0.08);
}

.svca-row.picked {
    background: linear-gradient(135deg, #eafbff 0%, #e3f3ff 100%);
    border-color: rgba(1, 91, 248, 0.22);
    box-shadow: 0 4px 14px rgba(1, 91, 248, 0.12);
}

.svca-row.picked:hover {
    box-shadow: 0 10px 22px rgba(1, 91, 248, 0.2);
}

.svca-tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.6px solid #d6dce4;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    transition: transform 0.25s ease;
}

.svca-row.picked .svca-tick {
    background: linear-gradient(135deg, #01d0fc 0%, #015bf8 100%);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(1, 91, 248, 0.35);
    transform: scale(1.08);
}

.svca-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.svca-price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-secondary);
}

.svca-row.picked .svca-price {
    color: var(--primary-blue);
}

.svca-total {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a3a5c 0%, #0b0f14 100%);
    box-shadow: 0 10px 24px rgba(11, 15, 20, 0.25);
}

.svca-total-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.svca-total-text span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.svca-total-text strong {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}

.svca-total-chip {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(1, 208, 252, 0.22);
    color: #4be0ff;
    box-shadow: inset 0 0 0 1px rgba(1, 208, 252, 0.3);
}

/* ============================================
   ONLINE SERVICES — QUOTE-ONLY / SHOP-ONLY / BRANCHES
   Deliberately not the shared .highlight-grid split every other
   feature-highlight section on this page uses: centered head, then a
   full-width row-list mockup, then a 3-across caption strip underneath.
   ============================================ */
.svcmenu-highlight {
    background: var(--bg-cream, #f4f0e9);
    padding: 64px 0;
}

.svcmenu-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 32px;
}

.svcmenu-title {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 12px 0 10px;
}

.svcmenu-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.svcmenu-mockup-wide {
    max-width: 1080px;
    margin: 0 auto 28px;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 30px 70px -20px rgba(11, 15, 20, 0.15);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svcmenu-mockup-wide .svcm-row {
    border-radius: 18px;
    border: none;
    padding: 16px 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.svcmenu-mockup-wide .svcm-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11, 15, 20, 0.08);
}

/* Tinted to match each row's own icon color instead of one flat white
   repeated three times, so the three service types read apart at a
   glance: cyan/blue for wash, amber for quote-only, grey for shop-only. */
.svcmenu-mockup-wide .svcm-row:nth-child(1) {
    background: linear-gradient(135deg, #eafbff 0%, #e3f3ff 100%);
}

.svcmenu-mockup-wide .svcm-row:nth-child(2) {
    background: linear-gradient(135deg, #fff9ec 0%, #fff2d9 100%);
}

.svcmenu-mockup-wide .svcm-row:nth-child(3) {
    background: linear-gradient(135deg, #f4f5f7 0%, #e8eaee 100%);
}

.svcmenu-mockup-wide .svcm-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.svcmenu-mockup-wide .svcm-info strong {
    font-size: 17.5px;
}

.svcmenu-mockup-wide .svcm-info span {
    font-size: 14px;
}

.svcmenu-mockup-wide .svcm-tag {
    font-size: 13.5px;
    padding: 7px 16px;
}

.svcmenu-mockup-wide .svcm-branches {
    margin-top: 0;
}

.svcmenu-caps {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}

.svcmenu-cap-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(1, 208, 252, 0.14) 0%, rgba(1, 91, 248, 0.14) 100%);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.svcmenu-cap h5 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

@media (max-width: 800px) {
    .svcmenu-caps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .svcmenu-mockup-wide .svcm-row {
        flex-wrap: wrap;
    }
}

/* The larger row text (bumped up for readability -- see .svcmenu-mockup-wide
   .svcm-info strong above) wraps the service name to 2 lines on narrow
   phones, cramped next to the icon and tag on the same row. Step back down
   near the original size only at this width, where the row is tightest. */
@media (max-width: 480px) {
    .svcmenu-mockup-wide .svcm-info strong {
        font-size: 15.5px;
    }

    .svcmenu-mockup-wide .svcm-info span {
        font-size: 12.5px;
    }

    .svcmenu-mockup-wide .svcm-tag {
        font-size: 12px;
        padding: 6px 14px;
    }

    .svcmenu-mockup-wide .svcm-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

.svcm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.svcm-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
}

.svcm-icon.wash {
    background: var(--gradient);
}

.svcm-icon.inspect {
    background: linear-gradient(135deg, #ffb000, #ff8a00);
}

.svcm-icon.shop {
    background: #0b0f14;
}

.svcm-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.svcm-info strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.svcm-info span {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svcm-tag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 999px;
}

.svcm-tag.price {
    background: rgba(34, 197, 94, 0.18);
    color: #16a34a;
}

.svcm-tag.inspect {
    background: #fff4e0;
    color: #b45309;
}

.svcm-tag.shop {
    background: #e8eaee;
    color: #374151;
}

.svcm-branches {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 15px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.svcm-branches-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-right: 2px;
}

.svcm-branch {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
}

.svcm-branch.on {
    background: #eff8ff;
    color: var(--primary-blue);
    border: 1px solid #cfe8fb;
}

/* A location that doesn't offer this service reads as switched off rather
   than missing, so the per-branch control is visible at a glance. */
.svcm-branch.off {
    background: #f4f5f7;
    color: #9aa1ab;
    border: 1px solid #e8eaee;
    text-decoration: line-through;
}

/* These two mockups are row lists rather than square illustrations, so the
   shared 1:1 shell would leave a dead gap under the content. (.svcmenu's
   mockup isn't part of this -- it doesn't use the shared .highlight-mockup
   shell at all, see .svcmenu-mockup-wide above.) */
.svcprice-mockup,
.svcaddon-mockup {
    aspect-ratio: auto;
    min-height: 400px;
}


/* ============================================
   PUSH NOTIFICATIONS — JOB TIMELINE
   ============================================ */
.pnjourney-mockup {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pnj-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #0b0f14;
}

.pnj-head-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #01d0fc;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pnj-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pnj-head-text strong {
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
}

.pnj-head-text span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.pnj-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pnj-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

/* The step that just fired -- the whole point of the mockup -- gets the
   accent treatment instead of sitting flat with the already-done steps. */
.pnj-row.active {
    background: #eff8ff;
    border-color: #cfe8fb;
}

.pnj-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: #22c55e;
}

.pnj-row.active .pnj-dot {
    background: var(--gradient);
}

.pnj-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pnj-row-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.pnj-row-text span {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.pnj-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(34, 197, 94, 0.08);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pnj-foot i {
    color: #22c55e;
    font-size: 15px;
    flex-shrink: 0;
}

.pnj-foot strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* ============================================
   PUSH NOTIFICATIONS — GAP-FILL / WIN-BACK
   ============================================ */
.pngap-mockup {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pngap-bubble {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(11, 15, 20, 0.14);
    border: 1px solid #eef1f5;
}

.pngap-bubble-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: var(--gradient);
}

.pngap-bubble-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pngap-bubble-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.pngap-bubble-text span {
    font-size: 12px;
    color: var(--text-secondary);
}

.pngap-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pngap-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.pngap-stat-num {
    font-size: 22px;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pngap-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
}

.pngap-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(1, 91, 248, 0.06);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pngap-foot i {
    color: var(--primary-blue);
    font-size: 15px;
    flex-shrink: 0;
}

.pngap-foot strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* These are row/list mockups rather than square illustrations, so the
   shared 1:1 shell would leave a dead gap under the content. Heights are
   per mockup because pngap has noticeably less content (one bubble + a
   2-up stat grid) than pnjourney's 3-row timeline -- one shared value
   either crops the timeline or leaves pngap floating in empty space. */
.pnjourney-mockup {
    aspect-ratio: auto;
    min-height: 380px;
}

.pngap-mockup {
    aspect-ratio: auto;
    min-height: 300px;
}


/* ============================================
   PICK & DROP — PICKUP/DROP-OFF TOGGLES
   ============================================ */
.pdtoggle-mockup {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.pdt-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: var(--gradient);
}

.pdt-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pdt-row-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.pdt-row-text span {
    font-size: 12px;
    color: var(--text-secondary);
}

.pdt-switch {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #d7dce2;
}

.pdt-switch.pdt-switch-on {
    background: var(--gradient);
}

.pdt-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 15, 20, 0.25);
    transition: left 0.2s ease;
}

.pdt-switch-on .pdt-knob {
    left: 19px;
}

.pdt-combo {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(34, 197, 94, 0.08);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pdt-combo i {
    color: #22c55e;
    font-size: 15px;
    flex-shrink: 0;
}

.pdt-combo strong {
    color: var(--text-primary);
    font-weight: 700;
}

.pdt-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pdt-foot i {
    color: var(--primary-blue);
    font-size: 15px;
    flex-shrink: 0;
}

/* Row/list mockup rather than a square illustration, so the shared 1:1
   shell would leave a dead gap under the content. */
.pdtoggle-mockup {
    aspect-ratio: auto;
    min-height: 340px;
}

/* ============================================
   3D depth treatment -- pickup-concierge & pickup/drop-off
   toggle mockups only (not the shared .highlight-mockup shell,
   so every other product-highlight illustration keeps its flat
   look): a gentle perspective tilt plus stacked "card" shadows.

   The stacked cards are solid-color box-shadows (0 blur/spread,
   just an x/y offset) rather than a separately transformed/sized
   pseudo-element -- a box-shadow always conforms exactly to the
   element's own box + border-radius, so it lines up correctly
   whether the mockup is a perfect square (pickup-mockup) or an
   auto-height card (pdtoggle-mockup). A separate ::before behind
   it had to guess at a matching size/shape and never quite lined
   up, which is what looked broken before.
   ============================================ */
.pickup-highlight .highlight-visual,
.pdtoggle-highlight .highlight-visual {
    perspective: 1400px;
}

.pickup-mockup,
.pdtoggle-mockup {
    transform: rotateY(-8deg) rotateX(3deg);
    box-shadow:
        16px 19px 0 0 #d7dce2,
        0 20px 40px -12px rgba(11, 15, 20, 0.18),
        24px 48px 70px -24px rgba(11, 15, 20, 0.35);
    transition: transform 0.4s ease;
}

.pickup-mockup:hover,
.pdtoggle-mockup:hover {
    transform: rotateY(-3deg) rotateX(1.5deg);
}

/* Glossy bevel on the step/row icon badges so they read as raised
   orbs rather than flat filled circles. */
.pickup-step-icon,
.pdt-row-icon {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -3px 5px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(11, 15, 20, 0.15);
}

@media (max-width: 991px) {
    .highlight-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .highlight-grid.reverse .highlight-text,
    .highlight-grid.reverse .highlight-visual {
        order: initial;
    }

    .highlight-desc {
        max-width: none;
    }

    .highlight-mockup {
        max-width: 380px;
    }

    /* Flatten the 3D tilt on narrow/stacked layouts -- keep the
       stacked-card shadow (it still lines up correctly at any size),
       just drop the perspective rotation, which needs more headroom
       around the card than a phone-width column has. */
    .pickup-mockup,
    .pdtoggle-mockup {
        transform: none;
    }
}