@charset "UTF-8";
/* GENERATED by scripts/build_css.py from main.css. Do not edit this file:
 * edit the source sheet named in the markers below, then run
 *     python scripts/build_css.py
 */

/* ==== base/fonts.css ==== */
/* Self-hosted web fonts: Inter (body) and Space Grotesk (headings).
 *
 * These are the exact files Google Fonts served to desktop Chrome on
 * 2026-10-05 for the request the pages used to make:
 *   https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800
 *     &family=Space+Grotesk:wght@400;500;600;700&display=swap
 * Both are variable fonts: Google declared each weight separately but pointed
 * them all at one file per alphabet subset, so each subset is one rule here
 * with a weight range. The unicode-range values are Google's, so a browser
 * downloads only the subsets a page's text actually uses, exactly as before.
 *
 * Why not Google's servers: their stylesheet sits on another origin, so the
 * browser had to open connections to two more hosts before it could paint any
 * text. Measured on www, that held first paint back by about 1.3s on mobile.
 *
 * URLs are absolute (bundle.css joins this sheet into another directory) and
 * carry `?v=` so nginx caches them for a year. Replace a font file under a new
 * name or a new `?v=`, never in place.
 *
 * Licence: SIL Open Font License 1.1; see /assets/fonts/*-OFL.txt.
 */

/* Inter, cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-cyrillic-ext.woff2?v=20261005') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Inter, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-cyrillic.woff2?v=20261005') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter, greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-greek-ext.woff2?v=20261005') format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* Inter, greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-greek.woff2?v=20261005') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Inter, vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-vietnamese.woff2?v=20261005') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-latin-ext.woff2?v=20261005') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-v20-latin.woff2?v=20261005') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk, vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-v22-vietnamese.woff2?v=20261005') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Space Grotesk, latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-v22-latin-ext.woff2?v=20261005') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk, latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-v22-latin.woff2?v=20261005') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== base/reset.css ==== */
/* Basic CSS Reset */


/* HTML and Body layout styles from original style.css (lines 3479-3499) */
html {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 90px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; 
}

/* ==== base/tokens-2026.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — 2026 design system
   Custom properties extracted verbatim from the concept prototype's :root
   blocks (concept-src/frontend/{concept,g-platform,g-space,g-viewer,vsp,
   academic}.html). Names are the concept's own — do not rename.

   The concept declares an identical palette on every page; the product pages
   additionally declare --blue-light / --blue-border. This file is the union.
   The concept defines no spacing or type-scale variables (every component
   hard-codes its px values), so none are invented here.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — orange */
  --orange:        #fe6a00;
  --orange-hover:  #e55e00;
  --orange-light:  rgba(254, 106, 0, .09);
  --orange-border: rgba(254, 106, 0, .25);

  /* Brand — blue (cloud / SaaS + stats band) */
  --blue:          #0165a7;
  --blue-light:    rgba(1, 101, 167, .07);
  --blue-border:   rgba(1, 101, 167, .2);

  /* Surfaces */
  --bg:            #eceeef;
  --bg-white:      #ffffff;
  --border:        #d4d4d4;

  /* Text */
  --text:          #595959;
  --text-dark:     #1e1e1e;
  --text-light:    #6e6e6e;  /* WCAG AA on white (#eceeef bg) for body text */

  /* Elevation */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, .06);
  --shadow-md:     0 8px 32px rgba(0, 0, 0, .10);
  --shadow-lg:     0 24px 64px rgba(0, 0, 0, .14);

  /* Type */
  --font-head:     'Space Grotesk', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Shape + motion */
  --radius-sm:     5px;
  --radius-md:     10px;
  --radius-lg:     18px;
  --ease:          cubic-bezier(.4, 0, .2, 1);
}

/* ==== base/base-2026.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   BASE — 2026 design system
   Element defaults, layout primitives (.container, .block) and the global
   accessibility rules shared by every concept page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The reset every concept page opens with */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Neutralise the legacy layout rules that still live in base/reset.css
   (fixed-header offset + flex column). The 2026 pages own their own spacing —
   the hero carries the header offset. Remove together with reset.css in the
   cleanup task. */
html { height: auto; display: block; }
body { height: auto; display: block; padding-top: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }

/* ── LAYOUT PRIMITIVES ───────────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

/* Section shell — every content section is <section class="block …"> */
.block { padding: 96px 0; }

/* ── ACCESSIBILITY ───────────────────────────────────────────────────────── */
/* Visible keyboard focus ring for every interactive element */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Respect users who prefer reduced motion: kill the looping/auto animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .container { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 720px) {
  .block { padding: 64px 0; }
}
@media (max-width: 420px) {
  .container { padding-left: 18px; padding-right: 18px; }
}

/* ==== download-modals.css ==== */
/* Download Modal Styles */

/* Base modal styles */
.login-prompt,
.download-confirmation-modal,
.os-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    contain: layout style paint;
    will-change: opacity;
}

/* Modal content containers */
.login-prompt-content,
.download-confirmation-modal .modal-content,
.os-selection-modal .modal-content {
    background: white;
    border-radius: 8px;
    margin: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

.login-prompt-content {
    padding: 30px;
    text-align: center;
    max-width: 400px;
}

.download-confirmation-modal .modal-content {
    max-width: 600px;
}

.os-selection-modal .modal-content {
    max-width: 500px;
}

/* Modal headers */
.modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
}

/* Modal body */
.modal-body {
    padding: 20px;
}

/* Close button */
.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: #333;
}

/* Login prompt specific styles */
.login-prompt-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

/* OS info section */
.os-info {
    margin-bottom: 20px;
}

.os-info p {
    margin: 10px 0;
}

/* OS buttons container */
.os-buttons {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
}

/* OS selection grid */
.os-selection {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.os-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.os-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.os-btn i {
    font-size: 20px;
}

/* Installation notes */
.installation-notes {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.installation-notes h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

.installation-notes ul {
    margin: 0;
    padding-left: 20px;
}

.installation-notes li {
    margin-bottom: 5px;
}


/* Button styles - ensure consistency with existing theme */
.button__blue,
.button__orange,
.button__transparent {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
}

.button__blue {
    background-color: #007bff;
    color: white;
}

.button__blue:hover {
    background-color: #0056b3;
}

.button__orange {
    background-color: #ff6b35;
    color: white;
    display: flex;
    margin-top: 40px;
    margin-bottom: 40px;
}

.button__orange:hover {
    background-color: #d4542a;
    color: white;
}

.button__orange--gspace {
    font-size: 16px;
    text-transform: uppercase;
    max-width: 700px;
    width: 80%;
}

.button__orange--gviewer {
    margin: 0;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
}


.button__orange--main {
    margin: 0;
    margin-right: 15px;
    display: inline-block;
    padding: 7px 20px;
    font-size: 16px;
}

.button__transparent {
    background-color: transparent;
    color: #007bff;
    border: 1px solid #007bff;
}

.button__transparent:hover {
    background-color: #007bff;
    color: white;
}

/* Loading state */
.button__blue:disabled,
.button__orange:disabled,
.button__transparent:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive design */
@media (max-width: 768px) {
    .login-prompt-content,
    .download-confirmation-modal .modal-content,
    .os-selection-modal .modal-content {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }

    .os-selection {
        flex-direction: column;
        align-items: center;
    }

    .os-btn {
        width: 200px;
        justify-content: center;
    }

    .os-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .login-prompt-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

/* Animation for modal appearance */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content,
.login-prompt-content {
    animation: modalFadeIn 0.3s ease-out;
    will-change: transform, opacity;
    contain: layout style paint;
}

/* Download Progress Indicator Styles */
.download-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.download-progress-content {
    background: white;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    max-width: 400px;
    animation: modalFadeIn 0.3s ease-out;
}

.circular-progress {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    stroke-dasharray: 326.56; /* 2 * PI * 52 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.3s ease;
    animation: progressRotate 2s linear infinite;
    will-change: stroke-dashoffset;
}

@keyframes progressRotate {
    0% {
        stroke-dashoffset: 326.56;
    }
    50% {
        stroke-dashoffset: 163.28;
    }
    100% {
        stroke-dashoffset: 326.56;
    }
}

.progress-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #007bff;
    animation: downloadPulse 2s ease-in-out infinite;
}

@keyframes downloadPulse {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

.progress-title {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 20px;
}

.progress-message {
    margin: 0 0 5px 0;
    color: #666;
    font-size: 14px;
}

.progress-software-name {
    margin: 5px 0 0 0;
    color: #007bff;
    font-weight: 600;
    font-size: 16px;
}

/* Download complete / fallback state */
.download-complete-icon {
    font-size: 56px;
    color: #28a745;
    margin-bottom: 20px;
    animation: completeFadeIn 0.4s ease-out;
}

@keyframes completeFadeIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

.download-fallback-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    animation: completeFadeIn 0.3s ease-out;
}

.download-fallback-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background-color: #007bff;
    color: #fff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.download-fallback-link:hover {
    background-color: #0056b3;
    color: #fff;
}

.download-fallback-close {
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 16px;
    transition: color 0.2s ease;
}

.download-fallback-close:hover {
    color: #333;
}

/* ==== components/modals.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   MODAL SHELL — 2026 design system
   The dimmed overlay, the centred dialog card and the two-column auth layout
   used by the header's on-demand modals:

     /include/header-modals/auth-modal.html             .modal[data-modal=auth]
     /include/header-modals/forgot-password-modal.html  #forgot-password-modal
     /include/header-modals/linkedin-info-modal.html    #linkedin-info-modal

   Class names are a JS contract and are NOT renamed — main.js toggles
   `.active` on `.modal` / `.overlay`, include.js binds `.js-modal-close`
   inside `.header__modal`, header-loader.js finds `.modal[data-modal="…"]`
   and auth.js binds `.header__modal-container-left button`.

   The two-column rules (`.header__modal*`) used to live in layout/header.css,
   which the 2026 build cannot import: its `.header__*` bar rules collide with
   components/header-2026.css. They are re-expressed here in the 2026 idiom
   (tokens, Space Grotesk, orange accent) instead of being copied.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── OVERLAY ─────────────────────────────────────────────────────────────── */
/* z-index sits above the fixed header (1000) and below the download modals
   (download-modals.css uses 10000/10001). */
.overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 18, 35, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 9000;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
}

/* ── DIALOG CARD ─────────────────────────────────────────────────────────── */
.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.98);
  width: calc(100% - 32px);
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  z-index: 9001;
  padding: 34px 32px;
  text-align: center;
  background: var(--bg-white);
  border: 1px solid var(--border);
  /* Orange top rule — the same signature .hero and .cta carry. */
  border-top: 3px solid var(--orange);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: opacity .28s var(--ease), visibility .28s var(--ease), transform .28s var(--ease);
}

.modal.active,
.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* `display` is forced because the legacy pages ship modals inside containers
   that hide them until the loader runs. */
.modal.active {
  display: block !important;
  transform: translate(-50%, -50%) scale(1);
}

/* ── CLOSE CROSS ─────────────────────────────────────────────────────────── */
.modal__cross {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 18px;
  right: 18px;
  fill: var(--text-light);
  cursor: pointer;
  transition: fill .2s var(--ease), transform .2s var(--ease);
  z-index: 3;
}
.modal__cross:hover {
  fill: var(--orange);
  transform: rotate(90deg);
}

/* ── AUTH MODAL: TWO-COLUMN LAYOUT ───────────────────────────────────────── */
/* Wider than the plain dialog and unpadded, so the dark LinkedIn panel can
   bleed to the card edge. */
/* No `overflow: hidden` here: `.modal` above already clips (and scrolls) with
   `overflow-y: auto`, and hidden would swallow a tall sign-up form. */
.header__modal {
  max-width: 820px;
  padding: 0;
}
.header__modal-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
}

/* Left — social sign-in, on the hero's own gradient */
.header__modal-container-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 30px;
  background: linear-gradient(160deg, #0b1220 0%, #0d1830 55%, #0a1426 100%);
}

/* The LinkedIn button — auth.js binds this element by tag, so the selector
   stays `…-left button`. */
.header__modal-container-left button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 240px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: #0077b5;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.header__modal-container-left button:hover {
  background: #026aa1;
  box-shadow: 0 6px 24px rgba(0, 119, 181, .45);
  transform: translateY(-1px);
}
.header__modal-container-left button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Right — the login / sign-up tabs */
.header__modal-container-right {
  padding: 38px 34px;
  text-align: left;
  min-width: 0;
}

/* ── SINGLE-COLUMN MODALS (forgot password, LinkedIn extra info) ─────────── */
/* Both carry `.header__modal` for the JS/close plumbing but hold one form, so
   they take the plain dialog width back instead of the 820px two-column one. */
.header__modal[data-modal="forgot-password"],
.header__modal[data-modal="linkedin-info"] {
  max-width: 460px;
}
.header__modal-container--linkedin-info {
  display: block;
  padding: 38px 34px;
  text-align: left;
}
.linkedin-info-form h3 {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.linkedin-info-form > p {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 22px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .modal { padding: 30px 22px; }
  .header__modal { padding: 0; }
  .header__modal-container { grid-template-columns: 1fr; }
  .header__modal-container-left { padding: 34px 24px 30px; }
  /* Stacked, the cross now sits over the dark panel. */
  .header__modal[data-modal="auth"] .modal__cross { fill: rgba(255, 255, 255, .8); }
  .header__modal[data-modal="auth"] .modal__cross:hover { fill: #fff; }
  .header__modal-container-right { padding: 28px 24px 32px; }
  .header__modal-container--linkedin-info { padding: 32px 24px; }
}

/* ==== components/forms.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   AUTH FORMS — 2026 design system
   The Login / Sign Up tab switcher and the form fields inside the header's
   on-demand modals (see components/modals.css for the dialog shell).

   Class names are a JS contract and are NOT renamed — include.js binds
   `.tab-btn[data-tab]` against `.tab-content` ids, main.js has its own
   `.tab-btn` handler, and auth.js reads `#login .auth-form` /
   `#signup .auth-form` plus every `input[name=…]`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TAB SWITCHER ────────────────────────────────────────────────────────── */
/* Was a bordered 320px box with a 50px margin; inside the 2026 modal the card
   itself is the frame, so the tabs are a plain segmented control. */
.auth-tabs {
  width: 100%;
  font-family: var(--font-body);
}

.tab-buttons {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.tab-btn {
  flex: 1;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.tab-btn:hover { color: var(--orange); }

.tab-btn.active {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 10px rgba(254, 106, 0, .3);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── FORM FIELDS ─────────────────────────────────────────────────────────── */
.auth-form h2 {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 15px;
  text-align: center;
}

.auth-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dark);
  text-align: left;
}

/* Field glyphs: inline SVG (the legacy FontAwesome <i> glyphs cannot render —
   assets/css/vendors/all.min.css is retired by the 2026 build). */
.auth-form label svg {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.auth-form input::placeholder { color: var(--text-light); }
.auth-form input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-light);
}

.auth-form button {
  width: 100%;
  margin-top: 6px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.auth-form button:hover {
  background: var(--orange-hover);
  box-shadow: 0 6px 24px rgba(254, 106, 0, .4);
  transform: translateY(-1px);
}
.auth-form button:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* First name / last name side by side */
.user__name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.user__name label {
  width: auto;
  text-align: left;
}

/* ── FORGOT-PASSWORD LINK ────────────────────────────────────────────────── */
.auth-form__foot {
  margin-top: 14px;
  text-align: center;
}
.forgot-password-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--ease);
}
.forgot-password-link:hover { border-bottom-color: var(--orange); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .auth-tabs { width: 100%; }
  .user__name { grid-template-columns: 1fr; gap: 0; }
}

/* ==== verify/verify.css ==== */
/* Email-verification page (verify.html → /verify.html?token=…), restyled to the
 * 2026 design system in Task 14.
 *
 * Every rule is scoped under the page's own `.verification` wrapper, so the
 * generic names it needs (`.btn`, `.logo`, `.spinner`, `.status-*`) cannot leak
 * into the 2026 components — main.css imports this sheet on every page.
 *
 * The class names and the `#verification-status` / `#verification-content` ids
 * are a JS contract: the page's inline EmailVerification class swaps
 * `.verification-status status-loading` for `status-success` / `status-error`
 * and injects `<h3>`, `<p>` and `.btn` / `.btn--orange` links into them.
 *
 * Task 14 also removed this sheet's `margin-top: -90px`, which compensated for
 * the legacy `body { padding-top: 90px }`. base/base-2026.css sets that padding
 * to 0, so the compensation was lifting the whole page 90px above the viewport.
 * The page now sits under the fixed 2026 header (70px, 60px ≤720px).
 */

.verification {
  position: relative;
  margin-top: 70px;
  padding: 64px 0 84px;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, #0b1220 0%, #0d1830 55%, #0a1426 100%);
}
/* Orange rule along the top edge — the .hero / .cta signature */
.verification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), #ff9240 50%, var(--orange));
}

.verification .verification-container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 42px;
  text-align: center;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.verification .logo {
  margin-bottom: 26px;
}
.verification .logo img {
  width: 190px;
  height: auto;
  max-width: 100%;
}

.verification .verification-container h1 {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-dark);
}

.verification #verification-content p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
}

.verification .verification-status {
  margin: 24px 0 4px;
  padding: 20px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.6;
}

.verification .verification-status h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.verification .status-loading {
  background: var(--blue-light);
  border-color: var(--blue-border);
  color: var(--blue);
}
.verification .status-success {
  background: rgba(56, 142, 60, .08);
  border-color: rgba(56, 142, 60, .28);
  color: #2f7d33;
}
.verification .status-error {
  background: rgba(211, 47, 47, .07);
  border-color: rgba(211, 47, 47, .26);
  color: #c62828;
}

.verification .spinner {
  width: 34px;
  height: 34px;
  margin: 4px auto 14px;
  border: 3px solid rgba(1, 101, 167, .18);
  border-top: 3px solid var(--orange);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .verification .spinner { animation: none; }
}

/* Injected by the page's JS as `class="btn"` / `class="btn btn--orange"`. */
.verification .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 24px 6px 0;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--orange);
  background: transparent;
  border: 1.5px solid var(--orange);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all .22s var(--ease);
}
.verification .btn:hover {
  background: var(--orange-light);
  color: var(--orange);
  text-decoration: none;
}

.verification .btn--orange {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
.verification .btn--orange:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  color: #fff;
  box-shadow: 0 6px 24px rgba(254, 106, 0, .4);
}

@media screen and (max-width: 720px) {
  .verification {
    margin-top: 60px;
    min-height: calc(100vh - 60px);
    padding: 44px 0 60px;
  }
  .verification .verification-container { padding: 32px 24px; }
  .verification .btn { width: 100%; margin: 12px 0 0; }
}

/* ==== reset/reset.css ==== */
/* Password-reset page (reset-password.html → /reset-password.html?token=…),
 * restyled to the 2026 design system in Task 14.
 *
 * Every rule is scoped under the page's own `.reset` wrapper, so the generic
 * names it needs (`.btn`, `.logo`, `.spinner`, `.status-*`, `.error-text`)
 * cannot leak into the 2026 components — main.css imports this sheet on every
 * page.
 *
 * The class names and the `#verify-status` / `#form-container` /
 * `#success-content` / `#reset-form` ids are a JS contract: the page's inline
 * PasswordReset class toggles `style.display` on those three containers and
 * injects `.reset-status status-success` / `status-error` blocks with `<h3>`,
 * `<p>` and `.btn` / `.btn--orange` links.
 *
 * Task 14 also removed this sheet's `margin-top: -90px`, which compensated for
 * the legacy `body { padding-top: 90px }`. base/base-2026.css sets that padding
 * to 0, so the compensation was lifting the whole page 90px above the viewport.
 * The page now sits under the fixed 2026 header (70px, 60px ≤720px).
 */

.reset {
  position: relative;
  margin-top: 70px;
  padding: 64px 0 84px;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, #0b1220 0%, #0d1830 55%, #0a1426 100%);
}
/* Orange rule along the top edge — the .hero / .cta signature */
.reset::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), #ff9240 50%, var(--orange));
}

.reset .reset-container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 42px;
  text-align: center;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Initial state of the three JS-driven containers. Not !important: the page's
   own script sets element.style.display, which has to win. */
.reset .reset-hidden { display: none; }

.reset .logo {
  margin-bottom: 26px;
}
.reset .logo img {
  width: 190px;
  height: auto;
  max-width: 100%;
}

.reset .reset-container h1 {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-dark);
}

.reset #success-content p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
}

.reset .reset-status {
  margin: 24px 0 4px;
  padding: 20px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.6;
}
.reset .reset-status h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.reset .status-loading {
  background: var(--blue-light);
  border-color: var(--blue-border);
  color: var(--blue);
}
.reset .status-success {
  background: rgba(56, 142, 60, .08);
  border-color: rgba(56, 142, 60, .28);
  color: #2f7d33;
}
.reset .status-error {
  background: rgba(211, 47, 47, .07);
  border-color: rgba(211, 47, 47, .26);
  color: #c62828;
}

.reset .spinner {
  width: 34px;
  height: 34px;
  margin: 4px auto 14px;
  border: 3px solid rgba(1, 101, 167, .18);
  border-top: 3px solid var(--orange);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reset .spinner { animation: none; }
}

/* ── THE FORM ────────────────────────────────────────────────────────────── */
.reset .reset-form {
  text-align: left;
  margin-top: 26px;
}
.reset .reset-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.reset .reset-form input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.reset .reset-form input::placeholder { color: var(--text-light); }
.reset .reset-form input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-light);
}
.reset .reset-form button {
  width: 100%;
  margin-top: 6px;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.reset .reset-form button:hover {
  background: var(--orange-hover);
  box-shadow: 0 6px 24px rgba(254, 106, 0, .4);
  transform: translateY(-1px);
}
.reset .reset-form button:disabled {
  background: var(--text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.reset .error-text {
  margin-top: -10px;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c62828;
}

/* Injected by the page's JS as `class="btn"` / `class="btn btn--orange"`. */
.reset .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 24px 6px 0;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--orange);
  background: transparent;
  border: 1.5px solid var(--orange);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all .22s var(--ease);
}
.reset .btn:hover {
  background: var(--orange-light);
  color: var(--orange);
  text-decoration: none;
}
.reset .btn--orange {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
.reset .btn--orange:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  color: #fff;
  box-shadow: 0 6px 24px rgba(254, 106, 0, .4);
}

@media screen and (max-width: 720px) {
  .reset {
    margin-top: 60px;
    min-height: calc(100vh - 60px);
    padding: 44px 0 60px;
  }
  .reset .reset-container { padding: 32px 24px; }
  .reset .btn { width: 100%; margin: 12px 0 0; }
}

/* ==== components/buttons-2026.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — 2026 design system
   .btn + colour variants, identical across every concept page.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  border-radius: var(--radius-sm); transition: all .22s var(--ease);
}
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* Primary */
.btn-orange { background: var(--orange); color: #fff; padding: 13px 28px; }
.btn-orange:hover { background: var(--orange-hover); box-shadow: 0 6px 24px rgba(254,106,0,.4); transform: translateY(-1px); }

/* Outlined — on light surfaces */
.btn-outline { background: transparent; color: var(--orange); border: 1.5px solid var(--orange); padding: 12px 26px; }
.btn-outline:hover { background: var(--orange-light); }

/* Outlined — on dark surfaces (hero, CTA) */
.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); padding: 12px 26px; }
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.10); }
.btn-outline-white2 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); padding: 12px 26px; }
.btn-outline-white2:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Solid white — on the blue/navy bands */
.btn-white { background: #fff; color: var(--blue); padding: 13px 28px; font-weight: 700; }
.btn-white:hover { background: #f0f4f8; box-shadow: 0 6px 24px rgba(0,0,0,.18); transform: translateY(-1px); }
.btn-white svg { stroke: var(--blue); }

/* ==== components/header-2026.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — 2026 design system
   Fixed top bar (logo · nav · Software dropdown · socials · login · CTA ·
   burger) plus the per-page sticky .subnav that product pages sit under it.
   Markup lives in /include/header.html; behaviour in /assets/js/nav-2026.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(236,238,239,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s var(--ease);
}
.header.scrolled { box-shadow: var(--shadow-md); }
.header__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; height: 70px; gap: 32px;
}
.header__logo img { height: 40px; display: block; }

/* ── PRIMARY NAV ─────────────────────────────────────────────────────────── */
.header__nav { flex: 1; display: flex; justify-content: center; }
.header__nav ul { display: flex; list-style: none; gap: 0; }
.header__nav a {
  font-size: 14px; font-weight: 500; color: var(--text);
  text-decoration: none; padding: 8px 13px; border-radius: var(--radius-sm);
  transition: all .18s; white-space: nowrap;
}
.header__nav a:hover { color: var(--orange); background: var(--orange-light); }
.header__nav a.is-current { color: var(--orange); background: var(--orange-light); box-shadow: inset 0 0 0 1px var(--orange-border); }

/* ── RIGHT-HAND CLUSTER ──────────────────────────────────────────────────── */
.header__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header__socials { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.header__socials a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; transition: opacity .2s; }
.header__socials img { width: 30px; height: 30px; border-radius: 50%; }
.header__socials a:hover { opacity: .75; }
.header__login {
  font-size: 14px; font-weight: 600; color: var(--text);
  text-decoration: none; padding: 13px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: all .2s;
}
.header__login:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }

/* ── SOFTWARE DROPDOWN ───────────────────────────────────────────────────── */
.header__dd { position: relative; }
.header__dd > a::after { content: '▾'; font-size: 9px; margin-left: 5px; opacity: .6; }
.header__dd-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.16); padding: 8px; min-width: 240px;
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); z-index: 1200;
}
.header__dd:hover .header__dd-menu,
.header__dd:focus-within .header__dd-menu { opacity: 1; pointer-events: auto; }
/* invisible bridge so the pointer can travel from trigger to menu */
.header__dd-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.header__dd-menu a { display: block; padding: 10px 13px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.header__dd-menu a:hover { background: var(--orange-light); }
.header__dd-menu .dd-name { display: block; font-weight: 700; font-size: 13.5px; color: var(--text-dark); }
.header__dd-menu a:hover .dd-name { color: var(--orange); }
.header__dd-menu .dd-desc { display: block; font-size: 11.5px; color: var(--text-light); margin-top: 1px; }

/* ── BURGER (mobile only) ────────────────────────────────────────────────── */
.header__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0;
}
.header__burger span {
  display: block; width: 18px; height: 2px; margin: 0 auto;
  background: var(--text-dark); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.header.nav-open .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.nav-open .header__burger span:nth-child(2) { opacity: 0; }
.header.nav-open .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header__nav-login { display: none; }  /* shown only inside the mobile menu */

/* ── SUBNAV (per-page section rail, sits directly under the header) ──────── */
.subnav { position: fixed; top: 70px; left: 0; right: 0; z-index: 900; background: var(--bg-white); border-bottom: 1px solid var(--border); }
.subnav__inner { max-width: 1240px; margin: 0 auto; padding: 0 48px; height: 46px; display: flex; align-items: center; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__label { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); white-space: nowrap; padding-right: 16px; border-right: 1px solid var(--border); flex-shrink: 0; }
.subnav__links { display: flex; gap: 2px; }
.subnav__links a { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap; transition: all .18s; }
.subnav__links a:hover { color: var(--orange); background: var(--orange-light); }

/* Anchor targets clear the fixed header + subnav */
section[id] { scroll-margin-top: 132px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .header__inner { padding-left: 28px; padding-right: 28px; }
  .subnav__inner { padding: 0 28px; }
}

@media (max-width: 720px) {
  .header__inner { height: 60px; gap: 12px; }
  .header__burger { display: flex; }
  .header__socials,
  .header__login { display: none; }      /* socials/login move into the menu */
  .header__right { margin-left: auto; }

  /* Nav becomes a dropdown panel under the bar */
  .header__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(236,238,239,.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s var(--ease), opacity .2s var(--ease);
  }
  /* overflow-y:auto (not in the prototype) so the items below the 80vh cap stay
     reachable on short screens — the menu is taller than the cap once the
     Software dropdown renders inline. */
  .header.nav-open .header__nav { max-height: 80vh; opacity: 1; pointer-events: auto; overflow-y: auto; }
  .header__nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
  .header__nav li { width: 100%; }
  .header__nav a { display: block; padding: 13px 28px; border-radius: 0; font-size: 15px; }
  .header__nav-login { display: block; border-top: 1px solid var(--border); margin-top: 6px; }

  /* Dropdown renders inline, always open, inside the burger menu */
  .header__dd-menu {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    box-shadow: none; border: none; border-left: 2px solid var(--border);
    border-radius: 0; padding: 0 0 4px 14px; margin-left: 28px; min-width: 0;
  }
  .header__dd > a::after { content: ''; }

  .subnav { top: 60px; }
  .subnav__inner { padding: 0 18px; height: 44px; }
  section[id] { scroll-margin-top: 120px; }
}

@media (max-width: 420px) {
  .header__inner { padding-left: 18px; padding-right: 18px; }
}

/* ==== components/footer-2026.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — 2026 design system
   Dark footer: brand block (logo · tagline · socials) + link columns, with a
   bottom row for copyright and legal links. Markup: /include/footer.html.

   Reconciliation note: the concept ships two footer shapes — the home page's
   grid (footer__logo / footer__tagline / footer__socials / footer__copy /
   footer__legal) and the product pages' flex row (footer__brand / footer__tag).
   The shared include uses the home shape (the richer of the two); the
   .footer__brand / .footer__tag rules are kept so product-page markup still
   renders correctly.
   ═══════════════════════════════════════════════════════════════════════════ */

.footer { background: #18191c; padding: 70px 0 36px; }

.footer__top {
  display: grid; grid-template-columns: 240px 1fr;
  gap: 80px; margin-bottom: 52px;
  padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Brand block */
.footer__logo img { height: 36px; display: block; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .8; }
.footer__tagline { font-size: 13px; color: rgba(255,255,255,.38); line-height: 1.75; margin-bottom: 22px; }
.footer__brand { max-width: 340px; }
.footer__brand img { height: 34px; filter: brightness(0) invert(1); opacity: .85; margin-bottom: 14px; }
.footer__tag { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.7; }

.footer__socials { display: flex; gap: 8px; }
.footer__soc {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; overflow: hidden;
}
.footer__soc:hover { border-color: var(--orange); background: var(--orange-light); }
.footer__soc img { width: 18px; height: 18px; border-radius: 50%; display: block; }

/* Link columns */
.footer__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer__col-title { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 13px; color: rgba(255,255,255,.35); text-decoration: none; transition: color .2s; }
.footer__col a:hover { color: var(--orange); }

/* Bottom row */
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer__copy { font-size: 12px; color: rgba(255,255,255,.2); line-height: 1.6; }
.footer__legal { display: flex; gap: 18px; }
.footer__legal a { font-size: 12px; color: rgba(255,255,255,.2); text-decoration: none; transition: color .2s; }
.footer__legal a:hover { color: rgba(255,255,255,.5); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__links { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
  .footer__links { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer__legal { justify-content: center; flex-wrap: wrap; }
}

/* ==== components/hero.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   HERO — 2026 design system
   Dark two-column hero (copy + screenshot slideshow) used by every product /
   landing page, plus the blue stats band that sits directly under it.

   Reconciliation note: five of the six concept pages use this dark hero
   (margin-top clears the fixed header + subnav). The home page overrides
   .hero with its own full-viewport light variant — that override belongs in
   the home page's own stylesheet, not here. Pages WITHOUT a .subnav must
   also reset .hero { margin-top: 70px } (60px ≤720px).
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative; margin-top: 116px; padding: 84px 0 90px; overflow: hidden;
  background: linear-gradient(160deg, #0b1220 0%, #0d1830 55%, #0a1426 100%);
}
/* Orange rule along the top edge */
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), #ff9240 50%, var(--orange));
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
/* Copy-only variant — pages with no screenshot column (academic licence,
   pricing). The concept writes the same override inline on those two pages;
   here it is a modifier so the two do not each keep a private copy. */
.hero__inner--narrow { display: block; max-width: 760px; }

/* ── COPY COLUMN ─────────────────────────────────────────────────────────── */
.hero__eyebrow { margin-bottom: 22px; }
.hero__title {
  font-family: var(--font-head); font-size: clamp(34px, 4vw, 54px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.025em;
  color: #fff; margin-bottom: 20px;
}
.hero__title .accent { color: var(--orange); }

/* Product heroes (F-203): the h1 is the plain keyword for machines; the
   kicker carries the display line the h1 used to hold. The variant class
   lives on the section — seo.py's H1 injection matches the h1 tag literally. */
.hero--product .hero__title {
  font-size: 15px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  margin-bottom: 14px;
}
.hero__kicker {
  font-family: var(--font-head); font-size: clamp(34px, 4vw, 54px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.025em;
  color: #fff; margin-bottom: 20px;
}
.hero__kicker .accent { color: var(--orange); }

.hero__desc { font-size: 16.5px; color: rgba(255,255,255,.72); line-height: 1.7; max-width: 560px; margin-bottom: 30px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }

/* Inline mini-stats under the copy */
.hero__mini { display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.hero__mini-item { padding-right: 26px; margin-right: 26px; border-right: 1px solid rgba(255,255,255,.14); }
.hero__mini-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero__mini-num { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--orange); line-height: 1; }
.hero__mini-label { font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; }

/* ── VISUAL COLUMN (screenshot slideshow) ────────────────────────────────── */
.hero__visual { position: relative; }
.hero__screen {
  position: relative; aspect-ratio: 7/5; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 -3px 0 var(--orange), 0 40px 90px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1);
}
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 7px; justify-content: center; z-index: 3; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.hero__dot.is-active { background: var(--orange); transform: scale(1.3); }

/* Floating fact chip pinned to the screenshot */
.hero__chip { position: absolute; bottom: -18px; left: -22px; background: rgba(255,255,255,.97); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 16px; box-shadow: var(--shadow-lg); }
.hero__chip-label { font-size: 9px; color: var(--text-light); text-transform: uppercase; letter-spacing: .12em; }
.hero__chip-val { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text-dark); }
.hero__chip-val span { color: var(--orange); }

/* ── STATS BAND ──────────────────────────────────────────────────────────── */
.stats { background: var(--blue); }
.stats__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat-item { padding: 38px 18px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--orange); line-height: 1.05; margin-bottom: 8px; }
.stat-label { font-size: 11px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none !important; }
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { order: -1; }
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat-item:nth-child(3n) { border-right: none; }
}

@media (max-width: 720px) {
  .hero { margin-top: 104px; }
  .hero__actions .btn { flex: 1; justify-content: center; }
  .hero__mini { flex-wrap: wrap; gap: 14px 0; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2n) { border-right: none; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; }
}

/* ==== components/section-head.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   SECTION FURNITURE — 2026 design system
   The eyebrow / title / description block that opens every section, the
   full-width intro band, and the label + logos strip.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EYEBROW ─────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange); white-space: nowrap;
}
.eyebrow-line { width: 24px; height: 2px; background: var(--orange); border-radius: 2px; flex-shrink: 0; }
.eyebrow--blue { color: var(--blue); }
.eyebrow--blue .eyebrow-line { background: var(--blue); }
.eyebrow--white { color: rgba(255,255,255,.7); }
.eyebrow--white .eyebrow-line { background: rgba(255,255,255,.4); }

/* ── SECTION HEAD ────────────────────────────────────────────────────────── */
.section-head { text-align: center; margin-bottom: 52px; }
.section-head .eyebrow { display: inline-flex; margin-bottom: 16px; }
.section-title {
  font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  color: var(--text-dark);
}
.section-title span { color: var(--orange); }
/* Blue accent word. Two spellings ship in the concept prototype — the product
   pages write `class="section-title blue"`, the home page the BEM modifier —
   so the component answers to both (promoted here from pages/home.css). */
.section-title.blue span,
.section-title--blue span { color: var(--blue); }
.section-desc { font-size: 16px; color: var(--text); line-height: 1.75; max-width: 660px; margin: 16px auto 0; }

/* ── INTRO BAND ──────────────────────────────────────────────────────────── */
.intro { background: var(--bg-white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.intro__text { max-width: 900px; margin: 0 auto; text-align: center; font-size: 16.5px; line-height: 1.85; color: var(--text); }
.intro__text strong { color: var(--text-dark); font-weight: 600; }
/* The band takes either a single run of text or several paragraphs. */
.intro__text p + p { margin-top: 18px; }

/* ── LABELLED STRIP (client types / partner universities) ────────────────── */
.strip { background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 26px 0; }
.strip__inner { max-width: 1240px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.strip__label { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-light); white-space: nowrap; }
.strip__sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
.strip__logos { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.strip__logo { font-family: var(--font-head); font-size: 12px; font-weight: 700; color: #9aa0a6; letter-spacing: .05em; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .strip__inner { padding-left: 28px; padding-right: 28px; }
}
/* `.eyebrow` above is white-space:nowrap, which is right for the short section
   eyebrows but not for the long hero one ("Geophysical Software Solutions &
   Services", "Seismic Data Processing & Imaging Software"): at 390px those are
   ~390px wide inside ~354px of space and push the whole hero grid column past
   the right edge. Fixed at the root here, for every page that has a hero —
   pages/home.css and pages/product.css each used to carry a private copy. */
@media (max-width: 720px) {
  .hero__eyebrow { white-space: normal; }
}
@media (max-width: 420px) {
  .strip__inner { padding-left: 18px; padding-right: 18px; flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ==== components/mod-cards.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   CARD GRIDS — 2026 design system
   Three card families shared by the product / landing pages:
     .mod   — module cards (image strip + numbered title + feature list)
     .diff  — differentiator cards (icon + title + copy)
     .fam   — product-family cards (image + tag + title + explore link)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MODULE CARDS ────────────────────────────────────────────────────────── */
.modules__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.mod {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0 30px 30px;
  position: relative; overflow: hidden;
  transition: all .28s var(--ease);
  display: flex; flex-direction: column;
}
.mod:hover { border-color: var(--orange); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.mod::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease); z-index: 2;
}
.mod:hover::before { transform: scaleX(1); }

/* Media bleeds to the card edges at the top */
.mod__media { margin: 0 -30px 22px; height: 158px; flex-shrink: 0; overflow: hidden; background: #0d1117; border-bottom: 1px solid var(--border); }
.mod__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s var(--ease); }
.mod:hover .mod__media img { transform: scale(1.04); }

.mod__num { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--orange); margin-bottom: 8px; }
.mod__name { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; line-height: 1.2; }
.mod__tagline { font-size: 13px; font-weight: 600; color: var(--orange); margin-bottom: 14px; }
.mod__desc { font-size: 13.5px; color: var(--text); line-height: 1.7; margin-bottom: 18px; }
.mod__features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.mod__features li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.mod__features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 6px; }

/* Full-width card */
.mod--wide { grid-column: 1 / -1; }
.mod--wide .mod__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }

/* Dark "common platform" card */
.mod--platform { background: linear-gradient(135deg, #0d1830, #0a1426); border-color: #0a1426; }
.mod--platform .mod__name { color: #fff; }
.mod--platform .mod__desc { color: rgba(255,255,255,.72); }
.mod--platform .mod__features li { color: rgba(255,255,255,.8); }
.mod--platform .mod__num,
.mod--platform .mod__tagline { color: #ff9240; }
.mod--platform .mod__features li::before { background: #ff9240; }
.mod--platform .mod__media { border-bottom-color: rgba(255,255,255,.1); }

/* ── DIFFERENTIATOR CARDS ────────────────────────────────────────────────── */
.diff__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Three-up variant for sets that divide by three (g-Space ships nine cards; on
   the four-up default the ninth sits alone with three empty columns beside it).
   Declared before the responsive block below so 980px/720px still narrow it. */
.diff__grid--3 { grid-template-columns: repeat(3, 1fr); }
.diff { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; transition: all .25s var(--ease); }
.diff:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.diff__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--orange-light); border: 1px solid var(--orange-border); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.diff__icon svg { width: 19px; height: 19px; stroke: var(--orange); fill: none; stroke-width: 1.6; }
.diff__t { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 7px; line-height: 1.25; }
.diff__d { font-size: 12.5px; color: var(--text); line-height: 1.6; }

/* ── PRODUCT-FAMILY CARDS ────────────────────────────────────────────────── */
.family { background: var(--bg-white); }
.family__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Two-up variant for pages that cross-link only two siblings (the VSP page
   points at g-Platform and g-Viewer). On the three-up default the pair leaves
   an empty third column; the concept narrows the rail instead. Declared before
   the responsive block below so 980px/720px still narrow it. */
.family__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
.fam {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px;
  overflow: hidden; background: var(--bg-white); position: relative;
  display: flex; flex-direction: column; transition: all .25s var(--ease);
}
.fam:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.fam__media { margin: -26px -24px 18px; height: 132px; flex-shrink: 0; overflow: hidden; background: #0d1117; border-bottom: 1px solid var(--border); }
.fam__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s var(--ease); }
.fam:hover .fam__media img { transform: scale(1.04); }
.fam--current { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange-border); }
.fam__tag { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--orange); padding: 3px 9px; border-radius: 100px; display: inline-block; margin-bottom: 12px; align-self: flex-start; }
.fam--free .fam__tag { background: var(--blue); }
.fam__name { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.fam__d { font-size: 13px; color: var(--text); line-height: 1.65; }
/* Explore link stretches over the whole card */
.fam__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; margin-top: auto; padding-top: 12px; flex-shrink: 0; transition: gap .18s; }
.fam__link:hover { gap: 9px; }
.fam__link::after { content: ''; position: absolute; inset: 0; }
.fam__link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; flex-shrink: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .modules__grid { grid-template-columns: 1fr; }
  .mod--wide .mod__features { grid-template-columns: 1fr; }
  .diff__grid { grid-template-columns: repeat(2, 1fr); }
  .family__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .diff__grid,
  .family__grid { grid-template-columns: 1fr; }
}

/* ==== components/workflow.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOW RAIL — 2026 design system
   Numbered step cards (.flow__step) laid out on a three-up grid. Steps may
   carry a media strip with a floating number badge (g-Space variant).
   ═══════════════════════════════════════════════════════════════════════════ */

.flow { background: var(--bg-white); }
.flow__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.flow__step {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; position: relative; overflow: hidden; transition: all .25s var(--ease);
}
.flow__step:hover { border-color: var(--orange); background: var(--bg-white); box-shadow: var(--shadow-sm); }
.flow__n { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--orange-border); line-height: 1; margin-bottom: 8px; transition: color .25s; }
.flow__step:hover .flow__n { color: rgba(254,106,0,.4); }
.flow__t { font-weight: 700; font-size: 13.5px; color: var(--text-dark); margin-bottom: 5px; }
.flow__d { font-size: 12px; color: var(--text); line-height: 1.55; }
/* A step's description may carry an inline link (a download, a mail-to). Same
   treatment as .flow__note a below — the concept did it with inline styles. */
.flow__d a { color: var(--orange); font-weight: 600; text-decoration: none; }
.flow__d a:hover { text-decoration: underline; }

/* Optional media strip + badge */
.flow__media { position: relative; margin: -20px -20px 16px; height: 118px; overflow: hidden; background: #0d1117; border-bottom: 1px solid var(--border); }
.flow__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s var(--ease); }
.flow__step:hover .flow__media img { transform: scale(1.05); }
.flow__badge {
  position: absolute; top: 10px; left: 10px; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 14px; background: var(--orange); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Note under the rail */
.flow__note { text-align: center; margin-top: 22px; font-size: 13px; color: var(--text-light); }
.flow__note a { color: var(--orange); font-weight: 600; text-decoration: none; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .flow__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .flow__grid { grid-template-columns: 1fr; }
}

/* ==== components/specs.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   SPECS & PANELS — 2026 design system
   Two-up .split of white .panel cards holding either a chip cloud (formats)
   or a key/value .spec list (system requirements, HPC).
   ═══════════════════════════════════════════════════════════════════════════ */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.panel { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; }
/* A full-width panel stacked under a .split keeps the split's own gutter. */
.split + .panel { margin-top: 24px; }
.panel__t { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.panel__sub { font-size: 12.5px; color: var(--text-light); margin-bottom: 18px; }

/* Chip cloud */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 5px 13px; }
.chip--blue { color: var(--blue); background: var(--blue-light); border-color: var(--blue-border); }

/* Key / value rows */
.spec { display: flex; flex-direction: column; gap: 12px; }
.spec__row { display: flex; gap: 14px; align-items: flex-start; font-size: 13px; color: var(--text); line-height: 1.55; }
.spec__k { flex: 0 0 140px; font-weight: 700; color: var(--text-dark); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
}

/* ==== components/packages.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   PACKAGES / EDITIONS — 2026 design system
   Licence package cards (.pkg) plus the academic note that sits under the
   packages grid on every product page.
   ═══════════════════════════════════════════════════════════════════════════ */

.pkgs { background: var(--bg-white); }
.pkgs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Three-up variant for products licensed as three editions (g-Viewer: free
   trial / Plus / bundled). On the four-up default the three cards leave a
   fourth empty column and read as an incomplete row. Declared before the
   responsive block below so 980px/720px still narrow it. */
.pkgs__grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Two-up variant for the pages that offer a pair (academic: classroom /
   personal student licence; pricing: Standard / Plus). Same reasoning as the
   three-up modifier, and the concept narrows the rail for two cards. */
.pkgs__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }

.pkg {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px;
  display: flex; flex-direction: column; transition: all .25s var(--ease);
}
.pkg:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pkg--full { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange-border); }
.pkg__tag { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; }
.pkg--full .pkg__tag { color: var(--orange); }
.pkg__name { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.pkg__cores { display: inline-block; font-size: 11px; font-weight: 700; color: var(--blue); background: var(--blue-light); border: 1px solid var(--blue-border); border-radius: 100px; padding: 3px 10px; margin-bottom: 14px; align-self: flex-start; }
.pkg__desc { font-size: 13px; color: var(--text); line-height: 1.65; margin-bottom: 16px; }
.pkg__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; transition: gap .18s; margin-top: auto; }
.pkg__link:hover { gap: 9px; }
.pkg__link svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 2.5; }

/* Academic-licence note under the grid */
.acadnote { text-align: center; margin-top: 26px; font-size: 13.5px; color: var(--text); }
.acadnote a { color: var(--orange); font-weight: 700; text-decoration: none; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .pkgs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pkgs__grid { grid-template-columns: 1fr; }
}

/* ==== components/gallery.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY — 2026 design system
   Tabbed screenshot slider: .gallery__tabs switch .gallery__panel, each panel
   cross-fades .gallery__slide items on a fixed 16:10 stage with a caption and
   dot pager.
   ═══════════════════════════════════════════════════════════════════════════ */

.gallery { background: var(--bg); }

/* Tabs */
.gallery__tabs { display: flex; justify-content: center; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 40px; flex-wrap: wrap; }
.gallery__tab {
  padding: 13px 28px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-light);
  background: none; border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; cursor: pointer; transition: color .2s, border-color .2s;
}
.gallery__tab:hover { color: var(--orange); }
.gallery__tab.active { color: var(--orange); border-bottom-color: var(--orange); }

/* Panels + stage.
   Fixed-ratio stage: every slide renders at the SAME size regardless of the
   source image's native aspect ratio, so the frame never jumps between slides. */
.gallery__viewer { max-width: 980px; margin: 0 auto; }
.gallery__panel { display: none; }
.gallery__panel.active { display: block; }
.gallery__stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: #0d1117; box-shadow: 0 20px 64px rgba(0,0,0,.18); }
.gallery__slide { position: absolute; inset: 0; display: none; }
.gallery__slide.active { display: block; }
.gallery__slide picture { display: block; width: 100%; height: 100%; }
.gallery__slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.gallery__slide img.fit-contain { object-fit: contain; }

/* Caption + dots */
.gallery__cap { display: flex; justify-content: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--text); text-align: center; min-height: 20px; }
.gallery__cap strong { color: var(--orange); }
.gallery__dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.gallery__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.gallery__dot.active { background: var(--orange); transform: scale(1.35); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .gallery__tab { padding: 13px 26px; }
}
@media (max-width: 720px) {
  .gallery__tabs { overflow-x: auto; }
  .gallery__tab { padding: 12px 18px; white-space: nowrap; }
}

/* ==== components/compare.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   COMPARE — before / after drag slider (2026 design system)

   The pre-2026 site shipped this interaction as the jQuery `twentytwenty`
   widget (jquery.twentytwenty.js + jquery.event.move.js + a vendored
   stylesheet). The redesign dropped all three and rendered the pairs as static
   side-by-side figures; this component brings the drag interaction back with
   no dependencies, and with the keyboard support the legacy widget never had.

   PROGRESSIVE ENHANCEMENT — nothing here styles the authored markup. The static
   pair (pages/services.css `.svc-compare*`, pages/tech.css `.cmp*`,
   pages/product.css `.topic-detail__fig|__cap`) is the no-JS rendering and is
   left exactly as it is. assets/js/compare-2026.js builds the `.cmp2026`
   subtree at runtime, moves the authored <picture>/<img> and the label TEXT
   into it, and only then do these rules apply. Every class below therefore
   exists solely inside a JS-built widget: no page sheet competes with it.

   Two things are deliberately NOT here, because the JS sets them inline:

     · the stage's border / radius / background — copied from the computed
       style of the pane the pair was authored with, so the widget wears the
       same chrome the static pair did on that page (flush inside a `.mod`
       card teaser, bordered and rounded on a full-width figure);
     · each image's box and object-fit — the fit is decided per slot from the
       two natural aspect ratios, and inline is also the only reliable way to
       out-rank `.mod:hover .mod__media img { transform: scale(1.04) }`.

   The divider position is one custom property, `--cmp-pos`, set on the root:
   the panes clip to it, the rule and the handle sit on it.

   Reinterpreted from the legacy affordances — a circular grab handle with two
   arrows on a hairline rule — in 2026 tokens: orange handle, white rule, navy
   label pills. None of the legacy CSS is copied.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `max-width` is set in script, from the pair's aspect ratio and the height cap
   the widget is allowed to reach; `margin-inline: auto` centres it in the
   container when that cap bites.

   `z-index: 1` is what makes the hub-card teasers usable. A `.mod` card on
   services.html is stretched into one click target by
   `.svc-more::after { position: absolute; inset: 0 }` (pages/services.css),
   which paints over the media strip because it comes later in the DOM; without
   this the divider could only be moved by its handle and every other press on
   the pair navigated away. One layer up, the pair is the widget the legacy hub
   teasers were, and the rest of the card — heading, bullets, "Learn more" —
   is still the link it is everywhere else. Well under the header's 1000 and
   under `.mod__num`'s 2, so nothing else changes. */
.cmp2026 {
  --cmp-pos: 50%;
  --cmp-navy: rgba(10, 18, 35, .78);
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
}

/* ── HOST CARD ───────────────────────────────────────────────────────────── */
/* `.mod:hover` lifts a module card 4px and eases its media image to
   `scale(1.04)` (components/mod-cards.css). On the services hub and the
   case-study grid that card is also what a pair sits in, so moving the cursor
   in to drag the divider slid both frames out from under it at the exact moment
   the reader began comparing them. A before/after read is only honest while the
   two frames occupy the same pixels, so the movement has to go.

   Only the movement, though. compare-2026.js tags the hosting card
   `cmp2026-still` as it builds the widget, and the whole hover affordance is
   kept: the orange border, the raised shadow and the accent rule that sweeps
   across the card's top edge are all paint, and paint tells the reader the card
   is live without shifting a single pixel of the comparison. Cards with no
   widget in them are never tagged and lift exactly as they always did.

   `!important` rather than leaning on import order: `.cmp2026-still:hover` and
   `.mod:hover` are both one class plus one pseudo-class, so with equal
   specificity the winner is decided by this file being @imported below
   mod-cards.css in main.css. That is true today and is far too quiet a thing
   for the widget's correctness to rest on.

   The image rule is belt-and-braces. On services.html the pair really does stay
   inside `.mod__media`, so `.mod:hover .mod__media img` still matches the
   widget's images — but the JS already sets `transform: none` inline on each
   one (see BUILD), and an inline declaration outranks any stylesheet rule that
   is not itself `!important`. So the zoom is already beaten; this rule costs
   one selector and keeps it beaten if either half of that ever changes. */
.cmp2026-still:hover { transform: none !important; }
.cmp2026-still:hover .mod__media img { transform: none !important; }

/* `touch-action: pan-y` keeps a vertical swipe scrolling the page: only a
   mostly-horizontal drag is ours (the JS applies the same rule in script). */
.cmp2026__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* The two panes are stacked, not tiled, and clipped complementarily, so the
   divider is the only seam and each label disappears with its own image. */
.cmp2026__pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cmp2026__pane--before { clip-path: inset(0 calc(100% - var(--cmp-pos)) 0 0); }
.cmp2026__pane--after  { clip-path: inset(0 0 0 var(--cmp-pos)); }

/* ── LABELS ──────────────────────────────────────────────────────────────── */
/* Same pill the static pair uses, moved to the outer edge of its own half so
   the divider never sits on top of it — the legacy widget put Before at the
   left edge and After at the right. The text itself is the page's, verbatim. */
.cmp2026__label {
  position: absolute;
  top: 10px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--cmp-navy);
  padding: 4px 10px;
  border-radius: 100px;
  pointer-events: none;
}
.cmp2026__pane--before .cmp2026__label { left: 10px; }
.cmp2026__pane--after  .cmp2026__label { right: 10px; background: var(--orange); }

/* Below its own width a label would be sliced in half by the clip; it steps
   aside instead. The JS measures the pill and toggles this class. */
.cmp2026__label.is-hidden { opacity: 0; }

/* ── DIVIDER ─────────────────────────────────────────────────────────────── */
.cmp2026__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cmp-pos);
  width: 3px;
  margin-left: -1.5px;
  z-index: 4;
  background: #fff;
  box-shadow: 0 0 10px rgba(10, 18, 35, .55);
  pointer-events: none;
}

/* ── HANDLE ──────────────────────────────────────────────────────────────── */
/* A real <button> so it is focusable and reachable by tab without a tabindex
   of our own; role="slider" (set in script) replaces the button semantics with
   the ones the arrow keys implement. */
.cmp2026__handle {
  position: absolute;
  top: 50%;
  left: var(--cmp-pos);
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  z-index: 5;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: inherit;
  color: #fff;
  background: var(--orange);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 14px rgba(10, 18, 35, .45);
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  /* The handle itself is always a drag, never a scroll. */
  touch-action: none;
}
.cmp2026__handle svg {
  width: 7px;
  height: 12px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.cmp2026__handle:hover { background: var(--orange-hover); }
.cmp2026__handle:focus { outline: none; }

/* base-2026.css gives every focused button an orange ring on a 5px radius.
   Orange-on-orange would be invisible on this handle, and the 5px radius would
   square the circle off, so both are restated here. */
.cmp2026__handle:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 50%;
}

/* ── COMPACT MODIFIER ────────────────────────────────────────────────────── */
/* An inline pair set within a content section rather than spanning it full
   width (deghosting.html's designature pair, sitting between a section intro
   and the package cards that follow it): capped to two-thirds of the
   container and given the same border / radius as the page's other cards
   (.pkg, .panel — both var(--radius-lg)) instead of sitting flush. The bottom
   margin is the gap to whatever comes next.

   `copyChrome` (see BUILD, above) reads border/radius/background off THIS
   pane's computed style and paints them onto the JS-built stage, so styling
   the static `.cmp__half` here is what makes the widget rounded too — no
   widget-specific rule needed. */
.cmp--compact { max-width: 66.6667%; margin: 0 auto 40px; }
.cmp--compact .cmp__half {
  position: relative;
  overflow: hidden;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ── MOTION ──────────────────────────────────────────────────────────────── */
/* Every transition in this component is opt-in. The divider, the panes and the
   handle track the pointer with no transition at all — an eased divider lags
   the finger — so the only animated properties are the label fade and the
   handle's hover tint, and both are declared here and nowhere else: under
   `prefers-reduced-motion: reduce` the component has no transitions to cancel. */
@media (prefers-reduced-motion: no-preference) {
  .cmp2026__label  { transition: opacity .18s var(--ease); }
  .cmp2026__handle { transition: background-color .18s var(--ease); }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Two-thirds of a phone-width container is cramped for a drag slider;
     go back to full width below the breakpoint the rest of this file uses. */
  .cmp--compact { max-width: 100%; }
  .cmp2026__handle {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
  }
  .cmp2026__label {
    top: 8px;
    font-size: 8.5px;
    padding: 3px 9px;
  }
  .cmp2026__pane--before .cmp2026__label { left: 8px; }
  .cmp2026__pane--after  .cmp2026__label { right: 8px; }
}

/* ==== components/faq.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   FAQ — 2026 design system
   Native <details>/<summary> accordion with a rotating "+" marker.
   Identical in every concept page that carries an FAQ.
   ═══════════════════════════════════════════════════════════════════════════ */

.faq { max-width: 840px; margin: 0 auto; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-white); margin-bottom: 10px; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-weight: 600; font-size: 15px; color: var(--text-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; color: var(--orange); font-weight: 400; flex-shrink: 0; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 22px 20px; font-size: 14px; color: var(--text); line-height: 1.7; }

/* ==== components/cta.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   CTA BAND — 2026 design system
   Dark full-width closing band with an orange top rule and an optional
   background image behind the gradient.
   ═══════════════════════════════════════════════════════════════════════════ */

.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, rgba(10,18,35,.92), rgba(1,65,107,.88));
  padding: 84px 0;
}
.cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), #ff9240 50%, var(--orange));
  z-index: 2;
}
.cta__bg { position: absolute; inset: 0; opacity: .22; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }

.cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.cta__eyebrow { display: inline-flex; margin-bottom: 20px; }
.cta__title {
  font-family: var(--font-head); font-size: clamp(28px, 4vw, 46px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  color: #fff; margin-bottom: 16px;
}
.cta__title span { color: var(--orange); }
.cta__desc { font-size: 16px; color: rgba(255,255,255,.78); line-height: 1.7; margin-bottom: 32px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta__note { margin-top: 18px; font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .04em; }

/* ==== components/video-modal.css ==== */
/* Geomage — "Watch Demo" video lightbox.
   Embedded privacy-enhanced YouTube player + channel playlist, in-page. */
.vidm-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(8, 12, 20, .78);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center;
  padding: 28px; opacity: 0; pointer-events: none;
  transition: opacity .25s cubic-bezier(.4,0,.2,1);
}
.vidm-overlay.is-open { opacity: 1; pointer-events: auto; }
.vidm {
  width: 100%; max-width: 1080px; max-height: 92vh;
  background: #0d1117; border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 50px 140px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.985);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  font-family: 'Inter', sans-serif;
}
.vidm-overlay.is-open .vidm { transform: translateY(0) scale(1); }
.vidm__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.vidm__logo { height: 24px; filter: brightness(0) invert(1); opacity: .9; }
.vidm__head-t { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: #fff; }
.vidm__head-sub { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 1px; }
.vidm__close {
  margin-left: auto; width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  color: rgba(255,255,255,.75); transition: all .18s;
}
.vidm__close:hover { border-color: #fe6a00; color: #fe6a00; background: rgba(254,106,0,.12); }
.vidm__body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.vidm__stage { margin-right: 300px; background: #000; }
.vidm__frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.vidm__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vidm__now { padding: 12px 16px; }
.vidm__now-t { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.vidm__now-p { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ff9240; margin-top: 3px; }
.vidm__list {
  position: absolute; top: 0; right: 0; bottom: 0; width: 300px;
  border-left: 1px solid rgba(255,255,255,.07);
  overflow-y: auto; padding: 10px; background: #0d1117;
}
.vidm__list::-webkit-scrollbar { width: 8px; }
.vidm__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.vidm__item {
  display: flex; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: 7px; cursor: pointer; transition: background .16s, border-color .16s;
}
.vidm__item:hover { background: rgba(255,255,255,.06); }
.vidm__item.is-active { background: rgba(254,106,0,.13); border-color: rgba(254,106,0,.4); }
.vidm__thumb {
  width: 96px; height: 54px; flex-shrink: 0; border-radius: 6px;
  object-fit: cover; background: #1a2030; display: block;
}
.vidm__item-t { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88); line-height: 1.35; }
.vidm__item.is-active .vidm__item-t { color: #fff; }
.vidm__item-p { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: 3px; }
.vidm__item.is-active .vidm__item-p { color: #ff9240; }
.vidm__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.vidm__foot-note { font-size: 11px; color: rgba(255,255,255,.35); }
.vidm__yt {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75);
  text-decoration: none; padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 100px;
  transition: all .18s;
}
.vidm__yt:hover { border-color: #fe6a00; color: #fff; background: rgba(254,106,0,.14); }
.vidm__yt svg { width: 15px; height: 15px; fill: #ff0000; }
@media (max-width: 880px) {
  .vidm-overlay { padding: 14px; }
  .vidm__stage { margin-right: 0; }
  .vidm__list { position: static; width: auto; border-left: none; border-top: 1px solid rgba(255,255,255,.07); max-height: 260px; }
  .vidm__foot { flex-wrap: wrap; }
}