/* Pricing block (round 31 PRP-1, round 32 PRI-1): parts.pricing.* on marketing › Prijzen and the Plan page.
   Colours only through tokens (both themes); hairlines --sc-color-hairline, accents --sc-color-primary
   (chosen/active) and --sc-color-green (checks). Three type levels: title/h2, card name + price, text.
   Never a horizontal page scroll: below 780 px the table shows one plan column (plan tabs). */

.sc-pricing {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* NAFIX-31c-2: an auto track took the min-content of the matrix (page wider than 390 px) */
    gap: 3.5rem;
    color: var(--sc-color-text);
    font-family: var(--sc-font-sans);
}

/* Marketing: the width of the marketing head (1080 px content on 1440), not the 72rem .mk-page. */
.mk-body .sc-pricing {
    box-sizing: border-box;
    max-width: calc(var(--mk-wrap-w) + 2 * var(--mk-gutter));
    margin-inline: auto;
    padding: 3rem var(--mk-gutter) 6rem;
    gap: 6rem;
}

.sc-pricing-sec {
    min-width: 0;
}

.sc-pricing .sc-pricing-h2 {
    margin: 0 0 2rem;
    font-size: clamp(1.75rem, 1.25rem + 1.25vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.sc-pricing-label {
    font-weight: var(--sc-font-weight-ui);
    color: var(--sc-color-text-strong);
}

.sc-pricing-chip {
    display: inline-block;
    padding: 0 .375rem;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary-text);
    font-size: .6875rem;
    font-weight: var(--sc-font-weight-ui);
    line-height: 1.6;
    vertical-align: middle;
}

/* Cycle switch (label.sc-switch of shared.css; the checkbox carries the state, sc-pricing.js) */
.sc-pricing-cycle {
    justify-self: start;
    gap: .5rem;
    color: var(--sc-color-text-strong);
    font-weight: var(--sc-font-weight-ui);
    white-space: nowrap;
}

/* 1 · Hero: pill, h1 and one line left; the switch on the bottom line right */
.sc-pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem 2rem;
    align-items: end;
}

.sc-pricing-hero-text {
    display: grid;
    gap: 1rem;
    justify-items: start;
}

.sc-pricing h1.sc-pricing-title {
    margin: 0;
    font-size: clamp(2.25rem, 1.25rem + 2.5vw, 4rem);
    font-weight: var(--sc-font-weight-title);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--sc-color-text-strong);
}

.sc-pricing-lead {
    margin: 0;
    font-size: 1.125rem;
    color: var(--sc-color-text-muted);
}

.sc-pricing-pill {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem .25rem .25rem;
    border-radius: var(--sc-radius-lg);
    box-shadow: inset 0 0 0 1px var(--sc-color-hairline);
    color: var(--sc-color-text-muted);
    font-size: .875rem;
    text-decoration: none;
}

a.sc-pricing-pill:hover {
    color: var(--sc-color-text-strong);
}

/* 2 · Plan cards: one framed container, hairlines between the cards, five subgrid rows
   (head · price · metric · list · cta) so prices and buttons share one line. */
.sc-plan-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    border: 1px solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-lg);
    overflow: clip;
}

/* Every card draws the hairline on its start and top edge; the frame clips the outer ones. */
.sc-plan-card {
    --sc-plan-lines: -1px 0 0 var(--sc-color-hairline), 0 -1px 0 var(--sc-color-hairline);
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    gap: 0;
    min-width: 0;
    padding: 1.5rem 1.25rem;
    box-shadow: var(--sc-plan-lines);
    transition: box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}

.sc-plan-card > * + * {
    margin-top: 1.25rem;
}

.sc-plan-card.is-current,
.sc-plan-card.is-chosen {
    position: relative;
    z-index: 1; /* run 35c (r.156): the frame paints above the next card's hairline */
    box-shadow: inset 0 0 0 1px var(--sc-color-primary), var(--sc-plan-lines);
}

.sc-plan-head h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--sc-color-text-strong);
}

.sc-plan-tagline {
    margin: .25rem 0 0;
    color: var(--sc-color-text-muted);
}

.sc-plan-price {
    margin: 0;
    font-size: 2rem;
    font-weight: var(--sc-font-weight-title);
    line-height: 1.1;
    color: var(--sc-color-text-strong);
}

.sc-plan-price small {
    font-size: .875rem;
    font-weight: var(--sc-font-weight-text);
    color: var(--sc-color-text-muted);
}

.sc-plan-metric {
    align-self: start;
    margin: 0;
    color: var(--sc-color-text-muted);
    font-size: .875rem;
}

/* Discount (run 35c, r.161–163): list price struck through + chip before the net price. */
.sc-price-list {
    font-size: .875rem;
    font-weight: var(--sc-font-weight-text);
    color: var(--sc-color-text-subtle);
}

.sc-pricing-chip--off {
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary-text);
}

.sc-plan-price .sc-pricing-chip--off {
    font-size: .75rem;
}

.sc-plan-mine {
    display: grid;
    gap: .5rem;
    font-size: .875rem;
    color: var(--sc-color-text-muted);
}

.sc-plan-mine b {
    color: var(--sc-color-text-strong);
}

.sc-plan-metric b,
.sc-plan-list b {
    color: var(--sc-color-text-strong);
}

.sc-plan-list {
    display: grid;
    gap: .5rem;
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--sc-color-text-muted);
}

.sc-plan-cta {
    display: grid;
    align-self: end;
}

.sc-plan-cta .button,
.sc-plan-current {
    text-align: center;
}

/* The neutral button sits on the page ground (light: surface on white, contrast about 1.05), so it gets a hairline ring.
   shared.css sets .siteclick-container .button { box-shadow: none !important } (0,2,0), so this rule
   (0,4,0) has to be important as well; :not(:focus-visible) leaves the focus ring of ui-button.css alone. */
.sc-plan-cta .button.button-grey:not(:focus-visible) {
    box-shadow: inset 0 0 0 1px var(--sc-color-hairline) !important;
}

.sc-plan-current {
    padding: .5rem;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-muted);
    font-weight: var(--sc-font-weight-ui);
}

.sc-pricing-tierline {
    margin: 1.5rem 0 0;
    text-align: center;
    color: var(--sc-color-text-muted);
}

.sc-pricing-tierline b {
    color: var(--sc-color-text-strong);
    font-weight: var(--sc-font-weight-ui);
}

/* 3 · Calculator: slider and total side by side, the tier cells below, one box */
.sc-pricing-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-lg);
    overflow: clip;
}

.sc-pricing-calc-input,
.sc-pricing-calc-result {
    display: grid;
    gap: .75rem;
    align-content: start;
}

.sc-pricing-calc-result {
    justify-items: end;
    text-align: right;
}

.sc-pricing-calc .sc-slider {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.sc-pricing-calc .sc-slider input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--sc-color-primary);
}

.sc-pricing-calc .sc-slider input[type="number"] {
    width: 5.5rem;
}

.sc-pricing-calc-total,
.sc-pricing-calc-meta {
    margin: 0;
    color: var(--sc-color-text-muted);
}

.sc-pricing-calc-total strong {
    font-size: 2.5rem;
    font-weight: var(--sc-font-weight-title);
    color: var(--sc-color-text-strong);
    letter-spacing: -.02em;
}

/* Tier tiles: the Plan page (plan/partials/sites) uses them as they are; the calculator draws them as
   one row of cells with hairlines below. */
.sc-tier-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

.sc-tier {
    display: grid;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface);
    transition: border-color var(--sc-dur-fast) var(--sc-ease-out), background-color var(--sc-dur-fast) var(--sc-ease-out), box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}

.sc-tier.is-active {
    border-color: var(--sc-color-primary);
    background: var(--sc-color-primary-soft);
}

.sc-tier-range {
    font-size: .875rem;
    color: var(--sc-color-text-muted);
}

.sc-tier-price {
    font-weight: var(--sc-font-weight-ui);
    color: var(--sc-color-text-strong);
}

.sc-tier-note {
    visibility: hidden;
    font-size: .8125rem;
    color: var(--sc-color-primary-text);
}

.sc-tier.is-active .sc-tier-note {
    visibility: visible;
}

.sc-pricing-calc .sc-tier-strip {
    grid-column: 1 / -1;
    gap: 0;
    margin: 0 -1.5rem -1.5rem;
    border-top: 1px solid var(--sc-color-hairline);
}

.sc-pricing-calc .sc-tier {
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: 0;
    background: none;
}

.sc-pricing-calc .sc-tier + .sc-tier {
    border-inline-start: 1px solid var(--sc-color-hairline);
}

.sc-pricing-calc .sc-tier.is-active {
    background: none;
    box-shadow: inset 0 2px 0 var(--sc-color-primary);
}

.sc-pricing-calc .sc-tier.is-active .sc-tier-range {
    color: var(--sc-color-text-strong);
}

/* 4 · Comparison table: name + price per plan in the head; plan tabs below 780 px */
.sc-pricing-matrix-tabs {
    display: none;
}

.sc-pricing-matrix-wrap {
    border: 1px solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-lg);
    overflow: clip; /* clip, not auto: no scroll container, so the head can stick to the page */
}

.sc-pricing-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.sc-pricing-matrix th,
.sc-pricing-matrix td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sc-color-hairline);
    text-align: center;
}

.sc-pricing-matrix tbody tr:last-child > * {
    border-bottom: 0;
}

.sc-pricing-matrix tbody th {
    text-align: left;
    font-weight: var(--sc-font-weight-text);
    color: var(--sc-color-text-strong);
}

.sc-pricing-matrix th small {
    display: block;
    color: var(--sc-color-text-subtle);
    font-size: .75rem;
}

.sc-pricing-matrix thead > tr > * {
    vertical-align: bottom;
}

.sc-pricing-matrix thead th {
    color: var(--sc-color-text-strong);
    font-weight: var(--sc-font-weight-ui);
}

.mk-body .sc-pricing-matrix thead > tr > * {
    position: sticky;
    top: var(--mk-head-h);
    z-index: 1;
    background: var(--sc-color-bg);
}

.sc-pricing-matrix-name,
.sc-pricing-matrix-price {
    display: block;
}

.sc-pricing-matrix-price {
    color: var(--sc-color-text-muted);
    font-weight: var(--sc-font-weight-text);
}

.sc-pricing-matrix .is-group th {
    padding-top: 1.5rem;
    color: var(--sc-color-text-strong);
    font-weight: var(--sc-font-weight-ui);
}

.sc-pricing-matrix td {
    color: var(--sc-color-text-muted);
}

.sc-pricing-yes {
    color: var(--sc-color-green);
    font-weight: var(--sc-font-weight-ui);
}

.sc-pricing-no {
    color: var(--sc-color-text-subtle);
}

.sc-pricing-foot {
    margin: 1rem 0 0;
    font-size: .8125rem;
    color: var(--sc-color-text-subtle);
}

/* 5 · FAQ: one narrow centred column, closed */
.sc-pricing-sec[data-sc-section="prijzen-5-vragen"] .sc-pricing-h2 {
    text-align: center;
}

.sc-pricing-faq {
    display: grid;
    max-width: 40rem;
    margin-inline: auto;
}

.sc-pricing-faq details {
    padding: 1rem 0;
    border-bottom: 1px solid var(--sc-color-hairline);
}

.sc-pricing-faq summary {
    cursor: pointer;
    font-weight: var(--sc-font-weight-ui);
    color: var(--sc-color-text-strong);
}

.sc-pricing-faq details p {
    margin: .75rem 0 0;
    color: var(--sc-color-text-muted);
}

.sc-pricing-faq-tiers {
    margin-top: .75rem;
    border-collapse: collapse;
    color: var(--sc-color-text-muted);
}

.sc-pricing-faq-tiers td {
    padding: .25rem 1.5rem .25rem 0;
}

/* Enterprise dialog */
.sc-pricing-dialog {
    width: min(32rem, calc(100vw - 2rem));
    padding: 1.5rem;
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-lg);
    color: var(--sc-color-text);
    box-shadow: var(--sc-shadow-pop);
}

.sc-pricing-dialog::backdrop {
    background: var(--sc-overlay-dark);
}

.sc-pricing-dialog form {
    display: grid;
    gap: 1rem;
}

.sc-pricing-dialog h2,
.sc-pricing-dialog p {
    margin: 0;
}

.sc-pricing-field {
    display: grid;
    gap: .375rem;
}

.sc-pricing-field input,
.sc-pricing-field textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Two card columns; an Enterprise card that starts a row spans it. */
@media (max-width: 1099px) {
    .sc-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-plan-card--enterprise:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .sc-pricing-hero,
    .sc-pricing-calc {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-pricing-hero {
        align-items: start;
    }

    .sc-pricing-calc-result {
        justify-items: start;
        text-align: left;
    }

    .sc-tier-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-pricing-calc .sc-tier-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sc-pricing-matrix-tabs {
        display: block;
        margin-bottom: 1rem;
    }

    .sc-pricing-matrix .is-off {
        display: none;
    }

    .sc-pricing-matrix tbody th {
        width: 55%;
    }
}

@media (max-width: 639px) {
    .sc-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-tier-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-pricing-calc .sc-tier {
        padding-inline: .75rem;
    }

    .sc-pricing-matrix th,
    .sc-pricing-matrix td {
        padding-inline: .75rem;
    }
}