/*!
 * WHY US v7 — "Gold Pill Row" (2026-07)
 * Replaces v6 "Light Premium Grid" (why-split-v6.css, 3x2 card grid) with
 * six compact pill chips — icon + short label, gold border, white ground —
 * in a single centred row. Same pill language as the hero/trust marquee
 * chips elsewhere on the page, just static (no slider) and sized for
 * primary content instead of a background ticker.
 * Scoped to .vk-why--v7 / .w7-*. v6/v5/v4/v3/v2 kept on disk for rollback.
 *
 * Content: same six reasons as v5/v6, condensed to their (already short)
 * titles only — a pill has no room for the longer description, and every
 * title already carries the concrete fact (5 min, 24/7, 100%, three-step,
 * etc). Flagship stat + WhatsApp CTA stay as a highlight bar underneath.
 *
 * No JS: entrance fade via the site-wide [data-reveal] rule already in
 * wickets-home.css.
 */

/* "one line" holds up whenever there's genuinely enough room for six full
   labels — flex-wrap here (not nowrap+shrink) is what makes that safe: a
   pill never shrinks below its own text, it either fits on the row or
   drops to the next one. Shrinking a nowrap label past its content width
   was the bug — the text has nowhere to go but outside the border. */
/* Full-bleed, edge-to-edge section — same treatment as the hero
   (hero-v6.css) and Agent Category band (agents-cards-v4.css): the
   section loses the site's standard max-width/gutter so the navy panel
   spans the full viewport width, while .vk-section__head keeps a
   readable, centered, gutter-padded width. */
body.vk .vk-why--v7.vk-section {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.vk .vk-why--v7 .vk-section__head {
    padding: 0 var(--vk-pad);
}

/* Flat solid navy panel — wraps the pill row + CTA so this section reads
   as a full colored block, matching the VIP Onboarding panel (#how) and
   the Agent Category cards (#agents) rather than sitting bare on cream. */
.w7-panel {
    position: relative;
    max-width: none;
    margin: clamp(10px, 1.6vw, 20px) 0 0;
    padding: clamp(22px, 2.8vw, 34px) var(--vk-pad);
    background: linear-gradient(180deg, var(--vk-bg-dark) 0%, var(--vk-bg-dark-2) 100%);
}

.w7-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
}

.w7-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px 9px 9px;
    background: #FFFFFF;
    border: 1.5px solid #F7B900;
    border-radius: var(--vk-r-pill, 999px);
    box-shadow: 0 4px 14px rgba(200, 134, 11, 0.10);
    white-space: nowrap;
    flex: 0 0 auto;
    transition: transform .35s cubic-bezier(.2,.7,.15,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.w7-pill:hover {
    transform: translateY(-3px);
    border-color: #C49300;
    background: #FFFDF6;
    box-shadow: 0 14px 30px -8px rgba(200, 134, 11, 0.30);
}

.w7-pill__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 50%;
    background: linear-gradient(145deg, #FFCF3D 0%, #F7B900 55%, #E6AD00 100%);
    color: #1A1813;
    box-shadow: 0 4px 10px rgba(200, 134, 11, 0.32);
}
.w7-pill__icon svg { width: 14px; height: 14px; display: block; }

.vk-why--v7 .w7-pill__label { font-size: 13.5px; font-weight: 700; color: #17150F !important; white-space: nowrap; }

/* ---- highlight bar: WhatsApp CTA (the flagship-stat pill was dropped) ---- */
.w7-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: clamp(20px, 2.6vw, 28px) auto 0;
}

/* buttons.css ships a shared "soft rectangle, 13px radius" .vk-btn system
   (used site-wide) with !important on every property — scope + !important
   here so ONLY the WhatsApp button in this highlight bar becomes a slim
   pill, without touching the shared component anywhere else on the site. */
body.vk .w7-cta .vk-btn {
    border-radius: var(--vk-r-pill, 999px) !important;
    padding: 12px 26px !important;
    font-size: 14px !important;
    gap: 8px !important;
}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width: 700px) {
    .w7-pill { padding: 9px 16px 9px 10px; }
    .w7-pill__label { font-size: 13px; }
}
@media (max-width: 460px) {
    .w7-pills { gap: 10px; }
    .w7-cta { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .w7-pill { transition: none !important; }
}