/* ═══════════════════════════════════════════════════════════════════
   Matrack Gauss — Video Intelligence landing page
   Extracted from the bundled React/dc-runtime build to plain CSS.
   Self-hosted webfonts live in ./fonts (Manrope is variable, 200–800).
═══════════════════════════════════════════════════════════════════ */

/* IBM Plex Mono · cyrillic-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-400-cyrillic-ext.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Mono · cyrillic */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-400-cyrillic.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono · vietnamese */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-400-vietnamese.woff2") 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;
}

/* IBM Plex Mono · latin-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-400-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;
}

/* IBM Plex Mono · latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-400-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;
}

/* IBM Plex Mono · cyrillic-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500-cyrillic-ext.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Mono · cyrillic */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500-cyrillic.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono · vietnamese */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500-vietnamese.woff2") 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;
}

/* IBM Plex Mono · latin-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500-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;
}

/* IBM Plex Mono · latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500-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;
}

/* IBM Plex Mono · cyrillic-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-600-cyrillic-ext.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Mono · cyrillic */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-600-cyrillic.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono · vietnamese */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-600-vietnamese.woff2") 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;
}

/* IBM Plex Mono · latin-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-600-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;
}

/* IBM Plex Mono · latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-600-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;
}

/* Manrope · cyrillic-ext */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-cyrillic-ext.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Manrope · cyrillic */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-cyrillic.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Manrope · greek */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-greek.woff2") format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Manrope · vietnamese */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-vietnamese.woff2") 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;
}
  
/* Manrope · latin-ext */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-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;
}
  
/* Manrope · latin */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-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;
}
/* ═══════════════════════════════════════════════════════════════════
    Tokens
═══════════════════════════════════════════════════════════════════ */
  :root {
    --ink:        #0B1220;
    --ink-2:      #3D4757;
    --ink-3:      #4A5464;
    --ink-4:      #5A6472;
    --muted:      #7A8698;
    --muted-2:    #8A94A4;
    --line:       #E4E8EE;
    --line-soft:  #EDF1F6;
    --line-firm:  #D7DDE6;
    --blue:       #0A66C2;
    --blue-dark:  #084FA0;
    --blue-tint:  #E8F1FB;
    --blue-edge:  #CFE1F6;
    --amber:      #C2650F;
    --amber-tint: #FFF3E6;
    --surface:    #F5F7FA;
    --surface-2:  #F9FBFD;
    --white:      #FFFFFF;
    --shell:      1240px;
    --gutter:     32px;
    --radius-sm:  10px;
    --radius:     14px;
    --radius-lg:  20px;
    --radius-xl:  24px;
    --pill:       999px;
    --sans: Manrope, "Helvetica Neue", Arial, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --header-h:   70px;
}
/* ═══════════════════════════════════════════════════════════════════
    Reset & base
═══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {margin: 0;background: var(--white);color: var(--ink);font-family: var(--sans);-webkit-font-smoothing: antialiased;}
h1, h2, h3, h4, h5, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {position: absolute; width: 1px; height: 1px;padding: 0; margin: -1px; overflow: hidden;clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.page { width: 100%; max-width: 100%; overflow-x: hidden; }
.shell {max-width: var(--shell);margin: 0 auto;padding: 0 var(--gutter);}
/* ═══════════════════════════════════════════════════════════════════
    Shared primitives
═══════════════════════════════════════════════════════════════════ */
/* Uppercase mono micro-label */
.label {display: block;font-family: var(--mono);font-size: 12px;font-weight: 600;letter-spacing: .06em;text-transform: uppercase;color: var(--muted);}
/* Section eyebrow with a leading dot */
.eyebrow {
    display: inline-flex;align-items: center;gap: 8px;font-family: var(--mono);font-size: 12px;font-weight: 600;letter-spacing: .12em;text-transform: uppercase;color: var(--muted);
}
.eyebrow__dot {width: 6px; height: 6px;border-radius: 50%;background: var(--blue);display: block;flex: none;}
.eyebrow--invert { color: #7FB2E5; }
.eyebrow--invert .eyebrow__dot { background: #4A9AE0; }
  
/* Tinted capsule (hero) */
.pill {
    display: inline-flex;align-items: center;gap: 6px;padding: 6px 12px;border-radius: var(--pill);background: var(--blue-tint);border: 1px solid var(--blue-edge);
    color: var(--blue);font-family: var(--mono);font-size: 11px;font-weight: 600;letter-spacing: .08em;text-transform: uppercase;
}
.card {background: var(--white);border: 1px solid var(--line);border-radius: var(--radius-lg);}
.link { text-decoration: underline; }

/* Buttons */
.btn {
    display: inline-block;padding: 15px 26px;border: 1px solid transparent;border-radius: var(--pill);font-family: inherit;font-size: 15px;font-weight: 700;
    text-align: center;cursor: pointer;transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { display: block; width: 100%; padding: 15px; }
.btn--primary { background: var(--blue) !important; color: var(--white) !important;display: block !important;}
.btn--primary:hover { background: var(--blue-dark); color: var(--white); }
.btn--outline { background: var(--white) !important; border-color: var(--line-firm) !important; color: var(--ink) !important; }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }
.btn--ghost { background: transparent; border-color: var(--line-firm); color: var(--ink); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--outline-invert { background: transparent !important; border-color: #2A3A54 !important; color: var(--white) !important; }
.btn--outline-invert:hover { border-color: #4A9AE0; color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-row--center { justify-content: center; margin-top: 28px; }
/* ═══════════════════════════════════════════════════════════════════
    Header
═══════════════════════════════════════════════════════════════════ */
.site-header {position: sticky;top: 0;z-index: 50;background: rgba(255, 255, 255, .9);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border-bottom: 1px solid var(--line);}
.site-header__inner {padding-block: 14px;display: flex;align-items: center;justify-content: space-between;gap: 24px;}
.site-header__cta { display: flex; align-items: center; gap: 10px; }
.brand {display: flex;align-items: center;gap: 10px;color: var(--ink);font-weight: 800;font-size: 19px;letter-spacing: -.02em;}
.brand:hover { color: var(--ink); }
.brand__mark { width: 26px; height: 26px; border-radius: 7px; background: var(--blue); display: block; flex: none; }
.brand__rule { width: 1px; height: 18px; background: var(--line-firm); display: block; }
.brand__sub { color: var(--ink-4); font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.site-nav a:hover { color: var(--blue); }
.nav-toggle {
    display: none;flex-direction: column;justify-content: center;gap: 5px;width: 42px; height: 42px;padding: 0;border: 1px solid var(--line-firm);
    border-radius: var(--radius-sm);background: var(--white);cursor: pointer;
}
.nav-toggle__bar { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); margin-inline: auto; }
/* ═══════════════════════════════════════════════════════════════════
    Sections
═══════════════════════════════════════════════════════════════════ */
.section { padding: 80px 0; }
.section--tight { padding: 0 0 80px; }
.section--alt {background: var(--surface);border-top: 1px solid var(--line);border-bottom: 1px solid var(--line);}
.section__title {font-size: clamp(28px, 3.2vw, 40px);letter-spacing: -.025em;font-weight: 800;margin-top: 14px;max-width: 22ch;}
.section__title--wide   { max-width: 24ch; }
.section__title--narrow { max-width: 20ch; }
.section__lede {margin-top: 14px;font-size: 16px;color: var(--ink-3);max-width: 62ch;line-height: 1.6;}
.prose {font-size: 15px;color: var(--ink-3);margin-top: 20px;max-width: 70ch;line-height: 1.65;}
.prose strong { color: var(--ink); }
.footnote { font-size: 13px; color: var(--muted); margin-top: 14px; }
/* ═══════════════════════════════════════════════════════════════════
    Hero
═══════════════════════════════════════════════════════════════════ */
.hero {background: linear-gradient(180deg, #F4F8FD 0%, var(--white) 100%);border-bottom: 1px solid var(--line);}
.hero__grid {padding-top: 56px;padding-bottom: 64px;display: grid;grid-template-columns: 1.15fr .85fr;gap: 48px;align-items: start;}
.hero__title {font-size: clamp(36px, 4.6vw, 56px);line-height: 1.05;letter-spacing: -.03em;font-weight: 800;margin-top: 18px;text-wrap: balance;}
.hero__lede {margin-top: 20px;font-size: 18px;line-height: 1.6;color: var(--ink-3);max-width: 52ch;}
/* 4-up hairline fact grid under the hero copy */
.factgrid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1px;background: var(--line);border: 1px solid var(--line);border-radius: var(--radius);overflow: hidden;margin-top: 40px;}
.factgrid__cell { background: var(--white); padding: 16px 18px; }
.factgrid .label { font-size: 11px; letter-spacing: .08em; }
.factgrid__value { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; }
/* ═══════════════════════════════════════════════════════════════════
    Lead form
═══════════════════════════════════════════════════════════════════ */
.card--form {padding: 28px;box-shadow: 0 18px 44px rgba(11, 18, 32, .08);}
.card__title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-top: 12px; }
.card__lede { font-size: 14px; color: var(--ink-4); margin-top: 8px; line-height: 1.6; }
.field { margin-top: 14px; }
.field:first-of-type { margin-top: 18px; }
.field__label {display: block;font-size: 13px;font-weight: 600;color: var(--ink-2);margin-bottom: 6px;}
.field__input {
    width: 100%;padding: 12px 14px;font: inherit;font-size: 15px;color: var(--ink);border: 1px solid var(--line-firm);border-radius: var(--radius-sm);
    outline: none;background: var(--white);transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input:focus {border-color: var(--blue);box-shadow: 0 0 0 3px rgba(10, 102, 194, .14);}
.field__input.is-invalid { border-color: var(--amber); }
.field__input.is-invalid:focus {border-color: var(--amber);box-shadow: 0 0 0 3px rgba(194, 101, 15, .14);}
/* Inline, per-field validation message — shown in place of an alert popup. */
.field__error {display: none;font-size: 12.5px;line-height: 1.4;color: var(--amber);margin-top: 6px;}
.field.is-invalid .field__error { display: block; }
select.field__input {
    appearance: none;-webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A8698' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;background-position: right 14px center;padding-right: 38px;
}
.form .btn { margin-top: 22px; }
.form__note { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
.form__status {margin-top: 12px;padding: 10px 14px;border-radius: var(--radius-sm);font-size: 13px;line-height: 1.5;text-align: center;}
.form__status--ok    { background: var(--blue-tint); border: 1px solid var(--blue-edge); color: var(--blue); }
.form__status--error { background: var(--amber-tint); border: 1px solid #F1D4B4; color: var(--amber); }
/* ═══════════════════════════════════════════════════════════════════
    Proof — stat grid + chart
═══════════════════════════════════════════════════════════════════ */
.statgrid {display: grid;grid-template-columns: repeat(6, 1fr);gap: 1px;background: var(--line);border: 1px solid var(--line);border-radius: var(--radius-lg);overflow: hidden;margin-top: 34px;}
.statgrid__cell { background: var(--white); padding: 22px 18px; }
.stat__num {display: block;font-family: var(--mono);font-size: 30px;font-weight: 600;letter-spacing: -.02em;}
.stat__label { display: block; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.stat__note  { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.chart { margin: 24px 0 0; padding: 28px; }
.chart__head {display: flex;align-items: baseline;justify-content: space-between;gap: 12px;flex-wrap: wrap;margin-bottom: 8px;}
.chart__title { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.chart__flag {font-family: var(--mono);font-size: 11px;letter-spacing: .06em;text-transform: uppercase;color: var(--amber);font-weight: 600;}
.chart svg { width: 100%; height: auto; }
/* ═══════════════════════════════════════════════════════════════════
    Zones
═══════════════════════════════════════════════════════════════════ */
.zones {display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;margin-top: 36px;}
.zone { border-radius: var(--radius); padding: 20px; }
.zone__name {display: flex;align-items: center;gap: 8px;font-size: 14px;color: var(--ink-2);font-weight: 600;}
.zone__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zone); display: block; flex: none; }
.zone__figures { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.zone__avg  { font-family: var(--mono); font-size: 26px; font-weight: 600; }
.zone__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.meter {display: block;height: 8px;border-radius: var(--pill);background: var(--line-soft);margin-top: 14px;position: relative;}
.meter__fill { display: block; height: 100%; border-radius: var(--pill); background: var(--zone); }
.meter__tick {position: absolute;top: -3px;width: 2px; height: 14px;border-radius: 2px;background: var(--zone);}
.takeaways {padding: 24px;margin-top: 28px;display: grid;grid-template-columns: 1fr 1fr;gap: 24px;}
.takeaways p { font-size: 15px; color: var(--ink-3); line-height: 1.65; }
.takeaways strong { color: var(--ink); }
/* ═══════════════════════════════════════════════════════════════════
    Feature rows
═══════════════════════════════════════════════════════════════════ */
.feature {display: grid;grid-template-columns: 1fr 1fr;gap: 56px;align-items: center;}
.feature + .feature { margin-top: 88px; }
.feature__kicker {font-family: var(--mono);font-size: 13px;letter-spacing: .08em;text-transform: uppercase;color: var(--blue);font-weight: 600;}
.feature__title {font-size: clamp(24px, 2.6vw, 32px);letter-spacing: -.025em;font-weight: 800;margin-top: 12px;}
.feature__lede {font-size: 16px;color: var(--ink-3);margin-top: 16px;max-width: 48ch;line-height: 1.65;}
.feature__viz { padding: 22px; }
.feature__viz svg { width: 100%; height: auto; }
.ticks { display: grid; gap: 12px; margin-top: 22px; }
.ticks li {display: flex;gap: 10px;font-size: 15px;color: var(--ink-2);}
.ticks li::before {content: "";width: 6px; height: 6px;margin-top: 8px;border-radius: 50%;background: var(--blue);flex: none;}
/* ═══════════════════════════════════════════════════════════════════
    Comparison table
═══════════════════════════════════════════════════════════════════ */
.table-wrap {margin-top: 32px;background: var(--white);border: 1px solid var(--line);border-radius: 16px;overflow-x: auto;}
.compare {width: 100%;min-width: 720px;border-collapse: collapse;font-size: 14px;}
.compare thead tr { background: var(--surface-2); }
.compare th, .compare td { padding: 14px 16px; text-align: left; }
.compare thead th { font-weight: 600; }
.compare__col {font-family: var(--mono);font-size: 11px;letter-spacing: .06em;text-transform: uppercase;color: var(--muted);}
.compare__col--own { color: var(--blue); }
.compare tbody th {font-weight: 600;color: var(--ink-2);border-top: 1px solid var(--line-soft);width: 22%;}
.compare tbody td {border-top: 1px solid var(--line-soft);color: var(--muted);}
.compare tbody td.is-own { color: var(--ink); } 
/* ═══════════════════════════════════════════════════════════════════
    How it works
═══════════════════════════════════════════════════════════════════ */
.steps {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin-top: 36px;}
.step { border-radius: var(--radius); padding: 22px; }
.step__num { display: block; font-family: var(--mono); font-size: 1Q3px; color: var(--blue); font-weight: 600; }
.step__title { font-size: 17px; font-weight: 800; margin-top: 10px; }
.step__body { font-size: 14px; color: var(--ink-4); margin-top: 10px; line-height: 1.6; }
/* ═══════════════════════════════════════════════════════════════════
    Specs
═══════════════════════════════════════════════════════════════════ */
.specgrid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1px;background: var(--line);border: 1px solid var(--line);border-radius: var(--radius-lg);overflow: hidden;margin-top: 36px;}
.specgrid__cell { background: var(--white); padding: 26px 24px; }
.specgrid .label { font-size: 13px; }
.speclist { display: grid; gap: 12px; margin-top: 16px; }
.speclist li {font-size: 14px;color: var(--ink-2);padding-bottom: 12px;border-bottom: 1px solid var(--line-soft);}
.speclist li:last-child { padding-bottom: 0; border-bottom: 0; }
/* ═══════════════════════════════════════════════════════════════════
    FAQ
═══════════════════════════════════════════════════════════════════ */
.faq__hint { font-size: 15px; color: var(--ink-3); margin-top: 12px; }
.faq {max-width: 820px;margin-top: 32px;display: grid;gap: 1px;background: var(--line);border: 1px solid var(--line);border-radius: var(--radius);overflow: hidden;}
.faq__item { background: var(--white); padding: 4px 22px; }
.faq__q {list-style: none;cursor: pointer;padding: 18px 0;padding-right: 28px;font-size: 16px;font-weight: 700;position: relative;}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "";position: absolute;right: 4px;top: 50%;width: 9px; height: 9px;margin-top: -6px;border-right: 2px solid var(--muted);border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);transition: transform .18s ease;
}
.faq__item[open] > .faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a {font-size: 15px;color: var(--ink-3);padding-bottom: 20px;line-height: 1.6;max-width: 66ch;}
/* ═══════════════════════════════════════════════════════════════════
    Closing CTA
═══════════════════════════════════════════════════════════════════ */
.cta {background: var(--ink);border-radius: var(--radius-xl);padding: clamp(36px, 5vw, 64px);text-align: center;}
.cta__title {font-size: clamp(26px, 3.4vw, 40px);letter-spacing: -.025em;font-weight: 800;color: var(--white);max-width: 26ch;margin: 16px auto 0;}
.cta__lede {max-width: 56ch;margin: 16px auto 0;color: #AFBCCD;font-size: 16px;line-height: 1.6;}
/* ═══════════════════════════════════════════════════════════════════
    Footer
═══════════════════════════════════════════════════════════════════ */
.site-footer {border-top: 1px solid var(--line);background: var(--white);padding: 56px 0 28px;}
.site-footer .container {max-width: var(--shell);margin: 0 auto;}
.site-footer__grid {display: grid;grid-template-columns: 1.4fr 1fr 1fr 1fr;gap: 32px;}
.site-footer__blurb {font-size: 14px;color: var(--ink-4);margin-top: 14px;max-width: 300px;line-height: 1.6;}
.site-footer__heading { margin-bottom: 14px; }
.site-footer__links { display: grid; gap: 8px; }
.site-footer__links a { font-size: 14px; color: var(--ink-2); }
.site-footer__links a:hover { color: var(--blue); }  
.site-footer__bar {margin-top: 44px;padding-top: 24px;border-top: 1px solid var(--line);display: flex;justify-content: space-between;gap: 16px;flex-wrap: wrap;font-size: 13px;color: var(--muted);}
  
/* ═══════════════════════════════════════════════════════════════════
    Responsive
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .statgrid { grid-template-columns: repeat(3, 1fr); }
    .zones    { grid-template-columns: repeat(2, 1fr); }
    .steps    { grid-template-columns: repeat(2, 1fr); }
    .feature  { gap: 40px; }
}
  
@media (max-width: 900px) {
    :root { --gutter: 24px; }
    .nav-toggle { display: flex; }
    .site-header__inner { flex-wrap: wrap; gap: 12px; }
    .site-nav {display: none;order: 3;flex-basis: 100%;flex-direction: column;align-items: flex-start;gap: 14px;padding-bottom: 8px;}
    .site-nav.is-open { display: flex; }
    .site-header__cta { order: 2; }
    .hero__grid  { grid-template-columns: 1fr; gap: 36px; }
    .feature, .feature--reverse { grid-template-columns: 1fr; }
    /* Keep the illustration below its copy on narrow screens. */
    .feature--reverse .feature__copy { order: -1; }
    .specgrid   { grid-template-columns: 1fr; }
    .takeaways  { grid-template-columns: 1fr; } 
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
  
@media (max-width: 640px) {
    :root { --gutter: 18px; }
    .section       { padding: 56px 0; }
    .section--tight { padding: 0 0 56px; }
    .factgrid { grid-template-columns: repeat(2, 1fr); }
    .statgrid { grid-template-columns: repeat(2, 1fr); }
    .zones    { grid-template-columns: 1fr; }
    .steps    { grid-template-columns: 1fr; }
    .site-header__cta .btn--ghost { display: none; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .card--form { padding: 22px; }
    .chart { padding: 20px; }
}
  
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; }
}
  
@media print {
    .site-header, .nav-toggle, .btn-row, .card--form { display: none; }
    .section, .section--alt { border: 0; background: #fff; }
}