/* ---------------------------------------------------------------------------
 * Pricing tables
 *
 * Colours, radii and spacing are custom properties on .ws-pricing. A site
 * package overrides them there and restyles every layout at once - no rule
 * has to be duplicated.
 * ------------------------------------------------------------------------- */

.ws-pricing {
    --ws-pricing-accent: #b45309;
    --ws-pricing-accent-contrast: #ffffff;
    --ws-pricing-accent-soft: #fdf6ec;
    --ws-pricing-text: #1c1b19;
    --ws-pricing-text-muted: #6b6862;
    --ws-pricing-text-subtle: #8c8880;
    --ws-pricing-text-faint: #a8a49b;
    --ws-pricing-line: #e5e1d8;
    --ws-pricing-line-soft: #f4f1ea;
    --ws-pricing-surface: #ffffff;
    --ws-pricing-surface-alt: #faf8f4;
    /* Secondary tones are variables too: a site package must be able to change
       every colour without rebuilding selectors of the extension. */
    --ws-pricing-box: #f7f5f0;             /* box of value pairs */
    --ws-pricing-switch-bg: #f0ede6;       /* background of the switches */
    --ws-pricing-button-border: #d9d4c8;
    --ws-pricing-head-bg: #fffdf9;         /* matrix head, featured row */
    --ws-pricing-zebra: #fefdfb;
    --ws-pricing-dash: #c9c4b9;
    --ws-pricing-radius: 18px;
    --ws-pricing-radius-small: 11px;
    --ws-pricing-gap: 1.5rem;

    color: var(--ws-pricing-text);

    /* Query container for the container queries below. The layouts have to
       follow the width of their content column, not of the window - on a page
       with a side menu that differs by several hundred pixels. */
    container-type: inline-size;
    container-name: ws-pricing;
}

.ws-pricing *,
.ws-pricing *::before,
.ws-pricing *::after { box-sizing: border-box; }

.ws-pricing__sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Intro --------------------------------------------------------------- */

.ws-pricing__intro {
    max-width: 62ch;
    margin: 0 0 1.25rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ws-pricing-text-muted);
}

.ws-pricing__intro > :first-child { margin-top: 0; }
.ws-pricing__intro > :last-child { margin-bottom: 0; }

/* --- Switches ------------------------------------------------------------ */

.ws-pricing__switches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
    margin-bottom: var(--ws-pricing-gap);
}

.ws-pricing__switch-group {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.ws-pricing__switch-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ws-pricing-text-muted);
}

.ws-pricing__segments {
    display: flex;
    padding: 3px;
    border: 1px solid var(--ws-pricing-line);
    border-radius: 10px;
    background: var(--ws-pricing-switch-bg);
}

.ws-pricing__segment {
    height: 34px;
    padding: 0 1rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ws-pricing-text-subtle);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.ws-pricing__segment.is-active {
    background: var(--ws-pricing-surface);
    box-shadow: 0 1px 2px rgba(28, 27, 25, .1);
    font-weight: 600;
    color: var(--ws-pricing-text);
}

/* --- Price --------------------------------------------------------------- */

.ws-pricing__price-block {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ws-pricing__price { display: none; }
.ws-pricing__price.is-active {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}

.ws-pricing__symbol {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ws-pricing-text-muted);
}

/* After the amount: closer than the flex gap, otherwise the symbol reads like
   a separate word between amount and unit. */
.ws-pricing__symbol--after { margin-left: -.2rem; }

.ws-pricing__amount {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ws-pricing__unit {
    font-size: .9375rem;
    color: var(--ws-pricing-text-muted);
}

.ws-pricing__on-request {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.ws-pricing__price-note {
    font-size: .75rem;
    color: var(--ws-pricing-text-subtle);
}

/* --- Button -------------------------------------------------------------- */

.ws-pricing__button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 1.4rem;
    border: 1.5px solid var(--ws-pricing-button-border);
    border-radius: var(--ws-pricing-radius-small);
    background: var(--ws-pricing-surface);
    color: var(--ws-pricing-text);
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.ws-pricing__button:hover,
.ws-pricing__button:focus-visible {
    border-color: var(--ws-pricing-accent);
    color: var(--ws-pricing-text);
    text-decoration: none;
}

.ws-pricing__button--primary {
    border-color: var(--ws-pricing-accent);
    background: var(--ws-pricing-accent);
    color: var(--ws-pricing-accent-contrast);
}

.ws-pricing__button--primary:hover,
.ws-pricing__button--primary:focus-visible {
    background: var(--ws-pricing-text);
    border-color: var(--ws-pricing-text);
    color: var(--ws-pricing-accent-contrast);
}

/* --- Cards --------------------------------------------------------------- */

.ws-pricing__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--ws-pricing-gap);
    align-items: stretch;
}

/* There used to be a fixed column count from 62em on. That broke as soon as
   the content area was narrower than the window: four plans in a 600px column
   became 150px wide. What matters is the width of the container, not of the
   window - so only the minimum width above counts, and the number of columns
   follows from it.

   One exception is still needed: with four plans, auto-fit leaves three cards
   side by side and one alone below in a medium-wide column. Two by two reads
   better than three plus one. Again the container is asked, not the window. */
@container ws-pricing (max-width: 64rem) {
    .ws-pricing__cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container ws-pricing (max-width: 32rem) {
    .ws-pricing__cards--four { grid-template-columns: minmax(0, 1fr); }
}

/* Five plans: in one row as long as every card keeps its minimum width
   (5 x 15rem + 4 gaps). Below that three on top and two centred underneath
   instead of four plus one - hence flex instead of grid, only flex can centre
   the last row. Below 48rem two per row, below 32rem one. */
@container ws-pricing (max-width: 81rem) {
    .ws-pricing__cards--five {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .ws-pricing__cards--five > .ws-pricing__card {
        flex: 0 0 calc((100% - 2 * var(--ws-pricing-gap)) / 3);
    }
}

@container ws-pricing (max-width: 48rem) {
    .ws-pricing__cards--five > .ws-pricing__card {
        flex-basis: calc((100% - var(--ws-pricing-gap)) / 2);
    }
}

@container ws-pricing (max-width: 32rem) {
    .ws-pricing__cards--five > .ws-pricing__card { flex-basis: 100%; }
}


.ws-pricing__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: 1.75rem;
    border: 1px solid var(--ws-pricing-line);
    border-radius: var(--ws-pricing-radius);
    background: var(--ws-pricing-surface);

    /* A query container of its own: five plans in one content column make
       every card about 240px narrow. What wraps then depends on the card. */
    container-type: inline-size;
    container-name: ws-pricing-card;
}

/* Narrow card: value pairs stack instead of sitting side by side in one row
   and stacked in the next - depending on whether the value happens to fit.
   The amount gets smaller so that "1,499 per month" stays on one line. */
@container ws-pricing-card (max-width: 17rem) {
    .ws-pricing__card .ws-pricing__pair { flex-direction: column; align-items: flex-start; gap: 0; }
    .ws-pricing__card .ws-pricing__pair-label { flex: none; }
    .ws-pricing__card .ws-pricing__amount { font-size: 2rem; }
}

.ws-pricing__card--featured {
    border: 1.5px solid var(--ws-pricing-accent);
    box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--ws-pricing-accent) 60%, transparent);
}

/* The badge carries editor text of any length. In a narrow matrix column
   "For agencies" wraps onto two lines - with a fixed height the second line
   would run over the heading below. Hence a minimum height instead of a
   height, and a radius that stays a pill on two lines as well. */
.ws-pricing__badge {
    position: absolute;
    top: -13px;
    left: 1.75rem;
    min-height: 26px;
    padding: .3rem .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ws-pricing-accent);
    color: var(--ws-pricing-accent-contrast);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.ws-pricing__head { display: flex; flex-direction: column; gap: .25rem; }

.ws-pricing__eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ws-pricing-accent);
}

.ws-pricing__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ws-pricing__subtitle {
    margin: 0;
    font-size: .875rem;
    color: var(--ws-pricing-text-muted);
}

.ws-pricing__text {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ws-pricing-text-muted);
    /* Without hyphenation long compound words break in the middle in narrow
       cards. Needs a lang attribute on the document. */
    hyphens: auto;
    overflow-wrap: break-word;
}

.ws-pricing__text > p:last-child { margin-bottom: 0; }

.ws-pricing__features {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.ws-pricing__footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.125rem;
    border-top: 1px solid var(--ws-pricing-line-soft);
}

/* --- Feature groups ------------------------------------------------------ */

.ws-pricing__group-title {
    margin-bottom: .6rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ws-pricing-text-subtle);
}

.ws-pricing__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.ws-pricing__list-item {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.45;
}

.ws-pricing__check {
    flex: none;
    margin-top: 3px;
    color: var(--ws-pricing-accent);
}

.ws-pricing__group--pairs {
    padding: 1rem 1.125rem;
    border-radius: 12px;
    background: var(--ws-pricing-box);
}

/* Value pairs: label left, value right. When space runs out the value moves to
   the next line instead of running out of the card - long values such as
   "1 project / 1 live domain" are common in real tables. */
.ws-pricing__pair {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .2rem .875rem;
    padding: .25rem 0;
    font-size: .8125rem;
}

.ws-pricing__pair-label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ws-pricing-text-muted);
}

.ws-pricing__pair-value {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ws-pricing__card--featured .ws-pricing__group--pairs { background: var(--ws-pricing-accent-soft); }

/* --- Comparison table ---------------------------------------------------- */

.ws-pricing__matrix {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid var(--ws-pricing-line);
    border-radius: var(--ws-pricing-radius);
    background: var(--ws-pricing-surface);
    /* clip instead of hidden: hidden turns the table into a scroll container,
       and the sticky feature column (see narrow screens) then sticks to the
       table instead of the scroll wrapper - it scrolls away. */
    overflow: clip;
}

.ws-pricing__matrix th,
.ws-pricing__matrix td {
    padding: .8rem 1rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--ws-pricing-line-soft);
    font-size: .875rem;
    font-weight: 400;
}

.ws-pricing__matrix thead th {
    vertical-align: bottom;
    border-bottom: 1px solid var(--ws-pricing-line);
    background: var(--ws-pricing-head-bg);
}

/* Row headers are left-aligned. The selector is more specific than the base
   rule for th and td above, otherwise its centring would win. */
.ws-pricing__matrix .ws-pricing__matrix-corner,
.ws-pricing__matrix .ws-pricing__matrix-label {
    text-align: left;
    font-weight: 400;
    color: var(--ws-pricing-text);
}

/* The head of a plan column is a table cell - it must not become a flex
   container itself, otherwise the row layout falls apart and the columns
   stack. Its children stack as blocks anyway. */
.ws-pricing__matrix-head > * { display: block; }
/* Top-aligned: if unit or price note wraps in one column, the plan names
   would otherwise sit at different heights. */
.ws-pricing__matrix .ws-pricing__matrix-head { vertical-align: top; }
.ws-pricing__matrix-head > .ws-pricing__name { margin-bottom: .45rem; }
.ws-pricing__matrix-head > .ws-pricing__badge {
    position: static;
    width: fit-content;
    margin: 0 auto .5rem;
}
.ws-pricing__matrix-head .ws-pricing__price-block { align-items: center; margin-bottom: .6rem; }
.ws-pricing__matrix-head .ws-pricing__price.is-active { justify-content: center; }
.ws-pricing__matrix-head .ws-pricing__amount { font-size: 1.625rem; }
/* The rule "> * { display: block }" above also hits the button and takes away
   the flex that centres its label vertically. */
.ws-pricing__matrix-head .ws-pricing__button { display: flex; height: 38px; font-size: .8125rem; }

.ws-pricing__matrix-group th {
    text-align: left;
    padding: .9rem 1rem .75rem;
    background: var(--ws-pricing-surface-alt);
    border-top: 1px solid var(--ws-pricing-line);
    border-bottom: 1px solid var(--ws-pricing-line);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ws-pricing-text-muted);
}

.ws-pricing__matrix-row:nth-of-type(even) { background: var(--ws-pricing-zebra); }
.ws-pricing__matrix .is-featured { background: var(--ws-pricing-accent-soft); }
.ws-pricing__matrix thead .is-featured { box-shadow: inset 0 3px 0 var(--ws-pricing-accent); }

/* The feature column carries the text, the plan columns share the rest. */
.ws-pricing__matrix .ws-pricing__matrix-corner,
.ws-pricing__matrix .ws-pricing__matrix-label { width: 34%; }

.ws-pricing__dash { color: var(--ws-pricing-dash); }
.ws-pricing__matrix-value { font-weight: 600; }
.ws-pricing__footnote {
    margin-left: .3rem;
    font-size: .6875rem;
    color: var(--ws-pricing-text-subtle);
}

.ws-pricing__matrix-scroll {
    /* relative: the screen-reader texts in the cells are positioned
       absolutely. Without a positioned ancestor inside the wrapper they refer
       to the page, escape the scroll area and make the whole page scroll
       sideways on phones. */
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ws-pricing-radius);
}

.ws-pricing__matrix-scroll:focus-visible {
    outline: 2px solid var(--ws-pricing-accent);
    outline-offset: 2px;
}

/* --- Compact rows -------------------------------------------------------- */

.ws-pricing__rows {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.ws-pricing__row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ws-pricing-line);
    border-radius: 14px;
    background: var(--ws-pricing-surface);
}

.ws-pricing__row--featured {
    border: 1.5px solid var(--ws-pricing-accent);
    background: var(--ws-pricing-head-bg);
}

.ws-pricing__row .ws-pricing__head { flex: 1 1 13rem; }
/* The price block may shrink. Otherwise a long note such as "No VAT, as no
   fee is charged." eats the width of the key figures next to it, and their
   labels break in the middle of a word. */
.ws-pricing__row .ws-pricing__price-block {
    flex: 0 1 auto;
    max-width: 11.5rem;
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
}
.ws-pricing__row .ws-pricing__amount { font-size: 1.75rem; }
.ws-pricing__row .ws-pricing__button { flex: none; height: 40px; }
/* On cards the footer has a divider to the content above. In a row it sits to
   the right of the content - there the line hung loose above the button. */
.ws-pricing__row .ws-pricing__footer { margin-top: 0; padding-top: 0; border-top: 0; }
.ws-pricing__row .ws-pricing__badge { position: static; margin-bottom: .35rem; align-self: flex-start; }

/* The key figures share one grid instead of three separate columns: labels in
   row one, values in row two. Otherwise a two-line label pushes its value
   down and the row frays. The figure itself has no box (display: contents). */
.ws-pricing__figures {
    flex: 2 1 20rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-content: center;
    gap: .2rem 1.25rem;
}

.ws-pricing__figure { display: contents; }

.ws-pricing__figure-label {
    grid-row: 1;
    min-width: 0;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.3;
    /* Tighter tracking than the other micro headings, and hyphenation: long
       words would otherwise fit no third of the row and break hard - with a
       single letter on line three. */
    letter-spacing: .06em;
    text-transform: uppercase;
    hyphens: auto;
    overflow-wrap: break-word;
    color: var(--ws-pricing-text-faint);
}

.ws-pricing__figure-value {
    grid-row: 2;
    min-width: 0;
    align-self: start;
    font-size: .90625rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* --- Expandable details -------------------------------------------------- */

.ws-pricing__details {
    border-top: 1px solid var(--ws-pricing-line-soft);
}

.ws-pricing__card > .ws-pricing__details {
    margin: 0 -1.75rem -1.75rem;
    padding: 0 1.75rem;
}

.ws-pricing__details-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.ws-pricing__details-summary::-webkit-details-marker { display: none; }

.ws-pricing__chevron {
    flex: none;
    color: var(--ws-pricing-text-muted);
    transition: transform .2s ease;
}

.ws-pricing__details[open] > .ws-pricing__details-summary .ws-pricing__chevron { transform: rotate(180deg); }
.ws-pricing__details[open] > .ws-pricing__details-summary { color: var(--ws-pricing-accent); }

.ws-pricing__details-body { padding: .25rem 0 1.5rem; }

/* Equal card heights while everything is closed. Once a plan opens, the grid
   would stretch every other card to its height - with large empty areas above
   their prices. Then every card keeps its own height. */
.ws-pricing__cards--accordion:has(.ws-pricing__details[open]) { align-items: start; }

.ws-pricing__details--matrix {
    margin-top: var(--ws-pricing-gap);
    border: 1px solid var(--ws-pricing-line);
    border-radius: 14px;
    background: var(--ws-pricing-surface);
}

.ws-pricing__details--matrix > .ws-pricing__details-summary { padding: 1.125rem 1.5rem; }
.ws-pricing__details--matrix .ws-pricing__details-body { padding: 0 1.5rem 1.5rem; }
.ws-pricing__matrix-attached { margin-top: var(--ws-pricing-gap); }

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 47.99em) {
    .ws-pricing__switches { gap: 1rem; }
    /* On narrow screens the key figures are separate blocks again: with two
       columns and three figures the fixed row grid above would create an
       unwanted third column. */
    .ws-pricing__figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: .75rem 1.25rem;
    }

    .ws-pricing__figure { display: flex; flex-direction: column; gap: .15rem; }
    .ws-pricing__figure-label,
    .ws-pricing__figure-value { grid-row: auto; }
    .ws-pricing__row .ws-pricing__price-block { margin-left: 0; text-align: left; align-items: flex-start; }
    .ws-pricing__row .ws-pricing__button { width: 100%; }

    /* The matrix stays a table and scrolls sideways. The wrapper scrolls, not
       the table itself - a table set to display:block loses its columns. */
    .ws-pricing__matrix {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }

    .ws-pricing__matrix th,
    .ws-pricing__matrix td { white-space: nowrap; }

    /* A long price note in the column head ("More packages of twelve
       resources for 99 euros a month") would stretch every column beyond
       300px without wrapping - five plans made a 1,700px table. It wraps, the
       column follows name and amount. */
    .ws-pricing__matrix .ws-pricing__matrix-head {
        width: 9rem;
        min-width: 9rem;
    }

    .ws-pricing__matrix .ws-pricing__matrix-head .ws-pricing__price-note { white-space: normal; }
    .ws-pricing__matrix .ws-pricing__matrix-head .ws-pricing__price.is-active { flex-wrap: nowrap; }

    .ws-pricing__matrix .ws-pricing__matrix-corner,
    .ws-pricing__matrix .ws-pricing__matrix-label {
        position: sticky;
        left: 0;
        /* Above the plan head cells: some of their children are positioned
           and would otherwise paint through the sticky corner. */
        z-index: 3;
        width: auto;
        min-width: 10rem;
        max-width: 12rem;
        background: var(--ws-pricing-surface);
        white-space: normal;
        box-shadow: 1px 0 0 var(--ws-pricing-line-soft);
    }

    .ws-pricing__matrix .ws-pricing__matrix-row:nth-of-type(even) .ws-pricing__matrix-label { background: var(--ws-pricing-zebra); }
    .ws-pricing__matrix-group th { position: static; }

    /* The group row spans all columns and scrolls away when swiping - title
       included. The title itself therefore stays on the left. */
    .ws-pricing__matrix-group-title {
        position: sticky;
        left: 1rem;
    }
}