/* GENERATED by tools/make-faq.py from index.html. Do not edit here:
   edit the home page and run the script again. */

.faq-list {
    --accent-mark: #5D8FA2;
    --faq-gap: 14px;
    --faq-mark: 16px;
}

/* flex:1 + space-between rather than a hand-picked row-gap: the list
           then spans exactly from the first question down to the block's own
           bottom edge, which is the same line the Discount row ends on in the
           column opposite, and the spacing between questions is by definition
           equal. Picking a fixed gap instead would put the last question on
           that line only at one particular question count and font size. */
        .faq-list {
            display: flex; flex-direction: column;
            flex: 1;
            justify-content: space-between;
}

/* No rules between the rows. The list is held together by rhythm and
           the marker column alone; hairlines made eight short questions read
           as a table of eight things to get through. */
        .faq-item { border: 0;
}

.faq-item h3 { all: unset; display: block;
}

/* Marker first, then the question, both packed to the left edge.
           The DOM stays [question, marker] because the FAQPage schema reads
           the question from the row's first child, so the visual order is
           flipped with row-reverse instead of by moving nodes: in a reversed
           row, flex-end is the left edge. */
        /* Question text and colour match the Offer screen's bullet list
           (.qo-item): same family, small-caps treatment and muted colour.
           Only the question is restyled; .faq-a below is untouched. */
        .faq-q {
            display: flex; align-items: center;
            flex-direction: row-reverse; justify-content: flex-end;
            gap: var(--faq-gap);
            width: 100%; padding: 7px 0;
            background: none; border: 0; cursor: pointer; text-align: left;
            font-family: 'SF Pro Text',-apple-system,sans-serif;
            /* 600, was 400, and 21px leading, was 19. Taken from the question
               style on the newer offer pages: at 400 these read as captions
               next to a form whose labels are the same size, and the block
               opposite them is a bold section title. The family, the size,
               the small-caps and the --m3 colour were already identical, so
               the weight and the leading are the whole difference. */
            font-size: 16px; font-weight: 600; line-height: 21px;
            letter-spacing: 0; font-variant: all-small-caps;
            color: var(--m3);
            transition: color .2s;
}

.faq-q:hover { color: var(--t1);
}

/* The open row holds the darker colour instead of falling back to
           --m3 the moment the pointer leaves it, so which question is open
           stays readable while the answer below is being read. */
        .is-open .faq-q { color: var(--t1);
}

.faq-q:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 4px;
}

/* Plus that loses its vertical bar when the row opens: two pseudo-bars
           rather than a glyph, so it stays crisp at any zoom and needs no font.
           One number drives the whole marker; the bars are sized and centred
           off it, so changing the size cannot leave them off-centre. */
        /* Same accent the Offer bullets use. The checkmark in those bullets is
           an SVG file (checkmark.svg) with the colour baked into its fill, so
           there was no token to reuse — --accent-mark is that literal lifted
           into a variable, and the two must be changed together. */
        .faq-mark {
            position: relative;
            flex: none; width: var(--faq-mark); height: var(--faq-mark);
            color: var(--accent-mark);
}

/* Fully rounded ends: on a 2px bar a 1px radius is a semicircle at each
           end, matching the round terminals of the bullet checkmark. */
        .faq-mark::before, .faq-mark::after {
            content: ''; position: absolute; left: 0; top: calc(50% - 1px);
            width: 100%; height: 2px; border-radius: 1px;
            background: currentColor;
            transition: transform .3s cubic-bezier(.22,.61,.36,1);
}

.faq-mark::after { transform: rotate(90deg);
}

.is-open .faq-mark::after { transform: rotate(0deg);
}

/* 0fr → 1fr animates a height the content decides, which max-height
           cannot do without guessing a number that is wrong for some answer. */
        /* Links inside the answers in the site's ink, underlined, so they read
           as part of the text and still show as links. */
        .faq-a a { color: var(--t1); text-decoration: underline; text-underline-offset: 2px;
}

.faq-a a:hover { color: var(--m2);
}

.faq-a {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .3s cubic-bezier(.22,.61,.36,1);
}

.faq-a > div { overflow: hidden;
}

.is-open .faq-a { grid-template-rows: 1fr;
}

/* Indented to start exactly under the question text rather than under
           the marker, so the marker column stays clean the whole way down.
           Built from the same two variables as the row, so the answer and the
           question above it cannot drift apart. */
        .faq-a p {
            font-family: 'Roboto', sans-serif;
            font-size: 13px; font-weight: 400; line-height: 20px;
            color: var(--m1);
            padding: 0 28px 16px calc(var(--faq-mark) + var(--faq-gap));
}

.faq-price-list {
            margin: -4px 0 18px calc(var(--faq-mark) + var(--faq-gap));
            padding: 0;
            list-style: none;
            display: grid;
            /* Read down the left column, then down the right one (Viktor,
               2026-09-17): five rows, filled column by column, so Logo and
               Logo + Brand Identity sit together. Content-sized columns and
               no wrapping: one service is one line. */
            grid-auto-flow: column;
            grid-template-rows: repeat(5, auto);
            grid-template-columns: max-content max-content;
            column-gap: 16px;
            row-gap: 4px;
            white-space: nowrap;
            font-family: 'Roboto', sans-serif;
            font-size: 11px;
            line-height: 16px;
            color: var(--m1);
}

.faq-price-list strong { color: var(--t1); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
.faq-a, .faq-mark::before, .faq-mark::after { transition: none;
}
}

@media (max-width:1024px) {
.faq-price-list { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; white-space: normal;
}
/* The list stretches with space-between on desktop, so the step
               between questions was leftover height (68px) rather than a
               chosen gap. Set explicitly here and cut by a third. */
            /* Centred in whatever height is left between the heading and the
               socials row, rather than hung off the top of it. The list is a
               fixed stack of eight rows with a fixed gap, so flex:1 only gives
               it the free space to be centred in; it never stretches the rows. */
            .contacts-faq .faq-list {
                flex: 1 1 auto;
                /* One step of the section's 24px rhythm between the tagline and
                   the first question; the rows started flush under it.
                   32, one step more, so the first question stands clear of
                   the tagline. */
                margin-top: 32px;
                /* flex-end, not center. The list keeps growing into half the
                   leftover height, but that half now sits ABOVE the rows
                   instead of being split around them, which leaves the whole
                   gap under the last question to the socials row below and
                   still starts the rows exactly where centring used to. */
                justify-content: flex-end;
                gap: 14px;
}
}