/* ---------- Design tokens ---------- */
:root {
    --color-bg: #0b1020;
    --color-bg-soft: #111733;
    --color-surface: #ffffff;
    --color-text: #0b1020;
    --color-text-muted: #4b5563;
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-accent: #22d3ee;
    --color-border: rgba(255, 255, 255, 0.08);

    --header-height: 68px;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;

    --container-max: 1200px;
    --transition: 200ms ease;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: #f7f8fc;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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

/* ---------- Header / Nav ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(11, 16, 32, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.brand-logo {
    width: 128px;
    height: 128px;
}

.brand-name {
    font-size: 1.25rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    display: inline-block;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    border-radius: 8px;
    transition: color var(--transition), background-color var(--transition);
}

.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Buy CTA — stays outside the collapsible menu, always visible */
.nav-cta {
    display: inline-block;
    flex-shrink: 0;
    padding: 8px 18px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color var(--transition);
}

.nav-cta:hover {
    background: var(--color-primary-hover);
}

.nav-cta[aria-current="page"] {
    background: var(--color-primary-hover);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Mobile toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 20px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

/* ---------- Sections ---------- */
main {
    padding-top: var(--header-height);
}

main.has-hero {
    padding-top: 0;
}

.section {
    padding: 32px 0;
    display: flex;
    align-items: flex-start;
}

.section h1,
.section h2 {
    font-size: clamp(2rem, 2vw, 3rem);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.section p {
    max-width: 640px;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--color-text-muted);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.section p.full-width {
    max-width: none;
}

/* A loading placeholder for videos, in the moment between the empty box and
   the first decoded frame (visible on slow connections). Pure CSS — nothing
   to download — so it's there instantly instead of adding its own wait. Once
   a frame is available the video paints over it and hides it automatically;
   no JS needed to turn it off. */
@keyframes video-loading-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

.inline-video {
    display: block;
    width: 100%;
    max-width: 800px;
    margin-top: 8px;
    border-radius: var(--radius);
    transition: opacity 400ms ease;
    /* Reserves the video's real height before its metadata has loaded — several
       sections reuse the same clip in separate <video> elements, so without this
       each one's box jumps from the browser's ~150px placeholder to its actual
       height independently as its own metadata arrives, cascading into layout
       shifts large enough to spuriously cross the scroll-driven play/pause
       IntersectionObserver thresholds below. */
    aspect-ratio: 16 / 9;
    background-color: #ece9fb;
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: video-loading-shimmer 1.6s ease-in-out infinite;
}


/* Narrow screens: only the video dims when paused, never the adjacent text */
.inline-video.video-dimmed {
    opacity: 0.5;
}

/* Text and video side by side instead of stacked */
.section-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 40px;
    row-gap: 12px;
    width: 100%;
    transition: opacity 400ms ease;
}

/* A grid row's height follows its tallest item, and row-gap measures from
   that item's bottom edge — but only if a trailing child's own margin isn't
   quietly extending the item's box first. Zeroing it here keeps the "distance
   from the tallest element above" fixed at row-gap alone, whether that
   element is the text column alone (narrow) or the text+video row (wide). */
.section-columns > div:first-child > *:last-child {
    margin-bottom: 0;
}

.section-columns.section-dimmed {
    opacity: 0.5;
}

/* Content that belongs to a section-columns row (e.g. a collapsible spec
   table) but should span the full width, below both the text and the video.
   Nested as a grid child so it dims along with the row automatically (opacity
   on the parent already composites its whole subtree, table included), and so
   its stacking position can be controlled per breakpoint below. */
.section-columns > .section-extra {
    grid-column: 1 / -1;
    margin-top: 0;
}

.section-columns .inline-video {
    max-width: none;
    margin-top: 0;
    transform: translateX(0);
    transition: transform 700ms ease, opacity 400ms ease;
}

.section-columns .inline-video.video-in-view {
    transform: translateX(16px);
}

.section-columns--reverse .inline-video {
    order: -1;
    justify-self: end;
}

.section-columns--reverse .inline-video.video-in-view {
    transform: translateX(-16px);
}

/* Text column offsets the opposite way the video does */
.section-columns > div:first-child {
    transform: translateX(0);
    transition: transform 700ms ease;
}

.section-columns.video-in-view > div:first-child {
    transform: translateX(-16px);
}

.section-columns--reverse.video-in-view > div:first-child {
    transform: translateX(16px);
}

/* Same slide-in-when-in-focus motion as .inline-video, driven by the same
   scroll position bands rather than is-playing — this video only ever plays
   on a real click, but should still visually track scroll like the rest of
   the page. */
.section-columns .click-to-play-wrap {
    transform: translateX(0);
    transition: transform 700ms ease;
}

.section-columns .click-to-play-wrap.video-in-view {
    transform: translateX(16px);
}

/* Preview only: scaled down 25% (both dimensions) to keep its native aspect ratio, without touching the source file */
.inline-video--short {
    width: 75%;
    /* mino-touch.mp4 is portrait, unlike every other inline video */
    aspect-ratio: 498 / 720;
}

/* mino-workflow.mp4's cropped window content isn't exactly 16:9 (~1.71:1,
   vs the box's 16:9 = ~1.78:1) — cropping it any tighter to force an exact
   match would cut into the real window content (title bar / status bar sit
   flush against both edges already, no slack). <video>'s default
   object-fit is `contain`, so a ratio mismatch against the box would
   letterbox, leaving gaps at the rounded corners. Matching the box's own
   ratio to the video's actual content instead avoids that entirely, with no
   cropping or distortion needed. */
.inline-video--workflow {
    aspect-ratio: 1704 / 998;
}

/* "Sound" section: a click-to-play video (with audio) that stays dimmed
   behind a "Play with audio" label until tapped. Deliberately its own thing
   rather than an .inline-video — it must never be swept into the
   scroll-driven autoplay system, since starting audio automatically while
   scrolling past would be jarring. */
.click-to-play-wrap {
    position: relative;
    display: block;
    /* Matches .inline-video--short (mino-touch.mp4) — the site's other portrait videos */
    width: 75%;
    max-width: 800px;
    margin-top: 8px;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 720 / 976;
    background-color: #ece9fb;
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: video-loading-shimmer 1.6s ease-in-out infinite;
}

.click-to-play-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Stays fully opaque (dimming is the separate white .click-to-play-dim
       layer below) so it fully hides the loading shimmer behind it the
       moment it has a poster/frame to show — if the video itself were
       translucent instead, the shimmer would keep showing through it
       forever rather than disappearing once loaded. */
}

/* Same dimmed-until-active look as the other videos (.video-dimmed), done as
   a white overlay rather than the video's own opacity — see above */
.click-to-play-dim {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    transition: opacity 300ms ease;
}

.click-to-play-wrap.is-playing .click-to-play-dim {
    opacity: 0;
}

.click-to-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    /* The video fades toward white rather than going dark, so the label
       needs to be dark to stay legible — the glow keeps it readable over
       whatever's still showing through underneath. */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.9);
    transition: opacity 300ms ease;
}

.click-to-play-icon {
    font-size: 1.4em;
    line-height: 1;
}

.click-to-play-wrap.is-playing .click-to-play-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Power options: three videos are all kept in the DOM (rather than swapping
   a single <video>'s src) so the browser only ever downloads each one once —
   switching options after that is just a local play/pause + visibility swap. */
.power-options-video-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.power-option-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    background-color: #ece9fb;
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: video-loading-shimmer 1.6s ease-in-out infinite;
}

.power-option-video.is-active {
    display: block;
}

/* Power options comparison table */
.table-scroll {
    width: 100%;
    margin-top: 40px;
    overflow-x: auto;
}

.power-table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    font-size: 0.95rem;
    table-layout: fixed;
}

.power-table th,
.power-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(11, 16, 32, 0.08);
    text-align: center;
}

.power-table th:first-child,
.power-table td:first-child {
    width: 30%;
    text-align: left;
}

.power-table thead th {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.power-table tbody th {
    color: var(--color-text);
    font-weight: 600;
    white-space: normal;
}

.power-table tbody td {
    color: var(--color-text);
}

.power-table tbody tr.power-table-divider th,
.power-table tbody tr.power-table-divider td {
    border-bottom: 2px solid rgba(11, 16, 32, 0.3);
}

/* Two-column brain option comparison (Jetson boards) */
.brain-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    margin-top: 40px;
}

.brain-option h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-bg);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--small {
    padding: 2px 7px;
    font-size: 0.6rem;
}

.brain-option-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-surface);
    border: 1px solid rgba(11, 16, 32, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 0 20px;
}

.brain-option-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-sizing: border-box;
    padding: 24px;
}

.brain-option-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    background: rgba(11, 16, 32, 0.78);
    color: #fff;
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.brain-option-name {
    white-space: nowrap;
}

/* Power options: click one to switch which video plays */
.power-option-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
}

.power-option {
    display: block;
    width: 100%;
    max-width: 640px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: inherit;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
    line-height: 1.55;
    cursor: pointer;
    transition: background-color var(--transition);
}

.power-option strong {
    color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
    .power-option:not([aria-selected="true"]):hover {
        background: rgba(79, 70, 229, 0.07);
    }
}

.power-option[aria-selected="true"] {
    background: rgba(79, 70, 229, 0.14);
}

/* Only the selected power option's description takes up space — the others
   show just their label, to keep the list compact. */
.power-option-desc {
    display: none;
}

.power-option[aria-selected="true"] .power-option-desc {
    display: inline;
}

.spec-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(11, 16, 32, 0.16);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

/* Two copies of the Power options "Show specs" button exist (one in the text
   column, one inside .section-extra) so it can sit in different positions in
   the wide vs. narrow layout — only one is ever shown at a time. They share
   the same aria-controls, so the existing toggle-group logic already keeps
   them in sync. */
.spec-toggle--narrow {
    display: none;
}

.spec-toggle:hover {
    background: rgba(11, 16, 32, 0.05);
    border-color: rgba(11, 16, 32, 0.3);
}

/* Embedded in the image caption bar — match the caption's text style */
.brain-option-caption .spec-toggle {
    margin: 0;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.brain-option-caption .spec-toggle:hover,
.brain-option-caption .spec-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

.spec-toggle-label {
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.75;
}

.spec-toggle .chevron {
    display: inline-block;
    transition: transform var(--transition);
}

.spec-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* Expand/collapse via a grid row going 0fr -> 1fr, not a guessed max-height —
   a fixed max-height (the previous approach) silently clips whichever content
   ends up taller than the guess, e.g. once .spec-value text wraps onto more
   lines at a narrower width. This always matches the real content height
   exactly, so there's no ceiling left to exceed. */
.spec-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 300ms ease, opacity 200ms ease;
}

.spec-list.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* The technique needs exactly one child to clip against — an inner <ul> for
   regular spec lists, or .table-scroll for the power comparison table.
   min-height: 0 lets it actually shrink to the row's 0fr size instead of the
   grid track being forced to fit the child's intrinsic content height. */
.spec-list > * {
    overflow-y: hidden;
    min-height: 0;
}

.spec-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spec-list-items li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11, 16, 32, 0.08);
    font-size: 0.95rem;
}

.spec-label {
    color: var(--color-text-muted);
}

.spec-value {
    color: var(--color-text);
    font-weight: 600;
    text-align: right;
}

.spec-value--good {
    color: #15803d;
}

.spec-value--bad {
    color: #dc2626;
}

/* Info icon + tooltip next to a spec label — hover on desktop, tap on mobile */
.info-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--color-text-muted);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 11px;
    line-height: 1;
    cursor: help;
    transition: color var(--transition), border-color var(--transition);
}

.info-icon:hover,
.info-icon:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.info-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 10;
    width: max-content;
    max-width: 220px;
    padding: 10px 12px;
    background: var(--color-bg);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity var(--transition), transform var(--transition);
}

.info-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 8px;
    border: 6px solid transparent;
    border-top-color: var(--color-bg);
}

.info-tip:hover .info-popup,
.info-tip:focus-within .info-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Section with a right-justified, dimmed background photo */
.section--photo {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    padding-bottom: 0;
}

.section-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: right center;
    /* background-size: cover; */
    background-repeat: no-repeat;
}

.section-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(247, 248, 252, 0.82);
}

.section--photo .container {
    position: relative;
    z-index: 1;
}

.divider {
    max-width: 640px;
    margin: 8px 0 0;
    border: none;
    border-top: 1px solid rgba(11, 16, 32, 0.12);
}

.section .lead {
    max-width: 720px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.8rem, 2.73vw, 2.1rem);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(11, 16, 32, 0.95);
    margin: 0 0 40px;
    letter-spacing: 0;
}

/* ---------- Hero (background video) ---------- */
.hero {
    position: relative;
    height: 100vh;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-bg);
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 16, 32, 0.55), rgba(11, 16, 32, 0.65));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    /* Hero is 100vh, so this is ~10% of its height */
    transform: translateY(-10vh);
}

.hero-content h1 {
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 4rem);
    letter-spacing: -0.02em;
    margin: 0;
}

/* logo.svg is the "Mino" wordmark itself, standing in for the literal word —
   sized off the heading's own font-size (rather than a fixed px value) so it
   stays in proportion with the h1 across the clamp()'s whole range. */
.hero-logo {
    display: inline-block;
    height: 1.2em;
    width: auto;
    vertical-align: -0.32em;
}

/* ---------- Contact form ---------- */
.contact-form {
    width: 100%;
    max-width: 640px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-required {
    color: var(--color-primary);
}

.form-optional {
    color: var(--color-text-muted);
    font-weight: 400;
}

.form-field input,
.form-field textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid rgba(11, 16, 32, 0.16);
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {
    border-color: #dc2626;
}

.form-submit {
    align-self: flex-start;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.form-error {
    font-size: 0.85rem;
    color: #dc2626;
}

.form-status {
    max-width: 640px;
    margin: 24px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.form-status--success {
    background: rgba(21, 128, 61, 0.1);
    color: #15803d;
}

.form-status--error {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Hidden from sighted users and keyboard tabbing, but still present in the
   markup for spam bots that blindly fill in every field to trip. */
.form-field--honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -9999px;
}

/* ---------- Footer ---------- */
.site-footer {
    padding: 24px 0;
    background: var(--color-bg);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 0.9rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
    }

    .nav-menu {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 16px 20px;
        background: rgba(11, 16, 32, 0.98);
        border-bottom: 1px solid var(--color-border);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--transition), opacity var(--transition);
    }

    .nav-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-link {
        padding: 12px 14px;
        border-radius: 8px;
    }

    .nav-right {
        gap: 10px;
    }

    .nav-cta {
        padding: 8px 14px;
    }

    .brain-options {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .section-columns {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .section-columns .inline-video,
    .section-columns--reverse .inline-video,
    .section-columns .click-to-play-wrap {
        order: 1;
        transform: none;
        justify-self: center;
    }

    /* Stacked order: text first, then the video, then anything that belongs
       below it (like the spec toggle + table) last — instead of the DOM
       order, which would put that trailing block before the video. */
    .section-columns > .section-extra {
        order: 2;
        /* Follows the video rather than "the tallest element above" the row,
           so it gets its own, more generous space instead of the row-gap. */
        margin-top: 28px;
    }

    /* The wide-layout button (in the text column) is swapped for the one
       inside .section-extra, which now sits below the video. */
    .spec-toggle--wide {
        display: none;
    }

    .spec-toggle--narrow {
        display: inline-flex;
    }

    /* Higher specificity than the desktop .video-in-view rules — must win once this
       media query is active, even if the class was already added at a wider width */
    .section-columns .inline-video.video-in-view,
    .section-columns--reverse .inline-video.video-in-view,
    .section-columns .click-to-play-wrap.video-in-view {
        transform: none;
    }

    .section-columns.video-in-view > div:first-child,
    .section-columns--reverse.video-in-view > div:first-child {
        transform: none;
    }

    /* Let the table shrink to fit narrow screens instead of forcing a
       horizontal scrollbar via its old min-width floor. */
    .power-table {
        min-width: 0;
    }

    .power-table th,
    .power-table td {
        padding: 10px 8px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}