/* =========================================================================
   ScreenSharePRO — Design System
   Enterprise SaaS UI · Light + Dark themes · Bootstrap 5 companion

   Brand: blue (#3B82FF) to green (#22C55E) on deep navy. The gradient is for what is LIVE or primary
   (the main button, the stream, progress); a single blue carries links and icons. The token NAMES
   (--ssp-red, --ssp-red-dark, --ssp-red-soft, --ssp-shadow-red) are kept from the old red brand
   because views and inline styles use them - they mean "primary accent", whatever its colour.
   A real error or "needs attention" state uses --ssp-danger, which stays red.
   ========================================================================= */

/* ------------------------------------------------------------ Design tokens */
:root {
    /* Brand. On white the accent is the DEEPER blue: #3B82FF is only 3.7:1 on #fff, too light for
       link text; #2563EB is 5.2:1. The bright brand blue appears in the gradient fills. */
    --ssp-blue: #3B82FF;
    --ssp-green: #22C55E;
    --ssp-grad: linear-gradient(100deg, #3B82FF 0%, #22C55E 100%);
    --ssp-red: #2563EB;
    --ssp-red-dark: #1D4ED8;
    --ssp-red-soft: #EAF1FF;
    --ssp-danger: #DC2626;
    --ssp-focus: rgba(59, 130, 255, .55);
    --ssp-ink: #0A1430;
    --ssp-slate: #334155;
    --ssp-muted: #5B6B86;
    --ssp-line: #E2E8F2;
    --ssp-bg: #ffffff;
    --ssp-bg-alt: #F5F8FD;
    --ssp-bg-soft: #EEF3FB;
    --ssp-card: #ffffff;
    --ssp-white: #ffffff;

    /* Semantic */
    --ssp-text: #1E293B;
    --ssp-heading: #0A1430;
    --ssp-success: #16a34a;
    --ssp-warning: #f59e0b;
    /* Green for FILLS behind white text, and green for small TEXT: the brand green is 3.3:1 against white
       either way, under the 4.5:1 that small text needs. Icons and large marks keep --ssp-success. */
    --ssp-success-strong: #15803D;
    --ssp-success-text: #166534;
    --ssp-warning-text: #92400E; /* still 4.5:1+ on the blue row tint, where #B45309 measured short */

    /* Typography */
    --ssp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ssp-font-head: "Sora", "Inter", system-ui, sans-serif;

    /* Radii */
    /* Radii: small for controls, medium for panels, large for feature surfaces. Tighter than the
       original 8/14/22 - big radii on everything was a large part of what read as "template". */
    --ssp-radius-sm: 8px;
    --ssp-radius: 12px;
    --ssp-radius-lg: 16px;
    --ssp-radius-pill: 999px;

    /* Controls share three heights, so a button, an input and a select line up in any row. */
    --ssp-control-h-sm: 36px;
    --ssp-control-h: 44px;
    --ssp-control-h-lg: 52px;

    /* Spacing scale (4px base). */
    --ssp-space-1: .25rem; --ssp-space-2: .5rem; --ssp-space-3: .75rem; --ssp-space-4: 1rem;
    --ssp-space-5: 1.5rem; --ssp-space-6: 2rem;  --ssp-space-7: 3rem;   --ssp-space-8: 4rem;

    /* Type scale. Headings are Sora; weight steps DOWN the hierarchy so not every heading shouts. */
    --ssp-fs-h1: clamp(2.15rem, 4.2vw, 3.35rem);
    --ssp-fs-h2: clamp(1.65rem, 2.8vw, 2.3rem);
    --ssp-fs-h3: 1.2rem;
    --ssp-line-strong: color-mix(in srgb, var(--ssp-line) 55%, var(--ssp-muted));

    /* Shadows (soft, layered) */
    --ssp-shadow-xs: 0 1px 2px rgba(10, 20, 48, .05);
    --ssp-shadow-sm: 0 1px 2px rgba(10, 20, 48, .05), 0 4px 12px rgba(10, 20, 48, .05);
    --ssp-shadow: 0 2px 4px rgba(10, 20, 48, .04), 0 12px 28px rgba(10, 20, 48, .08);
    --ssp-shadow-lg: 0 4px 8px rgba(10, 20, 48, .05), 0 24px 56px rgba(10, 20, 48, .14);
    --ssp-shadow-red: 0 10px 26px rgba(59, 130, 255, .26);

    /* Layout */
    --ssp-header-h: 68px;
    --ssp-topbar-h: 40px;
    --ssp-container: 1200px;

    --ssp-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* Dark: the deep navy of the home page, on every page. color-scheme makes the browser's own parts (date
   pickers, number spinners, scrollbars, autofill) dark as well. */
[data-theme="dark"] {
    color-scheme: dark;
    --ssp-red: #5B9BFF;
    --ssp-red-dark: #3B82FF;
    --ssp-red-soft: rgba(59, 130, 255, .14);
    --ssp-danger: #F87171;
    --ssp-focus: rgba(96, 165, 250, .8);
    --ssp-ink: #F3F7FF;
    --ssp-slate: #B7C4DD;
    --ssp-muted: #8FA0BD;
    --ssp-line: #1C2A4A;
    --ssp-bg: #060B1A;
    --ssp-bg-alt: #08112A;
    --ssp-bg-soft: #0E1A38;
    --ssp-card: #0C1530;
    --ssp-text: #C9D5EA;
    --ssp-heading: #F3F7FF;
    --ssp-success: #22C55E;
    --ssp-success-text: #4ADE80;
    --ssp-warning-text: #FBBF24;
    --ssp-shadow-red: 0 12px 30px rgba(59, 130, 255, .28);
    --ssp-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --ssp-shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
    --ssp-shadow: 0 12px 34px rgba(0, 0, 0, .5);
    --ssp-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------- Base reset */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--ssp-font-body);
    color: var(--ssp-text);
    background: var(--ssp-bg);
    line-height: 1.65;
    font-size: 1rem;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background var(--ssp-transition), color var(--ssp-transition);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ssp-font-head);
    color: var(--ssp-heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
}

h1 { font-size: var(--ssp-fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: var(--ssp-fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
h3 { font-size: var(--ssp-fs-h3); }
h1, h2 { text-wrap: balance; }
.lead { text-wrap: pretty; }

p { color: var(--ssp-text); }

a { color: var(--ssp-red); text-decoration: none; transition: color var(--ssp-transition); }
/* WCAG 1.4.1: a link inside running text must not differ by colour alone, so it is underlined. Links that
   ARE the component (buttons, nav, cards, footer lists) carry a class or sit outside <p>, so keep their look. */
p a:not([class]), .small a:not([class]), li > span a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ssp-red-dark); }

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

.container { max-width: var(--ssp-container); }
/* A 16px side gutter, and g-5 rows whose negative margins match it below 1400px. Bootstrap g-5 pulls
   each side out by 1.5rem against a 12px container padding, so every g-5 row overflowed the page by 12px
   on tablets - hidden only by body overflow-x:hidden. Fixed at the cause rather than masked. */
.container { padding-left: 1rem; padding-right: 1rem; }
@media (max-width: 1399px) { .row.g-5 { --bs-gutter-x: 2rem; } }

/* Focus visibility for accessibility */
:focus-visible {
    outline: 3px solid var(--ssp-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip link */
/* Shown only for KEYBOARD focus (:focus-visible). With plain :focus it also appeared when focus landed on
   it by mouse, script or a restored page, which read as a stray button over the header. */
.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2000;
    background: var(--ssp-red);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: 0 0 var(--ssp-radius-sm) 0;
    font-weight: 600;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}
.skip-link:focus-visible { transform: none; opacity: 1; pointer-events: auto; color: #fff; }
.pointer-input .skip-link:focus-visible { transform: translateY(-120%); opacity: 0; pointer-events: none; }

/* Section rhythm */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; z-index: 0; }
.section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.bg-alt { background: var(--ssp-bg-alt); }
.bg-soft { background: var(--ssp-bg-soft); }
.bg-ink { background: var(--ssp-ink); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ssp-font-body);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ssp-red);
    margin-bottom: .9rem;
}
.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-head p { color: var(--ssp-muted); font-size: 1.08rem; }
.lead { font-size: 1.18rem; color: var(--ssp-muted); }
.text-muted-ssp { color: var(--ssp-muted) !important; }

/* ----------------------------------------------------------------- Buttons */
/* One system: primary (.btn-ssp), secondary (.btn-outline-ssp), tertiary (.btn-link-ssp), plus the
   on-dark pair used in the CTA band. Three heights from the control tokens; min-height, not height,
   so a label that wraps on a narrow phone grows the button instead of overflowing it. */
.btn {
    font-family: var(--ssp-font-body);
    font-weight: 600;
    font-size: .95rem;
    border-radius: var(--ssp-radius-sm);
    min-height: var(--ssp-control-h);
    padding: .55rem 1.15rem;
    transition: background-color var(--ssp-transition), border-color var(--ssp-transition), color var(--ssp-transition), box-shadow var(--ssp-transition), filter var(--ssp-transition);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    line-height: 1.2;
}
.btn i { font-size: .95em; }
.btn-lg { min-height: var(--ssp-control-h-lg); padding: .7rem 1.5rem; font-size: 1.02rem; }
.btn-sm { min-height: var(--ssp-control-h-sm); padding: .4rem .85rem; font-size: .86rem; }
.btn:focus-visible { outline: 3px solid var(--ssp-focus); outline-offset: 2px; box-shadow: none; }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
    opacity: .55; filter: none; box-shadow: none; pointer-events: none; cursor: not-allowed;
}

.btn-primary,
.btn-ssp {
    background: var(--ssp-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ssp-shadow-red);
}
.btn-primary:hover,
.btn-ssp:hover,
.btn-primary:focus-visible,
.btn-ssp:focus-visible {
    background: var(--ssp-grad);
    border-color: transparent;
    color: #fff;
    filter: brightness(1.08);
}
.btn-primary:active, .btn-ssp:active { filter: brightness(.95); }

.btn-outline-ssp {
    background: var(--ssp-card);
    border-color: var(--ssp-line-strong);
    color: var(--ssp-heading);
    box-shadow: var(--ssp-shadow-xs);
}
.btn-outline-ssp:hover {
    border-color: var(--ssp-red);
    color: var(--ssp-red);
    background: var(--ssp-red-soft);
}

/* Tertiary: a text action with the button's alignment, for "Talk to sales"-weight links. */
.btn-link-ssp {
    background: none; border-color: transparent; color: var(--ssp-red);
    padding-left: .25rem; padding-right: .25rem;
}
.btn-link-ssp:hover { color: var(--ssp-red-dark); text-decoration: underline; text-underline-offset: 3px; }

.btn-ghost {
    background: var(--ssp-bg-soft);
    color: var(--ssp-heading);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--ssp-line); color: var(--ssp-heading); }

.btn-light-ssp { background: #fff; color: var(--ssp-red); border-color: #fff; }
.btn-light-ssp { color: #1D4ED8; }
.btn-light-ssp:hover { background: #EEF3FB; color: #1D4ED8; border-color: #EEF3FB; }
.btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* --------------------------------------------------------------- Top bar */
.topbar {
    background: var(--ssp-ink);
    color: #cbd5e1;
    font-size: .82rem;
    height: var(--ssp-topbar-h);
    display: flex;
    align-items: center;
}
[data-theme="dark"] .topbar { background: #040817; }
.topbar a { color: #cbd5e1; }
.topbar a:hover { color: #fff; }
.topbar .topbar-links { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topbar .topbar-item { display: inline-flex; align-items: center; gap: .4rem; }

/* Language selector (topbar) */
.lang-select-wrap { position: relative; display: inline-flex; align-items: center; }
.lang-select-icon { position: absolute; left: .35rem; font-size: .72rem; color: #cbd5e1; pointer-events: none; }
.lang-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    color: #cbd5e1;
    font-size: .78rem;
    font-family: inherit;
    border-radius: var(--ssp-radius-pill);
    padding: .2rem 1.6rem .2rem 1.4rem;
    cursor: pointer;
    line-height: 1.4;
    transition: background var(--ssp-transition), color var(--ssp-transition);
}
.lang-select:hover { background: rgba(255,255,255,.16); color: #fff; }
.lang-select:focus { outline: 2px solid var(--ssp-red); outline-offset: 1px; }
.lang-select option { color: #1e293b; background: #fff; }

/* Hide Google Translate's default banner & tooltip — we drive it via our own dropdown */
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-te-gadget { font-size: 0 !important; }
.goog-te-gadget .goog-te-combo { margin: 0; }
.goog-tooltip { display: none !important; }
.goog-tooltip:hover { display: none !important; }
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}
body { top: 0 !important; }
.goog-logo-link, .goog-te-balloon-frame { display: none !important; }

/* Theme switch (sliding toggle) */
.theme-switch {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.theme-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 52px;
    height: 28px;
    border-radius: var(--ssp-radius-pill);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    padding: 0 6px;
    transition: background var(--ssp-transition);
    overflow: hidden;
}
.theme-switch:hover .theme-switch-track { background: rgba(255,255,255,.24); }
.theme-switch-icon {
    font-size: .7rem;
    color: rgba(255,255,255,.85);
    z-index: 1;
    line-height: 1;
}
.theme-switch-icon-dark { opacity: .55; }
.theme-switch-icon-light { opacity: 1; }
[data-theme="dark"] .theme-switch-icon-dark { opacity: 1; }
[data-theme="dark"] .theme-switch-icon-light { opacity: .55; }
.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform var(--ssp-transition), background var(--ssp-transition);
}
[data-theme="dark"] .theme-switch-thumb {
    transform: translateX(24px);
    background: var(--ssp-red);
}

/* "Coming Soon" badge (replaces Buy Now while pricing is in testing) */
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--ssp-font-head);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--ssp-red);
    background: var(--ssp-red-soft);
    border: 1px solid var(--ssp-red);
    border-radius: var(--ssp-radius-pill);
    padding: .35rem .85rem;
    cursor: default;
    white-space: nowrap;
}
.coming-soon-badge i { font-size: .72rem; }

/* --------------------------------------------------------------- Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--ssp-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ssp-line);
    transition: box-shadow var(--ssp-transition);
}
.site-header.scrolled { box-shadow: var(--ssp-shadow-sm); }

.navbar-main {
    height: var(--ssp-header-h);
    display: flex;
    align-items: center;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--ssp-font-head); font-weight: 800; font-size: 1.25rem; color: var(--ssp-heading); letter-spacing: -.02em; }
.brand:hover { color: var(--ssp-heading); }
/* Breathing room between the brand and the first menu item (user, 2026-10-03): scales with the viewport
   so the full header still fits at 992px, where it takes over from the drawer. */
.navbar-main > .brand { margin-right: clamp(1rem, 2.6vw, 2.5rem); }
/* The "S" mark is slightly wider than tall (~1.09:1): sized by HEIGHT so it keeps its shape. */
.brand .brand-mark { height: 32px; display: inline-flex; flex: 0 0 auto; }
.brand .brand-mark img { height: 100%; width: auto; }
/* Matches the supplied lockup (2026-10-03): "ScreenShare" in the heading ink, the suffix in solid brand blue. */
.brand strong { color: inherit; font-weight: inherit; }
.brand-pro { color: var(--ssp-red); }
.brand-name { white-space: nowrap; }

/* Primary nav */
.primary-nav { display: flex; align-items: center; gap: .15rem; }
.nav-node { position: static; }
.nav-link-top {
    font-family: var(--ssp-font-body);
    font-weight: 500;
    font-size: .94rem;
    color: var(--ssp-slate);
    padding: .55rem .8rem;
    border-radius: var(--ssp-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    background: none; border: none;
    transition: all var(--ssp-transition);
    white-space: nowrap;
}
/* Neutral hover: the header's only blue fill is the primary CTA, so a hovered link must not look like it. */
.nav-link-top:hover, .nav-node:hover .nav-link-top, .nav-link-top[aria-expanded="true"] {
    color: var(--ssp-heading);
    background: var(--ssp-bg-soft);
}
.nav-link-top:focus-visible { outline: 3px solid var(--ssp-focus); outline-offset: 1px; }
.nav-link-top .fa-chevron-down { font-size: .65rem; transition: transform var(--ssp-transition); }
.nav-node:hover .nav-link-top .fa-chevron-down { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* --------------------------------------------------------------- Mega menu */
.mega {
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--ssp-header-h) - 1px);
    background: var(--ssp-card);
    border-top: 1px solid var(--ssp-line);
    border-bottom: 1px solid var(--ssp-line);
    box-shadow: var(--ssp-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--ssp-transition), transform var(--ssp-transition), visibility var(--ssp-transition);
    z-index: 1029;
}
.nav-node:hover .mega,
.nav-node:focus-within .mega,
.mega.open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-inner { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 2rem; padding: 2.2rem 0; max-width: var(--ssp-container); margin: 0 auto; }
.mega-inner.cols-2 { grid-template-columns: repeat(2, 1fr) 1.2fr; }
/* No promo card (Resources): the columns share the width instead of leaving an empty fourth track. */
.mega-inner.no-promo { grid-template-columns: repeat(3, 1fr); }
.mega-inner.cols-2.no-promo { grid-template-columns: repeat(2, 1fr); }
.mega-col-head { font-family: var(--ssp-font-head); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ssp-muted); margin-bottom: 1rem; }
.nav-node .mega-col-head, .m-accordion .mega-col-head { color: var(--ssp-red); }
.mega-link { display: flex; gap: .75rem; padding: .55rem; border-radius: var(--ssp-radius-sm); align-items: flex-start; transition: background var(--ssp-transition); }
.mega-link:hover { background: var(--ssp-bg-alt); }
.mega-link .mi { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--ssp-red-soft); color: var(--ssp-red); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.mega-link .mt { font-weight: 600; color: var(--ssp-heading); font-size: .92rem; line-height: 1.3; display: block; }
.mega-link .md { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.4; color: var(--ssp-muted); }

.mega-promo { background: radial-gradient(90% 120% at 100% 0%, rgba(34, 197, 94, .30), transparent 60%), linear-gradient(150deg, #123C8C 0%, #0F2B6E 100%); color: #fff; border-radius: var(--ssp-radius); padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.mega-promo .mp-icon { font-size: 1.6rem; margin-bottom: .8rem; }
.mega-promo h4 { color: #fff; font-size: 1.15rem; margin-bottom: .4rem; }
.mega-promo p { color: rgba(255,255,255,.9); font-size: .9rem; margin-bottom: 1rem; }

/* --------------------------------------------------------------- Mobile nav */
.nav-toggle { display: none; background: var(--ssp-bg-soft); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-sm); width: 44px; height: 44px; color: var(--ssp-heading); font-size: 1.2rem; cursor: pointer; }

.mobile-drawer {
    position: fixed; top: 0; right: -100%;
    width: min(88vw, 380px); height: 100dvh;
    background: var(--ssp-bg); z-index: 1060;
    box-shadow: var(--ssp-shadow-lg);
    transition: right var(--ssp-transition);
    overflow-y: auto; padding: 1.25rem;
}
.mobile-drawer.open { right: 0; }
.mobile-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.5); opacity: 0; visibility: hidden; transition: all var(--ssp-transition); z-index: 1050; }
.mobile-backdrop.open { opacity: 1; visibility: visible; }
.m-accordion summary { list-style: none; cursor: pointer; padding: .9rem .25rem; font-family: var(--ssp-font-head); font-weight: 600; color: var(--ssp-heading); border-bottom: 1px solid var(--ssp-line); display: flex; justify-content: space-between; align-items: center; }
.m-accordion summary::-webkit-details-marker { display: none; }
.m-accordion[open] summary .fa-chevron-down { transform: rotate(180deg); }
.m-accordion summary .fa-chevron-down { transition: transform var(--ssp-transition); font-size: .7rem; }
.m-sublink { display: block; padding: .55rem .9rem; color: var(--ssp-slate); font-size: .92rem; border-radius: var(--ssp-radius-sm); }
.m-sublink:hover { background: var(--ssp-bg-alt); color: var(--ssp-red); }
.m-flat { display: block; padding: .9rem .25rem; font-family: var(--ssp-font-head); font-weight: 600; color: var(--ssp-heading); border-bottom: 1px solid var(--ssp-line); }

/* --------------------------------------------------------------- Hero */
.hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(60% 60% at 80% 0%, rgba(59,130,255,.12), transparent 60%),
    radial-gradient(50% 50% at 0% 20%, rgba(34,197,94,.07), transparent 55%);
}
.hero h1 { margin-bottom: 1.2rem; }
.hero .lead { max-width: 560px; margin-bottom: 1.8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; margin-top: 2.2rem; }
.hero-badges .osb { display: inline-flex; align-items: center; gap: .45rem; color: var(--ssp-muted); font-size: .9rem; font-weight: 500; }
.hero-badges .osb i { font-size: 1.15rem; color: var(--ssp-slate); }
.hero-visual { border-radius: var(--ssp-radius-lg); box-shadow: var(--ssp-shadow-lg); overflow: hidden; border: 1px solid var(--ssp-line); background: var(--ssp-card); }

.rating-inline { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ssp-muted); }
.rating-inline .stars { color: #f59e0b; }

/* Trust strip */
.trust-strip { padding: 1.6rem 0; border-top: 1px solid var(--ssp-line); border-bottom: 1px solid var(--ssp-line); }
.trust-logos { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: center; opacity: .7; }
.trust-logos span { font-family: var(--ssp-font-head); font-weight: 800; font-size: 1.15rem; color: var(--ssp-muted); letter-spacing: -.02em; }

/* --------------------------------------------------------------- Cards */
.card-ssp {
    background: var(--ssp-card);
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-lg);
    padding: 1.5rem;
    height: 100%;
    box-shadow: var(--ssp-shadow-xs);
    transition: transform var(--ssp-transition), box-shadow var(--ssp-transition), border-color var(--ssp-transition);
}
[data-theme="dark"] .card-ssp { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), var(--ssp-card); }
/* The lift says "this is clickable", so only a card that IS a link gets it. .card-ssp is also the
   container for forms and panels (sign-in, reset password, account, profile, contact, admin), and there
   the lift made the whole box jump up under the pointer while someone was typing into it. */
/* A link card lifts 2px and gains a shadow and a blue edge: enough to say "clickable", not a bounce. */
a.card-ssp:hover { border-color: color-mix(in srgb, var(--ssp-red) 45%, var(--ssp-line)); box-shadow: var(--ssp-shadow); transform: translateY(-2px); }
a.card-ssp:focus-visible { outline: 3px solid var(--ssp-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.card-ssp:hover { transform: none; } }

.feature-icon {
    width: 44px; height: 44px; border-radius: var(--ssp-radius-sm);
    background: var(--ssp-red-soft); color: var(--ssp-red);
    border: 1px solid color-mix(in srgb, var(--ssp-red) 18%, transparent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-bottom: 1rem;
}
.card-ssp h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card-ssp p { color: var(--ssp-muted); font-size: .95rem; margin-bottom: 1rem; }
.learn-more { font-family: var(--ssp-font-head); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.learn-more i { transition: transform var(--ssp-transition); }
.learn-more:hover i { transform: translateX(4px); }

/* Benefit split */
.benefit-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
.benefit-row.reverse .benefit-media { order: -1; }
.benefit-media { border-radius: var(--ssp-radius-lg); box-shadow: var(--ssp-shadow); overflow: hidden; border: 1px solid var(--ssp-line); position: relative; }
.benefit-media iframe { display: block; width: 100%; }
/* Contact map — keep the embed clear of the footer below it */
.contact-map { margin-bottom: 1.5rem; }
.contact-map iframe { display: block; width: 100%; border: 0; }
.check-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; color: var(--ssp-text); }
.check-list li i { color: var(--ssp-success); margin-top: .25rem; }

/* Stats */
.stat-num { font-family: var(--ssp-font-head); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--ssp-red); letter-spacing: -.03em; }
.stat-label { color: var(--ssp-muted); font-size: .95rem; }

/* Step badges (how it works) */
.step-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--ssp-red-soft); color: var(--ssp-red); display: flex; align-items: center; justify-content: center; font-family: var(--ssp-font-head); font-weight: 800; font-size: 1.2rem; }

/* --------------------------------------------------------------- Pricing */
.pricing-toggle { display: inline-flex; align-items: center; gap: .9rem; background: var(--ssp-bg-soft); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-pill); padding: .35rem; }
.pricing-toggle button { border: none; background: transparent; padding: .5rem 1.2rem; border-radius: var(--ssp-radius-pill); font-family: var(--ssp-font-head); font-weight: 600; color: var(--ssp-muted); cursor: pointer; transition: all var(--ssp-transition); }
.pricing-toggle button.active { background: var(--ssp-grad); color: #fff; box-shadow: var(--ssp-shadow-red); }
.save-badge { background: var(--ssp-success-strong); color: #fff; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: var(--ssp-radius-pill); margin-left: .3rem; }

.plan { background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-lg); padding: 2rem; height: 100%; display: flex; flex-direction: column; position: relative; transition: transform var(--ssp-transition), box-shadow var(--ssp-transition); }
.plan:hover { box-shadow: var(--ssp-shadow); }
.plan.featured { border-color: var(--ssp-red); box-shadow: var(--ssp-shadow); }
.plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ssp-red); color: #fff; font-family: var(--ssp-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .9rem; border-radius: var(--ssp-radius-pill); box-shadow: var(--ssp-shadow-red); }
.plan h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.plan .plan-desc { color: var(--ssp-muted); font-size: .9rem; min-height: 2.6em; }
.plan .price { font-family: var(--ssp-font-head); font-weight: 800; font-size: 2.6rem; color: var(--ssp-heading); letter-spacing: -.03em; }
.plan .price small { font-size: 1rem; font-weight: 600; color: var(--ssp-muted); }
.plan .price-suffix { color: var(--ssp-muted); font-size: .85rem; margin-bottom: 1.3rem; }
.plan ul { list-style: none; padding: 0; margin: 1.2rem 0; flex-grow: 1; }
.plan ul li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; font-size: .92rem; }
.plan ul li i { color: var(--ssp-success); margin-top: .28rem; font-size: .82rem; }

/* Comparison table */
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.compare-table th, .compare-table td { padding: .9rem 1rem; text-align: center; border-bottom: 1px solid var(--ssp-line); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; font-weight: 500; }
.compare-table thead th { font-family: var(--ssp-font-head); color: var(--ssp-heading); }
.compare-table .fa-check { color: var(--ssp-success); }
.compare-table .fa-minus { color: var(--ssp-muted); opacity: .5; }

/* --------------------------------------------------------------- Downloads */
.dl-card { background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-lg); padding: 1.8rem; height: 100%; }
.dl-os-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.dl-os-head i { font-size: 2rem; color: var(--ssp-heading); }
.dl-os-head h3 { margin: 0; }
.dl-req { color: var(--ssp-muted); font-size: .85rem; margin-bottom: 1.2rem; }
.dl-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); margin-bottom: .7rem; transition: all var(--ssp-transition); }
.dl-item:hover { border-color: var(--ssp-red); background: var(--ssp-red-soft); }
.dl-item .dl-meta { display: flex; align-items: center; gap: .8rem; }
.dl-item .dl-meta i { color: var(--ssp-slate); font-size: 1.3rem; width: 26px; text-align: center; }
.dl-item .dl-name { font-weight: 600; color: var(--ssp-heading); font-size: .95rem; }
.dl-item .dl-sub { color: var(--ssp-muted); font-size: .78rem; }

/* Release notes / timeline */
.release { border-left: 2px solid var(--ssp-line); padding: 0 0 1.6rem 1.6rem; position: relative; }
.release::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ssp-red); box-shadow: 0 0 0 4px var(--ssp-red-soft); }
.release:last-child { border-color: transparent; }
.release .ver { font-family: var(--ssp-font-head); font-weight: 700; color: var(--ssp-heading); }
.badge-stable { background: var(--ssp-success-strong); }
.badge-beta { background: var(--ssp-warning); }

/* Upcoming / roadmap features */
.badge-soon { background: var(--ssp-red-soft); color: var(--ssp-red-dark); font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: .22em .55em; border-radius: 999px; vertical-align: middle; margin-left: .5rem; }
[data-theme="dark"] .badge-soon { background: rgba(59,130,255,.18); color: #9CC2FF; }
.feat-soon { color: var(--ssp-red); font-weight: 800; margin-left: .15rem; }
.card-ssp.is-upcoming { border-style: dashed; }
.card-ssp.is-upcoming .feature-icon { opacity: .85; }
.upcoming-note { display: inline-flex; align-items: center; gap: .45rem; color: var(--ssp-red-dark); background: var(--ssp-red-soft); border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font-weight: 600; margin: .25rem 0 1rem; }
[data-theme="dark"] .upcoming-note { background: rgba(59,130,255,.14); color: #9CC2FF; }

/* Feature-request band (end of /features): icon, the question, and the two ways to answer it. */
.feature-request-band {
    display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem 1.5rem; align-items: center;
    padding: 1.5rem 1.75rem; border: 1px dashed color-mix(in srgb, var(--ssp-red) 45%, var(--ssp-line));
    border-radius: var(--ssp-radius-lg); background: var(--ssp-red-soft);
}
.feature-request-copy p { color: var(--ssp-text); }
.feature-request-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 767px) {
    .feature-request-band { grid-template-columns: 1fr; }
    .feature-request-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------- App mockup (_AppWindow.cshtml)
   The desktop app's home screen, rebuilt from a screenshot. It keeps the app's own LIGHT look in both
   site themes on purpose - it depicts the real product - and reflows by container width, not viewport. */
.app-window {
    container-type: inline-size;
    margin: 0; border-radius: 12px; overflow: hidden;
    background: #F6F8FB; color: #1E293B;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 1px 2px rgba(10, 20, 48, .06), 0 24px 60px rgba(10, 20, 48, .18);
    font-family: "Segoe UI", var(--ssp-font-body);
    font-size: 13px; line-height: 1.35; text-align: left;
}
[data-theme="dark"] .app-window { border-color: rgba(148, 170, 220, .25); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.aw-titlebar { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; background: #fff; border-bottom: 1px solid #E8ECF2; color: #475569; font-size: 12px; }
.aw-title { display: inline-flex; align-items: center; gap: 6px; }
.aw-controls { display: inline-flex; gap: 18px; color: #64748B; font-size: 11px; }
.aw-body { display: grid; grid-template-columns: 30% 1fr; min-height: 300px; }
.aw-side { background: #fff; border-right: 1px solid #E8ECF2; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.aw-brand { display: grid; justify-items: center; gap: 2px; margin-bottom: 8px; text-align: center; }
.aw-logo { width: 40px; height: 40px; border-radius: 10px; background: #EAF1FF; display: grid; place-items: center; margin-bottom: 4px; }
.aw-brand strong { font-size: 14px; color: #0F172A; }
.aw-brand small { color: #64748B; font-size: 11px; }
.aw-group { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748B; margin-top: 4px; }
.aw-nav { display: flex; align-items: center; gap: 8px; color: #334155; padding: 3px 0; }
.aw-nav i { width: 14px; color: #475569; }
.aw-side hr { border: 0; border-top: 1px solid #E8ECF2; margin: 4px 0; opacity: 1; }
.aw-nav-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid #E8ECF2; }
.aw-main { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.aw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aw-card { background: #fff; border: 1px solid #E8ECF2; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.aw-card-head { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748B; }
.aw-row { display: flex; align-items: baseline; gap: 10px; color: #475569; }
.aw-row span { min-width: 56px; }
.aw-id { font-family: Consolas, "Cascadia Mono", monospace; font-size: 17px; color: #0B6FD6; letter-spacing: .02em; }
.aw-pass { font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; color: #0B4F9C; }
.aw-refresh { margin-left: auto; color: #64748B; font-size: 12px; }
.aw-btn { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 7px; padding: 7px 8px; font-weight: 600; font-size: 12px; }
.aw-btn-outline { border: 1px solid #BFD3F2; color: #0B6FD6; background: #fff; }
.aw-btn-dark { background: linear-gradient(180deg, #0B6FD6, #0857AE); color: #fff; }
.aw-btn-blue { background: #0A68C2; color: #fff; margin-top: auto; }
.aw-input { display: flex; align-items: center; gap: 8px; border: 1px solid #CBD5E1; border-radius: 6px; padding: 7px 9px; color: #334155; background: #fff; font-family: Consolas, monospace; font-size: 12px; }
.aw-input i { color: #94A3B8; font-size: 11px; }
.aw-input-muted { background: #F8FAFC; color: #64748B; }
.aw-caret { margin-left: auto; }
.aw-check { display: flex; align-items: center; gap: 6px; color: #64748B; font-size: 11px; }
.aw-box { width: 12px; height: 12px; border: 1px solid #94A3B8; border-radius: 3px; }
.aw-status { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid #E8ECF2; border-radius: 10px; padding: 10px 12px; color: #0F172A; }
.aw-status small { color: #64748B; }
.aw-dot { width: 9px; height: 9px; border-radius: 50%; background: #16A34A; align-self: center; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
@container (max-width: 520px) {
    .aw-body { grid-template-columns: 1fr; }
    .aw-side { display: none; }
    .aw-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- Blog */
.post-card { background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform var(--ssp-transition), box-shadow var(--ssp-transition); }
.post-card:hover { box-shadow: var(--ssp-shadow); border-color: color-mix(in srgb, var(--ssp-red) 45%, transparent); }
.post-thumb { aspect-ratio: 16/9; background: var(--ssp-bg-soft); position: relative; display: block; }
.post-body { padding: 1.4rem; display: flex; flex-direction: column; flex-grow: 1; }
.post-cat { font-family: var(--ssp-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ssp-red); }
.post-card h3 { font-size: 1.12rem; margin: .5rem 0; }
.post-card h3 a { color: var(--ssp-heading); }
.post-card h3 a:hover { color: var(--ssp-red); }
.post-meta { display: flex; gap: .8rem; align-items: center; color: var(--ssp-muted); font-size: .82rem; margin-top: auto; padding-top: 1rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--ssp-bg-soft); color: var(--ssp-slate); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-pill); padding: .3rem .8rem; font-size: .82rem; font-weight: 500; transition: all var(--ssp-transition); }
/* Fixed deep blue: white on the dark theme's lighter accent (#5B9BFF) was under 3:1. */
a.chip:hover, .chip.active { background: #2563EB; color: #fff; border-color: #2563EB; }

.article-body { font-size: 1.08rem; line-height: 1.85; }
.article-body ol, .article-body ul { margin-bottom: 1.3rem; }
/* Legal and reference tables (EULA, DPA, Privacy, Licenses) - one theme-aware definition; these were
   three inline light-only copies whose grey header text vanished in dark mode. */
.article-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.article-body th, .article-body td { border: 1px solid var(--ssp-line); padding: .5rem .6rem; text-align: left; vertical-align: top; font-size: .95rem; color: var(--ssp-text); }
.article-body th { background: var(--ssp-bg-soft); color: var(--ssp-heading); font-weight: 600; }
.article-body code { color: var(--ssp-heading); background: var(--ssp-bg-soft); border-radius: 4px; padding: .1em .35em; }
/* In-text links in articles, tables and notes are underlined (WCAG 1.4.1), as in paragraphs. */
.article-body a:not([class]), .board-note a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* ── Page loader (Views/Shared/_PageLoader.cshtml; driven by site.js) ─────────────────────────────
   A cover in the page background with the animated logo. Leaves upwards with a curved lower edge; comes
   back up from below with a curved upper edge when an internal link is followed. Only with JavaScript.
   Fail-safe: whatever the script does, CSS hides it 4 s after it was last shown. */
.page-loader {
    position: fixed; inset: 0; z-index: 5000;
    display: none; align-items: center; justify-content: center;
    background: var(--ssp-bg);
    will-change: transform;
    animation: pl-failsafe 0s linear 4s forwards;
}
html.js .page-loader { display: flex; }
.page-loader.is-leaving {
    transform: translateY(-100%);
    border-radius: 0 0 50% 50% / 0 0 16vh 16vh;
    transition: transform .8s cubic-bezier(.76, 0, .24, 1), border-radius .8s cubic-bezier(.76, 0, .24, 1);
}
.page-loader.is-leaving .pl-inner { opacity: 0; transform: translateY(-24px); transition: opacity .35s ease, transform .5s ease; }
html.js .page-loader.is-hidden { display: none; }
.page-loader.is-arriving { transform: translateY(100%); border-radius: 50% 50% 0 0 / 16vh 16vh 0 0; animation: none; }
.page-loader.is-arriving.is-in {
    transform: translateY(0); border-radius: 0;
    transition: transform .55s cubic-bezier(.76, 0, .24, 1), border-radius .55s cubic-bezier(.76, 0, .24, 1);
    animation: pl-failsafe 0s linear 4s forwards;
}
.pl-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.pl-logo { display: block; width: 96px; height: auto; overflow: visible; }
.pl-hook { transform-box: view-box; transform-origin: 50% 50%; }
.pl-bar { position: relative; width: 120px; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ssp-red) 16%, transparent); }
.pl-bar > span { position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--ssp-grad); }
@media (prefers-reduced-motion: no-preference) {
    /* The hooks slide in from opposite corners and interlock, then keep breathing apart and back. */
    .pl-hook-blue  { animation: pl-in-blue .7s cubic-bezier(.22, 1, .36, 1) both, pl-breathe-blue 1.6s ease-in-out .7s infinite; }
    .pl-hook-green { animation: pl-in-green .7s cubic-bezier(.22, 1, .36, 1) .08s both, pl-breathe-green 1.6s ease-in-out .78s infinite; }
    .pl-logo { animation: pl-pulse 1.6s ease-in-out .7s infinite; }
    .pl-bar > span { animation: pl-shimmer 1.2s cubic-bezier(.65, 0, .35, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .page-loader.is-leaving, .page-loader.is-arriving.is-in { transform: none; border-radius: 0; transition: opacity .25s ease; }
    .page-loader.is-leaving { opacity: 0; }
    .page-loader.is-arriving { transform: none; border-radius: 0; opacity: 0; }
    .page-loader.is-arriving.is-in { opacity: 1; }
}
@keyframes pl-in-blue  { from { transform: translate(-260px, -220px) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pl-in-green { from { transform: translate(260px, 220px) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pl-breathe-blue  { 0%, 100% { transform: none; } 50% { transform: translate(-34px, -26px); } }
@keyframes pl-breathe-green { 0%, 100% { transform: none; } 50% { transform: translate(34px, 26px); } }
@keyframes pl-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 14px rgba(37, 99, 235, .25)); } 50% { transform: scale(1.04); filter: drop-shadow(0 10px 22px rgba(34, 197, 94, .35)); } }
@keyframes pl-shimmer { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes pl-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }

/* Contact form "I'm not a robot" check (js/captcha.js). */
.captcha {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    padding: .85rem 1rem; border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-sm, 8px);
    background: var(--ssp-bg-soft);
}
.captcha-box { display: inline-flex; align-items: center; gap: .65rem; margin: 0; cursor: pointer; font-weight: 600; color: var(--ssp-heading); }
.captcha-check { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: #16A34A; cursor: pointer; }
.captcha-check:disabled { cursor: default; }
.captcha-state { font-size: .88rem; color: var(--ssp-muted); }
.captcha-state:empty { display: none; }
.captcha.is-busy .captcha-state::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .4em; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: captcha-spin .8s linear infinite; }
.captcha.is-done { border-color: color-mix(in srgb, #16A34A 45%, var(--ssp-line)); }
.captcha.is-done .captcha-state { color: var(--ssp-success-text, #15803D); font-weight: 600; }
.captcha.is-error .captcha-state { color: #DC2626; }
[data-theme="dark"] .captcha.is-error .captcha-state { color: #F87171; }
.captcha-note { margin-left: auto; font-size: .78rem; color: var(--ssp-muted); }
@keyframes captcha-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .captcha.is-busy .captcha-state::before { animation-duration: 2.4s; } }
.legal-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--ssp-line); margin-bottom: 1.5rem; }
.legal-tabs a { padding: .6rem 1.1rem; text-decoration: none; font-weight: 600; color: var(--ssp-slate); border-bottom: 3px solid transparent; }
.legal-tabs a:hover { color: var(--ssp-heading); }
.legal-tabs a.active { color: var(--ssp-red); border-bottom-color: var(--ssp-red); }
.article-body li { margin-bottom: .4rem; }
.doc-guides { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.doc-guides a { font-weight: 600; }
.article-body h2 { margin: 2.2rem 0 1rem; }
.article-body p { margin-bottom: 1.3rem; color: var(--ssp-text); }
.prose-narrow { max-width: 760px; }

/* --------------------------------------------------------------- FAQ */
.faq-item { border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); margin-bottom: .8rem; overflow: hidden; background: var(--ssp-card); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--ssp-font-head); font-weight: 600; color: var(--ssp-heading); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .fa-plus { color: var(--ssp-red); transition: transform var(--ssp-transition); flex-shrink: 0; }
.faq-item[open] summary .fa-plus { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 1.3rem 1.2rem; color: var(--ssp-muted); }

/* --------------------------------------------------------------- Forms */
.form-control, .form-select { border-radius: var(--ssp-radius-sm); border: 1px solid var(--ssp-line); padding: .75rem .9rem; background-color: var(--ssp-card); color: var(--ssp-text); transition: all var(--ssp-transition); }
.form-control:focus, .form-select:focus { border-color: var(--ssp-red); box-shadow: 0 0 0 3px rgba(59,130,255,.18); background-color: var(--ssp-card); color: var(--ssp-text); }
.form-label { font-family: var(--ssp-font-head); font-weight: 600; font-size: .88rem; color: var(--ssp-heading); margin-bottom: .35rem; }
.form-panel { background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-lg); padding: 2rem; box-shadow: var(--ssp-shadow-sm); }

/* Restore Bootstrap select dropdown arrow (uses background-color above so the SVG arrow survives) */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4.5 6.5a.5.5 0 0 1 .7 0L8 9.3l2.8-2.8a.5.5 0 0 1 .7.7l-3.1 3.1a.5.5 0 0 1-.7 0L4.5 7.2a.5.5 0 0 1 0-.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px;
    padding-right: 2.4rem;
}
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4.5 6.5a.5.5 0 0 1 .7 0L8 9.3l2.8-2.8a.5.5 0 0 1 .7.7l-3.1 3.1a.5.5 0 0 1-.7 0L4.5 7.2a.5.5 0 0 1 0-.7z'/%3E%3C/svg%3E");
}
.form-select option { color: #111; background: #fff; }
[data-theme="dark"] .form-select option { color: #e2e8f0; background: #0C1530; }

/* --------------------------------------------------------------- CTA band */
.cta-band { background: radial-gradient(80% 140% at 100% 0%, rgba(34, 197, 94, .28), transparent 60%), linear-gradient(135deg, #0F2B6E 0%, #123C8C 55%, #0E4A43 100%); color: #fff; border-radius: var(--ssp-radius-lg); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 0% 100%, rgba(59,130,255,.22), transparent 55%); pointer-events: none; }
.cta-band h2, .cta-band p { color: #fff; position: relative; }
.cta-band p { opacity: .92; }

/* --------------------------------------------------------------- Breadcrumb */
.crumbs { padding: 1rem 0; font-size: .85rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--ssp-muted); }
.crumbs li a { color: var(--ssp-muted); }
.crumbs li a:hover { color: var(--ssp-red); }
.crumbs li[aria-current="page"] { color: var(--ssp-heading); font-weight: 600; }
.crumbs .sep { color: var(--ssp-line); }

/* Page header */
.page-hero { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--ssp-bg-alt); border-bottom: 1px solid var(--ssp-line); }
.page-hero h1 { margin-bottom: .8rem; }
.page-hero .lead { max-width: 680px; }

/* Benefit detail hero icon — slightly larger than the inline card icon */
.page-hero .feature-icon { width: 64px; height: 64px; font-size: 1.7rem; margin-bottom: 1.3rem; }

/* Deep-dive cards: keep the inner check-list tight under the body copy */
.card-ssp .check-list { margin-top: 1rem; }
.card-ssp .check-list li { font-size: .9rem; margin-bottom: .55rem; }
.card-ssp .check-list li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Footer */
.site-footer { background: var(--ssp-ink); color: #cbd5e1; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; position: relative; z-index: 2; }
[data-theme="dark"] .site-footer { background: #040817; border-top: 1px solid var(--ssp-line); }
.site-footer h5 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; font-family: var(--ssp-font-head); }
/* The footer is navy in BOTH themes, so its text colours are fixed - the global p colour (dark in light
   mode) made the tagline invisible here. */
.site-footer p { color: #94a3b8; }
.site-footer a { color: #94a3b8; display: block; padding: .3rem 0; font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-brand { font-family: var(--ssp-font-head); font-weight: 800; font-size: 1.35rem; color: #fff; display: inline-flex; align-items: center; gap: .5rem; }
.footer-brand strong { color: #5B9BFF; } /* fixed: the footer is navy in both themes; #2563EB was 3.4:1 there */
.site-footer .text-muted-ssp { color: #94a3b8 !important; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.footer-social a:hover { background: var(--ssp-red); color: #fff; }
.newsletter input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; }
.newsletter input::placeholder { color: #94a3b8; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; color: #94a3b8; }

/* Sticky mobile CTA */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background: var(--ssp-card); border-top: 1px solid var(--ssp-line); padding: .6rem .9rem; display: none; gap: .6rem; box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
.sticky-cta .btn { flex: 1; justify-content: center; }

/* WhatsApp float */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 1035; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: var(--ssp-shadow); transition: transform var(--ssp-transition); }
.wa-float:hover { transform: scale(1.08); color: #fff; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    * { animation: none !important; }
}

/* --------------------------------------------------------------- Account menu
   The signed-in control in the header, and its panel.

   Three actions sit in .header-actions and they are deliberately three different SHAPES — Contact is
   text, Download is the one filled pill, the account is an outline pill with a disc. Before this they
   were two adjacent pills of the same size, which read as a single control. Nothing here invents a
   colour: it is all existing --ssp-* tokens, so both themes follow automatically.               */

/* Separates navigation from actions. A rule rather than more whitespace, because whitespace alone
   was what let the two pills merge in the first place. */
.header-rule {
    width: 1px;
    height: 24px;
    background: var(--ssp-line);
    margin: 0 .35rem 0 .75rem;
    flex: 0 0 auto;
}

/* The actions never shrink or wrap: the nav beside them has flexible items and can absorb the
   squeeze, whereas a shrinking button breaks its own label across two lines. Found by rendering it —
   "Sign in" was coming out as "Sign / in" at 1600px before this. */
.header-actions { flex: 0 0 auto; }
.header-actions > * { flex: 0 0 auto; }
.header-actions .btn, .account-trigger, .header-signin { white-space: nowrap; }
.header-signin i { font-size: .8rem; }
.header-signin {
    min-height: var(--ssp-control-h-sm);
    padding: .4rem .8rem;
    border: 1px solid var(--ssp-line-strong);
    border-radius: var(--ssp-radius-sm);
    color: var(--ssp-heading);
}
.header-signin:hover { border-color: var(--ssp-red); background: var(--ssp-red-soft); color: var(--ssp-red); }

.account-menu { position: relative; }

.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .7rem .35rem .35rem;
    background: none;
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-pill);
    color: var(--ssp-slate);
    font-family: var(--ssp-font-head);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color var(--ssp-transition), background var(--ssp-transition);
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] { border-color: var(--ssp-red); background: var(--ssp-red-soft); }
.account-trigger .fa-chevron-down { font-size: .62rem; transition: transform var(--ssp-transition); }
.account-trigger[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.account-avatar {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: var(--ssp-radius-pill);
    background: var(--ssp-red);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.account-avatar-lg { width: 40px; height: 40px; flex-basis: 40px; font-size: 1rem; }

.account-trigger-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.account-hello { font-size: .68rem; font-weight: 500; color: var(--ssp-muted); }
/* Capped and ellipsised. Without a cap the label is as wide as whatever the account is called, and an
   email-derived fallback like "er.vishalverma09" is wide enough to push the whole row over 1200px. A
   customer who sets a first name gets a short label and never sees the truncation. */
.account-name { color: var(--ssp-heading); max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A payment needing attention is worth one dot and no more — the panel carries the explanation. */
.account-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ssp-warning);
    flex: 0 0 8px;
}

.account-panel {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    width: 20rem;
    background: var(--ssp-card);
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius);
    box-shadow: var(--ssp-shadow-lg);
    padding: .5rem;
    z-index: 1040;
}
.account-panel[hidden] { display: none; }

.account-panel-head { display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem .8rem; }
.account-panel-id { display: flex; flex-direction: column; min-width: 0; }
.account-panel-name { font-family: var(--ssp-font-head); font-weight: 700; color: var(--ssp-heading); }
.account-panel-email { font-size: .8rem; color: var(--ssp-muted); overflow: hidden; text-overflow: ellipsis; }

/* Licence state leads the panel: it is the thing this menu is opened to check. */
.account-licence {
    background: var(--ssp-bg-alt);
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-sm);
    padding: .7rem .8rem;
    margin-bottom: .5rem;
}
.account-licence.is-pro { border-left: 3px solid var(--ssp-success); }
.account-licence.is-free { border-left: 3px solid var(--ssp-line); }
.account-licence-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: .85rem; }
.account-licence-row + .account-licence-row { margin-top: .3rem; }
.account-licence-label { color: var(--ssp-muted); }
.account-licence-value { font-weight: 600; color: var(--ssp-heading); text-align: right; }
.account-licence-note { font-size: .78rem; color: var(--ssp-warning); margin: .5rem 0 0; }

.account-panel-cta { width: 100%; justify-content: center; margin-bottom: .35rem; }

.account-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .65rem;
    border-radius: var(--ssp-radius-sm);
    color: var(--ssp-slate);
    font-size: .9rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background var(--ssp-transition), color var(--ssp-transition);
}
.account-item i { width: 1rem; text-align: center; color: var(--ssp-muted); font-size: .85rem; }
.account-item:hover { background: var(--ssp-bg-alt); color: var(--ssp-red); }
.account-item:hover i { color: var(--ssp-red); }

/* Sign out is ruled off: it undoes the session, and should not sit flush against navigation rows. */
.account-signout { margin: .35rem 0 0; padding-top: .35rem; border-top: 1px solid var(--ssp-line); }
.account-item-button { font-family: inherit; }

/* Between the mobile breakpoint and a roomy desktop the header has more to say than it has room
   for. Shed the least load-bearing parts first, in order: the greeting word, then the name, then the
   Contact link (which is still in the drawer, the footer and the top bar). The Download pill and the
   identity disc survive to the end because they are the two things the header exists to carry. */
/* WHY THIS IS NOT IN A MEDIA QUERY. `.container` is capped at 1200px, so the space the header has to
   work in is the SAME at 1280px and at 2560px — a viewport-width breakpoint says nothing about
   whether the row fits. Tightening the nav unconditionally is what actually guarantees it.

   The measured problem: the account control is about 105px wider than the "Sign in" text it replaces,
   which pushed the row past 1200px and compressed the nav — so nav items visibly MOVED when you
   signed in. This claws that back from the nav's padding, where there is the most slack and the least
   cost. */
.nav-link-top { padding-left: .55rem; padding-right: .55rem; font-size: .9rem; }
.primary-nav { gap: 0; flex: 0 0 auto; }
.header-actions { gap: .35rem; }
.header-actions .btn-sm { padding-left: .9rem; padding-right: .9rem; }
.header-rule { margin: 0 .2rem 0 .45rem; }

/* MEASURED, at 1440px, before this: brand 132→340, nav 350→1131, Downloads 1159→1301,
   Sign in 1310→1390. That is 1258px of content in a 1200px container — the header was already
   spilling into the page margin while anonymous, which is why adding anything to it clipped. The
   rules above claw back roughly 60px so the anonymous row genuinely fits.

   The name label is then shown only where there is room for it. Below 1400px the trigger drops to
   the disc alone, which is NARROWER than the "Sign in" text it replaces — so signing in can never
   make the header wider than it is for a visitor, at any width. */
@media (max-width: 1400px) {
    .account-trigger-text { display: none; }
    .account-trigger { padding: .3rem .5rem .3rem .3rem; }
}

/* Drawer equivalent — inline, because a dropdown inside a drawer is a tap trap. */
.drawer-account {
    display: flex; align-items: center; gap: .7rem;
    padding: .9rem .25rem;
    border-bottom: 1px solid var(--ssp-line);
}

/* --------------------------------------------------------------- Release notes
   A version rail: the version sticks while its highlights scroll past. The vertical line is drawn
   on the list, not per item, so it is continuous rather than segmented.                          */
/* Centred and capped. Full-container width put the highlights at ~110 characters a line — measured
   off a render — which is half again the comfortable maximum, and it left the rail stranded at the
   far left under a centred heading. */
.rn-rail { list-style: none; margin: 0 auto; padding: 0; max-width: 58rem; }

.rn-entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: 0 0 2.5rem;
}
.rn-entry:last-child { padding-bottom: 1rem; }

.rn-marker { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rn-list { margin: 0; max-width: 68ch; }

@media (min-width: 768px) {
    .rn-rail { border-left: 1px solid var(--ssp-line); }
    .rn-entry { grid-template-columns: 11rem minmax(0, 1fr); gap: 0 2rem; padding-left: 2rem; position: relative; }

    /* The node on the rail. Sized to sit centred on the 1px line. */
    .rn-entry::before {
        content: "";
        position: absolute;
        left: -5px; top: .45rem;
        width: 9px; height: 9px;
        border-radius: 50%;
        background: var(--ssp-red);
        box-shadow: 0 0 0 4px var(--ssp-bg);
    }

    .rn-marker { position: sticky; top: calc(var(--ssp-header-h) + 1.5rem); align-self: start; align-items: flex-start; flex-direction: column; gap: .4rem; }
}

.rn-footer {
    max-width: 58rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 1.75rem;
    background: var(--ssp-bg-alt);
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius);
}
.rn-footer h2 { margin: 0 0 .35rem; font-size: 1.25rem; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
    .mega-inner { grid-template-columns: repeat(2, 1fr); }
    .mega-promo { grid-column: 1 / -1; }
}
/* The HEADER collapses to the drawer earlier than the rest of the layout does, and on its own
   breakpoint. Seven nav items plus the brand plus the actions need about 1150px; below that the
   Downloads pill was being cut in half and the sign-in control pushed off screen entirely — verified
   at 1100px and 1160px, and it happened whether signed in or not, so it predates the account menu.
   1240 is the first width that renders the whole row with room to spare; 1160 still clipped the disc.
   The page layout rules stay at 991px because they are about content columns, not this row.
   2026-10-02: the nav is FIVE items now (Features, Compare, Pricing, Resources + Download/Sign in), about
   850px signed out and ~940px with the account disc, so the full header returns at 992px - a laptop at
   1024 no longer gets the phone menu. */
@media (max-width: 991px) {
    /* .header-rule is a child of .navbar-main, not .header-actions, so it needs naming here too. */
    .primary-nav, .header-actions .desktop-only, .navbar-main > .desktop-only { display: none; }
    .nav-toggle { display: inline-flex; }
}

@media (max-width: 991px) {
    .benefit-row { grid-template-columns: 1fr; gap: 2rem; }
    .benefit-row.reverse .benefit-media { order: 0; }
    .sticky-cta { display: flex; }
    body { padding-bottom: 64px; }
    .wa-float { bottom: 74px; }
}
@media (max-width: 767px) {
    .topbar .topbar-links .hide-sm { display: none; }
    .hero { text-align: center; }
    .hero .lead { margin-left: auto; margin-right: auto; }
    .hero-badges { justify-content: center; }
}
@media (min-width: 992px) {
    .mobile-drawer, .mobile-backdrop { display: none; }
}

/* ----------------------------------------------------------- Cookie consent */
/* Floating cookie icon (bottom-left) — opens a consent popup on click. */
.cookie-btn {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1090;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--ssp-red);
    color: #fff;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ssp-shadow-red);
    transition: transform var(--ssp-transition), background var(--ssp-transition), box-shadow var(--ssp-transition);
}
.cookie-btn:hover { transform: scale(1.08); background: var(--ssp-red-dark); }
.cookie-btn:focus-visible { outline: 3px solid var(--ssp-focus); outline-offset: 2px; }
.cookie-btn[aria-expanded="true"] { transform: scale(.92); }
.cookie-btn-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--ssp-radius-pill);
    background: var(--ssp-warning);
    color: #1f2937;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ssp-bg);
    display: none;
}
.cookie-btn.has-notice .cookie-btn-badge { display: block; }

/* Consent popup */
.cookie-popup {
    position: fixed;
    left: 18px;
    bottom: 82px;
    z-index: 1100;
    width: min(380px, calc(100vw - 36px));
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.98);
    transform-origin: bottom left;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, visibility .28s ease;
}
.cookie-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.cookie-popup-card {
    position: relative;
    background: var(--ssp-card);
    color: var(--ssp-text);
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius);
    box-shadow: var(--ssp-shadow-lg);
    padding: 1.25rem 1.25rem 1.1rem;
}
.cookie-popup-close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--ssp-bg-soft);
    color: var(--ssp-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ssp-transition), color var(--ssp-transition);
}
.cookie-popup-close:hover { background: var(--ssp-red-soft); color: var(--ssp-red); }
.cookie-popup-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
    padding-right: 2rem;
}
.cookie-popup-head .cookie-consent-icon {
    font-size: 1.5rem;
    color: var(--ssp-red);
    flex-shrink: 0;
}
.cookie-popup-head h2 {
    font-size: 1.15rem;
    margin: 0;
    color: var(--ssp-heading);
}
.cookie-popup-text {
    margin: 0 0 1rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ssp-text);
}
.cookie-popup-text a { color: var(--ssp-red); text-decoration: underline; }
.cookie-popup-text a:hover { color: var(--ssp-red-dark); }

/* Preference toggles */
.cookie-popup-prefs {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1rem;
}
.cookie-pref {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .6rem .7rem;
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-sm);
    background: var(--ssp-bg-alt);
    cursor: pointer;
    transition: border-color var(--ssp-transition), background var(--ssp-transition);
}
.cookie-pref:hover { border-color: var(--ssp-red); }
.cookie-pref input[type="checkbox"] {
    margin-top: .2rem;
    width: 18px;
    height: 18px;
    accent-color: var(--ssp-red);
    flex-shrink: 0;
    cursor: pointer;
}
.cookie-pref-body { display: flex; flex-direction: column; gap: .1rem; }
.cookie-pref-body strong { font-size: .85rem; color: var(--ssp-heading); font-weight: 600; }
.cookie-pref-body small { font-size: .76rem; color: var(--ssp-muted); line-height: 1.4; }
.cookie-pref-tag {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: var(--ssp-radius-pill);
    background: var(--ssp-bg-soft);
    color: var(--ssp-muted);
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Actions */
.cookie-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}
.cookie-popup-actions .btn { flex: 1 1 auto; min-width: 0; }

@media (max-width: 767px) {
    .cookie-btn { left: 14px; bottom: 74px; }
    .cookie-popup { left: 14px; bottom: 138px; }
}
/* Never taller than the space above its anchor: on a short phone the card otherwise ran up under the
   header and covered the page. It scrolls inside itself instead, so the action buttons stay reachable. */
.cookie-popup-card { max-height: calc(100vh - 82px - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 767px) {
    .cookie-popup-card { max-height: calc(100vh - 138px - 72px); }
}

/* ── Desktop-vs-browser capability matrix (Downloads) ────────────────────────
   Four availability columns (host desktop/browser, viewer desktop/browser) grouped
   under two spanning headers. The table scrolls inside .table-responsive rather than
   widening the page; the capability column stays put so a row stays readable while
   scrolling horizontally on a phone. */
.matrix-wrap {
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-lg);
    background: var(--ssp-card);
    overflow-x: auto;
}

.matrix-table { margin: 0; font-size: .95rem; }

.matrix-table thead th {
    background: var(--ssp-bg-soft);
    color: var(--ssp-heading);
    font-family: var(--ssp-font-head);
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--ssp-line);
    white-space: nowrap;
}

.matrix-group-head { border-left: 1px solid var(--ssp-line) !important; }
.matrix-subhead th { font-size: .82rem; font-weight: 600; color: var(--ssp-muted); }
.matrix-subhead th i { margin-right: .35rem; color: var(--ssp-muted); }

/* Group separator rows ("Remote control", "Display", …). */
.matrix-section-row th {
    background: var(--ssp-bg-alt);
    color: var(--ssp-heading);
    font-family: var(--ssp-font-head);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    padding: .6rem 1rem;
}

.matrix-table tbody td { text-align: center; vertical-align: middle; }

.matrix-feature-col { text-align: left !important; min-width: 17rem; }

.matrix-feature {
    text-align: left;
    font-weight: 600;
    color: var(--ssp-text);
    min-width: 17rem;
}

/* Per-row qualifier, e.g. "Requires the host to allow it". */
.matrix-note {
    display: block;
    font-weight: 400;
    font-size: .8rem;
    color: var(--ssp-muted);
    margin-top: .15rem;
}

.matrix-yes { color: var(--ssp-success); }
.matrix-no  { color: #cbd5e1; }
.matrix-na  { color: #cbd5e1; font-weight: 700; }

.matrix-legend {
    margin: 1rem 0 0;
    font-size: .85rem;
    color: var(--ssp-muted);
    text-align: center;
}

/* Pin the capability column while the availability columns scroll. */
@media (max-width: 991px) {
    .matrix-table { font-size: .88rem; }
    .matrix-feature-col,
    .matrix-feature {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--ssp-card);
        min-width: 13rem;
    }
    .matrix-section-row th { position: sticky; left: 0; }
}

/* Callout above the matrix for the single rule that explains most of the crosses. */
.matrix-keypoint {
    margin-top: .9rem;
    padding: .85rem 1.1rem;
    border: 1px solid var(--ssp-line);
    border-left: 3px solid var(--ssp-red);
    border-radius: var(--ssp-radius-lg);
    background: var(--ssp-bg-soft);
    color: var(--ssp-text);
    font-size: .95rem;
    text-align: left;
}

.matrix-keypoint i { color: var(--ssp-red); margin-right: .45rem; }

/* Header icons sit on the two host-group spans. */
.matrix-table thead .matrix-group-head i { margin-right: .4rem; }

/* Inline qualifier beside a billing date - explains why a "first payment" lands tomorrow rather
   than next month. Muted and smaller: it is context for a date, not a second value. */
.account-hint {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--ssp-muted, #6b7280);
}

/* Pending email-verification banner, rendered under the header on every page while an account has an
   unconfirmed address. Amber rather than red: verification is an outstanding step, not an error, and
   it must not look like a failed payment. */
.verify-banner {
    background: rgba(245, 158, 11, .12);
    border-bottom: 1px solid rgba(245, 158, 11, .35);
    padding: .6rem 0;
    font-size: .9rem;
}
.verify-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; }
.verify-banner-text { color: var(--ssp-heading); }
.verify-banner-text i { color: var(--ssp-warning); margin-right: .4rem; }

/* ---------------------------------------------------------------- Admin area */
.admin-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }
.admin-nav a {
    padding: .45rem 1rem; border-radius: var(--ssp-radius-pill);
    background: var(--ssp-bg-soft); color: var(--ssp-text); font-weight: 600; font-size: .9rem;
}
.admin-nav a.is-active { background: #2563EB; color: #fff; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.admin-stat {
    background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius);
    padding: 1rem; font-size: .85rem; color: var(--ssp-muted);
}
.admin-stat-n { display: block; font-family: var(--ssp-font-head); font-size: 1.6rem; font-weight: 700; color: var(--ssp-heading); }

.admin-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.admin-filters input, .admin-filters select {
    padding: .5rem .8rem; border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-sm);
    background: var(--ssp-card); color: var(--ssp-text); font: inherit; font-size: .9rem;
}

.admin-table { font-size: .88rem; }
.admin-table td, .admin-table th { vertical-align: middle; }
.admin-row-disabled { opacity: .6; }
.admin-subrow td { font-size: .82rem; color: var(--ssp-muted); padding-top: 0; }
.admin-ref { font-size: .78rem; color: var(--ssp-muted); word-break: break-all; }

.admin-chip {
    display: inline-block; padding: .1rem .5rem; border-radius: var(--ssp-radius-pill);
    background: var(--ssp-bg-soft); border: 1px solid var(--ssp-line);
    font-size: .72rem; font-weight: 700; color: var(--ssp-muted);
}
.admin-chip.is-ok { color: var(--ssp-success); border-color: rgba(22, 163, 74, .35); }
.admin-chip.is-warn { color: var(--ssp-warning); border-color: rgba(245, 158, 11, .35); }
.admin-chip.is-bad { color: var(--ssp-danger); border-color: rgba(220, 38, 38, .35); }

.admin-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.admin-plan-form { display: flex; gap: .3rem; align-items: center; }
.admin-plan-form select, .admin-plan-form input {
    padding: .3rem .5rem; border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-sm);
    background: var(--ssp-card); color: var(--ssp-text); font: inherit; font-size: .8rem;
}
.admin-plan-form input[type="number"] { width: 4.5rem; }

/* ------------------------------------------------- Admin charts (server-rendered SVG)
   Validated categorical palette - all six checks pass against BOTH the light (#ffffff) and dark
   (#131f36) card surfaces, so one set of steps serves both themes:
     Monthly #EF4438 · Annual #2563EB · Free #0F9D8F
   These are DATA colours, deliberately not the brand tokens: the red here means "Monthly", and it was
   kept when the brand moved from red to blue/green so the validated palette did not have to be redone.
   Worst adjacent pair: Free/Annual deltaE 21.6 deutan, 8.4 tritan, 23.6 normal vision. */
:root {
    --chart-1: #EF4438;   /* Monthly - first in fixed order (the former brand hue) */
    --chart-2: #2563EB;   /* Annual */
    --chart-3: #0F9D8F;   /* Free */
    --chart-grid: rgba(100, 116, 139, .22);
}
[data-theme="dark"] { --chart-grid: rgba(148, 163, 184, .25); }

.admin-panel {
    background: var(--ssp-card); border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius); padding: 1.2rem; margin-top: 1.25rem;
}
.admin-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .admin-panel-grid { grid-template-columns: 1fr; } }

.admin-section-head { margin-top: 2.5rem; font-size: 1.25rem; }
.admin-stats-headline { margin-bottom: .5rem; }
.admin-stats-minor { margin-top: 1.25rem; }
.admin-stats-minor .admin-stat-n { font-size: 1.25rem; }
a.admin-stat { display: block; color: inherit; transition: border-color var(--ssp-transition); }
a.admin-stat:hover { border-color: var(--ssp-red); color: inherit; }
.admin-stat.is-attention { border-color: rgba(220, 38, 38, .45); }
.admin-stat-sub { display: block; font-size: .75rem; color: var(--ssp-muted); }

.chart-figure { margin: 0; }
.chart-caption {
    font-family: var(--ssp-font-head); font-weight: 700; font-size: .95rem;
    color: var(--ssp-heading); margin-bottom: .6rem;
}
.chart-caption .chart-sub { display: block; font-family: var(--ssp-font-body); font-weight: 400; font-size: .78rem; color: var(--ssp-muted); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Recessive grid and axes; text wears ink tokens, never a series colour. */
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { fill: var(--ssp-muted); font-size: 11px; font-family: var(--ssp-font-body); }
.chart-unknown { font-size: 13px; }
.chart-value { fill: var(--ssp-heading); font-size: 11px; font-weight: 600; font-family: var(--ssp-font-body); }

.chart-line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* 2px surface ring so overlapping dots stay countable. */
.chart-dot { fill: var(--chart-1); stroke: var(--ssp-card); stroke-width: 2; }
.chart-bar { fill: var(--chart-2); }

.chart-note { font-size: .76rem; color: var(--ssp-muted); margin: .6rem 0 0; }
.chart-table { margin-top: .8rem; }
.chart-table summary { font-size: .8rem; color: var(--ssp-muted); cursor: pointer; }
.chart-table table { margin-top: .5rem; }

.mix-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.mix-row { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; align-items: center; gap: .6rem; }
.mix-label { font-size: .85rem; color: var(--ssp-text); }
.mix-track { background: var(--ssp-bg-soft); border-radius: var(--ssp-radius-pill); height: 14px; overflow: hidden; }
/* No min-width: a zero count must paint nothing. A 2px sliver reads as "a few", which is the one
   thing a zero must not say. */
.mix-fill { display: block; height: 100%; border-radius: var(--ssp-radius-pill); }
.mix-fill.is-monthly { background: var(--chart-1); }
.mix-fill.is-annual  { background: var(--chart-2); }
.mix-fill.is-free    { background: var(--chart-3); }
.mix-value { font-size: .85rem; font-weight: 700; color: var(--ssp-heading); text-align: right; }

/* Administrator role block in the account menu. Neutral, not the licence colours: this is a system
   role, and dressing it as a plan is what made an admin look like a Free customer. */
.account-licence.is-admin { background: var(--ssp-bg-soft); border-color: var(--ssp-line); }

/* The provider's own status word beside the plain-language one. Admin only: an operator opening a
   ticket needs the exact string Cashfree returned, a customer does not. */
.admin-raw { display: block; font-size: .68rem; color: var(--ssp-muted); }

/* ===================================================================== ADMIN SHELL
   Scoped to /admin only - the public site layout is untouched. Navy sidebar, light content,
   brand red for the active item, reusing the existing --ssp-* tokens throughout. */
.admin-body { background: var(--ssp-bg-alt); }
.admin-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }

.admin-sidebar {
    background: #060B1A; color: #cbd5e1;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-brand { padding: 1.3rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-brand-name { display: block; font-family: var(--ssp-font-head); font-weight: 800; color: #fff; font-size: 1.05rem; }
.admin-brand-name:hover { color: #fff; }
.admin-brand-sub { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }

.admin-side-nav { padding: 1rem .75rem; flex: 1; }
.admin-nav-group {
    display: block; padding: 1rem .5rem .35rem; font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: #64748b;
}
.admin-side-nav a {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .75rem; border-radius: var(--ssp-radius-sm);
    color: #cbd5e1; font-size: .9rem; font-weight: 500;
}
.admin-side-nav a i { width: 1.1rem; text-align: center; font-size: .85rem; color: #64748b; }
.admin-side-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-side-nav a:hover i { color: #cbd5e1; }
.admin-side-nav a.is-active { background: #2563EB; color: #fff; } /* fixed: the sidebar is navy in both themes, and white on the dark theme's lighter blue is only 2.8:1 */
.admin-side-nav a.is-active i { color: #fff; }

.admin-side-foot { padding: 1rem .75rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.admin-side-link {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .5rem .75rem; border-radius: var(--ssp-radius-sm);
    color: #94a3b8; font-size: .85rem; background: none; border: 0; text-align: left;
}
.admin-side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-side-button { cursor: pointer; font-family: inherit; }
.admin-side-who { padding: .6rem .75rem; }
.admin-side-role { display: block; font-size: .75rem; font-weight: 700; color: #fff; }
.admin-side-email { display: block; font-size: .72rem; color: #64748b; word-break: break-all; }

.admin-content { display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1.75rem; background: var(--ssp-bg);
    border-bottom: 1px solid var(--ssp-line); position: sticky; top: 0; z-index: 5;
}
.admin-topbar-title { margin: 0; font-size: 1.15rem; }
/* The theme switch was styled for the navy top bar (white on dark); on the admin top bar it sits on the
   page background, so its track and icons take the page tokens instead. */
.admin-theme-switch { margin-left: auto; }
.admin-theme-switch .theme-switch-track { background: var(--ssp-bg-soft); border-color: var(--ssp-line); }
.admin-theme-switch:hover .theme-switch-track { background: var(--ssp-line); }
.admin-theme-switch .theme-switch-icon { color: var(--ssp-muted); }
.admin-theme-switch .theme-switch-thumb { box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }
.admin-main { padding: 1.75rem; flex: 1; max-width: 1280px; width: 100%; }

/* Mobile drawer: a checkbox, so navigation works with no script at all. */
.admin-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.admin-burger { display: none; cursor: pointer; font-size: 1.1rem; color: var(--ssp-heading); padding: .25rem .5rem; }
.admin-backdrop { display: none; }
.admin-nav-toggle:focus-visible ~ .admin-shell .admin-burger { outline: 3px solid var(--ssp-focus); outline-offset: 2px; }

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40;
        transform: translateX(-100%); transition: transform var(--ssp-transition);
    }
    .admin-burger { display: inline-flex; }
    .admin-nav-toggle:checked ~ .admin-shell .admin-sidebar { transform: none; }
    .admin-nav-toggle:checked ~ .admin-shell .admin-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(2, 6, 23, .5); z-index: 30;
    }
    /* The drawer must never be able to sit open over the WHOLE viewport: the content column keeps its
       own stacking context and the backdrop stops at the sidebar's edge on the widest phones, so a
       restored-open checkbox degrades to a visible overlay rather than an apparently blank page. */
    .admin-nav-toggle:checked ~ .admin-shell .admin-content { position: relative; z-index: 1; }
    .admin-main, .admin-topbar { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .admin-sidebar { transition: none; } }

/* Tables stay usable on a narrow screen by scrolling rather than reflowing into unreadable columns. */
/* .card-ssp carries height:100% so marketing cards line up in a grid row. Inside .admin-main - a flex
   item with a DEFINITE height - that 100% resolves against the whole column, so a single card stretched
   to 3194px and left ~2700px of empty page below the content. Admin cards size to their content. */
.admin-main .card-ssp { height: auto; }
/* Admin filters and inline edits use bare inputs/selects. :where() keeps this at zero specificity, so any
   control that already has a class keeps its own look; the rest stop being white boxes in the dark theme. */
:where(.admin-main) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]), select, textarea) {
    background-color: var(--ssp-card); color: var(--ssp-text);
    border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-sm); padding: .35rem .55rem;
}

.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-empty {
    padding: 2rem 1rem; text-align: center; color: var(--ssp-muted);
    border: 1px dashed var(--ssp-line); border-radius: var(--ssp-radius); background: var(--ssp-card);
}
.admin-dl { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .45rem 1rem; margin: 0; }
.admin-dl dt { color: var(--ssp-muted); font-size: .85rem; }
.admin-dl dd { margin: 0; font-size: .9rem; color: var(--ssp-heading); word-break: break-word; }
@media (max-width: 600px) { .admin-dl { grid-template-columns: 1fr; gap: .1rem 0; } .admin-dl dd { margin-bottom: .6rem; } }

/* Offer editor + customer preview on Plans & offers. */
.admin-offer-form { max-width: 420px; }
.admin-check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.admin-check input { width: 1rem; height: 1rem; }

.admin-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.admin-preview {
    display: flex; flex-direction: column; gap: .2rem;
    padding: 1.1rem; border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius);
    background: var(--ssp-bg-alt);
}
.admin-preview-name { font-family: var(--ssp-font-head); font-weight: 700; color: var(--ssp-heading); }
.admin-preview-was { text-decoration: line-through; color: var(--ssp-muted); font-size: .9rem; }
.admin-preview-now { font-family: var(--ssp-font-head); font-size: 1.7rem; font-weight: 800; color: var(--ssp-heading); }
.admin-preview-now small { font-size: .85rem; font-weight: 500; color: var(--ssp-muted); }
.admin-preview-badge {
    align-self: flex-start; margin-top: .2rem; padding: .15rem .5rem;
    background: var(--ssp-red); color: #fff; border-radius: var(--ssp-radius-pill);
    font-size: .7rem; font-weight: 700;
}
.admin-preview-save { font-size: .85rem; color: var(--ssp-success); font-weight: 600; }
.admin-preview-limit { font-size: .78rem; color: var(--ssp-muted); margin-top: .2rem; }