/* ============================================================================
   Hoe het werkt — page styles
   ----------------------------------------------------------------------------
   Clean, neutral. Tokens only. No decorative color accents, no lines,
   no glows. Reveal animations via data-vh-reveal (page-transitions.js).
   ============================================================================ */


/* -- Page wrapper ----------------------------------------------------------- */

.hiw {
    max-width: var(--container-section, 1000px);
    margin: 0 auto;
    padding: var(--space-16, 4rem) var(--space-6, 1.5rem) var(--space-20, 5rem);
    color: var(--vh-text);
    font-family: var(--vh-font-body);
}

@media (min-width: 900px) {
    .hiw { padding: var(--space-20, 5rem) var(--space-8, 2rem) var(--space-24, 6rem); }
}


/* -- Eyebrow (small uppercase label) ---------------------------------------- */

.hiw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, .5rem);
    font-size: var(--text-overline, .72rem);
    font-weight: var(--weight-semi, 600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vh-text-tertiary);
    margin-bottom: var(--space-3, .75rem);
}

.hiw-eyebrow-dot { display: none; }


/* -- Hero ------------------------------------------------------------------- */

.hiw-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-20, 5rem);
}

.hiw-title {
    font-family: var(--vh-font-display);
    font-size: var(--text-display);
    font-weight: var(--weight-extra, 800);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--vh-text);
    margin-bottom: var(--space-5, 1.25rem);
}

.hiw-title em { font-style: normal; color: inherit; }
.hiw-title em::after { display: none; }

.hiw-lead {
    font-size: var(--text-subhead, 1.15rem);
    line-height: var(--leading-normal, 1.6);
    color: var(--vh-text-secondary);
    max-width: 560px;
    margin: 0 auto;
}


/* -- Section heading for non-step sections ---------------------------------- */

.hiw-h2 {
    font-family: var(--vh-font-display);
    font-size: clamp(1.65rem, 2.5vw + 0.75rem, 2.25rem);
    font-weight: var(--weight-extra, 800);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vh-text);
    margin-bottom: var(--space-3, .75rem);
}

.hiw-lead-sm {
    font-size: var(--text-body, .95rem);
    line-height: var(--leading-normal, 1.6);
    color: var(--vh-text-secondary);
    max-width: 520px;
}


/* -- Steps (no connector line, neutral numbers) ----------------------------- */

.hiw-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-14, 3.5rem);
    margin-bottom: var(--space-20, 5rem);
}

.hiw-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--space-5, 1.25rem);
    align-items: start;
}

.hiw-step-n {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--vh-bg);
    border: 1px solid var(--vh-border);
    color: var(--vh-text);
    font-family: var(--vh-font-display);
    font-weight: var(--weight-bold, 700);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hiw-step-body {
    padding-top: var(--space-1, .25rem);
    min-width: 0;
}

.hiw-step-title {
    font-family: var(--vh-font-display);
    font-size: clamp(1.35rem, 2vw + 0.5rem, 1.7rem);
    font-weight: var(--weight-extra, 800);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vh-text);
    margin-bottom: var(--space-2, .5rem);
}

.hiw-step-desc {
    font-size: var(--text-body, .95rem);
    line-height: var(--leading-normal, 1.6);
    color: var(--vh-text-secondary);
    margin-bottom: var(--space-5, 1.25rem);
    max-width: 560px;
}


/* -- Feature list inside step 2 --------------------------------------------- */

.hiw-features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3, .75rem);
}

@media (min-width: 680px) {
    .hiw-features { grid-template-columns: repeat(2, 1fr); }
}

.hiw-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, .75rem);
    padding: var(--space-4, 1rem);
    background: var(--vh-surface);
    border: 1px solid var(--vh-border);
    border-radius: var(--radius-md, 12px);
    transition: border-color var(--duration-fast) var(--ease);
}

.hiw-features li:hover { border-color: var(--vh-text-tertiary-soft); }

.hiw-features-icon {
    width: 18px;
    height: 18px;
    color: var(--vh-text-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

.hiw-features li div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hiw-features li strong {
    font-size: var(--text-body-sm, .9rem);
    font-weight: var(--weight-semi, 600);
    color: var(--vh-text);
}

.hiw-features li span {
    font-size: var(--text-card, .85rem);
    line-height: 1.5;
    color: var(--vh-text-secondary);
}


/* -- Verdicts (semantic dots only, no hover color shift) -------------------- */

.hiw-verdicts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2, .5rem);
}

@media (min-width: 680px) {
    .hiw-verdicts { grid-template-columns: repeat(3, 1fr); gap: var(--space-3, .75rem); }
}

.hiw-verdict {
    display: flex;
    align-items: center;
    gap: var(--space-3, .75rem);
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    background: var(--vh-surface);
    border: 1px solid var(--vh-border);
    border-radius: var(--radius-md, 12px);
    transition: border-color var(--duration-fast) var(--ease);
}

.hiw-verdict:hover { border-color: var(--vh-text-tertiary-soft); }

.hiw-verdict-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    background: var(--vh-text-tertiary);
}

.hiw-verdict-good .hiw-verdict-dot { background: var(--good, #059669); }
.hiw-verdict-fair .hiw-verdict-dot { background: var(--vh-warning, #f59e0b); }
.hiw-verdict-bad  .hiw-verdict-dot { background: var(--bad, #dc2626); }

.hiw-verdict-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hiw-verdict-body strong {
    font-size: var(--text-body-sm, .9rem);
    font-weight: var(--weight-semi, 600);
    color: var(--vh-text);
}

.hiw-verdict-body span {
    font-size: var(--text-caption, .75rem);
    color: var(--vh-text-secondary);
    line-height: 1.4;
}


/* -- Stats (plain dark text, no color) -------------------------------------- */

.hiw-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12, 3rem);
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-8, 2rem) 0;
    margin-bottom: var(--space-20, 5rem);
    border-top: 1px solid var(--vh-border);
    border-bottom: 1px solid var(--vh-border);
}

.hiw-stat {
    text-align: center;
    min-width: 140px;
}

.hiw-stat-value {
    font-family: var(--vh-font-display);
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    font-weight: var(--weight-extra, 800);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--vh-text);
    margin-bottom: var(--space-2, .5rem);
    font-variant-numeric: tabular-nums;
}

.hiw-stat-label {
    font-size: var(--text-caption, .75rem);
    font-weight: var(--weight-medium, 500);
    letter-spacing: 0.03em;
    color: var(--vh-text-secondary);
    text-transform: uppercase;
}


/* -- Marketplaces ----------------------------------------------------------- */

.hiw-marketplaces { margin-bottom: var(--space-20, 5rem); }

.hiw-mp-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2, .5rem);
    margin-top: var(--space-5, 1.25rem);
}

@media (min-width: 520px) { .hiw-mp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .hiw-mp-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3, .75rem); } }

.hiw-mp-grid li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    background: var(--vh-surface);
    border: 1px solid var(--vh-border);
    border-radius: var(--radius-sm, 10px);
    font-size: var(--text-body-sm, .9rem);
    font-weight: var(--weight-medium, 500);
    color: var(--vh-text-secondary);
    text-align: center;
    transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.hiw-mp-grid li:hover {
    color: var(--vh-text);
    border-color: var(--vh-text-tertiary-soft);
}

.hiw-mp-more {
    background: transparent !important;
    border-style: dashed !important;
    font-style: italic;
    color: var(--vh-text-tertiary) !important;
}


/* -- CTA (neutral dark card, yellow button only — matches site actions) ----- */

.hiw-cta {
    text-align: center;
    padding: var(--space-16, 4rem) var(--space-6, 1.5rem);
    background: var(--vh-text);
    color: #fff;
    border-radius: var(--radius-lg, 18px);
}

.hiw-cta-title {
    font-family: var(--vh-font-display);
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.1rem);
    font-weight: var(--weight-extra, 800);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: var(--space-3, .75rem);
}

.hiw-cta-sub {
    font-size: var(--text-body, .95rem);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--space-7, 1.75rem);
}

.hiw-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, .5rem);
    padding: var(--space-3, .75rem) var(--space-6, 1.5rem);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-family: var(--vh-font-body);
    font-weight: var(--weight-bold, 700);
    font-size: var(--text-body, .95rem);
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--ease);
}

.hiw-cta-btn:hover { background: var(--vh-primary-hover); }

.hiw-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35);
}

.hiw-cta-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3, .75rem) var(--space-5, 1.25rem);
    margin-top: var(--space-6, 1.5rem);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-caption, .75rem);
}

.hiw-cta-trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, .25rem);
}

.hiw-cta-trust svg { color: rgba(255, 255, 255, 0.5); }


/* -- Reveal animations ------------------------------------------------------ */

[data-vh-reveal].will-animate {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--duration-enter, .5s) var(--ease-out-expo, cubic-bezier(.22,1,.36,1)),
        transform var(--duration-enter, .5s) var(--ease-out-expo, cubic-bezier(.22,1,.36,1));
}

[data-vh-reveal].animate-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-vh-reveal].will-animate,
    [data-vh-reveal].animate-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}