/* Self-hosted Inter (latin + latin-ext + cyrillic + cyrillic-ext subsets).
   One file per subset; weights 400–700 share each file via Google's variable
   font. Browsers pick the matching subset by unicode-range. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/inter-latin.woff2') 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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/inter-latin-ext.woff2') 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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
    /* Scroll-driven vars (hero.js writes these on the hero page) */
    --hero-progress: 0;
    --hero-exit: 0;

    --brand: #042C71;
    --brand-600: #083a94;
    --brand-500: #1a4bb5;
    --brand-300: #5a7fd1;
    --brand-50: #eef2fb;

    /* Brand blue used as a FILL (buttons, header bands, CTA blocks). Same as
       the text blues in light mode; stays deep blue in dark mode while the
       text blues lighten. */
    --brand-fill: #042C71;
    --brand-fill-600: #083a94;
    --brand-fill-500: #1a4bb5;

    /* Icon-tile hover background. Icon tiles rest on --brand-50; on hover the
       tile deepens to this slightly stronger brand blue as a gentle cue. */
    --icon-hover-bg: #dde7fa;

    /* Warm accent — burnt amber, complementary to the deep navy brand.
       Used sparingly on product-feature eyebrows, PILOT badges, pricing
       "recommended" rails, and secondary-link hovers to break the blue
       monotony without sacrificing the technical/professional tone. */
    --accent-amber:      #D97706;
    --accent-amber-soft: #E4A051;

    /* Shared "pure-blue spectrum" gradient applied to all major section
       titles across the site (excluding hero headlines and titles set on
       dark CTA backgrounds). Apply with background-clip:text + transparent
       fill. Defined once here so swapping the brand sweep stays a one-line
       change. */
    --title-gradient: linear-gradient(135deg,
                                      var(--brand) 0%,
                                      var(--brand-500) 50%,
                                      var(--brand-300) 100%);

    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-soft: #f7f8fa;

    /* Deploy-section palette — defined here (not in deploy-section.css) because
       legal.css and cta-section.css consume these tokens on pages that don't
       load the deploy stylesheet. */
    --deploy-guide: hsla(0, 0%, 92%, 1);   /* light, subtle guide line color */
    --deploy-bg: var(--bg-soft);
    --deploy-card: #ffffff;                 /* homepage product-card tiles */

    --surface: rgba(4, 44, 113, 0.04);
    --surface-hover: rgba(4, 44, 113, 0.06);

    --border: rgba(17, 24, 39, 0.08);
    --border-strong: rgba(17, 24, 39, 0.12);

    --text: #0b1220;
    --text-muted: #556070;
    --text-subtle: #7a8496;
    --text-body: #3c4656;
    /* Solid navbar colour as RGB triplets (the hero navbar fades its alpha). */
    --nav-bg-rgb: 255, 255, 255;
    --nav-border-rgb: 17, 24, 39;

    /* On-dark text hierarchy — used wherever text sits on a dark or brand background.
       Three tiers only; resist the urge to add more. */
    --text-on-dark:        rgba(255, 255, 255, 0.95);
    --text-muted-on-dark:  rgba(255, 255, 255, 0.72);
    --text-subtle-on-dark: rgba(255, 255, 255, 0.50);

    /* Semantic status colors */
    --color-success: #047857;
    --color-error:   #b91c1c;
    --bg-success-subtle: #e8f5ee;
    --bg-error-subtle:   #fdecec;
    --border-success: #b8e3c8;
    --border-error:   #f4c5c5;

    /* Form input surface — used by the contact form and any future text input */
    --input-bg:       #f2f5fa;
    --input-bg-hover: #edf1f8;
    --input-bg-focus: #ffffff;

    --radius-2xs:  2px;
    --radius-xs:   3px;
    --radius-base: 4px;
    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  16px;

    /* Site-wide content container width (matches navbar/footer shell) */
    --container-max: 1280px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --dur-fast: 150ms;
    --dur-med: 220ms;
    --dur-slow: 320ms;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    /* ----- Type scale (mobile→desktop via clamp for fluid headings) ----- */
    --fs-h1:       clamp(28px, 3.4vw, 40px);    /* section headline */
    --fs-h2:       clamp(22px, 2.4vw, 28px);    /* subsection headline */
    --fs-h3:       clamp(18px, 1.4vw, 20px);    /* card title */
    --fs-h4:       17px;                         /* small heading */
    --fs-lead:     clamp(16px, 1.15vw, 18px);   /* descriptions / subheads */
    --fs-body:     16px;                         /* default body — accessibility baseline */
    --fs-body-sm:  14px;                         /* links / nav / buttons */
    --fs-caption:  13px;                         /* captions / fine print */
    --fs-eyebrow:  12px;                         /* all-caps eyebrows */

    /* ----- Line heights ----- */
    --lh-display: 1.05;                          /* large display type */
    --lh-heading: 1.15;                          /* mid-size headings */
    --lh-snug:    1.35;                          /* compact copy */
    --lh-body:    1.5;                           /* body */
    --lh-loose:   1.6;                           /* long-form reading */

    /* ----- Letter spacing ----- */
    --ls-display: -0.035em;                      /* large headings */
    --ls-heading: -0.02em;                       /* medium headings */
    --ls-tight:   -0.005em;                      /* slight tightening */
    --ls-caps:    0.12em;                        /* all-caps eyebrows */

    /* ----- Font weights ----- */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;
}

/* ------------------------------------------------------------------
   Dark theme — automatic, follows the visitor's device setting.
   Only tokens change here; component files use the tokens. Images with
   white backgrounds (product photos, screenshots, charts) stay on light
   panels on purpose.
   ------------------------------------------------------------------ */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
    :root {
        --brand: #9db8f2;
        --brand-600: #b8cbf6;
        --brand-500: #86a6ee;
        --brand-300: #5f84d6;
        --brand-50: rgba(134, 166, 238, 0.12);
        --icon-hover-bg: rgba(134, 166, 238, 0.22);

        --brand-fill: #0a3a8f;
        --brand-fill-600: #1447a6;
        --brand-fill-500: #2a5cc9;

        --accent-amber: #F59E0B;
        --accent-amber-soft: #F4B860;

        --bg: #0d1219;
        --bg-elevated: #151c26;
        --bg-soft: #111721;
        --deploy-guide: hsla(0, 0%, 100%, 0.06);
        --deploy-card: var(--bg-elevated);
        --deploy-fold: rgba(255, 255, 255, 0.10);   /* product-card folded corner */

        --surface: rgba(134, 166, 238, 0.06);
        --surface-hover: rgba(134, 166, 238, 0.10);

        --border: rgba(255, 255, 255, 0.09);
        --border-strong: rgba(255, 255, 255, 0.16);

        --text: #e7ebf2;
        --text-muted: #a9b3c3;
        --text-subtle: #7f8b9e;
        --text-body: #cdd4de;
        --nav-bg-rgb: 13, 18, 25;
        --nav-border-rgb: 255, 255, 255;

        --color-success: #34d399;
        --color-error: #f87171;
        --bg-success-subtle: rgba(52, 211, 153, 0.12);
        --bg-error-subtle: rgba(248, 113, 113, 0.12);
        --border-success: rgba(52, 211, 153, 0.35);
        --border-error: rgba(248, 113, 113, 0.35);

        --input-bg: #1a2230;
        --input-bg-hover: #1e2838;
        --input-bg-focus: #202b3c;
    }
}


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

html,
body {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Off-canvas panels (mobile menu, product drawer) park at translateX(100%),
   which otherwise extends horizontal scrollable overflow — on phones the
   page can be panned sideways and right-edge content looks cut off. `clip`
   (not `hidden`) avoids creating a scroll container, so position:sticky
   descendants keep working. */
html,
body {
    overflow-x: clip;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg-soft);
    /* Safety net: long unbreakable strings (emails, product codes, URLs)
       wrap instead of overflowing their container on narrow screens. */
    overflow-wrap: break-word;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

.page {
    min-height: calc(100vh - 64px);
}

/* Skip-to-content link — visually hidden until focused, then anchored
   top-left so a keyboard user can jump past the navbar to <main>. */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--brand-fill);
    color: #ffffff;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/*  Scroll reveal — initial hidden state applies only under            */
/*  html.reveal-on, which js/reveal.js adds after checking             */
/*  prefers-reduced-motion. No JS → no class → everything visible.     */
/* ------------------------------------------------------------------ */

.reveal-on [data-rvl] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out);
}

.reveal-on [data-rvl].is-in {
    opacity: 1;
    transform: none;
}

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

/* ------------------------------------------------------------------ */
/*  Closing CTA cards — uniform size across every page.               */
/*  .cta-banner (home) · .ab-cta (about, strengthening, help, docs) · */
/*  .cm-final (sensors) · .sw-final (software) share one min-height   */
/*  and centre their content vertically, so short one-line cards      */
/*  render exactly as tall as the longest two-line one.               */
/* ------------------------------------------------------------------ */

.cta-banner,
.ab-cta,
.cm-final,
.sw-final {
    display: grid;
    align-content: center;
    min-height: 330px;
}

/* Grid items blockify the inline-grid actions row; pin it back to
   content width so the equal-width button pair keeps its size. The
   mobile media queries above each set width:100% and win at <=600px. */
.cta-banner__actions,
.ab-cta__actions,
.cm-final__actions,
.sw-final__actions {
    justify-self: start;
}

/* Below the container width the homepage banner keeps side gutters (its
   .cta-section wrapper pads 24px / 16px on mobile) while the other cards
   went full-bleed, losing their rounded-card look on phones. Give them
   the same gutters. The `.page` prefix out-specifies the component files'
   own max-width, which load after base.css. */
.page .ab-cta,
.page .cm-final,
.page .sw-final {
    max-width: min(var(--container-max), calc(100% - 48px));
}
@media (max-width: 600px) {
    .page .ab-cta,
    .page .cm-final,
    .page .sw-final {
        max-width: calc(100% - 32px);
    }
}


/* ------------------------------------------------------------------ */
/*  Scroll progress bar (js/progress.js) — every page                  */
/*  Sits on the bottom edge of the 64px sticky navbar, in the brand     */
/*  navy → blue gradient. Hidden at the very top of the page.           */
/* ------------------------------------------------------------------ */
.page-progress {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 39;                 /* just under the navbar (40), so open menus cover it */
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
}
.page-progress.is-active { opacity: 1; }
.page-progress span {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--brand-fill) 0%, var(--brand-fill-600) 55%, var(--brand-fill-500) 100%);
    box-shadow: 0 1px 3px rgba(4, 44, 113, 0.25);
}
[dir="rtl"] .page-progress span { transform-origin: 100% 50%; }

/* Trademark sign. The ™ glyph is already small and raised in Inter, so it is
   shown near full size and only nudged up — shrinking it again made it look
   like a stray mark. Headings get a slightly smaller relative size. */
.tm {
    font-size: 0.95em;
    line-height: 0;
    vertical-align: 0.15em;
    margin-left: 0.04em;
    font-weight: inherit;
}
h1 .tm, h2 .tm, h3 .tm {
    font-size: 0.7em;
    vertical-align: 0.35em;
}

/* Dark theme: light panels for white-background images, charts and drawn
   diagrams (owner's choice). Inside these the light-mode tokens apply, so
   diagram labels stay dark on the light panel. */
@media (prefers-color-scheme: dark) {
    .art-fig, .art-shot__pic, .art-head__pic, .art-card__media, .art-zoom__stage,
    .vD__view, .str-pcard__view, .str-viz, .cm-how__media, .cm-variant__media {
        --brand: #042C71; --brand-600: #083a94; --brand-500: #1a4bb5; --brand-300: #5a7fd1; --brand-50: #eef2fb;
        --text: #0b1220; --text-muted: #556070; --text-subtle: #7a8496;
        --border: rgba(17, 24, 39, 0.08); --border-strong: rgba(17, 24, 39, 0.12);
        --bg: #ffffff; --bg-elevated: #ffffff; --bg-soft: #f4f6f9;
        color-scheme: light;
    }
    /* html prefix: beats component files that set these frames transparent. */
    html .art-fig, html .vD__view, html .str-pcard__view { background-color: #f7f8fa; }
    .art-fig { color: #0b1220; }
}
@media (prefers-color-scheme: dark) {
    .footer { border-top: 1px solid var(--border); }
}

/* Dark theme: the white primary button on blue CTA banners glared (owner).
   It becomes a soft translucent fill with white text; the ghost button next
   to it stays an outline, so the primary still reads first. html prefix
   beats the component files. */
@media (prefers-color-scheme: dark) {
    html .ab-cta .ab-btn--primary,
    html .cta-banner__btn--primary,
    html .ad-banner__btn--primary,
    html .pricing-cross__cta--primary,
    html .cm-final .cm-btn--primary,
    html .sw-final .sw-btn--primary {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.40);
        color: #ffffff;
        box-shadow: none;
    }
    html .ab-cta .ab-btn--primary:hover,
    html .cta-banner__btn--primary:hover,
    html .ad-banner__btn--primary:hover,
    html .pricing-cross__cta--primary:hover,
    html .cm-final .cm-btn--primary:hover,
    html .sw-final .sw-btn--primary:hover {
        background: rgba(255, 255, 255, 0.26);
        border-color: rgba(255, 255, 255, 0.70);
        color: #ffffff;
    }
}

/* Images whose width/height the build filled in (build.js addImageDimensions):
   the attributes reserve space while loading, the height stays automatic.
   :where() has no specificity, so any component rule still wins. */
:where(img[data-dims]) { height: auto; }

/* ---------- Section rhythm (owner, 2026-10-03) ----------
   One gap between page sections on every page: 96px on desktop, 64px on
   phones and small tablets (up to 767px). Change --section-gap to change it
   everywhere. Covered: the last section to the footer, the guides band on the
   home and product pages, About-style sections (About, Help Center, Technical
   Documents, Strengthening), the lower pricing sections, and the guide pages.
   Not covered on purpose: page
   heroes, the home page's full-width bands (they touch each other) and the
   numbered sub-sections of the legal pages (40px, they are one document).
   The html prefix lets these rules win over the component files. */
:root { --section-gap: 96px; }
@media (max-width: 767px) { :root { --section-gap: 64px; } }

html main.page { padding-bottom: 0; }                 /* the footer margin makes the gap */
html .footer { margin-top: var(--section-gap); }
html .ab-pillars { margin-bottom: var(--section-gap); }
html .art-related,
html .art-cta { margin-top: var(--section-gap); }
html .art-related--product { margin-bottom: var(--section-gap); }
html .art-related--home { margin-top: calc(var(--section-gap) - 8px); margin-bottom: 0; }   /* the banner above keeps 8px */
html .cta-section { padding-top: var(--section-gap); padding-bottom: 0; }
html .pricing-cross,
html .pricing-faq { margin-top: var(--section-gap); }   /* the cards and their trust line stay closer together */