@layer base, components, community, utilities;

@import "./preflight.css" layer(base);

:root {
    --font-onest: 'Onest', sans-serif;
    --font-hanken: 'Hanken Grotesk', sans-serif;
    --font-ibm: 'IBM Plex Serif', serif;

    --font-display: var(--font-onest);
    --font-body: var(--font-hanken);
    --font-decorative: var(--font-ibm);

    --color-community-navy: #16142E;
    --color-hub-violet: #5A40D9;
    --color-relief-purple: #9A90D9;
    --color-warm-terracotta: #FF7A5C;
    --color-growth-green: #2BB889;
    --color-warm-canvas: #FAF7F2;
    --color-app-grey: #F4F5F7;
    --color-app-border: #E2E8F0;
    --color-beige: #F1EBE0;

    --color-neutral-100: #000000;
    --color-neutral-90: #1A1A1A;
    --color-neutral-80: #2E2E2E;
    --color-neutral-70: #444444;
    --color-neutral-60: #5C5C5C;
    --color-neutral-50: #757575;
    --color-neutral-40: #8D8D8D;
    --color-neutral-30: #C4C4C4;
    --color-neutral-20: #E0E0E0;
    --color-neutral-10: #FFFFFF;

    --color-background: var(--color-app-grey);
    --color-foreground: var(--color-neutral-80);
    --color-primary: var(--color-hub-violet);
    --color-primary-foreground: var(--color-neutral-10);
    --color-secondary: var(--color-neutral-10);
    --color-secondary-foreground: var(--color-community-navy);
    --color-border: color-mix(in srgb, var(--color-community-navy) 12%, transparent);

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-relaxed: 1.7;

    --text-h1: clamp(2.25rem, 5vw + 1rem, 4.375rem);
    --text-h2: clamp(2rem, 4vw + 0.5rem, 3.25rem);
    --text-h3: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    --text-h4: clamp(1.25rem, 2vw + 0.4rem, 1.5rem);
    --text-h5: clamp(1rem, 1.5vw + 0.4rem, 1.25rem);
    --text-h6: clamp(1rem, 1vw + 0.5rem, 1.125rem);

    --text-body-xl: clamp(1rem, 1.5vw + 0.4rem, 1.25rem);
    --text-body-lg: clamp(0.875rem, 1.2vw + 0.4rem, 1.125rem);
    --text-body-md: 1rem;
    --text-body-sm: 0.875rem;
    --text-body-xs: 0.75rem;

    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 3.75rem;

    --shadow-sm: 2px 2px 0px;
    --shadow-md: 4px 4px 0px;

    --size-border: 1.24px;
}

@layer base {
    html,
    body {
        overflow-x: clip;
    }

    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;

        scroll-behavior: smooth;

        color: var(--color-foreground);
        background-color: var(--color-background);
    }

    body {
        min-height: 100%;
        font-family: var(--font-body);
        font-size: var(--text-body-sm);
        font-weight: var(--font-regular);
        line-height: 1.7;
        overflow-x: clip;
    }

    img {
        width: 100%;
        height: auto;
        object-fit: cover;
        flex-shrink: 0;
    }

    @media (width > 40rem) {
        body {
            font-size: var(--text-body-md);
        }
    }

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

        *,
        *::before,
        *::after {
            animation: none !important;
            transition: none !important;
        }
    }
}

@layer components {

    /* LOGO */
    .logo {
        height: 34px;
    }

    @media (width > 48rem) {
        .logo {
            height: 42px;
        }
    }

    /* TYPOGRAPHY */
    .heading-1 {
        font-family: var(--font-onest);
        font-size: var(--text-h1);
        font-weight: var(--font-semibold);
        line-height: var(--line-height-tight);
        text-wrap: balance;
        color: var(--color-community-navy);
    }

    .heading-2 {
        font-family: var(--font-onest);
        font-size: var(--text-h2);
        font-weight: var(--font-semibold);
        line-height: var(--line-height-snug);
        text-wrap: balance;
        color: var(--color-community-navy);
    }

    .heading-3 {
        font-family: var(--font-onest);
        font-size: var(--text-h3);
        font-weight: var(--font-semibold);
        line-height: var(--line-height-snug);
        text-wrap: balance;
        color: var(--color-community-navy);
    }

    .heading-4 {
        font-family: var(--font-onest);
        font-size: var(--text-h4);
        font-weight: var(--font-semibold);
        line-height: var(--line-height-relaxed);
        text-wrap: balance;
        color: var(--color-community-navy);
    }

    .heading-5 {
        font-family: var(--font-onest);
        font-size: var(--text-h5);
        font-weight: var(--font-semibold);
        line-height: var(--line-height-relaxed);
        text-wrap: balance;
        color: var(--color-community-navy);
    }

    .heading-6 {
        font-family: var(--font-onest);
        font-size: var(--text-h6);
        font-weight: var(--font-semibold);
        line-height: var(--line-height-relaxed);
    }

    .body-xl {
        font-family: var(--font-hanken);
        font-size: var(--text-body-xl);
        font-weight: var(--font-regular);
        line-height: var(--line-height-relaxed);
    }

    .body-lg {
        font-family: var(--font-hanken);
        font-size: var(--text-body-lg);
        font-weight: var(--font-regular);
        line-height: var(--line-height-relaxed);
    }

    .body-md-onest {
        font-family: var(--font-onest);
        font-size: var(--text-body-md);
        font-weight: var(--font-regular);
        line-height: var(--line-height-relaxed);
        text-wrap: balance;
    }

    .body-md {
        font-family: var(--font-hanken);
        font-size: var(--text-body-md);
        font-weight: var(--font-regular);
        line-height: var(--line-height-relaxed);
        text-wrap: balance;
    }

    .body-sm {
        font-family: var(--font-hanken);
        font-size: var(--text-body-sm);
        font-weight: var(--font-regular);
        line-height: var(--line-height-snug);
        text-wrap: balance;
    }

    .decorative {
        font-family: var(--font-ibm);
    }

    @media (width > 48rem) {
        .heading-1 {
            font-weight: var(--font-bold);
        }
    }

    /* BUTTONS */
    .button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-family: var(--font-display);
        font-weight: var(--font-semibold);
        font-size: var(--text-body-sm);
        line-height: var(--line-height-relaxed);
        text-align: center;
        text-decoration: none;
        border-radius: var(--radius-full);
        transition: all 0.3s ease;
        cursor: pointer;
        padding: 0.75rem 1.5rem;

        background-color: var(--color-primary);
        color: var(--color-primary-foreground);
        border: 1px solid var(--color-primary);
    }

    .button:hover {
        background-color: var(--color-secondary-foreground);
        border-color: var(--color-secondary-foreground);
        color: var(--color-primary-foreground);
    }

    .button.is-small {
        padding: 0.375rem 1rem;
    }

    .button.is-large {
        padding: 1rem 2rem;
    }

    .button.is-outline {
        background-color: var(--color-neutral-10);
        color: var(--color-secondary-foreground);
        border: 1px solid var(--color-secondary-foreground);
    }

    .button.is-outline:hover {
        background-color: var(--color-secondary-foreground);
        color: var(--color-secondary);
    }

    .button.is-outline.is-invert {
        background-color: transparent;
        color: contrast-color(var(--color-secondary-foreground));
        border: 1px solid contrast-color(var(--color-secondary-foreground));
    }

    .button.is-outline.is-invert:hover {
        background-color: transparent;
        color: contrast-color(var(--color-secondary-foreground));
        border: 1px solid contrast-color(var(--color-secondary-foreground));
    }

    .button.is-secondary {
        background-color: var(--color-background);
        color: var(--color-secondary-foreground);
        border: 2px solid var(--color-secondary-foreground);
        box-shadow: var(--shadow-md) var(--color-secondary-foreground);
    }

    .button.is-secondary:hover {
        transform: translate(2px, 2px);
        box-shadow: var(--shadow-sm) var(--color-secondary-foreground);
    }

    .button.is-primary-shadow {
        background-color: var(--color-primary);
        color: var(--color-primary-foreground);
        border: 2px solid var(--color-secondary-foreground);
        box-shadow: var(--shadow-md) var(--color-secondary-foreground);
    }

    .button.is-primary-shadow:hover {
        transform: translate(2px, 2px);
        box-shadow: var(--shadow-sm) var(--color-secondary-foreground);
    }

    @media (width > 48rem) {
        .button {
            font-size: var(--text-body-md);
        }

        .button.is-small {
            padding: 0.75rem 1.25rem;
        }

        .button.is-large {
            padding: 1rem 2rem;
        }
    }

    /* LINKS */
    .link {
        font-size: var(--text-body-md);
        font-style: normal;
        line-height: 1.7;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: var(--color-foreground);
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease, text-decoration-color 0.2s ease;
    }

    .link-sm {
        font-size: var(--text-body-sm);
    }

    .link:hover {
        color: var(--color-community-navy);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .link:focus-visible {
        outline: 2px solid var(--color-relief-purple);
        outline-offset: 2px;
        border-radius: 2px;
    }

    .link:active {
        color: var(--color-community-navy);
    }

    /* BUTTON GROUPS */
    .button-group {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .button-group.is-sm {
        gap: var(--spacing-xs);
    }

    .button-group.is-lg {
        gap: 1rem;
    }

    .button-group.is-wrap {
        flex-wrap: wrap;
    }

    /* BADGES */
    .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
        background-color: var(--color-primary);
        color: var(--color-primary-foreground);
        border-radius: var(--radius-sm);
        font-size: var(--text-body-xs);
        font-weight: var(--font-bold);
        letter-spacing: 0.05em;
        line-height: 1.7;
        text-align: center;
        text-transform: uppercase;
    }

    .badge_icon {
        width: 1.125rem;
        height: 1.125rem;
        object-fit: contain;
    }

    .badge.is-accent {
        color: var(--color-primary);
        background-color: color-mix(in srgb, var(--color-warm-terracotta) 15%, transparent);
    }

    .badge.is-secondary {
        background-color: color-mix(in srgb, currentColor 20%, transparent);
        color: var(--color-primary);
    }

    .badge.is-transparent {
        background-color: color-mix(in srgb, currentColor 20%, transparent);
        color: var(--color-neutral-10);
    }

    @media (width > 48rem) {
        .badge {
            font-size: var(--text-body-md);
        }
    }

    /* PILLS */
    .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius-full);
        background-color: var(--color-primary);
    }

    .pill.is-secondary {
        color: var(--color-secondary-foreground);
        background-color: var(--color-background);
    }

    .pill.is-transparent {
        color: var(--color-neutral-70);
        background-color: color-mix(in srgb, currentColor 20%, transparent);
    }

    .pill.is-accent {
        color: var(--color-primary-foreground);
        background-color: var(--color-warm-terracotta);
    }

    .pill.is-sm {
        padding: 0.375rem 0.75rem;
        font-size: var(--text-body-sm);
    }

    @media (width > 48rem) {
        .pill {
            padding: 0.75rem 1.25rem;
        }
    }

    /* CARDS */
    .card {
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 1.5rem;
        padding: 1.25rem;
        border: 1.25px solid transparent;
        border-radius: var(--radius-xl);
        color: var(--color-primary-foreground);
        background-color: var(--color-primary);
        overflow: hidden;
    }

    .card.is-beige {
        background-color: var(--color-neutral-10); /* white, matching the app cards (was beige) */
        color: var(--color-foreground);
        border: 1px solid var(--color-border);
    }

    .card.is-secondary {
        background-color: var(--color-secondary);
        color: var(--color-secondary-foreground);
    }

    .card_header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
    }

    .card_badge-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .card_content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .card_divider {
        width: 100%;
        height: 1px;
        background-color: var(--color-neutral-20);
    }

    .card_list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .card_list-item {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    @media (width > 64rem) {
        .card {
            padding: 1.5rem;
        }

        .card.is-padding-lg {
            padding: 2.5rem;
        }

        /* Corner glows as radial gradients, not filter: blur() — see the GLOW note below.
           Same haze as blur(120px) on the old 266×252 #FF7A5C99 boxes (sigma ≈ 142×140px, peak 32%). */
        .card.is-gradient::before,
        .card.is-gradient::after {
            content: '';
            position: absolute;
            width: 852px;
            height: 840px;
            background: radial-gradient(closest-side,
                    color-mix(in srgb, var(--color-warm-terracotta) 32%, transparent) 0%,
                    color-mix(in srgb, var(--color-warm-terracotta) 19.5%, transparent) 33%,
                    color-mix(in srgb, var(--color-warm-terracotta) 4.3%, transparent) 67%,
                    transparent 100%);
            pointer-events: none;
            z-index: 1;
        }

        .card.is-gradient::before {
            left: calc(-10% + 133px);
            bottom: calc(-50% + 126px);
            transform: translate(-50%, 50%);
        }

        .card.is-gradient::after {
            right: calc(-15% + 133px);
            top: calc(20% + 126px);
            transform: translate(50%, -50%);
        }

        .card.is-gradient>* {
            position: relative;
            z-index: 2;
        }
    }

    /* SECTIONS */
    .section {
        display: grid;
        gap: var(--spacing-lg);
    }

    .section_header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .section_header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .section.is-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section_header.is-start,
    .section_header-content.is-start {
        align-items: flex-start;
    }

    @media (width > 48rem) {
        .section {
            gap: var(--spacing-xl);
        }

        .section_header {
            gap: var(--spacing-lg);
        }
    }

    @media (width < 40rem) {
        .section.is-grid {
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }
    }

    /* DECORATORS */
    .decorator {
        position: absolute;
        z-index: 0;
    }

    .decorator.firework {
        top: -10%;
        left: -7%;
    }

    .decorator.tail-arrow {
        top: -20%;
        left: 15%;
        z-index: 1;
    }

    .decorator.lamp {
        top: 50%;
        right: -7%;
    }

    .decorator.cloud {
        top: -15%;
        right: -10%;
    }

    .decorator.icon {
        top: -8%;
        right: -8%;
        z-index: 10;
    }

    /* COLORS */
    .text-neutral-100 {
        color: var(--color-neutral-100);
    }

    .text-neutral-90 {
        color: var(--color-neutral-90);
    }

    .text-neutral-80 {
        color: var(--color-neutral-80);
    }

    .text-neutral-70 {
        color: var(--color-neutral-70);
    }

    .text-neutral-60 {
        color: var(--color-neutral-60);
    }

    .text-neutral-50 {
        color: var(--color-neutral-50);
    }

    .text-neutral-40 {
        color: var(--color-neutral-40);
    }

    .text-neutral-30 {
        color: var(--color-neutral-30);
    }

    .text-neutral-20 {
        color: var(--color-neutral-20);
    }

    .text-neutral-10 {
        color: var(--color-neutral-10);
    }

    .text-navy {
        color: var(--color-community-navy);
    }

    .text-white {
        color: var(--color-neutral-10);
    }

    .text-light {
        color: rgba(255, 255, 255, 0.7);
    }

    .text-terracotta {
        color: var(--color-warm-terracotta);
    }

    /* HIGHLIGHTS */
    .highlight {
        color: var(--color-primary);
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-sm);
        display: inline-block;
        background-color: color-mix(in srgb, currentColor 20%, transparent);
    }

    .highlight.is-transparent {
        color: var(--color-neutral-10);
    }

    .highlight.is-frame {
        color: var(--color-warm-terracotta);
        background-color: transparent;
    }

    /* MOCKUPS */
    .mockup {
        border-radius: var(--radius-xl);
        height: 100%;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }

    .mockup img {
        object-position: left top;
    }

    /* GLOW
       A Gaussian radial gradient, deliberately NOT filter: blur(). On a Force Touch trackpad
       Safari software-renders a snapshot of the link under the cursor on every press (for the
       Force-click link preview); with blur(320px) painting over the hero that snapshot took ~4 s,
       so the mousedown reached the page 4 s after the press. Keep large blurs out of the CSS.
       Values reproduce the old blur(320px) on a 252px-tall, 50–100%-wide 75% terracotta box:
       sigma ≈ 375×330px, peak alpha 13%, centred 126px above the container's bottom edge. */
    .glow {
        position: absolute;
        left: 50%;
        bottom: 126px;
        width: 2250px;
        height: 1980px;
        transform: translate(-50%, 50%);
        background: radial-gradient(closest-side,
                color-mix(in srgb, var(--color-warm-terracotta) 13%, transparent) 0%,
                color-mix(in srgb, var(--color-warm-terracotta) 7.9%, transparent) 33%,
                color-mix(in srgb, var(--color-warm-terracotta) 1.8%, transparent) 67%,
                transparent 100%);
        z-index: 0;
        pointer-events: none;
    }
}

@layer utilities {

    /* LAYOUT */
    .padding-global {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .padding-section-md,
    .padding-section-lg {
        padding-block: 2.5rem;
        padding-inline: 1.25rem;
    }

    .container-large {
        width: 100%;
        max-width: 90rem;
        margin-left: auto;
        margin-right: auto;
    }

    .grid {
        display: grid;
        gap: var(--spacing-md);
    }

    @media (width > 48rem) {
        .grid.col-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .grid.col-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* EFFECTS */
    .is-dot {
        background-image: radial-gradient(circle, color-mix(in srgb, currentColor 10%, transparent) 1.5px, transparent 1.25px);
        background-size: 18px 18px;
    }

    .is-square {
        background-image:
            linear-gradient(to right, color-mix(in srgb, currentColor 2%, transparent) 1px, transparent 1px),
            linear-gradient(to bottom, color-mix(in srgb, currentColor 2%, transparent) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    .reveal {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
        transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .reveal.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* HELPERS */
    .is-light {
        font-weight: var(--font-regular);
    }

    .is-semibold {
        font-weight: var(--font-semibold);
    }

    .is-col {
        flex-direction: column;
    }

    .is-shadow {
        border: 2px solid var(--color-secondary-foreground);
        box-shadow: var(--shadow-md) var(--color-secondary-foreground);
    }

    .is-shadow-primary {
        box-shadow: var(--shadow-md) var(--color-primary);
    }

    .is-tablet {
        display: none;
    }

    .is-desktop {
        display: none;
    }

    .text-center {
        text-align: center;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .max-sm {
        max-width: 40rem;
    }

    .max-md {
        max-width: 60rem;
    }

    @media (width > 48rem) {
        .is-tablet {
            display: flex;
        }
    }

    @media (width > 64rem) {
        .padding-global {
            padding-left: 2.5rem;
            padding-right: 2.5rem;
        }

        .padding-section-md {
            padding-block: 3.75rem;
            padding-inline: 6.25rem;
        }

        .padding-section-lg {
            padding-block: 5rem;
            padding-inline: 6.25rem;
        }

        .is-row {
            flex-direction: row;
        }

        .is-desktop {
            display: block;
        }
    }

    /* KEYFRAMES */
    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.4);
            opacity: 0.6;
        }
    }

    @keyframes wiggle {

        0%,
        100% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(6deg);
        }

        75% {
            transform: rotate(-6deg);
        }
    }
}

/* APPS */
.app-card {
    width: 100%;
    height: 100%;
    max-width: 560px;
    background-color: var(--color-neutral-10);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(255, 122, 92, 0.2);
}

.app-card__header {
    background-color: var(--color-warm-canvas);
    padding: 0 16px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(22, 20, 46, 0.1);
}

.app-card__dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.app-card__dot--red {
    background-color: #FF5150;
}

.app-card__dot--yellow {
    background-color: #FFBA00;
}

.app-card__dot--green {
    background-color: #00CC1A;
}

.app-card__domain {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-neutral-60);
    line-height: 1;
}

.app-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.app-card__stat-item {
    background-color: var(--color-warm-canvas);
    border: 1px solid rgba(22, 20, 46, 0.1);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-card__stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-community-navy);
    line-height: 1.2;
}

.app-card__stat-label {
    font-size: 13px;
    color: var(--color-neutral-60);
    margin-top: 4px;
    line-height: 1.2;
}

.app-card__club {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.app-card__club-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: rgba(255, 122, 92, 0.2);
    color: var(--color-warm-terracotta);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-card__club-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-community-navy);
    line-height: 1.3;
}

.app-card__club-subtitle {
    font-size: 13px;
    color: var(--color-neutral-70);
    line-height: 1.3;
    margin-top: 2px;
}

.app-card__badge {
    padding: 4px 12px;
    border-radius: 12.5px;
    background-color: rgba(40, 184, 137, 0.2);
    color: #28B889;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.app-scattered-area {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.app-scattered-tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 43px;
    padding: 0 18px;
    background-color: var(--color-neutral-10, #FFFFFF);
    border: 1px solid var(--color-neutral-20, #E0E0E0);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-60, #5C5C5C);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    filter: blur(2.5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.app-scattered-tag__emoji {
    font-size: 14px;
}

.app-scattered-tag--1 {
    left: 24px;
    top: 18px;
    transform: rotate(-6deg);
}

.app-scattered-tag--2 {
    right: 24px;
    top: 6px;
    transform: rotate(4deg);
}

.app-scattered-tag--3 {
    left: 36%;
    top: 42%;
    transform: translate(-50%, -50%) rotate(-9deg);
}

.app-scattered-tag--4 {
    left: 30px;
    bottom: 24px;
    transform: rotate(8deg);
}

.app-scattered-tag--5 {
    right: 28px;
    bottom: 24px;
    transform: rotate(-8deg);
}

.card-scattered:hover .app-scattered-area .app-scattered-tag {
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    filter: blur(0);
}

@layer community {

    /* NAVBAR */
    .navbar {
        position: sticky;
        inset-inline: 0;
        top: 0;
        z-index: 90;
        background-color: var(--color-background);
        border-bottom: 1px solid var(--color-neutral-20);
        padding-top: 1.125rem;
        padding-bottom: 1.125rem;
        font-family: var(--font-body);
    }

    .navbar_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .navbar_menu {
        display: none;
        align-items: center;
        gap: 2rem;
    }

    .navbar_button-wrapper {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    @media (width > 64rem) {
        .navbar_menu {
            display: flex;
        }
    }

    .hero {
        background-color: var(--color-background);
        color: var(--color-foreground);
        /* Same backdrop as the app login page: light grey + faint 20px dot grid */
        background-image: radial-gradient(color-mix(in srgb, var(--color-app-border) 50%, transparent) 1px, transparent 1px);
        background-size: 20px 20px;
        position: relative;
        overflow: hidden;
        text-align: center;
        isolation: isolate; /* lets the floating shapes sit below the content at z-index -1 */
    }

    .bracket-highlight {
        position: relative;
        display: inline-block;
    }

    /* Floating tinted shapes, copied from the app login page (Tailwind: blur-sm 8px, 20% / 10% tints) */
    .hero_shape {
        position: absolute;
        z-index: -1;
        pointer-events: none;
        filter: blur(8px);
    }

    .hero_shape.is-amber {
        top: 5rem;
        left: 5rem;
        width: 8rem;
        height: 8rem;
        border-radius: 9999px;
        background-color: rgba(251, 191, 36, 0.2);
    }

    .hero_shape.is-coral {
        top: 23rem;
        right: 5rem;
        width: 6rem;
        height: 6rem;
        border-radius: 1rem;
        transform: rotate(12deg);
        background-color: rgba(255, 122, 92, 0.2);
    }

    .hero_shape.is-mint {
        top: 15rem;
        right: 8rem;
        width: 4rem;
        height: 4rem;
        border-radius: 9999px;
        background-color: rgba(40, 184, 137, 0.2);
    }

    .hero_shape.is-iris {
        top: 24rem;
        left: 12%;
        width: 5rem;
        height: 5rem;
        border-radius: 0.75rem;
        transform: rotate(-6deg);
        background-color: rgba(90, 64, 217, 0.1);
    }

    /* Narrow screens: the text spans the full width, so hug the edges instead of floating behind copy */
    @media (width <= 64rem) {
        .hero_shape.is-amber {
            top: 2rem;
            left: -3rem;
            width: 6.5rem;
            height: 6.5rem;
        }

        .hero_shape.is-mint {
            top: 11rem;
            right: -1rem;
            width: 3.25rem;
            height: 3.25rem;
        }

        .hero_shape.is-coral {
            top: 21rem;
            right: -2rem;
            width: 4.5rem;
            height: 4.5rem;
        }

        .hero_shape.is-iris {
            display: none;
        }
    }

    .hero_image-wrapper {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        width: 100%;
        align-items: stretch;
        z-index: 10;
    }

    .hero_image-left {
        position: relative;
        width: 100%;
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid var(--color-neutral-20);
        background-color: var(--color-neutral-10);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        aspect-ratio: 362 / 217;
    }

    .hero_image-left img {
        position: absolute;
        height: 100%;
        inset: 0;
        z-index: 0;
    }

    .hero_image.is-portrait {
        aspect-ratio: 4 / 5;
    }

    @media (width > 64rem) {
        .hero_image-wrapper {
            grid-template-columns: 0.7fr 1.3fr;
        }

        .hero_image-left {
            aspect-ratio: auto;
        }

        .bracket-highlight {
            padding-inline: 1rem;
        }

        .bracket-highlight::before {
            content: url("../images/decorator-highlight-left.svg");
            position: absolute;
            left: 0;
            top: 5%;
        }

        .bracket-highlight::after {
            content: url("../images/decorator-highlight-right.svg");
            position: absolute;
            right: 0;
            top: 10%;
        }
    }

    .comparison {
        position: relative;
    }

    .comparison_list {
        display: flex;
        flex-direction: column;
        grid-column: span 2 / span 2;
        background-color: var(--color-neutral-10);
        border: 1px solid var(--color-neutral-20);
        border-radius: var(--radius-xl);
        overflow: hidden;
        width: 100%;
    }

    .comparison_list.is-portable {
        grid-column: auto;
        margin-bottom: calc(var(--spacing-lg) - var(--spacing-md));
    }

    .comparison_list.is-portable.is-good {
        margin-bottom: 0;
    }

    .comparison_list_row {
        display: flex;
        border-bottom: 1px solid var(--color-neutral-20);
    }

    .comparison_list_row:last-child {
        border-bottom: none;
    }

    .comparison_list_item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.75rem;
    }

    .comparison_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }

    .comparison_icon.is_cross {
        background-color: #F5F5F5;
        color: var(--color-neutral-50);
        margin-top: 0.5rem;
    }

    .comparison_icon.is_check {
        background-color: #E2F5EE;
        color: var(--color-growth-green);
        margin-top: 0.5rem;
    }

    @media (width < 48rem) {
        .comparison .heading-6 {
            font-size: var(--text-body-sm);
        }
    }

    @media (width > 48rem) {
        .comparison_list.is-portable {
            display: none;
        }

        .comparison_list_row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .comparison_list_item {
            padding: 1rem 1.5rem;
        }

        .comparison_list_item.is_good {
            border-left: 1px solid var(--color-neutral-20);
        }
    }

    /* MODULES */
    .modules {
        position: relative;
    }

    .modules_grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        align-items: start;
    }

    .modules_left-sticky {
        position: relative;
    }

    .modules_nav-list {
        display: none;
        flex-direction: column;
    }

    .modules_nav-item {
        color: var(--color-neutral-30);
        padding-block: 0.75rem;
        transition: all 0.25s ease;
    }

    .modules_nav-item:hover {
        color: var(--color-community-navy);
    }

    .modules_nav-num {
        width: 2rem;
        height: 2rem;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 700;
        background-color: var(--color-neutral-20);
        color: var(--color-neutral-50);
        transition: all 0.25s ease;
    }

    .modules_nav-item.is-active {
        color: var(--color-community-navy);
    }

    .modules_nav-item.is-active .modules_nav-num {
        background-color: var(--color-hub-violet);
        color: var(--color-neutral-10);
        border-color: var(--color-hub-violet);
    }

    .modules_cards-stream {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .module_watermark-icon {
        color: rgba(90, 64, 217, 0.15);
        width: 28px;
        height: 28px;
    }

    .module_card-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .module_feature-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        border-top: 1px solid var(--color-neutral-20);
        padding-top: 1.5rem;
    }

    .module_feature-list span {
        color: var(--color-neutral-80);
    }

    .module_feature-icon {
        width: 2rem;
        height: 2rem;
        border-radius: var(--radius-sm);
        background-color: rgba(90, 64, 217, 0.1);
        color: var(--color-hub-violet);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .module_feature-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    @media (width > 48rem) {
        .modules_grid {
            grid-template-columns: 0.9fr 1.1fr;
            gap: 5rem;
        }

        /* Must fit a laptop viewport: ten nav items + header. If it still
           can't, the column scrolls internally instead of hiding items. */
        .modules_left-sticky {
            position: sticky;
            top: 6rem;
            height: fit-content;
            max-height: calc(100vh - 6rem);
            overflow-y: auto;
            gap: 1.25rem;
        }

        .modules_nav-item {
            padding-block: 0.4rem;
            font-size: 1.125rem;
        }

        .modules_nav-num {
            width: 1.75rem;
            height: 1.75rem;
            font-size: 0.8125rem;
        }

        .modules_nav-list {
            display: flex;
        }
    }

    /* SCAN */
    .scan {
        position: relative;
        background-color: var(--color-relief-purple);
        overflow: hidden;
    }

    .scan section_header {
        position: relative;
        z-index: 50;
    }

    .scan .mockup {
        width: 100%;
        aspect-ratio: 4/3;
    }

    .scan .mockup img {
        height: 100%;
        position: absolute;
        inset: 0;
    }

    @media (width < 64rem) {
        .scan .section.is-grid {
            grid-template-columns: 1fr;
        }
    }

    .feature_badge-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .icon-check-sm {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-growth-green);
        width: 1.25rem;
        height: 1.25rem;
    }

    .feature_image-wrapper {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* BUILDER */
    .builder {
        background-color: var(--color-community-navy);
        color: var(--color-neutral-10);
    }

    .builder_features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        padding-top: 2.5rem;
    }

    /* Symmetric inline padding so the centred content of both columns lines
       up; the divider sits on the second item only. */
    .builder_feature-item {
        padding-inline: 1.25rem;
    }

    .builder_feature-item:nth-child(even) {
        border-left: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    }

    @media (width > 40rem) {
        /* Two features since 2026-09-04: two centred columns, capped so they
           don't sprawl across the full container width. */
        .builder_features {
            grid-template-columns: repeat(2, minmax(0, 30rem));
            justify-content: center;
            gap: 1.5rem;
        }

        .builder_feature-item {
            padding-inline: 1.5rem;
        }

        .builder_feature-item:not(:first-child) {
            border-left: 1px solid color-mix(in srgb, currentColor 10%, transparent);
        }
    }

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

    .builder_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        color: var(--color-relief-purple);
    }

    .builder_title {
        padding-block: 1.5rem 0.25rem;
    }

    /* COMMUNITY */
    .community {
        background-color: var(--color-background);
        display: flex;
        flex-direction: column;
    }

    .community .section_header {
        gap: 0.75rem;
        align-items: flex-start;
    }

    .community_grid_column {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .community_grid_column.is-tablet {
        flex: 1;
        flex-direction: row;
    }

    .community_grid_column .card {
        flex: 1;
    }

    .community .card {
        gap: var(--spacing-lg);
    }

    .icon_wrapper {
        width: 4rem;
        height: 4rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-neutral-10);
    }

    .icon_wrapper img {
        width: 2rem;
        height: 2rem;
    }

    .community_image_wrapper {
        width: 100%;
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
    }

    .community_image_wrapper img {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .community_footer_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        max-width: 48rem;
        margin-left: auto;
        margin-right: auto;
    }

    @media (width > 64rem) {
        .community_header_description {
            width: 40%;
            display: flex;
            align-items: center;
        }

        .community .section_header {
            align-items: center;
        }
    }

    /* PRICING */
    .pricing {
        position: relative;
    }

    .pricing_popular-tag {
        position: absolute;
        top: -1.5rem;
        left: -0.75rem;
        background-color: var(--color-primary);
        color: var(--color-neutral-10);
        letter-spacing: 0.03125rem;
        transform: rotate(-4.8deg);
        z-index: 2;
        padding: 0.5rem 1.25rem;
        border-radius: var(--radius-sm);
        border: 2px solid var(--color-secondary-foreground);
        box-shadow: 4px 4px 0px var(--color-secondary-foreground);
    }

    .pricing_card {
        overflow: visible;
    }

    .pricing_price-wrapper {
        text-align: center;
        border-top: var(--size-border) solid currentColor;
        border-bottom: var(--size-border) solid currentColor;
        padding-block: var(--spacing-md);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .pricing_feature-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 0.75rem;
    }

    .pricing_feature-item {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .pricing_feature-icon {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: var(--radius-sm);
        border: var(--size-border) solid currentColor;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pricing_feature-icon svg {
        width: 0.75rem;
        height: 0.75rem;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
    }

    @media (width < 40rem) {
        .pricing_card {
            gap: 1.25rem;
        }
    }

    @media (width > 40rem) {
        .pricing_feature-list {
            padding-bottom: 1.5rem;
        }
    }

    /* CTA */
    @media (width < 40rem) {
        .cta .button {
            width: 100%;
        }
    }

    /* FOOTER */
    .footer {
        background-color: var(--color-background);
    }

    .footer .logo {
        height: 44px;
        width: auto;
    }

    .footer .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .footer_top-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        gap: 2rem;
    }

    .footer_top-wrapper .grid {
        gap: 0;
    }

    .footer_brand-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-width: 360px;
        margin-right: auto;
    }

    .footer_column {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer_column-title {
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .footer_link-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .footer_divider {
        height: 1px;
        background-color: var(--color-border);
        margin: 2rem 0 1.25rem;
        width: 100%;
    }

    .footer_bottom-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        font-size: 0.8125rem;
        color: var(--color-text--secondary);
    }

    .footer_legal-links {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    @media (width > 40rem) {
        .footer .logo {
            height: 54px;
        }

        .footer .is-row {
            flex-direction: row;
        }

        .footer_column {
            min-width: 13.75rem;
        }

        .footer_divider {
            margin-top: 3.75rem;
        }

        .footer_bottom-wrapper {
            justify-content: space-between;
        }
    }
}

@layer community {
    /* SCREENSHOTS (2026-09: real app captures replace stock photos) */
    .module_shot {
        margin: 0;
        border-radius: var(--radius-lg);
        border: 1.5px solid var(--color-community-navy);
        box-shadow: var(--shadow-sm) var(--color-community-navy);
        overflow: hidden;
        aspect-ratio: 1600 / 1056;
        background-color: var(--color-neutral-10);
    }

    .module_shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
        display: block;
    }

    .phone-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.25rem;
        background-color: var(--color-beige);
        background-image: radial-gradient(circle, color-mix(in srgb, var(--color-community-navy) 10%, transparent) 1.5px, transparent 1.25px);
        background-size: 18px 18px;
    }

    .phone-frame img,
    .hero_image-left.phone-frame img,
    .community_image_wrapper.phone-frame img {
        position: static;
        inset: auto;
        width: auto;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        border-radius: 1.5rem;
        border: 3px solid var(--color-community-navy);
        box-shadow: var(--shadow-md) var(--color-community-navy);
        background-color: var(--color-neutral-10);
    }

    .hero_image-left.phone-frame {
        min-height: 20rem;
    }

    .community_image_wrapper.phone-frame {
        min-height: 26rem;
    }

    /* The figure sizes to its content here (no definite height to resolve
       a percentage against), so the phone gets an explicit height. */
    .scan .mockup.scan_phone {
        aspect-ratio: auto;
        height: auto;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        background: transparent;
    }

    .scan .mockup.scan_phone img {
        position: static;
        inset: auto;
        width: auto;
        height: clamp(24rem, 40vw, 32rem);
        border-radius: 1.5rem;
        border: 3px solid var(--color-community-navy);
        box-shadow: var(--shadow-md) var(--color-community-navy);
        background-color: var(--color-neutral-10);
    }

    /* MULTI-CLUB (one account, every club) */
    .multiclub_card {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: center;
    }

    .multiclub_copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .multiclub_shot {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        background-color: var(--color-neutral-10);
        border-radius: var(--radius-lg);
    }

    .multiclub_shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
        display: block;
    }

    @media (width > 64rem) {
        .multiclub_card {
            grid-template-columns: 1.05fr 0.95fr;
            gap: 3rem;
        }
    }

    /* MORE (built-in details grid) */
    .more {
        background-color: var(--color-background);
    }

    .more .card {
        gap: 0.5rem;
    }

    /* PRICING: three tiers */
    .card.is-navy {
        background-color: var(--color-community-navy);
        color: var(--color-neutral-10);
        border-color: var(--color-community-navy);
    }

    .card.is-navy.is-shadow {
        box-shadow: var(--shadow-md) var(--color-hub-violet);
    }

    .pricing_card:not(.is-secondary) .heading-2,
    .pricing_card:not(.is-secondary) .heading-4,
    .pricing_card:not(.is-secondary) .pricing_period {
        color: var(--color-neutral-10);
    }

    .pricing_card-head {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .pricing_blurb {
        opacity: 0.8;
    }

    .pricing_period {
        font-size: 1.125rem;
        font-weight: var(--font-semibold);
        opacity: 0.8;
        margin-left: 0.125rem;
    }

    .pricing_card .button {
        width: 100%;
    }

    .pricing_card .pricing_feature-list {
        flex: 1;
    }

    .pricing_notes {
        max-width: 52rem;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* Free trial (2026-09-17): the reassurance line under the hero buttons and
       the "First 30 days free" tag on the Standard/Pro price blocks. */
    .hero_cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .pricing_trial-tag {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-sm);
        background-color: color-mix(in srgb, currentColor 20%, transparent);
        font-size: var(--text-body-xs);
        font-weight: var(--font-bold);
        letter-spacing: 0.05em;
        line-height: 1.7;
        text-transform: uppercase;
    }

    .pricing_card.is-secondary .pricing_trial-tag {
        background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
        color: var(--color-primary);
    }

    /* "Start your free trial" is one word longer than the old label: let the
       hero pair wrap (centred) on narrow phones instead of overflowing. */
    @media (width < 40rem) {
        .hero .button-group {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    @media (width > 48rem) and (width <= 64rem) {
        .pricing_grid.grid.col-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* EXPLAINER VIDEO (2026-09-25): 60 s town-finale cut, poster + English captions in assets/video/.
       Custom controls (script at the end of index.html): the browser's own controls tint the video on hover. */
    .video_frame {
        position: relative;
        width: 100%;
        max-width: 68rem;
        margin: 0 auto;
        border-radius: var(--radius-xl);
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background-color: var(--color-community-navy);
    }

    .video_frame video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
    }

    /* captions (text comes from the .vtt track); they sit above the control bar while it is showing */
    .video_caption {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        z-index: 1;
        max-width: 88%;
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-sm);
        color: var(--color-neutral-10);
        background-color: color-mix(in srgb, var(--color-community-navy) 85%, transparent);
        font-family: var(--font-body);
        font-size: clamp(0.8125rem, 1.6vw, 1.375rem);
        font-weight: 600;
        line-height: 1.35;
        text-align: center;
        white-space: pre-line;
        pointer-events: none;
        transform: translateX(-50%);
        transition: bottom 0.2s ease;
    }

    .video_caption:empty {
        display: none;
    }

    .video_frame.is-active .video_caption,
    .video_frame:not(.is-playing) .video_caption,
    .video_frame:focus-within .video_caption {
        bottom: 4.25rem;
    }

    .video_frame:fullscreen {
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .video_frame:fullscreen video {
        object-fit: contain;
    }

    /* big play button over the poster: same pressed-shadow feel as .button.is-primary-shadow */
    .video_play {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1.5rem 0.875rem 1.125rem;
        border: 2px solid var(--color-community-navy);
        border-radius: var(--radius-full);
        color: var(--color-neutral-10);
        background-color: var(--color-primary);
        box-shadow: var(--shadow-md) var(--color-community-navy);
        font-family: var(--font-display);
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transform: translate(-50%, -50%);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .video_play:hover {
        transform: translate(calc(-50% + 2px), calc(-50% + 2px));
        box-shadow: var(--shadow-sm) var(--color-community-navy);
    }

    .video_play[hidden] {
        display: none;
    }

    /* after the video ends, Replay moves to the corner so it doesn't cover the end card */
    .video_frame.is-ended .video_play {
        top: auto;
        right: 1.25rem;
        bottom: 1.25rem;
        left: auto;
        transform: none;
    }

    .video_frame.is-ended .video_play:hover {
        transform: translate(2px, 2px);
    }

    .video_play-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .video_play-time {
        padding-left: 0.75rem;
        border-left: 1px solid color-mix(in srgb, var(--color-neutral-10) 40%, transparent);
        font-weight: 500;
        opacity: 0.8;
    }

    /* floating control bar: a compact pill, never a full-frame tint */
    .video_controls {
        position: absolute;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-full);
        color: var(--color-neutral-10);
        background-color: color-mix(in srgb, var(--color-community-navy) 88%, transparent);
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.375rem);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .video_controls[hidden] {
        display: none;
    }

    .video_frame.is-active .video_controls,
    .video_frame:not(.is-playing) .video_controls,
    .video_frame:focus-within .video_controls {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .video_frame.is-playing:not(.is-active) video {
        cursor: none;
    }

    .video_btn {
        display: grid;
        flex-shrink: 0;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: var(--radius-full);
        color: inherit;
        background-color: transparent;
        cursor: pointer;
    }

    .video_btn:hover {
        background-color: color-mix(in srgb, var(--color-neutral-10) 14%, transparent);
    }

    .video_btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .video_btn.is-text {
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .video_btn[aria-pressed="true"] {
        background-color: var(--color-primary);
    }

    .video_btn .is-play,
    .video_frame:not(.is-playing) .video_btn .is-pause,
    .video_btn .is-muted,
    .video_frame.is-muted .video_btn .is-sound {
        display: none;
    }

    .video_frame:not(.is-playing) .video_btn .is-play,
    .video_frame.is-muted .video_btn .is-muted {
        display: block;
    }

    .video_progress {
        position: relative;
        flex: 1;
        height: 1.75rem;
        margin: 0 0.5rem;
        cursor: pointer;
        touch-action: none;
    }

    .video_progress::before,
    .video_progress-fill {
        position: absolute;
        top: 50%;
        left: 0;
        height: 0.25rem;
        border-radius: var(--radius-full);
        transform: translateY(-50%);
    }

    .video_progress::before {
        content: "";
        right: 0;
        background-color: color-mix(in srgb, var(--color-neutral-10) 30%, transparent);
    }

    .video_progress-fill {
        width: 0;
        background-color: var(--color-warm-terracotta);
    }

    .video_progress-fill::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -0.375rem;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: var(--radius-full);
        background-color: var(--color-neutral-10);
        transform: translateY(-50%);
    }

    .video_time {
        flex-shrink: 0;
        padding-right: 0.25rem;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        font-variant-numeric: tabular-nums;
    }

    .video_play:focus-visible,
    .video_btn:focus-visible,
    .video_progress:focus-visible {
        outline: 2px solid var(--color-warm-terracotta);
        outline-offset: 2px;
    }

    @media (width < 40rem) {
        .video_play {
            gap: 0.5rem;
            padding: 0.5rem 1rem 0.5rem 0.75rem;
            font-size: 0.9375rem;
        }

        .video_play-icon {
            width: 1.25rem;
            height: 1.25rem;
        }

        /* compact round Replay so it doesn't cover the end card on a small screen */
        .video_frame.is-ended .video_play {
            right: 0.5rem;
            bottom: 0.5rem;
            padding: 0.5rem;
        }

        .video_frame.is-ended .video_play span {
            display: none;
        }

        .video_controls {
            right: 0.375rem;
            bottom: 0.375rem;
            left: 0.375rem;
            padding: 0.125rem 0.375rem;
        }

        .video_btn {
            width: 2rem;
            height: 2rem;
        }

        .video_time {
            display: none;
        }

        .video_caption {
            bottom: 0.5rem;
            max-width: 94%;
            padding: 0.125rem 0.5rem;
            font-size: 0.6875rem;
            white-space: normal;
        }

        .video_frame.is-active .video_caption,
        .video_frame:not(.is-playing) .video_caption,
        .video_frame:focus-within .video_caption {
            bottom: 2.75rem;
        }
    }

    /* CONTACT (2026-09-27): "Talk to the team" popup, opened by every [data-contact-open] link.
       Posts to the app API's /platform-contact, which emails support@ (script at the end of index.html). */
    html:has(.contact_dialog[open]) {
        overflow: hidden;
    }

    .contact_dialog {
        width: min(100% - 2rem, 34rem);
        max-width: none;
        max-height: calc(100dvh - 2rem);
        margin: auto;
        padding: 0;
        overflow-y: auto;
        border: 2px solid var(--color-community-navy);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md) var(--color-community-navy);
        color: var(--color-foreground);
        background-color: var(--color-neutral-10);
    }

    .contact_dialog[open] {
        animation: contact-in 0.2s ease-out;
    }

    .contact_dialog::backdrop {
        background-color: color-mix(in srgb, var(--color-community-navy) 60%, transparent);
    }

    @keyframes contact-in {
        from {
            opacity: 0;
            transform: translateY(0.75rem);
        }
    }

    .contact_close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--radius-full);
        color: var(--color-community-navy);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .contact_close:hover {
        background-color: var(--color-app-grey);
    }

    .contact_body {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .contact_header {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding-right: 2rem;
    }

    .contact_form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .contact_row {
        display: grid;
        gap: 1rem;
    }

    .contact_field {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .contact_label {
        font-family: var(--font-display);
        font-size: var(--text-body-sm);
        font-weight: var(--font-semibold);
        color: var(--color-community-navy);
    }

    .contact_optional {
        font-weight: var(--font-regular);
        color: var(--color-neutral-60);
    }

    /* 1rem text keeps iPhone Safari from zooming into the field */
    .contact_input {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1.5px solid var(--color-app-border);
        border-radius: var(--radius-md);
        font-size: 1rem;
        line-height: 1.5;
        color: var(--color-community-navy);
        background-color: var(--color-neutral-10);
        transition: border-color 0.2s ease;
    }

    textarea.contact_input {
        min-height: 7.5rem;
        resize: vertical;
    }

    .contact_input:hover {
        border-color: var(--color-relief-purple);
    }

    .contact_input:user-invalid {
        border-color: var(--color-warm-terracotta);
    }

    .contact_input:focus-visible {
        outline: 2px solid var(--color-hub-violet);
        outline-offset: 1px;
        border-color: var(--color-hub-violet);
    }

    .contact_trap {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .contact_status {
        padding: 0.625rem 0.875rem;
        border-left: 3px solid var(--color-warm-terracotta);
        border-radius: var(--radius-sm);
        font-size: var(--text-body-sm);
        color: var(--color-community-navy);
        background-color: color-mix(in srgb, var(--color-warm-terracotta) 12%, transparent);
    }

    .contact_status:empty,
    .contact_turnstile:empty {
        display: none;
    }

    /* The Turnstile box is zero-height while invisible; cancel the flex gap
       it would add until Cloudflare actually shows its checkbox. */
    .contact_turnstile:not(.is-shown) {
        margin-top: -1rem;
    }

    .contact_status a {
        font-weight: var(--font-semibold);
        color: inherit;
        text-decoration: underline;
    }

    .contact_submit {
        align-self: flex-start;
    }

    .contact_submit:disabled {
        opacity: 0.7;
        cursor: progress;
    }

    .contact_success {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .contact_success[hidden],
    .contact_form[hidden],
    .contact_body:has(.contact_success:not([hidden])) .contact_header p {
        display: none;
    }

    .contact_success .heading-4:focus {
        outline: none;
    }

    .contact_close:focus-visible,
    .contact_dialog .button:focus-visible {
        outline: 2px solid var(--color-hub-violet);
        outline-offset: 2px;
    }

    @media (width > 40rem) {
        .contact_body {
            padding: 2rem;
        }

        .contact_row {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (width < 40rem) {
        .contact_submit {
            align-self: stretch;
        }
    }
}

@layer utilities {
    .grid.col-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width > 64rem) {
        .grid.col-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}