/* ==========================================================================
   Highline Payments 2.0 — page blocks and the hero
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.hl-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* A lit environment, not a flat dark rectangle: brand light enters from the
   upper right and a low accent warms the opposite corner. */
.hl-hero--dark {
    background: var(--hl-gradient-environment, var(--hl-gradient-dark));
    color: var(--hl-text-on-dark, #f5f6fb);
}
.hl-hero--light { background: var(--hl-bg-alt, #f6f7fc); }

.hl-hero--h-compact  .hl-hero__inner { padding-block: clamp(2.5rem, 6vw, 4rem); }
.hl-hero--h-standard .hl-hero__inner { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.hl-hero--h-tall     .hl-hero__inner { padding-block: clamp(5rem, 12vw, 9rem); }
.hl-hero--h-viewport .hl-hero__inner { min-height: min(88vh, 52rem); align-content: center; }
.hl-hero--h-auto     .hl-hero__inner { padding-block: clamp(2rem, 5vw, 3rem); }

/* The header is transparent over this hero, so the hero carries the header's
   height itself. Added to the existing top padding rather than replacing it, so
   every height option keeps its intended breathing room — and because the value
   is a token, not a measurement taken from the DOM, the first line lands in
   the right place on first paint with no shift. */
.hl-hero--under-header:not(.hl-hero--h-viewport) .hl-hero__inner {
    padding-top: calc(var(--hl-header-height, 4.5rem) + var(--hl-space-lg, 2rem));
}
@media (min-width: 62rem) {
    .hl-hero--under-header:not(.hl-hero--h-viewport) .hl-hero__inner {
        padding-top: calc(var(--hl-header-height, 5.25rem) + var(--hl-space-lg, 2rem));
    }
}

.hl-hero__inner {
    position: relative;
    z-index: var(--hl-z-base, 1);
    display: grid;
    gap: var(--hl-space-lg, 2rem);
    max-width: var(--hl-container-wide, 95rem);
    margin-inline: auto;
    padding-inline: var(--hl-gutter, clamp(1.25rem, 0.75rem + 2vw, 2.5rem));
}

/* Two-column layout for split hero: content left, network/artwork right */
@media (min-width: 62rem) {
    .hl-hero--layout-split .hl-hero__inner {
        grid-template-columns: 1fr 1.1fr;
        align-items: start;
    }
    .hl-hero--layout-split-left .hl-hero__inner {
        grid-template-columns: 1.1fr 1fr;
    }
    .hl-hero--layout-centered .hl-hero__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* --- Hero content column ---------------------------------------------------
   The column is a LAYOUT box, so its width is a fraction of the container, not
   a `ch` measure. A `ch` unit resolves against the element's OWN font-size, and
   this element is body-size — so `18ch` here collapsed the whole hero to ~257px
   and forced the display-size headline to wrap one word per line. The reading
   measures belong on the text itself, where the font-size they refer to lives:
   .hl-hero__title carries 18ch of DISPLAY text, .hl-hero__description 46ch. */
.hl-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hl-hero--layout-centered .hl-hero__content {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

/* Eyebrow / section label */
.hl-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hl-space-2xs, 0.5rem);
    font-size: var(--hl-size-eyebrow, clamp(0.8125rem, 0.75rem + 0.35vw, 0.9375rem));
    font-weight: var(--hl-weight-semibold, 600);
    letter-spacing: var(--hl-tracking-eyebrow, 0.16em);
    text-transform: uppercase;
    color: var(--hl-accent-light, #e24543);
    margin-bottom: var(--hl-space-sm, 1rem);
}
.hl-hero--light .hl-hero__eyebrow {
    color: var(--hl-accent, #cf2927);
}

/* Signal indicator before eyebrow */
.hl-hero__eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    animation: hl-pulse-ring 2.8s var(--hl-ease-out, ease-out) infinite;
}
@keyframes hl-pulse-ring {
    0%   { transform: scale(0.7); opacity: 0.9; }
    70%,100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hl-hero__eyebrow::before { animation: none; opacity: 1; transform: scale(1); }
}

/* Headline */
.hl-hero__title {
    font-size: var(--hl-size-display, clamp(4rem, 3rem + 2.5vw, 5.5rem));
    font-weight: var(--hl-weight-bold, 700);
    line-height: var(--hl-leading-display, 1.04);
    letter-spacing: var(--hl-tracking-display, -0.025em);
    margin: 0;
    max-width: var(--hl-measure-display, 18ch);
}
.hl-hero--light .hl-hero__title {
    color: var(--hl-text, #12142e);
}

/* A measured block inside a centred column must have its own auto margins, or
   the measure pins it to the left of a column that is itself centred. */
.hl-hero--layout-centered :where(.hl-hero__title, .hl-hero__description) {
    margin-inline: auto;
}

/* Dynamic industry word (inline variant) */
.hl-hero__lead-in {
    display: inline;
}
.hl-hero__word {
    display: none;
    white-space: nowrap;
    position: relative;
}
.hl-hero__word.is-active { display: inline; }
.hl-hero__word::after {
    content: "";
    display: inline-block;
    width: 2px;
    min-width: 2px;
    height: 0.92em;
    margin-left: 0.06em;
    background: currentColor;
    animation: hl-caret 1s steps(2, start) infinite;
    vertical-align: baseline;
}
@keyframes hl-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .hl-hero__word::after { display: none; }
}

/* Block variant (for centered hero where word is on its own line) */
.hl-hero__title:has(.hl-hero__word--block) { display: grid; }
.hl-hero__word--block,
.hl-hero__word--block.is-active {
    grid-area: 1 / 1;
    display: block;
    white-space: normal;
}
.hl-hero__word--block {
    opacity: 0;
    transition: opacity var(--hl-duration-base, 300ms) ease,
                transform var(--hl-duration-base, 300ms) var(--hl-ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1));
    transform: translateY(6px);
    visibility: hidden;
}
.hl-hero__word--block.is-active { opacity: 1; transform: none; visibility: visible; }

/* Lead-out text after dynamic word */
.hl-hero__lead-out {
    display: inline;
}

/* Descriptions are stacked in one grid cell, so the LONGEST one defines the
   height and swapping between them never moves the buttons below (§7: no CLS). */
.hl-hero__descriptions {
    display: grid;
    margin-block: var(--hl-space-md, 1.5rem);
}
.hl-hero__description {
    grid-area: 1 / 1;
    margin: 0;
    max-width: 46ch;
    font-size: var(--hl-size-lead, clamp(1rem, 0.9rem + 0.55vw, 1.125rem));
    line-height: var(--hl-leading-relaxed, 1.75);
    color: var(--hl-text-muted, #5a5f7a);
    opacity: 0;
    transition: opacity var(--hl-duration-base, 300ms) ease,
                transform var(--hl-duration-base, 300ms) var(--hl-ease-emphasis, cubic-bezier(0.16, 1, 0.3, 1));
    transform: translateY(6px);
    visibility: hidden;
}
.hl-hero--light .hl-hero__description {
    color: var(--hl-text-muted, #5a5f7a);
}
.hl-hero__description.is-active { opacity: 1; transform: none; visibility: visible; }

/* CTA group */
.hl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hl-space-sm, 1rem);
    margin-top: var(--hl-space-lg, 2rem);
}
.hl-hero--layout-centered .hl-hero__actions {
    justify-content: center;
}

/* Trust indicators */
.hl-hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hl-space-lg, 2rem);
    margin-top: var(--hl-space-xl, 3rem);
    padding-top: var(--hl-space-lg, 2rem);
    border-top: 1px solid var(--hl-border-on-dark, rgba(245, 246, 251, 0.12));
    font-size: var(--hl-size-small, clamp(0.875rem, 0.8rem + 0.4vw, 1rem));
    color: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66));
}
.hl-hero--light .hl-hero__trust {
    border-top-color: var(--hl-border, #e3e5f0);
    color: var(--hl-text-muted, #5a5f7a);
}
.hl-hero__trust-item {
    display: flex;
    align-items: center;
    gap: var(--hl-space-2xs, 0.5rem);
    white-space: nowrap;
}
.hl-hero__trust-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.7;
    color: var(--hl-accent-light, #e24543);
}
.hl-hero--light .hl-hero__trust-icon {
    color: var(--hl-accent, #cf2927);
}

/* --- Hero visual column (network canvas + foreground artwork) -------------- */
.hl-hero__visual {
    position: relative;
    isolation: isolate;
}
.hl-hero--layout-centered .hl-hero__visual {
    max-width: 100%;
    margin-inline: auto;
}

/* Network canvas host */
/* Decorative background layer, NOT a flow element. It is a sibling of
   .hl-hero__inner, so while it was `position: relative` with a 600px box it
   consumed real height and pushed the entire headline/CTA block below the fold —
   the hero looked empty because its content had been shoved out of view. The
   SECTION owns the hero's height (via .hl-hero__inner padding); this layer just
   fills whatever that turns out to be.

   pointer-events stays enabled: the canvas tracks cursor proximity and it sits
   BEHIND .hl-hero__inner (z-index: var(--hl-z-base)), so it can never intercept
   a click meant for a heading or a CTA. */
.hl-hero__network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* Foreground artwork (POS terminal, transaction UI, etc.) */
.hl-hero__foreground {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hl-hero__foreground-item {
    position: absolute;
    pointer-events: none;
    transition: opacity var(--hl-duration-slow, 560ms) var(--hl-ease-emphasis),
                transform var(--hl-duration-slow, 560ms) var(--hl-ease-emphasis);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
}
.hl-hero__foreground-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.hl-hero__foreground-item img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 48px rgba(10, 11, 31, 0.35));
}

/* Media hero (Type B: full-bleed image/video) */
.hl-hero--media .hl-hero__inner {
    grid-template-columns: 1fr;
    padding-block: 0;
}
.hl-hero__media {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
}
.hl-hero__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hl-duration-slow, 560ms) var(--hl-ease-emphasis);
}
.hl-hero__media-item.is-active {
    opacity: 1;
    visibility: visible;
}
.hl-hero__media-item img,
.hl-hero__media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hl-hero__media-overlay {
    position: absolute;
    inset: 0;
    background: var(--hl-gradient-overlay, linear-gradient(180deg, rgba(10,11,31,0) 40%, rgba(10,11,31,0.7) 100%));
}
.hl-hero__media-content {
    position: relative;
    z-index: var(--hl-z-base, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: var(--hl-space-4xl, 8rem) var(--hl-gutter, clamp(1.25rem, 0.75rem + 2vw, 2.5rem));
    max-width: var(--hl-container-wide, 95rem);
    margin-inline: auto;
}
.hl-hero__media-content--centered {
    align-items: center;
    text-align: center;
}

/* Simple hero (Type C: static) */
.hl-hero--simple .hl-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
}
.hl-hero--simple .hl-hero__content {
    max-width: var(--hl-measure-heading, 28ch);
    margin-inline: auto;
}

/* --- Section transition: network lines continue into next section ---------- */
.hl-hero--has-transition::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--hl-bg-alt, #f6f7fc) 60%,
        var(--hl-bg-alt, #f6f7fc) 100%
    );
    pointer-events: none;
    z-index: var(--hl-z-behind, -1);
}
.hl-hero--dark.hl-hero--has-transition::after {
    background: linear-gradient(180deg,
        transparent 0%,
        var(--hl-bg, #fff) 60%,
        var(--hl-bg, #fff) 100%
    );
}

/* --- Card grids (services / industries) ------------------------------------ */
.hl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 62rem) {
    .hl-cards { grid-template-columns: repeat(var(--hl-cards-columns, 3), minmax(0, 1fr)); }
}

.hl-card { display: flex; }
.hl-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--hl-surface, #fff);
    border: 1px solid var(--hl-border, #e3e5f0);
    border-radius: var(--hl-radius-lg, 24px);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease;
}
.hl-card__link:hover {
    transform: translateY(-4px);
    box-shadow: var(--hl-shadow-lg);
    border-color: transparent;
    color: inherit;
}
.hl-card__art { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hl-bg-alt, #f6f7fc); }
.hl-card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.hl-card__link:hover .hl-card__art img { transform: scale(1.04); }
/* The body is a flex column so the action can sit on the card's bottom edge
   rather than wherever the description left it — the same rule §8.3 of the
   handoff states for `.hl-pcard__foot` and `.hl-hcard__link`. */
.hl-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2vw, 1.75rem); }
.hl-card__title { display: block; font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }
.hl-card__desc { display: block; font-size: var(--hl-size-body, 1rem); color: var(--hl-text-muted, #5a5f7a); line-height: 1.6; margin: 0; }

/* The labelled affordance. See the note in `blocks/_cards.php`: the card used
   to end on a bare chevron, which reads as an unlabelled icon rather than as
   an invitation. The whole card is still the link — this is its visible name. */
.hl-card__action {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: auto; padding-top: clamp(0.9rem, 1.6vw, 1.25rem);
    color: var(--hl-brand-red, #cf2927);
}
.hl-card__actionlabel {
    font-weight: 600; font-size: var(--hl-fs-sm, 0.9375rem); letter-spacing: -0.005em;
}
.hl-card__arrow { display: inline-flex; transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.hl-card__link:hover .hl-card__arrow { transform: translateX(3px); }

/* --- Services ecosystem (interactive three-pillar section) ----------------- */
.hl-services {
    position: relative;
}
.hl-services__inner {
    position: relative;
    z-index: var(--hl-z-base, 1);
}
/* The header is a LAYOUT box holding display-size text, so its width is a rem
   measure, not a `ch` one — `42ch` resolves against this element's body-size
   font and collapsed the whole header to ~385px, wrapping the h2 two words to a
   line. The lead keeps its own reading measure below. */
.hl-services__header {
    text-align: center;
    max-width: 52rem;
    margin-inline: auto;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.hl-services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hl-space-2xs, 0.5rem);
    font-size: var(--hl-size-eyebrow);
    font-weight: var(--hl-weight-semibold, 600);
    letter-spacing: var(--hl-tracking-eyebrow, 0.16em);
    text-transform: uppercase;
    color: var(--hl-accent, #cf2927);
    margin-bottom: var(--hl-space-sm, 1rem);
}
.hl-services__eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.hl-services__title {
    font-size: var(--hl-size-h1, clamp(3rem, 2.25rem + 2vw, 4rem));
    font-weight: var(--hl-weight-bold, 700);
    line-height: var(--hl-leading-heading, 1.12);
    letter-spacing: var(--hl-tracking-heading, -0.015em);
    margin: 0;
}
.hl-services__lead {
    font-size: var(--hl-size-lead, clamp(1rem, 0.9rem + 0.55vw, 1.125rem));
    line-height: var(--hl-leading-relaxed, 1.75);
    color: var(--hl-text-muted, #5a5f7a);
    margin-top: var(--hl-space-md, 1.5rem);
    max-width: var(--hl-measure-lead, 58ch);
    margin-inline: auto;
}

/* Desktop: the three capabilities arranged AROUND the central payment hub, so
   the relationship reads as a network rather than three unrelated cards —
   ACCEPT above, MANAGE and GROW below, the hub between them:

        .  accept  .          <- row 1, centre column
        [ network hub ]       <- row 2, spanning all three columns
        manage  .  grow       <- row 3, outer columns

   The class here is .hl-pillar, matching the markup in partials/services.php.
   The old rules targeted a .hl-services__pillar that the markup never emits, so
   none of the desktop placement applied and the pillars fell into source order
   underneath a hub that covered them. */
@media (min-width: 62rem) {
    .hl-services__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: var(--hl-space-xl, 3rem);
        row-gap: var(--hl-space-lg, 2rem);
        align-items: start;
    }

    /* Placed explicitly so the composition never depends on source order. */
    .hl-services__grid > .hl-pillar:nth-of-type(1) { grid-area: 1 / 2 / 2 / 3; }
    .hl-services__grid > .hl-pillar:nth-of-type(2) { grid-area: 3 / 1 / 4 / 2; }
    .hl-services__grid > .hl-pillar:nth-of-type(3) { grid-area: 3 / 3 / 4 / 4; }

    .hl-pillar {
        position: relative;
        /* Above the hub layer, so a card is always clickable. */
        z-index: 1;
    }

    /* The hub is the visual CENTRE, and a decorative layer: it spans the middle
       row and never sits on top of a pillar (hence the lower z-index and
       pointer-events: none — nothing here may swallow a card's click).

       It only claims height once network.js has actually built its canvas. With
       no JavaScript there is nothing to show, and an empty 400px band between
       the pillars would read as a broken section — so the row simply collapses
       and ACCEPT / MANAGE / GROW close up. A visual may not reserve space it
       cannot fill. */
    .hl-services__network-host {
        grid-area: 2 / 1 / 3 / 4;
        position: relative;
        z-index: 0;
        pointer-events: none;
    }
    .hl-services__network-host:has(canvas) {
        min-height: 320px;
        height: clamp(20rem, 26vw, 30rem);
    }
}

/* Mobile: stacked interactive panels. No hover dependency — the pillar trigger
   is a real <button>, so tap and keyboard both work (see services.js). */
@media (max-width: 61.99rem) {
    .hl-services__grid {
        display: grid;
        gap: var(--hl-space-lg, 2rem);
    }
    .hl-services__network-host {
        display: none; /* Simplified on small screens; the hero carries the motif. */
    }
}

/* Pillar card */
.hl-pillar {
    position: relative;
    background: var(--hl-surface, #fff);
    border: 1px solid var(--hl-border, #e3e5f0);
    border-radius: var(--hl-radius-lg, 24px);
    padding: var(--hl-space-xl, 3rem) var(--hl-space-lg, 2rem);
    text-align: center;
    transition: transform var(--hl-duration-base, 300ms) var(--hl-ease-emphasis),
                box-shadow var(--hl-duration-base, 300ms) var(--hl-ease-emphasis),
                border-color var(--hl-duration-base, 300ms) var(--hl-ease-emphasis);
}
.hl-pillar:hover,
.hl-pillar.is-active {
    transform: translateY(-8px);
    box-shadow: var(--hl-shadow-lg);
    border-color: transparent;
}
.hl-pillar:focus-within {
    outline: 3px solid var(--hl-accent, #cf2927);
    outline-offset: 4px;
}

/* The whole card face IS the control (see partials/services.php), so the button
   has to disappear as a visual: base.css normalises a button's font and colour
   but deliberately not its background or border, so without this the UA's
   `buttonface` grey painted a light panel over every card on the dark section. */
.hl-pillar__trigger {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    text-align: inherit;
    color: inherit;
    /* The ring belongs to the card — .hl-pillar:focus-within already draws it. */
    outline: none;
}

.hl-pillar__icon {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    border-radius: var(--hl-radius-md, 12px);
    background: var(--hl-primary-light, #3d40a0);
    color: #fff;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--hl-space-md, 1.5rem);
    transition: background-color var(--hl-duration-fast, 180ms) var(--hl-ease-out),
                transform var(--hl-duration-fast, 180ms) var(--hl-ease-out);
}
.hl-pillar:hover .hl-pillar__icon,
.hl-pillar.is-active .hl-pillar__icon {
    background: var(--hl-accent, #cf2927);
    transform: scale(1.05);
}
.hl-pillar__icon svg { width: 2rem; height: 2rem; }

.hl-pillar__label {
    display: block;
    font-size: var(--hl-size-eyebrow);
    font-weight: var(--hl-weight-semibold, 600);
    letter-spacing: var(--hl-tracking-eyebrow, 0.16em);
    text-transform: uppercase;
    color: var(--hl-accent, #cf2927);
    margin-bottom: var(--hl-space-xs, 0.75rem);
}
.hl-pillar__title {
    font-size: var(--hl-size-2xl, clamp(1.375rem, 1.2rem + 0.75vw, 1.625rem));
    font-weight: var(--hl-weight-bold, 700);
    line-height: var(--hl-leading-heading, 1.12);
    letter-spacing: var(--hl-tracking-heading, -0.015em);
    margin: 0 0 var(--hl-space-sm, 1rem);
}
.hl-pillar__desc {
    font-size: var(--hl-size-body, 1rem);
    line-height: var(--hl-leading-body, 1.65);
    color: var(--hl-text-muted, #5a5f7a);
    margin: 0 0 var(--hl-space-lg, 2rem);
}

/* Active state content that expands.

   THE INVERSION RULE (see base.css): the OPEN state is the default, so with no
   JavaScript every pillar still shows its full feature list — the accordion is
   an enhancement, not the thing that makes the content exist. The collapsed
   state only applies once services.js has confirmed it can drive it, by putting
   `is-interactive` on the section host. Do not move `max-height: 0` back out to
   the unscoped rule: that hides real content whenever a script fails to load. */
.hl-pillar__expanded {
    overflow: hidden;
    transition: max-height var(--hl-duration-slow, 560ms) var(--hl-ease-emphasis),
                opacity var(--hl-duration-base, 300ms) var(--hl-ease-out);
}
.hl-services.is-interactive .hl-pillar__expanded {
    max-height: 0;
    opacity: 0;
}
.hl-services.is-interactive .hl-pillar.is-active .hl-pillar__expanded {
    max-height: 500px;
    opacity: 1;
}
.hl-pillar__features {
    display: flex;
    flex-direction: column;
    gap: var(--hl-space-sm, 1rem);
    text-align: left;
    padding-top: var(--hl-space-md, 1.5rem);
    border-top: 1px solid var(--hl-border, #e3e5f0);
}
.hl-pillar__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--hl-space-sm, 1rem);
    font-size: var(--hl-size-sm, clamp(0.875rem, 0.8rem + 0.4vw, 1rem));
    color: var(--hl-text, #12142e);
    line-height: 1.55;
}
.hl-pillar__feature-icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--hl-accent, #cf2927);
    margin-top: 0.125rem;
}

/* Network connection lines (CSS-based for hero-to-services transition) */
.hl-transition-band {
    position: relative;
    height: 120px;
    margin-top: calc(var(--hl-space-3xl, 6rem) * -1);
    padding-top: var(--hl-space-3xl, 6rem);
    z-index: var(--hl-z-behind, -1);
}
.hl-transition-band__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- Reveal animations -----------------------------------------------------
   INTENTIONALLY NOT DEFINED HERE. The scroll-reveal vocabulary lives in exactly
   one place — base.css, "Scroll-reveal vocabulary" — where every "from" state is
   scoped under .hl-anim-ready so content is VISIBLE BY DEFAULT and only hidden
   once animations.js has confirmed it can reveal it again.

   A second, unscoped copy used to live here. Because blocks.css loads after
   base.css, its `[data-hl-reveal] { opacity: 0 }` won on specificity ties and
   hid every reveal target unconditionally — so the hero copy, section headings
   and card grids stayed invisible whenever the JS never reached the reveal step
   (which is exactly what a module-level import error caused). Re-adding a
   hidden default here will silently blank the page again: put reveal states in
   base.css, under .hl-anim-ready, or nowhere. */


/* --- Back to top ----------------------------------------------------------- */
.hl-back-to-top {
    position: fixed;
    right: var(--hl-gutter, clamp(1.25rem, 0.75rem + 2vw, 2.5rem));
    bottom: var(--hl-gutter, clamp(1.25rem, 0.75rem + 2vw, 2.5rem));
    z-index: var(--hl-z-sticky, 100);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--hl-primary, #2a2d7c);
    color: #fff;
    border: 0;
    box-shadow: var(--hl-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity var(--hl-duration-base, 300ms) var(--hl-ease-out),
                visibility var(--hl-duration-base, 300ms) var(--hl-ease-out),
                transform var(--hl-duration-base, 300ms) var(--hl-ease-out),
                background-color var(--hl-duration-fast, 180ms) var(--hl-ease-out);
}
.hl-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.hl-back-to-top:hover { background: var(--hl-primary-dark, #1b1e45); }
.hl-back-to-top:focus-visible {
    outline: 3px solid var(--hl-accent, #cf2927);
    outline-offset: 3px;
}
.hl-back-to-top svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 30rem) {
    .hl-back-to-top {
        width: 2.75rem;
        height: 2.75rem;
        right: var(--hl-space-md, 1.5rem);
        bottom: var(--hl-space-md, 1.5rem);
    }
}

/* --- CTA band -------------------------------------------------------------- */
.hl-cta-band {
    position: relative;
    padding: var(--hl-space-3xl, 6rem) var(--hl-gutter, clamp(1.25rem, 0.75rem + 2vw, 2.5rem));
    background: var(--hl-bg-dark, #0a0b1f);
    color: var(--hl-text-on-dark, #f5f6fb);
    text-align: center;
}
.hl-cta-band__content {
    max-width: var(--hl-measure-narrow, 42ch);
    margin-inline: auto;
}
.hl-cta-band__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hl-space-2xs, 0.5rem);
    font-size: var(--hl-size-eyebrow);
    font-weight: var(--hl-weight-semibold, 600);
    letter-spacing: var(--hl-tracking-eyebrow, 0.16em);
    text-transform: uppercase;
    color: var(--hl-accent-light, #e24543);
    margin-bottom: var(--hl-space-sm, 1rem);
}
.hl-cta-band__eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.hl-cta-band__title {
    font-size: var(--hl-size-h1, clamp(3rem, 2.25rem + 2vw, 4rem));
    font-weight: var(--hl-weight-bold, 700);
    line-height: var(--hl-leading-heading, 1.12);
    letter-spacing: var(--hl-tracking-heading, -0.015em);
    margin: 0 0 var(--hl-space-md, 1.5rem);
}
.hl-cta-band__desc {
    font-size: var(--hl-size-lead, clamp(1rem, 0.9rem + 0.55vw, 1.125rem));
    line-height: var(--hl-leading-relaxed, 1.75);
    color: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66));
    margin: 0 0 var(--hl-space-xl, 3rem);
}
.hl-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hl-space-sm, 1rem);
}

/* ===========================================================================
   Landing-page architecture — migration 007
   Blocks: hero, promotion, funding, about. Plus the per-block visibility
   utilities PageRenderer emits and the draft-preview bar.
   =========================================================================== */

/* Per-block visibility utilities moved to highline-system.css (H4) so the
   design-system layer owns them alongside the rest of the shared language. */

/* --- Draft preview bar ---------------------------------------------------- */
.hl-preview-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 0.5rem 1rem;
    text-align: center;
    background: var(--hl-accent, #cf2927);
    color: #fff;
    font-size: var(--hl-size-small, 0.875rem);
    font-weight: var(--hl-weight-medium, 500);
}

/* --- Hero block ----------------------------------------------------------- */
.hl-heroblock__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.hl-heroblock--text .hl-heroblock__inner,
.hl-heroblock--media-none .hl-heroblock__inner { grid-template-columns: 1fr; max-width: 46rem; }
.hl-heroblock--media-left .hl-heroblock__media { order: -1; }
.hl-heroblock__title { margin: 0 0 var(--hl-space-md, 1.5rem); }
.hl-heroblock__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hl-space-sm, 1rem);
    margin: var(--hl-space-lg, 2rem) 0 0;
}
.hl-heroblock__media img { width: 100%; height: auto; }
@media (max-width: 900px) {
    .hl-heroblock__inner { grid-template-columns: 1fr; }
    .hl-heroblock--media-left .hl-heroblock__media { order: 0; }
}

/* --- Promotion block ------------------------------------------------------
   The disclaimer is styled as quiet but legible — it is legal text that has to
   be readable, not decoration to be dimmed out of existence. */
.hl-promo__inner {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
.hl-promo--panel .hl-promo__inner {
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
    padding: clamp(1.75rem, 3vw, 3rem);
    border-radius: var(--hl-radius-lg, 1.25rem);
    background: var(--hl-surface-raised, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--hl-border, rgba(255, 255, 255, 0.14));
}
.hl-promo--inline .hl-promo__inner { grid-template-columns: auto 1fr auto; text-align: left; }
.hl-promo__headline { margin: 0 0 var(--hl-space-sm, 1rem); }
.hl-promo__media img { width: 100%; height: auto; border-radius: var(--hl-radius-md, 0.875rem); }
.hl-promo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hl-space-sm, 1rem);
    justify-content: inherit;
    margin: var(--hl-space-lg, 2rem) 0 0;
}
.hl-promo--panel .hl-promo__actions { justify-content: center; }
.hl-promo__disclaimer {
    margin: var(--hl-space-lg, 2rem) 0 0;
    padding-top: var(--hl-space-md, 1.5rem);
    border-top: 1px solid var(--hl-border, rgba(255, 255, 255, 0.14));
    font-size: var(--hl-size-small, 0.875rem);
    line-height: 1.6;
    opacity: 0.82;
}
@media (max-width: 767px) {
    .hl-promo--inline .hl-promo__inner { grid-template-columns: 1fr; text-align: left; }
}

/* --- Funding block -------------------------------------------------------- */
.hl-funding__head { max-width: 46rem; margin-bottom: var(--hl-space-xl, 3rem); }
.hl-funding__uses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--hl-space-md, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.hl-funding__use {
    padding: var(--hl-space-md, 1.5rem);
    border-radius: var(--hl-radius-md, 0.875rem);
    background: var(--hl-surface-raised, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--hl-border, rgba(255, 255, 255, 0.12));
}
.hl-funding__use b { display: block; margin-bottom: 0.4rem; font-weight: var(--hl-weight-semibold, 600); }
.hl-funding__use span { font-size: var(--hl-size-small, 0.875rem); line-height: 1.6; opacity: 0.8; }
.hl-funding__actions { margin: var(--hl-space-xl, 3rem) 0 0; }
.hl-funding__disclaimer {
    margin: var(--hl-space-lg, 2rem) 0 0;
    font-size: var(--hl-size-small, 0.875rem);
    line-height: 1.6;
    opacity: 0.72;
    max-width: 60rem;
}

/* --- About block ---------------------------------------------------------- */
.hl-about__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.hl-about--split .hl-about__inner { grid-template-columns: 1.1fr 0.9fr; }
.hl-about__points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--hl-space-md, 1.5rem);
    margin: var(--hl-space-lg, 2rem) 0 0;
}
.hl-about__points dt { font-weight: var(--hl-weight-semibold, 600); margin-bottom: 0.35rem; }
.hl-about__points dd { margin: 0; font-size: var(--hl-size-small, 0.875rem); line-height: 1.6; opacity: 0.8; }
.hl-about__actions { margin: var(--hl-space-lg, 2rem) 0 0; }
.hl-about__media img { width: 100%; height: auto; border-radius: var(--hl-radius-lg, 1.25rem); }
@media (max-width: 900px) {
    .hl-about--split .hl-about__inner { grid-template-columns: 1fr; }
}

/* --- Landing header, sticky variant --------------------------------------- */
.hl-landing-header.is-sticky { position: sticky; top: 0; z-index: 100; }