/* QTES additions on top of base.css. Values follow the base scale (rem, card radius 11px, card shadow). */

/* Header: Inter's line box is taller than the reference font's (21 against 17 px at 17.1 px), so the labels sat
   1–2 px low and the Login pill was 4 px taller. The line moves up (the header keeps its height) and the pill gets
   the padding that makes it as tall as the reference's pill. */
.header-primary { padding-bottom: calc(0.5em + 1.3px); padding-top: calc(0.7em - 1.3px); }
.header-primary a.w-action { padding-bottom: 0.4em; padding-top: 0.37em; }
@media screen and (max-width: 480px) { .header-primary a.w-action { padding-bottom: 0.42em; padding-top: 0.43em; } }

/* Buttons: the text sits in the middle. The reference nudges its labels down for its own font; Inter needs no nudge
   (pill buttons) and its capitals need the padding a little lower (a.action) */
.download-card__button-label { transform: none; }
.action { padding-bottom: 0.55em; padding-top: 0.6em; }

/* Mono numbers keep the mono font's own spacing */
.page-template-template-how-to-writer-top .how-to-article-number { letter-spacing: 0; }

/* FAQ: the row opens on hover like the How To rows, and shows text instead of a picture */
.page-template-template-how-to-writer-top .how-to-article-banner-link .qtes-answer {
  color: rgb(34, 34, 34);
  display: grid;
  font-size: var(--how-to-body-text);
  gap: 0.6em;
  line-height: 1.6;
  max-width: 41rem;
  padding: 0.3rem 1rem 1.6rem 3.3rem;
}
.page-template-template-how-to-writer-top .how-to-article-banner-link .qtes-answer p { font-size: inherit; line-height: inherit; margin: 0; }
/* an open row is as tall as its answer (the reference opens to a fixed 400 px, room for its picture); browsers that
   can animate to auto (interpolate-size) keep the reference's opening animation, the others open at once */
@media (min-width: 768px) {
  .page-template-template-how-to-writer-top { interpolate-size: allow-keywords; }
  .page-template-template-how-to-writer-top .how-to-article-banner-link:hover { height: auto; }
}
@media (max-width: 767px) {
  .page-template-template-how-to-writer-top .how-to-article-banner-link .qtes-answer { padding: 0 1rem 1rem; }
}

/* Screenshots inside the macOS frame get the same corners as the videos there */
@media (min-width: 512px) { .teasers .desktop img { border-radius: 13px; } }

/* Subscribe: our own icons in the slots of the platform icons */
.page-template-template-account-checkout-paywall .paywall__ace .paywall__feature-label--notes::before { background-image: url("/img/icons/notes.svg"); height: 0.9rem; width: 0.9rem; }
.page-template-template-account-checkout-paywall .paywall__ace .paywall__feature-label--rules::before { background-image: url("/img/icons/rules.svg"); height: 0.9rem; width: 0.9rem; }
.page-template-template-account-checkout-paywall .paywall__ace .paywall__feature-label--letter::before { background-image: url("/img/icons/letter.svg"); height: 0.9rem; width: 0.9rem; }

/* FAQ article: "Question 1" over the title is a label, not a second main heading, with the look it had as the
   reference's first h1 (blue, bold, 2rem above); 14 px or larger on phones (0.8rem is 12.8 px there) */
.page-template-template-how-to-101-article main .qtes-faq-part { color: var(--q-blue); font-family: inherit; font-size: max(14px, 0.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 110%; margin: 0; max-width: none; padding: 2rem 0 0; text-align: left; }
.page-template-template-how-to-101-article main .qtes-faq-part + h1 { font-size: 2rem; margin-bottom: 1.5rem; margin-top: 0.2rem; padding-left: 0; text-align: left; }

/* text for screen readers and search engines only (the Legal overview's main heading) */
.qtes-hidden { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/* FAQ article: our <video> sits where ia.net has the YouTube iframe, same box */
.video video { border: none; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; background: #000; object-fit: cover; }

/* FAQ: "Get in Contact" is longer than ia.net's "Start Course"; the button grows to fit its text */
.page-template-template-how-to-writer-top .blurb a.action { box-sizing: content-box; min-width: max-content; width: fit-content; }

/* FAQ videos: our <video> sits where ia.net has the YouTube iframe of the gallery, same box */
.page-template-template-how-to-writer-top .how-to-video-feature .video-embed video { background: #000; border: 0; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }

/* ---- Content of 6 October 2026 ---- */

/* A section look used twice on a page (ids "<look>-<n>", see Section.astro): the reference's rules for that look.
   :is(…, #qtes-none) keeps the id weight of the original selectors. */
@media (min-width: 512px) { .writer-landing.markdown-landing.page :is([id^="plain-text-"], #qtes-none) .markdown-section__media > .hideandseekdesktop { border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 10px 0px, rgba(0, 0, 0, 0.05) 10px 10px 20px 0px, rgba(0, 0, 0, 0.05) 20px 20px 40px 0px, rgba(0, 0, 0, 0.05) 40px 40px 80px 0px; } }
@media (min-width: 768px) { .writer-landing.markdown-landing.page :is([id^="plain-text-"], #qtes-none) .markdown-section__media > .hideandseekdesktop { border-radius: 10px; } }
@media (min-width: 1040px) { .writer-landing.markdown-landing.page :is([id^="plain-text-"], #qtes-none) .markdown-section__media > .hideandseekdesktop { border-radius: 12px; } }
.writer-landing.markdown-landing.page :is([id^="authorship-"], #qtes-none) { background: url("/img/stars.webp") center top / min(1024px, -40px + 100vw) auto repeat rgb(0, 0, 0); }
.writer-landing.markdown-landing.page :is([id^="authorship-"], #qtes-none) .markdown-section__media-item.video-wrapper { aspect-ratio: 16 / 9; margin: 0px auto; max-width: 100%; }
.writer-landing.markdown-landing.page :is([id^="authorship-"], #qtes-none) .markdown-section__media-item.video-wrapper > video { height: 100%; }
.writer-landing.markdown-landing.page :is([id^="authorship-"], #qtes-none) .markdown-section__media-item + .markdown-section__media-item { margin: clamp(88px, 9vw, 144px) auto 0px; }
.writer-landing.markdown-landing.page :is([id^="authorship-"], #qtes-none) .iphone.mobile, .writer-landing.markdown-landing.page :is([id^="editing-tools-"], #qtes-none) .iphone.mobile { border-radius: 37px 37px 0px 0px; margin-bottom: -5em; }
.writer-landing.markdown-landing.page :is([id^="editing-tools-"], #qtes-none) .hideandseekdesktop video { border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 44px; overflow: hidden; }
.writer-landing.markdown-landing.page :is([id^="plain-text-"], #qtes-none) .markdown-section__media img { border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 44px; }
.writer-landing.markdown-landing.page :is([id^="plain-text-"], #qtes-none) .markdown-section__copy { margin-bottom: 2rem; margin-top: clamp(48px, 5vw, 72px); }
.writer-landing.markdown-landing.page :is([id^="reviews-"], #qtes-none) { padding-top: 0px; }
.writer-landing.markdown-landing.page :is([id^="reviews-"], #qtes-none) .markdown-section__before { margin: 0px; width: 100%; }
.writer-landing.markdown-landing.page :is([id^="reviews-"], #qtes-none) .markdown-section__before > img { display: block; margin: 0px; max-width: none; width: 100%; }
.writer-landing.markdown-landing.page :is([id^="reviews-"], #qtes-none) .markdown-section__heading { margin: 0px auto; max-width: 46rem; padding-top: clamp(64px, 7vw, 112px); }
.writer-landing.markdown-landing.page :is([id^="reviews-"], #qtes-none) .markdown-section__heading > p { margin-top: 20px; max-width: 34em; }
.writer-landing.markdown-landing.page :is([id^="reviews-"], #qtes-none) .markdown-section__testimonials { margin-top: clamp(56px, 6vw, 88px); }
.writer-landing.markdown-landing.page :is([id^="reviews-"], #qtes-none) .markdown-section__testimonials img.avatar { filter: none; }
.writer-landing.markdown-landing.page :is([id^="testimonials-"], #qtes-none) .markdown-section__heading { margin: 0px auto; }
.writer-landing.markdown-landing.page :is([id^="testimonials-"], #qtes-none) .markdown-section__heading > p { margin-top: 20px; max-width: 32em; }

/* Buttons under the home hero and feature sections: the dark band's buttons, centred like there;
   light buttons on the dark (darkgrey) sections, as in the dark band */
.writer-landing.markdown-landing.page #hero .markdown-section__heading:has(+ .download-card) { margin-bottom: clamp(24px, 3vw, 40px); }
.writer-landing.markdown-landing.page #hero > .container > .download-card { grid-column: 1 / -1; justify-self: center; margin: 0 auto clamp(40px, 5vw, 64px); max-width: 32rem; }
.writer-landing.markdown-landing.page .markdown-section--feature .download-card { justify-self: center; margin: clamp(40px, 5vw, 64px) auto 0; max-width: 32rem; }
.writer-landing.markdown-landing.page .markdown-section--feature.darkgrey .download-card { --download-card-button-background: rgb(247, 247, 247); --download-card-button-color: rgb(34, 34, 34); --download-card-button-icon-filter: none; color: rgb(240, 240, 240); }
/* Columns of text (md_feature copy) in a section without a picture follow the heading at the heading's own spacing */
.writer-landing.markdown-landing.page .markdown-section__media:not(:has(*)) + .markdown-section__copy { margin-top: 0; padding-top: 0; }
/* Neighbouring sections stay apart: a light section that follows another light one is white (the reference's other
   light tone, its cards). The home page's figures are a white band of their own; on text pages the figures band
   belongs to the title above it and stays grey. */
.writer-landing.markdown-landing.page .qtes-figures-band.lightgrey, .writer-landing.markdown-landing.page .markdown-section.lightgrey:not(.qtes-figures-band) + .markdown-section.lightgrey:not(.qtes-figures-band) { background-color: rgb(255, 255, 255); }
/* The sublines are full paragraphs, not the reference's one-liners: the reference's type size, one readable width
   (about 52 characters a line) and room under the titles */
.writer-landing.markdown-landing.page .markdown-section__heading > p { margin-top: 16px; max-width: 34rem; text-wrap: pretty; }
.writer-landing.markdown-landing.page #hero .markdown-section__heading > h1 { margin-bottom: clamp(24px, 2vw, 32px); }
.writer-landing.markdown-landing.page #hero .markdown-section__heading > p { margin-top: 0; }

/* Text pages: section titles look like the reference's About Us subheads (its h4) and stay h2 for the outline;
   under them 0.75em (16 to 22 px) instead of the reference's 0.25em, which let a title run into its text
   (decided 9 October 2026). Careers keeps its reference's large titles, with the same room under them. */
.page-template-template-about :is(main > .container:is(.qtes-section, .qtes-table-block, .qtes-timeline), .qtes-figures) > h2 { font-size: 22.05px; letter-spacing: normal; line-height: 140%; margin: 2em 0 0.75em; text-align: left; }
.qtes-careers main > .container.qtes-section > h2 { margin-bottom: max(16px, 0.4em); }
/* column blocks under a title: the same room as text (the grid's own 2rem padding left them 70 px below it) */
.container.qtes-section > h2 + .qtes-columns { margin-top: 0; padding-top: 0; }
@media screen and (min-width: 560px) { .page-template-template-about :is(main > .container:is(.qtes-section, .qtes-table-block, .qtes-timeline), .qtes-figures) > h2 { font-size: calc(18.8477px + 1.00071vw); } }
@media screen and (min-width: 1024px) { .page-template-template-about :is(main > .container:is(.qtes-section, .qtes-table-block, .qtes-timeline), .qtes-figures) > h2 { font-size: 29.095px; } }
.page-template-template-about main > .container.qtes-section > h2 + p { margin-bottom: 0; margin-top: 0; }

/* Running text keeps a readable measure: about 63 characters a line (760 px at the 23 px body text; the reference's
   About Us runs its short text across 1024 px). Headings, columns side by side, tables, figures and charts keep
   the full width (decided 9 October 2026) */
:is(.page-template-template-about, .qtes-careers) main > .container > :is(p, ul, ol, blockquote):not(.qtes-actions),
.qtes-columns p, .qtes-role__body > :is(p, ul, ol), .container.article.legal > :is(p, ul, ol) { margin-left: 0; margin-right: 0; max-width: 33em; }

/* Careers: the text size of the reference's Careers page (.text), not the About Us lead */
.qtes-careers .qtes-hero > .qtes-lead { font-size: 16.8px; line-height: 155%; }
@media screen and (min-width: 560px) { .qtes-careers .qtes-hero > .qtes-lead { font-size: calc(13.9818px + 0.880682vw); } }
@media screen and (min-width: 1024px) { .qtes-careers .qtes-hero > .qtes-lead { font-size: 23px; line-height: 165%; } }

/* News: room between the page title and the first article band (the reference's blog starts with the band);
   a band without a picture ends after its button (the reference's band is 36em tall, room for its picture) */
.container.qtes-hero + .container.home-contents { margin-top: clamp(40px, 5vw, 72px); }
.home-contents > section:is(#news-hero, #writer-hero):not(:has(.featured-image)) { height: auto; padding-bottom: clamp(48px, 5vw, 72px); }
/* News article: the reference's hero always ends in its picture; without one it ends as far below the
   Previous/Next line as the date sits below its top (1em of the hero + 2em of the line's size) */
.article .hero-section:not(:has(> .featured-image)) { padding-bottom: 1em; }
.article .hero-section:not(:has(> .featured-image)) > .time-cat { margin-bottom: 2em; }

/* Buttons in the content look like the reference's content buttons (its download-card buttons: written as typed,
   larger) and stay orange; the small pill in capitals is the header's Login only (decided 9 October 2026) */
main a.action { border-radius: 999px; font-size: 0.95rem; letter-spacing: 0; line-height: 1; min-width: 6rem; padding: 1.05rem 1.1rem 1rem; text-transform: none; width: fit-content; }

/* Text pages: buttons (a.action) in a row */
.container.qtes-section > p:first-child { margin-top: 1em; }
/* with the buttons' own 0.5em on top, wrapped rows sit 0.9rem apart as in the reference's download card */
.qtes-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.qtes-actions a.action { margin-left: 0; margin-right: 0; min-width: max-content; }

/* Text pages: blocks in pairs (simple-feature-grid), about 480 px wide, one column below 1024 px; a block's title
   is its own heading over its text, in the size of the page's running text (decided 9 October 2026) */
.qtes-columns { column-gap: clamp(32px, 4vw, 56px); grid-template-columns: 1fr; margin-top: 1.2em; row-gap: 1.6em; }
.container.qtes-hero, .page-template-template-about main > .container:first-child:has(> h1:first-child) { margin-top: 2em; }
@media (min-width: 1024px) { .qtes-columns { grid-template-columns: repeat(var(--qtes-cols), 1fr); } }
.qtes-columns h4 { font-size: 16.8px; line-height: 155%; margin: 0 0 0.4em; padding-top: 0; }
@media screen and (min-width: 560px) { .qtes-columns h4 { font-size: calc(13.9818px + 0.880682vw); } }
@media screen and (min-width: 1024px) { .qtes-columns h4 { font-size: 23px; line-height: 165%; } }

/* Figures band: large figures with a one-line caption (type scale of the reference: headings, .action size) */
.qtes-figures__row { display: grid; gap: 1.6em clamp(20px, 3vw, 40px); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 2rem 0 0; padding: 0; }
@media (min-width: 768px) { .qtes-figures__row { grid-template-columns: repeat(min(var(--qtes-n), 3), 1fr); } }
@media (min-width: 1024px) { .qtes-figures__row { grid-template-columns: repeat(var(--qtes-n), 1fr); } }
.qtes-figures__item { border-top: 1.5px solid rgb(34, 34, 34); display: flex; flex-direction: column; gap: 0.35em; margin: 0; padding-top: 0.6em; }
.qtes-figures__figure { font-size: clamp(28px, calc(19px + 2.2vw), 44px); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.qtes-figures__caption, .qtes-figures p.qtes-figures__note, .qtes-timeline__text, .qtes-returns__legend, .qtes-returns__caption, .qtes-role__location { font-size: 14px; line-height: 155%; }
@media screen and (min-width: 560px) { .qtes-figures__caption, .qtes-figures p.qtes-figures__note, .qtes-timeline__text, .qtes-returns__legend, .qtes-returns__caption, .qtes-role__location { font-size: calc(10.5545px + 0.639205vw); } }
@media screen and (min-width: 1024px) { .qtes-figures__caption, .qtes-figures p.qtes-figures__note, .qtes-timeline__text, .qtes-returns__legend, .qtes-returns__caption, .qtes-role__location { font-size: 17.1px; line-height: 165%; } }
.qtes-figures p.qtes-figures__note { color: rgba(34, 34, 34, 0.7); margin: 2rem 0 0; max-width: 33em; padding: 0; }
main > .qtes-figures-band + .container { margin-top: 2em; }
/* Text pages: a section with a picture is a white band across the page (the charts and the diagram are drawn on white) */
.page-template-template-about main > .container.qtes-section:has(> figure.single) { background-color: rgb(255, 255, 255); box-shadow: 0 0 0 100vmax rgb(255, 255, 255); clip-path: inset(0 -100vmax); margin-top: 2em; padding-bottom: clamp(40px, 5vw, 72px); padding-top: clamp(40px, 5vw, 72px); }
.page-template-template-about main > .container.qtes-section:has(> figure.single) > :first-child { margin-top: 0; }
.page-template-template-about main > .container.qtes-section:has(> figure.single) > :last-child { margin-bottom: 0; }
.writer-landing.markdown-landing.page .qtes-figures__row:first-child { margin-top: 0; }

/* Text pages: a chart's caption sits under the picture, as on the reference's How To articles
   (the reference's default pulls captions 1.5em up into the picture) */
.qtes-section figure.single figcaption { color: rgb(127, 127, 127); margin-top: 1rem; top: 0; }

/* Timeline: points in a row (desktop) or a column (phone) */
.qtes-timeline__list { display: grid; gap: 1.6em clamp(20px, 3vw, 40px); list-style: none; margin: 3rem 0 0; padding: 0; }
@media (min-width: 768px) { .qtes-timeline__list { grid-template-columns: repeat(var(--qtes-n), 1fr); } }
.qtes-timeline__item { border-top: 1.5px solid rgb(34, 34, 34); display: flex; flex-direction: column; gap: 0.3em; margin: 0; padding-top: 1em; position: relative; }
.qtes-timeline__item::before { background: rgb(69, 108, 255); border-radius: 50%; content: ""; height: 11px; left: 0; position: absolute; top: -6.5px; width: 11px; }
.qtes-timeline__year { font-size: 16.8px; font-weight: 700; line-height: 155%; }
@media screen and (min-width: 1024px) { .qtes-timeline__year { font-size: 23px; line-height: 165%; } }

/* Tables: the reference's table rules (ia.net main.css) with the support-article size */
.qtes-table { border-collapse: collapse; border-spacing: 0; border-top: 1.5px solid rgb(34, 34, 34); font-family: "QTES Sans", system-ui, -apple-system, sans-serif; font-size: 18px; font-style: normal; hyphens: auto; line-height: 1.5; margin-bottom: 3em; margin-top: 3em; table-layout: fixed; width: 100%; }
.qtes-table thead, .qtes-table tbody { border-bottom: 1.5px solid rgb(34, 34, 34); }
.qtes-table tr { border-bottom: 0.5px solid rgb(34, 34, 34); }
.qtes-table th, .qtes-table td { font-size: 18px; line-height: 1.5; padding: 0.5em 10px; text-align: left; vertical-align: top; }
.qtes-table th:first-child, .qtes-table td:first-child { padding-left: 0; }
.qtes-table th:first-child, .qtes-table td:last-child { padding-right: 0; }
.qtes-table th { font-weight: bold; }
.qtes-table .qtes-num { font-variant-numeric: tabular-nums; text-align: right; }
.qtes-table--spec td:first-child { width: 40%; }
.qtes-scroll { overflow-x: auto; }
.qtes-scroll:focus-visible { outline: 2px solid rgb(69, 108, 255); outline-offset: 4px; }
.qtes-table--compare { min-width: 480px; }
.qtes-table--compare td:first-child { width: 40%; }
.qtes-table--returns { min-width: 820px; }
.qtes-table--returns th, .qtes-table--returns td { padding-left: 4px; padding-right: 4px; }
.qtes-table--returns td.is-live { color: rgb(69, 108, 255); font-weight: bold; }
.qtes-returns .qtes-table { margin-bottom: 1em; }
.qtes-returns__legend { display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; margin: 0; }
.qtes-returns__key { align-items: center; display: inline-flex; gap: 0.5em; }
.qtes-returns__swatch { background: rgb(34, 34, 34); border-radius: 2px; display: inline-block; height: 0.8em; width: 0.8em; }
.qtes-returns__key.is-live .qtes-returns__swatch { background: rgb(69, 108, 255); }
.qtes-returns .qtes-returns__caption { color: rgba(34, 34, 34, 0.7); margin-top: 0.6em; }
/* Phones: the comparison table fits the width; the monthly table scrolls with the year column fixed and a fading right edge.
   The padding on the right is scroll room, so at the end of the scroll the fade lies over empty space. */
.qtes-table--returns th:first-child, .qtes-table--returns td:first-child { background: rgb(247, 247, 247); left: 0; padding-right: 12px; position: sticky; z-index: 1; }
.qtes-table--returns th:first-child { width: 80px; }
@media screen and (max-width: 1023px) {
  .qtes-returns .qtes-scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); padding-right: 48px; }
  .qtes-returns .qtes-scroll:focus-visible { outline-offset: -2px; }
}
@media screen and (max-width: 511px) {
  .qtes-table--compare { min-width: 0; }
  .qtes-table--compare th, .qtes-table--compare td { font-size: 14px; padding-left: 4px; padding-right: 4px; }
  .qtes-table--compare .qtes-num { white-space: nowrap; }
  .qtes-table--compare td:first-child { width: 34%; }
}

/* Open role: one card (like the tiles) that opens to the full description; keyboard: Tab + Enter.
   The reference's details marker ("+ ", "- " when open) and hover colour stay; the card's texts keep their own colour. */
.qtes-role { background: #fff; border-radius: 11px; box-shadow: var(--card-shadow, 0 0 10px rgba(0, 0, 0, 0.05), 0 0 15px rgba(0, 0, 0, 0.05)); margin: 3em 0; }
.qtes-role > .qtes-role__summary { display: block; padding: 1.4em 1.6em; }
.qtes-role > .qtes-role__summary::before, .qtes-role__title { font-size: 16.8px; font-weight: 700; line-height: 155%; }
@media screen and (min-width: 1024px) { .qtes-role > .qtes-role__summary::before, .qtes-role__title { font-size: 23px; line-height: 165%; } }
.qtes-role[open] > .qtes-role__summary::before { content: "- "; }
.qtes-role > .qtes-role__summary:focus-visible { border-radius: 11px; outline: 2px solid rgb(69, 108, 255); outline-offset: 3px; }
.qtes-role__location, .qtes-role__text { color: rgb(34, 34, 34); display: block; margin-top: 0.35em; }
.qtes-role__location { color: rgba(34, 34, 34, 0.7); }
.qtes-role__body { padding: 0 1.6em 1.6em; }
.qtes-role__body > h4:first-child { margin-top: 0.6em; }

/* FAQ: two-digit row numbers (10 rows or more) get a wider number column; the open row's text stays aligned */
.qtes-wide-numbers .how-to-article-banner { grid-template-columns: 5rem 10fr; }
@media (min-width: 768px) { .page-template-template-how-to-writer-top .qtes-wide-numbers .how-to-article-banner-link .qtes-answer { padding-left: 5rem; } }

/* FAQ: one heading per group above its rows */
.page-template-template-how-to-writer-top .how-to.container .qtes-faq-group + .how-to-home-grid-wrapper { margin-top: 1.5rem; }

/* Footer: five rows, one column each on wide screens (the reference's forced breaks fit its own nine rows) */
@media (min-width: 1126px) { .footer-primary { column-count: 5; } .footer-primary > .footer-row:nth-child(n+2) { break-before: column; } }

/* Newsletter: the answer after a sign-up is in the page; shown by its anchor (#subscribed, #invalid) without JavaScript */
.newsletter__msg.is-hidden:target { display: block; }

/* ==== Design 1.0 (Figma "QTES Website", 13 October 2026) ====
   Desktop values are the Figma's (1920 wide, 936 px column), phone values its Mobile Type Scale (390 wide); in between
   sizes grow with the window and reach the desktop value at 1024 px, where the column is full width. The mobile scale
   is a guide: no text under 14 px below 1024 px (Dmytro, 13 October 2026). */
:root {
  --q-blue: #456cff; --q-blue-deep: #1537b8; --q-ink: #222; --q-dark: #242424; --q-muted: #848484; --q-light: #f7f7f7; --q-field: #d9d9d9;
  --q-h1: clamp(36px, 21.24px + 3.786vw, 60px); --q-h1-lh: clamp(40px, 25.24px + 3.786vw, 64px);
  --q-h2: clamp(32px, 22.16px + 2.524vw, 48px); --q-h2-lh: clamp(36px, 26.16px + 2.524vw, 52px);
  --q-h3: clamp(18px, 14.31px + 0.946vw, 24px); --q-h3-lh: clamp(22px, 18.31px + 0.946vw, 28px);
  --q-lead: clamp(18px, 11.85px + 1.577vw, 28px); --q-lead-lh: clamp(28px, 20.62px + 1.893vw, 40px);
  --q-body: clamp(16px, 11.08px + 1.262vw, 24px); --q-body-lh: clamp(26px, 18.62px + 1.893vw, 38px);
  --q-medium: clamp(16px, 13.54px + 0.631vw, 20px); --q-medium-lh: clamp(26px, 25.39px + 0.158vw, 28px);
  --q-small: clamp(14px, 11.54px + 0.631vw, 18px); --q-small-lh: clamp(22px, 19.54px + 0.631vw, 26px);
  --q-caption: clamp(14px, 12.77px + 0.315vw, 16px); --q-caption-lh: clamp(20px, 17.54px + 0.631vw, 24px);
  --q-button: clamp(16px, 13.54px + 0.631vw, 20px); --q-button-lh: clamp(20px, 17.54px + 0.631vw, 24px);
  --q-label: clamp(14px, 11.54px + 0.631vw, 18px); --q-label-lh: clamp(20px, 15.08px + 1.262vw, 28px);
  --q-band: clamp(56px, 31.4px + 6.31vw, 96px);  /* band padding; between a band's heading, picture and text (light) */
  --q-gap: clamp(32px, 17.24px + 3.786vw, 56px); /* heading to picture; inside dark bands */
}

/* Column 936 px with the base's side margins */
.header_container, .header-primary, .footer-primary, .breadcrumbs, .container { max-width: 936px; }

/* Header: 48 px, brand 18/28 bold, links 18/26, Login pill 18/28 bold capitals (px 12, py 2) */
.header-primary { font-size: 18px; line-height: 28px; padding-block: 10px; }
.header-primary .product b { font-weight: 700; }
/* one row: brand, breadcrumb ("QTES / Engine", 8 px on each side of the slash) and the links on the right; as flex
   items the spaces between them in the markup take no room (support pages keep their own header) */
.header-primary:not(:has(> .support-nav-header-toggle)) { align-items: center; display: flex; flex-wrap: wrap; row-gap: 4px; }
.header-primary:not(:has(> .support-nav-header-toggle)) > .menu { float: none; margin-left: auto; }
.header-primary > .breadcrumb-separator { margin: 0 8px; }
.header-primary .menu { align-items: center; display: flex; font-size: 18px; gap: 24px; height: 28px; line-height: 26px; }
.header-primary .menu a { margin: 0; }
.header-primary a.w-action { background-color: var(--q-blue); border-radius: 40px; display: inline-block; font-size: 18px; letter-spacing: 0; line-height: 28px; margin: 0; padding: 2px 12px; text-transform: uppercase; }
@media screen and (max-width: 480px) { .header-primary, .header-primary .menu { font-size: 16px; } .header-primary .menu { gap: 16px; } .header-primary .menu a { margin: 0; } .header-primary a.w-action { font-size: 16px; padding: 2px 10px; } }

/* Buttons in the content: pill 20/24 bold, px 40, py 20 (Figma "Button") */
main a.action { background-color: var(--q-blue); border: 0; border-radius: 40px; box-sizing: border-box; color: #fff; display: inline-block; font-size: var(--q-button); font-weight: 700; letter-spacing: 0; line-height: var(--q-button-lh); margin: 0; min-width: 0; padding: clamp(16px, 13.54px + 0.631vw, 20px) clamp(32px, 27.08px + 1.262vw, 40px); text-transform: none; width: fit-content; }
.markdown-section .qtes-actions { justify-content: center; margin: var(--q-gap) 0 0; padding: 0; }

/* Footer: four groups of 136 px, 24 apart; heading 18/28 bold, links 18/26, 8 apart; 120 above, 56 below. No
   background of its own (the page's #F7F7F7 shows through), so cards that end the page keep the shadow under them
   (the Legal tiles on phones, the News cards, About Us' contact cards) */
.footer-container { background: none; margin: 0 auto; padding: clamp(64px, 29.55px + 8.833vw, 120px) 0 56px; }
.footer-primary { background: none; column-count: auto; display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 136px)); }
@media (min-width: 640px) { .footer-primary { grid-template-columns: repeat(4, 136px); } }
/* phones (two columns): a group without links under it (News) goes last, so no column is left with a hole */
@media (max-width: 639px) { .footer-primary > .footer-row:not(:has(> .footer-submenu)) { order: 1; } }
@media (min-width: 1126px) { .footer-primary { column-count: auto; } .footer-primary > .footer-row:nth-child(n+2) { break-before: auto; } }
.footer-primary > .footer-row { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.footer-primary .footer-menu { color: #000; flex-basis: auto; font-size: 18px; font-weight: 700; line-height: 28px; }
.footer-primary .footer-submenu { color: #000; font-size: 18px; line-height: 26px; }

/* ---- Home bands: light (#F7F7F7) and dark (#242424), 96 px above and below ---- */
.writer-landing.markdown-landing.page .markdown-section, .writer-landing.markdown-landing.page .markdown-section:has(> .container > .markdown-section__copy:last-child) { padding: var(--q-band) 0; }
.writer-landing.markdown-landing.page .teasers { margin-bottom: 0; }
.writer-landing.markdown-landing.page .darkgrey { background: var(--q-dark); color: #fff; }
.writer-landing.markdown-landing.page .lightgrey { background: var(--q-light); color: var(--q-ink); }
.writer-landing.markdown-landing.page .markdown-section.lightgrey:not(.qtes-figures-band) + .markdown-section.lightgrey:not(.qtes-figures-band) { background-color: var(--q-light); }
/* heading: kicker 18/28 bold blue capitals, title H2 48/52, lead 28/40 medium; 16 apart (24 in dark bands) */
.writer-landing.markdown-landing.page .markdown-section__heading { display: flex; flex-direction: column; gap: 16px; margin: 0 auto; max-width: none; }
.writer-landing.markdown-landing.page .darkgrey .markdown-section__heading { gap: 24px; }
.writer-landing.markdown-landing.page .markdown-section__heading > .markdown-section__kicker { color: var(--q-blue); font-size: var(--q-label); letter-spacing: 0; line-height: var(--q-label-lh); margin: 0; }
.writer-landing.markdown-landing.page .markdown-section__heading > h2 { font-size: var(--q-h2); letter-spacing: 0; line-height: var(--q-h2-lh); }
.writer-landing.markdown-landing.page .markdown-section__heading > p, .writer-landing.markdown-landing.page #hero .markdown-section__heading > p { font-size: var(--q-lead); font-weight: 500; line-height: var(--q-lead-lh); margin: 0 auto; max-width: none; text-wrap: pretty; }
/* picture or player 56 below the heading; the text columns 96 below it (56 in dark bands) */
.writer-landing.markdown-landing.page .markdown-section__media:has(*) { margin-top: var(--q-gap); }
.writer-landing.markdown-landing.page .markdown-section__media img { border-radius: 12px; }
.writer-landing.markdown-landing.page .qtes-faded .markdown-section__media img { border-radius: 0; opacity: 0.5; }
.writer-landing.markdown-landing.page .markdown-section__media .video-wrapper { aspect-ratio: 936 / 526; background: #000; border-radius: 16px; margin: 0; max-width: none; overflow: hidden; position: relative; }
.writer-landing.markdown-landing.page .markdown-section__media .video-wrapper > video { display: block; height: 100%; object-fit: cover; width: 100%; }
/* a player whose video is not there yet (Home, FAQ): black, the play mark and "Video Coming Soon" (site text) under
   it, centred together as drawn: mark 96, 24 apart, text 24/32 bold capitals tracked 0.08 em; on phones 48, 12 and
   14/20 */
.qtes-player-soon { align-items: center; background: #000; color: #fff; display: flex; flex-direction: column; gap: clamp(12px, 4.62px + 1.893vw, 24px); justify-content: center; }
.qtes-player-soon::before { aspect-ratio: 1; background: url("/img/play-small.svg") center / contain no-repeat; content: ""; width: clamp(48px, 18.47px + 7.571vw, 96px); }
.qtes-player-soon__label { font-size: clamp(14px, 7.85px + 1.577vw, 24px); font-weight: 700; letter-spacing: 0.08em; line-height: clamp(20px, 12.62px + 1.893vw, 32px); text-align: center; text-transform: uppercase; }
/* text columns: two of 456 px, 24 apart, 56 between rows; lead size, medium, bold leads */
.writer-landing.markdown-landing.page .markdown-section .markdown-section__copy { column-gap: 24px; display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--q-band) 0 0; padding: 0; row-gap: var(--q-gap); }
.writer-landing.markdown-landing.page .darkgrey .markdown-section__copy, .writer-landing.markdown-landing.page .markdown-section__media:not(:has(*)) + .markdown-section__copy { margin-top: var(--q-gap); }
.writer-landing.markdown-landing.page .lightgrey .markdown-section__media:not(:has(*)) + .markdown-section__copy { margin-top: var(--q-band); }
@media (min-width: 640px) { .writer-landing.markdown-landing.page .markdown-section .markdown-section__copy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.writer-landing.markdown-landing.page .markdown-section .markdown-section__copy > p, .writer-landing.markdown-landing.page #hero > .container > p { color: inherit; font-size: var(--q-lead); font-weight: 500; line-height: var(--q-lead-lh); margin: 0; padding: 0; }
.writer-landing.markdown-landing.page .lightgrey .markdown-section__copy > p, .writer-landing.markdown-landing.page #hero > .container > p { color: #000; }
.writer-landing.markdown-landing.page .darkgrey .markdown-section__copy { color: #fff; }
.writer-landing.markdown-landing.page .markdown-section__copy strong, .writer-landing.markdown-landing.page #hero > .container > p strong { font-weight: 700; }
.writer-landing.markdown-landing.page .qtes-stacked .markdown-section__copy strong { display: block; }

/* Hero: icon 70 px (shadow 0 2 2) beside "QTES" (H1), tagline 16 below; picture 56 below; statements 96 below. The
   icon (the app icon, its white rounded tile included) keeps its shape whatever picture is uploaded */
.writer-landing.markdown-landing.page #hero { padding: var(--q-band) 0; }
.writer-landing.markdown-landing.page #hero > .container { column-gap: 24px; row-gap: var(--q-gap); }
.writer-landing.markdown-landing.page #hero .markdown-section__heading { margin: 0; }
.writer-landing.markdown-landing.page #hero .markdown-section__heading > h1 { font-size: var(--q-h1); gap: clamp(16px, 12.31px + 0.946vw, 24px); letter-spacing: 0; line-height: var(--q-h1-lh); margin: 0; }
.writer-landing.markdown-landing.page #hero h1 > img { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15)); height: calc(var(--q-h1) * 7 / 6); object-fit: contain; transform: none; width: calc(var(--q-h1) * 7 / 6); }
.writer-landing.markdown-landing.page #hero .markdown-section__devices { margin-top: 0; }
/* the panel picture carries its shadow (16 px on each side of the 936 × 468 panel), which reaches past the column */
.writer-landing.markdown-landing.page #hero .markdown-section__devices > div { margin: calc(-100% * 16 / 936); }
.writer-landing.markdown-landing.page #hero .markdown-section__devices > .hideandseekdesktop, .writer-landing.markdown-landing.page #hero .markdown-section__devices > .hideandseekmobile { border-radius: 0; box-shadow: none; }
.writer-landing.markdown-landing.page #hero > .container > p { align-self: start; margin-top: calc(var(--q-band) - var(--q-gap)); }
@media (max-width: 512px) { .writer-landing.markdown-landing.page #hero > .container > p { font-size: var(--q-lead); } .writer-landing.markdown-landing.page #hero > .container > p + p { margin-top: 0; } }

/* Figures as a dark band: title, grey line under it, two columns of figures (60/64) with 18/28 captions, a line
   under each but the last row; the button 56 below */
.qtes-figures-band--dark .qtes-figures { display: flex; flex-direction: column; gap: var(--q-gap); text-align: center; }
.qtes-figures-band--dark .qtes-figures > h2 { color: #fff; font-size: var(--q-h2); letter-spacing: 0; line-height: var(--q-h2-lh); margin: 0; padding: 0; text-align: center; }
.qtes-figures-band--dark .qtes-figures > .qtes-figures__subtitle { color: var(--q-muted); font-size: var(--q-body); line-height: var(--q-body-lh); margin: calc(24px - var(--q-gap)) 0 0; padding: 0; text-align: center; }
.qtes-figures-band--dark .qtes-figures__row { gap: 32px 48px; grid-template-columns: minmax(0, 1fr); margin: 0; text-align: left; }
@media (min-width: 512px) { .qtes-figures-band--dark .qtes-figures__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qtes-figures-band--dark .qtes-figures__item { border-bottom: 1px solid var(--q-muted); border-top: 0; color: var(--q-light); gap: 16px; padding: 0 0 32px; }
@media (min-width: 512px) { .qtes-figures-band--dark .qtes-figures__item:nth-last-child(-n+2):nth-child(odd), .qtes-figures-band--dark .qtes-figures__item:last-child { border-bottom: 0; } }
@media (max-width: 511px) { .qtes-figures-band--dark .qtes-figures__item:last-child { border-bottom: 0; } }
.qtes-figures-band--dark .qtes-figures__figure { font-size: var(--q-h1); letter-spacing: 0; line-height: var(--q-h1-lh); }
.qtes-figures-band--dark .qtes-figures__caption { font-size: var(--q-label); font-weight: 700; line-height: var(--q-label-lh); }
@media screen and (min-width: 560px) { .qtes-figures-band--dark .qtes-figures__caption { font-size: var(--q-label); } }
@media screen and (min-width: 1024px) { .qtes-figures-band--dark .qtes-figures__caption { font-size: var(--q-label); line-height: var(--q-label-lh); } }
.qtes-figures-band--dark .qtes-actions { margin: 0; }

/* Before/after slider (Markets band): the Figma's picture frame, full column, radius 12, 56 below the heading;
   the handle stays the reference's (blue) */
.writer-landing.markdown-landing.page #compare { padding: var(--q-band) 0; }
.writer-landing.markdown-landing.page #compare .markdown-section__heading { margin: 0 auto; max-width: none; }
.writer-landing.markdown-landing.page #compare .markdown-section__heading > h2 { margin: 0; }
.writer-landing.markdown-landing.page #compare .markdown-section__heading > p { margin: 0 auto; max-width: none; }
.writer-landing.markdown-landing.page #compare .markdown-section__copy { margin-bottom: 0; }
.writer-landing.markdown-landing.page .markdown-section__comparison--responsive { margin-top: var(--q-gap); width: 100%; }
@media (min-width: 1140px) { .writer-landing.markdown-landing.page .markdown-section__comparison--responsive { width: 100%; } }
@media (max-width: 511px) { .writer-landing.markdown-landing.page .markdown-section__comparison--responsive { margin-block: var(--q-gap) 0; width: 100%; } }
.writer-landing.markdown-landing.page .markdown-section__comparison--responsive > .img-comp-img:not(.img-comp-overlay) { background: none; border-radius: 12px; box-shadow: none; }
.writer-landing.markdown-landing.page .markdown-section__comparison--responsive > .img-comp-overlay { border-radius: 12px 0 0 12px; }
@media (min-width: 512px) { .writer-landing.markdown-landing.page .markdown-section__comparison--responsive > .img-comp-img:not(.img-comp-overlay) { background: none; border-radius: 12px; box-shadow: none; } .writer-landing.markdown-landing.page .markdown-section__comparison--responsive > .img-comp-overlay { border-radius: 12px 0 0 12px; } }

/* ---- FAQ page and the news cards ----
   Centred title block: kicker 18/28 bold blue capitals, H1 60/64, lead 28/40, 24 apart, its button 56 below, 96 above
   and below. Section titles (videos, news): H2 48/52 and lead, 24 apart, 96 above, 56 below. */
.qtes-intro { display: flex; flex-direction: column; gap: 24px; padding-block: var(--q-band); text-align: center; }
.qtes-intro.qtes-intro--section { padding-block: var(--q-band) var(--q-gap); }
main .qtes-intro > :is(h1, h2) { color: var(--q-ink); letter-spacing: 0; margin: 0; max-width: none; padding: 0; text-align: center; }
main .qtes-intro > h1 { font-size: var(--q-h1); line-height: var(--q-h1-lh); }
main .qtes-intro > h2 { font-size: var(--q-h2); line-height: var(--q-h2-lh); }
.qtes-intro__kicker { color: var(--q-blue); font-size: var(--q-label); font-weight: 700; line-height: var(--q-label-lh); text-transform: uppercase; }
main .qtes-intro > .qtes-intro__lead { color: var(--q-ink); font-size: var(--q-lead); font-weight: 500; line-height: var(--q-lead-lh); margin: 0; max-width: none; padding: 0; }
main .qtes-intro > .qtes-actions { justify-content: center; margin: calc(var(--q-gap) - 24px) 0 0; padding: 0; }

/* Questions: one card (radius 16, padding 40, shadow 0 4 8), rows 32 apart with a 1 px line 24 under each; number 66 px
   blue in a 72 px column, question 20/28 bold and its second line 20/28, 12 beside the number. A row links to its
   answer page; with a mouse (and on keyboard focus) it opens to its answer 24 below, 84 in from both sides, animated
   where the browser can animate to the answer's height (as before) */
.qtes-faq-card { background: var(--q-light); border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; gap: 32px; interpolate-size: allow-keywords; padding: clamp(20px, 11.08px + 2.27vw, 40px); }
.qtes-faq-row { border-bottom: 1px solid var(--q-field); color: var(--q-ink); display: block; margin: 0; padding-bottom: 24px; text-decoration: none; }
a.qtes-faq-row:hover { color: var(--q-ink); }
.qtes-faq-row:last-child { border-bottom: 0; padding-bottom: 0; }
.qtes-faq-row:focus-visible { border-radius: 8px; outline: 2px solid var(--q-blue); outline-offset: 4px; }
.qtes-faq-row__head { align-items: center; display: flex; gap: 12px; }
.qtes-faq-row__number { color: var(--q-blue); flex: 0 0 clamp(48px, 33.24px + 3.786vw, 72px); font-size: clamp(44px, 30.47px + 3.47vw, 66px); font-weight: 400; line-height: 64px; }
.qtes-faq-row__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.qtes-faq-row__title, .qtes-faq-row__excerpt { color: var(--q-ink); font-size: var(--q-medium); line-height: var(--q-medium-lh); }
.qtes-faq-row__title { font-weight: 700; }
.qtes-faq-row__answer { color: var(--q-ink); font-size: var(--q-medium); height: 0; line-height: var(--q-medium-lh); margin-top: 0; overflow: hidden; padding: 0 clamp(0px, -43px + 11vw, 84px) 0 calc(clamp(48px, 33.24px + 3.786vw, 72px) + 12px); transition: height 0.3s ease, margin-top 0.3s ease; }
@media (hover: hover) { .qtes-faq-row:hover .qtes-faq-row__answer { height: auto; margin-top: 24px; } }
.qtes-faq-row:focus-visible .qtes-faq-row__answer { height: auto; margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .qtes-faq-row__answer { transition: none; } }
.qtes-faq-row__answer :is(p, ul, ol) { font-size: inherit; line-height: inherit; margin: 0; max-width: none; padding: 0; }
.qtes-faq-row__answer > * + * { margin-top: 12px; }
.qtes-faq-group { color: var(--q-ink); font-size: var(--q-h3); letter-spacing: 0; line-height: var(--q-h3-lh); margin: 0; text-align: left; }

/* Videos: the large player 936 × 526 (radius 16) with the first one, all of them as cards 24 below (296 wide, radius
   8, picture 166 tall with a 64 px play mark, one-line title 20/28 bold); without any the player and cards are grey
   (#C7C7C7) */
.qtes-video-player { aspect-ratio: 936 / 526; background: #000; border-radius: 16px; overflow: hidden; position: relative; }
.qtes-video-player > video { display: block; height: 100%; object-fit: cover; width: 100%; }
.qtes-video-player--empty { background: #c7c7c7; }
.qtes-video-player--empty::after { background: url("/img/play.svg") center / contain no-repeat; content: ""; height: clamp(64px, 12.82vw, 120px); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: clamp(64px, 12.82vw, 120px); }
.qtes-video-cards, .qtes-cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.qtes-video-cards { margin-top: 24px; }
.qtes-video-card, .qtes-card { background: var(--q-light); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); color: var(--q-ink); display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
a.qtes-video-card:hover, a.qtes-card:hover { color: var(--q-ink); }
.qtes-video-card { gap: 16px; padding-bottom: 16px; }
.qtes-video-card__media { aspect-ratio: 296 / 166; background: #c7c7c7 center / cover no-repeat; display: block; position: relative; }
.qtes-video-card__media::after { background: url("/img/play-small.svg") center / contain no-repeat; content: ""; height: 64px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; }
/* a card whose video is not there yet: "coming soon" as in the player, smaller: mark 48, 12 apart, text 12/16
   tracked 0.96 px (14/20 below 1024 px) */
.qtes-video-card__media.qtes-player-soon { background: #000; display: flex; gap: 12px; }
.qtes-video-card__media.qtes-player-soon::before { width: 48px; }
.qtes-video-card__media.qtes-player-soon::after { content: none; }
.qtes-video-card__media > .qtes-player-soon__label { font-size: 12px; line-height: 16px; }
@media (max-width: 1023px) { .qtes-video-card__media > .qtes-player-soon__label { font-size: 14px; line-height: 20px; } }
.qtes-video-card__title { font-size: var(--q-medium); font-weight: 700; line-height: var(--q-medium-lh); overflow: hidden; padding: 0 16px; text-overflow: ellipsis; white-space: nowrap; }

/* News cards: 296 wide, radius 8; picture 172 tall (grey without one); title 20/28 bold, date 12/16 bold capitals
   (tracking 0.96 px; 14/20 below 1024 px), text 18/26, 16 apart, 24 from the edges; "More News" 56 below */
.qtes-card { gap: 24px; }
.qtes-card__media { aspect-ratio: 296 / 172; background: var(--q-field); display: block; }
/* a picture takes the grey box's shape (296 : 172), cropped to fill it, whatever its own shape */
.qtes-card__media > img { aspect-ratio: 296 / 172; display: block; height: auto; margin: 0; object-fit: cover; width: 100%; }
.qtes-card__body { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 24px; }
.qtes-card__title { font-size: var(--q-medium); font-weight: 700; line-height: var(--q-medium-lh); }
a.qtes-card:hover .qtes-card__title { color: var(--q-blue); }
.qtes-card__date { font-size: 12px; font-weight: 700; letter-spacing: 0.96px; line-height: 16px; text-transform: uppercase; }
@media (max-width: 1023px) { .qtes-card__date { font-size: 14px; letter-spacing: 1.12px; line-height: 20px; } }
.qtes-card__text { font-size: var(--q-small); line-height: var(--q-small-lh); }
.qtes-news > .qtes-actions { justify-content: center; margin: var(--q-gap) 0 0; padding: 0; }
/* News page: the cards' title is the page title (60/64) and its lead runs 640 px wide, centred */
main .qtes-news--page > .qtes-intro > .qtes-intro__lead { margin: 0 auto; max-width: 640px; }
/* cards waiting for their batch (site.js) */
.qtes-card[hidden] { display: none; }

/* Wide picture across the page (Home, and the top of the text pages): one shape whatever the picture's, that of
   ia.net/about-us's picture (3200 × 1476, about 2.17 : 1, 886 px tall at 1920 wide), the picture cropped to fill it;
   at least 240 px tall on phones. Without a picture a grey box of that shape. (Fynn, 13 October 2026: the pictures,
   16:9 and 4:3, were too tall.) */
.qtes-image-band img { aspect-ratio: 3200 / 1476; display: block; height: auto; margin: 0; max-width: none; min-height: 240px; object-fit: cover; width: 100%; }
.qtes-image-band--empty { aspect-ratio: 3200 / 1476; background: var(--q-field); min-height: 240px; }

/* ---- Text pages (template "text": The Engine, Edge) ----
   Hero picture under the header; title block 96 below it (kicker 18/28 bold blue, H1 60/64 16 below); lead, sections and
   tables 56 apart; in a section: H2 48/52, text 24/38 (32 below the H2; 24 when several plain paragraphs follow it),
   paragraphs 16 apart, H3 items (24/28 bold, text 16 below) 32 apart; running text the full column */
.page-template-template-about main > .teasers { margin-bottom: 0; }
.page-template-template-about main > .container.qtes-hero { margin-top: var(--q-band); }
.page-template-template-about main > .container.qtes-hero > h3 { color: var(--q-blue); font-size: var(--q-label); font-weight: 700; letter-spacing: 0; line-height: var(--q-label-lh); margin: 0; padding: 0; text-transform: none; }
.page-template-template-about main > .container.qtes-hero > h1 { color: var(--q-ink); font-size: var(--q-h1); letter-spacing: 0; line-height: var(--q-h1-lh); margin: 0; padding: 0; text-align: left; }
.page-template-template-about main > .container.qtes-hero > h3 + h1 { margin-top: 16px; }
.page-template-template-about main > .container.qtes-hero > p.qtes-lead { color: var(--q-ink); font-size: var(--q-lead); font-weight: 500; line-height: var(--q-lead-lh); margin: var(--q-gap) 0 0; max-width: none; padding: 0; }
.page-template-template-about main > .container:is(.qtes-section, .qtes-table-block) { margin-top: var(--q-gap); }
.page-template-template-about main > .container.qtes-section > h2 { color: var(--q-ink); font-size: var(--q-h2); letter-spacing: 0; line-height: var(--q-h2-lh); margin: 0; padding: 0; text-align: left; }
.page-template-template-about main > .container.qtes-section > :is(p, ol, ul) { color: var(--q-ink); font-size: var(--q-body); line-height: var(--q-body-lh); margin: 0; max-width: none; padding-top: 0; padding-bottom: 0; }
.page-template-template-about main > .container.qtes-section > :is(ol, ul) > li { font-size: inherit; line-height: inherit; margin: 0; }
/* numbered lists: the numbers bold, like the bold leads after them (Lukas, 13 October 2026) */
.qtes-section ol > li::marker { font-weight: 700; }
/* numbered lists as drawn: the bold numbers at the column's edge, the text 1.5 em in (36 px, phone 24 px) */
.page-template-template-about main > .container.qtes-section > ol { counter-reset: qtes-ol; list-style: none; padding-left: 0; }
.page-template-template-about main > .container.qtes-section > ol > li { counter-increment: qtes-ol; padding-left: 1.5em; position: relative; }
.page-template-template-about main > .container.qtes-section > ol > li::before { content: counter(qtes-ol) "."; font-weight: 700; left: 0; position: absolute; }
.page-template-template-about main > .container.qtes-section > h2 + p, .page-template-template-about main > .container.qtes-section > h2 + :is(ol, ul, h3, figure) { margin-top: 32px; }
.page-template-template-about main > .container.qtes-section:not(:has(> h3, > ol, > ul)) > h2 + p:has(+ p:not(.qtes-actions)) { margin-top: 24px; }
.page-template-template-about main > .container.qtes-section > p + p { margin-top: 16px; }
.page-template-template-about main > .container.qtes-section > :is(p, ol, ul) + :is(ol, ul), .page-template-template-about main > .container.qtes-section > :is(ol, ul) + p { margin-top: 32px; }
.page-template-template-about main > .container.qtes-section > h3 { color: var(--q-ink); font-size: var(--q-h3); font-weight: 700; letter-spacing: 0; line-height: var(--q-h3-lh); margin: 32px 0 0; padding: 0; }
.page-template-template-about main > .container.qtes-section > h3 + p { margin-top: 16px; }
/* a chart's title sits 16 under the text before it; the chart 56 under its title, its caption (16/24) 56 under the chart */
.page-template-template-about main > .container.qtes-section > p + h3:has(+ figure) { margin-top: 16px; }
.page-template-template-about main > .container.qtes-section:has(> figure.single) { background: none; box-shadow: none; clip-path: none; margin-top: var(--q-gap); padding-bottom: 0; padding-top: 0; }
.page-template-template-about main > .container.qtes-section > figure.single { margin: var(--q-gap) 0 0; }
.page-template-template-about main > .container.qtes-section > figure.single > img { display: block; height: auto; width: 100%; }
.page-template-template-about main > .container.qtes-section > figure.single figcaption { color: var(--q-ink); font-size: var(--q-caption); font-style: normal; line-height: var(--q-caption-lh); margin: var(--q-gap) 0 0; padding: 0; position: static; text-align: left; }
.page-template-template-about main > .container.qtes-section > figure.single > p:empty { display: none; }
.page-template-template-about .qtes-table-block .qtes-table { margin: 0; }
.page-template-template-about .qtes-table-block .qtes-table :is(th, td) { font-size: var(--q-small); line-height: var(--q-small-lh); padding-bottom: 7.5px; padding-top: 7.5px; }

/* Quotes: four of 216 px, 24 apart; round portrait 96 px, 40 above the text; text 16/24, source medium */
.writer-landing.markdown-landing.page #testimonials { padding-bottom: 0; }
.writer-landing.markdown-landing.page #testimonials .markdown-section__heading > .markdown-section__kicker { color: var(--q-blue-deep); text-transform: none; }
.writer-landing.markdown-landing.page #testimonials .markdown-section__heading > p { margin: 0 auto; max-width: 640px; }
.writer-landing.markdown-landing.page .markdown-section__testimonials { display: grid; gap: 48px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: var(--q-band) 0 0; padding: 0; }
.writer-landing.markdown-landing.page .markdown-section__testimonials > p { color: #000; font-size: var(--q-caption); line-height: var(--q-caption-lh); margin: 0; max-width: none; padding: 0; text-align: left; }
.writer-landing.markdown-landing.page .markdown-section__testimonials > p > img.profilepic, .writer-landing.markdown-landing.page .markdown-section__testimonials > p > img.avatar { border-radius: 50%; display: block; filter: none; height: 96px; margin: 0 auto 40px; object-fit: cover; width: 96px; }
.writer-landing.markdown-landing.page .markdown-section__testimonials > p > b { font-weight: 500; }

/* Newsletter card: #F7F7F7, radius 16, padding 40, shadow 0 4 8; title 24/28 bold, text 20/28, 16 apart; the field
   32 below: white pill with a 1 px line, the button inside it */
.writer-landing.markdown-landing.page main > .container:has(> .qtes-newsletter) { margin-top: 0; }
.card.qtes-newsletter .newsletaire { background: var(--q-light); border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); box-sizing: border-box; display: flex; flex-direction: column; margin: 0; padding: clamp(24px, 18.46px + 1.42vw, 40px); }
.card.qtes-newsletter .newsletaire > li { margin-bottom: 0; }
.card.qtes-newsletter .newsletaire > li.cardtitle { margin-top: 0; }
.card.qtes-newsletter .cardtitle :is(h1, h3) { color: #000; font-size: var(--q-h3); letter-spacing: 0; line-height: var(--q-h3-lh); margin: 0; }
.card.qtes-newsletter .newsletter__text { color: #000; font-size: var(--q-medium); line-height: var(--q-medium-lh); margin: 16px 0 0; }
.card.qtes-newsletter .newsletter__form { margin-top: 32px; }
.card.qtes-newsletter .newsletter__set { align-items: center; border: 1px solid var(--q-field); border-radius: 40px; box-sizing: border-box; flex-wrap: nowrap; height: auto; margin: 0; padding: 6px 6px 6px 24px; }
.card.qtes-newsletter .newsletter__set input[type="email"] { background: none; border: 0; flex: 1 1 auto; font-size: var(--q-medium); line-height: 28px; min-width: 0; padding: 0; }
.card.qtes-newsletter .newsletter__set input[type="email"]::placeholder { color: var(--q-muted); opacity: 1; }
/* an address the browser fills in keeps the white field (its own autofill colour can't be overridden, only covered) */
.card.qtes-newsletter .newsletter__set input[type="email"]:is(:autofill, :-webkit-autofill) { box-shadow: 0 0 0 40px #fff inset; }
.card.qtes-newsletter .newsletter__set input[type="submit"] { background-color: var(--q-blue); border: 0; border-radius: 40px; color: #fff; cursor: pointer; flex: 0 0 auto; font-size: var(--q-button); font-weight: 700; height: auto; line-height: var(--q-button-lh); margin: 0; padding: clamp(16px, 13.54px + 0.631vw, 20px) clamp(28px, 20.62px + 1.893vw, 40px); width: auto; }
/* its messages, 16 below the field (Figma "Email Form Messages"): 12/16 bold capitals tracked 0.96 px (14/20 below
   1024 px) after a 16 px icon, 8 apart; refused (newsletter: invalid address; login) red with a cross, saved
   (newsletter: thanks) deep blue with a tick */
.card.qtes-newsletter .newsletter__msg { background: url("/img/msg-error.svg") 0 0 / 16px 16px no-repeat; color: #f00; font-size: 12px; font-weight: 700; letter-spacing: 0.96px; line-height: 16px; margin: 16px 0 0; padding-left: 24px; text-transform: uppercase; }
.card.qtes-newsletter .newsletter__msg#subscribed { background-image: url("/img/msg-ok.svg"); color: var(--q-blue-deep); }
@media (max-width: 1023px) { .card.qtes-newsletter .newsletter__msg { background-position: 0 2px; font-size: 14px; letter-spacing: 1.12px; line-height: 20px; } }

/* ---- Login and Newsletter: the card 96 px under the header; the footer stays at the bottom of the window ---- */
body.page-template-template-subscribe { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.page-template-template-subscribe > .main { flex: 1 0 auto; }
.page-template-template-subscribe main > .container:has(> .qtes-newsletter) { margin-top: var(--q-band); }

/* ---- About Us: the Contact section (the footer's "Contact" and FAQ's "Contact Us" open it): spaced like a text
   section, heading 48/52, 32 px to the cards; cards in a row (three of 296 px, 24 apart). Card #F7F7F7, radius 8,
   padding 24, shadow 0 4 8; title 20/28 bold, then 16 px to the lines 18/26, 8 apart ---- */
.page-template-template-about main > .container.qtes-contact { margin-top: var(--q-gap); }
.page-template-template-about main > .container.qtes-contact > h2 { color: var(--q-ink); font-size: var(--q-h2); letter-spacing: 0; line-height: var(--q-h2-lh); margin: 0 0 32px; padding: 0; text-align: left; }
.qtes-contact__cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.qtes-contact__card { background: var(--q-light); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; gap: 16px; padding: 24px; }
main .qtes-contact__card > h3 { color: var(--q-ink); font-size: var(--q-medium); font-weight: 700; letter-spacing: 0; line-height: var(--q-medium-lh); margin: 0; padding: 0; }
.qtes-contact__card address { font-style: normal; }
.qtes-contact__card address ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.qtes-contact__card address li { color: var(--q-ink); font-size: var(--q-small); line-height: var(--q-small-lh); margin: 0; padding: 0; }
.qtes-contact__card address a { color: inherit; text-decoration: none; }

/* ---- Text pages: bulleted lists as drawn (Careers): discs hanging in a 1.5 em indent (36 px, phone 24 px), 16 px
   under a paragraph; a link in a list keeps the text colour ---- */
.page-template-template-about main > .container.qtes-section > ul { list-style: disc outside; padding-left: 1.5em; }
.page-template-template-about main > .container.qtes-section > p + ul { margin-top: 16px; }
.page-template-template-about main > .container.qtes-section > ul a { color: inherit; }
/* a button under a section's text (Apply on a job): centred, 56 px below */
.page-template-template-about main > .container.qtes-section > .qtes-actions { justify-content: center; margin: var(--q-gap) 0 0; padding: 0; }

/* ---- News article (Figma "News Single"): a band 1920 × 1024 (smaller screens: the same shape, or as tall as its
   text) with the picture behind a 75% #F7F7F7 veil (no picture: grey); on it, 96 px from the top and centred: the
   date 18/28 bold blue capitals, the title 60/64, the lead 28/40 medium, 16 apart. Key figures 56 below the lead:
   two columns of 444 (48 apart, rows 32 apart), figure 60/64 bold, text 18/28 bold, 16 apart, a line 32 below all but
   the last row ---- */
.qtes-article__top { box-sizing: border-box; min-height: min(1024px, 53.334vw); padding: var(--q-band) 0; position: relative; }
.qtes-article__top::after { background: rgba(247, 247, 247, 0.75); content: ""; inset: 0; position: absolute; }
.qtes-article__top--empty { background: var(--q-field); }
.qtes-article__picture { height: 100%; inset: 0; margin: 0; max-width: none; object-fit: cover; position: absolute; width: 100%; }
.qtes-article__intro { display: flex; flex-direction: column; gap: 16px; position: relative; text-align: center; z-index: 1; }
.qtes-article__date { color: var(--q-blue); font-size: var(--q-label); font-weight: 700; line-height: var(--q-label-lh); text-transform: uppercase; }
main .qtes-article__intro > h1 { color: var(--q-ink); font-size: var(--q-h1); letter-spacing: 0; line-height: var(--q-h1-lh); margin: 0; max-width: none; padding: 0; text-align: center; }
main .qtes-article__intro > .qtes-article__lead { color: var(--q-ink); font-size: var(--q-lead); font-weight: 500; line-height: var(--q-lead-lh); margin: 0; max-width: none; padding: 0; }
.qtes-article__figures { display: grid; gap: 32px 48px; grid-template-columns: minmax(0, 1fr); list-style: none; margin: calc(var(--q-gap) - 16px) 0 0; padding: 0; text-align: left; }
@media (min-width: 512px) { .qtes-article__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the line is drawn inside the 32 px below the text, as in Figma (a border would add 1 px per row) */
.qtes-article__figures > li { box-shadow: inset 0 -1px var(--q-article-line, var(--q-field)); display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0 0 32px; }
@media (min-width: 512px) { .qtes-article__figures > li:nth-last-child(-n+2):nth-child(odd), .qtes-article__figures > li:last-child { box-shadow: none; } }
@media (max-width: 511px) { .qtes-article__figures > li:last-child { box-shadow: none; } }
.qtes-article__figure { color: var(--q-ink); font-size: var(--q-h1); font-weight: 700; line-height: var(--q-h1-lh); }
.qtes-article__figure-text { color: var(--q-ink); font-size: var(--q-label); font-weight: 700; line-height: var(--q-label-lh); }
/* Template 2 ("News Single - Template 2"): an article with an "Overview section colour" (#222222 in Figma) has the band
   in that colour, no picture and no veil, as tall as its text: the date blue, title and lead white, the figures
   #F7F7F7 with #848484 lines */
.qtes-article__top--color { --q-article-line: var(--q-muted); min-height: 0; }
.qtes-article__top--color::after { content: none; }
main .qtes-article__top--color .qtes-article__intro > :is(h1, .qtes-article__lead) { color: #fff; }
.qtes-article__top--color :is(.qtes-article__figure, .qtes-article__figure-text) { color: var(--q-light); }

/* the article, 96 px under the band: text 24/38, a first paragraph is the lead (28/40 medium, 56 above the rest);
   headings 48/52 (56 above, 32 to the text), 24/28 and 20/28 (32 above, 16 to the text); paragraphs and lists 16
   apart, lists indented 1.5 em; a picture 56 from what is around it, its caption 18/28 bold 16 below it */
.qtes-article__body { padding-top: var(--q-band); }
main .qtes-article__body > * { margin: 0; max-width: none; padding-bottom: 0; padding-top: 0; }
/* the base's "h3 + p" keeps 3 em below a paragraph: nothing in the article has space below it, only above */
.qtes-article .qtes-article__body > * { margin-bottom: 0; }
main .qtes-article__body > :is(p, ul, ol) { color: var(--q-ink); font-size: var(--q-body); line-height: var(--q-body-lh); }
main .qtes-article__body > :is(ul, ol) { padding-left: 1.5em; }
main .qtes-article__body > ul { list-style: disc outside; }
main .qtes-article__body > ol { list-style: decimal outside; }
main .qtes-article__body > :is(ul, ol) > li { font-size: inherit; line-height: inherit; margin: 0; }
main .qtes-article__body > p:first-child { font-size: var(--q-lead); font-weight: 500; line-height: var(--q-lead-lh); }
main .qtes-article__body > :is(h2, h3, h4) { color: var(--q-ink); font-weight: 700; letter-spacing: 0; text-align: left; }
main .qtes-article__body > h2 { font-size: var(--q-h2); line-height: var(--q-h2-lh); margin-top: var(--q-gap); }
main .qtes-article__body > h3 { font-size: var(--q-h3); line-height: var(--q-h3-lh); margin-top: 32px; }
main .qtes-article__body > h4 { font-size: var(--q-medium); line-height: var(--q-medium-lh); margin-top: 32px; }
main .qtes-article__body > h2 + p { margin-top: 32px; }
main .qtes-article__body > :is(h3, h4) + p, main .qtes-article__body > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 16px; }
main .qtes-article__body > figure.single, main .qtes-article__body > figure.single + *, main .qtes-article__body > p:first-child + * { margin-top: var(--q-gap); }
/* a subheading that introduces a picture is spaced like the picture */
main .qtes-article__body > :is(h3, h4):has(+ figure.single) { margin-top: var(--q-gap); }
main .qtes-article__body > :first-child { margin-top: 0; }
main .qtes-article__body > figure.single > img { border-radius: 0; display: block; height: auto; margin: 0; width: 100%; }
main .qtes-article__body > figure.single > p:empty { display: none; }
main .qtes-article__body > figure.single figcaption { color: var(--q-ink); font-size: var(--q-label); font-style: normal; font-weight: 700; line-height: var(--q-label-lh); margin: 16px 0 0; padding: 0; position: static; text-align: left; top: 0; }
main .qtes-article__body a { color: inherit; text-decoration: underline; }
/* links in running text turn blue under the pointer, like the news cards' titles; a section's buttons keep their
   white text (blue on the blue button hid it: Apply on a job) */
main .qtes-article__body a:hover, .page-template-template-about main > .container.qtes-section a:not(.action):hover, .qtes-contact__card address a:hover { color: var(--q-blue); }

/* ---- Legal (Figma "Legal", "Legal / Legal Notice", "Legal / Privacy Policy"). Overview: text-only news cards
   (padding 24), 96 px under the header, the footer at the bottom of the window. A document: title 60/64, 56 to the
   lead (28/40 medium), 56 to the text 24/38; paragraphs and lists one line apart; headings 48/52 and 24/28 (sections
   48 apart, 16 to their text) ---- */
body.page-template-template-legal { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.page-template-template-legal > .main { flex: 1 0 auto; }
.qtes-legal-tiles, .qtes-legal { padding-top: var(--q-band); }
.qtes-card--text .qtes-card__body { padding-top: 24px; }
main .qtes-legal > h1 { color: var(--q-ink); font-size: var(--q-h1); letter-spacing: 0; line-height: var(--q-h1-lh); margin: 0; max-width: none; padding: 0; text-align: left; }
.qtes-legal__text { margin-top: var(--q-gap); }
main .qtes-legal__text > * { margin: 0; max-width: none; padding-bottom: 0; padding-top: 0; }
.qtes-legal .qtes-legal__text > * { margin-bottom: 0; }
main .qtes-legal__text > :is(p, ul, ol) { color: var(--q-ink); font-size: var(--q-body); line-height: var(--q-body-lh); }
main .qtes-legal__text > :is(ul, ol) { padding-left: 1.5em; }
main .qtes-legal__text > ul { list-style: disc outside; }
main .qtes-legal__text > ol { list-style: decimal outside; }
main .qtes-legal__text > :is(ul, ol) > li { font-size: inherit; line-height: inherit; margin: 0; }
main .qtes-legal__text > :is(h2, h3) { color: var(--q-ink); font-weight: 700; letter-spacing: 0; text-align: left; }
main .qtes-legal__text > h2 { font-size: var(--q-h2); line-height: var(--q-h2-lh); margin-top: var(--q-gap); }
main .qtes-legal__text > h3 { font-size: var(--q-h3); line-height: var(--q-h3-lh); margin-top: 48px; }
main .qtes-legal__text > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: var(--q-body-lh); }
main .qtes-legal__text > :is(h2, h3) + :is(p, ul, ol) { margin-top: 16px; }
main .qtes-legal__text > p:first-child { font-size: var(--q-lead); font-weight: 500; line-height: var(--q-lead-lh); }
main .qtes-legal__text > p:first-child + * { margin-top: var(--q-gap); }
main .qtes-legal__text > :first-child { margin-top: 0; }
main .qtes-legal__text a { color: inherit; text-decoration: underline; }
main .qtes-legal__text a:hover { color: var(--q-blue); }