/*
 * Classe365 site styles: base, shared header and footer.
 * Page-specific styles belong in their own file, added from the page
 * template with $this->Html->css('name', ['block' => true]).
 *
 * Breakpoints: header collapses below 1100px (compact 1100-1279px),
 * footer goes 7 -> 4 columns below 1280px and 2 columns below 768px.
 *
 * Responsive: every rule for a screen width lives in that width's single media
 * query at the end of this file (widest first), not next to each section.
 */

/* ---------- Design tokens ----------
 * Every color, font size and spacing value in the project comes from here.
 * Change a token once and it updates everywhere.
 */
:root {
    /* Colors */
    --color-text: #111111;
    --color-text-secondary: #737373;
    --color-text-muted: #6b6b6b;
    --color-text-desc: #171717;
    --color-border: #E5E5E5;
    --color-surface: #ffffff;
    --color-surface-muted: #f7f7f8;
    --color-surface-hover: #f5f5f7;
    --color-dark: #1a1a1a;
    --color-dark-text: #ffffff;
    --color-brand: #5b5fd6;
    --color-brand-soft: #F0F1FD;
    --color-highlight-soft: #E4F2B4;
    --color-play: #2991FF;
    --color-play-ring: #2991FF33;
    /* 20% */
    --color-success: #22a55b;

    /* Type scale: use these (or the .heading-* / .text-* classes), never raw px */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --fs-display: 61px;
    --fs-title: 44px;
    --fs-h2: 36px;
    --fs-h3: 28px;
    --fs-h4: 16px;
    --fs-h5: 18px;
    --fs-lead: 17px;
    --fs-body: 16px;
    --fs-18: 18px;
    --fs-ui: 15px;
    --fs-small: 14px;
    --fs-caption: 13px;
    --fs-tiny: 12px;
    --fs-label: 11px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-snug: 16px;
    --lh-body-desc: 21px;
    --lh-body: 24px;
    --lh-tight: 27px;
    --lh-heading: 53px;
    --lh-display: 70px;
    --lh-h3: 35px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;

    /* Layout */
    --container-max: 1400px;
    --container-pad: 32px;
    --header-height: 70px;
    --top-bar-height: 38px; /* thin bar above the menu (element: header) */
    --section-space: var(--space-9);
    --radius-sm: 2px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;
}

/* ---------- Base ---------- */

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

body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

body.has-menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 8px 12px;
    background: var(--color-dark);
    color: var(--color-dark-text);
}

/* Shown only when reached with the keyboard (Tab), not when the browser restores focus
   after a refresh or on a mouse click. */
.skip-link:focus-visible {
    top: 8px;
}

:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* ---------- Typography ----------
 * Headings: .heading-display, .heading-2 ... .heading-5
 * Text:     .text-lead, .text-body, .text-small, .text-caption, .text-tiny
 * Colors:   .text-secondary, .text-muted
 */

.heading-display,
.heading-2,
.heading-3,
.heading-4,
.heading-5 {
    margin: 0;
    color: var(--color-text);
}

.heading-display {
    font-size: var(--fs-display);
    font-weight: var(--fw-regular);
    line-height: var(--lh-display);
    letter-spacing: -2%;
}

.heading-2 {
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: -2%;
}

.heading-3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-h3);
}

.heading-4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
}

.heading-5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

.text-lead,
.text-body,
.text-small,
.text-caption,
.text-tiny {
    margin: 0;
}

.text-lead {
    color: var(--color-text-secondary);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
}

.text-body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.text-small {
    font-size: var(--fs-small);
    line-height: var(--lh-body-desc);
}

.text-caption {
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}

.text-tiny {
    font-size: var(--fs-tiny);
    line-height: var(--lh-snug);
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-muted {
    color: var(--color-text-muted);
}

.fw-normal {
    font-weight: var(--fw-regular);
}

/* Cut text after 2 lines with "..." (e.g. card descriptions). */
.line-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-semibold {
    font-weight: var(--fw-semibold);
}

.font-size-18 {
    font-size: var(--fs-18);
}

/* ---------- Buttons ----------
 * <a class="btn btn--dark">   black, primary action
 * <a class="btn btn--outline"> white with border, secondary action
 * Wrap several in .btn-group.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 0.7px solid transparent;
    border-radius: var(--radius);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--dark {
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.btn--dark:hover,
.btn--dark:focus-visible {
    background: var(--color-brand);
}

.btn--outline {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.btn--outline:hover {
    border-color: #cfcfcf;
    background: var(--color-surface-hover);
}

/* Smaller button, e.g. "Learn more" inside a card or list. */
/* .btn--sm {
    padding: 8px 10px;
    font-size: var(--fs-body);
} */

/* Square icon-only button, e.g. the small download buttons. Give it an aria-label. */
.btn--icon {
    width: 38px;
    height: 34px;
    padding: 0;
}

.btn--icon .icon {
    width: 13px;
    height: 13px;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ---------- Small components ---------- */

/* Rounded label, e.g. "Powered by the Classe365 + Hiree365 ecosystem". */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: #fafafa;
    color: var(--color-text);
    font-weight: var(--fw-medium);
    border: 0.7px solid var(--color-border);
    font-size: var(--fs-tiny);
    line-height: var(--lh-snug);
}

.pill .icon {
    width: 12px;
    height: 12px;
    color: var(--color-success);
}

/* Inline list of short points, each with a check icon. */
.check-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-tiny);
    line-height: var(--lh-snug);
    list-style: none;
}

.check-list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.check-list .icon {
    width: 14px;
    height: 14px;
    color: var(--color-brand);
}

/* Bordered link with icon, label and play marker, e.g. a product module. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    /* a <button> on the home module grid, so it doesn't navigate: reset the button look */
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 6px;
    border: 0.7px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Hover / keyboard focus: grey fill, no border, purple play button. */
.chip:hover,
.chip:focus-visible {
    border-color: transparent;
    background: #efeff1;
}

.chip__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.chip__play {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    background: #efeff1;
    transition: background-color 0.15s ease;
}

.chip__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--color-text);
    transform: translate(-35%, -50%);
    transition: border-left-color 0.15s ease;
}

.chip:hover .chip__play,
.chip:focus-visible .chip__play {
    background: var(--color-brand);
}

.chip:hover .chip__play::after,
.chip:focus-visible .chip__play::after {
    border-left-color: var(--color-dark-text);
}

/* Row of app/web download badges (images). */
.store-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.store-badge img {
    display: block;
    width: auto;
    height: 28px;
}

/* Small dark label, e.g. "Enterprise". */
.tag {
    display: inline-block;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-dark);
    color: var(--color-dark-text);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    margin-left: 10px;
}

/* Brand-colored text link with a trailing arrow icon. */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-brand);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    text-decoration: none;
}

.arrow-link .icon {
    width: 14px;
    height: 14px;
}

/* Hover/focus: the text gets an underline; the arrow stays put. */
.arrow-link:hover,
.arrow-link:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Smaller arrow link, e.g. "Learn about ..." at the bottom of a card. */
.arrow-link--sm {
    gap: var(--space-1);
    font-size: var(--fs-label);
}

.arrow-link--sm .icon {
    width: 12px;
    height: 12px;
}

/* Grey divider band between sections, with a few white mosaic squares.
   Markup: <div class="container" aria-hidden="true"><div class="mosaic-band"><svg ...></div></div>
   --mosaic-band-offset moves the squares horizontally. */
.mosaic-band {
    --mosaic-band-offset: 57%;
    position: relative;
    height: calc(2 * var(--space-8));
    overflow: hidden;
    background: var(--mosaic-band-bg, #FAFAFA);
    /* border: 0.7px solid var(--color-border); */
}

/* 'sideBorders' => true: lines on the left and right of the band. */
.mosaic-band.mosaic-band--sides {
    border-inline: 0.7px solid var(--color-border);
}

.mosaic-band__squares {
    position: absolute;
    top: 0;
    left: var(--mosaic-band-offset);
    height: 100%;
    width: auto;
    fill: var(--color-surface);
}

/* Centered section heading + description (e.g. "One platform, tailored to how you operate").
   <div class="section-intro">
       <h2 class="heading-2 section-intro__title">...</h2>
       <p class="text-body section-intro__description">...</p>
   </div> */
.section-intro {
    padding: var(--space-9) var(--space-6);
    text-align: center;
}

.section-intro__title {
    max-width: var(--section-intro-title-w, 560px);
    margin-inline: auto;
}

.section-intro__description {
    max-width: 650px;
    margin: var(--space-4) auto 0;
    color: var(--color-text-desc);
}

/* Ruled background: thin horizontal lines every --ruled-gap (the design's "lined paper"
   pattern, e.g. around the "Intelligence that powers every step" strip). Content on top
   needs its own background to hide the lines. */
.ruled {
    --ruled-gap: 24px;
    background-image: repeating-linear-gradient(to bottom,
            var(--color-border) 0 1px,
            transparent 1px var(--ruled-gap));
}

/* Lined strip between two sections (element: ruled_band): --ruled-rows rows of lines with
   the page's side lines. Shifted up 1px, so its first line doesn't double the line of the
   section above; the section below draws the last one. */
.ruled-band {
    height: calc(var(--ruled-rows, 5) * var(--ruled-gap));
    border-inline: 0.7px solid var(--color-border);
    background-position: 0 -1px;
}

/* ---------- Logo strip (element: logo_strip; list also reused by the home take-off row) ---------- */

.logo-strip {
    padding: 51px 75px 79px;
    text-align: center;
    border: 0.7px solid var(--color-border);
}

.logo-strip__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    margin: var(--space-9) 0 0;
    padding: 0;
    list-style: none;
}

.logo-strip__logos img {
    display: block;
    width: auto;
    max-width: 180px;
    height: 60px;
    object-fit: contain;
}

/* "Trusted by" strip: an even grid of 6 columns; each logo has the size the element gives it
   (--logo-w / --logo-h, the same visual area for every logo). */
.logo-strip__logos--sized {
    display: grid;
    grid-template-columns: repeat(var(--logo-cols, 6), minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
}

.logo-strip__logos--sized li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-strip__logos--sized img {
    width: var(--logo-w, auto);
    max-width: 100%;
    height: var(--logo-h, 48px);
}

/* Continuous marquee (site.js sets the distance and the duration). */
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
    }
}

/* ---------- Pricing CTA + testimonial (element: pricing_cta) ----------
 * A lavender box centred in a white area, mosaics at its top-right and bottom-left
 * corners; then a testimonial row with a lined grid holding the G2 logo.
 */

.cta {
    border: 0.7px solid var(--color-border);
}

/* Optional "Explore other modules" row under the box ('modules' on the element): a small
   heading and a row of linked module chips with their icons, right under the box (the
   stage loses its bottom padding, and the bottom mosaic moves down with the box). */
.cta--with-modules .cta__stage {
    padding-bottom: 0;
}

.cta--with-modules .cta__mosaic--bottom {
    bottom: 0;
}

.cta__modules {
    padding: var(--space-8) var(--space-7) var(--space-7);
}

.cta__modules-title {
    margin: 0;
    color: var(--color-text);
}

.cta__modules-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5); /* 24px between modules, as in the design */
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.cta__module {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--space-2);
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cta__module:hover {
    border-color: #cfcfcf;
    background: var(--color-surface-hover);
}

.cta__module img {
    display: block;
    width: 12px;
    height: 12px;
}

.cta__stage {
    --cta-pad-y: 83px;
    --cta-pad-x: 120px;
    position: relative;
    padding: var(--cta-pad-y) var(--cta-pad-x);
}

.cta__box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 897 / 405;
    /* the design's box shape */
    background: var(--color-brand-soft);
}

.cta__box .section-intro__description {
    max-width: var(--cta-desc-w, 480px);
    /* wraps like the design */
}

.cta__title {
    max-width: var(--cta-title-w, 640px);
    /* line break set in home.php: "...EdTech / from $100/month" */
}

.cta__actions {
    justify-content: center;
    margin-top: var(--space-8);
}

/* Mosaics hug the box corners (as in the design). */
/* Above the box: the mosaics overlap its corners, as in the design. */
.cta__mosaic {
    position: absolute;
    z-index: 2;
    width: auto;
    height: 157px;
}

/* 2 x 2 mosaic whose inner corner sits exactly on the box's top-right corner: each cell is
   as tall as the space above the box, and it's shifted right by one cell. */
.cta__mosaic.cta__mosaic--top {
    top: 0;
    right: calc(var(--cta-pad-x) - var(--cta-pad-y));
    height: calc(2 * var(--cta-pad-y));
}

/* Bottom edge level with the box's bottom edge. */
.cta__mosaic--bottom {
    bottom: var(--cta-pad-y);
    left: 0;
    height: 222px;
}

/* 'cta--fill' variant: the lavender fills the whole bordered box and the mosaics sit inside its
   top-right and bottom-left corners at their own size (Education Leadership Series). */
.cta--fill .cta__stage {
    padding: 0;
    background: var(--color-brand-soft);
}

.cta--fill .cta__box {
    aspect-ratio: auto;
    min-height: 660px; /* the design's box: 382px tall in a 770px-wide frame */
    background: none; /* the stage is lavender; the box would hide the mosaics */
    padding: var(--space-9) var(--space-6);
}

.cta--fill .cta__mosaic.cta__mosaic--top {
    top: 0;
    right: 0;
    height: 172px;
}

.cta--fill .cta__mosaic--bottom {
    bottom: 0;
    left: 0;
    height: 243px;
}

.cta--fill .cta__mosaic {
    z-index: 0; /* behind the text if they ever meet on a narrower screen */
}

/* Right after a box that already draws its bottom line (More episodes / More customer stories,
   short clips): no second line on top. */
.els-more-section + .cta-section .cta,
.clips-section + .cta-section .cta {
    border-top: 0;
}

/* 'cta--flip' (with 'cta--fill'): the mosaics in the other two corners - top-left and
   bottom-right - at their own size (customer story pages). */
.cta--fill.cta--flip .cta__mosaic.cta__mosaic--top {
    right: auto;
    left: 0;
    height: auto;
}

.cta--fill.cta--flip .cta__mosaic--bottom {
    right: 0;
    left: auto;
    height: auto;
}

/* Testimonial row: quote + author on the left, lined grid with the logo on the right. */
.cta__testimonial {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 308px;
    margin: 0;
    border-bottom: 0.7px solid var(--color-border);
}

/* Empty 24px strip under the name/role row (the grid on the right continues through it). */
.cta__quote-area {
    padding-bottom: var(--space-5);
    /* 24px; --ruled-gap only exists inside .ruled */
    border-right: 0.7px solid var(--color-border);
}

/* Testimonial quote with bold curly quote marks; the opening one hangs in the margin. */
.cta__quote {
    position: relative;
}

.cta__quote p {
    margin: 0;
}

.cta__quote p::before,
.cta__quote p::after {
    font-weight: var(--fw-bold);
    font-size: 1.4em;
    line-height: 0;
}

.cta__quote p::before {
    content: "\201C";
    position: absolute;
    left: -0.75em;
}

.cta__quote p::after {
    content: "\201D";
}

.cta__quote {
    /* default width; a page can override it with 'quoteWidth' on the element */
    max-width: var(--quote-w, 850px);
    font-size: 18px;
    margin: 32px 59px;
    line-height: 26px;
    font-weight: 500;
}

.cta__author {
    display: flex;
    flex-direction: column;
    padding: 17px 59px;
    /* top + bottom lines; the bottom one starts the empty 24px strip above the next block */
    border-block: 0.7px solid var(--color-border);
}

.cta_author_title {
    font-size: 18px;
    line-height: 27px;
    color: var(--color-text-desc);
    font-weight: 500;
}

/* Lined grid (thin lines every 60px across, and at the thirds down) behind the logo. */
/* 3 x 3 boxes: the logo fills the centre box exactly; the lines run the full width/height
   and touch the logo on all four sides (as in the design). */
.cta__logo-area {
    --g2-size: 130px;
    --g2-a: calc(50% - var(--g2-size) / 2);
    --g2-b: calc(50% + var(--g2-size) / 2);
    display: grid;
    place-items: center;
    background:
        linear-gradient(var(--color-border), var(--color-border)) var(--g2-a) 0 / 1px 100% no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) var(--g2-b) 0 / 1px 100% no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) 0 var(--g2-a) / 100% 1px no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) 0 var(--g2-b) / 100% 1px no-repeat;
}

.cta__logo {
    display: block;
    width: var(--g2-size);
    height: var(--g2-size);
    object-fit: contain;
}

/* CTA testimonial: quote marks sit lower, as in the design (opening mark level with the
   first line, closing mark on the text's baseline). */
.cta__quote p::before {
    top: 0.75em;
}

.cta__quote p::after {
    position: relative;
    top: 0.3em;
    margin-left: 0.1em;
}

/* Standalone testimonial (element: testimonial, 'standalone' => true): lined strip above. */
.testimonial-block {
    border-inline: 0.7px solid var(--color-border);
}

.testimonial-block__rule {
    height: calc(5 * var(--ruled-gap));
    background-position: 0 -1px;
}

/* ---------- Feature cards (home AI cards; element: module_cards) ----------
 * Icon column with a divider, title row, body. Shared, so it lives here. */
.ai__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 0.7px solid var(--color-border);
    background: var(--color-border);
    list-style: none;
    border-bottom: 0;
}

/* Each card: an icon column (with a divider running the full height) + title/body column. */
.ai-feature {
    --ai-icon-col: 56px;
    display: grid;
    grid-template-columns: var(--ai-icon-col) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    background:
        linear-gradient(var(--color-border), var(--color-border)) var(--ai-icon-col) 0 / 1px 100% no-repeat,
        var(--color-surface);
}

.ai-feature__icon,
.ai-feature__title {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 0.7px solid var(--color-border);
    font-size: var(--fs-body);
    line-height: 27px;
}

.ai-feature__icon {
    justify-content: center;
    color: var(--color-brand);
}

.ai-feature__icon .icon {
    width: 18px;
    height: 18px;
}

.ai-feature__title {
    margin: 0;
    padding: 0 var(--space-3);
}

.ai-feature__body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-height: 155px;
    padding: var(--space-4) var(--space-5);
}

/* 3 cards per row (e.g. module cards on inner pages). */
.ai__features.ai__features--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Image icon on a lavender cell (module icons). */
.ai-feature__icon.ai-feature__icon--tint {
    height: auto;
    min-height: 48px;
    background: var(--color-brand-soft);
}

.ai-feature__icon img {
    display: block;
    width: 22px;
    height: 18px;
}

.ai-feature__body p+p {
    margin-top: var(--space-4);
}

/* ---------- Module cards (element: module_cards) ---------- */
.module-cards {
    border: 0.7px solid var(--color-border);
}

.module-cards__intro {
    position: relative;
    padding-block: var(--space-9) 76px;
}

.module-cards__title {
    max-width: 640px;
}

.module-cards__actions {
    justify-content: center;
    margin-top: var(--space-5);
}

/* Mosaics: top-left and bottom-right corners of the intro (as in the design). */
.module-cards__mosaic {
    position: absolute;
    width: auto;
}

.module-cards__mosaic--left {
    top: var(--space-6);
    left: 0;
    height: 222px;
}

.module-cards__mosaic--right {
    right: 0;
    bottom: 0;
    height: 120px;
}

/* One full-width mosaic image (left mosaic, transparent middle, right mosaic), as in the
   design: white space above it (--mosaic-top, level with the title), then the image at its
   real proportions down to the bottom line. The left half is pinned to that top line and the
   right half to the bottom, so nothing gaps or stretches if the text needs more height. */
.module-cards {
    container-type: inline-size;
}

.module-cards__intro--mosaic {
    --mosaic-top: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--mosaic-top) + 100cqw * var(--mosaic-h, 0.1667));
    padding-block: var(--space-6);
    isolation: isolate;
}

.module-cards__intro--mosaic::before,
.module-cards__intro--mosaic::after {
    content: "";
    position: absolute;
    top: var(--mosaic-top);
    bottom: 0;
    z-index: -1;
    width: 50%;
    background-image: var(--mosaic-url);
    background-repeat: no-repeat;
    background-size: 200% auto;
    /* the full image spans the whole intro width */
}

.module-cards__intro--mosaic::before {
    left: 0;
    /* bottom, like the right half: both sit on the cards' line when the title and
       buttons need more height than the mosaic image has */
    background-position: left bottom;
}

.module-cards__intro--mosaic::after {
    right: 0;
    background-position: right bottom;
}

/* Cards: the list's own top border is the intro's bottom line. */
.module-cards__list {
    border-inline: 0;
}

/* Title row as tall as the lavender icon cell. */
.module-cards .ai-feature__title {
    height: 48px;
}

.module-cards .ai-feature__body {
    min-height: 0;
    padding: 26px 16px;
}

/* ---------- Trust block (element: trust_block) ----------
 * Light "Enterprise Trust" block: text + buttons left, 3 x 2 greyscale badges right. */
.trust-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-7) var(--space-5);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.trust-block__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-success);
}

.trust-block__eyebrow .icon {
    width: 18px;
    height: 18px;
}

.trust-block__title {
    max-width: 420px;
    margin-top: var(--space-4);
}

.trust-block__description {
    max-width: 530px;
    margin-top: var(--space-4);
}

.trust-block__actions {
    margin-top: var(--space-7);
}

.trust-block__badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-7);
    justify-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Optional lined strip under the block ('rule' => true): lines every 16px, closed by a
   bottom line (as in the design). */
.trust-block__rule {
    --ruled-gap: 16px;
    height: calc(4 * var(--ruled-gap));
    border: 0.7px solid var(--color-border);
    border-top: 0;
    border-bottom: 0;
    background-position: 0 -1px;
}

.trust-block__badges img {
    display: block;
    width: 140px;   /* as in the design; the dark block sets its own size */
    height: 140px;
    object-fit: contain;
    filter: grayscale(1);
}

/* 'grayscale' => false: badges in their own colours. */
.trust-block--color .trust-block__badges img {
    filter: none;
}

/* 'dark' => true: dark background, light text; the buttons are restyled to stay visible on
   it (dark one outlined in white, outline one white). */
.trust-block--dark {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.trust-block--dark .trust-block__title {
    color: var(--color-dark-text);
}

.trust-block--dark .trust-block__description {
    color: rgba(255, 255, 255, 0.75);
}

.trust-block--dark .btn--dark {
    border-color: rgba(255, 255, 255, 0.7);
    background: transparent;
    color: var(--color-dark-text);
}

.trust-block--dark .btn--dark:hover,
.trust-block--dark .btn--dark:focus-visible {
    border-color: var(--color-dark-text);
    background: rgba(255, 255, 255, 0.1);
}

.trust-block--dark .btn--outline {
    border-color: var(--color-surface);
}

/* Dark layout, as in its design: more room around, the buttons at the bottom of the text
   column (level with the badges' bottom row), and a fixed 3 x 2 grid of 130px badges. */
.trust-block--dark {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-9);
    padding: var(--space-9) 80px var(--space-9) calc(var(--space-8) + var(--space-2));
}

.trust-block--dark .trust-block__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trust-block--dark .trust-block__title,
.trust-block--dark .trust-block__description {
    margin-top: var(--space-5);
}

.trust-block--dark .trust-block__description {
    font-size: var(--fs-small);
    line-height: var(--lh-body-desc);
}

.trust-block--dark .trust-block__actions {
    margin-top: auto;
    padding-top: var(--space-8);
}

.trust-block--dark .trust-block__badges {
    grid-template-columns: repeat(3, 130px);
    gap: calc(var(--space-7) + var(--space-1));
}

.trust-block--dark .trust-block__badges img {
    width: 130px;
    height: 130px;
}

/* ---------- Story spotlight (element: story_spotlight) ----------
 * Dark panel: heading block + button, then one story card (photo | lavender story). */
.story-spotlight {
    padding: var(--space-8) var(--space-9) var(--space-9);
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.story-spotlight__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
}

.story-spotlight__eyebrow {
    margin: 0;
    color: #94a3b8;
}

.story-spotlight__title {
    margin-top: var(--space-2);
    color: var(--color-dark-text);
}

.story-spotlight__description {
    max-width: 420px;
    margin-top: var(--space-5);
    color: rgba(255, 255, 255, 0.85);
}

.story-spotlight__button {
    flex-shrink: 0;
    margin-top: var(--space-7);
    border: 0;
}

.story-spotlight__card {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
    margin-top: var(--space-8);
}

/* Photo side: logo top-left, person caption at the bottom (same look as the home stories). */
.story-spotlight__media {
    position: relative;
    min-height: 460px;
    overflow: hidden;
}

.story-spotlight__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-spotlight__photo--flip {
    transform: scaleX(-1);
}

.story-spotlight__logo {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    width: auto;
    height: 20px;
}

.story-spotlight__person {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--space-4);
    border-top: 0.7px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(25, 25, 25, 0.175) 0%, rgba(25, 25, 25, 0.92) 100%);
    backdrop-filter: blur(2px);
    color: var(--color-dark-text);
}

.story-spotlight__person p {
    margin: 0;
    line-height: 20px;
}

.story-spotlight__person p+p {
    max-width: 260px;
    /* role wraps onto 2 lines, as in the design */
}

.story-spotlight__story {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-8) var(--space-7);
    background: var(--color-brand-soft);
    color: var(--color-text);
}

.story-spotlight__story-title {
    font-size: var(--fs-h2);
    line-height: 1.2;
}

.story-spotlight__story-text {
    max-width: 440px;
    margin-top: var(--space-3);
    color: var(--color-text-desc);
}

.story-spotlight__link {
    margin-top: auto;
    padding-top: var(--space-6);
}

/* ---------- Integrations block (element: integrations_block) ----------
 * Background painting (per page), text top-left, one logos image below. */
.integrations-block {
    /* min-height: 580px; */
    padding: 64px 96px 200px;
    background: var(--integrations-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.integrations-block__title {
    max-width: 640px;
}

.integrations-block__description {
    max-width: 600px;
    margin-top: var(--space-5);
    color: var(--color-text-desc);
}

.integrations-block__button {
    margin-top: var(--space-6);
}

.integrations-block__logos {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin-top: 98px;
}

/* ---------- Feature grid (element: feature_grid) ----------
 * Intro (text left, mosaic top-right), cards in rows of 3 between two gutter lines,
 * optional Hiree365 promo card spanning 2 cells, lined strip at the bottom. */
.feature-grid {
    --grid-gutter: var(--space-9);
    /* 64px side gutters, as in the design */
    --corner-left-h: 55px;
    /* bottom-left mosaic height = blank space before the lines */
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
}

.feature-grid__intro {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    /* 52px under the description; the height comes from the text, not the mosaic */
    padding: var(--grid-intro-pt, var(--space-8)) 0 var(--grid-intro-pb, 52px) var(--space-9); /* 'introPaddingTop' / 'introPaddingBottom' per page */
}

.feature-grid__text {
    /* default width; a page can override it with 'textWidth' on the element. On smaller
       desktops it gives way (at most 68% of the area by default - 'textShare' on the element -
       less the gaps), so the mosaic on the right keeps the rest instead of being squeezed. */
    max-width: min(var(--grid-text-w, 700px), var(--grid-text-share, 0.68) * 100% + var(--grid-text-share, 0.68) * var(--space-9) - var(--space-9) - var(--space-6));
}

/* Title / description alone ('titleWidth' / 'descriptionWidth'); default: the full column. */
.feature-grid__title {
    max-width: var(--grid-title-w, none);
}

/* 'titleSize' on the element: this page's own title size. */
.feature-grid[style*="--grid-title-fs"] .feature-grid__title {
    font-size: var(--grid-title-fs);
    line-height: 1.2;
}

.feature-grid__description {
    max-width: var(--grid-desc-w, none);
    margin-top: var(--space-5);
    color: var(--color-text-desc);
}

.feature-grid__mosaic {
    /* fills the area's height in the top-right corner (scaled to fit, never taller) */
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    /* never wider than the space right of the text column (the area minus its left padding,
       the text's width and a gap), so on smaller screens the mosaic shrinks instead of lying
       over the text; at most 45% */
    max-width: clamp(0px, 100% - var(--space-9) - min(var(--grid-text-w, 700px), var(--grid-text-share, 0.68) * 100% - var(--space-9) - var(--space-6)) - var(--space-6), 45%);
    height: var(--grid-mosaic-h, 100%); /* 'mosaicHeight' on the element, else the area's height */
    max-height: 100%;
    object-fit: contain;
    /* when the width runs out before the height (smaller screens), the picture sits at the
       bottom, standing on the line, instead of floating at the top */
    object-position: right bottom;
}

/* 'mosaicBottom' => true: stands on the heading area's bottom line. */
.feature-grid__mosaic.feature-grid__mosaic--bottom {
    top: auto;
    bottom: 0;
    object-position: right bottom;
}

.feature-grid__body {
    position: relative;
    padding: 0 var(--grid-gutter);
    /* last row of cards sits on the bottom line */
    border-top: 0.7px solid var(--color-border);
    background:
        linear-gradient(var(--color-border), var(--color-border)) var(--grid-gutter) 0 / 0.7px 100% no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) calc(100% - var(--grid-gutter)) 0 / 0.7px 100% no-repeat;
}

.feature-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grid-card {
    padding: var(--space-3) var(--space-3) var(--space-6);
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
}

/* First row: no top border (the line above the cards is already there). */
.grid-card:nth-child(-n + 3) {
    border-top: 0;
}

.grid-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.grid-card__title .icon,
.grid-card__img-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.grid-card__text {
    margin-top: var(--space-2);
    line-height: 20px;
}

/* Hiree365 promo: fills the last 2 cells. */
.grid-card--promo {
    grid-column: span 2;
    border: 0;
    background: #eef2f7;
}

.grid-card__promo-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.grid-card__powered {
    gap: var(--space-1);
    padding: 8px 10px;
    font-size: var(--fs-tiny);
    color: var(--color-text-secondary);
}

.grid-card__powered .icon {
    width: 16px;
    height: 16px;
    color: var(--color-success);
}

.grid-card__promo-logo {
    width: auto;
    height: 20px;
    margin-left: auto;
}

/* Corner mosaics (as in the design): the right one stands in the right gutter on the
   card area's bottom line; the left one hangs just below that line into the lined strip. */
.feature-grid__corner {
    position: absolute;
    width: auto;
}

.feature-grid__corner--right {
    right: 0;
    bottom: 0;
    /* fills the right gutter exactly, so it never laps over the cards whatever
       proportions the page's mosaic image has */
    width: var(--grid-gutter);
    height: auto;
}

.feature-grid__corner--left {
    top: 0;
    left: 0;
    height: var(--corner-left-h);
}

/* 'singleLine' => true: the last row of cards has no bottom border of its own; the strip's
   full-width line below is the only line (3 cards per row). */
.feature-grid--single-line .grid-card:nth-last-child(-n + 3) {
    border-bottom: 0;
}

/* Lined strip: blank beside the left mosaic (exactly its height), then thin lines, so the
   mosaic ends where the first line starts. */
.feature-grid__rule {
    position: relative;
    height: calc(var(--corner-left-h) + 5 * var(--ruled-gap));
    padding-top: var(--corner-left-h);
    border-top: 0.7px solid var(--color-border);
    background-origin: content-box;
    background-clip: content-box;
}

/* Optional tags under the description ('tags'): the .chip look, larger, not clickable. */
.feature-grid__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.chip.feature-grid__tag {
    gap: 6px;
    padding: 6px 10px;
    font-size: var(--fs-ui);
    line-height: var(--lh-body-desc);
    cursor: default;
}

.chip.feature-grid__tag:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}

/* A tag with a 'url': a link to the module's page (same look, clickable). */
.chip.feature-grid__tag--link {
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}

.chip.feature-grid__tag--link:hover {
    border-color: #cfcfcf;
    background: var(--color-surface-hover);
}

/* 2 per row ('columns' => 2): larger cards with wider gaps; each row's top and bottom lines
   carry on across the gap between the two cards (as in the design). */
/* Space under the text only, so the mosaic still stands on the line below. */

.feature-grid--2 .feature-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.feature-grid--2 .grid-card {
    position: relative;
    padding: var(--space-5) var(--space-4) var(--space-7);
}

/* Only the first 2 cards are in the first row. */
.feature-grid--2 .grid-card:nth-child(3) {
    border-top: 0.7px solid var(--color-border);
}

/* The right-hand card reaches back across the gap, with its left line drawn at the gap's
   edge: the row's top and bottom lines are then its own borders, running across the gap
   exactly level with the left card's. */
.feature-grid--2 .grid-card:nth-child(even) {
    margin-left: calc(-1 * var(--space-6));
    padding-left: calc(var(--space-6) + var(--space-4));
    border-left: 0;
    background:
        linear-gradient(var(--color-border), var(--color-border)) var(--space-6) 0 / 0.7px 100% no-repeat,
        var(--color-surface);
}

/* Last row (the odd card among the last two, and any card after it): no bottom line of its
   own - the lined strip's top line closes it, so there's a single line there. */
.feature-grid--2 .grid-card:nth-child(odd):nth-last-child(-n + 2),
.feature-grid--2 .grid-card:nth-child(odd):nth-last-child(-n + 2)~.grid-card {
    border-bottom: 0;
}

/* Lined strip: 5 lines 24px apart, then a taller 44px last band down to the bottom line
   (as in the design). The lines are drawn only over the first 4 bands. */
.feature-grid--2 .feature-grid__rule {
    height: calc(var(--corner-left-h) + 4 * var(--ruled-gap) + 44px);
    background-repeat: no-repeat;
    background-size: 100% calc(4 * var(--ruled-gap) + 1px);
}

.feature-grid--2 .grid-card__title {
    gap: var(--space-3);
    font-size: var(--fs-h5);
    line-height: var(--lh-tight);
}

.feature-grid--2 .grid-card__title .icon,
.feature-grid--2 .grid-card__img-icon {
    width: 20px;
    height: 20px;
}

.feature-grid--2 .grid-card__text {
    margin-top: var(--space-3);
}

/* ---------- FAQ (element: faq) ----------
 * Left: heading/text/button. Right: questions; one open at a time (site.js). */
.faq {
    display: grid;
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    border: 0.7px solid var(--color-border);
}

/* 'class' => 'faq--open-top': no line along the top (e.g. the Gradelink compare page). */
.faq.faq--open-top {
    border-top: 0;
}

/* 'class' => 'faq--list-gap': a gap above the first question, so it lines up with the title
   (e.g. the Gradelink compare page). */
.faq--list-gap .faq__list {
    padding-top: var(--space-5);
}

.faq__intro {
    padding: var(--space-8) var(--space-7);
    border-right: 0.7px solid var(--color-border);
}

.faq__description {
    max-width: 260px;
    margin-top: var(--space-5);
    color: var(--color-text-desc);
}

.faq__button {
    margin-top: var(--space-4);
}

/* Optional parts (a page passes them): the small label, text with links, the tinted note. */
.faq__eyebrow {
    margin: 0 0 var(--space-5);
    color: var(--color-text);
    font-size: 13px;
}

.faq__description--wide {
    max-width: 380px;
}

.faq__description a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Compact: lighter questions and answers, small icons, the list ends on its last line. */
.faq--compact .faq__list {
    padding-bottom: 0;
}

.faq--compact .faq-item:last-child {
    border-bottom: 0;
}

.faq--compact .faq-item__toggle .fw-semibold {
    font-size: 14px;
    font-weight: var(--fw-regular);
}

.faq--compact .faq-item__icon .icon {
    width: 18px;
    height: 18px;
}

.faq--compact .faq-item__answer {
    max-width: 560px;
    font-size: 13px;
}

.faq__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 0.7px solid #dcdcf5;
    border-radius: 6px;
    background: var(--color-brand-soft);
}

.faq__note > .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--color-brand);
}

.faq__note-title {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--fw-semibold);
}

.faq__note-text {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.faq__note-link {
    display: inline-block;
    margin-top: var(--space-2);
    color: var(--color-brand);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq__list {
    padding-bottom: var(--space-7);
}

.faq-item {
    border-bottom: 0.7px solid var(--color-border);
}

.faq-item__heading {
    margin: 0;
}

.faq-item__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5) var(--space-7) var(--space-5) var(--space-6);
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.faq-item__icon {
    display: inline-flex;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.faq-item__icon .icon {
    width: 20px;
    height: 20px;
}

/* ⊕ closed, purple ⊗ open; they swap in place with a small turn. */
.faq-item__icon--close {
    position: absolute;
    right: var(--space-7);
    opacity: 0;
    transform: rotate(-90deg);
    color: var(--color-brand);
}

.faq-item__toggle {
    position: relative;
}

.faq-item.is-open .faq-item__icon--plus {
    opacity: 0;
    transform: rotate(90deg);
}

.faq-item.is-open .faq-item__icon--close {
    opacity: 1;
    transform: none;
}

/* Smooth open/close: the panel's height animates between 0 and its content height
   (--faq-h, measured by site.js). */
.faq-item__panel {
    height: 0;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-item__panel {
    height: var(--faq-h, auto);
}

.faq-item__answer {
    max-width: 800px;
    padding: 0 var(--space-7) var(--space-5) var(--space-6);
    line-height: 22px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.faq-item.is-open .faq-item__answer {
    opacity: 1;
    transition-delay: 0.1s;
}

/* ---------- Final CTA ("Powered by AI", element: final_cta) ----------
 * Shared by all pages; each page passes its own background image.
 * Full-width background image (inline from home.php), text + buttons on the left, the
 * shared store badges on the right, app screenshots cut off at the bottom edge.
 */

.final-cta {
    overflow: hidden;
    padding: var(--space-8) var(--space-8) 0;
    border-inline: 0.7px solid var(--color-border);
    background: var(--final-cta-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.final-cta__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}

.final-cta__title {
    max-width: var(--final-cta-title-w, 700px);
    /* two lines like the design: "...Boost student / engagement." */
    margin-top: var(--space-1);
}

.final-cta__actions {
    margin-top: var(--space-6);
}

/* Same badges as the showcase, a little larger here (as in the design). */
.final-cta__stores .store-badge img {
    height: 36px;
}

/* Phone + desktop screenshots side by side, top-aligned, cut off by the section's
   bottom edge (as in the design: phone 28%, desktop 70% of the row). */
.final-cta__screens {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    max-width: 985px;
    /* Height scales with the width (985 x 480 at full size), so on every screen the
       two screenshots keep the same composition and are cut off at the same point. */
    aspect-ratio: 985 / 480;
    margin-top: var(--space-8);
    overflow: hidden;
}

.final-cta__mobile,
.final-cta__desktop {
    display: block;
    height: auto;
    border-radius: 12px;
}

.final-cta__mobile {
    flex: 0 0 28%;
    width: 28%;
}

.final-cta__desktop {
    flex: 1 1 0;
    min-width: 0;
}

/* One image instead of the pair ('image'): shown whole, as wide as the pair would be. */
.final-cta__screens--single {
    display: block;
    max-width: none; /* the full width of the block's content, as in the design */
    aspect-ratio: auto;
    overflow: visible;
}

.final-cta__single {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- AI & Agent Automation (element: ai_automation) ----------
 * Painted stage with the intro and the app screenshot (cut off at the stage's bottom edge,
 * as in the design), then the two module columns with their points, and a lined strip.
 */
.ai {
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
}

.ai__stage {
    position: relative;
    overflow: hidden;
    /* border-block: 0.7px solid var(--color-border); */
    /* the painting behind the whole stage (--ai-bg is set per page in home.php) */
    background: var(--ai-bg, none) center / cover no-repeat var(--color-surface-muted);
}

/* The text is inset; the screenshot below spans the stage's full width. */
.ai__intro {
    padding: 53px 44px 0;
}

.ai__title {
    max-width: 600px;
    margin-top: var(--space-2);
}

.ai__description {
    max-width: 550px;
    margin-top: var(--space-4);
    color: var(--color-text-desc);
}

.ai__actions {
    margin-top: var(--space-6);
}

/* Full width of the stage, shown whole, sitting on the stage's bottom edge. */
.ai__shot {
    display: block;
    width: 100%;
    height: auto;
    /* margin: 22px auto 0; */
    padding: 48px 36px 0;
}

/* Empty band under the screenshot area, closed by a line (as in the design). */
.ai__gap {
    height: calc(3 * var(--ruled-gap));
    border-bottom: 0.7px solid var(--color-border);
}

/* Two columns, each a module with four points. */
.ai-modules {
    /* Empty side gutters with a line each, like the other lined blocks in the design. */
    --ai-gutter: 56px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding-inline: var(--ai-gutter);
    border-bottom: 0.7px solid var(--color-border);
    background:
        linear-gradient(var(--color-border), var(--color-border)) var(--ai-gutter) 0 / 0.7px 100% no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) calc(100% - var(--ai-gutter)) 0 / 0.7px 100% no-repeat;
    list-style: none;
}

.ai-module {
    display: flex;
    flex-direction: column;
}

/* Title + description, closed by a line that carries on across the side gutters
   (the negative margins are what reach into them). */
.ai-module__head {
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
}

.ai-module:first-child .ai-module__head {
    margin-left: calc(-1 * var(--ai-gutter));
    padding-left: calc(var(--ai-gutter) + var(--space-6));
}

.ai-module:last-child .ai-module__head {
    margin-right: calc(-1 * var(--ai-gutter));
    padding-right: calc(var(--ai-gutter) + var(--space-6));
}

.ai-module+.ai-module {
    border-left: 0.7px solid var(--color-border);
}

.ai-module__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: 26px;
}

/* Link icon after a module title ('url' on the module). */
.ai-module__link {
    display: inline-flex;
    margin-left: 4px;
    color: var(--color-text);
}

/* The whole title (icon, name and link icon) is the link: hovering any part of it colours
   the link icon, and a click anywhere on it opens the page. The title is only as wide as
   its content, so the empty space beside it isn't clickable. */
.ai-module__title:has(.ai-module__link) {
    position: relative;
    width: fit-content;
}

.ai-module__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ai-module__link:hover,
.ai-module__link:focus-visible,
.ai-module__title:hover .ai-module__link {
    color: var(--color-brand);
}

.ai-module__link .icon {
    width: 16px;
    height: 16px;
}

/* Link icon 1px down: the titles are mostly lowercase, so the text's visual middle sits
   below the line box's middle that flex centres on. A margin, not position/top: positioning
   the link would shrink its ::after (the click area over the whole title) to the icon. */
.ai-module__link {
    margin-top: 2px; /* centred in the flex row, so 2px of margin moves it 1px */
}

/* The AI module icon file is wider than tall, so in its square box the letters sit low:
   2px up puts them level with the title's capitals. */
.ai-module__icon[src*="ai-module."] {
    position: relative;
    top: -2px;
}

.ai-module__icon {
    display: block;
    width: 22px;
    height: 22px;
}

.ai-module__description {
    margin-top: var(--space-2);
    color: var(--color-text-desc);
}

/* The four points sit in their own 2 x 2 grid, with lines between the cells. */
.ai-module__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    /* both rows the same height, as in the design */
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-point {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-5) var(--space-5) var(--space-5) 0;
}

/* Lines between the cells; the outer edges are drawn by the block itself. */
.ai-point:nth-child(odd) {
    border-right: 0.7px solid var(--color-border);
}

.ai-point:nth-child(-n + 2) {
    border-bottom: 0.7px solid var(--color-border);
}

.ai-point__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: var(--color-brand-soft);
    color: var(--color-brand);
}

.ai-point__icon .icon,
.ai-point__icon img {
    display: block;
    width: 45%;
    height: 45%;
}

.ai-point__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-point__title {
    color: var(--color-text);
}

/* Lined strip under the columns, like the design. */
.ai__rule {
    height: calc(5 * var(--ruled-gap));
    /* border-inline: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border); */
    background-position: 0 -1px;
}

.ai__eyebrow {
    color: var(--color-text-desc);
}

/* ---------- Solutions tabs (element: solutions_tabs) ----------
 * A list of items on one side, one image on the other. The open item's image crossfades in
 * (site.js); some pages also give each item its own painting behind the image.
 */

.solutions {
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

/* Intro layout comes from .section-intro (site.css). */
.solutions__intro {
    border-top: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

/* 'borderTop' => false: no line above the heading. */
.solutions__intro.solutions__intro--no-border-top {
    border-top: 0;
}

.solutions__body {
    display: grid;
    grid-template-columns: 47.5% 1fr;
}

.solutions__list {
    border-right: 0.7px solid var(--color-border);
}

.solution-item+.solution-item {
    border-top: 0.7px solid var(--color-border);
}

.solution-item__trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* one value for the item's spacing on all four sides (open: title side, see below) */
    padding: var(--solution-gap, 23px);
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: padding 0.3s ease;
}

/* Open item: a light grey background and the brand bar down its left edge (as in the design). */
.solution-item.is-active {
    background: var(--color-surface-muted);
    box-shadow: inset 3px 0 0 var(--color-brand);
}

/* 'autoplay': the open item's brand bar fills from top to bottom over --solutions-autoplay;
   when it is full site.js opens the next item. Paused (.is-paused) on hover or off screen. */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .solutions--autoplay .solution-item {
        position: relative;
    }

    .solutions--autoplay .solution-item.is-active {
        box-shadow: none;
    }

    .solutions--autoplay .solution-item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 3px;
        height: 100%;
        background: var(--color-brand);
        transform: scaleY(0);
        transform-origin: top;
        animation: solutions-progress var(--solutions-autoplay, 6s) linear forwards;
        pointer-events: none;
    }

    .solutions--autoplay.is-paused .solution-item.is-active::before {
        animation-play-state: paused;
    }
}

@keyframes solutions-progress {
    to {
        transform: scaleY(1);
    }
}

/* Open item: the same space above the label; only a small gap between the title and the
   description (the description area adds the bottom space). */
.solution-item.is-active .solution-item__trigger {
    padding-bottom: var(--space-2);
}

.solution-item__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94A3B8;
    transition: color 0.2s ease;
}

.solution-item__label .icon {
    width: 16px;
    height: 16px;
}

/* Icon after an item's title ('titleIcon' on the item), e.g. an external-link icon. */
.solution-item__title-icon {
    display: inline-flex;
    margin-left: 10px;
    vertical-align: -2px;
}

.solution-item__title-icon .icon {
    width: 18px;
    height: 18px;
}

.solution-item__title-icon[data-solution-link]:hover {
    color: var(--color-brand);
}

.solution-item.is-active .solution-item__label {
    color: var(--color-brand);
}

/* Hovering an item that isn't open: a very light grey background (lighter than the open
   item's), as in the design; the label keeps its colour (only the open item's is brand). */
.solution-item {
    transition: background-color 0.2s ease;
}

.solution-item:not(.is-active):hover {
    background: #fafafa;
}

/* Links inside an item's description ('descriptionLinks'): brand colour; on hover medium
   weight and underlined (as in the design). */
.solution-item__text-link {
    color: var(--color-brand);
    text-decoration: none;
}

/* Link inside a feature row's description ('descriptionLinks'): underlined, as in the design;
   no change on hover, so the text never shifts. */
.feature-row__text-link {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tab description link on hover: only an underline (no weight change, so the text never shifts). */
.solution-item__text-link:hover,
.solution-item__text-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Smooth open/close: the row animates from 0 to its content height. */
.solution-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.solution-item.is-active .solution-item__panel {
    grid-template-rows: 1fr;
}

.solution-item__panel-inner {
    min-height: 0;
    overflow: hidden;
    padding-inline: var(--solution-gap, 23px);
    visibility: hidden;
    transition: visibility 0s 0.3s;
}

.solution-item.is-active .solution-item__panel-inner {
    visibility: visible;
    transition-delay: 0s;
}

/* Bottom spacing lives inside the animated area, so it opens/closes smoothly with it.
   On desktop site.js sets --solution-panel-h to the tallest panel's height, making every
   open panel the same size: one closes while another opens and the total never changes. */
.solution-item__content {
    padding-bottom: var(--solution-gap, 23px);
}

/* Right panel. The list sets the row height: the image frame is taken out of the flow
   and fitted inside the panel (never cropped), so it can't leave space under the last item. */
.solutions__media {
    position: relative;
    /* same values as the image's inset below ('mediaPadding' per page), so the image fills
       exactly the space inside the padding */
    padding: var(--solutions-media-pad-y, var(--space-7)) var(--solutions-media-pad-x, var(--space-6));
    background: var(--color-brand-soft);
}

/* Space around the image: 'mediaPadding' sets it per page. */
.solutions__media .solutions__frame {
    position: absolute;
    top: var(--solutions-media-pad-y, var(--space-7));
    left: var(--solutions-media-pad-x, var(--space-6));
    width: calc(100% - 2 * var(--solutions-media-pad-x, var(--space-6)));
    height: calc(100% - 2 * var(--solutions-media-pad-y, var(--space-7)));
}

/* 'imageFit' => 'cover': the image fills the area inside that padding (edges trimmed). */
.solutions--cover .solutions__media .solutions__image {
    object-fit: cover;
}

/* Crossfade: both image layers share one grid cell. site.js loads the next image into
   the hidden layer, then fades it in on top (.is-front) of the current one. */
.solutions__frame {
    display: grid;
}

.solutions__image {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    /* centred, so when the list is taller than the image the space is split evenly
       instead of all of it sitting under the image */
    object-position: center;
    opacity: 0;
    transition: opacity 0.22s ease;
    /* = FADE_MS in site.js */
}

.solutions__image.is-front {
    z-index: 1;
}

.solutions__image.is-visible {
    opacity: 1;
}

/* Media on the left instead of the right ('mediaSide' => 'left'). */
.solutions--media-left .solutions__body {
    grid-template-columns: 1fr 47.5%;
}

.solutions--media-left .solutions__list {
    order: 2;
    border-right: 0;
    border-left: 0.7px solid var(--color-border);
}

.solutions--media-left .solutions__media {
    order: 1;
}

/* Corner image on the heading (optional). */
.solutions__intro {
    position: relative;
}

.solutions__mosaic {
    position: absolute;
    right: var(--solutions-mosaic-right, 0);
    bottom: 0;
    width: auto;
    /* default; a page can set 'mosaicHeight' on the element */
    height: var(--solutions-mosaic-h, 140px);
}

/* Left-aligned heading ('introAlign' => 'left'), as on the customer pages. */
.solutions__intro--left {
    padding: var(--space-8);
    text-align: left;
}

/* 'introPadding' => '...' on the element: this block's own heading padding. */
.solutions__intro.solutions__intro--pad {
    padding: var(--solutions-intro-pad);
}

/* Same dark label on every item, open or closed ('darkLabels' => true). */
.solutions--dark-labels .solution-item__label,
.solutions--dark-labels .solution-item.is-active .solution-item__label {
    color: var(--color-text-desc);
}

/* Per-page widths ('titleWidth' / 'descriptionWidth' on the element); without them the
   .section-intro widths are used (400px description when left-aligned). */
.solutions__intro .section-intro__title {
    max-width: var(--solutions-title-w, 560px);
}

.solutions__intro .section-intro__description {
    max-width: var(--solutions-desc-w, 650px);
}

.solutions__intro--left .section-intro__title {
    margin-inline: 0;
}

.solutions__intro--left .section-intro__description {
    max-width: var(--solutions-desc-w, 400px);
    margin: var(--space-4) 0 0;
}

/* Empty right gutter beside the tabs holding the mosaic's second piece ('mosaicSide'),
   right under the heading's line; the heading mosaic sits just inside it. */
.solutions--gutter {
    --solutions-gutter: 56px;
    --solutions-mosaic-right: 40px;
}

.solutions--gutter .solutions__body {
    position: relative;
    padding-right: var(--solutions-gutter);
}

/* Line between the right-hand column and the gutter. */
.solutions--gutter .solutions__media,
.solutions--gutter.solutions--media-left .solutions__list {
    border-right: 0.7px solid var(--color-border);
}

.solutions__mosaic-side {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--solutions-gutter);
    height: auto;
}

/* 'expanded' => true: every item shows its description; clicking anywhere on an item makes
   it active (grey background, brand bar on its left) and switches the image. */
.solutions--expanded .solution-item {
    position: relative;
    transition: background-color 0.2s ease;
}

.solutions--expanded .solution-item:hover {
    background: var(--color-surface-hover);
}

.solutions--expanded .solution-item.is-active {
    background: var(--color-surface-muted);
    box-shadow: inset 3px 0 0 var(--color-brand);
}

/* Columns as in the design: an empty gutter on the list's outer side, the list a little
   wider than the painting (53% / 47%). */
.solutions--expanded .solutions__body {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
    padding-left: var(--space-8);
}

.solutions--expanded .solutions__list {
    border-left: 0.7px solid var(--color-border);
}

.solutions--expanded.solutions--media-left .solutions__body {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    padding-right: var(--space-8);
    padding-left: 0;
}

.solutions--expanded.solutions--media-left .solutions__list {
    border-right: 0.7px solid var(--color-border);
}

.solutions--expanded .solution-item__title {
    font-size: var(--fs-h5);
}

/* The title button covers the whole item, so the description is clickable too. */
.solutions--expanded .solution-item__trigger::after {
    content: "";
    position: absolute;
    inset: 0;
}

.solutions--expanded .solution-item__trigger,
.solutions--expanded .solution-item.is-active .solution-item__trigger {
    padding: 22px 35px 13px;
}

.solutions--expanded .solution-item__panel {
    grid-template-rows: 1fr;
}

.solutions--expanded .solution-item__panel-inner {
    visibility: visible;
}

.solutions--expanded .solution-item__content {
    padding-bottom: var(--space-9);
}

/* 'itemPadding' => '...' on the element: this block's own padding for the description area. */
.solutions--item-pad .solution-item__panel-inner {
    padding: var(--solution-item-pad);
}

/* 'imageAlign' => 'left' / 'right': the image takes the painting's full width minus a gap on
   the opposite side (right-aligned: gap on the left; left-aligned: gap on the right), flush
   with its side edge, at least a gap below the painting's top. The whole image always shows:
   a screenshot taller than the list makes the painting (and the row) taller instead of being
   cut off. 'imageBottomGap' (per block or item): true = the image sits at the top with at
   least a gap of painting below it; false = it stands on the painting's bottom edge. */
.solutions--image-edge {
    --solutions-image-gap: calc(var(--space-9) + var(--space-2));
}

.solutions--image-edge .solutions__media {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) 0 0;
}

/* The frame fills the painting below the top gap; the image is placed inside it. */
.solutions--image-edge .solutions__media .solutions__frame {
    position: relative;
    top: auto;
    left: auto;
    flex: 1 0 auto;
    width: 100%;
    height: auto;
}

.solutions--image-edge .solutions__media .solutions__image {
    align-self: start;
    width: calc(100% - var(--solutions-image-gap));
    height: auto;
}

.solutions--image-edge .solutions__media .solutions__image[data-bottom="gap"] {
    margin-bottom: var(--space-8);
}

.solutions--image-edge .solutions__media .solutions__image[data-bottom="none"] {
    align-self: end;
}

/* Only the front screenshot sets the height; the hidden swap layer doesn't. */
.solutions--image-edge .solutions__media .solutions__image:not(.is-front) {
    position: absolute;
    top: 0;
}

.solutions__image[data-align="right"] {
    justify-self: end;
}

.solutions__image[data-align="left"] {
    justify-self: start;
}

/* Per-item painting behind the image, faded by site.js. */
.solutions__media {
    position: relative;
}

.solutions__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--solutions-bg, none) center / cover no-repeat;
    transition: opacity 0.4s ease;
}

.solutions__media .solutions__frame {
    z-index: 1;
}

/* ---------- Classe365 + Hiree365 (element: hiree_connect) ----------
 * Heading, text and buttons top-left over a painted background ('background'), then two
 * product cards (logo, subtitle, tags) in a row.
 */
.hiree-connect {
    position: relative;
    padding: 60px 48px 80px;
    border-inline: 0.7px solid var(--color-border);
    background: #EFF7F3;
}

/* The image covers only the right part (from about the middle to the edge), full height;
   the rest is the plain background colour. */
.hiree-connect::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 49%;
    background: var(--hiree-connect-bg, none) left center / cover no-repeat;
    pointer-events: none;
}

.hiree-connect>* {
    position: relative;
}

.hiree-connect__intro {
    max-width: 540px;
}

.hiree-connect__title {
    font-size: 36px;
    line-height: 1.2;
}

.hiree-connect__description {
    margin-top: var(--space-5);
    color: var(--color-text-desc);
}

.hiree-connect__actions {
    margin-top: var(--space-7);
}

.hiree-connect__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 400px));
    gap: var(--space-4);
    margin-top: 72px;
}

.hiree-connect__card {
    position: relative;
    z-index: 1;
    padding: 22px 22px 24px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

/* Hover either card: the two cards slide apart and a "connected" link appears between
   them (soft rings, a line and a green dot with a bolt). */
.hiree-connect__cards {
    position: relative;
}

.hiree-connect__cards:hover .hiree-connect__card:first-of-type {
    transform: translateX(-28px);
    box-shadow: 0 12px 28px -18px rgba(17, 17, 17, 0.25);
}

.hiree-connect__cards:hover .hiree-connect__card:last-of-type {
    transform: translateX(28px);
    box-shadow: 0 12px 28px -18px rgba(17, 17, 17, 0.25);
}

/* Centred on the gap between the two cards. */
.hiree-connect__link {
    position: absolute;
    top: 50%;
    left: calc(400px + var(--space-4) / 2);
    z-index: 0;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 201, 166, 0.12) 0 34%, rgba(127, 201, 166, 0.22) 34% 52%, rgba(127, 201, 166, 0.1) 52% 100%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* Line joining the two cards */
.hiree-connect__link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 1px;
    background: #7FC9A6;
    transform: translate(-50%, -50%);
}

.hiree-connect__link-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #3DB383;
    color: #fff;
    transform: translate(-50%, -50%);
}

.hiree-connect__link-dot svg {
    width: 18px;
    height: 18px;
}

.hiree-connect__link-dot svg path {
    fill: #fff;
    stroke: none;
}

.hiree-connect__cards:hover .hiree-connect__link {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Hiree365 card: green outline */
.hiree-connect__card--hiree {
    border-color: #7FC9A6;
}

.hiree-connect__logo {
    display: block;
    width: auto;
    height: 28px;
}

/* The Hiree365 logo is drawn larger, so it gets a smaller height to look the same size.
   The space it saves stays below it (28px - 16px), so both cards' subtitles line up. */
.hiree-connect__card--hiree .hiree-connect__logo {
    height: 16px;
    margin-top: 2px;
    margin-bottom: 16px;
}

.hiree-connect__subtitle {
    margin: 6px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
}

.hiree-connect__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.hiree-connect__tags li {
    padding: 4px 8px;
    border-radius: 4px;
    background: #F0F1FD;
    color: var(--color-text);
    font-size: var(--fs-caption);
}

.hiree-connect__card--hiree .hiree-connect__tags li {
    background: #EEF6F1;
}

/* ---------- Trusted by institution type (element: trusted_categories) ----------
 * Centred heading, then one row per institution type: its name, a short vertical line, and
 * up to 5 grey logos in even columns. Each logo's size comes from the element
 * (--logo-w / --logo-h, the same visual area for every logo).
 */
.trusted-cats {
    padding-bottom: 73px;
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
    background: var(--color-surface);
}

/* 'class' => 'trusted-cats--open-top': no line along the top (e.g. the About page). */
.trusted-cats.trusted-cats--open-top {
    border-top: 0;
}

.trusted-cats__intro {
    padding-bottom: var(--space-8);
}

.trusted-cats__description {
    max-width: 500px;
}

.trusted-cats__rows {
    margin-inline: var(--space-8);
}

.trusted-cats__row {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 0.7px solid var(--color-border);
}

.trusted-cats__label {
    margin: 0;
    padding: 0 var(--space-6) 0 6px;
    color: var(--color-text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

/* Logos in columns of at most 150px with a fixed gap (not stretched across wide screens). */
.trusted-cats__logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 150px));
    justify-content: start;
    align-items: center;
    gap: var(--space-5) var(--space-6);
    min-height: 56px;
    margin: 0;
    padding: 0 0 0 var(--space-7);
    border-left: 0.7px solid var(--color-border);
    list-style: none;
}

.trusted-cats__logos li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trusted-cats__logos img {
    display: block;
    width: var(--logo-w, auto);
    max-width: 100%;
    height: var(--logo-h, 44px);
    object-fit: contain;
    filter: grayscale(1);
}

/* 'closed': the box's bottom line, and space below it. */
.trusted-cats-section--closed .trusted-cats {
    padding-bottom: var(--space-7);
    border-bottom: 0.7px solid var(--color-border);
}

/* 'align' => 'left': the heading at the left, in line with the rows. */
.trusted-cats--left .trusted-cats__intro {
    padding-inline: var(--space-8);
    text-align: left;
}

.trusted-cats--left .section-intro__title,
.trusted-cats--left .section-intro__description {
    margin-inline: 0;
}

/* One line, the size of the About page's other block titles. */
.trusted-cats--left .section-intro__title {
    max-width: none;
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.trusted-cats--left .section-intro__description {
    max-width: 620px;
    font-size: 13px;
    line-height: 1.6;
}

/* 'mosaic': a painting mosaic in the top-right corner, against the box's top and right lines. */
.trusted-cats--mosaic {
    position: relative;
}

.trusted-cats__mosaic {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 230px;
    height: auto;
    pointer-events: none;
}

.trusted-cats--mosaic .trusted-cats__intro {
    padding-right: 270px; /* the text stays clear of the mosaic */
}

/* ---------- Connect steps (element: connect_steps) ----------
 * A mint panel with soft paler shapes: heading, text and buttons, then three numbered step cards,
 * each with its logo tile standing on the card's top-right corner. */
.connect-steps {
    position: relative;
    overflow: hidden;
    padding: var(--space-9) 55px var(--space-9);
    border: 0.7px solid var(--color-border);
    background:
        linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, 0.45) 58% 72%, transparent 72%),
        linear-gradient(65deg, transparent 0 80%, rgba(255, 255, 255, 0.35) 80%),
        #eaf6f1;
}

.connect-steps--open-top {
    border-top: 0;
}

.connect-steps__intro {
    position: relative;
    max-width: 780px; /* the title's first line ("…going") fits, as in the design */
}

.connect-steps__description {
    max-width: 620px;
}

.connect-steps__title {
    margin: 0;
}

.connect-steps__description {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
}

.connect-steps__actions {
    margin-top: var(--space-6);
}

/* Steps: three cards in a row; each leaves room above it for its logo tile. */
.connect-steps__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 27px;
    margin: 104px 0 0; /* room for the logo tiles above the cards */
    padding: 0;
    list-style: none;
}

.connect-steps__step {
    position: relative;
    padding: 20px 26px; /* measured from the design */
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
}

/* Logo tile on the card's top-right corner, half above it. */
.connect-steps__logo {
    position: absolute;
    top: -61px; /* stands about a third into the card, as in the design */
    right: 37px;
    width: 92px;
    height: 92px;
    border-radius: 18px;
    object-fit: contain;
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.14);
}

.connect-steps__number {
    margin: 0;
    color: var(--color-success);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.64px;
    text-transform: uppercase;
    line-height: 15px;
}

.connect-steps__step-title {
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: var(--fw-medium);
}

.connect-steps__text {
    margin: 12px 0 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- Icon cards (element: icon_cards) ----------
 * Two columns of cards: icon + title on one line, a short text below.
 */
/* Between the page's side lines: the cards, then the green banner straight under the last
   row, running the full width from line to line. */
.icon-cards-box {
    border-inline: 0.7px solid var(--color-border);
    background: var(--color-surface);
}

/* No banner below: a line closes the box at the bottom, joining the side lines, and the last
   row of cards stands on it (their own bottom line falls on it). */
.icon-cards-box--closed {
    border-bottom: 0.7px solid var(--color-border);
}

.icon-cards-box--closed .icon-cards {
    margin-bottom: -0.7px;
}

.icon-cards {
    display: grid;
    grid-template-columns: repeat(var(--icon-cards-cols, 2), minmax(0, 1fr));
    gap: 18px 26px;
    padding: var(--space-8) 55px 0;
}

/* Green strip at the bottom of the block ('banner'), edge to edge. */
.icon-cards__banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 36px;
    background: #48B283;
    color: #fff;
}

.icon-cards__banner-logo {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 6px;
    background: #fff;
}

.icon-cards__banner-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.icon-cards__banner-text {
    flex: 1;
    min-width: 0;
}

.icon-cards__banner-title {
    margin: 0;
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
}

.icon-cards__banner-description {
    max-width: 520px;
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--fs-caption);
    line-height: 1.5;
}

.icon-cards__banner-button {
    flex-shrink: 0;
}

/* On the green banner: white on hover (instead of the usual brand colour). */
.icon-cards__banner-button:hover,
.icon-cards__banner-button:focus-visible {
    background: #fff;
    color: var(--color-text);
}

.icon-cards__card {
    padding: 20px 14px;
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
}

.icon-cards__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.icon-cards__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    object-fit: contain;
    /* centred on the title's letters (not its line box, which sits a little higher) */
    transform: translateY(1px);
}

.icon-cards__text {
    max-width: 470px;
    margin: 8px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    line-height: 1.55;
}

/* Icon from an icons/ element ('iconElement'): sized like the image icons. */
span.icon-cards__icon {
    display: inline-flex;
}

span.icon-cards__icon .icon {
    width: 100%;
    height: 100%;
}

/* 'theme' => 'green': the banner on top, then the cards on a dark green panel, white text. */
.icon-cards-box--green {
    background: #2B8159;
}

.icon-cards-box--green .icon-cards {
    padding: 34px 46px 40px;
}

.icon-cards-box--green .icon-cards__card {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
}

.icon-cards-box--green .icon-cards__title {
    color: #fff;
}

.icon-cards-box--green .icon-cards__text {
    color: rgba(255, 255, 255, 0.82);
}

/* ---------- Comparison (element: comparison) ----------
 * Lined strip, then: intro top-left; numbered "Before | With Classe365" table below it,
 * running down to the block's bottom line; painting on the right from the table's top edge
 * to the right border, with the stats graphic standing on its bottom and rising above it.
 */
.compare-rule {
    height: calc(2 * var(--ruled-gap));
    border-inline: 0.7px solid var(--color-border);
    background-position: 0 -1px;
}

.compare {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
        "intro ."
        "table media";
    column-gap: 72px;
    padding: var(--space-9) 0 0 var(--space-9);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.compare__intro {
    grid-area: intro;
    padding-bottom: var(--space-8);
}

/* 'introFull' => true: the heading spans both columns, so its width comes from
   'titleWidth' / 'descriptionWidth' rather than the table's column (it stops short of the
   right edge so it never runs under the stats graphic). */
.compare--intro-full .compare__intro {
    grid-column: 1 / -1;
    padding-right: var(--space-9);
}

.compare__title {
    /* default width; a page can override it with 'titleWidth' on the element */
    max-width: var(--compare-title-w, 700px);
}

.compare__description {
    /* default width; a page can override it with 'descriptionWidth' on the element */
    max-width: var(--compare-desc-w, 700px);
    margin-top: var(--space-5);
    color: var(--color-text-desc);
}

/* Open at the bottom: the table's box continues down to the block's bottom line. */
.compare__table-wrap {
    grid-area: table;
    padding-bottom: var(--space-5);
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.compare-table th,
.compare-table td {
    padding: var(--space-3);
    color: var(--color-text-desc);
    vertical-align: middle;
}

.compare-table th {
    height: 66px;
    padding-inline: var(--space-4);
}

.compare-table tbody tr+tr td {
    border-top: 0.7px solid var(--color-border);
}

/* Line under the last point, where the table ends. */
.compare-table tbody tr:last-child td {
    border-bottom: 0.7px solid var(--color-border);
}

/* Line between the two columns. */
.compare-table__after {
    width: 50%;
    border-left: 0.7px solid var(--color-border);
}

.compare-table__num {
    width: 52px;
    text-align: center;
    border-right: 0.7px solid var(--color-border);
}

.compare-table__head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/* Filled round badge: red cross (before) / green tick (with Classe365). */
.compare-table__badge {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-dark-text);
}

.compare-table__badge .icon {
    width: 12px;
    height: 12px;
}

.compare-table__badge--before {
    background: #ef4444;
}

.compare-table__badge--after {
    background: var(--color-success);
}

.compare-table__tag {
    display: inline-block;
    padding: 4px 10px;
    border: 0.7px solid #CBD5E1;
    border-radius: 6px;
    background: #F1F5F9;
    color: #3E4489;
}

/* Painting from the table's top edge to the block's bottom-right corner; the graphic
   stands on its bottom and may rise above it into the intro's row. */
.compare__media {
    grid-area: media;
    position: relative;
    min-height: 320px;
    background: var(--color-surface-muted) center / cover no-repeat;
}

/* Centred horizontally on the painting, standing on its bottom edge. */
.compare__image {
    position: absolute;
    bottom: 0;
    left: 50%;
    max-width: 100%;
    height: auto;
    transform: translateX(-50%);
}

/* ---------- Award strip (element: award_strip; also the home ratings row) ----------
 * Award cells with lines between, each as wide as its content, sliding on every screen
 * (site.js [data-marquee]).
 */
.award-strip {
    border-inline: 0.7px solid var(--color-border);
}

.award-strip__viewport {
    container-type: inline-size;
    overflow: hidden;
    border-bottom: 0.7px solid var(--color-border);
}

/* The row slides on every screen (site.js); each award is as wide as its content (title
   on one line), so short awards don't leave empty space. */
.award-strip__list {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
}

.award-strip__item {
    display: flex;
    flex: 0 0 auto;
    max-width: 100cqw;
    /* never wider than the row (phones) */
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
}

.award-strip__item {
    position: relative;
}

/* Divider between awards, inset from the top and bottom lines (as in the design). */
.award-strip__item+.award-strip__item::before {
    content: "";
    position: absolute;
    top: var(--space-3);
    bottom: var(--space-3);
    left: 0;
    right: 0;
    border-left: 0.7px solid var(--color-border);
}

.award-strip__text {
    min-width: 0;
    white-space: nowrap;
}

.award-strip__subtitle {
    font-size: var(--fs-caption);
}

.award-strip__badges {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);
}

/* Size per badge from the page (--badge-w / --badge-h, in px); without them: 82px tall,
   natural width (capped at 106px). --badge-scale shrinks every badge on smaller screens. */
.award-strip__badges img {
    --badge-scale: 1;
    display: block;
    width: calc(var(--badge-w) * var(--badge-scale));
    max-width: calc(var(--badge-w, 106px) * var(--badge-scale));
    height: calc(var(--badge-h, 82px) * var(--badge-scale));
    object-fit: contain;
}

/* ---------- Module folders (element: module_folders) ----------
 * Intro from .module-cards. Then folder-shaped cards in two rows: the front row overlaps the
 * bottom of the back row, and the block's bottom edge cuts off the front row's bottom.
 * Each folder stands on its slot's bottom edge, so on hover (or keyboard focus) it grows
 * upward, showing its description and button, without moving anything else.
 */
/* Default widths; a page can override them with 'titleWidth' / 'descriptionWidth'. */
.module-cards__title.module-folders__title {
    max-width: var(--folders-title-w, 640px);
}

.module-folders__description {
    max-width: var(--folders-desc-w, 480px);
    color: var(--color-text-desc);
}

.module-folders__stage {
    --folder-tab-h: 18px;
    /* height of the folder tab */
    --folder-pitch: 111px;
    /* back row tab to front row tab: ~11px under the back titles */
    /* Closed back-row folder, tab top to bottom: its bottom line lies exactly on the front
       row's top line, so the two show as one line. */
    --folder-slot-h: calc(var(--folder-pitch) + var(--folder-tab-h));
    --folder-front-h: 111px;
    /* visible part of the front row, tab top to the bottom edge */
    --folder-cut: 30px;
    /* front row's hidden part below the bottom edge */
    --folder-line: #525bb7;
    --folder-line-w: 1px;
    display: flow-root;
    /* keeps the front row's negative bottom margin inside, so
                                       the bottom edge really cuts the front row */
    padding-top: 180px;
    /* room for a back-row folder to open upward (3-line description) */
    border-top: 0.7px solid var(--color-border);
    /* Clip the bottom and sides only; an open folder may rise above the stage. */
    clip-path: inset(-100vh 0 0 0);
}

.module-folders__row {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rows behind the front one are inset a little from both sides; a row with fewer than 4
   folders is narrower by a quarter per missing folder, centred (as in the design).
   --row-count is set per row by the element. */
.module-folders__row--back {
    padding-inline: calc((4 - var(--row-count, 4)) * 12.25% + 0.8%);
}

/* Each row sits one pitch below the row behind it. */
.module-folders__row+.module-folders__row {
    margin-top: calc(var(--folder-pitch) - var(--folder-slot-h));
}

.module-folders__row--front {
    margin-bottom: calc(-1 * var(--folder-cut));
}

/* Uneven widths as in the design, so the two rows' dividing lines never line up: in the back
   row the outer folders are wider; the front row widens a little from left to right.
   (flex-grow = the design's widths; any other number of cards just shares the row evenly.) */
.module-folders__row--back .module-folders__slot:nth-child(1):nth-last-child(4),
.module-folders__row--back .module-folders__slot:nth-child(4):nth-last-child(1) {
    flex-grow: 221;
}

.module-folders__row--back .module-folders__slot:nth-child(2):nth-last-child(3),
.module-folders__row--back .module-folders__slot:nth-child(3):nth-last-child(2) {
    flex-grow: 207;
}

.module-folders__row--front .module-folders__slot:nth-child(1):nth-last-child(4) {
    flex-grow: 207;
}

.module-folders__row--front .module-folders__slot:nth-child(2):nth-last-child(3) {
    flex-grow: 215;
}

.module-folders__row--front .module-folders__slot:nth-child(3):nth-last-child(2) {
    flex-grow: 228;
}

.module-folders__row--front .module-folders__slot:nth-child(4):nth-last-child(1) {
    flex-grow: 220;
}

.module-folders__slot {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: var(--folder-slot-h);
}

/* Neighbours share one line instead of two. */
.module-folders__slot+.module-folders__slot {
    margin-left: calc(-1 * var(--folder-line-w));
}

/* The folder: stands on its slot's bottom edge and grows upward. */
.folder-card {
    --folder-bg: var(--color-brand-soft);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: calc(var(--folder-slot-h) - var(--folder-tab-h));
    /* Icon right under the top line; the bottom space keeps the title clear of the front
       row, and puts an opened button just above the front row's tabs. */
    padding: 2px var(--space-5) var(--space-5);
    border: var(--folder-line-w) solid var(--folder-line);
    background: var(--folder-bg);
    outline: 0;
}

/* The back row's bottom edge always sits behind the front row: without its own bottom line,
   the front row's top line is the only (1px) line there. */
.module-folders__row--back .folder-card {
    border-bottom: 0;
}

/* Alternating fills; each row starts on the other shade than the row in front of it
   (--dark-first is set by the element). */
.module-folders__row--dark-first .module-folders__slot:nth-child(odd) .folder-card,
.module-folders__row:not(.module-folders__row--dark-first) .module-folders__slot:nth-child(even) .folder-card {
    --folder-bg: #E1E3FA;
}

/* Folder tab: covers the top line over the left half, with a slanted right edge. */
.folder-card::before,
.folder-card::after {
    content: "";
    position: absolute;
    bottom: calc(100% - var(--folder-line-w));
    height: calc(var(--folder-tab-h) + var(--folder-line-w));
}

.folder-card::before {
    left: calc(-1 * var(--folder-line-w));
    width: 54%;
    border: var(--folder-line-w) solid var(--folder-line);
    border-right: 0;
    border-bottom: 0;
    background: var(--folder-bg);
}

/* Slanted end of the tab: a box ending where the tab ends, skewed from its top so its right
   edge (the line) runs down-right to the folder's top line. A skewed border is drawn smooth,
   unlike a diagonal gradient (which looks stepped). skewX(40.36deg) = 0.85px across per 1px
   down, as in the design. */
.folder-card::after {
    left: calc(54% - var(--folder-line-w) - var(--folder-tab-h));
    width: var(--folder-tab-h);
    height: var(--folder-tab-h);
    /* starts just under the tab's top line, leaving it whole */
    border-right: var(--folder-line-w) solid var(--folder-line);
    background: var(--folder-bg);
    transform: skewX(40.36deg);
    transform-origin: top;
}

.folder-card__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.folder-card__icon img {
    display: block;
    width: 24px;
    height: 24px;
}

.folder-card__title {
    margin-top: var(--space-4);
    line-height: var(--lh-body);
}

/* Description + button: closed until hover/focus, then the folder grows upward. */
.folder-card__more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.folder-card__more-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.folder-card__description {
    max-width: 280px;
    margin-top: var(--space-4);
    color: var(--color-text-desc);
}

.folder-card__button {
    display: flex;
    /* a block, so the closed panel measures its full height */
    width: fit-content;
    margin-top: var(--space-5);
    margin-bottom: var(--space-7);
}

.module-folders__slot:hover .folder-card__more,
.module-folders__slot:has(:focus-visible) .folder-card__more {
    grid-template-rows: 1fr;
}

.module-folders__slot:hover .folder-card__more-inner,
.module-folders__slot:has(:focus-visible) .folder-card__more-inner {
    opacity: 1;
    transition-delay: 0.1s;
}

/* Only one folder open at a time: while the pointer is over a folder, every other one
   closes (also one that still has keyboard focus). Opens on keyboard focus only (not after a
   mouse click), so a clicked folder doesn't stay open. */
.module-folders__stage:has(.module-folders__slot:hover) .module-folders__slot:not(:hover) .folder-card__more {
    grid-template-rows: 0fr;
}

.module-folders__stage:has(.module-folders__slot:hover) .module-folders__slot:not(:hover) .folder-card__more-inner {
    opacity: 0;
    transition-delay: 0s;
}

/* Front-row folders are taller by the part the bottom edge cuts off, so their content
   (and the opened button) stays above the cut. */
.module-folders__row--front .module-folders__slot {
    height: calc(var(--folder-front-h) + var(--folder-cut));
}

/* The bottom edge cuts the front row just below the titles (as in the design). */
.module-folders__row--front .folder-card {
    min-height: calc(var(--folder-front-h) + var(--folder-cut) - var(--folder-tab-h));
    padding-bottom: calc(var(--space-2) + var(--folder-cut));
}

/* ---------- Integrations grid (element: integrations_grid) ----------
 * Header row: text left, optional mosaic in the middle standing on the header's bottom
 * line, button right. Then the integration logos in greyscale, 5 per row.
 */
.integrations-grid {
    border: 0.7px solid var(--color-border);
}

/* 'borderTop' => false: no line along the top (e.g. right under a lined strip). */
.integrations-grid--no-top {
    border-top: 0;
}

.integrations-grid__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    padding: 60px 51px 40px;
    border-bottom: 0.7px solid var(--color-border);
}

/* 'headPadding' => '...' on the element: this block's own header padding. */
.integrations-grid__head.integrations-grid__head--pad {
    padding: var(--integrations-head-pad);
}

.integrations-grid__text {
    position: relative;
    z-index: 1;
    max-width: 760px;
    /* title on one line at full width, as in the design */
}

.integrations-grid__description {
    margin-top: var(--space-4);
    color: var(--color-text-desc);
}

/* Middle mosaic: from 55% across, standing on the header's bottom line (as in the design). */
.integrations-grid__mosaic {
    position: absolute;
    bottom: 0;
    /* defaults; a page can set 'mosaicLeft' / 'mosaicHeight' on the element */
    left: var(--integrations-mosaic-left, 55%);
    width: auto;
    height: var(--integrations-mosaic-h, 104px);
}

.integrations-grid__button {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-top: var(--space-4);
}

.integrations-grid__logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 72px var(--space-6);
    margin: 0;
    padding: var(--space-9) var(--space-8) 96px;
    list-style: none;
}

/* Greyscale logos, the same height; wide ones (intercom, zoom) capped so they don't dominate. */
.integrations-grid__logos img {
    display: block;
    width: auto;
    max-width: min(100%, 140px);
    height: var(--logo-h, 28px); /* a logo's own 'height', else 28px */
    object-fit: contain;
    object-position: left center;
    filter: grayscale(1);
    opacity: 0.6;
}

/* Customer story under the logos: dark text panel (button at its bottom) + photo. The photo
   side reuses .story-spotlight__media / __photo / __logo / __person. */
.integrations-story {
    display: grid;
    grid-template-columns: minmax(0, 1.37fr) minmax(0, 1fr);
    border-top: 0.7px solid var(--color-border);
    background: var(--color-dark);
}

.integrations-story__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8) var(--space-9) var(--space-6) 86px;
}

.integrations-story__title {
    max-width: 560px;
    color: var(--color-dark-text);
}

.integrations-story__description {
    max-width: 520px;
    margin-top: var(--space-3);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-18);
    line-height: 26px;
}

.integrations-story__link {
    margin-top: var(--space-7);
    color: #8c93f2;
    /* brand, lightened for the dark panel */
}

/* Minimum space above the button: when the text fills the panel (smaller screens),
   the button's auto margin has nothing left to push with. */
.integrations-story__text> :nth-last-child(2) {
    margin-bottom: var(--space-6);
}

.integrations-story__button {
    margin-top: auto;
    /* bottom of the panel */
    border: 0;
}

.integrations-story__media {
    min-height: 464px;
}

/* The mirrored photo: framed so she sits left and the plant right (as in the design). */
.integrations-story__media .story-spotlight__photo {
    object-position: 35% center;
}

/* ---------- Split hero (element: split_hero) ----------
 * Text on the left, a painted panel with a product card on the right. Type comes from the
 * shared classes (.heading-display / .text-body), so it matches the other heroes.
 */
.split-hero-section {
    padding-top: var(--space-7);
}

.split-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--split-hero-media-w, 50%)); /* 'mediaWidth' */
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
    background: var(--color-surface);
}

.split-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-9) var(--space-8);
}

/* Default widths; a page can override them with 'titleWidth' / 'descriptionWidth'. */
.split-hero__title {
    max-width: var(--hero-title-w, 600px);
}

/* 'titleSize' on the element (tablets and desktops; phones keep their own size). */
@media (min-width: 769px) {
    .split-hero__text[style*="--hero-title-fs"] .split-hero__title {
        font-size: var(--hero-title-fs);
        line-height: 1.15;
    }

    /* 'descriptionSize' on the element, the same way. */
    .split-hero__text[style*="--hero-desc-fs"] .split-hero__description {
        font-size: var(--hero-desc-fs);
        line-height: 1.6;
    }
}

.split-hero__description {
    max-width: var(--hero-desc-w, 600px);
    margin-top: var(--space-5);
}

.split-hero__actions {
    margin-top: var(--space-6);
}

/* Optional ticked list under the buttons ('highlights'). */
.split-hero__highlights {
    margin-top: var(--space-5);
}

/* Painted panel: the page's artwork, with the card centred on it. */
.split-hero__media {
    display: grid;
    place-items: center;
    min-height: 460px;
    padding: var(--space-8);
    background: var(--split-hero-bg, none) center / cover no-repeat var(--color-surface-muted);
}

/* 'class' => 'split-hero--compare' (compare pages): tighter spacing round the text, as in the
   design, so the box is about as tall as the logos image beside it. */
.split-hero--compare {
    border-bottom: 0.7px solid var(--color-border); /* closed at the bottom (others stay open) */
}

.split-hero--compare .split-hero__text {
    padding: var(--space-6) var(--space-7) var(--space-6) 42px;
}

.split-hero--compare .split-hero__badge {
    margin-bottom: var(--space-6);
}

.split-hero--compare .split-hero__description {
    margin-top: var(--space-4);
}

.split-hero--compare .split-hero__actions {
    margin-top: var(--space-6);
}

/* ---------- Compare ratings (element: compare_ratings) ----------
 * A lined box: the heading with the page's mosaic in the top-right corner, then the page's
 * painting as a band with the ratings card (an image) on it.
 */
.compare-ratings-section {
    padding-bottom: var(--space-9);
}

.compare-ratings {
    border: 0.7px solid var(--color-border);
}

.compare-ratings__head {
    position: relative;
    min-height: 130px;
    padding: var(--space-6) 140px var(--space-6) var(--space-8);
}

.compare-ratings__mosaic {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 104px;
    height: auto;
    pointer-events: none;
}

.compare-ratings__eyebrow {
    margin: 0 0 var(--space-3);
    color: #94A3B8;
}

.compare-ratings__title {
    margin: 0;
    color: var(--color-text);
    font-size: 28px;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.compare-ratings__band {
    padding: 72px 80px 66px;
    background: var(--compare-ratings-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.compare-ratings__card {
    display: block;
    width: 100%;
    height: auto;
}

/* Until the card's file exists: a white box of its shape. */
.compare-ratings__card--empty {
    aspect-ratio: 735 / 209;
    background: var(--color-surface);
}

/* ---------- Compare side by side (element: compare_table; classes .compare-sbs, as
   .compare-table belongs to the comparison element) ----------
 * Straight under the ratings box (sharing its bottom line): a centred title and text, then a
 * rounded table - topic, then each product's answer; the first product's column lavender, the
 * page's mosaic in the top-left cell. On phones each row stacks under its topic.
 */

/* The ratings box closes onto this one (no gap between them). */
.compare-ratings-section:has(+ .compare-sbs-section) {
    padding-bottom: 0;
}

.compare-sbs {
    padding: 105px var(--space-9) 60px;
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.compare-sbs__intro {
    margin-bottom: var(--space-8);
    text-align: center;
}

.compare-sbs__title {
    color: var(--color-text);
    max-width: 14em;
    margin: 0 auto;
}

.compare-sbs__description {
    max-width: 650px;
    margin: var(--space-4) auto 0;
    color: var(--color-text-desc);
}

/* Rounded outline: separate borders, so the corners can be rounded. */
.compare-sbs__table {
    width: 100%;
    border: 0.7px solid var(--color-border);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    table-layout: fixed;
}

.compare-sbs__table th,
.compare-sbs__table td {
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-desc);
    font-size: 13px;
    font-weight: var(--fw-regular);
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
}

.compare-sbs__table tbody th,
.compare-sbs__table tbody td {
    border-top: 0.7px solid var(--color-border);
}

/* Widths: topic 22%, then the products share the rest. */
.compare-sbs__corner {
    position: relative;
    width: 22%;
}

/* The mosaic fills the header cell's height (top line to the line under it), flush against the
   first product's column; its width follows the image's shape. */
.compare-sbs__mosaic {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: auto;
    height: 100%;
    pointer-events: none;
}

.compare-sbs__table thead th {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    color: var(--color-text);
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

.compare-sbs__table tbody th {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

.compare-sbs__table .is-highlight {
    background: var(--color-brand-soft);
}

.compare-sbs__table thead th.is-highlight {
    color: var(--color-brand);
}

/* ---------- Compare fit (element: compare_fit) ----------
 * The page's painting between the side lines, with two white cards on it (equal height): a
 * small label, a title and ticked points; the highlighted card's ticks are purple.
 */
.compare-fit-section {
    padding-bottom: var(--space-9);
}

.compare-fit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    padding: 60px 56px;
    border: 0.7px solid var(--color-border);
    background: var(--compare-fit-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.compare-fit__card {
    padding: var(--space-6) var(--space-6) var(--space-7);
    border-radius: 6px;
    background: var(--color-surface);
}

.compare-fit__label {
    display: inline-block;
    margin: 0 0 var(--space-4);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #f3f3f4;
    color: var(--color-text);
    font-size: 11px;
}

.compare-fit__title {
    max-width: 16em;
    margin: 0;
    color: var(--color-text);
    font-size: 26px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.compare-fit__points {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.compare-fit__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-desc);
    font-size: 13px;
    line-height: 1.6;
}

.compare-fit__points strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

.compare-fit__points .icon {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px; /* level with the first line */
    color: var(--color-text-secondary);
}

.compare-fit__card.is-highlight .compare-fit__points .icon {
    color: var(--color-brand);
}

/* ---------- Compare questions (element: compare_questions) ----------
 * Straight under the fit cards (sharing their bottom line): the eyebrow and title at the left
 * with the page's mosaic in the box's bottom-left corner, the numbered questions at the right.
 */
.compare-questions-section {
    padding-bottom: var(--space-9);
}

/* The fit box closes onto this one (no gap between them). */
.compare-fit-section:has(+ .compare-questions-section) {
    padding-bottom: 0;
}

.compare-questions {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-7);
    padding: 50px var(--space-8);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

/* The list sets the box's height; the mosaic sits in the corner under the title. */
.compare-questions__mosaic {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 150px;
    height: auto;
    pointer-events: none;
}

.compare-questions__eyebrow {
    margin: var(--space-4) 0 var(--space-3);
    color: #94A3B8;
}

.compare-questions__title {
    max-width: 11em;
    margin: 0;
    color: var(--color-text);
    font-size: 34px;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.compare-questions__list {
    align-self: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.compare-questions__list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    padding: 18px 0;
    border-top: 0.7px solid var(--color-border);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
}

.compare-questions__list li:last-child {
    border-bottom: 0.7px solid var(--color-border);
}

.compare-questions__num {
    flex: none;
    min-width: 18px;
    color: var(--color-brand);
    font-size: 11px;
    font-weight: var(--fw-medium);
}

/* ---------- Compare videos (element: compare_videos) ----------
 * Straight under the questions box (sharing its bottom line): a title and text, then the
 * video cards from side line to side line - the video's image (painting and title card in one),
 * then the name and source. A card opens its video in the video popup.
 */
/* The questions box closes onto this one (no gap between them). */
.compare-questions-section:has(+ .compare-videos-section) {
    padding-bottom: 0;
}

.compare-videos {
    padding-bottom: var(--space-8);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.compare-videos__head {
    padding: 80px 56px;
}

.compare-videos__title {
    margin: 0;
    color: var(--color-text);
    font-size: 40px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.compare-videos__description {
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
    font-size: 14px;
    line-height: 1.6;
}

.compare-videos__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.compare-videos__card {
    display: block;
    height: 100%;
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
}

/* The video's image, filling a 16:9 area. */
.compare-videos__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.compare-videos__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-videos__body {
    display: grid;
    gap: 6px;
    padding: var(--space-4) var(--space-5) 18px;
}

.compare-videos__name {
    color: var(--color-text);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 1.35;
}

.compare-videos__meta {
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* ---------- Story banner (element: story_banner) ----------
 * A lined box: the heading (eyebrow, title, button) with the page's mosaic in the top-right
 * corner, then one story - text on a lavender panel at the left, the person's photo at the
 * right with their name and role on a dark strip over its bottom edge.
 */

.story-banner {
    border: 0.7px solid var(--color-border);
}

.story-banner__head {
    position: relative;
    padding: 80px 280px 72px 56px;
}

.story-banner__mosaic {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: auto;
    height: 100%; /* from the top line to the story below */
    max-width: 40%;
    object-fit: contain;
    object-position: right top;
    pointer-events: none;
}

/* 'mosaicAlign' => 'bottom': standing on the heading's bottom line instead. */
.story-banner__mosaic--bottom {
    top: auto;
    bottom: 0;
    object-position: right bottom;
}

.story-banner__eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: 12px;
}

.story-banner__title {
    margin: 0;
    color: var(--color-text);
}

.story-banner__button {
    margin-top: var(--space-6);
}

.story-banner__story {
    display: grid;
    grid-template-columns: minmax(0, 1.37fr) minmax(0, 1fr);
    border-top: 0.7px solid var(--color-border);
}

.story-banner__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-9) var(--space-8) var(--space-9) 86px;
    background: var(--color-brand-soft);
}

.story-banner__story-title {
    max-width: 14em;
    margin: 0;
    color: var(--color-text);
    font-size: 34px;
    font-weight: var(--fw-medium);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.story-banner__story-text {
    max-width: 520px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 15px;
    line-height: 1.6;
}

.story-banner__link {
    align-self: flex-start;
    margin-top: var(--space-7);
}

/* The photo fills its side (cropped round the person); the name strip on its bottom edge. */
.story-banner__media {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.story-banner__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

.story-banner__photo--flip {
    transform: scaleX(-1);
}

.story-banner__person {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) 18px;
    background: rgba(17, 17, 17, 0.45);
    color: #fff;
}

.story-banner__name {
    margin: 0;
    font-size: 13px;
    font-weight: var(--fw-semibold);
}

.story-banner__role {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    max-width: 250px;
}

/* ---------- Safety & Security hero (safety_and_security page) ----------
 * The painting behind the whole hero (edge to edge), text top-left, then a white panel with
 * the compliance badges (cards) and the key figures, standing on the hero's bottom edge.
 */
.sec-hero {
    padding-top: var(--space-9);
    background: var(--sec-hero-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.sec-hero__text {
    max-width: 820px;
}

.sec-hero__badge {
    margin-bottom: var(--space-5);
}

.sec-hero__badge .icon {
    color: var(--color-brand);
}

.sec-hero__title {
    max-width: 12.6em; /* wraps after "compliance", as in the design (em: follows the size) */
}

.sec-hero__description {
    max-width: 520px;
    margin-top: var(--space-5);
    color: var(--color-text-desc);
}

.sec-hero__actions {
    margin-top: var(--space-6);
}

.sec-hero__panel {
    margin-top: var(--space-8);
    padding: var(--space-4) var(--space-4) 0;
    border-radius: 24px 24px 0 0;
    background: var(--color-surface);
}

.sec-hero__badges {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sec-hero__badge-card {
    padding: var(--space-2) var(--space-3) var(--space-4);
    border: 0.7px solid var(--color-border);
    border-radius: 8px;
}

/* Badge large, filling most of the card's top (as in the design), the same box for every
   badge whatever its shape. */
.sec-hero__badge-img {
    display: block;
    width: 62%;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto var(--space-2);
    object-fit: contain;
}

.sec-hero__badge-name {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.sec-hero__badge-status {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    line-height: 1.4;
}

.sec-hero__stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3); /* the cards' gap, so each line sits right under a card's right edge */
    margin: 0;
    padding: 0;
    list-style: none;
}

.sec-hero__stats li {
    padding: var(--space-5) var(--space-4) var(--space-8);
}

.sec-hero__stats li:not(:last-child) {
    border-right: 0.7px solid var(--color-border);
}

.sec-hero__stat-value {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
}

.sec-hero__stat-text {
    margin: var(--space-1) 0 0;
    color: var(--color-text-desc);
    font-size: var(--fs-tiny);
    line-height: 1.5;
}

/* ---------- Safety & Security body (safety_and_security page) ----------
 * Sticky "On this page" menu beside six numbered sections: tiles with icons, plan cards, policy
 * rows, an AI split card and the disclosure timeline; then a dark closing banner. Scoped here.
 */
.sec-doc {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    border: 0.7px solid var(--color-border); /* top line too, under the hero */
}

.sec-doc__side {
    padding: var(--space-7) var(--space-5);
    border-right: 0.7px solid var(--color-border);
}

.sec-doc__toc {
    position: sticky;
    top: calc(var(--top-bar-height) + var(--header-height) + var(--space-5));
}

.sec-doc__toc-title {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sec-doc__toc ol {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sec-doc__toc a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: 4px;
    color: var(--color-text-desc);
    font-size: var(--fs-caption);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sec-doc__toc a span {
    color: var(--color-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
}

.sec-doc__toc a:hover {
    background: var(--color-surface-hover);
}

.sec-doc__toc a.is-active {
    background: #14142b;
    color: var(--color-dark-text);
}

.sec-doc__toc a.is-active span {
    color: rgba(255, 255, 255, 0.7);
}

/* With site.js: the dark highlight is one element sliding behind the links (the links keep
   only their text colours); without it, the active link's own background as above. */
.sec-doc__toc ol {
    position: relative;
}

.sec-doc__toc a {
    position: relative;
    z-index: 1;
}

.sec-doc__toc.has-marker a.is-active {
    background: none;
}

.sec-doc__toc.has-marker a:hover:not(.is-active) {
    background: var(--color-surface-hover);
}

.sec-doc__toc-marker {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    background: #14142b;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .sec-doc__toc-marker {
        transition: none;
    }
}

.sec-doc__toc-note {
    margin: var(--space-7) 0 0;
    padding: var(--space-4) var(--space-3);
    border: 0.7px solid var(--color-border);
    color: var(--color-text-desc);
    font-size: var(--fs-tiny);
    line-height: 1.6;
}

.sec-doc__toc-note a {
    display: inline;
    padding: 0;
    color: var(--color-text);
    font-size: inherit;
    font-weight: var(--fw-semibold);
}

.sec-doc__toc-note a:hover {
    background: none;
    text-decoration: underline;
}

/* The email on its own line, in one piece (as in the design). */
.sec-doc__toc-note .sec-doc__toc-email {
    white-space: nowrap;
}

.sec-doc__section {
    padding: var(--space-8) var(--space-7) var(--space-8);
    scroll-margin-top: calc(var(--top-bar-height) + var(--header-height));
}

.sec-doc__section + .sec-doc__section {
    border-top: 0.7px solid var(--color-border);
}

/* Number with a short line above it, beside the title and intro. */
.sec-doc__head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-4);
}

.sec-doc__num {
    padding-top: var(--space-3);
    border-top: 1.5px solid var(--color-text);
    align-self: start;
    width: 36px;
    color: var(--color-brand);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.sec-doc__title {
    font-size: 30px;
    line-height: 1.25;
}

.sec-doc__intro {
    max-width: 460px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: var(--fs-small);
    line-height: 1.6;
}

.sec-doc__body {
    margin-top: var(--space-7);
    margin-left: calc(64px + var(--space-4));
}

/* Tiles two to a row, lines between them. */
.sec-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    /* the bottom line runs the full width, even when the last row has one tile */
    border-bottom: 0.7px solid var(--color-border);
    list-style: none;
}

/* Left-column tiles start on the text line above; right-column tiles sit 20px in from the divider. */
.sec-tile {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-3);
    padding: 20px 20px var(--space-5) 0;
    border-top: 0.7px solid var(--color-border);
}

.sec-tile:nth-child(odd):not(.sec-tile--wide) {
    border-right: 0.7px solid var(--color-border);
}

.sec-tile:nth-child(even):not(.sec-tile--wide) {
    padding-left: 20px;
}

.sec-tile--wide {
    grid-column: 1 / -1;
}

.sec-tile__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0.7px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
}

.sec-tile__icon .icon {
    width: 13px;
    height: 13px;
}

.sec-tile__title {
    margin: 10px 0 0;
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.sec-tile__text {
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 13px;
    line-height: 1.6;
}

.sec-tile__ref {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* Plan cards: "All plans" and the lavender "Enterprise" side by side. */
.sec-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-7);
    border: 0.7px solid var(--color-border);
}

.sec-plan {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
}

.sec-plan + .sec-plan {
    border-left: 0.7px solid var(--color-border);
}

.sec-plan--soft {
    background: var(--color-brand-soft);
}

.sec-plan__badge {
    align-self: flex-start;
    padding: 2px 8px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 10px;
}

.sec-plan__badge--dark {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.sec-plan__title {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.sec-plan__text {
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
    font-size: 11px;
    line-height: 1.6;
}

.sec-plan__ref {
    margin-top: auto;
    padding-top: var(--space-6);
}

.sec-check {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.sec-check li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-desc);
    font-size: 13px;
    line-height: 1.55;
}

.sec-check .icon {
    flex: none;
    width: 12px;
    height: 12px;
    /* centred on the first line of text (the line's height is 1.55em), so it lines up with
       one-line items and stays on the first line of longer ones */
    margin-top: calc((1.55em - 12px) / 2);
    color: var(--color-brand);
}

.sec-check--lead {
    gap: var(--space-4);
    margin-top: 0;
}

.sec-check--lead strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

/* Policy rows: file icon, title and text, the address on the right. */
.sec-docs {
    margin: var(--space-6) 0 0;
    padding: 0;
    border-top: 0.7px solid var(--color-border);
    list-style: none;
}

.sec-docs__row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 0.7px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}

.sec-docs__row:hover .sec-docs__title {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sec-docs__file {
    display: block;
    width: 22px;
    height: 28px;
}

/* The WEB icon: white with a grey line; dark for the highlighted document. */
.sec-docs__file .icon {
    width: 100%;
    height: 100%;
}

.icon-file-web__bg {
    fill: #fff;
}

.icon-file-web__text {
    fill: #121226;
}

.icon-file-web__line {
    fill: #cfcfd6;
}

.sec-docs__file--dark .icon-file-web__bg,
.sec-docs__file--dark .icon-file-web__line {
    fill: #121226;
}

.sec-docs__file--dark .icon-file-web__text {
    fill: #fff;
}

.sec-docs__label {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sec-docs__title {
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
}

.sec-docs__text {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.sec-docs__url {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 10px;
    white-space: nowrap;
}

.sec-docs__url .icon {
    width: 10px;
    height: 10px;
}

/* AI split card. */
.sec-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 0.7px solid var(--color-border);
}

.sec-split__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
}

.sec-split__eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 11px;
}

.sec-split__title {
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
}

.sec-split__desc {
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
    font-size: 11px;
    line-height: 1.65;
}

.sec-split__link {
    margin-top: var(--space-6);
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.sec-split__link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sec-split__side {
    padding: var(--space-6) var(--space-5);
    border-left: 0.7px solid var(--color-border);
    background: var(--color-brand-soft);
}

/* Disclosure: card on the left, the response timeline on the right. */
.sec-disclosure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sec-disclosure__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5) var(--space-5) var(--space-5) 0;
}

.sec-disclosure__mail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    align-self: stretch;
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 0.7px solid var(--color-border);
    border-radius: 4px;
    background: #fafafa;
}

.sec-disclosure__mail > .icon {
    flex: none;
    width: 14px;
    height: 14px;
}

.sec-disclosure__mail-text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 10px;
}

.sec-disclosure__mail-text strong {
    color: var(--color-text);
    font-size: var(--fs-tiny);
    overflow-wrap: anywhere;
}

.sec-disclosure__mail .btn {
    flex: none;
    padding: 6px 10px;
    font-size: 11px;
}

.sec-steps {
    margin: 0;
    padding: 0;
    border-left: 0.7px solid var(--color-border);
    list-style: none;
}

.sec-steps li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
    color: var(--color-text-desc);
    font-size: 11px;
    line-height: 1.55;
}

.sec-steps li strong {
    display: block;
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
}

.sec-steps__value {
    color: var(--color-text);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
}

.sec-steps__value small {
    display: block;
    color: var(--color-text-secondary);
    font-size: 9px;
    font-weight: var(--fw-regular);
}

/* Closing banner: dark, edge to edge. */
.sec-cta {
    background: #14142b;
    color: var(--color-dark-text);
}

.sec-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5) var(--space-8);
    padding-block: var(--space-8);
}

.sec-cta__title {
    color: var(--color-dark-text);
}

.sec-cta__text {
    max-width: 440px;
    margin: var(--space-3) 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-small);
    line-height: 1.6;
}

/* ---------- Intro hero (element: intro_hero) ----------
 * Centred pill, title, text, buttons and a facts row, then one full-width image. Reuses
 * .pill, .heading-display and .btn; the rest is scoped here.
 */
.intro-hero-section {
    padding-top: var(--space-7);
}

.intro-hero {
    border: 0.7px solid var(--color-border);
}

.intro-hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-align: center;
}

.intro-hero__badge {
    margin-bottom: var(--space-5);
}

.intro-hero__badge .icon {
    color: var(--color-brand);
}

.intro-hero__title {
    max-width: var(--intro-hero-title-w, 15em);
}

.intro-hero__description {
    max-width: var(--intro-hero-desc-w, 590px);
    margin-top: var(--space-4);
    color: var(--color-text-desc);
}

.intro-hero__actions {
    justify-content: center;
    margin-top: var(--space-6);
}

/* "REST API v2 · Open, documented..." - each fact bold name + grey text. */
.intro-hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    margin: var(--space-6) 0 0;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.5;
    list-style: none;
}

.intro-hero__facts strong {
    color: var(--color-text);
    font-weight: var(--fw-medium);
}

.intro-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-top: 0.7px solid var(--color-border);
}

/* ---------- Pricing hero (page: pricing) ----------
 * Centred in a lined box: the Capterra pill, title, description, the Monthly / Annually switch
 * and the student-number picker (site.js [data-pricing-picker]), with painting mosaics in the
 * top-right and bottom-left corners.
 */
.price-hero-section {
    padding-top: var(--space-7);
}

.price-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-6) var(--space-7);
    border: 0.7px solid var(--color-border);
    text-align: center;
}

.price-hero__mosaic {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
}

.price-hero__mosaic--top {
    top: 0;
    right: 0;
    width: 110px;
}

.price-hero__mosaic--bottom {
    bottom: 0;
    left: 0;
    width: 166px;
}

.price-hero__badge {
    position: relative;
    margin-bottom: var(--space-5);
}

.price-hero__badge .icon {
    width: 11px;
    height: 11px;
    color: var(--color-brand);
}

.price-hero__title {
    position: relative;
}

.price-hero__description {
    position: relative;
    max-width: 520px; /* wraps after "your price", as in the design */
    margin-top: var(--space-4);
    color: var(--color-text-desc);
}

/* Monthly / Annually: a pill with the chosen option in black. */
.price-hero__billing {
    position: relative;
    display: inline-flex;
    gap: 2px;
    margin-top: var(--space-7);
    padding: 4px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fafafa;
}

.price-hero__billing-btn,
.price-hero__band {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-desc);
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.price-hero__billing-btn:hover,
.price-hero__band:hover {
    color: var(--color-text);
}

.price-hero__billing-btn.is-active,
.price-hero__band.is-active {
    background: var(--color-text);
    color: #fff;
}

.price-hero__save {
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--color-highlight-soft);
    color: #2f4a06;
    font-size: 10px;
    font-weight: var(--fw-semibold);
}

.price-hero__bands-label {
    position: relative;
    margin: var(--space-5) 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Student numbers: one pill row, the chosen band in black. */
.price-hero__bands {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin-top: var(--space-3);
    padding: 4px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fafafa;
}

.price-hero__band {
    padding: 8px 14px;
}

/* ---------- Pricing plans (page: pricing) ----------
 * Two columns under the hero's box: Core (its price and band table follow the picker, site.js
 * [data-pricing-core]) and Enterprise Pro, a white card on a painting. A note line below.
 */
.price-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.price-core {
    /* top: the Enterprise column's padding + its card's, so both titles line up */
    padding: calc(var(--space-7) + var(--space-5)) var(--space-7) var(--space-7);
}

.price-enterprise {
    padding: var(--space-7);
    border-left: 0.7px solid var(--color-border);
    background: var(--price-enterprise-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.price-enterprise__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-5);
    background: var(--color-surface);
}

.price-plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.price-plan__title {
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: var(--fw-medium);
}

.price-plan__tag {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--fw-medium);
}

.price-plan__tag--brand {
    background: #E1E3FA;
    color: var(--color-text-desc);
}

.price-plan__text {
    max-width: 520px;
    margin: var(--space-5) 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.price-enterprise .price-plan__text {
    color: var(--color-text-desc);
}

.price-core__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: var(--space-7) 0 0;
}

.price-core__amount {
    color: var(--color-text);
    font-size: 48px;
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.price-core__per {
    color: var(--color-text-secondary);
    font-size: 14px;
}

.price-core__per[hidden] {
    display: none;
}

.price-plan__note {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* The band table: one cell per band (label over price), the chosen one tinted. */
.price-core__bands {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: var(--space-6);
    border: 0.7px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.price-core__band {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
    border: 0;
    border-left: 0.7px solid var(--color-border);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.price-core__band:first-child {
    border-left: 0;
}

.price-core__band:hover {
    background: var(--color-surface-hover);
}

.price-core__band.is-active {
    background: var(--color-brand-soft);
}

.price-core__band-label {
    color: var(--color-text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.price-core__band-price {
    color: var(--color-text);
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

/* "1,000+ / Contact" cell links to the contact page: on hover its price reads as a link. */
.price-core__band--contact {
    text-decoration: none;
}

.price-core__band--contact .price-core__band-price {
    transition: color 0.2s ease;
}

.price-core__band--contact:hover .price-core__band-price,
.price-core__band--contact:focus-visible .price-core__band-price {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.price-core__button,
.price-enterprise__button {
    justify-content: center;
    width: 100%;
    margin-top: var(--space-5);
}

.price-plan__label {
    margin: var(--space-6) 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Enterprise: a line under the price, then the list. */
.price-enterprise__label {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 0.7px solid var(--color-text);
}

.price-check {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.price-check--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: var(--space-5) 0 0;
}

.price-check li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-text-desc);
    font-size: 14px;
    line-height: 21px;
}

.price-check .icon {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: calc((1.5em - 12px) / 2); /* centred on the first line */
    color: var(--color-brand);
}

.price-enterprise__trust {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: auto; /* the trust note and button sit at the foot of the card */
    padding: var(--space-3) var(--space-4);
    border: 0.7px solid var(--color-border);
    border-radius: 6px;
}

.price-enterprise__trust .icon {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: var(--color-text-secondary);
}

.price-enterprise__trust p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.price-enterprise__trust a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.price-plans__note {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) 0;
    color: var(--color-text-secondary);
    font-size: 11px;
}

.price-plans__note p {
    margin: 0;
}

.price-plans__note p:last-child {
    flex: none;
}

/* ---------- Build your plan (page: pricing) ----------
 * A lined box: heading row, then the module cards four to a row (each ticks on or off) beside
 * the sticky estimate (site.js [data-pricing-builder]).
 */
.price-build-section {
    padding: var(--space-6) 0 var(--space-7);
}

.price-build {
    border: 0.7px solid var(--color-border);
}

.price-build__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-6) var(--space-5);
}

.price-build__eyebrow {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.price-build__title {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
    font-size: 24px;
    font-weight: var(--fw-medium);
}

.price-build__note {
    max-width: 440px;
    margin: 0;
    color: var(--color-text-desc);
    font-size: 14px;
    line-height: 21px;
}

.price-build__note strong {
    font-weight: var(--fw-semibold);
}

.price-build__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px; /* estimate column as in the design */
    border-top: 0.7px solid var(--color-border);
}

.price-modules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-self: start; /* keeps its own height: a taller estimate (more ticked modules) doesn't stretch the cards */
    margin: 0 0 -0.7px; /* every row has a bottom line; when the list is the tallest column, its last
                           line lies on the box's bottom edge instead of doubling it */
    padding: 0;
    list-style: none;
}

.price-module {
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
    transition: background-color 0.2s ease;
}

.price-module:hover {
    background: var(--color-surface-hover);
}

.price-module:has(.price-module__check:checked) {
    background: var(--color-brand-soft);
}

/* The tick box, top right of the card; the whole card is its label. */
.price-module__check {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.price-module__label {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-4) var(--space-4) var(--space-3);
    cursor: pointer;
}

.price-module__icon {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: var(--space-4);
    object-fit: contain;
}

.price-module__title {
    color: var(--color-text);
    font-size: 14px;
    font-weight: var(--fw-medium);
    line-height: 21px;
}

.price-module__text {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.price-module__limit {
    margin-top: var(--space-1);
    color: #b45309;
    font-size: 11px;
    font-weight: var(--fw-medium);
}

.price-module__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.price-module__price {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.price-module__price strong {
    color: var(--color-text);
    font-size: 16px;
    font-weight: var(--fw-semibold);
}

.price-module__link {
    color: var(--color-brand);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The estimate: sticky beside the cards while they scroll by. */
/* Estimate column: the painting fills it; the estimate is a white card on top that stays in
   view while the module list scrolls. */
.price-estimate-col {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    border-left: 0.7px solid var(--color-border);
    background: var(--price-estimate-bg, none) center / cover no-repeat var(--color-surface-muted);
}

/* The card stays in place (it doesn't follow the scroll) and fills the column's full height. */
.price-estimate {
    flex: 1;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--color-surface);
}

.price-estimate__label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.price-estimate__price {
    margin-top: var(--space-3);
}

.price-estimate__price .price-core__amount {
    font-size: 32px;
}

.price-estimate__lines {
    margin: 0;
}

/* The Core line has no lines round it (as in the design); the first line is under the "Add On" badge. */
.price-estimate__lines > .price-estimate__line {
    border-bottom: 0;
}

.price-estimate__line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 0.7px solid var(--color-border);
    font-size: 14px;
    font-weight: 600;
}

.price-estimate__line dt {
    display: grid;
    gap: 2px;
    color: var(--color-text);
}

.price-estimate__line dt span {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 400;
}

.price-estimate__line dd {
    margin: 0;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

/* Selected modules: name and price in regular weight (only the Core line stays bold). */
.price-estimate__modules .price-estimate__line dt,
.price-estimate__modules .price-estimate__line dd {
    font-weight: var(--fw-regular);
}

.price-estimate__empty {
    margin: 0;
    padding: var(--space-3) 0;
    border-bottom: 0.7px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-style: italic;
}

/* "Add On" badge under the Core line (always shown), with a line under it. */
.price-estimate__addons {
    margin: 0;
    padding: var(--space-3) 0;
    border-bottom: 0.7px solid var(--color-border);
    line-height: 1;
}

.price-estimate__hint {
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border-radius: 4px;
    background: var(--color-highlight-soft);
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.6;
}

.price-estimate__hint:empty {
    display: none;
}

.price-estimate__actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.price-estimate__actions .btn {
    justify-content: center;
}

.price-estimate__fineprint {
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

/* ---------- Trust strip (page: pricing) ----------
 * One lined box, three rows: the customer logos, the key figures with the review ratings, then
 * the security text beside the compliance badges.
 */
.price-trust-section {
    padding-bottom: var(--space-9);
}

.price-trust {
    border: 0.7px solid var(--color-border);
}

.price-trust__logos,
.price-trust__stats,
.price-trust__security {
    display: grid;
}

.price-trust__logos {
    grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
}

.price-trust__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 0.7px solid var(--color-border);
}

.price-trust__security {
    grid-template-columns: minmax(260px, 0.9fr) 2.6fr;
    border-top: 0.7px solid var(--color-border);
}

.price-trust__logos > * + *,
.price-trust__stats > * + *,
.price-trust__security > * + * {
    border-left: 0.7px solid var(--color-border);
}

.price-trust__logos-text {
    margin: 0;
    padding: var(--space-5);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.price-trust__logo {
    display: grid;
    place-items: center;
    min-height: 92px;
    padding: var(--space-4) var(--space-5);
}

.price-trust__logo img {
    display: block;
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
}

.price-trust__stat {
    padding: var(--space-5);
}

.price-trust__stat-value {
    margin: 0;
    color: var(--color-text);
    font-size: 24px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.price-trust__stat-text {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.price-trust__ratings {
    display: grid;
    align-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) var(--space-5);
    list-style: none;
}

.price-trust__ratings li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.price-trust__rating-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.price-trust__rating-value {
    min-width: 2.4em;
    color: var(--color-text);
    font-size: 24px;
    font-weight: var(--fw-medium);
    line-height: 1;
}

.price-trust__rating-stars {
    height: 13px;
    width: auto;
}

.price-trust__security-text {
    padding: var(--space-5);
}

.price-trust__eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.price-trust__title {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

.price-trust__description {
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.price-trust__link {
    margin-top: var(--space-5);
}

.price-trust__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-5);
    margin: 0;
    padding: var(--space-6) var(--space-5);
    list-style: none;
}

.price-trust__badges img {
    display: block;
    width: auto;
    height: 120px;
}

/* ---------- Compare plans (page: pricing) ----------
 * The heading row (shared with "Build your plan") over the table: a features column and three
 * plans, "Core + add-ons" tinted with a brand line on top. Grey group rows split the features.
 * The table scrolls sideways on narrow screens.
 */
.price-compare {
    border: 0.7px solid var(--color-border);
}

.price-compare__title {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
    font-size: 32px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* No scroll box on wider screens, so the plan header row can stick to the top of the window
   (a scroll box would hold it); phones scroll the table sideways instead (max-width: 768px). */
.price-compare__scroll {
    overflow: visible;
}

.price-compare__table {
    width: 100%;
    min-width: 700px;
    border-collapse: separate; /* borders belong to the cells, so they move with the sticky header */
    border-spacing: 0;
    table-layout: fixed;
}

.price-compare__table th,
.price-compare__table td {
    padding: var(--space-3) var(--space-5);
    border-top: 0.7px solid var(--color-border);
    color: var(--color-text);
    font-size: 15px;
    font-weight: var(--fw-regular);
    text-align: left;
    vertical-align: middle;
}

.price-compare__table th + th,
.price-compare__table th + td,
.price-compare__table td + td {
    border-left: 0.7px solid var(--color-border);
}

.price-compare__feature {
    width: 37%;
}

.price-compare__table thead th {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    vertical-align: top;
    font-weight: var(--fw-medium);
    /* The plan header row sticks under the site menu (or the top of the window while the menu is
       hidden) until the table ends. --header-visible is set by site.js. */
    position: sticky;
    top: var(--header-visible, 0px);
    z-index: 2;
    background: var(--color-surface);
    box-shadow: 0 0.7px 0 var(--color-border); /* line under the row while it is stuck */
    transition: top 0.25s ease; /* follows the menu as it slides */
}

.price-compare__table thead th.is-highlight {
    box-shadow: inset 0 2px 0 var(--color-brand), 0 0.7px 0 var(--color-border);
}

.price-compare__col-title {
    display: block;
    font-size: 15px;
    font-weight: var(--fw-medium);
}

/* Button under each column's price ("Try for free" / "Talk to sales"). */
.price-compare__button {
    display: inline-flex; /* as wide as its label, at the left of the column */
    margin-top: var(--space-4);
}

.price-compare__col-text {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: var(--fw-regular);
}

.price-compare__table .is-highlight {
    background: #fafaff;
}

.price-compare__table thead .is-highlight {
    background: var(--color-brand-soft);
}

.price-compare__group th,
.price-compare__group td,
.price-compare__group .is-highlight {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    background: var(--color-surface-muted);
}

.price-compare__group th {
    font-size: 13px;
    font-weight: var(--fw-semibold);
}

.price-compare__row-title {
    display: block;
}

.price-compare__row-text {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.price-compare__yes {
    display: inline-flex;
    color: var(--color-brand);
}

.price-compare__yes .icon {
    width: 13px;
    height: 13px;
}

.price-compare__no {
    color: #c4c4c8;
}

.price-compare__pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: var(--fw-medium);
}

.price-compare__pill--brand {
    background: var(--color-brand-soft);
    color: var(--color-brand);
}

/* ---------- Onboarding (page: pricing) ----------
 * The heading row over two plans: self onboarding (white) and enterprise onboarding (lavender).
 * The plan parts reuse the pricing plan cards' styles.
 */
.price-onboard {
    border: 0.7px solid var(--color-border);
}

.price-onboard__plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0.7px solid var(--color-border);
}

.price-onboard__plan {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6) var(--space-6);
}

.price-onboard__plan + .price-onboard__plan {
    border-left: 0.7px solid var(--color-border);
}

.price-onboard__plan--soft {
    background: #f7f7fd;
}

.price-plan__tag--dark {
    background: var(--color-text);
    color: #fff;
}

.price-onboard__plan .price-plan__text {
    max-width: 320px; /* wraps as in the design */
}

.price-onboard__label {
    margin-top: var(--space-7);
    padding-bottom: var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
}

.price-onboard__list {
    margin-top: var(--space-5);
}

/* The buttons line up at the foot of both plans. */
.price-onboard__button {
    align-self: flex-start;
    margin-top: auto;
}

/* ---------- Customer quotes (page: pricing) ----------
 * The heading over two quotes side by side, a line between them.
 */
.price-quotes {
    border: 0.7px solid var(--color-border);
}

.price-quotes__head {
    padding: var(--space-7) var(--space-6) var(--space-6);
}

.price-quotes__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0.7px solid var(--color-border);
}

.price-quotes__item {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--space-6);
}

.price-quotes__item + .price-quotes__item {
    border-left: 0.7px solid var(--color-border);
}

.price-quotes__quote {
    margin: 0 0 var(--space-6);
}

.price-quotes__quote p {
    margin: 0;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.6;
}

.price-quotes__item figcaption {
    display: grid;
    margin-top: auto;
}

.price-quotes__name {
    color: var(--color-text);
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

.price-quotes__role {
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* ---------- Closing banner (page: pricing) ----------
 * Text on the painting at the left, a white card with the two buttons and three ticks at the right.
 */
.price-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-8) var(--space-7);
    border-inline: 0.7px solid var(--color-border);
    background: var(--price-cta-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.price-cta__eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.price-cta__title {
    max-width: 14em; /* two lines: "...free, then / pay only for your students" */
    margin: var(--space-3) 0 0;
    color: var(--color-text);
}

.price-cta__description {
    max-width: 450px; /* wraps after "Full", as in the design */
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 15px;
    line-height: 1.6;
}

.price-cta__card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
}

.price-cta__button {
    justify-content: center;
    width: 100%;
}

.price-cta__points {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.price-cta__points li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 12px;
}

.price-cta__points svg {
    flex: none;
    width: 14px;
    height: 14px;
}

/* ---------- "Email this quote" popup (page: pricing) ---------- */
/* Pricing "What's included" popup (pricing.php; site.js [data-module-modal]). */
.module-modal {
    width: min(880px, calc(100% - 2 * var(--space-4)));
    max-width: none;
    max-height: calc(100% - 2 * var(--space-5));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 24px 48px rgba(17, 17, 17, 0.18);
}

.module-modal::backdrop {
    background: rgba(17, 17, 17, 0.55);
    backdrop-filter: blur(4px);
}

.module-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0.7px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.module-modal__close:hover {
    background: var(--color-surface-hover);
}

.module-modal__close .icon {
    width: 14px;
    height: 14px;
}

.module-modal__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8) var(--space-6) var(--space-6);
    border-bottom: 0.7px solid var(--color-border);
}

.module-modal__icon {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-surface-muted);
    object-fit: contain;
}

.module-modal__eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.module-modal__title {
    margin: 4px 0 0;
    font-size: 26px;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
}

.module-modal__text {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.module-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
}

/* Preview: the module's still with a white play button; play loads the video in its place. */
.module-modal__preview {
    position: relative;
    display: grid;
    place-items: center;
    align-self: start;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    background: #1d1d1d;
}

.module-modal__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.module-modal__still[hidden],
.module-modal__play[hidden] {
    display: none;
}

.module-modal__play {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.module-modal__play:hover,
.module-modal__play:focus-visible {
    transform: scale(1.08);
}

.module-modal__play .icon {
    width: 18px;
    height: 18px;
    margin-left: 3px;
}

.module-modal__preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.module-modal__features-title {
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 0.7px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 13px;
}

.module-modal__features ul {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

/* A purple tick before each feature. */
.module-modal__features li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.module-modal__features li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 2px;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid var(--color-brand);
    border-left: 2px solid var(--color-brand);
    transform: rotate(-45deg);
}

.module-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-top: 0.7px solid var(--color-border);
}

.module-modal__page {
    gap: 6px;
}

.module-modal__page[hidden] {
    display: none;
}

.module-modal__page .icon {
    width: 14px;
    height: 14px;
}

.module-modal__foot [data-module-add] {
    margin-left: auto;
}


.quote-modal {
    width: min(520px, calc(100% - 2 * var(--space-4)));
    max-width: none;
    padding: var(--space-6);
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
}

.quote-modal::backdrop {
    background: rgba(17, 17, 17, 0.55);
    backdrop-filter: blur(4px);
}

.quote-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}

.quote-modal__close:hover {
    background: var(--color-surface-hover);
}

.quote-modal__close .icon {
    width: 16px;
    height: 16px;
}

.quote-modal__title {
    margin: 0 0 var(--space-5);
    font-size: 22px;
    font-weight: var(--fw-medium);
}

.quote-modal__field + .quote-modal__field {
    margin-top: var(--space-4);
}

.quote-modal__field label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 13px;
    font-weight: var(--fw-medium);
}

.quote-modal__field input {
    width: 100%;
    height: 42px;
    padding: 0 var(--space-3);
    border: 0.7px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
}

.quote-modal__field input:focus {
    border-color: var(--color-brand);
    outline: 2px solid var(--color-brand-soft);
}

.quote-modal__field input[aria-invalid="true"] {
    border-color: #dc2626;
}

/* The phone picker (intl-tel-input) fills the row like the other fields. */
.quote-modal .iti {
    display: block;
    width: 100%;
}

.quote-modal .iti__selected-dial-code {
    font-size: 14px;
}

.quote-modal__error {
    margin: var(--space-1) 0 0;
    color: #dc2626;
    font-size: 12px;
}

.quote-modal__error--form {
    margin-top: var(--space-4);
}

.quote-modal__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
}

.quote-modal__send.is-loading {
    opacity: 0.6;
    cursor: progress;
}

.quote-modal__send.is-loading::after {
    content: "";
    width: 12px;
    height: 12px;
    margin-left: var(--space-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: quote-spin 0.7s linear infinite;
}

@keyframes quote-spin {
    to {
        transform: rotate(360deg);
    }
}

.quote-modal__thanks p {
    margin: 0 0 var(--space-3);
    color: var(--color-text-desc);
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- About hero (page: about_classe365) ----------
 * A white card on the painting (with a painting mosaic on its right edge), then one lined box:
 * vision and mission at the left, the story with the key figures and review ratings at the right.
 */
.about-hero-section {
    padding-top: var(--space-7);
}

.about-hero {
    padding: var(--space-8) var(--space-8) var(--space-8);
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
    background: var(--about-hero-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.about-hero__card {
    position: relative;
    padding: var(--space-6) 200px var(--space-6) var(--space-7);
    background: var(--color-surface);
}

.about-hero__eyebrow {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: 11px;
}

.about-hero__title {
    max-width: 16em; /* two lines, broken after "platforms" as in the design */
}

.about-hero__description {
    max-width: 700px;
    margin-top: var(--space-5);
    color: var(--color-text-secondary);
}

.about-hero__actions {
    margin-top: var(--space-6);
}

/* The mosaic sits in the card's bottom-right corner, flush with both edges (as in the design). */
.about-hero__mosaic {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 195px;
    height: auto;
    pointer-events: none;
}

.about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    border: 0.7px solid var(--color-border);
}

.about-intro__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-7);
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
}

.about-intro__main {
    display: flex;
    flex-direction: column;
    border-left: 0.7px solid var(--color-border);
}

.about-intro__eyebrow {
    margin: 0;
   color: #94A3B8;
    font-size: 14px;
    line-height: 21px;
}

.about-intro__title {
    max-width: 9em; /* wraps after "the" and "learning,", as in the design */
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font-size: 40px;
    font-weight: var(--fw-semibold);
    line-height: 46px;
    letter-spacing: -1.2px;
}

.about-intro__mission-text {
    max-width: 330px;
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font-size: 15px;
    font-weight: var(--fw-medium);
    line-height: 1.5;
}

.about-intro__story {
    flex: 1;
    padding: var(--space-6) var(--space-8) var(--space-6);
}

.about-intro__story-text {
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 14px;
    line-height: 1.6;
}

.about-intro__story-text + .about-intro__story-text {
    max-width: 640px; /* the second paragraph wraps narrower, as in the design */
}

.about-intro__stats {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    border-top: 0.7px solid var(--color-border);
}

.about-intro__stats > * + * {
    border-left: 0.7px solid var(--color-border);
}

.about-intro__stat {
    padding: var(--space-6) var(--space-8) var(--space-5) var(--space-7);
}

.about-intro__stat-value {
    margin: 0;
    color: var(--color-text);
    font-size: 36px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.about-intro__stat-text {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.about-intro__ratings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-7);
    margin: 0;
    padding: var(--space-5) var(--space-7);
    list-style: none;
}

.about-intro__ratings li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.about-intro__rating-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.about-intro__rating-value {
    color: var(--color-text);
    font-size: 28px;
    font-weight: var(--fw-medium);
    line-height: 1;
}

.about-intro__rating-stars {
    height: 18px;
    width: auto;
}

/* ---------- Milestones (page: about_classe365; site.js [data-timeline]) ----------
 * Title and arrows, then the years on one line: each a year over a circle with its text below.
 * The chosen one is purple; the row scrolls sideways (no scrollbar) to keep it in view.
 */
.about-timeline {
    padding: var(--space-8) 0 var(--space-7) var(--space-6);
    border: 0.7px solid var(--color-border);
}

.about-timeline__title {
    margin: 0;
    color: var(--color-text);
    font-size: 30px;
    font-weight: var(--fw-semibold);
    line-height: 36px;
    letter-spacing: -0.01em;
}

.about-timeline__arrows {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.about-timeline__arrow {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0.7px solid var(--color-border);
    border-radius: 2px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.about-timeline__arrow:hover:not(:disabled) {
    border-color: var(--color-dark);
}

.about-timeline__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.about-timeline__arrow svg {
    width: 6px;
    height: 10px;
}

.about-timeline__arrow--prev svg {
    transform: rotate(180deg);
}

.about-timeline__track {
    display: flex;
    margin: var(--space-8) 0 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.about-timeline__track::-webkit-scrollbar {
    display: none;
}

.about-timeline__item {
    position: relative;
    flex: 0 0 200px;
    padding-right: var(--space-5);
}

/* The line through the circles, one piece per item so it runs the whole row. */
.about-timeline__item::before {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    border-top: 0.7px solid var(--color-border);
    content: "";
}

.about-timeline__pick {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.about-timeline__year {
    font-size: 30px;
    font-weight: var(--fw-medium);
    line-height: 32px;
    transition: color 0.15s ease;
}

.about-timeline__dot {
    position: relative;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--color-text);
    border-radius: 50%;
    background: var(--color-surface);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.about-timeline__item.is-active .about-timeline__year {
    color: var(--color-brand);
}

.about-timeline__item.is-active .about-timeline__dot {
    border-color: var(--color-brand);
    background: var(--color-brand);
}

.about-timeline__text {
    max-width: 170px;
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Ecosystem (page: about_classe365) ----------
 * Title and text with a painting mosaic in the top-right corner, then Classe365 and Hiree365
 * side by side: a white card (title, text, ticks, logo, button) on a panel each - a painting
 * for Classe365, pale green for Hiree365.
 */
.about-eco {
    padding: var(--space-9) var(--space-8) var(--space-8);
    border: 0.7px solid var(--color-border);
}

/* Text at the left; the mosaic at the right runs from the box's top edge down to the panels and
   sits against the box's right edge (pulled over the padding), so it touches all three. */
.about-eco__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
}

.about-eco__intro {
    max-width: 760px;
    padding-bottom: var(--space-9); /* the gap above the panels when there's no mosaic */
}

.about-eco__mosaic {
    display: block;
    flex: none;
    align-self: flex-end;
    width: 200px;
    height: auto;
    margin-top: calc(-1 * var(--space-9));
    margin-right: calc(-1 * var(--space-8));
    pointer-events: none;
}

.about-eco__title {
    margin: 0;
    color: var(--color-text);
    font-size: 34px;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.about-eco__description {
    max-width: 600px;
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
    font-size: 13px;
    line-height: 1.6;
}

.about-eco__products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.about-eco__panel {
    display: flex;
    padding: var(--space-7);
    background: var(--about-eco-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.about-eco__panel--hiree365 {
    background: #f2f7f4;
}

.about-eco__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 500px;
    padding: var(--space-6) var(--space-5);
    background: var(--color-surface);
}

.about-eco__card-title {
    margin: 0;
    color: var(--color-text);
    font-size: 20px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.about-eco__card-text {
    max-width: 440px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 13px;
    line-height: 1.6;
}

.about-eco__points {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.about-eco__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: 13px;
    line-height: 20px;
}

.about-eco__points svg {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px; /* level with the first line */
    color: var(--color-brand);
}

/* Logo at the bottom left, the button (if any) at the bottom right. */
.about-eco__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-7);
}

.about-eco__logo {
    display: block;
    width: auto; /* at the files' own size (about 100px wide), so they stay sharp */
    height: auto;
}

/* ---------- Awards (page: about_classe365) ----------
 * The shared award row, boxed on this page: lines along its top and sides (the row already
 * has its bottom line).
 */
.about-ratings .ratings {
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
}

/* ---------- Team (page: about_classe365) ----------
 * Straight under the award row (sharing its line): a centred title with mosaics in its
 * top-right and bottom-left corners, then the people in four columns. The second row starts one
 * column in, with a mosaic in that first column; another mosaic sits right of the first row.
 */
.about-team {
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.about-team__head {
    position: relative;
    padding: 96px var(--space-6);
    border-bottom: 0.7px solid var(--color-border);
    text-align: center;
}


.about-team__description {
    position: relative;
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
}

.about-team__mosaic {
    display: block;
    height: auto;
    pointer-events: none;
}

.about-team__mosaic--head-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
}

.about-team__mosaic--head-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 190px;
}

/* Four columns of people; the right mosaic in the space right of the first row. */
.about-team__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
    margin: 0;
    padding: 0 165px var(--space-9) 43px; /* right: the mosaic's width, touching the last photo */
    list-style: none;
}

.about-team__deco {
    position: absolute;
    top: 0;
    right: 0;
}

.about-team__mosaic--grid-right {
    width: 165px;
}

/* The left mosaic takes the second row's first column (from the box's left line to the next
   photo), so the people there start one column in. */
.about-team__deco--left {
    position: static;
    grid-row: 2;
    grid-column: 1;
    margin: 0 calc(-1 * var(--space-5)) 0 -43px;
}

.about-team__mosaic--grid-left {
    width: 100%;
}

.about-team__photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef1f6;
}

.about-team__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team__name {
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font-size: 20px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.about-team__role {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

/* ---------- Offices and Join the team (page: about_classe365) ----------
 * One lined box: title, text and button, then the world map (one image, with the pins and
 * addresses drawn in) running to the box's bottom line. "Join the team" on a lavender band
 * straight under the box.
 */

.about-offices {
    --about-offices-pad: var(--space-9); /* side padding; the map runs out over it */
    padding: var(--space-9) var(--about-offices-pad) 0;
    border: 0.7px solid var(--color-border);
}

.about-offices__title {
    margin: 0;
    color: var(--color-text);
    font-size: 34px;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.about-offices__description {
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 13px;
}

.about-offices__button {
    margin-top: var(--space-4);
}

/* The map image (pins and addresses drawn in): the box's full width, line to line. */
.about-offices__map {
    display: block;
    width: calc(100% + 2 * var(--about-offices-pad));
    max-width: none;
    height: auto;
    margin: 0 calc(-1 * var(--about-offices-pad)) 0;
}

.about-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-9) var(--space-9);
    border: 0.7px solid var(--color-border);
    border-top: 0;
    background: var(--color-brand-soft);
}

.about-join__title {
    margin: 0;
    color: var(--color-text);
    font-size: 34px;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.about-join__description {
    max-width: 550px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 15px;
    line-height: 24px;
}

.about-join__button {
    flex: none;
}

/* ---------- Integrations directory (element: integrations_directory) ----------
 * Sidebar (title, search, categories, "Missing a tool?") beside a grid of integration cards
 * four to a row with lines between them, a "Not on the list?" card closing the grid, and an
 * optional second group under its own label. Reuses .btn; everything else is scoped here.
 */
.int-dir {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.int-dir__side {
    padding: var(--space-6) var(--space-5);
    border-right: 0.7px solid var(--color-border);
}

.int-dir__title {
    margin: 0;
    color: var(--color-text);
    font-size: 20px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.int-dir__description {
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.6;
}

.int-dir__search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-6);
    padding: 0 10px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-secondary);
}

.int-dir__search:focus-within {
    border-color: var(--color-brand);
}

.int-dir__search .icon {
    flex: none;
    width: 13px;
    height: 13px;
}

.int-dir__search input {
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-tiny);
}

.int-dir__cats {
    display: grid;
    gap: 2px;
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

/* Category: name left, count right; the active one bold with a brand bar on its left. */
.int-dir__cat {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 6px 4px 6px 10px;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--color-text-desc);
    font: inherit;
    font-size: var(--fs-tiny);
    text-align: left;
    cursor: pointer;
}

.int-dir__cat span:last-child {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.int-dir__cat:hover {
    background: var(--color-surface-hover);
}

.int-dir__cat.is-active {
    font-weight: var(--fw-semibold);
}

.int-dir__cat.is-active::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 2px;
    background: var(--color-brand);
}

.int-dir__missing {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 0.7px solid var(--color-border);
}

.int-dir__missing-title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
}

.int-dir__missing-text {
    margin: 2px 0 0;
    color: var(--color-text-desc);
    font-size: 11px;
}

.int-dir__missing-text a {
    color: inherit;
    text-underline-offset: 2px;
}

.int-dir__strip {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 8px var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
    background: #fafafa;
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* Cards four to a row; each draws its right and bottom line, the grid reaches 1px past its
   right edge (clipped), so the last card in a row never doubles the block's line. */
.int-dir__main {
    min-width: 0;
    overflow: hidden;
}

.int-dir__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 -1px 0 0;
    padding: 0;
    list-style: none;
}

.int-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

.int-card[hidden] {
    display: none;
}

.int-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

/* Logo in a small bordered tile (square), or a wider one for wordmarks; without an image,
   its short name in grey. */
.int-card__logo {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 4px;
    border: 0.7px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--fw-semibold);
}

.int-card__logo--wide {
    padding: 4px 8px;
}

.int-card__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 22px;
    object-fit: contain;
}

.int-card__logo:not(.int-card__logo--wide) img {
    max-width: 22px;
}

.int-card__badge {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-dark);
    color: var(--color-dark-text);
    font-size: 10px;
    line-height: 16px;
}

.int-card__badge--light {
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.int-card__name {
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

/* Description: at most two lines. */
.int-card__description {
    display: -webkit-box;
    margin: var(--space-3) 0 var(--space-4);
    overflow: hidden;
    color: var(--color-text-desc);
    font-size: 11px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.int-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
}

.int-card__category {
    color: var(--color-text-secondary);
    font-size: 10px;
}

.int-card__link {
    flex: none;
    color: var(--color-text);
    font-size: 11px;
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.int-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.int-card__link--ask {
    color: var(--color-text-secondary);
    font-weight: var(--fw-regular);
}

/* "Not on the list?" - spans the rest of its row (site.js sets the span). */
.int-dir__cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5) var(--space-5) var(--space-5);
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

.int-dir__cta[hidden] {
    display: none;
}

.int-dir__cta-eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 11px;
}

.int-dir__cta-title {
    margin: var(--space-2) 0 0;
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.int-dir__cta-text {
    max-width: 440px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: 11px;
    line-height: 1.6;
}

.int-dir__cta-actions {
    margin-top: var(--space-4);
}

.int-dir__cta-actions .btn {
    padding: 6px 10px;
    font-size: var(--fs-tiny);
}

/* Second group (e.g. "to confirm"): a cream strip with its label, then its cards. */
.int-dir__extra[hidden] {
    display: none;
}

.int-dir__extra-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
    background: #fffcf5;
}

.int-dir__extra-label {
    flex: none;
    padding: 2px 8px;
    border: 0.7px solid #f2c48d;
    border-radius: 2px;
    background: #fff1de;
    color: #b45309;
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.int-dir__extra-text {
    flex: 1;
    min-width: 220px;
    max-width: 520px;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.6;
}

.int-dir__empty {
    margin: 0;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-secondary);
    text-align: center;
}

/* ---------- Featured integrations (integrations page) ----------
 * Heading (eyebrow, title) with a short text on the right, then three cards with lines
 * between them: logos, title, text, a checklist and set-up guide buttons.
 */
.int-featured-section {
    padding-block: var(--space-9);
}

.int-featured__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    margin-bottom: var(--space-5);
}

.int-featured__eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.int-featured__description {
    max-width: 290px;
    margin: 0;
    color: var(--color-text-desc);
    font-size: var(--fs-tiny);
    line-height: 1.6;
}

.int-featured__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 0.7px solid var(--color-border);
    list-style: none;
}

.int-featured__card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-5) var(--space-6);
}

.int-featured__card + .int-featured__card {
    border-left: 0.7px solid var(--color-border);
}

.int-featured__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-height: 24px;
}

.int-featured__logos img {
    display: block;
    width: auto;
    max-width: 90px;
    height: 18px;
    object-fit: contain;
}

.int-featured__card-title {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.int-featured__text {
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
    font-size: 11px;
    line-height: 1.65;
}

.int-featured__points {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.int-featured__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-desc);
    font-size: 11px;
    line-height: 1.5;
}

.int-featured__points .icon {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 2px;
    color: var(--color-brand);
}

.int-featured__actions {
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-5);
}

.int-featured__actions .btn {
    padding: 6px 8px;
    font-size: 11px;
}

/* ---------- For developers, Enterprise connectors, closing banner (integrations page) ---------- */
/* The dark background runs edge to edge across the screen; the content stays in the container. */
.int-dev-section {
    background: #0f0f10;
}

.int-dev {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-9) 0;
    color: var(--color-dark-text);
}

.int-dev__eyebrow {
    margin: 0 0 var(--space-4);
    color: #8c93f2;
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.int-dev__title {
    max-width: 14em;
    color: var(--color-dark-text);
}

.int-dev__description {
    max-width: 520px;
    margin: var(--space-5) 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-small);
    line-height: 1.65;
}

.int-dev__points {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.int-dev__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-tiny);
    line-height: 1.6;
}

.int-dev__points .icon {
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    color: #8c93f2;
}

/* Resource groups: a bordered two-column table in a monospace font. */
.int-dev__groups {
    margin-top: var(--space-6);
    border: 0.7px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.int-dev__groups-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 8px var(--space-3);
    border-bottom: 0.7px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.int-dev__groups-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 -1px -1px 0;
    padding: 0;
    list-style: none;
}

.int-dev__groups-list li {
    padding: 6px var(--space-3);
    border-right: 0.7px solid rgba(255, 255, 255, 0.14);
    border-bottom: 0.7px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
}

.int-dev__actions {
    margin-top: var(--space-6);
}

.int-dev__btn {
    padding: 7px 10px;
    font-size: var(--fs-tiny);
}

.int-dev__btn--light {
    background: var(--color-surface);
    color: var(--color-text);
}

.int-dev__btn--light:hover {
    background: var(--color-surface-hover);
}

.int-dev__btn--ghost {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-dark-text);
}

.int-dev__btn--ghost:hover {
    border-color: var(--color-dark-text);
    background: rgba(255, 255, 255, 0.08);
}

/* Code panels. */
.int-dev__code {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.int-dev__panel {
    border: 0.7px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #18181a;
    overflow: hidden;
}

.int-dev__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    border-bottom: 0.7px solid rgba(255, 255, 255, 0.1);
    color: var(--color-dark-text);
    font-size: 11px;
    font-weight: var(--fw-medium);
}

.int-dev__method {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(34, 165, 91, 0.25);
    color: #5fd38d;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
}

.int-dev__muted {
    color: rgba(255, 255, 255, 0.5);
    font-weight: var(--fw-regular);
}

.int-dev__pre {
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
    color: rgba(255, 255, 255, 0.88);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.75;
}

.int-dev__comment {
    color: rgba(255, 255, 255, 0.45);
}

.int-dev__string {
    color: #d8e88a;
}

.int-dev__key {
    color: #a5a9f7;
}

.int-dev__number {
    color: #fff;
    font-weight: var(--fw-semibold);
}

.int-dev__note {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    line-height: 1.6;
}

.int-dev__note a {
    color: var(--color-dark-text);
    text-underline-offset: 2px;
}

/* Enterprise connectors: text panel beside a 5 x 2 grid of connectors. */
.int-ent-section {
    padding-block: var(--space-9) 0;
}

.int-ent {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    border: 0.7px solid var(--color-border);
}

.int-ent__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
    border-right: 0.7px solid var(--color-border);
}

.int-ent__title {
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
}

.int-ent__description {
    margin: var(--space-4) 0 0;
    color: var(--color-text-desc);
    font-size: var(--fs-tiny);
    line-height: 1.6;
}

.int-ent__note {
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: 10px;
    line-height: 1.6;
}

.int-ent__link {
    margin-top: auto;
    padding-top: var(--space-5);
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.int-ent__link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.int-ent__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 -1px -1px 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.int-ent__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 140px;
    padding: var(--space-4);
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
    text-align: center;
}

/* Logo tiles (img/integrations/enterprise/, 240 x 182 with the spacing built in): half size. */
.int-ent__logo {
    display: grid;
    place-items: center;
    min-height: 28px;
}

.int-ent__logo img {
    display: block;
    width: 120px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 240 / 182;
    object-fit: contain;
}

.int-ent__short {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border: 0.7px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-secondary);
    font-size: 9px;
    font-weight: var(--fw-semibold);
}

.int-ent__name {
    color: var(--color-text);
    font-size: 11px;
    font-weight: var(--fw-medium);
}

/* Closing banner: title and text left, buttons right. */
.int-cta-section {
    padding-block: var(--space-7) var(--space-9);
}

.int-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5) var(--space-8);
    padding: var(--space-7) var(--space-6);
    border: 0.7px solid var(--color-border);
}

.int-cta__text {
    max-width: 480px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-desc);
    font-size: var(--fs-tiny);
    line-height: 1.6;
}

.split-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(17, 17, 17, 0.16);
}

/* With the figures bar (customer stories): when the text column is narrower than the title's
   width (tablets, phones), the lines are balanced instead of leaving one word on its own. */
.split-hero--stats .split-hero__title {
    text-wrap: balance;
}

/* Optional pill above the title ('badge'), its icon in the brand colour. */
.split-hero__badge {
    align-self: flex-start;
    margin-bottom: var(--space-6);
}

.split-hero__badge .icon {
    color: var(--color-brand);
}

/* 'stats' / 'ratings': a bordered bar along the bottom of the text side (touching the line
   under the hero), at least a gap under the buttons. */
.split-hero--stats .split-hero__text {
    padding-bottom: 0;
}

.split-hero--stats .split-hero__actions {
    margin-bottom: var(--space-6);
}

.split-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: fit-content;
    margin-top: auto;
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
}

.split-hero__stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    min-width: 172px;
    padding: var(--space-4) var(--space-4);
}

.split-hero__stat + .split-hero__stat {
    border-left: 0.7px solid var(--color-border);
}

.split-hero__stat-value {
    color: var(--color-text);
    font-size: 26px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.split-hero__stat-label {
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    line-height: 1.3;
}

/* Review scores: logo, score and stars on one line each. */
.split-hero__stat--ratings {
    gap: var(--space-2);
}

.split-hero__rating {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.split-hero__rating-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.split-hero__rating-score {
    min-width: 2.2em;
    color: var(--color-text);
    font-size: 26px;
    font-weight: var(--fw-medium);
    line-height: 1.1;
}

.split-hero__rating-stars {
    width: auto;
    height: 15px;
}

/* 'imageFill' => true: the image fills the whole right column, edge to edge (no painting
   around it, no card frame), always whole: the column has the image's own proportions
   (--collage-ratio) and the logos sit over it in the same box. The column is wide enough
   ('mediaWidth') for the image to be at least as tall as the text; the text column then
   stretches, keeping its figures bar on the bottom line. */
.split-hero--fill .split-hero__media {
    position: relative;
    display: block;
    align-self: start;
    min-height: 0;
    padding: 0;
    aspect-ratio: var(--collage-ratio, 2 / 3);
    background: none;
}

.split-hero__collage {
    position: absolute;
    inset: 0;
}

.split-hero--fill .split-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* 'logoSets': one logo per cell of the image's grid. Each cell has two layers; site.js fades
   the next logo in over the current one, one cell at a time. */
.split-hero__logos {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--logo-cols, 2), minmax(0, 1fr));
    grid-template-rows: repeat(var(--logo-rows, 3), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.split-hero__logo-slot {
    display: grid;
    place-items: center;
    min-height: 0;
}

/* 'logoCells': each slot placed on its own tile of the image (left / top / width / height
   set by the element), the logo centred in it. */
.split-hero__logos--cells {
    display: block;
}

.split-hero__logos--cells .split-hero__logo-slot {
    position: absolute;
}

/* The logo files are flat light grey: darkened to the design's dark grey so they read
   clearly on the painting. Changing a logo (site.js), as on intercom.com/customers: the old
   one goes out in 1.25s - fading, blurring to 12px and shrinking a little - then the new one
   comes in slowly over 2.5s, from blurred to sharp and back to full size. */
.split-hero__logo {
    grid-area: 1 / 1;
    width: var(--logo-w, auto);
    max-width: var(--logo-max-w, 74%);
    height: auto;
    max-height: var(--logo-max-h, 46%);
    object-fit: contain;
    filter: grayscale(1) brightness(var(--logo-brightness, 0.45)) blur(12px);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 1.25s ease, filter 1.25s ease, transform 1.25s ease;
}

.split-hero__logo.is-visible {
    filter: grayscale(1) brightness(var(--logo-brightness, 0.45)) blur(0);
    opacity: 1;
    transform: none;
    transition: opacity 2.5s cubic-bezier(0.45, 0, 0.25, 1), filter 2.5s cubic-bezier(0.45, 0, 0.25, 1), transform 2.5s cubic-bezier(0.45, 0, 0.25, 1);
}

/* ---------- Page hero (element: page_hero) ----------
 * Inner-page header: centred intro with a full-width mosaic image along its bottom edge,
 * then a background painting with an app screenshot cut off at the bottom.
 * Sizes from the design at 1336px width.
 */
.page-hero-section {
    padding-top: var(--space-7);
}

.page-hero {
    /* Screenshot: its top offset and width; the painting area under the intro is exactly
       tall enough to show the whole screenshot, so it always touches the bottom edge.
       --shot-ratio (height / width) is set per page from the image file. */
    --shot-top: 100px;
    --shot-w: min(66cqw, 890px);
    --media-h: calc(var(--shot-top) + var(--shot-w) * var(--shot-ratio, 0.512) - 1px);
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    isolation: isolate;
}

.page-hero__backdrop {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: var(--media-h);
    background: var(--hero-bg, none) center bottom / cover no-repeat var(--color-surface-muted);
}

.page-hero__intro {
    position: relative;
    z-index: 1;
    padding: var(--space-9) var(--space-6) 58px;
    border: 0.7px solid var(--color-border);
    border-bottom: 0;
}

/* Mosaic band (one image with both corner groups): full width, on the intro's bottom edge,
   behind the text; it scales with the header, so the squares keep their places. */
.page-hero__mosaic {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.page-hero__title {
    /* default width; a page can override it with 'titleWidth' on the element */
    max-width: var(--hero-title-w, 860px);
    margin-inline: auto;
}

.page-hero__description {
    /* default width; a page can override it with 'descriptionWidth' */
    max-width: var(--hero-desc-w, 840px);
}

.page-hero__actions {
    justify-content: center;
    margin-top: var(--space-6);
}

/* Painting area (transparent: the backdrop shows); the screenshot runs off the bottom. */
.page-hero__media {
    position: relative;
    z-index: 1;
    height: var(--media-h);
    padding-top: var(--shot-top);
    /* thin line between the mosaic squares and the painting below (as in the design) */
    border-top: 0.7px solid var(--color-border);
    overflow: hidden;
}

.page-hero__image {
    display: block;
    width: var(--shot-w);
    max-width: none;
    height: auto;
    margin-inline: auto;
}

/* Optional pill above the title ('badge'). */
.page-hero__badge {
    margin-bottom: var(--space-5);
}

.page-hero__badge img {
    width: 14px;
    height: 14px;
}

/* 'cover' => true: the painting runs across the full screen width, right under the header
   (no gap above); the content stays in the container, the text left-aligned with the
   screenshot's left edge, and the whole screenshot shows with painting below it. */
.page-hero-section.page-hero-section--cover {
    padding-top: 0;
    /* (two classes, so the smaller screens' section padding doesn't bring the gap back) */
    background: var(--hero-bg, none) center bottom / cover no-repeat var(--color-surface-muted);
}

.page-hero--cover {
    --shot-top: var(--space-9);
    --shot-w: min(84cqw, 1120px);
}

.page-hero--cover .page-hero__backdrop {
    display: none;
}

.page-hero--cover .page-hero__intro {
    padding: calc(var(--space-9) + var(--space-4)) calc((100cqw - var(--shot-w)) / 2) 0;
    border: 0;
    text-align: left;
}

.page-hero--cover .page-hero__title,
.page-hero--cover .page-hero__description {
    margin-inline: 0;
}

.page-hero--cover .page-hero__description {
    color: var(--color-text-desc);
}

.page-hero--cover .page-hero__actions {
    justify-content: flex-start;
}

/* Screenshot frame for the optional play button ('play'): the button sits on its top-right corner. */
.page-hero__shot {
    position: relative;
    width: var(--shot-w);
    margin-inline: auto;
}

.page-hero__shot .page-hero__image {
    width: 100%;
}

/* (Inside the frame, so it outranks .play-button's own position: relative.) */
.page-hero__shot .page-hero__play {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

/* The tooltip opens into the painting on the right; if that space is short of one line
   it wraps instead of running past the screen edge (smaller screens flip it, see 1400px). */
.page-hero__play .play-button__label {
    width: max-content;
    max-width: calc((100vw - var(--shot-w)) / 2 - 40px);
    white-space: normal;
}

/* The cover layout lets the button's rings and tooltip spill past the screenshot; the
   full-width section still clips at the screen edges. */
.page-hero--cover,
.page-hero--cover .page-hero__media {
    overflow: visible;
}

.page-hero-section--cover {
    overflow: clip;
}

.page-hero--cover .page-hero__media {
    height: auto;
    padding-bottom: var(--space-9);
    border-top: 0;
}

/* Soft lavender tag pill (e.g. feature tags). Use with .pill. */
.pill.pill--soft {
    padding: 10px 20px;
    border: 0;
    background: var(--color-brand-soft);
    color: var(--color-text-desc);
    font-size: var(--fs-small);
    line-height: 21px;
}

/* ---------- Feature rows (element: feature_rows) ----------
 * Intro, grey mosaic band, then rows alternating text | image and image | text. The text
 * side has a narrow empty gutter column; thin lines separate columns and rows. The first
 * row has an empty strip above it (as in the design).
 */
.feature-rows {
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

/* 'borderTop' => true: the block above has no bottom line, so this one draws the top line. */
.feature-rows.feature-rows--border-top {
    border-top: 0.7px solid var(--color-border);
}

.feature-rows__intro {
    position: relative;
    border-bottom: 0.7px solid var(--color-border);
}

/* Optional full-width mosaic ('mosaic'): one image spanning the intro, standing on its
   bottom line, at its real proportions. */
.feature-rows__mosaic {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}

/* Keep the text above the mosaics where they come close. */
.feature-rows__intro> :not(.feature-rows__mosaic) {
    position: relative;
    z-index: 1;
}

.feature-rows .mosaic-band {
    border-bottom: 0.7px solid var(--color-border);
}

/* Wider than the default intro title, so the \n break in the title decides the lines. */
.feature-rows__intro .section-intro__title {
    /* default width; a page can override it with 'titleWidth' on the element */
    max-width: var(--rows-title-w, 700px);
}

.feature-rows__description {
    /* default width; a page can override it with 'descriptionWidth' on the element */
    max-width: var(--rows-desc-w, 700px);
    color: var(--color-text-desc);
}

/* Optional intro buttons ('buttons' on the element); not output at all without them. */
.feature-rows__actions {
    justify-content: center;
    margin-top: var(--space-6);
}

/* 'introAlign' => 'left': text on the left, buttons in the top-right corner, and the mosaic
   a corner image standing on the intro's bottom line at the right. */
.feature-rows__intro--left {
    padding: var(--space-9);
    text-align: left;
}

.feature-rows__intro--left .section-intro__title,
.feature-rows__intro--left .feature-rows__description {
    margin-inline: 0;
}

.feature-rows__intro--left .feature-rows__actions {
    position: absolute;
    top: var(--space-9);
    right: var(--space-9);
    margin-top: 0;
}

.feature-rows__intro--left .feature-rows__mosaic {
    left: auto;
    width: auto;
    height: var(--rows-mosaic-h, 150px);
}

/* 'introPadding' / 'titleSize' on the element (desktop and tablet; phones keep their own). */
@media (min-width: 769px) {

    /* 'gap' on the element: one centred row with a fixed space between logos (above 768px). */

    .logo-strip__logos--sized.logo-strip__logos--gap {
        display: flex;
        justify-content: center;
        gap: var(--logo-gap);
    }

    .feature-rows__intro--left[style*="--rows-intro-pad"] {
        padding: var(--rows-intro-pad);
    }

    .feature-rows__intro[style*="--rows-title-fs"] .section-intro__title {
        font-size: var(--rows-title-fs);
        line-height: 1.2;
    }

    /* AI spotlight title, as in the design (tablets and desktops; phones keep their size): at
       most 40px, so it breaks "Agent automation & AI built / into your workflow". */

    .ai-spotlight__title {
        font-size: min(var(--fs-title), 40px);
        line-height: 1.2;
    }
}

/* 'actionsBelow' => true: the buttons under the description instead of the top-right corner. */
.feature-rows__intro--left.feature-rows__intro--actions-below .feature-rows__actions {
    position: relative;
    top: auto;
    right: auto;
    justify-content: flex-start;
    margin-top: var(--space-6);
}

.feature-row {
    --feature-gutter: 40px;
    display: grid;
    /* Text and media share the width equally (after the narrow gutter). */
    grid-template-columns: var(--feature-gutter) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "strip strip strip"
        "gutter text media";
    grid-template-rows: auto 1fr;
}

.feature-row+.feature-row {
    border-top: 0.7px solid var(--color-border);
}

.feature-row--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--feature-gutter);
    grid-template-areas:
        "strip strip strip"
        "media text gutter";
}

.feature-row__strip {
    grid-area: strip;
    height: calc(2 * var(--space-4));
    border-bottom: 0.7px solid var(--color-border);
    background: linear-gradient(var(--color-border), var(--color-border)) var(--feature-gutter) 0 / 1px 100% no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) calc(var(--feature-gutter) + (100% - var(--feature-gutter)) * 0.5) 0 / 1px 100% no-repeat;
    /* the text | media line */
}

.feature-row__gutter {
    grid-area: gutter;
}

.feature-row:not(.feature-row--reverse) .feature-row__gutter {
    border-right: 0.7px solid var(--color-border);
}

.feature-row--reverse .feature-row__gutter {
    border-left: 0.7px solid var(--color-border);
}

.feature-row__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    padding: 64px 44px;
}

.feature-row__title {
    font-size: 26px;
    line-height: 1.35;
    font-weight: var(--fw-medium);
}

.feature-row__description {
    margin-top: var(--space-4);
    color: var(--color-text-desc);
    font-weight: var(--fw-regular);
}

.feature-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-7) 0 0;
    padding: 0;
    list-style: none;
}

.feature-row__media {
    grid-area: media;
    display: flex;
    align-items: center;
    padding: 45px 52px;
}

.feature-row:not(.feature-row--reverse) .feature-row__media {
    border-left: 0.7px solid var(--color-border);
}

.feature-row--reverse .feature-row__media {
    border-right: 0.7px solid var(--color-border);
}

/* Painting (background) with the feature screenshot centred on it. */
.feature-row__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 462 / 298;
    /* the design's image box */
    padding: 37px 69px;
    overflow: hidden;
    background: var(--color-surface-muted) center / cover no-repeat;
}

.feature-row__shot {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Page dimmer behind an open mega menu (desktop only, see the min-width: 1100px rules). */
.mega-overlay {
    display: none;
}

/* Thin bar above the menu: 365 Software products on the left, facts on the right. */
.top-bar {
    background: #3E4489;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}

.top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--top-bar-height);
}

.top-bar__brands {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    white-space: nowrap;
}

.top-bar a {
    color: #fff;
    text-decoration: none;
}

.top-bar__brand {
    display: inline-flex;
    align-items: center;
    font-weight: var(--fw-semibold);
}

.top-bar__brand img {
    display: block;
    width: auto;
    height: 20px;
}

.top-bar__sep {
    opacity: 0.7;
}

.top-bar__product {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Current product (this site): a lighter purple chip, as in the design. */
.top-bar__product:hover,
.top-bar__product.is-current {
    background: #5258B2;
}

/* Product icon: the image as it is (it has its own rounded outline). 1px up: the product
   names have no descenders, so their letters sit above the line box's middle. */
.top-bar__product-icon {
    position: relative;
    top: -1px;
    width: 13px;
    height: 13px;
    object-fit: contain;
}

/* 'iconOnHover' (Hiree365): the icon slides in only while the chip is hovered/focused. */
.top-bar__product--hover-icon .top-bar__product-icon {
    width: 0;
    margin-right: -6px; /* cancels the chip's gap while the icon is hidden */
    opacity: 0;
    transition: width 0.2s ease, margin-right 0.2s ease, opacity 0.2s ease;
}

.top-bar__product--hover-icon:hover .top-bar__product-icon,
.top-bar__product--hover-icon:focus-visible .top-bar__product-icon {
    width: 13px;
    margin-right: 0;
    opacity: 1;
}

/* 365 Software logo: a light shine sweeps across it left to right on hover, and back
   right to left when the pointer leaves (the same transition, reversed). The link covers
   the bar's full height (and a little either side, cancelled by the negative margins), so
   the streak runs from the bar's top edge to its bottom edge as in the design. */
.top-bar__brand {
    position: relative;
    overflow: hidden;
    height: var(--top-bar-height);
    margin: 0 -22px 0 -16px; /* right: over the '>' separator, short of the next chip */
    padding: 0 22px 0 16px;
    /* the streak fades out at the area's ends instead of stopping at a hard edge (the logo
       sits inside the faded margins, so it isn't affected) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* The separator sits under the brand link's extra right side; clicks there reach the link. */
.top-bar__sep {
    position: relative;
    pointer-events: none;
}

.top-bar__brand::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    /* an even, soft stripe of light (only its edges are feathered), as in the design */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 100%);
    /* slanted band (a diagonal streak, as in the design) */
    transform: translateX(-150%) skewX(-40deg);
    transition: transform 1.2s ease-in-out;
    pointer-events: none;
}

.top-bar__brand:hover::after,
.top-bar__brand:focus-visible::after {
    transform: translateX(450%) skewX(-40deg);
}

.top-bar__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* "•" between the facts. */
.top-bar__facts li + li::before {
    content: "•";
    margin: 0 12px;
    opacity: 0.8;
}

.top-bar__stars {
    margin-right: 6px;
    color: #FBBF24;
    letter-spacing: 1px;
}

/* A rating below 5 ('stars' => 4.3): the stars filled gold up to --stars-fill, the rest faint. */
.top-bar__stars[style*="--stars-fill"] {
    background: linear-gradient(90deg, #FBBF24 var(--stars-fill), rgba(255, 255, 255, 0.35) var(--stars-fill));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 'joined' => true: no dot before this fact, just a gap (e.g. the second rating). */
.top-bar__facts li.top-bar__fact--joined::before {
    content: none;
}

.top-bar__facts li.top-bar__fact--joined {
    margin-left: 22px;
}

/* Toggled by site.js: slides away on scroll down, returns on scroll up. */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* While it is hidden nothing in it reacts to the pointer, so a dropdown can't open at the top
   of the screen without the header (its hover bridge would otherwise peek into view). */
.site-header.is-hidden,
.site-header.is-hidden * {
    pointer-events: none;
}

.site-header.is-hidden .site-nav__dropdown {
    display: none !important;
}

/* Separates the header from page content once the page is scrolled. */
.site-header.is-scrolled {
    box-shadow: 0 4px 16px rgba(17, 17, 17, 0.06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: var(--header-height);
}

.site-header__logo {
    display: inline-flex;
    flex-shrink: 0;
}

.site-header__logo img {
    display: block;
    width: 100px;
    height: 28px;
    margin-top: 10px;
}

.site-header__toggle {
    display: none;
}

/* Phones / tablets only (the menu panel's top row and the blurred page behind it). */
.site-nav__head,
.site-nav__backdrop {
    display: none;
}

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-nav__menu,
.site-nav__dropdown {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-ui);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.site-nav__link:hover {
    background: var(--color-surface-hover);
}

/* Small right-pointing triangle, turns down when the dropdown is open. */
.site-nav__caret {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    transition: transform 0.15s ease;
}

/* Only the menu item's own caret (not the carets of the headings inside a mega menu). */
.has-dropdown.is-open > .site-nav__link .site-nav__caret {
    transform: rotate(90deg);
}

.site-nav__dropdown {
    display: none;
}

.has-dropdown.is-open>.site-nav__dropdown {
    display: block;
}

.site-nav__dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--fs-small);
    text-decoration: none;
}

.site-nav__dropdown a:hover {
    background: var(--color-surface-hover);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav__action {
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-ui);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav__action:hover {
    background: var(--color-surface-hover);
}

/* ---------- Mega menus (header: 'mega' items in config/navigation.php) ----------
 * Columns of headed link lists ('main') and a right-hand column ('aside'). Desktop: a
 * full-width panel under the header. Phones / tablets: one list in the menu panel.
 */
.site-nav__dropdown.mega a {
    color: inherit;
    text-decoration: none;
    white-space: normal;
}

.mega__section + .mega__section {
    margin-top: var(--space-6);
}

.mega__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.mega__list {
    display: grid;
    gap: 18px;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.site-nav__dropdown.mega .mega__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    border-radius: 0;
    white-space: normal;
}

.site-nav__dropdown.mega .mega__link:hover {
    background: none;
}

.mega__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #1E2A6B;
}

.mega__icon .icon,
.mega__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mega__label {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.mega__title {
    color: #1E2A6B;
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
}

.mega__text {
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    line-height: 1.45;
}

/* 'compact' mega menus (Platform): plain headings, dark titles, icons in bordered squares,
   sections divided by a line. */
.mega--compact .mega__heading {
    color: var(--color-text-secondary);
    letter-spacing: 0;
    text-transform: none;
}

.mega--compact .mega__icon {
    display: grid;
    place-items: center;
    color: #3f3f46;
    width: 30px;
    height: 30px;
    padding: 6px;
    border: 0.7px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.mega--compact .mega__title {
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

.mega--compact .mega__text {
    font-size: 12px;
}

.mega--compact .mega__section + .mega__section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 0.7px solid var(--color-border);
}

.mega__decoration {
    display: block;
    width: auto;
    max-width: 100%;
    height: 90px;
    object-fit: contain;
    object-position: left bottom;
    margin-top: var(--space-6);
}

/* Ratings (logo, score, stars) beside the aside's link list. */
.mega__aside-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.mega__ratings {
    display: grid;
    align-content: start;
    gap: 18px;
    margin: 0;
    padding: 0 0 0 var(--space-6);
    border-left: 0.7px solid var(--color-border);
    list-style: none;
}

.mega__rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mega__rating-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.mega__rating-name {
    min-width: 28px;
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.mega__rating-score {
    color: var(--color-text);
    font-size: 26px;
    font-weight: var(--fw-semibold);
    /* the box hugs the digits (Inter's figure height), so the logo and stars are centred on
       the number itself, not on empty space under it */
    line-height: 0.73;
}

.mega__rating-logo,
.mega__stars {
    flex-shrink: 0;
}

/* Stars image ('stars' on the rating). */
.mega__stars {
    display: block;
    width: auto;
    height: 18px;
}

/* Award badges under a column's list ('badges'): a 3 x 2 grid below a line. */
.mega__badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 18px 12px;
    padding: var(--space-6) var(--space-5);
    border-top: 0.7px solid var(--color-border);
}

.mega__badges img {
    display: block;
    width: 100%;
    max-width: 74px;
    height: auto;
    max-height: 74px;
    object-fit: contain;
}

/* Customer story ('testimonial' on the aside): quote, name, role, button, video. */
.mega__story {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    margin: var(--space-6);
    padding: var(--space-6) var(--space-5) var(--space-5);
    border-radius: 4px;
    background: #F5F5F6;
}

.mega__story-quote {
    margin: 0;
}

.mega__story-mark {
    display: block;
    height: 18px;
    color: var(--color-text);
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: var(--fw-semibold);
    line-height: 1;
}

.mega__story-quote blockquote {
    margin: 6px 0 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 21px;
}

.mega__story-quote figcaption {
    display: grid;
    gap: 2px;
    margin-top: var(--space-6);
    font-size: var(--fs-caption);
}

/* Name and role (customer story in the Customers menu only): normal line height, so the
   role sits right under the name. */
.mega__story-name,
.mega__story-role {
    line-height: 1.4;
}

.mega__story-name {
    color: var(--color-brand);
    font-weight: var(--fw-medium);
}

.mega__story-role {
    color: var(--color-text);
}

.site-nav__dropdown.mega .mega__story-button {
    padding: 8px 10px;
    color: var(--color-text);
    font-size: var(--fs-small);
}

.site-nav__dropdown.mega .mega__story-video {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
}

.mega__story-video img {
    display: block;
    width: 100%;
    height: 250px;
    aspect-ratio: 16 / 8.4;
    object-fit: cover;
    object-position: 70% 30%; /* keep the person in view when the photo is cropped */
}

/* Mosaic images in a section's corners ('mosaics' on a section). The section stretches to
   the bottom of its column, so 'bottom-*' sits on the panel's bottom edge. */
.mega__section--mosaics {
    position: relative;
    flex: 1;
}

.mega__mosaic {
    position: absolute;
    width: auto;
    height: auto;
    pointer-events: none;
}

.mega__mosaic--top-right {
    top: 0;
    right: 0;
}

.mega__mosaic--top-left {
    top: 0;
    left: 0;
}

.mega__mosaic--bottom-right {
    right: 0;
    bottom: 0;
}

.mega__mosaic--bottom-left {
    bottom: 0;
    left: 0;
}

/* 'below-left': hangs under the section, in the bottom strip ('strip'), starting at the
   column's left line and as tall as the strip. */
.mega__mosaic--below-left {
    top: 100%;
    left: 0;
    z-index: 1;
    height: 44px;
}

/* "Watch the learner journey" card ('image' = the big "365" on the right). */
.mega__promo {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 10px;
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border-radius: 12px;
    background: #DCDDF8;
}

.mega__promo-image {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 332px;
    width: 100%;
    height: auto;
    /* keeps its proportions when the box's height is set (below), in the bottom-right corner */
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
}

.mega__promo > :not(.mega__promo-image) {
    position: relative;
}

.mega__promo-title {
    color: var(--color-text);
    font-size: var(--fs-18);
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
}

.mega__promo-text {
    color: var(--color-text-desc);
    font-size: var(--fs-small);
    line-height: 1.5;
}

.site-nav__dropdown.mega .mega__promo-button {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    margin-top: 30px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--color-brand);
    color: #fff;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

.site-nav__dropdown.mega .mega__promo-button:hover {
    background: var(--color-dark);
}

.mega__promo-button .icon {
    width: 16px;
    height: 16px;
}

/* Dark promo card ('tone' => 'dark', e.g. the ROI card in Resources): purple, white text,
   white button. */
.mega__promo.mega__promo--dark {
    background: #5457C4;
}

.mega__promo--dark .mega__promo-title,
.mega__promo--dark .mega__promo-text {
    color: #fff;
}

/* The illustration on the dark card only: at most 183px wide, in the bottom-right corner. */
.mega__promo--dark .mega__promo-image {
    width: auto;
    max-width: 183px;
    height: auto;
    max-height: 100%;
}

.mega__promo--dark .mega__promo-text {
    max-width: 300px;
    opacity: 0.9;
}

/* Learner-journey card (Platform; the light promo card only, not the dark Resources one):
   narrower description that wraps onto three lines, and a smaller "365" image. */
.site-nav__dropdown.mega .mega__promo:not(.mega__promo--dark) .mega__promo-text {
    max-width: 58%;
}

.mega__promo:not(.mega__promo--dark) .mega__promo-image {
    height: 50%;
}

/* Description on the dark card only (Resources); other cards keep their own size. */
.site-nav__dropdown.mega .mega__promo.mega__promo--dark .mega__promo-text {
    font-size: 14px;
    line-height: 21px;
}

.site-nav__dropdown.mega .mega__promo--dark .mega__promo-button {
    background: #fff;
    color: var(--color-text);
}

.site-nav__dropdown.mega .mega__promo--dark .mega__promo-button:hover {
    background: var(--color-surface-hover);
}

/* "Check our free resources ->" at the end of the aside. */
.site-nav__dropdown.mega .mega__aside-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: var(--color-text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
}

.site-nav__dropdown.mega .mega__aside-more:hover {
    color: var(--color-brand);
}

.mega__aside-more .icon {
    width: 14px;
    height: 14px;
}

/* "What's new" list. */
.mega__news {
    padding: var(--space-5);
    border-radius: 12px;
    background: #F1F4F9;
}

.mega__news-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
}

/* Icon images ('icon' / 'linkIcon' on "What's new"). */
.mega__news-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Link icons: the image is used as a mask filled with the link's colour, so the icon turns
   the same colour as the text on hover. */
.mega__news-icon--mask {
    display: inline-block;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.mega__news-list {
    display: grid;
    gap: 14px;
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.site-nav__dropdown.mega .mega__news-list a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    line-height: 1.4;
    color: var(--color-text);
    font-size: var(--fs-small);
}

/* Hovering a "What's new" link (menu only): a very light grey panel behind it (drawn into
   the space around it by the negative margins, so nothing moves) and the icon switches to
   its filled version ('linkIconHover'). The text keeps its colour. */
.site-nav__dropdown.mega .mega__news-list a {
    margin: -6px -7px;
    padding: 6px 7px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.site-nav__dropdown.mega .mega__news-list a:hover,
.site-nav__dropdown.mega .mega__news-list a:focus-visible {
    background: #fafafa;
}

.mega__news-list a:hover .mega__news-icon--mask,
.mega__news-list a:focus-visible .mega__news-icon--mask {
    -webkit-mask-image: var(--icon-hover, var(--icon));
    mask-image: var(--icon-hover, var(--icon));
}

.site-nav__dropdown.mega .mega__news-more {
    display: inline-flex;
    padding: 0;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-5);
    color: var(--color-brand);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

.mega__news-more .icon {
    width: 14px;
    height: 14px;
}

/* Hover/focus: the text gets an underline (the arrow doesn't), like .arrow-link; no
   background (the dropdown links' general hover box). */
.site-nav__dropdown.mega .mega__news-more:hover,
.site-nav__dropdown.mega .mega__news-more:focus-visible {
    background: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ---------- Card menu (Why Classe365: 'cards' in config/navigation.php) ----------
 * Three columns: a painting with a white icon tile, title and text; under a line, each
 * card's own block (integration logos / a customer quote / compliance badges).
 */
.site-nav__dropdown.mega--cards a {
    color: inherit;
    text-decoration: none;
    white-space: normal;
}

.site-nav__dropdown.mega--cards .mega-card__head {
    display: grid;
    gap: 2px;
    border-radius: 0;
}

.mega-card__image {
    position: relative;
    display: block;
    margin-bottom: var(--space-4);
    aspect-ratio: 300 / 190;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-surface-muted);
}

.mega-card__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover painting ('imageHover'): laid over the painting and faded in while the card is
   hovered, together with the icon's hover version. */
.mega-card__image > .mega-card__image-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mega-card__head:hover .mega-card__image-hover,
.mega-card__head:focus-visible .mega-card__image-hover {
    opacity: 1;
}

/* Icon, title and text. Desktop: a white panel over the painting's bottom (see the
   min-width: 1100px rules); phones: the title and text only. */
.mega-card__info,
.mega-card__label {
    display: grid;
    gap: 2px;
}

/* 47px icon; its hover version (purple tile) fades in over it. */
.mega-card__icon {
    position: relative;
    flex-shrink: 0;
    width: 47px;
    height: 47px;
}

.mega-card__icon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mega-card__icon-hover {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mega-card__head:hover .mega-card__icon-hover,
.mega-card__head:focus-visible .mega-card__icon-hover {
    opacity: 1;
}

.mega-card__title {
   color: var(--color-text);
   font-size: var(--fs-small);
   font-weight: var(--fw-semibold);
   line-height: var(--lh-body-desc);
}

.mega-card__text {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 16px;
}

/* Integration logos: small bordered boxes, three per row. */
.mega-card__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-card__logos li {
    display: grid;
    place-items: center;
    height: 50px;
    padding: 4px 8px;
    border: 0.7px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-secondary);
    font-size: 11px;
}

.mega-card__logos img {
    width: 100%;
    max-height: 24px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
}

.site-nav__dropdown.mega--cards .mega-card__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    line-height: 1;
    color: var(--color-text-secondary);
    font-size: 10px;
    white-space: nowrap;
}

.site-nav__dropdown.mega--cards .mega-card__more:hover {
    color: var(--color-brand);
}

.mega-card__more-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/* No grey background on hover in the card menu (only the text colour changes). */
.site-nav__dropdown.mega--cards a:hover {
    background: none;
}

/* Customer quote */
.mega-card__quote {
    margin: 0;
}

.mega-card__quote blockquote {
    position: relative;
    margin: 0;
    padding-left: 16px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 21px;
}

/* Large grey quote marks (as in the design). */
.mega-card__quote blockquote span {
    color: var(--color-text-secondary);
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: var(--fw-semibold);
    line-height: 0;
}

/* Opening mark in the top-left corner, beside the first line. */
.mega-card__quote blockquote span:first-child {
    position: absolute;
    top: 12px;
    left: 0;
}

/* Closing mark after the last word. */
.mega-card__quote blockquote span:last-child {
    margin-left: 3px;
    vertical-align: -11px;
}

.mega-card__quote figcaption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-6);
}

/* Name and the role under it: the same size and line height. */
.mega-card__quote figcaption span,
.mega-card__quote figcaption b {
    display: block;
    color: var(--color-text);
    font-size: var(--fs-small);
    line-height: 1.4;
}

.mega-card__quote figcaption b {
    margin-bottom: 2px;
    font-weight: var(--fw-medium);
}

.mega-card__quote-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Compliance badges in one row */
.mega-card__badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 100%; /* centred in the space under the line */
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-card__badges img {
    display: block;
    width: 100%;
    max-width: 75px;
    height: auto;
    filter: grayscale(1); /* black and white, like the integration logos */
}

/* ---------- Footer ---------- */

/* Lined box: Platform column on the left; the other columns, then the awards band. */
.site-footer__box {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    border: 0.7px solid var(--color-border);
}

.site-footer__platform {
    padding: 40px 32px;
    border-right: 0.7px solid var(--color-border);
}

.site-footer__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Columns with a line between each; they stretch, so the awards band sits at the bottom. */
.site-footer__links {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Company, Resources, Compare, Get in touch: equal widths */
}

.site-footer__column {
    padding: 40px 18px 32px;
}

.site-footer__column + .site-footer__column {
    border-left: 0.7px solid var(--color-border);
}

.site-footer__group+.site-footer__group {
    margin-top: 32px;
}

/* Award badges: an empty strip above and below, guide lines down both sides. */
.site-footer__awards {
    --awards-gap: 32px;
    padding: 28px var(--awards-gap);
    border-top: 0.7px solid var(--color-border);
    background:
        linear-gradient(var(--color-border), var(--color-border)) 0 28px / 100% 0.7px no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) 0 calc(100% - 28px) / 100% 0.7px no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) var(--awards-gap) 0 / 0.7px 100% no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) calc(100% - var(--awards-gap)) 0 / 0.7px 100% no-repeat;
}

.site-footer__awards-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 20px 24px;
    margin: 0;
    padding: 28px 16px;
    list-style: none;
}

.site-footer__awards-list img {
    display: block;
    width: auto;
    max-width: 110px;
    height: 72px;
    object-fit: contain;
}

.site-footer__heading {
    margin: 0 0 16px;
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    line-height: 1;
    text-transform: uppercase;
}

.site-footer__list,
.site-footer__legal,
.site-footer__social,
.site-footer__badges {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__list li+li {
    margin-top: 10px;
}

.site-footer__list a {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: var(--fs-caption);
    line-height: 21px;
    text-decoration: none;
}

/* Module icon before a link (Platform column). */
.site-footer__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    object-fit: contain;
}

.site-footer__list a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 35px 32px 54px;
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.site-footer__copyright {
    margin: 0 0 6px;
    font-size: var(--fs-small);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: var(--fs-small);
}

.site-footer__legal a,
.site-footer__social a {
    color: var(--color-dark-text);
    text-decoration: none;
}

.site-footer__legal a:hover {
    text-decoration: underline;
}

.site-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.site-footer__social a:hover {
    background: rgba(255, 255, 255, 0.12);
}

.site-footer__social .icon {
    width: 20px;
    height: 20px;
}

.site-footer__badges {
    display: flex;
    gap: 16px;
}

.site-footer__badges img {
    display: block;
    width: 56px;
    height: 56px;
}

/* ---------- Exit-intent popup (element: exit_intent_modal; site.js [data-exit-intent]) ----------
   Sizes from the Figma design (855 x 497): the painting on the left (425px) with a white card
   (369 x 424, 28px / 36px in) of institution logos and review scores; heading, text and two
   buttons on the right. Text uses the site's type classes (template). Desktop only (site.js). */

.exit-intent {
    width: min(855px, calc(100% - 2 * var(--space-4)));
    max-height: calc(100% - 2 * var(--space-6));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 24px 48px rgba(17, 17, 17, 0.18);
}

.exit-intent::backdrop {
    background: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(4px);
}

.exit-intent[open] {
    animation: exit-intent-in 0.22s ease-out;
}

@keyframes exit-intent-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}

/* The painting column is pinned to the full height of the popup (absolute, top to bottom), so it
   always fills it, even if the right side ever needs more than the design's 497px. */
.exit-intent__inner {
    position: relative;
    min-height: 497px;
    padding-left: 425px;
}

.exit-intent__close {
    position: absolute;
    z-index: 1;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.exit-intent__close:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.exit-intent__close .icon {
    width: 16px;
    height: 16px;
}

/* Left: the painting, with the white card on it. */
.exit-intent__art {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 425px;
    padding: 36px 28px 37px;
    background: var(--exit-intent-bg) center / cover no-repeat;
}

.exit-intent__card {
    position: relative;
    height: 100%;
    background: var(--color-surface);
}

/* The card's ruled lines: verticals 10px in from the sides, horizontals 10px in from the top
   and bottom (the line under the heading is the heading's border). */
.exit-intent__card::before,
.exit-intent__card::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.exit-intent__card::before {
    inset: 0 10px;
    border-right: 0.7px solid var(--color-border);
    border-left: 0.7px solid var(--color-border);
}

.exit-intent__card::after {
    inset: 10px 0;
    border-top: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

/* Type: text-tiny text-secondary (template). */
.exit-intent__trusted {
    box-sizing: border-box;
    height: 68px;
    padding: 25px 0 0 25px;
    border-bottom: 0.7px solid var(--color-border);
}

.exit-intent__trusted-text {
    display: block;
    max-width: 243px;
}

/* Logos: three columns and four rows, centred on the design's positions. */
.exit-intent__logos {
    display: grid;
    grid-template-columns: 104px 134px 87px;
    grid-template-rows: 68px 65px 64px 65px;
    margin: 8px 0 0;
    padding: 0 0 0 25px;
    list-style: none;
}

.exit-intent__logos li {
    display: grid;
    place-items: center;
}

.exit-intent__logos img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Review scores: logo, score and stars, two blocks side by side. */
.exit-intent__ratings {
    display: grid;
    grid-template-columns: 148px 148px;
    column-gap: 23px;
    margin-top: 34px;
    padding-left: 25px;
}

.exit-intent__rating {
    display: flex;
    align-items: center;
    gap: 7.44px;
    margin: 0;
}

.exit-intent__rating-logo {
    display: block;
    width: 20.3px;
    height: 20.68px;
    object-fit: contain;
}

.exit-intent__rating-logo[alt="G2"] {
    width: 22.32px;
    height: 22.32px;
}

.exit-intent__score {
    color: var(--color-text-desc);
    font-size: 21.94px;
    font-weight: var(--fw-bold);
    line-height: 27px;
}

/* Stars: a light row with the yellow row on top, cut to the score (in px, see the template). */
.exit-intent__stars {
    position: relative;
    display: inline-block;
    margin-left: 4.22px; /* 11.66px from the score */
    line-height: 0;
    white-space: nowrap;
}

.exit-intent__stars .icon {
    width: 13.38px;
    height: 13.38px;
    margin-right: 0.66px;
    stroke-width: 0;
}

.exit-intent__stars-base,
.exit-intent__stars-fill {
    display: flex; /* no gaps from the whitespace between the icons */
}

.exit-intent__stars .icon {
    flex: none;
}

.exit-intent__stars-base {
    color: #efefef;
}

.exit-intent__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--exit-intent-fill, 100%);
    overflow: hidden;
    color: #ffd119;
}

/* Right: heading, text, buttons at the bottom. */
.exit-intent__content {
    display: flex;
    flex-direction: column;
    min-height: 497px;
    padding: 31px 27px 37px 33px;
}

.exit-intent__title {
    line-height: 36px; /* Figma "H5/Semi Bold": 28 / 36 (heading-3 is 28 / 35) */
}

.exit-intent__title:focus {
    outline: none;
}

/* Type: text-body (template). */
.exit-intent__text {
    margin-top: 26px;
}

/* Buttons as in the design: Body/Medium (16 / 24), 40px high, 21px apart. */
.exit-intent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 21px;
    margin-top: auto;
}

.exit-intent__actions .btn {
    height: 40px;
    padding: 10px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* A short window: let it grow instead of cutting the bottom off. */
@media (max-height: 560px) {
    .exit-intent__inner,
    .exit-intent__content {
        min-height: 0;
    }
}

/* A narrow window (the popup only opens on desktop, but a window can be made small): one column. */
@media (max-width: 900px) {
    .exit-intent__inner {
        min-height: 0;
        padding-left: 0;
    }

    .exit-intent__content {
        min-height: 0;
    }

    .exit-intent__art {
        display: none;
    }
}

/* ---------- Watch demo popup (element: watch_demo_modal; site.js [data-watch-demo]) ---------- */

.watch-demo {
    width: min(820px, calc(100% - 2 * var(--space-4))); /* 25% wider than the design's 656px */
    max-height: calc(100% - 2 * var(--space-6));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 24px 48px rgba(17, 17, 17, 0.18);
}

.watch-demo::backdrop {
    background: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(4px);
}

body.has-modal-open {
    overflow: hidden;
}

.watch-demo__inner {
    position: relative;
    padding: var(--space-6) var(--space-7);
}

.watch-demo__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.watch-demo__close:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.watch-demo__close .icon {
    width: 16px;
    height: 16px;
}

.watch-demo__heading {
    padding-right: var(--space-6);
}

.watch-demo__heading .text-small {
    margin-top: var(--space-2);
}

.watch-demo__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.watch-demo__tab {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.watch-demo__tab:hover {
    border-color: #cfcfcf;
}

.watch-demo__tab[aria-selected="true"] {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.watch-demo__tab-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.watch-demo__tab-title .icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.watch-demo__tab-desc {
    color: var(--color-text-secondary);
    font-size: var(--fs-caption);
    line-height: 1.5;
}

.watch-demo__tab[aria-selected="true"] .watch-demo__tab-desc {
    color: rgba(255, 255, 255, 0.75);
}

.watch-demo__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-7);
}

.watch-demo__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.watch-demo__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-small);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.watch-demo__input:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.watch-demo__input[aria-invalid="true"] {
    border-color: #d93636;
}

select.watch-demo__input:invalid {
    color: var(--color-text-secondary);
}

/* Phone field with country flags (intl-tel-input wraps the input in .iti). */
.watch-demo .iti {
    display: block;
    width: 100%;
}

.watch-demo .iti__dropdown-content {
    z-index: 1;
}

.watch-demo__error {
    margin: 0;
    color: #d93636;
}

.watch-demo__submit {
    gap: var(--space-2);
    width: 100%;
    padding: 14px;
    font-size: var(--fs-body);
}

.watch-demo__submit .icon {
    width: 16px;
    height: 16px;
}

.watch-demo__submit:disabled {
    opacity: 0.7;
    cursor: progress;
}

.watch-demo__note {
    margin-top: var(--space-3);
    text-align: center;
}

.watch-demo__calendar {
    min-height: 620px;
    margin-top: var(--space-6);
    overflow: hidden;
}

/* ---------- Video popup (element: video_modal; site.js [data-video-modal]) ---------- */
.video-modal {
    width: min(960px, calc(100% - 2 * var(--space-4)));
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: #000;
    overflow: visible;
}

.video-modal::backdrop {
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(4px);
}

.video-modal__frame {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

/* YouTube Shorts: an upright popup, as tall as the screen allows. */
.video-modal--portrait {
    width: min(420px, calc(100% - 2 * var(--space-4)), calc((100vh - 120px) * 9 / 16));
}

.video-modal--portrait .video-modal__frame {
    aspect-ratio: 9 / 16;
}

.video-modal__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Close button just outside the video's top-right corner (inside it on phones). */
.video-modal__close {
    position: absolute;
    top: -44px;
    right: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
}

.video-modal__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.video-modal__close .icon {
    width: 18px;
    height: 18px;
}

/* ---------- Play button (e.g. page_hero 'play') ----------
 * Round blue button with a two-layer echo (as in the design): the inner ring appears, then
 * the outer one around it, then the inner one goes, leaving the outer, and it starts over.
 * Both rings are the same 20% blue, so where they overlap the inner one looks darker.
 * An optional label shows as a tooltip to its right on hover / keyboard focus.
 * <a class="play-button"><span class="play-button__icon">(icons/play)</span>
 *     <span class="play-button__label">Watch the walkthrough</span></a>
 */
.play-button {
    --play-size: 36px;
    --play-ring-inner: 2.5;
    /* x button size: ~90px */
    --play-ring-outer: 4.3;
    /* ~155px */
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--play-size);
    height: var(--play-size);
    border-radius: 50%;
    color: var(--color-dark-text);
    text-decoration: none;
    cursor: default;
}

a.play-button {
    cursor: pointer;
}

.play-button::before,
.play-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--color-play-ring);
    opacity: 0;
    pointer-events: none;
}

/* Inner ring: ~90px. */
.play-button::before {
    animation: play-echo-inner 2.8s ease-out infinite;
}

/* Outer ring: ~155px. */
.play-button::after {
    animation: play-echo-outer 2.8s ease-out infinite;
}

@keyframes play-echo-inner {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    25%,
    55% {
        opacity: 1;
        transform: scale(var(--play-ring-inner));
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(var(--play-ring-inner));
    }
}

@keyframes play-echo-outer {

    0%,
    25% {
        opacity: 0;
        transform: scale(var(--play-ring-inner));
    }

    50%,
    80% {
        opacity: 1;
        transform: scale(var(--play-ring-outer));
    }

    100% {
        opacity: 0;
        transform: scale(var(--play-ring-outer));
    }
}

.play-button__icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-play);
    box-shadow: 0 4px 12px var(--color-play-ring);
    transition: transform 0.2s ease;
}

.play-button__icon .icon {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    /* optical centre of the triangle */
}

.play-button:hover .play-button__icon,
.play-button:focus-visible .play-button__icon {
    transform: scale(1.08);
}

.play-button:focus-visible {
    outline: 2px solid var(--color-play);
    outline-offset: 4px;
}

.play-button__label {
    position: absolute;
    top: 50%;
    left: calc(100% + var(--space-2));
    padding: 6px var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 4px 16px rgba(17, 17, 17, 0.12);
    color: var(--color-text);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-4px, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.play-button:hover .play-button__label,
.play-button:focus-visible .play-button__label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

/* ---------- AI spotlight (element: ai_spotlight) ----------
 * A painting across the block with a box inset on it: a white text panel (eyebrow, title,
 * description, buttons, then linked modules at its bottom) beside a second painting with
 * an app screenshot centred on it. Type comes from the shared heading/text classes.
 */
.ai-spotlight {
    padding: calc(var(--space-9) + var(--space-6));
    border-inline: 0.7px solid var(--color-border);
    background: var(--ai-spotlight-bg, none) center / cover no-repeat var(--color-surface-muted);
}

.ai-spotlight__box {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

.ai-spotlight__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8) var(--space-9);
    background: var(--color-surface);
}

.ai-spotlight__title {
    margin-top: var(--space-3);
}

.ai-spotlight__description {
    max-width: 560px;
    margin-top: var(--space-4);
    color: var(--color-text-desc);
}

.ai-spotlight__actions {
    margin-top: var(--space-6);
}

/* Modules sit at the bottom of the panel, at least a gap under the buttons. */
.ai-spotlight__modules {
    align-self: stretch;
    margin: auto 0 0;
    padding: var(--space-8) 0 0;
    list-style: none;
}

.ai-spotlight__module {
    padding-block: var(--space-4);
}

.ai-spotlight__module+.ai-spotlight__module {
    border-top: 0.7px solid var(--color-border);
}

.ai-spotlight__module-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
}

.ai-spotlight__module-icon {
    width: 16px;
    height: 16px;
}

.ai-spotlight__module-title a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

.ai-spotlight__module-title a:hover {
    color: var(--color-brand);
}

.ai-spotlight__module-title .icon {
    width: 14px;
    height: 14px;
}

/* One image (painting + screenshot) filling the panel beside the text, centred; the text
   panel sets the height. */
.ai-spotlight__media {
    position: relative;
    overflow: hidden;
    background: var(--color-brand-soft);
}

.ai-spotlight__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Screenshot panel on the left ('mediaSide' => 'left'). */
.ai-spotlight--media-left .ai-spotlight__box {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
}

.ai-spotlight--media-left .ai-spotlight__media {
    order: -1;
}

/* ---------- Story showcase (element: story_showcase) ----------
 * Centred heading (eyebrow, title, button), then one story edge to edge: a soft panel with
 * the story text beside a photo. The photo side reuses .story-spotlight__media & co.
 */
.story-showcase {
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

/* 'borderTop' => true: a line on top too (pages where nothing above draws one). */
.story-showcase--border-top {
    border-top: 0.7px solid var(--color-border);
}

.story-showcase__eyebrow {
    margin: 0 0 var(--space-2);
    color: #94a3b8;
}

.story-showcase__button {
    margin-top: var(--space-6);
}

.story-showcase__card {
    display: grid;
    grid-template-columns: minmax(0, 1.37fr) minmax(0, 1fr);
}

.story-showcase__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8) var(--space-9) var(--space-8) 86px;
    background: var(--color-brand-soft);
}

.story-showcase__title {
    max-width: 560px;
}

.story-showcase__description {
    max-width: 520px;
    margin-top: var(--space-3);
    color: var(--color-text-desc);
    font-size: var(--fs-18);
    line-height: 26px;
}

.story-showcase__link {
    margin-top: var(--space-7);
}

.story-showcase__media {
    min-height: 464px;
}

/* ---------- Featured story (element: featured_story) ----------
 * Heading (eyebrow, title, text, small corner mosaic), then one story: the video poster with a
 * play button and a player bar on the left, the institution, quote, person and buttons on the
 * right. Reuses .heading-3, .pill, .play-button and .btn; everything else is scoped here.
 */
.featured-story {
    /* empty side gutters, as in the design: the heading and the card sit between two lines,
       the left one in line with the hero's figures bar above (its 48px text padding) */
    --featured-gutter: var(--space-8);
    padding-inline: var(--featured-gutter);
    border: 0.7px solid var(--color-border);
}

.featured-story__head,
.featured-story__card {
    border-inline: 0.7px solid var(--color-border);
}

.featured-story__head {
    position: relative;
    padding: 80px var(--space-6) var(--space-6); /* the eyebrow sits clear below the mosaic */
    border-bottom: 0.7px solid var(--color-border);
}

.featured-story__mosaic {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 62px; /* 82 x 62, as in the design */
}

.featured-story__eyebrow {
    margin: 0 0 var(--space-3);
    color: #94a3b8;
}

.featured-story__title {
    max-width: 640px;
}

.featured-story__description {
    max-width: 540px; /* wraps after "with different", as in the design */
    margin-top: var(--space-3);
    color: var(--color-text-desc);
}

.featured-story__card {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    /* empty strip under the story, as in the design: the side lines carry on through it and
       the block's bottom line closes it */
    padding-bottom: 70px;
}

/* Line right under the video and the details, where that strip starts. */
.featured-story__video,
.featured-story__info {
    border-bottom: 0.7px solid var(--color-border);
}

/* Poster fills the left side (cropped to fit), play button in the middle, player bar along the
   bottom. */
.featured-story__video {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 420px;
    overflow: hidden;
    background: var(--color-dark);
}

.featured-story__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The play button without its echo rings (they would spread over the poster). */
.featured-story__play::before,
.featured-story__play::after {
    content: none;
}

/* With a video: the whole poster plays it (hand pointer, the button grows a little on hover). */
.featured-story__video--link {
    text-decoration: none;
    cursor: pointer;
}

.featured-story__video--link .play-button {
    cursor: pointer; /* keeps its own white icon colour */
}

.featured-story__video--link:hover .play-button__icon,
.featured-story__video--link:focus-visible .play-button__icon {
    transform: scale(1.08);
}

.featured-story__bar {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-3);
    left: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
}

.featured-story__track {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
}

/* Right side: logo row under its own line, then the details, buttons at the bottom. */
.featured-story__info {
    display: flex;
    flex-direction: column;
    border-left: 0.7px solid var(--color-border);
}

.featured-story__logo-row {
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 0.7px solid var(--color-border);
}

.featured-story__logo {
    display: block;
    width: auto;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.featured-story__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6) 0;
}

.featured-story__pill {
    padding: 4px 10px;
    font-size: 11px;
}

.featured-story__pill .icon {
    width: 12px;
    height: 12px;
    color: var(--color-text-secondary);
}

.featured-story__pill--soft {
    border: 0;
    background: var(--color-brand-soft);
}

.featured-story__quote {
    margin: 0;
    padding: var(--space-5) var(--space-6) 0;
}

.featured-story__quote-mark {
    display: block;
    height: 18px;
    color: var(--color-brand);
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.featured-story__quote blockquote {
    margin: var(--space-1) 0 0;
    color: var(--color-text);
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    line-height: 1.45;
}

.featured-story__person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.featured-story__avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    transform: scaleX(-1); /* facing the other way, as in the design */
}

.featured-story__name,
.featured-story__role {
    display: block;
}

.featured-story__name {
    color: var(--color-text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

.featured-story__role {
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.4;
}

.featured-story__actions {
    margin-top: auto;
    padding: var(--space-7) var(--space-6) var(--space-5);
}

/* ---------- Story library with filters (element: story_filter) ----------
 * Centred heading with corner mosaics, a filter bar (type chips, dropdowns, search), a
 * "Showing N stories" strip, then the story cards three to a row with lines between them.
 * Reuses .play-button and .btn; everything else is scoped here.
 */
.story-filter {
    border-inline: 0.7px solid var(--color-border);
}

.story-filter__intro {
    position: relative;
    padding: var(--space-9) var(--space-6);
    border-bottom: 0.7px solid var(--color-border);
    text-align: center;
}

.story-filter__intro > :not(.story-filter__mosaic) {
    position: relative;
    z-index: 1;
}

.story-filter__mosaic {
    position: absolute;
    width: auto;
    height: 110px;
}

.story-filter__mosaic--left {
    bottom: 0;
    left: 0;
}

.story-filter__mosaic--right {
    top: 0;
    right: 0;
    height: 160px; /* taller than the left one, as in the design */
}

.story-filter__title {
    max-width: var(--story-filter-title-w, 640px); /* 'titleWidth' */
    margin-inline: auto;
}

.story-filter__description {
    max-width: var(--story-filter-desc-w, 520px); /* 'descriptionWidth' */
    margin: var(--space-3) auto 0;
    color: var(--color-text-desc);
}

/* Filter bar: chips on the left, dropdowns and search on the right. */
.story-filter__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) var(--space-4);
    border-bottom: 0.7px solid var(--color-border);
}

.story-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.story-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.story-filter__chip span {
    color: var(--color-text-secondary);
    font-weight: var(--fw-regular);
}

.story-filter__chip:hover {
    background: var(--color-surface-hover);
}

.story-filter__chip.is-active {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.story-filter__chip.is-active span {
    color: rgba(255, 255, 255, 0.7);
}

.story-filter__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Dropdown: "Region  All v" in one bordered box (a native select, restyled). */
.story-filter__select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 10px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--fs-tiny);
}

.story-filter__select select {
    padding: 6px 18px 6px 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-weight: var(--fw-medium);
    appearance: none;
    cursor: pointer;
}

.story-filter__select .icon {
    position: absolute;
    right: 8px;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.story-filter__search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 220px;
    padding: 0 10px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.story-filter__search .icon {
    flex: none;
    width: 13px;
    height: 13px;
}

.story-filter__search input {
    width: 100%;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-tiny);
}

.story-filter__search:focus-within,
.story-filter__select:focus-within {
    border-color: var(--color-brand);
}

/* "Showing N stories" strip. */
.story-filter__count {
    margin: 0;
    padding: 10px var(--space-4);
    border-bottom: 0.7px solid var(--color-border);
    background: #fafafa;
    color: var(--color-text-secondary);
    font-size: var(--fs-tiny);
}

/* Cards: three to a row, a line between them (each card's own right line, the last in a row
   none - the block's border closes it). */
.story-filter__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-filter__grid .story-card {
    display: flex;
    flex-direction: column;
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

.story-filter__grid .story-card[hidden] {
    display: none;
}

.story-filter__grid > .story-card:nth-child(3n) {
    border-right: 0;
}

.story-filter__grid .story-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.story-filter__grid .story-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The play button without its echo rings. */
.story-filter__grid .story-card__play::before,
.story-filter__grid .story-card__play::after {
    content: none;
}

/* Thumbnail with a video: the whole picture plays it; hovering grows the play button a little. */
.story-filter__grid .story-card__media--link,
.story-filter__grid .story-card__media--link .play-button {
    cursor: pointer;
    text-decoration: none;
}

.story-filter__grid .story-card__media--link:hover .play-button__icon,
.story-filter__grid .story-card__media--link:focus-visible .play-button__icon {
    transform: scale(1.08);
}

.story-filter__grid .story-card__duration {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(17, 17, 17, 0.75);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
}

.story-filter__grid .story-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-4);
}

.story-filter__grid .story-card__logo-row {
    display: flex;
    align-items: center;
    height: 32px;
    padding-bottom: var(--space-3);
    box-sizing: content-box;
}

.story-filter__grid .story-card__logo {
    display: block;
    width: auto;
    max-width: 150px;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.story-filter__grid .story-card__logo-name {
    color: var(--color-text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
}

.story-filter__grid .story-card__quote {
    margin: var(--space-3) 0 var(--space-5);
    color: var(--color-text);
    font-size: var(--fs-small);
    line-height: 1.5;
}

.story-filter__grid .story-card__name {
    margin: auto 0 0;
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
}

.story-filter__grid .story-card__role {
    margin: 6px 0 0;
    padding-bottom: var(--space-3);
    border-bottom: 0.7px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 11px;
}

.story-filter__grid .story-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.story-filter__grid .story-card__tags li {
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-soft);
    color: var(--color-text);
    font-size: 11px;
    line-height: 16px;
}

.story-filter__grid .story-card__button {
    align-self: flex-start;
    margin-top: var(--space-4);
    padding: 6px 8px;
    font-size: var(--fs-tiny);
}

.story-filter__empty {
    margin: 0;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-secondary);
    text-align: center;
}

/* ---------- Story invite banner + customer reviews (element: customer_reviews) ----------
 * Dark banner with a corner mosaic; then the reviews: heading and review-site scores, the
 * cards three to a row between two gutter lines (the first may be a wide featured quote),
 * and the rest opened by "Show all reviews" (the toolkit's toggle in site.js).
 */
.story-invite {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 220px;
    /* a little white space after the banner's end, as in the design (the mosaic still stands
       on the banner's own right edge) */
    margin-right: var(--story-invite-gap, var(--space-4));
    padding: var(--space-8) var(--space-7);
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.story-invite__text {
    position: relative;
    z-index: 1;
    max-width: 520px;
}

.story-invite__title {
    margin: 0;
    color: var(--color-dark-text);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-h3);
}

.story-invite__description {
    margin: var(--space-3) 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fs-small);
    line-height: var(--lh-body-desc);
}

.story-invite__button {
    margin-top: var(--space-6);
    border-color: var(--color-surface);
}

/* Mosaic in the top-right corner, the full height of the banner. */
.story-invite__mosaic {
    position: absolute;
    top: 0;
    right: -1px;
    width: auto;
    height: 100%;
}

.reviews {
    --reviews-gutter: 56px;
    padding-inline: var(--reviews-gutter);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5) var(--space-8);
    margin-inline: calc(-1 * var(--reviews-gutter));
    padding: var(--space-8) var(--space-8) var(--space-7);
    border-bottom: 0.7px solid var(--color-border);
}

.reviews__description {
    max-width: 440px;
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
}

.reviews__ratings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-6);
}

.reviews__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.reviews__rating-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.reviews__rating-score {
    color: var(--color-text);
    font-size: 26px;
    font-weight: var(--fw-medium);
    line-height: 1;
}

.reviews__rating-stars {
    width: auto;
    height: 15px;
    margin-left: var(--space-1);
}

/* The cards between the gutter lines. Each card draws its right and bottom line; the grid
   reaches 1px past the right line (clipped), so the last card in a row never doubles it -
   whatever the number of columns. */
.reviews__body {
    overflow: hidden;
    border-inline: 0.7px solid var(--color-border);
}

.reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 -1px 0 0;
    padding: 0;
    list-style: none;
}

.review-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-5) var(--space-5) var(--space-6);
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

.review-card--featured {
    grid-column: span 2;
    justify-content: center;
    padding: var(--space-7) var(--space-8);
    background: var(--color-brand-soft);
}

.review-card__lead {
    max-width: 560px;
    margin: 0;
    color: var(--color-text);
    font-size: 22px;
    font-weight: var(--fw-semibold);
    line-height: 1.35;
}

.review-card__stars {
    color: #FBBF24;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
}

.review-card__title {
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.review-card__quote {
    margin: var(--space-4) 0 var(--space-5);
    color: var(--color-text-desc);
    font-size: var(--fs-caption);
    line-height: 1.6;
}

.review-card--featured .review-card__quote {
    margin-top: var(--space-6);
}

/* Name and role at the bottom of the card. */
.review-card__name {
    margin: auto 0 0;
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
}

.review-card__role {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

/* Hidden reviews: slide open / closed (rows 0fr <-> 1fr) and fade, like the SIS toolkit's
   "See more features". */
.reviews__more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.5s ease, opacity 0.35s ease, visibility 0.5s;
}

.reviews.is-expanded .reviews__more {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

.reviews__more-inner {
    min-height: 0;
    overflow: hidden;
}

.reviews__foot {
    display: flex;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
}

.reviews__toggle {
    padding: 8px 14px;
}

/* ---------- Short clips carousel (element: short_clips) ----------
 * Heading (eyebrow, title, text, a mosaic at the top) with previous / next arrows, then a row
 * of portrait clips that scrolls sideways (snapping to each clip), the last one cut off by the
 * block's edge to show there is more. Reuses .play-button; everything else is scoped here.
 */
.clips {
    padding-bottom: var(--space-6);
    border: 0.7px solid var(--color-border); /* top line too: the divider above has none */
}

/* 'borderTop' => false: the block above draws the line (e.g. the About page's logo rows). */
.clips.clips--no-top {
    border-top: 0;
}

.clips__head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    padding: 64px var(--space-6) var(--space-6);
}

.clips__intro {
    position: relative;
    z-index: 1;
}

/* Mosaic hanging from the top line, a little right of the middle. */
.clips__mosaic {
    position: absolute;
    top: 0;
    left: 43%;
    width: auto;
    height: 132px;
}

.clips__eyebrow {
    margin: 0 0 var(--space-4);
    color: #94a3b8;
}

.clips__description {
    max-width: 420px;
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
}

.clips__arrows {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    gap: var(--space-3);
}

.clips__arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0.7px solid var(--color-border);
    border-radius: 2px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.clips__arrow:hover:not(:disabled) {
    border-color: var(--color-dark);
}

.clips__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.clips__arrow svg {
    width: 7px;
    height: 12px;
}

.clips__arrow[data-clips-prev] svg {
    transform: rotate(180deg);
}

/* The row: clips side by side, scrolling sideways (no scrollbar), snapping to each clip. */
.clips__track {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
}

.clips__track::-webkit-scrollbar {
    display: none;
}

.clip {
    position: relative;
    display: grid;
    place-items: center;
    /* at least 202px; when every clip fits, they share the row's full width (no space left at
       the end); when they don't, the row scrolls */
    flex: 1 0 202px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    scroll-snap-align: start;
    background: #2b2b2b;
}

.clip__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark fade along the bottom so the caption reads on any thumbnail. */
.clip::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.85) 100%);
    pointer-events: none;
}

/* The play button without its echo rings. */
.clip__play::before,
.clip__play::after {
    content: none;
}

.clip__duration {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 11px;
    line-height: 16px;
}

.clip__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: var(--space-3);
}

.clip__title {
    margin: 0;
    color: #fff;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

.clip__meta {
    margin: var(--space-1) 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    line-height: 1.5;
}

/* ---------- Feature toolkit (element: feature_toolkit) ----------
 * Centred heading (optional corner mosaic on the left), one module card (head, then a
 * two-column checklist in a white card on a soft background, and a button), a mosaic band,
 * then columns of checklists with lines between them.
 */
.toolkit {
    border: 0.7px solid var(--color-border);
}

.toolkit__intro {
    position: relative;
    border-bottom: 0.7px solid var(--color-border);
}

.toolkit__intro> :not(.toolkit__mosaic) {
    position: relative;
    z-index: 1;
}

/* Flush in the heading's top-left corner. */
.toolkit__mosaic {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: var(--toolkit-mosaic-h, 255px);
}

/* 'mosaicPosition' => 'bottom': flush in the bottom-left corner instead. */
.toolkit__mosaic--bottom {
    top: auto;
    bottom: 0;
}

.toolkit__description {
    max-width: var(--toolkit-desc-w, 560px);
    color: var(--color-text-desc);
}

.toolkit__actions {
    justify-content: center;
    margin-top: var(--space-6);
}

/* Module card: set in from the block's sides by a narrow gutter (with its own lines), below
   an empty strip (as in the design). */
.toolkit__module {
    --toolkit-gutter: 36px;
    margin-inline: var(--toolkit-gutter);
    padding-top: var(--space-8);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.toolkit__module-head {
    position: relative;
    padding: var(--space-8);
    border-block: 0.7px solid var(--color-border);
}

/* Fills the head's full height, flush in its top-right corner. */
.toolkit__module-mosaic {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    /* 'mosaicHeight' in the module sets it per page; default: the box's full height */
    height: var(--toolkit-module-mosaic-h, 100%);
}

/* 'mosaicPosition' => 'bottom' in the module: bottom-right corner. */
.toolkit__module-mosaic.toolkit__module-mosaic--bottom {
    top: auto;
    bottom: 0;
}

.toolkit__module-title {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Icon in a small light grey rounded box. */
.toolkit__module-icon {
    box-sizing: content-box;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-hover);
    object-fit: contain;
}

.toolkit__module-icon .icon {
    width: 100%;
    height: 100%;
}

.toolkit__module-tag {
    /* the font leaves a little more room under the letters than over them; half a pixel
       more on top centres the text in the pill (same height) */
    padding-top: 8.5px;
    padding-bottom: 7.5px;
    border: 0;
    background: var(--color-highlight-soft);
    color: var(--color-text);
}

.toolkit__module-description {
    position: relative;
    margin-top: var(--space-2);
}

.toolkit__module-body {
    padding: var(--space-6) var(--space-8) var(--space-8);
    background: #F1F5F9;
}

.toolkit__module-button {
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.toolkit__module-button .icon {
    width: 14px;
    height: 14px;
}

/* Checklists: square check icons; the module's sits in a white card in two columns. */
.toolkit__checklist {
    display: grid;
    gap: 27px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.toolkit__checklist--card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27px var(--space-7);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* 'itemsOrder' => 'columns': down the left column first, then the right, with a thin line
   between the two columns. */
.toolkit__checklist--card.toolkit__checklist--by-column {
    grid-template-rows: repeat(var(--toolkit-rows), auto);
    grid-auto-flow: column;
    background-image: linear-gradient(var(--color-border), var(--color-border));
    background-position: center;
    background-size: 0.7px calc(100% - 2 * var(--space-6));
    background-repeat: no-repeat;
}

/* Headed groups in two columns ('groups' on the module), with a See more / less toggle. */
.toolkit__groups {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.toolkit__groups-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.toolkit__group-col {
    padding-right: var(--space-7);
}

.toolkit__group+.toolkit__group {
    margin-top: var(--space-6);
}

.toolkit__group-col+.toolkit__group-col {
    padding-right: 0;
    padding-left: var(--space-7);
    border-left: 0.7px solid var(--color-border);
}

.toolkit__group-title {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.toolkit__group-list {
    gap: var(--space-4);
}

/* Hidden until "See more features" is clicked (site.js); it then slides open smoothly
   (the row grows from 0 to its content height) and fades in - and back when collapsed. */
.toolkit__group--more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.45s ease, margin-top 0.45s ease, opacity 0.3s ease, visibility 0.45s;
}

.toolkit__group+.toolkit__group--more {
    margin-top: 0;
}

.toolkit__group-inner {
    min-height: 0;
    overflow: hidden;
}

.toolkit__groups.is-expanded .toolkit__group--more {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

.toolkit__groups.is-expanded .toolkit__group+.toolkit__group--more {
    margin-top: var(--space-6);
}

.toolkit__more {
    display: block;
    width: 100%;
    margin-top: var(--space-6);
    padding: 10px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background 0.15s ease;
}

.toolkit__more:hover {
    background: var(--color-surface-hover);
}

.toolkit__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-desc);
    font-size: var(--fs-small);
    line-height: var(--lh-body-desc);
}

.toolkit__check .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--color-brand);
}

/* Columns */
.toolkit__columns {
    display: grid;
    grid-template-columns: repeat(var(--toolkit-cols, 3), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 0.7px solid var(--color-border);
    list-style: none;
}

/* 'inset' => true: the band and the columns keep the module box's side gutters, so their
   edges line up with the box above (with lines on both sides). */
.toolkit--inset {
    --toolkit-gutter: 36px;
}

.toolkit--inset > .mosaic-band,
.toolkit--inset > .toolkit__columns {
    margin-inline: var(--toolkit-gutter);
    border-inline: 0.7px solid var(--color-border);
}

.toolkit__column+.toolkit__column {
    border-left: 0.7px solid var(--color-border);
}

.toolkit__column-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.toolkit__column-head>span:not([class]) {
    flex: 1;
}

a.toolkit__column-head:hover {
    background: var(--color-surface-hover);
}

/* Icon, title and chevron centred on one line: block-level icons, so they don't sit on
   the text baseline. */
.toolkit__column-icon {
    display: inline-flex;
    flex: none;
}

.toolkit__column-head .icon {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
}

.toolkit__column .toolkit__checklist {
    padding: var(--space-5);
}

/* ---------- Video tabs (element: video_tabs) ----------
 * Text and a list of video cards on the left (active card dark), a painting with the
 * selected thumbnail on the right. Switching, crossfade and the painting layers come from
 * the shared tabs script and the .solutions__frame / __image / __backdrop classes.
 */
.video-tabs {
    display: grid;
    grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
    border: 0.7px solid var(--color-border);
}

.video-tabs__text {
    padding: var(--space-7) var(--space-8) var(--space-8) calc(var(--space-8) + var(--space-2));
}

.video-tabs__description {
    max-width: 420px;
    margin-top: var(--space-3);
    color: var(--color-text-desc);
}

.video-tabs__list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-7) 0 0;
    padding: 0;
    list-style: none;
}

.video-tabs__trigger {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.video-tabs__trigger:hover {
    background: var(--color-surface-hover);
}

.video-tabs__item-description {
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}

/* Active card: dark. */
.video-tabs__item.is-active .video-tabs__trigger {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.video-tabs__item.is-active .video-tabs__item-description {
    color: rgba(255, 255, 255, 0.75);
}

/* The thumbnail (painting + video card in one image) fills the whole panel. */
.video-tabs__media {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.video-tabs__media .video-tabs__frame {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.video-tabs__media .solutions__image {
    object-fit: cover;
}

/* 'video' on an item: the whole thumbnail is the play button; it opens the video in a new tab. */
.video-tabs__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

.video-tabs__play[hidden] {
    display: none;
}

/* The play button in the middle of the thumbnail (same look as the module popup's play button). */
.video-tabs__play {
    display: grid;
    place-items: center;
}

.video-tabs__play-button {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.25);
    transition: transform 0.2s ease;
}

.video-tabs__play:hover .video-tabs__play-button,
.video-tabs__play:focus-visible .video-tabs__play-button {
    transform: scale(1.08);
}

.video-tabs__play-button .icon {
    width: 18px;
    height: 18px;
    margin-left: 3px; /* the triangle looks centred */
}

/* 'inset' => true: the painting ('background') fills the whole panel; the thumbnail is a
   separate image in the middle, with painting showing above, below, left and right. */
.video-tabs--inset .video-tabs__media .video-tabs__frame {
    inset: 8% 6%;
}

.video-tabs--inset .video-tabs__media .solutions__image {
    object-fit: contain;
}

/* 'inset' => true: the thumbnail sits smaller in the middle, with the painting all round. */
.video-tabs--inset .video-tabs__media .video-tabs__frame {
    inset: 0 9%;
}

.video-tabs--inset .video-tabs__media .solutions__image {
    object-fit: contain;
}

/* YouTube thumbnails (video_tabs uses a YouTube video's own thumbnail): a 16:9 box, cropped to it,
   so the smaller "hqdefault" size loses its black bars above and below. */
.video-tabs .solutions__image[src*="i.ytimg.com"] {
    align-self: center;
    height: auto;
    max-height: 100%;
    aspect-ratio: 16 / 8.85; /* a hair wider than 16:9: no thin dark line left at the top / bottom edge */
    object-fit: cover;
}

/* ==========================================================================
   Responsive rules
   One media query per screen width, widest first; every rule for that width
   lives in its block (sections keep the order they have above).
   ========================================================================== */

@media (min-width: 1100px) {

    /* 'fitToList' => true: the list sets the row height, not the screenshot. The frame fills the
       painting below the top gap and a taller screenshot is scaled down inside it (whole, never
       cropped), still standing on the bottom edge on its side. Desktop only (list beside image). */

    .solutions--fit-list.solutions--image-edge .solutions__media .solutions__frame {
        position: absolute;
        inset: var(--space-8) 0 0;
    }

    .solutions--fit-list.solutions--image-edge .solutions__media .solutions__image {
        position: static;
        height: 100%;
        margin-bottom: 0;
        object-fit: contain;
        object-position: left bottom;
    }

    .solutions--fit-list.solutions--image-edge .solutions__media .solutions__image[data-align="right"] {
        object-position: right bottom;
    }

    /* Side by side (1100px and up): the painting fills the media column's height, so a tall
   text column never leaves empty bands above and below the image. (At full width the
   column is about the design's 462:298 shape anyway.) */
    .feature-row__media {
        align-items: stretch;
    }

    .feature-row__frame {
        padding: 37px;
        aspect-ratio: auto;
    }

    /* Desktop only (1100px and up): the menu is a bar with floating dropdowns. */
    /* Desktop: inline menu with floating dropdowns (hover or click). */
    .site-nav__dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 260px;
        padding: 8px;
        border: 0.7px solid var(--color-border);
        border-radius: 8px;
        background: var(--color-surface);
        box-shadow: 0 12px 32px rgba(17, 17, 17, 0.1);
    }

    .site-nav__dropdown a {
        white-space: nowrap;
    }

    /* Invisible bridge so the menu stays open while moving the pointer down to it. */
    .has-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 8px;
    }

    @media (hover: hover) {
        .has-dropdown:hover>.site-nav__dropdown {
            display: block;
        }

        .has-dropdown:hover > .site-nav__link .site-nav__caret {
            transform: rotate(90deg);
        }
    }

    /* Mega menus: a panel the full width of the screen right under the header (the header is
       sticky at the top, so it sits at its bottom edge); the content inside lines up with the
       page container (--container-max, --container-pad). */
    .site-nav__dropdown.mega {
        position: fixed;
        top: calc(var(--top-bar-height) + var(--header-height)); /* under the bar and the menu */
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        padding: 0 max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
        overflow: hidden;
        border-width: 0.7px 0;
        border-radius: 0;
        box-shadow: 0 16px 32px rgba(17, 17, 17, 0.08);
    }

    .has-mega.is-open > .mega {
        display: grid;
    }

    /* Hover bridge from the menu item down to the panel (it starts at the header's edge).
       While a menu is open its bridge spans the whole width, so moving the pointer down
       diagonally (e.g. from "Customers" to a link on the left) keeps the menu open. */
    .has-mega::after {
        height: calc(var(--header-height) / 2);
    }

    .has-mega:hover::after,
    .has-mega.is-open::after {
        left: -100vw;
        right: -100vw;
    }

    /* Until its menu is open the bridge ignores the pointer, so only the title itself opens a
       menu (not the empty space under it, down to the header's bottom line). */
    .has-mega:not(.is-open)::after {
        pointer-events: none;
    }

    .mega.mega--aside {
        grid-template-columns: minmax(0, 1fr) var(--mega-aside-w, 350px);
    }

    .mega__main {
        padding: var(--space-6) var(--space-8) var(--space-7) 0;
    }

    .mega__columns {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .mega__column {
        padding-right: var(--space-7);
    }

    .mega__column + .mega__column {
        padding-left: var(--space-7);
        border-left: 0.7px solid var(--color-border);
    }

    .mega__aside {
        padding: var(--space-6) var(--space-7) var(--space-7);
        border-left: 0.7px solid var(--color-border);
    }

    /* Headings are plain labels on desktop (every list is shown). */
    .mega__heading {
        pointer-events: none;
    }

    .mega__heading .site-nav__caret {
        display: none;
    }

    /* 'compact' mega menu (Platform), as in the design: a boxed grid of four equal columns
       with lines between every cell. Left half: two columns of module groups; right half: the
       "Automate & Comply" group and the ratings side by side, then the two cards across both. */
    .mega.mega--compact {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mega--compact .mega__main {
        padding: 0;
        border-left: 0.7px solid var(--color-border);
    }

    .mega--compact .mega__main {
        display: flex;
        flex-direction: column;
    }

    .mega--compact .mega__columns {
        flex: 1;
    }

    /* 'strip': empty band with a line above it along the bottom of the columns. */
    .mega__strip {
        width: 50%; /* under the first column only (the columns are equal) */
        height: 44px;
        border-top: 0.7px solid var(--color-border);
        border-right: 0.7px solid var(--color-border); /* the column line continues down */
    }

    /* Space between the last link and the strip's line. */
    .mega--compact:has(.mega__strip) .mega__section {
        padding-bottom: 24px;
    }

    .mega--compact .mega__column {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .mega--compact .mega__column + .mega__column {
        padding-left: 0;
    }

    .mega--compact .mega__section {
        padding: 21px var(--space-6);
    }

    /* Space above the headings: 36px on the top row (Recruit & Enroll, Teach & Progress,
       Automate & Comply), 21px on the groups below a line (Manage & Operate, Engage & Extend). */
    .mega--compact .mega__section {
        padding-top: 36px;
    }

    .mega--compact .mega__section + .mega__section {
        margin-top: 0;
        padding-top: 21px;
        border-top: 0.7px solid var(--color-border);
    }

    .mega--compact .mega__list {
        gap: 30px;
        margin-top: var(--space-5);
    }

    .mega--compact .mega__icon {
        width: 32px;
        height: 32px;
        padding: 6px; /* 20px icon inside the 32px box */
    }

    /* Links with an icon box (as in the design): the box is light grey; hovering a link puts
       a flat grey panel behind it (12px around, drawn into the gap between links by the
       negative margins, so nothing moves) and turns the box white. The text keeps its
       colour. The icon is centred on the title + description. */
    .site-nav__dropdown.mega--compact .mega__link {
        align-items: center;
        margin: -12px;
        padding: 12px;
        transition: background-color 0.2s ease;
    }

    .site-nav__dropdown.mega--compact .mega__link:hover,
    .site-nav__dropdown.mega--compact .mega__link:focus-visible {
        background: #f5f5f5;
    }

    .mega--compact .mega__icon {
        border-color: #efefef;
        border-radius: 2px; /* square box, as in the design */
        background: #fafafa;
        transition: background-color 0.2s ease;
    }

    .mega--compact .mega__link:hover .mega__icon,
    .mega--compact .mega__link:focus-visible .mega__icon {
        background: var(--color-surface);
    }

    .mega--compact .mega__title {
        font-size: var(--fs-caption);
    }

    .mega--compact .mega__text {
        font-size: 11px;
    }

    /* Mosaic on a light grey strip along the bottom of its column. */
    /* Strip at the very bottom of the column: the whole mosaic at the column's width (its height
       follows the image's shape), touching the line above it - nothing cut off. */
    .mega--compact .mega__decoration {
        flex: none;
        width: 100%;
        max-width: none;
        height: auto;
        margin-top: auto;
        border-top: 0.7px solid var(--color-border);
        background: #FAFAFA;
    }

    .mega--compact .mega__aside {
        padding: 0 0 var(--space-5);
        border-right: 0.7px solid var(--color-border);
    }

    .mega--compact .mega__aside-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
        margin-bottom: var(--space-5);
        border-bottom: 0.7px solid var(--color-border);
    }

    .mega--compact .mega__aside-links .mega__section {
        padding-left: var(--space-6);
    }

    .mega--compact .mega__ratings {
        align-content: center;
        justify-content: center;
        gap: 22px;
        padding: var(--space-6);
    }

    .mega--compact .mega__rating-score {
        font-size: 34px;
    }

    .mega--compact .mega__promo,
    .mega--compact .mega__news {
        margin-inline: var(--space-5);
    }

    .mega--compact .mega__promo-text {
        max-width: 400px;
    }

    .mega--compact:has(.mega__aside--story) .mega__section {
        padding-bottom: var(--space-5);
    }

    .mega--compact:has(.mega__aside--story) .mega__badges {
        gap: 14px 10px;
        padding: var(--space-5) var(--space-5);
    }

    .mega--compact:has(.mega__aside--story) .mega__badges img {
        max-width: 84px;
        max-height: 84px;
    }

    .mega.mega--compact .mega__aside--story .mega__story {
        padding: 20px;
    }

    .mega--compact .mega__story-quote blockquote {
        font-size: 15px;
        line-height: 1.45;
    }

    .mega--compact .mega__story-quote figcaption {
        margin-top: 16px;
    }

    /* Customer story (Customers menu): the grey card framed by thin guide lines along its
       four edges, each line running out to the edges of the column (as in the design). */
    .mega.mega--compact .mega__aside.mega__aside--story {
        --story-gap: 44px;
        padding: var(--story-gap);
        background:
            linear-gradient(var(--color-border), var(--color-border)) 0 var(--story-gap) / 100% 0.7px no-repeat,
            linear-gradient(var(--color-border), var(--color-border)) 0 calc(100% - var(--story-gap)) / 100% 0.7px no-repeat,
            linear-gradient(var(--color-border), var(--color-border)) var(--story-gap) 0 / 0.7px 100% no-repeat,
            linear-gradient(var(--color-border), var(--color-border)) calc(100% - var(--story-gap)) 0 / 0.7px 100% no-repeat;
    }

    .mega--compact .mega__aside--story .mega__story {
        height: 100%;
        margin: 0;
        padding: var(--space-5);
        border-radius: 0;
        align-content: start;
    }

    .site-nav__dropdown.mega--compact .mega__news-list a,
    .site-nav__dropdown.mega--compact .mega__news-more,
    .mega--compact .mega__promo-text {
        font-size: var(--fs-caption);
    }

    /* Framed aside (Resources): guide lines along the panel's four edges (like the customer
       story), the panel light purple, white cards inside. */
    .mega.mega--compact .mega__aside.mega__aside--framed {
        --frame-gap: 44px;
        padding: var(--frame-gap);
        background:
            linear-gradient(var(--color-border), var(--color-border)) 0 var(--frame-gap) / 100% 0.7px no-repeat,
            linear-gradient(var(--color-border), var(--color-border)) 0 calc(100% - var(--frame-gap)) / 100% 0.7px no-repeat,
            linear-gradient(var(--color-border), var(--color-border)) var(--frame-gap) 0 / 0.7px 100% no-repeat,
            linear-gradient(var(--color-border), var(--color-border)) calc(100% - var(--frame-gap)) 0 / 0.7px 100% no-repeat;
    }

    .mega__frame {
        display: grid;
        align-content: start;
        gap: 8px;
        height: 100%;
        padding: 12px 12px 18px;
        background: #F1F0FC;
    }

    .mega__aside--framed .mega__promo,
    .mega__aside--framed .mega__news {
        margin: 0;
        border-radius: 4px;
    }

    .mega__aside--framed .mega__promo {
        padding: 20px 22px;
    }

    .mega__aside--framed .mega__news {
        padding: 14px 18px;
        background: #fff;
    }

    .mega__aside--framed .mega__news-title {
        color: var(--color-text-secondary);
        font-size: var(--fs-caption);
        font-weight: var(--fw-regular);
    }

    .mega__aside--framed .mega__aside-more {
        margin: 8px 0 0 14px;
    }

    /* 'inline' list: the links side by side. */
    .mega__news--inline .mega__news-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 24px;
    }

    /* Tighter cards, so the right half is no taller than the module columns (as in the
       design) and the panel has no empty space under them. */
    .mega--compact .mega__aside {
        padding-bottom: var(--space-4);
    }

    .mega--compact .mega__aside-top {
        margin-bottom: var(--space-4);
    }

    .mega--compact .mega__promo {
        gap: 6px;
        margin-bottom: var(--space-3);
        padding: 18px 22px;
    }

    .mega--compact .mega__news {
        padding: 16px 22px;
    }

    .mega--compact .mega__news-list {
        gap: 15px;
        margin-top: 12px;
    }

    .site-nav__dropdown.mega--compact .mega__news-more {
        margin-top: 14px;
    }

    /* Platform ('promoTop'): the "learner journey" card fills the cell beside Automate &
       Comply (edge to edge, square corners); the ratings in one row under them. */
    .mega--compact .mega__aside-top--promo {
        margin-bottom: 0;
    }

    .mega--compact .mega__aside-top--promo .mega__promo {
        display: flex; /* button at the bottom of the cell, the "365" between it and the text */
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        padding: 22px 22px 20px;
        border-radius: 0;
    }

    .mega--compact .mega__aside-top--promo .mega__promo-title {
        max-width: 240px; /* two lines, as in the design */
        margin-bottom: 4px;
    }

    .site-nav__dropdown.mega--compact .mega__aside-top--promo .mega__promo .mega__promo-text {
        max-width: none;
    }

    /* The "365" sits in the flow at the left, between the text and the button. */
    .mega--compact .mega__aside-top--promo .mega__promo-image {
        position: static;
        order: 1;
        width: 150px;
        max-width: none;
        height: auto;
        margin: 15px 0;
    }

    .mega--compact .mega__aside-top--promo .mega__promo-button {
        order: 2;
    }

    .site-nav__dropdown.mega--compact .mega__aside-top--promo .mega__promo-button {
        margin-top: auto;
        padding: 6px 10px;
        font-size: var(--fs-caption);
    }

    .mega--compact .mega__ratings.mega__ratings--row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 16px 40px;
        padding: 28px var(--space-6);
        border-left: 0;
    }

    .mega--compact .mega__ratings--row .mega__rating-logo {
        width: 30px;
        height: 30px;
    }

    /* Card menu: a thin empty band on top, then three columns with lines between them. */
    .mega.mega--cards {
        display: none;
    }

    .has-mega.is-open > .mega.mega--cards {
        display: block;
    }

    .site-nav__dropdown.mega.mega--cards {
        box-shadow: 0 16px 32px rgba(17, 17, 17, 0.08);
    }

    .mega-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 25px;
        border-inline: 0.7px solid var(--color-border);
        background: linear-gradient(var(--color-border), var(--color-border)) 0 25px / 100% 0.7px no-repeat;
    }

    .mega-card {
        display: flex;
        flex-direction: column;
    }

    .mega-card + .mega-card {
        border-left: 0.7px solid var(--color-border);
    }

    /* The painting and the info panel share one grid cell: the white panel (icon, title,
       text) sits over the painting's bottom, leaving a strip of painting on its right (as in
       the design). Hovering a card greys its column and turns its icon into the purple tile. */
    .site-nav__dropdown.mega--cards .mega-card__head {
        grid-template-areas: "stack";
        padding: var(--space-6) var(--space-6) var(--space-4);
        transition: background-color 0.2s ease;
    }

    .site-nav__dropdown.mega--cards .mega-card__head:hover,
    .site-nav__dropdown.mega--cards .mega-card__head:focus-visible {
        background: #f5f5f5;
    }

    .mega-card__image,
    .mega-card__info {
        grid-area: stack;
    }

    .mega-card__image {
        margin-bottom: 0;
    }

    .mega-card__info {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        align-self: end;
        width: calc(100% - var(--space-5));
        padding: 14px;
        border-radius: 0 8px 0 4px; /* rounded top-right; bottom-left follows the painting */
        background: var(--color-surface);
    }

    .mega-card__extra {
        flex: 1;
        padding: var(--space-4) var(--space-4) var(--space-5);
        border-top: 0.7px solid var(--color-border);
    }

    @media (hover: hover) {
        .has-mega:hover > .mega {
            display: grid;
        }
    }

    /* Smooth open / close for every header dropdown (plain lists and mega menus): it fades in
       and slides down a few pixels (0.2s), and fades out the same way. The panels stay in the
       layout (hidden with visibility) so the transition can run. */
    /* While it fades out (0.2s) the panel can still be reached: moving onto it re-opens it,
       so a pointer that briefly slips off the menu doesn't lose it. */
    .site-nav__dropdown {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .site-nav__dropdown.mega {
        display: grid;
    }

    .site-nav__dropdown.mega.mega--cards {
        display: block;
    }

    .has-dropdown.is-open > .site-nav__dropdown {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }

    @media (hover: hover) {
        .has-dropdown:hover > .site-nav__dropdown {
            visibility: visible;
            opacity: 1;
            transform: none;
            pointer-events: auto;
            transition-delay: 0s;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .site-nav__dropdown {
            transform: none;
            transition: none;
        }
    }

    /* Morphing mega menu (as on lightdash.com; site.js). Opening, the panel grows down from
       the header (a clip from 0 to its height) while the page behind is dimmed; moving to
       another menu swaps the content at once and the new panel grows / shrinks from the
       previous panel's height. Closing, it fades out. */
    .mega-overlay {
        display: block;
        position: fixed;
        top: calc(var(--top-bar-height) + var(--header-height));
        right: 0;
        bottom: 0;
        left: 0;
        visibility: hidden;
        opacity: 0;
        background: rgba(17, 17, 17, 0.28);
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }

    .site-header.has-mega-open .mega-overlay {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.25s ease, visibility 0s;
    }

    .site-header.is-hidden .mega-overlay {
        display: none;
    }

    /* While another menu is hovered, a panel that is still fading out ignores the pointer
       (it would otherwise catch it and switch back). */
    .site-nav__menu:has(.has-mega:hover) .has-mega:not(:hover) > .site-nav__dropdown {
        pointer-events: none;
    }

    /* Mega menus open only through site.js (.is-open), not on plain :hover, so a menu the
       pointer merely passes over (while another is open) doesn't show. */
    .has-mega:not(.is-open):hover > .site-nav__dropdown.mega {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Mega panels don't slide; they appear at once (the clip does the growing). */
    .site-nav__dropdown.mega {
        transform: none;
    }

    .has-dropdown.is-open > .site-nav__dropdown.mega {
        transition: none;
    }

    /* Switching menus: the other panels go at once... */
    .site-header.is-switching .has-mega:not(.is-open) > .site-nav__dropdown.mega {
        visibility: hidden;
        opacity: 0;
        transition: none;
    }

    /* ...except the one being left: it stays solid underneath (site.js slides its bottom edge
       up to the new height) while the new menu's content fades in over it. */
    .site-header.is-switching .has-mega.is-leaving:not(.is-open) > .site-nav__dropdown.mega {
        z-index: 1;
        visibility: visible;
        opacity: 1;
        pointer-events: none;
    }

    /* Its content fades out quickly (the white panel stays), so the old and new content are
       never visible together. */
    .site-header.is-switching .has-mega.is-leaving:not(.is-open) > .site-nav__dropdown.mega > * {
        opacity: 0;
        transition: opacity 0.1s ease;
    }

    .site-header.is-switching .has-mega.is-open > .site-nav__dropdown.mega {
        z-index: 2;
    }

    /* The new content fades in just after the old one has gone. Only the content fades - the
       panel's white background is solid from the start, so the page never shows through. */
    .site-nav__dropdown.mega.is-entering > * {
        animation: mega-content-in 0.25s ease-out 0.06s both;
    }

    @media (prefers-reduced-motion: reduce) {
        .mega-overlay,
        .site-header.has-mega-open .mega-overlay,
        .site-nav__dropdown.mega {
            transition: none !important;
        }

        .site-nav__dropdown.mega.is-entering > * {
            animation: none;
        }
    }

    /* Tabs with the image on the left (desktop): the painting runs right up to the list, so
       the open item's brand bar sits directly on it - no border lines in between (the gutter's
       line belongs on the list's outer side, not between the painting and the list). */

    .solutions.solutions--media-left .solutions__media {
        border-right: 0;
    }

    .solutions.solutions--media-left .solutions__list {
        border-left: 0;
    }
}

/* New menu content arriving over the previous one (mega menu switch). */
@keyframes mega-content-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
 * Education Leadership Series: latest episode (page-only block, coded in
 * templates/Pages/education_leadership_series.php). On the painting, the poster
 * with the play button and a chapter timeline, beside a white card.
 * ========================================================================== */
.els-latest {
    padding: var(--space-8) var(--space-7);
    border: 0.7px solid var(--color-border);
    border-top: 0;
    background: var(--color-surface-muted) var(--els-latest-bg, none) center / cover no-repeat;
}

.els-latest__card {
    display: grid;
    grid-template-columns: minmax(0, 63.6%) minmax(0, 1fr); /* the poster takes 591 of 929px in the design */
    background: var(--color-surface);
}

.els-latest__media {
    position: relative;
    display: grid;
    place-items: center;
    /* Fills its column and the card's full height (the poster covers it). No fixed shape here:
       with one, a tall text column made the frame wider than its column, over the text. */
    min-width: 0;
    min-height: 420px;
    overflow: hidden;
    background: #1d1d1d;
}

.els-latest__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* mirrored, as in the design (he faces the card) */
}

.els-latest__tag {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding: 5px 8px;
    border-radius: 3px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.els-latest__play {
    --play-size: 76px;
    --play-ring-inner: 1.3; /* a soft halo close to the button, as in the design */
    --play-ring-outer: 1.6;
}

.els-latest__play .play-button__icon .icon {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

/* Timeline along the bottom of the poster: start, a line with chapter marks, length. */
.els-latest__timeline {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    left: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.els-latest__track {
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}

.els-latest__track i {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 9px;
    border-radius: 1px;
    background: #fff;
}

.els-latest__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-6) var(--space-6);
}

.els-latest__eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.els-latest__logo {
    align-self: center;
    width: auto;
    height: 32px;
    margin-top: var(--space-4);
}

.els-latest__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.els-latest__meta .icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
}

.els-latest__title {
    margin: var(--space-5) 0 0;
    font-size: 20px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.els-latest__description {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
}

.els-latest__guests {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-7) 0 0;
    padding: 0;
    list-style: none;
}

.els-latest__guests li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.els-latest__avatar {
    flex: none;
    width: 36px;
    height: 36px;
}

.els-latest__guests strong {
    display: block;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--fw-medium);
}

.els-latest__guests li > span:last-child {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.els-latest__actions {
    margin-top: var(--space-7);
}

/* Education Leadership Series: shared small eyebrow over the page's own block titles. */
.els-eyebrow {
    color: #6B6B6B;
}

/* About the series: eyebrow and title at the left, text and ticked points at the right. */
.els-about {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-9) var(--space-6);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.els-about__title {
    max-width: 12em; /* wraps after "people", as in the design */
    margin: var(--space-4) 0 0;
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.els-about__text {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.65;
}

.els-about__points {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.5;
}

.els-about__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.els-about__points .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--color-brand);
}

.els-about__points strong {
    font-weight: var(--fw-semibold);
}

/* All episodes: heading, filter bar, then a lined grid of episode cards. */
.els-episodes {
    border: 0.7px solid var(--color-border);
    border-top: 0;
    border-bottom: 0; /* the last row of cards draws the bottom line */
}

.els-episodes__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 425px);
    align-items: end;
    gap: var(--space-6);
    padding: var(--space-9) var(--space-6) var(--space-6);
}

.els-episodes__title {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.els-episodes__description {
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}

.els-episodes__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 0.7px solid var(--color-border);
}

.els-episodes__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.els-episodes__status {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Region list: a pill-shaped button like the chips, opening a small menu under it. */
.els-region {
    position: relative;
}

.els-region__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    border: 0.7px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--fs-tiny);
    line-height: var(--lh-snug);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.els-region__toggle:hover,
.els-region.is-open .els-region__toggle {
    background: var(--color-surface-hover);
}

.els-region__toggle:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.els-region__toggle strong {
    color: var(--color-text);
    font-weight: var(--fw-medium);
}

/* A region is picked: the button reads as active, like a selected chip. */
.els-region.has-value .els-region__toggle {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: rgba(255, 255, 255, 0.7);
}

.els-region.has-value .els-region__toggle strong {
    color: var(--color-dark-text);
}

.els-region__toggle .icon {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.els-region.is-open .els-region__toggle .icon {
    transform: rotate(180deg);
}

.els-region__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 180px;
    margin: 0;
    padding: 4px;
    border: 0.7px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.1);
    list-style: none;
}

.els-region__menu[hidden] {
    display: none;
}

.els-region__menu:focus {
    outline: none;
}

.els-region__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-radius: 5px;
    color: var(--color-text);
    font-size: 13px;
    cursor: pointer;
}

.els-region__option > span:first-child {
    flex: 1;
}

.els-region__count {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.els-region__option .icon {
    width: 14px;
    height: 14px;
    color: var(--color-brand);
    visibility: hidden;
}

.els-region__option.is-active {
    background: var(--color-surface-hover);
}

.els-region__option.is-selected {
    font-weight: var(--fw-medium);
}

.els-region__option.is-selected .icon {
    visibility: visible;
}

.els-episodes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 0.7px solid var(--color-border);
    list-style: none;
}

.els-episode,
.els-episodes__next {
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

.els-episode[hidden],
.els-episodes__next[hidden] {
    display: none;
}

.els-episode {
    display: flex;
    flex-direction: column;
}

.els-episode__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1d1d1d;
    color: inherit;
    text-decoration: none;
}

a.els-episode__media {
    cursor: pointer;
}

.els-episode__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.els-episode__latest {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--color-play);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.els-episode__play {
    --play-size: 48px;
    cursor: inherit;
}

.els-episode__play::before,
.els-episode__play::after {
    content: none; /* no pulse on the small cards */
}

.els-episode__play .play-button__icon .icon {
    width: 16px;
    height: 16px;
}

a.els-episode__media:hover .play-button__icon,
a.els-episode__media:focus-visible .play-button__icon {
    transform: scale(1.08);
}

.els-episode__duration {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(17, 17, 17, 0.8);
    color: #fff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.els-episode__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.els-episode__number {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.els-episode__title {
    margin: var(--space-2) 0 0;
    font-size: 17px;
    font-weight: var(--fw-semibold);
    line-height: 1.35;
}

/* Title as a link (to the episode page or its video): plain until hovered. */
.els-episode__title-link {
    color: inherit;
    text-decoration: none;
}

.els-episode__title-link:hover,
.els-episode__title-link:focus-visible {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.els-episode__host {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-4) 0 0;
    font-size: 12px;
}

.els-episode__avatar {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-muted);
}

span.els-episode__avatar {
    background: #e9e9ea;
}

.els-episode__guests {
    color: var(--color-text-secondary);
}

.els-episode__summary {
    margin: var(--space-3) 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.els-episode__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-6);
}

.els-episode__tag {
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-soft);
    color: var(--color-brand);
    font-size: 11px;
    font-weight: var(--fw-medium);
}

.els-episode__tag--soon {
    background: #ededee;
    color: var(--color-text-secondary);
}

.els-episode__watch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.els-episode__watch .icon {
    width: 12px;
    height: 12px;
}

.els-episode__watch:hover {
    color: var(--color-brand);
}

/* Coming soon: a pale painting with a small white card; the text is greyed. */
.els-episode--soon .els-episode__media {
    background: #f1f1f2;
}

.els-episode--soon .els-episode__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--els-soon-bg, none) var(--els-soon-x, 50%) 50% / 260% auto no-repeat;
    filter: grayscale(1);
    opacity: 0.22;
}

.els-episode__soon-card {
    position: relative;
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-5);
    border-radius: 4px;
    background: var(--color-surface);
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.08);
    color: var(--color-text-secondary);
    font-size: 12px;
    text-align: center;
}

.els-episode__soon-card strong {
    color: var(--color-text);
    font-size: 21px;
    font-weight: var(--fw-medium);
    line-height: 1.3;
}

.els-episode--soon .els-episode__title,
.els-episode--soon .els-episode__summary {
    color: var(--color-text-secondary);
}

.els-episode--soon .els-episode__host {
    color: var(--color-text-secondary);
}

/* Season two: fills the rest of the last row. */
.els-episodes__next {
    display: flex;
    grid-column: span 2;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-7) var(--space-6);
    background: #f5f5f5;
}

.els-episodes__next-title {
    margin: var(--space-3) 0 0;
    font-size: 20px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.els-episodes__next-text {
    max-width: 480px;
    margin: var(--space-3) 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.els-episodes__next .btn-group {
    margin-top: var(--space-6);
}

.els-episodes__grid > :nth-child(3n) {
    border-right: 0;
}

.els-episodes__next {
    border-right: 0;
}

.els-episodes__empty {
    margin: 0;
    padding: var(--space-6);
    border-bottom: 0.7px solid var(--color-border); /* no cards above it to draw the line */
    color: var(--color-text-secondary);
    font-size: 14px;
    text-align: center;
}

/* The short clips box below closes this one: no second line between them. */
.els-episodes-section + .clips-section .clips {
    border-top: 0;
}

/* ==========================================================================
 * Education Leadership Series: one episode's page (element episode_detail).
 * ========================================================================== */
.episode-section {
    padding-top: var(--space-5);
}

.episode {
    border: 0.7px solid var(--color-border);
}

/* Bar: back link at the left; series, position and next episode at the right. */
.episode__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-bottom: 0.7px solid var(--color-border);
    font-size: 13px;
}

.episode__back,
.episode__next {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.episode__back:hover,
.episode__next:hover {
    color: var(--color-brand);
}

.episode__back .icon,
.episode__next .icon {
    width: 14px;
    height: 14px;
}

.episode__bar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    color: var(--color-text-secondary);
}

/* Heading */
.episode__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 485px);
    align-items: end;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6) var(--space-6);
}

.episode__badge {
    padding: 5px 10px;
    font-size: 12px;
}

.episode__title {
    margin: var(--space-4) 0 0;
    font-size: 52px;
    font-weight: var(--fw-medium);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.episode__school {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    font-size: 16px;
}

.episode__school-logo {
    width: auto;
    height: 26px;
}

.episode__summary {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.episode__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.episode__tags .icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
}

.episode__type {
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-soft);
    color: var(--color-brand);
    font-size: 12px;
    font-weight: var(--fw-medium);
}

/* Player */
.episode__player-wrap {
    padding: 0 var(--space-6) var(--space-6);
}

.episode__player {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #111;
}

.episode__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode__play {
    --play-size: 76px;
    --play-ring-inner: 1.3;
    --play-ring-outer: 1.6;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.episode__play:disabled {
    cursor: default;
}

.episode__play .play-button__icon .icon {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.episode__play:hover .play-button__icon,
.episode__play:focus-visible .play-button__icon {
    transform: scale(1.08);
}

.episode__timeline {
    position: absolute;
    right: var(--space-6);
    bottom: var(--space-5);
    left: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.episode__track {
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}

.episode__track i {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 9px;
    border-radius: 1px;
    background: #fff;
}

/* Playing: the video replaces the poster, button and timeline. */
.episode__player.is-playing > :not(iframe) {
    display: none;
}

.episode__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.episode__player-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: 12px;
}

.episode__player-note p {
    margin: 0;
}

.episode__player-note a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.episode__player-note a:hover {
    color: var(--color-brand);
}

.episode__player-note .icon {
    width: 12px;
    height: 12px;
}

/* About and chapters at the left, guests and the institution at the right. */
.episode__columns {
    display: grid;
    grid-template-columns: minmax(0, 61.4%) minmax(0, 1fr);
    border-top: 0.7px solid var(--color-border);
}

.episode__main {
    border-right: 0.7px solid var(--color-border);
}

.episode__about,
.episode__chapters {
    padding: var(--space-7) var(--space-6);
}

.episode__about {
    border-bottom: 0.7px solid var(--color-border);
}

.episode__about .episode__text {
    max-width: 660px;
}

.episode__eyebrow {
    color: var(--color-text-secondary);
}

.episode__section-title {
    margin: var(--space-3) 0 0;
    font-size: 24px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.episode__text {
    margin: var(--space-4) 0 0;
    font-size: 14px;
    line-height: 1.7;
}

.episode__chapter-list {
    margin: var(--space-5) 0 0;
    padding: 0;
    border-top: 0.7px solid var(--color-border);
    list-style: none;
}

.episode__chapter-list li {
    border-bottom: 0.7px solid var(--color-border);
}

.episode__chapter {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    padding: var(--space-4) var(--space-1);
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.episode__chapter:hover,
.episode__chapter:focus-visible {
    background: var(--color-surface-muted);
}

.episode__chapter:disabled {
    cursor: default;
}

.episode__chapter-time {
    flex: none;
    width: 52px;
    color: var(--color-brand);
    font-variant-numeric: tabular-nums;
}

.episode__chapter-title {
    flex: 1;
}

.episode__chapter-play {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0.7px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-play);
}

.episode__chapter-play .icon {
    width: 10px;
    height: 10px;
    margin-left: 1px;
    fill: currentColor;
}

.episode__chapter:hover .episode__chapter-play {
    border-color: var(--color-play);
}

.episode__guests,
.episode__institution {
    padding: var(--space-7) var(--space-6);
}

.episode__guests {
    border-bottom: 0.7px solid var(--color-border);
    margin: 0 var(--space-6);
    padding-right: 0;
    padding-left: 0;
}

.episode__guest-list {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.episode__guest {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.episode__guest-photo {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--color-surface-muted);
}

.episode__guest-name {
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

.episode__guest-role {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.episode__guest-role--note {
    font-style: italic;
}

.episode__guest-bio {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.episode__institution-logo {
    display: block;
    width: auto;
    height: 28px;
    margin-top: var(--space-4);
}

.episode__institution .episode__guest-bio {
    margin-top: var(--space-5);
}

/* Quote on a painting (a warm tone until the painting's file exists). */
.episode__quote {
    display: grid;
    place-items: center;
    margin: 0;
    padding: var(--space-8) var(--space-6);
    border-top: 0.7px solid var(--color-border);
    background: #e9dcc4 var(--episode-quote-bg, none) center / cover no-repeat;
}

.episode__quote-card {
    width: min(100%, 860px);
    padding: var(--space-7) var(--space-8) var(--space-7);
    background: var(--color-surface);
}

.episode__quote-mark {
    display: block;
    height: 28px;
    color: var(--color-brand);
    font-size: 52px;
    line-height: 1;
}

.episode__quote blockquote {
    margin: var(--space-3) 0 0;
}

.episode__quote blockquote p {
    margin: 0;
    font-size: 28px;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.episode__quote figcaption {
    display: grid;
    gap: 4px;
    margin-top: var(--space-6);
}

.episode__quote-name {
    font-size: 14px;
}

.episode__quote-role {
    color: var(--color-text-secondary);
    font-size: 12px;
}

/* Episode page: the clips box continues the episode box (one line between them), and
   "More episodes" continues the clips box. */
.episode-section + .clips-section .clips {
    border-top: 0;
}

.els-more {
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.els-more__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-9) var(--space-6) var(--space-6);
}

/* Three cards in one row: the last card has no right line and the row's own bottom line is the box's. */
.els-more__grid > :last-child {
    border-right: 0;
}

.els-more__grid > * {
    border-bottom: 0;
}

/* ==========================================================================
 * Customer story page (element story_detail): the episode page's layout (.episode)
 * plus these parts.
 * ========================================================================== */
.story-detail .episode__bar-meta {
    gap: var(--space-2) var(--space-3);
}

.story-detail__next {
    margin-left: var(--space-3);
}

.story-detail__logo {
    display: block;
    width: auto;
    height: 28px;
}

.story-detail__title {
    max-width: 14em;
    margin-top: var(--space-5);
    font-size: 46px;
    font-weight: var(--fw-medium);
    line-height: 1.15;
}

/* Before / After: two boxes side by side, After on lavender. */
.story-detail__compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
    border: 0.7px solid var(--color-border);
}

.story-detail__moment {
    margin: 0;
    padding: var(--space-6) var(--space-5);
}

.story-detail__moment--before {
    border-right: 0.7px solid var(--color-border);
}

.story-detail__moment--after {
    background: var(--color-brand-soft);
}

.story-detail__moment-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.story-detail__moment blockquote {
    margin: var(--space-4) 0 0;
}

.story-detail__moment blockquote p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.story-detail__moment figcaption {
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* How they use it: a quote per person, photo at the left. */
.story-detail__quotes {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.story-detail__quotes li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.story-detail__avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-muted);
}

.story-detail__quotes figure {
    margin: 0;
}

.story-detail__quotes blockquote {
    margin: 0;
}

.story-detail__quotes blockquote p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.story-detail__quotes figcaption {
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: 12px;
}

/* Right column: panels one under another, each with a line under it. */
.story-detail__panel {
    padding: var(--space-7) var(--space-6);
    border-bottom: 0.7px solid var(--color-border);
}

.story-detail__panel:last-child {
    border-bottom: 0;
}

.story-detail__glance {
    margin: var(--space-4) 0 0;
}

.story-detail__glance > div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 0.7px solid var(--color-border);
}

.story-detail__glance dt {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.story-detail__glance dd {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.story-detail__glance .episode__type {
    padding: 4px 9px;
    font-size: 11px;
}

/* The full episode: a small card with its still, details and a button. */
.story-detail__episode {
    margin-top: var(--space-4);
    border: 0.7px solid var(--color-border);
}

.story-detail__episode-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #1d1d1d;
    cursor: pointer;
}

/* Playing: the video fills the still's frame. */
.story-detail__episode-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.story-detail__episode-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-detail__episode-play {
    --play-size: 44px;
    cursor: pointer;
}

.story-detail__episode-play::before,
.story-detail__episode-play::after {
    content: none;
}

.story-detail__episode-play .play-button__icon .icon {
    width: 15px;
    height: 15px;
}

.story-detail__episode-media:hover .play-button__icon,
.story-detail__episode-media:focus-visible .play-button__icon {
    transform: scale(1.08);
}

.story-detail__episode-body {
    padding: var(--space-4);
}

.story-detail__episode-meta {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.story-detail__episode-title {
    margin: var(--space-2) 0 0;
    font-size: 15px;
    font-weight: var(--fw-semibold);
}

.story-detail__episode-text {
    margin: var(--space-2) 0 0;
    font-size: 13px;
    line-height: 1.55;
}

.story-detail__episode-button {
    justify-content: center;
    width: 100%;
    margin-top: var(--space-4);
}

.story-detail__cta-text {
    margin: var(--space-4) 0 var(--space-5);
    font-size: 13px;
    line-height: 1.55;
}

/* Customer story page: closing quote between two corner mosaics. */
.story-detail__closing {
    position: relative;
    display: grid;
    justify-items: center;
    margin: 0;
    padding: var(--space-9) var(--space-6);
    border-top: 0.7px solid var(--color-border);
    text-align: center;
}

.story-detail__closing-mosaic {
    position: absolute;
    width: 96px;
    height: 96px;
}

.story-detail__closing-mosaic--top {
    top: 0;
    left: 0;
}

.story-detail__closing-mosaic--bottom {
    right: 0;
    bottom: 0;
}

.story-detail__closing blockquote {
    max-width: 880px;
    margin: 0;
}

.story-detail__closing blockquote p {
    margin: 0;
    font-size: 28px;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.story-detail__closing figcaption {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    text-align: left;
}

.story-detail__closing-name,
.story-detail__closing-role {
    display: block;
}

.story-detail__closing-name {
    font-size: 13px;
    font-weight: var(--fw-medium);
}

.story-detail__closing-role {
    margin-top: 2px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

/* More customer stories: the episode cards' frame with a logo, quote, person and key figure. */
.story-card-more__logo {
    display: block;
    width: auto;
    max-width: 160px;
    height: 44px;
    object-fit: contain;
    object-position: left center;
}

.story-card-more__quote {
    margin: var(--space-5) 0 0;
}

.story-card-more__quote p {
    margin: 0;
    font-size: 15px;
    font-weight: var(--fw-medium);
    line-height: 1.55;
}

.story-card-more__name {
    margin: var(--space-5) 0 0;
    font-size: 13px;
    font-weight: var(--fw-semibold);
}

.story-card-more__role {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.story-card-more__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding-top: var(--space-5);
    border-top: 0.7px solid var(--color-border);
}

.story-card-more__stat strong {
    flex: none;
    font-size: 22px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.story-card-more__stat span {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.story-card-more__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 1400px) {

    /* Too little room right of the screenshot for the play button's tooltip: it opens to
       the left of the button instead, over the screenshot. */
    .page-hero__play .play-button__label {
        right: calc(100% + var(--space-2));
        left: auto;
        max-width: none;
        white-space: nowrap;
        transform: translate(4px, -50%);
    }

    .page-hero__play:hover .play-button__label {
        transform: translate(0, -50%);
    }

    /* The painting column is now about as narrow as the stats graphic, which would fill it
       edge to edge and look cut off (its right edge is flat); keep painting around it. */
    .compare__image {
        max-width: 85%;
    }

    :root {
        --fs-display: 50px;
        --lh-display: 60px;
        --fs-title: 38px;
        --lh-heading: 46px;
        --fs-h2: 33px;
        --fs-h3: 25px;
        --lh-h3: 32px;
    }

    .ai-feature {
        --ai-icon-col: 48px;
    }

    .ai-feature__title {
        padding-inline: var(--space-2);
        font-size: var(--fs-ui);
    }

    /* Just below full width: slightly smaller badges. */
    .award-strip__badges img {
        --badge-scale: 0.88;
    }
}

@media (max-width: 1200px) {
    .compare {
        gap: 0 30px;
    }

    /* Left-aligned heading with a corner mosaic: keep the text clear of it, so a wide
   'titleWidth' / 'descriptionWidth' wraps before the mosaic instead of running under it
   (on wide screens the passed width is reached first, so nothing changes there). */
    .solutions__intro--left.solutions__intro--mosaic {
        padding-right: 200px;
    }

    /* Less padding here, so the image fills more of the panel beside the taller list. */
    .solutions__media {
        padding: var(--space-5) var(--space-4);
    }

    .solutions__media .solutions__frame {
        top: var(--space-5);
        left: var(--space-4);
        width: calc(100% - 2 * var(--space-4));
        height: calc(100% - 2 * var(--space-5));
    }

    /* The mosaic would run into the text. */
    .integrations-grid__mosaic {
        display: none;
    }

    .solutions--expanded .solution-item__content{
        padding-bottom: var(--space-6);
    }
    /* 1100-1279px: the full menu only just fits, so text, spacing and the hero
       title are tightened. */
    /* Small desktops: the full menu only just fits, so tighten text and spacing. */
    .site-header__inner {
        gap: 20px;
        padding-inline: 24px;
    }

    .site-nav {
        gap: 12px;
    }

    .site-nav__menu {
        gap: 2px;
    }

    .site-nav__link {
        gap: 6px;
        padding: 8px 7px;
        font-size: var(--fs-small);
    }

    .site-nav__actions {
        gap: 2px;
    }

    .site-nav__action {
        padding: 8px 8px;
        font-size: var(--fs-small);
    }

    .site-nav__actions .btn {
        margin-left: 6px;
        padding: 8px 12px;
        font-size: var(--fs-small);
    }
}

@media (max-width: 1099.98px) {
    /* Customer story page. */
    .story-detail__title {
        font-size: 40px;
    }

    /* Episode page. */
    .episode__title {
        font-size: 44px;
    }

    /* Pricing CTA 'cta--fill': shorter box (its mosaics are hidden below this width). */
    .cta--fill .cta__box {
        min-height: 0;
        padding: var(--space-9) var(--space-6);
    }

    /* Education Leadership Series: latest episode - less painting around the card. */
    .els-latest {
        padding: var(--space-7) var(--space-5);
    }

    /* Compare hero: the image stays beside the text on small laptops (left out from 992). */
    .split-hero.split-hero--fill.split-hero--compare {
        grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    }

    .split-hero--fill.split-hero--compare .split-hero__media {
        justify-self: stretch;
        width: auto;
        margin-block: 0;
    }

    .split-hero--compare .split-hero__text {
        padding: var(--space-6) var(--space-5);
    }

    /* Build your plan on small laptops: the module cards three to a row. */
    .price-modules {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }



    /* Dark trust block: smaller badges and padding. */
    .trust-block--dark {
        gap: var(--space-7);
        padding: var(--space-8) var(--space-6);
    }

    .trust-block--dark .trust-block__badges {
        grid-template-columns: repeat(3, 100px);
        gap: var(--space-5);
    }

    .trust-block--dark .trust-block__badges img {
        width: 100px;
        height: 100px;
    }

    /* Toolkit: the corner mosaics would run into the heading and title. */
    .toolkit__mosaic,
    .toolkit__module-mosaic {
        display: none;
    }

    /* AI spotlight: less painting around the box. */
    .ai-spotlight {
        padding: var(--space-8);
    }

    .ai-spotlight__text {
        padding: var(--space-7) var(--space-6);
    }

    /* Tablet: the two module columns stack. */
    .ai-modules {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-module+.ai-module {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    /* Stacked: each heading runs across both side columns (side by side, the left one
       reaches into the left column and the right one into the right). */
    .ai-module .ai-module__head,
    .ai-module:first-child .ai-module__head,
    .ai-module:last-child .ai-module__head {
        margin-inline: calc(-1 * var(--ai-gutter));
        padding-inline: calc(var(--ai-gutter) + var(--space-6));
    }

    .split-hero__text {
        padding: var(--space-7) var(--space-5);
    }

    .split-hero__media {
        min-height: 0;
        padding: var(--space-7) var(--space-5);
    }

    /* Collage hero ('imageFill'): text first, then the whole collage under it, centred and
       at most 360px wide (side by side the column would be too narrow for it). */
    .split-hero.split-hero--fill {
        grid-template-columns: minmax(0, 1fr);
    }

    .split-hero--fill .split-hero__media {
        justify-self: center;
        width: min(100%, 360px);
        margin-block: var(--space-6);
    }

    /* Hero figures bar: narrower cells so it fits the text column. */
    .split-hero__stat {
        min-width: 0;
        padding: var(--space-3) var(--space-4);
    }

    .split-hero__stat-value,
    .split-hero__rating-score {
        font-size: 22px;
    }

    /* Featured story: the video above the details, full width. */
    .featured-story__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .featured-story__video {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .featured-story__info {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    .featured-story__actions {
        padding-top: var(--space-6);
    }

    /* Story library: two cards per row; the mosaics would sit under the heading. */
    .story-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-filter__grid > .story-card:nth-child(3n) {
        border-right: 0.7px solid var(--color-border);
    }

    .story-filter__grid > .story-card:nth-child(2n) {
        border-right: 0;
    }

    .story-filter__mosaic {
        height: 70px;
    }

    /* Reviews: two cards per row (the featured one across both). */
    .reviews__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-invite__mosaic {
        opacity: 0.35;
    }

    /* Short clips: the mosaic would sit behind the heading. */
    .clips__mosaic {
        display: none;
    }

    /* Safety & Security hero: badges and figures three to a row. */
    .sec-hero__badges,
    .sec-hero__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sec-hero__stats li:nth-child(3n) {
        border-right: 0;
    }

    /* Safety & Security body: the menu becomes a sideways-scrolling bar on top; the sections and
       their cards use the full width. */
    .sec-doc {
        grid-template-columns: minmax(0, 1fr);
    }

    .sec-doc__side {
        position: sticky;
        top: calc(var(--top-bar-height) + var(--header-height));
        z-index: 5;
        padding: var(--space-3) var(--space-4);
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
        background: var(--color-surface);
    }

    .sec-doc__toc {
        position: static;
    }

    .sec-doc__toc-title,
    .sec-doc__toc-note {
        display: none;
    }

    .sec-doc__toc ol {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sec-doc__toc a {
        white-space: nowrap;
    }

    .sec-doc__body {
        margin-left: 0;
    }

    /* Jumping to a section leaves room for the sticky menu bar too. */
    .sec-doc__section {
        scroll-margin-top: calc(var(--top-bar-height) + var(--header-height) + 64px);
    }

    /* Featured integrations: the cards stacked, a line between them. */
    .int-featured__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .int-featured__card + .int-featured__card {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    /* For developers: the code under the text. Enterprise: the text above a 4-column grid. */
    .int-dev {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-8) 0;
    }

    .int-ent {
        grid-template-columns: minmax(0, 1fr);
    }

    .int-ent__text {
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
    }

    .int-ent__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Integrations directory: the sidebar above the cards (categories in a sideways-scrolling
       row), three cards per row. */
    .int-dir {
        grid-template-columns: minmax(0, 1fr);
    }

    .int-dir__side {
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
    }

    .int-dir__cats {
        display: flex;
        gap: var(--space-2);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .int-dir__cat {
        flex: none;
        gap: 6px;
        width: auto;
        padding: 5px 10px;
        border: 0.7px solid var(--color-border);
        border-radius: var(--radius-pill);
        white-space: nowrap;
    }

    .int-dir__cat.is-active {
        border-color: var(--color-dark);
        background: var(--color-dark);
        color: var(--color-dark-text);
    }

    .int-dir__cat.is-active span:last-child {
        color: rgba(255, 255, 255, 0.7);
    }

    .int-dir__cat.is-active::before {
        content: none;
    }

    .int-dir__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cta__stage {
        padding: var(--space-8) var(--space-6);
    }

    .cta__mosaic {
        display: none;
    }

    /* Testimonial: narrower logo column and tighter margins so the quote keeps its width. */
    .cta__testimonial {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .cta__logo-area {
        --g2-size: 96px;
    }

    .cta__quote {
        margin: var(--space-6) var(--space-7);
        font-size: 18px;
        line-height: 26px;
    }

    .cta__author {
        padding: var(--space-4) var(--space-7);
    }

    .cta_author_title {
        font-size: 16px;
        line-height: 24px;
    }

    /* Two wide cards per row: the descriptions are one or two lines, so the tall
       desktop card height would leave a big gap above the link. */
    .ai-feature__body {
        min-height: 0;
        padding-block: var(--space-4);
    }

    .module-cards__mosaic--left {
        height: 150px;
    }

    .module-cards__mosaic--right {
        height: 84px;
    }

    /* Tablet & phone: too narrow for the text to fit inside the image's shape; plain intro. */
    .module-cards__intro--mosaic {
        min-height: 0;
        padding-block: var(--space-8);
    }

    .module-cards__intro--mosaic::before,
    .module-cards__intro--mosaic::after {
        display: none;
    }

    .story-spotlight {
        padding: var(--space-7) var(--space-6);
    }

    .story-spotlight__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-spotlight__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    /* Still side by side here: the photo fills the dark panel's full height. */
    .integrations-story__media {
        aspect-ratio: auto;
    }

    .integrations-story__text {
        padding: var(--space-8) var(--space-7);
    }

    .story-spotlight__story-title {
        font-size: 24px;
    }

    .integrations-block {
        min-height: 0;
        padding: var(--space-7) var(--space-6);
    }

    .integrations-block__logos {
        margin-top: var(--space-7);
    }

    .feature-grid__intro {
        padding-left: var(--space-6);
    }

    .feature-grid__mosaic,
    .feature-grid__corner {
        display: none;
    }

    .feature-grid__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-card--promo {
        grid-column: 1 / -1;
    }

    /* 2 per row: only the first 2 cards are in the first row. */
    .grid-card:nth-child(3) {
        border-top: 0.7px solid var(--color-border);
    }

    .page-hero {
        --shot-top: 7.5cqw;
        --shot-w: 80cqw;
    }

    .page-hero--cover .page-hero__intro {
        padding-top: var(--space-8);
    }

    /* Tablet & phone: stacked (text, then image), no gutter. */
    .feature-row,
    .feature-row--reverse {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "text"
            "media";
        grid-template-rows: auto;
    }

    .feature-row__strip,
    .feature-row__gutter {
        display: none;
    }

    .feature-row .feature-row__media,
    .feature-row--reverse .feature-row__media {
        padding-top: 0;
        border: 0;
    }

    .feature-row__text {
        padding: var(--space-7) var(--space-6) var(--space-6);
    }

    .site-header {
        border-bottom: 0.7px solid var(--color-border);
    }

    .site-header__inner {
        justify-content: space-between;
    }

    .site-header__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    /* Three-line icon that morphs into an X. */
    .site-header__toggle-bar,
    .site-header__toggle-bar::before,
    .site-header__toggle-bar::after {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--color-text);
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .site-header__toggle-bar {
        position: relative;
    }

    .site-header__toggle-bar::before,
    .site-header__toggle-bar::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .site-header__toggle-bar::before {
        top: -7px;
    }

    .site-header__toggle-bar::after {
        top: 7px;
    }

    .site-header.is-menu-open .site-header__toggle-bar {
        background: transparent;
    }

    .site-header.is-menu-open .site-header__toggle-bar::before {
        transform: translateY(7px) rotate(45deg);
    }

    .site-header.is-menu-open .site-header__toggle-bar::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* The menu is a panel sliding in from the right: half the screen on tablets, the full
       width on small phones, over the blurred page. */
    .site-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: max(50%, min(100%, 420px)); /* phones: full width; tablets: half */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 24px;
        padding: 0 var(--container-pad) 32px;
        overflow-y: auto;
        background: var(--color-surface);
        box-shadow: -12px 0 32px rgba(17, 17, 17, 0.12);
    }

    .site-header.is-menu-open .site-nav {
        display: flex;
        animation: site-nav-in 0.25s ease;
    }

    @keyframes site-nav-in {
        from {
            transform: translateX(100%);
        }
    }

    /* Panel's top row: logo and close button. */
    .site-nav__head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--header-height);
        background: var(--color-surface);
    }

    .site-nav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-text);
        cursor: pointer;
    }

    .site-nav__close .icon {
        width: 22px;
        height: 22px;
    }

    .site-nav__backdrop {
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(17, 17, 17, 0.2);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .site-header.is-menu-open .site-nav__backdrop {
        display: block;
    }

    .site-nav__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__item {
        border-bottom: 0.7px solid var(--color-border);
    }

    .site-nav__link {
        justify-content: space-between;
        width: 100%;
        padding: 14px 0;
        font-size: var(--fs-body);
        font-weight: var(--fw-medium);
    }

    .site-nav__link:hover {
        background: none;
    }

    .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .site-nav__action {
        padding: 10px 0;
        font-size: var(--fs-body);
    }

    .site-nav__actions .btn {
        margin-top: 12px;
        padding: 12px 16px;
        font-size: var(--fs-body);
    }

    /* Top bar: only the products on smaller screens (the facts would not fit). */
    .top-bar__facts {
        display: none;
    }

    /* ---------- Phone / tablet menu ----------
     * Top-level items with a chevron; an open menu shows a soft panel where each group name
     * is a small heading and every link is listed directly (icon + name). Descriptions,
     * cards, ratings and "What's new" are left out; the learner-journey link is a button.
     */
    .site-nav__item {
        border-bottom: 0.7px solid var(--color-border);
    }

    .site-nav__link {
        padding: 16px 0;
        font-size: 17px;
        font-weight: var(--fw-semibold);
    }

    /* Chevron instead of the small triangle: points down, turns up when open. */
    .site-nav__item .site-nav__caret {
        width: 8px;
        height: 8px;
        margin-right: 4px;
        border: 0;
        border-right: 1.75px solid currentColor;
        border-bottom: 1.75px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.2s ease;
    }

    .site-nav__item.is-open > .site-nav__link .site-nav__caret {
        transform: translateY(2px) rotate(-135deg);
    }

    .site-nav__item.is-open > .site-nav__link {
        color: var(--color-brand);
    }

    .site-nav__dropdown.mega {
        margin: 0 0 var(--space-4);
        padding: var(--space-2) var(--space-4) var(--space-4);
        border-radius: 12px;
        background: var(--color-surface-muted);
    }

    .mega__columns,
    .mega__column,
    .mega__aside,
    .mega__aside-top,
    .mega__aside-links {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .mega__section,
    .mega--compact .mega__section,
    .mega--compact .mega__aside-links .mega__section,
    .mega__section + .mega__section,
    .mega--compact .mega__section + .mega__section {
        margin: 0;
        padding: var(--space-4) 0 0;
        border: 0;
    }

    /* Group names: small grey headings (every list is always shown). */
    .mega__heading,
    .mega--compact .mega__heading {
        margin-bottom: 6px;
        padding: 0;
        color: var(--color-text-secondary);
        font-size: 12px;
        font-weight: var(--fw-semibold);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        pointer-events: none;
    }

    .mega__heading .site-nav__caret {
        display: none;
    }

    .mega__list,
    .mega--compact .mega__list {
        display: grid;
        gap: 2px;
        margin: 0;
        padding: 0;
    }

    .site-nav__dropdown.mega .mega__link {
        align-items: center;
        gap: 12px;
        padding: 9px 8px;
        border-radius: 8px;
    }

    .site-nav__dropdown.mega .mega__link:hover {
        background: var(--color-surface);
    }

    .mega__icon,
    .mega--compact .mega__icon {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        padding: 6px;
        border: 0.7px solid var(--color-border);
        border-radius: 8px;
        background: var(--color-surface);
        color: #1E2A6B;
    }

    .mega__title,
    .mega--compact .mega__title {
        color: var(--color-text);
        font-size: 15px;
        font-weight: var(--fw-medium);
    }

    .mega__text,
    .mega__mosaic,
    .mega__strip,
    .mega__decoration,
    .mega__badges,
    .mega__story-quote,
    .mega__story-video,
    .mega__ratings,
    .mega__promo-title,
    .mega__promo-text,
    .mega__promo-image,
    .mega__news,
    .site-nav__dropdown.mega .mega__story-video {
        display: none;
    }

    /* Customer story: only its button, full width. */
    .mega__story {
        display: block;
        margin: var(--space-4) 0 0;
        padding: 0;
        background: none;
    }

    .site-nav__dropdown.mega .mega__story-button {
        display: flex;
        width: 100%;
        padding: 12px 16px;
        background: var(--color-surface);
        font-size: var(--fs-ui);
    }

    /* Card menu: each card as a plain link (title + text); images and blocks left out. */
    .mega-cards {
        display: grid;
        gap: 2px;
    }

    .mega-card__image,
    .mega-card__extra {
        display: none;
    }

    .site-nav__dropdown.mega--cards .mega-card__head {
        padding: 9px 8px;
        border-radius: 8px;
    }

    .mega-card__icon {
        display: none;
    }

    .mega-card__title {
        font-size: 15px;
    }

    .mega-card__text {
        font-size: var(--fs-caption);
    }

    /* Resources (framed aside): the lists and "free resources" as plain links. */
    .mega__aside--framed .mega__news {
        display: block;
        margin: var(--space-4) 0 0;
        padding: 0;
        background: none;
    }

    .mega__aside--framed .mega__news-title {
        display: block;
        margin-bottom: 6px;
        color: var(--color-text-secondary);
        font-size: 12px;
        font-weight: var(--fw-semibold);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .mega__aside--framed .mega__news-list {
        display: grid;
        gap: 2px;
        margin: 0;
    }

    .site-nav__dropdown.mega .mega__aside--framed .mega__news-list a,
    .site-nav__dropdown.mega .mega__aside-more {
        display: flex;
        margin: 0;
        padding: 9px 8px;
        color: var(--color-text);
        font-size: 15px;
        font-weight: var(--fw-medium);
    }

    .mega__aside-more .icon,
    .mega__aside--framed .mega__news-icon {
        display: none;
    }

    /* Learner-journey link as a button at the end of the Platform list. */
    .mega__promo {
        margin: var(--space-4) 0 0;
        padding: 0;
        border-radius: 0;
        background: none;
    }

    .site-nav__dropdown.mega .mega__promo-button {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 12px 16px;
        font-size: var(--fs-ui);
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    /* Platform above the other columns; columns in a grid of three. */
    .site-footer__box {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__platform {
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
    }

    .site-footer__platform .site-footer__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 16px;
    }

    .site-footer__platform .site-footer__list li+li {
        margin-top: 0;
    }

    .site-footer__links {
        grid-template-columns: repeat(3, 1fr);
    }

    .site-footer__column {
        border-bottom: 0.7px solid var(--color-border);
    }

    .site-footer__column:nth-child(3n + 1) {
        border-left: 0;
    }

    /* Tabs block (solutions_tabs), small laptops and below (1099px and less - the same switch as
       site.js uses): one column, each open item shows its own screenshot under its text instead
       of a painting column beside the list. */

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

    .solutions__list {
        border-right: 0;
    }

    /* The image is moved into the open item's slot, leaving this panel empty. */
    .solutions__media:not(:has(img)) {
        display: none;
    }

    .solution-item__slot .solutions__frame {
        margin-top: var(--space-5);
    }

    /* Open item: the brand bar runs down beside the title, description and button only, not
       beside the image below them (desktop: the whole item, see .solution-item.is-active). */
    .solution-item.is-active,
    .solutions--expanded .solution-item.is-active {
        box-shadow: none;
    }

    .solution-item.is-active .solution-item__trigger {
        box-shadow: inset 3px 0 0 var(--color-brand);
    }

    .solution-item__text {
        position: relative;
    }

    .solution-item.is-active .solution-item__text::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        /* back across the panel's left padding to the item's left edge */
        left: calc(-1 * var(--solution-pad-left, var(--solution-gap, 23px)));
        width: 3px;
        background: var(--color-brand);
    }

    /* A page's own 'itemPadding': its left value (set by the element). */
    .solutions--item-pad {
        --solution-pad-left: var(--solution-item-pad-left);
    }

    /* In the slot the frame sizes to the images instead of the panel. */
    .solution-item__slot .solutions__image {
        height: auto;
    }

    .solutions--media-left .solutions__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .solutions--media-left .solutions__list {
        border-left: 0;
    }

    .solutions__mosaic,
    .solutions__mosaic-side {
        display: none;
    }

    /* Mosaic hidden: the text can use the full width again. */
    .solutions__intro--left.solutions__intro--mosaic {
        padding-right: var(--space-8);
    }

    .solutions--gutter .solutions__body {
        padding-right: 0;
    }

    .solutions--gutter .solutions__media,
    .solutions--gutter.solutions--media-left .solutions__list {
        border-right: 0;
    }

    /* Expanded list: one column too, without the gutter. */
    .solutions--expanded .solutions__body,
    .solutions--expanded.solutions--media-left .solutions__body {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 0;
    }

    .solutions--expanded .solutions__list,
    .solutions--expanded.solutions--media-left .solutions__list {
        border-inline: 0;
    }

    /* The painting column is empty once its screenshot has moved into the open item: hide it
       (it would otherwise leave a strip of painting under the list). */
    .solutions--image-edge .solutions__media:not(:has(img)) {
        display: none;
    }

    /* Screenshot in the open item: on that item's painting ('--solutions-slot-bg', set by
       site.js), centred at a sensible size and standing on the painting's bottom edge - the
       same look as beside the list on desktop. */
    .solutions--image-edge .solution-item__slot .solutions__frame {
        position: relative;
        display: grid;
        place-items: end center;
        padding: var(--space-7) var(--space-7) 0;
        background: var(--solutions-slot-bg, var(--color-brand-soft)) center / cover no-repeat;
    }

    .solutions--image-edge .solution-item__slot .solutions__image {
        grid-area: 1 / 1;
        justify-self: center; /* centred here, whatever its 'imageAlign' beside the list */
        width: auto;
        max-width: min(100%, 560px);
        max-height: 520px;
        margin: 0;
        object-fit: contain;
    }
}

@media (max-width: 992px) {
    /* Connect steps: the cards stack. */
    .connect-steps__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 72px;
        margin-top: 88px;
    }

    .connect-steps__logo {
        top: -48px;
        right: 22px;
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }

    /* Customer story page: closing quote. */
    .story-detail__closing blockquote p {
        font-size: 23px;
    }

    .story-detail__closing-mosaic {
        width: 64px;
        height: 64px;
    }

    /* Episode page: More episodes, two per row. */
    .els-more__head {
        padding: var(--space-8) var(--space-5) var(--space-5);
    }

    .els-more__grid > * {
        border-bottom: 0.7px solid var(--color-border);
    }

    .els-more__grid > :last-child {
        border-bottom: 0;
    }

    /* Episode page: heading and columns stack. */
    .episode__head,
    .episode__columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .episode__head {
        gap: var(--space-5);
    }

    .episode__main {
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
    }

    .episode__quote blockquote p {
        font-size: 23px;
    }

    /* Education Leadership Series: about, episodes. */
    .els-about,
    .els-episodes__head {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .els-about {
        gap: var(--space-5);
        padding: var(--space-8) var(--space-5);
    }

    .els-episodes__head {
        padding: var(--space-8) var(--space-5) var(--space-5);
    }

    .els-episodes__bar {
        padding: var(--space-4) var(--space-5);
    }

    .els-episodes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .els-episodes__grid > :nth-child(3n) {
        border-right: 0.7px solid var(--color-border);
    }

    .els-episodes__grid > :nth-child(2n) {
        border-right: 0;
    }

    .els-episodes__next {
        border-right: 0;
    }

    /* Education Leadership Series: latest episode - poster above the card's text. */
    .els-latest__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .els-latest__media {
        min-height: 0;
        aspect-ratio: 16 / 9; /* full width now: a video frame, not the side-by-side shape */
    }

    /* Story banner: smaller titles, less padding; the mosaic narrower. */
    .story-banner__head {
        padding: var(--space-8) 200px var(--space-8) var(--space-6);
    }

    .story-banner__title {
        font-size: 32px;
    }

    .story-banner__text {
        padding: var(--space-8) var(--space-6);
    }

    .story-banner__story-title {
        font-size: 28px;
    }

    .story-banner__media {
        min-height: 380px;
    }

    /* Compare videos: less padding round the title; smaller title. */
    .compare-videos__head {
        padding: var(--space-8) var(--space-6);
    }

    .compare-videos__title {
        font-size: 32px;
    }

    .compare-videos__body {
        padding: var(--space-4) var(--space-4) 18px;
    }

    /* Compare fit and questions: less padding; the questions under the title (no mosaic). */
    .compare-fit {
        padding: var(--space-7) var(--space-6);
    }

    .compare-fit__title {
        font-size: 22px;
    }

    .compare-questions {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        padding: var(--space-8) var(--space-6);
    }

    .compare-questions__eyebrow {
        margin-top: 0;
    }

    .compare-questions__mosaic {
        display: none;
    }

    /* Compare side by side: less padding round the table. */
    .compare-sbs {
        padding: var(--space-8) var(--space-6);
    }

    .compare-sbs__title {
        font-size: 30px;
    }

    /* Compare ratings: a narrower painting frame round the card. */
    .compare-ratings__band {
        padding: var(--space-8) var(--space-6);
    }

    /* Compare hero: the text only (the logos image is left out on small screens). */
    .split-hero.split-hero--fill.split-hero--compare {
        grid-template-columns: minmax(0, 1fr);
    }

    .split-hero--fill.split-hero--compare .split-hero__media {
        display: none;
    }

    /* Offices and Join the team: less side padding. */
    .about-offices,
    .about-join {
        --about-offices-pad: var(--space-6);
        padding-right: var(--space-6);
        padding-left: var(--space-6);
    }

    /* Team: three columns, no mosaics beside the rows (the people fill every column). */
    .about-team__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: var(--space-6) var(--space-6) var(--space-8);
    }

    .about-team__deco {
        display: none;
    }

    .about-team__head {
        padding: var(--space-9) var(--space-6);
    }

    .about-team__mosaic--head-right {
        width: 80px;
    }

    .about-team__mosaic--head-left {
        width: 110px;
    }

    /* Ecosystem: shorter cards, smaller panels' padding. */
    .about-eco__panel {
        padding: var(--space-5);
    }

    .about-eco__card {
        min-height: 420px;
    }

    /* About hero: narrower card padding; the story under vision and mission. */
    .about-hero {
        padding: var(--space-7);
    }

    .about-hero__card {
        padding-right: 140px;
    }

    .about-hero__mosaic {
        width: 130px; /* smaller, so it stays clear of the description */
    }

    .about-hero__title br {
        display: none; /* the title wraps by itself at this width */
    }

    .about-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-intro__main {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    /* Stacked: every cell starts at the same left edge. */
    .about-intro__side,
    .about-intro__story {
        padding-right: var(--space-5);
        padding-left: var(--space-5);
    }

    .about-intro__stat,
    .about-intro__ratings {
        padding-left: var(--space-5);
    }

    .about-intro__title {
        max-width: none;
    }

    /* Trust strip on tablets: the logos line above the four logos, figures two to a row,
       the security text above the badges. */
    .price-trust__logos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .price-trust__logos-text {
        grid-column: 1 / -1;
        border-bottom: 0.7px solid var(--color-border);
    }

    .price-trust__logos > .price-trust__logo:nth-child(2) {
        border-left: 0;
    }

    .price-trust__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-trust__stats > :nth-child(odd) {
        border-left: 0;
    }

    .price-trust__stats > :nth-child(n + 3) {
        border-top: 0.7px solid var(--color-border);
    }

    .price-trust__security {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-trust__security > * + * {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    .price-trust__badges img {
        height: 80px;
    }


    /* Tablets: the name above its logos (no line), logos across the full width. */

    .trusted-cats__rows {
        margin-inline: var(--space-6);
    }

    .trusted-cats__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .trusted-cats__label {
        padding: 0;
    }

    .trusted-cats__logos {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-4);
        padding-left: 0;
        border-left: 0;
    }

    /* "Trusted by" strip: 4 logos per row on tablets. */
    .logo-strip__logos--sized {
        grid-template-columns: repeat(var(--logo-cols-md, 4), minmax(0, 1fr));
    }

    /* Video tabs: one column; the thumbnail shows under the active card. */
    .video-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .video-tabs__media:not(:has(img)) {
        display: none;
    }

    .video-tabs__slot .video-tabs__frame {
        position: relative; /* the play link covers the thumbnail here too */
        margin-top: var(--space-3);
    }

    .video-tabs__slot .solutions__image {
        height: auto;
    }

    /* Toolkit: one column of columns, lines between them. */
    .toolkit__columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .toolkit__column+.toolkit__column {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    /* Story showcase: the story text above its photo. */
    .story-showcase__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-showcase__text {
        padding: var(--space-8) var(--space-6);
    }

    .story-showcase__media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    /* AI spotlight: text panel above the screenshot. */
    .ai-spotlight__box,
    .ai-spotlight--media-left .ai-spotlight__box {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-spotlight--media-left .ai-spotlight__media {
        order: 0;
    }

    /* Stacked: the whole image shows at its own height. */
    .ai-spotlight__image {
        position: static;
        height: auto;
    }

    .compare {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "table"
            "media";
        padding: var(--space-8) var(--space-4) 0;
    }

    /* The graphic is part of the layout here (not floating), so the block grows to fit it
       and it can never run over the table. A white band over the top of the painting keeps
       the desktop look: the graphic rises above the painting. */
    .compare__media {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin: var(--space-7) calc(-1 * var(--space-4)) 0;
        padding: 0 var(--space-4);
        min-height: 0;
    }

    .compare__media::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 30%;
        background: var(--color-surface);
    }

    .compare__image {
        position: relative;
        left: auto;
        width: min(100%, 460px);
        max-width: 100%;
        transform: none;
    }

    /* Tablets and phones: no hover, so a plain grid of folders with everything shown. */
    .module-folders__stage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(var(--folder-tab-h) + var(--space-4)) var(--space-4);
        padding: calc(var(--folder-tab-h) + var(--space-6)) var(--space-4) var(--space-6);
        clip-path: none;
    }

    .module-folders__row {
        display: contents;
    }

    .module-folders__slot,
    .module-folders__row--front .module-folders__slot {
        height: auto;
        margin: 0;
    }

    .folder-card,
    .module-folders__row--front .folder-card,
    .module-folders__row--back .module-folders__slot:hover .folder-card {
        position: relative;
        padding-top: var(--space-3);
        height: 100%;
        min-height: 0;
        padding-bottom: var(--space-5);
        border-bottom: var(--folder-line-w) solid var(--folder-line);
    }

    .folder-card__more {
        grid-template-rows: 1fr;
    }

    .folder-card__more-inner {
        opacity: 1;
    }

    .folder-card__description {
        margin-top: var(--space-3);
    }

    .folder-card__button {
        margin-top: var(--space-4);
    }

    .integrations-grid__logos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-8) var(--space-5);
    }

    /* Tablets and phones: the story's text above its photo. */
    .integrations-story {
        grid-template-columns: minmax(0, 1fr);
    }

    .integrations-story__text {
        padding: var(--space-8) var(--space-6);
    }

    .integrations-story__button {
        margin-top: 0;
    }

    .integrations-story__media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    :root {
        --fs-display: 45px;
        --lh-display: 50px;
    }

    /* No room beside the centred text: the intro mosaics would cover it. */
    .feature-rows__mosaic {
        display: none;
    }

    /* Left intro: the buttons go under the text. */
    .feature-rows__intro--left .feature-rows__actions {
        position: relative;
        top: auto;
        right: auto;
        justify-content: flex-start;
        margin-top: var(--space-6);
    }

    .faq__intro {
        padding: var(--space-6) var(--space-5);
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
    }

    .faq-item__toggle {
        padding: var(--space-4) var(--space-6) var(--space-4) var(--space-5);
    }

    .faq-item__icon--close {
        right: var(--space-5);
    }

    .faq-item__toggle {
        padding-right: var(--space-5);
    }

    .faq-item__answer {
        padding: 0 var(--space-5) var(--space-4);
    }
}

@media (max-width: 768px) {
    /* Pricing compare table: scrolls sideways again, so its header row doesn't stick. */
    .price-compare__scroll {
        overflow-x: auto;
    }

    .price-compare__table thead th {
        position: static;
    }

    /* Pricing "What's included" popup: preview above the features, buttons stacked. */
    .module-modal__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .module-modal__head,
    .module-modal__body,
    .module-modal__foot {
        padding-right: var(--space-5);
        padding-left: var(--space-5);
    }

    .module-modal__head {
        padding-right: var(--space-8);
    }

    .module-modal__title {
        font-size: 21px;
    }

    .module-modal__foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .module-modal__foot .btn {
        justify-content: center;
        margin-left: 0;
    }

    /* Story banner: the photo above the story text; the title wraps by itself. */
    .story-banner__head {
        padding-right: 140px;
    }

    .story-banner__title br {
        display: none;
    }

    .story-banner__title {
        font-size: 28px;
    }

    .story-banner__story {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-banner__media {
        order: -1;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .story-banner__story-title {
        font-size: 24px;
    }

    /* Compare videos: one card per row, inside the box's padding. */
    .compare-videos__list {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 var(--space-5);
    }

    .compare-videos__title {
        font-size: 26px;
    }

    /* Compare fit: the cards stacked; questions title smaller. */
    .compare-fit {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-5) var(--space-4);
    }

    .compare-questions__title {
        font-size: 26px;
    }

    /* Compare ratings: smaller heading and mosaic, a thinner painting frame. */
    .compare-ratings__head {
        min-height: 0;
        padding: var(--space-6) 96px var(--space-5) var(--space-5);
    }

    .compare-ratings__mosaic {
        width: 72px;
    }

    .compare-ratings__title {
        font-size: 24px;
    }

    .compare-ratings__band {
        padding: var(--space-5) var(--space-4);
    }

    /* Compare hero: the description a little smaller on phones (it's long). */
    .split-hero--compare .split-hero__description {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Offices and Join the team: smaller titles; Join stacked. */
    .about-offices__title,
    .about-join__title {
        font-size: 26px;
    }

    .about-join {
        flex-direction: column;
        align-items: flex-start;
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    /* Trusted by (mosaic version): a smaller mosaic. */
    .trusted-cats__mosaic {
        width: 140px;
    }

    .trusted-cats--mosaic .trusted-cats__intro {
        padding-right: 160px;
    }

    .trusted-cats--left .trusted-cats__intro {
        padding-left: var(--space-6);
    }

    .trusted-cats--left .section-intro__title {
        font-size: 26px;
    }

    /* Ecosystem: the products stacked, the mosaic smaller. */
    .about-eco {
        padding: var(--space-8) var(--space-5) var(--space-5);
    }

    .about-eco__mosaic {
        width: 110px;
        margin-top: calc(-1 * var(--space-8));
        margin-right: calc(-1 * var(--space-5));
    }

    .about-eco__intro {
        padding-bottom: var(--space-7);
    }

    .about-eco__title {
        font-size: 26px;
    }

    .about-eco__title br {
        display: none; /* the title wraps by itself at this width */
    }

    .about-eco__products {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-eco__card {
        min-height: 0;
    }

    /* Milestones: smaller title, closer rows. */
    .about-timeline {
        padding: var(--space-7) 0 var(--space-6) var(--space-5);
    }

    .about-timeline__title {
        font-size: 22px;
    }

    .about-timeline__title br {
        display: none; /* the title wraps by itself at this width */
    }

    .about-timeline__arrows,
    .about-timeline__track {
        margin-top: var(--space-6);
    }

    .about-timeline__item {
        flex-basis: 170px;
    }

    /* About intro: figures two to a row, the ratings on their own row under them (beside the
       figures there isn't room for both). */
    .about-intro__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-intro__ratings {
        grid-column: 1 / -1;
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    /* About hero: the mosaic left out, the card full width. */
    .about-hero {
        padding: var(--space-5);
    }

    .about-hero__card {
        padding: var(--space-6) var(--space-5);
    }

    .about-hero__mosaic {
        display: none;
    }


    /* Phones: the painting's small copy, if the element set one (--ai-bg-sm). */

    .ai__stage {
        background-image: var(--ai-bg-sm, var(--ai-bg, none));
    }

    .hiree-connect {
        padding: var(--space-8) var(--space-5);
    }

    .hiree-connect__title {
        font-size: 28px;
    }

    .hiree-connect::before {
        display: none;
    }

    /* Phones: cards stacked, no hover animation. */
    .hiree-connect__link {
        display: none;
    }

    .hiree-connect__cards:hover .hiree-connect__card:first-of-type,
    .hiree-connect__cards:hover .hiree-connect__card:last-of-type {
        transform: none;
    }

    .hiree-connect__cards {
        grid-template-columns: minmax(0, 1fr);
        margin-top: var(--space-8);
    }

    /* Phones: 3 logos per row, a little smaller. */

    .trusted-cats__rows {
        margin-inline: var(--space-5);
    }

    .trusted-cats__logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5) var(--space-4);
    }

    .trusted-cats__logos img {
        width: calc(var(--logo-w, 120px) * 0.8);
        max-width: 100%;
        height: calc(var(--logo-h, 44px) * 0.8);
    }

    .icon-cards {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-6) var(--space-5) 0;
    }

    .icon-cards-box--green .icon-cards {
        padding: var(--space-6) var(--space-5);
    }

    .icon-cards__banner {
        flex-wrap: wrap;
        padding: var(--space-5);
    }

    .cta__modules {
        padding: var(--space-6) var(--space-5);
    }

    .video-tabs__text {
        padding: var(--space-7) var(--space-5);
    }

    /* Dark trust block stacked: text, then badges filling the width. */
    .trust-block--dark {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-7) var(--space-5);
    }

    .trust-block--dark .trust-block__badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .trust-block--dark .trust-block__badges img {
        width: 100%;
        max-width: 100px;
        height: auto;
    }

    /* Toolkit: no side gutters on phones. */
    .toolkit__module {
        margin-inline: 0;
        padding-top: var(--space-5);
        border-inline: 0;
    }

    .toolkit--inset > .mosaic-band,
    .toolkit--inset > .toolkit__columns {
        margin-inline: 0;
        border-inline: 0;
    }

    /* A block's own 'headPadding' is for desktop; phones use the default. */
    .integrations-grid__head.integrations-grid__head--pad {
        padding: var(--space-7) var(--space-4) var(--space-6);
    }

    .toolkit__intro {
        padding: var(--space-8) var(--space-5);
    }

    .toolkit__module-head {
        padding: var(--space-6) var(--space-5);
    }

    .toolkit__module-body {
        padding: var(--space-5);
    }

    .toolkit__checklist--card {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-5);
    }

    /* One column on phones: the list in order, no line. */
    .toolkit__checklist--card.toolkit__checklist--by-column {
        grid-template-rows: none;
        grid-auto-flow: row;
        background-image: none;
    }

    .toolkit__groups {
        padding: var(--space-5);
    }

    .toolkit__groups-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .toolkit__group-col,
    .toolkit__group-col+.toolkit__group-col {
        padding: 0;
        border-left: 0;
    }

    .story-showcase__head {
        padding: var(--space-8) var(--space-5);
    }

    .story-showcase__text {
        padding: var(--space-7) var(--space-4);
    }

    .feature-rows__intro--left {
        padding: var(--space-8) var(--space-5);
    }

    /* A block's own 'introPadding' is for desktop; phones use the default. */
    .solutions__intro.solutions__intro--pad {
        padding: var(--space-8) var(--space-5);
    }

    .ai-spotlight {
        padding: var(--space-6) var(--space-4);
    }

    .ai-spotlight__text {
        padding: var(--space-6) var(--space-5);
    }

    /* Phones: no tooltip (no hover); smaller button and rings, so the rings don't spread
       over the buttons above the screenshot. */
    .play-button__label {
        display: none;
    }

    .play-button {
        --play-size: 32px;
        --play-ring-inner: 2;
        --play-ring-outer: 3;
    }

    /* Phones: one card per row, so no lines across a gap. */
    .feature-grid--2 .feature-grid__text {
        padding-bottom: var(--space-6);
    }

    .feature-grid--2 .feature-grid__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .feature-grid--2 .grid-card:nth-child(2) {
        border-top: 0.7px solid var(--color-border);
    }

    .feature-grid--2 .grid-card:nth-child(even) {
        margin-left: 0;
        padding-left: var(--space-4);
        border-left: 0.7px solid var(--color-border);
        background: var(--color-surface);
    }

    /* One per row: every card has its bottom line again, except the very last. */
    .feature-grid--2 .grid-card:nth-child(odd):nth-last-child(-n + 2) {
        border-bottom: 0.7px solid var(--color-border);
    }

    .feature-grid--2 .grid-card:last-child {
        border-bottom: 0;
    }

    .feature-grid--2 .grid-card {
        padding-bottom: var(--space-6);
    }

    .feature-grid__tags {
        gap: var(--space-3);
    }

    :root {
        --container-pad: 20px;
        --section-space: var(--space-8);
        --fs-display: 38px;
        --lh-display: 46px;
        --fs-title: 30px;
        --lh-heading: 38px;
        --fs-h2: 27px;
        --fs-h3: 20px;
        --lh-h3: 27px;
        --fs-lead: 16px;
        --fs-18: 14px
    }

    .mosaic-band {
        height: var(--space-8);
    }

    .section-intro {
        padding: var(--space-8) var(--space-5);
    }

    .logo-strip {
        padding: var(--space-7) var(--space-4);
    }

    .logo-strip__logos {
        gap: var(--space-6) var(--space-7);
        margin-top: var(--space-6);
    }

    .logo-strip__viewport .logo-strip__logos {
        gap: var(--space-7);
        margin-top: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        will-change: transform;
    }

    /* 768px and below the logos become one scrolling line (site.js), so the row must not wrap
    and anything past the edge is clipped. */
    .logo-strip__viewport {
        margin-top: var(--space-6);
        overflow: hidden;
    }

    .logo-strip__logos img {
        max-width: 120px;
        height: 44px;
    }

    /* "Trusted by" strip: one scrolling line (not the grid), logos at 75% of their size. */
    .logo-strip__viewport .logo-strip__logos--sized {
        display: flex;
    }

    .logo-strip__logos--sized img {
        width: calc(var(--logo-w, 120px) * 0.75);
        max-width: none;
        height: calc(var(--logo-h, 48px) * 0.75);
    }

    .cta__box {
        aspect-ratio: auto;
        padding: var(--space-8) var(--space-5);
    }

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

    .cta__quote-area {
        border-right: 0;
    }

    .cta__quote {
        margin: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
        font-size: 16px;
        line-height: 24px;
    }

    .cta__author {
        padding: var(--space-3) var(--space-5) var(--space-3) var(--space-7);
    }

    .cta_author_title {
        font-size: 15px;
        line-height: 22px;
    }

    /* Logo: a short strip under the quote, still boxed by the grid lines. */
    .cta__logo-area {
        --g2-size: 72px;
        height: 140px;
        border-top: 0.7px solid var(--color-border);
    }

    .ai__features,
    .ai__features.ai__features--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-feature__body {
        min-height: 0;
    }

    .feature-row__frame {
        padding: 20px;
    }

    .module-cards__mosaic {
        display: none;
    }

    .module-cards__intro {
        padding-block: var(--space-8);
    }

    .trust-block {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-6) var(--space-5);
    }

    .trust-block__badges {
        gap: var(--space-4);
    }

    .story-spotlight {
        padding: var(--space-6) var(--space-5);
    }

    .story-spotlight__head {
        flex-direction: column;
    }

    .story-spotlight__button {
        margin-top: 0;
    }

    .story-spotlight__card {
        margin-top: var(--space-6);
    }

    .story-spotlight__story {
        padding: var(--space-6) var(--space-5);
    }

    .integrations-block {
        padding: var(--space-6) var(--space-5);
    }

    .feature-grid {
        --grid-gutter: var(--space-4);
    }

    .feature-grid__intro {
        padding: var(--space-6) var(--space-5) 0;
    }

    .feature-grid__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    /* 1 per row: only the first card is in the first row. */
    .grid-card:nth-child(2),
    .grid-card:nth-child(3) {
        border-top: 0.7px solid var(--color-border);
    }

    .grid-card__promo-logo {
        margin-left: 0;
    }

    .final-cta {
        padding: var(--space-7) var(--space-5) 0;
    }

    .final-cta__stores .store-badge img {
        height: 30px;
    }

    .final-cta__screens {
        gap: var(--space-2);
        margin-top: var(--space-7);
    }

    .final-cta__mobile,
    .final-cta__desktop {
        border-radius: 8px;
    }

    .page-hero-section {
        padding-top: var(--space-5);
    }

    /* No mosaic on phones (it would sit under the buttons): plain white intro. */
    .page-hero {
        --shot-top: var(--space-6);
        --shot-w: 88cqw;
    }

    .page-hero__mosaic {
        display: none;
    }

    .page-hero__intro {
        padding: var(--space-8) var(--space-5);
    }

    .page-hero--cover .page-hero__intro {
        padding-top: var(--space-6);
    }

    .page-hero__image {
        border-radius: 10px;
    }

    .feature-row__text {
        padding: var(--space-6) var(--space-5) var(--space-5);
    }

    .feature-row .feature-row__media,
    .feature-row--reverse .feature-row__media {
        padding: 0 var(--space-5) var(--space-6);
    }

    .feature-row__tags {
        margin-top: var(--space-5);
        gap: var(--space-2);
    }

    .site-footer__links {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__platform .site-footer__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__column:nth-child(3n + 1) {
        border-left: 0.7px solid var(--color-border);
    }

    .site-footer__column:nth-child(2n + 1) {
        border-left: 0;
    }

    .site-footer__awards-list img {
        height: 56px;
    }

    .site-footer__badges {
        gap: 12px;
    }

    .site-footer__badges img {
        width: 48px;
        height: 48px;
    }

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

    .solution-item__trigger {
        padding-inline: var(--space-4);
    }

    .solution-item__panel-inner {
        padding-inline: var(--space-4);
    }

    /* Phones: the default side padding, not a page's wider 'itemPadding'. */
    .solutions--item-pad .solution-item__panel-inner {
        padding: 0 var(--space-4);
    }

    /* The panel's left padding on phones (where the open item's brand bar sits). */
    .solutions,
    .solutions--item-pad {
        --solution-pad-left: var(--space-4);
    }

    .solutions--expanded .solution-item__trigger,
    .solutions--expanded .solution-item.is-active .solution-item__trigger {
        padding-inline: var(--space-4);
    }

    .award-strip__item {
        padding: var(--space-3) var(--space-4);
    }

    /* A long title may not fit the phone's width: it wraps inside the award. */
    .award-strip__text {
        white-space: normal;
    }

    .award-strip__badges img {
        --badge-scale: 0.73;
    }

    .split-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .split-hero-section {
        padding-top: var(--space-5);
    }

    .split-hero__text {
        padding: var(--space-7) var(--space-5);
    }

    .split-hero__media {
        padding: var(--space-6) var(--space-5);
    }

    /* Stacked: the filled image gets its own height, and the figures bar runs full width
       (two figures side by side, the review scores under them). */

    .split-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .split-hero__stat--ratings {
        grid-column: 1 / -1;
        border-top: 0.7px solid var(--color-border);
    }

    .split-hero__stat.split-hero__stat--ratings {
        border-left: 0;
    }

    /* Featured story on phones: no side gutters, less padding, smaller quote. */
    .featured-story {
        --featured-gutter: 0px;
    }

    .featured-story__head,
    .featured-story__card {
        border-inline: 0;
    }

    .featured-story__card {
        padding-bottom: var(--space-7); /* a shorter strip on phones */
    }

    .featured-story__head {
        padding: var(--space-7) var(--space-5) var(--space-5);
    }

    .featured-story__logo-row,
    .featured-story__meta,
    .featured-story__quote {
        padding-inline: var(--space-5);
    }

    .featured-story__quote blockquote {
        font-size: var(--fs-body);
    }

    .featured-story__actions {
        padding: var(--space-6) var(--space-5) var(--space-5);
    }

    /* Story library on phones: one card per row, the controls full width, chips scrolling
       sideways in one line, no mosaics. */
    .story-filter__mosaic {
        display: none;
    }

    .story-filter__intro {
        padding: var(--space-7) var(--space-5);
    }

    .story-filter__chips {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .story-filter__chip {
        flex: none;
    }

    .story-filter__controls,
    .story-filter__search {
        width: 100%;
    }

    .story-filter__select {
        flex: 1;
    }

    .story-filter__select select {
        width: 100%;
    }

    .story-filter__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-filter__grid > .story-card:nth-child(n) {
        border-right: 0;
    }

    /* Reviews on phones: one card per row, no gutters, banner without its mosaic. */
    .reviews {
        --reviews-gutter: 0px;
    }

    .reviews__head {
        padding: var(--space-7) var(--space-5) var(--space-6);
    }

    .reviews__body {
        border-inline: 0;
    }

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

    .review-card--featured {
        grid-column: auto;
        padding: var(--space-6) var(--space-5);
    }

    .review-card__lead {
        font-size: var(--fs-h5);
    }

    .story-invite {
        min-height: 0;
        margin-right: 0; /* phones: full width */
        padding: var(--space-7) var(--space-5);
    }

    .story-invite__mosaic {
        display: none;
    }

    /* Intro hero on phones: the title's lines balanced (no word left on its own). */
    .intro-hero__title {
        text-wrap: balance;
    }

    /* Pricing hero on tablets: smaller corner mosaics, the student bands in a rounded box. */
    .price-hero {
        padding: var(--space-7) var(--space-5) var(--space-6);
    }

    .price-hero__mosaic--top {
        width: 72px;
    }

    .price-hero__mosaic--bottom {
        width: 108px;
    }

    .price-hero__bands {
        border-radius: 22px;
    }

    /* Plans on tablets: Core above Enterprise Pro, the band table three to a row. */
    .price-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-core,
    .price-enterprise {
        padding: var(--space-6) var(--space-5);
    }

    .price-enterprise {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    .price-core__bands {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .price-core__band:nth-child(3n + 1) {
        border-left: 0;
    }

    .price-core__band:nth-child(n + 4) {
        border-top: 0.7px solid var(--color-border);
    }

    .price-plans__note {
        flex-direction: column;
        gap: var(--space-1);
    }

    /* Build your plan on tablets: heading stacked, cards two to a row, the estimate below them. */
    .price-build__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-5) var(--space-5);
    }

    .price-build__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-module:nth-child(2n) {
        border-right: 0;
    }

    .price-module:nth-last-child(-n + 3) {
        border-bottom: 0.7px solid var(--color-border);
    }

    .price-estimate {
        position: static;
        padding: var(--space-6) var(--space-5);
    }

    /* The estimate sits under the cards here: no line at its left. */
    .price-estimate-col {
        border-left: 0;
    }

    /* Onboarding on tablets: the two plans stacked. */
    .price-onboard__plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-onboard__plan {
        padding: var(--space-6) var(--space-5);
    }

    .price-onboard__plan + .price-onboard__plan {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    .price-onboard__button {
        margin-top: var(--space-2);
    }

    /* Closing banner on tablets: the card under the text. */
    .price-cta {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-7) var(--space-5);
    }
    /* Customer quotes on tablets: one above the other. */
    .price-quotes__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-quotes__item + .price-quotes__item {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    .price-quotes__head,
    .price-quotes__item {
        padding-right: var(--space-5);
        padding-left: var(--space-5);
    }

    /* Short clips on phones: smaller clips (about two and a half visible), smaller heading. */
    .clips__head {
        padding: var(--space-7) var(--space-5) var(--space-5);
    }

    .clips__track {
        padding-inline: var(--space-5);
        scroll-padding-inline: var(--space-5);
    }

    .clip {
        flex-basis: 150px;
    }

    /* Safety & Security hero on phones: badges and figures two to a row. */
    .sec-hero {
        padding-top: var(--space-8);
    }

    .sec-hero__badges,
    .sec-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sec-hero__stats li,
    .sec-hero__stats li:nth-child(3n) {
        padding-bottom: var(--space-5);
        border-right: 0.7px solid var(--color-border);
    }

    .sec-hero__stats li:nth-child(2n) {
        border-right: 0;
    }

    /* Safety & Security body on phones: everything one column. */
    .sec-doc__section {
        padding: var(--space-7) var(--space-5);
    }

    .sec-doc__head {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .sec-doc__title {
        font-size: 24px;
    }

    .sec-tiles,
    .sec-plans,
    .sec-split,
    .sec-disclosure {
        grid-template-columns: minmax(0, 1fr);
    }

    .sec-tile:nth-child(odd):not(.sec-tile--wide) {
        border-right: 0;
    }

    .sec-tile,
    .sec-tile:nth-child(even):not(.sec-tile--wide) {
        padding-right: 0;
        padding-left: 0;
    }

    .sec-plan + .sec-plan,
    .sec-split__side {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    .sec-docs__row {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .sec-docs__url {
        grid-column: 2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sec-disclosure__text {
        padding-right: 0;
    }

    .sec-steps {
        border-top: 0.7px solid var(--color-border);
        border-left: 0;
    }

    .sec-steps li {
        padding-inline: 0;
    }

    .sec-disclosure__mail {
        flex-wrap: wrap;
    }

    /* For developers / Enterprise / banner on phones. */
    .int-dev {
        padding: var(--space-7) 0;
    }

    .int-dev__groups-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .int-ent__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .int-ent__item {
        min-height: 110px;
    }

    .int-ent__logo img {
        width: 96px;
    }

    .int-cta {
        padding: var(--space-6) var(--space-5);
    }

    /* Integrations directory on phones: two cards per row. */
    .int-dir__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logo-strip__viewport .logo-strip__logos li {
        flex: 0 0 auto;
    }

    /* Phone: one point per row, so the names have room. */
    .ai__intro {
        padding: 22px 10px 0;
    }

    .ai__shot {
        padding: 22px 10px 0;
    }

    /* No empty side columns here: the text gets (nearly) the full width. */
    .ai-modules {
        --ai-gutter: 0px;
        background: none;
    }

    .ai-module__head,
    .ai-module:first-child .ai-module__head,
    .ai-module:last-child .ai-module__head {
        padding: var(--space-5) var(--space-4);
    }

    /* Points one per row, each closed by a line (none after the last); no lines left over
    from the 2 x 2 desktop grid. */
    .ai-module__points {
        grid-template-columns: minmax(1, 2fr);
        grid-auto-rows: auto;
    }

    .ai-point,
    .ai-point:nth-child(odd),
    .ai-point:nth-child(-n + 2) {
        padding: var(--space-4);
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
    }

    .ai-point:last-child {
        border-bottom: 0;
    }

    .ai-point__icon {
        width: 44px;
        height: 44px;
    }

    /* Phones: the table keeps its three columns at a readable width and scrolls sideways
    inside its box, instead of squeezing into the screen. */
    .compare__table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compare-table {
        min-width: 560px;
    }

    .compare-table th {
        height: 56px;
        padding: var(--space-3);
        white-space: nowrap;
    }

    /* Points wrap onto several lines here: give each row some breathing room. */
    .compare-table td {
        padding-block: var(--space-2);
    }

    .compare-table__num {
        width: 36px;
    }

    .integrations-grid__head {
        flex-direction: column;
        min-height: 0;
        padding: var(--space-7) var(--space-4) var(--space-6);
    }

    .integrations-grid__button {
        margin-top: 0;
    }

    .integrations-grid__logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-7) var(--space-4);
        padding: var(--space-7) var(--space-4);
    }

    .integrations-grid__logos img {
        height: calc(var(--logo-h, 28px) * 0.86); /* 24px by default, own heights scaled the same */
    }

    .integrations-story__text {
        padding: var(--space-7) var(--space-4);
    }

    /* Page hero on phones: the painting's small copy (page_hero sets --hero-bg-sm when a
       -sm file exists next to the background). */

    .page-hero__backdrop,
    .page-hero-section.page-hero-section--cover {
        background-image: var(--hero-bg-sm, var(--hero-bg, none));
    }

    /* Final CTA and AI spotlight on phones: the paintings' small copies (the elements set the
       -sm variables when a -sm file exists next to the background). */

    .final-cta {
        background-image: var(--final-cta-bg-sm, var(--final-cta-bg, none));
    }

    .ai-spotlight {
        background-image: var(--ai-spotlight-bg-sm, var(--ai-spotlight-bg, none));
    }

    /* Integrations block on phones: the painting's small copy (integrations_block sets
       --integrations-bg-sm when a -sm file exists next to the background). */

    .integrations-block {
        background-image: var(--integrations-bg-sm, var(--integrations-bg, none));
    }
}

@media (max-width: 559.98px) {
    /* Connect steps. */
    .connect-steps {
        padding: var(--space-8) var(--space-4);
    }

    /* ROI calculator - coming soon. */
    .roi-soon {
        min-height: 360px;
    }

    .roi-soon__title {
        font-size: 40px;
    }

    /* Customer story page: closing quote. */
    .story-detail__closing {
        padding: var(--space-8) var(--space-4);
    }

    .story-detail__closing blockquote p {
        font-size: 19px;
    }

    .story-detail__closing-mosaic {
        width: 44px;
        height: 44px;
    }

    /* Customer story page: Before / After stack; panels tighter. */
    .story-detail__title {
        font-size: 30px;
    }

    .story-detail__compare {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-detail__moment--before {
        border-right: 0;
        border-bottom: 0.7px solid var(--color-border);
    }

    .story-detail__panel {
        padding: var(--space-6) var(--space-4);
    }

    .story-detail__next {
        margin-left: 0;
    }

    /* Episode page: More episodes. */
    .els-more__head {
        padding: var(--space-7) var(--space-4) var(--space-4);
    }

    /* Episode page. */
    .episode__bar,
    .episode__head,
    .episode__about,
    .episode__chapters,
    .episode__institution {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

    .episode__guests {
        margin: 0 var(--space-4);
    }

    .episode__player-wrap {
        padding: 0 var(--space-4) var(--space-5);
    }

    .episode__title {
        font-size: 32px;
    }

    .episode__play {
        --play-size: 56px;
    }

    .episode__play .play-button__icon .icon {
        width: 18px;
        height: 18px;
    }

    .episode__timeline {
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        gap: var(--space-2);
        font-size: 11px;
    }

    .episode__chapter {
        gap: var(--space-3);
    }

    .episode__quote {
        padding: var(--space-5) var(--space-4);
    }

    .episode__quote-card {
        padding: var(--space-5);
    }

    .episode__quote blockquote p {
        font-size: 19px;
    }

    /* Pricing CTA 'cta--fill'. */
    .cta--fill .cta__box {
        padding: var(--space-8) var(--space-4);
    }

    /* Education Leadership Series: about, episodes - one card per row. */
    .els-about {
        padding: var(--space-7) var(--space-4);
    }

    .els-episodes__head {
        padding: var(--space-7) var(--space-4) var(--space-4);
    }

    .els-episodes__bar {
        padding: var(--space-3) var(--space-4);
    }

    .els-episodes__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .els-episodes__grid > * {
        border-right: 0 !important;
    }

    .els-episodes__next {
        grid-column: auto;
        padding: var(--space-6) var(--space-4);
    }

    /* Education Leadership Series: latest episode. */
    .els-latest {
        padding: var(--space-5) var(--space-4);
    }

    .els-latest__body {
        padding: var(--space-5);
    }

    .els-latest__play {
        --play-size: 56px;
    }

    .els-latest__play .play-button__icon .icon {
        width: 18px;
        height: 18px;
    }

    .els-latest__tag {
        top: var(--space-3);
        left: var(--space-3);
    }

    .els-latest__timeline {
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        gap: var(--space-2);
        font-size: 11px;
    }

    /* Story banner: no mosaic; thinner padding. */
    .story-banner__mosaic {
        display: none;
    }

    .story-banner__head {
        padding: var(--space-7) var(--space-4);
    }

    .story-banner__text {
        padding: var(--space-7) var(--space-4);
    }

    /* Compare videos: thinner padding. */
    .compare-videos__head {
        padding: var(--space-7) var(--space-4) var(--space-6);
    }

    .compare-videos__list {
        padding: 0 var(--space-4);
    }

    /* Compare fit and questions: thinner frame and padding. */
    .compare-fit {
        padding: var(--space-3);
    }

    .compare-fit__card {
        padding: var(--space-5) var(--space-4);
    }

    .compare-questions {
        padding: var(--space-7) var(--space-4);
    }

    .compare-questions__list li {
        gap: var(--space-3);
        padding: var(--space-4) 0;
    }

    /* Compare side by side: each row stacked - the topic, then each product's answer under its name;
       the header row (names, mosaic) is left out, the names now sit by each answer. */
    .compare-sbs {
        padding: var(--space-7) var(--space-4);
    }

    .compare-sbs__title {
        font-size: 24px;
    }

    .compare-sbs__title br {
        display: none;
    }

    .compare-sbs__table,
    .compare-sbs__table tbody,
    .compare-sbs__table tr,
    .compare-sbs__table th,
    .compare-sbs__table td {
        display: block;
        width: auto;
    }

    .compare-sbs__table thead {
        display: none;
    }

    .compare-sbs__table tbody tr + tr {
        border-top: 0.7px solid var(--color-border);
    }

    .compare-sbs__table tbody th,
    .compare-sbs__table tbody td {
        border-top: 0;
    }

    .compare-sbs__table tbody th {
        padding-bottom: var(--space-2);
    }

    .compare-sbs__table tbody td {
        padding-top: var(--space-2);
        padding-bottom: var(--space-3);
    }

    .compare-sbs__table tbody td::before {
        content: attr(data-product);
        display: block;
        margin-bottom: 2px;
        color: var(--color-text);
        font-size: 12px;
        font-weight: var(--fw-semibold);
    }

    .compare-sbs__table tbody td.is-highlight::before {
        color: var(--color-brand);
    }

    /* Compare ratings: the painting as a thin frame. */
    .compare-ratings__band {
        padding: var(--space-3);
    }

    /* Offices and Join the team: thinner side padding. */
    .about-offices,
    .about-join {
        --about-offices-pad: var(--space-4);
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

    /* Team: two columns; no corner mosaics. */
    .about-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5) var(--space-3);
        padding: var(--space-4) var(--space-4) var(--space-6);
    }

    .about-team__head {
        padding: var(--space-8) var(--space-4);
    }

    .about-team__mosaic--head-right,
    .about-team__mosaic--head-left {
        display: none;
    }

    .about-team__name {
        font-size: 16px;
    }

    /* Trusted by (mosaic version): no mosaic. */
    .trusted-cats__mosaic {
        display: none;
    }

    .trusted-cats--mosaic .trusted-cats__intro {
        padding-right: var(--space-5);
    }

    .trusted-cats--left .trusted-cats__intro {
        padding-left: var(--space-5);
    }

    /* Ecosystem: no mosaic; thinner panels. */
    .about-eco__mosaic {
        display: none;
    }

    .about-eco__panel {
        padding: var(--space-3);
    }

    .about-eco__points {
        margin-top: var(--space-6);
    }

    /* Milestones: two years in view, so the next circle can always be clicked. */
    .about-timeline__item {
        flex-basis: 50%;
        padding-right: var(--space-4);
    }

    .about-timeline__year {
        font-size: 24px;
    }

    .about-timeline__text {
        max-width: none;
    }

    /* About hero: the painting as a thin frame. */
    .about-hero {
        padding: var(--space-3);
    }

    .about-intro__side,
    .about-intro__story {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

    .about-intro__stat,
    .about-intro__ratings {
        padding: var(--space-4);
    }

    /* Pricing hero on phones: no corner mosaics (they'd cover the text), bands three to a row. */
    .price-hero__mosaic {
        display: none;
    }

    .price-hero__bands {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        border-radius: 18px;
    }

    .price-hero__band {
        justify-content: center;
        padding: 8px 6px;
    }

    .price-check--two {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-enterprise {
        padding: var(--space-4);
    }

    .price-modules {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-module {
        border-right: 0;
    }

    .price-trust__logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-trust__logos > .price-trust__logo:nth-child(odd) {
        border-left: 0.7px solid var(--color-border);
    }

    .price-trust__logos > .price-trust__logo:nth-child(even) {
        border-left: 0;
    }

    .price-trust__logos > .price-trust__logo:nth-child(n + 4) {
        border-top: 0.7px solid var(--color-border);
    }

    .price-trust__badges {
        justify-content: center;
    }

    .price-trust__badges img {
        height: 64px;
    }

    .price-compare__title {
        font-size: 26px;
    }

    .price-compare__table th,
    .price-compare__table td {
        padding-right: var(--space-3);
        padding-left: var(--space-3);
    }

    /* The features column stays put while the plans scroll sideways beside it. */
    .price-compare__table {
        min-width: 600px;
    }

    .price-compare__feature {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 160px;
        background: var(--color-surface);
        box-shadow: 1px 0 0 var(--color-border);
    }

    .price-compare__group .price-compare__feature {
        background: var(--color-surface-muted);
    }

    .price-trust__stat,
    .price-trust__ratings {
        padding: var(--space-4);
    }

    .price-trust__stat-value,
    .price-trust__rating-value {
        font-size: 20px;
    }

    .price-trust__ratings li {
        gap: 6px;
    }

    .price-trust__rating-logo {
        width: 18px;
        height: 18px;
    }

    .price-trust__rating-stars {
        height: 10px;
    }

    .video-modal__close {
        top: -42px;
    }


    /* Phones: less painting around the screenshot. */

    .solutions--image-edge .solution-item__slot .solutions__frame {
        padding: var(--space-5) var(--space-5) 0;
    }

        /* Very small phones (320-374px): long single words ("Recommended", "management") must fit. */
    :root {
        --fs-display: 26px;
        --lh-display: 34px;
        --fs-title: 22px;
        --lh-heading: 31px;
        --fs-h2: 22px;
        --fs-h3: 18px;
        --lh-h3: 25px;
    }

    .watch-demo__inner {
        padding: var(--space-5);
    }

    .watch-demo__tabs,
    .watch-demo__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .module-folders__stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature-row__title {
        font-size: var(--fs-h5);
    }

    .cta__stage {
        padding: 0px;
    }

    .site-footer__links {
        grid-template-columns: repeat(1, 1fr);
    }

    .site-footer__column,
    .site-footer__column:nth-child(3n + 1) {
        border-left: 0;
    }

    .site-footer__platform,
    .site-footer__column {
        padding: 28px 20px;
    }

    .site-footer__awards {
        --awards-gap: 16px;
    }

    .site-footer__awards-list img {
        height: 48px;
    }

    .ai-module__points {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Pricing CTA on phones: the title wraps naturally (the design's line break left
       "EdTech" alone on a line), less space above the buttons, and the two buttons stacked
       at the same full width. */

    .cta__box {
        padding: var(--space-7) var(--space-5);
    }

    .cta__title br {
        display: none;
    }

    .cta__title {
        text-wrap: balance;
    }

    .cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }

    .cta__actions .btn {
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 479.98px) {
    .integrations-grid__logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Integrations directory on small phones: one card per row. */
    .int-dir__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 375px) {

    /* Very small phones (320-374px): long single words ("Recommended", "management") must fit. */
    :root {
        --fs-display: 23px;
        --lh-display: 30px;
        --fs-lead: 12px;
        --fs-body: 14px;
        --lh-body: 20px;
        --fs-title: 22px;
        --lh-heading: 31px;
        --fs-h2: 22px;
        --fs-h3: 18px;
        --lh-h3: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {

    /* No pulsing rings; the button and its tooltip stay. */
    .play-button::before,
    .play-button::after {
        animation: none;
    }

    .solution-item__panel,
    .solution-item__panel-inner,
    .solution-item__trigger,
    .solutions__image {
        transition: none;
    }

    .toolkit__group--more {
        transition: none;
    }

    /* Reduced motion: no auto-scroll; the row can be swiped/scrolled by hand instead. */
    .award-strip__viewport {
        overflow-x: auto;
    }

    .folder-card,
    .folder-card__more,
    .folder-card__more-inner {
        transition: none;
    }

    .faq-item__panel,
    .faq-item__answer,
    .faq-item__icon {
        transition: none;
    }

    .site-header {
        transition: none;
    }
}

/* Module card title linked to its module page ('url' on the card): title + link icon. */
.module-cards__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}

.module-cards__link:hover {
    color: var(--color-brand);
}

.module-cards__link .icon {
    width: 16px;
    height: 16px;
}