/*
 * 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-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;
    --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);
}

.skip-link:focus {
    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);
}

/* 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: #FAFAFA;
    /* border: 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));
}

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

.logo-strip {
    padding: 53px var(--space-9);
    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;
}

/* 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);
}

.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: 480px;
    /* wraps like the design */
}

.cta__title {
    max-width: 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;
}

/* 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;
}

/* 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: 22px;
}

.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;
    object-fit: contain;
    filter: grayscale(1);
}


/* ---------- 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(--color-surface-muted) center / cover no-repeat;
}

.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);
    padding: var(--space-8) 0 0 var(--space-9);
}

.feature-grid__text {
    /* default width; a page can override it with 'textWidth' on the element */
    max-width: var(--grid-text-w, 700px);
}

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

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

.feature-grid__mosaic {
    align-self: flex-end;
    width: auto;
    height: 100%;
    margin-top: calc(-1 * var(--space-8));
}

.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);
}

/* 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);
}

/* 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__text {
    padding-bottom: var(--space-8);
}

.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);
}

.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);
}

.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(--color-surface-muted) center / cover no-repeat;
}

.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: 600px;
    /* 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;
}


/* ---------- 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;
}

.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);
}

.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%;
    padding: 21px 24px;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: padding 0.3s ease;
}

/* Open item: 8px more space above the label, 8px less between title and description. */
.solution-item.is-active .solution-item__trigger {
    padding-top: 32px;
    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;
}

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

/* 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(--space-5);
    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: 32px;
}

/* 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;
    padding: var(--space-7) var(--space-6);
    background: var(--color-brand-soft);
}

.solutions__media .solutions__frame {
    position: absolute;
    top: var(--space-7);
    left: var(--space-6);
    width: calc(100% - 2 * var(--space-6));
    height: calc(100% - 2 * var(--space-7));
}

/* 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.4s ease;
}

.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;
    height: 140px;
}

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

/* Same dark label on every item, open or closed ('darkLabels' => true). */
.solutions--dark-labels .solution-item__label,
.solutions--dark-labels .solution-item__trigger:hover .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;
}

/* 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;
}

/* ---------- 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);
}

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

.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:focus-within .folder-card__more {
    grid-template-rows: 1fr;
}

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

/* 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);
}

.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);
}

.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;
    left: 55%;
    width: auto;
    height: 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: 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, 50%);
    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);
}

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

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

/* 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);
}

.split-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(17, 17, 17, 0.16);
}

/* ---------- 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-surface);
    overflow: hidden;
}

.page-hero__image {
    display: block;
    width: var(--shot-w);
    max-width: none;
    height: auto;
    margin-inline: auto;
}


/* 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;
}

.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);
}

.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: 24px;
    line-height: 1.35;
    font-weight: var(--fw-medium);
}

.feature-row__description {
    margin-top: var(--space-4);
    color: var(--color-text-desc);
    line-height: 22px;
    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;
}

/* Toggled by site.js: slides away on scroll down, returns on scroll up. */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* 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;
}

.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;
}

.has-dropdown.is-open .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);
}







/* ---------- Footer ---------- */

.site-footer {
    padding-bottom: 48px;
}

.site-footer__links {
    display: grid;
    grid-template-columns: 2.15fr 1fr 1.8fr 1.1fr 1.1fr 1.95fr 1.3fr;
    gap: 32px 20px;
    padding: 55px 32px;
    border: 0.7px solid var(--color-border);
}

.site-footer__group+.site-footer__group {
    margin-top: 32px;
}

.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: 12px;
}

.site-footer__list a {
    color: var(--color-text-muted);
    font-size: var(--fs-caption);
    line-height: 21px;
    text-decoration: none;
}

.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: 32px 24px;
    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;
}

/* ---------- Watch demo popup (element: watch_demo_modal; site.js [data-watch-demo]) ---------- */

.watch-demo {
    width: min(656px, calc(100% - 2 * var(--space-4)));
    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;
}


/* ==========================================================================
   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) {

    /* 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__caret {
            transform: rotate(90deg);
        }
    }
}

@media (max-width: 1400px) {

    /* 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;
    }

    /* 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) {

    /* 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);
    }

    .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;
    }

    /* 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);
    }

    .site-nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 24px;
        padding: 16px var(--container-pad) 32px;
        overflow-y: auto;
        background: var(--color-surface);
    }

    .site-header.is-menu-open .site-nav {
        display: flex;
    }

    .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);
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .site-footer__links {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {

    /* Tablet & phone: one column; the open item shows its own image. */
    .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);
    }

    /* 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;
    }

    .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;
    }

    .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) {

    /* 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;
    }

    .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__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__title {
        font-size: var(--fs-h5);
    }

    .feature-row__tags {
        margin-top: var(--space-5);
        gap: var(--space-2);
    }

    .site-footer__links {
        grid-template-columns: repeat(2, 1fr);
    }

    .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);
    }

    .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);
    }

    .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(0, 1fr);
        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: 24px;
    }

    .integrations-story__text {
        padding: var(--space-7) var(--space-4);
    }
}

@media (max-width: 559.98px) {
    .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);
    }

    .cta__stage {
        padding: 0px;
    }

    .site-footer__links {
        grid-template-columns: repeat(1, 1fr);
        gap: 28px 16px;
    }
}

@media (max-width: 479.98px) {
    .integrations-grid__logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 375px) {

    /* 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;
    }
}

@media (prefers-reduced-motion: reduce) {

    .solution-item__panel,
    .solution-item__panel-inner,
    .solution-item__trigger,
    .solutions__image {
        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;
    }
}