/* ---------- 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. */
    /* Safari has a known bug where a <video>'s poster image doesn't reliably
       respect rounded clipping from an ancestor's overflow:hidden the way the
       real video frames do — giving the element its own clip (rather than
       relying solely on .click-to-play-wrap's) is the standard fix. */
    border-radius: inherit;
    overflow: hidden;
}

/* 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;
    /* Safari has a known bug where a <video>'s poster image doesn't reliably
       respect rounded clipping from an ancestor's overflow:hidden the way the
       real video frames do — giving the element its own clip (rather than
       relying solely on .power-options-video-wrap's) is the standard fix. */
    border-radius: inherit;
    overflow: hidden;
}

.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);
}

/* The first two rows of a spec list (Module, Board) sit right at the top of
   .spec-list-items, which — being the accordion's clip target for its
   expand/collapse animation (see .spec-list > * above) — has no room above
   itself to open into: an upward popup there gets cut off by that same
   overflow-y: hidden instead of showing. Opening downward instead stays
   inside the list, where there's always more content below. */
.spec-list-items li:first-child .info-popup,
.spec-list-items li:nth-child(2) .info-popup {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateY(-4px);
}

.spec-list-items li:first-child .info-popup::after,
.spec-list-items li:nth-child(2) .info-popup::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--color-bg);
}

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

/* Hover only for devices with a real mouse. Touch has no equivalent of
   "unhover" — a tap leaves the element permanently stuck in :hover on iOS
   Safari (and, it turns out, in Chromium's own touch emulation), with
   nothing left to tap that clears it. Scoping :hover to true pointer devices
   means touch relies solely on the .open class above, which the JS toggle in
   script.js can actually turn back off again. */
@media (hover: hover) and (pointer: fine) {
    .info-tip:hover .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;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Deliberately not the old min-width/height:100% + width/height:auto
       "cover" hack (sizing the element's own box off its intrinsic aspect
       ratio) — that ratio is only known once the video's metadata has
       loaded, so before then (i.e. while just the poster is showing) some
       browsers (notably iOS Safari) size the box differently than they do
       once real metadata arrives, causing a visible jump/resize right when
       playback starts. A box fixed at 100%/100% regardless of intrinsic
       ratio, with object-fit doing the cropping, renders the poster and the
       real video frames identically. */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 16, 32, 0.4), rgba(11, 16, 32, 0.55));
    z-index: 1;
    /* Purely decorative, but sits on top of (and the same size as) the video —
       without this, it silently swallows every tap/click over the hero,
       including whatever native "tap to play" affordance the browser shows
       when autoplay gets blocked (e.g. iOS Low Power Mode), since that tap
       never actually reaches the <video> underneath. */
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    /* Hero is 100vh, so this is ~10% of its height */
    transform: translateY(-10vh);
    /* Same reasoning as .hero-overlay — just a heading, nothing in here needs
       to catch taps, and it sits centered over the video too. */
    pointer-events: none;
}

.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;
    }

    /* At this width the header columns are narrow enough that the
       "Recommended" pill, at its normal size, is wider than its own column
       — table-layout: fixed keeps the column's width fixed regardless, so
       the badge just visually spills into the neighboring header's text
       instead of being contained. Shrinking it to fit is the direct fix;
       allowing it to wrap is a safety net in case some narrower device still
       doesn't have room even at this size — wrapped is contained, just
       shorter, where overflowing would spill into the next column again.
       display switches from .badge's inline-flex to inline-block here
       because a flex item's "automatic minimum size" is based on its
       min-content width, and browsers don't count overflow-wrap's forced
       mid-word breaks toward that — so under inline-flex the text refuses to
       shrink below its full unbroken width and overflows the pill even
       though the pill itself correctly shrinks; plain inline-block text
       wrapping doesn't have that quirk. */
    .power-table .badge--small {
        display: inline-block;
        max-width: 100%;
        padding: 2px 5px;
        font-size: 0.5rem;
        letter-spacing: 0;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
    }

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