/* ============================================================================
   SENTURI — MARKETING HOMEPAGE
   Loaded after style.css. Everything here is namespaced `hm-` (homepage) or
   scoped to `.hm-home` so it cannot collide with the platform/features page.

   Direction: calm, cinematic, expensive. The page alternates deep dark
   (hero / the problem / trust / close) against clean light (the relief) so the
   emotional arc is carried by the light level, not by decoration.

   The signature is a timestamped log, used twice in opposition:
   Senturi's silent night in the hero, the owner's loud day in the problem.
   ========================================================================= */

.hm-home {
    /* --- Ink: deeper than the system --dark-blue, for cinematic depth --- */
    --hm-ink: #0b111b;
    --hm-ink-2: #111a28;
    --hm-ink-3: #182334;
    --hm-hairline-dark: rgba(255, 255, 255, 0.09);

    /* --- Paper --- */
    --hm-paper: #ffffff;
    --hm-paper-2: #f6f8fa;
    --hm-hairline-light: rgba(15, 24, 36, 0.10);

    /* --- Accent: the system green, spent sparingly --- */
    --hm-accent: #16b690;
    --hm-accent-lt: #1ed9ac;
    /* White text needs a deeper green: white on --hm-accent is only 2.6:1.
       These clear WCAG AA (4.58:1 and 5.89:1). */
    --hm-accent-deep: #108569;
    --hm-accent-deep-hover: #0d7259;

    /* --- Text --- */
    --hm-on-dark: #eef3f8;
    --hm-on-dark-soft: #b8c6d6;
    --hm-on-dark-mute: #7d8fa4;
    --hm-on-light: #0f1824;
    --hm-on-light-mute: #55677d;

    /* --- Type --- */
    --hm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --hm-display: clamp(2.15rem, 6.5vw, 5.25rem);
    --hm-h2: clamp(1.95rem, 4.1vw, 3.4rem);
    --hm-h3: clamp(1.3rem, 2.1vw, 1.85rem);
    --hm-lead: clamp(1.0625rem, 1.25vw, 1.25rem);

    /* --- Layout --- */
    --hm-max: 1280px;
    --hm-gutter: clamp(1.25rem, 5vw, 3.5rem);
    --hm-band: clamp(5.5rem, 10.5vw, 10.5rem);

    /* --- Motion --- */
    --hm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hm-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    background: var(--hm-ink);
    color: var(--hm-on-light);
}

/* ---------------------------------------------------------------- shell -- */

.hm-wrap {
    width: 100%;
    max-width: var(--hm-max);
    margin-inline: auto;
    padding-inline: var(--hm-gutter);
}

/* main.js appends an absolutely-positioned sentinel to each tracked section
   for scroll analytics — these need to be its containing block. */
.hm-hero,
.hm-problem,
.hm-ans,
.hm-diff,
.hm-work,
.hm-loop,
.hm-help,
.hm-steps,
.hm-for,
.hm-trust,
.hm-close {
    position: relative;
}

.hm-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--hm-accent);
    color: #04120d;
    font-weight: 700;
    border-radius: 0 0 0.5rem 0;
}

.hm-skip:focus {
    left: 0;
}

.hm-home :focus-visible {
    outline: 2px solid var(--hm-accent-lt);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ------------------------------------------------------- shared type -- */

.hm-eyebrow {
    font-family: var(--hm-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hm-accent);
    margin: 0 0 1.5rem;
}

.hm-h2 {
    font-family: var(--font-display);
    font-size: var(--hm-h2);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.032em;
    color: var(--hm-on-light);
    margin: 0;
    text-wrap: balance;
}

.hm-lead {
    font-size: var(--hm-lead);
    line-height: 1.6;
    color: var(--hm-on-light-mute);
    margin: 1.25rem 0 0;
}

/* ---------------------------------------------------------------- buttons -- */

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9375rem 1.625rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: 0.5rem;
    white-space: nowrap;
    transition: transform 0.35s var(--hm-ease), background-color 0.35s var(--hm-ease),
        border-color 0.35s var(--hm-ease), color 0.35s var(--hm-ease), box-shadow 0.35s var(--hm-ease);
}

.hm-btn svg {
    width: 1.0625rem;
    height: 1.0625rem;
    transition: transform 0.4s var(--hm-ease);
}

.hm-btn--primary {
    background: var(--hm-accent-deep);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.hm-btn--primary:hover {
    background: var(--hm-accent-deep-hover);
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 12px 30px -12px rgba(22, 182, 144, 0.65);
}

.hm-btn--primary:hover svg {
    transform: translateX(3px);
}

.hm-btn--ghost {
    background: transparent;
    color: var(--hm-on-dark);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.hm-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

.hm-btn--lg {
    padding: 1.1875rem 2.5rem;
    font-size: 1.0625rem;
}

/* ---------------------------------------------------------------- header -- */
/* The header sits over the dark hero and stays dark for the whole page —
   a single, consistent bar rather than one that flips theme mid-scroll. */

.hm-home .header {
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.4s var(--hm-ease-soft), border-color 0.4s var(--hm-ease-soft);
}

.hm-home .header.scrolled {
    background: rgba(11, 17, 27, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--hm-hairline-dark);
    box-shadow: none;
}

.hm-home .header .container {
    max-width: var(--hm-max);
    padding-inline: var(--hm-gutter);
}

.hm-home .nav-link {
    color: var(--hm-on-dark-soft);
    font-size: 0.9375rem;
}

.hm-home .nav-link:hover {
    color: var(--hm-on-dark);
}

.hm-home .nav-link::after {
    background: var(--hm-accent);
}

/* Re-skin the shared buttons for the dark bar */
.hm-home .header-actions .btn-secondary {
    background: transparent;
    color: var(--hm-on-dark-soft);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.hm-home .header-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--hm-on-dark);
    transform: translateY(-1px);
    box-shadow: none;
}

.hm-home .header-actions .btn-primary {
    background: var(--hm-accent-deep);
    color: #fff !important;
    box-shadow: none;
}

.hm-home .header-actions .btn-primary::before {
    display: none;
}

.hm-home .header-actions .btn-primary:hover {
    background: var(--hm-accent-deep-hover);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(22, 182, 144, 0.7);
}

.hm-home .header-actions .btn-primary>* {
    color: #fff !important;
}

.hm-home .mobile-menu-btn span {
    background: var(--hm-on-dark);
}

.hm-home .mobile-menu {
    background: var(--hm-ink);
}

.hm-home .mobile-nav-link {
    color: var(--hm-on-dark-soft);
    border-bottom-color: var(--hm-hairline-dark);
}

.hm-home .mobile-nav-link:hover {
    color: var(--hm-on-dark);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hm-hero {
    position: relative;
    background: var(--hm-ink);
    color: var(--hm-on-dark);
    padding-top: clamp(6.5rem, 8.5vw, 8.5rem);
    padding-bottom: clamp(2.25rem, 3.75vw, 3.75rem);
    overflow: hidden;
    isolation: isolate;
}

.hm-hero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* One soft off-centre wash — the only gradient in the hero. */
.hm-hero__wash {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 75%;
    height: 130%;
    background:
        radial-gradient(closest-side, rgba(22, 182, 144, 0.14), transparent 72%),
        radial-gradient(closest-side, rgba(28, 157, 196, 0.10), transparent 70%);
    background-position: 30% 40%, 70% 60%;
    background-repeat: no-repeat;
    background-size: 90% 90%, 70% 70%;
    filter: blur(20px);
}

/* ------------------------------------------------------- hero shield art -- */
/* Top-right justified, buried in the background: bright at the right edge and
   dissolving to nothing before it reaches the headline. The mask does the
   fading rather than a flat opacity, so the right side keeps its punch. */

/* Mobile first: the shield bleeds off the right edge so its core lands in the
   top-right corner, dimmer and faded harder on the left, because here it sits
   behind the headline rather than beside it. */
.hm-hero__shield {
    position: absolute;
    top: -3%;
    right: -20%;
    width: min(190%, 50rem);
    aspect-ratio: 1672 / 941;
    /* WebP is 76 KB against the PNG's 1.6 MB; the PNG stays as the fallback
       for browsers without image-set(). */
    background-image: url('../img/hero-shield.png');
    background-image: image-set(url('../img/hero-shield.webp') type('image/webp'),
            url('../img/hero-shield.png') type('image/png'));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    opacity: 0.5;
    filter: blur(1.5px) saturate(0.85);
    -webkit-mask-image:
        linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.62) 40%, transparent 78%),
        linear-gradient(to top, transparent 0%, #000 22%, #000 100%);
    mask-image:
        linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.62) 40%, transparent 78%),
        linear-gradient(to top, transparent 0%, #000 22%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Two-column hero: real empty space to the right, so it can sit fully in
   frame at full strength. */
@media (min-width: 62.5rem) {
    .hm-hero__shield {
        /* Nudged down so the shield's tip clears the fixed header. */
        top: 3%;
        right: -3%;
        width: min(62%, 62rem);
        opacity: 0.68;
        filter: blur(1px) saturate(0.85);
        -webkit-mask-image:
            linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.72) 38%, transparent 76%),
            linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
        mask-image:
            linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.72) 38%, transparent 76%),
            linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
    }
}

.hm-hero__rule {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hm-hairline-dark) 25%, var(--hm-hairline-dark) 75%, transparent);
}

/* The headline gets the full measure; the asymmetry lives in the row below. */
.hm-hero__row {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 62.5rem) {
    .hm-hero__row {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: clamp(3rem, 6vw, 5.5rem);
        align-items: start;
    }
}

.hm-hero__eyebrow {
    color: var(--hm-accent);
}

.hm-hero__title {
    font-family: var(--font-display);
    font-size: var(--hm-display);
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: -0.038em;
    margin: 0;
    color: var(--hm-on-dark);
}

/* Below 40rem the headline flows naturally rather than holding its breaks. */
.hm-hero__line {
    font-weight: 800;
}

@media (min-width: 40rem) {
    .hm-hero__line {
        display: block;
    }
}

/* The turn in the sentence — set light and soft, like it's said quietly. */
.hm-hero__title em {
    font-style: normal;
    font-weight: 400;
    color: var(--hm-on-dark-soft);
}

.hm-hero__lead {
    max-width: 34rem;
    margin: 0;
    font-size: var(--hm-lead);
    line-height: 1.62;
    color: var(--hm-on-dark-soft);
}

/* ----------------------------------------------------------- offer pill -- */
/* Its own object rather than a third item in the micro-copy line, so the
   discount reads as an offer instead of a footnote. */

.hm-offer {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    margin: clamp(1.5rem, 2.6vw, 2rem) 0 0;
    padding: 0.5rem 0.9375rem 0.5625rem;
    border: 1px solid rgba(30, 217, 172, 0.32);
    border-radius: var(--radius-full, 999px);
    background: rgba(22, 182, 144, 0.1);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    line-height: 1;
    color: var(--hm-accent-lt);
}

.hm-offer strong {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hm-offer__rest {
    font-weight: 500;
    color: var(--hm-on-dark-soft);
}

.hm-offer__dot {
    align-self: center;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hm-accent-lt);
    flex: none;
}

@media (prefers-reduced-motion: no-preference) {
    .hm-offer__dot {
        animation: hmBreathe 3.2s var(--hm-ease-soft) infinite;
    }
}

/* The pill replaces the discount in the micro-copy line, so that line drops
   to two items and needs less room above it. */
.hm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.hm-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.75rem 0 0;
    font-family: var(--hm-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--hm-on-dark-mute);
}

.hm-hero__meta span {
    position: relative;
    padding-left: 0.9375rem;
}

.hm-hero__meta span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hm-accent);
    opacity: 0.55;
}

/* ------------------------------------------------- signature: the log -- */

.hm-hero__ledger {
    justify-self: stretch;
}

@media (min-width: 62.5rem) {
    .hm-hero__ledger {
        /* Pulled up alongside the headline. The lift scales with width: the
           full 200px on wide screens, easing back to the original offset near
           1000px, where the headline is taller and the card would cover it. */
        margin-top: clamp(-4.625rem, 316px - 26vw, 3.5rem);
    }
}

.hm-log {
    margin: 0;
    border: 1px solid var(--hm-hairline-dark);
    border-radius: 0.875rem;
    background:
        linear-gradient(180deg, rgba(24, 35, 52, 0.9) 0%, rgba(13, 20, 31, 0.9) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 30px 70px -30px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

.hm-log__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--hm-hairline-dark);
    background: rgba(255, 255, 255, 0.02);
}

.hm-log__live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hm-accent);
    box-shadow: 0 0 0 0 rgba(22, 182, 144, 0.55);
    animation: hmBreathe 3.2s var(--hm-ease-soft) infinite;
    flex: none;
}

@keyframes hmBreathe {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(22, 182, 144, 0.5);
    }

    60% {
        box-shadow: 0 0 0 7px rgba(22, 182, 144, 0);
    }
}

.hm-log__title {
    font-family: var(--hm-mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--hm-on-dark-mute);
}

.hm-log__list {
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
}

.hm-log__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.375rem 1rem;
    padding: 0.6875rem 1.25rem;
    font-family: var(--hm-mono);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.hm-log__time {
    color: var(--hm-accent);
    font-variant-numeric: tabular-nums;
}

.hm-log__what {
    color: var(--hm-on-dark);
}

.hm-log__where {
    color: var(--hm-on-dark-mute);
    text-align: right;
    font-size: 0.75rem;
}

/* On phones the card is the tallest thing in the hero, which pushes what
   follows below the fold. Drop the two most routine entries — the arc still
   reads: backup verified → phishing blocked → drive warning → flagged. */
@media (max-width: 47.99rem) {

    .hm-log__row:nth-child(3),
    .hm-log__row:nth-child(4) {
        display: none;
    }
}

/* Narrow screens: the location drops under the entry rather than being
   squeezed against it. Placed after the base rules so it actually wins. */
@media (max-width: 30rem) {
    .hm-log__row {
        grid-template-columns: auto 1fr;
        gap: 0.125rem 0.875rem;
    }

    .hm-log__where {
        grid-column: 2;
        text-align: left;
    }
}

.hm-log__foot {
    margin: 0;
    padding: 1.0625rem 1.25rem;
    border-top: 1px solid var(--hm-hairline-dark);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--hm-on-dark-soft);
}

/* Entries arrive one at a time, the way they actually would. */
@media (prefers-reduced-motion: no-preference) {

    .hm-js .hm-log__row,
    .hm-js .hm-log__foot {
        opacity: 0;
        transform: translateY(7px);
    }

    .hm-log.is-playing .hm-log__row,
    .hm-log.is-playing .hm-log__foot {
        animation: hmLogIn 0.65s var(--hm-ease) forwards;
        animation-delay: calc(var(--i) * 190ms + 450ms);
    }
}

@keyframes hmLogIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   THE PROBLEM — the darkest point of the page
   ========================================================================== */

.hm-problem {
    background: var(--hm-ink);
    color: var(--hm-on-dark);
    padding-block: var(--hm-band);
    padding-top: clamp(3.5rem, 6vw, 6rem);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.hm-problem__head {
    max-width: 40rem;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.hm-problem__title {
    font-family: var(--font-display);
    font-size: var(--hm-h2);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.032em;
    color: var(--hm-on-dark);
    margin: 0;
    /* Keeps the two lines even instead of orphaning the last word. */
    text-wrap: balance;
}

.hm-day {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 62.5rem;
}

.hm-day__row {
    display: grid;
    gap: 0.5rem 2rem;
    padding-block: clamp(1.25rem, 2.4vw, 1.875rem);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hm-day__row:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 40rem) {
    .hm-day__row {
        grid-template-columns: 7.5rem 1fr;
        align-items: baseline;
    }
}

.hm-day__time {
    font-family: var(--hm-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--hm-on-dark-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hm-day__text {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.9vw, 2.15rem);
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: -0.024em;
    color: var(--hm-on-dark);
    text-wrap: pretty;
}

.hm-problem__closer {
    margin-top: clamp(3.5rem, 7vw, 6rem);
}

.hm-problem__punch {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3rem, 9.5vw, 8rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.05em;
    color: var(--hm-on-dark);
}

.hm-problem__note {
    max-width: 34rem;
    margin: 1.75rem 0 0;
    font-size: var(--hm-lead);
    line-height: 1.62;
    color: var(--hm-on-dark-mute);
}

/* ==========================================================================
   THE QUESTIONS — a pinned pause, one question per scroll step
   ========================================================================== */

.hm-ask {
    /* Pulled up into the hero's trailing whitespace so the first question
       arrives sooner. Kept smaller than the hero's bottom padding — this
       section has an opaque background, so overshooting paints over the
       log card rather than just tightening the gap. */
    margin-top: clamp(-1.5rem, -1.5vw, -0.5rem);
    --hm-ask-steps: 4;
    /* Roughly one flick per question. Shorter on phones so the pause doesn't
       turn into a slog — 4 steps still means ~3.6 screens of scrolling. */
    --hm-ask-step: 65vh;
    position: relative;
    background: var(--hm-ink);
    color: var(--hm-on-dark);
}

/* The track is the scroll distance; the stage stays pinned inside it. */
.hm-ask__track {
    height: calc(100vh + (var(--hm-ask-steps) * var(--hm-ask-step)));
}

.hm-ask__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-align: center;
}

.hm-ask__eyebrow {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Every question occupies the same grid cell, so they cross-fade in place
   and the container sizes to the tallest one. */
.hm-ask__list {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hm-ask__q {
    grid-area: 1 / 1;
    max-width: 18ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.032em;
    color: var(--hm-on-dark);
    text-wrap: balance;
}

@media (min-width: 48rem) {
    .hm-ask {
        --hm-ask-step: 78vh;
    }

    .hm-ask__q {
        max-width: 22ch;
    }
}

.hm-ask__closer {
    margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
    max-width: 30rem;
    font-size: var(--hm-lead);
    line-height: 1.6;
    color: var(--hm-on-dark-mute);
}

/* --- progress --- */

.hm-ask__progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.hm-ask__progress span {
    width: 2.25rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
    transition: background-color 0.45s var(--hm-ease);
}

.hm-ask__progress span.is-done {
    background: var(--hm-accent);
}

/* --- pinned behaviour, JS-driven --- */
/* Without JS (or with reduced motion) the section is a plain stacked list:
   nothing pins, nothing hides. */

.hm-js .hm-ask__q,
.hm-js .hm-ask__closer {
    opacity: 0;
    transform: translateY(2rem) scale(0.965);
    filter: blur(10px);
    transition:
        opacity 0.7s var(--hm-ease),
        transform 0.8s var(--hm-ease),
        filter 0.7s var(--hm-ease);
}

.hm-js .hm-ask__q.is-active,
.hm-js .hm-ask__closer.is-active {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* The closer trails the question it lands with. */
.hm-js .hm-ask__closer {
    transition-delay: 0.18s;
}

/* Questions leaving upward reads as a stack being worked through. */
.hm-js .hm-ask__q.is-past {
    opacity: 0;
    transform: translateY(-2rem) scale(0.985);
    filter: blur(8px);
}

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

    .hm-ask__track {
        height: auto;
    }

    .hm-ask__stage {
        position: static;
        height: auto;
        padding-block: var(--hm-band);
    }

    .hm-ask__list {
        display: block;
    }

    .hm-js .hm-ask__q,
    .hm-js .hm-ask__closer {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .hm-ask__q {
        max-width: 30ch;
        margin-bottom: 2rem;
    }

    .hm-ask__progress {
        display: none;
    }
}

/* ==========================================================================
   THE ANSWERS — annotated product shot
   ========================================================================== */

.hm-ans {
    background: var(--hm-paper);
    padding-block: var(--hm-band);
}

.hm-ans__head {
    max-width: 40rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hm-ans__stage {
    --hm-ans-inset: clamp(1rem, 3.5vw, 3.5rem);
    position: relative;
    margin: 0;
}

.hm-ans__shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.875rem;
    border: 1px solid var(--hm-hairline-light);
    box-shadow: 0 40px 80px -40px rgba(15, 24, 36, 0.45);
}

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

/* Dark chips on a light screenshot — unmistakably annotation rather than UI. */
.hm-ans__pin {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.012em;
    color: #fff;
    background: rgba(11, 17, 27, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.625rem;
    padding: 0.75rem 0.9375rem;
    box-shadow: 0 14px 34px -14px rgba(15, 24, 36, 0.6);
}

.hm-ans__pin em {
    display: block;
    font-family: var(--hm-mono);
    font-style: normal;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hm-accent-lt);
    margin-bottom: 0.3125rem;
}

/* --- stacked list under the shot on small screens --- */

@media (max-width: 61.99rem) {
    .hm-ans__pins {
        display: grid;
        gap: 0.625rem;
        margin-top: 1.25rem;
    }
}

/* --- pinned to the dashboard regions they answer --- */

@media (min-width: 62rem) {
    .hm-ans__stage {
        /* room in the margins for chips that overhang the shot */
        padding: 0 var(--hm-ans-inset);
    }

    /* Overlay matched to the image box, so pin percentages map straight onto
       the dashboard regions rather than to the padded stage. */
    .hm-ans__pins {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--hm-ans-inset);
        right: var(--hm-ans-inset);
        pointer-events: none;
    }

    .hm-ans__pin {
        position: absolute;
        width: max-content;
        max-width: 14rem;
    }

    /* a leader dot marking the region each chip refers to */
    .hm-ans__pin::after {
        content: '';
        position: absolute;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--hm-accent-lt);
        box-shadow: 0 0 0 4px rgba(30, 217, 172, 0.25);
    }

    /* Kept inside the image's vertical bounds — chips that sit above it
       collide with the fixed header once this section scrolls under it. */
    .hm-ans__pin--health {
        left: -3%;
        top: 27%;
    }

    .hm-ans__pin--health::after {
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .hm-ans__pin--threat {
        left: 34%;
        top: 4%;
    }

    .hm-ans__pin--threat::after {
        left: 24px;
        bottom: -20px;
    }

    .hm-ans__pin--watch {
        right: -3%;
        top: 54%;
    }

    .hm-ans__pin--watch::after {
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .hm-ans__pin--backup {
        left: 40%;
        bottom: 4%;
    }

    .hm-ans__pin--backup::after {
        left: 24px;
        top: -20px;
    }
}

/* ==========================================================================
   THE DIFFERENCE — the light turns on
   ========================================================================== */

.hm-diff {
    background: var(--hm-paper);
    padding-block: var(--hm-band);
}

.hm-diff__inner {
    display: grid;
    gap: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 62.5rem) {
    .hm-diff__inner {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: clamp(4rem, 8vw, 7.5rem);
        align-items: start;
    }

    .hm-diff__aside {
        position: sticky;
        top: 8.75rem;
    }
}

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

.hm-diff__item {
    padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
    border-top: 1px solid var(--hm-hairline-light);
}

.hm-diff__item:last-child {
    border-bottom: 1px solid var(--hm-hairline-light);
}

.hm-diff__claim {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--hm-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.026em;
    color: var(--hm-on-light);
}

.hm-diff__sub {
    max-width: 34rem;
    margin: 0.625rem 0 0;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--hm-on-light-mute);
}

/* ==========================================================================
   WHAT WE HANDLE — a roster of the work, not a grid of cards
   ========================================================================== */

.hm-work {
    background: var(--hm-paper-2);
    padding-block: var(--hm-band);
}

.hm-work__head {
    max-width: 40rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hm-roster {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hm-hairline-light);
}

.hm-roster__row {
    position: relative;
    display: grid;
    gap: 0.375rem 3rem;
    padding: clamp(1.375rem, 2.6vw, 1.875rem) 0 clamp(1.375rem, 2.6vw, 1.875rem) 1.25rem;
    border-bottom: 1px solid var(--hm-hairline-light);
    transition: padding-left 0.45s var(--hm-ease), background-color 0.45s var(--hm-ease);
}

@media (min-width: 48rem) {
    .hm-roster__row {
        grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
        align-items: baseline;
    }
}

/* A rule that grows on hover — the only ornament in this section. */
.hm-roster__row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--hm-accent);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.45s var(--hm-ease);
}

.hm-roster__row:hover {
    background: rgba(255, 255, 255, 0.55);
    padding-left: 1.75rem;
}

.hm-roster__row:hover::before {
    transform: scaleY(1);
    transform-origin: 50% 0%;
}

.hm-roster__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.024em;
    color: var(--hm-on-light);
}

.hm-roster__desc {
    margin: 0;
    max-width: 38rem;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--hm-on-light-mute);
}

.hm-work__closer {
    margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
    max-width: 44rem;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.9vw, 1.5rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.02em;
    color: var(--hm-on-light-mute);
}

.hm-work__closer span {
    display: block;
    font-weight: 700;
    color: var(--hm-on-light);
}

/* ==========================================================================
   IN THE LOOP — dark, so the product screenshots get a premium showcase
   and the long light run through the middle of the page is broken up.
   ========================================================================== */

.hm-loop {
    background: var(--hm-ink);
    color: var(--hm-on-dark);
    padding-block: var(--hm-band);
    overflow: hidden;
}

.hm-loop__inner {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
    align-items: center;
}

@media (min-width: 62.5rem) {
    .hm-loop__inner {
        grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr);
        gap: clamp(2rem, 4vw, 4rem);
    }

    /* Break the dashboard out of the centred container. Up to the container's
       max width the only slack available is the gutter. */
    .hm-loop__visual {
        margin-right: calc(-1 * var(--hm-gutter));
    }
}

/* Past the container's max width there's real room either side, so the
   dashboard runs to the viewport edge and ~6rem beyond it. `.hm-loop` clips
   the overflow, so it reads as continuing off-screen rather than overflowing. */
@media (min-width: 80rem) {
    .hm-loop__visual {
        margin-right: calc((var(--hm-max) - 100vw) / 2 - var(--hm-gutter) - 14rem);
    }
}

.hm-loop__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--hm-h2);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.032em;
    color: var(--hm-on-dark);
    text-wrap: balance;
}

.hm-loop__lead {
    margin: 1.25rem 0 0;
    font-size: var(--hm-lead);
    line-height: 1.62;
    color: var(--hm-on-dark-soft);
}

.hm-loop__points {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}

.hm-loop__points li {
    position: relative;
    padding: 0.6875rem 0 0.6875rem 1.25rem;
    border-top: 1px solid var(--hm-hairline-dark);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--hm-on-dark-soft);
}

.hm-loop__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.35em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hm-accent);
}

/* --- the visual: dashboard with the phone tucked into its corner --- */

.hm-loop__visual {
    position: relative;
    padding-bottom: 3.5rem;
}

@media (min-width: 48rem) {
    .hm-loop__visual {
        /* Gutters the phone sits in, so it overlaps the dashboard's corner
           rather than covering its content. */
        padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
        padding-left: clamp(4rem, 7vw, 7rem);
    }
}

.hm-shot {
    margin: 0;
    border: 1px solid var(--hm-hairline-dark);
    border-radius: 0.875rem;
    overflow: hidden;
    background: var(--hm-ink-2);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}

.hm-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.hm-phone {
    margin: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(11rem, 15.5vw, 17rem);
}

@media (max-width: 47.99rem) {
    .hm-phone {
        position: static;
        width: min(15rem, 62%);
        margin: -3rem 0 0 auto;
        transform: translateY(1.5rem);
    }
}

/* --- device shell --- */

.hm-phone__device {
    position: relative;
    border-radius: 15.5%/7.6%;
    padding: 2.6%;
    background: linear-gradient(150deg, #56606e 0%, #23292f 22%, #171c22 55%, #3d444d 100%);
    box-shadow:
        0 40px 80px -24px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* The screenshot is 1170x2532 — natively 9:19.5, so it fills without cropping. */
.hm-phone__screen {
    position: relative;
    aspect-ratio: 9 / 19.5;
    border-radius: 13%/6.4%;
    overflow: hidden;
    background: #fff;
}

.hm-phone__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.hm-phone__island {
    position: absolute;
    top: 2.6%;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 4.1%;
    border-radius: 999px;
    background: #05070a;
}

.hm-phone__cap {
    margin-top: 0.875rem;
    font-family: var(--hm-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--hm-on-dark-mute);
    text-align: center;
}

.hm-phone__cap span {
    display: block;
    margin-top: 0.1875rem;
    color: var(--hm-accent);
}

/* ==========================================================================
   HELP — chat, kept warm and light
   ========================================================================== */

.hm-help {
    background: var(--hm-paper);
    padding-block: var(--hm-band);
}

.hm-help__inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 62.5rem) {
    .hm-help__inner {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: clamp(3rem, 6vw, 5.5rem);
    }
}

.hm-help__punch {
    margin: 1.75rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.1vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.024em;
    color: var(--hm-on-light);
}

.hm-thread {
    margin: 0;
    border: 1px solid var(--hm-hairline-light);
    border-radius: 0.875rem;
    background: var(--hm-paper-2);
    overflow: hidden;
    box-shadow: 0 24px 50px -32px rgba(15, 24, 36, 0.4);
}

.hm-thread__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9375rem 1.25rem;
    border-bottom: 1px solid var(--hm-hairline-light);
    background: var(--hm-paper);
    font-family: var(--hm-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--hm-on-light-mute);
}

.hm-thread__live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hm-accent);
    flex: none;
}

.hm-thread__list {
    list-style: none;
    margin: 0;
    padding: 1.25rem;
    display: grid;
    gap: 0.625rem;
}

.hm-thread__msg {
    max-width: 82%;
    padding: 0.6875rem 0.9375rem;
    border-radius: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.hm-thread__msg--them {
    justify-self: start;
    border-bottom-left-radius: 0.3125rem;
    background: var(--hm-paper);
    border: 1px solid var(--hm-hairline-light);
    color: var(--hm-on-light);
}

/* Same deep green as the buttons — white on --hm-accent is only 2.6:1. */
.hm-thread__msg--us {
    justify-self: end;
    border-bottom-right-radius: 0.3125rem;
    background: var(--hm-accent-deep);
    color: #fff;
}

/* ==========================================================================
   HOW IT WORKS — order carries real information here, so it's numbered
   ========================================================================== */

.hm-steps {
    background: var(--hm-paper);
    padding-block: var(--hm-band);
}

.hm-steps__head {
    max-width: 40rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hm-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 48rem) {
    .hm-steps__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

.hm-step {
    position: relative;
    padding-top: 1.75rem;
    border-top: 1px solid var(--hm-hairline-light);
}

.hm-step__num {
    display: block;
    font-family: var(--hm-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--hm-accent);
    margin-bottom: 1rem;
}

/* The step number sits on the rule, marking the position in the sequence. */
.hm-step::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--hm-accent);
}

.hm-step__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--hm-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.026em;
    color: var(--hm-on-light);
}

.hm-step__text {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--hm-on-light-mute);
}

/* ==========================================================================
   BUILT FOR
   ========================================================================== */

.hm-for {
    background: var(--hm-paper-2);
    padding-block: var(--hm-band);
}

.hm-for__head {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hm-for__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--hm-hairline-light);
    border-block: 1px solid var(--hm-hairline-light);
}

@media (min-width: 34rem) {
    .hm-for__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 62.5rem) {
    .hm-for__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hm-for__cell {
    background: var(--hm-paper-2);
    padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
    transition: background-color 0.45s var(--hm-ease);
}

.hm-for__cell:hover {
    background: var(--hm-paper);
}

.hm-for__label {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--hm-on-light);
}

.hm-for__note {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.56;
    color: var(--hm-on-light-mute);
}

/* ==========================================================================
   TRUST
   ========================================================================== */

.hm-trust {
    background: var(--hm-ink-2);
    color: var(--hm-on-dark);
    padding-block: var(--hm-band);
}

.hm-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--hm-hairline-dark);
    border: 1px solid var(--hm-hairline-dark);
    border-radius: 0.75rem;
    overflow: hidden;
}

@media (min-width: 48rem) {
    .hm-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hm-stat {
    background: var(--hm-ink-2);
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
    text-align: center;
}

.hm-stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--hm-on-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.hm-stat__label {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--hm-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hm-on-dark-mute);
}

.hm-quotes {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2rem);
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 48rem) {
    .hm-quotes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hm-quote {
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hm-hairline-dark);
}

.hm-quote p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--hm-on-dark-soft);
    letter-spacing: -0.012em;
}

.hm-quote footer {
    margin-top: 1.25rem;
    font-family: var(--hm-mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--hm-on-dark-mute);
}

.hm-quote__name {
    display: block;
    color: var(--hm-on-dark);
}

/* ------------------------------------------------------------- clients -- */

.hm-clients {
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid var(--hm-hairline-dark);
}

.hm-clients__label {
    margin: 0 0 2rem;
    font-family: var(--hm-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hm-on-dark-mute);
    text-align: center;
}

.hm-clients__marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hm-clients__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    width: max-content;
    animation: hmMarquee 52s linear infinite;
}

.hm-clients__marquee:hover .hm-clients__track {
    animation-play-state: paused;
}

/* Knock every mark back to a flat white silhouette so a wall of mismatched
   client logos reads as one quiet row instead of ten competing brands. */
.hm-clients__track img {
    height: clamp(1.5rem, 2.6vw, 2.125rem);
    width: auto;
    flex: none;
    opacity: 0.42;
    filter: brightness(0) invert(1);
    transition: opacity 0.4s var(--hm-ease);
}

.hm-clients__track img:hover {
    opacity: 0.85;
}

@keyframes hmMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   CLOSE
   ========================================================================== */

.hm-close {
    position: relative;
    background: var(--hm-ink);
    color: var(--hm-on-dark);
    padding-block: clamp(6rem, 12vw, 11rem);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.hm-close__atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 70% at 50% 108%, rgba(22, 182, 144, 0.18), transparent 70%);
}

.hm-close__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.hm-close__title span {
    display: block;
    font-weight: 800;
    color: var(--hm-on-dark);
}

.hm-close__title em {
    display: block;
    font-style: normal;
    font-weight: 400;
    color: var(--hm-accent-lt);
}

.hm-close__lead {
    max-width: 34rem;
    margin: clamp(1.5rem, 2.6vw, 2rem) auto 0;
    font-size: var(--hm-lead);
    line-height: 1.62;
    color: var(--hm-on-dark-soft);
}

.hm-close .hm-btn {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

.hm-close__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin: 2rem 0 0;
    font-family: var(--hm-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--hm-on-dark-mute);
}

/* ==========================================================================
   FOOTER — align the shared component to this page's measure
   ========================================================================== */

.hm-home .footer .container {
    max-width: var(--hm-max);
    padding-inline: var(--hm-gutter);
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */

/* Gated on `.hm-js` so that without JavaScript nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
    .hm-js [data-hm-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.75s var(--hm-ease), transform 0.75s var(--hm-ease);
        transition-delay: var(--hm-delay, 0ms);
    }

    .hm-js [data-hm-reveal].hm-in {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   REDUCED MOTION — nothing moves, everything is legible
   ========================================================================== */

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

    .hm-log__live,
    .hm-clients__track {
        animation: none;
    }

    .hm-clients__track {
        /* without the crawl, show a static, centred set */
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.5rem;
    }

    .hm-btn,
    .hm-btn svg,
    .hm-roster__row,
    .hm-for__cell {
        transition: none;
    }

    .hm-btn:hover,
    .hm-btn--primary:hover,
    .hm-btn--ghost:hover {
        transform: none;
    }

    .hm-roster__row:hover {
        padding-left: 1.25rem;
    }
}