/* Reusable components. Desktop navigation starts at 1100px. */

@layer components {

    /* ---------- Icon ---------- */

    .icon {
        width: 1.25em;
        height: 1.25em;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .icon-sm {
        width: 1em;
        height: 1em;
    }

    .icon-lg {
        width: 1.5em;
        height: 1.5em;
    }

    .icon-fill {
        fill: currentColor;
    }

    /* Keeps the 2.75rem footprint so rows of icons still line up, but draws
       nothing behind the glyph. The glyph carries the meaning, not a plate. */
    .icon-box {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
        color: var(--heading);
    }

    .icon-box .icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .icon-box-green {
        color: var(--green);
    }

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

    /* ---------- Button ---------- */

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 2.75rem;
        max-width: 100%;
        padding: 0.55rem 1.15rem;
        border: 1px solid var(--heading);
        border-radius: var(--radius-full);
        background: var(--heading);
        color: #fff;
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
        transition:
            background-color var(--fast) var(--ease),
            border-color var(--fast) var(--ease),
            color var(--fast) var(--ease);
    }

    .button:hover {
        background: var(--dark-surface);
        border-color: var(--dark-surface);
        color: #fff;
    }

    .button .icon {
        width: 1.05em;
        height: 1.05em;
        transition: translate var(--base) var(--ease);
    }

    .button:hover .icon-arrow {
        translate: 3px 0;
    }

    .button-outline {
        background: var(--surface);
        border-color: var(--border-strong);
        color: var(--heading);
    }

    .button-outline:hover {
        background: var(--surface-muted);
        border-color: var(--border-strong);
        color: var(--heading);
    }

    /* The brand red as a button is now the exception, not the default, so it
       still means something where it is used */
    .button-brand {
        background: var(--brand);
        border-color: var(--brand);
    }

    .button-brand:hover {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
    }

    .button-light {
        background: #fff;
        border-color: #fff;
        color: var(--heading);
    }

    .button-light:hover {
        background: var(--warm-strong);
        border-color: var(--warm-strong);
        color: var(--heading);
    }

    .button-small {
        min-height: 2.25rem;
        padding: 0.4rem 0.95rem;
        font-size: var(--text-xs);
    }

    .button-large {
        min-height: 3rem;
        padding: 0.7rem 1.4rem;
        font-size: var(--text-base);
    }

    .button:disabled,
    .button[aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Round icon-only button. Set the size with --size. */
    .icon-button {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: var(--size, 2.5rem);
        height: var(--size, 2.5rem);
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        color: var(--text-muted);
        transition:
            background-color var(--fast) var(--ease),
            border-color var(--fast) var(--ease),
            color var(--fast) var(--ease);
    }

    .icon-button:hover:not(:disabled) {
        background: var(--warm-strong);
        color: var(--heading);
    }

    /* ---------- Labels and tags ---------- */

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        width: fit-content;
        padding: 0.3rem 0.8rem 0.3rem 0.65rem;
        border: var(--line);
        border-radius: var(--radius-full);
        background: var(--surface);
        color: var(--heading);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        line-height: 1.4;
    }

    .eyebrow::before {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        border-radius: var(--radius-full);
        background: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
    }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.75rem;
        border-radius: var(--radius-full);
        background: var(--surface-muted);
        color: var(--text);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        line-height: 1.3;
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    a.tag {
        text-decoration: none;
        transition: color var(--fast) var(--ease);
    }

    a.tag:hover {
        color: var(--green);
    }

    /* ---------- Marquee ---------- */

    .marquee-band {
        padding-block: var(--space-6);
    }

    .marquee {
        overflow: hidden;
    }

    /* Fade both ends so items appear and leave instead of being cut off */
    .marquee[data-ready] {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    }

    .marquee-inner {
        display: flex;
        width: max-content;
    }

    .marquee[data-ready] .marquee-inner {
        animation: marquee var(--marquee-time, 45s) linear infinite;
    }

    .marquee-inner:hover {
        animation-play-state: paused;
    }

    .marquee-track {
        display: flex;
        align-items: center;
        gap: var(--space-7);
        padding-right: var(--space-7);
    }

    .marquee-item {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    .marquee-item .icon {
        color: var(--green);
    }

    /* The second copy sits exactly one row along, so -50% is a seamless loop */
    @keyframes marquee {
        to {
            translate: -50% 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .marquee[data-ready] .marquee-inner {
            animation: none;
        }

        .marquee {
            overflow-x: auto;
        }
    }

    /* ---------- Card ---------- */

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-6);
        border: var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }

    .card > * {
        margin: 0;
    }

    .card-muted {
        border-color: transparent;
        background: var(--surface-muted);
    }

    /* Closing card in a slider: no media, so the content sits centred */
    .card-end {
        justify-content: center;
        border-color: transparent;
        background: var(--warm);
    }

    .card-hover {
        transition: border-color var(--base) var(--ease);
    }

    .card-hover:hover {
        border-color: var(--border-strong);
    }

    .card-media {
        display: block;
        aspect-ratio: 16 / 10;
        margin: -0.5rem -0.5rem var(--space-2);
        overflow: hidden;
        border-radius: calc(var(--radius-lg) - 8px);
        background: var(--surface-muted);
    }

    .card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: scale var(--slow) var(--ease-out);
    }

    .card-hover:hover .card-media img {
        scale: 1.04;
    }

    .card-title {
        color: var(--heading);
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    .card-title a {
        color: inherit;
        text-decoration: none;
    }

    .card-title a:hover {
        color: var(--green);
    }

    .card-text {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

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

    .card-foot {
        margin-top: auto;
        padding-top: var(--space-2);
    }

    .more-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--green);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-decoration: none;
    }

    .more-link:hover {
        color: var(--green-dark);
    }

    .more-link .icon {
        transition: translate var(--base) var(--ease);
    }

    .more-link:hover .icon {
        translate: 3px 0;
    }

    /* A card that is one big link */
    .link-card {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--heading);
        /* A navigation link, so it takes the same step as the nav and buttons
           rather than body size, which reads heavy once it wraps on a phone */
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        text-decoration: none;
        transition: border-color var(--base) var(--ease);
    }

    .link-card > .icon {
        margin-left: auto;
        color: var(--text-muted);
        transition: translate var(--base) var(--ease), color var(--base) var(--ease);
    }

    .link-card:hover {
        border-color: var(--border-strong);
        color: var(--heading);
    }

    .link-card:hover > .icon {
        translate: 3px 0;
        color: var(--green);
    }

    /* ---------- Lists ---------- */

    .check-list {
        display: grid;
        gap: var(--space-3);
    }

    .check-list li {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .check-list .icon {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.15em;
        padding: 0.2rem;
        border-radius: var(--radius-full);
        background: var(--green-soft);
        color: var(--green);
        stroke-width: 2.5;
    }

    /* Icon above a short title and a line or two of text, three across, with a
       thin rule down the left of each column. For sections meant to be scanned
       rather than read. No border box, so it stays lighter than .card. */
    .feature {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding-inline: var(--space-6);
        border-left: var(--line);
    }

    /* .icon-box centres its glyph in a 2.75rem box, which reads as an indent
       once the icon sits above the text rather than beside it. */
    .feature > .icon-box {
        justify-items: start;
        margin-bottom: var(--space-2);
    }

    /* Pushed to the bottom so the links line up across a row whose items have
       different amounts of text. Grid items already stretch to equal height. */
    .feature > .more-link {
        margin-top: auto;
        padding-top: var(--space-2);
    }

    .feature-title {
        display: block;
        color: var(--heading);
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    .feature-text {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /* 19rem lands three across at the 1200px content width and two on a tablet. */
    .feature-grid {
        display: grid;
        row-gap: var(--space-8);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    }

    /* One column on a phone, where a rule down the left of every item reads as
       an indent. Separate them with a rule above instead. */
    @media (max-width: 639px) {
        .feature-grid {
            row-gap: var(--space-5);
        }

        .feature {
            padding-inline: 0;
            padding-top: var(--space-5);
            border-left: 0;
            border-top: var(--line);
        }
    }

    /* Big numbers */
    .stats {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    }

    .stat {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-1);
    }

    .stat dt {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
    }

    .stat dd {
        margin: 0;
        color: var(--heading);
        font-size: var(--text-3xl);
        font-weight: var(--weight-semibold);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    /* ---------- Rating and avatar ---------- */

    .stars {
        display: inline-flex;
        gap: 0.1rem;
        color: var(--gold);
    }

    .star-empty {
        color: var(--border-strong);
    }

    .avatar {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
        border-radius: var(--radius-full);
        background: var(--green-soft);
        color: var(--green-dark);
        font-weight: var(--weight-semibold);
    }

    /* ---------- Header ---------- */

    .header {
        position: sticky;
        top: 0;
        z-index: var(--z-header);
        isolation: isolate;
        border-bottom: 1px solid transparent;
        transition: border-color var(--base) var(--ease);
        /* Settles in ahead of the hero, so the page assembles from the top down.
           Shorter than --enter: this is chrome, and it should be ready to click
           before content has finished arriving. No blur, which smears the logo. */
        animation: bar-in var(--menu-time) var(--sheet-ease) backwards;
    }

    .bottom-bar {
        animation: bar-in var(--menu-time) var(--sheet-ease) backwards;
    }

    @keyframes bar-in {
        from {
            opacity: 0;
            translate: 0 calc(var(--bar-from, -1) * 0.75rem);
        }
    }

    /* The blur sits on a pseudo-element so the fixed mobile menu is not trapped by it */
    .header::before,
    .bottom-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--bar-bg);
        -webkit-backdrop-filter: var(--bar-blur);
        backdrop-filter: var(--bar-blur);
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .header::before,
        .bottom-bar::before {
            background: var(--bar-bg-solid);
        }
    }

    .header[data-scrolled],
    .header:has(.nav[data-menu-open]) {
        border-bottom-color: var(--border);
    }

    .header-inner {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        height: var(--header-height);
    }

    .logo {
        display: block;
        flex-shrink: 0;
        padding: var(--space-1) 0;
        border-radius: var(--radius-sm);
    }

    .logo img {
        width: 156px;
        height: auto;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-left: auto;
    }

    .header-cta {
        white-space: nowrap;
    }

    /* ---------- Navigation: shared ---------- */

    .nav-list {
        display: flex;
        align-items: center;
        gap: 0.125rem;
    }

    .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.45rem 0.8rem;
        border-radius: var(--radius-full);
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
    }

    .nav-link:hover,
    .nav-toggle[aria-expanded="true"] {
        background: var(--surface-muted);
        color: var(--heading);
    }

    .nav-link[aria-current="page"] {
        color: var(--heading);
        font-weight: var(--weight-semibold);
    }

    .nav-link .icon {
        width: 0.9rem;
        height: 0.9rem;
        color: var(--text-muted);
        transition: rotate var(--base) var(--ease);
    }

    .nav-toggle[aria-expanded="true"] .icon {
        rotate: 180deg;
    }

    .mega-label {
        margin-bottom: var(--space-3);
        padding-inline: 0.75rem;
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .mega-list {
        display: grid;
        gap: 0.125rem;
    }

    .mega-link {
        display: block;
        padding: 0.6rem 0.75rem;
        border-radius: var(--radius-sm);
        color: var(--heading);
        text-decoration: none;
        transition: background-color var(--fast) var(--ease);
    }

    .mega-link:hover,
    .mega-link:focus-visible {
        background: var(--surface-muted);
        color: var(--heading);
    }

    .mega-side .mega-link:hover,
    .mega-side .mega-link:focus-visible {
        background: rgb(18 21 29 / 0.06);
    }

    .mega-title {
        display: block;
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: 1.35;
    }

    .mega-link[aria-current="page"] .mega-title {
        color: var(--green);
    }

    .mega-text {
        display: block;
        margin-top: 0.15rem;
        color: var(--text-muted);
        font-size: var(--text-xs);
        line-height: 1.4;
    }

    .nav-extra,
    .nav-surface {
        display: none;
    }

    /* ---------- Navigation: desktop mega menu ---------- */

    @media (min-width: 1100px) {
        .nav {
            margin-left: auto;
        }

        .header-actions {
            margin-left: var(--space-2);
        }

        .nav-group {
            position: static;
        }

        /* Shared white box that slides and resizes between menus */
        .nav-surface {
            display: block;
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            width: var(--surface-width, 40rem);
            height: var(--surface-height, 16rem);
            border: var(--line);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-lg);
            translate: var(--surface-x, 0) 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform-origin: top center;
            scale: 0.98;
            transition:
                translate var(--menu-time) var(--sheet-ease),
                width var(--menu-time) var(--sheet-ease),
                height var(--menu-time) var(--sheet-ease),
                opacity 220ms var(--ease),
                scale 220ms var(--ease),
                visibility 0s linear 220ms;
        }

        .nav[data-menu-open] .nav-surface {
            opacity: 1;
            visibility: visible;
            scale: 1;
            transition:
                translate var(--menu-time) var(--sheet-ease),
                width var(--menu-time) var(--sheet-ease),
                height var(--menu-time) var(--sheet-ease),
                opacity 220ms var(--ease),
                scale 220ms var(--ease);
        }

        /* First open: appear in place without sliding */
        .nav-surface[data-jump] {
            transition: opacity 220ms var(--ease), scale 220ms var(--ease);
        }

        .nav-menu {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            z-index: 1;
            translate: var(--menu-x, 0) 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity var(--menu-time) var(--ease), visibility 0s linear var(--menu-time);
        }

        /* Bridge the gap so the pointer can travel from the button to the menu */
        .nav-menu::before {
            content: "";
            position: absolute;
            inset: -0.75rem 0 100% 0;
        }

        .nav-menu[data-active] {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity var(--menu-time) var(--ease) 60ms;
        }

        .nav-menu[data-active] .mega {
            animation: mega-in var(--enter) var(--sheet-ease) both;
        }

        .nav-menu[data-from="left"] .mega {
            --mega-from: -1.5rem;
        }

        .nav-menu[data-from="right"] .mega {
            --mega-from: 1.5rem;
        }

        .mega {
            display: flex;
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

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

        .mega-side {
            width: 17rem;
            padding: var(--space-6) var(--space-5);
            background: var(--warm);
        }

        .mega-main .mega-list {
            width: 17rem;
        }

        .mega-side .mega-note {
            margin-inline: 0.25rem;
        }

        .mega-main .mega-list-2 {
            grid-template-columns: repeat(2, 15.5rem);
            grid-template-rows: repeat(4, auto);
            grid-auto-flow: column;
            column-gap: var(--space-3);
            width: auto;
        }

        /* Without JS, fall back to a plain hover menu */
        .nav:not([data-enhanced]) .nav-group {
            position: relative;
        }

        .nav:not([data-enhanced]) .nav-group:hover > .nav-menu,
        .nav:not([data-enhanced]) .nav-group:focus-within > .nav-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            border: var(--line);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-lg);
        }
    }

    @keyframes mega-in {
        from {
            opacity: 0;
            translate: var(--mega-from, 0) 0.75rem;
            filter: blur(4px);
        }
    }

    /* Shared entrance, used wherever something arrives on screen */
    @keyframes enter {
        from {
            opacity: 0;
            translate: 0 1.5rem;
            filter: blur(6px);
        }
    }

    /* Same entrance, without the blur: for the hero, which is part of LCP.
       filter is not a compositor-only property, so animating it forces a
       main-thread repaint on every frame - fine below the fold, not for the
       element the browser is timing. */
    @keyframes hero-enter {
        from {
            opacity: 0;
            translate: 0 1rem;
        }
    }

    /* Not enough room beside the full nav until 1280px; Contact is in the nav */
    @media (min-width: 1100px) and (max-width: 1279.98px) {
        .header-cta {
            display: none;
        }
    }

    /* ---------- Navigation: small screens (opened from the bottom bar) ---------- */

    .menu-top,
    .nav-head {
        display: none;
    }

    .mega-note {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-4);
        padding: var(--space-3);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text-muted);
        font-size: var(--text-xs);
        line-height: 1.45;
    }

    .mega-note .icon {
        margin-top: 0.1em;
        color: var(--brand);
    }

    @media (max-width: 1099.98px) {
        /* The whole menu slides in from the right */
        .nav {
            position: fixed;
            top: var(--header-height);
            right: 0;
            bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));
            left: 0;
            z-index: var(--z-menu);
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: var(--space-3) var(--gutter) var(--space-7);
            background: var(--warm);
            border-top: var(--line);
            translate: 100% 0;
            visibility: hidden;
            transition:
                translate var(--sheet-time) var(--sheet-ease),
                visibility 0s linear var(--sheet-time);
        }

        .nav[data-open] {
            translate: 0 0;
            visibility: visible;
            transition: translate var(--sheet-time) var(--sheet-ease);
        }

        /* While a section is open, its own screen scrolls instead */
        .nav[data-sub-open] {
            overflow-y: hidden;
        }

        .nav-list,
        .nav-extra {
            max-width: 40rem;
            margin-inline: auto;
        }

        /* The list moves aside while a section screen is open.
           Only the links move: the section screens live inside the list items. */
        .nav-list > li > .nav-link,
        .nav-extra {
            transition:
                translate var(--sheet-time) var(--sheet-ease),
                opacity 350ms var(--ease);
        }

        .nav[data-sub-open] .nav-list > li > .nav-link,
        .nav[data-sub-open] > .nav-extra {
            translate: -30% 0;
            opacity: 0;
        }

        .nav[data-sub-open] .nav-list > li {
            border-color: transparent;
        }

        .nav-list {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        .nav-list > li {
            border-bottom: var(--line);
        }

        /* Items slide in one after another when the menu opens */
        .nav[data-open] .nav-list > li > .nav-link,
        .nav[data-open] > .nav-extra {
            animation: sheet-item 650ms var(--sheet-ease) backwards;
        }

        .nav[data-open] .nav-list > li:nth-child(1) > .nav-link { animation-delay: 140ms; }
        .nav[data-open] .nav-list > li:nth-child(2) > .nav-link { animation-delay: 200ms; }
        .nav[data-open] .nav-list > li:nth-child(3) > .nav-link { animation-delay: 260ms; }
        .nav[data-open] .nav-list > li:nth-child(4) > .nav-link { animation-delay: 320ms; }
        .nav[data-open] .nav-list > li:nth-child(5) > .nav-link { animation-delay: 380ms; }
        .nav[data-open] .nav-list > li:nth-child(6) > .nav-link { animation-delay: 440ms; }
        .nav[data-open] > .nav-extra { animation-delay: 500ms; }

        .nav-link {
            justify-content: space-between;
            width: 100%;
            padding: 1rem 0.25rem;
            border-radius: 0;
            color: var(--heading);
            font-size: var(--text-xl);
            font-weight: var(--weight-semibold);
        }

        .nav-link:hover,
        .nav-toggle[aria-expanded="true"] {
            background: none;
            color: var(--heading);
        }

        /* The chevron points right: sections open as their own screen */
        .nav-link .icon,
        .nav-toggle[aria-expanded="true"] .icon {
            width: 1.25rem;
            height: 1.25rem;
            color: var(--text-muted);
            rotate: -90deg;
        }

        /* Section screens slide in over the list */
        .nav-menu {
            position: absolute;
            inset: 0;
            z-index: 1;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: var(--space-3) var(--gutter) var(--space-7);
            background: var(--warm);
            translate: 100% 0;
            visibility: hidden;
            transition:
                translate var(--sheet-time) var(--sheet-ease),
                visibility 0s linear var(--sheet-time);
        }

        .nav-toggle[aria-expanded="true"] + .nav-menu {
            translate: 0 0;
            visibility: visible;
            transition: translate var(--sheet-time) var(--sheet-ease);
        }

        .menu-top,
        .mega {
            max-width: 40rem;
            margin-inline: auto;
        }

        .nav-head {
            display: flex;
            justify-content: flex-end;
            margin-bottom: var(--space-2);
        }

        .menu-top {
            display: grid;
            gap: var(--space-1);
            margin-bottom: var(--space-4);
        }

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

        .menu-back {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            width: fit-content;
            margin-left: -0.5rem;
            padding: 0.5rem;
            border-radius: var(--radius-full);
            color: var(--text-muted);
            font-size: var(--text-sm);
            font-weight: var(--weight-medium);
        }

        .menu-back:hover {
            background: var(--warm-strong);
            color: var(--heading);
        }

        .menu-heading {
            color: var(--heading);
            font-size: var(--text-2xl);
            font-weight: var(--weight-semibold);
            letter-spacing: -0.015em;
        }

        .nav-toggle[aria-expanded="true"] + .nav-menu .mega > * {
            animation: sheet-item 650ms var(--sheet-ease) backwards;
            animation-delay: 140ms;
        }

        .nav-toggle[aria-expanded="true"] + .nav-menu .mega > :nth-child(2) {
            animation-delay: 240ms;
        }

        .mega-main {
            padding: 0 0 var(--space-5);
        }

        .mega-side {
            padding: var(--space-4);
            border-radius: var(--radius);
            background: var(--warm-strong);
        }

        .mega-link:hover,
        .mega-link:focus-visible {
            background: var(--warm-strong);
        }

        .mega-side .mega-link:hover,
        .mega-side .mega-link:focus-visible {
            background: rgb(18 21 29 / 0.05);
        }

        .mega-main > .mega-label:first-child {
            margin-top: 0;
        }

        .mega-label {
            margin-bottom: var(--space-1);
            padding-inline: 0;
        }

        /* A thin line between items makes the long list easier to scan */
        .mega-list li + li {
            border-top: var(--line);
        }

        .mega-side .mega-list li + li {
            border-top-color: var(--border-strong);
        }

        .mega-link {
            padding: 0.7rem 0.5rem;
            border-radius: var(--radius-sm);
        }

        .mega-title {
            font-size: var(--text-base);
        }

        .mega-list-2 {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        }

        .nav-extra {
            display: grid;
            justify-items: start;
            gap: var(--space-5);
            margin-top: var(--space-6);
        }

        .nav-phone {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--heading);
            font-weight: var(--weight-semibold);
            text-decoration: none;
        }

        body[data-menu-open] {
            overflow: hidden;
        }
    }

    @keyframes sheet-item {
        from {
            opacity: 0;
            translate: 1.5rem 0;
        }
    }

    @media (max-width: 359.98px) {
        .header-cta {
            display: none;
        }
    }

    .menu-close {
        margin-right: -0.5rem;
    }

    /* ---------- Bottom bar (small screens) ---------- */

    .bottom-bar {
        --bar-from: 1;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-bar);
        isolation: isolate;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: var(--line);
    }

    .bottom-bar-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: var(--bottom-bar-height);
    }

    .bottom-bar-link {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        width: 100%;
        height: 100%;
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--fast) var(--ease);
    }

    .bar-icon {
        display: grid;
        place-items: center;
        width: 3.25rem;
        height: 1.9rem;
        border-radius: var(--radius-full);
        transition: background-color var(--base) var(--ease);
    }

    .bar-label {
        font-size: 0.6875rem;
        font-weight: var(--weight-medium);
        letter-spacing: 0.005em;
        line-height: 1;
    }

    .bottom-bar-link .icon {
        width: 1.3rem;
        height: 1.3rem;
        stroke-width: 1.9;
    }

    .bottom-bar-link:hover,
    .bottom-bar-link[aria-expanded="true"] {
        color: var(--heading);
    }

    .bottom-bar-link:active .bar-icon {
        background: var(--warm-strong);
    }

    .bottom-bar-link[aria-current="page"] {
        color: var(--heading);
    }

    .bottom-bar-link[aria-current="page"] .icon {
        color: var(--brand);
    }

    /* A short line on the bar's top edge marks the current page */
    .bottom-bar-link[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: -1px;
        width: 2.25rem;
        height: 2px;
        border-radius: var(--radius-full);
        background: var(--brand);
    }

    /* Menu button: four squares, like the logo, that fold into a close mark */
    .menu-icon {
        position: relative;
        display: block;
        width: 1.3rem;
        height: 1.3rem;
        transition: rotate 450ms var(--ease-out), scale 450ms var(--ease-out);
    }

    .menu-icon span {
        position: absolute;
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 0.15rem;
        background: currentColor;
        transition:
            translate 450ms var(--ease-out),
            border-radius 450ms var(--ease-out),
            background-color var(--fast) var(--ease);
    }

    .menu-icon span:nth-child(1) { top: 0; left: 0.05rem; }
    .menu-icon span:nth-child(2) { top: 0; right: 0.05rem; background: var(--brand); }
    .menu-icon span:nth-child(3) { bottom: 0; left: 0.05rem; }
    .menu-icon span:nth-child(4) { bottom: 0; right: 0.05rem; }

    .menu-button[aria-expanded="true"] .menu-icon {
        rotate: 45deg;
        scale: 0.9;
    }

    .menu-button[aria-expanded="true"] .menu-icon span {
        border-radius: var(--radius-full);
    }

    .menu-label-open,
    .menu-button[aria-expanded="true"] .bar-label {
        display: none;
    }

    .menu-button[aria-expanded="true"] .menu-label-open {
        display: block;
    }

    @media (min-width: 1100px) {
        .bottom-bar {
            display: none;
        }
    }

    @media (max-width: 1099.98px) {
        body {
            padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));
        }
    }

    /* ---------- FAQ ---------- */

    .faq {
        display: grid;
        gap: var(--space-3);
    }

    /* FAQs split under topic headings: a wider gap between topics than between questions */
    .faq-groups {
        display: grid;
        gap: var(--space-8);
    }

    .faq-groups section {
        display: grid;
        gap: var(--space-4);
    }

    .faq-groups h3 {
        scroll-margin-top: calc(var(--header-height) + var(--space-6));
    }

    .faq-item {
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
    }

    .faq-item[open] {
        border-color: var(--border-strong);
        box-shadow: var(--shadow);
    }

    .faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: 1.05rem 1.25rem;
        color: var(--heading);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        cursor: pointer;
        list-style: none;
        border-radius: var(--radius);
    }

    .faq-item summary::-webkit-details-marker {
        display: none;
    }

    .faq-item summary .icon {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0.3rem;
        border-radius: var(--radius-full);
        background: var(--surface-muted);
        color: var(--heading);
        transition: rotate var(--base) var(--ease), background-color var(--base) var(--ease);
    }

    .faq-item[open] summary .icon {
        rotate: 180deg;
        background: var(--heading);
        color: #fff;
    }

    .faq-answer {
        padding: 0 1.25rem 1.25rem;
        color: var(--text-muted);
    }

    .faq-answer > * + * {
        margin-top: var(--space-3);
    }

    @supports (interpolate-size: allow-keywords) {
        .faq-item {
            interpolate-size: allow-keywords;
        }

        .faq-item::details-content {
            height: 0;
            overflow: clip;
            transition:
                height var(--base) var(--ease),
                content-visibility var(--base) allow-discrete;
        }

        .faq-item[open]::details-content {
            height: auto;
        }
    }

    /* ---------- Slider ---------- */

    .slider {
        position: relative;
    }

    .slider-track {
        position: relative;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--slide-width, min(85%, 22rem));
        gap: var(--space-4);
        margin: -8px;
        padding: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 8px;
        scrollbar-width: none;
        border-radius: var(--radius-lg);
    }

    /* While slider.js is driving the scroll position itself */
    .slider-track[data-gliding] {
        scroll-snap-type: none;
    }

    .slider-track::-webkit-scrollbar {
        display: none;
    }

    .slider-track > * {
        display: flex;
        scroll-snap-align: start;
    }

    .slider-track > * > * {
        flex: 1;
    }

    /* Every card in a slider gives its title and text the same number of lines,
       so the cards line up whatever the content length. Paired with the fixed
       character limits in the template. */
    .slider-track .card-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .slider-track .card-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .slider-wide {
        --slide-width: min(90%, 30rem);
    }

    .slider-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }

    .slider[data-static] .slider-controls {
        display: none;
    }

    .slider-button {
        --size: 2.25rem;
        border-color: var(--border);
        background: var(--surface);
        color: var(--heading);
    }

    .slider-button .icon {
        width: 1rem;
        height: 1rem;
    }

    .slider-button:hover:not(:disabled) {
        border-color: var(--heading);
        background: var(--heading);
        color: #fff;
    }

    .slider-button:disabled {
        opacity: 0.4;
        cursor: default;
    }

    .slider-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .slider-dot {
        display: grid;
        place-items: center;
        width: 1.25rem;
        height: 1.5rem;
    }

    .slider-dot::before {
        content: "";
        width: 0.4rem;
        height: 0.4rem;
        border-radius: var(--radius-full);
        background: var(--border-strong);
        transition: width var(--base) var(--ease), background-color var(--base) var(--ease);
    }

    .slider-dot:hover::before {
        background: var(--text-muted);
    }

    .slider-dot[aria-current="true"] {
        width: 2rem;
    }

    .slider-dot[aria-current="true"]::before {
        width: 1.4rem;
        background: var(--heading);
    }

    /* ---------- Modal ---------- */

    .modal {
        width: min(40rem, 100% - 2 * var(--gutter));
        max-width: none;
        max-height: min(88dvh, 46rem);
        margin: auto;
        padding: 0;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow-lg);
    }

    .modal[open] {
        display: flex;
        flex-direction: column;
        animation: modal-in var(--base) var(--ease-out);
    }

    .modal::backdrop {
        background: rgb(18 21 29 / 0.5);
    }

    .modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-6) var(--space-3);
    }

    .modal-body {
        display: grid;
        gap: var(--space-4);
        padding: 0 var(--space-6) var(--space-6);
        overflow-y: auto;
        color: var(--text-muted);
    }

    .modal-foot {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-6);
        border-top: var(--line);
    }

    .modal-title {
        font-size: var(--text-2xl);
    }

    body:has(.modal[open]) {
        overflow: hidden;
    }

    @keyframes modal-in {
        from {
            opacity: 0;
            scale: 0.97;
        }
    }

    /* ---------- Toast messages ---------- */

    .toasts {
        position: fixed;
        top: calc(var(--header-height) + var(--space-3));
        right: var(--gutter);
        z-index: var(--z-toast);
        display: grid;
        gap: var(--space-2);
        width: min(24rem, 100% - 2 * var(--gutter));
    }

    .toast {
        --toast-color: var(--info);
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        animation: toast-in var(--base) var(--ease-out);
        transition: opacity var(--base) var(--ease), translate var(--base) var(--ease);
    }

    .toast > .icon {
        margin-top: 0.1em;
        color: var(--toast-color);
    }

    .toast-success {
        --toast-color: var(--success);
    }

    .toast-warning {
        --toast-color: var(--warning);
    }

    .toast-error {
        --toast-color: var(--error);
    }

    .toast-body {
        flex: 1;
        font-size: var(--text-sm);
    }

    .toast-title {
        display: block;
        color: var(--heading);
    }

    .toast .icon-button {
        --size: 2rem;
        margin: -0.35rem -0.35rem 0 0;
    }

    .toast[data-leaving] {
        opacity: 0;
        translate: 1rem 0;
    }

    @keyframes toast-in {
        from {
            opacity: 0;
            translate: 1rem 0;
        }
    }

    /* ---------- Cookie banner ---------- */

    .cookie-banner {
        position: fixed;
        bottom: var(--gutter);
        left: var(--gutter);
        z-index: var(--z-toast);
        display: grid;
        gap: var(--space-3);
        width: min(24rem, 100% - 2 * var(--gutter));
        padding: var(--space-5);
        border: var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        animation: modal-in var(--base) var(--ease-out);
    }

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

    .cookie-banner-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-base);
    }

    .cookie-banner-title .icon {
        color: var(--brand);
    }

    .cookie-banner p {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .cookie-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .cookie-actions .button {
        white-space: normal;
    }

    .link-button {
        display: inline;
        padding: 0;
        text-align: left;
        color: var(--green);
        font-size: inherit;
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .link-button:hover {
        color: var(--green-dark);
    }

    .cookie-group {
        padding: var(--space-4);
        border: var(--line);
        border-radius: var(--radius);
    }

    .cookie-group-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .cookie-group-name {
        display: block;
        color: var(--heading);
        font-weight: var(--weight-semibold);
    }

    .cookie-group-text {
        display: block;
        font-size: var(--text-sm);
    }

    .cookie-group details {
        margin-top: var(--space-3);
        font-size: var(--text-sm);
    }

    .cookie-group summary {
        width: fit-content;
        color: var(--green);
        font-weight: var(--weight-semibold);
        cursor: pointer;
    }

    .always-on {
        flex-shrink: 0;
        color: var(--green);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
    }

    .table-wrap {
        margin-top: var(--space-3);
        overflow-x: auto;
        border: var(--line);
        border-radius: var(--radius-sm);
    }

    .table {
        width: 100%;
        font-size: var(--text-xs);
        text-align: left;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.65rem;
        border-bottom: var(--line);
        vertical-align: top;
    }

    .table th {
        background: var(--surface-muted);
        color: var(--heading);
    }

    .table tr:last-child td {
        border-bottom: 0;
    }

    /* On/off switch */
    .switch {
        position: relative;
        flex-shrink: 0;
        width: 2.75rem;
        height: 1.6rem;
        appearance: none;
        border-radius: var(--radius-full);
        background: var(--border-strong);
        cursor: pointer;
        transition: background-color var(--fast) var(--ease);
    }

    .switch::before {
        content: "";
        position: absolute;
        top: 0.2rem;
        left: 0.2rem;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: var(--radius-full);
        background: #fff;
        box-shadow: var(--shadow-sm);
        transition: translate var(--fast) var(--ease);
    }

    .switch:checked {
        background: var(--green);
    }

    .switch:checked::before {
        translate: 1.15rem 0;
    }

    /* ---------- WhatsApp chat ---------- */

    .chat {
        position: fixed;
        right: var(--gutter);
        bottom: var(--gutter);
        z-index: var(--z-float);
        display: flex;
        align-items: center;
        gap: var(--space-1);
        animation: modal-in var(--menu-time) var(--sheet-ease);
    }

    .chat-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.55rem 1rem 0.55rem 0.7rem;
        border-radius: var(--radius-full);
        background: #0f7a43;
        color: #fff;
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-decoration: none;
        box-shadow: var(--shadow);
        transition: background-color var(--fast) var(--ease);
    }

    .chat-link:hover {
        background: #0b6437;
        color: #fff;
    }

    .chat-hide {
        --size: 2rem;
        border-color: var(--border);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .chat-show {
        --size: 3rem;
        display: grid;
        background: #0f7a43;
        color: #fff;
        box-shadow: var(--shadow);
    }

    .chat-show:hover {
        background: #0b6437;
        color: #fff;
    }

    @media (max-width: 1099.98px) {
        .chat,
        .cookie-banner {
            bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom) + var(--space-3));
        }
    }

    /* Keep the chat out of the way while the cookie banner or menu is showing */
    body:has(.cookie-banner:not([hidden])) .chat,
    body[data-menu-open] .chat,
    body[data-menu-open] .cookie-banner {
        display: none;
    }

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

    .footer {
        padding-top: var(--space-9);
        background: var(--dark);
        color: var(--dark-muted);
        font-size: var(--text-sm);
    }

    .footer-grid {
        display: grid;
        gap: var(--space-7) var(--space-6);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    }

    @media (min-width: 1000px) {
        .footer-grid {
            grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr;
        }
    }

    .footer-title {
        margin-bottom: var(--space-4);
        color: #fff;
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        letter-spacing: 0;
    }

    .footer-list {
        display: grid;
        gap: var(--space-2);
        font-style: normal;
    }

    .footer a,
    .footer .link-button {
        color: var(--dark-muted);
        text-decoration: none;
        transition: color var(--fast) var(--ease);
    }

    .footer a:hover,
    .footer .link-button:hover {
        color: #fff;
    }

    .social-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .social-link {
        border-color: var(--border);
        color: var(--heading);
    }

    .social-link .icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    .social-link:hover {
        border-color: var(--brand);
        background: var(--brand);
        color: #fff;
    }

    .footer .social-link {
        border-color: rgb(255 255 255 / 0.14);
        color: var(--dark-text);
    }

    .footer .social-link:hover {
        border-color: var(--brand);
        background: var(--brand);
        color: #fff;
    }

    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-3);
        margin-top: var(--space-9);
        padding-block: var(--space-5);
        border-top: 1px solid rgb(255 255 255 / 0.08);
    }

    /* ---------- Scroll reveal ---------- */

    .reveal-ready {
        opacity: 0;
        translate: 0 2rem;
        filter: blur(6px);
        transition:
            opacity var(--enter) var(--sheet-ease),
            translate var(--enter) var(--sheet-ease),
            filter var(--enter) var(--sheet-ease);
        transition-delay: var(--reveal-delay, 0ms);
        pointer-events: none;
    }

    .reveal-ready.is-visible {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
    }

    /* Items arriving together come in one after another. reveal.js decides
       which items share a batch and numbers them. */
    .reveal-1 { --reveal-delay: calc(var(--stagger) * 1); }
    .reveal-2 { --reveal-delay: calc(var(--stagger) * 2); }
    .reveal-3 { --reveal-delay: calc(var(--stagger) * 3); }
    .reveal-4 { --reveal-delay: calc(var(--stagger) * 4); }
    .reveal-5 { --reveal-delay: calc(var(--stagger) * 5); }


    /* ==========================================================================
       Hero, moved out of pages/home.css on 18 September 2026 so every page can use
       it. @keyframes enter and the --enter / --stagger / --sheet-ease tokens were
       already here and in tokens.css, loaded on every page, so only the rules that
       apply them were stranded. The stacked browser mockups stay in home.css: they
       are the homepage's own and a subpage should not copy them.
       Appended at the end because these were written in @layer pages, which outranks
       components, so equal-specificity rules keep winning on source order.
       ========================================================================== */

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

    .hero {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
        background: var(--warm);
    }

    /* Faint grid that fades out towards the edges */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            linear-gradient(var(--warm-strong) 1px, transparent 1px),
            linear-gradient(90deg, var(--warm-strong) 1px, transparent 1px);
        background-size: 64px 64px;
        -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 20%, transparent 75%);
        mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 20%, transparent 75%);
    }

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

    @media (min-width: 1000px) {
        .hero-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        }
    }

    .hero-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }

    .hero-text > * {
        animation: hero-enter var(--enter-hero) var(--sheet-ease) backwards;
    }

    .hero-text > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
    .hero-text > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
    .hero-text > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
    .hero-text > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
    .hero-text > :nth-child(n + 6) { animation-delay: calc(var(--stagger) * 5); }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.35rem 0.85rem 0.35rem 0.6rem;
        border: var(--line);
        border-radius: var(--radius-full);
        background: rgb(255 255 255 / 0.8);
        color: var(--heading);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        text-decoration: none;
        box-shadow: var(--shadow-sm);
        transition: border-color var(--base) var(--ease);
    }

    .hero-badge > .icon {
        color: var(--text-muted);
        transition: translate var(--base) var(--ease);
    }

    .hero-badge:hover {
        border-color: var(--border-strong);
        color: var(--heading);
    }

    .hero-badge:hover > .icon {
        translate: 2px 0;
    }

    .hero-title {
        max-width: 16ch;
    }

    .hero-kicker {
        display: block;
        margin-bottom: var(--space-3);
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        letter-spacing: 0.02em;
    }

    .hero-lead {
        max-width: 34rem;
        color: var(--text-muted);
        font-size: var(--text-lg);
    }

    .hero-stats {
        display: grid;
        gap: var(--space-3);
        width: 100%;
        margin-top: var(--space-2);
    }

    .hero-stats .stat {
        flex-direction: row-reverse;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .hero-stats .stat dd {
        font-size: var(--text-base);
    }

    .hero-stats .stat dt {
        font-size: var(--text-xs);
        text-align: right;
    }

    /* Wide enough to sit side by side: stack the value over its label again.
       auto-fit so the row stays full whether there are two stats or three. */
    @media (min-width: 30rem) {
        .hero-stats {
            grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        }

        .hero-stats .stat {
            flex-direction: column-reverse;
            align-items: flex-start;
            gap: var(--space-1);
            padding: var(--space-4);
        }

        .hero-stats .stat dd {
            font-size: var(--text-2xl);
        }

        .hero-stats .stat dt {
            text-align: left;
        }
    }


    /* The browser frame itself is shared: a subpage hero can show one screenshot
       in it. The stacking that puts two of them behind each other stays in
       pages/home.css, since that arrangement is the homepage's own. */

    .browser {
        overflow: hidden;
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-lg);
    }

    .browser-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 1.75rem;
        padding-inline: 0.75rem;
        border-bottom: var(--line);
        background: var(--surface-muted);
    }

    .browser-bar span {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: var(--radius-full);
        background: var(--border-strong);
    }

    .browser img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: top;
    }

    /* A hero figure sits beside .hero-text rather than inside it, so it needs its
       own entrance. Same timing as the homepage's visual. */
    .hero-figure {
        animation: hero-enter var(--enter-hero) calc(var(--stagger) * 3) var(--sheet-ease) backwards;
    }


    /* Centred hero for child pages. The two-column .hero-grid assumes a visual
       beside the text; child pages have no image of their own, so they centre
       the text instead. Keeps the same entrance and stagger as .hero-text. */
    .hero-center {
        align-items: center;
        max-width: var(--width-narrow);
        margin-inline: auto;
        text-align: center;
    }

    .hero-center .hero-stats,
    .hero-center .actions {
        justify-content: center;
    }

    .hero-center .hero-stats {
        display: flex;
        flex-wrap: wrap;
    }


    /* Two browser frames stacked, the smaller one overlapping at the bottom left.
       Shared so a subpage hero can use the same arrangement. .hero-note, the
       floating stat card, stays in pages/home.css: it is the homepage's own. */

    /* Stacked browser windows showing real projects */
    .hero-visual {
        position: relative;
        padding: 0 0 12% 8%;
        animation: hero-enter var(--enter-hero) calc(var(--stagger) * 3) var(--sheet-ease) backwards;
    }


    .browser-main {
        position: relative;
        z-index: 1;
    }

    .browser-back {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 52%;
    }


    /* ==========================================================================
       Page sections the homepage introduced, shared so every page can use them:
       service list, pricing panel, results stats, help card, reviews and the
       closing call to action. Appended at the end because they were written in
       @layer pages, which outranks components, so .review over .card and
       .button-ghost over .button keep winning on source order.
       ========================================================================== */


    /* ---------- Services ---------- */

    .service-list {
        display: grid;
        gap: var(--space-3);
    }

    /* ---------- Pricing ---------- */

    .pricing {
        display: grid;
        gap: var(--space-7);
        padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
        border-radius: var(--radius-lg);
        background: var(--dark);
        color: var(--dark-muted);
    }

    @media (min-width: 900px) {
        .pricing {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            align-items: center;
        }
    }

    .pricing h2 {
        color: #fff;
    }

    .pricing .lead {
        color: var(--dark-muted);
    }

    .pricing .eyebrow {
        border-color: rgb(255 255 255 / 0.14);
        background: transparent;
        color: #fff;
    }

    .pricing .eyebrow::before {
        box-shadow: 0 0 0 3px rgb(228 77 46 / 0.25);
    }

    .pricing .button-outline {
        border-color: rgb(255 255 255 / 0.2);
        background: transparent;
        color: #fff;
    }

    .pricing .button-outline:hover {
        background: rgb(255 255 255 / 0.08);
    }

    .price-box {
        padding: var(--space-3);
        border: 1px solid rgb(255 255 255 / 0.1);
        border-radius: var(--radius);
        background: var(--dark-surface);
    }

    .price-list {
        display: grid;
    }

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

    @media (max-width: 519.98px) {
        .price {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-1);
        }
    }

    .price + .price {
        border-top: 1px solid rgb(255 255 255 / 0.08);
    }

    .price dt {
        color: #fff;
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    .price dt a {
        color: #fff;
    }

    .price dt span {
        display: block;
        color: var(--dark-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-regular);
    }

    .price dd {
        margin: 0;
        color: #fff;
        font-size: var(--text-2xl);
        font-weight: var(--weight-semibold);
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .price dd small {
        color: var(--dark-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-regular);
        letter-spacing: 0;
    }

    .price-note {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-sm);
        background: rgb(255 255 255 / 0.05);
        color: var(--dark-text);
        font-size: var(--text-sm);
    }

    .price-note .icon {
        color: #6fd3b3;
    }

    /* ---------- Results ---------- */

    .results {
        padding: var(--space-6);
        border: var(--line);
        border-radius: var(--radius-lg);
        background:
            radial-gradient(30rem 18rem at 0% 0%, var(--warm), transparent 70%),
            var(--surface);
    }

    .results .card-head {
        flex-wrap: wrap;
        margin-bottom: var(--space-4);
    }

    .results-lead {
        margin-bottom: var(--space-6);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .results-title {
        font-size: var(--text-xl);
    }

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

    @media (max-width: 519.98px) {
        .results {
            padding: var(--space-5);
        }

        .results-grid .stat {
            padding: var(--space-4);
        }

        .results-grid .stat dd {
            font-size: var(--text-2xl);
        }
    }

    .results-grid .stat {
        padding: var(--space-5);
        border-radius: var(--radius);
        background: var(--surface-muted);
    }

    .results-grid .stat:last-child {
        background: var(--heading);
    }

    .results-grid .stat:last-child dd,
    .results-grid .stat:last-child dt {
        color: #fff;
    }

    /* ---------- FAQ ---------- */

    .help-card {
        align-self: stretch;
        margin-top: var(--space-3);
    }

    cite {
        font-style: normal;
    }

    /* ---------- Testimonials ---------- */

    .review {
        gap: var(--space-5);
    }

    .review-text {
        flex: 1;
        color: var(--heading);
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    .review-author {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-top: var(--space-4);
        border-top: var(--line);
        line-height: var(--leading-snug);
    }

    .review-author a {
        color: var(--green);
    }

    .review-author a:hover {
        color: var(--green-dark);
    }

    /* ---------- Closing call to action ---------- */

    .cta-band {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: grid;
        gap: var(--space-7);
        align-items: center;
        padding: clamp(2rem, 1.25rem + 3.5vw, 4rem);
        border-radius: var(--radius-lg);
        background: var(--dark);
        color: var(--dark-muted);
    }

    .cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(36rem 22rem at 100% 100%, rgb(47 122 102 / 0.38), transparent 70%);
    }

    @media (min-width: 860px) {
        .cta-band {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        }
    }

    .cta-title {
        color: #fff;
        font-size: var(--text-3xl);
    }

    .cta-band p {
        max-width: 32rem;
        font-size: var(--text-lg);
    }

    .cta-image {
        width: 100%;
        max-width: 26rem;
        margin-inline: auto;
        border-radius: var(--radius);
    }

    /* Light version of the closing band, for a note that wants a surface of its
       own without the weight of the dark one. Warm rather than --surface,
       because --surface and --page are both white and the band would vanish.
       Declared after the 860px rule above so the single column wins at every
       width: both selectors are one class, so source order decides. */
    .cta-band-warm {
        grid-template-columns: minmax(0, 1fr);
        margin-top: var(--space-8);
        background: var(--warm);
        color: var(--text);
    }

    /* No radial glow: it belongs to the dark band and reads as a stain on warm. */
    .cta-band-warm::before {
        background: none;
    }

    .cta-band-warm .cta-title {
        color: var(--heading);
    }

    /* Wider than the dark band's 32rem, which is set for a column beside a panel
       rather than a line running the full width of the band. */
    .cta-band-warm p {
        max-width: 52rem;
    }

    .button-ghost {
        border-color: rgb(255 255 255 / 0.2);
        background: transparent;
        color: #fff;
    }

    .button-ghost:hover {
        border-color: rgb(255 255 255 / 0.35);
        background: rgb(255 255 255 / 0.08);
    }


    /* ==========================================================================
       The last of pages/home.css, merged here on 18 September 2026. Every page now
       gets the same components from one file and there are no per-page stylesheets.
       .hero-note and .founder* are still only used by the homepage; they live here
       so a second page can pick them up without moving CSS again.
       ========================================================================== */




    .hero-note {
        position: absolute;
        top: 10%;
        left: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 0.7rem 1.1rem 0.7rem 0.7rem;
        border: var(--line);
        border-radius: var(--radius);
        background: rgb(255 255 255 / 0.92);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: var(--shadow);
        line-height: var(--leading-snug);
    }

    .hero-note-title {
        display: block;
        font-size: var(--text-sm);
    }

    .hero-note-text {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    /* ---------- Why ---------- */

    .why-grid {
        display: grid;
        gap: var(--space-4);
    }

    @media (min-width: 700px) {
        .why-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .why-main {
            grid-column: 1 / -1;
        }
    }

    @media (min-width: 1000px) {
        .why-grid {
            grid-template-columns: 1.3fr 1fr 1fr;
        }

        .why-main {
            grid-column: 1;
            grid-row: 1 / span 2;
        }
    }

    /* The tall left card sets the row height, so the short cards beside it are
       stretched. Centring their content spreads that slack instead of pooling
       it all under the last line. */
    .why-grid > .card:not(.why-main) {
        justify-content: center;
    }

    .why-main {
        gap: var(--space-4);
        background:
            radial-gradient(28rem 16rem at 100% 0%, var(--warm), transparent 70%),
            var(--surface);
    }

    .why-main .card-title {
        font-size: var(--text-2xl);
    }

    .why-main .check-list {
        margin-block: var(--space-2);
    }

    /* ---------- Founder ---------- */

    .founder {
        display: grid;
        gap: var(--space-7);
        align-items: center;
    }

    @media (min-width: 900px) {
        .founder {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
            gap: clamp(2.5rem, 5vw, 5rem);
        }
    }

    .founder-quote {
        display: grid;
        gap: var(--space-5);
        padding: var(--space-7);
        border-radius: var(--radius-lg);
        background: var(--warm);
        border: 1px solid var(--warm-strong);
    }

    .founder-quote-mark {
        width: 2.25rem;
        height: 2.25rem;
        color: var(--green);
    }

    .founder-quote blockquote {
        color: var(--heading);
        font-size: var(--text-xl);
        line-height: 1.5;
        letter-spacing: -0.01em;
    }

    .founder-quote figcaption {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        line-height: var(--leading-snug);
    }

    /* ---------- Breadcrumb ---------- */

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .breadcrumb li + li::before {
        content: "/";
        margin-right: var(--space-2);
    }

    .breadcrumb a {
        color: inherit;
    }

    .breadcrumb a:hover {
        color: var(--green);
    }

    /* ---------- Pagination ---------- */

    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
        margin-top: var(--space-8);
    }

    .pagination a,
    .pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        padding-inline: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        color: var(--heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        text-decoration: none;
        transition:
            border-color var(--fast) var(--ease),
            color var(--fast) var(--ease);
    }

    .pagination a:hover {
        border-color: var(--green);
        color: var(--green);
    }

    .pagination [aria-current="page"] {
        border-color: var(--heading);
        background: var(--heading);
        color: #fff;
    }

    .pagination .pagination-gap {
        border-color: transparent;
    }

    /* ---------- Card lists ---------- */

    /* Cards in a grid are the same height, with the link pinned to the bottom */
    .grid > li {
        display: grid;
    }

    .card-meta {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }
}