/* ==========================================================================
   OpenHockey Engine — site styles

   Layer order:
     1. Tokens (CSS custom properties)
     2. Base / element defaults
     3. Layout chrome (header, footer)
     4. Reusable components (buttons, section headers, cards, frames)
     5. Landing page sections
     6. Purchase page
     7. Account pages (sign-in, keys, backup email)
     8. Support page + staff dashboard
     9. Error page
    10. Responsive overrides

   Colours are sampled from the game's own assets: the logo orange (#f7941d),
   the ice blue of the rink, and a near-black navy that matches the in-game UI.
   ========================================================================== */

/* --------------------------------------------------------- 1. tokens --- */

:root {
    /* Surfaces — near-black navy, echoing the game's own dark panels. */
    --ohe-bg: #070b14;
    --ohe-bg-raised: #0c1220;
    --ohe-surface: #111a2c;
    --ohe-surface-2: #16213a;
    --ohe-border: rgba(148, 178, 224, 0.16);
    --ohe-border-strong: rgba(148, 178, 224, 0.32);

    /* Ink */
    --ohe-text: #e8f0fb;
    --ohe-text-muted: #9fb0ca;
    --ohe-text-dim: #7488a4;

    /* Brand — logo orange plus the ice/rink blues. */
    --ohe-orange: #f7941d;
    --ohe-orange-bright: #ffab3d;
    --ohe-orange-deep: #d97706;
    --ohe-ice: #7fd4ff;
    --ohe-blue: #3b8ef0;

    /* Status */
    --ohe-miss: #e2564d;

    /* Effects */
    --ohe-glow-ice: 0 0 0 1px rgba(127, 212, 255, 0.3), 0 14px 50px -14px rgba(59, 142, 240, 0.6);
    --ohe-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
    --ohe-radius: 16px;
    --ohe-radius-sm: 10px;

    /* Layout */
    --ohe-nav-height: 74px;
    --ohe-section-y: clamp(4rem, 9vw, 7.5rem);
    --ohe-measure: 68ch;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--ohe-text);
    --bs-body-bg: var(--ohe-bg);
    --bs-border-color: var(--ohe-border);
    --bs-link-color: var(--ohe-ice);
    --bs-link-hover-color: var(--ohe-orange-bright);
}

/* ----------------------------------------------------------- 2. base --- */

/* Anchor targets clear the sticky navbar (74px bar + 1px border + breathing
   room). Scoped to elements that actually have an id rather than applied to
   every element on the page. */
[id] {
    scroll-margin-top: calc(var(--ohe-nav-height) + 1rem);
}

html {
    scroll-behavior: smooth;
}

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

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

body {
    background-color: var(--ohe-bg);
    color: var(--ohe-text);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Saira Condensed", "Inter", system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: #fff;
}

p {
    color: var(--ohe-text-muted);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--ohe-orange);
    color: #10121a;
}

:focus-visible {
    outline: 3px solid var(--ohe-ice);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--ohe-orange);
    color: #10121a;
    font-weight: 700;
    border-radius: 0 0 var(--ohe-radius-sm) var(--ohe-radius-sm);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
}

/* ------------------------------------------------------- gradients --- */
/* background-clip: text combined with color: transparent makes text invisible
   wherever the property is unsupported (older engines, forced-colors mode), so
   every gradient-text rule sets a solid colour first and only swaps in the
   transparent fill where the property is confirmed. */

.text-gradient-ice,
.text-gradient-orange,
.stat-value,
.price-amount,
.error-code {
    color: var(--ohe-ice);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .text-gradient-ice,
    .text-gradient-orange,
    .stat-value,
    .price-amount,
    .error-code {
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .text-gradient-ice {
        background: linear-gradient(120deg, var(--ohe-ice), var(--ohe-blue) 60%, #c9e6ff);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .text-gradient-orange,
    .stat-value,
    .price-amount,
    .error-code {
        background: linear-gradient(140deg, var(--ohe-orange-bright), var(--ohe-orange-deep));
        -webkit-background-clip: text;
        background-clip: text;
    }
}

/* -------------------------------------------------------- 3. chrome --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(7, 11, 20, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ohe-border);
}

.site-navbar {
    min-height: var(--ohe-nav-height);
    padding-block: 0.65rem;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.navbar-logo {
    width: 185px;
    height: auto;
}

.site-navlinks .nav-link {
    position: relative;
    padding: 0.5rem 0.85rem !important;
    color: var(--ohe-text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
}

.site-navlinks .nav-link::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ohe-orange), var(--ohe-orange-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.site-navlinks .nav-link:hover,
.site-navlinks .nav-link:focus-visible {
    color: #fff;
}

.site-navlinks .nav-link:hover::after {
    transform: scaleX(1);
}

.navbar-toggler {
    border-color: var(--ohe-border-strong);
    padding: 0.5rem 0.6rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(127, 212, 255, 0.35);
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
    margin-top: var(--ohe-section-y);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
    background:
        radial-gradient(900px 300px at 15% 0%, rgba(247, 148, 29, 0.07), transparent 70%),
        var(--ohe-bg-raised);
    border-top: 1px solid var(--ohe-border);
}

.footer-logo {
    width: 185px;
    height: auto;
    margin-bottom: 1.1rem;
}

.footer-blurb {
    max-width: 42ch;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: var(--ohe-text-dim);
}

.footer-heading {
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

.footer-links {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.footer-links a {
    color: var(--ohe-text-muted);
    font-size: 0.9375rem;
    transition: color 0.18s ease;
}

.footer-links a:hover {
    color: var(--ohe-orange-bright);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ohe-border);
}

.footer-copy {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ohe-text-dim);
}

.studio-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ohe-text-dim);
    font-size: 0.8125rem;
    transition: color 0.18s ease, transform 0.18s ease;
}

.studio-link:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* The Andrew Bach Codes logo is navy-on-transparent, so it needs a light
   plate to stay legible against the dark footer. */
.studio-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
    background: #fff;
    border-radius: 8px;
    line-height: 0;
}

.studio-chip img {
    width: 132px;
    height: auto;
}

.studio-name {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* --------------------------------------------------- 4. components --- */

.container {
    max-width: 1220px;
}

/* Buttons ----------------------------------------------------------------- */

.btn-cta {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 700;
    --bs-btn-letter-spacing: 0.06em;
    --bs-btn-text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 999px;
    color: #14100a;
    background: linear-gradient(135deg, var(--ohe-orange-bright), var(--ohe-orange) 55%, var(--ohe-orange-deep));
    box-shadow: 0 10px 30px -10px rgba(247, 148, 29, 0.75);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn-cta:hover,
.btn-cta:focus-visible {
    color: #14100a;
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 40px -12px rgba(247, 148, 29, 0.85);
}

.btn-cta:active {
    transform: translateY(0);
}

.btn-cta-price {
    padding-left: 0.55rem;
    border-left: 1px solid rgba(20, 16, 10, 0.28);
    font-family: "Saira Condensed", sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0;
}

.btn-cta-sm {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-font-size: 0.8125rem;
}

.btn-cta-lg {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: 0.9rem;
    --bs-btn-font-size: 1rem;
}

.btn-ghost {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--ohe-border-strong);
    border-radius: 999px;
    color: var(--ohe-text);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    color: #fff;
    border-color: var(--ohe-ice);
    background: rgba(127, 212, 255, 0.08);
    transform: translateY(-2px);
}

.btn-ghost .arrow {
    transition: transform 0.18s ease;
}

.btn-ghost:hover .arrow {
    transform: translateX(3px);
}

/* Points the arrow back rather than using an inline style override. */
.btn-ghost .arrow-back {
    transform: rotate(180deg);
}

.btn-ghost:hover .arrow-back {
    transform: rotate(180deg) translateX(3px);
}

/* Section furniture ------------------------------------------------------- */

.section {
    position: relative;
    padding-block: var(--ohe-section-y);
}

.section-alt {
    background:
        radial-gradient(1000px 420px at 80% 0%, rgba(59, 142, 240, 0.06), transparent 70%),
        var(--ohe-bg-raised);
    border-block: 1px solid var(--ohe-border);
}

.section-head {
    max-width: var(--ohe-measure);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* When the head contains a trailing element of its own (the requirements
   "short version" callout), collapse the two margins into one. */
.section-head > :last-child:last-child {
    margin-bottom: 0;
}

.section-head-centered {
    margin-inline: auto;
    text-align: center;
}

/* Long-form pages (privacy) run wider than a marketing lede. */
.section-head-wide {
    max-width: 74ch;
}

/* Body copy for long-form legal / help pages. */
.prose {
    max-width: 74ch;
}

.prose h2 {
    font-size: 1.5rem;
}

.prose p {
    font-size: 1.0125rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ohe-orange);
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ohe-orange), transparent);
}

.section-head-centered .eyebrow::before {
    display: none;
}

.section-title {
    margin-bottom: 1rem;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

.section-lede {
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.175rem);
    color: var(--ohe-text-muted);
}

/* Gradient text styling lives in the @supports block near the top of the file,
   which also provides the solid-colour fallback. */

/* Screenshot frames ------------------------------------------------------- */

.shot {
    position: relative;
    display: block;
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius);
    overflow: hidden;
    background: var(--ohe-surface);
    box-shadow: var(--ohe-shadow);
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Every .shot is the interactive element itself (an <a> or a <figure>), so a
   plain hover is enough — no need for a modifier class. */
.shot:hover img {
    transform: scale(1.03);
}

.shot-caption {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    max-width: min(30ch, calc(100% - 1.8rem));
    padding: 0.4rem 0.8rem;
    background: rgba(7, 11, 20, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--ohe-border);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ohe-text-muted);
}

.shot-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 60px -20px rgba(127, 212, 255, 0.35);
}

/* Feature lists ----------------------------------------------------------- */

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

.feature-list li {
    position: relative;
    padding-left: 2.1rem;
    color: var(--ohe-text-muted);
    font-size: 0.975rem;
    line-height: 1.6;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background:
        linear-gradient(var(--ohe-orange), var(--ohe-orange-deep)) padding-box,
        var(--ohe-border-strong) border-box;
    box-shadow: 0 0 0 1px rgba(247, 148, 29, 0.25);
}

.feature-list li::after {
    content: "";
    position: absolute;
    left: 0.36rem;
    top: 0.72em;
    width: 0.42rem;
    height: 0.22rem;
    border-left: 2px solid #14100a;
    border-bottom: 2px solid #14100a;
    transform: rotate(-45deg);
}

.feature-list strong {
    color: #fff;
    font-weight: 600;
}

/* Stat / fact pills ------------------------------------------------------- */

.fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.fact {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    background: rgba(127, 212, 255, 0.06);
    border: 1px solid var(--ohe-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ohe-text-muted);
}

.fact::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ohe-ice);
    box-shadow: 0 0 8px rgba(127, 212, 255, 0.8);
}

/* Callout icon, used by the pending-checkout notice. */

.callout-icon {
    flex: none;
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Cards ------------------------------------------------------------------- */

.card-panel {
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius);
    box-shadow: var(--ohe-shadow);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.card-panel:hover {
    border-color: var(--ohe-border-strong);
    transform: translateY(-3px);
}

.card-title {
    margin-bottom: 0.6rem;
    font-size: 1.5rem;
}

/* Heading size variants, so pages never need an inline style attribute. */
.card-title-lg {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.mode-name-card {
    font-size: 1.7rem;
}

.section-title-md {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.card-body-copy {
    font-size: 0.975rem;
    margin-bottom: 0;
}

/* ------------------------------------------------ 5. landing sections --- */

/* Hero -------------------------------------------------------------------- */

.hero {
    position: relative;
    padding-top: clamp(3.5rem, 8vw, 6.5rem);
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
    overflow: hidden;
    background:
        radial-gradient(1200px 520px at 78% 8%, rgba(59, 142, 240, 0.16), transparent 65%),
        radial-gradient(900px 420px at 12% 92%, rgba(247, 148, 29, 0.11), transparent 70%),
        linear-gradient(180deg, #0a1120, var(--ohe-bg) 70%);
}

/* Faint ice-rink markings behind the hero. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(127, 212, 255, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(127, 212, 255, 0.055) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, #000 20%, transparent 75%);
}

.hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: min(900px, 90%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--ohe-orange), transparent);
    opacity: 0.6;
}

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

.hero-edition {
    width: clamp(230px, 34vw, 360px);
    height: auto;
    margin-bottom: 1.75rem;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.hero-title {
    margin-bottom: 1.35rem;
    font-size: clamp(2.6rem, 6.4vw, 4.6rem);
    line-height: 0.98;
}

.hero-lede {
    max-width: 54ch;
    margin-bottom: 2.25rem;
    font-size: clamp(1.05rem, 1.9vw, 1.25rem);
    color: var(--ohe-text-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 2.25rem;
}

.hero-facts {
    margin: 0;
}

.hero-shot {
    box-shadow: var(--ohe-glow-ice), var(--ohe-shadow);
}

/* Stat strip -------------------------------------------------------------- */

.value-strip {
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
    background: var(--ohe-bg-raised);
    border-block: 1px solid var(--ohe-border);
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.stat-value {
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ohe-orange);
}

.stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

/* How it works ------------------------------------------------------------ */

.step-grid {
    counter-reset: step;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-family: "Saira Condensed", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(140deg, var(--ohe-blue), #1f5fb0);
    box-shadow: 0 0 0 5px rgba(59, 142, 240, 0.12);
}

.step-title {
    margin-bottom: 0.5rem;
    font-size: 1.35rem;
}

.step-copy {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Modes ------------------------------------------------------------------- */

.mode-block + .mode-block {
    margin-top: clamp(3.5rem, 7vw, 6rem);
}

.mode-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.mode-name {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.mode-badge {
    padding: 0.3rem 0.8rem;
    background: rgba(127, 212, 255, 0.08);
    border: 1px solid rgba(127, 212, 255, 0.28);
    border-radius: 999px;
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ohe-ice);
    white-space: nowrap;
}

.mode-tagline {
    margin-bottom: 1.5rem;
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 600;
    color: var(--ohe-orange);
}

.mode-copy {
    margin-bottom: 1.75rem;
    font-size: 1.025rem;
}

/* Goalie stance strip ----------------------------------------------------- */

.stance-card {
    height: 100%;
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.stance-card:hover {
    border-color: var(--ohe-orange);
    transform: translateY(-4px);
}

.stance-card img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: top center;
}

.stance-name {
    display: block;
    padding: 0.7rem 0.85rem;
    background: var(--ohe-surface-2);
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ohe-text);
}

/* Split feature rows ------------------------------------------------------ */

/* Two-column media + copy row that collapses to one column on narrow screens.
   The children keep their Bootstrap col-* classes only for mobile widths — the
   grid controls the desktop split, so order-* classes handle the alternation. */
.split-feature {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.split-feature > * {
    width: auto;
    padding-inline: 0;
}

/* Collapse to a single stacked column below the lg breakpoint. */
@media (max-width: 991.98px) {
    .split-feature {
        grid-template-columns: minmax(0, 1fr);
    }
}

.split-media {
    box-shadow: var(--ohe-shadow);
}

.split-feature + .split-feature {
    margin-top: clamp(3.5rem, 7vw, 6rem);
}

/* Requirements ------------------------------------------------------------ */

.req-short {
    display: inline-block;
    margin: 0.25rem 0 0;
    padding: 0.7rem 1.2rem;
    background: rgba(52, 209, 122, 0.08);
    border: 1px solid rgba(52, 209, 122, 0.28);
    border-radius: var(--ohe-radius-sm);
    font-size: 0.95rem;
    color: #b9f2d3;
}

.req-group {
    height: 100%;
    padding: clamp(1.4rem, 2.6vw, 2rem);
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius);
}

.req-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 1.5rem;
}

.req-title::before {
    content: "";
    width: 4px;
    height: 1.4em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--ohe-orange), var(--ohe-orange-deep));
}

.req-summary {
    margin-bottom: 1.4rem;
    font-size: 0.925rem;
    color: var(--ohe-text-dim);
}

.req-table-scroll {
    /* The min/recommended columns cannot shrink below their content width, so
       the table scrolls sideways inside its own box rather than being clipped
       by the page. */
    overflow-x: auto;
    margin-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.req-table {
    width: 100%;
    min-width: 26rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.req-table th,
.req-table td {
    padding: 0.7rem 0.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ohe-border);
}

.req-table thead th {
    padding-bottom: 0.5rem;
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
    border-bottom-color: var(--ohe-border-strong);
    white-space: nowrap;
}

.req-table thead th:first-child {
    padding-left: 0;
}

.req-table tbody th {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.req-table td {
    color: var(--ohe-text-muted);
}

/* The recommended column is the one to buy towards, so give it more contrast
   than the minimum column. These need the .req-table prefix to out-specify
   `.req-table td`. */
.req-table .req-col-min {
    color: var(--ohe-text-muted);
}

.req-table .req-col-rec {
    color: #cfe6ff;
}

.req-bullets {
    padding-left: 1.1rem;
    margin: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--ohe-text-dim);
}

.req-bullets li::marker {
    color: var(--ohe-orange);
}

.req-footnote {
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--ohe-border);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ohe-text-dim);
}

.req-warning {
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    background: rgba(226, 86, 77, 0.09);
    border: 1px solid rgba(226, 86, 77, 0.32);
    border-left: 3px solid var(--ohe-miss);
    border-radius: var(--ohe-radius-sm);
    font-size: 0.9rem;
    color: #f6c9c6;
}

/* Gallery ----------------------------------------------------------------- */

.gallery-item {
    display: block;
    height: 100%;
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
    overflow: hidden;
    background: var(--ohe-surface);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover {
    border-color: var(--ohe-ice);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(127, 212, 255, 0.5);
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-caption {
    display: block;
    padding: 0.65rem 0.85rem;
    background: var(--ohe-surface-2);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ohe-text-muted);
}

/* FAQ --------------------------------------------------------------------- */

.faq-list {
    max-width: 860px;
    margin-inline: auto;
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.faq-item[open] {
    border-color: var(--ohe-border-strong);
    background: var(--ohe-surface-2);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: "Saira Condensed", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}

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

/* The item clips its corners, which would also clip an outward focus ring, so
   pull this one inside the summary's box. */
.faq-item summary:focus-visible {
    outline-offset: -3px;
}

.faq-item summary::after {
    content: "+";
    flex: none;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ohe-orange);
    transition: transform 0.2s ease;
}

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

.faq-answer {
    padding: 0 1.25rem 1.25rem;
    margin: 0;
    font-size: 0.95rem;
    color: var(--ohe-text-muted);
}

/* Final CTA --------------------------------------------------------------- */

.final-cta {
    position: relative;
    padding-block: clamp(4rem, 8vw, 6.5rem);
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(800px 400px at 50% 0%, rgba(247, 148, 29, 0.16), transparent 70%),
        var(--ohe-bg-raised);
    border-top: 1px solid var(--ohe-border);
}

.final-cta-title {
    margin-bottom: 1rem;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
}

.final-cta-lede {
    max-width: 50ch;
    margin: 0 auto 2.25rem;
    font-size: clamp(1rem, 1.7vw, 1.15rem);
}

/* -------------------------------------------------- 6. purchase page --- */

.purchase-hero {
    /* The whitespace between the logo and the checkout box is split evenly:
       the hero's bottom padding and #checkout's top padding each take half of
       --ohe-purchase-gap, and the price block takes the other half as its top
       margin. The buy button therefore sits optically centered between the logo
       and the checkout panel. */
    --ohe-purchase-gap: calc(clamp(2.5rem, 5vw, 4rem) + var(--ohe-section-y));
    padding-block: clamp(3.5rem, 8vw, 6rem) calc(var(--ohe-purchase-gap) / 2);
    text-align: center;
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(59, 142, 240, 0.14), transparent 70%),
        linear-gradient(180deg, #0a1120, var(--ohe-bg) 80%);
}

.purchase-logo {
    width: clamp(210px, 30vw, 300px);
    height: auto;
    margin: 0 auto 2.25rem;
}

/* The h1 wrapper must not inherit heading line-height/weight styling. */
.purchase-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Stacked price block — the amount on its own line, qualifier beneath, so the
   large type never has to share a baseline with a long phrase. The top margin
   matches the whitespace the hero leaves below the Buy button, which keeps the
   price-to-button block centered between the logo and the checkout box. */
.price-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin: calc(var(--ohe-purchase-gap) / 2) 0 0.75rem;
    font-family: "Saira Condensed", sans-serif;
    line-height: 1;
}

.price-amount {
    font-size: clamp(3.2rem, 9vw, 5.25rem);
    font-weight: 700;
    color: #fff;
}

.price-suffix {
    font-family: "Inter", sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

.price-note {
    margin: 0 0 2.25rem;
    font-size: 0.9375rem;
    color: var(--ohe-text-dim);
}

/* The other half of the hero's split gap (see .purchase-hero), so the checkout
   panel sits the same distance below the Buy button as the logo sits above it.
   --ohe-purchase-gap is declared on the hero, so restate its value here. */
#checkout {
    --ohe-purchase-gap: calc(clamp(2.5rem, 5vw, 4rem) + var(--ohe-section-y));
    padding-block: calc(var(--ohe-purchase-gap) / 2) var(--ohe-section-y);
}

.checkout-panel {
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius);
    box-shadow: var(--ohe-shadow);
    text-align: left;
}

.checkout-pending {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    background: rgba(127, 212, 255, 0.07);
    border: 1px solid rgba(127, 212, 255, 0.26);
    border-radius: var(--ohe-radius-sm);
}

.checkout-pending p {
    margin: 0;
    font-size: 0.925rem;
    color: var(--ohe-text);
}

.checkout-pending strong {
    color: var(--ohe-ice);
}

/* The hosted-checkout Buy form and its reassurance line. */
.checkout-buy {
    margin-bottom: 0.25rem;
}

.checkout-note {
    margin: 0.9rem 0 1.5rem;
    font-size: 0.85rem;
    color: var(--ohe-text-dim);
}

/* Helper text directly under the buyer-email field — the checkout-note treatment
   without its spacing, since it sits inside the form, not after it. */
.checkout-help {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--ohe-text-dim);
}

/* -------------------------------- 7b. thank-you (purchase result) --- */

/* The big, centered license key on the thank-you page — the account page's key
   treatment scaled up to "this is why you're here". The copy button arrives via
   site.js like every other .key-value. */
.key-value-hero {
    font-size: clamp(1.05rem, 3.6vw, 1.6rem);
    letter-spacing: 0.1em;
    padding: 1rem 1.3rem;
}

.thankyou-center .key-line {
    justify-content: center;
}

.thankyou-steps {
    margin: 0;
    padding-left: 1.2rem;
}

.thankyou-steps li + li {
    margin-top: 0.45rem;
}

.finalizing-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    background: rgba(127, 212, 255, 0.07);
    border: 1px solid rgba(127, 212, 255, 0.26);
    border-radius: var(--ohe-radius-sm);
}

.finalizing-panel p {
    margin: 0;
    font-size: 0.925rem;
}

/* -------------------------------------- 7. account (auth, keys) --- */

/* Sign-in, code entry, and the dev seed page share the centered auth panel —
   the same surface language as the checkout panel, a touch narrower. */
.auth-section {
    padding-block: clamp(4rem, 9vw, 6.5rem);
}

.auth-panel {
    max-width: 540px;
    margin-inline: auto;
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius);
    box-shadow: var(--ohe-shadow);
    text-align: left;
}

.auth-title {
    margin-bottom: 0.6rem;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

.auth-lede {
    margin-bottom: 1.5rem;
    font-size: 0.975rem;
}

.auth-footnote {
    margin: 1.6rem 0 0;
    font-size: 0.85rem;
    color: var(--ohe-text-dim);
}

.auth-footnote code {
    color: var(--ohe-text-muted);
}

/* Bootstrap dark theme styles the form controls themselves; the site adds the
   brand focus ring, label treatment, and code-input emphasis. */
.auth-form .form-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

.auth-form .form-control:focus {
    border-color: var(--ohe-ice);
    box-shadow: 0 0 0 0.2rem rgba(127, 212, 255, 0.18);
}

.auth-form .form-check-label {
    font-size: 0.9rem;
    color: var(--ohe-text-muted);
}

.form-control-code {
    font-size: 1.3rem;
    letter-spacing: 0.35em;
    text-align: center;
}

.auth-form-separator {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ohe-border);
}

.auth-resend {
    margin-top: 1.1rem;
    text-align: center;
}

/* Field-level and model-level validation, and status feedback. The empty
   (valid) summary is hidden so it never renders as a blank red box. */
.auth-field-error {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--ohe-miss);
}

.auth-alert {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.05rem;
    background: rgba(226, 86, 77, 0.08);
    border: 1px solid rgba(226, 86, 77, 0.35);
    border-radius: var(--ohe-radius-sm);
    color: #ffd9d6;
    font-size: 0.925rem;
}

.auth-alert:empty,
.validation-summary-valid {
    display: none;
}

.auth-alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-alert li + li {
    margin-top: 0.35rem;
}

.auth-alert-info {
    background: rgba(127, 212, 255, 0.07);
    border-color: rgba(127, 212, 255, 0.26);
    color: var(--ohe-text);
}

/* The signed-in account pages are wider than the auth panel. */
.account-wrap {
    max-width: 760px;
    margin-inline: auto;
}

.account-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.account-head .auth-title {
    margin-bottom: 0.25rem;
}

.account-meta p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.account-meta-label {
    display: inline-block;
    min-width: 9.5rem;
    margin-right: 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

.account-meta-dim {
    color: var(--ohe-text-dim);
}

.account-meta-link {
    margin-left: 0.75rem;
    font-size: 0.85rem;
    color: var(--ohe-ice);
}

.account-meta-link:hover {
    color: var(--ohe-orange-bright);
}

.account-current {
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.9rem;
    background: rgba(7, 11, 20, 0.55);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
    font-size: 0.95rem;
}

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

.account-keys {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* Key cards are documents, not links — no hover lift. */
.key-card,
.key-card:hover {
    border-color: var(--ohe-border);
    transform: none;
}

.key-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.key-purchased {
    font-size: 0.8rem;
    color: var(--ohe-text-dim);
}

.key-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.key-value {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    letter-spacing: 0.06em;
    color: var(--ohe-ice);
    background: rgba(7, 11, 20, 0.65);
    border: 1px solid var(--ohe-border-strong);
    border-radius: var(--ohe-radius-sm);
    padding: 0.55rem 0.9rem;
    /* One click selects the whole key — it exists to be copied. */
    user-select: all;
    -webkit-user-select: all;
    /* The releases page's GET → JSON preview is one long space-free run —
       anywhere lets it wrap inside the card instead of spilling past its edge
       (it also shrinks the flex-item minimum that .key-line would keep wide). */
    overflow-wrap: anywhere;
    min-width: 0;
}

.key-value-revoked {
    color: var(--ohe-text-dim);
    text-decoration: line-through;
    border-style: dashed;
}

/* One recovery code chip on the account page — same family as .key-value,
   sized for the ten-code grid rather than a single long key. */
.recovery-code {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    letter-spacing: 0.06em;
    color: var(--ohe-ice);
    background: rgba(7, 11, 20, 0.65);
    border: 1px solid var(--ohe-border-strong);
    border-radius: var(--ohe-radius-sm);
    padding: 0.35rem 0.55rem;
    display: inline-block;
    user-select: all;
    -webkit-user-select: all;
}

.key-help {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--ohe-text-dim);
}

.key-help-revoked {
    color: var(--ohe-miss);
}

/* Copy buttons are injected by site.js only — no-JS visitors never see a
   dead button; the key text above stays selectable regardless. */
.copy-btn.is-copied {
    border-color: var(--ohe-ice);
    color: var(--ohe-ice);
}

.seed-outcome li + li {
    margin-top: 0.35rem;
}

/* ------------------------------------ 8. support page + dashboard --- */

/* The public /Support page shares the auth-panel surface for its form, with a
   wider two-column layout: form on the left, expectations on the right. */

.support-section {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.support-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.support-confirm {
    margin-inline: auto;
    text-align: center;
}

.support-confirm .btn {
    margin-top: 0.5rem;
}

.support-categories {
    display: grid;
    gap: 0.5rem;
}

.support-category {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.support-category:hover {
    border-color: var(--ohe-border-strong);
}

.support-category input {
    flex: none;
    margin-top: 0.3rem;
    accent-color: var(--ohe-orange);
}

.support-category:has(input:checked) {
    border-color: rgba(127, 212, 255, 0.5);
    background: rgba(127, 212, 255, 0.07);
}

.support-category-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.support-category-copy strong {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.support-category-copy span {
    font-size: 0.85rem;
    color: var(--ohe-text-dim);
    line-height: 1.45;
}

/* Honeypot: present in the DOM for bots, invisible to everyone else. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.support-aside .card-title {
    font-size: 1.25rem;
}

.support-selfserve {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--ohe-border);
}

.support-selfserve-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ohe-ice);
}

.support-selfserve-link:hover {
    color: var(--ohe-orange-bright);
}

/* Staff dashboard --------------------------------------------------------- */

.dash-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    min-height: var(--ohe-nav-height);
    padding-block: 0.65rem;
}

.dash-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.dash-brand-logo {
    width: 132px;
    height: auto;
}

.dash-brand-label {
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ohe-orange);
    border-left: 1px solid var(--ohe-border-strong);
    padding-left: 0.6rem;
}

.dash-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.dash-link {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    color: var(--ohe-text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.18s ease, background 0.18s ease;
}

.dash-link:hover {
    color: #fff;
}

.dash-link.is-active {
    color: #fff;
    background: rgba(127, 212, 255, 0.1);
}

.dash-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0.55rem;
}

.dash-useremail {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--ohe-text-dim);
}

.dash-shell {
    padding-block: clamp(2rem, 5vw, 3.25rem) var(--ohe-section-y);
    min-height: 60vh;
}

.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.dash-head .eyebrow {
    margin-bottom: 0.4rem;
}

.dash-title {
    margin: 0;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

.dash-title-subject {
    overflow-wrap: break-word;
}

.dash-new-ticket {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ohe-ice);
}

.dash-new-ticket:hover {
    color: var(--ohe-orange-bright);
}

.dash-head-actions {
    display: inline-flex;
    align-items: baseline;
    gap: 1.25rem;
}

.dash-back {
    margin-bottom: 1rem;
}

.dash-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.dash-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--ohe-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ohe-text-muted);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dash-tab:hover {
    color: #fff;
    border-color: var(--ohe-border-strong);
}

.dash-tab.is-active {
    color: #14100a;
    background: linear-gradient(135deg, var(--ohe-orange-bright), var(--ohe-orange-deep));
    border-color: transparent;
}

.dash-tab-count {
    font-size: 0.75rem;
    opacity: 0.75;
}

.dash-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.dash-toolbar .form-control,
.dash-toolbar .form-select,
.dash-range-form .form-control,
.dash-status-select,
.dash-row-select {
    background-color: var(--ohe-bg-raised);
    border-color: var(--ohe-border-strong);
    color: var(--ohe-text);
}

.dash-toolbar .form-control:focus,
.dash-toolbar .form-select:focus,
.dash-range-form .form-control:focus,
.dash-status-select:focus,
.dash-row-select:focus {
    border-color: var(--ohe-ice);
    box-shadow: 0 0 0 0.2rem rgba(127, 212, 255, 0.18);
}

.dash-search {
    flex: 1 1 16rem;
    max-width: 26rem;
}

.dash-category {
    width: auto;
    min-width: 12rem;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dash-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.dash-table th,
.dash-table td {
    padding: 0.75rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ohe-border);
}

.dash-table thead th {
    padding-bottom: 0.5rem;
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
    border-bottom-color: var(--ohe-border-strong);
    white-space: nowrap;
}

.dash-table tbody tr:hover {
    background: rgba(127, 212, 255, 0.025);
}

/* The roster row whose key is open in the lookup above it (Keys page). */
.dash-table tbody tr.is-current {
    background: rgba(127, 212, 255, 0.07);
}

/* Panel tables (Analytics page's cards): few short columns, so they shrink to their
   container instead of demanding the full-width table's 40rem. The .table-scroll
   wrapper stays around them as narrow-screen insurance. */
.dash-table-fit {
    min-width: 0;
}

/* The key roster card sits under the two-column lookup grid — space it like the
   grid's own column gap, so the page keeps one vertical rhythm. */
.key-roster {
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.dash-col-id {
    white-space: nowrap;
}

.dash-id-link,
.dash-subject-link {
    color: var(--ohe-ice);
    font-weight: 600;
}

.dash-id-link {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.85rem;
}

.dash-id-link:hover,
.dash-subject-link:hover {
    color: var(--ohe-orange-bright);
}

.dash-subject-link {
    overflow-wrap: anywhere;
}

.dash-note-count {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--ohe-border);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--ohe-text-dim);
    white-space: nowrap;
}

.dash-requester {
    display: block;
    color: var(--ohe-text);
}

.dash-requester-email {
    display: block;
    font-size: 0.8rem;
    color: var(--ohe-text-dim);
    overflow-wrap: anywhere;
}

.dash-time {
    font-size: 0.78rem;
    color: var(--ohe-text-dim);
}

.dash-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--ohe-text-dim);
}

.dash-pagination-controls {
    display: inline-flex;
    gap: 0.5rem;
}

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

/* Status / access pills */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--ohe-border-strong);
    border-radius: 999px;
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill-new {
    color: var(--ohe-ice);
    background: rgba(127, 212, 255, 0.09);
    border-color: rgba(127, 212, 255, 0.32);
}

.pill-inprogress {
    color: var(--ohe-orange-bright);
    background: rgba(247, 148, 29, 0.1);
    border-color: rgba(247, 148, 29, 0.34);
}

.pill-resolved {
    color: #b9f2d3;
    background: rgba(52, 209, 122, 0.09);
    border-color: rgba(52, 209, 122, 0.3);
}

.pill-closed {
    color: var(--ohe-text-dim);
    background: rgba(116, 136, 164, 0.08);
    border-color: rgba(116, 136, 164, 0.3);
}

.pill-refunded {
    color: #ffb3ad;
    background: rgba(226, 86, 77, 0.1);
    border-color: rgba(226, 86, 77, 0.32);
}

.pill-internal {
    color: #e8d6ff;
    background: rgba(173, 121, 247, 0.1);
    border-color: rgba(173, 121, 247, 0.32);
}

/* Orders page: revenue tiles */
.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.dash-tile {
    padding: 0.85rem 1rem;
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
}

.dash-tile-label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

.dash-tile-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ohe-text);
}

.dash-tile-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--ohe-text-muted);
}

/* Orders page: revenue window strip (presets + custom date range) */
.dash-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.dash-range-preset {
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--ohe-border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--ohe-text-muted);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.dash-range-preset:hover {
    border-color: var(--ohe-border-strong);
    color: var(--ohe-text);
}

.dash-range-preset.is-active {
    color: var(--ohe-ice);
    border-color: rgba(127, 212, 255, 0.32);
    background: rgba(127, 212, 255, 0.09);
}

.dash-range-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.dash-range-sep {
    color: var(--ohe-text-dim);
}

.dash-date {
    width: 9.5rem;
}

/* Analytics page: the server-rendered SVG trend chart. No chart library, no inline
   script/style — geometry arrives as attributes, only the fills come from here. */
.dash-chart-panel {
    margin-bottom: 1.5rem;
}

.dash-chart {
    padding: 1rem;
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
}

.dash-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart-bar-views {
    fill: var(--ohe-ice);
    opacity: 0.85;
}

.chart-bar-visitors {
    fill: var(--ohe-orange-bright);
}

.chart-axis {
    stroke: var(--ohe-border-strong);
    stroke-width: 1;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--ohe-text-dim);
}

.chart-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.35rem;
    border-radius: 2px;
}

.chart-legend-note {
    margin-left: auto;
}

/* Analytics page: the daily-numbers disclosure under the chart, and the log section. */
.dash-details {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.dash-details summary {
    cursor: pointer;
    color: var(--ohe-text-muted);
}

.dash-details[open] summary {
    margin-bottom: 0.75rem;
}

.dash-log {
    margin-top: 2rem;
}

/* A three-across companion to .dash-grid for the device/browser/OS trio. The doubled
   class beats .dash-grid's own 2-column rule regardless of rule order. */
.dash-grid + .dash-grid {
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.dash-grid.dash-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

@media (max-width: 991.98px) {
    .dash-grid.dash-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Ticket detail / two-card layouts */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

.dash-stack {
    display: grid;
    /* minmax(0, 1fr) stops a wide child (e.g. .dash-table's 40rem min-width,
       which .table-scroll is there to scroll) from sizing this column and
       overlapping the neighbouring one. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
}

.dash-stack > .card-panel,
.dash-stack > .card-panel:hover {
    min-width: 0;
    border-color: var(--ohe-border);
    transform: none;
}

.dash-meta {
    margin: 0 0 0.5rem;
}

.dash-meta-row {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.35rem;
    border-bottom: 1px dashed var(--ohe-border);
}

.dash-meta-row:last-child {
    border-bottom: 0;
}

.dash-meta dt {
    flex: none;
    width: 7.5rem;
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
    padding-top: 0.15rem;
}

.dash-meta dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ohe-text);
    overflow-wrap: anywhere;
}

.dash-meta-link {
    color: var(--ohe-ice);
}

.dash-meta-link:hover {
    color: var(--ohe-orange-bright);
}

.dash-message {
    font-size: 1rem;
    color: var(--ohe-text);
}

.prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dash-help {
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--ohe-text-dim);
}

.dash-inline-form {
    margin: 0;
}

.dash-inline-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dash-status-select {
    flex: 1 1 10rem;
    width: auto;
}

/* Internal notes */
.dash-notes {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.dash-note {
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--ohe-blue);
    background: rgba(7, 11, 20, 0.5);
    border-radius: 0 var(--ohe-radius-sm) var(--ohe-radius-sm) 0;
}

.dash-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    color: var(--ohe-text-dim);
}

.dash-note-author {
    color: var(--ohe-text-muted);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dash-note-body {
    font-size: 0.95rem;
    color: var(--ohe-text);
}

/* Users page row controls */
.dash-row-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.dash-row-form:last-child {
    margin-bottom: 0;
}

.dash-row-select {
    width: auto;
    min-width: 6.5rem;
}

.dash-row-password {
    width: 10rem;
}

.dash-denied-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ---------------------------------------------------------- 9. Error --- */

.error-page {
    padding-block: clamp(4rem, 10vw, 7rem);
    text-align: center;
}

.error-code {
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ohe-orange);
}

.error-lede {
    max-width: 52ch;
    margin-inline: auto;
}

.error-request-id {
    margin-top: 3rem;
    font-size: 0.8125rem;
    color: var(--ohe-text-dim);
}

/* Header scroll state ----------------------------------------------------- */

.site-header.is-scrolled {
    background: rgba(7, 11, 20, 0.94);
    box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.95);
}

/* With the mobile menu open the header grows downward over the page, so the
   translucent background would let content show through the blur. Make it
   opaque for as long as the menu is expanded. */
@media (max-width: 991.98px) {
    .site-header:has(.navbar-collapse.show) {
        background: var(--ohe-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Scroll reveal (progressive enhancement — see js/site.js) ---------------- */

/* Scroll reveal is opt-in: site.js adds .reveal-ready to <html>, and only then
   are elements hidden. Without JS (or if the observer never fires) the content
   stays fully visible rather than stuck at opacity 0. */
.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

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

@media (max-width: 991.98px) {
    .site-navlinks {
        padding-top: 0.75rem;
    }

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

    .site-navlinks .nav-link {
        padding: 0.6rem 0 !important;
        font-size: 1rem;
    }

    .site-navlinks .nav-link::after {
        display: none;
    }

    .site-navbar .btn-cta {
        width: 100%;
        justify-content: center;
    }

    .hero-edition {
        width: min(260px, 62vw);
    }

    .split-feature {
        gap: 2rem;
    }

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

@media (max-width: 767.98px) {
    body {
        font-size: 1rem;
    }

    .navbar-logo,
    .footer-logo {
        width: 152px;
    }

    .hero-title {
        line-height: 1.02;
    }

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

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Keep the two spec columns readable on a phone. */
    .req-table {
        font-size: 0.825rem;
    }

    .req-table th,
    .req-table td {
        padding: 0.6rem 0.35rem;
    }

    .req-table tbody th {
        white-space: normal;
    }
}

/* ---------------------------------------------------------- docs page -- */

.docs-toc {
    margin-bottom: 3rem;
}

.docs-toc-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.35rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-toc-list a {
    color: var(--ohe-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.docs-toc-list a:hover,
.docs-toc-list a:focus-visible {
    color: var(--ohe-orange);
}

.docs-prose h2[id] {
    scroll-margin-top: 6rem;
}

.docs-sub {
    color: var(--ohe-ice);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 600;
}

.docs-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.docs-step .step-num {
    margin-bottom: 0.75rem;
}

.docs-step .step-title {
    margin-bottom: 0.5rem;
}

.docs-step .step-copy {
    margin: 0;
    color: var(--ohe-text-muted);
}

.docs-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--ohe-border);
    border-radius: var(--ohe-radius-sm);
    background: var(--ohe-surface);
}

.docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 640px;
}

.docs-table th,
.docs-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ohe-border);
}

.docs-table thead th {
    color: var(--ohe-orange);
    font-family: "Saira Condensed", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.docs-table tbody th {
    white-space: normal;
}

.docs-table tbody tr:last-child td {
    border-bottom: 0;
}

.docs-table td {
    color: var(--ohe-text-muted);
}

.docs-table td strong {
    color: var(--ohe-text);
}

.docs-faq .faq-item p {
    color: var(--ohe-text-muted);
}

.docs-faq .faq-item a {
    color: var(--ohe-ice);
}

@media (max-width: 767.98px) {
    .shot-caption {
        position: static;
        display: block;
        max-width: none;
        margin: 0.5rem;
        border-radius: 0 0 var(--ohe-radius-sm) var(--ohe-radius-sm);
    }
}

/* ---------------------------------------------- coming soon (teaser) --- */

/* The pre-launch page (WEB__COMINGSOON=true): a single self-contained screen with
   the signup form. The layout hides the marketing chrome, so this block owns the
   brand row, the split hero, and the small legal footer. */

.coming-soon {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
    overflow: hidden;
}

.coming-soon::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 80% 10%, rgba(59, 142, 240, 0.12), transparent 65%),
        radial-gradient(700px 420px at 10% 90%, rgba(247, 148, 29, 0.10), transparent 70%);
}

.coming-soon > .container {
    position: relative;
}

.coming-soon-brand {
    display: inline-flex;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.coming-soon-logo {
    width: clamp(170px, 22vw, 240px);
    height: auto;
}

.coming-soon-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 992px) {
    .coming-soon-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.coming-soon-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.8rem, 6.4vw, 4.8rem);
    line-height: 0.96;
}

.coming-soon-lede {
    max-width: 54ch;
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
}

.coming-soon-facts {
    margin-top: 1.5rem;
}

.coming-soon-signup {
    max-width: 560px;
    margin-top: clamp(1.8rem, 4vw, 2.5rem);
    padding: clamp(1.35rem, 3vw, 2rem);
    background: var(--ohe-surface);
    border: 1px solid var(--ohe-border-strong);
    border-radius: var(--ohe-radius);
    box-shadow: var(--ohe-shadow);
}

.coming-soon-signup-title {
    margin-bottom: 0.5rem;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.coming-soon-signup-lede {
    margin-bottom: 1.25rem;
    font-size: 0.975rem;
}

.coming-soon-signup .form-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

.coming-soon-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.coming-soon-form-row .form-control {
    flex: 1 1 15rem;
    min-width: 0;
}

.coming-soon-form-row .btn {
    flex: 0 0 auto;
}

.coming-soon-signup .form-control:focus {
    border-color: var(--ohe-ice);
    box-shadow: 0 0 0 0.2rem rgba(127, 212, 255, 0.18);
}

.coming-soon-note {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--ohe-text-dim);
}

.coming-soon-note a {
    color: var(--ohe-ice);
}

.coming-soon-media {
    display: grid;
    gap: 1rem;
}

.coming-soon-media .shot {
    margin: 0;
}

.coming-soon-edition {
    margin: 0;
    text-align: right;
    font-family: "Saira Condensed", sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ohe-text-dim);
}

.coming-soon-footer {
    padding-block: 1.4rem;
    background: var(--ohe-bg-raised);
    border-top: 1px solid var(--ohe-border);
}

.coming-soon-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.coming-soon-copyright {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ohe-text-dim);
}

.coming-soon-legal {
    display: flex;
    gap: 1.25rem;
}

.coming-soon-legal a {
    color: var(--ohe-text-muted);
    font-size: 0.82rem;
}

.coming-soon-legal a:hover {
    color: var(--ohe-orange-bright);
}

@media (max-width: 575.98px) {
    .coming-soon-form-row .btn {
        width: 100%;
    }
}

.coming-soon-jump {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ohe-ice);
}

.coming-soon-jump:hover {
    color: var(--ohe-orange-bright);
}

.coming-soon-gallery {
    padding-block: clamp(3rem, 7vw, 6rem);
    background: var(--ohe-bg-raised);
    border-top: 1px solid var(--ohe-border);
}

.coming-soon-gallery .section-head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.coming-soon-gallery-group + .coming-soon-gallery-group {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.coming-soon-gallery-title {
    margin-bottom: 0.35rem;
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}

.coming-soon-gallery-lede {
    max-width: 62ch;
    margin-bottom: 1.25rem;
    font-size: 0.975rem;
    color: var(--ohe-text-muted);
}

.coming-soon-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
}

/* The full-site .gallery-item stretches to its column; in this grid that made the
   image fill the card and clip the caption underneath. Let the caption size the card. */
.coming-soon-gallery-grid .gallery-item {
    height: auto;
}

.coming-soon-gallery-grid .gallery-item img {
    height: auto;
}

@media (min-width: 768px) {
    .coming-soon-gallery-grid.is-four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .coming-soon-gallery-grid.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .coming-soon-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .coming-soon-gallery-grid .gallery-caption {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
    }
}