@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

:root {
    --sofiasans: "Sofia Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    --col-lightaccent2: #7eb9e8;
    --col-lightaccent1: #4a89c5;
    --col-lightfore1: #4a5568;
    --col-lightfore2: #2d3748;
    /* --col-darkback1: rgb(17, 24, 39); */
    --col-darkback1: rgb(17, 24, 39);
    /* The header bar: the footer's #0b1220 at 90%, so the two bookend every page */
    --col-darkback1a: rgb(11, 18, 32, 0.9);
    --col-darkback2: rgb(51, 80, 120);
    --col-darkfore1: rgb(249, 250, 251);
    --col-darkfore2: rgb(209, 213, 219);
    --col-darkfore3: rgb(195, 197, 201);
    --col-heroback: #eff5fb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--sans);
    line-height: 1.6;
    color: var(--col-lightfore1);
    background: #f8f9fb;
}

/* The landing page is navy edge to edge (nav strip, overscroll) */
body.home {
    background: var(--col-darkback1);
}

body.dark-page {
    background: var(--col-darkback1);
    color: var(--col-darkfore2);
    color-scheme: dark;
}

.dark-page h2 {
    color: var(--col-darkfore1);
}

.anchor {
    scroll-margin-top: 150px;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    /* background: rgba(255, 255, 255, 1); */
    background: var(--col-darkback1a);
    backdrop-filter: blur(12px);
    padding: 1.25rem 5%;
    z-index: 1000;
    border-bottom: 1px solid #374151;
    box-shadow: 2px 0px 8px 0px #1f252ffa;
}

nav .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    row-gap: 12px;
    column-gap: 32px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#nav-expando {
    display: none;
    position: absolute;
    top: 25px;
    left: 25px;
    background: transparent;
    border: none;
    color: var(--col-darkfore1);
}

.logo {
    font-family: var(--sofiasans);
    font-size: 1.3rem;
    font-weight: 700;
    /* color: var(--col-lightfore2); */
    color: var(--col-darkfore1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.logo-img-inline {
    height: 1.1em;
    display: inline-block;
    /* baseline-shift: -0.25em; */
    transform: scale(1.1);
    padding-inline-end: 0.2em;
    filter: drop-shadow(0px 0px 1px white)
}

#nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 1.75rem;
    transition: max-height 0.1s cubic-bezier(0.19, 1, 0.22, 1), padding-top 0.1s cubic-bezier(0.19, 1, 0.22, 1);
}

nav a {
    text-decoration: none;
    /* color: #64748b; */
    color: var(--col-darkfore2);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

nav>a:hover {
    color: var(--col-lightaccent2);
}

/* .nav-cta {
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: var(--col-lightaccent1);
    border: 2px solid var(--col-lightaccent1);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s;
} */

.nav-cta:hover {
    background: var(--col-lightaccent1);
    color: white;
}

.nav-button-link {
    display: flex;
    white-space: nowrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    color: white !important;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.nav-button-link:hover {
    background: #4752c4;
    color: white !important;
    transform: translateY(-1px);
}

/* Header dropdowns (one per NAV_GROUPS entry in src/site.mjs).  On desktop a group
   opens on hover, on keyboard focus, or when js/main.js adds .open after a click;
   inside the mobile hamburger panel only .open counts, because a tap leaves
   :hover stuck on touch screens and the accordion could never close. */
.nav-group {
    position: relative;
}

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0.35rem 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--col-darkfore2);
    transition: color 0.2s;
}

.nav-group.has-active .nav-group-toggle {
    color: var(--col-darkfore1);
}

.nav-chevron {
    transition: transform 0.2s;
}

/* A section with one page so far: a plain link, sized to line up with the
   dropdown headings beside it. */
.nav-plain a {
    display: block;
    padding: 0.35rem 0;
}

.nav-plain a:hover {
    color: var(--col-lightaccent2);
}

.nav-plain a[aria-current="page"] {
    color: var(--col-darkfore1);
}

.nav-dropdown {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 200px;
    /* The top padding is a transparent bridge: without it the pointer crosses a
       gap on its way down from the heading and the menu closes under it. */
    padding: 0.6rem 0 0;
    transform: translate(-50%, -4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    inset: 0.6rem 0 0;
    background: #0b1220;
    border: 1px solid #374151;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: -1;
}

.nav-dropdown li {
    padding: 0 0.4rem;
}

.nav-dropdown li:first-child {
    padding-top: 0.4rem;
}

.nav-dropdown li:last-child {
    padding-bottom: 0.4rem;
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--col-lightaccent2);
}

.nav-dropdown a[aria-current="page"] {
    color: var(--col-darkfore1);
}

.nav-external {
    opacity: 0.6;
}

.nav-group.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.15s, transform 0.15s, visibility 0s;
}

.nav-group.open .nav-group-toggle .nav-chevron {
    transform: rotate(180deg);
}

.nav-group.open .nav-group-toggle {
    color: var(--col-lightaccent2);
}

/* A submenu inside a dropdown (an entry with its own `links` in NAV_GROUPS).  On
   desktop it flies out to the right of its row on hover, focus, or .open; in the
   mobile panel it is a nested accordion (see the max-width: 901px block). */
.nav-sub {
    position: relative;
}

.nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: inherit;
    color: var(--col-darkfore2);
    white-space: nowrap;
    transition: color 0.2s;
}

.nav-sub.has-active > .nav-sub-toggle {
    color: var(--col-darkfore1);
}

.nav-sub-toggle .nav-chevron {
    transform: rotate(-90deg);
}

.nav-sub-toggle:focus-visible,
.nav-sub.open > .nav-sub-toggle {
    background: rgba(255, 255, 255, 0.06);
    color: var(--col-lightaccent2);
}

/* top lines the first item up with the row it came from; the left padding is the
   same transparent bridge as .nav-dropdown's top padding, sideways. */
.nav-subdropdown {
    list-style: none;
    position: absolute;
    z-index: 1;
    top: -0.4rem;
    left: 100%;
    min-width: 150px;
    padding-inline-start: 0.5rem;
    transform: translateX(-4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
}

.nav-subdropdown::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0.5rem;
    background: #0b1220;
    border: 1px solid #374151;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: -1;
}

/* .open only counts while the group itself is open, so a submenu left open never
   shows on its own once the dropdown around it has closed. */
.nav-group.open .nav-sub.open > .nav-subdropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.15s, transform 0.15s, visibility 0s;
}

@media (hover: hover) and (min-width: 902px) {
    .nav-group:not(.dismissed):hover .nav-dropdown,
    .nav-group:not(.dismissed):has(:focus-visible) .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: opacity 0.15s, transform 0.15s, visibility 0s;
    }

    .nav-group:not(.dismissed):hover .nav-group-toggle .nav-chevron,
    .nav-group:not(.dismissed):has(:focus-visible) .nav-group-toggle .nav-chevron {
        transform: rotate(180deg);
    }

    .nav-group:not(.dismissed):hover .nav-group-toggle,
    .nav-group:not(.dismissed):has(:focus-visible) .nav-group-toggle {
        color: var(--col-lightaccent2);
    }

    .nav-group:not(.dismissed):hover .nav-sub:is(:hover, .open) > .nav-subdropdown,
    .nav-group:not(.dismissed):has(:focus-visible) .nav-sub:is(:has(:focus-visible), .open) > .nav-subdropdown {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.15s, transform 0.15s, visibility 0s;
    }

    .nav-group:not(.dismissed) .nav-sub:hover > .nav-sub-toggle {
        background: rgba(255, 255, 255, 0.06);
        color: var(--col-lightaccent2);
    }
}

#highlights {
    padding-top: 0px;
}

/* Everything below the hero stays on the same navy (#posthero is a shared
   structural id: other pages keep their light background) */
body.home #posthero {
    background: var(--col-darkback1);
}

/* Hero Section */
.hero {
    margin-top: 80px;
    /* min-height rather than a fixed height: the two stacked path cards put the
       content within a few pixels of 650, and .hero clips its overflow, so a fixed
       height would silently cut the second card off the moment the copy grew. */
    min-height: 650px;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* The soft radial glow sits behind the video zone so the alpha video's
       faint background residue reads as intentional lighting, not a seam. */
    background:
        radial-gradient(ellipse 80% 52% at 78% 40%, rgba(96, 130, 180, 0.13) 0%, transparent 72%),
        var(--col-darkback1);
    padding: 3% 0rem 1% 0rem;
    position: relative;
    text-align: start;
    overflow: hidden;
}

/* Faint blueprint grid, same treatment as .gg-hero::before. The ellipse sits
   left-of-center: the grid lives around the headline and dies out before the
   video zone, and reaches zero above the hero's bottom edge so nothing ends
   exactly on the posthero seam. */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(126, 185, 232, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 185, 232, 0.10) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 52% 55% at 30% 36%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 52% 55% at 30% 36%, #000 0%, transparent 100%);
    pointer-events: none;
}

.herogallery-container {
    position: absolute;
    opacity: 0.9;
    z-index: 1; /* above .hero-grid; the text .container still paints on top */
    /* Capped and centred rather than full-bleed, so the asset and the copy share
       one stage. Both used to key off different things -- the copy off 7vw, the
       asset off 50vw plus the fixed translateX below -- so above about 1400px
       they drifted apart and left a widening gap between them. Below 1400px this
       resolves to the old full-width behaviour and nothing moves. */
    left: max(0px, calc((100vw - 1400px) / 2));
    width: min(100vw, 1400px);
    height: 100%;
    display: flex;
    justify-content: center;
    top: -5px;
}

/* One 1080x1080 square alpha loop: fill the hero's height, keep it square,
   and park it right of center */
.herogallery-video {
    pointer-events: none;
    position: relative;
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    align-self: center;
    transform: translateX(280px);
}

.herogallery-video img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Geometric shapes */
.hero .geometric-shape {
    position: absolute;
    background: linear-gradient(135deg, rgba(91, 155, 213, 0.10) 0%, rgba(91, 155, 213, 0.03) 100%);
    border: 2px solid rgba(91, 155, 213, 0.25);
    pointer-events: none;
}

.hero .geometric-shape,
.founder-note-content {
    box-shadow:
        4px 4px 0px rgba(91, 155, 213, 0.12),
        8px 8px 0px rgba(91, 155, 213, 0.06),
        12px 12px 20px rgba(91, 155, 213, 0.08);
}

/* LEFT SIDE - 2 Circles + 2 Squares */
.hero .shape-2 {
    top: 70%;
    left: 6%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    animation: float2 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    /* Left - Circle */
}

.hero .shape-4 {
    top: 15%;
    left: 10%;
    width: 55px;
    height: 55px;
    transform: rotate(30deg);
    animation: float4 7s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    /* Left - Square */
}

.hero .shape-6 {
    bottom: 25%;
    left: 12%;
    width: 60px;
    height: 60px;
    transform: rotate(15deg);
    animation: float1 9s cubic-bezier(0.37, 0, 0.63, 1) infinite 1s;
    /* Left - Square */
}

.hero .shape-7 {
    top: 42%;
    left: 8%;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    animation: float3 8.5s cubic-bezier(0.37, 0, 0.63, 1) infinite 2s;
    /* Left - Circle */
}

/* RIGHT SIDE - 2 Squares + 2 Circles */
.hero .shape-1 {
    top: 12%;
    right: 8%;
    width: 80px;
    height: 80px;
    transform: rotate(20deg);
    animation: float1 7.5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    /* Right - Square */
}

.hero .shape-3 {
    bottom: 10%;
    right: 10%;
    width: 65px;
    height: 65px;
    transform: rotate(45deg);
    animation: float3 8s cubic-bezier(0.37, 0, 0.63, 1) infinite 1.5s;
    /* Right - Square */
}

.hero .shape-5 {
    top: 48%;
    right: 5%;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    animation: float2 9s cubic-bezier(0.37, 0, 0.63, 1) infinite 0.5s;
    /* Right - Circle */
}

.hero .shape-8 {
    bottom: 20%;
    right: 9%;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    animation: float4 8.5s cubic-bezier(0.37, 0, 0.63, 1) infinite 2.5s;
    /* Right - Circle */
}

@keyframes float1 {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }

    25% {
        transform: translateY(-22px) translateX(8px) rotate(5deg) scale(1.03);
        box-shadow: 6px 8px 0px rgba(91, 155, 213, 0.10), 12px 16px 0px rgba(91, 155, 213, 0.05), 18px 24px 28px rgba(91, 155, 213, 0.12);
    }

    50% {
        transform: translateY(-40px) translateX(15px) rotate(10deg) scale(1.06);
        box-shadow: 8px 14px 0px rgba(91, 155, 213, 0.08), 16px 24px 0px rgba(91, 155, 213, 0.04), 22px 32px 36px rgba(91, 155, 213, 0.14);
    }

    78% {
        transform: translateY(-8px) translateX(11px) rotate(4deg) scale(0.98);
        box-shadow: 4px 5px 0px rgba(91, 155, 213, 0.13), 8px 9px 0px rgba(91, 155, 213, 0.065), 10px 14px 18px rgba(91, 155, 213, 0.07);
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }
}

@keyframes float2 {
    0% {
        transform: translateY(0px) translateX(0px) rotate(45deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }

    30% {
        transform: translateY(-20px) translateX(-5px) rotate(50deg) scale(1.04);
        box-shadow: 6px 10px 0px rgba(91, 155, 213, 0.10), 12px 18px 0px rgba(91, 155, 213, 0.05), 16px 26px 30px rgba(91, 155, 213, 0.12);
    }

    50% {
        transform: translateY(-35px) translateX(-10px) rotate(55deg) scale(1.05);
        box-shadow: 8px 16px 0px rgba(91, 155, 213, 0.08), 14px 26px 0px rgba(91, 155, 213, 0.04), 20px 34px 34px rgba(91, 155, 213, 0.13);
    }

    75% {
        transform: translateY(-6px) translateX(-8px) rotate(52deg) scale(0.99);
        box-shadow: 4px 5px 0px rgba(91, 155, 213, 0.13), 8px 10px 0px rgba(91, 155, 213, 0.065), 10px 15px 18px rgba(91, 155, 213, 0.07);
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(45deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }
}

@keyframes float3 {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }

    28% {
        transform: translateY(16px) translateX(10px) rotate(-4deg) scale(0.97);
        box-shadow: 3px 2px 0px rgba(91, 155, 213, 0.14), 6px 4px 0px rgba(91, 155, 213, 0.07), 8px 8px 14px rgba(91, 155, 213, 0.06);
    }

    50% {
        transform: translateY(30px) translateX(20px) rotate(-8deg) scale(0.95);
        box-shadow: 2px 1px 0px rgba(91, 155, 213, 0.16), 4px 2px 0px rgba(91, 155, 213, 0.08), 6px 4px 10px rgba(91, 155, 213, 0.05);
    }

    76% {
        transform: translateY(7px) translateX(16px) rotate(-3deg) scale(1.02);
        box-shadow: 5px 6px 0px rgba(91, 155, 213, 0.11), 10px 11px 0px rgba(91, 155, 213, 0.055), 14px 16px 22px rgba(91, 155, 213, 0.09);
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }
}

@keyframes float4 {
    0% {
        transform: translateY(0px) translateX(0px) rotate(30deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }

    22% {
        transform: translateY(-14px) translateX(-8px) rotate(35deg) scale(1.03);
        box-shadow: 6px 9px 0px rgba(91, 155, 213, 0.10), 12px 16px 0px rgba(91, 155, 213, 0.05), 16px 22px 28px rgba(91, 155, 213, 0.11);
    }

    50% {
        transform: translateY(-25px) translateX(-15px) rotate(40deg) scale(1.05);
        box-shadow: 8px 14px 0px rgba(91, 155, 213, 0.08), 14px 22px 0px rgba(91, 155, 213, 0.04), 20px 30px 32px rgba(91, 155, 213, 0.13);
    }

    80% {
        transform: translateY(-5px) translateX(-12px) rotate(38deg) scale(0.98);
        box-shadow: 4px 5px 0px rgba(91, 155, 213, 0.13), 8px 9px 0px rgba(91, 155, 213, 0.065), 10px 13px 17px rgba(91, 155, 213, 0.07);
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(30deg) scale(1);
        box-shadow: 4px 4px 0px rgba(91, 155, 213, 0.12), 8px 8px 0px rgba(91, 155, 213, 0.06), 12px 12px 20px rgba(91, 155, 213, 0.08);
    }
}

.hero .container {
    /* 600 and this left margin line the hero copy up with the feature cards below,
       so one vertical edge runs down the page instead of the hero starting ~30px to
       their right.

       .highlights-grid is auto-fit minmax(320px, 600px) with a 24px gap, so once
       there is room for two tracks it is a fixed 1224px block centred in its
       container -- and that container's own max-width cancels out of the sum,
       leaving the card's left edge at exactly 50% - 612px of the section width.
       612 is half of 1224: change both together if the track or gap ever changes.

       The 2% floor covers the band below about 1275px where the tracks are still
       shrinking and the expression would go negative. 2% is the section padding,
       and the hero centres its copy below 1100px anyway. */
    max-width: 600px;
    margin: 0 0 0 max(2%, calc(50% - 612px));
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-family: var(--sofiasans);
    font-size: 4.0rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
    color: var(--col-darkfore1);
    letter-spacing: -0.02em;
    z-index: 3;
}

.hero p {
    font-size: 1.2rem;
    /* margin-bottom: 2.5rem; */
    color: var(--col-darkfore2);
    line-height: 1.75;
    font-weight: 400;
}

/* 
.hero-visual {
    margin-top: 3rem;
    max-width: 900px;
    width: 100%;
    height: 350px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-placeholder {
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e0;
    font-size: 1.1rem;
    border: 2px dashed #e2e8f0;
} */

.cta-button {
    padding: 0.8rem 2rem 0.9rem 2rem;
    margin: 30px auto 0px auto;
    background: var(--col-lightaccent1);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-family: var(--sofiasans);
    font-weight: 500;
    font-size: 1.5rem;
    white-space: nowrap;
}

.hero .cta-button {
    width: fit-content;
    /* left-aligned with the copy, not centered */
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* The two entry paths, stacked full width of the copy column, which sits beside the
   hero asset. Same surface, border, radius and padding on both: whichever one a
   visitor wants, neither should look like the fallback.  Stacked rather than side by
   side because half a 620px column is not enough for a card title, let alone a
   command -- "Build a world in your agent" wrapped, and the command truncated after
   five words. */
.hero-paths {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 26px;
    /* min-width: 0 the whole way down to the command. It is white-space: nowrap, and
       a flex item defaults to min-width: auto, so its min-content width is the entire
       untruncated string -- which forces this column wider than a phone viewport.
       .hero clips its overflow, so the symptom is not a scrollbar but the Start
       creating button silently disappearing off the right edge. */
    min-width: 0;
}

.hero-path {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 16px;
    padding: 1.15rem 1.15rem 1.25rem;
    text-align: start;
    /* Without this the command's intrinsic width would stretch the grid track
       rather than letting the text truncate inside it. */
    min-width: 0;
}

.hero-path-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sofiasans);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--col-darkfore1);
    text-align: start;
    margin: 0;
}

/* Marks which path is which at a glance, before the label is read */
.hero-path-icon {
    flex: 0 0 auto;
    color: var(--col-lightaccent2);
}

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

.hero-path-title a:hover {
    color: var(--col-lightaccent2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The cards are interactive surfaces with no affordance of their own, so the border
   warms toward the accent on hover. Deliberately just the border and background:
   lifting or scaling them would fight the hero asset animating alongside. */
.hero-path {
    transition: border-color 0.2s, background-color 0.2s;
}

.hero-path:hover {
    border-color: rgba(126, 185, 232, 0.38);
    background: #26314a;
}

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

.hero .hero-path-sub {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--col-darkfore3);
    margin: 0;
}

/* Matched to the nav's Start Creating: same type, weight, padding and radius, so the
   two instances of the same action read as the same control. 40px rather than 51,
   which is also the cheapest row of height in the card. */
.hero-path .cta-button {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
    justify-content: center;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 1.1rem;
    column-gap: 0.4rem;
    white-space: nowrap;
}

/* Title and supporting line on the left, action centred against them on the right.
   Spends two rows on what would otherwise take three. */
.hero-path-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* On a phone the row costs more than it saves: the button takes 154px of a ~305px
   card, and both the title and the supporting line wrap to fit what is left. Stack
   them and give the button the full width, which is the easier tap target anyway. */
@media (max-width: 560px) {
    .hero-path-inline {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
    }

    .hero-path .cta-button {
        width: 100%;
    }
}

.hero-path-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* `.hero p` is (0,1,1) and beats a bare class, so these carry .hero to win */
.hero .hero-path-hint {
    font-size: 0.82rem;
    color: var(--col-darkfore3);
    margin: 0;
}

.hero-path-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--col-lightaccent2);
}

/* Lift Build World's prompt blocks off the navy background with the same slate
   surface and light-blue hairline as the other dark pages. */
.build-world-page .gg-prompt {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
}

.hero .gg-prompt-body,
.gg-hero .gg-prompt-body {
    text-align: start;
}

/* Inside a path card the card is already the lifted surface, so the command insets
   into the darker navy rather than sitting on another slab of the same slate. */
.hero-path .gg-prompt {
    min-width: 0;
    background: var(--col-darkback1);
    border: 1px solid rgba(126, 185, 232, 0.12);
    margin: 0;
    max-width: none;
    box-shadow: none;
}

/* One row: command left, copy button right. The stacked head-over-body shape is
   right for the wide column on /build-world, but here it spends a row on a caption
   the card title has already given. */
.hero-path .gg-prompt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-inline-end: 0.35rem;
}

.hero-path .gg-prompt-body {
    flex: 1 1 auto;
    min-width: 0;
}

.hero-path .gg-prompt-head {
    order: 2;
    flex: 0 0 auto;
    border-bottom: 0;
    padding: 0;
    gap: 0;
}

.hero-path .gg-prompt-body {
    font-size: 0.78rem;
    padding: 0.55rem 0.7rem;
    line-height: 1.5;
    /* One line with an ellipsis. The command is far too long for a half-width card
       and the Copy button is the mechanism anyway; wrapping it would blow the card
       height out and, on a phone, push the second path off the screen entirely.
       Truncation is visual only, so the button still copies the whole string. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sits under the actions row, not beside it */
.gg-hero .gg-prompt {
    margin-top: 1.4rem;
}

.cta-bg {
    display: flex;
    align-items: center;
    column-gap: 0.15em;
    background: var(--col-lightaccent1);
    transition: all 0.1s;
    box-shadow: 0 2px 8px rgba(126, 185, 232, 0.3);
}

.cta-bg:hover {
    background: var(--col-lightaccent2);
    box-shadow: 0 4px 12px rgba(126, 185, 232, 0.4);
    transform: translateY(-1px);
}

/* Section Styles */
section {
    padding: 5rem 2%;
}

.container {
    max-width: 1800px;
    margin: 0 auto;
}

h2 {
    font-family: var(--sofiasans);
    font-size: 2.8rem;
    margin-bottom: 1.25rem;
    color: #1a202c;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--col-lightfore1);
    margin-bottom: 3rem;
    text-align: center;
    line-height: 1.6;
    font-weight: 400;
}


/* What We Offer Section */
#what-we-offer {
    background: white;
}

.features-list {
    max-width: 950px;
    margin: 3rem auto 0;
}

.highlights .container {
    max-width: 1400px;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

#team .container {
    max-width: 1200px;
}

.highlights-grid,
.madewiththrixel-grid {
    display: grid;
    gap: 1.5rem;
    /* margin-top: 3rem; */
    justify-content: center;
}

/* nicebox can be in features-list and highlights-grid */
.nicebox {
    /* margin-bottom: 2rem; */
    /* padding: 1.7rem 2.5rem; */
    border-radius: 12px;
    /* border: 1px solid #dee3e9; */
    transition: transform 0.3s, box-shadow 0.3s;
    /* background: rgba(91, 155, 213, 0.12); */
    list-style: none;
    overflow: hidden;

    box-shadow:
        4px 4px 0px rgba(65, 133, 196, 0.25),
        8px 8px 0px rgba(65, 133, 196, 0.20),
        12px 12px 20px rgba(65, 133, 196, 0.15);
}

.highlights-grid .nicebox,
.madewiththrixel-grid .nicebox {
    /* Lighter slate + hairline edge so the cards separate from the navy page
       (--col-darkback1a is nearly the page's navy and would melt into it) */
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    color: var(--col-darkfore2);
    /* The stock 3-layer offset shadow reads as extra rectangles on navy;
       keep just the near light-blue one */
    box-shadow: 4px 4px 0px rgba(65, 133, 196, 0.25);
}

.highlight-video {
    width: 100%;
    /* All feature videos are 860x484: reserve the space before they load */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* .highlights-grid .nicebox {
    border-inline-start: 6px solid var(--col-lightaccent2);
}
*/
/* 
.nicebox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
} */

/* .nicebox:last-child {
    margin-bottom: 0;
} */

.nicebox h3 {
    font-family: var(--sofiasans);
    font-size: 1.5rem;
    /* Matches every other heading on the dark pages (section h2s, .gg-card-title,
       .gg-hero-tagline). Without it the title inherits --col-darkfore2 from the card
       and sits only 14 RGB levels above the subtitle, so the two read as one block. */
    color: var(--col-darkfore1);
    /* background: var(--col-darkback1); */
    position: relative;
    /* top: 0.5em; */
    /* left: -1em; */
    z-index: 2;
    text-align: center;
    margin: 0.35rem 1.5rem 0rem 1.2rem;
    border-radius: 8px;
    /* margin-bottom: 1rem; */
    font-weight: 700;
    font-style: italic;
    /* width: fit-content; */
    letter-spacing: -0.02em;
}

.nicebox p {
    color: var(--col-darkfore3);
    font-size: 1.05rem;
    text-align: center;
    line-height: 1.8;
    font-weight: 400;
    margin: -0.1rem 1.5rem 0.5rem 1.2rem;
}

/* About Section */
#about {
    background: var(--col-darkback1);
    padding-bottom: 2rem;
}

.about-content {
    max-width: 850px;
    margin: 0 auto 1rem;
    font-size: 1.2rem;
    color: var(--col-darkfore2);
    line-height: 1.8;
    text-align: center;
    font-weight: 400;
}

.about-content p {
    margin-bottom: 1.5rem;
}

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

/* Founder Note Section */
#founder-note {
    background: var(--col-darkback1);
    padding-top: 2rem;
}

.founder-note-content {
    max-width: 850px;
    margin: 0 auto 3rem;
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    padding: 2rem 2.5rem;
    border-radius: 8px;
    text-align: center;
}

.founder-note-content h3 {
    font-size: 1.6rem;
    color: var(--col-lightaccent2);
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.01em;
}

.founder-note-content p {
    font-size: 1.2rem;
    color: var(--col-darkfore2);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.founder-note-content p:last-child {
    margin-bottom: 0;
    font-style: normal;
}

.founder-contact {
    margin-top: 2rem;
    color: var(--col-darkfore2);
    text-align: center;
}

.founder-contact a {
    color: var(--col-lightaccent2);
    text-underline-offset: 3px;
}

/* Stats Section */
.stats-section {
    background: white;
    padding: 5rem 5%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.stat-card h3 {
    font-size: 2.2rem;
    color: var(--col-lightfore2);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.stat-card p {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Feature Cards */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: #f8f9fb;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #e8ecf0;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--col-lightfore2);
    font-weight: 600;
}

.feature-card p {
    color: #64748b;
    line-height: 1.7;
}

/* Process Section */
.process-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 4rem 0;
    flex-wrap: wrap;
}

.process-step {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.process-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--col-lightaccent1) 0%, #4a8bc2 100%);
    border-radius: 12px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.process-step h4 {
    font-size: 1.2rem;
    color: var(--col-lightfore2);
    margin-bottom: 0.5rem;
}

.process-arrow {
    font-size: 2rem;
    color: #cbd5e0;
}

/* Made with Thrixel */
#madewiththrixel {
    background: var(--col-darkback1);
    padding: 4rem 0;
}

.mwt-header {
    padding: 0 5% 1rem;
    text-align: center;
}

.mwt-header h2 {
    color: #1a202c;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* .mwt-header is shared with light-themed pages; recolor only on the navy
   landing page */
body.home .mwt-header h2 {
    color: var(--col-darkfore1);
}

body.home .mwt-header .section-subtitle {
    color: var(--col-darkfore2);
}

.mwt-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 8%;
    overflow: hidden;
}

.mwt-carousel {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding: 0.5rem 0 1.5rem;
    width: 100%;
    list-style: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mwt-carousel::-webkit-scrollbar {
    display: none;
}

.mwt-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
    /* Same slate-on-navy treatment as the highlight cards */
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.mwt-card:hover {
    transform: translateY(-3px);
    outline: 2px solid var(--col-lightaccent2);
    outline-offset: 0px;
}

/* The carousel clips are 1920x1080: 16:9 shows them uncropped */
.mwt-card-img,
.mwt-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.mwt-card-info {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mwt-creator {
    font-size: 0.78rem;
    color: var(--col-darkfore3);
    font-weight: 400;
}

.mwt-title {
    font-family: var(--sofiasans);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--col-darkfore1);
    letter-spacing: -0.01em;
}

.mwt-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1a202c;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.mwt-carousel-wrap:hover .mwt-arrow {
    opacity: 1;
}

.mwt-arrow:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mwt-arrow-left {
    left: 0.75rem;
}

.mwt-arrow-right {
    right: 0.75rem;
}

/* Testimonials */
#testimonials {
    background: var(--col-darkback1);
    padding: 4rem 0;
}

.testimonial-carousel-wrap {
    /* Side padding reserves a gutter for the arrows so they sit clear of the
       cards instead of overlapping them. */
    --arrow-size: 36px;
    --arrow-inset: 0.5rem;
    --arrow-gap: 0.75rem;
    --arrow-gutter: calc(var(--arrow-inset) + var(--arrow-size) + var(--arrow-gap));
    position: relative;
    display: flex;
    align-items: stretch;
    /* Widened by the gutter on both sides so the cards keep the 1128px of
       usable width they had before the arrows were moved out. */
    max-width: calc(1128px + 2 * var(--arrow-gutter));
    margin: 0 auto;
    padding: 0 var(--arrow-gutter);
    overflow: hidden;
}

.testimonial-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.testimonial-carousel::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem;
    /* Same top-to-bottom blue as the feature videos above the "Thrixel in action"
       link, so the cards read as part of that family instead of as white holes
       punched in the navy page. Sampled from those video backdrops. */
    background: linear-gradient(180deg, #3478ad 0%, #124f83 100%);
    border: 1px solid rgba(126, 185, 232, 0.30);
    border-radius: 16px;
    /* Matches the single light-blue offset shadow the video cards carry */
    box-shadow: 4px 4px 0px rgba(65, 133, 196, 0.25);
}

.testimonial-quote {
    font-family: var(--sofiasans);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--col-darkfore1);
    margin: 0;
    font-weight: 500;
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: auto;
}

.testimonial-photo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2b6da2;
    color: #9cc4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.testimonial-photo svg {
    width: 60%;
    height: 60%;
}

.testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.testimonial-name {
    font-family: var(--sofiasans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--col-darkfore1);
}

.testimonial-role {
    font-size: 0.8rem;
    color: var(--col-darkfore2);
    line-height: 1.35;
}

.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1a202c;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.testimonial-carousel-wrap:hover .testimonial-arrow {
    opacity: 1;
}

.testimonial-arrow:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.testimonial-arrow-left {
    left: var(--arrow-inset);
}

.testimonial-arrow-right {
    right: var(--arrow-inset);
}


/* Team Section */
#team {
    background: rgba(34, 44, 66, 0.4);
}

.team-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    margin-top: 3rem;
    justify-content: center;
}


.highlights-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 600px));
}

.madewiththrixel-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 450px));
}

.team-member {
    text-align: center;
    padding: 2.5rem 2rem;
    background: #222c42;
    border-radius: 12px;
    border: 1px solid rgba(126, 185, 232, 0.18);
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 400px;
}

.team-member:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.team-member h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--col-darkfore1);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.team-role {
    color: var(--col-lightaccent2);
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.team-bio {
    color: var(--col-darkfore2);
    line-height: 1.7;
}

.team-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.5rem;
    display: block;
    border: 3px solid #3c4a60;
}

/* ChatGPT Moment Section */
.highlight-section {
    background: white;
    padding: 4rem 2rem;
    border-radius: 16px;
    text-align: center;
    margin: 4rem 0;
    border: 1px solid #e8ecf0;
}

.highlight-section h3 {
    font-size: 2rem;
    color: var(--col-lightfore2);
    margin-bottom: 1rem;
    font-weight: 600;
}

.highlight-section p {
    color: #718096;
    font-size: 1.1rem;
}

/* Newsletter Section */
.newsletter-section {
    background: #f8f9fb;
    padding: 5rem 5%;
    text-align: center;
}

.newsletter-section h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--col-lightfore2);
}

.newsletter-section p {
    color: #64748b;
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
}

.newsletter-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.newsletter-input {
    flex: 1;
    min-width: 280px;
    padding: 1rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
}

.newsletter-input:focus {
    outline: none;
    border-color: #7eb9e8;
}

.newsletter-button {
    padding: 1rem 2.5rem;
    background: #7eb9e8;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.newsletter-button:hover {
    background: #6ba8d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(126, 185, 232, 0.3);
}

/* Contact Section */
#contact {
    background: white;
}

#contact h2 {
    color: var(--col-lightfore2);
}

.contact-info {
    text-align: center;
    margin: 3rem 0;
}

.contact-email {
    font-size: 1.2rem;
    color: var(--col-lightaccent1);
    text-decoration: none;
    font-weight: 500;
}

.contact-email:hover {
    text-decoration: underline;
}

.contact-form {
    max-width: 600px;
    margin: 3rem auto 0;
    background: #f8f9fb;
    padding: 3rem;
    border-radius: 12px;
    border: 1px solid #e8ecf0;
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--col-lightfore1);
}

input,
textarea {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
    transition: border-color 0.3s;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: #7eb9e8;
}

textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-button {
    width: 100%;
    padding: 1rem;
    background: #7eb9e8;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.submit-button:hover {
    background: #6ba8d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(126, 185, 232, 0.3);
}

/* Footer */
footer {
    /* A shade darker than the navy pages, so on /, /mcp and the Build World hero the
       footer still reads as its own band rather than more of the page. */
    background: #0b1220;
    color: var(--col-darkfore2);
    padding: 3.5rem 5% 2.5rem;
    border-top: 1px solid #2a3a52;
}

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--col-darkfore1);
    font-family: var(--sofiasans);
    font-size: 1.15rem;
    font-weight: 700;
}

.footer-logo img {
    height: 28px;
    width: auto;
}

.footer-columns {
    max-width: 1200px;
    margin: 2.5rem auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    text-align: start;
}
.footer-column { min-width: 0; padding: 0; }
.footer-column h2 {
    color: var(--col-darkfore1);
    font-family: var(--sofiasans);
    font-size: 1.15rem;
    line-height: 1.4;
    text-align: start;
    margin: 0 0 1rem;
}
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li + li { margin-top: .65rem; }
.footer-column .footer-subgroup { margin-block: 1.25rem; }
.footer-subgroup h3 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--col-darkfore2);
    margin: 0 0 .65rem;
}
.footer-column a,
.footer-legal a {
    color: #a5afbf;
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    transition: color .2s;
}
.footer-column a:hover,
.footer-legal a:hover { color: var(--col-darkfore1); }
.footer-column a:focus-visible, .footer-logo:focus-visible {
    outline: 2px solid var(--col-lightaccent2);
    outline-offset: 4px;
}
@media (max-width: 901px) {
    .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}
@media (max-width: 360px) {
    .footer-columns { grid-template-columns: 1fr; }
}

.footer-divider {
    max-width: 1200px;
    margin: 2rem auto;
    border: none;
    border-top: 1px solid #2a3a52;
}

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 0 auto 1.75rem;
}

.footer-social a {
    display: inline-flex;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.footer-social a:hover {
    opacity: 1;
}

.footer-social img {
    height: 22px;
    width: auto;
    display: block;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.85rem;
    color: #4a5568;
    margin: 0;
}

/* The legal links: small print, a line of their own under the copyright. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    margin-top: 0.6rem;
}

.footer-legal a {
    font-size: 0.78rem;
    color: #6b7486;
}

/* Responsive */
@media (max-width: 901px) {
    .hero h1 {
        font-size: 2.8rem;
        margin-bottom: 1.25rem;
        margin-top: 2rem;
    }

    .hero p {
        font-size: 1.2rem;
        line-height: 1.65;
    }

    .hero .shape-1 {
        width: 55px;
        height: 55px;
        top: 10%;
        right: 10%;
    }

    .hero .shape-2 {
        width: 50px;
        height: 50px;
    }

    .hero .shape-3 {
        width: 45px;
        height: 45px;
    }

    .hero .shape-4 {
        width: 40px;
        height: 40px;
    }

    .hero .shape-5 {
        width: 55px;
        height: 55px;
    }

    .hero .shape-6 {
        width: 40px;
        height: 40px;
    }

    .hero .shape-7 {
        width: 45px;
        height: 45px;
    }

    .hero .shape-8 {
        width: 35px;
        height: 35px;
    }

    #nav-links {
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    nav .container {
        column-gap: 1rem;
        row-gap: 1rem;
        justify-content: center;
    }

    .logo {
        flex: 0 1 100%;
        justify-content: center;
    }

    h2 {
        font-size: 2.2rem;
    }

    .section-subtitle {
        font-size: 1.1rem;
    }

    /* Show two testimonial cards on tablet widths */
    .testimonial-card {
        flex-basis: calc((100% - 1.5rem) / 2);
    }

    .nicebox h3 {
        font-size: 1.4rem;
    }

    .nicebox p {
        font-size: 1.05rem;
    }

    .about-content {
        font-size: 1.1rem;
    }

    .team-member h3 {
        font-size: 1.3rem;
    }

    .founder-note-content h3 {
        font-size: 1.4rem;
    }

    .founder-note-content p {
        font-size: 1.1rem;
    }

    .contact-form {
        padding: 2rem;
    }

    .process-arrow {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-input {
        min-width: 100%;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }


    /*
    .hero-visual {
        height: 250px;
    }
    .hero-placeholder {
        height: 200px;
        font-size: 0.9rem;
    } */

}


/* Stacked hero: no room to park the square video beside the copy, so the
   copy centers and the video moves below it */
@media (max-width: 1100px) {
    .hero {
        height: auto;
        align-items: center;
        text-align: center;
        padding: 2.5rem 0 0;
    }

    .hero .container {
        /* A definite width, not shrink-to-fit. .hero is a column flex container, so
           this is sized on the cross axis from its own min-content -- and the command
           block is white-space: nowrap, giving it a min-content of ~890px. Left to
           size itself the copy column renders ~600px wide inside a 390px phone, and
           because .hero clips its overflow the symptom is not a scrollbar but the
           Start creating button vanishing off the right edge. */
        width: 100%;
        margin: 0 auto;
        padding: 0 1.5rem;
    }


    .hero-grid {
        mask-image: radial-gradient(ellipse 75% 55% at 50% 30%, #000 0%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 30%, #000 0%, transparent 100%);
    }

    .herogallery-container {
        position: static;
        order: 2;
        width: 100%;
        top: 0;
        height: auto;
    }

    .herogallery-video {
        height: auto;
        width: min(85vw, 460px);
        transform: none;
    }
}

@media (max-width: 710px) {
    .hero h1 {
        margin-top: 0.5rem;
    }

    /* One testimonial card at a time on phones, with a peek of the next */
    .testimonial-card {
        flex-basis: 85%;
    }

    /* Tighter arrow gutter so the cards keep their width on narrow screens */
    .testimonial-carousel-wrap {
        --arrow-size: 30px;
        --arrow-inset: 0.25rem;
        --arrow-gap: 0.4rem;
    }
}


/* hamburger menu appears */
@media (max-width: 901px) {
    #nav-links>* {
        flex: 0 1 52%;
        text-align: center;
        margin: 0 auto;
    }

    #nav-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    nav .container {
        row-gap: 0px;
    }


    #nav-links {
        overflow-y: hidden;
    }

    #nav-links.mobile-expanded {
        max-height: 80vh;
        overflow-y: auto;
        padding-top: 1rem;
    }

    /* In the hamburger panel each group is an accordion: the list drops into
       the flow under its heading instead of floating over the page. */
    .nav-group-toggle {
        margin: 0 auto;
        padding: 0.5rem 0;
    }

    .nav-plain a {
        padding: 0.5rem 0;
    }

    .nav-dropdown {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 0.5rem;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .nav-dropdown::before {
        display: none;
    }

    .nav-group.open .nav-dropdown {
        display: block;
        transform: none;
    }

    .nav-dropdown li,
    .nav-dropdown li:first-child,
    .nav-dropdown li:last-child {
        padding: 0;
    }

    .nav-dropdown a {
        justify-content: center;
    }

    .nav-sub-toggle {
        justify-content: center;
        gap: 0.35rem;
    }

    .nav-sub-toggle .nav-chevron {
        transform: none;
    }

    .nav-sub.open > .nav-sub-toggle {
        background: none;
    }

    .nav-sub.open > .nav-sub-toggle .nav-chevron {
        transform: rotate(180deg);
    }

    .nav-subdropdown {
        position: static;
        display: none;
        min-width: 0;
        padding: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .nav-subdropdown::before {
        display: none;
    }

    .nav-group.open .nav-sub.open > .nav-subdropdown {
        display: block;
    }

    .nav-subdropdown a {
        font-size: 0.9rem;
    }

    #nav-links.mobile-collapsed {
        max-height: 0px;
        padding-top: 0px;
    }

    .nav-button-link {
        justify-content: center;
    }

    #nav-expando {
        display: block;
    }

    .nav-hidable-label {
        display: inline;
    }
}

/* Honeypot */
.form-hp {
    display: none;
}

.hidden {
    display: none;
}

/* Form Messages */
.form-message {
    display: none;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
}

.form-message.show {
    display: block;
}

.form-message.success {
    background: #7eb9e8;
    color: white;
}

.form-message.error {
    background: #fee2e2;
    color: #991b1b;
}

/* Submit Loading State */
.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Thrixel in Action — video gallery */
#in-action {
    background: var(--col-darkback1);
    padding: 4rem 0 5rem;
    min-height: 70vh;
}

#in-action h2 {
    color: var(--col-darkfore1);
    text-align: center;
    margin-bottom: 0.5rem;
}

#in-action .section-subtitle {
    color: var(--col-darkfore2);
}

.ia-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1.25rem;
    list-style: none;
    padding: 0 5%;
}

.ia-card {
    border-radius: 14px;
    overflow: hidden;
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    box-shadow: 4px 4px 0 rgba(65, 133, 196, 0.25);
    cursor: pointer;
    transition: transform 0.2s;
}

.ia-card:hover,
.ia-card:focus-visible {
    transform: translateY(-3px);
    outline: 2px solid var(--col-lightaccent2);
    outline-offset: 0px;
}

.ia-thumb-wrap {
    position: relative;
    background: #0b1220;
}

.ia-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.ia-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    background: rgba(17, 24, 39, 0.35);
    transition: opacity 0.2s;
}

.ia-card:hover .ia-play,
.ia-card:focus-visible .ia-play {
    opacity: 1;
}

.ia-play svg {
    background: rgba(17, 24, 39, 0.75);
    border-radius: 50%;
    padding: 14px;
    width: 54px;
    height: 54px;
    box-sizing: content-box;
}

.ia-card-info {
    padding: 0.85rem 1rem 1.1rem;
}

/* Sized so a ~100 character title wraps to three lines without crowding the card */
.ia-card-title {
    display: block;
    font-family: var(--sofiasans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--col-darkfore1);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

/* Video popup */
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(9, 13, 22, 0.82);
    backdrop-filter: blur(6px);
    padding: 3vh 4vw;
    align-items: center;
    justify-content: center;
}

.video-modal.open {
    display: flex;
}

body.modal-open {
    overflow: hidden;
}

.video-modal-dialog {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1200px;
    max-height: 94vh;
    background: var(--col-darkback1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.video-modal-player {
    flex: 1 1 66%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    min-width: 0;
}

.video-modal-video {
    width: 100%;
    max-height: 94vh;
    display: block;
}

/* Wide enough that a ~100 character title and a ~280 character description both
   sit comfortably in the column without scrolling on a normal-height screen */
.video-modal-details {
    flex: 0 0 390px;
    padding: 2.25rem 2rem;
    overflow-y: auto;
    border-inline-start: 1px solid #374151;
}

.video-modal-title {
    font-family: var(--sofiasans);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--col-darkfore1);
    letter-spacing: -0.01em;
    margin-bottom: 1.1rem;
    /* keeps a long first line clear of the close button in the corner */
    padding-inline-end: 2rem;
    overflow-wrap: anywhere;
}

.video-modal-description {
    color: var(--col-darkfore2);
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    /* honours the line breaks authored in the description strings */
    white-space: pre-wrap;
}

.video-modal-description a {
    color: var(--col-lightaccent2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.video-modal-description a:hover {
    color: white;
}

.video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.75);
    color: var(--col-darkfore1);
    cursor: pointer;
}

.video-modal-close:hover {
    background: var(--col-darkback2);
}

@media (max-width: 1100px) {
    .ia-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 901px) {
    .ia-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stack the popup: video on top, details below */
    .video-modal-dialog {
        flex-direction: column;
        max-height: 90vh;
        overflow-y: auto;
    }

    .video-modal-details {
        flex: 1 1 auto;
        border-inline-start: none;
        border-top: 1px solid #374151;
        padding: 1.5rem;
    }

    .video-modal-video {
        max-height: 55vh;
    }
}

@media (max-width: 560px) {
    .ia-gallery {
        grid-template-columns: 1fr;
    }
}

.mwt-footer-link {
    text-align: center;
    padding: 0.5rem 5% 0;
}

.mwt-footer-link a {
    font-size: 1.1rem;
    font-weight: 600;
    /* --col-lightaccent1 is too dim against the navy */
    color: #7eb9e8;
    text-decoration: none;
}

.mwt-footer-link a:hover {
    color: var(--col-darkfore1);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   Updates — listing page
----------------------------------------------------------------------------- */
#updates {
    background: var(--col-heroback);
    min-height: calc(100vh - 80px);
}

#updates .container {
    max-width: 920px;
}

/* Subscribe bar below the updates list */
.updates-subscribe {
    max-width: 620px;
    margin: 3.5rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid #dbe4ee;
    text-align: center;
}

.updates-subscribe .section-subtitle {
    font-size: 1.05rem;
    margin: 1rem 0 0;
}

.updates-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.updates-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.updates-chip {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--col-lightfore1);
    background: white;
    border: 1px solid #cdd9e6;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.updates-chip:hover {
    border-color: var(--col-lightaccent1);
    color: var(--col-lightaccent1);
}

.updates-chip.is-active {
    background: var(--col-lightaccent1);
    border-color: var(--col-lightaccent1);
    color: white;
}

.updates-sort {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--col-lightfore1);
    background: white;
    border: 1px solid #cdd9e6;
    border-radius: 8px;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
}

.updates-sort:hover {
    border-color: var(--col-lightaccent1);
    color: var(--col-lightaccent1);
}

.updates-sort-caret {
    font-size: 0.85rem;
    line-height: 1;
}

.updates-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
}

.update-card {
    display: block;
    background: white;
    border-radius: 12px;
    padding: 1.6rem 1.9rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow:
        4px 4px 0px rgba(65, 133, 196, 0.18),
        8px 8px 0px rgba(65, 133, 196, 0.12),
        12px 12px 20px rgba(65, 133, 196, 0.10);
}

.update-card:hover {
    transform: translateY(-3px);
    box-shadow:
        4px 4px 0px rgba(65, 133, 196, 0.25),
        8px 8px 0px rgba(65, 133, 196, 0.18),
        14px 14px 24px rgba(65, 133, 196, 0.15);
}

.update-date {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--col-lightaccent1);
    margin-bottom: 0.5rem;
}

.update-title {
    font-family: var(--sofiasans);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a202c;
    margin: 0 0 0.6rem;
    line-height: 1.25;
}

.update-excerpt {
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--col-lightfore1);
    margin: 0 0 1.1rem;
}

.update-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.update-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--col-lightaccent1);
    background: rgba(74, 137, 197, 0.10);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    white-space: nowrap;
}

.updates-empty {
    text-align: center;
    color: var(--col-lightfore1);
    font-size: 1.1rem;
    margin-top: 2rem;
}

/* -----------------------------------------------------------------------------
   Updates — individual entry / article page
----------------------------------------------------------------------------- */
.update-article {
    background: white;
    padding: 4rem 2% 5rem;
}

.update-article .container {
    max-width: 760px;
}

.update-back {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--col-lightaccent1);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.2s;
}

.update-back:hover {
    color: var(--col-lightfore2);
}

.update-article-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.update-article-header h1 {
    font-family: var(--sofiasans);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #1a202c;
    margin: 0 0 1rem;
}

.update-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.update-meta time {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--col-lightaccent1);
}

.update-subtitle {
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--col-lightfore1);
    margin: 1.1rem 0 0;
}

.update-body {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--col-lightfore1);
}

.update-body h2 {
    font-family: var(--sofiasans);
    font-size: 1.7rem;
    font-weight: 700;
    text-align: start;
    letter-spacing: -0.01em;
    color: #1a202c;
    margin: 2.5rem 0 1rem;
}

.update-body h3 {
    font-family: var(--sofiasans);
    font-size: 1.3rem;
    font-weight: 700;
    text-align: start;
    letter-spacing: -0.01em;
    color: #1a202c;
    margin: 2rem 0 0.75rem;
}

.update-body blockquote {
    margin: 0 0 1.4rem;
    padding: 0.5rem 1.25rem;
    border-inline-start: 4px solid var(--col-lightaccent2);
    color: var(--col-lightfore1);
    font-style: italic;
}

.update-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0 1.4rem;
}

/* Button shortcode: `!button Label | https://url` on its own line. */
.update-button-wrap {
    margin: 0 0 1.6rem;
}

.update-button {
    display: inline-block;
    background: var(--col-lightaccent1);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    transition: background 0.2s, transform 0.15s;
}

.update-button:hover {
    background: var(--col-lightaccent2);
    transform: translateY(-1px);
}

.update-body p {
    margin: 0 0 1.4rem;
}

/* Alignment blocks ( ::: left|center|right … ::: in Markdown ). Images are
   display:block, so they centre/right via auto margins rather than text-align. */
.update-body .align-left { text-align: start; }
.update-body .align-center { text-align: center; }
.update-body .align-right { text-align: end; }
/* Headings set their own text-align:start, so let them follow an alignment block. */
.update-body [class*="align-"] h2,
.update-body [class*="align-"] h3 { text-align: inherit; }
.update-body .align-center img { margin-inline-start: auto; margin-inline-end: auto; }
.update-body .align-right img { margin-inline-start: auto; margin-inline-end: 0; }
.update-body .align-left img { margin-inline-start: 0; margin-inline-end: auto; }

/* Captioned images ( ![alt](url){caption="…"} ) render as a figure with the
   caption in small text underneath. The figure shrink-wraps the image so it can
   be centred/right-aligned as a unit inside an alignment block. */
.update-body .update-figure { display: table; max-width: 100%; margin: 1rem 0 1.4rem; }
.update-body .update-figure img { display: block; margin: 0 auto; max-width: 100%; }
.update-body .update-figure figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: #718096; text-align: center; }
.update-body .align-center .update-figure { margin-inline-start: auto; margin-inline-end: auto; }
.update-body .align-right .update-figure { margin-inline-start: auto; margin-inline-end: 0; }

.update-body ul {
    margin: 0 0 1.4rem;
    padding-inline-start: 1.4rem;
}

.update-body li {
    margin-bottom: 0.6rem;
}

.update-body a {
    color: var(--col-lightaccent1);
    text-decoration: none;
    font-weight: 500;
}

.update-body a:hover {
    text-decoration: underline;
}

/* "Subscribe via email" link under an update — web parity with the email's
   "View this update on the web" link. */
.update-web-cta {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.update-web-cta a {
    color: var(--col-lightaccent1);
    font-weight: 600;
    text-decoration: none;
}

.update-web-cta a:hover {
    text-decoration: underline;
}

@media (max-width: 901px) {
    .updates-controls {
        justify-content: flex-start;
    }

    .update-title {
        font-size: 1.4rem;
    }

    .update-article-header h1 {
        font-size: 2.1rem;
    }

    .update-body {
        font-size: 1.08rem;
    }

    .update-body h2 {
        font-size: 1.45rem;
    }
}

/* -----------------------------------------------------------------------------
   Build World showcase (/build-world)
   Note: the gg- class prefix is just shorthand for the old page name, goal-to-game.
----------------------------------------------------------------------------- */
.gg-hero {
    background: var(--col-darkback1);
    color: var(--col-darkfore2);
    /* The 80px that clears the fixed nav is padding, not margin, so the navy runs up
       under the translucent nav instead of the light page showing through it.
       Tight at the bottom on purpose: the demo video sits directly below on the same
       background and reads as part of the hero, not as the next thing down. */
    padding: calc(80px + 5rem) 5% 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Faint blueprint grid — pure CSS, keeps the hero from reading as a flat slab */
.gg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(126, 185, 232, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 185, 232, 0.07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 0%, transparent 100%);
    pointer-events: none;
}

.gg-hero .container {
    max-width: 780px;
    position: relative;
    z-index: 1;
}

.gg-eyebrow {
    font-family: var(--sofiasans);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--col-lightaccent2);
    margin-bottom: 0.75rem;
}

.gg-wordmark {
    font-family: var(--sofiasans);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--col-darkfore1);
}

/* "Build" stays white and "World" takes the accent. */
.gg-mark {
    color: var(--col-lightaccent2);
}

.gg-hero-tagline {
    font-family: var(--sofiasans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--col-darkfore1);
    margin: 0.75rem 0 1.1rem;
    line-height: 1.3;
}

.gg-hero-body {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--col-darkfore3);
    max-width: 640px;
    margin: 0 auto;
}

.gg-hero-body strong {
    color: var(--col-darkfore1);
    font-weight: 600;
}

.gg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2.25rem;
}

.gg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

/* The logo sits bigger here than in .cta-button: .gg-btn has more padding, so the
   default 1.1em reads as undersized.  The flex gap already spaces it from the text. */
.gg-btn .logo-img-inline {
    height: 1.6em;
    padding-inline-end: 0;
    /* .learn-body img gives article images a vertical margin, which on the /learn
       pages stretched this button by its own height again.  The button is not an
       article image, so it opts out. */
    margin: 0;
}

.gg-btn-primary {
    background: var(--col-lightaccent1);
    color: white;
    box-shadow: 0 2px 8px rgba(126, 185, 232, 0.3);
}

.gg-btn-primary:hover {
    background: var(--col-lightaccent2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(126, 185, 232, 0.4);
}

.gg-btn-ghost {
    color: var(--col-darkfore1);
    border: 1px solid #3c4a60;
}

.gg-btn-ghost:hover {
    border-color: var(--col-lightaccent2);
    color: var(--col-lightaccent2);
}

/* Gallery */
/* Playable showcase — three cards, no creator credits */
#games {
    background: white;
    padding: 4.5rem 0 5rem;
}

#games .container {
    max-width: 1400px;
}

.gg-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 1.5rem;
    list-style: none;
    padding: 0 5%;
}

.gg-card {
    border-radius: 14px;
    overflow: hidden;
    background: #111827;
    transition: transform 0.2s, box-shadow 0.2s;
}

.gg-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Only a filled card reacts to the pointer — an empty slot has no target */
.gg-card:not(.gg-card-empty):hover,
.gg-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.25);
}

.gg-card:not(.gg-card-empty) .gg-card-inner {
    cursor: pointer;
}

/* An unfilled card is just the dashed slot — no empty body padding below it */
.gg-card-empty {
    background: transparent;
}

.gg-card-empty .gg-card-body {
    display: none;
}

.gg-thumb-wrap {
    position: relative;
    background: #0b1220;
}

.gg-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.gg-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gg-thumb-fallback span {
    font-family: var(--sofiasans);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(249, 250, 251, 0.55);
}

/* Unfilled entry: reads as an intentional slot, matching the video placeholders */
.gg-thumb-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px dashed #33415a;
    border-radius: 12px;
    text-align: center;
    padding: 1rem;
}

.gg-thumb-slot span {
    font-family: var(--sofiasans);
    font-size: 1rem;
    font-weight: 700;
    color: #6b7a8f;
}

.gg-thumb-slot small {
    font-size: 0.76rem;
    color: #55637a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.gg-card-body {
    padding: 1rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gg-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--col-lightaccent2);
    background: rgba(126, 185, 232, 0.12);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    margin-bottom: 0.6rem;
    white-space: nowrap;
}

.gg-card-title {
    font-family: var(--sofiasans);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--col-darkfore1);
    margin-bottom: 0.45rem;
    overflow-wrap: anywhere;
}

/* Clamped to three lines so uneven description lengths keep the grid tidy */
.gg-card-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--col-darkfore2);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gg-play {
    margin-top: auto;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--col-lightaccent2);
}

.gg-card:not(.gg-card-empty):hover .gg-play {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Demo videos — deliberately not a section of their own. The primary one continues
   the hero's dark background so there is no seam between the pitch and the proof. */
.gg-showcase {
    background: var(--col-darkback1);
    padding: 0 0 4.5rem;
}

.gg-showcase .container {
    max-width: 1000px;
}

.gg-demo-primary {
    padding: 0 5%;
}

.gg-demo-secondary {
    padding: 2.5rem 5% 0;
    max-width: 900px;
    margin: 0 auto;
}

.gg-demo {
    margin: 0;
}

.gg-demo-video,
.gg-demo-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: 12px;
    background: #0b1220;
    object-fit: cover;
}

/* Quiet placeholder: reads as an intentional empty slot, not a broken player */
.gg-demo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px dashed #33415a;
    text-align: center;
    padding: 1rem;
}

.gg-demo-slot span {
    font-family: var(--sofiasans);
    font-size: 1rem;
    font-weight: 700;
    color: #6b7a8f;
}

.gg-demo-slot small {
    font-size: 0.76rem;
    color: #55637a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.gg-demo-caption {
    display: block;
    padding: 0.85rem 0.2rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--col-darkfore3);
    text-align: center;
}

.gg-demo-secondary .gg-demo-caption {
    color: var(--col-darkfore3);
}

/* What the skill does */
#what {
    background: var(--col-darkback1);
    padding: 4.5rem 0 5rem;
}

#what .container {
    max-width: 1200px;
}

.gg-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding: 0 5%;
}

.gg-fact {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 12px;
    padding: 1.9rem;
    box-shadow:
        4px 4px 0px rgba(65, 133, 196, 0.18),
        8px 8px 0px rgba(65, 133, 196, 0.12),
        12px 12px 20px rgba(65, 133, 196, 0.10);
}

.gg-fact h3 {
    font-family: var(--sofiasans);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--col-darkfore1);
    margin-bottom: 0.5rem;
}

.gg-fact p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--col-darkfore2);
}

.gg-fact a,
.gg-step a {
    color: var(--col-lightaccent2);
    font-weight: 500;
    text-decoration: none;
}

.gg-fact a:hover,
.gg-step a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Try it yourself — the prompt */

#gg-how {
    background: var(--col-darkback1);
    padding: 4.5rem 0 5.5rem;
}

.build-world-page .section-subtitle {
    color: var(--col-darkfore2);
}

#gg-how .container {
    max-width: 820px;
}

.gg-prompt {
    background: var(--col-darkback1);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 5%;
    box-shadow:
        4px 4px 0px rgba(65, 133, 196, 0.18),
        8px 8px 0px rgba(65, 133, 196, 0.12),
        12px 12px 20px rgba(65, 133, 196, 0.10);
}

.gg-prompt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid #2a3a52;
}

/* No caption, so the Copy button is the only child and would otherwise sit left */
.gg-prompt-head-bare {
    justify-content: flex-end;
}

.gg-prompt-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--col-darkfore3);
}

/* Both icons ship in every button; CSS decides which presentation applies. */
.gg-copy-ico {
    display: none;
    flex: 0 0 auto;
}

.gg-copy {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--col-darkfore1);
    background: transparent;
    border: 1px solid #3c4a60;
    border-radius: 6px;
    padding: 0.32rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.gg-copy:hover {
    border-color: var(--col-lightaccent2);
    color: var(--col-lightaccent2);
}

.gg-copy.is-copied {
    border-color: var(--col-lightaccent2);
    color: var(--col-lightaccent2);
}

/* Icon only in the hero: the command row is tight on height and the label would
   cost a whole row of its own. The label stays in the DOM as the accessible name. */
.hero-path .gg-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    border-color: transparent;
}

.hero-path .gg-copy:hover {
    border-color: #3c4a60;
}

.hero-path .gg-copy .gg-copy-ico-copy {
    display: block;
}

.hero-path .gg-copy.is-copied .gg-copy-ico-copy {
    display: none;
}

.hero-path .gg-copy.is-copied .gg-copy-ico-done {
    display: block;
}

.hero-path .gg-copy .gg-copy-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* pre wraps rather than scrolls — the prompt is meant to be read at a glance */
.gg-prompt-body {
    margin: 0;
    padding: 1.1rem 1.2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--col-darkfore1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gg-prompt-fill {
    color: var(--col-lightaccent2);
    font-style: italic;
}

.gg-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding: 0 5%;
    margin-bottom: 2.25rem;
}

.gg-step {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 12px;
    padding: 1.8rem 1.7rem;
    box-shadow:
        4px 4px 0px rgba(65, 133, 196, 0.18),
        8px 8px 0px rgba(65, 133, 196, 0.12),
        12px 12px 20px rgba(65, 133, 196, 0.10);
}

.gg-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--col-lightaccent1);
    color: white;
    font-family: var(--sofiasans);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
}

.gg-step h3 {
    font-family: var(--sofiasans);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--col-darkfore1);
    margin-bottom: 0.4rem;
}

.gg-step p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--col-darkfore2);
}

.gg-prompt-wide {
    max-width: 780px;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

/* Setup prompt, then the game prompt — read top to bottom as first-run then every-run.
   Each block gets a plain-language lead-in; the label inside the block head carries the
   "how often" instead of repeating the "what". */
.gg-prompt-stack {
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
    padding: 0 5%;
}

.gg-prompt-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gg-prompt-lead {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 600;
    color: var(--col-darkfore2);
}

.gg-how-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2rem;
}

/* Light-background twins of the hero buttons */
.gg-btn-solid {
    background: var(--col-lightaccent1);
    color: white;
    box-shadow: 0 2px 8px rgba(126, 185, 232, 0.3);
}

.gg-btn-solid:hover {
    background: var(--col-lightaccent2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(126, 185, 232, 0.4);
}

.gg-btn-outline {
    color: var(--col-lightaccent1);
    border: 1px solid #cdd9e6;
    background: white;
}

.gg-btn-outline:hover {
    border-color: var(--col-lightaccent1);
    transform: translateY(-1px);
}

/* Submission form */
#gg-submit {
    background: white;
    padding: 4.5rem 0 5.5rem;
}

.gg-form {
    max-width: 800px;
    margin-top: 2.5rem;
    padding: 2.5rem;
}

.gg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
}

.gg-form-grid .form-group {
    margin-bottom: 1.15rem;
}

.gg-span-2 {
    grid-column: 1 / -1;
}

.gg-optional {
    font-weight: 400;
    font-size: 0.85rem;
    color: #8a97a8;
}

/* Overrides the global 150px minimum, which made the form needlessly tall */
.gg-form textarea {
    min-height: 96px;
}

.gg-form .submit-button {
    margin-top: 0.35rem;
}

@media (max-width: 1100px) {
    .gg-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 901px) {
    .gg-steps,
    .gg-facts {
        grid-template-columns: 1fr;
    }

    .gg-wordmark {
        font-size: 3.4rem;
    }

    .gg-hero-tagline {
        font-size: 1.25rem;
    }
}

@media (max-width: 700px) {
    .gg-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .gg-gallery {
        grid-template-columns: 1fr;
    }

    .gg-prompt {
        margin: 0;
    }

    .gg-prompt-body {
        font-size: 0.92rem;
        padding: 1.1rem 1.15rem;
    }

    .gg-form {
        padding: 1.75rem 1.25rem;
    }

    .gg-hero {
        padding: calc(80px + 3.5rem) 5% 1.75rem;
    }

    .gg-wordmark {
        font-size: 2.8rem;
    }

    .gg-hero-body {
        font-size: 1rem;
    }

    .gg-btn {
        width: 100%;
        justify-content: center;
    }

    .contact-form {
        padding: 2rem 1.25rem;
    }
}

/* =============================================================================
   /learn/<slug> explainer pages
   -----------------------------------------------------------------------------
   Standalone, prose-first search landing pages.  Deliberately their own block
   rather than a reuse of the .update-* article styles: those belong to the
   Markdown pipeline in updates-tooling and carry things these pages do not have
   (figures, alignment blocks, tag chips), so sharing selectors would mean every
   change to one had to be checked against the other.  There is not much here.
   ============================================================================= */

.learn-article {
    background: var(--col-darkback1);
    padding: 4rem 2% 5rem;
}

.learn-article .container {
    max-width: 760px;
}

.learn-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #374151;
}

/* text-align:start, because the site-wide h2 rule centres headings and these read
   as an article, not as a marketing section. */
.learn-header h1 {
    font-family: var(--sofiasans);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--col-darkfore1);
    margin: 0;
    text-align: start;
}

.learn-lede {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--col-darkfore2);
    margin: 1.1rem 0 0;
}

.learn-body {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--col-darkfore2);
}

.learn-body h2 {
    font-family: var(--sofiasans);
    font-size: 1.7rem;
    font-weight: 700;
    text-align: start;
    letter-spacing: -0.01em;
    color: var(--col-darkfore1);
    margin: 2.5rem 0 1rem;
}

.learn-body h3 {
    font-family: var(--sofiasans);
    font-size: 1.3rem;
    font-weight: 700;
    text-align: start;
    letter-spacing: -0.01em;
    color: var(--col-darkfore1);
    margin: 2rem 0 0.75rem;
}

.learn-body p {
    margin: 0 0 1.4rem;
}

.learn-body ul,
.learn-body ol {
    margin: 0 0 1.4rem;
    padding-inline-start: 1.4rem;
}

.learn-body li {
    margin-bottom: 0.6rem;
}

.learn-body a {
    color: var(--col-lightaccent2);
    text-decoration: none;
    font-weight: 500;
}

.learn-body a:hover {
    text-decoration: underline;
}

.learn-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0 1.4rem;
}

.learn-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1.4rem;
    border: 1px solid #374151;
    border-radius: 8px;
}

.learn-table-wrap:focus-visible {
    outline: 2px solid var(--col-lightaccent2);
    outline-offset: 3px;
}

.learn-comparison {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.6;
}

.learn-comparison caption,
.learn-comparison th,
.learn-comparison td {
    padding: 0.85rem 1rem;
    text-align: start;
    vertical-align: top;
}

.learn-comparison caption,
.learn-comparison thead {
    background: #222c42;
    color: var(--col-darkfore1);
    font-weight: 600;
}

.learn-comparison th,
.learn-comparison td {
    border-top: 1px solid #374151;
}

/* The one styled control these pages get.  Usable inline in .learn-body as well
   as in the `cta` option on learn-bottom. */
.learn-button {
    display: inline-block;
    background: var(--col-lightaccent2);
    color: #111827 !important;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    transition: background 0.2s, transform 0.15s;
}

.learn-button:hover {
    background: #a4cff0;
    transform: translateY(-1px);
    text-decoration: none;
}

.learn-cta {
    margin: 0 0 1rem;
}

/* "Keep reading" -- small on purpose.  It is a way out of the page, not a
   second act.
   An <aside>, not a <nav>, even though a list of links is what it is: the site
   header's rules are written against a bare `nav` selector (position:fixed,
   top:0, full width), so a second <nav> anywhere in the page gets pinned over
   the header. */
.learn-related {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid #374151;
}

.learn-related h2 {
    font-family: var(--sofiasans);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--col-darkfore3);
    margin: 0 0 1rem;
}

.learn-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.learn-related li {
    margin-bottom: 0.85rem;
}

.learn-related a {
    color: var(--col-lightaccent2);
    text-decoration: none;
    font-weight: 600;
}

.learn-related a:hover {
    text-decoration: underline;
}

.learn-related span {
    display: block;
    font-size: 0.95rem;
    color: var(--col-darkfore3);
}

/* The list on /learn.  Same shape as "Keep reading" but it is the page's whole
   content rather than a footnote to it, so the rows get room and the titles get
   real size.  A <ul>, not a <nav> -- see the note above. */
.learn-index {
    list-style: none;
    margin: 0;
    padding: 0;
}

.learn-topic {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #374151;
    scroll-margin-top: 100px;
}

.learn-topic h2 {
    text-align: start;
    font-size: 1.8rem;
    color: var(--col-darkfore1);
    margin: 0 0 0.65rem;
}

.learn-topic > p {
    color: var(--col-darkfore2);
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.learn-index li {
    margin-bottom: 2rem;
}

.learn-index a {
    font-family: var(--sofiasans);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--col-lightaccent2);
    text-decoration: none;
}

.learn-index a:hover {
    text-decoration: underline;
}

.learn-index span {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--col-darkfore2);
}

@media (max-width: 768px) {
    .learn-article {
        padding: 2.5rem 5% 3.5rem;
    }

    .learn-header h1 {
        font-size: 2rem;
    }

    .learn-lede {
        font-size: 1.05rem;
    }

    .learn-body {
        font-size: 1.05rem;
    }

    .learn-body h2 {
        font-size: 1.4rem;
    }

    .learn-index a {
        font-size: 1.2rem;
    }

    .learn-index span {
        font-size: 1rem;
    }
}


.learn-article .gg-prompt {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    box-shadow: none;
}

/* =============================================================================
   /mcp -- the MCP server page.
   Built from the landing page's pieces (navy page, .hero-grid, slate cards with
   the light-blue hairline and offset shadow, .cta-button) so it belongs to the
   same site.  What is its own: the terminal in the hero, the tool lists, and the
   setup tabs.  Scoped to body.mcp-page or an mcp- class.
   ============================================================================= */

body.mcp-page {
    background: var(--col-darkback1);
}

.mcp-page main a,
.mcp-link {
    color: var(--col-lightaccent2);
}

.mcp-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

.mcp-wrap-narrow {
    max-width: 820px;
}

.mcp-page code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--col-lightaccent2);
}

/* --- hero -------------------------------------------------------------------- */

.mcp-hero {
    margin-top: 80px;
    padding: 5.5rem 5% 5rem;
    position: relative;
    overflow: hidden;
}

.mcp-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3.5rem;
    align-items: center;
}

.mcp-hero h1 {
    font-family: var(--sofiasans);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--col-darkfore1);
    margin-bottom: 1.25rem;
}

.mcp-hero .mcp-tagline {
    font-family: var(--sofiasans);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--col-lightaccent2);
    margin: -0.6rem 0 1.25rem;
}

.mcp-hero-copy p {
    font-size: 1.2rem;
    line-height: 1.75;
    color: var(--col-darkfore2);
}

.mcp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.mcp-hero-actions .cta-button {
    margin: 0;
    font-size: 1.2rem;
    padding: 0.7rem 1.5rem 0.75rem;
    column-gap: 0.4rem;
}

/* The hero's button only scrolls to #setup, so it is deliberately NOT the solid
   .cta-bg button, which everywhere else on the site means "go sign up". */
.mcp-btn-outline {
    display: inline-block;
    padding: 0.65rem 1.6rem;
    border: 1px solid var(--col-lightaccent2);
    border-radius: 8px;
    font-family: var(--sofiasans);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--col-darkfore1);
    text-decoration: none;
    transition: background 0.15s ease;
}

.mcp-btn-outline:hover {
    background: rgba(126, 185, 232, 0.12);
}

.mcp-link {
    font-weight: 500;
    text-decoration: none;
}

.mcp-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- the terminal ---------------------------------------------------------------- */

.mcp-term {
    background: #1a2233;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 12px;
    box-shadow: 4px 4px 0px rgba(65, 133, 196, 0.25);
    overflow: hidden;
}

.mcp-term-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    background: #222c42;
    border-bottom: 1px solid rgba(126, 185, 232, 0.18);
}

.mcp-term-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a4660;
}

.mcp-term-bar span {
    margin-inline-start: 0.6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--col-darkfore3);
}

.mcp-term-body {
    padding: 1.1rem 1.25rem 1.3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.55;
}

/* Lines arrive one at a time, once. --i is set per line in the markup. */
.mcp-t {
    color: var(--col-darkfore2);
    padding-inline-start: 1.1rem;
    margin: 0 0 0.3rem;
    opacity: 0;
    animation: mcp-line-in 0.35s ease-out forwards;
    animation-delay: calc(0.4s + var(--i) * 0.5s);
}

.mcp-t em {
    font-style: normal;
    color: var(--col-lightaccent2);
}

.mcp-t-you {
    padding-inline-start: 0;
    color: var(--col-darkfore1);
    margin-bottom: 0.7rem;
}

.mcp-t-you b {
    color: var(--col-lightaccent2);
    margin-inline-end: 0.3rem;
}

.mcp-t-ok {
    color: #8fd4a8;
    margin-bottom: 0.65rem;
}

.mcp-t-note {
    color: var(--col-darkfore3);
    font-style: italic;
    margin-bottom: 0.65rem;
}

.mcp-caret {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-inline-start: 0.3rem;
    vertical-align: text-bottom;
    background: var(--col-darkfore2);
    animation: mcp-blink 1s steps(1) infinite;
}

@keyframes mcp-line-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@keyframes mcp-blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mcp-t {
        opacity: 1;
        animation: none;
    }

    .mcp-caret {
        animation: none;
    }
}

/* --- sections ---------------------------------------------------------------------- */

.mcp-section {
    padding: 4.5rem 0;
}

.mcp-section h2 {
    color: var(--col-darkfore1);
    margin-bottom: 2.5rem;
}

/* A section with a subtitle: the heading hugs it and the subtitle takes the gap */
.mcp-section h2:has(+ .mcp-subtitle) {
    margin-bottom: 0.5rem;
}

.mcp-subtitle {
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--col-darkfore2);
}

/* Setup's heading sits directly above step 1, which brings its own top margin */
#setup h2 {
    margin-bottom: 0.5rem;
}

/* the homepage's .highlights-grid card, without the video */
.mcp-card {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 12px;
    box-shadow: 4px 4px 0px rgba(65, 133, 196, 0.25);
    padding: 1.6rem 1.7rem;
    color: var(--col-darkfore3);
}

.mcp-card h3 {
    font-family: var(--sofiasans);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--col-darkfore1);
    margin-bottom: 1rem;
}

.mcp-card p {
    line-height: 1.7;
}

.mcp-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.mcp-card dl {
    margin: 0;
}

.mcp-card dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--col-lightaccent2);
    margin-bottom: 0.25rem;
}

.mcp-card dd {
    margin: 0 0 1.1rem;
    line-height: 1.65;
}

.mcp-card dd:last-child {
    margin-bottom: 0;
}

.mcp-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Each card spans three rows of the parent grid (prompt, heading, body) and
   adopts them with subgrid, so every prompt box in the row is as tall as the
   tallest one and the headings line up whatever the prompt length. */
.mcp-cases .mcp-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
}

/* The prompt box keeps its own height; the row around it is what stretches */
.mcp-cases .mcp-prompt {
    align-self: start;
}

.mcp-cases h3 {
    margin-bottom: 0.6rem;
}

.mcp-prompt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--col-darkfore1);
    background: #1a2233;
    border: 1px solid rgba(126, 185, 232, 0.12);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.2rem;
}

/* --- setup ---------------------------------------------------------------------- */

.mcp-step {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--col-darkfore1);
    margin: 2rem 0 0.8rem;
}

.mcp-step span {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--col-lightaccent1);
    color: white;
    font-family: var(--sofiasans);
    font-size: 0.95rem;
}

/* prompt-block on navy, as the landing hero does it */
.mcp-page .gg-prompt {
    margin: 0;
    max-width: none;
    position: relative;
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    box-shadow: none;
}

/* No label on any block here, so the head would be a whole row holding only the
   Copy button.  Float the button into the corner instead. */
.mcp-page .gg-prompt-head-bare {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    padding: 0;
    border: 0;
}

.mcp-page .gg-prompt-head-bare + .gg-prompt-body {
    padding-inline-end: 5.5rem;
}

.mcp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

/* no script, no tabs: every panel just shows */
.mcp-tabs:not(.mcp-tabs-live) {
    display: none;
}

.mcp-tabs button {
    scroll-margin-top: 110px;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.45rem 0.95rem;
    border-radius: 8px;
    border: 1px solid rgba(126, 185, 232, 0.25);
    background: transparent;
    color: var(--col-darkfore2);
    cursor: pointer;
}

/* Agent marks, the same ones /docs/build-world uses (copied from its stylesheet),
   drawn as a mask so they take the button's text colour in every state. */
.mcp-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

.mcp-tabs button::before {
    content: "";
    width: 1em;
    height: 1em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--agent-mark) center / contain no-repeat;
    mask: var(--agent-mark) center / contain no-repeat;
}

#mcp-tab-claude { --agent-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 10.5h3v3h-3v3h-1.5v3H18v-3h-1.5v3H15v-3H9v3H7.5v-3H6v3H4.5v-3H3v-3H0v-3h3v-6h18Zm-15 0h1.5v-3H6Zm10.5 0H18v-3h-1.5z'/%3E%3C/svg%3E"); }
#mcp-tab-codex { --agent-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z'/%3E%3C/svg%3E"); }
#mcp-tab-cursor { --agent-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23'/%3E%3C/svg%3E"); }
#mcp-tab-gemini { --agent-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81'/%3E%3C/svg%3E"); }

.mcp-tabs button:hover {
    border-color: var(--col-lightaccent2);
}

.mcp-tabs button[aria-selected="true"] {
    background: var(--col-lightaccent1);
    border-color: var(--col-lightaccent1);
    color: white;
}

/* Spacing for the no-script fallback only, where every panel shows stacked.  With
   the tabs live it must not apply: it gave every panel but the first a 16px top
   margin, which out-collapsed the tab row's 0.9rem and dropped those command boxes
   ~1.6px lower than Claude Code's. */
.mcp-tabs:not(.mcp-tabs-live) ~ .mcp-panel + .mcp-panel {
    margin-top: 1rem;
}

.mcp-note {
    margin: 1rem 0 0.7rem;
    line-height: 1.6;
    color: var(--col-darkfore3);
}

.mcp-panel { scroll-margin-top: 200px; }

.mcp-panel > .mcp-note:first-child {
    margin-top: 0;
}

.mcp-details {
    margin-top: 0.9rem;
    color: var(--col-darkfore3);
}

.mcp-details summary {
    cursor: pointer;
    color: var(--col-lightaccent2);
    font-weight: 500;
}

.mcp-details[open] summary {
    margin-bottom: 0.2rem;
}

.mcp-after.mcp-after-web {
    margin-top: 1rem;
}

.mcp-note-label {
    margin: 1rem 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--col-darkfore2);
}

.mcp-after {
    margin-top: 2.5rem;
    line-height: 1.7;
    color: var(--col-darkfore2);
}

/* --- responsive ------------------------------------------------------------------ */

/* Physical AI shares the engine landing-page layout and card system. */
.physical-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.physical-actions .mcp-link { margin-top: 0; }
.physical-ai-page video { height: auto; }
.physical-ai-page section { scroll-margin-top: 90px; }
.physical-band { background: rgba(34, 44, 66, 0.4); }
.physical-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.physical-label { color: var(--col-lightaccent2); font-size: 0.88rem; font-weight: 600; margin-bottom: 0.6rem; }
.physical-scene-demo { max-width: 960px; margin: 0 auto; }
.physical-features { margin-top: 2.5rem; }
.physical-steps { padding: 0; }
.physical-step-number { display: block; color: var(--col-lightaccent2); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
.physical-validation { margin-top: 2.5rem; text-align: center; color: var(--col-darkfore2); }
.physical-validation h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.physical-validation ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; list-style: none; padding: 0; }
.physical-validation li { border: 1px solid #3c4a60; border-radius: 999px; padding: 0.45rem 1rem; }
.physical-contact { max-width: 660px; margin: 0 auto; text-align: center; color: var(--col-darkfore2); }
.physical-contact p { line-height: 1.7; margin-bottom: 1.5rem; }
.physical-ai-page .gg-btn-primary { color: white; }

/* /physical-ai/contact: the enquiry form, in the page's navy card style */
.pc-main { margin-top: 80px; padding: 4rem 5% 5rem; }
.pc-wrap { max-width: 760px; margin: 0 auto; }
.pc-title { font-family: var(--sofiasans); font-size: 2.4rem; line-height: 1.15; color: var(--col-darkfore1); margin-bottom: 0.75rem; text-wrap: balance; }
.pc-lede { color: var(--col-darkfore2); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; max-width: 40rem; }
.pc-card {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 12px;
    box-shadow: 4px 4px 0px rgba(65, 133, 196, 0.25);
    padding: 2.25rem 2.25rem 2rem;
}
.pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.pc-field { display: block; margin: 0; }
.pc-card input[type="text"],
.pc-card input[type="email"],
.pc-card input[type="tel"],
.pc-card textarea {
    width: 100%;
    background: rgba(17, 24, 39, 0.65);
    color: var(--col-darkfore1);
    border: 1px solid #3c4a60;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-family: var(--sans);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pc-card input::placeholder,
.pc-card textarea::placeholder { color: #8a94a6; }
.pc-card input:focus,
.pc-card textarea:focus {
    outline: none;
    border-color: var(--col-lightaccent2);
    box-shadow: 0 0 0 3px rgba(126, 185, 232, 0.18);
}
.pc-card textarea { min-height: 130px; resize: vertical; margin-top: 0.4rem; }
.pc-group { border: 0; padding: 0; margin: 2rem 0 1.5rem; display: grid; gap: 0.7rem; }
.pc-group legend { color: var(--col-darkfore1); font-weight: 600; font-size: 0.98rem; margin-bottom: 0.9rem; padding: 0; }
.pc-choice { display: flex; align-items: center; gap: 0.7rem; color: var(--col-darkfore2); font-weight: 400; margin: 0; cursor: pointer; width: fit-content; }
.pc-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--col-lightaccent1); cursor: pointer; flex: none; }
.pc-choice input:focus-visible { outline: 2px solid var(--col-lightaccent2); outline-offset: 2px; }
.pc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pc-error { margin: 1.25rem 0 0; padding: 0.75rem 1rem; border-radius: 8px; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.4); color: #fecaca; }
.pc-submit { margin-top: 1.5rem; border: 0; cursor: pointer; font-size: 1rem; }
.pc-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
.pc-done { text-align: center; padding: 2rem 0 1rem; }
.pc-done h2 { color: var(--col-darkfore1); margin-bottom: 0.75rem; }
.pc-done p { color: var(--col-darkfore2); margin-bottom: 1.5rem; }
.pc-done strong { color: var(--col-darkfore1); }

@media (max-width: 640px) {
    .pc-main { padding: 2.5rem 5% 3.5rem; }
    .pc-title { font-size: 1.9rem; }
    .pc-card { padding: 1.5rem 1.25rem; }
    .pc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .physical-pair { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
    .mcp-cases {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 0 auto;
    }
}

@media (max-width: 901px) {
    .mcp-hero {
        padding: 3rem 5% 3.5rem;
    }

    .mcp-hero-inner,
    .mcp-tool-grid {
        grid-template-columns: 1fr;
    }

    .mcp-hero h1 {
        font-size: 2.6rem;
    }

    .mcp-section {
        padding: 3.5rem 0;
    }
}

@media (max-width: 560px) {
    .mcp-term-body {
        font-size: 0.74rem;
        padding: 1rem;
    }

    .mcp-card {
        padding: 1.3rem 1.2rem;
    }
}


/* =============================================================================
   /roblox and /unity -- Build World engine pages share the rbx-* layout.
   Borrows /mcp's chassis rather than restyling it: .mcp-section, .mcp-wrap,
   .mcp-card, .mcp-step and .mcp-link are class-scoped and used as-is.  The
   body-scoped /mcp rules (navy page, link and code colour, prompt blocks on navy)
   are restated for body.rbx-page, so the two pages can drift apart without taking
   each other with them.
   What is its own: the split hero, the demo video under it, the before/after
   pair, the six-card grid and the You / agent / Thrixel lanes.
   ============================================================================= */

body.rbx-page {
    background: var(--col-darkback1);
}

.rbx-page main a {
    color: var(--col-lightaccent2);
}

.rbx-page code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--col-lightaccent2);
}

/* prompt-block on navy: the slate + hairline surface, as on /mcp */
.rbx-page .gg-prompt {
    margin: 0;
    max-width: none;
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    box-shadow: none;
}

/* The setup blocks carry no label (the numbered step above says what each is),
   so float the Copy button into the corner instead of spending a row on it. */
.rbx-page .gg-prompt:has(.gg-prompt-head-bare) {
    position: relative;
}

.rbx-page .gg-prompt-head-bare {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    padding: 0;
    border: 0;
}

.rbx-page .gg-prompt-head-bare + .gg-prompt-body {
    padding-inline-end: 5.5rem;
}

/* --- hero -------------------------------------------------------------------- */

.rbx-hero {
    margin-top: 80px;
    padding: 5rem 5% 4.5rem;
    position: relative;
    overflow: hidden;
}

/* Copy left, video right, centred on each other.  The video column is the wider
   one: it is the page's proof. */
.rbx-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 3.5rem;
    align-items: center;
}

.rbx-eyebrow {
    font-family: var(--sofiasans);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--col-lightaccent2);
    margin-bottom: 0.9rem;
}

.rbx-hero h1 {
    font-family: var(--sofiasans);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--col-darkfore1);
}

.rbx-hero-pitch {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--col-darkfore2);
    margin: 1.25rem 0 1.75rem;
}

.rbx-hero-copy .mcp-link {
    display: inline-block;
    margin-top: 1.25rem;
}

/* --- the demo video --------------------------------------------------------------- */

.rbx-demo {
    margin: 0;
}

.rbx-demo-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: #0b1220;
}

.engine-demo-media {
    object-fit: contain;
}

.engine-demo-caption {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--col-darkfore3);
}

/* --- agent pages (/claude, /codex) ----------------------------------------------- */

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

.agent-engines .mcp-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.agent-engines blockquote {
    margin: 1.25rem 0 1.5rem;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--col-lightaccent1);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--col-darkfore2);
}

.agent-engines .mcp-link {
    margin-top: auto;
}

.agent-setup-intro {
    margin: 1.5rem 0 2rem;
    line-height: 1.7;
    color: var(--col-darkfore2);
}

/* Clears the fixed nav when an in-page link (#setup etc.) jumps to a section. */
.rbx-page .mcp-section {
    scroll-margin-top: 80px;
}

.agent-faq .mcp-details {
    margin: 0;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(126, 185, 232, 0.18);
}

.agent-faq .mcp-details:first-child {
    border-top: 1px solid rgba(126, 185, 232, 0.18);
}

/* --- /press ------------------------------------------------------------------------ */

/* The /roblox hero band (grid texture and all) with the page title on the left and
   the media contact on the right, so a journalist finds it without scrolling. */
/* Horizontal padding moves onto the inner box so its edges match .mcp-wrap below. */
.rbx-hero.press-hero {
    padding: 4.5rem 0 3.5rem;
}

.press-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem 3rem;
}

.press-hero h1 {
    font-size: 4.5rem;
}

.press-resources {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 12px;
}

.press-resources h2 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: start;
    color: var(--col-darkfore3);
}

.rbx-page .press-email {
    font-family: var(--sofiasans);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--col-darkfore1);
    text-decoration: none;
}

.rbx-page .press-email:hover {
    color: var(--col-lightaccent2);
}

.press-coverage {
    padding-top: 1rem;
}

.press-coverage h2 {
    text-align: start;
    font-size: 2rem;
    margin-bottom: 1.75rem;
}

.press-list {
    list-style: none;
    border-top: 1px solid rgba(126, 185, 232, 0.25);
}

/* Each story has its own row. Headlines and excerpts flow without reserved
   slots, while metadata and thumbnails form consistent scanning columns. */
.press-item {
    display: grid;
    grid-template-columns: 10.5rem 11rem minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(126, 185, 232, 0.25);
}

.press-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--col-darkfore3);
}

.press-outlet {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--col-lightaccent2);
}

.press-body {
    min-width: 0;
}

.press-item h3 {
    margin: 0 0 0.6rem;
    font-size: 1.3rem;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: normal;
}

.rbx-page .press-item h3 a {
    color: var(--col-darkfore1);
    text-decoration: none;
}

.rbx-page .press-item h3 a:hover,
.rbx-page .press-item h3 a:focus-visible {
    color: var(--col-lightaccent2);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.press-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 0.75rem;
    line-height: 1.55;
    color: var(--col-darkfore2);
}

.press-read {
    display: inline-block;
}

.rbx-page .press-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(126, 185, 232, 0.18);
    border-radius: 8px;
    background: #0b1220;
    text-decoration: none;
}

.press-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.press-media--logo img {
    object-fit: contain;
    background: #fff;
}

.press-media:has(.press-media-name) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(126, 185, 232, 0.35), transparent 60%),
        linear-gradient(rgba(126, 185, 232, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, rgba(126, 185, 232, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
        #111a2e;
}

.press-media-name {
    font-family: var(--sofiasans);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    color: var(--col-darkfore1);
}

@media (max-width: 1000px) {
    .press-item {
        grid-template-columns: 9rem 8rem minmax(0, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 700px) {
    .press-item {
        grid-template-columns: minmax(0, 1fr) 6rem;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .press-meta {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .press-media {
        grid-column: 2;
        grid-row: 1;
    }

    .press-body {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .press-media-name {
        font-size: 1rem;
    }

    .press-hero-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .rbx-hero.press-hero {
        padding: 3rem 0 2.5rem;
    }

    .press-hero h1 {
        font-size: 3.2rem;
    }
}

/* --- before / after ---------------------------------------------------------------- */

.rbx-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.rbx-side {
    border-radius: 12px;
    padding: 1.6rem 1.7rem;
}

.rbx-side h3,
.rbx-lane h3 {
    font-family: var(--sofiasans);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.rbx-side ul,
.rbx-lane ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.rbx-side li,
.rbx-lane li {
    position: relative;
    padding-inline-start: 1.4rem;
    line-height: 1.65;
}

.rbx-side li::before,
.rbx-lane li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

/* The "without" side is deliberately the flatter of the two: no fill, no shadow */
.rbx-side-without {
    border: 1px dashed #3c4a60;
    color: var(--col-darkfore3);
}

.rbx-side-without h3 {
    color: var(--col-darkfore2);
}

.rbx-side-without li::before {
    content: "\2013";
    color: #6b7a8f;
}

.rbx-side-with {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    box-shadow: 4px 4px 0px rgba(65, 133, 196, 0.25);
    color: var(--col-darkfore2);
}

.rbx-side-with h3 {
    color: var(--col-darkfore1);
}

.rbx-side-with li::before {
    content: "\2713";
    color: #8fd4a8;
}

/* --- made for Studio ------------------------------------------------------------- */

.rbx-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.rbx-grid .mcp-card h3 {
    margin-bottom: 0.6rem;
}

/* --- who does what ---------------------------------------------------------------- */

/* Three lanes with arrows between them: You -> agent <-> Thrixel.  The "You" lane
   is the narrow, unfilled one on purpose; the page's point is that it is the
   small job.  The arrows are grid items of their own so they centre in the gap. */
.rbx-lanes {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.rbx-lane {
    border-radius: 12px;
    padding: 1.6rem 1.5rem;
    color: var(--col-darkfore2);
}

.rbx-lane h3 {
    color: var(--col-darkfore1);
}

.rbx-lane li::before {
    content: "\2022";
    color: var(--col-lightaccent2);
}

.rbx-lane-you {
    border: 1px dashed #3c4a60;
}

.rbx-lane-work {
    background: #222c42;
    border: 1px solid rgba(126, 185, 232, 0.18);
    box-shadow: 4px 4px 0px rgba(65, 133, 196, 0.25);
}

.rbx-arrow {
    align-self: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--col-lightaccent2);
}

.rbx-result {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--col-darkfore2);
}

/* --- setup ---------------------------------------------------------------------- */

#setup .mcp-step:first-of-type {
    margin-top: 0;
}

/* --- responsive ------------------------------------------------------------------ */

@media (max-width: 1100px) {
    .rbx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Below this the copy column gets too narrow for the h1 beside the video */
@media (max-width: 1000px) {
    .rbx-hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 901px) {
    .rbx-hero {
        padding: 3rem 5% 3.5rem;
    }

    .rbx-hero h1 {
        font-size: 2.6rem;
    }

    .rbx-compare {
        grid-template-columns: 1fr;
    }

    /* Lanes stack; the arrows turn to point down the column */
    .rbx-lanes {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .rbx-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 640px) {
    .rbx-grid, .rbx-grid.agent-engines {
        grid-template-columns: 1fr;
    }

    .rbx-side,
    .rbx-lane {
        padding: 1.3rem 1.2rem;
    }
}

/* Compact language links use a native disclosure, including without JS. */
.language-switcher { position: relative; }
.language-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 6px;
    color: var(--col-darkfore2);
    cursor: pointer;
    list-style: none;
}
.language-menu summary:hover, .language-menu[open] summary { background: #26354a; color: white; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary:focus-visible, .language-options a:focus-visible {
    outline: 2px solid var(--col-lightaccent2);
    outline-offset: 3px;
}
.language-options {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 130px;
    width: max-content;
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    padding: 0.4rem;
    list-style: none;
    border: 1px solid #536174;
    border-radius: 8px;
    background: #0b1220;
    box-shadow: 0 8px 24px #0006;
    z-index: 2;
}
.language-options a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; border-radius: 4px; }
.language-option-code { flex: 0 0 2.5ch; font-size: 0.75rem; font-weight: 600; color: #a8b5c7; }
/* A suggestion, never a redirect or a modal. The navigation stays above it. */
.language-suggestion {
    position: fixed;
    top: 88px;
    right: 1rem;
    z-index: 990;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100vw - 2rem);
    padding: 0.45rem 0.55rem 0.45rem 0.9rem;
    border: 1px solid #536174;
    border-radius: 8px;
    background: #0b1220;
    color: var(--col-darkfore1);
    box-shadow: 0 4px 16px #0004;
    font-size: 0.9rem;
}
.language-suggestion[hidden] { display: none; }
.language-suggestion a { color: inherit; text-underline-offset: 3px; overflow-wrap: anywhere; }
.language-suggestion button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--col-darkfore2);
    cursor: pointer;
}
.language-suggestion button:hover { background: #26354a; color: white; }
.language-suggestion a:focus-visible, .language-suggestion button:focus-visible {
    outline: 2px solid var(--col-lightaccent2);
    outline-offset: 3px;
}
/* FamFamFam pixel artwork at its native size; preserve pixels on HiDPI screens. */
.language-flag {
    display: block;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}
.language-options a:hover, .language-options a[aria-current] { background: #26354a; color: white; }
/* Keep the leading Features dropdown inside the viewport when the header wraps. */
@media (min-width: 902px) {
    #nav-links > .nav-group:first-child > .nav-dropdown { left: 0; transform: none; }
}
@media (min-width: 902px) and (max-width: 1200px) {
    #nav-links { column-gap: 1rem; }
    nav .container { column-gap: 1rem; }
}
@media (max-width: 901px) {
    .language-menu summary { margin: 0 auto; }
    .language-options { position: static; margin: 0.5rem auto 0; }
}

/* Shared Ask AI footer links. */
.footer-ai { max-width: 760px; margin-inline: auto; padding: 0; text-align: center; }
.footer-ai h2 { font-family: var(--sofiasans); font-size: 1.4rem; color: var(--col-darkfore1); margin: 0 0 1.25rem; }
.footer-ai-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.footer-ai .footer-ai-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; text-decoration: none; opacity: .8; transition: background .15s, opacity .15s; }
.footer-ai .footer-ai-button:hover { background: #24344e; opacity: 1; }
.footer-ai-button img { display: block; width: 28px; height: 28px; filter: brightness(0) invert(1); }
.footer-ai a:focus-visible { outline: 2px solid var(--col-lightaccent2); outline-offset: 4px; }