/* Inter is loaded by a <link> in layouts/app, ahead of this file. */
/* The shared GENSETZ styles, then the Verified First skin on top. */
@import url("../../basic/css/custom.css");

/* ===========================================================================
   GENSETZ · Verified First
   A skin over the stock theme. The theme drives its colours from HSL variables,
   so most of the work is redefining those; the rest are shape and weight.
   =========================================================================== */

:root {
    --body-font: 'Inter', system-ui, -apple-system, sans-serif;
    --heading-font: 'Inter', system-ui, -apple-system, sans-serif;

    /* Paper, ink and rules take a faint green cast so the verification colour belongs. */
    --section-bg: 150 13% 97%;
    --heading-color: 160 29% 10%;
    --body-color: 159 7% 39%;
    --border-color: 158 13% 88%;

    /* Verification green. The brand red stays for actions, so the two never compete. */
    --verify-h: 164;
    --verify-s: 78%;
    --verify-l: 27%;
    --verify: var(--verify-h) var(--verify-s) var(--verify-l);
    --verify-soft: var(--verify-h) var(--verify-s) 96%;

    --radius-lg: 14px;
    --radius: 12px;
    --radius-sm: 10px;
    --shadow-1: 0 1px 2px hsl(var(--heading-color) / 6%), 0 8px 20px hsl(var(--heading-color) / 6%);
    --shadow-2: 0 2px 6px hsl(var(--heading-color) / 8%), 0 18px 40px hsl(var(--heading-color) / 8%);
}

/* ---------------------------------------------------------------- type scale
   Five sizes, and nothing between them. The stock sections set body text at 14.5px
   and card titles at 17px, so the scale is built around those rather than beside
   them: a block added later should be indistinguishable from one that was always
   there. Display sizes stay on clamp() and are not part of this. */
:root {
    --fs-xs: 12px;      /* uppercase labels, eyebrows, counters */
    --fs-sm: 13.5px;    /* secondary and supporting text */
    --fs-md: 14.5px;    /* body */
    --fs-lg: 17px;      /* card and panel titles */
    --fs-xl: 19px;      /* the larger card title */
}

body {
    background: hsl(var(--section-bg));
    letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.018em;
    font-weight: 700;
}

/* ---------------------------------------------------------------- surfaces */
.card,
.custom--card,
.dashboard-card,
.plan-card,
.compare-card,
.cookies-card,
.panel,
.widget-card {
    border-radius: var(--radius-lg);
    border-color: hsl(var(--border-color));
    box-shadow: var(--shadow-1);
}

.section-bg,
.bg--section {
    background: hsl(var(--section-bg));
}

/* ---------------------------------------------------------------- header */
/* The client asked for a yellow header in place of the white one, on mobile and desktop alike.
   Three rules in the stock theme paint this bar white — the header itself, its sticky state and
   the navbar inside it — so all three are redirected at one variable. Change --header-bg to
   change the shade everywhere. */
:root {
    --header-bg: 45 100% 51%;
    --header-line: 42 95% 44%;
}

.header,
.header.fixed-header,
.header .navbar {
    background: hsl(var(--header-bg));
    background-color: hsl(var(--header-bg));
}

.header {
    border-bottom: 1px solid hsl(var(--header-line));
    box-shadow: none;
}


.header.fixed-header,
.header-sticky {
    box-shadow: 0 1px 0 hsl(var(--border-color)), 0 10px 30px hsl(var(--heading-color) / 5%);
}

.nav-menu .nav-item .nav-link {
    font-weight: 600;
}

/* ---------------------------------------------------------------- buttons */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 700;
    letter-spacing: -0.005em;
}

.btn--base {
    box-shadow: 0 1px 2px hsl(var(--base) / 30%);
}

.btn--base:hover {
    box-shadow: 0 4px 14px hsl(var(--base) / 32%);
}

.btn--sm {
    border-radius: 8px;
}

/* ---------------------------------------------------------------- forms */
.form--control,
.form-control,
.select,
textarea.form--control {
    border-radius: var(--radius-sm);
    border-color: hsl(var(--border-color));
}

.form--control:focus,
.form-control:focus {
    border-color: hsl(var(--verify));
    box-shadow: 0 0 0 3px hsl(var(--verify) / 12%);
}

.form--label {
    font-weight: 600;
    color: hsl(var(--heading-color) / 75%);
}

/* ---------------------------------------------------------------- listing cards */
.car-item,
.generator-item {
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border-color));
    box-shadow: var(--shadow-1);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.car-item:hover,
.generator-item:hover {
    border-color: hsl(var(--verify) / 45%);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.car-item-price {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.car-item-title {
    font-weight: 700;
}

.car-item-info {
    background: hsl(var(--section-bg));
    border-radius: var(--radius-sm);
}

.generator-item__kva {
    border-radius: 999px;
    font-weight: 700;
}

/* The verified mark becomes a proof chip: this direction leads with what has been checked. */
.verified-seller-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: hsl(var(--verify-soft));
    color: hsl(var(--verify)) !important;
    font-size: var(--fs-xs);
    font-weight: 700;
    vertical-align: middle;
}

.verified-seller-icon::after {
    content: 'Verified';
    font-family: var(--body-font);
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- proof chips */
.proof-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: hsl(var(--verify-soft));
    color: hsl(var(--verify));
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
}

.proof-chip::before {
    content: '\2713';
    font-weight: 800;
}

.proof-chip--missing {
    background: hsl(var(--section-bg));
    color: hsl(var(--body-color) / 80%);
}

.proof-chip--missing::before {
    content: '\2013';
}

/* ---------------------------------------------------------------- listing detail */
.details-view .card,
.generator-specification,
.enquiry-cta {
    border-radius: var(--radius-lg);
}

.enquiry-cta {
    border: 1px solid hsl(var(--verify) / 30%);
    background: hsl(var(--verify-soft) / 55%);
}

.badge--success,
.text--success {
    color: hsl(var(--verify)) !important;
}

.badge--success {
    background: hsl(var(--verify-soft)) !important;
}

/* ---------------------------------------------------------------- seller portal */
.dashboard-sidebar,
.dashboard-header {
    background: hsl(var(--white));
    border-color: hsl(var(--border-color));
}

.dashboard-body {
    background: hsl(var(--section-bg));
}

.sidebar-menu-link.active,
.sidebar-menu-link:hover {
    border-radius: var(--radius-sm);
}

.table thead th {
    background: hsl(var(--section-bg));
    color: hsl(var(--heading-color) / 70%);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--fs-xs);
}

.table--responsive--md tbody tr,
.table tbody tr {
    border-color: hsl(var(--border-color));
}

/* ---------------------------------------------------------------- the banner
   The stock banner is a red panel with white text. This direction puts the
   machine on a light ground and lets the verification colour carry the eyebrow,
   keeping the red for the action. */
.banner-section {
    background: hsl(var(--white)) !important;
    border: 1px solid hsl(var(--border-color));
    box-shadow: var(--shadow-1);
}

.banner-section-shape {
    opacity: 0.04;
}

.banner-content__subtitle {
    background: hsl(var(--verify-soft)) !important;
    background-image: none !important;
    border: 1px solid hsl(var(--verify) / 25%) !important;
    color: hsl(var(--verify)) !important;
    padding: 7px 16px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.banner-content__title {
    color: hsl(var(--heading-color)) !important;
    font-size: 3.1rem;
    letter-spacing: -0.025em !important;
    text-shadow: none !important;
}

.banner-content__desc {
    color: hsl(var(--body-color)) !important;
}

.banner-content__btn .btn--white {
    background: hsl(var(--base)) !important;
    color: hsl(var(--white)) !important;
}

.banner-content__btn .btn--light {
    background: transparent !important;
    border: 1px solid hsl(var(--border-color)) !important;
    color: hsl(var(--heading-color)) !important;
}

/* ---------------------------------------------------------------- inner page headers
   Every public page below the home page shares this header. The stock one is another
   red panel; here the page title simply sits on the paper. */
.breadcrumb::after {
    background: hsl(var(--white)) !important;
    background-image: none !important;
}

.breadcrumb {
    border-bottom: 1px solid hsl(var(--border-color));
}

.breadcrumb__bg {
    opacity: 0.05;
}

.breadcrumb__title {
    color: hsl(var(--heading-color)) !important;
    letter-spacing: -0.025em;
    text-shadow: none !important;
}

.breadcrumb__list,
.breadcrumb__list * {
    color: hsl(var(--body-color)) !important;
}

.breadcrumb__list .active,
.breadcrumb__list a:hover {
    color: hsl(var(--verify)) !important;
}

/* ---------------------------------------------------------------- search and filters */
.filter-wrapper {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

/* ===========================================================================
   The home page, rebuilt to the Verified First layout.
   Prefixed so none of it collides with Bootstrap or the stock theme.
   =========================================================================== */
.vf-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: hsl(var(--verify));
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vf-hero {
    padding: 72px 0 40px;
    background: hsl(var(--white));
    border-bottom: 1px solid hsl(var(--border-color));
}

.vf-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.vf-hero__title {
    margin: 0 0 18px;
    font-size: clamp(32px, 4.2vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: hsl(var(--heading-color));
}

.vf-hero__desc {
    margin: 0 0 28px;
    max-width: 52ch;
    font-size: var(--fs-lg);
    color: hsl(var(--body-color));
}

.vf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vf-hero__art {
    margin: 0;
}

.vf-hero__art img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.vf-hero__art figcaption {
    margin-top: 10px;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-weight: 700;
    transition: background .18s ease, border-color .18s ease;
}

.vf-btn--primary {
    background: hsl(var(--base));
    color: hsl(var(--white));
}

.vf-btn--primary:hover {
    background: hsl(var(--base-d-100));
    color: hsl(var(--white));
}

.vf-btn--ghost {
    border: 1px solid hsl(var(--border-color));
    color: hsl(var(--heading-color));
}

.vf-btn--ghost:hover {
    border-color: hsl(var(--verify));
    color: hsl(var(--verify));
}

.vf-searchwrap {
    margin-top: -26px;
    position: relative;
    z-index: 5;
}

.vf-searchwrap .banner-form-section {
    padding: 0;
    background: transparent;
}

.vf-searchwrap .banner-form-wrapper,
.vf-searchwrap .banner-form {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

.vf-section {
    padding-block: 52px;
}

.vf-section__head {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
}

.vf-section__title {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 31px);
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.vf-section__link {
    margin-left: auto;
    color: hsl(var(--base));
    font-weight: 700;
    font-size: var(--fs-md);
    white-space: nowrap;
}

.vf-caps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.vf-cap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    color: hsl(var(--heading-color));
    transition: border-color .18s ease, transform .18s ease;
}

.vf-cap:hover {
    border-color: hsl(var(--verify));
    transform: translateY(-2px);
    color: hsl(var(--heading-color));
}

.vf-cap__no {
    font-size: var(--fs-xs);
    color: hsl(var(--body-color) / 70%);
}

.vf-cap__name {
    font-size: var(--fs-xl);
    font-weight: 700;
}

.vf-cap__unit {
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.vf-standards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.vf-standard {
    padding: 22px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
}

.vf-standard h3 {
    margin: 0 0 8px;
    font-size: var(--fs-lg);
    color: hsl(var(--heading-color));
}

.vf-standard h3::before {
    content: '\2713';
    margin-right: 8px;
    color: hsl(var(--verify));
    font-weight: 800;
}

.vf-standard p {
    margin: 0;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-sellercta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding: 34px;
    background: hsl(var(--verify-soft));
    border: 1px solid hsl(var(--verify) / 22%);
    border-radius: var(--radius-lg);
}

.vf-sellercta__copy {
    flex: 1 1 340px;
}

.vf-sellercta__copy h2 {
    margin: 0 0 6px;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.vf-sellercta__copy p {
    margin: 0;
    color: hsl(var(--body-color));
}

.vf-sellercta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1199px) {
    .vf-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vf-cards, .vf-standards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .vf-hero { padding: 44px 0 28px; }
    .vf-hero__inner { grid-template-columns: 1fr; gap: 26px; }
    .vf-section { padding-block: 36px; }
    .vf-section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .vf-section__link { margin-left: 0; }
    .vf-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vf-cards, .vf-standards { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the search block
   The stock block pulls itself up over the old banner and carries its own capacity
   strip, which this page already shows as tiles. Both are undone here. */
.vf-searchwrap .banner-form-section {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

.vf-searchwrap .banner-category {
    display: none !important;
}

.vf-searchwrap .banner-form-title {
    margin-bottom: 14px;
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: hsl(var(--heading-color));
}

.vf-searchwrap .banner-form-inner {
    gap: 14px;
}

.vf-searchwrap .banner-form-group label,
.vf-searchwrap .banner-form-group > span {
    margin-bottom: 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.vf-searchwrap .banner-form-group select,
.vf-searchwrap .banner-form-group input,
.vf-searchwrap .select2-selection {
    min-height: 48px;
    border-radius: var(--radius-sm) !important;
    border-color: hsl(var(--border-color)) !important;
    background: hsl(var(--section-bg));
    font-weight: 600;
    color: hsl(var(--heading-color));
}

.vf-searchwrap .banner-form-group select:focus,
.vf-searchwrap .banner-form-group input:focus {
    background: hsl(var(--white));
    border-color: hsl(var(--verify)) !important;
    box-shadow: 0 0 0 3px hsl(var(--verify) / 12%);
}

.vf-searchwrap .banner-form-btn .btn,
.vf-searchwrap .banner-form-btn button {
    min-height: 48px;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.vf-searchwrap .banner-form-note {
    margin-top: 12px;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

/* ---------------------------------------------------------------- hero showcase
   The newest listings rotate here, so the first thing on the page is real stock. */
.vf-showcase {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vf-showcase__stage {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: hsl(var(--section-bg));
    border: 1px solid hsl(var(--border-color));
}

.vf-showcase__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    color: inherit;
}

.vf-showcase__slide.is-on {
    opacity: 1;
    visibility: visible;
}

.vf-showcase__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vf-showcase__kva {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: hsl(var(--base));
    color: hsl(var(--white));
    font-size: var(--fs-xs);
    font-weight: 700;
}

.vf-showcase__meta {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 30px 16px 14px;
    background: linear-gradient(to top, hsl(var(--heading-color) / 82%), transparent);
    color: hsl(var(--white));
}

.vf-showcase__meta strong {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
}

.vf-showcase__meta span {
    font-size: var(--fs-sm);
    opacity: 0.9;
}

.vf-showcase__foot {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vf-showcase__count {
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-showcase__dots {
    display: flex;
    gap: 7px;
    margin-left: auto;
}

.vf-showcase__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: hsl(var(--border-color));
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.vf-showcase__dot.is-on {
    width: 22px;
    background: hsl(var(--verify));
}

/* ---------------------------------------------------------------- search, one card only
   The stock block nests a form inside a wrapper. Styling both gave a box inside a box,
   so the wrapper is the card and the form sits flat inside it with room to breathe. */
.vf-searchwrap .banner-form-wrapper {
    padding: 30px 32px 32px;
    box-shadow: var(--shadow-2);
}

.vf-searchwrap .banner-form {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.vf-searchwrap .banner-form-inner {
    gap: 18px;
    row-gap: 20px;
}

.vf-searchwrap .banner-form-group {
    margin-bottom: 0;
}

.vf-searchwrap .banner-form-title {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid hsl(var(--border-color));
}

/* ---------------------------------------------------------------- the menu */
.header .nav-menu .nav-link {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: hsl(var(--body-color));
    transition: background .16s ease, color .16s ease;
}

.header .nav-menu .nav-link:hover {
    background: hsl(var(--section-bg));
    color: hsl(var(--heading-color));
}

.header .nav-menu .nav-item.active .nav-link,
.header .nav-menu .nav-link.active {
    background: hsl(var(--verify-soft));
    color: hsl(var(--verify));
}

.header .header-button,
.header .navbar-toggler {
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-sm);
}

/* Social links live in the header in this direction, beside the account button. */
.vf-header-social {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline: 4px 10px;
    padding-inline-end: 10px;
    border-inline-end: 1px solid hsl(var(--border-color));
}

.vf-header-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: hsl(var(--body-color));
    font-size: var(--fs-md);
    transition: background .16s ease, color .16s ease;
}

.vf-header-social a:hover {
    background: hsl(var(--verify-soft));
    color: hsl(var(--verify));
}

@media (max-width: 1199px) {
    .vf-header-social { display: none; }
}

/* ---------------------------------------------------------------- compare bar
   Adding to compare is easy to miss, so once something is in it the site says so. */
.vf-comparebar {
    display: none;
    background: hsl(var(--verify));
    color: hsl(var(--white));
}

.vf-comparebar.is-on {
    display: block;
}

.vf-comparebar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    font-size: var(--fs-md);
    font-weight: 600;
}

.vf-comparebar__inner strong {
    font-weight: 800;
}

.vf-comparebar__go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 999px;
    background: hsl(var(--white));
    color: hsl(var(--verify)) !important;
    font-weight: 700;
    white-space: nowrap;
}

.vf-comparebar__clear {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: hsl(var(--white) / 85%);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

/* On a phone the row has no room to lay all three out, so the count shrinks first
   and the two controls keep their width rather than breaking mid-word. */
@media (max-width: 575px) {
    .vf-comparebar__inner {
        gap: 10px;
        padding: 9px 16px;
        font-size: var(--fs-sm);
    }

    .vf-comparebar__count {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vf-comparebar__go {
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: var(--fs-sm);
    }
}

/* ---------------------------------------------------------------- held icons
   The success message lands in the top right, over a brief flash, so these stay lit for as
   long as something is held and only settle once the list is emptied. Compare and the
   shortlist take different colours so the two are never confused. */
.header-compare.is-holding {
    border-color: hsl(var(--verify)) !important;
    color: hsl(var(--verify)) !important;
    animation: vf-hold-verify 2.2s ease-in-out infinite;
}

.header-shortlist.is-holding {
    border-color: hsl(var(--base)) !important;
    color: hsl(var(--base)) !important;
    animation: vf-hold-base 2.2s ease-in-out infinite;
}

@keyframes vf-hold-verify {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--verify) / 42%); }
    50% { box-shadow: 0 0 0 7px hsl(var(--verify) / 0%); }
}

@keyframes vf-hold-base {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--base) / 42%); }
    50% { box-shadow: 0 0 0 7px hsl(var(--base) / 0%); }
}

.header-compare.is-holding .header-compare__count {
    background: hsl(var(--verify));
}

.header-shortlist.is-holding .header-compare__count {
    background: hsl(var(--base));
}

@media (prefers-reduced-motion: reduce) {
    .header-compare.is-holding,
    .header-shortlist.is-holding { animation: none; }
}

/* ---------------------------------------------------------------- header tidy */
/* The navbar painted its own white over the header, which showed as a seam at each end. */
.header .navbar {
    background: transparent !important;
}

/* The account menu was still inheriting the old face. */
.header-auth__menu,
.header-auth__menu .dropdown-item,
.header-auth__menu a,
.header-auth__menu button,
.dropdown-menu,
.dropdown-menu .dropdown-item {
    font-family: var(--body-font) !important;
    font-weight: 600;
}

.header-auth__menu .dropdown-item:hover,
.header-auth__menu .dropdown-item:focus {
    background: hsl(var(--verify-soft)) !important;
    color: hsl(var(--verify)) !important;
}

.header-auth__menu .dropdown-item i {
    color: hsl(var(--verify)) !important;
}

/* ---------------------------------------------------------------- seller on the showcase */
.vf-showcase__seller {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    font-size: var(--fs-xs);
    opacity: 0.92;
}

.vf-showcase__seller em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: hsl(var(--white) / 18%);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 700;
}

.vf-showcase__seller em::before {
    content: '\2713';
}

/* ---------------------------------------------------------------- header room
   Signed in, the right-hand side carries compare, the shortlist, the social links and the
   dashboard button, which ran out of room. These keep it on one line. */
.header .header-right {
    flex-wrap: nowrap;
    gap: 6px !important;
}

.header .header-right .btn,
.header .header-auth .btn {
    padding-inline: 16px;
    white-space: nowrap;
}

.header .header-compare {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}

.header .header-compare__count {
    min-width: 18px;
    height: 18px;
    font-size: var(--fs-xs);
    line-height: 18px;
}

.vf-header-social {
    gap: 2px;
    margin-inline: 2px 8px;
    padding-inline-end: 8px;
}

.vf-header-social a {
    width: 30px;
    height: 30px;
    font-size: var(--fs-md);
}

.header .nav-menu .nav-link {
    padding-inline: 12px;
}

/* Below this the social links are the first thing to go, then the menu collapses anyway. */
@media (max-width: 1399px) {
    .vf-header-social { display: none; }
}

/* The bar and the header should read as one block, with nothing showing between them. */
.vf-comparebar {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

.vf-comparebar + .header,
.header {
    margin: 0 !important;
    border-radius: 0 !important;
}

/* The navbar carried a 20px radius and its own white fill, which showed as two notches
   against the compare bar above it. */
.header .navbar {
    border-radius: 0 !important;
}

/* Social links inside the mobile menu, where the header itself has no room. */
.vf-header-social--mobile {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 4px;
    padding: 16px 0 0;
    border-top: 1px solid hsl(var(--border-color));
    border-inline-end: 0;
}

.vf-header-social--mobile a {
    width: 40px;
    height: 40px;
    border: 1px solid hsl(var(--border-color));
    font-size: var(--fs-lg);
}

/* The mobile action row needs room for both icons. */
.header-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Less air between the header, the hero and the search card. */
.vf-hero {
    padding-block: 26px 22px;
}

.vf-searchwrap {
    margin-top: -20px;
}

.vf-searchwrap + .vf-section {
    padding-block-start: 38px;
}

/* ---------------------------------------------------------------- header corner curves
   The stock header draws two 45px shapes at each end of the navbar, with a white box-shadow
   offset outwards, so the header appears to curve into the banner beneath it. Against a white
   page they are invisible; against the compare bar they read as two white notches. */
.header .navbar::before,
.header .navbar::after {
    content: none !important;
    display: none !important;
}

/* ================================================================================
   D across the public pages
   Everything below belongs to the markup this template owns: the page header shared
   by every inner page, the listing detail page, and the footer. Layout numbers are
   taken from the D reference (1312px container, 12px radius, hairline borders).
   ================================================================================ */

/* ---------------------------------------------------------------- page header
   One thin crumb trail plus the page title on the paper, replacing the stock band. */
.vf-pagehead {
    padding: 22px 0 0;
}

.vf-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-crumbs a {
    color: hsl(var(--body-color));
}

.vf-crumbs a:hover {
    color: hsl(var(--verify));
}

.vf-crumbs [aria-current='page'] {
    color: hsl(var(--heading-color));
    font-weight: 600;
}

.vf-pagehead__title {
    margin: 10px 0 0;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: hsl(var(--heading-color));
}


/* ---------------------------------------------------------------- listing detail */
.vf-listing {
    padding: 24px 0 72px;
}

.vf-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.vf-listing__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 24px;
}

.vf-listing__headline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.vf-listing__title {
    margin: 0;
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.022em;
}

.vf-listing__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.vf-price {
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -0.02em;
    color: hsl(var(--base));
    line-height: 1.1;
}

.vf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vf-tag {
    border: 1px solid hsl(var(--border-color));
    border-radius: 10px;
    padding: 5px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: hsl(var(--heading-color));
    background: hsl(var(--white));
}

.vf-tag--ok {
    border-color: hsl(var(--verify) / 45%);
    color: hsl(var(--verify));
}

.vf-tag--warn {
    border-color: hsl(38 92% 45% / 50%);
    color: hsl(32 80% 38%);
}

/* ---------------------------------------------------------------- gallery
   Five tiles: the first spans a 2x2 block, the rest sit beside it. Anything past the
   fifth stays in the markup for the lightbox but is hidden (main.js hides index >= 5). */
.vf-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 220px);
    gap: 8px;
}

/* Not every listing carries five photos, and D's five-tile grid leaves holes when it
   does not. Each count gets a layout that fills the row. */
.vf-gallery--1 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 460px;
}

.vf-gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 400px;
}

.vf-gallery--2 .vf-gallery__main,
.vf-gallery--1 .vf-gallery__main {
    grid-column: span 1;
    grid-row: span 1;
}

.vf-gallery--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vf-gallery--4 .vf-gallery__cell:last-child {
    grid-column: span 2;
}

.vf-gallery__cell {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: hsl(var(--section-bg));
}

.vf-gallery__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.vf-gallery__cell:hover img {
    transform: scale(1.03);
}

.vf-gallery__main {
    grid-column: span 2;
    grid-row: span 2;
    border-radius: var(--radius);
}

.vf-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--heading-color) / 55%);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- key facts strip */
.vf-keyfacts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 24px 0 0;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    overflow: hidden;
}

.vf-keyfacts div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border-right: 1px solid hsl(var(--border-color));
}

.vf-keyfacts div:last-child {
    border-right: 0;
}

.vf-keyfacts dt {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.vf-keyfacts dd {
    margin: 0;
    font-weight: 700;
    font-size: var(--fs-lg);
    color: hsl(var(--heading-color));
}

/* ---------------------------------------------------------------- two column body */
.vf-listing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
    margin-top: 32px;
}

.vf-listing__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.vf-listing__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 96px;
}

.vf-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    padding: 24px;
}

.vf-panel__title {
    margin: 0;
    font-weight: 700;
    color: hsl(var(--heading-color));
}

#details-specs {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* D sets the specification groups on the paper rather than in cards, with a large
   heading and a wide gap between label and value. The hairline under each row is the
   separation the fields need once there are eight of them in a group. */
.vf-specgroup {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vf-specgroup__title {
    margin: 0;
    font-size: clamp(21px, 2.2vw, 27px);
    font-weight: 700;
    letter-spacing: -0.018em;
    color: hsl(var(--heading-color));
}

.vf-specgroup dl {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.vf-specgroup dl div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px;
    padding: 13px 0;
    border-bottom: 1px solid hsl(var(--border-color) / 65%);
}

.vf-specgroup dl div:first-child {
    border-top: 1px solid hsl(var(--border-color) / 65%);
}

.vf-specgroup dt {
    color: hsl(var(--body-color));
    font-size: var(--fs-md);
    font-weight: 500;
}

.vf-specgroup dd {
    margin: 0;
    font-weight: 600;
    font-size: var(--fs-md);
    color: hsl(var(--heading-color));
}

/* ---------------------------------------------------------------- proof panel
   The point of this direction: what has been checked, stated before anything else.
   Only checks that hold are listed, so the panel never reads as a list of failings. */
.vf-proofpanel {
    background: hsl(var(--verify) / 6%);
    border: 1px solid hsl(var(--verify) / 25%);
    border-radius: var(--radius);
    padding: 20px 24px;
}

.vf-proofpanel__title {
    margin: 0 0 12px;
    color: hsl(var(--verify));
    font-weight: 700;
}

.vf-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.vf-proof li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: hsl(var(--verify) / 10%);
    color: hsl(var(--verify));
    border-radius: 999px;
    padding: 5px 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
}

.vf-proof li::before {
    content: '\2713';
    font-weight: 800;
}

/* ---------------------------------------------------------------- documents */
.vf-docs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vf-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--fs-md);
    color: hsl(var(--heading-color));
    transition: border-color .18s ease, color .18s ease;
}

.vf-doc:hover {
    border-color: hsl(var(--verify));
    color: hsl(var(--verify));
}

.vf-doc i {
    font-size: var(--fs-xl);
}

/* ---------------------------------------------------------------- enquiry box */
.vf-enquiry {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-1);
}

.vf-enquiry__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vf-enquiry__facts li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-enquiry__facts i {
    margin-top: 3px;
    color: hsl(var(--verify));
}

.vf-enquiry__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vf-enquiry__note,
.vf-enquiry__reserved {
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-enquiry__reserved {
    color: hsl(32 80% 38%);
    font-weight: 600;
}

.vf-enquiry .show-number__result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid hsl(var(--verify) / 35%);
    border-radius: var(--radius);
    background: hsl(var(--verify) / 6%);
}

.vf-enquiry .show-number__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.vf-enquiry .show-number__phone {
    font-weight: 800;
    font-size: var(--fs-xl);
    color: hsl(var(--heading-color));
}

/* ---------------------------------------------------------------- seller box */
.vf-sellerbox {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    padding: 18px 22px;
}

.vf-sellerbox__name {
    font-size: var(--fs-lg);
    color: hsl(var(--heading-color));
}

.vf-sellerbox__mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: hsl(var(--verify) / 10%);
    color: hsl(var(--verify));
    font-size: var(--fs-xs);
    font-weight: 700;
}

.vf-sellerbox__meta {
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-similar {
    margin-top: 56px;
}

/* ---------------------------------------------------------------- listing, narrow */
@media (max-width: 1199px) {
    .vf-listing__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .vf-listing__aside {
        position: static;
    }

    .vf-docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .vf-listing__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .vf-listing__price {
        align-items: flex-start;
    }

    .vf-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 180px 110px;
    }

    .vf-gallery__main {
        grid-column: span 2;
        grid-row: span 1;
    }

    .vf-keyfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vf-keyfacts div:nth-child(2n) {
        border-right: 0;
    }

    .vf-keyfacts div:nth-child(-n + 2) {
        border-bottom: 1px solid hsl(var(--border-color));
    }

    .vf-specgroup dl div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 11px 0;
    }

    .vf-docs {
        grid-template-columns: minmax(0, 1fr);
    }

    .vf-panel {
        padding: 18px;
    }
}

/* ---------------------------------------------------------------- footer, D
   A light surface under a hairline. The social icons sit in the header now and the
   oversized site-name watermark went with the dark background. */
.vf-footer {
    background: hsl(var(--white));
    border-top: 1px solid hsl(var(--border-color));
    padding: 56px 0 0;
    color: hsl(var(--body-color));
}

.vf-footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.vf-footer__logo img {
    height: 48px;
    width: auto;
    max-width: 220px;
}

.vf-footer__tagline {
    margin: 16px 0 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    max-width: 42ch;
    color: hsl(var(--heading-color));
}

.vf-footer__desc {
    margin: 10px 0 0;
    font-size: var(--fs-md);
    line-height: 1.6;
    max-width: 46ch;
}

.vf-footer__tagline + .vf-footer__desc { margin-top: 8px; }

.vf-footer__title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--heading-color));
    margin: 0 0 14px;
}

.vf-footer__cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.vf-footer__cols a {
    color: hsl(var(--body-color));
    font-size: var(--fs-md);
}

.vf-footer__cols a:hover {
    color: hsl(var(--verify));
}

.vf-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--fs-md);
}

.vf-footer__contact i {
    margin-top: 4px;
    color: hsl(var(--verify));
}

.vf-footer__bottom {
    margin-top: 40px;
    padding: 18px 0;
    border-top: 1px solid hsl(var(--border-color));
}

.vf-footer__bottom p {
    margin: 0;
    font-size: var(--fs-sm);
}

.vf-footer__bottom a {
    color: hsl(var(--heading-color));
    font-weight: 600;
}

@media (max-width: 991px) {
    .vf-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}

@media (max-width: 575px) {
    .vf-footer__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================================================
   D across the remaining public pages
   The listing, contact, blog, policy, compare, plans and category pages keep the
   stock markup; what changes is the rhythm and the components. D works in 44-72px
   blocks and hairline-bordered cards, where the stock theme works in 120px blocks
   and filled panels.
   ================================================================================ */

/* ---------------------------------------------------------------- rhythm
   Every inner page is built on these two utilities, so tightening them here moves
   all of them onto D's spacing at once. */
.my-120 {
    margin-block: 56px;
}

.py-120 {
    padding-block: 56px;
}

.pt-120 {
    padding-top: 56px;
}

.pb-120 {
    padding-bottom: 56px;
}

/* The first block sits close under the crumb trail rather than a screen below it. */
.vf-pagehead ~ section.my-120,
.vf-pagehead ~ div.my-120,
.vf-pagehead ~ section:first-of-type.py-120 {
    margin-top: 28px;
}

@media (max-width: 991px) {
    .my-120 {
        margin-block: 40px;
    }

    .py-120 {
        padding-block: 40px;
    }
}

.section-heading {
    margin-bottom: 28px;
}

.section-heading__title,
.section-heading .title {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ---------------------------------------------------------------- contact
   The stock contact cards carry a filled arrow badge and a decorative corner shape,
   both drawn in the old gradient. D has neither. */
.contact-info {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 24px;
}

/* One of the three cards is filled with the old gradient and its text turned white;
   in D they are three of the same card. The corner shape and the empty arrow badge
   that overhangs the corner go with it. */
.contact-info-wrapper .contact-info {
    background-image: none !important;
    background-color: hsl(var(--white)) !important;
}

.contact-info-wrapper .contact-info * {
    color: inherit;
}

.contact-info-shape,
.contact-info-arrow {
    display: none !important;
}

.contact-info-title {
    color: hsl(var(--heading-color));
    font-weight: 700;
}

.contact-info-desc,
.contact-info-link {
    color: hsl(var(--body-color));
}

.contact-info-link:hover {
    color: hsl(var(--verify));
}

.contact-form,
.contact-section__form {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 28px;
}

.contact-form-title {
    font-weight: 700;
    letter-spacing: -0.018em;
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------- blog */
/* .blog is the section wrapper, not a card: the card is .blog-item. */
.blog-item,
.blog-sidebar-wrapper,
.blog-details {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.blog-details {
    padding: 28px;
}

.blog-details__thumb img {
    border-radius: var(--radius);
}

.blog-details__title,
.blog-sidebar__title {
    font-weight: 700;
    letter-spacing: -0.018em;
    color: hsl(var(--heading-color));
}

.blog-details__date {
    color: hsl(var(--body-color));
    font-size: var(--fs-sm);
}

.blog-sidebar-wrapper {
    padding: 22px;
}

.blog-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid hsl(var(--border-color));
    color: hsl(var(--heading-color));
    background: hsl(var(--white));
}

.blog-share a:hover {
    border-color: hsl(var(--verify));
    color: hsl(var(--verify));
}

/* ---------------------------------------------------------------- prose pages
   Pages, policies and the cookie notice are plain text; they read better on a card
   with a measure rather than running the full width of the container. */
.policy-data,
.cookie-data,
.page-content {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    padding: 32px;
    color: hsl(var(--body-color));
    line-height: 1.7;
}

.policy-data h1,
.policy-data h2,
.policy-data h3,
.cookie-data h1,
.cookie-data h2,
.cookie-data h3 {
    color: hsl(var(--heading-color));
    margin-top: 1.4em;
}

.policy-data > :first-child,
.cookie-data > :first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------- pagination */
.pagination {
    gap: 6px;
}

.pagination .page-link {
    border-radius: 10px;
    border: 1px solid hsl(var(--border-color));
    color: hsl(var(--heading-color));
    font-weight: 600;
    background: hsl(var(--white));
}

.pagination .page-item.active .page-link {
    background: hsl(var(--verify));
    border-color: hsl(var(--verify));
    color: #fff;
}

.pagination .page-link:hover {
    border-color: hsl(var(--verify));
    color: hsl(var(--verify));
}

.pagination .page-item.active .page-link:hover {
    color: #fff;
}

/* ---------------------------------------------------------------- compare */
.compare-card {
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
}

.compare-card__thumb img {
    border-radius: var(--radius) var(--radius) 0 0;
}

.compare-card__price {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--base));
}

.compare-card__remove {
    border-radius: 999px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    color: hsl(var(--heading-color));
}

.compare-card__remove:hover {
    border-color: hsl(var(--base));
    color: hsl(var(--base));
}

/* A row where the sets differ is what the buyer is looking for, so it is the one
   that gets the colour; rows that match stay quiet. */
.is-different {
    background: hsl(var(--verify) / 7%);
}

.is-different td,
.is-different th {
    color: hsl(var(--heading-color));
    font-weight: 600;
}

.is-same td {
    color: hsl(var(--body-color));
}

/* ---------------------------------------------------------------- seller plans */
.plan-card {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 26px;
}

.plan-card.is-recommended,
.plan-card--recommended {
    border-color: hsl(var(--verify));
    box-shadow: 0 0 0 3px hsl(var(--verify) / 10%), var(--shadow-1);
}

.plan-card__price {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

/* The longer billing cycles under the monthly price, on the seller's own plan panel. */
.plan-card__cycles {
    margin: 8px 0 0;
    padding: 10px 0 0;
    list-style: none;
    border-top: 1px dashed hsl(var(--border-color));
}

.plan-card__cycles li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: hsl(var(--body-color));
}

.plan-card__save {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: hsl(var(--verify));
    background: hsl(var(--verify) / 12%);
}

.plan-card__actions {
    margin-top: 18px;
}

/* ---------------------------------------------------------------- categories */
.category-item,
.capacity-tile {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    padding: 18px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.category-item:hover,
.capacity-tile:hover {
    border-color: hsl(var(--verify) / 45%);
    box-shadow: var(--shadow-1);
}

.category-item-name,
.capacity-tile__name {
    font-weight: 700;
    color: hsl(var(--heading-color));
}

.category-item-meta,
.capacity-tile__meta {
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.capacity-tile__icon,
.category-item-icon {
    color: hsl(var(--verify));
}

/* ---------------------------------------------------------------- post a requirement
   A long form; it reads as one card with the fields spaced the way the listing
   specifications are. */
.requirement-form,
.post-requirement-form {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 28px;
}

.invalid-feedback,
.text--danger {
    font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- sign in and join
   Four pages share this markup: buyer and seller, login and register. The stock
   layout fills half the screen with the gradient slab, floats a second logo over its
   corner, and sets both columns to width:50% inside their own half, so the form ends
   up adrift in a quarter of the page. Here the two columns are content-sized, the
   panel is a quiet tinted surface, and the form is a card like every other. */
.account-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    max-width: 1140px;
    /* The stock rule is height: 100vh, for a page that had no header or footer. With
       both back, a form taller than the window overflowed the section and ran over
       the footer, so the section takes the height of what is in it. */
    height: auto;
    min-height: 0;
    margin: 48px auto;
    padding: 0 32px;
    background: transparent;
}

/* The two columns read as one split block rather than two objects of different
   heights: a single rounded card, form on one side, panel on the other. */
.account-section .account-content {
    order: 1;
    display: flex;
    width: 100%;
    padding: 0;
}

.account-section .account-left {
    order: 2;
    display: flex;
    width: 100%;
    height: auto;
}

.account-section .account-form {
    width: 100%;
    max-width: none;
    /* The stock card carries a vertical margin, which left it short of its half. */
    margin: 0;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-right: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The markup carries Bootstrap's .mb-0 on this header, so the space below it is
   padding rather than a margin that would lose to the utility's !important. */
.account-form-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 22px;
}

/* The stock page hides this one and floats another over the panel's corner instead. */
.account-form-logo {
    display: block !important;
    max-width: 184px;
    margin-bottom: 6px;
}

.account-form-logo img {
    width: auto;
    height: 48px;
}

.account-form-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: hsl(var(--heading-color));
}

.account-form-desc {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: hsl(var(--body-color));
}

.account-form .form-group {
    margin-bottom: 16px;
}

.account-form .form--label {
    margin-bottom: 6px;
}

.account-form .form--control {
    height: 46px;
}

.account-form textarea.form--control {
    height: auto;
}

.account-external {
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

/* The panel beside the form. The stock one is the gradient slab with a headline and
   a tick list on it, which reads as an empty coloured rectangle once the gradient is
   gone. This makes it the piece of design on the page: ink, a wash of the
   verification green off the top corner, the mark ghosted off the bottom one, and
   the points as cards rather than a bare list. All four pages share it. */
.account-left__thumb {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 44px;
    border: 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: hsl(var(--heading-color));
    color: hsl(var(--white));
    overflow: hidden;
}

/* The mark, bled off the corner. */
.account-left__thumb::before {
    content: '';
    display: block;
    position: absolute;
    right: -5%;
    bottom: -10%;
    width: 58%;
    height: 62%;
    background: url('../../../images/logo_icon/logo_dark.png') no-repeat right bottom / contain;
    opacity: 0.08;
    pointer-events: none;
}

/* The wash. This also replaces the stock gradient, which was painted here. */
.account-left__thumb::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: radial-gradient(115% 85% at 8% -5%, hsl(var(--verify) / 42%) 0%, transparent 62%);
    pointer-events: none;
}

/* A second logo, absolutely placed over the panel's corner, and the panel's backdrop:
   a <video> on the buyer pages, a bare <img> on the seller ones. */
.account-left__logo,
.account-left__thumb > video,
.account-left__thumb > img {
    display: none !important;
}

.account-left-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 100%;
}

.account-left-content-title {
    margin: 0;
    font-size: clamp(23px, 2.3vw, 30px);
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: hsl(var(--white)) !important;
    text-shadow: none !important;
}

.account-left-content-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-left-content-list .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid hsl(var(--white) / 10%);
    border-radius: 12px;
    background: hsl(var(--white) / 6%);
    font-size: var(--fs-md);
    line-height: 1.45;
    color: hsl(var(--white) / 82%) !important;
}

.account-left-content-list .item .icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: hsl(var(--verify) / 25%) !important;
    color: hsl(var(--verify-h) 72% 64%) !important;
    font-size: var(--fs-xs);
}

.account-left-content-list .item .icon i,
.account-left-content-list .item .icon * {
    color: inherit !important;
}

@media (max-width: 991px) {
    .account-section {
        grid-template-columns: minmax(0, 1fr);
        margin: 28px auto;
        padding: 0 16px;
    }

    .account-section .account-left {
        order: 3;
    }

    .account-section .account-form {
        border-right: 1px solid hsl(var(--border-color));
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 28px 24px;
    }

    .account-left__thumb {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .account-left__thumb {
        padding: 30px 24px;
    }

    .account-left__thumb::before {
        width: 48%;
        height: 52%;
    }
}

/* ---------------------------------------------------------------- the gradient slabs
   The stock theme keeps one red-to-orange gradient in two variables and paints it on
   every filled panel: the landing heroes and CTAs, the why-choose and statistics
   blocks, the FAQ card, the contact card, the sign-in panel and the .bg--gr utility.
   Those panels are all built for white text, so rather than lighten them and chase
   the text colour in a dozen places, the gradient becomes flat ink. Nothing else has
   to change, and the orange is gone everywhere at once. */
:root {
    --gr-color: hsl(var(--heading-color));
    --gr-color-two: hsl(var(--heading-color));
}

/* ---------------------------------------------------------------- the mark
   The wordmark is stacked over two lines rather than set on one, so it is about
   1.5 times as wide as it is tall where the old one was nearly four times. At the
   height the theme used it came out tiny; these give it back its presence. */
.header .logo img,
.header-logo img,
.navbar-brand img {
    height: 59px;
    width: auto;
    max-width: none;
    /* The bolt runs above GEN and below SETZ, so the gap between the two words sits at 65.9% of
       the artwork rather than halfway. Centring the box therefore puts the centre line through
       GEN and the mark reads low. Lifting it by the 15.9% difference puts the word gap on the
       line, which is where the eye expects it. A percentage keeps this true at any logo size. */
    transform: translateY(-15.9%);
    /* An inline image sits on the text baseline, which leaves a few pixels of descender space
       underneath and reads as the mark sitting high. Block removes that gap outright. */
    display: block;
}

/* Belt and braces on the centring: the brand and the bar both centre their children, so the mark
   lines up with the menu and the hamburger whatever their heights. */
.header .navbar,
.header .logo,
.header .header-logo,
.header .navbar-brand {
    display: flex;
    align-items: center;
}

/* The phone bar is taller than the desktop one, so the mark can afford more height here than the
   proportional step down would give it. */
@media (max-width: 575px) {
    .header .logo img,
    .header-logo img,
    .navbar-brand img {
        height: 55px;
    }
}

/* ================================================================================
   The dashboards, under the site header
   Both panels used to be a world of their own: no header, no menu, no way back to
   the listings without typing a URL. They now sit under the site header, which means
   the fixed sidebar has to start below it rather than at the top of the window.
   ================================================================================ */
/* The sidebar is fixed, so it needs to know how tall everything above it is. That
   changes: the compare bar appears above the header as soon as something is held,
   which is why the top of the sidebar was disappearing behind the header. */
.vf-dash {
    --vf-dash-top: 73px;
}

body:has(.vf-comparebar.is-on) .vf-dash {
    --vf-dash-top: 131px;
}

.vf-dash .sidebar-menu {
    top: var(--vf-dash-top);
    height: calc(100vh - var(--vf-dash-top));
    border-right: 1px solid hsl(var(--border-color));
}

/* The header carries the mark already, so the sidebar does not repeat it. */
.vf-dash .sidebar-logo {
    display: none;
}

.vf-dash .sidebar-menu {
    padding-top: 18px;
}

.vf-dash .sidebar-overlay {
    top: var(--vf-dash-top);
}

/* The site header sits over the sidebar, not under it. */
.header {
    position: relative;
    z-index: 1000;
}

/* On dashboard pages the sidebar is pinned at top: var(--vf-dash-top), which only works if the
   header stays where the sidebar expects it. Left relative, the header scrolls away and the
   sidebar hangs under a gap — and on a short page the scroll script never fires to bring it
   back. Public pages keep the stock behaviour, where the header returns on scroll. */
body:has(.vf-dash) .header {
    position: sticky;
    top: 0;
}

@media (max-width: 991px) {
    .vf-dash {
        --vf-dash-top: 81px;
    }

    body:has(.vf-comparebar.is-on) .vf-dash {
        --vf-dash-top: 137px;
    }
}

/* ---------------------------------------------------------------- dashboard surfaces
   The same card, border and table treatment as the public pages, so moving between
   the two does not feel like changing sites. */
.dashboard-body {
    background: hsl(var(--section-bg));
}

.dashboard-header {
    background: transparent;
    border: 0;
}

.dashboard-header h1,
.dashboard-header h2,
.dashboard-header h3,
.dashboard-header h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.dashboard-card,
.dashboard-body .card,
.widget-card,
.dashboard-body .custom--card {
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.sidebar-menu {
    background: hsl(var(--white));
}

.sidebar-menu-list__link,
.sidebar-menu-link,
.sidebar-menu a {
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.sidebar-menu-list__link.active,
.sidebar-menu-link.active {
    background: hsl(var(--verify) / 10%) !important;
    color: hsl(var(--verify)) !important;
}

.sidebar-menu-list__link.active i,
.sidebar-menu-link.active i {
    color: hsl(var(--verify)) !important;
}

/* The stat tiles came in four saturated, unrelated colours - blue, green, yellow,
   red - which is most of why the panel read as a different product. The label on
   each tile already says what it is, so the colour was not carrying the meaning;
   they become one tinted set in the verification green. */
.dashboard-widget__icon {
    background: hsl(var(--verify) / 12%) !important;
    color: hsl(var(--verify)) !important;
    border-radius: 12px;
}

.dashboard-widget__icon i,
.dashboard-widget__icon svg {
    color: inherit !important;
}

.dashboard-widget__number,
.dashboard-widget__amount {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.dashboard-widget__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: hsl(var(--body-color));
}

.plan-widget__icon {
    background: hsl(var(--verify) / 12%) !important;
    color: hsl(var(--verify)) !important;
}

/* ---------------------------------------------------------------- status colours
   The theme derives every shade of a status colour from one hue/saturation/lightness
   triplet, so setting the three here recolours badges, alerts and the text-- classes
   together. Success becomes the verification green the rest of the site uses, and
   the warning amber and info blue are pulled back from the saturated originals that
   made the dashboards read as a different product. */
:root {
    --success-h: 164;
    --success-s: 78%;
    --success-l: 27%;

    --warning-h: 34;
    --warning-s: 84%;
    --warning-l: 42%;

    --info-h: 210;
    --info-s: 45%;
    --info-l: 45%;
}

/* ---------------------------------------------------------------- the dashboard on a phone
   With the site header in place there were two hamburgers within an inch of each
   other, one opening the site menu and one sliding in the dashboard sidebar. Below
   the sidebar's own breakpoint the sidebar stops being a drawer and becomes a strip
   of chips under the header, always visible, so the only menu button on the page is
   the site's. The one submenu is flattened into the same strip rather than hiding
   two of the seller's listing screens behind a toggle. */
@media (max-width: 1199px) {
    .vf-dash .navigation-bar,
    .vf-dash .sidebar-menu__close,
    .vf-dash .sidebar-overlay {
        display: none !important;
    }

    .vf-dash .sidebar-menu {
        position: static;
        width: 100%;
        height: auto;
        padding: 0;
        overflow: visible;
        transform: none !important;
        border-right: 0;
        border-bottom: 1px solid hsl(var(--border-color));
    }

    .vf-dash .dashboard-wrapper {
        margin-left: 0;
    }

    .vf-dash .sidebar-menu-list {
        display: flex;
        gap: 6px;
        margin: 0;
        padding: 10px 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .vf-dash .sidebar-menu-list::-webkit-scrollbar {
        display: none;
    }

    .vf-dash .sidebar-menu-list__item {
        flex: 0 0 auto;
    }

    /* The submenu's links join the strip instead of sitting behind a toggle. */
    .vf-dash .sidebar-menu-list__item.has-dropdown {
        display: contents;
    }

    /* The stock rule keeps this closed until the item is opened, and wins on
       specificity, so the flattening has to say so outright. */
    .vf-dash .sidebar-menu-list__item.has-dropdown .sidebar-submenu {
        display: contents !important;
    }

    .vf-dash .sidebar-menu-list__item.has-dropdown > .submenu-toggle {
        display: none;
    }

    .vf-dash .sidebar-submenu-list__item {
        flex: 0 0 auto;
    }

    .vf-dash .sidebar-menu-list__link,
    .vf-dash .sidebar-submenu-list__link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 14px;
        border: 1px solid hsl(var(--border-color));
        border-radius: 999px;
        font-size: var(--fs-sm);
        font-weight: 600;
        white-space: nowrap;
        color: hsl(var(--body-color));
        background: hsl(var(--white));
    }

    .vf-dash .sidebar-menu-list__item.active > .sidebar-menu-list__link,
    .vf-dash .sidebar-submenu-list__item.active > .sidebar-submenu-list__link {
        border-color: hsl(var(--verify) / 45%);
        background: hsl(var(--verify) / 10%) !important;
        color: hsl(var(--verify)) !important;
    }

    .vf-dash .sidebar-menu-list__link .icon {
        display: inline-flex;
        width: 18px;
        height: 18px;
    }

    .vf-dash .sidebar-menu-list__link .icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ---------------------------------------------------------------- the sign-in card
   The shape both reference sites use: a small card over a dimmed page, opened from
   the header, so signing in does not cost a page. The dedicated pages remain for
   password reset, verification and anyone arriving on them directly. */
.vf-authmodal .modal-dialog {
    max-width: 424px;
}

.vf-authmodal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--radius-lg);
    padding: 30px 30px 26px;
    box-shadow: var(--shadow-2);
}

.vf-authmodal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: hsl(var(--body-color));
    font-size: var(--fs-xl);
    line-height: 1;
}

.vf-authmodal__close:hover {
    background: hsl(var(--section-bg));
    color: hsl(var(--heading-color));
}

.vf-authmodal__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.vf-authmodal__head img {
    width: auto;
    height: 46px;
    flex-shrink: 0;
}

.vf-authmodal__title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: hsl(var(--heading-color));
}

.vf-authmodal__sub {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: hsl(var(--body-color));
}

.vf-authmodal__switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: hsl(var(--section-bg));
}

.vf-authmodal__switch button {
    padding: 9px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--body-color));
    transition: background .15s ease, color .15s ease;
}

/* The white-on-grey active tab was too quiet — people could not tell whether they were signing
   in as a buyer or a seller. The brand red makes the choice unmistakable. */
.vf-authmodal__switch button.is-on {
    background: hsl(var(--base));
    color: hsl(var(--white));
    box-shadow: 0 2px 8px hsl(var(--base) / 32%);
}

.vf-authmodal__switch button:not(.is-on):hover {
    background: hsl(var(--white));
    color: hsl(var(--heading-color));
}

.vf-authmodal__form .form-group {
    margin-bottom: 14px;
}

.vf-authmodal__form .form--control {
    height: 46px;
}

.vf-authmodal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font-size: var(--fs-sm);
}

.vf-authmodal__row a {
    color: hsl(var(--base));
    font-weight: 600;
}

.vf-authmodal__foot {
    margin: 16px 0 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-authmodal__foot a {
    color: hsl(var(--base));
    font-weight: 700;
}

@media (max-width: 575px) {
    .vf-authmodal .modal-content {
        padding: 24px 20px 20px;
    }

    .vf-authmodal__head img {
        height: 40px;
    }
}

/* ---------------------------------------------------------------- joining
   The two registration pages. The marketing sits in the page beside the card rather
   than on a coloured slab, so a short form does not leave a tall empty rectangle. */
.vf-join {
    padding: 44px 0 72px;
}

.vf-join__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 64px;
    align-items: start;
}

.vf-join__intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 6px;
}

.vf-join__title {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: hsl(var(--heading-color));
}

.vf-join__lead {
    margin: 0;
    max-width: 52ch;
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: hsl(var(--body-color));
}

.vf-join__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.vf-join__points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: hsl(var(--heading-color));
}

.vf-join__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    background: hsl(var(--verify) / 12%);
    color: hsl(var(--verify));
    font-size: var(--fs-xs);
}

.vf-join__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 12px 0 0;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    background: hsl(var(--white));
    overflow: hidden;
}

.vf-join__stats div {
    padding: 16px 18px;
    border-right: 1px solid hsl(var(--border-color));
}

.vf-join__stats div:last-child {
    border-right: 0;
}

.vf-join__stats dt {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.vf-join__stats dd {
    margin: 2px 0 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.vf-join__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-join__note i {
    color: hsl(var(--verify));
    font-size: var(--fs-lg);
}

/* ---- the card */
.vf-join__card {
    position: sticky;
    top: 96px;
    padding: 32px;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    background: hsl(var(--white));
    box-shadow: var(--shadow-1);
}

.vf-join__card-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: hsl(var(--heading-color));
}

.vf-join__card-sub {
    margin: 4px 0 22px;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-join__card-sub a {
    color: hsl(var(--base));
    font-weight: 600;
}

.vf-join__form .form-group {
    margin-bottom: 15px;
}

.vf-join__form .form--label {
    margin-bottom: 6px;
}

.vf-join__form .form--control {
    height: 46px;
}

.vf-join__form .btn {
    width: 100%;
}

@media (max-width: 1199px) {
    .vf-join__grid {
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 40px;
    }
}

@media (max-width: 991px) {
    .vf-join {
        padding: 28px 0 52px;
    }

    .vf-join__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .vf-join__card {
        position: static;
    }

    .vf-join__points {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .vf-join__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .vf-join__stats div {
        border-right: 0;
        border-bottom: 1px solid hsl(var(--border-color));
    }

    .vf-join__stats div:last-child {
        border-bottom: 0;
    }

    .vf-join__card {
        padding: 24px 20px;
    }
}

/* ---------------------------------------------------------------- signing in
   One card on the page. A returning buyer does not need to be sold to, so there is
   nothing beside the form to leave a gap — and it reads as the same object the
   header opens, which is where most people will sign in from. */
.vf-signin {
    display: flex;
    justify-content: center;
    padding: 56px 0 80px;
}

.vf-signin__card {
    width: 100%;
    max-width: 452px;
    margin: 0 auto;
    padding: 36px;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    background: hsl(var(--white));
    box-shadow: var(--shadow-1);
}

.vf-signin__title {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.vf-signin__sub {
    margin: 6px 0 24px;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: hsl(var(--body-color));
}

.vf-signin__sub a {
    color: hsl(var(--base));
    font-weight: 600;
}

.vf-signin__form .form-group {
    margin-bottom: 15px;
}

.vf-signin__form .form--label {
    margin-bottom: 6px;
}

.vf-signin__form .form--control {
    height: 46px;
}

.vf-signin__form .btn {
    width: 100%;
}

.vf-signin__form .forgot-password {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: hsl(var(--base));
}

.vf-signin__form .account-external {
    margin: 18px 0 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.vf-signin__form .account-external a {
    color: hsl(var(--base));
    font-weight: 700;
}

@media (max-width: 575px) {
    .vf-signin {
        padding: 28px 0 52px;
    }

    .vf-signin__card {
        padding: 24px 20px;
    }
}

/* ---------------------------------------------------------------- the header action
   Signing in is the one thing the header asks for, so it carries the brand red rather
   than the ink the rest of the bar is drawn in. The dashboard button a signed-in
   person sees stays ink: it is a destination, not a call to act. */
.header .header-right .btn--dark[data-bs-target="#loginModal"] {
    background: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    color: hsl(var(--white)) !important;
}

.header .header-right .btn--dark[data-bs-target="#loginModal"]:hover,
.header .header-right .btn--dark[data-bs-target="#loginModal"]:focus-visible {
    background: hsl(var(--base-d-100)) !important;
    border-color: hsl(var(--base-d-100)) !important;
}

/* ---------------------------------------------------------------- browsing the stock
   Three ways in for someone who does not yet know what they want. Every tile is a real
   search, so a tile with nothing behind it is never drawn. */
.vf-browse {
    display: grid;
    gap: 12px;
}

.vf-browse--brands {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.vf-browse--years {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The cities read as one panel divided into cells rather than twelve floating cards:
   the grid's own 1px gaps show the container's colour, so every divider is the same
   weight and the rows stay square with each other however many cities there are. */
.vf-browse--cities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    border-radius: var(--radius);
    background: hsl(var(--border-color));
    overflow: hidden;
}

.vf-brand,
.vf-band {
    display: flex;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    background: hsl(var(--white));
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.vf-brand:hover,
.vf-band:hover {
    border-color: hsl(var(--verify) / 45%);
    box-shadow: var(--shadow-1);
    transform: translateY(-2px);
}

/* ---- by make */
.vf-brand {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px 14px;
    text-align: center;
}

.vf-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
}

.vf-brand__mark img {
    max-width: 100%;
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

/* Until a logo is uploaded in admin the initials hold the tile's shape, so the row
   does not go ragged while they are being collected. */
.vf-brand__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: hsl(var(--section-bg));
    color: hsl(var(--heading-color) / 55%);
    font-size: var(--fs-md);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vf-brand__name {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: hsl(var(--heading-color));
}

.vf-brand__count {
    font-size: var(--fs-xs);
    color: hsl(var(--body-color));
}

/* ---- by age */
.vf-band {
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
}

.vf-band__label {
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: hsl(var(--heading-color));
}

.vf-band__count {
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

/* ---- by location */
.vf-city {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 68px;
    padding: 14px 16px;
    background: hsl(var(--white));
    transition: background .18s ease;
}

.vf-city:hover {
    background: hsl(var(--verify) / 7%);
}

.vf-city__name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--heading-color));
}

.vf-city__name i {
    color: hsl(var(--verify));
    font-size: var(--fs-lg);
}

.vf-city__meta {
    font-size: var(--fs-xs);
    color: hsl(var(--body-color));
}

@media (max-width: 1199px) {
    .vf-browse--brands {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .vf-browse--brands {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vf-browse--years,
    .vf-browse--cities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .vf-browse--brands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------- the dashboard tiles
   The stock grid is three to a row, so the buyer's five broke 3 + 2 and left a gap
   where the sixth would be. The columns were always the same width — what looked
   wrong was the hole beside the short row.

   Putting all of them on one row instead was worse: six tiles in a 1280px window are
   142px wide, the icon takes 44 of that, and the label either clipped to "Awaiting…"
   or wrapped into the number. So the row still wraps, and the short row centres under
   the long one, which reads as deliberate. The seller's six already sit 3 + 3. */
.vf-dash .dashboard-body .row:has(> [class*='col-'] > .dashboard-widget) {
    justify-content: center;
}

.vf-dash .dashboard-widget {
    height: 100%;
}

/* On a 1500px screen the five tiles share one row, each about 213px wide. Twenty of
   that is padding either side and the icon takes another 44, which leaves 117px for
   the label — and "Awaiting Seller Response" needs 158. The stock title is locked to
   one line and clipped with an ellipsis, so it read "Awaiting Seller…".

   Unlocking the height is what it needed: the label wraps onto a second line, the
   number moves down, and the tiles stay level because they stretch to the tallest. */
.vf-dash .dashboard-widget__top {
    align-items: flex-start;
}

.vf-dash .dashboard-widget__text {
    min-width: 0;
}

.vf-dash .dashboard-widget__title {
    display: block;
    height: auto;
    max-height: none;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: none;
}

/* The seller's tiles are marked col-xxl-4 col-sm-6, so they sit two to a row on
   anything under 1400px — 473px of tile for a single number, and nothing like the
   buyer's three. Between those two breakpoints they go three to a row as well, so the
   two panels read as one product. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .vf-dash .dashboard-body .row > .col-xxl-4.col-sm-6:has(> .dashboard-widget) {
        flex: 0 0 auto;
        width: 33.3333%;
    }
}

/* ---------------------------------------------------------------- blog cards
   The stock card gives its text block no padding at all, so the date and the title
   ran to the card's edges and the title's last line sat on the bottom border. The
   type was page-sized too — a 20px heading and a 16px date inside a 400px card. */
.blog-item__content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 20px 20px;
}

.blog-item__date {
    gap: 6px;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: hsl(var(--body-color));
}

.blog-item__date svg {
    width: 14px;
    height: 14px;
}

.blog-item__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.012em;
}

.blog-item__title .link {
    color: hsl(var(--heading-color));
}

.blog-item__title .link:hover {
    color: hsl(var(--verify));
}

/* ---------------------------------------------------------------- trust band
   The first thing after the search: why a buyer should believe any of this. */
.vf-trust {
    padding: 56px 0 8px;
}

.vf-trust__head {
    max-width: 60ch;
    margin-bottom: 28px;
}

.vf-trust__title {
    margin: 6px 0 0;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.vf-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.vf-trust__item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    background: hsl(var(--white));
}

.vf-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: hsl(var(--verify) / 12%);
    color: hsl(var(--verify));
    font-size: 21px;
}

.vf-trust__item-title {
    margin: 2px 0 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.012em;
    color: hsl(var(--heading-color));
}

.vf-trust__item-desc {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: hsl(var(--body-color));
}

/* The client's longer points, which say more than a chip can carry. */
.vf-trust__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.vf-trust__point {
    padding: 18px 20px;
    border-radius: var(--radius);
    background: hsl(var(--verify) / 6%);
}

.vf-trust__point-title {
    margin: 0 0 5px;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.012em;
    color: hsl(var(--heading-color));
}

.vf-trust__point-desc {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: hsl(var(--body-color));
}

.vf-trust__foot {
    margin: 22px 0 0;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-trust__foot strong {
    color: hsl(var(--heading-color));
}

/* ---------------------------------------------------------------- seller value
   The longer-form case for a seller weighing up a subscription. */
.vf-sellervalue__head {
    max-width: 60ch;
    margin-bottom: 28px;
}

.vf-sellervalue__title {
    margin: 6px 0 0;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.vf-sellervalue__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vf-sellervalue__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    background: hsl(var(--white));
}

.vf-sellervalue__no {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: hsl(var(--verify));
}

.vf-sellervalue__item-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: hsl(var(--heading-color));
}

.vf-sellervalue__item-desc {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: hsl(var(--body-color));
}

/* ---------------------------------------------------------------- the scorecard
   What the listing can show about itself. A row with nothing behind it is dimmed
   rather than hidden: a buyer should see what was not supplied. */
.vf-scorecard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 0;
}

.vf-scorecard__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid hsl(var(--border-color) / 65%);
}

.vf-scorecard__row dt {
    font-size: var(--fs-md);
    font-weight: 500;
    color: hsl(var(--body-color));
}

.vf-scorecard__row dd {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    text-align: right;
    color: hsl(var(--heading-color));
}

.vf-scorecard__row.is-missing dd {
    font-weight: 500;
    color: hsl(var(--body-color) / 75%);
}

/* ---------------------------------------------------------------- completeness
   Seller-facing only. */
.vf-complete {
    display: inline-block;
    min-width: 46px;
    padding: 3px 9px;
    border-radius: 999px;
    background: hsl(var(--border-color) / 70%);
    color: hsl(var(--heading-color));
    font-size: var(--fs-xs);
    font-weight: 700;
}

.vf-complete.is-good {
    background: hsl(var(--verify) / 14%);
    color: hsl(var(--verify));
}

.vf-complete.is-full {
    background: hsl(var(--verify));
    color: hsl(var(--white));
}

.vf-completeness__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.vf-completeness__score {
    margin: 2px 0 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.vf-completeness__note {
    font-size: var(--fs-sm);
    text-align: right;
    color: hsl(var(--body-color));
}

.vf-completeness__bar {
    height: 8px;
    border-radius: 999px;
    background: hsl(var(--border-color));
    overflow: hidden;
}

.vf-completeness__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: hsl(var(--verify));
    transition: width .3s ease;
}

.vf-completeness__label {
    margin: 16px 0 7px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.vf-completeness__missing {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vf-completeness__missing li {
    padding: 5px 11px;
    border: 1px dashed hsl(var(--border-color));
    border-radius: 999px;
    font-size: var(--fs-xs);
    color: hsl(var(--body-color));
}

.vf-completeness.is-full .vf-completeness__score {
    color: hsl(var(--verify));
}

/* ---------------------------------------------------------------- seller plans note */
.vf-plans__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 62ch;
    margin: 0 auto 18px;
    padding: 12px 18px;
    border: 1px solid hsl(var(--verify) / 25%);
    border-radius: var(--radius);
    background: hsl(var(--verify) / 7%);
    font-size: var(--fs-md);
    color: hsl(var(--heading-color));
}

.vf-plans__note i {
    color: hsl(var(--verify));
    font-size: var(--fs-xl);
}

@media (max-width: 991px) {
    .vf-trust__grid,
    .vf-trust__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vf-sellervalue__grid,
    .vf-scorecard__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .vf-trust__grid,
    .vf-trust__points {
        grid-template-columns: minmax(0, 1fr);
    }

    .vf-completeness__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .vf-completeness__note {
        text-align: left;
    }
}

/* ---------------------------------------------------------------- the seller gate
   Plans sit behind a declaration of intent, so this page is the declaration. Two
   choices rather than two buttons: each says what it leads to, so nobody picks
   "selling" to get past a wall and then finds a registration form. */
.vf-gate {
    display: flex;
    align-items: center;
    padding: 64px 0 88px;
}

.vf-gate__inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.vf-gate__title {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: hsl(var(--heading-color));
}

.vf-gate__desc {
    max-width: 58ch;
    margin: 14px auto 0;
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: hsl(var(--body-color));
}

.vf-gate__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 36px;
    text-align: left;
}

.vf-choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-lg);
    background: hsl(var(--white));
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.vf-choice:hover {
    border-color: hsl(var(--verify) / 50%);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
}

.vf-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: hsl(var(--section-bg));
    color: hsl(var(--body-color));
    font-size: 24px;
}

.vf-choice__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.018em;
    color: hsl(var(--heading-color));
}

.vf-choice__desc {
    flex-grow: 1;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: hsl(var(--body-color));
}

.vf-choice__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--base));
}

/* The seller is what this page is for, so that side carries the weight. */
.vf-choice--seller {
    border-color: hsl(var(--verify) / 35%);
    background: hsl(var(--verify) / 5%);
}

.vf-choice--seller .vf-choice__icon {
    background: hsl(var(--verify) / 14%);
    color: hsl(var(--verify));
}

/* The notice sits under the two choices, so it needs room to read as a separate
   thought rather than a caption on the card above it. The .vf-notice rule sets its own
   margin and is declared later in this file, so this has to out-specify it. */
.vf-gate__inner .vf-gate__foot {
    margin-top: 40px;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-gate__foot a {
    color: hsl(var(--base));
    font-weight: 700;
}

@media (max-width: 767px) {
    .vf-gate {
        padding: 36px 0 56px;
    }

    .vf-gate__choices {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 26px;
    }

    .vf-choice {
        padding: 22px;
    }
}

/* ---------------------------------------------------------------- notices
   A message that depends on who is signed in has to be read, not scanned past.
   One treatment everywhere: tinted, bordered, with the icon the state deserves. */
.vf-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 62ch;
    margin: 0 auto;
    padding: 15px 20px;
    border: 1px solid hsl(var(--verify) / 28%);
    border-radius: var(--radius);
    background: hsl(var(--verify) / 8%);
    font-size: var(--fs-md);
    line-height: 1.5;
    text-align: left;
    color: hsl(var(--heading-color));
}

.vf-notice > i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: var(--fs-xl);
    color: hsl(var(--verify));
}

.vf-notice a {
    color: hsl(var(--base));
    font-weight: 700;
}

/* Something the reader has to act on before they can go further. */
.vf-notice--warn {
    border-color: hsl(38 92% 45% / 45%);
    background: hsl(38 92% 50% / 12%);
}

.vf-notice--warn > i {
    color: hsl(32 85% 40%);
}

/* For an element whose text is replaced by script: the icon comes from CSS so it
   survives, since .text() would wipe a child element. */
.vf-notice--iconless::before {
    content: '\f06a';
    flex-shrink: 0;
    margin-top: 1px;
    font-family: 'Line Awesome Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: var(--fs-lg);
    color: hsl(32 85% 40%);
}

.vf-enquiry .vf-notice {
    max-width: none;
    margin: 4px 0 0;
    font-size: var(--fs-sm);
}

.vf-plans__note {
    margin-top: 32px;
    margin-bottom: 32px;
}

/* ---------------------------------------------------------------- the score, kept in view
   The listing form runs to several screens, so once the panel scrolls away a slim bar
   takes over and the score stays visible while the seller works down the form. */
.vf-completeness__sticky {
    position: sticky;
    top: var(--vf-dash-top, 73px);
    z-index: 20;
    margin-bottom: 18px;
    padding: 12px 18px;
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    background: hsl(var(--white) / 96%);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-1);
}

.vf-completeness__sticky[hidden] {
    display: none;
}

.vf-completeness__sticky-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vf-completeness__sticky-label {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.vf-completeness__sticky .vf-completeness__bar {
    flex-grow: 1;
}

.vf-completeness__sticky-score {
    flex-shrink: 0;
    min-width: 46px;
    font-size: var(--fs-lg);
    font-weight: 800;
    text-align: right;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

@media (max-width: 575px) {
    .vf-completeness__sticky-label {
        display: none;
    }
}

/* ---------------------------------------------------------------- the stock theme's text
   The theme sets its own sizes — 13, 13.125, 14, 15 and 16 for what is all just text —
   which is why a dashboard reads as a slightly different product from the page before
   it. These are the places that text actually appears, pulled onto the same five steps
   as everything else.

   Buttons and the main menu are left alone: those are controls with their own sizing,
   and shrinking them would be a different change from the one asked for. */
.dashboard-body,
.dashboard-body p,
.dashboard-body td,
.dashboard-body .form-text,
.alert__desc,
.card-body p,
.policy-data,
.cookie-data {
    font-size: var(--fs-md);
}

.dashboard-body th,
.table thead th {
    font-size: var(--fs-xs);
}

.alert__title,
.card-header h5,
.card-header h6 {
    font-size: var(--fs-lg);
}

.text-muted,
.small,
small,
.badge,
.form-text,
.dashboard-widget__title {
    font-size: var(--fs-sm);
}

/* An uppercase, letterspaced label is a different job from small text, so it keeps the
   smallest step rather than inheriting the one above. */
.form--label,
.vf-eyebrow,
.dashboard-widget__title {
    font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------- the last of the strays
   Found by walking all sixteen pages and listing anything rendering off the scale. These
   are the theme's own content classes, each set independently: 16px here, 17.6px there,
   18px on a section description, 20px on a form heading. */

/* Headings on a card or a section. */
.section-heading-name,
.statistics-item-title,
.category-item-name,
.capacity-tile__name,
.contact-info-link,
.filter-sidebar-title,
.accordion-button,
.car-item-title,
.blog-sidebar__title,
.plan-card__name {
    font-size: var(--fs-lg);
}

/* The larger heading on a form section or a panel. */
.form-section__title,
.dashboard-body h6,
.card-body h6 {
    font-size: var(--fs-xl);
}

/* Supporting prose. */
.section-heading-desc,
.contact-info-desc,
.plan-usage-line,
.form-check-label,
.page-link,
.select2-container .select2-selection__rendered,
.dashboard-body label,
.account-form label,
.vf-join__form label,
.vf-signin__form label {
    font-size: var(--fs-md);
}

/* Table text, which the theme sets per cell rather than on the table. */
.table td,
.dashboard-body .table td {
    font-size: var(--fs-md);
}

.table th,
.dashboard-body .table th {
    font-size: var(--fs-xs);
}

/* The smallest chips and counters. */
.profile-chip,
.listing-status-tabs__count {
    font-size: var(--fs-xs);
}

/* The theme sets several of these from a more specific selector than a bare class, so
   they need matching here rather than being asked politely. */
.category-item .category-item-name,
.contact-section .accordion-button,
.accordion .accordion-button {
    font-size: var(--fs-lg);
}

.contact-section .accordion-body,
.accordion .accordion-body,
.filter-body .form-check-label,
.filter-form .form-check-label,
.pagination .page-link,
.select2-container--default .select2-selection__rendered,
.shortlist-btn__label,
.compare-btn__label,
.car-item-dealer .name,
.car-item-dealer .number {
    font-size: var(--fs-md);
}

/* The listing card's spec pairs. The theme's names are the wrong way round: .label holds
   the figure ("2012") and .value holds the caption under it ("Year"). */
.car-item-info-item .label {
    font-size: var(--fs-lg);
}

.car-item-info-item .value {
    font-size: var(--fs-sm);
}

/* The dashboard header's account control. */
.user-dropdown-btn,
.user-dropdown-btn .text {
    font-size: var(--fs-md);
}

/* ---------------------------------------------------------------- verification levels
   Three honest claims, told apart by weight rather than by three different colours.
   Levels 1 and 2 are paperwork checks and read as quiet chips. Level 3 is the only one
   that says a GENSETZ person stood in front of the machine, so it is the only one that
   carries the brand and a solid fill. */
.vf-vl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.vf-vl i {
    font-size: 1.15em;
    line-height: 1;
}

.vf-vl--listing {
    background: hsl(var(--verify-soft));
    color: hsl(var(--verify));
    border: 1px solid hsl(var(--verify) / 18%);
}

.vf-vl--document {
    background: hsl(var(--verify) / 12%);
    color: hsl(var(--verify));
    border: 1px solid hsl(var(--verify) / 32%);
}

.vf-vl--inspection {
    background: hsl(var(--verify));
    color: #fff;
    border: 1px solid hsl(var(--verify));
    box-shadow: 0 2px 10px hsl(var(--verify) / 32%);
}

.vf-vl--inspection strong {
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Sitting on a listing photograph, below the kVA chip and clear of the shortlist buttons. */
.vf-vl--onthumb {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    backdrop-filter: blur(2px);
}

.vf-vl--onthumb.vf-vl--listing,
.vf-vl--onthumb.vf-vl--document {
    background: hsl(var(--white) / 94%);
}

/* ---- the panel on the listing page that explains what the badge means */
.vf-vlpanel {
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius);
    background: hsl(var(--white));
    overflow: hidden;
}

.vf-vlpanel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: hsl(var(--section-bg));
    border-bottom: 1px solid hsl(var(--border-color));
}

.vf-vlpanel--inspection .vf-vlpanel__head {
    background: hsl(var(--verify-soft));
    border-bottom-color: hsl(var(--verify) / 20%);
}

.vf-vlpanel__title {
    margin: 0;
    font-weight: 700;
    color: hsl(var(--heading-color));
}

.vf-vlpanel__body {
    padding: 18px 20px;
}

.vf-vlpanel__meaning {
    margin: 0;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-vlpanel__inspector {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: hsl(var(--verify-soft));
    font-size: var(--fs-md);
    color: hsl(var(--heading-color));
}

.vf-vlpanel__inspector i {
    font-size: 18px;
    line-height: 1.2;
    color: hsl(var(--verify));
}

.vf-vlpanel__inspector strong {
    display: block;
}

.vf-vlpanel__caveat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-vlpanel__caveat i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 15px;
}

/* ---- the ladder, so a buyer can see where this listing sits */
.vf-vlsteps {
    display: grid;
    gap: 1px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    background: hsl(var(--border-color));
    border: 1px solid hsl(var(--border-color));
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.vf-vlstep {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: hsl(var(--white));
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-vlstep__n {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsl(var(--section-bg));
    border: 1px solid hsl(var(--border-color));
    font-size: var(--fs-xs);
    font-weight: 700;
    color: hsl(var(--body-color));
    align-self: center;
}

.vf-vlstep--done {
    color: hsl(var(--heading-color));
}

.vf-vlstep--done .vf-vlstep__n {
    background: hsl(var(--verify));
    border-color: hsl(var(--verify));
    color: #fff;
}

.vf-vlstep--current {
    background: hsl(var(--verify-soft));
    font-weight: 600;
}

.vf-vlstep__label {
    font-weight: 600;
}

.vf-vlstep__what {
    font-weight: 400;
}

@media (max-width: 575px) {
    .vf-vlpanel__head,
    .vf-vlpanel__body {
        padding-inline: 16px;
    }
}

/* Beside the listing title, where the h1 and the chip share a baseline. */
.vf-vl--headline {
    margin-top: 10px;
}

/* The one-line explanation under the verification filter. */
.filter-sidebar-note {
    display: block;
    margin-top: 8px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: hsl(var(--body-color));
}

/* ---- the evidence behind the badge */
.vf-vlpanel__age {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: hsl(38 92% 96%);
    border: 1px solid hsl(38 60% 86%);
    font-size: var(--fs-md);
    color: hsl(30 40% 28%);
}

.vf-vlpanel__age i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 16px;
}

.vf-vlpanel__report {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid hsl(var(--verify) / 28%);
    background: hsl(var(--verify-soft));
    color: hsl(var(--heading-color));
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.vf-vlpanel__report:hover {
    border-color: hsl(var(--verify));
    background: hsl(var(--verify) / 12%);
    color: hsl(var(--heading-color));
}

.vf-vlpanel__report > i:first-child {
    font-size: 24px;
    color: hsl(var(--verify));
}

.vf-vlpanel__report strong {
    display: block;
    font-size: var(--fs-md);
}

.vf-vlpanel__report-meta {
    display: block;
    font-size: var(--fs-xs);
    color: hsl(var(--body-color));
}

.vf-vlpanel__report-go {
    margin-left: auto;
    font-size: 18px;
    color: hsl(var(--verify));
}

.vf-vlchecks {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid hsl(var(--border-color));
}

.vf-vlchecks__title {
    margin: 0 0 10px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--heading-color));
}

.vf-vlchecks__legend {
    margin: 12px 0 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: hsl(var(--body-color));
}

.vf-vlchecks__legend:first-of-type {
    margin-top: 0;
}

.vf-vlchecks__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.vf-vlchecks__list li {
    position: relative;
    padding-left: 24px;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
    line-height: 1.5;
}

.vf-vlchecks__list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsl(var(--verify));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* ---- the seller's path up the levels */
.vf-climb__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.vf-climb__none {
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
    margin-top: 6px;
}

.vf-climb__pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: hsl(38 92% 95%);
    border: 1px solid hsl(38 60% 84%);
    font-size: var(--fs-md);
    font-weight: 600;
    color: hsl(30 45% 30%);
}

.vf-climb__next {
    margin: 0 0 10px;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-climb__next strong {
    color: hsl(var(--heading-color));
}

.vf-climb__needs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 20px;
}

.vf-climb__needs li {
    position: relative;
    padding-left: 20px;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
    line-height: 1.5;
}

.vf-climb__needs li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid hsl(var(--verify));
}

.vf-climb__hint {
    margin: 12px 0 0;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

@media (max-width: 575px) {
    .vf-climb__needs {
        grid-template-columns: 1fr;
    }
}

/* ---- the three levels, explained on the home page */
.vf-levels {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid hsl(var(--border-color));
}

.vf-levels__head {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.vf-levels__title {
    margin: 0 0 8px;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    color: hsl(var(--heading-color));
}

.vf-levels__desc {
    margin: 0;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
}

.vf-levels__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.vf-levelcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vf-levelcard:hover {
    border-color: hsl(var(--verify) / 45%);
    box-shadow: var(--shadow-1);
    transform: translateY(-2px);
}

.vf-levelcard--inspection {
    border-color: hsl(var(--verify) / 35%);
    background: hsl(var(--verify-soft) / 60%);
}

.vf-levelcard__n {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: hsl(var(--body-color));
}

.vf-levelcard__desc {
    margin: 2px 0 0;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: hsl(var(--body-color));
}

.vf-levelcard__go {
    margin-top: auto;
    padding-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: hsl(var(--verify));
}

.vf-levels__foot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 0;
    font-size: var(--fs-md);
    color: hsl(var(--body-color));
    text-align: center;
}

.vf-levels__foot i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 16px;
}

@media (max-width: 991px) {
    .vf-levels__grid {
        grid-template-columns: 1fr;
    }
}

/* Once the detailed list of checks is shown below it, the ladder is only a progress strip. */
.vf-vlsteps--compact .vf-vlstep {
    padding-block: 8px;
}

/* "Request a GENSETZ inspection" sits under the enquiry actions on a listing. */
.vf-askinspect {
    margin-top: 10px;
}

/* Where the seller's own inspection request has got to. */
.vf-climb__status {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: hsl(var(--section-bg));
    border: 1px solid hsl(var(--border-color));
}

.vf-climb__status-head {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: hsl(var(--body-color));
}

.vf-climb__status-note {
    margin: 4px 0 0;
    font-size: var(--fs-md);
    color: hsl(var(--heading-color));
}

.vf-climb__status-chase {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

/* ---------------------------------------------------------------- the alternative home page
   Served only at /?v=new, so the client can hold the two layouts side by side. Every class here
   is prefixed g2- and exists nowhere else, which means deleting this block restores the old home
   page exactly — it overrides nothing. */
:root {
    --g2-ink: 164 45% 12%;
    --g2-amber: 35 92% 52%;
    --g2-amber-soft: 38 100% 96%;
    --g2-blue: 214 72% 46%;
    --g2-blue-soft: 212 100% 97%;
    --g2-plum: 334 58% 44%;
    --g2-plum-soft: 335 85% 97%;
}

/* ---- four ways in, each with its own colour */
.g2-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 44px;
}

.g2-quick__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 28px 24px 24px;
    border-radius: 18px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.g2-quick__tile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--tile-accent, hsl(var(--base)));
}

.g2-quick__tile:nth-child(1) { --tile-accent: hsl(var(--base)); --tile-tint: hsl(var(--base) / 9%); --tile-ink: hsl(var(--base)); }
.g2-quick__tile:nth-child(2) { --tile-accent: hsl(var(--g2-blue)); --tile-tint: hsl(var(--g2-blue-soft)); --tile-ink: hsl(var(--g2-blue)); }
.g2-quick__tile:nth-child(3) { --tile-accent: hsl(var(--g2-amber)); --tile-tint: hsl(var(--g2-amber-soft)); --tile-ink: hsl(28 90% 38%); }
.g2-quick__tile:nth-child(4) { --tile-accent: hsl(var(--verify)); --tile-tint: hsl(var(--verify-soft)); --tile-ink: hsl(var(--verify)); }

.g2-quick__tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px hsl(var(--heading-color) / 13%);
}

.g2-quick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 15px;
    background: var(--tile-tint);
    color: var(--tile-ink);
    font-size: 26px;
}

.g2-quick__title { font-size: var(--fs-lg); font-weight: 700; color: hsl(var(--heading-color)); }
.g2-quick__copy { font-size: var(--fs-sm); line-height: 1.55; color: hsl(var(--body-color)); }

.g2-quick__go {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--tile-ink);
}

/* ---- showcase blocks, each its own colour world */
.g2-show { padding: 96px 0; background: hsl(var(--white)); }

.g2-show--caps {
    background:
        radial-gradient(1100px 420px at 88% 0%, hsl(var(--verify) / 22%), transparent 62%),
        linear-gradient(180deg, hsl(var(--g2-ink)), hsl(166 48% 9%));
}
.g2-show--brands { background: linear-gradient(180deg, hsl(var(--g2-amber-soft)), hsl(var(--white))); }
.g2-show--cities { background: linear-gradient(180deg, hsl(var(--verify-soft)), hsl(var(--white))); }
.g2-show--years  { background: linear-gradient(180deg, hsl(var(--g2-blue-soft)), hsl(var(--white))); }

.g2-show__inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: start;
}

.g2-show--flip .g2-show__copy { order: 2; }

/* The brands block runs the full container: the copy sits above the grid, centred, so eight
   logo tiles get the width they need instead of sharing the row with a column of text. */
.g2-show__copy--wide { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.g2-show__copy--wide .g2-show__cta { margin-top: 4px; }

.g2-show__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--eyebrow-bg, hsl(var(--base) / 10%));
    color: var(--eyebrow-ink, hsl(var(--base)));
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.g2-show--caps   { --eyebrow-bg: hsl(var(--verify) / 28%); --eyebrow-ink: hsl(152 70% 78%); }
.g2-show--brands { --eyebrow-bg: hsl(var(--g2-amber) / 16%); --eyebrow-ink: hsl(28 90% 36%); }
.g2-show--cities { --eyebrow-bg: hsl(var(--verify) / 14%); --eyebrow-ink: hsl(var(--verify)); }
.g2-show--years  { --eyebrow-bg: hsl(var(--g2-blue) / 12%); --eyebrow-ink: hsl(var(--g2-blue)); }

.g2-show__title {
    margin: 0 0 14px;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: hsl(var(--heading-color));
}

.g2-show__title em { display: block; font-style: normal; font-weight: 800; }
.g2-show--caps .g2-show__title { color: hsl(var(--white)); }
.g2-show--caps .g2-show__title em { color: hsl(152 68% 72%); }
.g2-show--brands .g2-show__title em { color: hsl(28 88% 42%); }
.g2-show--cities .g2-show__title em { color: hsl(var(--verify)); }
.g2-show--years .g2-show__title em { color: hsl(var(--g2-blue)); }

.g2-show__lead {
    margin: 0 0 24px;
    max-width: 44ch;
    font-size: 16px;
    line-height: 1.7;
    color: hsl(var(--body-color));
}
.g2-show--caps .g2-show__lead { color: hsl(150 20% 80%); }

.g2-show__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    background: hsl(var(--base));
    color: hsl(var(--white));
    font-size: var(--fs-md);
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease;
}
.g2-show--caps .g2-show__cta { background: hsl(var(--verify)); }
.g2-show__cta:hover { color: hsl(var(--white)); transform: translateY(-2px); box-shadow: 0 14px 30px hsl(var(--base) / 35%); }
.g2-show--caps .g2-show__cta:hover { box-shadow: 0 14px 30px hsl(var(--verify) / 45%); }

.g2-show__grid { display: grid; gap: 14px; }
.g2-show__grid--caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2-show__grid--brands { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.g2-show__grid--cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.g2-tile, .g2-city, .g2-band, .g2-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 18px;
    border-radius: 14px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* the dark block needs glass tiles, not white ones */
.g2-show--caps .g2-tile {
    background: hsl(0 0% 100% / 7%);
    border-color: hsl(0 0% 100% / 14%);
    backdrop-filter: blur(4px);
}
.g2-show--caps .g2-tile__name { color: hsl(var(--white)); }
.g2-show--caps .g2-tile__meta { color: hsl(150 18% 72%); }
.g2-show--caps .g2-tile__no { color: hsl(152 68% 70%); }
.g2-show--caps .g2-tile:hover { background: hsl(0 0% 100% / 13%); border-color: hsl(152 60% 60% / 55%); }

.g2-tile:hover, .g2-city:hover, .g2-band:hover, .g2-brand:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px hsl(var(--heading-color) / 11%);
}
.g2-show--brands .g2-brand:hover { border-color: hsl(var(--g2-amber) / 60%); }
.g2-show--cities .g2-city:hover { border-color: hsl(var(--verify) / 50%); }
.g2-show--years .g2-band:hover { border-color: hsl(var(--g2-blue) / 50%); }

.g2-tile__no { font-size: var(--fs-xs); font-weight: 800; color: hsl(var(--base)); letter-spacing: .06em; }
.g2-tile__name, .g2-city__name, .g2-band__label { font-size: var(--fs-lg); font-weight: 700; color: hsl(var(--heading-color)); line-height: 1.3; }
.g2-tile__meta, .g2-city__meta, .g2-band__count { font-size: var(--fs-sm); color: hsl(var(--body-color)); }
.g2-city__name i { color: hsl(var(--verify)); }

.g2-brand { align-items: center; text-align: center; gap: 10px; padding: 24px 20px; }

/* A wide plate rather than a small square: most genset marques are wordmarks, and a square box
   shrinks them to nothing. The plate holds the height, the logo fills whatever width it needs. */
.g2-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 230px;
    height: 118px;
    padding: 16px 20px;
    border-radius: 16px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--g2-amber) / 28%);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .04em;
    color: hsl(28 88% 34%);
}

/* Logos arrive at every shape and ratio, so the tile holds the size and the image fits inside it
   rather than the other way round. */
.g2-brand__mark img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.g2-brand__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: inherit;
    border-radius: 10px;
    background: linear-gradient(145deg, hsl(var(--g2-amber) / 18%), hsl(var(--g2-amber) / 5%));
}

.g2-brand__name { font-size: var(--fs-md); font-weight: 700; color: hsl(var(--heading-color)); line-height: 1.3; }
.g2-brand__count { font-size: var(--fs-xs); font-weight: 800; color: hsl(28 88% 42%); }
.g2-band { padding: 26px 22px; }

/* ---- a colour band of live numbers, between the blocks */
.g2-stats {
    padding: 56px 0;
    background:
        radial-gradient(800px 300px at 15% 0%, hsl(var(--base) / 22%), transparent 60%),
        linear-gradient(120deg, hsl(var(--g2-ink)), hsl(174 52% 14%));
}

.g2-stats__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    text-align: center;
}

.g2-stat__n {
    display: block;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: hsl(var(--white));
}

.g2-stat:nth-child(2) .g2-stat__n { color: hsl(152 68% 70%); }
.g2-stat:nth-child(3) .g2-stat__n { color: hsl(38 96% 68%); }
.g2-stat:nth-child(4) .g2-stat__n { color: hsl(205 92% 76%); }

.g2-stat__l {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: hsl(150 16% 74%);
}

@media (max-width: 1199px) { .g2-show__grid--brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .g2-brand__mark { height: 100px; } }
@media (max-width: 575px) { .g2-brand__mark { height: 92px; max-width: 260px; } }

@media (max-width: 991px) {
    .g2-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g2-show { padding: 64px 0; }
    .g2-show__inner { grid-template-columns: 1fr; gap: 32px; }
    .g2-show--flip .g2-show__copy { order: 0; }
    .g2-show__grid--caps, .g2-show__grid--cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g2-stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 575px) {
    .g2-quick { grid-template-columns: 1fr; }
    .g2-show__grid--caps, .g2-show__grid--cities, .g2-show__grid--brands { grid-template-columns: 1fr; }
}

/* ---- the three levels, given the room the idea deserves */
.g2-levels { margin-top: 56px; padding-top: 52px; border-top: 1px solid hsl(var(--border-color)); }

.g2-levels__head { max-width: 760px; margin: 0 auto 36px; text-align: center; }

.g2-levels__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: hsl(var(--verify) / 12%);
    color: hsl(var(--verify));
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.g2-levels__title {
    margin: 0 0 12px;
    font-size: clamp(26px, 2.9vw, 38px);
    line-height: 1.18;
    letter-spacing: -0.022em;
    font-weight: 800;
    color: hsl(var(--heading-color));
}

.g2-levels__lead { margin: 0; font-size: 16px; line-height: 1.7; color: hsl(var(--body-color)); }

.g2-levels__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }

.g2-level {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border-radius: 18px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
}

.g2-level--listing { background: linear-gradient(180deg, hsl(var(--g2-blue-soft)), hsl(var(--white))); }
.g2-level--document { background: linear-gradient(180deg, hsl(var(--g2-amber-soft)), hsl(var(--white))); }

.g2-level--inspection {
    border-color: transparent;
    background:
        radial-gradient(700px 300px at 85% 0%, hsl(var(--verify) / 34%), transparent 62%),
        linear-gradient(180deg, hsl(var(--g2-ink)), hsl(167 47% 10%));
    box-shadow: 0 24px 54px hsl(var(--g2-ink) / 26%);
}

.g2-level__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.g2-level__n { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: hsl(var(--body-color)); }
.g2-level--inspection .g2-level__n { color: hsl(150 24% 70%); }

.g2-level__headline { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.015em; color: hsl(var(--heading-color)); }
.g2-level--inspection .g2-level__headline { color: hsl(var(--white)); }

.g2-level__copy { margin: 0 0 16px; font-size: var(--fs-md); line-height: 1.65; color: hsl(var(--body-color)); }
.g2-level--inspection .g2-level__copy { color: hsl(150 18% 80%); }

.g2-level__checks { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; }

.g2-level__checks li {
    position: relative;
    padding-left: 24px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: hsl(var(--heading-color));
}

.g2-level__checks li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsl(var(--verify));
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.g2-level--inspection .g2-level__checks li { color: hsl(150 14% 88%); }
.g2-level--inspection .g2-level__checks li::before { background: hsl(152 62% 56%); color: hsl(var(--g2-ink)); }

.g2-level__caveat {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: auto 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: hsl(var(--heading-color) / 5%);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: hsl(var(--body-color));
}

.g2-level--inspection .g2-level__caveat { background: hsl(152 60% 56% / 16%); color: hsl(150 40% 86%); }

.g2-level__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--base));
    text-decoration: none;
}

.g2-level--inspection .g2-level__go { color: hsl(152 68% 70%); }

.g2-levels__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 22px 26px;
    border-radius: 16px;
    background: hsl(var(--section-bg));
    border: 1px solid hsl(var(--border-color));
}

.g2-levels__foot p { margin: 0; max-width: 62ch; font-size: var(--fs-md); line-height: 1.6; color: hsl(var(--body-color)); }
.g2-levels__foot strong { color: hsl(var(--heading-color)); }

.g2-levels__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 999px;
    background: hsl(var(--base));
    color: hsl(var(--white));
    font-size: var(--fs-md);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.g2-levels__cta:hover { color: hsl(var(--white)); box-shadow: 0 12px 26px hsl(var(--base) / 32%); }

@media (max-width: 991px) {
    .g2-levels__grid { grid-template-columns: 1fr; }
    .g2-levels__foot { flex-direction: column; align-items: flex-start; }
}

/* ---- trust band, given colour and structure */
.g2-trust__head { max-width: 820px; margin: 0 auto 40px; text-align: center; }

.g2-trust__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: hsl(var(--base) / 10%);
    color: hsl(var(--base));
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.g2-trust__title {
    margin: 0;
    font-size: clamp(27px, 3.1vw, 40px);
    line-height: 1.16;
    letter-spacing: -0.024em;
    font-weight: 800;
    color: hsl(var(--heading-color));
}

.g2-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.g2-trustcard {
    padding: 26px 22px;
    border-radius: 18px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.g2-trustcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px hsl(var(--heading-color) / 11%); }

.g2-trustcard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 16px;
    font-size: 27px;
    background: hsl(var(--verify) / 10%);
    color: hsl(var(--verify));
}

.g2-trust__grid > .g2-trustcard:nth-child(4n+1) .g2-trustcard__icon { background: hsl(var(--base) / 9%); color: hsl(var(--base)); }
.g2-trust__grid > .g2-trustcard:nth-child(4n+2) .g2-trustcard__icon { background: hsl(var(--g2-blue) / 10%); color: hsl(var(--g2-blue)); }
.g2-trust__grid > .g2-trustcard:nth-child(4n+3) .g2-trustcard__icon { background: hsl(var(--g2-amber) / 14%); color: hsl(28 88% 40%); }
.g2-trust__grid > .g2-trustcard:nth-child(4n+4) .g2-trustcard__icon { background: hsl(var(--verify) / 12%); color: hsl(var(--verify)); }

.g2-trust__grid > .g2-trustcard:nth-child(4n+1):hover { border-color: hsl(var(--base) / 40%); }
.g2-trust__grid > .g2-trustcard:nth-child(4n+2):hover { border-color: hsl(var(--g2-blue) / 40%); }
.g2-trust__grid > .g2-trustcard:nth-child(4n+3):hover { border-color: hsl(var(--g2-amber) / 55%); }
.g2-trust__grid > .g2-trustcard:nth-child(4n+4):hover { border-color: hsl(var(--verify) / 45%); }

.g2-trustcard__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; color: hsl(var(--heading-color)); }

/* Title-only cards: nothing below the heading to balance it, so the box is centred instead. */
.g2-trustcard--plain { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; text-align: center; padding: 28px 20px; }
.g2-trustcard--plain .g2-trustcard__icon { margin-bottom: 4px; }

/* ---- how GENSETZ works: the client's diagram, rebuilt so it reflows on a phone */
.g2-works {
    margin-top: 44px;
    padding: 36px;
    border-radius: 22px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--section-bg, 210 20% 98%));
}

.g2-works__head { max-width: 780px; margin: 0 auto 30px; text-align: center; }

.g2-works__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: hsl(var(--g2-blue));
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.g2-works__title {
    margin: 0 0 10px;
    font-size: clamp(21px, 2.4vw, 31px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    text-transform: uppercase;
    color: hsl(var(--heading-color));
}

.g2-works__lead { margin: 0; font-size: var(--fs-md); line-height: 1.65; color: hsl(var(--body-color)); }

.g2-works__sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.g2-works__side {
    --ws: var(--g2-blue);
    padding: 26px 24px 20px;
    border-radius: 18px;
    border: 1px solid hsl(var(--ws) / 22%);
    background: hsl(var(--ws) / 5%);
}

.g2-works__side--buyer { --ws: var(--g2-amber); }

.g2-works__sidehead { padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid hsl(var(--ws) / 20%); }

.g2-works__sideeyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: hsl(var(--ws));
}

.g2-works__sidetitle {
    margin: 0 0 6px;
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--heading-color));
}

.g2-works__sideblurb { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: hsl(var(--body-color)); }

.g2-works__steps { margin: 0; padding: 0; list-style: none; }

.g2-step {
    display: grid;
    grid-template-columns: 26px 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid hsl(var(--ws) / 14%);
}

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

.g2-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: 800;
    color: hsl(var(--white));
    background: hsl(var(--ws));
}

.g2-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 21px;
    color: hsl(var(--ws));
    background: hsl(var(--white));
    border: 1px solid hsl(var(--ws) / 20%);
}

.g2-works__side--buyer .g2-step__icon { color: hsl(28 88% 40%); }
.g2-works__side--buyer .g2-step__n { color: hsl(var(--g2-ink)); }

.g2-step__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g2-step__body strong { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; color: hsl(var(--heading-color)); }
.g2-step__body span { font-size: var(--fs-sm); line-height: 1.55; color: hsl(var(--body-color)); }

.g2-works__gains {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin-top: 18px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--border-color));
}

.g2-gain {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 18px;
    background: hsl(var(--white));
}

.g2-gain__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 21px;
    color: hsl(var(--g2-blue));
    background: hsl(var(--g2-blue) / 9%);
}

.g2-works__gains > .g2-gain:nth-child(2) .g2-gain__icon { color: hsl(var(--verify)); background: hsl(var(--verify) / 11%); }
.g2-works__gains > .g2-gain:nth-child(3) .g2-gain__icon { color: hsl(28 88% 40%); background: hsl(var(--g2-amber) / 16%); }
.g2-works__gains > .g2-gain:nth-child(4) .g2-gain__icon { color: hsl(var(--base)); background: hsl(var(--base) / 9%); }

.g2-gain__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g2-gain__body strong { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; color: hsl(var(--heading-color)); }
.g2-gain__body span { font-size: var(--fs-sm); line-height: 1.55; color: hsl(var(--body-color)); }

@media (max-width: 991px) {
    .g2-works { padding: 28px 20px; }
    .g2-works__sides { grid-template-columns: 1fr; }
    .g2-works__gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .g2-works__gains { grid-template-columns: 1fr; }
    .g2-step { grid-template-columns: 24px minmax(0, 1fr); }
    .g2-step__icon { display: none; }
}

.g2-trust__foot {
    margin: 44px 0 0;
    padding: 30px 34px;
    border-radius: 20px;
    text-align: center;
    font-size: 17px;
    line-height: 1.65;
    color: hsl(150 18% 82%);
    background:
        radial-gradient(700px 280px at 80% 10%, hsl(var(--base) / 26%), transparent 60%),
        linear-gradient(120deg, hsl(var(--g2-ink)), hsl(170 50% 12%));
}

.g2-trust__foot strong { display: block; margin: 6px 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: hsl(var(--white)); }

@media (max-width: 1199px) { .g2-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .g2-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .g2-trust__grid { grid-template-columns: 1fr; } }

/* ---- platform standards: a dark band, numbered */
.g2-std {
    padding: 92px 0;
    background:
        radial-gradient(900px 360px at 12% 0%, hsl(var(--verify) / 24%), transparent 62%),
        linear-gradient(140deg, hsl(var(--g2-ink)), hsl(172 50% 11%));
}

.g2-std__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }

.g2-std__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: hsl(152 60% 56% / 18%);
    color: hsl(152 68% 72%);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.g2-std__title {
    margin: 0 0 12px;
    font-size: clamp(27px, 3.1vw, 40px);
    line-height: 1.16;
    letter-spacing: -0.024em;
    font-weight: 800;
    color: hsl(var(--white));
}

.g2-std__lead { margin: 0; font-size: 16px; line-height: 1.7; color: hsl(150 18% 78%); }

.g2-std__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.g2-stdcard {
    position: relative;
    padding: 28px 24px;
    border-radius: 18px;
    background: hsl(0 0% 100% / 6%);
    border: 1px solid hsl(0 0% 100% / 13%);
    backdrop-filter: blur(4px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.g2-stdcard:hover { transform: translateY(-4px); background: hsl(0 0% 100% / 11%); border-color: hsl(152 60% 60% / 50%); }

.g2-stdcard__n {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    color: hsl(150 30% 56% / 70%);
}

.g2-stdcard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
    border-radius: 15px;
    background: hsl(152 60% 56% / 16%);
    color: hsl(152 68% 70%);
    font-size: 25px;
}

.g2-stdcard__title { margin: 0 0 7px; font-size: var(--fs-lg); font-weight: 700; color: hsl(var(--white)); }
.g2-stdcard__copy { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: hsl(150 16% 76%); }

/* ---- closing call to action */
.g2-cta { padding: 92px 0; background: hsl(var(--section-bg)); }

.g2-cta__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    padding: 48px;
    border-radius: 26px;
    background:
        radial-gradient(700px 320px at 92% 8%, hsl(var(--base) / 92%), transparent 58%),
        linear-gradient(120deg, hsl(var(--base)), hsl(2 72% 38%));
    box-shadow: 0 30px 70px hsl(var(--base) / 28%);
}

.g2-cta__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: hsl(0 0% 100% / 18%);
    color: hsl(var(--white));
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.g2-cta__title {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.3vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.026em;
    font-weight: 800;
    color: hsl(var(--white));
}

.g2-cta__lead { margin: 0 0 24px; max-width: 48ch; font-size: 16px; line-height: 1.7; color: hsl(0 0% 100% / 86%); }

.g2-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.g2-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: var(--fs-md);
    font-weight: 700;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.g2-cta__btn--solid { background: hsl(var(--white)); color: hsl(var(--base)); }
.g2-cta__btn--solid:hover { color: hsl(var(--base)); transform: translateY(-2px); box-shadow: 0 14px 28px hsl(0 0% 0% / 22%); }
.g2-cta__btn--ghost { border: 1.5px solid hsl(0 0% 100% / 55%); color: hsl(var(--white)); }
.g2-cta__btn--ghost:hover { color: hsl(var(--white)); background: hsl(0 0% 100% / 12%); }

.g2-cta__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.g2-cta__points li {
    position: relative;
    padding: 14px 16px 14px 46px;
    border-radius: 14px;
    background: hsl(0 0% 100% / 12%);
    border: 1px solid hsl(0 0% 100% / 18%);
    font-size: var(--fs-md);
    font-weight: 600;
    color: hsl(var(--white));
}

.g2-cta__points li::before {
    content: '\2713';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsl(var(--white));
    color: hsl(var(--base));
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 1199px) { .g2-std__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .g2-std { padding: 64px 0; }
    .g2-cta { padding: 64px 0; }
    .g2-cta__inner { grid-template-columns: 1fr; gap: 32px; padding: 34px 26px; }
}
@media (max-width: 575px) { .g2-std__grid { grid-template-columns: 1fr; } }

/* ---- the search card: rounded, lifted, with a red action */
.g2-searchwrap { position: relative; z-index: 5; }

.g2-searchwrap .banner-form-section { padding: 0; background: transparent; }

.g2-searchwrap .banner-form-wrapper {
    padding: 30px 30px 26px;
    border-radius: 24px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
    box-shadow: 0 30px 70px hsl(var(--g2-ink) / 22%);
}

.g2-searchwrap .banner-form-title {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: hsl(var(--heading-color));
}

.g2-searchwrap .form--label {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
}

.g2-searchwrap .banner-form-inner .form--control,
.g2-searchwrap .select2-container .select2-selection--single {
    height: 50px;
    border-radius: 12px;
    border-color: hsl(var(--border-color));
}

.g2-searchwrap .banner-form-inner .btn,
.g2-searchwrap .banner-form button[type="submit"] {
    height: 50px;
    border-radius: 12px;
    background: hsl(var(--base));
    border-color: hsl(var(--base));
    font-weight: 700;
    box-shadow: 0 10px 24px hsl(var(--base) / 28%);
}

@media (max-width: 991px) {
    .g2-searchwrap .banner-form-wrapper { padding: 22px 18px 18px; border-radius: 20px; }
}

/* Menu text on the yellow header. Kept at the end of the file so it beats the earlier rule that
   coloured these links for a white bar. */
.header .nav-menu .nav-link,
.header .header-compare,
.header .user-dropdown-btn,
.header .user-dropdown-btn .text {
    color: hsl(var(--heading-color));
}

/* On yellow, a white pill reads as "selected" far more clearly than a tint of the bar itself.
   Hover is the same pill at half strength, so the two states feel related. */
.header .nav-menu .nav-link:hover,
.header .nav-menu .nav-link:focus-visible {
    background: hsl(0 0% 100% / 42%);
    color: hsl(var(--heading-color));
}

.header .nav-menu .nav-item.active .nav-link {
    background: hsl(var(--white));
    color: hsl(var(--heading-color));
    font-weight: 700;
    box-shadow: 0 1px 3px hsl(38 70% 28% / 22%);
}

/* The compare and shortlist icons sit on the same bar and need the same treatment. */
.header .header-compare:hover,
.header .user-dropdown-btn:hover {
    background: hsl(0 0% 100% / 42%);
    color: hsl(var(--heading-color));
}

/* The drawer markup exists at every width, so this only applies where it actually opens as a
   drawer. The drawer is white, where a white pill would be invisible. */
@media (max-width: 1199.98px) {
    .header .offcanvas .nav-menu .nav-item.active .nav-link {
        background: hsl(var(--section-bg));
        box-shadow: none;
    }
}

/* Headroom for the lifted mark. With the word gap on the centre line the logo reaches 65.9% of
   its height above that line, so the desktop bar has to be about 94px for the bolt to clear the
   top edge. The phone bar is already 96px and needs nothing. Padding was no good here: the theme
   sets `padding: 0 20px` on the navbar further down, so min-height is what holds. */
@media (min-width: 1200px) {
    .header .navbar {
        min-height: 94px;
    }

    .vf-dash {
        --vf-dash-top: 95px;
    }
}

/* ======================================================================
   Seller pricing, from the client's sheet of 12 October. Four plans, one
   billing-cycle switch, and a badge that is earned rather than bought.
   ====================================================================== */
.g2-sell {
    padding: 72px 0 60px;
    background:
        radial-gradient(900px 340px at 85% 0%, hsl(var(--g2-amber) / 22%), transparent 62%),
        linear-gradient(140deg, hsl(var(--g2-ink)), hsl(172 50% 11%));
}

.g2-sell__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.g2-sell__title {
    margin: 0 0 10px;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.028em;
    font-weight: 800;
    color: hsl(var(--white));
}

.g2-sell__title em { display: block; font-style: normal; color: hsl(var(--g2-amber)); }

.g2-sell__lead { margin: 0; font-size: var(--fs-lg); line-height: 1.55; color: hsl(150 18% 82%); }

.g2-sell__gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.g2-sellgain {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 18px;
    border-radius: 16px;
    border: 1px solid hsl(0 0% 100% / 12%);
    background: hsl(0 0% 100% / 6%);
}

.g2-sellgain__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
    border-radius: 12px;
    font-size: 23px;
    color: hsl(var(--g2-ink));
    background: hsl(var(--g2-amber));
}

.g2-sellgain strong { font-size: var(--fs-md); font-weight: 700; color: hsl(var(--white)); }
.g2-sellgain span { font-size: var(--fs-sm); line-height: 1.5; color: hsl(150 18% 80%); }

.g2-pricing { padding: 72px 0 96px; background: hsl(var(--section-bg)); }

.g2-cycle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    margin-bottom: 28px;
    border-radius: 20px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
}

.g2-cycle__title { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; color: hsl(var(--heading-color)); }
.g2-cycle__lead { margin: 0; font-size: var(--fs-sm); color: hsl(var(--body-color)); }

.g2-cycle__options { display: flex; flex-wrap: wrap; gap: 10px; }

.g2-cycle__opt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 22px;
    border-radius: 14px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.g2-cycle__opt:hover { transform: translateY(-2px); border-color: hsl(var(--g2-amber) / 60%); }
.g2-cycle__opt.is-on { background: hsl(var(--g2-amber)); border-color: hsl(var(--g2-amber)); }

.g2-cycle__name { font-size: var(--fs-md); font-weight: 800; color: hsl(var(--heading-color)); }
.g2-cycle__note { font-size: var(--fs-xs); font-weight: 600; color: hsl(var(--body-color)); }
.g2-cycle__opt.is-on .g2-cycle__name, .g2-cycle__opt.is-on .g2-cycle__note { color: hsl(var(--g2-ink)); }

.g2-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.g2-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 24px 26px;
    border-radius: 20px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    transition: transform .18s ease, box-shadow .18s ease;
}

.g2-plan:hover { transform: translateY(-4px); box-shadow: 0 20px 44px hsl(var(--heading-color) / 12%); }

.g2-plan--free { background: linear-gradient(180deg, hsl(var(--section-bg)), hsl(var(--white))); }
.g2-plan--popular { border-color: hsl(var(--base)); box-shadow: 0 18px 40px hsl(var(--base) / 14%); }

.g2-plan__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: hsl(var(--g2-ink));
    background: hsl(var(--g2-amber));
}

.g2-plan--popular .g2-plan__badge { color: hsl(var(--white)); background: hsl(var(--base)); }

/* A fixed head keeps the four prices on one line, whatever length the tagline runs to. */
.g2-plan__head { min-height: 92px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid hsl(var(--border-color)); }
.g2-plan__name { margin: 0 0 4px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: hsl(var(--heading-color)); }
.g2-plan__for { margin: 0; font-size: var(--fs-sm); color: hsl(var(--body-color)); }

.g2-plan__prices { min-height: 76px; margin-bottom: 18px; }

.g2-price { display: none; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.g2-price.is-on { display: flex; }

.g2-price__amount { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; color: hsl(var(--heading-color)); }
.g2-price__per { font-size: var(--fs-sm); color: hsl(var(--body-color)); }

.g2-price__save {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: hsl(var(--verify));
    background: hsl(var(--verify) / 12%);
}

.g2-plan__features { flex: 1 1 auto; margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.g2-plan__features li { display: flex; gap: 9px; font-size: var(--fs-md); line-height: 1.45; color: hsl(var(--body-color)); }
.g2-plan__features i { flex: 0 0 auto; font-size: 18px; color: hsl(var(--verify)); }

.g2-plan__cta { margin-top: auto; }

.g2-plan__btn, .g2-plan__soon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: var(--fs-md);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.g2-plan__btn { color: hsl(var(--white)); background: hsl(var(--base)); transition: filter .18s ease; }
.g2-plan__btn:hover { color: hsl(var(--white)); filter: brightness(1.08); }

.g2-plan__soon { color: hsl(var(--body-color)); background: hsl(var(--section-bg)); border: 1px dashed hsl(var(--border-color)); cursor: default; }

.g2-pricing__note {
    display: flex;
    gap: 9px;
    justify-content: center;
    margin: 22px 0 0;
    font-size: var(--fs-sm);
    color: hsl(var(--body-color));
}

.g2-verified {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 32px;
    padding: 26px 30px;
    border-radius: 20px;
    border: 1px solid hsl(var(--verify) / 28%);
    background: hsl(var(--verify) / 6%);
}

.g2-verified__copy { display: flex; align-items: center; gap: 16px; }

.g2-verified__shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 28px;
    color: hsl(var(--white));
    background: hsl(var(--verify));
}

.g2-verified__title { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: hsl(var(--heading-color)); }
.g2-verified__lead { margin: 2px 0 0; font-size: var(--fs-sm); color: hsl(var(--body-color)); }

.g2-verified__marks { display: flex; flex-wrap: wrap; gap: 10px; }

.g2-vmark {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: hsl(var(--heading-color));
    background: hsl(var(--white));
    border: 1px solid hsl(var(--border-color));
}

.g2-vmark i { font-size: 17px; color: hsl(var(--verify)); }

.g2-faq { margin-top: 44px; }
.g2-faq__title { margin: 0 0 20px; text-align: center; font-size: clamp(21px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: hsl(var(--heading-color)); }
.g2-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.g2-faq__item { padding: 22px 22px; border-radius: 16px; border: 1px solid hsl(var(--border-color)); background: hsl(var(--white)); }
.g2-faq__item h3 { display: flex; gap: 9px; margin: 0 0 7px; font-size: var(--fs-lg); font-weight: 700; color: hsl(var(--heading-color)); }
.g2-faq__item h3 i { color: hsl(var(--base)); }
.g2-faq__item p { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: hsl(var(--body-color)); }

.g2-pricing__cta { margin-top: 40px; text-align: center; }
.g2-pricing__cta h2 { margin: 0 0 6px; font-size: clamp(21px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: hsl(var(--heading-color)); }
.g2-pricing__cta p { margin: 0 auto 18px; max-width: 54ch; font-size: var(--fs-md); color: hsl(var(--body-color)); }
.g2-pricing__cta .g2-plan__btn { display: inline-flex; width: auto; padding-inline: 34px; }

@media (max-width: 1199px) {
    .g2-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .g2-sell__inner { grid-template-columns: 1fr; gap: 32px; }
    .g2-cycle { flex-direction: column; align-items: flex-start; }
    .g2-cycle__options { width: 100%; }
    .g2-cycle__opt { flex: 1 1 0; }
    .g2-faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .g2-sell__gains { grid-template-columns: 1fr; }
    .g2-plans { grid-template-columns: 1fr; }
    .g2-verified { flex-direction: column; align-items: flex-start; }
}

/* Brands handled: a tick list rather than a dropdown, so a dealer can see every make at once. */
.brands-handled {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 18px;
    padding: 16px 18px;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--section-bg));
}

@media (max-width: 991px) { .brands-handled { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .brands-handled { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Seller listings table: nine columns is more than the dashboard's content width can hold, and
   without a floor the title column collapses to one letter a line. Give it a minimum and let the
   table scroll sideways instead of folding in on itself. */
.listing-table .listing-thumb { flex: 0 0 auto; }

/* Tick the listings, act on them from the bar above the table. */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 18px;
    margin: 0 18px 12px;
    border-radius: 12px;
    border: 1px solid hsl(var(--base) / 30%);
    background: hsl(var(--base) / 6%);
}

.bulk-bar__count { font-size: var(--fs-sm); color: hsl(var(--body-color)); }
.bulk-bar__count strong { color: hsl(var(--heading-color)); }
.bulk-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid hsl(var(--border-color));
    background: hsl(var(--white));
    font-size: var(--fs-sm);
    font-weight: 600;
    color: hsl(var(--heading-color));
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.bulk-btn:hover { border-color: hsl(var(--base) / 55%); color: hsl(var(--base)); }
.bulk-btn--danger { color: hsl(0 72% 45%); border-color: hsl(0 72% 45% / 35%); }
.bulk-btn--danger:hover { color: hsl(0 72% 45%); border-color: hsl(0 72% 45%); background: hsl(0 72% 45% / 7%); }

.bulk-cell { width: 1%; min-width: 0; white-space: nowrap; }
.listing-table .bulk-cell .form-check-input { margin: 0; }

/* The listing's own facts sit under its title rather than each taking a column of their own. */
.listing-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: var(--fs-sm); }
.listing-meta > * { display: inline-flex; align-items: center; gap: 4px; }

/* Everything below only applies where the table is still a table. The stock theme stacks each row
   into label-and-value lines at 991px and under, and a minimum width there pushes every value off
   the side of the screen — which is exactly what it did on a phone. */
@media (min-width: 992px) {
    .vf-dash .listing-table,
    .listing-table { min-width: 760px; }

    .vf-dash .card-body > .listing-table { display: table; }

    .listing-table th,
    .listing-table td { vertical-align: middle; }

    .listing-table th { white-space: nowrap; }

    /* The listing is the one column that may wrap; everything else stays on its line. Named
       rather than counted, because a tick-box column in front shifts every position by one. */
    .listing-table td:not(.listing-cell) { white-space: nowrap; }

    .listing-table th.listing-cell,
    .listing-table td.listing-cell { min-width: 230px; white-space: normal; }

    .card-body:has(> .listing-table) { overflow-x: auto; }
}

/* Stacked rows: the listing's own cell gets the whole width and drops the "Listing" label, which
   says nothing the title does not. The stock theme does this only in its own stylesheet, and only
   under 768px, while the stacking itself starts at 991px. */
@media (max-width: 991px) {
    /* The tick box and the listing it belongs to each take the whole row, and neither needs a
       label: one is a checkbox, the other is the title. */
    .listing-table tbody td.bulk-cell,
    .listing-table tbody td.listing-cell {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    .listing-table tbody td.bulk-cell::before,
    .listing-table tbody td.listing-cell::before { display: none !important; }

    .row-actions { margin-top: 8px; }
}

/* My Listings header: the search form is a block with a full-width input group inside it, so it
   never shrank and pushed Add Listing off the side of the card on a phone. Let it give way, and
   below 576px give each of them its own row. */
.listing-search {
    flex: 1 1 260px;
    min-width: 0;
}

@media (max-width: 575px) {
    .listing-search { flex-basis: 100%; }
    .listing-search ~ .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Latest listings on the home page: the stock itself, as cards a buyer can read. The hero only
   rotates through the newest five, and the layout change left the page with no listing grid. */
.g2-latest { padding: 86px 0; background: hsl(var(--white)); }

.g2-latest__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin-bottom: 30px;
}

.g2-latest__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: hsl(var(--verify) / 10%);
    color: hsl(var(--verify));
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.g2-latest__title {
    margin: 0;
    font-size: clamp(27px, 3.1vw, 40px);
    line-height: 1.16;
    letter-spacing: -0.024em;
    font-weight: 800;
    color: hsl(var(--heading-color));
}

.g2-latest__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--base));
}

.g2-latest__link:hover { color: hsl(var(--base)); text-decoration: underline; }

@media (max-width: 991px) { .g2-latest { padding: 58px 0; } }