/*
 * Home page styles (templates/Pages/home.php), loaded only on that page.
 * Font sizes, colors and spacing come from the tokens in site.css.
 *
 * 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.
 */

/* ---------- Hero ---------- */

.hero-section {
    padding-top: var(--space-7);
}

.hero {
    position: relative;
    overflow: hidden;
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 850px;
    /* title wraps like the design: "...intelligent / platform" */
    padding: var(--space-6) var(--space-8) var(--space-7);
}

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

/* Bold part of the title always starts on its own line. */
.hero__title strong {
    display: block;
}

.hero__description {
    max-width: 31em;
    margin-top: var(--space-5);
}

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

.hero__highlights {
    margin-top: var(--space-5);
}

/* Image sits in the right half, anchored bottom-right, behind the text. */
.hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
}

.hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: right bottom;
}





/* ---------- Module grid ---------- */

.module-grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    gap: var(--space-6);
    padding: 28px 45px 37px;
    background: var(--color-surface-muted);
    border: 0.7px solid var(--color-border);
    border-top: 0;
}

.module-grid__title {
    margin-bottom: 27px;
}

.module-grid__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}







/* ---------- Showcase ----------
 * Desktop layout is driven by the variables on .showcase__stage, measured from
 * the design (1097px wide section). Tweak spacing there; everything else follows.
 * "cqw" = 1% of the stage's width (container query unit).
 */

.showcase {
    padding: var(--space-9) 0;
    overflow: hidden;
    background: center / cover no-repeat;
    /* image set inline by the element */
}

.showcase__stage {
    container-type: inline-size;
    --showcase-desktop-w: 48.2cqw;
    /* desktop screenshot width */
    --showcase-mobile-w: 18.9cqw;
    /* mobile screenshot width */
    --showcase-gap: 1.4cqw;
    /* between the screenshots at rest */
    --showcase-edge: 3.55cqw;
    /* screenshot to section edge when revealed (39px in design) */
    --showcase-text-gap: 2.45cqw;
    /* screenshot to text when revealed (27px in design) */
    /* How far each screenshot moves: from centered to --showcase-edge. */
    --showcase-shift: calc((100cqw - var(--showcase-desktop-w) - var(--showcase-mobile-w) - var(--showcase-gap)) / 2 - var(--showcase-edge));

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.showcase__desktop,
.showcase__mobile {
    position: relative;
    z-index: 1;
    display: block;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.showcase__desktop {
    flex: 0 0 auto;
    width: var(--showcase-desktop-w);
}

.showcase__mobile {
    flex: 0 0 auto;
    width: var(--showcase-mobile-w);
    margin-left: var(--showcase-gap);
}

/* Text sits behind the screenshots in the gap they open up. */
.showcase__content {
    position: absolute;
    top: 0;
    left: calc(var(--showcase-edge) + var(--showcase-desktop-w) + var(--showcase-text-gap));
    z-index: 0;
    /* fills the space between the two revealed screenshots */
    width: calc(100cqw - 2 * var(--showcase-edge) - var(--showcase-desktop-w) - var(--showcase-mobile-w) - 2 * var(--showcase-text-gap));
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.showcase__description {
    color: var(--color-text-desc);
    margin-top: var(--space-4);
    font-size: var(--fs-small);
}

.showcase__links {
    margin-top: var(--space-5);
}

/* Reveal: hover, keyboard focus on a link, or tap (site.js adds .is-revealed). */
.showcase:hover .showcase__desktop,
.showcase:focus-within .showcase__desktop,
.showcase.is-revealed .showcase__desktop {
    transform: translateX(calc(-1 * var(--showcase-shift)));
}

.showcase:hover .showcase__mobile,
.showcase:focus-within .showcase__mobile,
.showcase.is-revealed .showcase__mobile {
    transform: translateX(var(--showcase-shift));
}

.showcase:hover .showcase__content,
.showcase:focus-within .showcase__content,
.showcase.is-revealed .showcase__content {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0.2s;
}


/* ---------- Segments ---------- */

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

/* Intro layout comes from .section-intro (site.css); this only anchors the decoration. */
.segments__intro {
    position: relative;
}

.segments__decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 118px;
    height: auto;
}

/* Narrower than the default so it wraps like the design ("...compliance / built for you"). */
.segments__description {
    max-width: 550px;
}

/* 1px gaps over a border-colored background draw the dividers at any column count. */
.segments__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border-top: 0.7px solid var(--color-border);
    background: var(--color-border);
    list-style: none;
}

.segment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-7) var(--space-5) var(--space-5);
    background: var(--color-surface);
}

.segment-card__tag {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.segment-card__description {
    margin-top: var(--space-1);
    font-size: var(--fs-caption);
}

/* Pushed to the bottom so links line up across cards of different text length. */
.segment-card__link {
    margin-top: auto;
    padding-top: var(--space-5);
}


/* ---------- Module card ----------
 * Desktop: hovering a module chip opens its card beside the chip (site.js).
 * Tablet/phone: tapping a chip opens the same card as a sheet at the bottom of the screen.
 */
.module-grid__item {
    position: relative;
}

.module-card {
    z-index: 30;
    width: min(400px, 74vw);
    border: 0.7px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.14);
    opacity: 0;
    visibility: hidden;
    /* a plain fade: the card appears where it belongs, it never slides or grows */
    transition: opacity 0.22s ease, visibility 0s 0.22s;
    pointer-events: none;
}

.module-card.is-interactive {
    pointer-events: auto;
}

.module-card__inner {
    padding: 12px 12px 16px;
}

.module-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
}

.module-card__icon {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 14px;
}

.module-card__title {
    margin: 10px 0 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: 18px;
}

.module-card__text {
    margin: 6px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-tiny);
    line-height: 18px;
}

.module-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: 18px;
}

.module-card__video {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.module-card__video:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Same play marker as the chips. */
.module-card__play {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    background: #efeff1;
}

.module-card__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid var(--color-text);
    transform: translate(-35%, -50%);
}

/* Only needed for the sheet; hidden on desktop, where the card closes on mouse-out. */
.module-card__close {
    display: none;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.18);
    color: var(--color-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* Beside the chip and centred on it, wherever the grid has more than one column:
   the module itself stays visible. site.js flips the side when there is no room. */
.module-card {
    position: absolute;
    top: 50%;
    /* Closed, it rests inside its module: a card parked to the right would widen the page.
       site.js puts it on whichever side has room when it opens. */
    right: 0;
    transform: translateY(-50%);
}

.module-card--right {
    left: calc(100% + 14px);
    right: auto;
}

.module-card--flip {
    right: calc(100% + 14px);
    left: auto;
}

/* No room either side (narrow tablets, phones): the card opens under its module, growing
   from 0 to the height site.js measures. */
.module-card--below {
    position: static;
    width: 100%;
    max-width: none;
    height: 0;
    margin-top: 0;
    border-width: 0;
    border-radius: 10px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    overflow: hidden;
    transition: height 0.28s ease, margin-top 0.28s ease;
}

.has-module-card.is-card-open .module-card--below {
    height: var(--card-h, auto);
    margin-top: var(--space-3);
    border-width: 0.7px;
    transform: none;
}

.has-module-card.is-card-open .module-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
    transition-delay: 0s;
    pointer-events: auto;
}

/* ---------- Journey ----------
 * Desktop: the line artwork fills .journey__map; each step is a zero-size anchor placed at
 * its icon centre (--x / --y from home.php, % of the map), with the icon, label and hover
 * card positioned around it. Tablet/phone: the map becomes a list of cards.
 */

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

.journey__intro {
    text-align: center;
    padding: 100px var(--space-6) 0;
}

/* Longer title: wider than the default so it wraps onto two lines like the design. */
.journey__intro .section-intro__title {
    max-width: 700px;
}

.journey__map {
    --journey-icon: 56px;
    /* icon box size; labels are the same height */
    --journey-half: calc(var(--journey-icon) / 2);
    position: relative;
    aspect-ratio: 863 / 521;
    /* the map frame in the design */
}

/* The line artwork is cropped tightly to the lines, so it's placed inside the map where it
   sits in the design: from the first icon's right edge to the last icon's left edge, with its
   first horizontal line through the middle of the first icon. */
.journey__lines {
    position: absolute;
    top: 27.5%;
    left: 4.47%;
    width: 91.04%;
    height: auto;
}

.journey__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.journey-step {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 1;
    width: 0;
    height: 0;
}

.journey-step:hover,
.journey-step:focus-within {
    z-index: 5;
    /* its card goes over neighbouring steps */
}

.journey-step__icon {
    position: absolute;
    top: calc(-1 * var(--journey-half));
    left: calc(-1 * var(--journey-half));
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--journey-icon);
    height: var(--journey-icon);
    padding: 0;
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 2px 6px rgba(17, 17, 17, 0.06);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.journey-step__icon img {
    width: 28px;
    height: 28px;
}

.journey-step:hover .journey-step__icon,
.journey-step:focus-within .journey-step__icon {
    border-color: var(--color-brand);
    background: var(--color-brand);
}

/* Name box, attached above or below the icon, sharing its left (or right) edge. */
.journey-step__label {
    position: absolute;
    left: calc(-1 * var(--journey-half));
    display: flex;
    align-items: center;
    width: max-content;
    height: var(--journey-icon);
    white-space: nowrap;
    /* breaks only where the name has \n (see home.php) */
    padding: var(--space-2) var(--space-3);
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
    line-height: 1.25;
}

.journey-step--label-top .journey-step__label {
    bottom: var(--journey-half);
}

.journey-step--label-bottom .journey-step__label {
    top: var(--journey-half);
}

/* Feature card: hidden until the step is hovered or its icon is focused. */
.journey-step__details {
    position: absolute;
    top: var(--journey-half);
    left: calc(-1 * var(--journey-half));
    z-index: 2;
    width: 258px;
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}

.journey-step:hover .journey-step__details,
.journey-step:focus-within .journey-step__details {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.journey-step--align-end .journey-step__label,
.journey-step--align-end .journey-step__details {
    right: calc(-1 * var(--journey-half));
    left: auto;
}

/* Label below the icon: the card opens under the label instead of covering it. */
.journey-step--label-bottom .journey-step__details {
    top: calc(var(--journey-half) + var(--journey-icon));
}

.journey-step__details-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-border);
    color: var(--color-text);
}

/* Small white box around the icon in the card header. */
.journey-step__details-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0.7px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 6px;
}

.journey-step__features {
    margin: 0;
    padding: 0 var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--fs-tiny);
    line-height: var(--lh-snug);
    list-style: none;
}

.journey-step__features li {
    padding: 6px 0;
}

.journey-step__features li+li {
    border-top: 0.7px solid var(--color-border);
}

/* "Intelligence that powers every step": a box on a ruled (lined) strip. Row heights are
   multiples of the line spacing so the box edges land on the lines. */
.journey__platform-strip {
    --row: var(--ruled-gap);
}

.journey__platform {
    width: fit-content;
    max-width: calc(100% - 2 * var(--space-7));
    margin-left: var(--space-7);
    padding-bottom: calc(3 * var(--row));
    /* empty lined rows under the chips */
    border-inline: 0.7px solid var(--color-border);
}

.journey__platform-title {
    display: flex;
    align-items: center;
    height: calc(3 * var(--row));
    padding: 0 var(--space-4);
    border-block: 0.7px solid var(--color-border);
    /* top + bottom only */
    background: var(--color-surface);
}

.journey__platform-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    list-style: none;
}

.platform-chip {
    display: flex;
    align-items: center;
}

.platform-chip__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: calc(2 * var(--row));
    background: var(--color-brand-soft);
}

.platform-chip__label {
    padding: 0 var(--space-4);
}


/* ---------- Hiree365 banner ---------- */

.hiree-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
    min-height: 176px;
    padding: 59px;
    overflow: hidden;
    border-inline: 0.7px solid var(--color-border);
    background: #F1F5F9;
}

.hiree-banner__logo {
    padding: var(--space-5) 20px;
    background: var(--color-surface);
}

.hiree-banner__logo img {
    display: block;
    width: auto;
    height: 20px;
}

.hiree-banner__description {
    max-width: 524px;
    margin-top: var(--space-2);
    line-height: 21px;
    font-size: var(--fs-small);
}


/* Mosaic image, full banner height, just right of the text (as in the design). */
.hiree-banner__decoration {
    position: absolute;
    top: 0;
    left: 58%;
    width: auto;
    height: 100%;
}

.hiree-banner__button {
    position: relative;
}


/* ---------- Proven at scale ----------
 * A lined grid: narrow empty gutters left/right, text column, visual column.
 * The stats area is split into a narrow column + rows (--proof-col / --proof-row); its lines
 * are background lines, and the four cards sit at the design's staggered positions.
 */

.proof {
    --proof-gutter-start: 56px;
    --proof-gutter-end: 48px;
    --proof-col: 82px;
    /* narrow column; same as a row, as in the design */
    --proof-row: 82px;
    --proof-line: linear-gradient(var(--color-border), var(--color-border));
    display: grid;
    grid-template-columns: var(--proof-gutter-start) minmax(0, 1fr) minmax(0, 1fr) var(--proof-gutter-end);
    grid-template-rows: auto auto var(--space-6);
    border: 0.7px solid var(--color-border);
    border-top: 0;
    /* the lined area above ends in a line */
}

.proof__gutter {
    grid-row: 1 / -1;
}

.proof__gutter--start {
    grid-column: 1;
    border-right: 0.7px solid var(--color-border);
    /* continues the line under the testimonial (above the bottom strip) */
    background: var(--proof-line) 0 calc(100% - var(--space-6)) / 100% 1px no-repeat;
}

.proof__gutter--end {
    grid-column: 4;
    border-left: 0.7px solid var(--color-border);
}

.proof__intro {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* little right padding: the title runs close to the line, as in the design */
    padding: var(--space-6) var(--space-2) var(--space-6) var(--space-5);
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

/* Stats: 3 rows; row 1 empty, cards in rows 2-3, small mosaic at the start of row 3. */
.proof__stats {
    grid-column: 3;
    grid-row: 1;
    position: relative;
    /* +1px: the bottom border sits below the last row, instead of under the row-3 cards */
    height: calc(3 * var(--proof-row) + 1px);
    border-bottom: 0.7px solid var(--color-border);
    background:
        var(--proof-line) 0 var(--proof-row) / 100% 1px no-repeat,
        var(--proof-line) 0 calc(2 * var(--proof-row)) / 100% 1px no-repeat,
        var(--proof-line) var(--proof-col) var(--proof-row) / 1px 100% no-repeat;
}

.proof__stats-mosaic {
    position: absolute;
    top: calc(2 * var(--proof-row) + 1px);
    left: 0;
    width: auto;
    height: calc(var(--proof-row) - 1px);
}

.proof__stats-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Card position: --l / --w are fractions of the area right of the narrow column, --r the row. */
.proof-stat {
    position: absolute;
    top: calc(var(--r) * var(--proof-row) + 1px);
    left: calc(var(--proof-col) + 1px + (100% - var(--proof-col)) * var(--l));
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc((100% - var(--proof-col)) * var(--w));
    height: calc(var(--proof-row) - 1px);
    padding: 0 var(--space-4);
    background: #FAFAFA;
}

.proof-stat:nth-child(1) {
    --r: 1;
    --l: 0;
    --w: 0.378;
}

.proof-stat:nth-child(2) {
    --r: 1;
    --l: 0.446;
    --w: 0.446;
}

.proof-stat:nth-child(3) {
    --r: 2;
    --l: 0.249;
    --w: 0.363;
}

.proof-stat:nth-child(4) {
    --r: 2;
    --l: 0.643;
    --w: 0.333;
}

/* Testimonial */
.proof__testimonial {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    margin: 0;
    padding: var(--space-8) var(--space-7) var(--space-7);
    border-right: 0.7px solid var(--color-border);
    border-bottom: 0.7px solid var(--color-border);
}

.proof__quote {
    position: relative;
    max-width: 452px;
    margin: 0;
}

.proof__quote p {
    margin: 0;
}

/* Bold curly quotes; the opening one hangs in the margin like the design. */
.proof__quote p::before,
.proof__quote p::after {
    font-weight: var(--fw-bold);
    font-size: 1.4em;
    line-height: 0;
}

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

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

.proof__author {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-5);
}

.proof__logo {
    position: absolute;
    right: var(--space-7);
    bottom: var(--space-6);
    width: 38px;
    height: auto;
}

.proof__strip {
    grid-column: 2;
    grid-row: 3;
    border-right: 0.7px solid var(--color-border);
}

/* Big mosaic: a narrow column + one row of lines. */
.proof__visual {
    grid-column: 3;
    grid-row: 2 / 4;
    position: relative;
    min-height: calc(2 * var(--proof-row));
    background:
        var(--proof-line) var(--proof-col) var(--proof-row) / 100% 1px no-repeat,
        var(--proof-line) var(--proof-col) 0 / 1px 100% no-repeat;
}

/* Image wrapper: fills from the row line down to the section's bottom edge (as in the
   design); width follows from the image's proportions. */
.proof__visual-art {
    position: absolute;
    top: calc(var(--proof-row) + 1px);
    bottom: 0;
    left: calc(var(--proof-col) + 1px);
    z-index: 0;
    max-width: calc(100% - var(--proof-col) - 1px);
}

.proof__visual-art img {
    display: block;
    width: auto;
    height: 100%;
}

/* The line under the testimonial carries on through this area and stops where the
   image's big square starts (just over half way across the image). It sits behind the
   image, so it only shows through the image's empty parts. */
.proof__visual-art::before {
    content: "";
    position: absolute;
    right: 49.7%;
    bottom: var(--space-6);
    left: calc(-1 * var(--proof-col) - 1px);
    z-index: -1;
    height: 1px;
    background: var(--color-border);
}







/* ---------- For all institutions ----------
 * Background image (set inline from home.php) with four white cards; each card starts
 * --institutions-step higher than the one before it (a staircase, as in the design).
 */

.institutions {
    --institutions-step: 36px;
    padding: var(--space-9) 0 72px;
    border-inline: 0.7px solid var(--color-border);
    background: var(--color-surface-muted) center / cover no-repeat;
}

.institutions__intro {
    padding: 0 var(--space-8);
}

.institutions__title {
    max-width: 650px;
}

.institutions__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Card 1 is lowest, card 4 highest. */
.institution-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
}

.institution-card:nth-child(1) {
    margin-top: calc(3 * var(--institutions-step));
}

.institution-card:nth-child(2) {
    margin-top: calc(2 * var(--institutions-step));
}

.institution-card:nth-child(3) {
    margin-top: var(--institutions-step);
}

.institution-card__tag {
    align-self: flex-start;
    padding: 10px;
    background: var(--color-brand-soft);
}

.institution-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* text width and bottom space as in the design (keeps the card bottoms stepped) */
    padding: 18px var(--space-7) calc(var(--space-6) + var(--space-1)) 21px;
}

/* Line heights from the design; the general tokens are taller and made the cards grow. */
.institution-card__title {
    line-height: 26px;
}

.institution-card__description {
    margin-top: var(--space-5);
    color: var(--color-text-desc);
    font-size: var(--fs-small);
    line-height: 22px;
}

.institution-card__button {
    margin-top: var(--space-7);
    padding: var(--space-2) 10px;
    /* 8px 10px, only for these buttons */
    max-width: 100%;
    /* long labels wrap inside the card instead of spilling out */
    white-space: normal;
    text-align: left;
}





/* ---------- Ready for take off ----------
 * Lined strips (.ruled) around a logo row and a CTA row. Each strip's lines are shifted
 * up 1px so its last line is the top edge of the row below (no double lines).
 */

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

.takeoff__rule {
    height: var(--ruled-gap);
    background-position: 0 -1px;
}

.takeoff__rule--2 {
    height: calc(2 * var(--ruled-gap));
}

.takeoff__logos {
    padding: calc(var(--space-5) + var(--space-1)) var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
}

/* Same logo list as the "Trusted by" strip, without its top margin. */
.takeoff__logos .logo-strip__logos {
    gap: var(--space-5);
    margin: 0;
}

.takeoff__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-8);
    border-bottom: 0.7px solid var(--color-border);
}

.takeoff__description {
    margin-top: var(--space-1);
    color: var(--color-text-desc);
}



/* ---------- Enterprise Trust ---------- */

.trust {
    padding: var(--space-6);
    border: 0.7px solid var(--color-border);
}

.trust__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    min-height: 500px;
    padding: 43px 89px 43px 49px;
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.trust__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    max-width: 580px;
}

/* Headings on the dark panel */
.trust__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-success);
    font-size: 24px;
    /* eyebrow, not a .heading-3 */
    line-height: 36px;
}

.trust__eyebrow .icon {
    width: 26px;
    height: 26px;
}

.trust__title {
    margin-top: var(--space-9);
    color: var(--color-dark-text);
}

.trust__description {
    margin-top: var(--space-5);
    color: #FFFFFF;
    max-width: 450px;
}

.trust__button {
    margin-top: var(--space-6);
    border: 0;
}

/* Pushed to the bottom of the panel, as in the design. */
.trust__note {
    margin-top: auto;
    padding-top: var(--space-9);
    color: rgba(255, 255, 255, 0.8);
}

.trust__note-link {
    color: color-mix(in srgb, var(--color-brand) 70%, #ffffff);
    text-decoration: none;
}

.trust__note-link:hover {
    text-decoration: underline;
}

.trust__badges {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: var(--space-6) var(--space-9);
    margin: 0;
    padding: 0;
    list-style: none;
}

.trust__badges img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
}





/* ---------- Ratings ----------
 * Intro uses the shared .section-intro; award cells sit in a row with lines between.
 */

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

.ratings__intro {
    padding: 70px var(--space-6) 92px;
}

.ratings__title {
    max-width: 640px;
    /* two lines like the design: "...people who / run institutions" */
    margin-top: var(--space-2);
}

/* Award row: shared element award_strip (styles in site.css); here it also needs the
   line between it and the intro. */
.ratings .award-strip__viewport {
    border-top: 0.7px solid var(--color-border);
}

/* ---------- Customer stories ----------
 * Intro uses the shared .section-intro; four portrait cards with photo, logo and a
 * translucent caption band.
 */

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

.stories__title {
    max-width: 630px;
    /* breaks like the design: "...institutions like / yours to drive..." */
    margin-top: var(--space-2);
}

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

/* Desktop: a flex row. The hovered/focused card grows to --story-grow times the width of
   the others (463px vs 190px in the design); the row height stays fixed. */
.stories__people {
    --story-grow: 2.44;
    --story-gap: var(--space-5);
    container-type: inline-size;
    display: flex;
    gap: var(--story-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    /* height of a card at its normal (1/4) width in the design's 276:408 portrait shape */
    height: calc((100cqw - 3 * var(--story-gap)) / 4 * 408 / 276);
    background: var(--color-surface-muted);
    --story-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* smooth in and out */
    --story-duration: 0.8s;
    transition: flex-grow var(--story-duration) var(--story-ease);
}

/* .is-active is set by site.js on hover (it stays on while crossing the gaps);
   :focus-within covers keyboard and tap. */
.story-card.is-active,
.story-card:focus-within {
    flex-grow: var(--story-grow);
}

.story-card:focus-visible {
    outline-offset: -2px;
}

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

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

/* Cards with a wide photo use only that photo: framed and zoomed in (--photo-x, --zoom,
   --zoom-origin from home.php) when narrow, it zooms out to 1 as the card widens, so the
   picture changes continuously instead of swapping images. The wrapper handles mirroring. */
.story-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

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

.story-card__media .story-card__photo {
    object-position: var(--photo-x, 50%) 50%;
    transform: scale(var(--zoom, 1));
    transform-origin: var(--zoom-origin, 50% 50%);
    transition: object-position var(--story-duration) var(--story-ease);
}

/* Expanded: same zoom (face stays the same size, as in the design); the wider card
   reveals more of the room beside the person. */
.story-card.is-active .story-card__media .story-card__photo,
.story-card:focus-within .story-card__media .story-card__photo {
    object-position: var(--photo-x-wide, var(--photo-x, 50%)) 50%;
}

/* Quote: collapsed until the card expands. It's laid out at the expanded card's width,
   so it doesn't re-wrap while the card animates. */
/* Height animates from 0 to the quote's height (set by site.js as --quote-h). */
.story-card__quote-wrap {
    height: 0;
    overflow: hidden;
    transition: height var(--story-duration) var(--story-ease);
}

.story-card.is-active .story-card__quote-wrap,
.story-card:focus-within .story-card__quote-wrap {
    height: var(--quote-h, auto);
}

.story-card__quote {
    min-height: 0;
    width: min(460px, calc((100cqw - 3 * var(--story-gap)) * var(--story-grow) / (3 + var(--story-grow)) - 2 * var(--space-4)));
    margin: 0;
    overflow: hidden;
    color: var(--color-dark-text);
    font-size: var(--fs-lead);
    /* slightly larger than body text, as in the design */
    opacity: 0;
    transition: opacity 0.25s var(--story-ease);
}

.story-card__quote p {
    margin: 0 0 var(--space-3);
}

.story-card.is-active .story-card__quote,
.story-card:focus-within .story-card__quote {
    opacity: 1;
    transition: opacity 0.5s var(--story-ease) 0.35s;
}

.story-card__logo {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    width: auto;
    max-width: 60%;
    height: var(--logo-h, 20px);
    /* per-logo 'height' from home.php, else 20px */
    object-fit: contain;
    object-position: left center;
}

.story-card__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--space-4);
    border-top: 0.7px solid rgba(255, 255, 255, 0.18);
    /* From the design: #191919 gradient 19% -> 100%, layer opacity 92% (0.19 x 0.92 = 0.175),
       with a light background blur, so the photo still shows through at the top. */
    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);
}

/* Fixed space for name + up to 3 lines of role: the text re-wraps as the card changes
   width, but the caption band keeps its height instead of jumping a line at a time. */
.story-card__person {
    --story-line: 20px;
    /* line height of the name and role, as in the design */
    /* starts from the normal height, so any reserve grows/shrinks gradually from there */
    min-height: var(--person-base, 0px);
    /* releasing the room: wait until the card has widened and the role has unwrapped */
    transition: min-height 0.3s var(--story-ease) 0.55s;
}

/* The card opening (or just closed) changes its reserve at the same pace as the quote,
   so its caption band moves in one direction only. */
.story-card.is-active .story-card__person,
.story-card.is-closing .story-card__person {
    /* !important: must beat the quick timing of the (more specific) narrowed-card rule */
    transition: min-height 0.6s var(--story-ease) !important;
}

/* Role keeps the design's width, so it stays on 2 lines in the normal and expanded card. */
.story-card__role {
    max-width: 272px;
}

/* A card squeezed by an expanded neighbour wraps its role onto 3 lines: reserve that room
   smoothly instead of letting the caption jump a line at a time. */
.stories__people:has(.is-active, :focus-within) .story-card:not(.is-active):not(:focus-within) .story-card__person {
    /* only the room this card really needs when narrowed (measured by site.js) */
    min-height: var(--person-squeezed, 0px);
    /* reserving the room: quickly, before the narrowing card re-wraps the role */
    transition: min-height 0.2s var(--story-ease);
}

.story-card__person p {
    font-size: var(--fs-caption);
    line-height: var(--story-line);
}

.story-card__role {
    margin-top: var(--space-1);
    color: rgba(255, 255, 255, 0.85);
}







/* ---------- Resource toolkit ----------
 * Lined strip + intro with a mosaic on the right, then two columns of resource groups.
 */

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

.resources__rule {
    height: calc(5 * var(--ruled-gap));
    /* 4 rows: with the intro's top border, 5 lines as in the design */
    background-position: 0 -1px;
}

.resources__intro {
    position: relative;
    padding: 45px 59px;
}

.resources__text {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

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

.resources__button {
    margin-top: var(--space-5);
}

/* Mosaic sits at the bottom right and rises into the lined strip above (as in the design). */
.resources__mosaic {
    position: absolute;
    right: 12%;
    bottom: 0;
    width: auto;
    /* rises 3 rows into the lined strip, as in the design */
    height: calc(100% + 3 * var(--ruled-gap));
}

.resources__columns {
    display: grid;
    /* Podcasts + Playbooks 60%, Blogs + Templates 40% */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

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

/* Category header: icon, label, arrow. */
.resource-cat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-block: 0.7px solid var(--color-border);
    background: #FAFAFA;
    color: var(--color-text);
    text-decoration: none;
}

/* Playbooks / Templates: the row above already ends in a line, so no top border here. */
.resource-cat:not(:first-child) {
    border-top: 0;
}

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

.resource-cat .icon:last-child {
    color: var(--color-text);
}

/* Category header hover: label underlined (same style as .arrow-link); the arrow stays put. */
.resource-cat:hover .text-caption,
.resource-cat:focus-visible .text-caption {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}



.resources__podcasts,
.resources__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.resources__podcasts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-3);
    border-bottom: 0.7px solid var(--color-border);
}

.resource-podcast {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
}

.resource-podcast__image {
    display: block;
    width: 100%;
    aspect-ratio: 202 / 114;
    margin-bottom: var(--space-3);
    object-fit: cover;
}

/* Item titles stay plain on hover; only the category headers get an underline. */

/* Left column (Podcasts, Playbooks): a narrow empty gutter with a vertical line, as in the
   design; the row dividers start at that line. */
.resources__col:first-child .resources__podcasts,
.resources__col:first-child .resources__list {
    margin-left: var(--space-7);
    border-left: 0.7px solid var(--color-border);
}

.resources__col:first-child .resources__podcasts {
    padding-left: var(--space-3);
}

.resources__col:first-child .resource-row {
    padding-left: var(--space-3);
}

/* Lined strip with a small mosaic between Podcasts and Playbooks. */
.resources__divider {
    position: relative;
    height: calc(4 * var(--ruled-gap));
    /* 4 lined rows; the mosaic fills the full height */
    background-position: 0 -1px;
}

.resources__divider img {
    position: absolute;
    left: 39%;
    bottom: 0;
    width: auto;
    height: 100%;
}

/* A row in a list (blog, template, playbook). */
.resource-row {
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    border-bottom: 0.7px solid var(--color-border);
}

.resource-row p {
    margin: 0;
}

.resource-row__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* Text sizes inside the toolkit, from the design: titles 15px, descriptions/dates 13px. */
.resource-row .fw-medium,
.resource-podcast__title {
    font-size: var(--fs-ui);
    line-height: 22px;
}

.resource-row .resource-row__description,
.resource-row .resource-row__date {
    font-size: var(--fs-caption);
    line-height: 20px;
}

.resource-row .resource-row__description {
    margin-top: var(--space-1);
}

.resource-row__date {
    margin-top: 6px;
}

.resource-row .btn--icon {
    margin-top: var(--space-3);
}

/* Playbook row: title + download on the left, cover image on the right. */
/* Playbook row: title + download on the left; cover on the right, flush with the row's
   bottom edge (as in the design). */
.resources__col:first-child .resource-row--playbook {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 176px;
    gap: var(--space-6);
    align-items: end;
    padding: var(--space-4) var(--space-7) 0 var(--space-3);
}

.resource-row--playbook .fw-medium {
    max-width: 380px;
    /* wraps like the design */
}

/* Download button sits right under the title (as in the design), not at the row bottom. */
.resource-row--playbook .resource-row__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    gap: var(--space-5);
    padding-bottom: var(--space-4);
}

.resource-row--playbook .btn--icon {
    margin-top: 0;
}

/* Cover starts 16px below the row top (the row's padding) and fills down to the row's
   bottom edge, however tall the row is; extra height crops the image, as in the design. */
.resource-row__image {
    display: block;
    align-self: stretch;
    width: 176px;
    height: auto;
    min-height: 118px;
    object-fit: cover;
    object-position: top;
}

/* Both columns reach the section's bottom edge: the left column's last list (with its gutter
   line) stretches to fill, and the last rows use the section's bottom border. */
.resources__col {
    display: flex;
    flex-direction: column;
}

.resources__col>.resources__list:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Any extra height is shared equally by the rows (covers fill each row, cropped), so the
   rows stay the same height and there's no empty space under the last one. */
.resources__col>.resources__list:last-child .resource-row {
    flex: 1 1 0;
}

.resources__col>.resources__list:last-child .resource-row:last-child {
    border-bottom: 0;
}

/* ==========================================================================
   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 (max-width: 1400px) {
    /* The horizontal map gets a touch more compact so labels never crowd each other
       (below 1200px the map turns vertical and sets its own sizes). */
    .journey__map {
        --journey-icon: 50px;
    }

    .journey-step__icon img {
        width: 26px;
        height: 26px;
    }

    .journey-step__label {
        padding: var(--space-2) 10px;
        font-size: var(--fs-ui);
    }

    /* Below full container width the staggered cards don't fit, so they become a 2 x 2 grid. */
    .proof__stats {
        height: auto;
        padding: var(--space-5);
        background: none;
    }

    .proof__stats-mosaic {
        display: none;
    }

    .proof__stats-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .proof-stat {
        position: static;
        width: auto;
        height: auto;
        padding: var(--space-4);
    }
}

@media (max-width: 1200px) {
    .hero__content {
        max-width: 700px;
    }

    /* The mosaic would sit over the description once the banner is narrower. */
    .hiree-banner__decoration {
        display: none;
    }

    /* Below 1200px: the map turns vertical. The whole map is transposed along its diagonal
       (x <-> y), so the same line image and the same step positions are reused: the path runs
       top to bottom and every icon still sits on its line. Labels sit beside the icons, joined
       to them and the same height ("top" labels on the left, "bottom" labels on the right). */
    .journey__map {
        --journey-icon: 56px;
        --label-line: 20px;
        container-type: inline-size;
        width: 100%;
        max-width: 680px;
        aspect-ratio: 521 / 863;
        /* the design frame, turned on its side */
        margin: var(--space-8) auto;
    }

    /* Transposed line image: left/top/width are the horizontal version's top/left/width. */
    .journey__lines {
        top: 4.47%;
        left: 27.5%;
        width: calc(91.04% * 863 / 521);
        max-width: none;
        /* wider than the box before it's turned; the global img cap would shrink it */
        transform-origin: 0 0;
        transform: matrix(0, 1, 1, 0, 0, 0);
    }

    .journey-step {
        left: var(--y);
        top: var(--x);
    }

    /* Label: joined to the icon, at least as tall as it, text centred; it grows evenly up
       and down only if the name needs a third line. (Selectors repeat the modifier classes
       so they beat the desktop top/bottom placement.) */
    .journey-step .journey-step__label,
    .journey-step.journey-step--label-top .journey-step__label,
    .journey-step.journey-step--label-bottom .journey-step__label {
        top: 50%;
        bottom: auto;
        height: auto;
        min-height: var(--journey-icon);
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-body);
        line-height: var(--label-line);
        white-space: normal;
        transform: translateY(-50%);
    }

    /* Names wrap to fit the room beside the icon (desktop line breaks don't apply). */
    .journey-step__label br {
        display: none;
    }

    .journey-step.journey-step--label-top .journey-step__label {
        right: calc(var(--journey-half) - 1px);
        /* shares the icon's border */
        left: auto;
        max-width: calc(var(--yn) * 1cqw - var(--journey-half) - 2px);
    }

    .journey-step.journey-step--label-bottom .journey-step__label {
        left: calc(var(--journey-half) - 1px);
        right: auto;
        max-width: calc((100 - var(--yn)) * 1cqw - var(--journey-half) - 2px);
    }

    /* Hover/tap card: under the icon, centred in the map. */
    .journey-step .journey-step__details,
    .journey-step.journey-step--align-end .journey-step__details,
    .journey-step.journey-step--label-bottom .journey-step__details {
        top: calc(var(--journey-half) + var(--space-2));
        right: auto;
        left: calc(50cqw - var(--yn) * 1cqw - min(46cqw, 160px));
        width: min(92cqw, 320px);
    }

    .journey__platform {
        max-width: calc(100% - 2 * var(--space-6));
        margin: 0 var(--space-6);
    }

    .module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
    }
}

@media (max-width: 992px) {
    /* Image moves below the text. */
    .hero__media {
        position: static;
        width: 100%;
        padding-inline: var(--space-8);
    }

    .hero__media img {
        display: none;
    }

    /* Tablet & phone: no room to slide, so the text sits above the screenshots. */
    .showcase {
        padding: var(--space-8) var(--space-6);
    }

    .showcase__stage {
        flex-wrap: wrap;
        align-items: flex-end;
        row-gap: var(--space-7);
        column-gap: 3%;
    }

    .showcase__content {
        position: static;
        order: -1;
        flex: 0 0 100%;
        width: auto;
        max-width: 480px;
        margin-inline: auto;
        text-align: center;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .showcase__links {
        justify-content: center;
    }

    .showcase__desktop {
        flex-basis: 70%;
        width: 70%;
    }

    .showcase__mobile {
        flex-basis: 27%;
        width: 27%;
        margin-left: 0;
    }

    /* No slide-apart animation here: the screenshots stay put on hover, keyboard focus or
       tap (these selectors match the reveal rules' weight, so they win). */
    .showcase .showcase__desktop,
    .showcase .showcase__mobile,
    .showcase:hover .showcase__desktop,
    .showcase:hover .showcase__mobile,
    .showcase:focus-within .showcase__desktop,
    .showcase:focus-within .showcase__mobile,
    .showcase.is-revealed .showcase__desktop,
    .showcase.is-revealed .showcase__mobile {
        transform: none;
        transition: none;
    }

    .showcase .showcase__content {
        transition: none;
    }

    .segments__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Tablet & phone: one column. */
    .proof {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .proof__gutter,
    .proof__strip {
        display: none;
    }

    .proof__intro,
    .proof__stats,
    .proof__testimonial,
    .proof__visual {
        grid-column: 1;
        grid-row: auto;
        border-right: 0;
    }

    .proof__visual {
        min-height: 0;
        background: none;
    }

    .proof__visual-art {
        position: static;
        display: block;
        max-width: none;
    }

    .proof__visual-art::before {
        display: none;
    }

    .proof__visual-art img {
        width: 100%;
        height: auto;
        display: none;
    }

    /* Tablet: 2 x 2, no staircase. Phone: one column. */
    .institutions {
        padding: var(--space-8) var(--space-6);
    }

    .institutions__intro {
        padding: 0;
        margin-bottom: var(--space-6);
    }

    .institutions__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: var(--space-4);
    }

    .institution-card:nth-child(n) {
        margin-top: 0;
    }

    /* Cards in a row are the same height, so the buttons line up at the bottom
       however many lines the title and description take. */
    .institution-card__body {
        flex: 1;
    }

    /* Room for the longest title (3 lines), so every description starts on the
       same line across the row. */
    .institution-card__title {
        min-height: calc(3 * 26px);
    }

    .institution-card__description {
        padding-bottom: var(--space-7);
        /* keeps the design's gap above the button */
    }

    .platform-chip__label {
        padding: 0 var(--space-2);
    }

    .institution-card__button {
        margin-top: auto;
    }

    .trust__panel {
        /* grid-template-columns: minmax(0, 1fr); */
        padding: var(--space-7) var(--space-6);
    }

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

    .trust__note {
        padding-top: var(--space-6);
    }

    .trust__badges {
        grid-template-columns: repeat(3, 96px);
        gap: var(--space-5) var(--space-7);
    }

    .trust__badges img {
        width: 96px;
        height: 96px;
    }

    /* Tablet & phone: no room to expand, so plain portrait cards (2 columns, then 1). */
    .stories__people {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-card {
        height: auto;
        aspect-ratio: 276 / 408;
    }

    .story-card__quote-wrap {
        display: none;
    }

    /* The caption hugs its text here: the reserved room is for the desktop cards, which
       re-wrap the role as they expand. */
    .story-card__person,
    .stories__people:has(.is-active, :focus-within) .story-card:not(.is-active):not(:focus-within) .story-card__person {
        min-height: 0;
        transition: none;
    }

    /* Nothing expands on tap, so tapping a card must not shift its photo either. */
    .story-card.is-active .story-card__media .story-card__photo,
    .story-card:focus-within .story-card__media .story-card__photo {
        object-position: var(--photo-x, 50%) 50%;
    }

    .resources__columns {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .resources__mosaic {
        display: none;
    }
}

@media (max-width: 768px) {
    .institution-card__title {
        min-height: 0;
    }

    .hero-section {
        padding-top: var(--space-5);
    }

    .hero__content {
        padding: var(--space-5) var(--space-5) var(--space-6);
    }

    .hero__media {
        padding-inline: var(--space-5);
    }

    .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-4);
        padding: var(--space-6) var(--space-5);
    }

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

    .showcase__desktop,
    .showcase__mobile {
        border-radius: 8px;
    }

    .segments__decoration {
        display: none;
    }

    /* Large phones / small tablets. */
    .journey__map {
        --journey-icon: 44px;
        --label-line: 18px;
        margin: var(--space-6) auto;
    }

    .journey-step__icon img {
        width: 24px;
        height: 24px;
    }

    .journey-step .journey-step__label,
    .journey-step.journey-step--label-top .journey-step__label,
    .journey-step.journey-step--label-bottom .journey-step__label {
        padding: var(--space-1) var(--space-2);
        font-size: var(--fs-caption);
    }

    .journey__platform {
        max-width: calc(100% - 2 * var(--space-4));
        margin: 0 var(--space-4);
    }

    .trust__panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .platform-chip {
        flex: 1 1 50%;
    }

    .hiree-banner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: var(--space-5);
        padding: var(--space-6) var(--space-5);
    }

    .proof__intro {
        padding: var(--space-6) var(--space-5);
    }

    .proof__testimonial {
        padding: var(--space-6) var(--space-5) var(--space-8) var(--space-6);
    }

    .proof__logo {
        display: none;
    }

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

    .institutions__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .takeoff__cta {
        padding: var(--space-5);
    }

    .trust {
        padding: var(--space-4);
    }

    .trust__badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .trust__badges img {
        width: 100%;
        height: auto;
    }

    /* Phones: the logos scroll in one line (site.js), running edge to edge. */
    .takeoff__logos {
        padding-inline: 0;
    }

    /* No title above these logos: drop the top margin the "Trusted by" strip uses here, so
    the row sits centred in its box. */
    .takeoff__logos .logo-strip__viewport {
        margin-top: 0;
    }

    .takeoff__logos .logo-strip__logos {
        gap: var(--space-7);
    }
}

@media (max-width: 559.98px) {
    .module-card {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 0;
        border-radius: 10px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        height: 0;
        border-width: 0;
        overflow: hidden;
        transition: height 0.28s ease, margin-top 0.28s ease;
    }

    .has-module-card.is-card-open .module-card {
        height: var(--card-h, auto);
        margin-top: var(--space-3);
        border-width: 0.7px;
        /* not centred on the chip here: the card sits in the flow, under its module */
        transform: none;
    }

    /* Closed again by tapping the same module, so no close button is needed. */
    .module-card__close {
        display: none;
    }

    .module-card__inner {
        padding: 14px;
    }

    .module-card__title {
        font-size: var(--fs-ui);
        line-height: 22px;
    }

    .module-card__text {
        font-size: var(--fs-caption);
        line-height: 20px;
    }

    .module-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .segments__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .stories__people {
        grid-template-columns: minmax(0, 1fr);
    }

    .journey__intro {
        padding: 50px 10px 0;
    }

    /* Phones: playbook rows stack - title (full width) and download button, then the cover
       full width below, shown whole (no cropping). */
    .resources__col:first-child .resource-row--playbook {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: var(--space-4);
    }

    .resource-row--playbook .fw-medium {
        max-width: none;
    }

    .resource-row--playbook .resource-row__body {
        gap: var(--space-3);
    }

    .resource-row__image {
        width: 100%;
        min-height: 0;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .resources__podcasts {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Resource toolkit on phones: normal page padding instead of the desktop insets, and no
       empty side column in the left column, so text and covers use the full width. All rows
       and headers share the same 16px sides, so everything lines up. */
    .resources__rule {
        height: calc(3 * var(--ruled-gap));
    }

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

    .resources__col:first-child .resources__podcasts,
    .resources__col:first-child .resources__list {
        margin-left: 0;
        border-left: 0;
    }

    .resources__podcasts,
    .resources__col:first-child .resources__podcasts {
        gap: var(--space-6);
        padding: var(--space-4);
    }

    .resource-cat {
        padding-inline: var(--space-4);
    }

    .resource-row,
    .resources__col:first-child .resource-row,
    .resources__col:first-child .resource-row--playbook {
        padding-left: var(--space-4);
    }
}

@media (max-width: 479.98px) {
    /* Phones. */
    .journey__map {
        --journey-icon: 38px;
        --label-line: 16px;
    }

    .journey-step__icon img {
        width: 20px;
        height: 20px;
    }

    .journey-step .journey-step__label,
    .journey-step.journey-step--label-top .journey-step__label,
    .journey-step.journey-step--label-bottom .journey-step__label {
        padding: var(--space-1) 6px;
        font-size: var(--fs-tiny);
        hyphens: auto;
    }

    .stories__people:has(.is-active, :focus-within) .story-card:not(.is-active):not(:focus-within) .story-card__person {
        min-height: 0;
    }
}

@media (max-width: 379.98px) {
    /* Smallest phones. */
    .journey-step .journey-step__label,
    .journey-step.journey-step--label-top .journey-step__label,
    .journey-step.journey-step--label-bottom .journey-step__label {
        padding-inline: var(--space-1);
        font-size: var(--fs-label);
        overflow-wrap: break-word;
        /* safety for any long name */
    }
}

@media (prefers-reduced-motion: reduce) {
    .showcase__desktop,
    .showcase__mobile,
    .showcase__content {
        transition: none;
    }

    .journey-step__icon,
    .journey-step__details {
        transition: none;
    }

    .story-card,
    .story-card__media .story-card__photo,
    .story-card__quote-wrap,
    .story-card__quote {
        transition: none;
    }

    .module-card {
        transition: none;
    }
}