/* Pop Hasta: same family as Pop Hasta Labs (Space Grotesk, Inter, ink and slate),
   with its own marigold accent and a precision, made-to-measure feel. */

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin-wght-normal.87c506d88b9f.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2");
    font-weight: 100 800;
    font-display: swap;
}

:root {
    --ink: #0b1220;
    --ink-2: #1e293b;
    --muted: #5d6b82;
    --line: #e3e8ee;
    --line-strong: #cbd5e1;
    --paper: #ffffff;
    --tint: #f8fafc;
    --soft: #f5f7fa;
    --grid: rgba(11, 18, 32, 0.05);

    /* Marigold, bright to deep. Text and button fills stay at 700 or darker so they pass contrast. */
    --accent-50: #fff7ed;
    --accent-100: #ffedd5;
    --accent-500: #f97316;
    --accent-600: #ea580c;
    --accent-700: #c2410c;
    --accent-800: #9a3412;
    --accent: var(--accent-700);
    --accent-hover: var(--accent-800);
    --accent-bright: var(--accent-500);
    --accent-soft: var(--accent-50);
    --accent-fill: linear-gradient(180deg, #d4480e, #b93c0b);
    --accent-fill-hover: linear-gradient(180deg, #c2410c, #9a3412);

    --night: #0b1220;
    --night-line: #26324a;
    --night-text: #e8edf5;
    --night-muted: #9aa8bf;

    --scrs: #077853;
    --scrs-soft: #e7f8f0;
    --danger: #b42318;
    --danger-soft: #fef3f2;

    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --radius: 16px;
    --radius-lg: 24px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 4px 12px -6px rgba(11, 18, 32, 0.14);
    --shadow: 0 2px 6px rgba(11, 18, 32, 0.04), 0 24px 60px -30px rgba(11, 18, 32, 0.42);
    --shadow-lg: 0 4px 10px rgba(11, 18, 32, 0.04), 0 40px 90px -36px rgba(11, 18, 32, 0.5);
    --glow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 28px -12px rgba(194, 65, 12, 0.75);
}

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 4px;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 5.2vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

p {
    margin: 0 0 1em;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    background: var(--ink);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
}

/* Layout */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.narrow {
    max-width: 820px;
}

.section {
    --section-bg: var(--paper);
    padding: clamp(72px, 10vw, 128px) 0;
}

.section--flush-top {
    padding-top: 0;
}

/* Like Pop Hasta Labs: white pages with light tinted bands, dark only in the footer. */
.section--soft {
    --section-bg: var(--soft);
    background: var(--soft);
}

.section--tint,
.page-hero--tint {
    background: var(--tint);
}

/* A soft green glow behind the scene, for the sections about rules and safety. */
.section--glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.section--glow::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -12%;
    top: 50%;
    width: min(960px, 90vw);
    aspect-ratio: 1;
    translate: 0 -50%;
    background: radial-gradient(closest-side, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0));
    pointer-events: none;
}

.section__head {
    max-width: 780px;
    margin-bottom: clamp(36px, 5vw, 56px);
}

.section__head > p:not(.kicker) {
    font-size: 1.12rem;
    color: var(--muted);
}

.section__head p:last-child {
    margin-bottom: 0;
}

.section__head--split {
    max-width: none;
    display: grid;
    gap: 16px 64px;
    align-items: end;
}

.section__head--split h2 {
    margin-bottom: 0;
}

.section__more {
    margin: 48px 0 0;
}

.section--wall .section__more {
    text-align: center;
}

.grid {
    display: grid;
    gap: 20px;
}

.split {
    display: grid;
    gap: 48px;
    align-items: center;
}

.split__copy > p:not(.kicker) {
    color: var(--ink-2);
}

/* Ticked lists: any list in a split section's copy, or .tick-list anywhere. */
.tick-list,
.split__copy ul {
    display: grid;
    gap: 10px;
    margin: 0 0 1.4em;
    padding: 0;
    list-style: none;
}

.tick-list li,
.split__copy ul li {
    position: relative;
    padding-left: 32px;
    color: var(--ink-2);
}

.tick-list li::before,
.split__copy ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--scrs-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23077853' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

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

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

    .split {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 80px;
    }

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

    /* Scene on the left, words on the right. */
    .split--flipped {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .split--flipped .split__scene {
        order: -1;
    }

    .section__head--split {
        grid-template-columns: 1.1fr 1fr;
    }
}

/* Type helpers */

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 20px;
}

.kicker::before {
    content: "";
    width: 22px;
    height: 8px;
    background:
        linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat,
        repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 5px) left bottom / 100% 100% no-repeat;
}

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

.kicker a:hover {
    text-decoration: underline;
}

.lede {
    font-size: clamp(1.12rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    color: var(--muted);
    max-width: 640px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.text-link .icon {
    transition: translate 0.25s var(--ease);
}

.text-link:hover {
    color: var(--accent-hover);
}

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

/* The measuring underline: a ruler drawn under the words that matter. */
.measure {
    position: relative;
    white-space: nowrap;
}

.measure::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 0.3em;
    background:
        linear-gradient(var(--accent-bright), var(--accent-bright)) left bottom / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, var(--accent-bright) 0 2px, transparent 2px 10px) left bottom / 100% 100% no-repeat;
    transform-origin: left center;
}

.js .measure::after {
    transform: scaleX(0);
    transition: transform 1.2s var(--ease) 0.25s;
}

.js .measure.is-drawn::after {
    transform: scaleX(1);
}

/* Buttons and chips */

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: 600 0.98rem/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.button .icon {
    transition: translate 0.25s var(--ease);
}

.button:hover {
    transform: translateY(-1px);
}

.button:hover .icon:last-child {
    translate: 2px 0;
}

.button:active {
    transform: translateY(1px);
}

.button--primary {
    background: var(--accent-fill);
    color: #fff;
    box-shadow: var(--glow);
}

.button--primary:hover {
    background: var(--accent-fill-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 34px -12px rgba(194, 65, 12, 0.8);
}

.button--ghost {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.button--ghost:hover {
    border-color: var(--ink);
}

.button--light {
    background: #fff;
    color: var(--accent-800);
    box-shadow: 0 14px 30px -14px rgba(11, 18, 32, 0.5);
}

.button--light:hover {
    background: var(--accent-50);
}

.button--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.button--outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

.button--large {
    min-height: 54px;
    padding: 14px 26px;
    border-radius: 14px;
    font-size: 1.02rem;
}

.button--small {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.92rem;
}

.button--block {
    width: 100%;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: 500 0.98rem/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.chip:hover {
    border-color: var(--accent);
    background: var(--accent-50);
    color: var(--accent);
}

.chip-list .chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    background: rgba(148, 163, 184, 0.16);
    color: inherit;
}

.tag--client {
    background: rgba(249, 115, 22, 0.14);
    color: var(--accent);
}

/* Family bar */

.family-bar {
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
}

.family-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}

.family-bar p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.family-bar a {
    color: var(--ink-2);
    text-decoration: none;
}

.family-bar a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.family-bar__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.family-bar__current {
    color: var(--ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.family-bar__current::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-bright);
}

.family-bar__role {
    color: var(--muted);
    font-weight: 400;
}

/* FRS Luma is a partner, not family (founder 11-06): it sits after a bar, under its own label. */
.family-bar__sep {
    color: var(--muted);
}

.family-bar__partner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.family-bar__clocks {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.family-bar__clocks time {
    color: var(--ink);
    margin-left: 4px;
}

.family-bar__end {
    display: flex;
    align-items: center;
    gap: 18px;
}

.family-bar .family-bar__social {
    gap: 12px;
    flex-wrap: nowrap;
}

.family-bar__social a {
    display: inline-flex;
}

.family-bar__social .icon {
    width: 17px;
    height: 17px;
}

@media (max-width: 1180px) {
    .family-bar__clocks {
        display: none !important;
    }
}

@media (max-width: 860px) {
    .family-bar__label,
    .family-bar__role {
        display: none !important;
    }

    /* The family's label goes on a small screen; Luma keeps "UAE Partner", so it never reads as family. */
    .family-bar .family-bar__label--partner {
        display: inline !important;
    }
}

/* A phone can't fit it all on one line: the family, then Luma on a line of its own, so the bar would only dangle. */
@media (max-width: 560px) {
    .family-bar__sep {
        display: none;
    }

    .family-bar__partner {
        flex-basis: 100%;
    }
}

/* Header and navigation */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
}

.brand {
    text-decoration: none;
    color: var(--ink);
}

.logo {
    display: block;
    width: auto;
    height: 34px;
}

@media (max-width: 400px) {
    .logo {
        height: 28px;
    }
}

/* The smallest phones: logo, button and menu still fit on one line. */
@media (max-width: 360px) {
    .logo {
        height: 24px;
    }

    .site-nav__quick {
        padding-inline: 10px;
        font-size: 0.84rem;
    }
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav__quick {
    display: none;
}

.site-nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list a:not(.button) {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
}

.site-nav__list a:not(.button):hover,
.site-nav__list a[aria-current="page"] {
    color: var(--accent);
}

.site-nav__cta {
    margin-left: 10px;
}

@media (max-width: 960px) {
    .site-nav__toggle {
        display: inline-flex;
    }

    .site-nav__quick {
        display: inline-flex;
        white-space: nowrap;
    }

    /* Already on the form, so the button would only lead back to it. */
    .page-contact .site-nav__quick {
        display: none;
    }

    .site-nav__list {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px var(--gutter) 20px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .site-nav__list.is-open {
        display: flex;
    }

    .site-nav__list a:not(.button) {
        padding: 14px 4px;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }

    .site-nav__cta {
        margin: 16px 0 0;
    }

    .site-nav__cta .button {
        width: 100%;
    }
}

/* Hero: a ruled sheet fading out from the middle, warm light behind the screens. */

.hero,
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 25%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 65% at 50% 25%, #000 20%, transparent 75%);
    pointer-events: none;
}

.hero {
    padding: clamp(52px, 7vw, 96px) 0 clamp(48px, 6vw, 88px);
}

.hero__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 36% at 50% 74%, rgba(249, 115, 22, 0.24), transparent 70%),
        radial-gradient(30% 34% at 10% 82%, rgba(99, 102, 241, 0.14), transparent 70%),
        radial-gradient(30% 34% at 90% 66%, rgba(16, 185, 129, 0.13), transparent 70%);
}

.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero__copy .kicker {
    padding: 7px 14px 7px 12px;
    border: 1px solid rgba(234, 88, 12, 0.22);
    border-radius: 999px;
    background: rgba(255, 247, 237, 0.92);
    box-shadow: var(--shadow-sm);
}

.hero__title {
    max-width: 20ch;
    font-size: clamp(2.6rem, 6vw, 5.1rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.hero__title .measure {
    background: linear-gradient(100deg, var(--accent-800), var(--accent-700) 45%, var(--accent-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* A slimmer ruler at this size, so it sits between the lines instead of on them. */
.hero__title .measure::after {
    bottom: -0.04em;
    height: 0.16em;
}

.hero__copy .lede {
    margin-inline: auto;
}

.hero__copy .button-row {
    justify-content: center;
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--ink-2);
}

.hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero__facts .icon {
    width: 20px;
    height: 20px;
    color: var(--accent-600);
}

/* Industry ticker */

.ticker {
    display: flex;
    align-items: center;
    border-block: 1px solid var(--line);
    background: var(--paper);
}

.ticker__label {
    flex: none;
    margin: 0;
    padding: 22px 24px 22px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ticker__window {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: marquee 50s linear infinite;
}

.ticker:hover .ticker__track {
    animation-play-state: paused;
}

/* Each copy carries its own trailing gap, so sliding by half loops without a jump. */
.ticker__list {
    display: flex;
    gap: 48px;
    margin: 0;
    padding: 0 48px 0 0;
    list-style: none;
}

.ticker__list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-2);
    white-space: nowrap;
}

.ticker__list .icon {
    width: 24px;
    height: 24px;
    color: var(--accent-600);
}

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

@media (max-width: 640px) {
    .ticker__label {
        display: none;
    }

    .ticker__window {
        padding: 18px 0;
    }
}

/* Tinted cards. Each tone is a soft fill, its border, a strong colour for icons and a dark ink for text. */

.bento__card--warm,
.build-card--warm {
    --tone-from: #fffaf5;
    --tone-to: #ffedd5;
    --tone-line: rgba(234, 88, 12, 0.18);
    --tone-strong: #ea580c;
    --tone-text: #9a3412;
}

.bento__card--mint,
.build-card--mint {
    --tone-from: #f5fdf9;
    --tone-to: #d1fae5;
    --tone-line: rgba(5, 150, 105, 0.2);
    --tone-strong: #059669;
    --tone-text: #065f46;
}

.bento__card--indigo,
.build-card--indigo {
    --tone-from: #f8f9ff;
    --tone-to: #e0e7ff;
    --tone-line: rgba(79, 70, 229, 0.18);
    --tone-strong: #4f46e5;
    --tone-text: #3730a3;
}

.bento__card--amber,
.build-card--amber {
    --tone-from: #fffdf7;
    --tone-to: #fef3c7;
    --tone-line: rgba(217, 119, 6, 0.22);
    --tone-strong: #d97706;
    --tone-text: #92400e;
}

.bento {
    display: grid;
    gap: 18px;
}

.bento__card,
.build-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--tone-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--tone-from) 10%, var(--tone-to));
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.bento__card:hover,
.build-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

/* Ruler ticks along the foot of every card. */
.bento__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: repeating-linear-gradient(90deg, var(--tone-line) 0 1.5px, transparent 1.5px 12px);
    pointer-events: none;
}

.bento__card {
    min-height: 260px;
}

.bento__card h3,
.build-card h3 {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    margin-bottom: 10px;
    max-width: 24ch;
}

.bento__card p,
.build-card p {
    margin: 0;
    color: var(--ink-2);
    max-width: 54ch;
}

.bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    margin-bottom: 40px;
    border-radius: 15px;
    background: var(--tone-strong);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 24px -12px var(--tone-strong);
}

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

.bento__tag {
    position: absolute;
    top: clamp(24px, 3vw, 36px);
    right: clamp(24px, 3vw, 36px);
    padding: 5px 11px;
    border: 1px dashed var(--tone-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--tone-text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

@media (min-width: 900px) {
    .bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bento__card--wide {
        grid-column: span 2;
    }
}

@media (max-width: 520px) {
    .bento__tag {
        display: none;
    }
}

/* Cards on standard pages: as many across as reads well for the number of cards. */
.card-grid {
    display: grid;
    gap: 18px;
}

.card-grid .text-link {
    margin-top: 20px;
    color: var(--tone-text);
}

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

    .card-grid--3 > :last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1040px) {
    .card-grid:not(.card-grid--2) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card-grid--3 > :last-child {
        grid-column: auto;
    }

    /* Four cards make a bento: wide and narrow, then narrow and wide. */
    .card-grid--4 > :nth-child(1),
    .card-grid--4 > :nth-child(4) {
        grid-column: span 2;
    }
}

/* Checklists: points with an icon, a title, an optional status and a line of detail. */
.checklist--warm {
    --tone-soft: var(--accent-50);
    --tone-strong: #ea580c;
    --tone-text: #9a3412;
}

.checklist--mint {
    --tone-soft: #e7f8f0;
    --tone-strong: #059669;
    --tone-text: #065f46;
}

.checklist--indigo {
    --tone-soft: #eef2ff;
    --tone-strong: #4f46e5;
    --tone-text: #3730a3;
}

.checklist--amber {
    --tone-soft: #fef3c7;
    --tone-strong: #d97706;
    --tone-text: #92400e;
}

.checklist {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.checklist__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--tone-soft);
    color: var(--tone-strong);
}

.checklist__icon .icon {
    width: 20px;
    height: 20px;
}

.checklist__item h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0 4px;
    font-size: 1.08rem;
}

.checklist__item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
}

.checklist__status {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--tone-soft);
    color: var(--tone-text);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.checklist__note {
    max-width: 72ch;
    margin: 22px 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

@media (min-width: 820px) {
    .checklist--two,
    .checklist--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .checklist--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Modules in tabs: the tab list down the side on wide screens, across the top on small ones.
   Without scripts the tab list stays hidden and every group shows in turn. */
.modules {
    display: grid;
    gap: 24px;
}

.modules__tabs {
    display: none;
}

.modules.is-ready .modules__tabs {
    display: flex;
    gap: 8px;
    padding-bottom: 6px;
    overflow-x: auto;
}

.modules__tab {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink-2);
    font: 500 0.95rem/1.2 var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, box-shadow 0.3s var(--ease);
}

.modules__tab:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.modules__tab[aria-selected="true"] {
    border-color: transparent;
    background: var(--accent-fill);
    color: #fff;
    box-shadow: var(--glow);
}

.modules__count {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.modules__tab[aria-selected="true"] .modules__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.modules__panel {
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.modules__panel[hidden] {
    display: none;
}

.modules__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 8px;
}

.modules__head h3 {
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.modules__label {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.modules__label--included {
    background: #e7f8f0;
    color: #065f46;
}

.modules__lead {
    max-width: 70ch;
    margin: 0 0 24px;
    color: var(--muted);
}

.modules__list {
    display: grid;
    gap: 16px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.modules__list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.modules__list .icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: #059669;
}

.modules__list b {
    display: block;
    font-weight: 600;
    color: var(--ink);
}

.modules__list li > span > span {
    display: block;
    color: var(--muted);
    font-size: 0.93rem;
}

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

@media (min-width: 1040px) {
    .modules.is-ready {
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
    }

    .modules.is-ready .modules__tabs {
        position: sticky;
        top: 110px;
        flex-direction: column;
        overflow: visible;
    }

    .modules__tab {
        width: 100%;
    }
}

/* Problems and how we solve them: the problem on a tinted band, the fix below it. */
.fix-grid {
    display: grid;
    gap: 18px;
}

.fix {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.fix:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.fix__problem {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 20px;
    border-bottom: 1px solid var(--tone-line);
    background: linear-gradient(160deg, var(--tone-from), var(--tone-to));
}

.fix__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--tone-strong);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 20px -10px var(--tone-strong);
}

.fix__icon .icon {
    width: 22px;
    height: 22px;
}

.fix__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tone-text);
}

.fix__problem h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.fix__answer {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 24px 22px;
}

.fix__label--fix {
    color: var(--scrs);
}

.fix__label--fix .icon {
    width: 14px;
    height: 14px;
}

.fix__answer p {
    margin: 0 0 14px;
    color: var(--ink-2);
    font-size: 0.97rem;
}

.fix__tag {
    align-self: flex-start;
    margin-top: auto;
    padding: 3px 10px;
    border: 1px dashed var(--tone-strong);
    border-radius: 999px;
    color: var(--tone-text);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

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

@media (min-width: 1100px) {
    .fix-grid:not(.fix-grid--2):not(.fix-grid--4) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Products: large rows for the main ones, a grid for the rest. Each shows a product screen
   (or its icon), what it does, the features that matter, where it runs and how to get it. */
.products {
    display: grid;
    gap: 22px;
}

.product {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.product:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.product__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border-bottom: 1px solid var(--tone-line);
    background: linear-gradient(160deg, var(--tone-from), var(--tone-to));
}

.product__visual img {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.product__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 26px;
    background: var(--tone-strong);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 36px -16px var(--tone-strong);
}

.product__icon .icon {
    width: 48px;
    height: 48px;
}

.product__body {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.6vw, 30px);
}

.product__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.product__head h3 {
    margin: 0;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.product__tag {
    padding: 3px 10px;
    border: 1px dashed var(--tone-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--tone-text);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.product__summary {
    margin: 0 0 16px;
    color: var(--ink-2);
}

.product__features {
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.product__platform {
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--muted);
}

.product__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

/* On the home page the software section follows What we build, so a rule sets it apart. */
.section--software {
    border-top: 1px solid var(--line);
}

/* Grid: the screen on top, in a frame of the same height on every card. */
.products--grid .product__visual {
    height: 220px;
    padding: 18px;
}

.products--grid .product__visual img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

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

@media (min-width: 1040px) {
    .products--grid:not(.products--count-2) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Rows: the screen beside the words, sides swapping down the page. */
.products--rows {
    gap: 28px;
}

@media (min-width: 960px) {
    .products--rows .product {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        grid-template-rows: none;
    }

    .products--rows .product__visual {
        padding: clamp(24px, 3vw, 40px);
        border-right: 1px solid var(--tone-line);
        border-bottom: 0;
    }

    .products--rows .product:nth-child(even) .product__visual {
        order: 2;
        border-right: 0;
        border-left: 1px solid var(--tone-line);
    }

    .products--rows .product__body {
        justify-content: center;
        padding: clamp(28px, 3.4vw, 48px);
    }

    .products--rows .product__head h3 {
        font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    }
}

/* A single large statement, set like a pull quote, with warm light behind it. */
.statement {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    text-align: center;
}

.statement::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px 6%;
    background: radial-gradient(closest-side, rgba(249, 115, 22, 0.13), rgba(249, 115, 22, 0));
    pointer-events: none;
}

.statement__text {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-wrap: balance;
}

/* The showroom wall: every demo, two rows sliding past on a tilted plane. */

.section--wall {
    overflow: hidden;
    background: linear-gradient(180deg, var(--paper), var(--soft));
}

.wall {
    perspective: 1600px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.wall__plane {
    display: grid;
    gap: 22px;
    padding: 24px 0 36px;
    transform: rotateX(14deg) rotateZ(-3deg);
    transform-origin: 50% 0;
}

.wall__track {
    display: flex;
    width: max-content;
    animation: marquee 110s linear infinite;
    will-change: transform;
}

.wall__row--b .wall__track {
    animation-direction: reverse;
    animation-duration: 130s;
}

.wall:hover .wall__track,
.wall:focus-within .wall__track {
    animation-play-state: paused;
}

.wall__card {
    position: relative;
    flex: none;
    display: block;
    width: clamp(240px, 25vw, 340px);
    aspect-ratio: 16 / 10;
    margin-right: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.wall__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.wall__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.wall__label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-sm);
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--muted);
}

.wall__label b {
    font-size: 0.82rem;
    color: var(--ink);
}

.wall__label b,
.wall__label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats */

.stats {
    padding: clamp(48px, 6vw, 80px) 0;
    border-block: 1px solid var(--line);
    background: var(--paper);
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat__num {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 6.4vw, 5.2rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--accent-600), var(--accent-800));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat__label {
    max-width: 20ch;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.4;
}

@media (min-width: 900px) {
    /* One row, however many numbers there are. */
    .stats__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .stat + .stat {
        padding-left: 32px;
        border-left: 1px solid var(--line);
    }
}

/* What we build */

.build-grid {
    display: grid;
    gap: 18px;
}

.build-card .bento__icon {
    margin-bottom: 28px;
}

.build-card p {
    margin-bottom: 18px;
}

.build-card .text-link {
    margin-top: auto;
    color: var(--tone-text);
}

.build-card--big {
    padding-bottom: 0;
}

.build-card__text {
    margin-bottom: 30px;
}

/* The screen sits on the foot of the card and runs off its right edge. */
.build-card__shot {
    max-height: 290px;
    margin: auto calc(-1 * clamp(24px, 3vw, 36px)) 0 clamp(8px, 2vw, 24px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-right: 0;
    border-bottom: 0;
    border-radius: 14px 0 0 0;
    background: var(--paper);
    box-shadow: var(--shadow);
    translate: 0 8px;
    transition: translate 0.6s var(--ease);
}

.build-card__shot img {
    width: 100%;
}

.build-card:hover .build-card__shot {
    translate: 0 0;
}

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

    .build-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1040px) {
    .build-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .build-card,
    .build-card:last-child {
        grid-column: span 2;
    }

    .build-card--big {
        grid-column: span 3;
    }
}

/* Steps: a measuring tape that draws itself, with the steps marked along it. */

.steps {
    position: relative;
    display: grid;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.steps::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 10px;
    bottom: 10px;
    width: 10px;
    background:
        linear-gradient(var(--accent-500), var(--accent-500)) left top / 2px 100% no-repeat,
        repeating-linear-gradient(180deg, rgba(234, 88, 12, 0.55) 0 1.5px, transparent 1.5px 12px) left top / 100% 100% no-repeat;
    transform-origin: top center;
}

.steps__item {
    position: relative;
    padding-left: 72px;
}

.steps__item h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.steps__item p {
    margin: 0;
    color: var(--muted);
}

.steps__num {
    position: absolute;
    left: 0;
    top: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-fill);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 0 0 6px var(--section-bg, var(--paper)), 0 12px 24px -10px rgba(194, 65, 12, 0.7);
}

@media (min-width: 900px) {
    .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px;
    }

    .steps::before {
        left: 0;
        right: 0;
        top: 14px;
        bottom: auto;
        width: auto;
        height: 10px;
        background:
            linear-gradient(var(--accent-500), var(--accent-500)) left top / 100% 2px no-repeat,
            repeating-linear-gradient(90deg, rgba(234, 88, 12, 0.55) 0 1.5px, transparent 1.5px 12px) left top / 100% 100% no-repeat;
        transform-origin: left center;
    }

    .steps__item {
        padding: 76px 8px 0 0;
    }

    .steps__num {
        top: 0;
    }
}

/* Timeline: the detailed steps on standard pages. A vertical tape with a card for each step,
   and the heading held in view beside it on wide screens. */

.steps-section {
    display: grid;
    gap: 8px;
}

.timeline {
    position: relative;
    display: grid;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 12px;
    background:
        linear-gradient(var(--accent-500), var(--accent-500)) left top / 2px 100% no-repeat,
        repeating-linear-gradient(180deg, rgba(234, 88, 12, 0.55) 0 1.5px, transparent 1.5px 12px) left top / 100% 100% no-repeat;
    transform-origin: top center;
}

.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.timeline__num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-fill);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 0 0 6px var(--section-bg, var(--paper)), 0 12px 24px -10px rgba(194, 65, 12, 0.7);
}

.timeline__body {
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.4s var(--ease), border-color 0.3s;
}

.timeline__item:hover .timeline__body {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.timeline__body h3 {
    font-size: clamp(1.3rem, 1.8vw, 1.5rem);
    margin-bottom: 8px;
}

.timeline__body p {
    margin: 0;
    color: var(--ink-2);
}

.timeline__tag {
    display: inline-flex;
    margin-top: 16px;
    padding: 4px 11px;
    border: 1px dashed rgba(194, 65, 12, 0.5);
    border-radius: 999px;
    background: var(--accent-50);
    color: var(--accent-700);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

@media (max-width: 560px) {
    .timeline::before {
        left: 21px;
    }

    .timeline__item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
    }

    .timeline__num {
        width: 44px;
        height: 44px;
        font-size: 0.8rem;
    }
}

@media (min-width: 1040px) {
    .steps-section {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 80px;
        align-items: start;
    }

    .steps-section__head {
        position: sticky;
        top: 120px;
    }
}

/* Showroom cards */

.demo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.demo-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.demo-card__media {
    display: block;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

/*
 * The demo's real screen in a browser frame, turned in 3D, straightening on hover (founder, 5 Nov 2026: "like the
 * 3d designs here [pophastatesting.tech], add similar cards on pophasta.com"). The same pictures and the same
 * crops as the cards there: a CRM shown past its header and menu (--content), a system at its top corner
 * (--corner), a website whole (--whole). Without a shot of its own the card shows its CMS screenshot, whole.
 */
.demo-screen {
    position: relative;
    height: 230px;
    text-decoration: none;
    padding: 24px 28px 0;
    perspective: 760px;
    background:
        radial-gradient(75% 95% at 50% 115%, rgba(249, 115, 22, 0.32), transparent 72%),
        linear-gradient(160deg, #fffaf5, var(--soft));
}

.demo-screen__frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background: var(--paper);
    box-shadow: 0 34px 50px -26px rgba(11, 18, 32, 0.6), 0 0 0 1px rgba(11, 18, 32, 0.08);
    transform-origin: 30% 0;
    transform: rotateX(20deg) rotateY(-20deg) rotateZ(4deg) translate3d(14px, 2px, 0) scale(1.12);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    will-change: transform;
}

.demo-card:hover .demo-screen__frame,
.demo-card:focus-within .demo-screen__frame {
    transform: rotateX(7deg) rotateY(-6deg) rotateZ(1deg) translate3d(4px, 0, 0) scale(1.1);
    box-shadow: 0 40px 60px -28px rgba(11, 18, 32, 0.65), 0 0 0 1px rgba(11, 18, 32, 0.08);
}

/* A soft light across the glass, so it reads as a screen and not a flat picture. */
.demo-screen__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 38%);
    pointer-events: none;
}

.demo-screen__bar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--line);
}

.demo-screen__bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fca5a5;
}

.demo-screen__bar i + i {
    background: #fcd34d;
}

.demo-screen__bar i + i + i {
    background: #86efac;
}

.demo-screen__bar b {
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--paper);
    font: 600 9px/1 var(--font-mono);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Its own clipping box, so a cropped picture can never slide up over the address bar. */
.demo-screen__view {
    display: block;
    overflow: hidden;
}

.demo-screen__view img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

/* A working screen is a lot of small type: show its top corner, larger. A CRM's top corner is its header and menu,
   the same on all six, so those skip past them to the trade's own board or diary. Margins in % are of the width. */
.demo-screen--corner .demo-screen__view img,
.demo-screen--content .demo-screen__view img {
    width: 150%;
}

.demo-screen--content .demo-screen__view img {
    margin: -12% 0 0 -19%;
}

@media (max-width: 560px) {
    .demo-screen {
        height: clamp(180px, 54vw, 240px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-screen__frame {
        transition: none;
    }
}

.demo-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}

.demo-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 10px;
}

.demo-card__title {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.demo-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.demo-card__title a:hover {
    color: var(--accent);
}

.demo-card__summary {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 16px;
}

.demo-card__links {
    margin: auto 0 0;
}

.demo-card__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.demo-card__links a:hover {
    color: var(--accent-hover);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.grid__cell[hidden] {
    display: none;
}

.showroom-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 32px 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.showroom-note + .showroom-note {
    margin-top: 10px;
}

/* Browser frame, used for screenshots and the rule scene */

.browser-frame {
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.browser-frame__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

.browser-frame__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d6dce4;
}

.browser-frame__bar i:nth-child(1) {
    background: #fca5a5;
}

.browser-frame__bar i:nth-child(2) {
    background: #fcd34d;
}

.browser-frame__bar i:nth-child(3) {
    background: #86efac;
}

.browser-frame__url {
    margin-left: 10px;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Page heroes */

.page-hero {
    padding: clamp(60px, 8vw, 112px) 0 clamp(44px, 5vw, 72px);
}

.page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -10%;
    top: -30%;
    width: min(820px, 80vw);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0));
    pointer-events: none;
}

.page-hero h1 {
    max-width: 18ch;
}

.demo-hero {
    display: grid;
    gap: 48px;
    align-items: center;
}

.demo-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: var(--muted);
    margin: 0 0 18px;
}

@media (min-width: 1040px) {
    .demo-hero {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

/* Rules on demo pages */

.rule-list {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 880px;
}

.rule-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-bright);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.rule-list__item h3 {
    margin-bottom: 6px;
}

.rule-list__item p {
    margin: 0;
    color: var(--muted);
}

.rule-list__num {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent);
    padding-top: 2px;
}

.assurance {
    display: grid;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.assurance li {
    display: flex;
    gap: 14px;
}

.assurance .icon {
    width: 26px;
    height: 26px;
    color: var(--scrs);
}

.assurance h3 {
    margin-bottom: 4px;
}

.assurance p {
    margin: 0;
    color: var(--muted);
    font-size: 0.97rem;
}

@media (min-width: 900px) {
    .assurance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Every feature of a demo, on demo pages: a plain list a buyer can scan, one line each. */

.feature-list {
    display: grid;
    gap: 0 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-list__item {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.feature-list__tick {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.feature-list__tick .icon {
    width: 16px;
    height: 16px;
}

.feature-list__item h3 {
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.feature-list__item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.97rem;
}

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

@media (min-width: 1000px) {
    .feature-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Questions buyers ask, on demo pages: plain <details>, so they open without any script. */

.faq {
    display: grid;
    gap: 12px;
    max-width: 860px;
}

.faq__item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
}

.faq__item summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ink);
}

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

.faq__item summary::after {
    content: "+";
    flex: none;
    color: var(--accent);
    font-weight: 700;
    transition: transform 0.2s var(--ease);
}

.faq__item[open] summary::after {
    transform: rotate(45deg);
}

.faq__item p {
    margin: 12px 0 0;
    color: var(--muted);
}

/* Family */

.family-cards {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.family-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, transform 0.3s var(--ease);
}

a.family-card:hover {
    border-color: var(--accent);
    transform: translateX(3px);
}

.family-card--current {
    border-color: rgba(194, 65, 12, 0.45);
    background: var(--accent-soft);
}

.family-card__name {
    font-family: var(--font-display);
    font-weight: 600;
}

.family-card__role {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
}

/* FRS Luma is a partner, not family (founder 11-06): its card sits apart, under its own label. */
.family-cards .family-cards__partner {
    margin: 12px 0 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Call to action: a marigold card on the white page. */

.cta {
    padding: clamp(56px, 7vw, 104px) 0;
    background: var(--paper);
}

.cta__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 8px 48px;
    align-items: center;
    padding: clamp(32px, 5vw, 64px);
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(251, 146, 60, 0.85), transparent 60%),
        linear-gradient(135deg, var(--accent-700), var(--accent-800));
    box-shadow: 0 40px 90px -40px rgba(194, 65, 12, 0.85);
}

/* Ruler ticks along the top edge and a faint ruled sheet underneath. */
.cta__card::before,
.cta__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.cta__card::before {
    left: 0;
    right: 0;
    top: 0;
    height: 16px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 1.5px, transparent 1.5px 16px) left top / 100% 9px no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 1.5px, transparent 1.5px 80px) left top / 100% 16px no-repeat;
}

.cta__card::after {
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 32px 32px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
    mask-image: linear-gradient(90deg, transparent 30%, #000);
}

.cta__card h2 {
    margin-bottom: 10px;
    max-width: 18ch;
}

.cta__card p {
    margin: 0;
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.08rem;
}

.cta__card .button-row {
    margin-top: 20px;
}

@media (min-width: 900px) {
    .cta__card {
        grid-template-columns: 1fr auto;
    }

    .cta__card .button-row {
        margin-top: 0;
    }
}

/* The button between sections: drawn up into the section above, so it reads as that section's last word. */
.cta-inline {
    --cta-overlap: clamp(32px, 5vw, 64px);
    position: relative;
    margin-top: calc(-1 * var(--cta-overlap));
    padding-bottom: clamp(56px, 8vw, 96px);
}

/* Clear where it overlaps the section above, so card shadows there still show. */
.cta-inline.section--soft {
    background: linear-gradient(transparent var(--cta-overlap), var(--soft) var(--cta-overlap));
}

.cta-inline__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 20px;
    text-align: center;
}

.cta-inline__inner p {
    margin: 0;
    font: 600 1.15rem/1.3 var(--font-display);
    color: var(--ink);
}

/* Long-form pages */

.prose h2 {
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    margin-top: 1.8em;
}

.prose p,
.prose li {
    color: var(--ink-2);
    max-width: 68ch;
}

.prose a {
    color: var(--accent);
}

.legal-contact {
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-bright);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--tint);
}

.legal-contact p:last-child {
    margin-bottom: 0;
}

/* Contact */

.contact-grid {
    display: grid;
    gap: 48px;
    align-items: start;
}

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

.contact-points {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.contact-points li {
    display: flex;
    gap: 12px;
    color: var(--ink-2);
}

.contact-points .icon {
    color: var(--accent);
    margin-top: 3px;
}

.contact-points a,
.contact-direct a {
    color: var(--accent);
}

.contact-direct {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 28px;
    color: var(--muted);
}

.contact-direct a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.form-card {
    display: grid;
    gap: 18px;
    padding: clamp(22px, 3vw, 36px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.field label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 6px;
}

.field__optional {
    font-weight: 400;
    color: var(--muted);
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: 400 1rem/1.4 var(--font-body);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.field textarea {
    height: 130px;
    min-height: 90px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.field__check {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500 !important;
}

.field__check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
}

.field__help {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.field__error,
.form-error {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: var(--danger);
}

.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--danger) !important;
}

/* The honeypot: off screen for people, still in the form for bots. */
.form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-card__note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
}

/* The short quote form at the top of the demos page, for visitors from an ad. They come on phones, so
   the heading shrinks and the form sits straight under it; on wide screens it moves beside the text. */
.page-hero--quote {
    padding-top: clamp(28px, 6vw, 112px);
}

.page-hero--quote h1 {
    font-size: clamp(2rem, 5.2vw, 4.4rem);
    margin-bottom: 0;
}

.quote-hero {
    display: grid;
    gap: 22px;
}

.quote-hero__rest .lede {
    margin-top: 0;
}

.form-card--quick {
    gap: 14px;
    padding: clamp(18px, 3vw, 30px);
}

.form-card__head h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    margin: 0 0 4px;
}

.form-card__head p {
    margin: 0;
    color: var(--muted);
}

.form-card--quick .field label {
    margin-bottom: 4px;
}

.form-card--quick .field textarea {
    height: 76px;
    min-height: 64px;
}

@media (min-width: 1000px) {
    .quote-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        grid-template-areas: "head form" "rest form";
        grid-template-rows: auto 1fr;
        column-gap: 64px;
        align-items: start;
    }

    .quote-hero__head {
        grid-area: head;
    }

    .quote-hero__form {
        grid-area: form;
    }

    .quote-hero__rest {
        grid-area: rest;
    }
}

/* Footer */

.site-footer {
    background: var(--night);
    color: var(--night-muted);
    padding: 64px 0 28px;
    font-size: 0.95rem;
}

.site-footer a {
    color: var(--night-text);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* The black logo, turned white for the dark footer. */
.site-footer .logo {
    height: 34px;
    filter: invert(1);
}

.site-footer__grid {
    display: grid;
    gap: 40px;
}

.site-footer__brand p {
    margin: 14px 0 0;
    max-width: 360px;
}

.site-footer__heading {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--night-muted);
    margin: 0 0 14px;
}

.site-footer ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__contact a,
.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-footer__where {
    display: block;
    font-size: 0.8125rem;
}

/* FRS Luma is a partner, not family (founder 11-06): "... in London | UAE Partner: FRS Luma Consultancy". */
.site-footer__sep {
    margin: 0 2px;
}

.site-footer__partner {
    white-space: nowrap;
}

.site-footer__heading--next {
    margin-top: 28px;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--night-line);
    font-size: 0.82rem;
}

.site-footer__legal p {
    margin: 0;
}

/* A row of its own under the copyright line, rather than a squeezed column beside it. Two classes, to beat
   `.site-footer ul`, which makes every other footer list a column. */
.site-footer .site-footer__policies {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__cookies {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* The cookie choice: a small card at the foot of the screen until the visitor answers.
   Both answers are the same size and side by side, so saying no is as easy as saying yes. */
.consent {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 90;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.consent[hidden] {
    display: none;
}

.consent__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    max-width: 780px;
    padding: 16px 18px 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
}

.consent__text {
    flex: 1 1 340px;
    margin: 0;
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
}

.consent__text strong {
    color: var(--ink);
}

.consent__text a {
    color: var(--accent);
}

.consent__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.consent__buttons .button {
    min-width: 132px;
}

@media (min-width: 900px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

/* Scroll reveals, only when scripts run and motion is welcome */

@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    }

    .js [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }

    /* site.js drops data-reveal once an element has landed, so these delays never slow a hover. */
    .js :is(.bento, .card-grid, .fix-grid, .products, .build-grid, .stats__grid) > [data-reveal]:nth-child(2),
    .js .grid > :nth-child(2) [data-reveal] {
        transition-delay: 0.08s;
    }

    .js :is(.bento, .card-grid, .fix-grid, .products, .build-grid, .stats__grid) > [data-reveal]:nth-child(3),
    .js .grid > :nth-child(3) [data-reveal] {
        transition-delay: 0.16s;
    }

    .js :is(.bento, .card-grid, .fix-grid, .products, .build-grid, .stats__grid) > [data-reveal]:nth-child(4) {
        transition-delay: 0.24s;
    }

    .js :is(.bento, .card-grid, .fix-grid, .products, .build-grid, .stats__grid) > [data-reveal]:nth-child(5) {
        transition-delay: 0.32s;
    }

    /* The tape draws, then each step lands on it in turn. */
    .js :is(.steps, .timeline)::before {
        transform: scale(0);
        transition: transform 1.6s var(--ease) 0.2s;
    }

    .js :is(.steps, .timeline).is-revealed::before {
        transform: none;
    }

    .js :is(.steps__item, .timeline__item) {
        opacity: 0;
        translate: 0 14px;
        transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
    }

    .js :is(.steps, .timeline).is-revealed :is(.steps__item, .timeline__item) {
        opacity: 1;
        translate: 0 0;
    }

    .js :is(.steps__item, .timeline__item):nth-child(1) { transition-delay: 0.35s; }
    .js :is(.steps__item, .timeline__item):nth-child(2) { transition-delay: 0.65s; }
    .js :is(.steps__item, .timeline__item):nth-child(3) { transition-delay: 0.95s; }
    .js :is(.steps__item, .timeline__item):nth-child(4) { transition-delay: 1.25s; }
    .js :is(.steps__item, .timeline__item):nth-child(n + 5) { transition-delay: 1.55s; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .ticker__track,
    .wall__track {
        animation: none;
    }

    .ticker__window,
    .wall__row {
        overflow-x: auto;
    }
}