/* ==========================================================================
   Ligara — marketing site design system
   --------------------------------------------------------------------------
   Tokens are deliberately inherited from the product's own design tokens
   (src/theme/themes.json + demo-app/src/styles/demoTokens.css) so the site
   and the application read as one system: same Inter stack with the same
   character variants, same #2563eb primary, same slate ink ramp, same radii.

   Structure:
     1. Reset + fonts
     2. Tokens (light) + dark overrides
     3. Base typography
     4. Layout primitives
     5. Components
     6. Utilities
     7. Motion + reduced-motion
     8. Responsive
     9. Print
   ========================================================================== */

/* ==========================================================================
   1. RESET + FONTS
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-latin-800-normal.woff2') format('woff2');
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Same Inter character variants the product uses, so screenshots and
       surrounding copy share letterforms. */
    font-feature-settings: "cv01", "cv02", "cv03", "ss01";
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
    /* ---- Brand (from the product's own tokens) ---- */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-active: #1e40af;
    --primary-soft: rgba(37, 99, 235, 0.08);
    --primary-softer: rgba(37, 99, 235, 0.04);
    --primary-text: #1e40af;
    --violet: #8b5cf6;
    --violet-text: #6d28d9;
    --violet-soft: rgba(139, 92, 246, 0.1);

    /* ---- Surfaces ---- */
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --bg-deep: #0b1020;
    --card-bg: #ffffff;
    --soft: #f1f5f9;
    --hover: rgba(15, 23, 42, 0.04);

    /* ---- Text ---- */
    --text: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    /* WCAG 2.2 AA (1.4.3). Was #94a3b8, which measured 2.56:1 on white and
       2.45:1 on --bg-alt — both below the 4.5:1 minimum, and the only audit
       Lighthouse failed. #637186 is the lightest value on the same slate hue
       that clears 4.5:1 against every light surface it is used on:
       4.96:1 on #ffffff, 4.74:1 on --bg-alt, 4.52:1 on --soft. */
    --text-subtle: #637186;
    --text-on-dark: #e2e8f0;
    --text-on-dark-muted: #94a3b8;

    /* ---- Borders ---- */
    --border: #e2e8f0;
    --border-soft: #eef2f7;
    --border-strong: #cbd5e1;
    /* WCAG 2.2 AA (1.4.11 Non-text Contrast) requires 3:1 for the boundary of
       an interactive control. --border-strong measures 1.48:1 on white, so it
       is fine for decorative card edges but not for the edge of a form field.
       This token is used only on real inputs: 3.60:1 on white. Kept separate
       so the rest of the design language is unchanged. */
    --border-input: #7c8899;

    /* ---- Status ---- */
    --emerald: #10b981;
    --emerald-soft: rgba(16, 185, 129, 0.1);
    --emerald-text: #047857;
    --amber: #f59e0b;
    --amber-soft: #fef3c7;
    --amber-text: #92400e;
    --rose: #f43f5e;
    --rose-soft: #fee2e2;
    --rose-text: #b91c1c;
    --slate-soft: #f1f5f9;
    --slate-text: #475569;

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.10);
    --shadow-xl: 0 30px 70px rgba(15, 23, 42, 0.14);
    --ring: 0 0 0 3px rgba(37, 99, 235, 0.28);

    /* ---- Typography ---- */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --fs-body: 16.5px;
    --fs-sm: 14.5px;
    --fs-xs: 13px;
    --fs-2xs: 11.5px;
    --fs-lead: 19px;
    --fs-h4: 19px;
    --fs-h3: 24px;
    --fs-h2: 34px;
    --fs-h1: 54px;
    --fs-display: 64px;

    /* ---- Radii (product scale, one step up for marketing surfaces) ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* ---- Spacing (4px rhythm, as the product) ---- */
    --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
    --s5: 20px; --s6: 24px;  --s8: 32px;  --s10: 40px;
    --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;
    --s32: 128px;

    /* ---- Layout ---- */
    --container: 1180px;
    --container-narrow: 820px;
    --container-wide: 1320px;
    --gutter: 24px;
    --nav-h: 66px;

    /* ---- Motion (product tokens) ---- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --d-fast: 120ms;
    --d-base: 200ms;
    --d-slow: 320ms;

    /* ---- Gradients ---- */
    --grad-brand: linear-gradient(120deg, #2563eb 0%, #4f46e5 46%, #7c3aed 100%);
    --grad-brand-soft: linear-gradient(120deg, rgba(37,99,235,0.07) 0%, rgba(124,58,237,0.07) 100%);
    --grad-mesh:
        radial-gradient(1000px 520px at 12% -8%, rgba(37, 99, 235, 0.13), transparent 62%),
        radial-gradient(820px 460px at 92% 4%, rgba(124, 58, 237, 0.12), transparent 60%),
        radial-gradient(640px 380px at 52% 100%, rgba(16, 185, 129, 0.07), transparent 65%);
}

/* ==========================================================================
   3. BASE TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--s4);
    color: var(--text);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.021em;
    font-feature-settings: "cv01", "cv02", "cv03", "ss01", "ss03";
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); font-weight: 750; letter-spacing: -0.026em; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.014em; }

p { margin: 0 0 var(--s4); color: var(--text-body); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; transition: color var(--d-fast) var(--ease-standard); }
a:hover { color: var(--primary-hover); }

/* WCAG 2.2 AA (1.4.1 Use of Color). Removing underlines is right for nav
   items, buttons and card links, but not for a link sitting inside a
   sentence: there, colour becomes the only thing marking it as a link, which
   a reader who cannot distinguish that colour will miss. Lighthouse reports
   it as link-in-text-block.
   Scoped to <main> so the nav and footer, which sit outside it, keep their
   current treatment, and excluding the two link classes that are styled as
   controls rather than as running text. */
main p a:not(.btn):not(.link-arrow),
main li a:not(.btn):not(.link-arrow),
main td a:not(.btn):not(.link-arrow),
main dd a:not(.btn):not(.link-arrow) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

strong, b { font-weight: 650; color: var(--text); }

small { font-size: var(--fs-sm); }

code, kbd, samp, .mono {
    font-family: var(--font-mono);
    font-size: 0.895em;
    font-feature-settings: normal;
}

code:not(pre code) {
    background: var(--soft);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 0.1em 0.38em;
    color: var(--text);
    white-space: nowrap;
}

ul, ol { margin: 0 0 var(--s4); padding-left: 1.3em; color: var(--text-body); }
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--s12) 0;
}

::selection { background: rgba(37, 99, 235, 0.2); }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--primary);
    color: #fff;
    padding: var(--s3) var(--s5);
    border-radius: 0 0 var(--r-md) 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    color: #fff;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide { max-width: var(--container-wide); }

section { position: relative; }

.section { padding-block: var(--s24); }
.section-sm { padding-block: var(--s16); }
.section-lg { padding-block: var(--s32); }
.section-alt { background: var(--bg-alt); }
.section-bordered { border-top: 1px solid var(--border); }

/* Dark band, used sparingly for emphasis blocks */
.section-dark {
    background: var(--bg-deep);
    color: var(--text-on-dark);
    --text: #f8fafc;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    /* WCAG 2.2 AA. Was #64748b, which measured 3.98:1 on the --bg-deep band —
       under the 4.5:1 minimum. #7c8899 gives 5.26:1 and stays visibly subtler
       than --text-muted on the same band (7.38:1). */
    --text-subtle: #7c8899;
    --card-bg: rgba(255, 255, 255, 0.038);
    --border: rgba(255, 255, 255, 0.10);
    --border-soft: rgba(255, 255, 255, 0.07);
    --soft: rgba(255, 255, 255, 0.05);
    --primary: #93c5fd;
    --primary-hover: #bfdbfe;
    --primary-text: #bfdbfe;
    --primary-soft: rgba(147, 197, 253, 0.12);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #f8fafc; }

/* Section header block */
.section-head {
    max-width: 760px;
    margin-bottom: var(--s12);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p {
    font-size: var(--fs-lead);
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}
.section-head h2 { margin-bottom: var(--s4); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-text);
    margin-bottom: var(--s4);
}
.eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.55;
}
.section-head.center .eyebrow::before { display: none; }

/* Grids */
.grid { display: grid; gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-tight { gap: var(--s4); }
.grid-loose { gap: var(--s8); }

/* Two-column feature split */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: var(--s16);
    align-items: center;
}
.split.reverse > :first-child { order: 2; }
.split.text-right { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.split.top { align-items: start; }

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.row-lg { gap: var(--s5); }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* ---- 5.1 Navigation ---------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-base) var(--ease-standard),
                background var(--d-base) var(--ease-standard);
}
.nav.is-scrolled {
    border-bottom-color: var(--border);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.nav-inner {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--s6);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    font-weight: 750;
    font-size: 19px;
    letter-spacing: -0.026em;
    color: var(--text);
    flex-shrink: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--grad-brand);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.brand-mark svg { width: 17px; height: 17px; }

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--s1);
    margin-left: auto;
    list-style: none;
    padding: 0;
    margin-block: 0;
}
.nav-links li { margin: 0; }
.nav-links > li > a {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text-body);
    white-space: nowrap;
}
.nav-links > li > a:hover { background: var(--hover); color: var(--text); }
.nav-links > li > a[aria-current="page"] { color: var(--primary-text); background: var(--primary-soft); }

.nav-actions { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }

/* Dropdown */
.nav-drop { position: relative; }
.nav-drop > button {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border: 0;
    background: none;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text-body);
    cursor: pointer;
}
.nav-drop > button:hover { background: var(--hover); color: var(--text); }
.nav-drop > button svg { width: 12px; height: 12px; opacity: 0.6; transition: transform var(--d-fast) var(--ease-standard); }
.nav-drop[data-open="true"] > button svg { transform: rotate(180deg); }
.nav-drop-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 290px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--s2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-fast) var(--ease-standard),
                transform var(--d-fast) var(--ease-standard),
                visibility var(--d-fast);
}
.nav-drop[data-open="true"] .nav-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
    display: block;
    padding: var(--s3);
    border-radius: var(--r-md);
    color: var(--text);
}
.nav-drop-menu a:hover { background: var(--hover); }
.nav-drop-menu strong { display: block; font-size: var(--fs-sm); font-weight: 650; }
.nav-drop-menu span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-top: 2px; }

/* Mobile nav */
.nav-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: var(--r-sm);
    cursor: pointer;
    place-items: center;
    color: var(--text);
}
.nav-toggle svg { width: 18px; height: 18px; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 11px var(--s5);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: background var(--d-fast) var(--ease-standard),
                border-color var(--d-fast) var(--ease-standard),
                color var(--d-fast) var(--ease-standard),
                transform var(--d-fast) var(--ease-standard),
                box-shadow var(--d-fast) var(--ease-standard);
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow-md); }

.btn-secondary {
    background: var(--card-bg);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-secondary:hover { background: var(--hover); border-color: var(--text-subtle); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }

.btn-lg { padding: 14px var(--s6); font-size: var(--fs-body); border-radius: var(--r-md); }
.btn-sm { padding: 8px var(--s4); font-size: var(--fs-xs); }
.btn-block { width: 100%; }

/* Text link with arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--d-fast) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---- 5.3 Badges + pills ------------------------------------------------ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.5;
    background: var(--slate-soft);
    color: var(--slate-text);
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge-primary { background: var(--primary-soft); color: var(--primary-text); }
.badge-emerald { background: var(--emerald-soft); color: var(--emerald-text); }
.badge-amber { background: var(--amber-soft); color: var(--amber-text); }
.badge-rose { background: var(--rose-soft); color: var(--rose-text); }
.badge-violet { background: var(--violet-soft); color: var(--violet-text); }
.badge-outline { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }

/* Announcement pill for hero */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    padding: 6px 6px 6px var(--s4);
    border-radius: var(--r-pill);
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    font-size: var(--fs-xs);
    font-weight: 550;
    color: var(--text-body);
}
.pill b { color: var(--text); font-weight: 650; }
.pill .pill-tag {
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary-text);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s6);
    transition: border-color var(--d-base) var(--ease-standard),
                box-shadow var(--d-base) var(--ease-standard),
                transform var(--d-base) var(--ease-standard);
}
.card-hover:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.card-flush { padding: 0; overflow: hidden; }
.card-lg { padding: var(--s8); border-radius: var(--r-xl); }
.card h3, .card h4 { margin-bottom: var(--s3); }
.card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.62; }

.card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary-text);
    margin-bottom: var(--s5);
}
.card-icon svg { width: 20px; height: 20px; }
.card-icon.violet { background: var(--violet-soft); color: var(--violet-text); }
.card-icon.emerald { background: var(--emerald-soft); color: var(--emerald-text); }
.card-icon.amber { background: var(--amber-soft); color: var(--amber-text); }
.card-icon.rose { background: var(--rose-soft); color: var(--rose-text); }

/* Accent-bordered card, echoing the app's 4px left-edge stripe convention */
.card-accent { border-left: 3px solid var(--primary); }
.card-accent.amber { border-left-color: var(--amber); }
.card-accent.emerald { border-left-color: var(--emerald); }
.card-accent.violet { border-left-color: var(--violet); }

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

.hero {
    position: relative;
    padding-block: var(--s24) var(--s20);
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 150%;
    background: var(--grad-mesh);
    z-index: -2;
    pointer-events: none;
}
/* Faint grid, a nod to a 96-well plate */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(900px 480px at 50% 0%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(900px 480px at 50% 0%, #000 0%, transparent 78%);
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
}
.hero-narrow { padding-block: var(--s20) var(--s12); }

.hero h1 { margin-bottom: var(--s5); }
.hero-lead {
    font-size: 20px;
    line-height: 1.58;
    color: var(--text-muted);
    max-width: 640px;
    margin-bottom: var(--s8);
}
.hero-center { text-align: center; }
.hero-center .hero-lead { margin-inline: auto; }
.hero-center .row { justify-content: center; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero-note {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    margin-top: var(--s5);
}

/* Gradient text accent — used once per page at most */
.grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* ---- 5.6 Screenshot frames -------------------------------------------- */

/* A browser-chrome frame so product shots read as software, not decoration. */
.shot {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.shot-xl { box-shadow: var(--shadow-xl); border-radius: var(--r-xl); }
.shot img { display: block; width: 100%; }

.shot-chrome {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 9px var(--s4);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}
.shot-dots { display: flex; gap: 6px; flex-shrink: 0; }
.shot-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-strong);
}
.shot-url {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-subtle);
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    padding: 3px var(--s4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hero shot gets a lifted, slightly cropped presentation */
.shot-hero {
    margin-top: var(--s16);
    position: relative;
}
.shot-hero::before {
    content: "";
    position: absolute;
    inset: auto 8% -30px 8%;
    height: 90px;
    background: var(--grad-brand);
    filter: blur(50px);
    opacity: 0.22;
    z-index: -1;
    border-radius: 50%;
}

.shot-caption {
    margin-top: var(--s4);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    text-align: center;
}
.shot-caption code { font-size: 0.92em; }

/* Small inline screenshot, e.g. inside a split */
.shot-inline { box-shadow: var(--shadow-md); }

/* ---- 5.7 Stats --------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.stat {
    background: var(--card-bg);
    padding: var(--s6);
}
.stat-value {
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    font-feature-settings: "tnum", "cv01", "ss01";
}
.stat-value .unit { font-size: 18px; font-weight: 650; color: var(--text-muted); }
.stat-label {
    margin-top: var(--s2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---- 5.8 Feature list -------------------------------------------------- */

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
    position: relative;
    padding-left: 28px;
    margin-bottom: var(--s3);
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: 1.6;
}
.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--emerald-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 11px;
    background-position: center;
    background-repeat: no-repeat;
}
.checklist.tight li { margin-bottom: var(--s2); }
.checklist li strong { color: var(--text); }

.checklist-neutral li::before {
    background-color: var(--primary-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Definition-style feature rows */
.feature-rows { display: grid; gap: var(--s6); }
.feature-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
}
.feature-row .fr-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary-text);
}
.feature-row .fr-icon svg { width: 17px; height: 17px; }
.feature-row h3, .feature-row h4 { margin-bottom: 2px; font-size: var(--fs-body); font-weight: 650; letter-spacing: -0.014em; }
.feature-row p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 0; }

/* ---- 5.9 Pricing ------------------------------------------------------- */

.price-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s5);
    align-items: start;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--s6);
    height: 100%;
}
.plan-featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg);
}
.plan-flag {
    position: absolute;
    top: -11px;
    left: var(--s6);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.plan-name {
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: -0.018em;
    margin-bottom: var(--s1);
}
.plan-for {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    min-height: 2.9em;
    line-height: 1.5;
    margin-bottom: var(--s5);
}
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: var(--s1);
}
.plan-amount {
    font-size: 38px;
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text);
    font-feature-settings: "tnum", "cv01", "ss01";
}
.plan-amount.sm { font-size: 27px; }
.plan-per { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.plan-sub {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    margin-bottom: var(--s5);
    min-height: 1.6em;
}
.plan .btn { margin-bottom: var(--s6); }
.plan-divider {
    border-top: 1px solid var(--border-soft);
    margin-bottom: var(--s5);
}
.plan-features { list-style: none; padding: 0; margin: 0 0 var(--s5); flex: 1; }
.plan-features > li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--text-body);
}
.plan-features > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}
.plan-features .li-head {
    padding-left: 0;
    margin-top: var(--s4);
    margin-bottom: var(--s3);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.plan-features .li-head::before { display: none; }
.plan-features .li-muted { color: var(--text-subtle); }
.plan-features .li-muted::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* Billing toggle */
.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 4px;
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}
.billing-toggle button {
    border: 0;
    background: none;
    padding: 7px var(--s5);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--d-fast), color var(--d-fast), box-shadow var(--d-fast);
}
.billing-toggle button[aria-pressed="true"] {
    background: var(--card-bg);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

/* ---- 5.10 Comparison table -------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card-bg);
    -webkit-overflow-scrolling: touch;
}
table.matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-xs);
    min-width: 780px;
}
table.matrix th, table.matrix td {
    padding: var(--s3) var(--s4);
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
table.matrix thead th {
    position: sticky;
    top: 0;
    background: var(--bg-alt);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    z-index: 1;
}
table.matrix thead th:not(:first-child),
table.matrix td:not(:first-child) { text-align: center; }
table.matrix tbody tr:hover { background: var(--hover); }
table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix td:first-child { color: var(--text); font-weight: 500; }
table.matrix .row-group td {
    background: var(--soft);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
table.matrix .row-group:hover td { background: var(--soft); }
table.matrix .yes { color: var(--emerald-text); font-weight: 700; }
table.matrix .no { color: var(--text-subtle); }
table.matrix .val { font-family: var(--font-mono); font-size: 0.94em; color: var(--text-body); }
table.matrix .note { color: var(--text-muted); font-size: 0.94em; }

/* Plain data table */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
table.data th, table.data td {
    padding: var(--s3) var(--s4);
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
}
table.data thead th {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
table.data tbody tr:last-child td { border-bottom: 0; }

/* ---- 5.11 FAQ / accordion --------------------------------------------- */

.faq { border-top: 1px solid var(--border); }
.faq details {
    border-bottom: 1px solid var(--border);
}
.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s5) 0;
    cursor: pointer;
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--text);
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform var(--d-base) var(--ease-standard);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div {
    padding-bottom: var(--s6);
    max-width: 74ch;
}
.faq details > div p { font-size: var(--fs-sm); color: var(--text-muted); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---- 5.12 Steps / numbered flow --------------------------------------- */

.steps { counter-reset: step; display: grid; gap: var(--s6); }
.step {
    position: relative;
    padding-left: var(--s12);
    counter-increment: step;
}
.step::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary-text);
    font-size: var(--fs-xs);
    font-weight: 750;
    font-feature-settings: "tnum";
}
.step h3, .step h4 { margin-bottom: var(--s2); font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.014em; }
.step p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 0; }

/* Horizontal pipeline flow */
.flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s4);
    align-items: stretch;
}
.flow-node {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s5);
}
.flow-node .flow-n {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-text);
    margin-bottom: var(--s3);
}
.flow-node h3, .flow-node h4 { font-size: var(--fs-sm); font-weight: 650; letter-spacing: -0.01em; margin-bottom: var(--s2); }
.flow-node p { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }

/* Honeypot. Taken out of the layout and off the tab order rather than
   display:none, because some bots skip anything explicitly hidden. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- 5.13 Quote / callout --------------------------------------------- */

.callout {
    display: flex;
    gap: var(--s4);
    padding: var(--s5);
    border-radius: var(--r-md);
    background: var(--primary-softer);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
}
.callout svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--primary-text); }
.callout p { font-size: var(--fs-sm); margin: 0; }
.callout strong { display: block; margin-bottom: 3px; }
.callout.amber { background: var(--amber-soft); border-left-color: var(--amber); }
.callout.amber svg { color: var(--amber-text); }
.callout.emerald { background: var(--emerald-soft); border-left-color: var(--emerald); }
.callout.emerald svg { color: var(--emerald-text); }
.callout.neutral { background: var(--soft); border-left-color: var(--border-strong); }
.callout.neutral svg { color: var(--text-muted); }

/* ---- 5.14 Code block --------------------------------------------------- */

pre {
    margin: 0 0 var(--s4);
    padding: var(--s5);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: #cbd5e1;
    -webkit-overflow-scrolling: touch;
}
pre .c { color: #64748b; }
pre .k { color: #93c5fd; }
pre .s { color: #6ee7b7; }
pre .n { color: #fcd34d; }

/* Terminal-ish framed block */
.term { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.term-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 8px var(--s4);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-2xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.term pre { border: 0; border-radius: 0; margin: 0; }

/* ---- 5.15 CTA band ----------------------------------------------------- */

.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    padding: var(--s16) var(--s12);
    background: var(--grad-brand);
    color: #fff;
    text-align: center;
    isolation: isolate;
}
.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.11) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.11) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(700px 320px at 50% 0%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(700px 320px at 50% 0%, #000, transparent 72%);
    z-index: -1;
}
.cta-band h2 { color: #fff; margin-bottom: var(--s4); }
.cta-band p {
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--fs-lead);
    max-width: 620px;
    margin-inline: auto;
    margin-bottom: var(--s8);
}
.cta-band .btn-primary {
    background: #fff;
    color: var(--primary-active);
    border-color: #fff;
}
.cta-band .btn-primary:hover { background: #f1f5f9; color: var(--primary-active); }
.cta-band .btn-secondary {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
}
.cta-band .btn-secondary:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.cta-band .row { justify-content: center; }
.cta-note { margin-top: var(--s5); font-size: var(--fs-xs); color: rgba(255,255,255,0.72); }

/* ---- 5.16 Forms -------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.field label {
    font-size: var(--fs-xs);
    font-weight: 650;
    color: var(--text);
}
.field .hint { font-size: var(--fs-2xs); color: var(--text-subtle); font-weight: 400; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 11px var(--s4);
    border: 1px solid var(--border-input);
    border-radius: var(--r-md);
    background: var(--card-bg);
    font-size: var(--fs-sm);
    color: var(--text);
    transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-subtle); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.radio-cards { display: grid; gap: var(--s3); }
.radio-card {
    display: flex;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--d-fast), background var(--d-fast);
}
.radio-card:hover { border-color: var(--border-strong); background: var(--hover); }
.radio-card input { margin-top: 3px; accent-color: var(--primary); }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-softer); }
.radio-card strong { display: block; font-size: var(--fs-sm); }
.radio-card span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }

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

.footer {
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    padding-block: var(--s16) var(--s8);
}
.footer-grid {
    display: grid;
    /* Brand plus five link columns: Product, Solutions, Trust, Company, Legal.
       The legal column was added when the policy pages landed; folding those
       links into Company instead made that column twice the length of its
       neighbours. */
    grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
    gap: var(--s8);
    margin-bottom: var(--s12);
}
.footer-brand p {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    max-width: 30ch;
    margin-top: var(--s4);
}
.footer h5, .footer .footer-head {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
    line-height: 1.5;
    margin: 0 0 var(--s4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 9px; }
.footer ul a { font-size: var(--fs-xs); color: var(--text-muted); }
.footer ul a:hover { color: var(--text); }
.footer-base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4) var(--s6);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--s6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-2xs);
    color: var(--text-subtle);
}
.footer-base p { margin: 0; font-size: inherit; color: inherit; }
.footer-base .row { gap: var(--s5); }
.footer-base a { color: var(--text-muted); }

/* ---- 5.18 Draft / disclosure notice ----------------------------------- */

.notice-bar {
    background: var(--amber-soft);
    color: var(--amber-text);
    border-bottom: 1px solid rgba(146, 64, 14, 0.14);
    font-size: var(--fs-2xs);
    font-weight: 550;
    text-align: center;
    padding: 7px var(--gutter);
    line-height: 1.5;
}
.notice-bar strong { color: inherit; font-weight: 750; }
.notice-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Shares the footer's bottom row with the copyright, dropping to its own
   line once the row is too narrow to hold both. Inherits the footer's small
   subtle type. The screenshots are of real software carrying synthetic data,
   and a visitor is entitled to know which half is which. */
.footer-disclosure {
    flex: 1 1 42ch;
    max-width: 78ch;
}

/* ---- 5.19 Logo / evidence strip --------------------------------------- */

.evidence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--s6) var(--s8);
    padding-block: var(--s8);
    border-block: 1px solid var(--border);
}
.evidence-item { display: flex; gap: var(--s3); align-items: flex-start; }
.evidence-item svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.evidence-item strong { display: block; font-size: var(--fs-sm); font-weight: 650; }
.evidence-item span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }

/* ---- 5.20 Tabs --------------------------------------------------------- */

.tabs { border-bottom: 1px solid var(--border); display: flex; gap: var(--s1); overflow-x: auto; }
.tabs button {
    border: 0;
    background: none;
    padding: var(--s3) var(--s5);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--d-fast), border-color var(--d-fast);
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--primary-text); border-bottom-color: var(--primary); }
.tab-panel { padding-top: var(--s8); }
.tab-panel[hidden] { display: none; }

/* ---- 5.21 Anchor nav (in-page) ---------------------------------------- */

.anchor-nav {
    position: sticky;
    top: var(--nav-h);
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.anchor-nav ul {
    display: flex;
    gap: var(--s1);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.anchor-nav ul::-webkit-scrollbar { display: none; }
.anchor-nav li { margin: 0; }
.anchor-nav a {
    display: block;
    padding: var(--s3) var(--s4);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.anchor-nav a:hover { color: var(--text); }
.anchor-nav a.is-active { color: var(--primary-text); border-bottom-color: var(--primary); }

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

.center { text-align: center; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); }

/* Heading-level utility. Use when the document structure requires an h3 (its
   parent section heading is an h2) but the smaller h4 weight is the right
   visual for the component. Keeps heading order valid without restyling. */
.h4 { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.014em; }
.small { font-size: var(--fs-xs); }
.tnum { font-feature-settings: "tnum"; }
.nowrap { white-space: nowrap; }
.mono-sm { font-family: var(--font-mono); font-size: var(--fs-xs); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s2); }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); }
.mt-12 { margin-top: var(--s12); }
.mt-16 { margin-top: var(--s16); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s4); }
.mb-6 { margin-bottom: var(--s6); }
.mb-8 { margin-bottom: var(--s8); }
.mb-12 { margin-bottom: var(--s12); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   7. MOTION
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--ease-emphasized), transform 520ms var(--ease-emphasized);
    will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* JS disabled: never hide content behind a reveal that will not fire. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
    :root {
        --fs-h1: 44px;
        --fs-h2: 30px;
        --s24: 80px;
        --s32: 96px;
    }
    .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { gap: var(--s10); }
}

@media (max-width: 900px) {
    .nav-links, .nav-actions .btn { display: none; }
    .nav-toggle { display: grid; }
    .nav-inner { gap: var(--s4); }
    .nav-actions { margin-left: auto; }

    /* Mobile drawer */
    .nav-mobile {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        padding: var(--s5) var(--gutter) var(--s8);
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--d-base) var(--ease-standard),
                    transform var(--d-base) var(--ease-standard),
                    visibility var(--d-base);
        z-index: 99;
    }
    .nav-mobile[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

    .split, .split.text-right { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
    .split.reverse > :first-child { order: 0; }
    .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .section { padding-block: var(--s16); }
    .section-lg { padding-block: var(--s20); }
    .cta-band { padding: var(--s12) var(--s6); }
    .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    :root {
        --fs-h1: 35px;
        --fs-h2: 26px;
        --fs-h3: 21px;
        --fs-body: 16px;
        --fs-lead: 17px;
        --gutter: 16px;
        --s24: 64px;
    }
    .hero-lead { font-size: 17px; }
    .hero { padding-block: var(--s16) var(--s12); }
    .price-grid, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
    .card, .plan { padding: var(--s5); }
    .card-lg { padding: var(--s6); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-cta .btn { width: 100%; }
    .shot-hero { margin-top: var(--s10); }
    .stat-value { font-size: 25px; }
    .plan-amount { font-size: 33px; }
}

/* Nav drawer is desktop-hidden by default */
.nav-mobile { display: none; }
@media (max-width: 900px) { .nav-mobile { display: block; } }

.nav-mobile-group { margin-bottom: var(--s6); }
.nav-mobile-group h5, .nav-mobile-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin: 0 0 var(--s3);
}
.nav-mobile a {
    display: block;
    padding: var(--s3) 0;
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text-body);
    border-bottom: 1px solid var(--border-soft);
}
.nav-mobile a:hover { color: var(--text); }
.nav-mobile .btn { margin-top: var(--s5); }

/* ==========================================================================
   9. PRINT
   ========================================================================== */

@media print {
    .nav, .nav-mobile, .notice-bar, .anchor-nav, .cta-band { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding-block: 24px; }
    .card, .plan, .shot { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    a { color: #000; text-decoration: underline; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}