/* =============================================================
   VIHARI FARMS — COMMUNITY DELIVERY · Premium design system
   Type: Fraunces (display, self-hosted brand serif) + Poppins (UI,
   numbers) + Open Sans (body). Palette: forest green + bone neutrals,
   single desaturated amber accent. Shape rule: pill buttons, 20px
   cards, 12px inputs. Motion: transform/opacity only, spring-ish
   cubic-bezier(.16,1,.3,1), fully gated behind prefers-reduced-motion.
   ============================================================= */

.vfcd-scope,
.community-page {
    --vfcd-ink: #16241a;
    --vfcd-ink-soft: #3c4a42;
    --vfcd-muted: #68766d;
    --vfcd-paper: #f6f5ee;
    --vfcd-surface: #ffffff;
    --vfcd-line: #e6e7dd;
    --vfcd-line-strong: #cfd3c4;
    --vfcd-forest: #1e4d2b;
    --vfcd-forest-deep: #143821;
    --vfcd-leaf: #3d7a4a;
    --vfcd-mist: #eef1e6;
    --vfcd-amber: #c9962e;
    --vfcd-amber-deep: #96701d;
    --vfcd-wa: #128a43;
    --vfcd-danger: #b3401f;
    --vfcd-r-lg: 20px;
    --vfcd-r-md: 12px;
    --vfcd-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --vfcd-shadow-soft: 0 1px 2px rgba(22, 36, 26, .05), 0 12px 32px -12px rgba(22, 36, 26, .12);
    --vfcd-shadow-lift: 0 2px 4px rgba(22, 36, 26, .06), 0 24px 48px -16px rgba(22, 36, 26, .18);
    --vfcd-font-display: 'Fraunces', Georgia, serif;
    --vfcd-font-ui: var(--font-poppins, 'Poppins', sans-serif);
    --vfcd-font-body: var(--font-open-sans, 'Open Sans', sans-serif);
}

.community-page {
    background: linear-gradient(180deg, #f6f5ee 0%, #fbfbf7 480px, #ffffff 900px);
    padding-bottom: 4rem;
}

/* ---------- Reveal choreography (JS adds .vfcd-js; no-JS stays visible) */
@media (prefers-reduced-motion: no-preference) {
    .vfcd-js [data-vfcd-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .7s var(--vfcd-ease), transform .7s var(--vfcd-ease);
    }
    .vfcd-js [data-vfcd-reveal].is-in { opacity: 1; transform: none; }
    .vfcd-js [data-reveal-delay="1"] { transition-delay: .08s; }
    .vfcd-js [data-reveal-delay="2"] { transition-delay: .16s; }
    .vfcd-js [data-reveal-delay="3"] { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
    [data-vfcd-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Typography system */
.vfcd-display {
    font-family: var(--vfcd-font-display);
    font-weight: 560;
    font-size: clamp(2.5rem, 6.5vw, 4.25rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--vfcd-ink);
    margin: 0 0 1.1rem;
}
.vfcd-display em {
    font-style: italic;
    color: var(--vfcd-forest);
    padding-bottom: .06em;
    display: inline-block;
}
.vfcd-display-md { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: .6rem; }
.vfcd-kicker {
    font-family: var(--vfcd-font-ui);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vfcd-leaf);
    margin: 0 0 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.vfcd-kicker::before { content: ""; width: 1.5rem; height: 1px; background: var(--vfcd-leaf); opacity: .6; }
.vfcd-lede {
    font-family: var(--vfcd-font-body);
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--vfcd-muted);
    max-width: 42ch;
    margin: 0 0 1.75rem;
}
.vfcd-h2 {
    font-family: var(--vfcd-font-ui);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    letter-spacing: -0.01em;
    color: var(--vfcd-ink);
    margin: 0 0 1.1rem;
}
.vfcd-h2-lg {
    font-family: var(--vfcd-font-display);
    font-weight: 560;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    letter-spacing: -0.01em;
    margin-bottom: 1.75rem;
}

/* ---------- Icons, chips, breadcrumb */
.vfcd-ic { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vfcd-breadcrumb { font-size: .8rem; margin: 1.5rem 0 0; color: var(--vfcd-muted); }
.vfcd-breadcrumb a { color: var(--vfcd-leaf); text-decoration: none; }
.vfcd-breadcrumb a:hover { text-decoration: underline; }

.vfcd-view-hero { padding: 3rem 0 2rem; max-width: 46rem; margin: 0 auto; }
.vfcd-view-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.vfcd-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--vfcd-font-ui); font-size: .82rem; font-weight: 500;
    color: var(--vfcd-ink-soft);
    background: var(--vfcd-surface);
    border: 1px solid var(--vfcd-line-strong);
    border-radius: 999px;
    padding: .45rem .95rem;
}
.vfcd-chip .vfcd-ic { color: var(--vfcd-leaf); }
.vfcd-chip-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--vfcd-leaf); }
.vfcd-chip-status.is-open { border-color: #bcd6c0; background: var(--vfcd-mist); }
.vfcd-chip-status.is-closed { border-color: #e3d3a6; background: #faf4e4; }
.vfcd-chip-status.is-closed .vfcd-chip-dot { background: var(--vfcd-amber); }
.vfcd-chip-delivery { border-color: #d9e4d0; background: #f4f8ef; }
.vfcd-chip-delivery.is-confirmed { border-color: #bcd6c0; background: var(--vfcd-mist); font-weight: 600; }
.vfcd-chip-delivery .vfcd-ic { width: 15px; height: 15px; }
.vfcd-view-area { font-family: var(--vfcd-font-body); font-size: .95rem; color: var(--vfcd-muted); margin: .35rem 0 0; }
/* The pinned address under the community name — neighbours read this line
   to confirm it is THEIR community before ordering. */
.vfcd-view-addr {
    font-family: var(--vfcd-font-body);
    font-size: 1rem; line-height: 1.6;
    color: var(--vfcd-ink-soft);
    margin: .45rem 0 0;
    max-width: 52ch;
}
.vfcd-chip-dist { font-weight: 600; color: var(--vfcd-ink); border-color: #d9e4d0; background: #f4f8ef; }
.vfcd-chip-dist .vfcd-ic { color: var(--vfcd-forest); }

/* ---------- Share view: progress */
.vfcd-progress-card {
    max-width: 46rem; margin: 0 auto 2.75rem;
    background: var(--vfcd-surface);
    border: 1px solid var(--vfcd-line);
    border-radius: var(--vfcd-r-lg);
    box-shadow: var(--vfcd-shadow-soft);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
}
.vfcd-progress-head { display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.vfcd-progress-label {
    display: block;
    font-family: var(--vfcd-font-ui); font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--vfcd-muted); margin-bottom: .3rem;
}
.vfcd-progress-total {
    display: block;
    font-family: var(--vfcd-font-display); font-weight: 560;
    font-size: clamp(2.1rem, 5vw, 2.75rem); line-height: 1.05;
    color: var(--vfcd-ink);
    font-variant-numeric: lining-nums;
}
.vfcd-progress-right { text-align: right; }
.vfcd-progress-target {
    display: block;
    font-family: var(--vfcd-font-ui); font-weight: 700; font-size: 1.3rem;
    color: var(--vfcd-forest);
    font-variant-numeric: lining-nums;
}
.vfcd-progress-meta { display: block; font-size: .8rem; color: var(--vfcd-muted); margin-top: .3rem; }
.vfcd-bar { height: 12px; border-radius: 999px; background: var(--vfcd-mist); overflow: hidden; position: relative; }
.vfcd-bar-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--vfcd-leaf), var(--vfcd-forest));
    border-radius: 999px;
    transition: width .9s var(--vfcd-ease);
    position: relative;
    overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
    .vfcd-bar-fill::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
        transform: translateX(-100%);
        animation: vfcd-sheen 3.6s ease-in-out infinite;
    }
}
@keyframes vfcd-sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.vfcd-remaining { margin: 1rem 0 0; font-family: var(--vfcd-font-body); color: var(--vfcd-ink-soft); font-size: 1rem; line-height: 1.6; }
.vfcd-remaining strong { color: var(--vfcd-forest); font-variant-numeric: lining-nums; }
.vfcd-unlocked { display: inline-flex; align-items: center; gap: .5rem; color: var(--vfcd-forest); }
.vfcd-unlocked .vfcd-ic { width: 1.2em; height: 1.2em; stroke-width: 2.4; }
.vfcd-unlocked strong { text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }

.vfcd-celebrate { border-color: #bcd6c0; box-shadow: 0 2px 4px rgba(46, 94, 55, .08), 0 24px 48px -16px rgba(46, 94, 55, .28); }
.vfcd-confetti {
    position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px;
    animation: vfcd-fall 2.6s ease-in forwards; pointer-events: none; opacity: .9;
}
@keyframes vfcd-fall { to { transform: translateY(360px) rotate(320deg); opacity: 0; } }

/* ---------- Share view: members */
.vfcd-members { max-width: 46rem; margin: 0 auto 2.75rem; }
.vfcd-member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.vfcd-member {
    display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem;
    background: var(--vfcd-surface);
    border: 1px solid var(--vfcd-line);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    transition: border-color .25s var(--vfcd-ease), box-shadow .25s var(--vfcd-ease);
}
.vfcd-member:hover { border-color: var(--vfcd-line-strong); box-shadow: var(--vfcd-shadow-soft); }
.vfcd-member.is-paid { border-color: #c4dcc7; background: linear-gradient(180deg, #f7fbf6, #ffffff); }
.vfcd-member-main { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.vfcd-member-name { font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .95rem; color: var(--vfcd-ink); }
.vfcd-member-flat {
    font-family: var(--vfcd-font-ui); font-size: .7rem; font-weight: 600;
    color: var(--vfcd-ink-soft); background: var(--vfcd-mist);
    border-radius: 999px; padding: .12rem .55rem;
}
.vfcd-member-status {
    font-family: var(--vfcd-font-ui); font-size: .68rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--vfcd-amber-deep);
}
.vfcd-member.is-paid .vfcd-member-status { color: var(--vfcd-leaf); }
.vfcd-member-items { grid-column: 1; margin: 0; font-family: var(--vfcd-font-body); font-size: .88rem; color: var(--vfcd-muted); line-height: 1.55; }
.vfcd-member-amount {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    font-family: var(--vfcd-font-display); font-weight: 560; font-size: 1.3rem;
    color: var(--vfcd-forest); white-space: nowrap;
    font-variant-numeric: lining-nums;
}
.vfcd-empty { text-align: center; padding: 2.25rem 1rem; border: 1px dashed var(--vfcd-line-strong); border-radius: var(--vfcd-r-lg); }
.vfcd-empty-ic { width: 46px; height: 46px; color: #9db4a2; margin-bottom: .6rem; }
.vfcd-empty-title { font-family: var(--vfcd-font-ui); font-weight: 600; font-size: 1rem; color: var(--vfcd-ink); margin: 0 0 .25rem; }
.vfcd-empty-sub { font-size: .88rem; color: var(--vfcd-muted); margin: 0; }

/* ---------- Share view: order CTA panel */
.vfcd-order-cta { max-width: 46rem; margin: 0 auto 2.75rem; }
.vfcd-cta-panel {
    display: grid; gap: 1.25rem; align-items: center;
    background: linear-gradient(135deg, #23603a 0%, var(--vfcd-forest-deep) 100%);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(20, 56, 33, .2), 0 28px 56px -20px rgba(20, 56, 33, .45);
}
@media (min-width: 720px) { .vfcd-cta-panel { grid-template-columns: 1fr auto; padding: 2.25rem; } }
.vfcd-cta-copy h2 { color: #f4f2ea; margin-bottom: .4rem; }
.vfcd-cta-copy p { color: rgba(244, 242, 234, .75); font-family: var(--vfcd-font-body); font-size: .95rem; line-height: 1.65; margin: 0; max-width: 42ch; }
.vfcd-cta-panel .vfcd-btn-primary { background: #f4f2ea; color: var(--vfcd-forest-deep); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vfcd-cta-panel .vfcd-btn-primary:hover { background: #ffffff; }
.vfcd-cta-panel .vfcd-btn-primary::after { display: none; }
.vfcd-privacy-note {
    display: flex; gap: .5rem; align-items: flex-start;
    font-size: .8rem; color: var(--vfcd-muted); line-height: 1.6;
    margin: 1rem .25rem 0;
}
.vfcd-privacy-note .vfcd-ic { margin-top: .15rem; color: var(--vfcd-leaf); }

/* ---------- Share view: closed + share */
.vfcd-closed {
    max-width: 46rem; margin: 0 auto 2.5rem;
    background: #fbf6e9; border: 1px solid #e9d8a8;
    border-radius: 16px; padding: 1.3rem 1.5rem;
}
.vfcd-closed p { margin: .4rem 0 0; color: var(--vfcd-ink-soft); font-size: .92rem; }
.vfcd-closed a { color: var(--vfcd-leaf); }
.vfcd-share { max-width: 46rem; margin: 0 auto 3rem; }
.vfcd-share > p { color: var(--vfcd-muted); font-family: var(--vfcd-font-body); margin: 0 0 1rem; }
.vfcd-share-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- Buttons */
.vfcd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
    padding: .78rem 1.4rem; min-height: 46px;
    border-radius: 999px; border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
    transition: transform .25s var(--vfcd-ease), background-color .25s var(--vfcd-ease), color .25s var(--vfcd-ease), border-color .25s var(--vfcd-ease), box-shadow .25s var(--vfcd-ease);
}
.vfcd-btn:hover { transform: translateY(-1px); }
.vfcd-btn:active { transform: translateY(0) scale(.98); }
.vfcd-btn:focus-visible { outline: 2px solid var(--vfcd-leaf); outline-offset: 2px; }
.vfcd-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.vfcd-btn-primary { background: linear-gradient(180deg, #266138, var(--vfcd-forest)); color: #f4f2ea; border-color: rgba(20, 56, 33, .9); box-shadow: 0 1px 2px rgba(20, 56, 33, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
.vfcd-btn-primary:hover { background: linear-gradient(180deg, #2b6d3f, #23603a); }
@media (prefers-reduced-motion: no-preference) {
    .vfcd-btn-primary::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
        transform: translateX(-110%);
        transition: transform .8s var(--vfcd-ease);
        pointer-events: none;
    }
    .vfcd-btn-primary:hover::after { transform: translateX(110%); }
}
.vfcd-btn-outline { background: var(--vfcd-surface); border-color: var(--vfcd-line-strong); color: var(--vfcd-ink); }
.vfcd-btn-outline:hover { border-color: var(--vfcd-leaf); color: var(--vfcd-forest); }
.vfcd-btn-ghost { background: transparent; color: var(--vfcd-muted); }
.vfcd-btn-ghost:hover { background: var(--vfcd-mist); color: var(--vfcd-ink); }
.vfcd-btn-wa { background: var(--vfcd-wa); color: #ffffff; border-color: var(--vfcd-wa); box-shadow: 0 1px 2px rgba(18, 138, 67, .3); }
.vfcd-btn-wa:hover { background: #0f7a3b; }
.vfcd-btn-lg { padding: .95rem 1.7rem; font-size: 1rem; min-height: 52px; }

/* ---------- Forms */
.vfcd-field { display: block; margin-bottom: 1.05rem; }
.vfcd-field > span, .vfcd-map-label {
    display: block;
    font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .84rem;
    color: var(--vfcd-ink-soft); margin-bottom: .4rem;
}
.vfcd-field > span em, .vfcd-map-label em { font-style: normal; color: var(--vfcd-leaf); }
.vfcd-field .vfcd-optional { color: var(--vfcd-muted); font-weight: 500; }
.vfcd-field input {
    width: 100%; padding: .8rem 1rem;
    border: 1.5px solid var(--vfcd-line-strong); border-radius: var(--vfcd-r-md);
    font: inherit; font-family: var(--vfcd-font-body); min-height: 48px;
    background: var(--vfcd-surface); color: var(--vfcd-ink);
    transition: border-color .25s var(--vfcd-ease), box-shadow .25s var(--vfcd-ease);
}
.vfcd-field input::placeholder { color: #9aa79e; }
.vfcd-field input:focus { outline: none; border-color: var(--vfcd-forest); box-shadow: 0 0 0 4px rgba(61, 122, 74, .14); }
/* v3.9.61 — the "Preferred time" select had NO styling, so it rendered as a
   raw ~19px-tall browser control sitting next to fully styled inputs (measured
   on tablet). Mirrors the input treatment exactly, with a 1rem font size so
   iOS Safari does not zoom the page when the field is focused. */
.vfcd-field select {
    width: 100%; padding: .8rem 2.4rem .8rem 1rem;
    border: 1.5px solid var(--vfcd-line-strong); border-radius: var(--vfcd-r-md);
    font: inherit; font-family: var(--vfcd-font-body); font-size: 1rem;
    min-height: 48px; background-color: var(--vfcd-surface); color: var(--vfcd-ink);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233d7a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center;
    transition: border-color .25s var(--vfcd-ease), box-shadow .25s var(--vfcd-ease);
}
.vfcd-field select:focus { outline: none; border-color: var(--vfcd-forest); box-shadow: 0 0 0 4px rgba(61, 122, 74, .14); }
.vfcd-field select.vfcd-field-invalid { border-color: var(--vfcd-danger); box-shadow: 0 0 0 4px rgba(179, 64, 31, .12); }
.vfcd-field input.vfcd-field-invalid { border-color: var(--vfcd-danger); box-shadow: 0 0 0 4px rgba(179, 64, 31, .12); }
.vfcd-field-error { display: block; font-style: normal; font-size: .8rem; color: var(--vfcd-danger); margin-top: .35rem; }
.vfcd-field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .vfcd-field-row { grid-template-columns: 1fr 1fr; } }
.vfcd-check { display: flex; align-items: center; gap: .55rem; font-family: var(--vfcd-font-body); font-size: .88rem; color: var(--vfcd-ink-soft); margin: 0 0 1.05rem; cursor: pointer; }
.vfcd-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--vfcd-forest); }
.vfcd-form-msg { min-height: 1.4em; font-family: var(--vfcd-font-body); font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; margin: .9rem 0 0; color: var(--vfcd-danger); }
.vfcd-form-msg.vfcd-ok { color: var(--vfcd-forest); }
.vfcd-form-msg a { color: var(--vfcd-forest); font-weight: 600; }

/* Map pin button inside the create form */
.vfcd-map-btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; min-height: 52px;
    background: var(--vfcd-surface);
    border: 1.5px dashed var(--vfcd-line-strong); border-radius: 14px;
    font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .92rem;
    color: var(--vfcd-ink-soft); cursor: pointer;
    transition: border-color .25s var(--vfcd-ease), color .25s var(--vfcd-ease), background-color .25s var(--vfcd-ease), transform .25s var(--vfcd-ease);
}
.vfcd-map-btn:hover { border-color: var(--vfcd-leaf); color: var(--vfcd-forest); transform: translateY(-1px); }
.vfcd-map-btn:focus-visible { outline: 2px solid var(--vfcd-leaf); outline-offset: 2px; }
.vfcd-map-btn .vfcd-ic { width: 1.15em; height: 1.15em; }
.vfcd-map-btn.is-pinned { border-style: solid; border-color: var(--vfcd-forest); background: var(--vfcd-mist); color: var(--vfcd-forest-deep); }
.vfcd-map-btn.is-pinned .vfcd-ic circle { fill: var(--vfcd-leaf); stroke: none; }
.vfcd-map-hint { font-family: var(--vfcd-font-body); font-size: .8rem; color: var(--vfcd-muted); margin: .5rem 0 0; line-height: 1.55; }

/* ---------- Landing hero */
.vfcd-hero-landing { padding: 3.25rem 0 1.5rem; }
.vfcd-hero-grid { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 960px) {
    .vfcd-hero-grid { grid-template-columns: 1.08fr .92fr; gap: 4rem; }
}
.vfcd-hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.vfcd-hero-card {
    margin: 0;
    background: var(--vfcd-surface);
    border: 1px solid var(--vfcd-line);
    border-radius: var(--vfcd-r-lg);
    box-shadow: var(--vfcd-shadow-lift);
    padding: 1.65rem;
    max-width: 26rem;
    margin-left: auto;
    position: relative;
    overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
    .vfcd-hero-card { animation: vfcd-float 7s ease-in-out infinite; }
}
@keyframes vfcd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.vfcd-hero-card-cap {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--vfcd-font-ui); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--vfcd-muted); margin-bottom: 1rem;
}
.vfcd-hero-card-cap::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--vfcd-leaf); animation: vfcd-pulse 2.4s ease-in-out infinite; }
@keyframes vfcd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.vfcd-hero-card-name { display: flex; align-items: center; gap: .6rem; font-family: var(--vfcd-font-ui); font-weight: 600; font-size: 1.02rem; color: var(--vfcd-ink); }
.vfcd-hero-card-km {
    font-size: .7rem; font-weight: 600; color: var(--vfcd-ink-soft);
    background: var(--vfcd-mist); border-radius: 999px; padding: .14rem .6rem;
}
.vfcd-hero-card-total { display: flex; align-items: baseline; gap: .55rem; margin: .9rem 0 .8rem; }
.vfcd-count { font-family: var(--vfcd-font-display); font-weight: 560; font-size: 2.3rem; line-height: 1; color: var(--vfcd-ink); font-variant-numeric: lining-nums; }
.vfcd-hero-card-of { font-family: var(--vfcd-font-body); font-size: .85rem; color: var(--vfcd-muted); }
.vfcd-bar-lg { height: 10px; }
.vfcd-hero-card-note { font-family: var(--vfcd-font-body); font-size: .88rem; color: var(--vfcd-muted); margin: .85rem 0 1.15rem; }
.vfcd-hero-card-note strong { color: var(--vfcd-forest); }
.vfcd-hero-card-people { display: flex; align-items: center; }
.vfcd-ava {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--vfcd-mist); border: 2px solid var(--vfcd-surface);
    font-family: var(--vfcd-font-ui); font-size: .68rem; font-weight: 600; color: var(--vfcd-forest-deep);
    margin-left: -8px;
}
.vfcd-ava:first-child { margin-left: 0; }
.vfcd-ava-more { background: var(--vfcd-forest); color: #f4f2ea; }
.vfcd-hero-card-paid { margin-left: auto; font-family: var(--vfcd-font-body); font-size: .78rem; color: var(--vfcd-muted); }

/* ---------- How it works: editorial rail */
.vfcd-how { max-width: 56rem; margin: 0 auto 4.5rem; }
.vfcd-how-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .vfcd-how-rail { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.vfcd-how-step { border-top: 1px solid var(--vfcd-line-strong); padding-top: 1.1rem; }
.vfcd-how-num {
    display: block;
    font-family: var(--vfcd-font-display); font-style: italic; font-weight: 480;
    font-size: 2.1rem; line-height: 1; color: var(--vfcd-leaf);
    margin-bottom: .65rem;
}
.vfcd-how-step h3 { font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .98rem; color: var(--vfcd-ink); margin: 0 0 .35rem; }
.vfcd-how-step p { font-family: var(--vfcd-font-body); font-size: .87rem; line-height: 1.6; color: var(--vfcd-muted); margin: 0; max-width: 30ch; }

/* ---------- Zone ladder */
.vfcd-zones { max-width: 46rem; margin: 0 auto 4.5rem; }
.vfcd-zone-ladder { display: grid; }
.vfcd-zone-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
    column-gap: 1rem; row-gap: .15rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--vfcd-line);
}
.vfcd-zone-row:first-child { border-top: 1px solid var(--vfcd-line); }
.vfcd-zone-km { font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .92rem; color: var(--vfcd-ink); }
.vfcd-zone-leader { border-bottom: 2px dotted var(--vfcd-line-strong); transform: translateY(-4px); }
.vfcd-zone-amt {
    font-family: var(--vfcd-font-ui); font-weight: 700; font-size: 1.02rem;
    color: var(--vfcd-forest); font-variant-numeric: lining-nums; white-space: nowrap;
}
.vfcd-zone-flag { grid-column: 1 / -1; font-family: var(--vfcd-font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--vfcd-muted); }
.vfcd-zone-row.is-special .vfcd-zone-flag { color: var(--vfcd-amber-deep); }
.vfcd-zone-note { font-family: var(--vfcd-font-body); font-size: .8rem; color: var(--vfcd-muted); margin: 1rem 0 0; }

/* ---------- Start / Join */
.vfcd-startjoin { display: grid; gap: 1.5rem; max-width: 56rem; margin: 0 auto 4.5rem; }
@media (min-width: 920px) { .vfcd-startjoin { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.vfcd-sj-card { background: var(--vfcd-surface); border: 1px solid var(--vfcd-line); border-radius: var(--vfcd-r-lg); box-shadow: var(--vfcd-shadow-soft); padding: 1.9rem; }
.vfcd-sj-sub { font-family: var(--vfcd-font-body); color: var(--vfcd-muted); margin: 0 0 1.4rem; }
.vfcd-sj-join { background: linear-gradient(180deg, #f5f7ef, #fbfcf8); }
.vfcd-sj-join p { font-family: var(--vfcd-font-body); color: var(--vfcd-ink-soft); margin: 0 0 .6rem; }
.vfcd-sj-join code {
    display: block;
    background: var(--vfcd-surface); border: 1px dashed var(--vfcd-line-strong);
    border-radius: 10px; padding: .65rem .85rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .8rem;
    color: var(--vfcd-ink-soft); word-break: break-all;
    margin: 0 0 1rem;
}
.vfcd-join-alt { font-size: .88rem; color: var(--vfcd-muted) !important; line-height: 1.6; }
.vfcd-join-alt strong { color: var(--vfcd-forest); }
.vfcd-submit { width: 100%; margin-top: .35rem; }

/* ---------- FAQ */
.vfcd-faq { max-width: 46rem; margin: 0 auto 4rem; }
.vfcd-faq-item { padding: 1.15rem 0; border-bottom: 1px solid var(--vfcd-line); }
.vfcd-faq-item:first-child { border-top: 1px solid var(--vfcd-line); }
.vfcd-faq-item dt { font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .98rem; color: var(--vfcd-ink); }
.vfcd-faq-item dd { margin: .45rem 0 0; font-family: var(--vfcd-font-body); font-size: .92rem; line-height: 1.7; color: var(--vfcd-muted); max-width: 65ch; }

/* ---------- Modal (order flow) */
.vfcd-modal { position: fixed; inset: 0; z-index: 100000; }
.vfcd-modal .modal-overlay { position: absolute; inset: 0; background: rgba(12, 24, 16, .55); }
@media (prefers-reduced-motion: no-preference) {
    .vfcd-modal .modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.vfcd-modal-container {
    position: relative; z-index: 1;
    width: min(38rem, calc(100% - 2rem));
    margin: 4vh auto; max-height: 92dvh; overflow-y: auto;
    background: var(--vfcd-surface);
    border-radius: 24px; padding: 1.75rem;
    box-shadow: var(--vfcd-shadow-lift);
}
@media (prefers-reduced-motion: no-preference) {
    .vfcd-modal-container { animation: vfcd-pop .45s var(--vfcd-ease); }
}
@keyframes vfcd-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.vfcd-modal .modal-close {
    position: absolute; top: 1.1rem; right: 1.1rem;
    width: 40px; height: 40px; border-radius: 999px;
    border: none; background: var(--vfcd-mist); color: var(--vfcd-ink-soft);
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    transition: background-color .25s var(--vfcd-ease), transform .25s var(--vfcd-ease);
}
.vfcd-modal .modal-close:hover { background: var(--vfcd-line); transform: rotate(90deg); }
.vfcd-modal-title { font-family: var(--vfcd-font-display); font-weight: 560; font-size: 1.45rem; color: var(--vfcd-ink); margin: 0 2.5rem 1.1rem 0; }
.vfcd-steps { list-style: none; display: flex; gap: .75rem; margin: 0 0 1.4rem; padding: 0; }
.vfcd-steps li { flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.vfcd-steps li::before { content: ""; display: block; height: 3px; border-radius: 999px; background: var(--vfcd-mist); transition: background-color .5s var(--vfcd-ease); }
.vfcd-steps li.is-active::before { background: var(--vfcd-forest); }
.vfcd-steps li.is-done::before { background: var(--vfcd-leaf); }
.vfcd-steps li span { font-family: var(--vfcd-font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--vfcd-muted); transition: color .3s; }
.vfcd-steps li.is-active span { color: var(--vfcd-forest-deep); }
.vfcd-step-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.4rem; }
/* display:flex above beats the UA [hidden] rule — enforce it explicitly so
   Back/Continue disappear once the receipt replaces the wizard steps. */
.vfcd-step-actions[hidden] { display: none; }
.vfcd-step[hidden], .vfcd-receipt[hidden], .vfcd-modal[hidden] { display: none !important; }

/* Product picker */
.vfcd-product-picker { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 520px) { .vfcd-product-picker { grid-template-columns: 1fr 1fr; } }
.vfcd-prod {
    display: flex; align-items: center; gap: .8rem; text-align: left;
    background: var(--vfcd-surface);
    border: 1px solid var(--vfcd-line); border-radius: 14px;
    padding: .8rem; cursor: pointer; font: inherit; min-height: 44px;
    transition: border-color .25s var(--vfcd-ease), transform .25s var(--vfcd-ease), box-shadow .25s var(--vfcd-ease);
}
.vfcd-prod:hover { border-color: var(--vfcd-leaf); transform: translateY(-1px); box-shadow: var(--vfcd-shadow-soft); }
.vfcd-prod:focus-visible { outline: 2px solid var(--vfcd-leaf); outline-offset: 2px; }
.vfcd-prod.is-soldout { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.vfcd-prod-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.vfcd-prod-body { min-width: 0; flex: 1; }
.vfcd-prod-name { display: block; font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .92rem; color: var(--vfcd-ink); }
.vfcd-prod-name em { font-style: normal; font-family: var(--vfcd-font-body); color: var(--vfcd-muted); font-size: .8rem; }
.vfcd-prod-cat { display: block; font-family: var(--vfcd-font-ui); font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--vfcd-muted); margin-top: .15rem; }
.vfcd-prod-price { display: block; font-family: var(--vfcd-font-ui); font-weight: 700; font-size: .86rem; color: var(--vfcd-forest); margin-top: .15rem; font-variant-numeric: lining-nums; }
.vfcd-prod-soldout { display: block; font-family: var(--vfcd-font-ui); font-size: .66rem; font-weight: 700; color: var(--vfcd-amber-deep); text-transform: uppercase; letter-spacing: .06em; margin-top: .15rem; }
.vfcd-prod-back { grid-column: 1 / -1; justify-self: start; padding-left: 0; background: none; border: none; color: var(--vfcd-leaf); min-height: 40px; }
.vfcd-prod-back:hover { background: none; transform: translateX(-2px); }
.vfcd-prod-title { font-family: var(--vfcd-font-display); font-weight: 560; font-size: 1.3rem; color: var(--vfcd-ink); margin: .4rem 0; }
.vfcd-prod-note { font-family: var(--vfcd-font-body); font-size: .82rem; background: var(--vfcd-mist); border-radius: 10px; padding: .7rem .9rem; color: var(--vfcd-ink-soft); line-height: 1.6; }
.vfcd-sizes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0; }
.vfcd-size-btn {
    border: 1.5px solid var(--vfcd-line-strong); background: var(--vfcd-surface);
    border-radius: 999px; padding: .5rem 1rem; min-height: 44px; cursor: pointer;
    font-family: var(--vfcd-font-ui); font-weight: 500; font-size: .85rem; color: var(--vfcd-ink-soft);
    transition: border-color .25s var(--vfcd-ease), background-color .25s var(--vfcd-ease), color .25s var(--vfcd-ease), transform .25s var(--vfcd-ease);
    font-variant-numeric: lining-nums;
}
.vfcd-size-btn:hover { border-color: var(--vfcd-leaf); transform: translateY(-1px); }
.vfcd-size-btn.is-active { border-color: var(--vfcd-forest); background: var(--vfcd-mist); color: var(--vfcd-forest-deep); font-weight: 600; }
.vfcd-qty-row { margin: .9rem 0; }
.vfcd-qty input { max-width: 7rem; }
.vfcd-line-total { font-family: var(--vfcd-font-ui); font-weight: 700; font-size: 1.05rem; color: var(--vfcd-ink); font-variant-numeric: lining-nums; }
.vfcd-add-line { width: 100%; margin-top: .9rem; }
.vfcd-loading { grid-column: 1 / -1; font-family: var(--vfcd-font-body); color: var(--vfcd-muted); }
.vfcd-step-err { font-family: var(--vfcd-font-body); font-size: .85rem; color: var(--vfcd-danger); margin: .75rem 0 0; }

/* Order summary + Community Order Receipt (no payment machinery) */
.vfcd-cart-summary { background: var(--vfcd-mist); border-radius: 14px; padding: 1.05rem 1.2rem; margin-top: 1.1rem; }
.vfcd-sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-family: var(--vfcd-font-body); font-size: .92rem; color: var(--vfcd-ink-soft); }
.vfcd-sum-row strong { font-variant-numeric: lining-nums; }
.vfcd-sum-total { border-top: 1px dashed var(--vfcd-line-strong); margin-top: .45rem; padding-top: .65rem; font-family: var(--vfcd-font-ui); font-weight: 600; color: var(--vfcd-ink); }
.vfcd-step-hint { font-family: var(--vfcd-font-body); font-size: .85rem; color: var(--vfcd-muted); margin: .9rem 0 0; }

.vfcd-receipt {
    border: 1.5px solid #bcd6c0; border-radius: 16px; padding: 1.5rem 1.4rem;
    background: linear-gradient(180deg, #f5faf4, #ffffff);
    max-width: 34rem; margin: 0 auto;
}
.vfcd-receipt-brand { font-family: var(--vfcd-font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vfcd-leaf); margin: 0; }
.vfcd-receipt-title { font-family: var(--vfcd-font-display); font-size: 1.45rem; font-weight: 600; color: var(--vfcd-forest-deep); margin: .2rem 0 1rem; }
.vfcd-receipt-community { display: flex; flex-direction: column; gap: .15rem; background: var(--vfcd-forest); color: #fff; border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1rem; }
.vfcd-receipt-community-name { font-family: var(--vfcd-font-display); font-size: 1.08rem; font-weight: 600; }
.vfcd-receipt-community-id { font-family: var(--vfcd-font-ui); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #d9e8d9; }
.vfcd-receipt-block { padding: .9rem 0; border-top: 1px dashed #cfe2d2; }
.vfcd-receipt-label { font-family: var(--vfcd-font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vfcd-muted); margin: 0 0 .5rem; }
.vfcd-receipt-who { font-family: var(--vfcd-font-body); font-size: .88rem; color: var(--vfcd-ink-soft); margin: 0 0 .5rem; }
.vfcd-receipt-ref { font-family: var(--vfcd-font-ui); font-size: .78rem; color: var(--vfcd-muted); margin: .6rem 0 0; }
.vfcd-receipt-progress { background: var(--vfcd-mist); border-radius: 12px; padding: .9rem 1rem; border-top: none; }
.vfcd-receipt-progress-row { display: flex; justify-content: space-between; font-family: var(--vfcd-font-ui); font-weight: 600; font-size: 1.02rem; color: var(--vfcd-forest-deep); margin-bottom: .3rem; }
.vfcd-receipt-unlocked { font-family: var(--vfcd-font-ui); font-weight: 700; color: var(--vfcd-forest); margin: .3rem 0 0; }
.vfcd-receipt-remaining { font-family: var(--vfcd-font-body); font-size: .9rem; color: var(--vfcd-ink-soft); margin: .3rem 0 0; }
.vfcd-receipt-remaining strong { color: var(--vfcd-amber-deep); }
.vfcd-receipt-bookings { font-family: var(--vfcd-font-body); font-size: .82rem; color: var(--vfcd-muted); margin: .35rem 0 0; }
.vfcd-receipt-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed #d8e6d8; font-family: var(--vfcd-font-body); font-size: .92rem; color: var(--vfcd-ink-soft); }
.vfcd-receipt-row strong { color: var(--vfcd-ink); font-variant-numeric: lining-nums; text-align: right; }
.vfcd-receipt-countdown { font-family: var(--vfcd-font-body); font-size: .88rem; color: var(--vfcd-ink-soft); margin: .6rem 0 0; }
.vfcd-receipt-timer { font-family: var(--vfcd-font-ui); font-variant-numeric: lining-nums; }
.vfcd-receipt-share { width: 100%; margin-top: 1.1rem; }
.vfcd-receipt-note { font-family: var(--vfcd-font-body); font-size: .82rem; color: var(--vfcd-muted); margin: .75rem 0 0; line-height: 1.6; }
.vfcd-dup-note { font-style: italic; color: var(--vfcd-muted); font-weight: 400; }
.vfcd-receipt-share { display: inline-flex; }

/* Post-order action stack: one confident primary, then secondary options.
   The single 3-line wrapping button of v2 fought the receipt's height; the
   share button is now one clean line with secondary actions as real buttons
   below — add more items, or leave for the homepage. */
.vfcd-receipt-actions { margin-top: 1.15rem; display: grid; gap: .65rem; }
.vfcd-receipt-actions .vfcd-btn-wa { width: 100%; }
.vfcd-receipt-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@media (max-width: 480px) { .vfcd-receipt-secondary { grid-template-columns: 1fr; } }
.vfcd-receipt-secondary .vfcd-btn { width: 100%; min-height: 46px; font-size: .88rem; padding: .6rem 1rem; }
.vfcd-receipt-pay-note { text-align: center; padding: 0 .5rem; }

/* ---------- Countdown ---------- */
.vfcd-countdown {
    display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
    max-width: 46rem; margin: 0 auto 1.4rem;
    border-radius: 14px; padding: .85rem 1.2rem;
    border: 1px solid var(--vfcd-line); background: var(--vfcd-surface);
    box-shadow: var(--vfcd-shadow-soft);
}
.vfcd-countdown-clock { font-family: var(--vfcd-font-ui); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums lining-nums; color: var(--vfcd-forest); }
.vfcd-countdown-close { font-family: var(--vfcd-font-body); font-size: .88rem; color: var(--vfcd-ink-soft); }
.vfcd-countdown-normal .vfcd-countdown-clock { color: var(--vfcd-forest); }
.vfcd-countdown-warn { border-color: #ecd9a6; background: #fdf6e4; }
.vfcd-countdown-warn .vfcd-countdown-clock { color: var(--vfcd-amber-deep); }
.vfcd-countdown-urgent { border-color: #eec4b2; background: #fdf0e8; }
.vfcd-countdown-urgent .vfcd-countdown-clock { color: var(--vfcd-danger); animation: vfcd-pulse 1s steps(2, jump-none) infinite; }
.vfcd-countdown-expired { border-color: var(--vfcd-line); background: var(--vfcd-mist); }
.vfcd-countdown-expired .vfcd-countdown-clock { color: var(--vfcd-muted); font-size: 1.1rem; animation: none; }
@keyframes vfcd-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .vfcd-countdown-urgent .vfcd-countdown-clock { animation: none; } }

/* ---------- Create-success share link ---------- */
.vfcd-share-link { background: var(--vfcd-surface); border: 1px solid var(--vfcd-line); border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; word-break: break-all; font-family: var(--vfcd-font-body); font-size: .9rem; }
.vfcd-share-link a { color: var(--vfcd-leaf); font-weight: 600; }
.vfcd-share-actions-tight { margin-top: .4rem; }
.vfcd-created-hint { font-family: var(--vfcd-font-body); font-size: .85rem; color: var(--vfcd-muted); margin: .7rem 0 0; line-height: 1.6; }
.vfcd-form-msg.vfcd-ok { background: var(--vfcd-mist); border: 1px solid #d5e4d5; border-radius: 12px; padding: 1rem 1.1rem; font-family: var(--vfcd-font-body); font-size: .92rem; line-height: 1.6; color: var(--vfcd-ink-soft); }
.vfcd-form-msg strong { color: var(--vfcd-forest-deep); }
.vfcd-field-hint { font-family: var(--vfcd-font-body); font-size: .82rem; color: var(--vfcd-muted); margin: .4rem 0 1rem; }

/* ---------- Closed summary ---------- */
.vfcd-closed-title { display: block; font-family: var(--vfcd-font-ui); font-size: 1rem; color: var(--vfcd-amber-deep); }
.vfcd-closed-cta { margin-top: .9rem; }

/* ---------- Map overlay dialog (v3: search + verify flow) ----------
   OPAQUE BY CONSTRUCTION. v2 inherited --vfcd-* tokens, but on production
   the overlay can render outside the token scope (e.g. appended to <body>),
   so every var() resolved to nothing and the whole dialog painted as
   unreadable transparent glass over the page. Every surface here now uses
   literal colours (tokens kept as progressive enhancement via var(x, y)),
   so the dialog is readable no matter where it mounts. */
.vfcd-map-overlay {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(10, 22, 14, .66);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
    .vfcd-map-overlay { backdrop-filter: blur(7px) saturate(1.05); -webkit-backdrop-filter: blur(7px) saturate(1.05); }
}
.vfcd-map-dialog {
    background: var(--vfcd-surface, #ffffff);
    border-radius: 24px; padding: 1.6rem 1.6rem 1.4rem;
    width: min(36rem, 100%); max-height: min(92dvh, 46rem); overflow-y: auto;
    border: 1px solid var(--vfcd-line, #e6e7dd);
    box-shadow: 0 2px 4px rgba(9, 22, 14, .18), 0 40px 90px -28px rgba(9, 22, 14, .55);
    overscroll-behavior: contain;
}
@media (prefers-reduced-motion: no-preference) {
    .vfcd-map-dialog { animation: vfcd-pop .45s var(--vfcd-ease, cubic-bezier(.16, 1, .3, 1)); }
}
@media (max-width: 640px) {
    .vfcd-map-overlay { padding: .65rem; align-items: flex-end; }
    .vfcd-map-dialog { width: 100%; padding: 1.35rem 1.15rem 1.15rem; border-radius: 22px; max-height: 94dvh; }
}
.vfcd-map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.05rem; }
.vfcd-map-kicker {
    margin: 0 0 .3rem;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--vfcd-leaf, #3d7a4a);
}
.vfcd-map-head h3 {
    font-family: var(--vfcd-font-display, 'Fraunces', Georgia, serif);
    font-weight: 560; font-size: 1.5rem; line-height: 1.15;
    color: var(--vfcd-ink, #16241a); margin: 0 0 .4rem;
}
.vfcd-map-sub { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .84rem; line-height: 1.55; color: var(--vfcd-muted, #68766d); margin: 0; max-width: 42ch; }
.vfcd-map-x {
    flex: none; width: 36px; height: 36px; border-radius: 999px;
    background: var(--vfcd-mist, #eef1e6); border: 1px solid var(--vfcd-line, #e6e7dd);
    font-size: 1.15rem; line-height: 1; color: var(--vfcd-ink-soft, #3c4a42); cursor: pointer;
    transition: background-color .2s var(--vfcd-ease, ease), transform .2s var(--vfcd-ease, ease);
}
.vfcd-map-x:hover { background: #e0e8dc; transform: rotate(90deg); }

/* Step wrapper */
.vfcd-map-step[hidden] { display: none; }

/* Verify card: the big, calm confirmation step */
.vfcd-map-verify {
    background: var(--vfcd-mist, #eef1e6);
    border: 1.5px solid #cfe0d2;
    border-radius: 18px;
    padding: 1.25rem 1.35rem;
}
.vfcd-map-verify-label {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--vfcd-forest, #1e4d2b);
    margin: 0 0 .65rem;
}
.vfcd-map-verify-label .vfcd-ic { width: 19px; height: 19px; stroke-width: 2.1; }
.vfcd-map-verify-addr {
    font-family: var(--vfcd-font-body, 'Open Sans', sans-serif);
    font-size: 1.06rem; line-height: 1.6; font-weight: 600;
    color: var(--vfcd-ink, #16241a); margin: 0 0 .5rem;
    overflow-wrap: anywhere;
}
.vfcd-map-verify-dist { font-size: .92rem; margin: 0 0 .3rem; }
.vfcd-map-verify-coords {
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .74rem; font-weight: 600; letter-spacing: .04em;
    color: var(--vfcd-muted, #68766d); margin: 0;
    font-variant-numeric: tabular-nums;
}
.vfcd-map-actions-split { justify-content: space-between; align-items: center; margin-top: 1.15rem; }

/* Search row: field with leading icon + GPS button */
.vfcd-map-search { position: relative; display: flex; gap: .55rem; margin-bottom: .6rem; }
.vfcd-map-search > .vfcd-ic {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--vfcd-muted); pointer-events: none;
}
.vfcd-map-search input {
    flex: 1; min-width: 0; height: 46px;
    border: 1.5px solid var(--vfcd-line-strong); border-radius: 12px;
    padding: 0 2.6rem 0 2.5rem; font-family: var(--vfcd-font-body); font-size: .95rem; color: var(--vfcd-ink);
    background: var(--vfcd-surface);
}
.vfcd-map-search input:focus { outline: none; border-color: var(--vfcd-forest); box-shadow: 0 0 0 3px rgba(61, 122, 74, .14); }
.vfcd-map-locate {
    flex: none; width: 46px; height: 46px; border-radius: 12px;
    background: var(--vfcd-mist); border: 1.5px solid var(--vfcd-line-strong); color: var(--vfcd-forest); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s var(--vfcd-ease), background-color .2s var(--vfcd-ease);
}
.vfcd-map-locate:hover { border-color: var(--vfcd-leaf); background: #e7ede4; }
.vfcd-map-locate .vfcd-ic { width: 19px; height: 19px; }
.vfcd-ic.spin { animation: vfcd-spin 1s linear infinite; }
@keyframes vfcd-spin { to { transform: rotate(360deg); } }

/* Search results dropdown */
.vfcd-map-results {
    list-style: none; margin: -0.25rem 0 .6rem; padding: .25rem;
    background: var(--vfcd-surface); border: 1px solid var(--vfcd-line); border-radius: 12px;
    box-shadow: 0 18px 38px -18px rgba(20, 56, 33, .35); max-height: 232px; overflow-y: auto;
}
.vfcd-map-results li + li { border-top: 1px solid var(--vfcd-line); }
.vfcd-map-results button {
    display: grid; gap: .1rem; width: 100%; text-align: left;
    background: none; border: 0; border-radius: 8px; padding: .55rem .7rem; cursor: pointer;
    font-family: var(--vfcd-font-body); font-size: .88rem; color: var(--vfcd-ink);
}
.vfcd-map-results button:hover, .vfcd-map-results button.is-active { background: var(--vfcd-mist); }
.vfcd-map-results button strong { font-family: var(--vfcd-font-ui); font-weight: 600; font-size: .9rem; }
.vfcd-map-results button span { color: var(--vfcd-muted); font-size: .78rem; }

/* Map canvas + readout */
.vfcd-map-canvas { height: 300px; border-radius: 14px; overflow: hidden; border: 1px solid var(--vfcd-line, #e6e7dd); background: var(--vfcd-mist, #eef1e6); }
@media (max-width: 640px) { .vfcd-map-canvas { height: 260px; } }
.vfcd-map-readout {
    display: grid; gap: .25rem; margin-top: .8rem; padding: .85rem 1rem;
    background: var(--vfcd-mist, #eef1e6); border: 1px solid #d5e4d5; border-radius: 12px;
}
.vfcd-map-readout-cap {
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--vfcd-leaf, #3d7a4a);
}
.vfcd-map-readout-addr { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .92rem; line-height: 1.55; color: var(--vfcd-ink, #16241a); font-weight: 600; overflow-wrap: anywhere; }
/* Distance preview: the "so what" line under the address. Forest green,
   distinct weight — it answers "what does this pin mean for delivery?" */
.vfcd-map-dist,
.vfcd-map-verify-dist {
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .84rem; font-weight: 600;
    color: var(--vfcd-forest, #1e4d2b);
    margin: 0;
    font-variant-numeric: lining-nums;
}
.vfcd-map-readout-coords { font-family: var(--vfcd-font-ui, 'Poppins', sans-serif); font-size: .74rem; font-weight: 600; color: var(--vfcd-muted, #68766d); font-variant-numeric: tabular-nums; }

/* Manual coordinate entry */
.vfcd-map-manual { margin-top: .7rem; border: 1px dashed var(--vfcd-line); border-radius: 12px; padding: .55rem .8rem; }
.vfcd-map-manual summary { cursor: pointer; font-family: var(--vfcd-font-ui); font-size: .8rem; font-weight: 600; color: var(--vfcd-muted); }
.vfcd-map-manual-row { display: flex; gap: .5rem; margin-top: .65rem; }
.vfcd-map-manual-row input {
    flex: 1; min-width: 0; height: 42px; border: 1.5px solid var(--vfcd-line); border-radius: 10px;
    padding: 0 .7rem; font-family: var(--vfcd-font-ui); font-size: .88rem; color: var(--vfcd-ink);
}
.vfcd-map-manual-row input:focus { outline: none; border-color: var(--vfcd-forest); }
.vfcd-map-manual-row .vfcd-btn { white-space: nowrap; }
.vfcd-map-manual-err { font-family: var(--vfcd-font-body); font-size: .78rem; color: var(--vfcd-danger); margin: .45rem 0 0; min-height: 1em; }

.vfcd-map-note { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .78rem; color: var(--vfcd-muted, #68766d); margin: .75rem 0 0; line-height: 1.55; }
.vfcd-map-actions { display: flex; justify-content: flex-end; align-items: center; gap: .7rem; margin-top: 1.05rem; }
.vfcd-map-actions .vfcd-btn[hidden] { display: none; }
.vfcd-map-privacy {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .72rem; font-weight: 600; color: var(--vfcd-muted, #68766d);
    margin-right: auto;
}
.vfcd-map-privacy .vfcd-ic { width: 14px; height: 14px; color: var(--vfcd-leaf, #3d7a4a); }
.vfcd-map-actions-split .vfcd-btn-ghost { margin-right: 0; }
@media (max-width: 560px) {
    .vfcd-map-actions { flex-wrap: wrap; }
    .vfcd-map-privacy { flex-basis: 100%; margin-bottom: .35rem; }
    .vfcd-map-actions-split { justify-content: stretch; }
    .vfcd-map-actions-split .vfcd-btn { flex: 1; }
}

/* Premium Leaflet locus marker.
   The dot is a <span> inside Leaflet's divIcon — Leaflet gives the wrapper
   a size but NOT the span, and a bare inline span collapses to zero width,
   which rendered as a thin white dash instead of a pin on mobile. Pin it
   to the icon box with display:block and an ::after tip so the marker
   reads as an unmissable map pin. */
.vfcd-locus { position: relative; background: transparent; border: 0; }
.vfcd-locus.is-drop .vfcd-locus-dot { animation: vfcd-pin-drop .5s cubic-bezier(.22,1.4,.36,1); }
@keyframes vfcd-pin-drop {
    0% { transform: rotate(-45deg) translate(-14px, 14px); opacity: 0; }
    70% { transform: rotate(-45deg) translate(2px, -2px); opacity: 1; }
    100% { transform: rotate(-45deg) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .vfcd-locus.is-drop .vfcd-locus-dot { animation: none; } }
.vfcd-locus-dot {
    display: block; width: 26px; height: 26px; border-radius: 999px 999px 999px 2px;
    transform: rotate(-45deg);
    background: var(--vfcd-forest, #2c5e3f); border: 3px solid #ffffff;
    box-shadow: 0 3px 10px rgba(20, 56, 33, .5);
}
.vfcd-locus-dot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 999px; background: #ffffff;
}
@media (prefers-reduced-motion: no-preference) {
    .vfcd-locus::after {
        content: ""; position: absolute; inset: -9px;
        border-radius: 999px; border: 2px solid var(--vfcd-leaf);
        animation: vfcd-ripple 1.8s ease-out infinite;
    }
}
@keyframes vfcd-ripple { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* Reduced motion: stop every loop and transition */
@media (prefers-reduced-motion: reduce) {
    .vfcd-bar-fill, .vfcd-btn, .vfcd-prod, .vfcd-size-btn, .vfcd-map-btn, .vfcd-member, .vfcd-modal .modal-close { transition: none; }
    .vfcd-btn:hover, .vfcd-prod:hover, .vfcd-map-btn:hover { transform: none; }
    .vfcd-bar-fill::after, .vfcd-btn-primary::after, .vfcd-hero-card { animation: none; }
    .vfcd-hero-card-cap::before, .vfcd-locus::after { animation: none; }
    .vfcd-confetti { animation: none; display: none; }
}

/* =============================================================
   VFC — Community hero stage (homepage + /community/ landing)
   Deep-forest stage, gated-community scene, glass progress card.
   Motion: transform/opacity only; every loop is reduced-motion gated.
   ============================================================= */

.vfc-hero {
    position: relative;
    overflow: hidden;
    color: #f4f2ea;
    background:
        radial-gradient(1100px 460px at 82% -8%, rgba(201, 150, 46, .14), transparent 60%),
        radial-gradient(900px 520px at 8% 108%, rgba(61, 122, 74, .22), transparent 60%),
        linear-gradient(150deg, #1b4a2c 0%, #143821 55%, #0f2c1a 100%);
}
@media (prefers-reduced-motion: no-preference) {
    .vfc-hero { animation: vfc-stage-in 1s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes vfc-stage-in { from { opacity: 0; } to { opacity: 1; } }

/* Slim homepage variant: short copy, strong scrim, one progress visual.
   v3.9.42 layout fix: the old 40rem single-column cap parked all content in
   the left quarter of a wide viewport and left the rest dead. The copy keeps
   an editorial measure on the left; the progress visual becomes a proper
   stat card in its own right-hand column, so the section spans the full
   container and the cityscape carries the middle ground between them.
   Contrast hardening: a bottom-left gradient scrim sits between the copy and
   the animated scene; the scene itself is dimmed further on the homepage so
   every text token clears WCAG AA against its worst-case background. */
.vfc-hero-slim .vfc-hero-bg .vfc-scene { opacity: .5; }
.vfc-hero-slim .vfc-hero-inner { padding: 4.2rem 0 4.6rem; gap: 1.7rem; }
.vfc-hero-slim .vfc-hero-copy { position: relative; max-width: 40rem; }
.vfc-hero-slim .vfc-hero-copy::before {
    content: ""; position: absolute; inset: -2.2rem -3rem -2.4rem -2.6rem; z-index: -1;
    background: linear-gradient(100deg, rgba(11, 28, 17, .62) 0%, rgba(11, 28, 17, .34) 62%, transparent 100%);
    border-radius: 28px; pointer-events: none;
}
.vfc-hero-slim .vfc-lede { color: #eef0e4; max-width: 34rem; }
.vfc-hero-slim .vfc-eyebrow { color: #d9c078; }
@media (min-width: 960px) {
    .vfc-hero-slim .vfc-hero-inner {
        grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
        gap: clamp(3rem, 6vw, 6rem);
        align-items: center;
        padding: 5.2rem 0 5.6rem;
    }
    .vfc-hero-slim .vfc-title { font-size: clamp(3rem, 4.4vw, 4.25rem); }
    .vfc-hero-slim .vfc-lede { font-size: 1.12rem; }
    .vfc-hero-slim .vfc-hero-copy { max-width: 44rem; }
}
/* Premium stat card: caption, display-size amount, full-width bar, note. */
.vfc-mini-progress {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: .45rem 1rem;
    margin-top: .6rem;
    background: linear-gradient(160deg, rgba(12, 30, 18, .82), rgba(9, 24, 14, .6));
    border: 1px solid rgba(233, 236, 220, .22);
    border-radius: 18px; padding: 1.35rem 1.5rem 1.25rem;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 28px 56px -28px rgba(4, 14, 8, .6);
}
.vfc-mini-caption {
    grid-column: 1 / -1;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: #d9c078;
    padding-bottom: .55rem; margin-bottom: .35rem;
    border-bottom: 1px solid rgba(233, 236, 220, .14);
}
.vfc-mini-amount { font-family: var(--vfcd-font-display, 'Fraunces', Georgia, serif); font-size: clamp(1.65rem, 2.1vw, 2rem); font-weight: 600; color: #f4f2ea; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.vfc-mini-of { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-weight: 400; color: #c8d4c4; font-size: .82rem; margin-left: .55rem; letter-spacing: 0; }
.vfc-mini-bar { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: rgba(244, 242, 234, .22); overflow: hidden; }
.vfc-mini-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #3d7a4a, #d9c078); transition: width 1.2s var(--vfcd-ease); }
.vfc-mini-note { grid-column: 1 / -1; font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .88rem; color: #e2e6d8; }
.vfc-mini-progress.is-in .vfc-mini-fill { width: 95%; }
@media (max-width: 640px) {
    .vfc-hero-slim .vfc-hero-inner { padding: 3.2rem 0 3.6rem; }
    .vfc-hero-slim .vfc-hero-copy::before { inset: -1.6rem -1.4rem -2rem -1.2rem; }
    .vfc-mini-progress { padding: 1.15rem 1.25rem 1.05rem; }
}
.vfc-hero .container { position: relative; z-index: 2; }

/* Landing-page variant: the homepage hero is a 2-col split (copy + stat
   card), but this page's hero has no right-hand card — its content continues
   in the sections below. Force the single editorial column so the copy keeps
   a comfortable measure across the full container instead of being squeezed
   into the left half of a 2-col grid with dead space on the right. */
.vfc-hero-page .vfc-hero-inner { grid-template-columns: 1fr; }
.vfc-hero-page .vfc-hero-copy { max-width: 44rem; }
.vfc-hero-page .vfc-lede { max-width: 38rem; }

/* Ambient light blobs (fixed-position feel; pointer-transparent) */
.vfc-hero-glow {
    position: absolute; border-radius: 999px; pointer-events: none;
    filter: blur(60px); opacity: .5; will-change: transform;
}
.vfc-hero-glow-a { width: 420px; height: 420px; top: -160px; right: -120px; background: rgba(217, 192, 120, .16); }
.vfc-hero-glow-b { width: 520px; height: 520px; bottom: -220px; left: -160px; background: rgba(61, 122, 74, .2); }
@media (prefers-reduced-motion: no-preference) {
    .vfc-hero-glow-a { animation: vfc-glow-a 13s ease-in-out infinite; }
    .vfc-hero-glow-b { animation: vfc-glow-b 17s ease-in-out infinite; }
}
@keyframes vfc-glow-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 26px) scale(1.06); } }
@keyframes vfc-glow-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(36px, -22px) scale(1.04); } }

/* The illustrated Hyderabad scene: a layered parallax cityscape.
   Each layer is a 1200-unit tile painted twice and scrolled exactly one tile
   width, so the world loops with no visible seam. Nearest layers travel
   fastest (foreground 8s -> clouds 150s), which is what creates the depth.
   Only transform/opacity animate, so every layer stays on the compositor. */
.vfc-hero-bg {
    position: absolute; inset: 0;
    color: #f4f2ea;
    opacity: .3;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
}
/* Scrim over the scene: the copy and the progress card stay dominant. */
.vfc-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 32, 19, .58) 0%, rgba(10, 32, 19, .1) 48%, rgba(10, 32, 19, .34) 100%),
        radial-gradient(130% 78% at 50% 120%, rgba(10, 32, 19, .5), transparent 68%);
}
.vfc-scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 260px; display: block; }
.vfc-scene use { color: inherit; }
@media (min-width: 768px) { .vfc-scene { height: 340px; } }
@media (min-width: 1200px) { .vfc-scene { height: 100%; } }

@media (prefers-reduced-motion: no-preference) {
    /* Parallax scroll — one full tile per cycle, linear, therefore seamless. */
    .vfc-l-clouds  { animation: vfc-scroll 150s linear infinite; }
    .vfc-l-skyline { animation: vfc-scroll  90s linear infinite; }
    .vfc-l-towers  { animation: vfc-scroll  52s linear infinite; }
    .vfc-l-mid     { animation: vfc-scroll  30s linear infinite; }
    .vfc-l-road    { animation: vfc-scroll  17s linear infinite; }
    .vfc-l-traffic { animation: vfc-scroll   9s linear infinite; }
    .vfc-l-near    { animation: vfc-scroll   8s linear infinite; }

    /* The truck holds its place in frame — the camera travels with it — with a
       slow drift so the shot never feels locked, plus suspension and exhaust. */
    .vfc-van-drift  { animation: vfc-van-drift 26s ease-in-out infinite alternate; }
    .vfc-van-body   { animation: vfc-van-bounce .9s ease-in-out infinite; }
    .vfc-van-shadow { animation: vfc-van-shadow .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    /* wheel spin matched to the road's ~70 units/s at r=13.5 */
    .vfc-wheel { animation: vfc-wheel-spin 1.2s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .vfc-puff  { animation: vfc-puff 1.3s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .vfc-puff circle:nth-child(2) { animation-delay: -.5s; }
    .vfc-walker   { animation: vfc-walk 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
    .vfc-walker-b { animation-delay: -.55s; }
}
@keyframes vfc-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1200px, 0, 0); } }
@keyframes vfc-van-drift { from { transform: translate3d(-26px, 0, 0); } to { transform: translate3d(26px, 0, 0); } }
@keyframes vfc-van-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.3px); } }
@keyframes vfc-van-shadow { 0%, 100% { transform: scaleX(1); opacity: .18; } 50% { transform: scaleX(.93); opacity: .14; } }
@keyframes vfc-wheel-spin { to { transform: rotate(360deg); } }
@keyframes vfc-puff { 0% { transform: translate(0, 0) scale(.6); opacity: .32; } 100% { transform: translate(-20px, -9px) scale(1.7); opacity: 0; } }
@keyframes vfc-walk { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2.4px) rotate(1.2deg); } }

/* The brand mark on the truck is a printed symbol, not the colour artwork:
   a single-tone stencil at low opacity, so it reads as livery painted onto
   the panel rather than a pasted full-colour sticker. */
.vfc-van-mark { opacity: .34; }

/* Mobile: keep the truck and the towers, drop the near-empty high haze band
   and push the scene lower so it never competes with the CTAs. */
@media (max-width: 767px) {
    .vfc-hero-bg { opacity: .28; }
    .vfc-hero-bg::after {
        background: linear-gradient(180deg, rgba(10, 32, 19, .34) 0%, rgba(10, 32, 19, .58) 100%);
    }
    .vfc-l-clouds { display: none; }
}

.vfc-hero-inner {
    display: grid; gap: 3rem; align-items: center;
    padding: 1.5rem 0 3rem; min-height: min(78vh, 720px);
}
@media (min-width: 960px) {
    .vfc-hero-inner { grid-template-columns: 1.05fr .95fr; gap: 4rem; padding: 2.5rem 0 4rem; }
}
@media (max-width: 599px) {
    .vfc-hero-inner { min-height: 0; padding: .75rem 0 2rem; }
}

/* Copy — min-width:0 lets this grid item shrink below its max-content,
   so the headline/lede columns never push the card off-screen. */
.vfc-hero-copy { min-width: 0; }
.vfc-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(244, 242, 234, .78);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(244, 242, 234, .18);
    border-radius: 999px; padding: .5rem 1.05rem;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    margin: 0 0 1.4rem;
}
.vfc-eyebrow-dot { width: 7px; height: 7px; border-radius: 999px; background: #d9c078; flex: none; }
@media (prefers-reduced-motion: no-preference) {
    .vfc-eyebrow-dot { animation: vfc-pulse 2.4s ease-in-out infinite; }
}
/* The pill turns into a heavy three-line blob once its label wraps on a
   phone, so on small screens it becomes a plain editorial kicker instead. */
@media (max-width: 599px) {
    .vfc-eyebrow {
        display: block;
        background: none; border: 0; border-radius: 0; padding: 0;
        font-size: .64rem; letter-spacing: .14em; line-height: 1.75;
        color: rgba(244, 242, 234, .64);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        margin-bottom: 1.1rem;
    }
    .vfc-eyebrow-dot { display: none; }
}
.vfc-title {
    font-family: var(--vfcd-font-display, 'Fraunces', Georgia, serif);
    font-weight: 560;
    font-size: clamp(2.35rem, 5.4vw, 3.9rem);
    line-height: 1.07; letter-spacing: -0.015em;
    color: #f4f2ea;
    margin: 0 0 1.15rem;
    text-wrap: balance;
}
.vfc-title em {
    font-style: italic; color: #d9c078; display: inline-block; padding-bottom: .06em;
}
.vfc-title-h1 { font-size: clamp(2.5rem, 6.2vw, 4.35rem); }
.vfc-lede {
    font-family: var(--vfcd-font-body, 'Open Sans', sans-serif);
    font-size: 1.08rem; line-height: 1.72;
    color: rgba(244, 242, 234, .82);
    max-width: 44rem; margin: 0 0 1.4rem;
}
.vfc-points { list-style: none; margin: 0 0 1.9rem; padding: 0; display: grid; gap: .6rem; }
.vfc-points li {
    display: flex; align-items: flex-start; gap: .65rem;
    font-family: var(--vfcd-font-body, 'Open Sans', sans-serif);
    font-size: .97rem; line-height: 1.55; color: rgba(244, 242, 234, .85);
}
.vfc-points li::before {
    content: ""; flex: none; width: 20px; height: 20px; margin-top: .1rem;
    border-radius: 999px;
    background: rgba(217, 192, 120, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9c078' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    border: 1px solid rgba(217, 192, 120, .35);
}
.vfc-points strong { color: #f4f2ea; font-weight: 600; }
.vfc-meta {
    font-family: var(--vfcd-font-body, 'Open Sans', sans-serif);
    font-size: .82rem; color: rgba(244, 242, 234, .55);
    margin: 1.4rem 0 0;
}
.vfc-sec-kicker {
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--vfcd-leaf, #3d7a4a); margin: 0 0 .5rem;
}

/* CTA buttons — layered motion: shine sweep, arrow nudge, tactile press */
.vfc-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.vfc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-weight: 600; font-size: .98rem; letter-spacing: .01em;
    padding: .95rem 1.7rem; min-height: 52px;
    border-radius: 999px; text-decoration: none;
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background-color .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
}
.vfc-btn:active { transform: translateY(0) scale(.98); }
.vfc-btn:focus-visible { outline: 2px solid #d9c078; outline-offset: 3px; }
.vfc-btn svg { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.vfc-btn:hover svg { transform: translateX(3px); }
.vfc-btn-light {
    background: #f4f2ea; color: #143821;
    box-shadow: 0 1px 2px rgba(6, 20, 11, .35), 0 14px 30px -12px rgba(6, 20, 11, .5);
}
.vfc-btn-light:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(6, 20, 11, .35), 0 20px 40px -14px rgba(6, 20, 11, .55); }
@media (prefers-reduced-motion: no-preference) {
    .vfc-btn-light::after {
        content: ""; position: absolute; inset: 0; z-index: -1;
        background: linear-gradient(100deg, transparent 32%, rgba(30, 77, 43, .12) 50%, transparent 68%);
        transform: translateX(-110%);
        transition: transform .9s cubic-bezier(.16,1,.3,1);
    }
    .vfc-btn-light:hover::after { transform: translateX(110%); }
}
.vfc-btn-ghost {
    background: rgba(244, 242, 234, .06);
    border: 1.5px solid rgba(244, 242, 234, .32);
    color: #f4f2ea;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vfc-btn-ghost:hover { border-color: rgba(244, 242, 234, .75); background: rgba(244, 242, 234, .12); transform: translateY(-2px); }

/* Glass progress card — smoked-glass membership card.
   One disciplined palette: cream = text, gold = progress/reward,
   mint = live status. Dark glass keeps contrast high on the stage. */
.vfc-hero-cardwrap { display: flex; justify-content: center; }
.vfc-hero-card {
    margin: 0; width: 100%; max-width: 26.5rem;
    display: grid; gap: .5rem;
    background: linear-gradient(168deg, rgba(9, 26, 16, .58) 0%, rgba(9, 26, 16, .38) 100%);
    border: 1px solid rgba(244, 242, 234, .16);
    border-radius: 22px;
    padding: 1.6rem 1.7rem 1.45rem;
    box-shadow:
        0 30px 70px -24px rgba(4, 14, 8, .75),
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(0, 0, 0, .25);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    color: #f4f2ea;
    position: relative; overflow: hidden;
}
/* soft top light + gold hairline on the top edge */
.vfc-hero-card::before {
    content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(227, 198, 127, .55), transparent);
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .vfc-hero-card { animation: vfc-card-float 7s ease-in-out infinite; }
    /* single diagonal light sweep when the card reveals */
    .vfc-hero-card::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(115deg, transparent 38%, rgba(244, 242, 234, .07) 50%, transparent 62%);
        transform: translateX(-120%);
        pointer-events: none;
    }
    .vfc-hero-card.is-in::after { transition: transform 1.4s cubic-bezier(.16,1,.3,1) .35s; transform: translateX(120%); }
}
@keyframes vfc-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* brand mark, top-right: the real birds artwork on transparent background
   (no disc — the artwork floats on the smoked glass) with a soft drop so it
   never visually drowns in the card. */
.vfc-card-seal {
    position: absolute; top: .85rem; right: 1rem;
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
}
.vfc-card-seal img {
    width: 40px; height: 40px; object-fit: contain; display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
/* live-creeping bar: between the reveal jump and real order ticks, a ghost
   shimmer of momentum — a tiny forward pulse every few seconds. The knob
   and the sheen remain; the creep reads as "someone just ordered". */
@media (prefers-reduced-motion: no-preference) {
    .vfc-card-bar-fill.is-live { animation: vfc-bar-creep 6s ease-in-out infinite; }
}
@keyframes vfc-bar-creep {
    0%, 100% { transform: scaleX(1); }
    12% { transform: scaleX(1.018); }
    24% { transform: scaleX(1); }
}
@keyframes vfc-bar-bump {
    0% { filter: brightness(1); }
    35% { filter: brightness(1.45); }
    100% { filter: brightness(1); }
}
.vfc-card-cap {
    display: flex; align-items: center; gap: .5rem;
    padding-right: 2.6rem;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(244, 242, 234, .62);
}
.vfc-card-dot { width: 7px; height: 7px; border-radius: 999px; background: #9adfa9; box-shadow: 0 0 0 0 rgba(154, 223, 169, .5); }
@media (prefers-reduced-motion: no-preference) {
    .vfc-card-dot { animation: vfc-live-pulse 2.2s ease-in-out infinite; }
}
@keyframes vfc-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(154, 223, 169, .45); } 50% { box-shadow: 0 0 0 5px rgba(154, 223, 169, 0); } }
.vfc-card-name { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: var(--vfcd-font-ui, 'Poppins', sans-serif); font-weight: 600; font-size: 1.04rem; color: #ffffff; margin-top: .3rem; }
.vfc-card-km { font-size: .68rem; font-weight: 600; color: rgba(244, 242, 234, .85); background: rgba(244, 242, 234, .12); border: 1px solid rgba(244, 242, 234, .22); border-radius: 999px; padding: .14rem .6rem; font-variant-numeric: lining-nums; }
.vfc-card-total { display: flex; align-items: baseline; gap: .55rem; font-family: var(--vfcd-font-display, 'Fraunces', Georgia, serif); font-weight: 560; font-size: 2.3rem; line-height: 1.05; color: #f7f3e8; font-variant-numeric: lining-nums; margin: .45rem 0 .3rem; }
/* the count-up span must inherit the cream, not the page ink */
.vfc-hero-card .vfcd-count { color: #f7f3e8; }
.vfc-card-of { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .86rem; font-weight: 400; color: rgba(244, 242, 234, .55); }
.vfc-card-bar { height: 10px; border-radius: 999px; background: rgba(244, 242, 234, .13); overflow: visible; position: relative; }
.vfc-card-bar-fill {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #b98f22, #e3c67f);
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(.16,1,.3,1);
    position: relative;
}
/* glowing gold knob at the fill's end */
.vfc-card-bar-fill::after {
    content: ""; position: absolute; right: -6px; top: 50%;
    width: 12px; height: 12px; border-radius: 999px;
    transform: translateY(-50%);
    background: #f1dda6;
    border: 2px solid #0f2c1a;
    box-shadow: 0 0 10px rgba(227, 198, 127, .8);
}
@media (prefers-reduced-motion: no-preference) {
    .vfc-card-bar-fill { overflow: hidden; }
    .vfc-card-bar-fill::before {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
        transform: translateX(-100%);
        animation: vfc-card-sheen 3.4s ease-in-out infinite;
    }
}
@keyframes vfc-card-sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.vfc-card-note { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .87rem; color: rgba(244, 242, 234, .8); }
.vfc-card-note strong { color: #e3c67f; font-weight: 600; font-variant-numeric: lining-nums; }
.vfc-card-people { display: flex; align-items: center; margin-top: .4rem; }
.vfc-ava {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px;
    background: #f4f2ea; border: 2px solid rgba(9, 26, 16, .55);
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif); font-size: .66rem; font-weight: 700; color: #143821;
    margin-left: -8px;
    box-shadow: 0 2px 6px rgba(4, 14, 8, .35);
}
.vfc-ava:first-child { margin-left: 0; }
.vfc-ava.is-more { background: linear-gradient(150deg, #ecd9a4, #c9962e 78%); border-color: rgba(9, 26, 16, .55); color: #3a2c07; }
.vfc-card-paid { margin-left: auto; font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .76rem; color: rgba(244, 242, 234, .66); }
.vfc-card-truck {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .55rem; padding-top: .7rem;
    border-top: 1px dashed rgba(244, 242, 234, .2);
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(244, 242, 234, .72);
}
.vfc-card-truck strong { color: #9adfa9; font-variant-numeric: lining-nums; }
@media (prefers-reduced-motion: no-preference) {
    .vfc-card-truck svg { animation: vfc-truck-nudge 2.6s ease-in-out infinite; }
}
@keyframes vfc-truck-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Anchor targets clear the sticky mobile action bar when deep-linked */
#vfcd-start, #vfcd-join, #vfcd-how { scroll-margin-top: 96px; }

/* Trust strip (page) */
.vfc-strip {
    display: grid; gap: 1px;
    background: var(--vfcd-line, #e6e7dd);
    border: 1px solid var(--vfcd-line, #e6e7dd);
    border-radius: 20px; overflow: hidden;
    grid-template-columns: 1fr;
    max-width: 56rem; margin: 0 auto 4.5rem;
}
@media (min-width: 720px) { .vfc-strip { grid-template-columns: repeat(4, 1fr); } }
.vfc-strip-item { background: #fbfcf8; padding: 1.35rem 1.4rem; display: grid; gap: .3rem; }
.vfc-strip-num {
    font-family: var(--vfcd-font-display, 'Fraunces', Georgia, serif);
    font-weight: 560; font-size: 1.55rem; color: var(--vfcd-forest, #1e4d2b);
    font-variant-numeric: lining-nums;
}
.vfc-strip-cap { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .8rem; line-height: 1.55; color: var(--vfcd-muted, #68766d); }

/* AEO summary block */
.vfc-aeo {
    max-width: 46rem; margin: 0 auto 4.5rem;
    background: var(--vfcd-mist, #eef1e6);
    border: 1px solid var(--vfcd-line, #e6e7dd);
    border-radius: 20px; padding: 1.7rem 1.8rem;
}
.vfc-aeo p { font-family: var(--vfcd-font-body, 'Open Sans', sans-serif); font-size: .95rem; line-height: 1.78; color: var(--vfcd-ink-soft, #3c4a42); margin: 0; }
.vfc-aeo a { color: var(--vfcd-forest, #1e4d2b); font-weight: 600; }

/* Homepage-only spacing glue (stage styles live in style.css) */
.vfc-hero .vfc-hero-inner { padding-bottom: 2.75rem; }

/* =============================================================
   VFC — premium motion layer

   Techniques adapted from the animated-component vocabulary the
   brief pointed at (stagger-text, radial-glow button, corner
   button, marquee) — reimplemented natively for this theme's
   stack: no React, no Tailwind, no motion runtime, no new
   dependency. Transform and opacity only, so every effect stays
   on the compositor and every loop is reduced-motion gated.
   ============================================================= */

/* ---- Stagger text: the headline rises out of a per-word mask.
   The words are real text nodes in the markup, so the heading is
   fully crawlable — the mask is purely presentational. ---- */
.vfc-mask {
    display: inline-block; overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .17em; margin-bottom: -.17em;
}
.vfc-mask-in { display: inline-block; }
.vfcd-js .vfc-mask-in { transform: translateY(120%); }
@media (prefers-reduced-motion: no-preference) {
    .vfc-mask-in {
        transition: transform .9s cubic-bezier(.16, 1, .3, 1);
        transition-delay: calc(var(--i, 0) * 72ms);
    }
}
.vfc-title.is-in .vfc-mask-in { transform: none; }

/* ---- Radial-glow button: warm light tracks the cursor across
   the pill. The coordinates arrive as CSS variables set by rAF,
   never through React state, so nothing re-renders. ---- */
.vfc-btn > * { position: relative; z-index: 1; }
.vfc-btn-light::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(150px 150px at var(--vfc-mx, 50%) var(--vfc-my, 50%),
        rgba(217, 192, 120, .6), rgba(217, 192, 120, 0) 72%);
    opacity: 0;
    transition: opacity .4s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .vfc-btn-light[data-vfc-glow]:hover::before,
    .vfc-btn-light[data-vfc-glow]:focus-visible::before { opacity: 1; }
}

/* ---- Corner button: brackets draw in from the corners on hover,
   with a warm wash rising from the baseline underneath. ---- */
.vfc-btn-ghost::before {
    content: ""; position: absolute; inset: 7px; z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(#d9c078, #d9c078) 0 0 / 14px 1.5px no-repeat,
        linear-gradient(#d9c078, #d9c078) 0 0 / 1.5px 14px no-repeat,
        linear-gradient(#d9c078, #d9c078) 100% 0 / 14px 1.5px no-repeat,
        linear-gradient(#d9c078, #d9c078) 100% 0 / 1.5px 14px no-repeat,
        linear-gradient(#d9c078, #d9c078) 0 100% / 14px 1.5px no-repeat,
        linear-gradient(#d9c078, #d9c078) 0 100% / 1.5px 14px no-repeat,
        linear-gradient(#d9c078, #d9c078) 100% 100% / 14px 1.5px no-repeat,
        linear-gradient(#d9c078, #d9c078) 100% 100% / 1.5px 14px no-repeat;
    opacity: 0; transform: scale(.9);
    transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
}
.vfc-btn-ghost::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(217, 192, 120, .17), rgba(217, 192, 120, .02));
    transform: scaleY(0); transform-origin: 50% 100%;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
@media (hover: hover) {
    .vfc-btn-ghost:hover::before, .vfc-btn-ghost:focus-visible::before { opacity: .85; transform: none; }
    .vfc-btn-ghost:hover::after, .vfc-btn-ghost:focus-visible::after { transform: scaleY(1); }
}

/* ---- Benefit list: staggered rise, so the three points land
   one after another instead of as a block. ---- */
.vfcd-js .vfc-points li { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: no-preference) {
    .vfc-points li {
        transition: opacity .62s cubic-bezier(.16, 1, .3, 1), transform .62s cubic-bezier(.16, 1, .3, 1);
    }
    .vfc-points li:nth-child(1) { transition-delay: .06s; }
    .vfc-points li:nth-child(2) { transition-delay: .14s; }
    .vfc-points li:nth-child(3) { transition-delay: .22s; }
}
.vfcd-js .vfc-points.is-in li { opacity: 1; transform: none; }

/* ---- Keyword ribbon: a slow marquee of what the farm actually
   delivers. Two identical sets, translated exactly one set width,
   so the loop has no seam. ---- */
.vfc-ribbon {
    position: relative; overflow: hidden;
    /* The marquee track is width:max-content, so without this the ribbon
       reports its full 2-set width as min-content and inflates the hero
       column past the viewport (clipping the copy). Containing the inline
       size keeps the track's width local to the ribbon. */
    contain: inline-size;
    margin: 2.4rem 0 0; padding: .82rem 0;
    border-top: 1px solid rgba(244, 242, 234, .12);
    border-bottom: 1px solid rgba(244, 242, 234, .12);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.vfc-ribbon-track { display: flex; width: max-content; }
.vfc-ribbon-set { display: inline-flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; }
.vfc-ribbon-item {
    display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
    font-family: var(--vfcd-font-ui, 'Poppins', sans-serif);
    font-size: .74rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
    color: rgba(244, 242, 234, .6);
}
.vfc-ribbon-item::before {
    content: ""; flex: none; width: 5px; height: 5px; border-radius: 999px;
    background: #d9c078; opacity: .75;
}
@media (prefers-reduced-motion: no-preference) {
    .vfc-ribbon-track { animation: vfc-ribbon 38s linear infinite; }
}
@keyframes vfc-ribbon { to { transform: translate3d(-50%, 0, 0); } }

/* On the page hero the ribbon sits inside the copy column, so it
   aligns to the text rather than the viewport. */
.vfc-hero-copy .vfc-ribbon { max-width: 44rem; }
@media (max-width: 599px) {
    .vfc-ribbon { margin-top: 1.7rem; }
    .vfc-ribbon-set { gap: 1.7rem; padding-right: 1.7rem; }
    .vfc-ribbon-item { font-size: .68rem; letter-spacing: .13em; }
}

/* Scene + loops off when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
    .vfc-layer, .vfc-van-drift, .vfc-van-body, .vfc-van-shadow, .vfc-wheel, .vfc-puff, .vfc-walker,
    .vfc-ribbon-track, .vfc-mask-in, .vfc-points li { animation: none !important; transform: none !important; opacity: 1 !important; }
    .vfc-btn-light::before, .vfc-btn-ghost::before, .vfc-btn-ghost::after { transition: none !important; }
    /* no hover ornamentation at all when motion is reduced */
    .vfc-btn-light::before, .vfc-btn-ghost::before, .vfc-btn-ghost::after { opacity: 0 !important; }
    .vfc-card-bar-fill.is-live { animation: none !important; }
    .vfc-hero-glow, .vfc-hero-card, .vfc-hero-card::after, .vfc-card-dot, .vfc-card-truck svg, .vfc-card-bar-fill::before { animation: none !important; }
    .vfc-btn, .vfc-btn svg { transition: none !important; }
    .vfc-btn:hover { transform: none !important; }
}

/* v3.9.39 — keep the community benefit bullets as single clean lines:
   the bullet text and the strong price stay in normal inline flow on
   every viewport (a prior flex quirk pushed the price into its own
   floating column on narrow screens, leaving a ragged two-column look). */
.vfc-points li { display: block; }
.vfc-points li::before {
    content: "";
    display: inline-block;
    vertical-align: -2px;
    margin-right: .65rem;
}