/* ==========================================================================
   PARAVANE AUTHORITATIVE STYLESHEET
   Release: v011.000.001
   Documentation pass: expanded component map and maintenance commentary

   PURPOSE
   -------
   This is the single authoritative local stylesheet for the Paravane project.
   It contains the global site system, the shared SaaS product-page system,
   retained standalone product systems, homepage-company styling, and the
   current marketing/page-maturity overrides.

   HOW TO NAVIGATE THIS FILE
   -------------------------
   Search for the numbered identifiers shown below. Major systems use a letter
   and two digits (for example `B08`). Component groups use decimal identifiers
   such as `B08.2`. The numbering is intentionally stable so comments can be
   referenced in reviews, issues, and future refactors.

   IMPORTANT: CSS SOURCE ORDER IS FUNCTIONAL
   -----------------------------------------
   This stylesheet is organized around the existing cascade, not alphabetically.
   Moving a visually related block can change the result even when every
   declaration remains identical. Theme overrides, page profiles, state rules,
   media queries, and later corrective blocks therefore remain in their proven
   source order.

   CASCADE CONTRACT
   ----------------
   1. Core site rules live in the low-priority `paravane-base` cascade layer.
   2. The shared SaaS product-page system is unlayered and follows the base
      layer, preserving its previous priority over base rules.
   3. Retained standalone product systems follow the shared product system.
      They remain available for legacy templates but are scoped so they do not
      leak into current SaaS pages.
   4. Homepage-company rules are gated by data-style-profile~="company".
   5. Marketing/page-maturity rules are gated by
      data-style-profile~="marketing" and remain later than the shared product
      system, preserving the effective product-page override order.
   6. Profile gates use :where(...) so the wrapper adds zero specificity.

   MAINTENANCE RULES
   -----------------
   - Before moving a rule, search for the same selector and property elsewhere.
   - Keep theme-specific rules after the base component they modify.
   - Keep reduced-motion fallbacks with the animation/transition system they
     disable.
   - Keep responsive blocks in their current source order unless the final
     computed cascade has been re-tested at every affected breakpoint.
   - Blocks marked `LEGACY REFERENCE` are inactive historical implementations.

   TOP-LEVEL SECTION MAP
   ---------------------
   A. CORE SITE SYSTEM
      Fonts, tokens, document canvas, loaders, navigation, global components,
      docs, pricing, legal, auth, customer app, footer, themes, and utilities.

   B. SHARED SAAS PRODUCT-PAGE SYSTEM
      Current product-page foundation, hero, subnav, outcomes, workflow,
      feature/evidence/integration grids, demos, waitlist, motion, and overlays.

   C. RETAINED STANDALONE PRODUCT SYSTEMS
      Legacy InvoiceGuard, RetainIQ, smtpRS, and VendorLens page systems.

   D. HOMEPAGE COMPANY SYSTEM
      Company-profile hero, product bento, API visual, trust, CTA, theme,
      responsive, and interaction systems.

   E. MARKETING / PAGE-MATURITY SYSTEM
      Current homepage, product, pricing, documentation, contact, visual chrome,
      light-theme, and responsive refinements.

   QUICK-FIND EXAMPLES
   -------------------
   - Header and navigation ......................... A05
   - Product catalog flyout ........................ A05.3 / A15.1
   - Theme toggle .................................. A05.5
   - Documentation/API catalog ..................... A07 / A15.7
   - Pricing and authentication .................... A13
   - Customer application .......................... A13.8 / A14
   - Current SaaS product pages .................... B
   - Product sticky subnav ......................... B03 / E08.2
   - Current product visual chrome ................. E10
   - Legacy product templates ...................... C
   - Homepage company-profile system ............... D
   - Current marketing homepage/product refinements  E
   ========================================================================== */

/* ==========================================================================
   A. CORE SITE SYSTEM
   Global tokens, shared components, public pages, customer app, and footer.
   This region remains inside the low-priority `paravane-base` cascade layer.
   ========================================================================== */

@layer paravane-base {
/* ==========================================================================
   A01. LOCAL FONTS
   Self-hosted font families used by public pages, headings, code, and dense UI text.
   ========================================================================== */

@font-face {
    font-family: "Aptos";
    src: url("../fonts/Aptos.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   SMTPRS LIVE-PREVIEW SIGNUP WALL
   Appears only when the public demo reports that its complimentary allowance
   has been exhausted.
   ========================================================================== */

html.demo-signup-wall-is-open,
html.demo-signup-wall-is-open body {
    overflow: hidden;
}

.smtprs-signup-wall[hidden] {
    display: none;
}

.smtprs-signup-wall {
    position: fixed;
    inset: 0;
    z-index: 999990;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 34px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.smtprs-signup-wall.is-visible {
    opacity: 1;
    visibility: visible;
}

.smtprs-signup-wall__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 34%, rgba(238, 152, 38, 0.15), transparent 34rem),
        rgba(3, 4, 6, 0.84);
    backdrop-filter: blur(12px) saturate(0.78);
}

.smtprs-signup-wall__dialog {
    position: relative;
    width: min(780px, 100%);
    max-height: min(820px, calc(100vh - 28px));
    overflow: auto;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(238, 152, 38, 0.32);
    border-radius: 22px;
    color: var(--text);
    background:
        radial-gradient(circle at 94% 4%, rgba(246, 191, 63, 0.12), transparent 17rem),
        linear-gradient(145deg, #121419 0%, #0c0e12 72%);
    box-shadow:
        0 36px 110px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    outline: none;
    transform: translateY(18px) scale(0.985);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtprs-signup-wall.is-visible .smtprs-signup-wall__dialog {
    transform: translateY(0) scale(1);
}

.smtprs-signup-wall__dialog::before {
    position: absolute;
    top: 0;
    right: 34px;
    left: 34px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-bright), transparent);
    content: "";
}

.smtprs-signup-wall__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: var(--control-bg);
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.smtprs-signup-wall__close > span {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    font-size: 0;
}

.smtprs-signup-wall__close > span::before,
.smtprs-signup-wall__close > span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.smtprs-signup-wall__close > span::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.smtprs-signup-wall__close > span::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.smtprs-signup-wall__close:hover,
.smtprs-signup-wall__close:focus-visible {
    color: var(--text);
    border-color: var(--accent-line);
    background: var(--accent-soft);
    transform: rotate(5deg);
}

.smtprs-signup-wall__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-right: 42px;
    margin-bottom: clamp(26px, 4vw, 38px);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smtprs-signup-wall__topline > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #65d58c;
}

.smtprs-signup-wall__topline > span i {
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(101, 213, 140, 0.44), 0 0 10px currentColor;
    animation: smtprs-signup-wall-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes smtprs-signup-wall-dot-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(101, 213, 140, 0.44), 0 0 8px currentColor;
    }

    50% {
        box-shadow: 0 0 0 6px rgba(101, 213, 140, 0), 0 0 15px currentColor;
    }
}

.smtprs-signup-wall__intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 3vw, 28px);
    align-items: start;
}

.smtprs-signup-wall__mark {
    display: grid;
    width: clamp(52px, 6vw, 68px);
    height: clamp(52px, 6vw, 68px);
    place-items: center;
    border: 1px solid rgba(238, 152, 38, 0.42);
    border-radius: 17px;
    color: #17110a;
    background: linear-gradient(145deg, var(--accent-bright), var(--accent));
    box-shadow: 0 14px 34px rgba(238, 152, 38, 0.18);
    font-size: clamp(20px, 2.5vw, 27px);
}

.smtprs-signup-wall__eyebrow {
    margin: 1px 0 9px;
    color: var(--accent-bright);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.smtprs-signup-wall__dialog h2 {
    max-width: 650px;
    margin: 0;
    color: var(--text);
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.smtprs-signup-wall__intro > div:last-child > p:last-child {
    max-width: 620px;
    margin: 16px 0 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.65;
}

.smtprs-signup-wall__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(26px, 4vw, 38px) 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
}

.smtprs-signup-wall__benefits article {
    position: relative;
    min-width: 0;
    padding: 18px;
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .smtprs-signup-wall__benefits article:hover {
        z-index: 1;
        background: linear-gradient(145deg, rgba(238, 152, 38, 0.12), rgba(255, 255, 255, 0.025));
        box-shadow: inset 0 0 0 1px var(--accent-line), 0 12px 28px rgba(0, 0, 0, 0.14);
        transform: translateY(-2px);
    }

    .smtprs-signup-wall__benefits article:hover strong {
        color: var(--accent-bright);
    }
}

.smtprs-signup-wall__benefits article + article {
    border-left: 1px solid var(--line);
}

.smtprs-signup-wall__benefits span {
    display: block;
    margin-bottom: 13px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.smtprs-signup-wall__benefits strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.smtprs-signup-wall__benefits p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.smtprs-signup-wall__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: clamp(24px, 4vw, 34px);
}

.smtprs-signup-wall__actions .btn {
    min-height: 46px;
}

.smtprs-signup-wall__actions .btn i {
    margin-left: 6px;
    font-size: 11px;
}

.smtprs-signup-wall__later {
    padding: 8px 4px;
    border: 0;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: color 150ms ease;
}

.smtprs-signup-wall__later:hover,
.smtprs-signup-wall__later:focus-visible {
    color: var(--text);
}

.smtprs-signup-wall__note {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted-2);
    font-size: 11px;
    line-height: 1.45;
}

.smtprs-signup-wall__note i {
    color: var(--accent-muted);
}

html[data-theme="light"] .smtprs-signup-wall__backdrop {
    background:
        radial-gradient(circle at 50% 34%, rgba(209, 121, 19, 0.13), transparent 34rem),
        rgba(245, 241, 232, 0.86);
}

html[data-theme="light"] .smtprs-signup-wall__dialog {
    background:
        radial-gradient(circle at 94% 4%, rgba(238, 152, 38, 0.14), transparent 17rem),
        linear-gradient(145deg, #fffefb 0%, #f8f4ec 76%);
    box-shadow: 0 34px 90px rgba(64, 47, 20, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

html[data-theme="light"] .smtprs-signup-wall__benefits {
    background: rgba(255, 255, 255, 0.58);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="light"] .smtprs-signup-wall__benefits article:hover {
        background: linear-gradient(145deg, rgba(209, 121, 19, 0.13), rgba(255, 255, 255, 0.78));
        box-shadow: inset 0 0 0 1px var(--accent-line), 0 12px 26px rgba(64, 47, 20, 0.1);
    }
}

@media (max-width: 680px) {
    .smtprs-signup-wall {
        align-items: end;
        padding: 10px;
    }

    .smtprs-signup-wall__dialog {
        max-height: calc(100dvh - 20px);
        padding: 24px 20px;
        border-radius: 18px;
    }

    .smtprs-signup-wall__topline small {
        display: none;
    }

    .smtprs-signup-wall__intro {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .smtprs-signup-wall__mark {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .smtprs-signup-wall__dialog h2 {
        font-size: clamp(30px, 10vw, 40px);
    }

    .smtprs-signup-wall__benefits {
        grid-template-columns: 1fr;
    }

    .smtprs-signup-wall__benefits article {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 2px 8px;
        padding: 14px 16px;
    }

    .smtprs-signup-wall__benefits article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .smtprs-signup-wall__benefits span {
        grid-row: 1 / span 2;
        margin: 2px 0 0;
    }

    .smtprs-signup-wall__benefits p {
        margin-top: 4px;
    }

    .smtprs-signup-wall__actions .btn {
        flex: 1 1 calc(50% - 5px);
    }

    .smtprs-signup-wall__later {
        flex-basis: 100%;
    }
}

@media (max-width: 420px) {
    .smtprs-signup-wall__dialog {
        padding-right: 16px;
        padding-left: 16px;
    }

    .smtprs-signup-wall__benefits {
        gap: 8px;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .smtprs-signup-wall__benefits article,
    .smtprs-signup-wall__benefits article + article {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.018);
    }

    html[data-theme="light"] .smtprs-signup-wall__benefits {
        background: transparent;
    }

    html[data-theme="light"] .smtprs-signup-wall__benefits article,
    html[data-theme="light"] .smtprs-signup-wall__benefits article + article {
        background: rgba(255, 255, 255, 0.58);
    }

    .smtprs-signup-wall__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .smtprs-signup-wall__actions .btn,
    .smtprs-signup-wall__later {
        width: 100%;
        min-width: 0;
    }

    .smtprs-signup-wall__actions .btn {
        justify-content: center;
        white-space: nowrap;
    }

    .smtprs-signup-wall__later {
        padding: 10px 8px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smtprs-signup-wall,
    .smtprs-signup-wall__dialog {
        transition: none;
    }

    .smtprs-signup-wall__topline > span i {
        animation: none;
    }
}

@font-face {
    font-family: "Aptos";
    src: url("../fonts/Aptos-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aptos";
    src: url("../fonts/Aptos-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "FiraCode iScript";
    src: url("../fonts/FiraCodeiScript-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FiraCode iScript";
    src: url("../fonts/FiraCodeiScript-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FiraCode iScript";
    src: url("../fonts/FiraCodeiScript-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   A02. DESIGN TOKENS AND THEME VARIABLES
   Dark defaults, light-theme replacements, shared surfaces, text colors, accents, shadows, radii, and transition timings.
   ========================================================================== */

:root {
    --bg: #090a0c;
    --bg-soft: #0d0f12;
    --bg-raised: #111318;
    --bg-muted: #0f1115;
    --line: rgba(255, 255, 255, 0.085);
    --line-soft: rgba(255, 255, 255, 0.055);
    --text: #f2f0ea;
    --text-soft: #c9c5bd;
    --muted: #8f8b84;
    --muted-2: #6f6b65;
    --accent: #ee9826;
    --accent-bright: #f6bf3f;
    --accent-muted: #c88128;
    --accent-soft: rgba(238, 152, 38, 0.14);
    --accent-line: rgba(238, 152, 38, 0.22);
    --code-bg: #0a0b0e;
    --body-bg:
        radial-gradient(circle at 22% -12rem, rgba(238, 152, 38, 0.12), transparent 34rem),
        radial-gradient(circle at 78% 4rem, rgba(246, 191, 63, 0.055), transparent 30rem),
        radial-gradient(circle at 50% -16rem, rgba(255, 255, 255, 0.035), transparent 38rem),
        linear-gradient(180deg, #0a0b0d 0%, #08090b 46%, #090a0c 100%);
    --header-bg: rgba(9, 10, 12, 0.82);
    --preloader-bg: #000;
    --preloader-logo: var(--image-loader-logo-dark, url('../assets/gif/transparent/paravane-logo-loading-animation-black.gif'));
    --surface-light: rgba(255, 255, 255, 0.024);
    --control-bg: rgba(255, 255, 255, 0.028);
    --control-focus-bg: rgba(238, 152, 38, 0.035);
    --control-placeholder: rgba(176, 171, 160, 0.54);
    --select-bg: rgba(18, 17, 16, 0.98);
    --select-option-bg: #141312;
    --select-option-text: #f4efe7;
    --select-active-text: #15110b;
    --positive: #b7d7ad;
    --negative: #e3a6a0;
    --shadow-soft: 0 24px 90px rgba(0, 0, 0, 0.2);
    --max: 1120px;
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --page-transition-out-ms: 280ms;
    --page-transition-in-ms: 480ms;
    --page-transition-loader-delay-ms: 320;
    --page-transition-loader-fade-ms: 360ms;
    color-scheme: dark;
}

/* ==========================================================================
   A02.1. LIGHT-THEME TOKEN REPLACEMENTS

   PURPOSE
   -------
   Reassigns the global design tokens when the root element uses the light
   theme. Components should consume these variables instead of hard-coding a
   separate light palette whenever possible.

   INCLUDES
   --------
   - Warm white page and surface colors
   - Dark text and muted-copy values
   - Light control, select, shadow, and status colors

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This block must remain after the dark defaults in :root.
   - Component-specific light exceptions appear later because they require
     more than token substitution.
   ========================================================================== */

html[data-theme="light"] {
    --bg: #fbfaf7;
    --bg-soft: #f7f4ed;
    --bg-raised: #fffefb;
    --bg-muted: #f2eee5;
    --line: rgba(22, 20, 17, 0.13);
    --line-soft: rgba(22, 20, 17, 0.075);
    --text: #15130f;
    --text-soft: #3e3931;
    --muted: #766f63;
    --muted-2: #9a9285;
    --accent: #d17913;
    --accent-bright: #b7650d;
    --accent-muted: #a95f12;
    --accent-soft: rgba(238, 152, 38, 0.13);
    --accent-line: rgba(209, 121, 19, 0.28);
    --code-bg: #f2eee5;
    --body-bg:
        radial-gradient(circle at 22% -12rem, rgba(238, 152, 38, 0.16), transparent 34rem),
        radial-gradient(circle at 78% 4rem, rgba(246, 191, 63, 0.13), transparent 30rem),
        radial-gradient(circle at 50% -16rem, rgba(255, 255, 255, 0.75), transparent 38rem),
        linear-gradient(180deg, #ffffff 0%, #fbfaf7 48%, #f7f2e8 100%);
    --header-bg: rgba(255, 255, 255, 0.84);
    --preloader-bg: #ffffff;
    --preloader-logo: var(--image-loader-logo-light, url('../assets/gif/opaque/brand-logo-paravane-labs-animated-gradient-once-white.gif'));
    --surface-light: rgba(255, 255, 255, 0.72);
    --control-bg: rgba(255, 255, 255, 0.82);
    --control-focus-bg: rgba(238, 152, 38, 0.09);
    --control-placeholder: rgba(85, 78, 66, 0.56);
    --select-bg: #fffdf8;
    --select-option-bg: #fffdf8;
    --select-option-text: #15130f;
    --select-active-text: #15130f;
    --positive: #2f7b41;
    --negative: #a33b32;
    --shadow-soft: 0 24px 80px rgba(62, 48, 22, 0.1);
    color-scheme: only light;
}

/* ==========================================================================
   A02.2. EXPLICIT DARK COLOR-SCHEME DECLARATION

   PURPOSE
   -------
   Confirms the browser-native control color scheme when data-theme is
   explicitly set to dark. The actual dark palette is already defined by the
   preceding root tokens.

   INCLUDES
   --------
   - Browser-native form/control color-scheme hint

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Keep this small declaration separate from the token map so the root
     defaults remain usable before JavaScript applies a theme attribute.
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;
}

/* ==========================================================================
   A03. RESET, DOCUMENT CANVAS, AND NATIVE SCROLLING
   Box sizing, atomic theme repaint behavior, root/body canvas, native pull-to-refresh, and global element defaults.
   ========================================================================== */

* {
    box-sizing: border-box;
}

/*
 * Theme changes are intentionally atomic. Normal hover/focus transitions remain
 * enabled, but theme-driven color/background/border transitions are suppressed
 * for the two paint frames in which data-theme is replaced.
 */
/* ==========================================================================
   A03.1. ATOMIC THEME-CHANGE PAINT GUARD

   PURPOSE
   -------
   Temporarily disables transitions while the theme attribute is being
   replaced. This prevents every color, border, and background from animating
   independently during a dark/light switch.

   INCLUDES
   --------
   - Root theme-changing state
   - Descendant and pseudo-element transition suppression

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - JavaScript applies this state only for the theme swap paint frames.
   - Normal hover/focus transitions remain available outside that short
     interval.
   ========================================================================== */

html.theme-changing,
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
    transition: none !important;
}


/*
 * Root page scrolling and mobile overscroll behavior
 * --------------------------------------------------
 * Vertical overscroll is intentionally set to `auto` so native mobile browser
 * gestures, including pull-to-refresh, remain available.
 *
 * Previously this used `overscroll-behavior-y: none` to prevent users from
 * rubber-banding past the footer. That also disabled pull-to-refresh on
 * supported mobile browsers.
 *
 * The html/body backgrounds use the site's theme variables so any temporary
 * overscroll area exposed above or below the document remains visually
 * consistent with the active dark or light theme.
 *
 * Do not restore `overscroll-behavior-y: none` unless disabling native
 * pull-to-refresh is intentional.
 */
/* ==========================================================================
   A03.2. ROOT CANVAS, MOBILE OVERSCROLL, AND BODY FOUNDATION

   PURPOSE
   -------
   Defines the browser canvas and page-height model. Vertical overscroll
   remains enabled so mobile pull-to-refresh works; matching html/body
   backgrounds make temporary Safari/Chromium rubber-band areas visually
   consistent with the active theme.

   INCLUDES
   --------
   - Root minimum height and smooth anchor scrolling
   - Native vertical pull-to-refresh behavior
   - Flex-column body used to keep the footer at the document edge
   - Global page font, themed background, and text rendering

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Do not restore overscroll-behavior-y: none unless disabling
     pull-to-refresh is intentional.
   - The two min-height declarations provide a broad fallback plus dynamic
     viewport support.
   ========================================================================== */

html {
    min-height: 100%;
    background-color: var(--bg);
    /* overscroll-behavior-y: none; */
    overscroll-behavior-y: auto;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
    /* font-family: "Aptos", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;     */
    font-family: "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace;
    background-color: var(--bg);
    background-image: var(--body-bg);
    background-repeat: no-repeat;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: color 180ms ease, background-color 180ms ease;
}

/* ==========================================================================
   A03.3. GLOBAL ELEMENT DEFAULTS

   PURPOSE
   -------
   Provides the smallest shared defaults after the document canvas is
   established. These rules avoid repetitive sizing and link-reset declarations
   throughout the component systems.

   INCLUDES
   --------
   - Main content flex growth
   - Responsive image maximum width
   - Inherited link color and decoration reset

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Page-specific systems intentionally add more restrictive image and link
     behavior later.
   ========================================================================== */

main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
}

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


/* ==========================================================================
   A04. LOADER AND PUBLIC ROUTE TRANSITIONS
   Initial brand loader plus public-page arrival/departure overlays and reduced-motion handling.
   ========================================================================== */
/* ==========================================================================
   A04.1. INITIAL BRAND PRELOADER

   PURPOSE
   -------
   Controls the full-screen loader shown during the first page boot. The logo
   is selected through theme variables so the loader can display the correct
   dark or light asset before page content is revealed.

   INCLUDES
   --------
   - Fixed full-viewport loading screen
   - Theme-selected animated logo
   - Responsive loader dimensions
   - Reduced-motion transition removal

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Keep the very high z-index above public and app route overlays.
   - The hidden state uses visibility plus opacity so it no longer intercepts
     interaction.
   ========================================================================== */

.animationload {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--preloader-bg);
    opacity: 1;
    visibility: visible;
    transition: opacity 600ms ease, visibility 0s linear 600ms;
}

.animationload.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    width: min(42vw, 544px);
    height: min(42vw, 556px);
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background-image: var(--preloader-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

html[data-theme="dark"] .loader {
    background-image: var(--preloader-logo);
}

html[data-theme="light"] .animationload {
    background: #ffffff;
}

html[data-theme="light"] .loader {
    background-image: var(--preloader-logo);
}

@media (max-width: 640px) {
    .loader {
        width: 68vw;
        height: 68vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animationload {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Public page transitions
   Controls content fade/translation and the route backdrop/loader used outside the authenticated app.
   -------------------------------------------------------------------------- */
body:not(.page-app) .site-header,
body:not(.page-app) main,
body:not(.page-app) .site-footer {
    transition:
        opacity var(--page-transition-in-ms) ease-out,
        transform var(--page-transition-in-ms) ease-out;
}

html.site-is-arriving body:not(.page-app) .site-header,
html.site-is-arriving body:not(.page-app) main,
html.site-is-arriving body:not(.page-app) .site-footer {
    opacity: 0;
    transform: translateY(4px);
}

html.site-is-leaving body:not(.page-app) .site-header,
html.site-is-leaving body:not(.page-app) main,
html.site-is-leaving body:not(.page-app) .site-footer {
    opacity: 0;
    transform: translateY(3px);
    transition-duration: var(--page-transition-out-ms), var(--page-transition-out-ms);
}

html.site-is-ready body:not(.page-app) .site-header,
html.site-is-ready body:not(.page-app) main,
html.site-is-ready body:not(.page-app) .site-footer {
    opacity: 1;
    transform: translateY(0);
}

html.site-is-arriving body:not(.page-app),
html.site-is-leaving body:not(.page-app) {
    cursor: progress;
}

html.site-platform-loader-skipped .animationload {
    display: none;
}

/* ==========================================================================
   A04.3. PUBLIC ROUTE BACKDROP AND CENTERED LOADER

   PURPOSE
   -------
   Defines the reusable transition overlay that appears during public-page
   navigation. The backdrop masks page replacement while the centered spinner
   communicates progress.

   INCLUDES
   --------
   - Dark and light route backdrops
   - Centered pill-shaped route loader
   - Animated spinner and active visibility states

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - App pages use a separate route-transition system in A14.
   - Hidden attributes are explicitly respected so JavaScript can fully
     remove the overlay from layout.
   ========================================================================== */

.page-route-backdrop,
.page-route-loader {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--page-transition-loader-fade-ms) ease, visibility var(--page-transition-loader-fade-ms) ease;
}

.page-route-backdrop[hidden],
.page-route-loader[hidden] {
    display: none !important;
}

.page-route-backdrop {
    inset: 0;
    z-index: 999996;
    background-color: #090a0c;
    background-image:
        radial-gradient(circle at 50% 38%, rgba(238, 152, 38, 0.1), transparent 18rem),
        linear-gradient(180deg, #0a0b0d 0%, #08090b 46%, #090a0c 100%);
}

html[data-theme="light"] .page-route-backdrop {
    background-color: #fbfaf7;
    background-image:
        radial-gradient(circle at 50% 38%, rgba(238, 152, 38, 0.14), transparent 18rem),
        linear-gradient(180deg, #ffffff 0%, #fbfaf7 48%, #f7f2e8 100%);
}

.page-route-loader {
    z-index: 999997;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    top: 50%;
    left: 50%;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.page-route-svg-frame {
    display: block;
    /* width: 34px; */
    /* height: 34px; */
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    object-fit: contain;
}

html.site-loader-active .page-route-backdrop,
html.site-loader-active .page-route-loader {
    opacity: 1;
    visibility: visible;
}

html.site-loader-active .page-route-backdrop {
    pointer-events: auto;
}

html[data-theme="light"] .page-route-loader {
    background: transparent;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    body:not(.page-app) .site-header,
    body:not(.page-app) main,
    body:not(.page-app) .site-footer,
    .page-route-backdrop,
    .page-route-loader {
        transition: none;
    }

}

/* ==========================================================================
   A05. GLOBAL LAYOUT, HEADER, NAVIGATION, CATALOG, AND THEME TOGGLE
   Shared page-width container, sticky header, primary navigation, product flyout, auth action, and theme switch.
   ========================================================================== */

.container {
    width: min(var(--max), calc(100% - 48px));
    margin: 0 auto;
}

/* ==========================================================================
   A05.1. STICKY SITE HEADER AND SCROLL-COLLAPSE STATES

   PURPOSE
   -------
   Owns the public sticky header shell and the classes used by scroll logic to
   collapse, expand, and elevate it. The visible-height custom property is also
   consumed by the product subnav.

   INCLUDES
   --------
   - Sticky positioning and backdrop blur
   - Collapsed/expanded transform states
   - Scroll-elevation shadow
   - Reduced-motion fallback

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The header z-index must remain above public content and below
     full-screen transition overlays.
   - Changes to header height must be coordinated with
     --site-header-visible-height and product subnav offsets.
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--header-bg);
    border-bottom: 1px solid var(--line-soft);
    backdrop-filter: blur(18px);
    will-change: transform;
}

html.site-header-is-collapsed {
    --site-header-visible-height: 0px;
}

html.site-is-ready body:not(.page-app) .site-header {
    transition:
        opacity var(--page-transition-in-ms) ease-out,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms ease;
}

html.site-is-ready body:not(.page-app) .site-header.is-scroll-collapsed {
    pointer-events: none;
    transform: translateY(calc(-100% - 1px));
}

html.site-is-ready body:not(.page-app) .site-header.is-scroll-expanded {
    transform: translateY(0);
}

body:not(.page-app) .site-header.is-scroll-elevated {
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    html.site-is-ready body:not(.page-app) .site-header {
        transition: none;
    }
}

/* ==========================================================================
   A05.2. PRIMARY NAVIGATION, BRANDMARK, AND LINK STATES

   PURPOSE
   -------
   Defines the horizontal desktop navigation row, brandmark dimensions, shared
   link typography, active states, and the Product catalog trigger button.

   INCLUDES
   --------
   - Brandmark sizing
   - Primary link alignment and hover/focus states
   - Catalog trigger chevron and active color
   - Shared footer/text-link color behavior

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Mobile wrapping and horizontal scrolling are applied later in A11.
   - The catalog trigger remains a button while ordinary destinations remain
     anchors.
   ========================================================================== */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 18px 0;
}

.logo {
    display: inline-flex;
    align-items: center;
    min-width: 176px;
}

.logo img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav-links > a,
.nav-links > span,
.nav-catalog-trigger,
.footer-links a,
.footer-links span,
.text-link {
    color: var(--muted);
    font-size: 14px;
    transition: color 150ms ease;
}

.nav-links > a:hover,
.nav-links > a:focus-visible,
.nav-links > a.active,
.nav-links > span.active {
    color: var(--accent-bright);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--accent-bright);
}

.text-link:hover {
    color: var(--text);
}

.nav-links > span,
.footer-links span,
.text-link-static {
    cursor: default;
}

.nav-links > a,
.nav-links > span,
.nav-catalog-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    line-height: 20px;
}

.nav-catalog {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
}

/* Keep desktop flyouts open while the pointer crosses the header-to-menu gap. */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
    .nav-catalog::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: calc(100% + 16px);
        height: 22px;
        transform: translateX(-50%);
    }
}

.nav-catalog-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    min-height: 20px;
    cursor: pointer;
    transition: color 150ms ease;
}

.nav-catalog-trigger span {
    display: inline-flex;
    align-items: center;
    line-height: 20px;
}

.nav-catalog-trigger::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.75;
}

.nav-catalog:hover .nav-catalog-trigger,
.nav-catalog:focus-within .nav-catalog-trigger,
.nav-catalog.is-open .nav-catalog-trigger,
.nav-catalog-trigger.active {
    color: var(--accent-bright);
}

/* ==========================================================================
   A05.3. PRODUCT CATALOG FLYOUT: BASE STRUCTURE

   PURPOSE
   -------
   Builds the desktop Product catalog popover, its two-column product grouping,
   availability states, development pills, and opening transition.

   INCLUDES
   --------
   - Popover positioning and visibility
   - Section headings and compact product rows
   - Available, active, and disabled product states
   - Blue development-status pulse

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - A15.1 contains intentionally later size corrections so page heading
     rules cannot enlarge this flyout.
   - Responsive fixed-position behavior appears in A11.
   ========================================================================== */

.product-catalog-menu {
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    z-index: 60;
    width: min(720px, calc(100vw - 40px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(16, 16, 16, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    pointer-events: none;
}

.nav-catalog:hover .product-catalog-menu,
.nav-catalog:focus-within .product-catalog-menu,
.nav-catalog.is-open .product-catalog-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.product-catalog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--line-soft);
}

.product-catalog-head strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
}

.product-catalog-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.product-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding-top: 12px;
}

.product-catalog-section {
    min-width: 0;
    padding: 0;
    border-right: 0;
    background: transparent;
}

.product-catalog-section:first-child {
    padding-left: 0;
}

.product-catalog-section:last-child {
    padding-right: 0;
}

.product-catalog-section h3 {
    margin: 0 0 6px;
    color: var(--accent-bright);
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.product-catalog-section > .product-catalog-heading {
    display: block;
    margin: 0 0 6px;
    color: var(--accent-bright);
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.product-catalog-section > p {
    display: none;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.product-catalog-list {
    display: grid;
    gap: 3px;
}

.product-catalog-item {
    display: block;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text);
    background: transparent;
    text-decoration: none;
}

.product-catalog-item.is-available {
    border-color: transparent;
    background: transparent;
}

.product-catalog-item.is-active {
    border-color: rgba(238, 152, 38, 0.42);
    background: rgba(238, 152, 38, 0.08);
    box-shadow: inset 0 0 0 1px rgba(238, 152, 38, 0.32);
}

.product-catalog-item.is-available:hover {
    border-color: rgba(238, 152, 38, 0.62);
    background: rgba(238, 152, 38, 0.11);
}

.product-catalog-item.is-disabled {
    color: rgba(245, 241, 232, 0.56);
    background: transparent;
}

.product-catalog-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: inherit;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
}

.product-catalog-item p {
    display: none;
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.product-catalog-item.is-disabled p {
    color: rgba(178, 175, 168, 0.62);
}

.product-catalog-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.1);
    font-size: 8px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.product-catalog-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #60a5fa;
    transform-origin: center;
    animation: productCatalogDevelopmentPulse 2.5s ease-in-out infinite;
}

@keyframes productCatalogDevelopmentPulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1), 0 0 5px rgba(96, 165, 250, 0.22);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.025), 0 0 12px rgba(96, 165, 250, 0.68);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-catalog-pill::before {
        animation: none;
    }
}

html[data-theme="light"] .product-catalog-pill {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.34);
    background: rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   A05.4. HEADER AUTHENTICATION ACTION

   PURPOSE
   -------
   Styles the compact Sign in action used beside the main navigation. It shares
   the site pill language while remaining visually quieter than primary
   conversion buttons.

   INCLUDES
   --------
   - Default border, surface, and text
   - Hover accent treatment

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Active and secondary variants used on expanded public pages are defined
     later in A13.
   ========================================================================== */

.nav-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 0 rgba(238, 152, 38, 0);
    cursor: pointer;
    transform: translateY(0);
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease,
        box-shadow 150ms ease, transform 150ms ease;
}

.nav-action:hover,
.nav-action:focus-visible {
    color: var(--accent-bright);
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.08);
    box-shadow: 0 8px 24px rgba(238, 152, 38, 0.12);
    transform: translateY(-1px);
}

.nav-action:active {
    box-shadow: 0 3px 10px rgba(238, 152, 38, 0.08);
    transform: translateY(0);
}

.nav-session-action[data-session-state="authenticated"] {
    gap: 8px;
    padding: 6px 13px 6px 7px;
    color: var(--text-soft);
    border-color: rgba(238, 152, 38, 0.26);
    background: rgba(238, 152, 38, 0.045);
}

.nav-session-action__icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 1px solid rgba(246, 191, 63, 0.38);
    border-radius: 50%;
    color: #17110a;
    background: linear-gradient(135deg, #f7bf4f, #ee9826);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 4px 12px rgba(238, 152, 38, 0.12);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.nav-session-action__icon svg {
    width: 16px;
    height: 16px;
}

.nav-session-action[data-session-state="authenticated"]:hover .nav-session-action__icon,
.nav-session-action[data-session-state="authenticated"]:focus-visible .nav-session-action__icon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(238, 152, 38, 0.2);
    transform: scale(1.04);
}

/* ==========================================================================
   A05.5. THEME TOGGLE COMPONENT

   PURPOSE
   -------
   Defines the complete animated dark/light switch. The control preserves the
   project data-theme-toggle hook while rendering side icons, a sliding thumb,
   theme-specific colors, hover/focus feedback, and reduced-motion behavior.

   INCLUDES
   --------
   - Track dimensions and interactive states
   - Sun/moon side icons
   - Sliding thumb and thumb icons
   - Theme-specific direction and surface treatment
   - Reduced-motion transition removal

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - JavaScript owns theme persistence and ARIA state; this section owns
     presentation only.
   - Keep internal elements pointer-events: none so the button remains the
     single interaction target.
   ========================================================================== */

.theme-toggle {
    --toggle-w: 72px;
    --toggle-h: 36px;
    --pad: 3px;
    --thumb: 28px;
    --travel: 36px;

    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--toggle-w);
    height: var(--toggle-h);
    min-height: var(--toggle-h);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0;
    color: var(--text-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.018);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 7px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

html[data-theme-switching="disabled"] [data-theme-toggle] {
    display: none !important;
}

.theme-toggle:hover {
    border-color: var(--accent-line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 8px 28px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(238, 152, 38, 0.035);
    transform: translateY(-1px);
}

.theme-toggle:active {
    transform: translateY(0) scale(0.985);
}

.theme-toggle:focus-visible {
    outline: none;
    border-color: rgba(246, 191, 63, 0.62);
    box-shadow:
        0 0 0 3px rgba(238, 152, 38, 0.13),
        0 8px 24px rgba(0, 0, 0, 0.2);
}

.theme-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 22% 50%, rgba(246, 191, 63, 0.14), transparent 30%),
        radial-gradient(circle at 78% 50%, rgba(238, 152, 38, 0.045), transparent 34%);
    transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] .theme-toggle {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52)),
        rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 7px 22px rgba(62, 48, 22, 0.08);
}

html[data-theme="light"] .theme-toggle:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(62, 48, 22, 0.1),
        0 0 0 1px rgba(209, 121, 19, 0.04);
}

html[data-theme="light"] .theme-toggle::before {
    opacity: 0.72;
    transform: scaleX(-1);
}

.theme-toggle__side-icon {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    transition:
        opacity 180ms ease,
        color 180ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle__side-icon--sun {
    left: 10px;
    color: var(--accent-bright);
    opacity: 0.34;
}

.theme-toggle__side-icon--moon {
    right: 10px;
    color: #d8d3c9;
    opacity: 0.94;
}

html[data-theme="light"] .theme-toggle__side-icon--sun {
    color: var(--accent);
    opacity: 0.98;
    transform: translateY(-50%) rotate(7deg);
}

html[data-theme="light"] .theme-toggle__side-icon--moon {
    color: var(--muted);
    opacity: 0.3;
    transform: translateY(-50%) rotate(-10deg) scale(0.9);
}

.theme-toggle__thumb {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    z-index: 2;
    width: var(--thumb);
    height: var(--thumb);
    border: 1px solid rgba(255, 215, 117, 0.34);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 28%, #ffd978 0 6%, transparent 7%),
        linear-gradient(145deg, #f6bf3f, #d98319);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.24),
        0 5px 12px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(238, 152, 38, 0.13);
    transform: translateX(var(--travel));
    transition:
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
    pointer-events: none;
}

html[data-theme="light"] .theme-toggle__thumb {
    border-color: rgba(21, 19, 15, 0.52);
    background: linear-gradient(145deg, #24211d, #11100e);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 4px 10px rgba(62, 48, 22, 0.18);
    transform: translateX(0);
}

.theme-toggle__thumb::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;
}

.theme-toggle__thumb-icon {
    position: absolute;
    inset: 0;
    width: 15px;
    height: 15px;
    margin: auto;
    transition:
        opacity 170ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle__thumb-icon--moon {
    color: #1a1510;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle__thumb-icon--sun {
    color: #f6bf3f;
    opacity: 0;
    transform: rotate(-24deg) scale(0.65);
}

html[data-theme="light"] .theme-toggle__thumb-icon--moon {
    opacity: 0;
    transform: rotate(24deg) scale(0.65);
}

html[data-theme="light"] .theme-toggle__thumb-icon--sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle *,
    .theme-toggle::before {
        transition: none !important;
    }
}

/* ==========================================================================
   A06. SHARED TYPOGRAPHY, BUTTONS, CARDS, CODE, AND CONTENT PRIMITIVES
   Generic hero, heading, button, card, code, and content-layout rules used across shared/legacy public components.
   ========================================================================== */

/* ==========================================================================
   A06.1. GENERIC HERO AND DECORATIVE INDEX ARTWORK

   PURPOSE
   -------
   Provides the shared hero spacing/grid and the older index-page decorative
   canvas, background mark, and content-layer stacking used by non-marketing
   templates.

   INCLUDES
   --------
   - Base hero spacing
   - Index canvas and centered decorative mark
   - Hero copy/grid geometry
   - Product hero bottom spacing

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current marketing-profile hero rules later override these values on
     modern pages.
   - The decorative image variables intentionally use viewport-aware clamp
     values.
   ========================================================================== */

.hero {
    padding: 112px 0 76px;
}

.index-hero {
    --hero-pad-top: 132px;
    --hero-mark-top: clamp(88px, 17svh, 220px);
    --hero-mark-size: min(clamp(240px, 28vw, 540px), 48vw);
    --hero-mark-gap: clamp(44px, 7svh, 96px);

    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.index-hero #canvas-main {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* .index-hero .hero-layer-image {
    position: absolute;
    left: 50%;
    top: 38%;
    z-index: 1;
    width: clamp(320px, 28vw, 520px);
    max-width: 52vw;
    height: auto;
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    transform: translate(-50%, -50%);
} */

.index-hero .hero-layer-image {
    position: absolute;
    top: var(--hero-mark-top);
    left: 50%;
    z-index: 1;

    width: var(--hero-mark-size);
    max-width: none;
    height: auto;

    opacity: 0.42;
    pointer-events: none;
    user-select: none;

    transform: translateX(-50%);
}

.index-hero .hero-grid,
.index-hero .hero-copy,
.index-hero .signal-preview {
    position: relative;
    z-index: 2;
}

.index-hero .hero-grid {
    padding-top: max(0px, calc(var(--hero-mark-top) + var(--hero-mark-size) + var(--hero-mark-gap) - var(--hero-pad-top)));
}

/* ==========================================================================
   A06.2. GENERIC HERO MEDIA FRAME

   PURPOSE
   -------
   Creates an optional centered media slot below hero copy. It supplies a
   reusable frame, picture element sizing, cover behavior, and an empty-source
   safeguard.

   INCLUDES
   --------
   - Responsive frame width and minimum height
   - Picture/image fill behavior
   - Hidden state for missing image sources

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Use contain on a page-specific selector when an illustration must never
     crop.
   ========================================================================== */

.hero-media-slot {
    position: relative;
    z-index: 2;
    margin-top: clamp(56px, 8vw, 104px);
}

.hero-media-frame {
    width: min(100%, 920px);
    min-height: clamp(220px, 28vw, 390px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.16);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.035), transparent 44%),
        rgba(255, 255, 255, 0.018);
    box-shadow: 0 28px 120px rgba(0, 0, 0, 0.24);
}

.hero-media-picture {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.hero-media-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.hero-media-image:not([src]),
.hero-media-image[src=""] {
    display: none;
}


.product-hero {
    padding-bottom: 64px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    gap: 72px;
    align-items: center;
}

.hero-copy {
    max-width: 710px;
}

/* ==========================================================================
   A06.3. GLOBAL TYPOGRAPHY SCALE AND HERO COPY

   PURPOSE
   -------
   Defines the default kicker, heading families/scales, lead paragraph, and
   margin reset shared by older public-page templates.

   INCLUDES
   --------
   - Kicker hierarchy label
   - h1/h2/h3 scales and weights
   - Lead paragraph width and rhythm

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Refined page systems later replace heading families and sizing where
     required.
   - Page-specific kicker colors are intentionally collected in A15.
   ========================================================================== */

.kicker {
    margin: 0 0 12px;
    color: var(--accent-bright);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

/* h1, */
h1 {
    font-family: "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace;
}
h2,
h3 {
    /* font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif; */
    font-family: "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace;
}

h1 {
    max-width: 780px;
    margin-bottom: 24px;
    font-size: clamp(42px, 5.2vw, 64px);
    line-height: 1.01;
    letter-spacing: -0.065em;
    font-weight: 640;
}

h2 {
    margin-bottom: 16px;
    font-size: clamp(32px, 4.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.05em;
    font-weight: 620;
}

h3 {
    margin-bottom: 8px;
    font-size: 18px;
    letter-spacing: -0.02em;
    font-weight: 620;
}


.lede {
    max-width: 640px;
    color: var(--text-soft);
    font-size: clamp(18px, 1.8vw, 21px);
    line-height: 1.58;
    margin-bottom: 30px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ==========================================================================
   A06.4. GLOBAL BUTTON SYSTEM

   PURPOSE
   -------
   Provides the base inline-flex button geometry and the primary/secondary
   visual variants used across public pages.

   INCLUDES
   --------
   - Shared button sizing and hover lift
   - Primary gold gradient action
   - Secondary outlined action

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Marketing and app profiles later adjust radius, font, and dimensions
     while retaining these variant semantics.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 17px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 620;
    border: 1px solid transparent;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

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

.btn-primary {
    color: #11100d;
    background: linear-gradient(135deg, #f4b23b 0%, #f0a022 44%, #e6dcc8 100%);
    border-color: rgba(246, 191, 63, 0.55);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #fac454 0%, #f2a52d 46%, #fff2d4 100%);
    border-color: rgba(246, 191, 63, 0.72);
}

.btn-secondary {
    color: var(--text-soft);
    background: transparent;
    border-color: var(--line);
}

.btn-secondary:hover {
    color: var(--text);
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.045);
}

.note {
    margin: 18px 0 0;
    color: var(--muted-2);
    font-size: 14px;
}

/* ==========================================================================
   A06.5. PREVIEW, SIGNAL, AND SCORE COMPONENTS

   PURPOSE
   -------
   Styles generic preview cards and the compact signal rows used to present
   evaluated inputs, meter bars, and score/value summaries.

   INCLUDES
   --------
   - Shared raised card surface
   - Preview header
   - Signal table and rows
   - Gradient meter bars

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These are legacy/shared primitives; current marketing visuals use
     dedicated mkt-* or product-saas-* components later.
   ========================================================================== */

.preview-card,
.card,
.product-card,
.beta-card,
.section-muted,
.step {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.028);
}

.preview-card {
    border-radius: var(--radius-xl);
    padding: 18px;
    border-color: rgba(238, 152, 38, 0.14);
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.05), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.022));
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.22);
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 16px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.signal-table {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.signal-row {
    display: grid;
    grid-template-columns: 100px 1fr 48px;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.022);
}

.signal-row span {
    color: var(--text-soft);
    font-size: 13px;
}

.signal-row strong {
    color: var(--muted);
    font-size: 13px;
    font-weight: 560;
    text-align: right;
}

.meter {
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.065);
}

.meter span {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

/* ==========================================================================
   A06.6. GENERIC CODE SURFACES

   PURPOSE
   -------
   Defines reusable code-card framing plus global pre/code typography and
   horizontal overflow behavior.

   INCLUDES
   --------
   - Code-card shell
   - Large code variation
   - Scrollable preformatted text
   - Monospace code family

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Documentation and product code panels add syntax colors and specialized
     headers later.
   ========================================================================== */

.code-card {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--code-bg);
}

.large-code {
    border-radius: 22px;
}

pre {
    margin: 0;
    padding: 18px;
    color: #d8d4cc;
    font-size: 13px;
    line-height: 1.68;
    overflow-x: auto;
}

code {
    font-family: "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ==========================================================================
   A07. DOCUMENTATION SYSTEM
   Docs sidebars, API cards, endpoint/code treatments, tables, changelog content, and documentation actions.
   ========================================================================== */

/* ==========================================================================
   A07.1. DOCUMENTATION SHELL AND SIDEBAR NAVIGATION

   PURPOSE
   -------
   Creates the two-column documentation layout and sticky sidebar used by API
   catalog, reference, and changelog pages.

   INCLUDES
   --------
   - Reference shell columns
   - Sticky navigation card
   - Interactive and disabled sidebar rows

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Marketing-profile docs later refine widths and sticky offsets.
   - The API catalog hierarchy receives its final dot/disabled treatment in
     A15.7.
   ========================================================================== */

.docs-reference-shell {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.docs-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.022);
}

.docs-sidebar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 620;
}

.docs-sidebar a:hover,
.docs-sidebar a.active {
    border-color: var(--accent-line);
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.075);
}

.docs-sidebar .docs-sidebar-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--muted-2);
    font-size: var(--type-label, 14px);
    font-weight: 620;
    opacity: 0.58;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

.docs-article {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.docs-article > h2,
.docs-section h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.08;
}

/* ==========================================================================
   A07.2. DOCUMENT ARTICLE SECTIONS

   PURPOSE
   -------
   Defines the bordered article panels and their heading, paragraph, list, and
   spacing system.

   INCLUDES
   --------
   - Article heading scale
   - Section surface and padding
   - Body copy and list rhythm

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Changelog anchors use additional scroll-margin and table-of-contents
     rules in A15.6.
   ========================================================================== */

.docs-section {
    display: grid;
    gap: 16px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.022);
}

.docs-section h3 {
    margin: 0;
    color: var(--text);
    font-size: 21px;
}

.docs-section p,
.docs-section li {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.65;
}

.docs-section p,
.docs-section ul,
.docs-section ol {
    margin: 0;
}

.docs-section ul,
.docs-section ol {
    padding-left: 20px;
}

/* ==========================================================================
   A07.3. DOCUMENTATION NAVIGATION CARDS

   PURPOSE
   -------
   Styles the two-column cards used to route readers to documentation topics,
   quickstarts, and related references.

   INCLUDES
   --------
   - Responsive card grid
   - Hover lift and accent border
   - Category, title, and supporting copy

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These cards are links; API product cards use the separate system
     immediately below.
   ========================================================================== */

.docs-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.docs-card {
    display: grid;
    gap: 8px;
    min-height: 156px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.022);
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.docs-card:hover {
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.045);
    transform: translateY(-1px);
}

/* .docs-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
} */
.docs-card span {
    color: var(--accent-bright);
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.docs-card strong {
    color: var(--text);
    font-size: 19px;
}

.docs-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

/* ==========================================================================
   A07.4. API CATALOG CARDS AND STATUS PILLS

   PURPOSE
   -------
   Builds the product/API catalog cards, availability emphasis,
   disabled-content dimming, and shared development-status pill animation.

   INCLUDES
   --------
   - Three/two-column API grids
   - Available and disabled card states
   - Product title row
   - Live/development status pills and pulse keyframes

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The shared product-saas-status class is also used outside docs; keep its
     animation name globally unique.
   ========================================================================== */

.docs-api-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.docs-api-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docs-api-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 178px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.022);
}

.docs-api-card.is-available {
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.052);
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.docs-api-card.is-available:hover {
    border-color: rgba(255, 192, 75, 0.62);
    background: rgba(238, 152, 38, 0.085);
    transform: translateY(-1px);
}

.docs-api-card.is-disabled {
    opacity: 1;
}

.docs-api-card.is-disabled > .docs-api-meta,
.docs-api-card.is-disabled > .docs-api-title > strong,
.docs-api-card.is-disabled > p {
    opacity: 0.64;
}

.docs-api-meta {
    color: var(--accent-bright);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.docs-api-card strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 19px;
    line-height: 1.25;
}

.docs-api-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.docs-api-link {
    align-self: end;
    color: var(--accent-bright);
    font-size: 13px;
    font-weight: 720;
}


.docs-api-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.product-saas-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.09);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}

.product-saas-status i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
    transform-origin: center;
    animation: product-saas-development-status-pulse 2.5s ease-in-out infinite;
}

html[data-theme="light"] .product-saas-status {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.34);
    background: rgba(59, 130, 246, 0.1);
}

@keyframes product-saas-development-status-pulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1), 0 0 7px rgba(96, 165, 250, 0.24);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 7px rgba(96, 165, 250, 0.025), 0 0 17px rgba(96, 165, 250, 0.72);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-saas-status i {
        animation: none;
    }
}

.docs-api-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(120, 130, 138, 0.9);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.docs-api-pill--development {
    color: #dbeafe;
    border: 1px solid rgba(96, 165, 250, 0.38);
    background: rgba(59, 130, 246, 0.20);
}

.docs-api-pill--development::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #60a5fa;
    transform-origin: center;
    animation: productCatalogDevelopmentPulse 2.5s ease-in-out infinite;
}

html[data-theme="light"] .docs-api-pill--development {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.34);
    background: rgba(59, 130, 246, 0.12);
}

/* ==========================================================================
   A07.5. DOCUMENTATION CALLOUTS AND ENDPOINT LABELS

   PURPOSE
   -------
   Provides highlighted explanatory callouts plus compact HTTP method/endpoint
   rows and inline code treatment.

   INCLUDES
   --------
   - Accent callout panel
   - Endpoint grid
   - Method badge
   - Inline code color

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Endpoint rows can overflow through their surrounding layout; long code
     values should remain break-safe in markup.
   ========================================================================== */

.docs-callout {
    padding: 18px;
    border: 1px solid rgba(238, 152, 38, 0.22);
    border-radius: 16px;
    color: var(--text-soft);
    background: rgba(238, 152, 38, 0.052);
    font-size: 14px;
    line-height: 1.62;
}

.docs-endpoint {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.022);
}

.docs-method {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: #0a0a0a;
    background: var(--accent-bright);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.04em;
}

.docs-endpoint code,
.docs-inline-code {
    color: var(--accent-bright);
    font-size: 13px;
}

/* ==========================================================================
   A07.6. DOCUMENTATION TABLES

   PURPOSE
   -------
   Defines horizontally scrollable reference tables with fixed minimum width,
   header emphasis, and row separators.

   INCLUDES
   --------
   - Touch-friendly overflow wrapper
   - Table sizing and collapse model
   - Header/body typography
   - Last-row border cleanup

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Do not remove the minimum width unless every documented column remains
     readable on phones.
   ========================================================================== */

.docs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.docs-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.docs-table th,
.docs-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}

.docs-table th:first-child,
.docs-table td:first-child {
    white-space: nowrap;
}

.docs-table th {
    color: var(--text);
    font-size: 12px;
    font-weight: 720;
    background: rgba(238, 152, 38, 0.055);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.docs-table td {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.docs-table tr:last-child td {
    border-bottom: 0;
}

.docs-mini-list {
    display: grid;
    gap: 10px;
}

.docs-mini-list li {
    padding-left: 4px;
}

.docs-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   A07.7. DOCUMENT CODE LABELS AND SYNTAX TOKENS

   PURPOSE
   -------
   Styles code-block headers and shared key/string/number syntax colors used by
   documentation examples.

   INCLUDES
   --------
   - Code label strip
   - Key, string, and number token colors

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Legacy smtpRS code tokens are scoped separately in C03 so they cannot
     override these global documentation colors.
   ========================================================================== */

.docs-code-label {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.code-key {
    color: #e0c06f;
}

.code-string {
    color: #b8c7bd;
}

.code-number {
    color: #f0a753;
}

/* ==========================================================================
   A08. SHARED SECTION, CARD, PRODUCT, AND PROCESS LAYOUTS
   Generic sections, card grids, product summaries, output layouts, split sections, and numbered process steps.
   ========================================================================== */

/* ==========================================================================
   A08.1. GENERIC SECTION RHYTHM AND HEADINGS

   PURPOSE
   -------
   Provides shared vertical spacing and heading-container widths for older
   section-based public templates.

   INCLUDES
   --------
   - Default and final section padding
   - Section heading spacing
   - Narrow and stacked heading variants

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Modern marketing and product profiles override these values with
     page-specific section systems.
   ========================================================================== */

.section {
    padding: 78px 0;
}

.section-final {
    padding-bottom: 104px;
}

.section-head {
    margin-bottom: 32px;
}

.section-head.narrow {
    max-width: 720px;
}

.section-head.stacked {
    max-width: 560px;
    margin-bottom: 0;
}

.section-head p,
.card p,
.product-copy p,
.beta-card p,
.split-section p,
.step p,
.output-item span {
    color: var(--muted);
}

/* ==========================================================================
   A08.2. GENERIC CARD GRIDS

   PURPOSE
   -------
   Defines reusable three- and four-column card grids plus the common card
   shell, label, and body-copy treatment.

   INCLUDES
   --------
   - Grid column variants
   - Card minimum height and padding
   - Label hierarchy and copy styling

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Responsive collapse is handled later in A11.
   ========================================================================== */

.card-grid {
    display: grid;
    gap: 14px;
}

.card-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
    min-height: 210px;
    border-radius: var(--radius-lg);
    padding: 24px;
}

.card-label {
    display: inline-block;
    margin-bottom: 46px;
    color: var(--accent-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.card p {
    margin-bottom: 0;
    font-size: 15px;
}

/* ==========================================================================
   A08.3. GENERIC PRODUCT SUMMARY LAYOUT

   PURPOSE
   -------
   Creates the split product summary card with copy, metadata/spec rows, and a
   text-link action.

   INCLUDES
   --------
   - Two-column product card
   - Product copy width
   - Specification table rows
   - Accent text link

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current product pages use the richer shared SaaS system in Section B.
   ========================================================================== */

.product-section {
    padding-top: 46px;
}

.product-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 28px;
    align-items: stretch;
    border-radius: var(--radius-xl);
    padding: 30px;
    background: rgba(255, 255, 255, 0.025);
}

.product-copy {
    max-width: 460px;
}

.product-copy h2 {
    margin-bottom: 14px;
}

.text-link {
    display: inline-flex;
    margin-top: 26px;
    color: var(--accent-bright);
}

.product-spec {
    display: grid;
    align-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
}

.spec-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.spec-row:last-child {
    border-bottom: 0;
}

.spec-row span {
    color: var(--muted-2);
    font-size: 13px;
}

.spec-row strong {
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 540;
}

/* ==========================================================================
   A08.4. BETA / ANNOUNCEMENT CARD

   PURPOSE
   -------
   Defines the wide split announcement card used for beta access and closing
   conversion messages on older templates.

   INCLUDES
   --------
   - Flexible copy/action layout
   - Accent border and gradient surface
   - Responsive heading and copy width

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Phone stacking is applied in A11.
   ========================================================================== */

.beta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: var(--radius-xl);
    padding: 34px;
    border-color: rgba(238, 152, 38, 0.14);
    background:
        linear-gradient(135deg, rgba(238, 152, 38, 0.07), transparent 48%),
        rgba(255, 255, 255, 0.026);
}

.beta-card h2 {
    font-size: clamp(28px, 3.8vw, 44px);
    margin-bottom: 10px;
}

.beta-card p {
    margin-bottom: 0;
    max-width: 570px;
}

.section-muted {
    margin: 44px auto;
    padding: 56px 0;
    background: rgba(255, 255, 255, 0.018);
    border-left: 0;
    border-right: 0;
}

/* ==========================================================================
   A08.5. OUTPUT SUMMARY LAYOUT

   PURPOSE
   -------
   Creates a copy-plus-output-list layout for explaining returned fields,
   signals, or structured results.

   INCLUDES
   --------
   - Two-column layout
   - Output row labels and descriptions
   - Monospace result-name treatment

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The row grid intentionally collapses on small screens in A11.
   ========================================================================== */

.output-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: start;
}

.output-list {
    display: grid;
    gap: 10px;
}

.output-item {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 24px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
}

.output-item:first-child {
    padding-top: 2px;
}

.output-item strong {
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 560;
    font-family: "FiraCode iScript", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.output-item span {
    font-size: 14px;
}

/* ==========================================================================
   A08.6. SPLIT CONTENT AND NUMBERED PROCESS STEPS

   PURPOSE
   -------
   Defines the generic split-section shell and compact numbered step cards used
   by older workflow explanations.

   INCLUDES
   --------
   - Two-column split content
   - Step list and numbered badge
   - Shared muted copy

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current product workflow cards use the Section B step-grid system.
   ========================================================================== */

.split-section {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
}

.split-section > div:first-child {
    max-width: 520px;
}

.steps {
    display: grid;
    gap: 12px;
}

.step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 16px;
    align-items: start;
    border-radius: var(--radius-lg);
    padding: 18px;
    background: rgba(255, 255, 255, 0.023);
}

.step span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--accent-bright);
    font-size: 13px;
    border: 1px solid rgba(238, 152, 38, 0.2);
    border-radius: 50%;
    background: rgba(238, 152, 38, 0.045);
}

.step p {
    margin-bottom: 0;
}



/* ==========================================================================
   A09. LEGACY / REFINED PAGE-SPECIFIC SPACING
   Historical platform and smtpRS spacing systems retained because existing pages still depend on their source order.
   ========================================================================== */

/* ==========================================================================
   A09.1. LEGACY INDEX-PAGE SPACING PROFILE

   PURPOSE
   -------
   Retains the earlier index-page hero, section, card, product, and final-CTA
   spacing values for templates that still use the legacy page-index structure.

   INCLUDES
   --------
   - Desktop section rhythm
   - Tablet and phone spacing overrides
   - Hero mark-aware top padding

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Later refined platform and marketing-profile rules intentionally
     supersede portions of this block.
   ========================================================================== */

.page-index .hero {
    padding: var(--hero-pad-top) 0 clamp(52px, 6vw, 72px);
    min-height: calc(100svh - 76px);
    display: block;
}

.page-index .hero-grid {
    gap: 92px;
}

.page-index .lede {
    max-width: 680px;
}

.page-index .section {
    padding: 118px 0;
}

.page-index .section-head {
    margin-bottom: 52px;
}

.page-index .section-head.narrow {
    max-width: 760px;
}

.page-index .statement-section {
    padding-top: clamp(76px, 8vw, 108px);
    padding-bottom: clamp(8px, 1.6vw, 22px);
}

.page-index .compact-section {
    padding-top: clamp(0px, 1vw, 12px);
    padding-bottom: clamp(86px, 9vw, 118px);
}

.page-index .statement-grid > :last-child {
    margin-bottom: 0;
}

.page-index .card-grid {
    gap: 24px;
}

.page-index .card {
    min-height: 232px;
    padding: 30px;
}

.page-index .card-label {
    margin-bottom: 62px;
}

.page-index .product-section {
    padding-top: 72px;
    padding-bottom: 118px;
}

.page-index .product-card {
    gap: 52px;
    padding: 42px;
}

.page-index .beta-card {
    padding: 44px;
}

.page-index .section-final {
    padding-top: 118px;
    padding-bottom: 144px;
}

@media (max-width: 980px) {
    .page-index .hero {
        --hero-pad-top: 88px;
        min-height: auto;
        padding: 88px 0 72px;
    }

    .page-index .hero-grid,
    .page-index .product-card {
        gap: 48px;
    }

    .page-index .section {
        padding: 88px 0;
    }

    .page-index .statement-section {
        padding-top: 74px;
        padding-bottom: 12px;
    }

    .page-index .compact-section {
        padding-top: 4px;
        padding-bottom: 82px;
    }

    .page-index .section-head {
        margin-bottom: 40px;
    }

    .page-index .product-section {
        padding-top: 68px;
        padding-bottom: 92px;
    }

    .page-index .section-final {
        padding-top: 92px;
        padding-bottom: 104px;
    }
}

@media (max-width: 620px) {
    .page-index .hero {
        --hero-pad-top: 72px;
        padding: 72px 0 58px;
    }

    .page-index .section {
        padding: 74px 0;
    }

    .page-index .statement-section {
        padding-top: 62px;
        padding-bottom: 10px;
    }

    .page-index .compact-section {
        padding-top: 0;
        padding-bottom: 66px;
    }

    .page-index .card-grid {
        gap: 18px;
    }

    .page-index .card {
        min-height: 190px;
    }

    .page-index .card-label {
        margin-bottom: 42px;
    }

    .page-index .product-card,
    .page-index .beta-card {
        padding: 24px;
    }

    .page-index .product-section {
        padding-top: 54px;
        padding-bottom: 76px;
    }

    .page-index .section-final {
        padding-top: 76px;
        padding-bottom: 88px;
    }
}


/* --------------------------------------------------------------------------
   smtpRS page spacing
   Earlier smtpRS hero, model, signal, card, and responsive spacing rules.
   -------------------------------------------------------------------------- */

.neural-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.neural-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(380px, 1.12fr);
    gap: clamp(44px, 6vw, 92px);
    align-items: center;
}

.neural-hero .hero-copy {
    max-width: 720px;
}

.neural-hero h1 {
    max-width: 760px;
    font-size: clamp(48px, 5.4vw, 78px);
}

.page-smtprs h1,
.page-smtprs h2,
.page-smtprs h3 {
    letter-spacing: 0;
    overflow-wrap: break-word;
}

.neural-visual {
    position: relative;
    min-height: clamp(360px, 36vw, 560px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.2);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.07), rgba(255, 255, 255, 0.018)),
        #050608;
    box-shadow: 0 36px 130px rgba(0, 0, 0, 0.34);
}

.neural-visual-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transition: opacity 120ms ease;
}

.neural-visual-image-light {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.neural-visual-image-dark {
    opacity: 1;
}

html[data-theme="light"] .neural-visual-image-light {
    opacity: 1;
}

html[data-theme="light"] .neural-visual-image-dark {
    opacity: 0;
}

.neural-visual figcaption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    color: var(--text-soft);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    background: rgba(5, 6, 8, 0.76);
    backdrop-filter: blur(16px);
}

.neural-visual figcaption span {
    color: var(--muted);
    font-size: 12px;
}

.neural-visual figcaption strong {
    color: var(--accent-bright);
    font-size: 12px;
    font-weight: 620;
    text-align: right;
}

.lab-positioning {
    padding-top: 30px;
}

.lab-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(38px, 6vw, 84px);
    align-items: start;
    padding-top: 38px;
    border-top: 1px solid var(--line-soft);
}

.lab-grid h2 {
    margin-bottom: 0;
}

.lab-grid > p {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--text-soft);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.62;
}

.model-family {
    padding-top: 86px;
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.model-card {
    display: flex;
    min-height: 480px;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.02);
}

.model-card.featured {
    border-color: rgba(238, 152, 38, 0.32);
    background:
        linear-gradient(135deg, rgba(238, 152, 38, 0.12), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 30px 120px rgba(238, 152, 38, 0.055);
}

.model-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-size: 12px;
}

.model-tier {
    color: var(--accent-bright);
    font-weight: 620;
}

.model-latency {
    color: var(--muted);
}

.model-card h3 {
    margin-bottom: 18px;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.02;
}

.model-card p {
    max-width: 560px;
    color: var(--text-soft);
    font-size: 16px;
}

.model-specs {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line-soft);
}

.model-specs div {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}

.model-specs div:last-child {
    border-bottom: 0;
}

.model-specs dt {
    color: var(--muted-2);
    font-size: 13px;
}

.model-specs dd {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 560;
}

.signal-section {
    padding-top: 96px;
}

.signal-cards .card {
    min-height: 246px;
}

.research-section {
    padding-top: 118px;
}

.page-smtprs .hero {
    padding: 132px 0 116px;
}

.page-smtprs .product-hero {
    padding-bottom: 110px;
}

.page-smtprs .hero-grid {
    gap: 92px;
}

.page-smtprs .section {
    padding: 112px 0;
}

.page-smtprs .section-head {
    margin-bottom: 50px;
}

.page-smtprs .section-head.narrow {
    max-width: 780px;
}

.page-smtprs .card-grid {
    gap: 24px;
}

.page-smtprs .card {
    min-height: 232px;
    padding: 30px;
}

.page-smtprs .card-label {
    margin-bottom: 62px;
}

.page-smtprs .section-muted {
    margin: 72px auto;
    padding: 86px 0;
}

.page-smtprs .output-layout {
    gap: 78px;
}

.page-smtprs .output-list {
    gap: 14px;
}

.page-smtprs .split-section {
    gap: 86px;
}

.page-smtprs .steps {
    gap: 18px;
}

.page-smtprs .step {
    padding: 22px;
}

.page-smtprs .section-final {
    padding-top: 104px;
    padding-bottom: 144px;
}

.page-smtprs .beta-card {
    padding: 44px;
}

@media (max-width: 980px) {
    .neural-hero-grid,
    .lab-grid,
    .model-grid {
        grid-template-columns: 1fr;
    }

    .neural-visual {
        min-height: clamp(320px, 56vw, 520px);
    }

    .neural-hero h1 {
        max-width: 820px;
    }

    .model-card {
        min-height: auto;
    }

    .page-smtprs .hero {
        padding: 88px 0 92px;
    }

    .page-smtprs .product-hero {
        padding-bottom: 92px;
    }

    .page-smtprs .hero-grid,
    .page-smtprs .output-layout,
    .page-smtprs .split-section {
        gap: 52px;
    }

    .page-smtprs .section {
        padding: 88px 0;
    }

    .page-smtprs .section-head {
        margin-bottom: 40px;
    }

    .page-smtprs .section-muted {
        margin: 52px auto;
        padding: 72px 0;
    }

    .page-smtprs .section-final {
        padding-top: 88px;
        padding-bottom: 104px;
    }
}

@media (max-width: 620px) {
    .neural-hero h1 {
        font-size: clamp(38px, 12vw, 54px);
    }

    .neural-visual {
        min-height: 280px;
        border-radius: var(--radius-lg);
    }

    .neural-visual figcaption {
        position: static;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
    }

    .neural-visual figcaption strong {
        text-align: left;
    }

    .lab-positioning {
        padding-top: 20px;
    }

    .model-card {
        padding: 24px;
    }

    .model-card-top,
    .model-specs div {
        grid-template-columns: 1fr;
    }

    .model-card-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .model-specs div {
        gap: 4px;
    }

    .page-smtprs .hero {
        padding: 72px 0 76px;
    }

    .page-smtprs .product-hero {
        padding-bottom: 76px;
    }

    .page-smtprs .section {
        padding: 74px 0;
    }

    .page-smtprs .card-grid {
        gap: 18px;
    }

    .page-smtprs .card {
        min-height: 190px;
    }

    .page-smtprs .card-label {
        margin-bottom: 42px;
    }

    .page-smtprs .section-muted {
        margin: 38px auto;
        padding: 58px 0;
    }

    .page-smtprs .beta-card {
        padding: 24px;
    }

    .page-smtprs .section-final {
        padding-top: 76px;
        padding-bottom: 88px;
    }
}

/* ==========================================================================
   A10. FOOTER

   PURPOSE
   -------
   Defines the shared footer shell, copyright/company credit, legal/navigation
   links, and rotated social-media icon buttons.

   INCLUDES
   --------
   - Footer surface and top border
   - Three-column social layout
   - Brand-specific social colors
   - Tablet centering and stacking

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The footer must retain flex-shrink: 0 because body is a min-height flex
     column.
   - Public route transitions reference .site-footer earlier in A04 but do
     not own its layout.
   ========================================================================== */

.site-footer {
    flex-shrink: 0;
    padding: 34px 0;
    color: var(--muted-2);
    background: var(--bg);
    border-top: 1px solid var(--line-soft);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 14px;
}

.footer-inner.footer-inner--social {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(20px, 2.5vw, 40px);
    width: min(1320px, calc(100% - 48px));
}

.footer-inner--social > span {
    justify-self: start;
}

.footer-inner--social .footer-links {
    justify-self: end;
    justify-content: flex-end;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 560px;
}

.footer-social-link {
    --social-color: var(--text-soft);
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--social-color);
    border: 1.5px solid var(--social-color);
    transform: rotate(-45deg);
    transition:
        color 600ms ease,
        background-color 600ms ease,
        border-color 600ms ease;
}

.footer-social-link i {
    display: block;
    font-size: 13px;
    line-height: 1;
    transform: rotate(45deg);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
    color: #ffffff;
    background-color: var(--social-color);
}

.footer-social-link:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 4px;
}

.footer-social-x {
    --social-color: #1da1f2;
}

.footer-social-youtube {
    --social-color: #ff0000;
}

.footer-social-linkedin {
    --social-color: #0077b5;
}

.footer-social-facebook {
    --social-color: #3b5998;
}

.footer-social-reddit {
    --social-color: #ff4500;
}

.footer-social-github {
    --social-color: #8b949e;
}

.footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-inner > span a {
    color: var(--text-soft);
    transition: color 150ms ease;
}

.footer-inner > span a:hover {
    color: var(--accent-bright);
}

@media (max-width: 1280px) {
    .footer-inner.footer-inner--social {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 24px;
        width: min(var(--max), calc(100% - 48px));
        text-align: center;
    }

    .footer-inner--social > span,
    .footer-inner--social .footer-links {
        justify-self: center;
    }

    .footer-inner--social .footer-links {
        justify-content: center;
    }
}

/* ==========================================================================
   A11. GLOBAL RESPONSIVE BEHAVIOR
   Header/catalog, shared layout, typography, cards, product summaries, and footer adaptations for tablet/phone widths.
   ========================================================================== */

/* ==========================================================================
   A11.1. TABLET NAVIGATION AND SHARED GRID COLLAPSE

   PURPOSE
   -------
   At 980px and below, the primary navigation wraps, the link row becomes
   horizontally scrollable, and major shared two-column layouts collapse.

   INCLUDES
   --------
   - Wrapped header/navigation
   - Smaller catalog flyout
   - Single-column hero/product/output layouts
   - Two-column generic card grids

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This is the first global responsive stage; narrower overrides follow and
     must remain later.
   ========================================================================== */

@media (max-width: 980px) {
    .nav {
        flex-wrap: wrap;
    }

    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        gap: 18px;
        padding-bottom: 2px;
    }

    .product-catalog-menu {
        position: fixed;
        top: var(--site-header-visible-height, 120px);
        left: 14px;
        width: min(680px, calc(100vw - 28px));
        padding: 13px;
        transform: translateY(-6px);
    }

    .nav-catalog:hover .product-catalog-menu,
    .nav-catalog:focus-within .product-catalog-menu,
    .nav-catalog.is-open .product-catalog-menu {
        transform: translateY(0);
    }

    .product-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
    }

    .product-catalog-section {
        padding: 0;
    }

    .product-catalog-section:nth-child(3) {
        border-right: 0;
    }

    .product-catalog-head {
        display: block;
    }

    .hero {
        padding-top: 76px;
    }

    .hero-grid,
    .product-card,
    .output-layout,
    .split-section {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .preview-card {
        max-width: 620px;
    }

    .card-grid.three,
    .card-grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Keep tap-open flyouts inside wide tablet and hybrid-device viewports. */
@media (min-width: 721px) {
    .nav-catalog.is-open .product-catalog-menu {
        position: fixed;
        top: var(--site-header-visible-height, 88px);
        left: 14px;
        max-width: calc(100vw - 28px);
        transform: translateY(0);
    }
}

/* ==========================================================================
   A11.2. PHONE PRODUCT-CATALOG FLYOUT

   PURPOSE
   -------
   Converts the Product catalog from an anchored popover into a viewport-fixed
   mobile panel and collapses product groups to one column.

   INCLUDES
   --------
   - Fixed mobile positioning
   - Viewport-limited height
   - Single-column catalog groups
   - Section dividers

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The top value assumes the wrapped mobile header; coordinate changes with
     any future mobile-header redesign.
   ========================================================================== */

@media (max-width: 640px) {
    .product-catalog-menu {
        position: fixed;
        top: 116px;
        left: 14px;
        width: calc(100vw - 28px);
        max-height: calc(100vh - 132px);
        transform: translateY(-6px);
    }

    .nav-catalog:hover .product-catalog-menu,
    .nav-catalog:focus-within .product-catalog-menu {
        transform: translateY(0);
    }

    .product-catalog-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product-catalog-section,
    .product-catalog-section:first-child,
    .product-catalog-section:last-child {
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
        padding-bottom: 12px;
    }

    .product-catalog-section:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
}

/* ==========================================================================
   A11.3. PHONE GLOBAL LAYOUT AND TYPOGRAPHY

   PURPOSE
   -------
   Applies the narrowest shared container, logo, heading, section, card, table,
   and footer adjustments for public pages.

   INCLUDES
   --------
   - Narrow container and logo
   - Single-column cards
   - Smaller heading/hero/section spacing
   - Stacked beta card and footer

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Page-profile phone rules later may further adjust the same components.
   ========================================================================== */

@media (max-width: 620px) {
    .container {
        width: min(100% - 30px, var(--max));
    }

    .logo {
        display: none;
    }

    .nav-action {
        display: none;
    }

    .nav-links {
        gap: 15px;
    }

    h1 {
        font-size: clamp(40px, 13vw, 58px);
        letter-spacing: -0.055em;
    }

    h2 {
        letter-spacing: -0.04em;
    }

    .hero {
        padding: 62px 0 58px;
    }

    .section {
        padding: 58px 0;
    }

    .section-final {
        padding-bottom: 78px;
    }

    .card-grid.three,
    .card-grid.four {
        grid-template-columns: 1fr;
    }

    .signal-row,
    .spec-row,
    .output-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .signal-row strong {
        text-align: left;
    }

    .preview-card,
    .card,
    .product-card,
    .beta-card {
        padding: 20px;
    }

    .beta-card {
        align-items: flex-start;
        flex-direction: column;
    }

    pre {
        font-size: 12px;
        padding: 15px;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================
   A11.4. INDEX DECORATIVE MARK RESPONSIVE TUNING

   PURPOSE
   -------
   Adjusts the older index hero mark, hero grid, and opacity across desktop,
   tablet, phone, and short-height desktop conditions.

   INCLUDES
   --------
   - 1200px, 1050px, 900px, and 640px width stages
   - Short-height desktop stage

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These values coordinate custom properties declared on .index-hero;
     preserve breakpoint order.
   ========================================================================== */

@media (max-width: 1200px) {
    .page-index .index-hero {
        --hero-mark-size: min(clamp(220px, 24vw, 420px), 42vw);
    }

    .page-index .hero-grid {
        grid-template-columns: minmax(0, 1fr) clamp(340px, 36vw, 430px);
        gap: clamp(36px, 5vw, 64px);
    }
}

@media (max-width: 1050px) {
    .page-index .index-hero {
        --hero-mark-top: 92px;
        --hero-mark-size: min(clamp(240px, 42vw, 380px), 70vw);
        --hero-mark-gap: 42px;
    }

    .page-index .hero-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .preview-card {
        max-width: 560px;
    }

    .index-hero .hero-layer-image {
        opacity: 0.24;
    }
}

@media (max-width: 900px) {
    .page-index .index-hero {
        --hero-mark-top: 96px;
        --hero-mark-size: min(420px, 78vw);
        --hero-mark-gap: 40px;
    }

    .index-hero .hero-layer-image {
        opacity: 0.22;
    }
}

@media (max-width: 640px) {
    .page-index .index-hero {
        --hero-pad-top: 72px;
        --hero-mark-top: 84px;
        --hero-mark-size: min(360px, 92vw);
        --hero-mark-gap: 36px;
    }

    .index-hero .hero-layer-image {
        opacity: 0.18;
    }
}

@media (max-height: 760px) and (min-width: 1051px) {
    .page-index .index-hero {
        --hero-pad-top: 96px;
        --hero-mark-top: 84px;
        --hero-mark-size: min(clamp(200px, 20vw, 360px), 42vw);
        --hero-mark-gap: 44px;
    }

    .page-index .hero {
        padding-top: var(--hero-pad-top);
        padding-bottom: 64px;
    }

    .index-hero .hero-layer-image {
        opacity: 0.30;
    }
}


/* ==========================================================================
   A12. REFINED PUBLIC PRODUCT AND PLATFORM RULES
   Later public-page refinements that intentionally supersede portions of earlier shared/legacy styles.
   ========================================================================== */

/* ==========================================================================
   A12.1. REFINED PRODUCT-PAGE FONT FOUNDATION

   PURPOSE
   -------
   Applies the Aptos body and Rubik heading system to the refined public
   product page classes used before the current shared SaaS templates.

   INCLUDES
   --------
   - Shared body font for smtpRS, InvoiceGuard, RetainIQ, and VendorLens
   - Heading family, weight, letter spacing, and wrap behavior

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current .product-saas-page typography is defined in Section B and later
     refined in Section E.
   ========================================================================== */

body.page-smtprs,
body.page-invoiceguard,
body.page-retainiq,
body.page-vendorlens {
    font-family: "Aptos", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-smtprs h1,
.page-smtprs h2,
.page-smtprs h3,
.page-invoiceguard h1,
.page-invoiceguard h2,
.page-invoiceguard h3,
.page-retainiq h1,
.page-retainiq h2,
.page-retainiq h3,
.page-vendorlens h1,
.page-vendorlens h2,
.page-vendorlens h3 {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    overflow-wrap: break-word;
}

/* ==========================================================================
   A12.2. REFINED LEGACY SMTPRS PAGE

   PURPOSE
   -------
   Defines the later smtpRS-specific hero, visual, model cards, signal
   sections, output layouts, and responsive density that supersede the earlier
   A09 smtpRS spacing profile.

   INCLUDES
   --------
   - Heading and hero scale
   - Neural visual and captions
   - Model cards/specs
   - Signal/output/step spacing
   - Tablet and phone adaptations

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Source order is intentional: this block wins over A09 where selectors
     have equal specificity.
   ========================================================================== */

.page-smtprs h1 {
    max-width: 780px;
    margin-bottom: 22px;
    font-size: 54px;
    line-height: 1.04;
}

.page-smtprs h2 {
    margin-bottom: 16px;
    font-size: 42px;
    line-height: 1.12;
}

.page-smtprs h3 {
    margin-bottom: 10px;
    font-size: 21px;
    line-height: 1.2;
}

.page-smtprs .hero {
    padding: 104px 0 86px;
}

.page-smtprs .product-hero {
    padding-bottom: 86px;
}

.page-smtprs .section {
    padding: 86px 0;
}

.page-smtprs .section-head {
    margin-bottom: 36px;
}

.page-smtprs .section-head.narrow {
    max-width: 690px;
}

.page-smtprs .kicker {
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.page-smtprs .lede {
    max-width: 690px;
    margin-bottom: 26px;
    font-size: 20px;
    line-height: 1.62;
}

.page-smtprs .note {
    max-width: 520px;
    font-size: 13px;
}

.neural-hero {
    overflow: visible;
}

.neural-hero-grid {
    display: block;
}

.neural-hero .hero-copy {
    max-width: 780px;
}

.neural-hero h1 {
    max-width: 760px;
    font-size: 54px;
}

.neural-visual {
    width: min(100%, 1120px);
    min-height: 0;
    margin: 78px auto 0;
    overflow: visible;
    border: 1px solid rgba(238, 152, 38, 0.14);
    border-radius: 16px;
    background: transparent;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.26);
}

.neural-visual img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: inherit;
    object-fit: contain;
}

.neural-visual figcaption {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 2px 0;
    color: var(--muted);
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.neural-visual figcaption span,
.neural-visual figcaption strong {
    font-size: 12px;
    font-weight: 500;
}

.neural-visual figcaption strong {
    color: var(--accent-bright);
    text-align: right;
}

.lab-positioning {
    padding-top: 54px;
}

.lab-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 72px;
    padding-top: 42px;
}

.lab-grid > p {
    max-width: 640px;
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1.68;
}

.model-family {
    padding-top: 72px;
}

.model-grid {
    gap: 18px;
}

.model-card,
.model-card.featured {
    min-height: 360px;
    gap: 24px;
    padding: 28px;
    border-color: var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.022);
    box-shadow: none;
}

.model-card-top {
    align-items: flex-start;
    font-size: 12px;
}

.model-tier {
    color: var(--accent-bright);
    font-weight: 600;
}

.model-card h3 {
    margin-bottom: 14px;
    font-size: 30px;
    line-height: 1.08;
}

.model-card p {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.62;
}

.model-specs div {
    grid-template-columns: 122px 1fr;
    gap: 14px;
    padding: 13px 0;
}

.model-specs dt,
.model-specs dd {
    font-size: 13px;
}

.signal-section {
    padding-top: 78px;
}

.page-smtprs .card-grid {
    gap: 16px;
}

.page-smtprs .card {
    min-height: 176px;
    padding: 24px;
    border-radius: 16px;
}

.page-smtprs .card-label {
    margin-bottom: 28px;
    font-size: 11px;
}

.page-smtprs .card p {
    font-size: 14px;
    line-height: 1.58;
}

.page-smtprs .section-muted {
    margin: 42px auto;
    padding: 64px 0;
}

.page-smtprs .output-layout,
.page-smtprs .split-section {
    gap: 64px;
}

.page-smtprs .output-list {
    gap: 8px;
}

.page-smtprs .step {
    padding: 18px;
    border-radius: 16px;
}

.research-section {
    padding-top: 92px;
}

.page-smtprs .section-final {
    padding-top: 88px;
    padding-bottom: 116px;
}

.page-smtprs .beta-card {
    padding: 34px;
    border-radius: 18px;
}

.page-smtprs .beta-card h2 {
    font-size: 34px;
}

@media (max-width: 980px) {
    .page-smtprs h1,
    .neural-hero h1 {
        font-size: 52px;
    }

    .page-smtprs h2 {
        font-size: 34px;
    }

    .page-smtprs .hero {
        padding: 82px 0 72px;
    }

    .page-smtprs .product-hero {
        padding-bottom: 72px;
    }

    .neural-visual {
        margin-top: 56px;
    }

    .lab-grid,
    .model-grid,
    .page-smtprs .output-layout,
    .page-smtprs .split-section {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .page-smtprs .section {
        padding: 72px 0;
    }
}

@media (max-width: 620px) {
    .page-smtprs h1,
    .neural-hero h1 {
        font-size: 40px;
        line-height: 1.08;
    }

    .page-smtprs h2 {
        font-size: 29px;
    }

    .page-smtprs h3 {
        font-size: 19px;
    }

    .page-smtprs .hero {
        padding: 62px 0 56px;
    }

    .page-smtprs .product-hero {
        padding-bottom: 56px;
    }

    .page-smtprs .lede {
        font-size: 17px;
    }

    .neural-visual {
        margin-top: 42px;
        border-radius: 12px;
    }

    .neural-visual figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding-top: 12px;
    }

    .neural-visual figcaption strong {
        text-align: left;
    }

    .page-smtprs .section {
        padding: 58px 0;
    }

    .lab-positioning,
    .model-family,
    .signal-section,
    .research-section {
        padding-top: 44px;
    }

    .model-card,
    .model-card.featured,
    .page-smtprs .card,
    .page-smtprs .beta-card {
        padding: 20px;
    }

    .model-specs div,
    .output-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .page-smtprs .section-muted {
        margin: 24px auto;
        padding: 48px 0;
    }
}


/* --------------------------------------------------------------------------
   Refined Paravane platform page
   Platform-specific heading scale, statement/product spacing, use-case layout, and responsive adjustments.
   -------------------------------------------------------------------------- */

body.page-index {
    font-family: "Aptos", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-index h1,
.page-index h2,
.page-index h3 {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    overflow-wrap: break-word;
}

.page-index h1 {
    max-width: 740px;
    margin-bottom: 22px;
    font-size: 54px;
    line-height: 1.04;
}

.page-index h2 {
    margin-bottom: 16px;
    font-size: 42px;
    line-height: 1.12;
}

.page-index h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.2;
}

.page-index .kicker {
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.page-index .hero-copy {
    max-width: 720px;
}

.page-index .lede {
    max-width: 640px;
    margin-bottom: 26px;
    font-size: 20px;
    line-height: 1.62;
}

.page-index .preview-card {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.04), transparent 44%),
        rgba(255, 255, 255, 0.024);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.2);
}

.hero-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--text);
}

.hero-score span {
    color: var(--text-soft);
    font-size: 15px;
}

.hero-score strong {
    color: var(--accent-bright);
    font-size: 22px;
    font-weight: 600;
}

.page-index .section {
    padding: 94px 0;
}

.page-index .statement-section {
    padding-top: clamp(64px, 7vw, 92px);
    padding-bottom: 10px;
}

.statement-grid {
    max-width: 780px;
}

.statement-grid > p:last-child {
    max-width: 680px;
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1.68;
}

.page-index .compact-section {
    padding-top: 22px;
    padding-bottom: 76px;
}

.page-index .card-grid {
    gap: 16px;
}

.page-index .card {
    min-height: 178px;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.022);
}

.page-index .card-label {
    margin-bottom: 26px;
    font-size: 11px;
}

.page-index .card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.58;
}

.page-index .product-section {
    padding-top: 58px;
    padding-bottom: 92px;
}

.page-index .product-card {
    gap: 42px;
    padding: 34px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.022);
}

.page-index .product-copy h2 {
    font-size: 40px;
}

.page-index .product-copy p {
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.62;
}

.page-index .product-spec {
    border-radius: 16px;
}

.page-index .spec-row {
    padding: 16px 18px;
}

.page-index .section-muted {
    margin: 36px auto;
    padding: 66px 0;
}

.usecase-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
}

.usecase-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
}

.usecase-list span {
    color: var(--text-soft);
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.022);
}

.page-index .section-final {
    padding-top: 86px;
    padding-bottom: 116px;
}

.page-index .beta-card {
    padding: 34px;
    border-radius: 18px;
}

.page-index .beta-card h2 {
    font-size: 34px;
}

@media (max-width: 980px) {
    .page-index h1 {
        font-size: 52px;
    }

    .page-index h2 {
        font-size: 34px;
    }

    .page-index .section {
        padding: 72px 0;
    }

    .statement-grid {
        max-width: 720px;
    }

    .usecase-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .page-index .product-card {
        gap: 32px;
    }
}

@media (max-width: 620px) {
    .page-index h1 {
        font-size: 40px;
        line-height: 1.08;
    }

    .page-index h2 {
        font-size: 29px;
    }

    .page-index h3 {
        font-size: 18px;
    }

    .page-index .lede {
        font-size: 17px;
    }

    .page-index .section {
        padding: 58px 0;
    }

    .page-index .statement-section {
        padding-top: 48px;
    }

    .page-index .compact-section {
        padding-top: 8px;
        padding-bottom: 58px;
    }

    .page-index .card,
    .page-index .product-card,
    .page-index .beta-card {
        padding: 20px;
    }

    .page-index .section-muted {
        margin: 24px auto;
        padding: 48px 0;
    }

    .page-index .section-final {
        padding-top: 58px;
        padding-bottom: 84px;
    }
}


/* ==========================================================================
   A13. PRICING, LEGAL, FORMS, AUTHENTICATION, AND CUSTOMER APP
   Business pages, legal center, forms, auth screens, customer workspace, API keys, billing, modals, and account controls.
   ========================================================================== */

/* ==========================================================================
   A13.1. EXPANDED PUBLIC-PAGE NAV ACTIONS AND STANDARD HERO

   PURPOSE
   -------
   Defines grouped navigation actions, active states, inline action rows, and
   the generic standard-page hero used by pricing, docs, legal, contact, and
   auth pages.

   INCLUDES
   --------
   - Nav action group and secondary state
   - Inline action row
   - Standard hero spacing and copy width

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Modern marketing-profile standard heroes are defined later in E09.
   ========================================================================== */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (min-width: 1024px) {
    .nav:has(.nav-action-secondary) {
        justify-content: flex-start;
    }

    .nav-actions:has(.nav-action-secondary) {
        flex: 1;
        justify-content: space-between;
    }
}

@media (max-width: 620px) {
    .product-saas-subnav {
        position: sticky !important;
        top: 0 !important;
        z-index: 90;
    }
}

.nav-action.active,
.nav-action-secondary.active {
    color: var(--accent-bright);
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.055);
}

.nav-action-secondary {
    color: var(--muted);
    background: transparent;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

.page-standard .standard-hero {
    padding-top: 104px;
    padding-bottom: 58px;
}

.page-standard .standard-hero h1 {
    max-width: 840px;
}

.page-standard .standard-hero .lede {
    max-width: 720px;
}

/* ==========================================================================
   A13.2. PRICING TIERS, CREDIT PACKS, AND COMPARISON TABLES

   PURPOSE
   -------
   Builds the public pricing card system, feature lists, credit-pack comparison
   area, hover emphasis, and plan comparison rows.

   INCLUDES
   --------
   - Two/three-column tier grids
   - Featured plan treatment
   - Price block and feature bullets
   - Credit-pack policy/actions
   - Comparison table

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Marketing-profile pricing refinements later adjust card height, padding,
     radius, and spacing.
   ========================================================================== */

.tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pricing-tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-disclaimer {
    max-width: 920px;
    margin: 22px auto 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.credit-pack-pricing {
    margin-top: 64px;
    padding-top: 56px;
    border-top: 1px solid var(--line);
}

.credit-pack-table .comparison-row {
    grid-template-columns: 1.05fr 0.75fr 1.5fr 0.8fr;
}

.credit-pack-table strong {
    color: var(--text);
    font-weight: 680;
}

.credit-pack-policy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-top: 22px;
}

.credit-pack-policy p {
    max-width: 780px;
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.65;
}

.credit-pack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.tier-card,
.contact-card,
.docs-panel,
.form-shell,
.auth-card,
.route-panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.024);
}

.tier-card {
    display: flex;
    min-height: 620px;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
}

.featured-tier {
    border-color: rgba(238, 152, 38, 0.22);
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.055), transparent 44%),
        rgba(255, 255, 255, 0.026);
}

.tier-card h2 {
    max-width: 420px;
    font-size: 34px;
}

.tier-card p {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.64;
}

.price-block {
    display: grid;
    gap: 5px;
    margin: 26px 0 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}

.price-block strong {
    color: var(--accent-bright);
    font-size: 18px;
    font-weight: 620;
}

.price-block span {
    color: var(--muted);
    font-size: 13px;
}

.tier-list {
    display: grid;
    gap: 12px;
    margin: 0 0 30px;
    padding: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.48;
    list-style: none;
}

.tier-list li {
    position: relative;
    padding-left: 18px;
}

.tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent-bright);
}

.tier-card .btn {
    margin-top: auto;
}


.tier-card {
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.tier-card:hover {
    border-color: rgba(246, 191, 63, 0.34);
    box-shadow: 0 24px 72px rgba(238, 152, 38, 0.08);
    transform: translateY(-2px);
}

.tier-card .btn {
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.tier-card .btn:hover {
    box-shadow: 0 10px 28px rgba(238, 152, 38, 0.16);
}

.comparison-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.022);
}

.comparison-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    gap: 18px;
    padding: 18px 20px;
    border-top: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.45;
}

.comparison-row:first-child {
    border-top: 0;
}

.comparison-head {
    color: var(--accent-bright);
    font-weight: 620;
    background: rgba(238, 152, 38, 0.045);
}

/* ==========================================================================
   A13.3. STANDARD TWO-COLUMN PAGE SHELLS AND ROUTE LISTS

   PURPOSE
   -------
   Provides the common split layout used by documentation panels, route/index
   pages, contact introductions, and authentication screens.

   INCLUDES
   --------
   - Shared split grid
   - Panel/card surfaces
   - Route-list rows and hover states
   - Pricing card height correction

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Individual page systems below add their own navigation, forms, and
     content styling.
   ========================================================================== */

.docs-layout,
.route-grid,
.contact-intro,
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 42px;
    align-items: start;
}

.docs-panel,
.route-panel,
.contact-card {
    padding: 28px;
}

.pricing-tier-grid .tier-card {
    min-height: 540px;
}

.docs-panel p,
.route-panel p,
.contact-card p,
.auth-copy p {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.64;
}

.route-list {
    display: grid;
    gap: 10px;
}

.route-list a,
.route-list .route-item {
    display: grid;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.022);
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.route-list .route-item {
    transition: none;
}

.route-list a:hover {
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.045);
    transform: translateY(-1px);
}

.route-list span {
    color: var(--muted);
    font-size: 12px;
}

.route-list strong {
    color: var(--text-soft);
    font-size: 15px;
    font-weight: 560;
}

/* --------------------------------------------------------------------------
   Legal center
   Legal-document navigation, policy cards/tables, sticky resource sidebar, and responsive document layout.
   -------------------------------------------------------------------------- */

.legal-hero {
    border-bottom: 1px solid var(--line-soft);
}

.legal-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
    color: var(--muted);
    font-size: 13px;
}

.legal-meta .text-link {
    margin-top: 0;
}

.legal-section {
    padding-top: 44px;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    min-width: 0;
}

.legal-sidebar {
    position: sticky;
    top: 104px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.018);
}

.legal-nav {
    display: grid;
    gap: 10px;
}

.legal-nav a {
    position: relative;
    display: block;
    padding: 8px 10px 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.35;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.legal-nav a::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 160ms ease, box-shadow 160ms ease;
}

.legal-nav a:hover {
    color: var(--accent-bright);
}

.legal-nav a.active,
.legal-nav a[aria-current="page"] {
    border-color: rgba(238, 152, 38, 0.25);
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.075);
    font-weight: 700;
}

.legal-nav a.active::before,
.legal-nav a[aria-current="page"]::before {
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(238, 152, 38, 0.11);
}

.legal-document {
    max-width: 850px;
    min-width: 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.72;
}

.legal-document h2 {
    margin: 0 0 14px;
    padding-top: 26px;
    color: var(--text);
    font-size: clamp(23px, 3vw, 34px);
    line-height: 1.08;
}

.legal-document h2:first-child {
    padding-top: 0;
}

.legal-document p {
    margin: 0 0 16px;
}

.legal-document ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal-document li {
    margin-bottom: 8px;
}

.legal-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 22px 0 30px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.018);
}

.legal-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.legal-table th,
.legal-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    color: var(--text);
    font-size: 13px;
    font-weight: 680;
    background: rgba(238, 152, 38, 0.055);
}

.legal-table td {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.legal-table tr:last-child th,
.legal-table tr:last-child td {
    border-bottom: 0;
}

.legal-index-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.legal-card {
    display: grid;
    gap: 10px;
    min-height: 150px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.022);
    color: var(--text);
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.legal-card:hover {
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.045);
    transform: translateY(-1px);
}

.legal-card span {
    color: var(--text);
    font-size: 19px;
    font-weight: 650;
}

.legal-card strong {
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 450;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Forms and authentication
   Shared fields, validation/status messages, Turnstile, contact/demo forms, waitlist flows, and authentication cards.
   -------------------------------------------------------------------------- */

.form-section {
    padding-top: 24px;
}

.form-shell,
.auth-card {
    padding: 28px;
}

.auth-card[hidden],
.auth-card [hidden],
.site-form [hidden] {
    display: none !important;
}

.site-form {
    display: grid;
    gap: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.field {
    display: grid;
    align-content: start;
    gap: 8px;
}

.field-wide {
    grid-column: 1 / -1;
}

.field span {
    color: var(--muted);
    font-size: 12px;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    background: var(--control-bg);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    transition: border-color 150ms ease, background 150ms ease;
}

.field input,
.field select {
    min-height: 46px;
    padding: 0 14px;
}

.field select {
    color-scheme: dark;
    background-color: var(--select-bg);
}

.field select option {
    color: var(--select-option-text);
    background-color: var(--select-option-bg);
}

.field select option:checked,
.field select option:hover {
    color: var(--select-active-text);
    background-color: var(--accent);
}

.field textarea {
    min-height: 160px;
    resize: vertical;
    padding: 13px 14px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--accent-line);
    background: var(--control-focus-bg);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--control-placeholder);
}

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.form-note {
    margin: 0;
    color: var(--muted-2);
    font-size: 13px;
    line-height: 1.5;
}

.form-note a {
    color: var(--accent-bright);
}

.form-status {
    min-height: 20px;
}

.form-status:empty {
    min-height: 0;
}

.auth-form-footnote {
    display: grid;
    gap: 8px;
}

.form-status.is-success {
    color: var(--positive);
}

.form-status.is-error {
    color: var(--negative);
}

.turnstile-slot {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 300px;
    max-width: 100%;
    overflow: visible;
}

.auth-card .turnstile-slot {
    justify-content: center;
}

/* ==========================================================================
   A13.5. PUBLIC DEMO FORM AND RESULT SHELL

   PURPOSE
   -------
   Defines the reusable live-demo layout, Turnstile/submit row, result summary,
   confidence badge, and signal findings used by public product previews.

   INCLUDES
   --------
   - Two-column demo shell
   - Submission grid areas
   - Result summary and status colors
   - Signal findings list

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current smtpRS SaaS preview wraps these primitives with product-saas-*
     components in Section B.
   ========================================================================== */

.demo-section {
    padding-top: 24px;
}

.demo-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 42px;
    align-items: start;
    padding: 34px;
    border: 1px solid rgba(238, 152, 38, 0.15);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.045), transparent 54%),
        rgba(255, 255, 255, 0.022);
}

.demo-copy p {
    max-width: 520px;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.64;
}

.demo-copy h2 {
    font-size: 38px;
}

.demo-panel {
    display: grid;
    gap: 18px;
}

.demo-form {
    padding: 0;
}

.demo-submit-row {
    display: grid;
    grid-template-columns: minmax(300px, max-content) max-content;
    grid-template-areas:
        "status status"
        "turnstile submit";
    align-items: center;
    justify-content: start;
    gap: 12px 18px;
}

.demo-submit-row .form-status {
    grid-area: status;
}

.demo-submit-row .turnstile-slot {
    grid-area: turnstile;
    justify-content: center;
}

.demo-submit-row .btn {
    grid-area: submit;
}

/* ==========================================================================
   A13.6. WAITLIST PAUSE AND STATUS COMPONENTS

   PURPOSE
   -------
   Styles the paused-enrollment messaging, capability pills, status panel, and
   compact status stack used by waitlist and limited-access pages.

   INCLUDES
   --------
   - Pause banner
   - Pill list
   - Status panel rows
   - Responsive status stack

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These are messaging components; form fields continue to use the shared
     field system above.
   ========================================================================== */

.pause-banner {
    display: grid;
    max-width: 640px;
    gap: 8px;
    margin: 0 0 24px;
    border: 1px solid rgba(238, 152, 38, 0.22);
    border-radius: 16px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.075), transparent 80%),
        rgba(255, 255, 255, 0.026);
}

.pause-banner strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 680;
    letter-spacing: 0;
}

.pause-banner span,
.waitlist-contact-copy p,
.pause-status-stack span {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.62;
}

.pause-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
}

.pause-points span,
.pause-status-stack span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.026);
}

.pause-status-panel {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.024);
}

.pause-status-row {
    display: grid;
    gap: 5px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.pause-status-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pause-status-row span {
    color: var(--muted);
    font-size: 12px;
}

.pause-status-row strong {
    color: var(--text-soft);
    font-size: 15px;
    font-weight: 560;
}

.pause-card {
    align-items: center;
}

.pause-status-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* ==========================================================================
   A13.7. WAITLIST HERO, CONTACT, AND MASCOT

   PURPOSE
   -------
   Defines the legacy waitlist split layout, contact card, large hero copy,
   theme-swapped mascot artwork, and supporting intro section.

   INCLUDES
   --------
   - Waitlist contact split
   - Hero copy and intro
   - Dark/light mascot swap
   - Responsive mascot sizing

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The current shared SaaS waitlist system is also represented in B14.
   ========================================================================== */

.waitlist-contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 34px;
    align-items: start;
}

.waitlist-contact-copy {
    display: grid;
    gap: 18px;
}

.waitlist-contact-copy h2 {
    margin: 0;
    color: var(--text);
    font-size: 36px;
    line-height: 1.06;
}

.waitlist-contact-card {
    padding: 22px;
}

.waitlist-contact-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    letter-spacing: 0;
}

.page-waitlist .product-hero {
    padding: 94px 0 56px;
}

.page-waitlist .section {
    padding: 72px 0;
}

.page-waitlist .model-family {
    padding-top: 78px;
}

.waitlist-hero-inner {
    display: grid;
    grid-template-columns: minmax(640px, 1fr) minmax(360px, 480px);
    gap: 40px;
    align-items: center;
    max-width: 1240px;
}

.waitlist-hero-copy {
    min-width: 0;
}

.waitlist-hero-copy h1 {
    max-width: 850px;
    margin-bottom: 22px;
    font-size: 56px;
    letter-spacing: -0.03em;
}

.waitlist-hero-copy > .lede {
    max-width: 800px;
    margin-bottom: 34px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.55;
}

.waitlist-hero-copy > p:not(.kicker):not(.lede),
.waitlist-intro p {
    max-width: 760px;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.68;
}

.waitlist-intro {
    display: grid;
    max-width: 820px;
    gap: 8px;
    margin: 42px 0 20px;
    border-top: 1px solid var(--line-soft);
    padding-top: 34px;
}

.waitlist-intro h2 {
    max-width: 720px;
    margin-bottom: 4px;
    font-size: 38px;
    letter-spacing: -0.025em;
}

.waitlist-mascot {
    display: grid;
    justify-self: end;
    width: min(100%, 480px);
    margin: 0;
    aspect-ratio: 1520 / 1240;
    align-self: start;
}

.waitlist-mascot-image {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.waitlist-mascot-image-light {
    display: none;
}

html[data-theme="light"] .waitlist-mascot-image-dark {
    display: none;
}

html[data-theme="light"] .waitlist-mascot-image-light {
    display: block;
}

.demo-result {
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.024);
}

.demo-result[hidden] {
    display: none;
}

.demo-result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.demo-result-model {
    color: var(--muted);
    font-size: 13px;
}

.demo-confidence-badge {
    flex: 0 0 auto;
    border: 1px solid rgba(246, 191, 63, 0.4);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--accent-bright);
    font-size: 12px;
    line-height: 1.2;
}

.demo-result-headline {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    line-height: 1.15;
}

.demo-confidence-copy {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.demo-signal-list {
    border-top: 1px solid var(--line);
}

.demo-signal {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.demo-signal-indicator {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--muted);
}

.demo-signal-clear .demo-signal-indicator,
.demo-signal-capable .demo-signal-indicator {
    background: #8bd69a;
}

.demo-signal-elevated .demo-signal-indicator,
.demo-signal-not_capable .demo-signal-indicator {
    background: #e3a6a0;
}

.demo-signal-indeterminate .demo-signal-indicator,
.demo-signal-not_checked .demo-signal-indicator {
    background: var(--accent-bright);
}

.demo-signal-copy {
    min-width: 0;
}

.demo-signal-name {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 12px;
}

.demo-signal-label {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
}

.demo-signal-findings {
    display: grid;
    gap: 4px;
    margin: 7px 0 0;
    padding-left: 18px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.45;
}

.demo-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.field-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-form.is-busy .btn {
    pointer-events: none;
    opacity: 0.72;
}

/* ==========================================================================
   A13.8. AUTHENTICATION PAGE LAYOUT

   PURPOSE
   -------
   Centers the authentication shell vertically and sizes the copy/card stack
   used by Sign in, registration, password reset, and verification pages.

   INCLUDES
   --------
   - Viewport-aware auth section
   - Auth heading scale
   - Card width and stack alignment
   - Compact-card and full-width helpers

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Field and status behavior is inherited from the form system above.
   - Marketing foundation does not currently gate .page-auth, so these rules
     remain authoritative.
   ========================================================================== */

.auth-section {
    min-height: calc(100svh - 150px);
    display: flex;
    align-items: center;
}

.auth-copy h1 {
    font-size: 54px;
}

.auth-card {
    width: min(100%, 460px);
    justify-self: end;
}

.auth-stack {
    display: grid;
    gap: 18px;
    justify-items: end;
}

.auth-stack .auth-card {
    justify-self: end;
}

.auth-card-compact {
    padding-top: 22px;
    padding-bottom: 22px;
}

.full-width {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Customer application: base shell
   Authenticated workspace navigation, cards, metrics, tables, API keys, billing plans, and app status UI.
   -------------------------------------------------------------------------- */

.page-app {
    min-height: 100svh;
}

.app-site-header {
    position: sticky;
}

.app-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 96px 0 72px;
}

/* ==========================================================================
   A13.9. CUSTOMER APP SIDEBAR AND PRIMARY WORKSPACE NAVIGATION

   PURPOSE
   -------
   Defines the initial authenticated sidebar, navigation-row states, and
   content shell that later app refinements build upon.

   INCLUDES
   --------
   - Sticky app sidebar
   - Active/hover/disabled navigation rows
   - Main workspace column

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Later compact and layout-refresh blocks intentionally override
     dimensions and surfaces while retaining these semantics.
   ========================================================================== */

.app-sidebar {
    position: sticky;
    top: 94px;
    align-self: start;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.024);
}

.app-nav-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 12px;
    color: var(--text-soft);
    font-size: 14px;
    text-decoration: none;
}

.app-nav-link:hover,
.app-nav-link.active {
    border-color: var(--accent-line);
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.055);
}

.app-nav-link.disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.app-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.app-topbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 6px;
}

.app-topbar h1 {
    margin: 0;
    color: var(--text);
    font-size: 46px;
    letter-spacing: 0;
}

.app-status {
    min-width: 210px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.app-status.is-success {
    color: var(--positive);
}

.app-status.is-error {
    color: var(--negative);
}

.app-card,
.metric-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.024);
}

.app-card {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.app-account-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-account-card > div {
    display: grid;
    gap: 6px;
}

.app-label,
.metric-card span,
.secret-box span {
    color: var(--muted);
    font-size: 12px;
}

.app-account-card strong {
    color: var(--text);
    font-size: 19px;
    font-weight: 650;
}

.app-account-card span:last-child {
    color: var(--text-soft);
    font-size: 13px;
}

/* ==========================================================================
   A13.10. CUSTOMER APP ACCOUNT AND METRIC CARDS

   PURPOSE
   -------
   Provides the base account-summary and metric-card grids used throughout the
   customer dashboard.

   INCLUDES
   --------
   - Two-column account details
   - Three-column metric grid
   - Metric labels, values, and supporting copy

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Later app refinements change the metric grid to four columns on wide
     screens.
   ========================================================================== */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.metric-card {
    display: grid;
    gap: 8px;
    padding: 22px;
}

.metric-card strong {
    color: var(--text);
    font-size: 34px;
    line-height: 1;
}

.metric-card small {
    color: var(--text-soft);
    font-size: 13px;
}

.app-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.app-card-head h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 22px;
}

.app-card-head p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

/* ==========================================================================
   A13.11. CUSTOMER APP DATA TABLES AND ROW ACTIONS

   PURPOSE
   -------
   Defines horizontally scrollable customer-app tables, header/body cells,
   monospace values, and compact row-action buttons.

   INCLUDES
   --------
   - Overflow wrapper
   - Table sizing and typography
   - Destructive-hover row action

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - API-key table minimum widths receive later page-app-specific
     corrections.
   ========================================================================== */

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    color: var(--text-soft);
    font-size: 14px;
}

.data-table th,
.data-table td {
    border-top: 1px solid var(--line-soft);
    padding: 13px 10px;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 520;
}

.data-table code,
.secret-box code {
    font-family: "FiraCodeiScript", "Aptos", monospace;
}

.table-action {
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 12px;
    color: var(--text-soft);
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.table-action:hover {
    border-color: rgba(227, 166, 160, 0.45);
    color: var(--negative);
}


/* ==========================================================================
   A13.12. CUSTOMER APP API-KEY CREATION AND SECRET DISPLAY

   PURPOSE
   -------
   Styles the API-key creation form, newly generated secret panel, empty
   states, and horizontal secret-code handling.

   INCLUDES
   --------
   - Form grid
   - Secret box
   - Hidden/empty states
   - Scrollable secret code

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Never remove nowrap from secret values unless copy/wrapping behavior is
     deliberately redesigned.
   ========================================================================== */

.api-key-form {
    grid-template-columns: minmax(220px, 1fr) max-content;
    align-items: end;
}

.secret-box {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(238, 152, 38, 0.2);
    border-radius: 14px;
    background: rgba(238, 152, 38, 0.055);
}

.secret-box[hidden],
.empty-state[hidden] {
    display: none;
}

.secret-box code {
    display: block;
    overflow-x: auto;
    color: var(--accent-bright);
    font-size: 13px;
    white-space: nowrap;
}

.empty-state {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 16px;
    color: var(--muted);
    font-size: 14px;
}

/* ==========================================================================
   A13.13. CUSTOMER APP BILLING PLAN CARDS

   PURPOSE
   -------
   Provides the initial billing-plan grid, featured-plan treatment, and compact
   plan-status pill.

   INCLUDES
   --------
   - Two-column plan grid
   - Plan card surface
   - Featured plan accent
   - Status pill

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The later app layout refresh adds credit balances, packs, and purchase
     actions.
   ========================================================================== */

.billing-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.billing-plan-card {
    display: grid;
    gap: 14px;
    align-content: start;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.022);
}

.featured-billing-plan {
    border-color: rgba(238, 152, 38, 0.28);
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.06), transparent 52%),
        rgba(255, 255, 255, 0.026);
}

.billing-plan-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    letter-spacing: 0;
}

.billing-plan-card p {
    margin: 0;
    min-height: 68px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.status-pill {
    width: fit-content;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.055);
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Customer application: compact UX refinement
   Later density/layout overrides for app navigation, metrics, hero cards, actions, tables, and billing.
   -------------------------------------------------------------------------- */
.page-app .app-shell {
    grid-template-columns: 192px minmax(0, 1fr);
    gap: 20px;
    width: min(1260px, calc(100% - 36px));
    padding: 58px 0 56px;
    align-items: start;
}

.page-app .app-sidebar {
    top: 84px;
    gap: 5px;
    padding: 10px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
        rgba(255, 255, 255, 0.018);
}

.page-app .app-nav-link {
    min-height: 36px;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 13px;
}

.page-app .app-main {
    gap: 14px;
}

.page-app .app-topbar {
    align-items: center;
    margin-bottom: 2px;
}

.page-app .app-topbar h1 {
    font-size: 38px;
    line-height: 1.05;
}

.page-app .app-status {
    min-width: 180px;
    font-size: 12px;
}

.page-app .app-status.is-loading::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border: 2px solid rgba(238, 152, 38, 0.22);
    border-top-color: var(--accent-bright);
    border-radius: 50%;
    vertical-align: -1px;
    animation: appRouteSpinner 780ms linear infinite;
}

.page-app .app-card,
.page-app .metric-card {
    min-height: 0;
    align-content: start;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.018);
}

.page-app .app-card {
    gap: 14px;
    padding: 18px;
}

.page-app .app-card-head {
    align-items: center;
}

.page-app .app-card-head h2 {
    margin-bottom: 5px;
    font-size: 19px;
}

.page-app .app-card-head p {
    font-size: 13px;
}

.page-app .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.page-app .metric-card {
    gap: 8px;
    min-height: 104px;
    padding: 16px;
}

.page-app .metric-card strong {
    margin-top: 6px;
    font-size: 30px;
}

.app-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
    gap: 16px;
    align-items: stretch;
}

.app-hero-copy {
    display: grid;
    gap: 9px;
    align-content: center;
    min-width: 0;
}

.app-hero-copy h2 {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    line-height: 1.12;
}

.app-hero-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.app-eyebrow {
    width: fit-content;
    color: var(--accent-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-hero-meta,
.app-summary-grid,
.billing-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.app-mini-stat,
.billing-summary-card {
    display: grid;
    gap: 6px;
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.14);
}

.app-mini-stat span,
.billing-summary-card span {
    color: var(--muted);
    font-size: 11px;
}

.app-mini-stat strong,
.billing-summary-card strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.app-mini-stat small,
.billing-summary-card small {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.4;
}

.app-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.75fr);
    gap: 14px;
    align-items: start;
}

.app-section-grid > .app-card {
    height: 100%;
}

.app-action-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-action-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0 13px;
    color: var(--text);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.018);
}

.app-action-link:hover {
    border-color: rgba(238, 152, 38, 0.32);
    color: var(--accent-bright);
}

.app-action-link span {
    color: inherit;
    font-size: 13px;
    font-weight: 650;
}

.app-action-link small {
    color: var(--muted);
    font-size: 12px;
}

.page-app .data-table {
    min-width: 720px;
    font-size: 13px;
}

.page-app .data-table th,
.page-app .data-table td {
    padding: 9px 8px;
}

.page-app .data-table th {
    font-size: 11px;
}

.page-app .table-action {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
}

.page-app .api-key-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) max-content;
    gap: 10px;
    align-items: end;
}

.page-app .api-key-form .btn[disabled],
.page-app .api-key-form .btn.is-disabled {
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.48);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
    box-shadow: none;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.page-app .api-key-limit-message {
    margin: 12px 0 0;
    padding: 11px 12px;
    border: 1px solid rgba(238, 152, 38, 0.22);
    border-radius: 8px;
    color: var(--text-soft);
    background: rgba(238, 152, 38, 0.055);
    font-size: 12px;
    line-height: 1.45;
}

.page-app .api-key-limit-message[hidden] {
    display: none;
}

.app-form-card {
    grid-template-columns: minmax(0, 1fr);
}

.page-app .secret-box {
    border-radius: 12px;
}

.page-app .secret-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-app .secret-box-head .table-action {
    color: var(--text);
    border-color: rgba(238, 152, 38, 0.28);
    background: rgba(238, 152, 38, 0.08);
}

.page-app .key-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 150px;
}

.page-app .table-action-copy {
    color: var(--accent-bright);
    border-color: rgba(238, 152, 38, 0.28);
}

.page-app .table-action[disabled] {
    color: rgba(255, 255, 255, 0.38);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    cursor: not-allowed;
}

.app-billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.app-billing-grid > .app-card {
    height: 100%;
}

.page-app .billing-plan-grid {
    gap: 12px;
}

.page-app .billing-plan-card {
    gap: 12px;
    min-height: 0;
    border-radius: 14px;
    padding: 18px;
}

.page-app .billing-plan-card h3 {
    font-size: 25px;
}

.page-app .billing-plan-card p {
    min-height: 0;
    font-size: 13px;
}

.metric-card.is-loading,
.app-mini-stat.is-loading,
.billing-summary-card.is-loading,
.data-table tr.is-loading td {
    pointer-events: none;
}

.page-app .metric-card.is-loading,
.page-app .app-mini-stat.is-loading,
.page-app .billing-summary-card.is-loading {
    position: relative;
    overflow: hidden;
}

.page-app .metric-card.is-loading::after,
.page-app .app-mini-stat.is-loading::after,
.page-app .billing-summary-card.is-loading::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
    background-size: 220% 100%;
    animation: appLoadingPulse 900ms ease-in-out infinite;
}

html[data-theme="light"] .page-app .metric-card.is-loading::after,
html[data-theme="light"] .page-app .app-mini-stat.is-loading::after,
html[data-theme="light"] .page-app .billing-summary-card.is-loading::after {
    background: linear-gradient(90deg, rgba(12, 14, 18, 0.045), rgba(12, 14, 18, 0.11), rgba(12, 14, 18, 0.045));
    background-size: 220% 100%;
}

@media (max-width: 1100px) {
    .page-app .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-hero-card,
    .app-section-grid,
    .app-billing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .nav-actions {
        margin-left: auto;
    }

    .tier-grid,
    .billing-plan-grid,
    .docs-layout,
    .legal-layout,
    .legal-index-grid,
    .route-grid,
    .contact-intro,
    .demo-shell,
    .waitlist-contact-shell,
    .auth-shell,
    .app-shell,
    .app-account-card,
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .app-shell {
        padding-top: 88px;
    }

    .page-waitlist .product-hero {
        padding-top: 82px;
    }

    .waitlist-hero-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .waitlist-mascot {
        justify-self: start;
        width: min(100%, 420px);
    }

    .waitlist-hero-copy h1 {
        font-size: 52px;
    }

    .waitlist-contact-shell {
        gap: 24px;
    }

    .app-sidebar {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .app-topbar {
        align-items: start;
        flex-direction: column;
    }

    .app-status {
        min-width: 0;
        text-align: left;
    }

    .tier-card {
        min-height: auto;
    }

    .auth-card,
    .auth-stack .auth-card {
        justify-self: stretch;
        width: 100%;
    }

    .legal-sidebar {
        position: static;
        width: auto;
        min-width: 0;
    }

    .docs-reference-shell {
        grid-template-columns: 1fr;
    }

    .docs-api-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .docs-sidebar {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .legal-document {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .nav-actions {
        order: 4;
        width: 100%;
        justify-content: flex-start;
    }

    .nav-actions .nav-action {
        display: inline-flex;
    }

    .waitlist-hero-copy h1 {
        font-size: 42px;
        line-height: 1.05;
    }

    .waitlist-hero-copy > .lede {
        font-size: 18px;
    }

    .waitlist-mascot {
        width: min(100%, 240px);
    }

    .waitlist-intro h2,
    .waitlist-contact-copy h2 {
        font-size: 30px;
    }

    .page-standard .standard-hero {
        padding-top: 62px;
        padding-bottom: 42px;
    }

    .tier-card,
    .contact-card,
    .docs-panel,
    .form-shell,
    .auth-card,
    .legal-sidebar,
    .legal-card,
    .route-panel {
        padding: 20px;
        border-radius: 16px;
    }

    .legal-document h2 {
        padding-top: 18px;
    }

    .tier-card h2,
    .auth-copy h1 {
        font-size: 30px;
    }

    .comparison-row,
    .comparison-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .credit-pack-pricing {
        margin-top: 48px;
        padding-top: 42px;
    }

    .credit-pack-policy {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .credit-pack-actions {
        justify-content: flex-start;
    }

    .form-grid,
    .form-footer,
    .demo-submit-row,
    .api-key-form {
        grid-template-columns: 1fr;
    }

    .form-footer,
    .demo-submit-row {
        display: grid;
        align-items: start;
    }

    .app-shell {
        width: min(100% - 28px, 1180px);
    }

    .app-sidebar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .app-topbar h1 {
        font-size: 32px;
    }

    .app-card,
    .metric-card {
        padding: 18px;
        border-radius: 16px;
    }

    .docs-sidebar,
    .docs-card-grid,
    .docs-api-grid,
    .docs-api-grid-compact {
        grid-template-columns: 1fr;
    }

    .docs-section {
        padding: 20px;
    }

    .app-card-head {
        display: grid;
    }

    .demo-submit-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "status"
            "turnstile"
            "submit";
    }

    .turnstile-slot {
        min-width: 0;
        width: 100%;
    }

    .demo-submit-row .turnstile-slot {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   A14. GLOBAL LIGHT-THEME OVERRIDES AND APP STATE REFINEMENTS
   Shared light-theme surfaces plus customer-app loading, responsive, layout-refresh, modal, billing, and route-transition states.
   ========================================================================== */

/* ==========================================================================
   A14.1. SHARED PUBLIC LIGHT-THEME COMPONENT SURFACES

   PURPOSE
   -------
   Applies explicit light-mode surfaces, shadows, code colors, logo
   replacement, form control scheme, catalog colors, and state corrections that
   cannot be expressed through tokens alone.

   INCLUDES
   --------
   - Public cards/panels and catalog flyout
   - Light logo asset
   - Code syntax and table headers
   - Buttons, fields, meters, and risk colors

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These are base-layer light overrides; unlayered Section B/D/E theme
     rules can intentionally supersede them.
   ========================================================================== */

html[data-theme="light"] .docs-sidebar .docs-sidebar-disabled {
    color: #8f877a;
    opacity: 0.68;
}

html[data-theme="light"] .site-header {
    box-shadow: 0 1px 0 rgba(22, 20, 17, 0.045);
}

html[data-theme="light"] .logo img {
    content: url('../assets/png/paravane-labs-logo-white.png');
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.44));
}

html[data-theme="light"] .hero-layer-image {
    opacity: 0.16;
    filter: saturate(0.92) contrast(1.05);
}

html[data-theme="light"] .preview-card,
html[data-theme="light"] .card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .beta-card,
html[data-theme="light"] .section-muted,
html[data-theme="light"] .step,
html[data-theme="light"] .tier-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .docs-panel,
html[data-theme="light"] .docs-sidebar,
html[data-theme="light"] .docs-section,
html[data-theme="light"] .docs-card,
html[data-theme="light"] .docs-api-card,
html[data-theme="light"] .docs-endpoint,
html[data-theme="light"] .docs-table-wrap,
html[data-theme="light"] .form-shell,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .legal-sidebar,
html[data-theme="light"] .legal-card,
html[data-theme="light"] .legal-table-wrap,
html[data-theme="light"] .route-panel,
html[data-theme="light"] .comparison-table,
html[data-theme="light"] .model-card,
html[data-theme="light"] .model-card.featured,
html[data-theme="light"] .demo-shell,
html[data-theme="light"] .demo-result,
html[data-theme="light"] .pause-banner,
html[data-theme="light"] .pause-status-panel,
html[data-theme="light"] .hero-media-frame {
    background: var(--surface-light);
    box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .product-catalog-menu {
    background: rgba(251, 248, 240, 0.985);
    box-shadow: 0 24px 58px rgba(47, 36, 22, 0.18);
}

html[data-theme="light"] .product-catalog-section,
html[data-theme="light"] .product-catalog-item {
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] .product-catalog-item.is-available {
    background: transparent;
}

html[data-theme="light"] .product-catalog-item.is-active {
    background: rgba(238, 152, 38, 0.12);
}

html[data-theme="light"] .product-catalog-item.is-disabled {
    color: rgba(43, 38, 32, 0.58);
    background: transparent;
}

html[data-theme="light"] .product-catalog-item.is-disabled p {
    color: rgba(84, 76, 65, 0.62);
}

html[data-theme="light"] .tier-card:hover {
    background: rgba(238, 152, 38, 0.10);
    box-shadow: 0 20px 48px rgba(81, 59, 25, 0.12);
}

html[data-theme="light"] .tier-card .btn:hover {
    box-shadow: 0 10px 24px rgba(190, 107, 12, 0.14);
}

html[data-theme="light"] .featured-tier,
html[data-theme="light"] .beta-card,
html[data-theme="light"] .demo-shell,
html[data-theme="light"] .preview-card {
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.09), transparent 48%),
        var(--surface-light);
}

html[data-theme="light"] .signal-row,
html[data-theme="light"] .route-list a,
html[data-theme="light"] .route-list .route-item,
html[data-theme="light"] .legal-card,
html[data-theme="light"] .docs-card,
html[data-theme="light"] .usecase-list span,
html[data-theme="light"] .demo-band,
html[data-theme="light"] .pause-points span,
html[data-theme="light"] .pause-status-stack span,
html[data-theme="light"] .nav-action {
    background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .product-spec,
html[data-theme="light"] .code-card {
    background: var(--bg-muted);
}

html[data-theme="light"] .neural-visual {
    background: #fffaf0;
    box-shadow: 0 28px 90px rgba(62, 48, 22, 0.11);
}

html[data-theme="light"] .neural-visual figcaption {
    background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .field select {
    color-scheme: light;
}

html[data-theme="light"] .btn-primary {
    color: #15130f;
}

html[data-theme="light"] pre {
    color: #443d34;
}

html[data-theme="light"] .code-key {
    color: #946411;
}

html[data-theme="light"] .code-string {
    color: #496a4f;
}

html[data-theme="light"] .code-number {
    color: #a45417;
}

html[data-theme="light"] .docs-callout {
    background: rgba(238, 152, 38, 0.12);
}

html[data-theme="light"] .docs-table th {
    background: rgba(238, 152, 38, 0.12);
}

html[data-theme="light"] .meter {
    background: rgba(22, 20, 17, 0.09);
}

html[data-theme="light"] .risk-low .demo-band {
    color: #2f7b41;
}

html[data-theme="light"] .risk-high .demo-band {
    color: #a33b32;
}


/* --------------------------------------------------------------------------
   Customer app loading states
   Skeleton lines and loading-card animation used while authenticated data is being fetched.
   -------------------------------------------------------------------------- */
.loading-line {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
    background-size: 220% 100%;
    animation: appLoadingPulse 900ms ease-in-out infinite;
}

html[data-theme="light"] .loading-line {
    background: linear-gradient(90deg, rgba(12, 14, 18, 0.055), rgba(12, 14, 18, 0.12), rgba(12, 14, 18, 0.055));
    background-size: 220% 100%;
}

.metric-card.is-loading,
.data-table tr.is-loading td {
    pointer-events: none;
}

.metric-card.is-loading .loading-line + .loading-line {
    margin-top: 8px;
}

@keyframes appLoadingPulse {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}
/* --------------------------------------------------------------------------
   Customer app responsive correction
   Intermediate tablet/mobile app-shell corrections retained because later app rules build on them.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
    .page-app .app-sidebar {
        top: 82px;
    }
}

@media (max-width: 980px) {
    .page-app .app-shell {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 820px);
        padding-top: 84px;
    }

    .page-app .app-sidebar {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .page-app .api-key-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .page-app .app-shell {
        width: min(100% - 24px, 560px);
    }

    .page-app .app-sidebar,
    .page-app .metric-grid,
    .app-hero-meta,
    .app-summary-grid,
    .billing-summary-grid,
    .billing-plan-grid {
        grid-template-columns: 1fr;
    }

    .page-app .app-topbar h1 {
        font-size: 32px;
    }
}

/* --------------------------------------------------------------------------
   Customer app layout refresh
   Current workspace styling: sidebar, metrics, danger zone, API-key editing, billing, and mobile behavior.
   -------------------------------------------------------------------------- */
.page-app {
    background: var(--body-bg);
}

.page-app .app-site-header {
    backdrop-filter: blur(18px);
}

.page-app .app-shell {
    grid-template-columns: 226px minmax(0, 1fr);
    gap: 24px;
    width: min(1320px, calc(100% - 48px));
    padding: 46px 0 64px;
}

.page-app .app-sidebar {
    top: 92px;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.02);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
}

.page-app .app-sidebar-head {
    display: grid;
    gap: 3px;
    margin: 0 0 4px;
    padding: 10px 11px 12px;
    border-bottom: 1px solid var(--line-soft);
}

.page-app .app-sidebar-head span {
    color: var(--accent-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.page-app .app-sidebar-head strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
}

.page-app .app-nav-link {
    position: relative;
    min-height: 40px;
    gap: 10px;
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: 0;
}

.page-app .app-nav-link::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--line);
    transition: background 150ms ease, box-shadow 150ms ease;
}

.page-app .app-nav-link:hover,
.page-app .app-nav-link.active {
    color: var(--text);
    border-color: rgba(238, 152, 38, 0.3);
    background:
        linear-gradient(90deg, rgba(238, 152, 38, 0.12), rgba(238, 152, 38, 0.035)),
        rgba(255, 255, 255, 0.018);
}

.page-app .app-nav-link:hover::before,
.page-app .app-nav-link.active::before {
    background: var(--accent-bright);
    box-shadow: 0 0 0 4px rgba(238, 152, 38, 0.12);
}

.page-app .app-main {
    gap: 16px;
}

.page-app .app-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    gap: 24px;
    margin: 0 0 4px;
    padding: 2px 0 8px;
}

.page-app .app-page-title {
    min-width: 0;
}

.page-app .kicker {
    margin-bottom: 8px;
    letter-spacing: 0;
}

.page-app .app-topbar h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: 0;
}

.page-app .app-page-intro {
    max-width: 680px;
    margin: 9px 0 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.page-app .app-status {
    min-width: 0;
    width: fit-content;
    max-width: 320px;
    justify-self: end;
    margin: 0 0 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.024);
    font-size: 12px;
    line-height: 1.2;
    text-align: right;
}

.page-app .app-card,
.page-app .metric-card {
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.018);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

.page-app .app-card {
    gap: 18px;
    padding: 20px;
}

.page-app .app-card-head {
    align-items: center;
    gap: 18px;
}

.page-app .app-card-head h2 {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 0;
}

.page-app .app-card-head p {
    max-width: 520px;
    color: var(--text-soft);
    font-size: 13px;
}

.page-app .btn {
    min-height: 40px;
    border-radius: 8px;
    padding: 0 15px;
}

.page-app .app-card-head .btn {
    min-height: 36px;
}

.page-app .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.page-app .metric-card {
    position: relative;
    min-height: 118px;
    gap: 8px;
    overflow: hidden;
    padding: 18px;
}

.page-app .metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(246, 191, 63, 0.12));
    opacity: 0.76;
}

.page-app .metric-card span,
.page-app .app-label,
.page-app .secret-box span {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0;
}

.page-app .metric-card strong {
    margin-top: 4px;
    color: var(--text);
    font-size: 31px;
    line-height: 1;
    letter-spacing: 0;
}

.page-app .metric-card small {
    color: var(--text-soft);
}

.app-workspace-panel {
    position: relative;
    overflow: hidden;
    min-height: 170px;
}

.page-app .app-workspace-panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 22px;
    border-color: rgba(238, 152, 38, 0.18);
    background:
        linear-gradient(135deg, rgba(238, 152, 38, 0.1), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.02);
}

.page-app .app-workspace-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent-bright), rgba(238, 152, 38, 0));
}

.page-app .app-hero-copy {
    gap: 10px;
    padding-left: 2px;
}

.page-app .app-hero-copy h2 {
    max-width: 720px;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 0;
}

.page-app .app-hero-copy p {
    max-width: 680px;
    color: var(--text-soft);
}

.page-app .app-eyebrow {
    letter-spacing: 0;
}

.page-app .app-hero-meta,
.page-app .app-summary-grid,
.page-app .billing-summary-grid {
    gap: 12px;
}

.page-app .app-mini-stat,
.page-app .billing-summary-card {
    min-height: 96px;
    border-radius: 8px;
    border-color: var(--line-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.008)),
        rgba(0, 0, 0, 0.16);
}

.page-app .app-mini-stat span,
.page-app .billing-summary-card span {
    letter-spacing: 0;
}

.page-app .app-mini-stat strong,
.page-app .billing-summary-card strong {
    font-size: 17px;
}

.page-app .app-section-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.82fr);
    gap: 16px;
}

.page-app .app-section-grid-balanced {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.page-app .app-action-list {
    gap: 9px;
}

.page-app .app-action-link {
    min-height: 48px;
    border-radius: 8px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.016);
}

.page-app .app-action-link span {
    font-size: 13px;
}

/* ==========================================================================
   A14.4. CUSTOMER APP DANGER ZONE AND ACCOUNT DELETION

   PURPOSE
   -------
   Defines the destructive account-management card, confirmation checkbox,
   disabled/destructive buttons, and inline success/error messages.

   INCLUDES
   --------
   - Danger card surface
   - Confirmation row
   - Destructive button states
   - Deletion status messages

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These controls must retain clear disabled states because JavaScript
     gates irreversible actions.
   ========================================================================== */

.page-app .app-danger-card {
    gap: 16px;
    border-color: rgba(227, 114, 96, 0.28);
    background:
        linear-gradient(135deg, rgba(227, 114, 96, 0.075), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.018);
}

.page-app .app-danger-card .app-card-head h2 {
    color: #f2d2cd;
}

.page-app .account-delete-form {
    gap: 14px;
}

.page-app .app-danger-copy {
    max-width: 760px;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.page-app .app-check-row {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(227, 114, 96, 0.22);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-soft);
    background: rgba(227, 114, 96, 0.04);
    font-size: 13px;
    line-height: 1.35;
}

.page-app .app-check-row input {
    width: 16px;
    height: 16px;
    accent-color: #e37260;
}

.page-app .account-delete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.page-app .btn-danger {
    color: #21110f;
    border-color: rgba(227, 114, 96, 0.52);
    background: linear-gradient(135deg, #ee8577 0%, #d65f4e 100%);
}

.page-app .btn-danger:hover {
    border-color: rgba(243, 153, 139, 0.72);
    background: linear-gradient(135deg, #f1988c 0%, #df6a58 100%);
}

.page-app .btn-danger[disabled] {
    color: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
    cursor: not-allowed;
    filter: grayscale(0.55);
    transform: none;
}

.page-app .account-delete-note {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.4;
}

.page-app .account-delete-note[hidden] {
    display: none;
}

.page-app .account-delete-note.is-error {
    color: #f1aaa0;
}

.page-app .account-delete-note.is-success {
    color: #b7d7ad;
}

/* ==========================================================================
   A14.5. CUSTOMER APP CONFIRMATION AND KEY-EDIT MODALS

   PURPOSE
   -------
   Builds the full-screen modal scrim and focused confirmation panel used for
   destructive actions and API-key editing.

   INCLUDES
   --------
   - Hidden/display contract
   - Blurred scrim
   - Panel, warning, and action rows
   - Light-theme modal treatment

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The modal z-index intentionally exceeds all loaders and page chrome.
   - Focus management and dismissal behavior remain JavaScript
     responsibilities.
   ========================================================================== */

.page-app .app-confirm-modal[hidden] {
    display: none;
}

.page-app .app-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.page-app .app-confirm-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 32%, rgba(238, 152, 38, 0.08), transparent 34%),
        rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
}

.page-app .app-confirm-panel {
    position: relative;
    width: min(520px, 100%);
    border: 1px solid rgba(227, 114, 96, 0.32);
    border-radius: 8px;
    padding: clamp(22px, 4vw, 32px);
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(227, 114, 96, 0.1), transparent 45%),
        linear-gradient(180deg, rgba(24, 24, 22, 0.98), rgba(12, 12, 11, 0.98));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
    outline: none;
}

.page-app .app-confirm-panel h2 {
    margin: 8px 0 10px;
    color: #f6eee5;
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.05;
}

.page-app .app-confirm-panel p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.6;
}

.page-app .app-confirm-warning {
    border: 1px solid rgba(227, 114, 96, 0.24);
    border-radius: 8px;
    margin-top: 18px;
    padding: 12px 13px;
    color: #f2c4bd;
    background: rgba(227, 114, 96, 0.07);
    font-size: 13px;
    line-height: 1.45;
}

.page-app .app-confirm-warning span,
.page-app .app-confirm-warning strong {
    display: block;
}

.page-app .app-confirm-warning span {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.page-app .app-confirm-warning strong {
    color: var(--text);
    font-size: 14px;
}

.page-app .app-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.page-app .app-confirm-panel .btn {
    min-height: 44px;
}

.page-app .app-confirm-panel .btn-subtle {
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.045);
}

.page-app .app-confirm-panel .btn-subtle:hover {
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text);
    background: rgba(255, 255, 255, 0.075);
}

.page-app .app-key-edit-panel {
    border-color: rgba(238, 152, 38, 0.32);
    background:
        linear-gradient(135deg, rgba(238, 152, 38, 0.1), transparent 45%),
        linear-gradient(180deg, rgba(24, 24, 22, 0.98), rgba(12, 12, 11, 0.98));
}

.page-app .app-key-edit-form {
    display: block;
    margin-top: 20px;
}

.page-app .app-key-edit-form .app-confirm-actions {
    margin-top: 20px;
}

.page-app .field input,
.page-app .field textarea,
.page-app .field select {
    border-radius: 8px;
}

.page-app .api-key-form {
    grid-template-columns: minmax(220px, 1fr) max-content;
    gap: 12px;
}

.page-app .secret-box,
.page-app .empty-state {
    border-radius: 8px;
}

.page-app .empty-state {
    background: rgba(255, 255, 255, 0.012);
}

.page-app .table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.page-app .data-table {
    min-width: 100%;
    font-size: 13px;
}

.page-app .data-table[aria-label="API keys"] {
    min-width: 760px;
}

.page-app .data-table th,
.page-app .data-table td {
    padding: 11px 10px;
}

.page-app .data-table th {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0;
}

.page-app .data-table tbody tr:hover td {
    background: rgba(238, 152, 38, 0.025);
}

.page-app .table-action {
    min-height: 30px;
    border-radius: 8px;
}

/* ==========================================================================
   A14.6. CUSTOMER APP BILLING, CREDIT BALANCE, AND CREDIT PACKS

   PURPOSE
   -------
   Defines the current billing split, plan cards, credit-balance strip,
   purchasable credit-pack rows, and grant-history heading.

   INCLUDES
   --------
   - Billing split layout
   - Featured plan
   - Four-cell balance strip
   - Credit-pack price/action rows
   - Responsive collapse

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Borders use positional nth-child rules at tablet widths; preserve
     media-query ordering.
   ========================================================================== */

.page-app .app-billing-grid {
    grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
    gap: 16px;
}

.page-app .billing-plan-grid {
    gap: 12px;
}

.page-app .billing-plan-card {
    min-height: 220px;
    border-radius: 8px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.016);
}

.page-app .billing-plan-card h3 {
    font-size: 29px;
    letter-spacing: 0;
}

.page-app .billing-plan-card p {
    color: var(--text-soft);
    font-size: 13px;
}

.page-app .featured-billing-plan {
    border-color: rgba(238, 152, 38, 0.36);
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.09), rgba(238, 152, 38, 0.018)),
        rgba(255, 255, 255, 0.02);
}

.page-app .status-pill {
    letter-spacing: 0;
}

.page-app .credit-pack-section {
    margin-top: 16px;
}

.page-app .credit-balance-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--line);
}

.page-app .credit-balance-item {
    min-width: 0;
    padding: 18px 16px;
    border-right: 1px solid var(--line);
}

.page-app .credit-balance-item:last-child {
    border-right: 0;
}

.page-app .credit-balance-item span,
.page-app .credit-balance-item strong {
    display: block;
}

.page-app .credit-balance-item span {
    color: var(--muted);
    font-size: 11px;
}

.page-app .credit-balance-item strong {
    margin-top: 7px;
    color: var(--text);
    font-size: 23px;
}

.page-app .credit-pack-list {
    margin-top: 8px;
}

.page-app .credit-pack-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--line);
}

.page-app .credit-pack-copy strong,
.page-app .credit-pack-copy span {
    display: block;
}

.page-app .credit-pack-copy strong {
    color: var(--text);
    font-size: 16px;
}

.page-app .credit-pack-copy span {
    margin-top: 4px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.page-app .credit-pack-copy p {
    margin: 7px 0 0;
    color: var(--text-soft);
    font-size: 12px;
}

.page-app .credit-pack-action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-app .credit-pack-action > strong {
    min-width: 72px;
    text-align: right;
    font-size: 20px;
}

.page-app .credit-pack-action .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 142px;
    justify-content: center;
}

.page-app .credit-grant-history {
    margin-top: 26px;
}

.page-app .credit-history-head {
    margin-bottom: 8px;
}

.page-app .credit-history-head h3 {
    margin: 0;
    font-size: 17px;
}

/* ==========================================================================
   A14.7. CUSTOMER APP LIGHT-THEME OVERRIDES

   PURPOSE
   -------
   Repaints the current app shell, cards, plans, disabled controls, danger
   zone, and modal for the light theme.

   INCLUDES
   --------
   - Light workspace surfaces and shadows
   - Plan and status backgrounds
   - Disabled control contrast
   - Danger/modal light variants

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These selectors intentionally follow the current app layout refresh so
     equal-specificity declarations win in light mode.
   ========================================================================== */

html[data-theme="light"] .page-app .app-sidebar,
html[data-theme="light"] .page-app .app-card,
html[data-theme="light"] .page-app .metric-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58)),
        var(--surface-light);
    box-shadow: 0 22px 64px rgba(62, 48, 22, 0.08);
}

html[data-theme="light"] .page-app .app-mini-stat,
html[data-theme="light"] .page-app .billing-summary-card,
html[data-theme="light"] .page-app .billing-plan-card,
html[data-theme="light"] .page-app .app-action-link,
html[data-theme="light"] .page-app .app-status {
    background: rgba(255, 255, 255, 0.62);
}

html[data-theme="light"] .page-app .featured-billing-plan {
    background:
        linear-gradient(180deg, rgba(238, 152, 38, 0.11), rgba(238, 152, 38, 0.035)),
        rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .page-app .api-key-form .btn[disabled],
html[data-theme="light"] .page-app .api-key-form .btn.is-disabled,
html[data-theme="light"] .page-app .table-action[disabled] {
    color: rgba(33, 30, 25, 0.42);
    border-color: rgba(33, 30, 25, 0.12);
    background: rgba(33, 30, 25, 0.055);
}

html[data-theme="light"] .page-app .api-key-limit-message {
    color: var(--text-soft);
    background: rgba(238, 152, 38, 0.08);
}

html[data-theme="light"] .page-app .app-danger-card {
    border-color: rgba(199, 82, 66, 0.24);
    background:
        linear-gradient(135deg, rgba(199, 82, 66, 0.075), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58)),
        var(--surface-light);
}

html[data-theme="light"] .page-app .app-danger-card .app-card-head h2 {
    color: #74342d;
}

html[data-theme="light"] .page-app .app-check-row {
    border-color: rgba(199, 82, 66, 0.2);
    background: rgba(199, 82, 66, 0.055);
}

html[data-theme="light"] .page-app .btn-danger[disabled] {
    color: rgba(33, 30, 25, 0.42);
    border-color: rgba(33, 30, 25, 0.12);
    background: rgba(33, 30, 25, 0.055);
}

html[data-theme="light"] .page-app .account-delete-note.is-error {
    color: #9a4538;
}

html[data-theme="light"] .page-app .app-confirm-scrim {
    background:
        radial-gradient(circle at 50% 30%, rgba(209, 121, 19, 0.16), transparent 34%),
        rgba(243, 239, 232, 0.76);
}

html[data-theme="light"] .page-app .app-confirm-panel {
    border-color: rgba(199, 82, 66, 0.24);
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(199, 82, 66, 0.08), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 242, 236, 0.98));
    box-shadow: 0 28px 70px rgba(50, 37, 19, 0.22);
}

html[data-theme="light"] .page-app .app-confirm-panel h2 {
    color: #312821;
}

html[data-theme="light"] .page-app .app-confirm-warning {
    color: #74342d;
    background: rgba(199, 82, 66, 0.06);
}

html[data-theme="light"] .page-app .app-confirm-panel .btn-subtle {
    border-color: rgba(33, 30, 25, 0.12);
    color: var(--text-soft);
    background: rgba(33, 30, 25, 0.04);
}

html[data-theme="light"] .page-app .app-confirm-panel .btn-subtle:hover {
    border-color: rgba(33, 30, 25, 0.2);
    color: var(--text);
    background: rgba(33, 30, 25, 0.065);
}

html[data-theme="light"] .legal-nav a.active,
html[data-theme="light"] .legal-nav a[aria-current="page"] {
    border-color: rgba(238, 152, 38, 0.32);
    background: rgba(238, 152, 38, 0.12);
}

/* ==========================================================================
   A14.8. CUSTOMER APP CURRENT RESPONSIVE LAYOUT

   PURPOSE
   -------
   Collapses current workspace panels, app navigation, metrics, credit
   balances, and purchase rows across 1160px, 980px, and 640px stages.

   INCLUDES
   --------
   - Wide-panel collapse
   - Tablet sidebar and two-column metrics
   - Phone single-column navigation and billing

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This responsive set is later than earlier app corrections and therefore
     represents the current final layout.
   ========================================================================== */

@media (max-width: 1160px) {
    .page-app .app-workspace-panel,
    .page-app .app-section-grid,
    .page-app .app-section-grid-balanced,
    .page-app .app-billing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .page-app .app-shell {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 860px);
        padding-top: 36px;
    }

    .page-app .app-sidebar {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .page-app .app-sidebar-head {
        display: none;
    }

    .page-app .app-nav-link {
        justify-content: center;
    }

    .page-app .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-app .credit-balance-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-app .credit-balance-item:nth-child(2) {
        border-right: 0;
    }

    .page-app .credit-balance-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .page-app .app-topbar {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-app .app-status {
        justify-self: start;
        text-align: left;
    }

    .page-app .api-key-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .page-app .app-shell {
        width: min(100% - 24px, 560px);
        padding-top: 28px;
    }

    .page-app .app-sidebar,
    .page-app .metric-grid,
    .page-app .app-hero-meta,
    .page-app .app-summary-grid,
    .page-app .billing-summary-grid,
    .page-app .billing-plan-grid {
        grid-template-columns: 1fr;
    }

    .page-app .app-topbar h1 {
        font-size: 32px;
    }

    .page-app .app-page-intro {
        font-size: 13px;
    }

    .page-app .app-card-head {
        display: grid;
    }

    .page-app .credit-balance-strip {
        grid-template-columns: 1fr;
    }

    .page-app .credit-balance-item,
    .page-app .credit-balance-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .page-app .credit-balance-item:last-child {
        border-bottom: 0;
    }

    .page-app .credit-pack-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-app .credit-pack-action {
        justify-content: space-between;
    }
}

:root {
    --route-transition-min-display-ms: 850;
    --route-transition-overlay-ms: 560ms;
    --route-transition-content-ms: 480ms;
    --route-transition-navigation-delay-ms: 220;
}

/* --------------------------------------------------------------------------
   Customer app route transitions
   Authenticated-route backdrop, spinner, shell arrival/departure states, light theme, and reduced motion.
   -------------------------------------------------------------------------- */
.app-route-backdrop,
.app-route-loader {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--route-transition-overlay-ms) ease, visibility var(--route-transition-overlay-ms) ease;
}

.app-route-backdrop {
    inset: 0;
    z-index: 999998;
    background:
        radial-gradient(circle at 50% 38%, rgba(238, 152, 38, 0.12), transparent 18rem),
        var(--body-bg);
}

.app-route-loader {
    z-index: 999999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    top: 50%;
    left: 50%;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.app-route-svg-frame {
    display: block;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    object-fit: contain;
}

html.app-is-booting body.page-app .app-route-backdrop,
html.app-is-leaving body.page-app .app-route-backdrop,
html.app-is-booting body.page-app .app-route-loader,
html.app-is-leaving body.page-app .app-route-loader {
    opacity: 1;
    visibility: visible;
}

html.app-is-ready body.page-app .app-route-backdrop,
html.app-is-ready body.page-app .app-route-loader {
    opacity: 0;
    visibility: hidden;
}

html.app-is-booting body.page-app .app-route-backdrop,
html.app-is-leaving body.page-app .app-route-backdrop {
    pointer-events: auto;
}

html.app-is-booting body.page-app,
html.app-is-leaving body.page-app {
    cursor: progress;
}

html.app-is-booting body.page-app .app-shell {
    opacity: 0;
    transform: translateY(4px);
}

html.app-is-leaving body.page-app .app-shell {
    opacity: 0.98;
    transform: translateY(2px);
}

html.app-is-ready body.page-app .app-shell {
    opacity: 1;
    transform: translateY(0);
}

body.page-app .app-shell {
    transition: opacity var(--route-transition-content-ms) ease-out, transform var(--route-transition-content-ms) ease-out;
    will-change: opacity, transform;
}

html[data-theme="light"] .app-route-loader {
    background: transparent;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    body.page-app .app-route-backdrop,
    body.page-app .app-route-loader,
    body.page-app .app-shell {
        transition: none;
    }

}
/* ==========================================================================
   A15. FINAL CATALOG, READABILITY, AND PAGE-SPECIFIC UTILITIES
   Intentionally late overrides. Keep this region after page typography so dense navigation/UI sizing remains controlled.
   ========================================================================== */
/* ==========================================================================
   A15.1. FINAL PRODUCT-CATALOG SIZE AUTHORITY

   PURPOSE
   -------
   Reasserts the flyout dimensions and dense typography after page-level
   heading rules. This is intentionally late in the base layer so product-page
   h3 styles cannot make catalog headings oversized.

   INCLUDES
   --------
   - Final popover width/height
   - Compact section headings
   - Product title/copy/pill size
   - Phone one-column correction

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Do not move this beside A05.3 without retesting every page profile; its
     late source position is the reason it wins.
   ========================================================================== */

.site-header .product-catalog-menu {
    width: min(620px, calc(100vw - 40px));
    max-height: min(68vh, 430px);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}

.site-header .product-catalog-head {
    padding: 0 2px 8px;
}

.site-header .product-catalog-head strong {
    font-size: 12px;
    line-height: 1.2;
}

.site-header .product-catalog-head span {
    display: none;
}

.site-header .product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding-top: 10px;
}

.site-header .product-catalog-section > h3 {
    margin: 0 0 5px !important;
    color: var(--accent-bright);
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.09em !important;
    font-weight: 500 !important;
    text-transform: uppercase;
}

.site-header .product-catalog-list {
    gap: 2px;
}

.site-header .product-catalog-item {
    padding: 6px 7px;
    border-radius: 6px;
}

.site-header .product-catalog-title {
    gap: 6px;
    font-size: 9.5px;
    line-height: 1.25;
}

.site-header .product-catalog-item p {
    display: block;
    max-width: 230px;
    margin: 2px 0 0;
    color: rgba(178, 175, 168, 0.58);
    font-size: 8.5px;
    line-height: 1.25;
}

.site-header .product-catalog-pill {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 7.5px;
}

@media (max-width: 720px) {
    .site-header .product-catalog-menu {
        width: calc(100vw - 28px);
    }

    .site-header .product-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Readability type scale
   Centralized micro/label/supporting/body sizes and targeted corrections for public and customer-app UI.
   -------------------------------------------------------------------------- */

:root {
    --type-micro: 12px;
    --type-label: 14px;
    --type-supporting: 15px;
    --type-body: 16px;
}

.page-standard {
    overflow-x: clip;
}

.theme-toggle {
    font-size: 13px;
}

.site-header .product-catalog-head strong {
    font-size: var(--type-label);
}

.site-header .product-catalog-section > h3 {
    font-size: var(--type-micro) !important;
}

.site-header .product-catalog-title {
    font-size: var(--type-label);
}

.site-header .product-catalog-item p {
    max-width: 250px;
    color: rgba(205, 201, 193, 0.74);
    font-size: 11px;
    line-height: 1.4;
}

html[data-theme="light"] .site-header .product-catalog-item p {
    color: #625b51;
}

html[data-theme="light"] .site-header .product-catalog-item.is-active p {
    color: #4f493f;
}

.site-header .product-catalog-pill {
    font-size: 11px;
}

.page-standard main p,
.page-standard main li {
    font-size: var(--type-body);
}

.page-smtprs .kicker,
.page-index .kicker {
    font-size: var(--type-label);
}

.btn {
    font-family: inherit;
    font-size: var(--type-supporting);
}

/* App button affordance and billing portal action */
.page-app button:not(:disabled) {
    cursor: pointer;
}

.page-app button:disabled {
    cursor: not-allowed;
}

.page-app [data-open-billing-portal] {
    position: relative;
    isolation: isolate;
    min-width: 176px;
    min-height: 48px;
    max-width: 100%;
    padding: 0 16px;
    gap: 10px;
    overflow: hidden;
    border-color: rgba(255, 205, 105, 0.78);
    border-radius: 10px;
    color: #17110a;
    background:
        linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.28) 48%, transparent 58%) 140% 0 / 220% 100% no-repeat,
        linear-gradient(135deg, #f7bf4f 0%, #ee9826 58%, #f6d992 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 9px 24px rgba(238, 152, 38, 0.16);
    font-family: inherit;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease,
        box-shadow 150ms ease, transform 150ms ease;
}

.page-app [data-open-billing-portal]::before {
    content: "$";
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border: 1px solid rgba(23, 17, 10, 0.24);
    border-radius: 7px;
    color: #f7bd49;
    background: rgba(23, 17, 10, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.page-app [data-open-billing-portal]::after {
    content: "\2197";
    margin-left: auto;
    color: rgba(23, 17, 10, 0.7);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: transform 150ms ease;
}

.page-app [data-open-billing-portal]:hover,
.page-app [data-open-billing-portal]:focus-visible {
    color: #0d0a06;
    border-color: rgba(255, 220, 146, 0.96);
    background:
        linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.38) 48%, transparent 58%) -35% 0 / 220% 100% no-repeat,
        linear-gradient(135deg, #ffd06b 0%, #f2a22e 56%, #ffe5aa 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 13px 34px rgba(238, 152, 38, 0.24);
    transform: translateY(-2px);
}

.page-app [data-open-billing-portal]:hover::after,
.page-app [data-open-billing-portal]:focus-visible::after {
    transform: translate(2px, -2px);
}

.page-app [data-open-billing-portal]:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(238, 152, 38, 0.1);
    transform: translateY(0);
}

.page-app [data-open-billing-portal]:disabled {
    color: var(--muted);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
    opacity: 0.68;
    transform: none;
    white-space: normal;
}

.page-app [data-open-billing-portal]:disabled::before {
    color: var(--muted);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
}

.page-app [data-open-billing-portal]:disabled::after {
    display: none;
}

.page-app [data-billing-message-value] {
    margin: 0;
    overflow: visible;
    color: var(--accent-bright);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
}

html[data-theme="light"] .page-app [data-open-billing-portal]:hover,
html[data-theme="light"] .page-app [data-open-billing-portal]:focus-visible {
    color: #17110a;
}

.note,
.pricing-disclaimer,
.credit-pack-policy p,
.form-note,
.legal-meta {
    font-size: var(--type-label);
}

.page-smtprs .card-label,
.page-index .card-label,
.route-list span,
.docs-card span,
.docs-code-label,
.docs-method,
.docs-api-pill {
    /* font-size: 13px; */
    font-size: 12px;
}

.docs-sidebar a,
.docs-api-link,
.legal-nav a {
    font-size: var(--type-label);
}

.docs-section p,
.docs-section li,
.legal-document,
.tier-card p,
.auth-copy p {
    font-size: var(--type-body);
}

.docs-card p,
.docs-api-card p,
.docs-callout,
.comparison-row,
.tier-list,
.price-block span,
.route-list strong {
    font-size: var(--type-supporting);
}

.docs-inline-code,
.docs-table td,
.docs-table th,
.legal-table td,
.legal-table th {
    font-size: var(--type-label);
}

.field span {
    font-size: var(--type-label);
}

.field small {
    font-size: var(--type-micro);
}

.field input,
.field textarea,
.field select {
    font-size: var(--type-supporting);
}

.page-app .app-sidebar-head span,
.page-app .app-status,
.page-app .metric-card span,
.page-app .app-label,
.page-app .secret-box span,
.page-app .data-table th,
.page-app .account-delete-note,
.page-app .app-confirm-warning span,
.page-app .credit-balance-item span {
    font-size: 13px;
}

.page-app .app-sidebar-head strong,
.page-app .app-nav-link,
.page-app .app-action-link span,
.page-app .data-table,
.page-app .table-action,
.page-app .credit-pack-copy span,
.page-app .credit-pack-copy p {
    font-size: var(--type-label);
}

.page-app .app-page-intro,
.page-app .app-card-head p,
.page-app .app-hero-copy p,
.page-app .app-danger-copy,
.page-app .app-check-row,
.page-app .app-confirm-panel p,
.page-app .app-confirm-warning,
.page-app .billing-plan-card p {
    font-size: var(--type-supporting);
}

.page-app .app-confirm-warning strong {
    font-size: var(--type-supporting);
}

.page-app .app-mini-stat strong,
.page-app .billing-summary-card strong,
.page-app .credit-history-head h3 {
    font-size: 18px;
}

@media (max-width: 720px) {
    :root {
        --type-body: 16px;
        --type-supporting: 15px;
        --type-label: 13px;
        --type-micro: 11px;
    }
}

/* --------------------------------------------------------------------------
   Contact page kicker colors
   Explicit dark/light accent colors for the contact-page hierarchy label.
   -------------------------------------------------------------------------- */
.page-contact .kicker {
    color: #f6bf3f;
}
/* Dark theme Contact kicker */
.page-contact .contact-intro .kicker {
    color: #f6bf3f;
}

/* Light theme Contact kicker */
html[data-theme="light"] .page-contact .contact-intro .kicker {
    color: #b7650d;
}


/* --------------------------------------------------------------------------
   Authentication kicker colors
   Explicit dark/light accent colors for Sign in and related auth hierarchy labels.
   -------------------------------------------------------------------------- */

.page-auth .auth-copy .kicker {
    color: #f6bf3f;
}

html[data-theme="light"] .page-auth .auth-copy .kicker {
    color: #b7650d;
}

/* --------------------------------------------------------------------------
   Documentation and changelog kicker colors
   Shared dark/light accent treatment for documentation hero labels and changelog dates.
   -------------------------------------------------------------------------- */

/* Dark theme: applies to the hero "Changelog" kicker and changelog month/date kickers. */
.page-docs .kicker {
    color: #f6bf3f;
}

/* Light theme: use the darker orange for the same documentation kickers. */
html[data-theme="light"] .page-docs .kicker {
    color: #b7650d;
}

/* --------------------------------------------------------------------------
   Changelog "On this page" navigation
   Three-column desktop TOC, sticky active-date navigation, and responsive collapse.
   -------------------------------------------------------------------------- */

.page-docs .docs-reference-shell--toc {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(170px, 210px);
    gap: 28px;
}

.page-docs .docs-reference-shell--toc > .docs-sidebar {
    grid-column: 1;
}

.page-docs .docs-reference-shell--toc > .docs-article {
    grid-column: 2;
    grid-row: 1;
}

.page-docs .docs-reference-shell--toc > .docs-toc {
    grid-column: 3;
    grid-row: 1;
}

.docs-toc {
    position: sticky;
    top: 124px;
    align-self: start;
    max-height: calc(100vh - 154px);
    overflow-y: auto;
    padding: 4px 0 8px 18px;
    border-left: 1px solid var(--line);
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.docs-toc-heading {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0.01em;
}

.docs-toc-nav {
    display: grid;
    gap: 2px;
}

.docs-toc-nav a {
    position: relative;
    display: block;
    padding: 6px 8px 6px 12px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 580;
    line-height: 1.35;
    transition: color 150ms ease, background-color 150ms ease;
}

.docs-toc-nav a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: transparent;
    transform: translateY(-50%);
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.docs-toc-nav a:hover,
.docs-toc-nav a:focus-visible {
    color: var(--text);
    background: rgba(238, 152, 38, 0.055);
}

.docs-toc-nav a.active,
.docs-toc-nav a[aria-current="location"] {
    color: #f6bf3f;
    background: rgba(238, 152, 38, 0.075);
}

.docs-toc-nav a.active::before,
.docs-toc-nav a[aria-current="location"]::before {
    background: #f6bf3f;
    box-shadow: 0 0 10px rgba(246, 191, 63, 0.28);
}

.page-docs .docs-section[id] {
    scroll-margin-top: 124px;
}

html[data-theme="light"] .docs-toc-nav a.active,
html[data-theme="light"] .docs-toc-nav a[aria-current="location"] {
    color: #b7650d;
    background: rgba(238, 152, 38, 0.11);
}

html[data-theme="light"] .docs-toc-nav a.active::before,
html[data-theme="light"] .docs-toc-nav a[aria-current="location"]::before {
    background: #b7650d;
    box-shadow: 0 0 8px rgba(183, 101, 13, 0.18);
}

@media (max-width: 1100px) {
    .page-docs .docs-reference-shell--toc {
        grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
    }

    .page-docs .docs-reference-shell--toc > .docs-sidebar {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .page-docs .docs-reference-shell--toc > .docs-toc {
        position: static;
        grid-column: 2;
        grid-row: 1;
        max-height: none;
        overflow: visible;
        padding: 0 0 18px;
        border-left: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .page-docs .docs-reference-shell--toc > .docs-article {
        grid-column: 2;
        grid-row: 2;
    }

    .docs-toc-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .docs-toc-nav a {
        padding: 6px 9px;
        border: 1px solid var(--line-soft);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.018);
    }

    .docs-toc-nav a::before {
        display: none;
    }
}

@media (max-width: 980px) {
    .page-docs .docs-reference-shell--toc {
        grid-template-columns: 1fr;
    }

    .page-docs .docs-reference-shell--toc > .docs-sidebar,
    .page-docs .docs-reference-shell--toc > .docs-toc,
    .page-docs .docs-reference-shell--toc > .docs-article {
        grid-column: 1;
        grid-row: auto;
    }

    .docs-toc {
        margin-top: 4px;
    }
}

/* --------------------------------------------------------------------------
   API catalog sidebar product hierarchy
   Compact product hierarchy, persistent status dots, disabled roadmap entries, and light-theme treatment.
   -------------------------------------------------------------------------- */

/* Compact spacing for this sidebar only. */
.docs-sidebar[aria-label="API catalog navigation"] {
    gap: 1px;
}

/* Keep the Product catalog kicker close to the first product row. */
.docs-sidebar[aria-label="API catalog navigation"] > .kicker {
    margin-bottom: 2px;
}

/* Shared row geometry for clickable and unavailable product entries. */
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-link,
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px 2px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: var(--type-label, 14px);
    font-weight: 620;
    line-height: 1.25;
}

/* Persistent gold hierarchy dot on every product row. */
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-link::before,
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(238, 152, 38, 0.11);
    transform: translateY(-50%);
}

/* smtpRS remains the normal clickable product. */
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-link {
    color: var(--text-soft);
}

/* Roadmap products are visibly unavailable and cannot be hovered/clicked. */
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled {
    color: var(--muted-2);
    opacity: 0.52;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

/*
 * Explicitly neutralize any generic docs-sidebar hover/active treatment
 * for disabled product rows. They are spans, but this keeps the intent clear.
 */
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled:hover,
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled:focus {
    border-color: transparent;
    color: var(--muted-2);
    background: transparent;
}

/* Light-theme dot and disabled text treatment. */
html[data-theme="light"] .docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-link::before,
html[data-theme="light"] .docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled::before {
    background: #b7650d;
    box-shadow: 0 0 0 4px rgba(183, 101, 13, 0.10);
}

html[data-theme="light"] .docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled {
    color: #8f877a;
    opacity: 0.58;
}

/* Disabled roadmap products use a neutral gray-white hierarchy dot. */
.docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled::before {
    background: #c9c5bd;
    box-shadow: 0 0 0 4px rgba(201, 197, 189, 0.10);
}

/* Slightly darker neutral dot for visibility on the light theme. */
html[data-theme="light"] .docs-sidebar[aria-label="API catalog navigation"] .docs-sidebar-product-disabled::before {
    background: #8f877a;
    box-shadow: 0 0 0 4px rgba(143, 135, 122, 0.10);
}
}



/* ==========================================================================
   END OF A. CORE SITE SYSTEM / END OF `paravane-base` LAYER
   The closing brace immediately above ends the low-priority base layer.
   Everything below is unlayered and therefore participates at a higher cascade
   priority unless a later selector/layer rule says otherwise.
   ========================================================================== */

/* ==========================================================================
   B. SHARED SAAS PRODUCT-PAGE SYSTEM
   Formerly maintained as a separate shared product stylesheet.

   CASCADE POSITION
   ----------------
   This section is intentionally unlayered and sits after `paravane-base` but
   before the `company` and `marketing` profile systems. That reproduces the
   previous effective order on smtpRS, InvoiceGuard, RetainIQ, VendorLens, and
   the waitlist page while allowing every page to load only paravane.css.
   ========================================================================== */

/* ==========================================================================
   B01. PRODUCT-PAGE FOUNDATION, TYPOGRAPHY, AND STATUS SYSTEM

   PURPOSE
   -------
   Establishes the current shared product-page scope used by smtpRS,
   InvoiceGuard, RetainIQ, VendorLens, and the waitlist. It provides
   typography, page clipping, common buttons, eyebrow labels, product-line
   metadata, and live/development status pills.

   INCLUDES
   --------
   - .product-saas-page body/main foundation
   - Rubik heading scale and Aptos body copy
   - Shared eyebrow/product-line labels
   - Blue development and green live status pills
   - Light-theme status corrections

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This section is unlayered and intentionally follows paravane-base.
   - Marketing-profile product refinements in E08 appear later and may
     override equal-specificity declarations.
   ========================================================================== */

.product-saas-page {
    overflow-x: clip;
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.product-saas-page main {
    position: relative;
    overflow: clip;
}

.product-saas-page main h1,
.product-saas-page main h2,
.product-saas-page main h3 {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
    text-wrap: balance;
}

.product-saas-page main h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(42px, 5vw, 60px);
    font-weight: 650;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.product-saas-page main h2 {
    margin: 0;
    font-size: clamp(32px, 3.8vw, 46px);
    font-weight: 620;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.product-saas-page main h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.product-saas-page main p {
    color: var(--muted);
}

.product-saas-page .btn {
    min-height: 48px;
    padding-inline: 20px;
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
}

.product-saas-eyebrow {
    margin: 0 0 15px;
    color: var(--accent-bright) !important;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.product-saas-product-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.product-saas-product-line > span:first-child {
    color: var(--accent-bright);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.11em;
    /* text-transform: uppercase; */
}

.product-saas-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.09);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
}

.product-saas-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
}

.product-saas-status--live {
    color: #7ee2ad;
    border-color: rgba(83, 213, 142, 0.36);
    background: rgba(53, 191, 113, 0.09);
}

.product-saas-status--live i {
    background: #65d89a;
    box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.1);
}

html[data-theme="light"] .product-saas-status:not(.product-saas-status--live) {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.34);
    background: rgba(59, 130, 246, 0.1);
}

html[data-theme="light"] .product-saas-status--live,
html[data-theme="light"] .product-saas-demo-head > small {
    color: #18784a;
}

html[data-theme="light"] .product-saas-status--live {
    border-color: rgba(31, 139, 83, 0.34);
    background: rgba(53, 191, 113, 0.11);
}

/* ==========================================================================
   B02. PRODUCT HERO, WINDOW FRAME, AND DECISION STATES

   PURPOSE
   -------
   Builds the current product hero, background grid/glow, copy/actions/proof
   points, framed product visual, mock window header, and three-state decision
   strip.

   INCLUDES
   --------
   - Responsive hero grid
   - Hero heading/lede/actions/proof
   - Framed workflow/visual containers
   - Window chrome and brand mark
   - Allow/review/reject state strip

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - InvoiceGuard swaps theme-specific hero images inside this same visual
     shell.
   - The marketing profile later removes the perspective tilt and refines
     border/radius/shadow values.
   ========================================================================== */

.product-saas-hero {
    position: relative;
    padding: clamp(76px, 8vw, 112px) 0 74px;
    isolation: isolate;
}

.product-saas-hero::before,
.product-saas-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.product-saas-hero::before {
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.013) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.013) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 88%);
}

.product-saas-hero::after {
    width: 760px;
    height: 760px;
    top: -430px;
    left: calc(50% - 700px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 152, 38, 0.2), rgba(238, 152, 38, 0.04) 44%, transparent 72%);
}

.product-saas-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.87fr) minmax(480px, 1.13fr);
    gap: clamp(48px, 6vw, 82px);
    align-items: center;
}

.product-saas-hero-copy {
    position: relative;
    z-index: 2;
}

.product-saas-lede {
    max-width: 690px;
    margin: 26px 0 0;
    color: var(--text-soft) !important;
    font-size: clamp(18px, 1.7vw, 21px);
    line-height: 1.63;
}

.product-saas-hero-actions {
    margin-top: 32px;
}

.product-saas-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 28px;
}

.product-saas-proof--stacked {
    display: grid;
}

.product-saas-proof span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

.product-saas-proof i {
    color: var(--accent-bright);
    font-size: 11px;
}

.product-saas-visual,
.product-saas-workflow-visual,
.product-saas-evidence-visual,
.product-saas-contract-visual,
.product-saas-waitlist-visual {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.24);
    border-radius: 22px;
    background: #090a0d;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.34);
}

.product-saas-visual {
    transform: perspective(1400px) rotateY(-2deg) rotateX(0.8deg);
    transform-origin: center;
}

.product-saas-visual::before {
    content: "";
    position: absolute;
    inset: 18% -12% -14% 16%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 152, 38, 0.18), transparent 70%);
    filter: blur(32px);
}

.product-saas-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    color: #dcd7ce;
    font-size: 11px;
}

.product-saas-window-head > div {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.product-saas-window-head strong {
    overflow: hidden;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-saas-window-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    border-radius: 7px;
    color: #15110c;
    background: linear-gradient(135deg, #f7c548, #e88316);
    font-family: "Rubik", sans-serif;
    font-weight: 900;
}

.product-saas-window-mode {
    color: #77736b;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-saas-visual figure,
.product-saas-visual > figure {
    margin: 0;
    background: #08090b;
}

.product-saas-visual figure img,
.product-saas-workflow-visual > img,
.product-saas-evidence-visual > img,
.product-saas-contract-visual > img,
.product-saas-waitlist-visual > img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   B02.1. INVOICEGUARD THEME-SWAPPED HERO ARTWORK

   PURPOSE
   -------
   Places the two InvoiceGuard tablet illustrations in the same grid cell and
   swaps visibility by site theme. The dark site intentionally uses the
   light-interface artwork and the light site uses the dark-interface artwork
   for contrast.

   INCLUDES
   --------
   - Shared positioning canvas
   - Dark/light image visibility contract
   - Oversized desktop width and negative margin

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Both images must retain identical intrinsic composition or the swap will
     visibly jump.
   - The !important display rules protect the theme contract from generic
     image selectors.
   ========================================================================== */

.invoiceguard-hero-theme-visual {
    display: grid;
    place-items: center;
    width: min(124%, 820px);
    max-width: none;
    margin-inline: -12%;
    min-height: 0;
    overflow: visible;
}

.invoiceguard-hero-image {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.invoiceguard-hero-image--light-theme {
    display: none !important;
}

html[data-theme="light"] .invoiceguard-hero-image--dark-theme {
    display: none !important;
}

html[data-theme="light"] .invoiceguard-hero-image--light-theme {
    display: block !important;
}

.product-saas-window-states,
.product-saas-outcome-list {
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, 0.075);
}

.product-saas-window-states {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.product-saas-window-states article,
.product-saas-outcome-list article {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    background: #0c0e11;
}

.product-saas-window-states article {
    padding: 15px 13px 17px;
}

.product-saas-state-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: #e9aa35;
    box-shadow: 0 0 0 4px rgba(233, 170, 53, 0.09);
}

.product-saas-window-states article:nth-child(1) .product-saas-state-dot,
.product-saas-outcome-list article:nth-child(1) .product-saas-state-dot {
    background: #7bb99a;
    box-shadow: 0 0 0 4px rgba(123, 185, 154, 0.09);
}

.product-saas-window-states article:nth-child(3) .product-saas-state-dot,
.product-saas-outcome-list article:nth-child(3) .product-saas-state-dot {
    background: #d77863;
    box-shadow: 0 0 0 4px rgba(215, 120, 99, 0.09);
}

.product-saas-window-states strong,
.product-saas-window-states small,
.product-saas-outcome-list strong,
.product-saas-outcome-list small {
    display: block;
}

.product-saas-window-states strong {
    color: #f1ede4;
    font-size: 11px;
    font-weight: 750;
}

.product-saas-window-states small {
    margin-top: 3px;
    color: #77736b;
    font-size: 8.5px;
    line-height: 1.35;
}

/* ==========================================================================
   B03. STICKY PRODUCT SUBNAVIGATION

   PURPOSE
   -------
   Defines the secondary navigation row beneath the main header. It centers
   section links between a product label and documentation CTA, then becomes a
   simple horizontal link row on narrow screens.

   INCLUDES
   --------
   - Sticky offset tied to --site-header-visible-height
   - Three-column desktop grid
   - Scrollable centered section links
   - Documentation CTA
   - Static mobile layout

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The marketing-profile override in E08.2 is the final desktop offset
     authority.
   - The commented legacy top: 75px block is historical reference only.
   ========================================================================== */

/* LEGACY REFERENCE: previous fixed-height product subnav
.product-saas-subnav {
    position: sticky;
    top: 75px;
    z-index: 12;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line);
    background: rgba(10, 11, 13, 0.98);
    backdrop-filter: blur(18px);
} */
.product-saas-subnav {
    position: sticky;
    top: var(--site-header-visible-height, 96px);
    z-index: 12;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line);
    background: rgba(10, 11, 13, 0.98);
    backdrop-filter: blur(18px);
    transition: top 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-saas-subnav .container {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 58px;
}

.product-saas-subnav strong {
    justify-self: start;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.product-saas-subnav .container > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.product-saas-subnav .container > div::-webkit-scrollbar {
    display: none;
}

.product-saas-subnav a {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: color 160ms ease;
}

.product-saas-subnav a:hover,
.product-saas-subnav a:focus-visible {
    color: #f6bf3f;
}

html[data-theme="light"] .product-saas-subnav a:hover,
html[data-theme="light"] .product-saas-subnav a:focus-visible {
    color: #c88128;
}

.product-saas-subnav .product-saas-subnav-cta {
    justify-self: end;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.06);
}

/* ==========================================================================
   B04. PRODUCT OUTCOME BAND

   PURPOSE
   -------
   Creates the full-width outcome section immediately after the hero/subnav.
   Copy sits beside a bordered list of practical decision outcomes and colored
   state dots.

   INCLUDES
   --------
   - Two-column outcome layout
   - Outcome heading and supporting copy
   - Bordered outcome list
   - State-specific dot colors

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The list becomes one column with the surrounding product layout at
     smaller widths.
   - Marketing-profile rules later adjust padding, column minimums, and row
     height.
   ========================================================================== */

.product-saas-outcomes {
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.01);
}

.product-saas-outcomes-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(480px, 1.12fr);
    gap: clamp(48px, 7vw, 88px);
    align-items: center;
    padding-top: 64px;
    padding-bottom: 64px;
}

.product-saas-outcomes h2 {
    font-size: clamp(32px, 3.6vw, 46px);
}

.product-saas-outcomes-grid > div:first-child > p:last-child {
    max-width: 620px;
    margin: 20px 0 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.7;
}

.product-saas-outcome-list {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.product-saas-outcome-list article {
    padding: 18px 18px 20px;
}

.product-saas-outcome-list strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.product-saas-outcome-list small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

/* ==========================================================================
   B05. SHARED PRODUCT SECTION SHELLS AND HEADING LAYOUTS

   PURPOSE
   -------
   Defines consistent section spacing, anchor scroll offsets, muted section
   backgrounds, and split/centered heading compositions used throughout all
   current product pages.

   INCLUDES
   --------
   - Section vertical rhythm and scroll margin
   - Muted/integration/principle/roadmap backgrounds
   - Split and centered section headings
   - Workflow/contract visual wrappers

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Keep scroll-margin-top coordinated with the sticky header/subnav stack.
   - More specialized grids follow in B06 through B11.
   ========================================================================== */

.product-saas-section {
    padding: clamp(92px, 9vw, 132px) 0;
    scroll-margin-top: 150px;
}

.product-saas-section--muted,
.product-saas-section--integration,
.product-saas-principles,
.product-saas-roadmap {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.01);
}

.product-saas-section-heading {
    margin-bottom: 42px;
}

.product-saas-section-heading--split {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.52fr);
    gap: 56px;
    align-items: end;
}

.product-saas-section-heading--split > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

.product-saas-section-heading--center {
    max-width: 840px;
    margin-inline: auto;
    text-align: center;
}

.product-saas-section-heading--center > p:last-child {
    max-width: 720px;
    margin: 20px auto 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

.product-saas-workflow-visual,
.product-saas-contract-visual {
    margin: 0;
}

.product-saas-workflow-visual > img,
.product-saas-contract-visual > img {
    background: #08090b;
}

/* ==========================================================================
   B06. WORKFLOW VISUALS AND NUMBERED STEP GRID

   PURPOSE
   -------
   Styles the full-width workflow/contract illustrations and the four-part
   numbered process grid that explains how each product receives, evaluates,
   and routes work.

   INCLUDES
   --------
   - Workflow/contract visual media
   - Four-column numbered step grid
   - Number, heading, and supporting-copy hierarchy

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Tablet and phone column collapse is defined in B16.
   - Marketing-profile B-equivalent overrides in E08.3 reduce card density
     without changing the structure.
   ========================================================================== */

.product-saas-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-soft);
}

.product-saas-step-grid article {
    position: relative;
    min-width: 0;
    min-height: 210px;
    padding: 24px 22px 28px;
    border-right: 1px solid var(--line);
}

.product-saas-step-grid article:last-child {
    border-right: 0;
}

.product-saas-step-grid article > span,
.product-saas-feature-card > span,
.product-saas-principle-grid article > span,
.product-saas-evidence-list article > span {
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.product-saas-step-grid h3 {
    margin-top: 42px;
}

.product-saas-step-grid p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.65;
}

/* ==========================================================================
   B07. PRODUCT FEATURE AND USE-CASE CARDS

   PURPOSE
   -------
   Defines the reusable two-column feature grid and the raised numbered cards
   used for capabilities, use cases, controls, and decision scenarios.

   INCLUDES
   --------
   - Two-column feature grid
   - Numbered feature card surface
   - Hover lift and accent border
   - Heading/copy rhythm

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Use-case grids reuse the same component with a smaller minimum height
     later in B13.
   - Phone layouts collapse to one column in B16.
   ========================================================================== */

.product-saas-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product-saas-feature-card {
    position: relative;
    min-width: 0;
    min-height: 260px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 12%, rgba(238, 152, 38, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012));
    transition: transform 200ms ease, border-color 200ms ease;
}

.product-saas-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(238, 152, 38, 0.3);
}

.product-saas-feature-card h3 {
    max-width: 520px;
    margin-top: 72px;
    font-size: 22px;
}

.product-saas-feature-card p {
    max-width: 620px;
    margin: 13px 0 0;
    font-size: 14px;
    line-height: 1.68;
}

/* ==========================================================================
   B08. EVIDENCE COPY, REVIEW LIST, AND VISUAL

   PURPOSE
   -------
   Builds the split evidence section: explanatory copy and a numbered review
   list on one side, paired with an evidence/dashboard illustration on the
   other.

   INCLUDES
   --------
   - Evidence split grid
   - Supporting copy
   - Numbered evidence rows
   - Evidence visual frame
   - Hover inset outline

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The row pseudo-element supplies hover framing without shifting borders.
   - Marketing-profile rules later adjust gap and row padding.
   ========================================================================== */

.product-saas-evidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(500px, 1.22fr);
    gap: clamp(54px, 7vw, 92px);
    align-items: center;
}

.product-saas-evidence-copy > p:not(.product-saas-eyebrow) {
    margin: 24px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

.product-saas-evidence-list {
    margin-top: 30px;
    border-top: 1px solid var(--line);
}

.product-saas-evidence-list article {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
    padding: 20px 18px 22px;
    border-bottom: 1px solid var(--line);
}

.product-saas-evidence-list h3 {
    font-size: 16px;
}

.product-saas-evidence-list p {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.6;
}

.product-saas-evidence-visual {
    margin: 0;
}

/* ==========================================================================
   B09. INTEGRATION COPY, CHIPS, AND ROUTING DIAGRAM

   PURPOSE
   -------
   Defines the integration section used to show where a product connects and
   how a decision moves through staged routing.

   INCLUDES
   --------
   - Two-column integration grid
   - Integration/system chips
   - Routing card header
   - Stacked routing stages and connector lines
   - Hover emphasis

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Chips are informational, not controls.
   - Stage geometry is shared across products and should remain
     product-neutral.
   ========================================================================== */

.product-saas-integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
    gap: clamp(54px, 7vw, 92px);
    align-items: center;
}

.product-saas-integration-grid > div:first-child > p:not(.product-saas-eyebrow) {
    margin: 22px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

.product-saas-chip-group {
    margin-top: 28px;
}

.product-saas-chip-group > strong {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.product-saas-chip-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-saas-chip-group span {
    display: inline-flex;
    align-items: center;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.018);
    font-size: 11px;
    font-weight: 700;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.product-saas-routing-card {
    padding: 22px;
    border: 1px solid rgba(238, 152, 38, 0.22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 78% 12%, rgba(238, 152, 38, 0.1), transparent 35%),
        var(--bg-soft);
    box-shadow: var(--shadow-soft);
}

.product-saas-routing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
}

.product-saas-routing-head span {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.product-saas-routing-head small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.product-saas-routing-stage {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
}

.product-saas-routing-stage--active {
    border-color: rgba(238, 152, 38, 0.32);
    background: rgba(238, 152, 38, 0.075);
}

.product-saas-routing-stage > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 850;
}

.product-saas-routing-stage strong,
.product-saas-routing-stage small {
    display: block;
}

.product-saas-routing-stage strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.product-saas-routing-stage small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.product-saas-routing-line {
    width: 1px;
    height: 20px;
    margin: 0 0 0 37px;
    background: linear-gradient(var(--line), var(--accent-line));
}

/* ==========================================================================
   B10. PRODUCT OPERATING PRINCIPLES

   PURPOSE
   -------
   Creates the three-column principle grid used to explain platform boundaries,
   customer control, and operating assumptions.

   INCLUDES
   --------
   - Three equal principle columns
   - Numbered hierarchy
   - Border separators
   - Tablet/phone collapse and hover outline

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The third principle spans full width at the intermediate tablet
     breakpoint before the grid becomes one column.
   ========================================================================== */

.product-saas-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg-soft);
}

.product-saas-principle-grid article {
    position: relative;
    min-width: 0;
    min-height: 250px;
    padding: 28px 26px 30px;
    border-right: 1px solid var(--line);
}

.product-saas-principle-grid article:last-child {
    border-right: 0;
}

.product-saas-principle-grid h3 {
    margin-top: 66px;
}

.product-saas-principle-grid p {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.66;
}

/* ==========================================================================
   B11. PRODUCT ROADMAP AND DELIVERY COLUMNS

   PURPOSE
   -------
   Builds the roadmap section with strategic copy beside two bordered lists for
   current and planned delivery scope.

   INCLUDES
   --------
   - Roadmap split grid
   - Two roadmap columns
   - Section labels and bullet lists
   - Hover lift

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Roadmap content is informational and does not imply contractual delivery
     dates.
   - The waitlist model grid is separate and follows in B14.
   ========================================================================== */

.product-saas-roadmap-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
    gap: clamp(54px, 8vw, 104px);
    align-items: start;
}

.product-saas-roadmap-grid > div:first-child > p:last-child {
    margin: 24px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

.product-saas-roadmap-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product-saas-roadmap-columns article {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.016);
}

.product-saas-roadmap-columns article > span {
    display: block;
    margin-bottom: 20px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.product-saas-roadmap-columns ul,
.product-saas-inline-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-saas-roadmap-columns li,
.product-saas-inline-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.5;
}

.product-saas-roadmap-columns li span {
    color: var(--accent-bright);
    font-weight: 900;
}

/* ==========================================================================
   B12. PRODUCT FINAL CALL TO ACTION

   PURPOSE
   -------
   Defines the closing conversion panel shared by current product pages,
   including final positioning copy and documentation/contact actions.

   INCLUDES
   --------
   - Two-column final card
   - Accent gradients and shadow
   - Responsive heading
   - Action alignment and mobile stacking

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Marketing-profile rules later square the radius slightly and refine the
     final background.
   ========================================================================== */

.product-saas-final {
    padding: 46px 0 clamp(84px, 9vw, 120px);
}

.product-saas-final-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
    overflow: hidden;
    padding: clamp(38px, 5vw, 58px);
    border: 1px solid rgba(238, 152, 38, 0.28);
    border-radius: 25px;
    background:
        radial-gradient(circle at 91% 14%, rgba(246, 191, 63, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(238, 152, 38, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.2);
}

.product-saas-final-card h2 {
    max-width: 780px;
    font-size: clamp(34px, 4.2vw, 54px);
}

.product-saas-final-card p:last-child {
    max-width: 720px;
    margin: 20px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.68;
}

.product-saas-final-card .hero-actions {
    justify-content: flex-end;
}

/* ==========================================================================
   B13. SMTPRS LIVE PREVIEW, API EXAMPLE, AND CONTRACT VISUAL

   PURPOSE
   -------
   Provides the interactive smtpRS preview shell, structured result area, API
   explanation/list, JSON response panel, and API contract illustration.

   INCLUDES
   --------
   - Live preview copy/tool/header/form/result
   - API copy and check list
   - Code response panel and syntax-safe overflow
   - Contract illustration
   - Use-case card height adjustment

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - JavaScript owns validation and result rendering; CSS owns layout/states.
   - The code panel keeps a dark canvas in both themes for syntax contrast.
   ========================================================================== */

.product-saas-demo {
    border-bottom: 1px solid var(--line-soft);
    background:
        radial-gradient(circle at 78% 28%, rgba(238, 152, 38, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.008);
}

.product-saas-demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(520px, 1.24fr);
    gap: clamp(54px, 7vw, 90px);
    align-items: center;
}

.product-saas-demo-copy > p:not(.product-saas-eyebrow) {
    margin: 23px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

.product-saas-demo-tool,
.product-saas-code-panel {
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.23);
    border-radius: 21px;
    background: var(--bg-soft);
    box-shadow: var(--shadow-soft);
}

.product-saas-demo-head,
.product-saas-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
}

.product-saas-demo-head > div span,
.product-saas-demo-head > div strong {
    display: block;
}

.product-saas-demo-head > div span {
    margin-bottom: 3px;
    color: var(--accent-bright);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.product-saas-demo-head > div strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.product-saas-demo-head > small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7ee2ad;
    font-size: 10px;
    font-weight: 750;
}

.product-saas-demo-head > small i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65d89a;
    box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.1);
}

.product-saas-demo-form {
    padding: 24px;
}

.product-saas-demo-form .field input {
    min-height: 54px;
    font-size: 16px;
}

.product-saas-demo-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
}

.product-saas-demo-submit p {
    margin: 0;
}

.smtprs-demo-analysis[hidden] {
    display: none;
}

.smtprs-demo-analysis {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--accent-line);
    border-radius: 12px;
    background:
        radial-gradient(circle at 8% 0%, rgba(238, 152, 38, 0.1), transparent 15rem),
        rgba(255, 255, 255, 0.018);
}

.smtprs-demo-analysis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smtprs-demo-analysis-head > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-bright);
}

.smtprs-demo-analysis-head > span > i {
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    animation: smtprs-demo-analysis-pulse 1.45s ease-in-out infinite;
}

.smtprs-demo-analysis-steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.smtprs-demo-analysis-steps li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
    opacity: 0.38;
    transition: opacity 180ms ease, transform 180ms ease;
}

.smtprs-demo-analysis-steps li.is-active,
.smtprs-demo-analysis-steps li.is-complete {
    opacity: 1;
}

.smtprs-demo-analysis-steps li.is-active {
    transform: translateX(3px);
}

.smtprs-demo-analysis-marker {
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    margin-top: 1px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: transparent;
    background: var(--control-bg);
    font-size: 8px;
}

.smtprs-demo-analysis-marker > i {
    opacity: 0;
}

.smtprs-demo-analysis-steps li.is-active .smtprs-demo-analysis-marker {
    border-color: var(--accent-line);
    color: var(--accent-bright);
    background: var(--accent-soft);
    box-shadow: 0 0 0 4px rgba(238, 152, 38, 0.07);
}

.smtprs-demo-analysis-steps li.is-active .smtprs-demo-analysis-marker::after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    animation: smtprs-demo-analysis-pulse 1.45s ease-in-out infinite;
}

.smtprs-demo-analysis-steps li.is-complete .smtprs-demo-analysis-marker {
    border-color: rgba(101, 213, 140, 0.45);
    color: #65d58c;
    background: rgba(101, 213, 140, 0.1);
}

.smtprs-demo-analysis-steps li.is-complete .smtprs-demo-analysis-marker > i {
    opacity: 1;
}

.smtprs-demo-analysis-steps strong,
.smtprs-demo-analysis-steps small {
    display: block;
}

.smtprs-demo-analysis-steps strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
}

.smtprs-demo-analysis-steps small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

@keyframes smtprs-demo-analysis-pulse {
    0%,
    100% {
        opacity: 0.62;
        box-shadow: 0 0 0 0 rgba(238, 152, 38, 0.26), 0 0 8px currentColor;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(238, 152, 38, 0), 0 0 14px currentColor;
    }
}

.demo-api-upgrade {
    display: grid;
    gap: 18px;
    margin-top: 4px;
    padding: 22px;
    border: 1px solid var(--accent-line);
    border-radius: 12px;
    background:
        radial-gradient(circle at 96% 0%, rgba(238, 152, 38, 0.12), transparent 16rem),
        linear-gradient(145deg, rgba(238, 152, 38, 0.055), rgba(255, 255, 255, 0.015));
}

.demo-api-upgrade-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-api-upgrade h4 {
    max-width: 620px;
    margin: 0;
    color: var(--text);
    font-size: 19px;
    line-height: 1.25;
}

.demo-api-upgrade-copy p {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.65;
}

.demo-api-upgrade-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
}

.demo-api-upgrade-benefits article {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
    padding: 14px;
}

.demo-api-upgrade-benefits article + article {
    border-left: 1px solid var(--line);
}

.demo-api-upgrade-benefits article > i {
    color: var(--accent-bright);
    font-size: 12px;
}

.demo-api-upgrade-benefits strong,
.demo-api-upgrade-benefits small {
    display: block;
}

.demo-api-upgrade-benefits strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
}

.demo-api-upgrade-benefits small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.demo-api-upgrade-capacity {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.5;
}

.demo-api-upgrade-capacity i {
    margin-top: 2px;
    color: var(--accent-bright);
}

.demo-result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.demo-result-actions .btn {
    min-height: 42px;
}

.demo-result-actions .text-link {
    margin-left: 4px;
}

html[data-theme="light"] .smtprs-demo-analysis,
html[data-theme="light"] .demo-api-upgrade {
    background:
        radial-gradient(circle at 96% 0%, rgba(209, 121, 19, 0.11), transparent 16rem),
        rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .demo-api-upgrade-benefits {
    background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 720px) {
    .demo-api-upgrade-benefits {
        grid-template-columns: 1fr;
    }

    .demo-api-upgrade-benefits article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .demo-result-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .demo-result-actions .text-link {
        width: 100%;
        margin: 4px 0 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .smtprs-demo-analysis,
    .demo-api-upgrade {
        padding: 16px;
    }

    .smtprs-demo-analysis-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smtprs-demo-analysis-head > span > i,
    .smtprs-demo-analysis-steps li.is-active .smtprs-demo-analysis-marker::after {
        animation: none;
    }

    .smtprs-demo-analysis-steps li {
        transition: none;
    }
}

.product-saas-demo-result {
    margin: 0 24px 24px;
}

.product-saas-api-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(480px, 1.16fr);
    gap: clamp(54px, 7vw, 92px);
    align-items: center;
}

.product-saas-api-copy > p:not(.product-saas-eyebrow) {
    margin: 23px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

.product-saas-inline-list {
    margin: 28px 0 32px;
}

.product-saas-inline-list li::before {
    content: "✓";
    color: var(--accent-bright);
    font-weight: 900;
}

.product-saas-code-panel {
    background: #090a0d;
}

.product-saas-code-panel--chrome {
    border-color: rgba(238, 152, 38, 0.23);
}

.product-saas-code-panel--chrome > .product-saas-window-head {
    background: #090a0d;
    border-bottom-color: rgba(238, 152, 38, 0.23);
}

.product-saas-code-head {
    color: #dbd7cf;
    font-family: "FiraCode iScript", Consolas, monospace;
    font-size: 10px;
}

.product-saas-code-head small {
    color: #77736b;
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.product-saas-code-panel pre {
    margin: 0;
    padding: 26px 28px 30px;
    overflow-x: auto;
    color: #e8e4dc;
    font-family: "FiraCode iScript", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.7;
}

.product-saas-contract-visual {
    margin-top: 58px;
}

.product-saas-usecase-grid .product-saas-feature-card {
    min-height: 230px;
}


/* ==========================================================================
   B14. WAITLIST HERO, STATUS BAND, MODEL CARDS, AND CONTACT FORM

   PURPOSE
   -------
   Defines the current shared waitlist page: theme-swapped hero art, status
   facts, model/tier cards, and the contact/request-access split.

   INCLUDES
   --------
   - Waitlist hero and theme image swap
   - Three-part status band
   - Model comparison cards and specs
   - Contact note and form card

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The page reuses product typography and section components from B01-B05.
   - Responsive rules in B16 collapse status/model/contact grids.
   ========================================================================== */

.product-saas-waitlist-hero {
    position: relative;
    padding: clamp(74px, 8vw, 108px) 0 78px;
    overflow: hidden;
}

.product-saas-waitlist-hero::before {
    content: "";
    position: absolute;
    width: 760px;
    height: 760px;
    top: -430px;
    left: calc(50% - 690px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 152, 38, 0.2), rgba(238, 152, 38, 0.04) 44%, transparent 72%);
    pointer-events: none;
}

.product-saas-waitlist-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    gap: clamp(48px, 7vw, 88px);
    align-items: center;
}

.product-saas-waitlist-visual {
    margin: 0;
}

.product-saas-waitlist-visual > img {
    max-height: 620px;
    object-fit: cover;
    object-position: center 38%;
}

.product-saas-waitlist-light {
    display: none !important;
}

html[data-theme="light"] .product-saas-waitlist-dark {
    display: none !important;
}

html[data-theme="light"] .product-saas-waitlist-light {
    display: block !important;
}

.product-saas-waitlist-status {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.01);
}

.product-saas-waitlist-status .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-saas-waitlist-status article {
    position: relative;
    padding: 28px 24px 30px;
    border-right: 1px solid var(--line-soft);
}

.product-saas-waitlist-status article:first-child {
    padding-left: 24px;
}

.product-saas-waitlist-status article:last-child {
    padding-right: 24px;
    border-right: 0;
}

.product-saas-waitlist-status span,
.product-saas-waitlist-status strong {
    display: block;
}

.product-saas-waitlist-status span {
    margin-bottom: 20px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.product-saas-waitlist-status strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.product-saas-waitlist-status p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
}

.product-saas-model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.product-saas-model-grid > article {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.016);
}

.product-saas-model-grid > article.is-featured {
    border-color: rgba(238, 152, 38, 0.3);
    background:
        radial-gradient(circle at 90% 8%, rgba(238, 152, 38, 0.1), transparent 34%),
        rgba(238, 152, 38, 0.03);
}

.product-saas-model-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 44px;
}

.product-saas-model-head span,
.product-saas-model-head small {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-saas-model-head span {
    color: var(--accent-bright);
}

.product-saas-model-head small {
    color: var(--muted);
}

.product-saas-model-grid h3 {
    font-size: 28px;
}

.product-saas-model-grid > article > p {
    margin: 15px 0 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.7;
}

.product-saas-model-grid dl {
    display: grid;
    gap: 1px;
    margin: 28px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--line);
}

.product-saas-model-grid dl > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
    padding: 13px 14px;
    background: var(--bg-soft);
}

.product-saas-model-grid dt,
.product-saas-model-grid dd {
    margin: 0;
    font-size: 11px;
}

.product-saas-model-grid dt {
    color: var(--muted);
}

.product-saas-model-grid dd {
    color: var(--text-soft);
    font-weight: 700;
}

.product-saas-waitlist-contact {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(520px, 1.3fr);
    gap: clamp(52px, 7vw, 90px);
    align-items: start;
}

.product-saas-waitlist-contact > div:first-child > p:not(.product-saas-eyebrow) {
    margin: 22px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.7;
}

.product-saas-contact-note {
    margin-top: 30px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.018);
}

.product-saas-contact-note > span,
.product-saas-contact-note > strong,
.product-saas-contact-note > small {
    display: block;
}

.product-saas-contact-note > span {
    color: var(--accent-bright);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.product-saas-contact-note > strong {
    margin-top: 12px;
    color: var(--text);
    font-size: 17px;
}

.product-saas-contact-note p {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.6;
}

.product-saas-contact-note > small {
    margin-top: 16px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}

.product-saas-contact-form {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--bg-soft);
    box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   B15. SHARED PRODUCT LIGHT-THEME OVERRIDES

   PURPOSE
   -------
   Repaints the current product subnav, section backgrounds,
   outcome/step/principle cards, visuals, demo tools, and waitlist components
   for the light theme.

   INCLUDES
   --------
   - Light subnav and section bands
   - Outcome/list card surfaces
   - Light feature/model/contact cards
   - Visual shadows
   - Bare transparent workflow exception

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Marketing-profile light rules in E11 remain later and can further refine
     current pages.
   - Bare workflow visuals intentionally remove border, radius, background,
     and shadow in both themes.
   ========================================================================== */

html[data-theme="light"] .product-saas-subnav {
    background: rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .product-saas-outcomes,
html[data-theme="light"] .product-saas-section--muted,
html[data-theme="light"] .product-saas-section--integration,
html[data-theme="light"] .product-saas-principles,
html[data-theme="light"] .product-saas-roadmap,
html[data-theme="light"] .product-saas-demo,
html[data-theme="light"] .product-saas-waitlist-status {
    background-color: rgba(255, 255, 255, 0.48);
}

html[data-theme="light"] .product-saas-outcome-list {
    background: var(--line);
}

html[data-theme="light"] .product-saas-outcome-list article {
    background: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .product-saas-step-grid,
html[data-theme="light"] .product-saas-principle-grid,
html[data-theme="light"] .product-saas-routing-card,
html[data-theme="light"] .product-saas-demo-tool,
html[data-theme="light"] .product-saas-contact-form,
html[data-theme="light"] .product-saas-model-grid dl > div {
    background-color: rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .product-saas-feature-card,
html[data-theme="light"] .product-saas-roadmap-columns article,
html[data-theme="light"] .product-saas-model-grid > article,
html[data-theme="light"] .product-saas-contact-note {
    background-color: rgba(255, 255, 255, 0.68);
}

html[data-theme="light"] .product-saas-visual,
html[data-theme="light"] .product-saas-workflow-visual,
html[data-theme="light"] .product-saas-evidence-visual,
html[data-theme="light"] .product-saas-contract-visual,
html[data-theme="light"] .product-saas-waitlist-visual {
    box-shadow: 0 28px 86px rgba(77, 53, 18, 0.18);
}

.product-saas-workflow-visual.product-saas-workflow-visual--bare,
html[data-theme="light"] .product-saas-workflow-visual.product-saas-workflow-visual--bare {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.product-saas-workflow-visual.product-saas-workflow-visual--bare > img {
    background: transparent;
}

/* ==========================================================================
   B16. SHARED PRODUCT RESPONSIVE SYSTEM

   PURPOSE
   -------
   Contains the current product-page layout transitions from large tablet
   through phone widths. Hero, outcome, evidence, integration, roadmap, demo,
   waitlist, step, principle, and final-CTA layouts collapse in coordinated
   stages.

   INCLUDES
   --------
   - 1080px major split collapse
   - 900px subnav/principle/roadmap changes
   - 720px phone typography and one-column cards
   - 560px narrow-phone refinements

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Keep these breakpoints in descending order.
   - E12 contains later marketing-profile responsive adjustments and
     therefore remains the final authority where selectors overlap.
   ========================================================================== */

@media (max-width: 1080px) {
    .product-saas-hero-grid,
    .product-saas-outcomes-grid,
    .product-saas-evidence-grid,
    .product-saas-integration-grid,
    .product-saas-roadmap-grid,
    .product-saas-demo-grid,
    .product-saas-api-grid,
    .product-saas-waitlist-grid,
    .product-saas-waitlist-contact {
        grid-template-columns: 1fr;
    }

    .product-saas-hero-copy,
    .product-saas-outcomes-grid > div:first-child,
    .product-saas-evidence-copy,
    .product-saas-integration-grid > div:first-child,
    .product-saas-roadmap-grid > div:first-child,
    .product-saas-demo-copy,
    .product-saas-api-copy,
    .product-saas-waitlist-grid > div:first-child,
    .product-saas-waitlist-contact > div:first-child {
        max-width: 820px;
    }

    .invoiceguard-hero-theme-visual {
        width: min(112%, 920px);
        margin-inline: -6%;
    }

    .product-saas-visual {
        width: min(900px, 100%);
        transform: none;
    }

    .product-saas-evidence-visual,
    .product-saas-routing-card,
    .product-saas-demo-tool,
    .product-saas-code-panel,
    .product-saas-waitlist-visual,
    .product-saas-contact-form {
        width: min(900px, 100%);
    }
}

@media (max-width: 900px) {
    .product-saas-subnav .container {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-saas-subnav .container > div {
        justify-content: safe center;
    }

    .product-saas-subnav strong,
    .product-saas-subnav-cta {
        display: none;
    }

    .product-saas-section-heading--split {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .product-saas-step-grid,
    .product-saas-principle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-saas-step-grid article:nth-child(2),
    .product-saas-principle-grid article:nth-child(2) {
        border-right: 0;
    }

    .product-saas-step-grid article:nth-child(-n + 2),
    .product-saas-principle-grid article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .product-saas-principle-grid article:last-child {
        grid-column: 1 / -1;
    }

    .product-saas-roadmap-columns,
    .product-saas-model-grid {
        grid-template-columns: 1fr;
    }

    .product-saas-waitlist-status .container {
        grid-template-columns: 1fr;
    }

    .product-saas-waitlist-status article,
    .product-saas-waitlist-status article:first-child,
    .product-saas-waitlist-status article:last-child {
        padding: 24px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .product-saas-waitlist-status article:last-child {
        border-bottom: 0;
    }

    .product-saas-final-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .product-saas-final-card .hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .product-saas-page main h1 {
        font-size: clamp(40px, 11vw, 50px);
    }

    .product-saas-page main h2 {
        font-size: clamp(31px, 8.6vw, 40px);
    }

    .product-saas-hero,
    .product-saas-waitlist-hero {
        padding-top: 56px;
    }

    .product-saas-hero-grid,
    .product-saas-waitlist-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 46px;
    }

    .product-saas-lede {
        font-size: 17px;
    }

    .product-saas-window-states {
        grid-template-columns: 1fr;
    }

    .product-saas-window-states article {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .product-saas-window-states article:last-child {
        border-bottom: 0;
    }

    .product-saas-subnav {
        position: static;
    }

    .product-saas-subnav .container {
        display: block;
        min-height: 54px;
    }

    .product-saas-subnav .container > div {
        min-height: 54px;
        justify-content: safe center;
        padding-inline: 4px;
    }

    .product-saas-feature-grid {
        grid-template-columns: 1fr;
    }

    .product-saas-feature-card {
        min-height: 235px;
    }

    .product-saas-step-grid {
        grid-template-columns: 1fr;
    }

    .product-saas-step-grid article,
    .product-saas-step-grid article:nth-child(2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .product-saas-step-grid article:last-child {
        border-bottom: 0;
    }

    .product-saas-step-grid h3 {
        margin-top: 30px;
    }

    .product-saas-principle-grid {
        grid-template-columns: 1fr;
    }

    .product-saas-principle-grid article,
    .product-saas-principle-grid article:nth-child(2),
    .product-saas-principle-grid article:last-child {
        grid-column: auto;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .product-saas-principle-grid article:last-child {
        border-bottom: 0;
    }

    .product-saas-principle-grid h3 {
        margin-top: 28px;
    }

    .product-saas-demo-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .product-saas-demo-submit .btn {
        width: 100%;
    }

    .product-saas-code-panel pre {
        padding: 22px 18px 26px;
        font-size: 10.5px;
    }

    .product-saas-final-card {
        padding: 31px 23px;
    }
}

@media (max-width: 560px) {
    .product-saas-proof {
        display: grid;
    }

    .product-saas-product-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-saas-window-mode {
        display: none;
    }

    .product-saas-outcomes-grid {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .product-saas-feature-card {
        padding: 24px 21px;
    }

    .product-saas-feature-card h3 {
        margin-top: 54px;
    }

    .product-saas-roadmap-columns article,
    .product-saas-model-grid > article,
    .product-saas-contact-form {
        padding: 22px;
    }

    .product-saas-model-grid dl > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ==========================================================================
   B17. PRODUCT INTERACTIONS, STATUS MOTION, AND ACCESSIBILITY

   PURPOSE
   -------
   Collects hover transitions, inset outlines, live/development pulse
   animations, light-theme hover states, and reduced-motion fallbacks for the
   shared product system.

   INCLUDES
   --------
   - Status pulse assignment
   - Card/list/stage transition timing
   - Hover outlines and accent states
   - Live-status keyframes
   - Reduced-motion removal

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Hover effects are limited to hover-capable devices where appropriate.
   - The development keyframe is defined once in A07 and intentionally reused
     here.
   ========================================================================== */

.product-saas-status:not(.product-saas-status--live) i {
    transform-origin: center;
    animation: product-saas-development-status-pulse 2.5s ease-in-out infinite;
}

.product-saas-status--live i,
.product-saas-demo-head > small i {
    transform-origin: center;
    animation: product-saas-live-status-pulse 2.5s ease-in-out infinite;
}

.product-saas-step-grid article,
.product-saas-feature-card,
.product-saas-principle-grid article,
.product-saas-evidence-list article,
.product-saas-roadmap-columns article,
.product-saas-routing-stage,
.product-saas-waitlist-status article,
.product-saas-step-grid article > span,
.product-saas-feature-card > span,
.product-saas-principle-grid article > span,
.product-saas-evidence-list article > span,
.product-saas-routing-stage > span,
.product-saas-waitlist-status article > span {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.product-saas-step-grid article::after,
.product-saas-principle-grid article::after,
.product-saas-evidence-list article::after,
.product-saas-waitlist-status article::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid transparent;
    border-radius: 12px;
    pointer-events: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.product-saas-evidence-list article::after {
    inset: 4px;
}

@media (hover: hover) {
    .product-saas-step-grid article:hover,
    .product-saas-principle-grid article:hover,
    .product-saas-evidence-list article:hover,
    .product-saas-roadmap-columns article:hover,
    .product-saas-routing-stage:hover,
    .product-saas-waitlist-status article:hover {
        background-color: rgba(238, 152, 38, 0.085);
    }

    .product-saas-step-grid article:hover::after,
    .product-saas-principle-grid article:hover::after,
    .product-saas-evidence-list article:hover::after,
    .product-saas-waitlist-status article:hover::after {
        border-color: rgba(246, 191, 63, 0.45);
        box-shadow: 0 0 24px rgba(238, 152, 38, 0.08);
    }

    .product-saas-evidence-list article:hover {
        border-bottom-color: transparent;
    }

    .product-saas-routing-stage:hover {
        border-color: rgba(246, 191, 63, 0.45);
    }

    .product-saas-feature-card:hover {
        border-color: rgba(246, 191, 63, 0.46);
        background-color: rgba(238, 152, 38, 0.1);
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.16);
    }

    .product-saas-roadmap-columns article:hover {
        border-color: rgba(246, 191, 63, 0.46);
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.16);
        transform: translateY(-2px);
    }

    .product-saas-chip-group span:hover {
        color: var(--text);
        border-color: rgba(246, 191, 63, 0.52);
        background-color: rgba(238, 152, 38, 0.13);
        box-shadow: 0 8px 24px rgba(238, 152, 38, 0.12);
        transform: translateY(-1px);
    }

    .product-saas-step-grid article:hover > span,
    .product-saas-feature-card:hover > span,
    .product-saas-principle-grid article:hover > span,
    .product-saas-evidence-list article:hover > span,
    .product-saas-routing-stage:hover > span,
    .product-saas-waitlist-status article:hover > span {
        color: #ffd166;
    }

    .product-saas-routing-stage:hover > span {
        border-color: rgba(246, 191, 63, 0.54);
        background-color: rgba(238, 152, 38, 0.13);
        box-shadow: 0 9px 26px rgba(238, 152, 38, 0.18);
    }
}

html[data-theme="light"] .product-saas-step-grid article:hover,
html[data-theme="light"] .product-saas-principle-grid article:hover,
html[data-theme="light"] .product-saas-evidence-list article:hover,
html[data-theme="light"] .product-saas-roadmap-columns article:hover,
html[data-theme="light"] .product-saas-routing-stage:hover,
html[data-theme="light"] .product-saas-waitlist-status article:hover,
html[data-theme="light"] .product-saas-feature-card:hover {
    background-color: rgba(238, 152, 38, 0.14);
}

@keyframes product-saas-live-status-pulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.1), 0 0 7px rgba(83, 213, 142, 0.24);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 7px rgba(83, 213, 142, 0.025), 0 0 17px rgba(83, 213, 142, 0.72);
    }
}

/* Uses the identical global `product-saas-development-status-pulse` keyframes defined in the core status system. */

@media (prefers-reduced-motion: reduce) {
    .product-saas-feature-card,
    .product-saas-subnav,
    .product-saas-subnav a,
    .product-saas-step-grid article,
    .product-saas-principle-grid article,
    .product-saas-evidence-list article,
    .product-saas-routing-stage,
    .product-saas-waitlist-status article,
    .product-saas-chip-group span {
        transition: none;
    }

    .product-saas-status i,
    .product-saas-demo-head > small i {
        animation: none;
    }
}


/* ==========================================================================
   END OF B. SHARED SAAS PRODUCT-PAGE SYSTEM
   Legacy standalone systems follow. Current product templates should generally
   be changed in Section B first, then in the final marketing overrides in E08.
   ========================================================================== */

/* ==========================================================================
   C. RETAINED STANDALONE PRODUCT SYSTEMS
   Older page-specific systems retained for legacy templates and future audit.

   CURRENT-SITE SAFETY
   -------------------
   Current SaaS product pages use `.product-saas-page` and the shared system in
   Section B. These retained rules use older product-specific component/page
   names and therefore remain dormant on current templates. Generic smtpRS code
   token selectors have been scoped to `.page-smtprs-product` to prevent them
   from leaking into documentation or the current smtpRS product page.
   ========================================================================== */

/* ==========================================================================
   C01. INVOICEGUARD LEGACY STANDALONE SYSTEM

   PURPOSE
   -------
   Retains the older, fully standalone InvoiceGuard page architecture for
   legacy templates and audit history. Current InvoiceGuard SaaS pages use
   Section B plus Section E instead.

   INCLUDES
   --------
   - Legacy page scope and product color variables
   - Centered oversized hero
   - Decision, workflow, controls, verification, development, and final
     sections
   - Theme, responsive, and pulse behavior

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Selectors are scoped by .page-invoiceguard-product and invoiceguard-*
     component names.
   - Do not merge these values into current product-saas components without a
     deliberate template migration.
   ========================================================================== */

/* ==========================================================================
   C01.1. INVOICEGUARD LEGACY SCOPE AND PRODUCT TOKENS

   PURPOSE
   -------
   Defines the standalone page namespace, teal/alert product colors, overflow
   behavior, and heading/paragraph reset.

   INCLUDES
   --------
   - Page-local custom properties
   - Letter-spacing reset
   - Basic heading/paragraph margins

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The page class is the safety boundary that keeps this system dormant on
     current templates.
   ========================================================================== */

.page-invoiceguard-product {
    --invoiceguard-teal: #6fc7bd;
    --invoiceguard-teal-soft: rgba(111, 199, 189, 0.12);
    --invoiceguard-alert: #ec7650;
    --invoiceguard-alert-soft: rgba(236, 118, 80, 0.12);
    background: var(--bg);
    overflow-x: hidden;
}

.page-invoiceguard-product main,
.page-invoiceguard-product main * {
    letter-spacing: 0;
}

.page-invoiceguard-product h1,
.page-invoiceguard-product h2,
.page-invoiceguard-product h3,
.page-invoiceguard-product p {
    margin-top: 0;
}

/* ==========================================================================
   C01.2. INVOICEGUARD LEGACY HERO AND PRIMARY ILLUSTRATION

   PURPOSE
   -------
   Builds the centered legacy hero with status pulse, oversized wordmark-style
   heading, positioning statement, facts, actions, and full-width hero
   illustration.

   INCLUDES
   --------
   - Hero copy/status
   - Large heading and lede
   - Fact row and actions
   - Illustration frame

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The very large desktop heading is intentionally reduced through several
     legacy breakpoints.
   ========================================================================== */

.invoiceguard-hero {
    padding: 130px 0 58px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.invoiceguard-hero-copy {
    max-width: 980px;
    text-align: center;
}

.invoiceguard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.invoiceguard-kicker > span {
    width: 32px;
    height: 1px;
    background: var(--accent);
}

.invoiceguard-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.invoiceguard-status i {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 0 5px rgba(255, 181, 46, 0.1), 0 0 16px rgba(255, 181, 46, 0.55);
    animation: invoiceguardStatusPulse 2.4s ease-in-out infinite;
}

.invoiceguard-status strong {
    color: var(--accent-bright);
    font-weight: 700;
}

.invoiceguard-status span::before {
    margin-right: 12px;
    color: var(--line);
    content: "/";
}

.invoiceguard-hero h1 {
    margin: 20px auto 6px;
    color: var(--text);
    font-size: 6rem;
    line-height: 0.92;
    overflow-wrap: normal;
    text-wrap: balance;
    white-space: nowrap;
}

.invoiceguard-positioning {
    margin: 24px auto 0;
    color: var(--text);
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
}

.invoiceguard-hero-lede {
    max-width: 820px;
    margin: 24px auto 0;
    color: var(--text-soft);
    font-size: 1.08rem;
    line-height: 1.72;
}

.invoiceguard-hero-actions {
    justify-content: center;
    margin-top: 32px;
}

.invoiceguard-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-top: 34px;
    color: var(--muted);
    font-size: 0.86rem;
}

.invoiceguard-facts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.invoiceguard-facts i {
    color: var(--accent-bright);
}

.invoiceguard-illustration {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.46);
    border-radius: 8px;
    background: #08090b;
    box-shadow: var(--shadow-soft);
}

.invoiceguard-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

.invoiceguard-hero-illustration {
    width: min(1320px, calc(100% - 48px));
    margin: 64px auto 0;
}

.invoiceguard-decision-grid,
.invoiceguard-workflow-section > .container,
.invoiceguard-controls-grid,
.invoiceguard-evidence-section > .container,
.invoiceguard-verification-grid,
.invoiceguard-development-grid,
.invoiceguard-final-inner {
    width: min(1320px, calc(100% - 48px));
}

.invoiceguard-decision-band,
.invoiceguard-controls-section,
.invoiceguard-verification-section,
.invoiceguard-development-section {
    border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   C01.3. INVOICEGUARD LEGACY DECISION BAND

   PURPOSE
   -------
   Creates the first split section after the hero and its
   allow/review/escalate-style action bands.

   INCLUDES
   --------
   - Two-column decision layout
   - Shared legacy section heading scale
   - Three action rows with product-specific colors

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Several later legacy sections reuse the heading and body-copy selector
     groups defined here.
   ========================================================================== */

.invoiceguard-decision-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 72px;
    padding: 88px 0;
}

.invoiceguard-decision-grid h2,
.invoiceguard-section-heading h2,
.invoiceguard-controls-heading h2,
.invoiceguard-verification-copy h2,
.invoiceguard-development-grid h2,
.invoiceguard-final-inner h2 {
    margin: 12px 0 0;
    color: var(--text);
    font-size: clamp(2.25rem, 3.5vw, 3.25rem);
    line-height: 1.05;
    text-wrap: balance;
}

.invoiceguard-decision-copy > p,
.invoiceguard-section-heading > p,
.invoiceguard-section-heading-wide > p,
.invoiceguard-controls-heading > p,
.invoiceguard-verification-copy > p,
.invoiceguard-development-grid > div:first-child > p:last-child,
.invoiceguard-final-inner > div:first-child > p:last-child {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.invoiceguard-action-bands {
    display: grid;
    margin-top: 30px;
    border-top: 1px solid var(--line);
}

.invoiceguard-action-bands > span {
    display: grid;
    grid-template-columns: 28px 138px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 60px;
    border-bottom: 1px solid var(--line);
}

.invoiceguard-action-bands i {
    color: var(--invoiceguard-teal);
}

.invoiceguard-action-bands > span:nth-child(2) i {
    color: var(--accent-bright);
}

.invoiceguard-action-bands > span:nth-child(3) i {
    color: var(--invoiceguard-alert);
}

.invoiceguard-action-bands strong {
    color: var(--text);
    font-size: 0.92rem;
}

.invoiceguard-action-bands small {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ==========================================================================
   C01.4. INVOICEGUARD LEGACY WORKFLOW AND EVIDENCE SECTIONS

   PURPOSE
   -------
   Defines the raised workflow/evidence bands, full-width illustrations, and
   four-part workflow notes.

   INCLUDES
   --------
   - Raised section backgrounds
   - Shared section headings
   - Workflow/evidence images
   - Four-column notes strip

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Phone rules collapse the notes strip and remove vertical borders.
   ========================================================================== */

.invoiceguard-workflow-section,
.invoiceguard-evidence-section {
    padding: 96px 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-raised);
}

.invoiceguard-section-heading {
    max-width: none;
}

.invoiceguard-section-heading h2 {
    margin-top: 14px;
}

.invoiceguard-section-heading > p {
    max-width: 560px;
}

.invoiceguard-workflow-illustration,
.invoiceguard-evidence-illustration {
    width: 100%;
    margin-top: 52px;
}

.invoiceguard-workflow-notes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 28px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.invoiceguard-workflow-notes > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
    min-height: 112px;
    padding: 24px;
    border-right: 1px solid var(--line);
}

.invoiceguard-workflow-notes > div:last-child {
    border-right: 0;
}

.invoiceguard-workflow-notes span {
    grid-row: 1 / span 2;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.invoiceguard-workflow-notes strong {
    color: var(--text);
    font-size: 0.94rem;
}

.invoiceguard-workflow-notes small {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ==========================================================================
   C01.5. INVOICEGUARD LEGACY CONTROL LIST

   PURPOSE
   -------
   Builds the controls split and interactive bordered list with numbered rows
   and right-side icons.

   INCLUDES
   --------
   - Controls copy column
   - Numbered control rows
   - Hover accent bar and icon glow

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Hover effects remain purely presentational.
   ========================================================================== */

.invoiceguard-controls-grid,
.invoiceguard-verification-grid,
.invoiceguard-development-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 72px;
    padding: 96px 0;
}

.invoiceguard-controls-heading,
.invoiceguard-verification-copy {
    align-self: start;
}

.invoiceguard-controls-heading > p,
.invoiceguard-verification-copy > p {
    margin-top: 24px;
}

.invoiceguard-controls-heading > .kicker,
.invoiceguard-verification-copy > .kicker {
    color: var(--accent-bright);
}

.invoiceguard-control-list {
    border-top: 1px solid var(--line);
}

.invoiceguard-control-list article {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 36px;
    align-items: start;
    gap: 18px;
    padding: 28px 18px;
    border-bottom: 1px solid var(--line);
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.invoiceguard-control-list article:hover {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

.invoiceguard-control-list article > span {
    padding-top: 5px;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.invoiceguard-control-list h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
    line-height: 1.3;
}

.invoiceguard-control-list p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.invoiceguard-control-list article > i {
    padding-top: 3px;
    color: var(--muted);
    font-size: 1.08rem;
    text-align: right;
    transition: color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.invoiceguard-control-list article:hover > i {
    color: var(--accent-bright);
    filter: drop-shadow(0 0 8px rgba(255, 181, 46, 0.45));
    transform: translateY(-1px) scale(1.08);
}

.invoiceguard-section-heading-wide {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    gap: 72px;
}

.invoiceguard-section-heading-wide > p {
    max-width: 540px;
    justify-self: start;
}

/* ==========================================================================
   C01.6. INVOICEGUARD LEGACY VERIFICATION WORKFLOW

   PURPOSE
   -------
   Creates the verification copy/grid, four-step validation sequence, and large
   verification illustration.

   INCLUDES
   --------
   - Split verification heading
   - Four-step strip
   - Full-width illustration
   - Tablet single-column conversion

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The verification steps move into the copy grid through explicit
     grid-row/column placement.
   ========================================================================== */

.invoiceguard-verification-section {
    background: var(--bg);
}

.invoiceguard-verification-grid {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 52px;
}

.invoiceguard-verification-copy {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    column-gap: 72px;
}

.invoiceguard-verification-copy > .kicker,
.invoiceguard-verification-copy > h2 {
    grid-column: 1;
}

.invoiceguard-verification-copy > .kicker {
    grid-row: 1;
}

.invoiceguard-verification-copy > h2 {
    grid-row: 2;
}

.invoiceguard-verification-copy > p {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
}

.invoiceguard-verification-steps {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 42px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.invoiceguard-verification-steps > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 24px;
    border-right: 1px solid var(--line);
}

.invoiceguard-verification-steps > div:last-child {
    border-right: 0;
}

.invoiceguard-verification-steps span {
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.invoiceguard-verification-steps p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.invoiceguard-verification-steps strong {
    color: var(--text);
}

.invoiceguard-verification-illustration {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

/* ==========================================================================
   C01.7. INVOICEGUARD LEGACY DEVELOPMENT ROADMAP

   PURPOSE
   -------
   Defines the legacy development section and two-column lists for
   current/planned capabilities.

   INCLUDES
   --------
   - Development split
   - Two roadmap columns
   - Accent bullet markers

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This content is retained for old templates and is separate from the
     current product roadmap component.
   ========================================================================== */

.invoiceguard-development-section {
    background: var(--bg-raised);
}

.invoiceguard-development-grid {
    align-items: start;
}

.invoiceguard-development-grid > div:first-child > p:last-child {
    margin-top: 24px;
}

.invoiceguard-development-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.invoiceguard-development-columns > div {
    padding: 26px 30px;
    border-right: 1px solid var(--line);
}

.invoiceguard-development-columns > div:last-child {
    border-right: 0;
}

.invoiceguard-development-columns span {
    color: var(--accent-bright);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.invoiceguard-development-columns ul {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.invoiceguard-development-columns li {
    position: relative;
    padding-left: 17px;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.invoiceguard-development-columns li::before {
    position: absolute;
    top: 0.66em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
}

/* ==========================================================================
   C01.8. INVOICEGUARD LEGACY FINAL CTA

   PURPOSE
   -------
   Builds the legacy closing section with a top accent rule, final positioning
   copy, and right-aligned actions.

   INCLUDES
   --------
   - Final section surface
   - Split final inner layout
   - Action alignment and responsive stack

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Light theme replaces the final background with white.
   ========================================================================== */

.invoiceguard-final-section {
    padding: 112px 0;
    background: var(--bg-soft);
}

.invoiceguard-final-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 60px;
    padding-top: 36px;
    border-top: 1px solid var(--accent-line);
}

.invoiceguard-final-inner > div:first-child {
    max-width: 900px;
}

.invoiceguard-final-inner > div:first-child > p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--text-soft);
    line-height: 1.75;
}

.invoiceguard-final-inner h2 {
    margin: 16px 0 20px;
    font-size: 3rem;
    line-height: 1.04;
}

.invoiceguard-final-inner .hero-actions {
    justify-content: flex-end;
}

/* ==========================================================================
   C01.9. INVOICEGUARD LEGACY LIGHT-THEME OVERRIDES

   PURPOSE
   -------
   Repaints legacy raised sections, final section, and illustration
   shadow/border for light mode.

   INCLUDES
   --------
   - Light section surfaces
   - White final section
   - Warm illustration shadow

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These rules only affect the legacy page namespace/components.
   ========================================================================== */

html[data-theme="light"] .invoiceguard-workflow-section,
html[data-theme="light"] .invoiceguard-evidence-section,
html[data-theme="light"] .invoiceguard-development-section {
    background: var(--bg-soft);
}

html[data-theme="light"] .invoiceguard-final-section {
    background: #fff;
}

html[data-theme="light"] .invoiceguard-illustration {
    border-color: rgba(209, 121, 19, 0.58);
    box-shadow: 0 22px 64px rgba(62, 48, 22, 0.12);
}

/* ==========================================================================
   C01.10. INVOICEGUARD LEGACY RESPONSIVE SYSTEM

   PURPOSE
   -------
   Collapses legacy split layouts and progressively reduces hero typography,
   section widths, workflow notes, development columns, and actions from tablet
   through very narrow phones.

   INCLUDES
   --------
   - 1080px split collapse
   - 760px phone layout
   - 520px and 360px heading reductions

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Breakpoints are tied to the oversized standalone hero and should not be
     copied into current SaaS pages.
   ========================================================================== */

@media (max-width: 1080px) {
    .invoiceguard-hero h1 {
        font-size: 5rem;
    }

    .invoiceguard-decision-grid,
    .invoiceguard-controls-grid,
    .invoiceguard-verification-grid,
    .invoiceguard-development-grid,
    .invoiceguard-section-heading-wide,
    .invoiceguard-final-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .invoiceguard-controls-heading,
    .invoiceguard-development-grid > div:first-child {
        max-width: 760px;
    }

    .invoiceguard-verification-copy {
        display: block;
    }

    .invoiceguard-verification-steps {
        grid-template-columns: 1fr;
        margin-top: 34px;
        border-bottom: 0;
    }

    .invoiceguard-verification-steps > div {
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .invoiceguard-verification-illustration {
        width: 100%;
        max-width: none;
    }

    .invoiceguard-final-inner .hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .invoiceguard-hero {
        padding: 92px 0 38px;
    }

    .invoiceguard-status span {
        flex-basis: 100%;
    }

    .invoiceguard-status span::before {
        display: none;
    }

    .invoiceguard-hero h1 {
        font-size: 3.5rem;
    }

    .invoiceguard-positioning {
        font-size: 1.75rem;
    }

    .invoiceguard-hero-lede {
        font-size: 1rem;
    }

    .invoiceguard-hero-actions,
    .invoiceguard-final-inner .hero-actions {
        align-items: stretch;
    }

    .invoiceguard-hero-actions .btn,
    .invoiceguard-final-inner .btn {
        width: 100%;
        justify-content: center;
    }

    .invoiceguard-hero-illustration {
        width: calc(100% - 30px);
        margin-top: 42px;
        border-radius: 6px;
    }

    .invoiceguard-decision-grid,
    .invoiceguard-controls-grid,
    .invoiceguard-verification-grid,
    .invoiceguard-development-grid {
        gap: 28px;
        padding: 68px 0;
    }

    .invoiceguard-decision-grid,
    .invoiceguard-workflow-section > .container,
    .invoiceguard-controls-grid,
    .invoiceguard-evidence-section > .container,
    .invoiceguard-verification-grid,
    .invoiceguard-development-grid,
    .invoiceguard-final-inner {
        width: calc(100% - 30px);
    }

    .invoiceguard-decision-grid h2,
    .invoiceguard-section-heading h2,
    .invoiceguard-controls-heading h2,
    .invoiceguard-verification-copy h2,
    .invoiceguard-development-grid h2,
    .invoiceguard-final-inner h2 {
        font-size: 2.35rem;
    }

    .invoiceguard-action-bands > span {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 10px 12px;
        padding: 14px 0;
    }

    .invoiceguard-action-bands small {
        grid-column: 2;
    }

    .invoiceguard-workflow-section,
    .invoiceguard-evidence-section {
        padding: 76px 0;
    }

    .invoiceguard-workflow-illustration,
    .invoiceguard-evidence-illustration {
        margin-top: 34px;
        border-radius: 6px;
    }

    .invoiceguard-workflow-notes {
        grid-template-columns: 1fr;
    }

    .invoiceguard-workflow-notes > div {
        min-height: 0;
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .invoiceguard-workflow-notes > div:last-child {
        border-bottom: 0;
    }

    .invoiceguard-control-list article {
        grid-template-columns: 28px minmax(0, 1fr) 24px;
        gap: 12px;
    }

    .invoiceguard-development-columns {
        grid-template-columns: 1fr;
    }

    .invoiceguard-development-columns > div {
        padding: 24px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .invoiceguard-development-columns > div:last-child {
        border-bottom: 0;
    }

    .invoiceguard-final-section {
        padding: 76px 0;
    }
}

@media (max-width: 520px) {
    .invoiceguard-hero h1 {
        font-size: 2.65rem;
    }
}

@media (max-width: 360px) {
    .invoiceguard-hero h1 {
        font-size: 2.35rem;
    }
}

/* ==========================================================================
   C01.11. INVOICEGUARD LEGACY STATUS MOTION

   PURPOSE
   -------
   Defines the gold status pulse and reduced-motion cleanup used in the legacy
   hero and control list.

   INCLUDES
   --------
   - Status pulse keyframes
   - Reduced-motion animation/transition removal

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current product status motion is defined in Sections A07/B17/E10
     instead.
   ========================================================================== */

@keyframes invoiceguardStatusPulse {
    0%,
    100% {
        transform: scale(0.92);
        box-shadow: 0 0 0 2px rgba(255, 181, 46, 0.14), 0 0 12px rgba(255, 181, 46, 0.42);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(255, 181, 46, 0), 0 0 24px rgba(255, 181, 46, 0.74);
    }
}

@media (prefers-reduced-motion: reduce) {
    .invoiceguard-status i {
        animation: none;
    }

    .invoiceguard-control-list article > i {
        transition: none;
    }
}

/* ==========================================================================
   C02. RETAINIQ LEGACY STANDALONE SYSTEM

   PURPOSE
   -------
   Retains the older standalone RetainIQ page architecture. It mirrors the
   legacy InvoiceGuard information structure with RetainIQ-specific selectors
   and product tokens.

   INCLUDES
   --------
   - Legacy hero, decision, workflow, controls, verification, development,
     and final systems
   - RetainIQ-specific status pulse and theme/responsive behavior

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current RetainIQ SaaS templates use Sections B and E.
   - Keep this namespace isolated until legacy templates are formally
     retired.
   ========================================================================== */

/* ==========================================================================
   C02.1. RETAINIQ LEGACY SCOPE AND PRODUCT TOKENS

   PURPOSE
   -------
   Defines the standalone RetainIQ namespace, local teal/alert colors, page
   overflow, and text reset.

   INCLUDES
   --------
   - Page-local variables
   - Letter-spacing reset
   - Heading/paragraph margin reset

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The page class prevents these legacy rules from affecting current
     RetainIQ templates.
   ========================================================================== */

.page-retainiq-product {
    --retainiq-teal: #6fc7bd;
    --retainiq-teal-soft: rgba(111, 199, 189, 0.12);
    --retainiq-alert: #ec7650;
    --retainiq-alert-soft: rgba(236, 118, 80, 0.12);
    background: var(--bg);
    overflow-x: hidden;
}

.page-retainiq-product main,
.page-retainiq-product main * {
    letter-spacing: 0;
}

.page-retainiq-product h1,
.page-retainiq-product h2,
.page-retainiq-product h3,
.page-retainiq-product p {
    margin-top: 0;
}

/* ==========================================================================
   C02.2. RETAINIQ LEGACY HERO AND PRIMARY ILLUSTRATION

   PURPOSE
   -------
   Builds the centered RetainIQ legacy hero, status pulse, oversized title,
   positioning line, actions, facts, and illustration.

   INCLUDES
   --------
   - Hero/status/copy
   - Fact row
   - Illustration frame

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Responsive heading reductions occur in C02.10.
   ========================================================================== */

.retainiq-hero {
    padding: 130px 0 58px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.retainiq-hero-copy {
    max-width: 980px;
    text-align: center;
}

.retainiq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.retainiq-kicker > span {
    width: 32px;
    height: 1px;
    background: var(--accent);
}

.retainiq-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.retainiq-status i {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 0 5px rgba(255, 181, 46, 0.1), 0 0 16px rgba(255, 181, 46, 0.55);
    animation: retainiqStatusPulse 2.4s ease-in-out infinite;
}

.retainiq-status strong {
    color: var(--accent-bright);
    font-weight: 700;
}

.retainiq-status span::before {
    margin-right: 12px;
    color: var(--line);
    content: "/";
}

.retainiq-hero h1 {
    margin: 20px auto 6px;
    color: var(--text);
    font-size: 6rem;
    line-height: 0.92;
    overflow-wrap: normal;
    text-wrap: balance;
    white-space: nowrap;
}

.retainiq-positioning {
    margin: 24px auto 0;
    color: var(--text);
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
}

.retainiq-hero-lede {
    max-width: 820px;
    margin: 24px auto 0;
    color: var(--text-soft);
    font-size: 1.08rem;
    line-height: 1.72;
}

.retainiq-hero-actions {
    justify-content: center;
    margin-top: 32px;
}

.retainiq-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-top: 34px;
    color: var(--muted);
    font-size: 0.86rem;
}

.retainiq-facts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.retainiq-facts i {
    color: var(--accent-bright);
}

.retainiq-illustration {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.46);
    border-radius: 8px;
    background: #08090b;
    box-shadow: var(--shadow-soft);
}

.retainiq-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

.retainiq-hero-illustration {
    width: min(1320px, calc(100% - 48px));
    margin: 64px auto 0;
}

.retainiq-decision-grid,
.retainiq-workflow-section > .container,
.retainiq-controls-grid,
.retainiq-evidence-section > .container,
.retainiq-verification-grid,
.retainiq-development-grid,
.retainiq-final-inner {
    width: min(1320px, calc(100% - 48px));
}

.retainiq-decision-band,
.retainiq-controls-section,
.retainiq-verification-section,
.retainiq-development-section {
    border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   C02.3. RETAINIQ LEGACY DECISION BAND

   PURPOSE
   -------
   Defines the initial split section and three colored action bands for
   RetainIQ decision states.

   INCLUDES
   --------
   - Split decision layout
   - Shared heading/copy selectors
   - Action bands

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This selector group also establishes typography reused by later RetainIQ
     sections.
   ========================================================================== */

.retainiq-decision-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 72px;
    padding: 88px 0;
}

.retainiq-decision-grid h2,
.retainiq-section-heading h2,
.retainiq-controls-heading h2,
.retainiq-verification-copy h2,
.retainiq-development-grid h2,
.retainiq-final-inner h2 {
    margin: 12px 0 0;
    color: var(--text);
    font-size: clamp(2.25rem, 3.5vw, 3.25rem);
    line-height: 1.05;
    text-wrap: balance;
}

.retainiq-decision-copy > p,
.retainiq-section-heading > p,
.retainiq-section-heading-wide > p,
.retainiq-controls-heading > p,
.retainiq-verification-copy > p,
.retainiq-development-grid > div:first-child > p:last-child,
.retainiq-final-inner > div:first-child > p:last-child {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.retainiq-action-bands {
    display: grid;
    margin-top: 30px;
    border-top: 1px solid var(--line);
}

.retainiq-action-bands > span {
    display: grid;
    grid-template-columns: 28px 138px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 60px;
    border-bottom: 1px solid var(--line);
}

.retainiq-action-bands i {
    color: var(--retainiq-teal);
}

.retainiq-action-bands > span:nth-child(2) i {
    color: var(--accent-bright);
}

.retainiq-action-bands > span:nth-child(3) i {
    color: var(--retainiq-alert);
}

.retainiq-action-bands strong {
    color: var(--text);
    font-size: 0.92rem;
}

.retainiq-action-bands small {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ==========================================================================
   C02.4. RETAINIQ LEGACY WORKFLOW AND EVIDENCE SECTIONS

   PURPOSE
   -------
   Styles raised workflow/evidence sections, large illustrations, and the
   four-column explanatory notes strip.

   INCLUDES
   --------
   - Raised section bands
   - Illustrations
   - Workflow notes

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Phone layouts stack the notes and remove right borders.
   ========================================================================== */

.retainiq-workflow-section,
.retainiq-evidence-section {
    padding: 96px 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-raised);
}

.retainiq-section-heading {
    max-width: none;
}

.retainiq-section-heading h2 {
    margin-top: 14px;
}

.retainiq-section-heading > p {
    max-width: 560px;
}

.retainiq-workflow-illustration,
.retainiq-evidence-illustration {
    width: 100%;
    margin-top: 52px;
}

.retainiq-workflow-notes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 28px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.retainiq-workflow-notes > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
    min-height: 112px;
    padding: 24px;
    border-right: 1px solid var(--line);
}

.retainiq-workflow-notes > div:last-child {
    border-right: 0;
}

.retainiq-workflow-notes span {
    grid-row: 1 / span 2;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.retainiq-workflow-notes strong {
    color: var(--text);
    font-size: 0.94rem;
}

.retainiq-workflow-notes small {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ==========================================================================
   C02.5. RETAINIQ LEGACY CONTROL LIST

   PURPOSE
   -------
   Creates the RetainIQ controls split and numbered interactive rows with hover
   accent and icon glow.

   INCLUDES
   --------
   - Controls heading/copy
   - Numbered rows
   - Hover treatment

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Interaction is visual only.
   ========================================================================== */

.retainiq-controls-grid,
.retainiq-verification-grid,
.retainiq-development-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 72px;
    padding: 96px 0;
}

.retainiq-controls-heading,
.retainiq-verification-copy {
    align-self: start;
}

.retainiq-controls-heading > p,
.retainiq-verification-copy > p {
    margin-top: 24px;
}

.retainiq-controls-heading > .kicker,
.retainiq-verification-copy > .kicker {
    color: var(--accent-bright);
}

.retainiq-control-list {
    border-top: 1px solid var(--line);
}

.retainiq-control-list article {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 36px;
    align-items: start;
    gap: 18px;
    padding: 28px 18px;
    border-bottom: 1px solid var(--line);
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.retainiq-control-list article:hover {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

.retainiq-control-list article > span {
    padding-top: 5px;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.retainiq-control-list h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
    line-height: 1.3;
}

.retainiq-control-list p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.retainiq-control-list article > i {
    padding-top: 3px;
    color: var(--muted);
    font-size: 1.08rem;
    text-align: right;
    transition: color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.retainiq-control-list article:hover > i {
    color: var(--accent-bright);
    filter: drop-shadow(0 0 8px rgba(255, 181, 46, 0.45));
    transform: translateY(-1px) scale(1.08);
}

.retainiq-section-heading-wide {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    gap: 72px;
}

.retainiq-section-heading-wide > p {
    max-width: 540px;
    justify-self: start;
}

/* ==========================================================================
   C02.6. RETAINIQ LEGACY VERIFICATION WORKFLOW

   PURPOSE
   -------
   Builds the four-step verification sequence and supporting full-width
   illustration.

   INCLUDES
   --------
   - Split heading/copy
   - Four verification steps
   - Responsive single-column conversion

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Grid placement is explicit and order-sensitive.
   ========================================================================== */

.retainiq-verification-section {
    background: var(--bg);
}

.retainiq-verification-grid {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 52px;
}

.retainiq-verification-copy {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    column-gap: 72px;
}

.retainiq-verification-copy > .kicker,
.retainiq-verification-copy > h2 {
    grid-column: 1;
}

.retainiq-verification-copy > .kicker {
    grid-row: 1;
}

.retainiq-verification-copy > h2 {
    grid-row: 2;
}

.retainiq-verification-copy > p {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
}

.retainiq-verification-steps {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 42px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.retainiq-verification-steps > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 24px;
    border-right: 1px solid var(--line);
}

.retainiq-verification-steps > div:last-child {
    border-right: 0;
}

.retainiq-verification-steps span {
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.retainiq-verification-steps p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.retainiq-verification-steps strong {
    color: var(--text);
}

.retainiq-verification-illustration {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

/* ==========================================================================
   C02.7. RETAINIQ LEGACY DEVELOPMENT ROADMAP

   PURPOSE
   -------
   Defines the RetainIQ legacy development band and two-column current/planned
   capability lists.

   INCLUDES
   --------
   - Development split
   - Roadmap columns
   - Accent bullets

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Separate from the current shared roadmap component in B11.
   ========================================================================== */

.retainiq-development-section {
    background: var(--bg-raised);
}

.retainiq-development-grid {
    align-items: start;
}

.retainiq-development-grid > div:first-child > p:last-child {
    margin-top: 24px;
}

.retainiq-development-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.retainiq-development-columns > div {
    padding: 26px 30px;
    border-right: 1px solid var(--line);
}

.retainiq-development-columns > div:last-child {
    border-right: 0;
}

.retainiq-development-columns span {
    color: var(--accent-bright);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.retainiq-development-columns ul {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.retainiq-development-columns li {
    position: relative;
    padding-left: 17px;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.retainiq-development-columns li::before {
    position: absolute;
    top: 0.66em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
}

/* ==========================================================================
   C02.8. RETAINIQ LEGACY FINAL CTA

   PURPOSE
   -------
   Creates the legacy closing section, accent rule, final copy, and actions.

   INCLUDES
   --------
   - Final surface
   - Split content/actions
   - Responsive stack

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Light mode replaces the final surface with white.
   ========================================================================== */

.retainiq-final-section {
    padding: 112px 0;
    background: var(--bg-soft);
}

.retainiq-final-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 60px;
    padding-top: 36px;
    border-top: 1px solid var(--accent-line);
}

.retainiq-final-inner > div:first-child {
    max-width: 900px;
}

.retainiq-final-inner > div:first-child > p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--text-soft);
    line-height: 1.75;
}

.retainiq-final-inner h2 {
    margin: 16px 0 20px;
    font-size: 3rem;
    line-height: 1.04;
}

.retainiq-final-inner .hero-actions {
    justify-content: flex-end;
}

/* ==========================================================================
   C02.9. RETAINIQ LEGACY LIGHT-THEME OVERRIDES

   PURPOSE
   -------
   Repaints RetainIQ legacy sections and illustration framing for light mode.

   INCLUDES
   --------
   - Light raised sections
   - White final section
   - Warm illustration shadow

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Scoped to legacy RetainIQ components.
   ========================================================================== */

html[data-theme="light"] .retainiq-workflow-section,
html[data-theme="light"] .retainiq-evidence-section,
html[data-theme="light"] .retainiq-development-section {
    background: var(--bg-soft);
}

html[data-theme="light"] .retainiq-final-section {
    background: #fff;
}

html[data-theme="light"] .retainiq-illustration {
    border-color: rgba(209, 121, 19, 0.58);
    box-shadow: 0 22px 64px rgba(62, 48, 22, 0.12);
}

/* ==========================================================================
   C02.10. RETAINIQ LEGACY RESPONSIVE SYSTEM

   PURPOSE
   -------
   Collapses legacy RetainIQ split sections and progressively adjusts hero,
   workflow, controls, verification, development, and actions across tablet and
   phone widths.

   INCLUDES
   --------
   - 1080px split collapse
   - 760px phone conversion
   - 520px and 360px title reductions

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This responsive system belongs only to the legacy template.
   ========================================================================== */

@media (max-width: 1080px) {
    .retainiq-hero h1 {
        font-size: 5rem;
    }

    .retainiq-decision-grid,
    .retainiq-controls-grid,
    .retainiq-verification-grid,
    .retainiq-development-grid,
    .retainiq-section-heading-wide,
    .retainiq-final-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .retainiq-controls-heading,
    .retainiq-development-grid > div:first-child {
        max-width: 760px;
    }

    .retainiq-verification-copy {
        display: block;
    }

    .retainiq-verification-steps {
        grid-template-columns: 1fr;
        margin-top: 34px;
        border-bottom: 0;
    }

    .retainiq-verification-steps > div {
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .retainiq-verification-illustration {
        width: 100%;
        max-width: none;
    }

    .retainiq-final-inner .hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .retainiq-hero {
        padding: 92px 0 38px;
    }

    .retainiq-status span {
        flex-basis: 100%;
    }

    .retainiq-status span::before {
        display: none;
    }

    .retainiq-hero h1 {
        font-size: 3.5rem;
    }

    .retainiq-positioning {
        font-size: 1.75rem;
    }

    .retainiq-hero-lede {
        font-size: 1rem;
    }

    .retainiq-hero-actions,
    .retainiq-final-inner .hero-actions {
        align-items: stretch;
    }

    .retainiq-hero-actions .btn,
    .retainiq-final-inner .btn {
        width: 100%;
        justify-content: center;
    }

    .retainiq-hero-illustration {
        width: calc(100% - 30px);
        margin-top: 42px;
        border-radius: 6px;
    }

    .retainiq-decision-grid,
    .retainiq-controls-grid,
    .retainiq-verification-grid,
    .retainiq-development-grid {
        gap: 28px;
        padding: 68px 0;
    }

    .retainiq-decision-grid,
    .retainiq-workflow-section > .container,
    .retainiq-controls-grid,
    .retainiq-evidence-section > .container,
    .retainiq-verification-grid,
    .retainiq-development-grid,
    .retainiq-final-inner {
        width: calc(100% - 30px);
    }

    .retainiq-decision-grid h2,
    .retainiq-section-heading h2,
    .retainiq-controls-heading h2,
    .retainiq-verification-copy h2,
    .retainiq-development-grid h2,
    .retainiq-final-inner h2 {
        font-size: 2.35rem;
    }

    .retainiq-action-bands > span {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 10px 12px;
        padding: 14px 0;
    }

    .retainiq-action-bands small {
        grid-column: 2;
    }

    .retainiq-workflow-section,
    .retainiq-evidence-section {
        padding: 76px 0;
    }

    .retainiq-workflow-illustration,
    .retainiq-evidence-illustration {
        margin-top: 34px;
        border-radius: 6px;
    }

    .retainiq-workflow-notes {
        grid-template-columns: 1fr;
    }

    .retainiq-workflow-notes > div {
        min-height: 0;
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .retainiq-workflow-notes > div:last-child {
        border-bottom: 0;
    }

    .retainiq-control-list article {
        grid-template-columns: 28px minmax(0, 1fr) 24px;
        gap: 12px;
    }

    .retainiq-development-columns {
        grid-template-columns: 1fr;
    }

    .retainiq-development-columns > div {
        padding: 24px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .retainiq-development-columns > div:last-child {
        border-bottom: 0;
    }

    .retainiq-final-section {
        padding: 76px 0;
    }
}

@media (max-width: 520px) {
    .retainiq-hero h1 {
        font-size: 2.65rem;
    }
}

@media (max-width: 360px) {
    .retainiq-hero h1 {
        font-size: 2.35rem;
    }
}

/* ==========================================================================
   C02.11. RETAINIQ LEGACY STATUS MOTION

   PURPOSE
   -------
   Defines the RetainIQ gold status pulse and reduced-motion fallback.

   INCLUDES
   --------
   - Pulse keyframe
   - Reduced-motion animation and icon-transition removal

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current shared product motion is defined elsewhere.
   ========================================================================== */

@keyframes retainiqStatusPulse {
    0%,
    100% {
        transform: scale(0.92);
        box-shadow: 0 0 0 2px rgba(255, 181, 46, 0.14), 0 0 12px rgba(255, 181, 46, 0.42);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(255, 181, 46, 0), 0 0 24px rgba(255, 181, 46, 0.74);
    }
}

@media (prefers-reduced-motion: reduce) {
    .retainiq-status i {
        animation: none;
    }

    .retainiq-control-list article > i {
        transition: none;
    }
}

/* ==========================================================================
   C03. SMTPRS LEGACY STANDALONE SYSTEM

   PURPOSE
   -------
   Retains the older API-centric smtpRS standalone page with workflow cards,
   operations console, code contract examples, use cases, live preview, and
   final CTA.

   INCLUDES
   --------
   - Product-specific token scope
   - API hero/workflow
   - Operations review console
   - Contract/code samples
   - Use cases and live preview
   - Responsive/readability/motion passes

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Generic code token selectors are scoped by .page-smtprs-product so they
     cannot leak into current docs/product pages.
   - Current smtpRS SaaS templates use Sections B and E.
   ========================================================================== */

/* ==========================================================================
   C03.1. SMTPRS LEGACY SCOPE AND API COLOR TOKENS

   PURPOSE
   -------
   Defines the standalone smtpRS namespace plus green, blue, red, and code
   colors used throughout the legacy API page.

   INCLUDES
   --------
   - Product-local variables
   - Overflow and letter-spacing reset
   - Heading/paragraph margin reset

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The page class is the primary containment boundary for this legacy
     system.
   ========================================================================== */

.page-smtprs-product {
    --smtprs-green: #5cc98a;
    --smtprs-green-soft: rgba(92, 201, 138, 0.12);
    --smtprs-blue: #7bb8d8;
    --smtprs-blue-soft: rgba(123, 184, 216, 0.12);
    --smtprs-red: #e37d75;
    --smtprs-red-soft: rgba(227, 125, 117, 0.12);
    --smtprs-code: #d8e6ec;
    background: var(--bg);
    overflow-x: hidden;
}

.page-smtprs-product main,
.page-smtprs-product main * {
    letter-spacing: 0;
}

.page-smtprs-product h1,
.page-smtprs-product h2,
.page-smtprs-product h3,
.page-smtprs-product p {
    margin-top: 0;
}

/* ==========================================================================
   C03.2. SMTPRS LEGACY API HERO AND THREE-STAGE WORKFLOW

   PURPOSE
   -------
   Builds the centered API hero and the request-analysis-result workflow with
   connector arrows, samples, signal bars, and result values.

   INCLUDES
   --------
   - Hero copy/actions/facts
   - Illustration framing
   - Three workflow cards
   - Request, signal, and result samples
   - Connector arrows

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The workflow converts from horizontal to vertical at the 820px
     breakpoint.
   ========================================================================== */

.smtprs-api-hero {
    padding: 136px 0 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.smtprs-api-hero-copy {
    max-width: 920px;
    text-align: center;
}

.smtprs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.smtprs-kicker span {
    width: 32px;
    height: 1px;
    background: var(--accent);
}

.smtprs-api-hero h1 {
    max-width: 900px;
    margin: 22px auto 24px;
    color: var(--text);
    font-size: 4.6rem;
    line-height: 0.99;
    letter-spacing: 0;
    text-wrap: balance;
}

.smtprs-hero-lede {
    max-width: 750px;
    margin: 0 auto;
    color: var(--text-soft);
    font-size: 1.16rem;
    line-height: 1.7;
}

.smtprs-hero-actions {
    justify-content: center;
    margin-top: 32px;
}

.smtprs-api-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-top: 34px;
    color: var(--muted);
    font-size: 0.82rem;
}

.smtprs-api-facts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.smtprs-api-facts i {
    color: var(--accent-bright);
}

.smtprs-illustration {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.46);
    border-radius: 8px;
    background: #08090b;
    box-shadow: var(--shadow-soft);
}

.smtprs-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

html[data-theme="light"] .smtprs-illustration {
    border-color: rgba(209, 121, 19, 0.58);
    box-shadow: 0 22px 64px rgba(62, 48, 22, 0.12);
}

.smtprs-workflow-illustration {
    margin: 76px auto 56px;
}

.smtprs-decisions-illustration {
    width: 100%;
    margin: 0;
}

.smtprs-contract-illustration {
    width: 100%;
    margin: 52px 0 0;
}

.smtprs-workflow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) 62px minmax(0, 1fr);
    align-items: stretch;
    margin-top: 76px;
    padding-bottom: 56px;
}

.smtprs-workflow-step {
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent-muted);
    border-radius: 8px;
    background: var(--bg-raised);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.17);
}

.smtprs-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.smtprs-step-head > span {
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
}

.smtprs-step-head strong {
    color: var(--text);
    font-size: 0.92rem;
}

.smtprs-request-sample {
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--code-bg);
}

.smtprs-request-sample span {
    display: block;
    margin-bottom: 16px;
    color: var(--smtprs-green);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.smtprs-request-sample code {
    display: block;
    overflow-wrap: anywhere;
    color: var(--smtprs-code);
    font-size: 0.77rem;
    line-height: 1.65;
}

.smtprs-workflow-step > p {
    min-height: 54px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.smtprs-workflow-analysis {
    border-top-color: var(--smtprs-blue);
}

.smtprs-workflow-result {
    border-top-color: var(--smtprs-green);
}

.smtprs-signal-stack {
    display: grid;
    gap: 14px;
    min-height: 126px;
    align-content: center;
    padding: 16px 18px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--code-bg);
}

.smtprs-signal-stack div {
    display: grid;
    gap: 6px;
}

.smtprs-signal-stack span {
    color: var(--muted);
    font-size: 0.69rem;
}

.smtprs-signal-stack i {
    position: relative;
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--line);
}

.smtprs-signal-stack i::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--signal-width);
    content: "";
    background: var(--smtprs-blue);
}

.smtprs-result-sample {
    display: grid;
    gap: 10px;
    min-height: 126px;
    align-content: center;
    padding: 14px 18px;
    border: 1px solid rgba(92, 201, 138, 0.2);
    border-radius: 6px;
    background: var(--smtprs-green-soft);
}

.smtprs-result-sample div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.smtprs-result-sample span {
    color: var(--muted);
    font-size: 0.69rem;
}

.smtprs-result-sample strong {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.73rem;
    text-align: right;
}

.smtprs-flow-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smtprs-flow-arrow span {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--accent-line);
}

.smtprs-flow-arrow span::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--accent-bright);
    border-right: 1px solid var(--accent-bright);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
   C03.3. SMTPRS LEGACY OPERATIONS REVIEW CONSOLE

   PURPOSE
   -------
   Defines the operations section, outcome list, review-console shell,
   table-like rows, decision pills, and console metadata.

   INCLUDES
   --------
   - Operations split
   - Outcome list
   - Review console head/body/footer
   - Allow/review/reject pills

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The review rows become a compact stacked grid on phones.
   ========================================================================== */

.smtprs-operations-section {
    padding: 112px 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}

.smtprs-operations-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.78fr);
    width: min(1400px, calc(100% - 48px));
    gap: 48px;
    align-items: center;
}

.smtprs-operations-copy h2,
.smtprs-section-heading h2,
.smtprs-final-inner h2 {
    margin: 16px 0 20px;
    color: var(--text);
    font-size: 3rem;
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
}

.smtprs-operations-copy > p:not(.kicker),
.smtprs-section-heading > p:not(.kicker),
.smtprs-final-inner > div > p:not(.kicker) {
    color: var(--text-soft);
    line-height: 1.75;
}

.smtprs-outcome-list {
    display: grid;
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid var(--line);
}

.smtprs-outcome-list > div {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.smtprs-outcome-list i {
    margin-top: 3px;
    color: var(--accent-bright);
}

.smtprs-outcome-list span {
    display: grid;
    gap: 4px;
}

.smtprs-outcome-list strong {
    color: var(--text);
    font-size: 0.93rem;
}

.smtprs-outcome-list small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.smtprs-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    color: var(--accent-bright);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.smtprs-text-link:hover {
    color: var(--text);
}

.smtprs-review-console {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-raised);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.2);
}

.smtprs-console-head,
.smtprs-console-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.smtprs-console-head {
    padding: 24px 26px;
    border-bottom: 1px solid var(--line);
}

.smtprs-console-head > div:first-child {
    display: grid;
    gap: 6px;
}

.smtprs-console-head > div:first-child span {
    color: var(--accent-bright);
    font-size: 0.66rem;
    text-transform: uppercase;
}

.smtprs-console-head > div:first-child strong {
    color: var(--text);
    font-size: 1.05rem;
}

.smtprs-console-counts {
    display: flex;
    gap: 18px;
}

.smtprs-console-counts span {
    color: var(--muted);
    font-size: 0.68rem;
}

.smtprs-console-counts strong {
    margin-right: 3px;
    color: var(--text);
    font-size: 0.82rem;
}

.smtprs-review-table {
    padding: 0 26px;
}

.smtprs-review-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) minmax(150px, 1fr) 70px 90px;
    align-items: center;
    gap: 18px;
    min-height: 74px;
    border-bottom: 1px solid var(--line-soft);
}

.smtprs-review-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-soft);
    font-size: 0.76rem;
}

.smtprs-review-row > span:first-child {
    display: grid;
    gap: 5px;
}

.smtprs-review-row > span:first-child strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smtprs-review-row small {
    color: var(--muted);
    font-size: 0.66rem;
}

.smtprs-review-row-head {
    min-height: 42px;
}

.smtprs-review-row-head > span {
    color: var(--muted-2);
    font-size: 0.63rem;
    text-transform: uppercase;
}

.smtprs-decision {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
}

.smtprs-decision.is-allow {
    border-color: rgba(92, 201, 138, 0.28);
    color: var(--smtprs-green);
    background: var(--smtprs-green-soft);
}

.smtprs-decision.is-review {
    border-color: var(--accent-line);
    color: var(--accent-bright);
    background: var(--accent-soft);
}

.smtprs-decision.is-reject {
    border-color: rgba(227, 125, 117, 0.28);
    color: var(--smtprs-red);
    background: var(--smtprs-red-soft);
}

.smtprs-console-foot {
    padding: 18px 26px;
    color: var(--muted);
    font-size: 0.68rem;
}

.smtprs-console-foot span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.smtprs-console-foot strong {
    color: var(--text-soft);
}

/* ==========================================================================
   C03.4. SMTPRS LEGACY API CONTRACT AND CODE PANELS

   PURPOSE
   -------
   Styles the API contract section, request/response code panels, scoped syntax
   tokens, contract notes, and contract illustration.

   INCLUDES
   --------
   - Contract section heading
   - Two-column code grid
   - Request/response panels
   - Scoped code tokens
   - Three-column contract notes

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Do not remove the .page-smtprs-product prefix from code token colors.
   - Code panels retain horizontal overflow for long payloads.
   ========================================================================== */

.smtprs-contract-section,
.smtprs-usecases-section,
.smtprs-final-section {
    padding: 112px 0;
}

.smtprs-contract-section {
    background: var(--bg);
}

.smtprs-section-heading {
    max-width: 760px;
}

.smtprs-section-heading > p:not(.kicker) {
    max-width: 680px;
}

.smtprs-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 52px;
}

.smtprs-code-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent-muted);
    border-radius: 8px;
    background: var(--code-bg);
}

.smtprs-code-response {
    border-top-color: var(--smtprs-green);
}

.smtprs-code-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 52px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
}

.smtprs-code-panel header span {
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 700;
}

.smtprs-code-panel header code {
    color: var(--muted);
    font-size: 0.68rem;
}

.smtprs-code-panel pre {
    min-height: 250px;
    margin: 0;
    padding: 28px 22px;
    overflow-x: auto;
    color: var(--smtprs-code);
    font-size: 0.79rem;
    line-height: 1.8;
}

.page-smtprs-product .code-muted {
    color: var(--smtprs-blue);
}

.page-smtprs-product .code-key {
    color: var(--accent-bright);
}

.page-smtprs-product .code-value {
    color: var(--smtprs-green);
}

.page-smtprs-product .code-number {
    color: #dca8df;
}

.smtprs-contract-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 32px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.smtprs-contract-notes > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    padding: 24px;
    border-right: 1px solid var(--line);
}

.smtprs-contract-notes > div:last-child {
    border-right: 0;
}

.smtprs-contract-notes span {
    grid-row: 1 / span 2;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
}

.smtprs-contract-notes strong {
    color: var(--text);
    font-size: 0.82rem;
}

.smtprs-contract-notes small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

/* ==========================================================================
   C03.5. SMTPRS LEGACY USE-CASE LIST

   PURPOSE
   -------
   Creates the sticky use-case heading and numbered interactive rows used to
   describe signup, lead, vendor, and abuse workflows.

   INCLUDES
   --------
   - Two-column section
   - Sticky heading
   - Numbered list rows
   - Hover accent/icon glow

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The heading becomes static when the layout collapses at 820px.
   ========================================================================== */

.smtprs-usecases-section {
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}

.smtprs-usecases-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.3fr);
    gap: 92px;
    align-items: start;
}

.smtprs-usecases-heading {
    position: sticky;
    top: 120px;
}

.smtprs-usecase-list {
    border-top: 1px solid var(--line);
}

.smtprs-usecase-list article {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 32px;
    gap: 20px;
    align-items: start;
    padding: 30px 18px;
    border-bottom: 1px solid var(--line);
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.smtprs-usecase-list article:hover {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

.smtprs-usecase-list article > span {
    padding-top: 5px;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
}

.smtprs-usecase-list h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 1.2rem;
}

.smtprs-usecase-list p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.65;
}

.smtprs-usecase-list article > i {
    color: var(--muted-2);
    font-size: 1.08rem;
    text-align: right;
    transition:
        color 180ms ease,
        filter 180ms ease,
        transform 180ms ease;
}

.smtprs-usecase-list article:hover > i {
    color: var(--accent-bright);
    filter: drop-shadow(0 0 7px rgba(238, 152, 38, 0.44));
    transform: translateY(-1px) scale(1.08);
}

/* ==========================================================================
   C03.6. SMTPRS LEGACY LIVE PREVIEW

   PURPOSE
   -------
   Builds the legacy live-preview heading, animated status dot, preview tool,
   form, Turnstile/submit row, and result panel.

   INCLUDES
   --------
   - Preview heading and metadata
   - Live pulse/ring
   - Tool header and field
   - Demo submit/result layout

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current live preview styling is also available through the shared B13
     system.
   - JavaScript behavior is external to this CSS.
   ========================================================================== */

.smtprs-demo-section {
    padding: 112px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}

.smtprs-preview-shell {
    position: relative;
}

.smtprs-preview-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
    gap: 80px;
    align-items: end;
}

.smtprs-preview-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.smtprs-preview-kicker span {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62e69b;
    box-shadow:
        0 0 6px rgba(98, 230, 155, 0.95),
        0 0 14px rgba(98, 230, 155, 0.58);
    animation: smtprs-live-dot-glow 2.8s ease-in-out infinite;
}

.smtprs-preview-kicker span::after {
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(98, 230, 155, 0.62);
    border-radius: 50%;
    content: "";
    animation: smtprs-live-dot-ring 2.8s ease-out infinite;
}

.smtprs-preview-heading h2 {
    max-width: 700px;
    margin: 18px 0 0;
    color: var(--text);
    font-size: 3.7rem;
    line-height: 1.02;
    text-wrap: balance;
}

.smtprs-preview-intro > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.96rem;
    line-height: 1.75;
}

.smtprs-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 24px;
    color: var(--muted);
    font-size: 0.74rem;
}

.smtprs-preview-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.smtprs-preview-meta i {
    color: var(--accent-bright);
}

.smtprs-preview-tool {
    margin-top: 52px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent-bright);
    border-radius: 8px;
    background: var(--bg-raised);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}

.smtprs-preview-tool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 78px;
    padding: 18px 34px;
    border-bottom: 1px solid var(--line);
}

.smtprs-preview-tool-head > div {
    display: grid;
    gap: 5px;
}

.smtprs-preview-tool-head span {
    color: var(--accent-bright);
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: none;
}

.smtprs-preview-tool-head strong {
    color: var(--text);
    font-size: 1rem;
}

.smtprs-preview-tool-head > small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 64px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(92, 201, 138, 0.24);
    border-radius: 999px;
    color: var(--smtprs-green);
    background: var(--smtprs-green-soft);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.smtprs-preview-tool-head > small i {
    display: block;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

@keyframes smtprs-live-dot-glow {
    0%,
    100% {
        box-shadow:
            0 0 5px rgba(98, 230, 155, 0.82),
            0 0 11px rgba(98, 230, 155, 0.42);
        transform: scale(0.92);
    }
    50% {
        box-shadow:
            0 0 8px rgba(98, 230, 155, 1),
            0 0 20px rgba(98, 230, 155, 0.72);
        transform: scale(1.08);
    }
}

@keyframes smtprs-live-dot-ring {
    0% {
        opacity: 0.72;
        transform: scale(0.55);
    }
    65%,
    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

.smtprs-demo-section .demo-panel {
    display: grid;
    gap: 24px;
    padding: 36px 34px 38px;
}

.smtprs-demo-section .demo-form {
    display: grid;
    gap: 24px;
}

.smtprs-preview-field > span {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.smtprs-preview-field input {
    min-height: 66px;
    padding-right: 22px;
    padding-left: 22px;
    border-color: var(--accent-line);
    border-radius: 6px;
    font-size: 1.05rem;
}

.smtprs-preview-field input:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.smtprs-demo-section .demo-submit-row {
    grid-template-columns: minmax(300px, 1fr) max-content;
    justify-content: stretch;
}

.smtprs-demo-section .demo-submit-row .btn {
    min-height: 56px;
    padding-right: 30px;
    padding-left: 30px;
    font-size: 0.82rem;
}

.smtprs-demo-section .demo-result {
    padding: 26px;
    border-color: var(--accent-line);
    background: var(--bg-soft);
}

html[data-theme="light"] .smtprs-preview-tool {
    box-shadow: 0 24px 70px rgba(62, 48, 22, 0.1);
}

/* ==========================================================================
   C03.7. SMTPRS LEGACY FINAL CTA AND LIGHT-THEME TOKEN

   PURPOSE
   -------
   Defines the legacy closing CTA plus the light-theme adjustment to the smtpRS
   code color and panel shadows.

   INCLUDES
   --------
   - Final split/action layout
   - Light code token override
   - Light workflow/console shadows

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Responsive stacking is defined in C03.8.
   ========================================================================== */

.smtprs-final-section {
    background: var(--bg-soft);
}

.smtprs-final-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: end;
    padding-top: 36px;
    border-top: 1px solid var(--accent-line);
}

.smtprs-final-inner > div:first-child {
    max-width: 720px;
}

.smtprs-final-inner .hero-actions {
    justify-content: flex-end;
}

html[data-theme="light"] .page-smtprs-product {
    --smtprs-code: #263039;
}

html[data-theme="light"] .smtprs-workflow-step,
html[data-theme="light"] .smtprs-review-console {
    box-shadow: 0 24px 60px rgba(62, 48, 22, 0.08);
}

/* ==========================================================================
   C03.8. SMTPRS LEGACY RESPONSIVE SYSTEM

   PURPOSE
   -------
   Progressively collapses the legacy workflow, operations, code, use-case,
   preview, review-console, and final layouts from desktop through narrow
   phones.

   INCLUDES
   --------
   - 1080px workflow/operations tuning
   - 820px major layout collapse
   - 680px phone form/table conversion
   - 430px narrow-phone code/header tuning

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Keep breakpoint order intact because later stages refine earlier
     layouts.
   ========================================================================== */

@media (max-width: 1080px) {
    .smtprs-api-hero h1 {
        font-size: 3.8rem;
    }

    .smtprs-workflow {
        grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
    }

    .smtprs-workflow-step {
        padding: 20px;
    }

    .smtprs-operations-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .smtprs-operations-copy {
        max-width: 680px;
    }

    .smtprs-review-row {
        grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) 70px 88px;
    }

    .smtprs-usecases-grid {
        gap: 60px;
    }
}

@media (max-width: 820px) {
    .smtprs-api-hero {
        padding-top: 104px;
    }

    .smtprs-api-hero h1 {
        font-size: 3.15rem;
    }

    .smtprs-workflow {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 620px;
    }

    .smtprs-flow-arrow {
        min-height: 42px;
    }

    .smtprs-flow-arrow span {
        width: 1px;
        height: 100%;
    }

    .smtprs-flow-arrow span::after {
        top: auto;
        right: 50%;
        bottom: 0;
        transform: translateX(50%) rotate(135deg);
    }

    .smtprs-workflow-step > p {
        min-height: 0;
    }

    .smtprs-preview-heading {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .smtprs-preview-heading h2 {
        font-size: 3rem;
    }

    .smtprs-preview-intro {
        max-width: 680px;
    }

    .smtprs-code-grid,
    .smtprs-usecases-grid,
    .smtprs-final-inner {
        grid-template-columns: 1fr;
    }

    .smtprs-code-panel pre {
        min-height: 0;
    }

    .smtprs-contract-notes {
        grid-template-columns: 1fr;
    }

    .smtprs-contract-notes > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .smtprs-contract-notes > div:last-child {
        border-bottom: 0;
    }

    .smtprs-usecases-heading {
        position: static;
    }

    .smtprs-final-inner {
        align-items: start;
    }

    .smtprs-final-inner .hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .smtprs-api-hero {
        padding-top: 78px;
    }

    .smtprs-api-hero h1 {
        font-size: 2.55rem;
        line-height: 1.02;
    }

    .smtprs-hero-lede {
        font-size: 1rem;
    }

    .smtprs-hero-actions,
    .smtprs-final-inner .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .smtprs-hero-actions .btn,
    .smtprs-final-inner .btn {
        width: 100%;
        justify-content: center;
    }

    .smtprs-api-facts {
        display: grid;
        justify-content: start;
        max-width: 300px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .smtprs-operations-section,
    .smtprs-contract-section,
    .smtprs-usecases-section,
    .smtprs-demo-section,
    .smtprs-final-section {
        padding: 84px 0;
    }

    .smtprs-operations-copy h2,
    .smtprs-section-heading h2,
    .smtprs-final-inner h2 {
        font-size: 2.3rem;
    }

    .smtprs-preview-heading h2 {
        font-size: 2.55rem;
    }

    .smtprs-preview-tool {
        margin-top: 38px;
    }

    .smtprs-preview-tool-head {
        padding-right: 20px;
        padding-left: 20px;
    }

    .smtprs-demo-section .demo-panel {
        padding: 28px 20px 30px;
    }

    .smtprs-demo-section .demo-submit-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "status"
            "turnstile"
            "submit";
    }

    .smtprs-demo-section .demo-submit-row .btn {
        width: 100%;
        justify-content: center;
    }

    .smtprs-demo-section .demo-submit-row .turnstile-slot {
        justify-content: flex-start;
    }

    .smtprs-console-head,
    .smtprs-console-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .smtprs-review-console {
        overflow: hidden;
    }

    .smtprs-review-table {
        padding: 0 18px;
    }

    .smtprs-console-head,
    .smtprs-console-foot {
        min-width: 0;
        padding-right: 18px;
        padding-left: 18px;
    }

    .smtprs-console-counts {
        flex-wrap: wrap;
    }

    .smtprs-review-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px 14px;
        min-height: 0;
        padding: 18px 0;
    }

    .smtprs-review-row > span:first-child {
        grid-column: 1 / -1;
    }

    .smtprs-review-row > span:nth-child(3),
    .smtprs-review-row > span:nth-child(4) {
        text-align: right;
    }

    .smtprs-review-row-head {
        display: none;
    }

    .smtprs-code-panel pre {
        font-size: 0.7rem;
    }

    .smtprs-usecase-list article {
        grid-template-columns: 30px minmax(0, 1fr) 24px;
        gap: 14px;
    }
}

@media (max-width: 430px) {
    .smtprs-api-hero h1 {
        font-size: 2.18rem;
    }

    .smtprs-workflow-step {
        padding: 18px;
    }

    .smtprs-operations-copy h2,
    .smtprs-section-heading h2,
    .smtprs-final-inner h2 {
        font-size: 2rem;
    }

    .smtprs-preview-heading h2 {
        font-size: 2.15rem;
    }

    .smtprs-preview-tool-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .smtprs-code-panel header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .smtprs-code-panel pre {
        padding: 22px 16px;
        font-size: 0.64rem;
    }
}

/* ==========================================================================
   C03.9. SMTPRS LEGACY MOTION ACCESSIBILITY

   PURPOSE
   -------
   Removes use-case transitions and preview-dot animations when the operating
   system requests reduced motion.

   INCLUDES
   --------
   - Transition removal
   - Static preview dot/ring

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The static ring retains visibility without pulsing.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .smtprs-usecase-list article,
    .smtprs-usecase-list article > i {
        transition: none;
    }

    .smtprs-preview-kicker span,
    .smtprs-preview-kicker span::after {
        animation: none;
    }

    .smtprs-preview-kicker span::after {
        opacity: 0.45;
        transform: none;
    }
}

/* ==========================================================================
   C03.10. SMTPRS LEGACY READABILITY OVERRIDES

   PURPOSE
   -------
   Applies the final, intentionally late font-size corrections for legacy API
   facts, samples, console rows, code panels, use cases, and preview metadata.

   INCLUDES
   --------
   - Micro metadata sizes
   - Workflow/sample sizes
   - Console/code sizes
   - Use-case and preview copy

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This block is late so it wins over earlier compact values.
   - Do not move it beside the original declarations without merging and
     retesting the full legacy page.
   ========================================================================== */
.smtprs-api-facts {
    font-size: 0.9rem;
}

.smtprs-step-head > span,
.smtprs-request-sample span,
.smtprs-code-panel header span,
.smtprs-contract-notes span,
.smtprs-contract-notes small,
.smtprs-usecase-list article > span,
.smtprs-preview-meta,
.smtprs-preview-tool-head span,
.smtprs-preview-tool-head > small {
    font-size: 0.8rem;
}

.smtprs-step-head strong {
    font-size: 1.02rem;
}

.smtprs-request-sample code,
.smtprs-signal-stack span,
.smtprs-result-sample span,
.smtprs-result-sample strong,
.smtprs-code-panel header code,
.smtprs-review-row small,
.smtprs-review-row-head > span,
.smtprs-decision,
.smtprs-console-foot,
.smtprs-console-head > div:first-child span,
.smtprs-console-counts span {
    font-size: 0.78rem;
}

.smtprs-workflow-step > p,
.smtprs-outcome-list small,
.smtprs-text-link,
.smtprs-console-counts strong,
.smtprs-review-row > span,
.smtprs-review-row > span:first-child strong,
.smtprs-code-panel pre,
.smtprs-contract-notes strong,
.smtprs-preview-field > span,
.smtprs-demo-section .demo-submit-row .btn {
    font-size: 0.9rem;
}

.smtprs-outcome-list strong,
.smtprs-console-head > div:first-child strong,
.smtprs-preview-tool-head strong {
    font-size: 1.05rem;
}

.smtprs-usecase-list p {
    font-size: 0.94rem;
}

.smtprs-preview-intro > p {
    font-size: 1rem;
}

/* ==========================================================================
   C04. VENDORLENS LEGACY STANDALONE SYSTEM

   PURPOSE
   -------
   Retains the older standalone VendorLens page architecture for legacy
   templates and audit history. Its structure mirrors the InvoiceGuard/RetainIQ
   legacy systems with VendorLens-specific selectors.

   INCLUDES
   --------
   - Legacy hero, decision, workflow, controls, verification, development,
     and final systems
   - VendorLens-specific status pulse, theme, and responsive behavior

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current VendorLens SaaS templates use Sections B and E.
   - Keep this namespace isolated until old templates are retired.
   ========================================================================== */

/* ==========================================================================
   C04.1. VENDORLENS LEGACY SCOPE AND PRODUCT TOKENS

   PURPOSE
   -------
   Defines the standalone VendorLens namespace, local teal/alert colors,
   overflow, and text reset.

   INCLUDES
   --------
   - Page-local variables
   - Letter-spacing reset
   - Heading/paragraph margin reset

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The page class prevents leakage into current VendorLens templates.
   ========================================================================== */

.page-vendorlens-product {
    --vendorlens-teal: #6fc7bd;
    --vendorlens-teal-soft: rgba(111, 199, 189, 0.12);
    --vendorlens-alert: #ec7650;
    --vendorlens-alert-soft: rgba(236, 118, 80, 0.12);
    background: var(--bg);
    overflow-x: hidden;
}

.page-vendorlens-product main,
.page-vendorlens-product main * {
    letter-spacing: 0;
}

.page-vendorlens-product h1,
.page-vendorlens-product h2,
.page-vendorlens-product h3,
.page-vendorlens-product p {
    margin-top: 0;
}

/* ==========================================================================
   C04.2. VENDORLENS LEGACY HERO AND PRIMARY ILLUSTRATION

   PURPOSE
   -------
   Builds the centered legacy hero, status pulse, oversized heading,
   positioning line, actions, facts, and illustration.

   INCLUDES
   --------
   - Hero/status/copy
   - Fact row
   - Illustration frame

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Responsive title reductions occur in C04.10.
   ========================================================================== */

.vendorlens-hero {
    padding: 130px 0 58px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.vendorlens-hero-copy {
    max-width: 980px;
    text-align: center;
}

.vendorlens-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.vendorlens-kicker > span {
    width: 32px;
    height: 1px;
    background: var(--accent);
}

.vendorlens-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.vendorlens-status i {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 0 5px rgba(255, 181, 46, 0.1), 0 0 16px rgba(255, 181, 46, 0.55);
    animation: vendorlensStatusPulse 2.4s ease-in-out infinite;
}

.vendorlens-status strong {
    color: var(--accent-bright);
    font-weight: 700;
}

.vendorlens-status span::before {
    margin-right: 12px;
    color: var(--line);
    content: "/";
}

.vendorlens-hero h1 {
    margin: 20px auto 6px;
    color: var(--text);
    font-size: 6rem;
    line-height: 0.92;
    overflow-wrap: normal;
    text-wrap: balance;
    white-space: nowrap;
}

.vendorlens-positioning {
    margin: 24px auto 0;
    color: var(--text);
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
}

.vendorlens-hero-lede {
    max-width: 820px;
    margin: 24px auto 0;
    color: var(--text-soft);
    font-size: 1.08rem;
    line-height: 1.72;
}

.vendorlens-hero-actions {
    justify-content: center;
    margin-top: 32px;
}

.vendorlens-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-top: 34px;
    color: var(--muted);
    font-size: 0.86rem;
}

.vendorlens-facts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vendorlens-facts i {
    color: var(--accent-bright);
}

.vendorlens-illustration {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.46);
    border-radius: 8px;
    background: #08090b;
    box-shadow: var(--shadow-soft);
}

.vendorlens-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

.vendorlens-hero-illustration {
    width: min(1320px, calc(100% - 48px));
    margin: 64px auto 0;
}

.vendorlens-decision-grid,
.vendorlens-workflow-section > .container,
.vendorlens-controls-grid,
.vendorlens-evidence-section > .container,
.vendorlens-verification-grid,
.vendorlens-development-grid,
.vendorlens-final-inner {
    width: min(1320px, calc(100% - 48px));
}

.vendorlens-decision-band,
.vendorlens-controls-section,
.vendorlens-verification-section,
.vendorlens-development-section {
    border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   C04.3. VENDORLENS LEGACY DECISION BAND

   PURPOSE
   -------
   Defines the initial split section and its three colored action bands.

   INCLUDES
   --------
   - Decision layout
   - Shared heading/body selectors
   - Action rows

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Typography defined here is reused by later legacy VendorLens sections.
   ========================================================================== */

.vendorlens-decision-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 72px;
    padding: 88px 0;
}

.vendorlens-decision-grid h2,
.vendorlens-section-heading h2,
.vendorlens-controls-heading h2,
.vendorlens-verification-copy h2,
.vendorlens-development-grid h2,
.vendorlens-final-inner h2 {
    margin: 12px 0 0;
    color: var(--text);
    font-size: clamp(2.25rem, 3.5vw, 3.25rem);
    line-height: 1.05;
    text-wrap: balance;
}

.vendorlens-decision-copy > p,
.vendorlens-section-heading > p,
.vendorlens-section-heading-wide > p,
.vendorlens-controls-heading > p,
.vendorlens-verification-copy > p,
.vendorlens-development-grid > div:first-child > p:last-child,
.vendorlens-final-inner > div:first-child > p:last-child {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.vendorlens-action-bands {
    display: grid;
    margin-top: 30px;
    border-top: 1px solid var(--line);
}

.vendorlens-action-bands > span {
    display: grid;
    grid-template-columns: 28px 138px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 60px;
    border-bottom: 1px solid var(--line);
}

.vendorlens-action-bands i {
    color: var(--vendorlens-teal);
}

.vendorlens-action-bands > span:nth-child(2) i {
    color: var(--accent-bright);
}

.vendorlens-action-bands > span:nth-child(3) i {
    color: var(--vendorlens-alert);
}

.vendorlens-action-bands strong {
    color: var(--text);
    font-size: 0.92rem;
}

.vendorlens-action-bands small {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ==========================================================================
   C04.4. VENDORLENS LEGACY WORKFLOW AND EVIDENCE SECTIONS

   PURPOSE
   -------
   Styles the raised workflow/evidence bands, full-width illustrations, and
   four-column notes strip.

   INCLUDES
   --------
   - Section backgrounds
   - Illustrations
   - Workflow notes

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Phone rules stack the notes and remove vertical separators.
   ========================================================================== */

.vendorlens-workflow-section,
.vendorlens-evidence-section {
    padding: 96px 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-raised);
}

.vendorlens-section-heading {
    max-width: none;
}

.vendorlens-section-heading h2 {
    margin-top: 14px;
}

.vendorlens-section-heading > p {
    max-width: 560px;
}

.vendorlens-workflow-illustration,
.vendorlens-evidence-illustration {
    width: 100%;
    margin-top: 52px;
}

.vendorlens-workflow-notes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 28px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.vendorlens-workflow-notes > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
    min-height: 112px;
    padding: 24px;
    border-right: 1px solid var(--line);
}

.vendorlens-workflow-notes > div:last-child {
    border-right: 0;
}

.vendorlens-workflow-notes span {
    grid-row: 1 / span 2;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.vendorlens-workflow-notes strong {
    color: var(--text);
    font-size: 0.94rem;
}

.vendorlens-workflow-notes small {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ==========================================================================
   C04.5. VENDORLENS LEGACY CONTROL LIST

   PURPOSE
   -------
   Creates the controls split and numbered interactive rows with hover accent
   and icon glow.

   INCLUDES
   --------
   - Control copy
   - Numbered rows
   - Hover treatment

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Interaction is presentational only.
   ========================================================================== */

.vendorlens-controls-grid,
.vendorlens-verification-grid,
.vendorlens-development-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 72px;
    padding: 96px 0;
}

.vendorlens-controls-heading,
.vendorlens-verification-copy {
    align-self: start;
}

.vendorlens-controls-heading > p,
.vendorlens-verification-copy > p {
    margin-top: 24px;
}

.vendorlens-controls-heading > .kicker,
.vendorlens-verification-copy > .kicker {
    color: var(--accent-bright);
}

.vendorlens-control-list {
    border-top: 1px solid var(--line);
}

.vendorlens-control-list article {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 36px;
    align-items: start;
    gap: 18px;
    padding: 28px 18px;
    border-bottom: 1px solid var(--line);
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.vendorlens-control-list article:hover {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

.vendorlens-control-list article > span {
    padding-top: 5px;
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.vendorlens-control-list h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
    line-height: 1.3;
}

.vendorlens-control-list p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.vendorlens-control-list article > i {
    padding-top: 3px;
    color: var(--muted);
    font-size: 1.08rem;
    text-align: right;
    transition: color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.vendorlens-control-list article:hover > i {
    color: var(--accent-bright);
    filter: drop-shadow(0 0 8px rgba(255, 181, 46, 0.45));
    transform: translateY(-1px) scale(1.08);
}

.vendorlens-section-heading-wide {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    gap: 72px;
}

.vendorlens-section-heading-wide > p {
    max-width: 540px;
    justify-self: start;
}

/* ==========================================================================
   C04.6. VENDORLENS LEGACY VERIFICATION WORKFLOW

   PURPOSE
   -------
   Builds the four-step verification sequence and supporting large
   illustration.

   INCLUDES
   --------
   - Split heading/copy
   - Verification steps
   - Responsive collapse

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Explicit grid placement is source-order sensitive.
   ========================================================================== */

.vendorlens-verification-section {
    background: var(--bg);
}

.vendorlens-verification-grid {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 52px;
}

.vendorlens-verification-copy {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    column-gap: 72px;
}

.vendorlens-verification-copy > .kicker,
.vendorlens-verification-copy > h2 {
    grid-column: 1;
}

.vendorlens-verification-copy > .kicker {
    grid-row: 1;
}

.vendorlens-verification-copy > h2 {
    grid-row: 2;
}

.vendorlens-verification-copy > p {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
}

.vendorlens-verification-steps {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 42px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.vendorlens-verification-steps > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 24px;
    border-right: 1px solid var(--line);
}

.vendorlens-verification-steps > div:last-child {
    border-right: 0;
}

.vendorlens-verification-steps span {
    color: var(--accent-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.vendorlens-verification-steps p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.vendorlens-verification-steps strong {
    color: var(--text);
}

.vendorlens-verification-illustration {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

/* ==========================================================================
   C04.7. VENDORLENS LEGACY DEVELOPMENT ROADMAP

   PURPOSE
   -------
   Defines the development band and current/planned capability columns.

   INCLUDES
   --------
   - Development split
   - Roadmap columns
   - Accent bullets

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Separate from the current B11 roadmap component.
   ========================================================================== */

.vendorlens-development-section {
    background: var(--bg-raised);
}

.vendorlens-development-grid {
    align-items: start;
}

.vendorlens-development-grid > div:first-child > p:last-child {
    margin-top: 24px;
}

.vendorlens-development-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.vendorlens-development-columns > div {
    padding: 26px 30px;
    border-right: 1px solid var(--line);
}

.vendorlens-development-columns > div:last-child {
    border-right: 0;
}

.vendorlens-development-columns span {
    color: var(--accent-bright);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.vendorlens-development-columns ul {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.vendorlens-development-columns li {
    position: relative;
    padding-left: 17px;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.vendorlens-development-columns li::before {
    position: absolute;
    top: 0.66em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
}

/* ==========================================================================
   C04.8. VENDORLENS LEGACY FINAL CTA

   PURPOSE
   -------
   Creates the closing section, accent divider, final copy, and actions.

   INCLUDES
   --------
   - Final surface
   - Split layout
   - Responsive action stack

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Light mode changes the final surface to white.
   ========================================================================== */

.vendorlens-final-section {
    padding: 112px 0;
    background: var(--bg-soft);
}

.vendorlens-final-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 60px;
    padding-top: 36px;
    border-top: 1px solid var(--accent-line);
}

.vendorlens-final-inner > div:first-child {
    max-width: 900px;
}

.vendorlens-final-inner > div:first-child > p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--text-soft);
    line-height: 1.75;
}

.vendorlens-final-inner h2 {
    margin: 16px 0 20px;
    font-size: 3rem;
    line-height: 1.04;
}

.vendorlens-final-inner .hero-actions {
    justify-content: flex-end;
}

/* ==========================================================================
   C04.9. VENDORLENS LEGACY LIGHT-THEME OVERRIDES

   PURPOSE
   -------
   Repaints raised legacy sections and illustration framing for light mode.

   INCLUDES
   --------
   - Light section surfaces
   - White final section
   - Warm illustration shadow

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Scoped to legacy VendorLens components.
   ========================================================================== */

html[data-theme="light"] .vendorlens-workflow-section,
html[data-theme="light"] .vendorlens-evidence-section,
html[data-theme="light"] .vendorlens-development-section {
    background: var(--bg-soft);
}

html[data-theme="light"] .vendorlens-final-section {
    background: #fff;
}

html[data-theme="light"] .vendorlens-illustration {
    border-color: rgba(209, 121, 19, 0.58);
    box-shadow: 0 22px 64px rgba(62, 48, 22, 0.12);
}

/* ==========================================================================
   C04.10. VENDORLENS LEGACY RESPONSIVE SYSTEM

   PURPOSE
   -------
   Collapses legacy split sections and adjusts hero, workflow, controls,
   verification, development, and final actions across tablet and phone widths.

   INCLUDES
   --------
   - 1080px split collapse
   - 760px phone conversion
   - 520px and 360px title reductions

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Applies only to the legacy template.
   ========================================================================== */

@media (max-width: 1080px) {
    .vendorlens-hero h1 {
        font-size: 5rem;
    }

    .vendorlens-decision-grid,
    .vendorlens-controls-grid,
    .vendorlens-verification-grid,
    .vendorlens-development-grid,
    .vendorlens-section-heading-wide,
    .vendorlens-final-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .vendorlens-controls-heading,
    .vendorlens-development-grid > div:first-child {
        max-width: 760px;
    }

    .vendorlens-verification-copy {
        display: block;
    }

    .vendorlens-verification-steps {
        grid-template-columns: 1fr;
        margin-top: 34px;
        border-bottom: 0;
    }

    .vendorlens-verification-steps > div {
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .vendorlens-verification-illustration {
        width: 100%;
        max-width: none;
    }

    .vendorlens-final-inner .hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .vendorlens-hero {
        padding: 92px 0 38px;
    }

    .vendorlens-status span {
        flex-basis: 100%;
    }

    .vendorlens-status span::before {
        display: none;
    }

    .vendorlens-hero h1 {
        font-size: 3.5rem;
    }

    .vendorlens-positioning {
        font-size: 1.75rem;
    }

    .vendorlens-hero-lede {
        font-size: 1rem;
    }

    .vendorlens-hero-actions,
    .vendorlens-final-inner .hero-actions {
        align-items: stretch;
    }

    .vendorlens-hero-actions .btn,
    .vendorlens-final-inner .btn {
        width: 100%;
        justify-content: center;
    }

    .vendorlens-hero-illustration {
        width: calc(100% - 30px);
        margin-top: 42px;
        border-radius: 6px;
    }

    .vendorlens-decision-grid,
    .vendorlens-controls-grid,
    .vendorlens-verification-grid,
    .vendorlens-development-grid {
        gap: 28px;
        padding: 68px 0;
    }

    .vendorlens-decision-grid,
    .vendorlens-workflow-section > .container,
    .vendorlens-controls-grid,
    .vendorlens-evidence-section > .container,
    .vendorlens-verification-grid,
    .vendorlens-development-grid,
    .vendorlens-final-inner {
        width: calc(100% - 30px);
    }

    .vendorlens-decision-grid h2,
    .vendorlens-section-heading h2,
    .vendorlens-controls-heading h2,
    .vendorlens-verification-copy h2,
    .vendorlens-development-grid h2,
    .vendorlens-final-inner h2 {
        font-size: 2.35rem;
    }

    .vendorlens-action-bands > span {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 10px 12px;
        padding: 14px 0;
    }

    .vendorlens-action-bands small {
        grid-column: 2;
    }

    .vendorlens-workflow-section,
    .vendorlens-evidence-section {
        padding: 76px 0;
    }

    .vendorlens-workflow-illustration,
    .vendorlens-evidence-illustration {
        margin-top: 34px;
        border-radius: 6px;
    }

    .vendorlens-workflow-notes {
        grid-template-columns: 1fr;
    }

    .vendorlens-workflow-notes > div {
        min-height: 0;
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .vendorlens-workflow-notes > div:last-child {
        border-bottom: 0;
    }

    .vendorlens-control-list article {
        grid-template-columns: 28px minmax(0, 1fr) 24px;
        gap: 12px;
    }

    .vendorlens-development-columns {
        grid-template-columns: 1fr;
    }

    .vendorlens-development-columns > div {
        padding: 24px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .vendorlens-development-columns > div:last-child {
        border-bottom: 0;
    }

    .vendorlens-final-section {
        padding: 76px 0;
    }
}

@media (max-width: 520px) {
    .vendorlens-hero h1 {
        font-size: 2.65rem;
    }
}

@media (max-width: 360px) {
    .vendorlens-hero h1 {
        font-size: 2.35rem;
    }
}

/* ==========================================================================
   C04.11. VENDORLENS LEGACY STATUS MOTION

   PURPOSE
   -------
   Defines the legacy gold status pulse and reduced-motion fallback.

   INCLUDES
   --------
   - Pulse keyframe
   - Reduced-motion animation/icon-transition removal

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Current product motion lives in Sections B and E.
   ========================================================================== */

@keyframes vendorlensStatusPulse {
    0%,
    100% {
        transform: scale(0.92);
        box-shadow: 0 0 0 2px rgba(255, 181, 46, 0.14), 0 0 12px rgba(255, 181, 46, 0.42);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(255, 181, 46, 0), 0 0 24px rgba(255, 181, 46, 0.74);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vendorlens-status i {
        animation: none;
    }

    .vendorlens-control-list article > i {
        transition: none;
    }
}

/* ==========================================================================
   END OF C. RETAINED STANDALONE PRODUCT SYSTEMS
   The following company-profile homepage rules are active only when the root
   style profile includes `company`.
   ========================================================================== */

/* ==========================================================================
   D. HOMEPAGE COMPANY SYSTEM
   Homepage-specific presentation gated by data-style-profile~="company".
   The :where(...) wrapper preserves the original selector specificity.
   ========================================================================== */

/* ==========================================================================
   D01. FOUNDATION AND SHARED TYPOGRAPHY
   Homepage wrapper, heading families/scales, paragraph color, buttons, and uppercase eyebrow labels.
   ========================================================================== */

:where(html[data-style-profile~="company"]) .company-homepage {
    overflow-x: clip;
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Keeps decorative effects and wide content from creating horizontal scroll. */
:where(html[data-style-profile~="company"]) .company-homepage main {
    position: relative;
    overflow: clip;
}

/* Shared font family and balanced wrapping for all homepage headings. */
:where(html[data-style-profile~="company"]) .company-homepage main h1,
:where(html[data-style-profile~="company"]) .company-homepage main h2,
:where(html[data-style-profile~="company"]) .company-homepage main h3 {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
    text-wrap: balance;
}

/* Main page headline sizing. clamp() scales between desktop and mobile. */
:where(html[data-style-profile~="company"]) .company-homepage main h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(44px, 4.8vw, 64px);
    /* font-size: clamp(42px, 5vw, 65px); */
    font-weight: 650;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

/* Major section-heading sizing. */
:where(html[data-style-profile~="company"]) .company-homepage main h2 {
    margin: 0;
    font-size: clamp(34px, 3.7vw, 48px);
    font-weight: 620;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

/* Sizing for Customer Carousel Text*/
:where(html[data-style-profile~="company"]) .company-homepage #customer-proof-title {
    /* font-size: clamp(30px, 3.4vw, 46px);     */
    /* font-size: clamp(25px, 2.8vw, 38px);     */
    /* font-size: clamp(21px, 2.3vw, 32px);     */
    font-size: clamp(15px, 1.6vw, 23px);
    /* font-weight: 100; */
}

:where(html[data-style-profile~="company"]) .company-homepage main h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 620;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

:where(html[data-style-profile~="company"]) .company-homepage main p {
    color: var(--muted);
}

:where(html[data-style-profile~="company"]) .company-homepage .btn {
    min-height: 48px;
    padding-inline: 20px;
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
}

/* Small orange uppercase label shown above major headings. */
:where(html[data-style-profile~="company"]) .saas-eyebrow {
    margin: 0 0 16px;
    color: var(--accent-bright) !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* ==========================================================================
   D02. BRANDMARK INTRO
   Centered Paravane mark, responsive sizing, transparency, and light-theme opacity.
   ========================================================================== */

/* Creates the vertical area and centers the intro logo. */
:where(html[data-style-profile~="company"]) .company-logo-intro {
    min-height: clamp(340px, 44svh, 460px);
    display: grid;
    place-items: center;
    background: transparent;
}

/* Controls the logo's visible size and transparency. */
:where(html[data-style-profile~="company"]) .company-logo-intro-mark {
    display: block;
    width: clamp(230px, 31vw, 500px);
    max-width: 72vw;
    height: auto;
    opacity: 0.42;
    user-select: none;
}

html:where([data-style-profile~="company"])[data-theme="light"] .company-logo-intro-mark {
    opacity: 0.3;
}

/* ==========================================================================
   D03. HERO
   Hero spacing, glows, copy, announcement pill, proof points, visual frame, window chrome, and hero illustration.
   ========================================================================== */

/* Outer hero section and stacking context for decorative background glows. */
:where(html[data-style-profile~="company"]) .saas-home-hero {
    position: relative;
    padding: clamp(48px, 5vw, 72px) 0 72px;
    isolation: isolate;
}

/* Shared setup for the two blurred decorative circles behind the hero. */
:where(html[data-style-profile~="company"]) .saas-home-hero::before,
:where(html[data-style-profile~="company"]) .saas-home-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

/* Large orange glow positioned behind the left side of the hero. */
:where(html[data-style-profile~="company"]) .saas-home-hero::before {
    width: 760px;
    height: 760px;
    top: -440px;
    left: calc(50% - 660px);
    background: radial-gradient(circle, rgba(238, 152, 38, 0.19), rgba(238, 152, 38, 0.045) 42%, transparent 72%);
}

:where(html[data-style-profile~="company"]) .saas-home-hero::after {
    width: 620px;
    height: 620px;
    right: calc(50% - 760px);
    bottom: -260px;
    background: radial-gradient(circle, rgba(246, 191, 63, 0.09), transparent 70%);
}

/* Hero layout: left column = copy, right column = visual. */
:where(html[data-style-profile~="company"]) .saas-home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.93fr) minmax(460px, 1.07fr);
    gap: clamp(48px, 6vw, 82px);
    align-items: center;
}

/* Keeps the hero text above decorative background effects. */
:where(html[data-style-profile~="company"]) .saas-home-hero-copy {
    position: relative;
    z-index: 2;
}

/* Green availability announcement pill above the hero headline. */
:where(html[data-style-profile~="company"]) .saas-announcement {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    margin: 0 0 28px;
    padding: 6px 12px 6px 8px;
    border: 1px solid rgba(83, 213, 142, 0.34);
    border-radius: 999px;
    color: var(--text-soft);
    background: rgba(53, 191, 113, 0.075);
    font-size: 12px;
    line-height: 1;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

/* Small hover lift and stronger green treatment for the announcement pill. */
:where(html[data-style-profile~="company"]) .saas-announcement:hover {
    border-color: rgba(83, 213, 142, 0.52);
    background: rgba(53, 191, 113, 0.12);
    transform: translateY(-1px);
}

:where(html[data-style-profile~="company"]) .saas-announcement strong {
    color: #7ee2ad;
    font-weight: 800;
}

:where(html[data-style-profile~="company"]) .saas-announcement > span:not(.saas-announcement-dot) {
    color: #b9cbbf;
}

:where(html[data-style-profile~="company"]) .saas-announcement i {
    color: #65d89a;
    font-size: 10px;
}

/* Solid green status dot inside the announcement pill. */
:where(html[data-style-profile~="company"]) .saas-announcement-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #65d89a;
    box-shadow: 0 0 0 5px rgba(83, 213, 142, 0.1);
}

/* Applies the orange-to-gold gradient to the emphasized headline text. */
:where(html[data-style-profile~="company"]) .saas-home-hero h1 span {
    color: transparent;
    background: linear-gradient(115deg, #f8c34b 0%, #ee9826 46%, #fff0bd 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Introductory paragraph directly below the hero headline. */
:where(html[data-style-profile~="company"]) .saas-home-hero-lede {
    max-width: 680px;
    margin: 26px 0 0;
    color: var(--text-soft) !important;
    font-size: clamp(18px, 1.8vw, 21px);
    line-height: 1.62;
}

/* Spacing above the hero buttons. */
:where(html[data-style-profile~="company"]) .saas-home-hero-actions {
    margin-top: 32px;
}

/* Horizontal list of short proof points below the hero buttons. */
:where(html[data-style-profile~="company"]) .saas-home-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 28px;
}

:where(html[data-style-profile~="company"]) .saas-home-proof span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

:where(html[data-style-profile~="company"]) .saas-home-proof i {
    color: var(--accent-bright);
    font-size: 11px;
}

/* Main framed hero visual, including border, background, shadow, and tilt. */
:where(html[data-style-profile~="company"]) .saas-home-visual {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(238, 152, 38, 0.26);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 24%),
        rgba(10, 11, 13, 0.96);
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.018) inset;
    transform: perspective(1400px) rotateY(-2deg) rotateX(1deg);
    transform-origin: center;
}

/* Soft orange halo behind the hero visual. */
:where(html[data-style-profile~="company"]) .saas-home-visual::before {
    content: "";
    position: absolute;
    inset: 12% -8% -12% 12%;
    z-index: -1;
    border-radius: 40px;
    background: radial-gradient(circle at center, rgba(238, 152, 38, 0.19), transparent 68%);
    filter: blur(30px);
}

/* Shared flex alignment for the mock application window headers. */
:where(html[data-style-profile~="company"]) .saas-window-chrome,
:where(html[data-style-profile~="company"]) .product-window-head {
    display: flex;
    align-items: center;
}

/* Top bar of the mock application window. */
:where(html[data-style-profile~="company"]) .saas-window-chrome {
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    color: #d9d5cd;
    font-size: 11px;
}

/* Group containing the small decorative window dots. */
:where(html[data-style-profile~="company"]) .saas-window-dots {
    display: flex;
    gap: 6px;
}

:where(html[data-style-profile~="company"]) .saas-window-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
}

:where(html[data-style-profile~="company"]) .saas-window-dots span:first-child {
    background: #f0a023;
}

/* Product name and icon inside the mock window header. */
:where(html[data-style-profile~="company"]) .saas-window-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Small orange square brand icon inside the mock window header. */
:where(html[data-style-profile~="company"]) .saas-window-brandmark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: #15110c;
    background: linear-gradient(135deg, #f7c548, #e88316);
    font-family: "Rubik", sans-serif;
    font-weight: 900;
}

/* Green live-status label in the mock window header. */
:where(html[data-style-profile~="company"]) .saas-window-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7ee2ad;
}

:where(html[data-style-profile~="company"]) .saas-window-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65d89a;
    box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.11);
}

/* Image viewport inside the framed hero visual. */
:where(html[data-style-profile~="company"]) .saas-home-visual-image {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #08090b;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
}

/* Very subtle inner border drawn over the hero image. */
:where(html[data-style-profile~="company"]) .saas-home-visual-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.035);
    pointer-events: none;
}

/* Makes the hero image fit without cropping. */
:where(html[data-style-profile~="company"]) .saas-home-visual-image img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Three-column metrics strip below the hero image. */
:where(html[data-style-profile~="company"]) .saas-home-visual-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.075);
    border-radius: 0 0 23px 23px;
    overflow: hidden;
}

:where(html[data-style-profile~="company"]) .saas-home-visual-metrics div {
    min-width: 0;
    padding: 15px 14px 17px;
    background: #0c0e11;
}

:where(html[data-style-profile~="company"]) .saas-home-visual-metrics span,
:where(html[data-style-profile~="company"]) .saas-home-visual-metrics strong {
    display: block;
}

:where(html[data-style-profile~="company"]) .saas-home-visual-metrics span {
    margin-bottom: 5px;
    color: #77736b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:where(html[data-style-profile~="company"]) .saas-home-visual-metrics strong {
    color: #f4efe5;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Alternate unframed hero visual container. */
:where(html[data-style-profile~="company"]) .saas-home-visual-bare {
    display: grid;
    place-items: center start;
    min-width: 0;
    margin: 0;
}

/* Size rules for the alternate unframed hero illustration. */
:where(html[data-style-profile~="company"]) .saas-home-visual-bare img {
    display: block;
    width: auto;
    max-width: none;
    height: min(780px, 72vw);
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   D04. DESIGN PROOF STRIP
   Four compact operating statements separated by borders directly below the hero.
   ========================================================================== */

/* Full-width strip background and top/bottom borders. */
:where(html[data-style-profile~="company"]) .saas-proof-strip {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.012);
}

/* Four equal proof columns on large screens. */
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Individual proof item spacing and vertical divider. */
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div {
    position: relative;
    min-width: 0;
    padding: 28px 24px 30px;
    border-right: 1px solid var(--line-soft);
}

:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:first-child {
    padding-left: 24px;
}

:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:last-child {
    padding-right: 24px;
    border-right: 0;
}

:where(html[data-style-profile~="company"]) .saas-proof-strip-grid span,
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid strong,
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid small {
    display: block;
}

:where(html[data-style-profile~="company"]) .saas-proof-strip-grid span {
    margin-bottom: 18px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

:where(html[data-style-profile~="company"]) .saas-proof-strip-grid strong {
    margin-bottom: 7px;
    color: var(--text);
    font-size: 15px;
    font-weight: 750;
}

:where(html[data-style-profile~="company"]) .saas-proof-strip-grid small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

/* ==========================================================================
   D05. SHARED SECTION HEADINGS
   Reusable split and centered heading arrangements used across homepage sections.
   ========================================================================== */

/* Default spacing below a section heading group. */
:where(html[data-style-profile~="company"]) .saas-section-heading {
    margin-bottom: 42px;
}

/* Two-column heading: title on the left, supporting copy on the right. */
:where(html[data-style-profile~="company"]) .saas-section-heading--split {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.52fr);
    gap: 56px;
    align-items: end;
}

:where(html[data-style-profile~="company"]) .saas-section-heading--split > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.7;
}

/* Centered heading variation. */
:where(html[data-style-profile~="company"]) .saas-section-heading--center {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

:where(html[data-style-profile~="company"]) .saas-section-heading--center > p:last-child {
    max-width: 720px;
    margin: 20px auto 0;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.7;
}

/* ==========================================================================
   D06. PRODUCT BENTO, CARDS, AND IMAGE POSITIONING
   Product grid, cards, status badges, tags, links, illustration frames, logo overlays, and product-specific image placement.
   ========================================================================== */

/* Vertical spacing around the entire products section. */
:where(html[data-style-profile~="company"]) .saas-home-products {
    padding: clamp(92px, 10vw, 138px) 0;
}

/* Twelve-column grid used to create different card widths. */
:where(html[data-style-profile~="company"]) .saas-product-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

/* Base shell shared by every product card. */
:where(html[data-style-profile~="company"]) .saas-product-card {
    position: relative;
    grid-column: span 6;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 82% 12%, rgba(238, 152, 38, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.014));
    box-shadow: 0 20px 68px rgba(0, 0, 0, 0.12);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

/* Lifts the whole product card on hover. */
:where(html[data-style-profile~="company"]) .saas-product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(238, 152, 38, 0.34);
    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.2);
}

/* Larger featured card, currently used for smtpRS. */
:where(html[data-style-profile~="company"]) .saas-product-card--featured {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    background:
        radial-gradient(circle at 78% 18%, rgba(238, 152, 38, 0.13), transparent 34%),
        linear-gradient(160deg, rgba(238, 152, 38, 0.055), rgba(255, 255, 255, 0.018) 48%, rgba(255, 255, 255, 0.012));
}

/* Narrower grid width used by the InvoiceGuard card. */
:where(html[data-style-profile~="company"]) .saas-product-card--invoice {
    grid-column: span 5;
}

/* Text area inside a product card. */
:where(html[data-style-profile~="company"]) .saas-product-card-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Top row inside a card: category on the left, status on the right. */
:where(html[data-style-profile~="company"]) .saas-product-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 26px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Default category-label color. Product modifiers below override it. */
:where(html[data-style-profile~="company"]) .saas-product-card-meta > span:first-child {
    color: var(--accent-bright);
}

:where(html[data-style-profile~="company"]) .saas-product-card--invoice .saas-product-card-meta > span:first-child {
    color: #67e8f9;
}

:where(html[data-style-profile~="company"]) .saas-product-card--retain .saas-product-card-meta > span:first-child {
    color: #fb7185;
}

:where(html[data-style-profile~="company"]) .saas-product-card--vendor .saas-product-card-meta > span:first-child {
    color: #5eead4;
}

/* Base pill used for product availability/development status. */
/* ==========================================================================
   D06.1. HOMEPAGE PRODUCT STATUS PILLS

   PURPOSE
   -------
   Defines blue development and green live status pills inside homepage product
   cards, including the automatically generated development dot.

   INCLUDES
   --------
   - Base status geometry
   - Development dot
   - Live color variant and dot

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Pulse animation assignment occurs later in D13.
   - Light-theme status colors are defined in D11.
   ========================================================================== */

:where(html[data-style-profile~="company"]) .saas-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 4px 8px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.09);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
    white-space: nowrap;
}

/* Blue dot automatically added to non-live status pills. */
/* Applies the blue pulse animation to development-status dots. */
:where(html[data-style-profile~="company"]) .saas-status:not(.saas-status--live)::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
}

/* Green color treatment for products that are available now. */
:where(html[data-style-profile~="company"]) .saas-status--live {
    color: #7ee2ad;
    border-color: rgba(83, 213, 142, 0.36);
    background: rgba(53, 191, 113, 0.09);
}

/* Green dot inside a live status pill. */
:where(html[data-style-profile~="company"]) .saas-status--live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.1);
}


/* Shared title row used when a product name and status pill sit together. */
:where(html[data-style-profile~="company"]) .docs-api-title {
    /* The core documentation system owns the shared flex geometry; this company-profile rule only adjusts the gap. */
    gap: 0.75rem;
}

:where(html[data-style-profile~="company"]) .docs-api-title strong {
    margin: 0;
}


/* Product name size inside cards. */
/* ==========================================================================
   D06.2. HOMEPAGE PRODUCT COPY, TAGS, AND ACTION LINKS

   PURPOSE
   -------
   Controls product names, descriptions, feature tags, bottom card links, and
   arrow movement within the company-profile product bento.

   INCLUDES
   --------
   - Title and description sizing
   - Feature tag row and hover treatment
   - Bottom-aligned product link and arrow

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The featured card uses flex layout so the action can sit at the bottom.
   ========================================================================== */

:where(html[data-style-profile~="company"]) .saas-product-card h3 {
    font-size: 31px;
}

/* Product description text. */
:where(html[data-style-profile~="company"]) .saas-product-card > p,
:where(html[data-style-profile~="company"]) .saas-product-card-copy > p {
    max-width: 520px;
    margin: 14px 0 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.66;
}

/* Row of small feature tags such as Structured JSON. */
:where(html[data-style-profile~="company"]) .saas-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 24px;
}

/* Individual feature tag appearance. */
:where(html[data-style-profile~="company"]) .saas-tag-list span {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.018);
    font-size: 10px;
    font-weight: 700;
    cursor: default;
    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

/* Orange hover treatment for feature tags. */
:where(html[data-style-profile~="company"]) .saas-tag-list span:hover {
    color: var(--accent-bright);
    border-color: rgba(238, 152, 38, 0.58);
    background: rgba(238, 152, 38, 0.1);
    box-shadow: inset 0 0 0 1px rgba(246, 191, 63, 0.08), 0 8px 20px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}

/* Bottom product link, such as Explore smtpRS. */
:where(html[data-style-profile~="company"]) .saas-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

/* Arrow icon inside the bottom product link. */
:where(html[data-style-profile~="company"]) .saas-card-link i {
    color: var(--accent-bright);
    font-size: 10px;
    transition: transform 180ms ease;
}

:where(html[data-style-profile~="company"]) .saas-card-link:hover i {
    transform: translateX(3px);
}

/* Shared image frame inside every product card. */
/* ==========================================================================
   D06.3. HOMEPAGE PRODUCT VISUAL FRAME AND IMAGE-FIT CONTRACT

   PURPOSE
   -------
   Defines the 16:9 illustration frame used by homepage product cards and the
   default image fill/zoom behavior.

   INCLUDES
   --------
   - Shared visual frame
   - Featured/non-featured aspect ratio
   - Default cover fitting
   - Illustration-only hover zoom

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Logo overlays are separate images and must not inherit illustration
     zoom.
   - Use product-specific contain rules below when full artwork visibility is
     required.
   ========================================================================== */

:where(html[data-style-profile~="company"]) .saas-product-card-visual {
    position: relative;
    min-height: 230px;
    margin: 28px 0 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.16);
    border-radius: 16px;
    background: #08090b;
}

/* Image-frame ratio and spacing for the featured smtpRS card. */
:where(html[data-style-profile~="company"]) .saas-product-card--featured .saas-product-card-visual {
    aspect-ratio: 16 / 9;
    min-height: 0;
    margin: 28px 0 0;
    border-radius: 16px;
}

/* Image-frame ratio for all non-featured product cards. */
:where(html[data-style-profile~="company"]) .saas-product-card:not(.saas-product-card--featured) .saas-product-card-visual {
    aspect-ratio: 16 / 9;
    min-height: 0;
}
/* --------------------------------------------------------------------------
   PRODUCT IMAGE FITTING
   width/height make the image fill its frame.
   object-fit: cover fills the frame but may crop the image.
   Change to object-fit: contain when the entire illustration must remain visible.
   -------------------------------------------------------------------------- *//* Controls the image’s displayed size */
:where(html[data-style-profile~="company"]) .saas-product-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms ease;
}
/* --------------------------------------------------------------------------
   LEGACY REFERENCE: OLD PRODUCT IMAGE HOVER RULE
   Replaced because this selector targeted every image inside the visual frame.
   After adding a product logo, it would enlarge both the illustration and logo.
   -------------------------------------------------------------------------- */
/*
.saas-product-card:hover .saas-product-card-visual img {
    transform: scale(1.018);
}
*/

/* Zoom only the main product illustration. Product logos remain stationary. */
:where(html[data-style-profile~="company"]) .saas-product-card:hover .saas-product-card-illustration {
    transform: scale(1.018);
}

/* --------------------------------------------------------------------------
   LEGACY REFERENCE: OLD SMTPRS IMAGE RULES
   Replaced because ".saas-product-card-visual--smtprs img" targeted both the
   illustration and the logo, forcing both images to use the same width.
   -------------------------------------------------------------------------- */
/*
.saas-product-card-visual--smtprs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.saas-product-card-visual--smtprs img {
    width: 82%;
    height: auto;
    object-fit: contain;
}
*/

/* ==========================================================================
   D06.4. SMTPRS HOMEPAGE PRODUCT VISUAL

   PURPOSE
   -------
   Centers the smtpRS illustration inside its card and reduces its width so the
   complete laptop artwork remains visible.

   INCLUDES
   --------
   - Flex-centered visual frame
   - 82% contained illustration

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The shared logo overlay is positioned independently in D06.5.
   ========================================================================== */

/* Establishes the positioning area and centers the main illustration. */
:where(html[data-style-profile~="company"]) .saas-product-card-visual--smtprs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main smtpRS illustration: shown slightly smaller so the full art is visible. */
:where(html[data-style-profile~="company"]) .saas-product-card-visual--smtprs .saas-product-card-illustration {
    display: block;
    width: 82%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* --------------------------------------------------------------------------
   LEGACY REFERENCE: OLD SMTPRS-ONLY LOGO RULE
   Replaced because all four product cards now include a lockup. A shared logo
   rule prevents the same positioning code from being repeated four times.
   -------------------------------------------------------------------------- */
/*
.saas-product-card-visual--smtprs .saas-product-card-logo {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 2;
    width: clamp(120px, 25%, 200px);
    height: auto;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
}
*/

/* ==========================================================================
   D06.5. SHARED HOMEPAGE PRODUCT LOGO OVERLAYS

   PURPOSE
   -------
   Positions product lockups above the card artwork while allowing only the
   underlying illustration to animate.

   INCLUDES
   --------
   - Shared overlay position and maximum size
   - Larger featured smtpRS lockup

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Pointer events are disabled so logos never block card interaction.
   ========================================================================== */

/* All product lockups remain fixed while the main illustration can zoom. */
:where(html[data-style-profile~="company"]) .saas-product-card-visual .saas-product-card-logo {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 2;

    width: clamp(110px, 30%, 190px);
    height: auto;
    max-height: 52px;

    object-fit: contain;
    object-position: left center;

    pointer-events: none;
}

/* The larger featured smtpRS card can use a slightly wider lockup. */
:where(html[data-style-profile~="company"]) .saas-product-card-visual--smtprs .saas-product-card-logo {
    width: clamp(120px, 25%, 210px);
}

/* ==========================================================================
   D06.6. INVOICEGUARD HOMEPAGE VISUAL POSITIONING

   PURPOSE
   -------
   Reserves a top zone for the InvoiceGuard lockup and sizes the underlying
   illustration within the remaining frame.

   INCLUDES
   --------
   - InvoiceGuard lockup position
   - Absolute contained illustration area

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Keep top offsets coordinated so the lockup and illustration never
     overlap.
   ========================================================================== */

:where(html[data-style-profile~="company"]) .saas-product-card-visual--invoiceguard .saas-product-card-logo {
    top: 14px;
    left: 16px;
    width: clamp(96px, 30%, 150px);
}

/* Reserve space beneath the InvoiceGuard lockup for the illustration. */
:where(html[data-style-profile~="company"]) .saas-product-card-visual--invoiceguard .saas-product-card-illustration {
    position: absolute;
    top: 42px;
    left: 8px;

    width: calc(100% - 16px);
    height: calc(100% - 50px);

    object-fit: contain;
    object-position: center;
}

/* ==========================================================================
   D06.7. RETAINIQ HOMEPAGE VISUAL POSITIONING

   PURPOSE
   -------
   Reserves a separate top zone for the wider RetainIQ lockup and contains its
   illustration beneath it.

   INCLUDES
   --------
   - RetainIQ lockup position
   - Absolute contained illustration area
   - Shared centered object positioning

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - VendorLens inherits the shared centered illustration rule without a
     separate top-zone override here.
   ========================================================================== */

:where(html[data-style-profile~="company"]) .saas-product-card-visual--retainiq .saas-product-card-logo {
    top: 14px;
    left: 18px;
    width: clamp(105px, 32%, 165px);
}

/* Reserve space beneath the RetainIQ lockup for the illustration. */
:where(html[data-style-profile~="company"]) .saas-product-card-visual--retainiq .saas-product-card-illustration {
    position: absolute;
    top: 44px;
    left: 10px;

    width: calc(100% - 20px);
    height: calc(100% - 52px);

    object-fit: contain;
    object-position: center;
}

/* Center only the main illustrations; do not apply this to the logo overlays. */
:where(html[data-style-profile~="company"]) .saas-product-card-visual--invoiceguard .saas-product-card-illustration,
:where(html[data-style-profile~="company"]) .saas-product-card-visual--retainiq .saas-product-card-illustration,
:where(html[data-style-profile~="company"]) .saas-product-card-visual--vendorlens .saas-product-card-illustration {
    object-position: center;
}

/* ==========================================================================
   D07. DECISION FLOW
   Four numbered operating steps, icon treatments, separators, hover states, and responsive stacking.
   ========================================================================== */

/* Full decision-flow section, including the subtle grid background. */
:where(html[data-style-profile~="company"]) .saas-home-flow {
    padding: clamp(90px, 9vw, 132px) 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        rgba(255, 255, 255, 0.008);
    background-size: 54px 54px;
}

/* Four-column container holding the decision steps. */
:where(html[data-style-profile~="company"]) .saas-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--bg-soft);
    box-shadow: var(--shadow-soft);
}

/* Individual decision step card. */
:where(html[data-style-profile~="company"]) .saas-flow-grid article {
    position: relative;
    min-width: 0;
    min-height: 290px;
    padding: 26px 24px 30px;
    border-right: 1px solid var(--line);
}

:where(html[data-style-profile~="company"]) .saas-flow-grid article:last-child {
    border-right: 0;
}

:where(html[data-style-profile~="company"]) .saas-flow-grid article > span {
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

/* Orange icon box inside each decision step. */
:where(html[data-style-profile~="company"]) .saas-flow-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 40px 0 28px;
    border: 1px solid var(--accent-line);
    border-radius: 14px;
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.07);
    box-shadow: 0 10px 35px rgba(238, 152, 38, 0.07);
}

:where(html[data-style-profile~="company"]) .saas-flow-grid h3 {
    font-size: 20px;
}

:where(html[data-style-profile~="company"]) .saas-flow-grid p {
    margin: 11px 0 0;
    font-size: 13px;
    line-height: 1.65;
}

/* ==========================================================================
   D08. API INTEGRATION
   Explanatory copy/checklist plus theme-specific API artwork and anchored live-status pulse.
   ========================================================================== */

/* Vertical spacing around the API section. */
:where(html[data-style-profile~="company"]) .saas-home-api {
    padding: clamp(96px, 10vw, 146px) 0;
}

/* Two-column API layout: copy on the left, image on the right. */
:where(html[data-style-profile~="company"]) .saas-home-api-grid {
    display: grid;
    width: min(1400px, calc(100% - 48px));
    grid-template-columns: minmax(300px, 0.55fr) minmax(680px, 1.45fr);
    gap: clamp(42px, 5vw, 72px);
    align-items: center;
}

/* Main descriptive paragraph in the API section. */
:where(html[data-style-profile~="company"]) .saas-home-api-copy > p:not(.saas-eyebrow) {
    margin: 24px 0 0;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.72;
}

/* API-benefit checklist container. */
:where(html[data-style-profile~="company"]) .saas-check-list {
    display: grid;
    gap: 13px;
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
}

/* Individual API-benefit checklist row. */
:where(html[data-style-profile~="company"]) .saas-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.45;
}

/* Circular orange check icon. */
:where(html[data-style-profile~="company"]) .saas-check-list li span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    color: #15110c;
    background: linear-gradient(135deg, #f7c548, #e88316);
    font-size: 11px;
    font-weight: 900;
}

/* Positioned wrapper for the API screenshot and live pulse overlay. */
:where(html[data-style-profile~="company"]) .saas-api-result-visual {
    position: relative;
    width: min(100%, 1403px);
    margin: 0;
    justify-self: end;
    isolation: isolate;
    filter: drop-shadow(0 32px 50px rgba(0, 0, 0, 0.26));
}

/* Makes either API screenshot scale responsively. */
:where(html[data-style-profile~="company"]) .saas-api-result-visual img {
    display: block;
    width: 100%;
    height: auto;
}

/* Light screenshot is hidden by default; light-theme rules reveal it later. */
:where(html[data-style-profile~="company"]) .saas-api-result-visual-light {
    display: none !important;
}

/* --------------------------------------------------------------------------
   LEGACY REFERENCE: PREVIOUS LIVE-DOT POSITIONING
   Replaced by the active rule below because the old position and maximum size
   did not align consistently with both the dark and light API images.

.saas-api-result-live {
    position: absolute;
    top: 13.9%;
    left: 13.68%;
    width: clamp(7px, 1.82%, 14px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #53d58e;
    box-shadow:
        0 0 0 2px rgba(83, 213, 142, 0.09),
        0 0 7px rgba(83, 213, 142, 0.38);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

-------------------------------------------------------------------------- */
:where(html[data-style-profile~="company"]) .saas-api-result-live {
    position: absolute;
    top: 13.95%;
    left: 13.80%;
    width: clamp(9px, 1.95%, 28px);
    aspect-ratio: 1;
    z-index: 2;
    border-radius: 50%;
    background: #53d58e;
    box-shadow:
        0 0 0 2px rgba(83, 213, 142, 0.09),
        0 0 7px rgba(83, 213, 142, 0.38);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* One small position correction used only with the light screenshot. */
html:where([data-style-profile~="company"])[data-theme="light"] .saas-api-result-live {
    top: 14.04%;
}

/* Second animated layer that creates the breathing/pulse effect. */
:where(html[data-style-profile~="company"]) .saas-api-result-live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    opacity: 0.12;
    animation: saas-api-result-breathe 1.2s ease-in-out infinite;
}

/* ==========================================================================
   D09. TRUST
   Trust/governance copy, numbered principles, separators, and responsive two-column layout.
   ========================================================================== */

/* Outer trust-section spacing and background. */
:where(html[data-style-profile~="company"]) .saas-home-trust {
    padding: clamp(92px, 9vw, 132px) 0;
    border-top: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.01);
}

/* Two-column trust layout. */
:where(html[data-style-profile~="company"]) .saas-home-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(460px, 1.22fr);
    gap: clamp(58px, 8vw, 112px);
    align-items: start;
}

:where(html[data-style-profile~="company"]) .saas-home-trust-grid > div:first-child > p:last-child {
    max-width: 560px;
    margin: 24px 0 0;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.7;
}

/* Top border and wrapper for the trust principles. */
:where(html[data-style-profile~="company"]) .saas-trust-list {
    border-top: 1px solid var(--line);
}

/* Individual numbered trust principle. */
:where(html[data-style-profile~="company"]) .saas-trust-list article {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 20px;
    padding: 26px 20px 28px;
    border-bottom: 1px solid var(--line);
}

:where(html[data-style-profile~="company"]) .saas-trust-list article > span {
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

:where(html[data-style-profile~="company"]) .saas-trust-list h3 {
    font-size: 19px;
}

:where(html[data-style-profile~="company"]) .saas-trust-list p {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.65;
}

/* ==========================================================================
   D10. FINAL CALL TO ACTION
   Closing conversion card, decorative gradients, final message, and action buttons.
   ========================================================================== */

/* Outer spacing around the final call-to-action section. */
:where(html[data-style-profile~="company"]) .saas-home-final {
    padding: 40px 0 clamp(82px, 9vw, 120px);
}

/* Final call-to-action card shell and two-column layout. */
:where(html[data-style-profile~="company"]) .saas-final-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
    overflow: hidden;
    padding: clamp(38px, 5vw, 60px);
    border: 1px solid rgba(238, 152, 38, 0.28);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 22%, rgba(246, 191, 63, 0.15), transparent 32%),
        radial-gradient(circle at 8% 120%, rgba(238, 152, 38, 0.1), transparent 38%),
        linear-gradient(145deg, rgba(238, 152, 38, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.22);
}

:where(html[data-style-profile~="company"]) .saas-final-card h2 {
    max-width: 760px;
    font-size: clamp(36px, 4.3vw, 56px);
}

:where(html[data-style-profile~="company"]) .saas-final-card p:last-child {
    max-width: 700px;
    margin: 20px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.7;
}

:where(html[data-style-profile~="company"]) .saas-final-card .hero-actions {
    justify-content: flex-end;
}

/* ==========================================================================
   D11. LIGHT-THEME OVERRIDES
   Homepage-company light surfaces, shadows, product colors, screenshots, and status treatments.
   ========================================================================== */

/* Softer shadow for the main hero visual in light mode. */
html:where([data-style-profile~="company"])[data-theme="light"] .saas-home-visual {
    box-shadow: 0 32px 90px rgba(79, 55, 20, 0.18);
}

/* Hide the dark API screenshot in light mode. */
html:where([data-style-profile~="company"])[data-theme="light"] .saas-api-result-visual-dark {
    display: none;
}

/* Reveal the light API screenshot in light mode. */
html:where([data-style-profile~="company"])[data-theme="light"] .saas-api-result-visual-light {
    display: block !important;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-proof-strip,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-home-flow,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-home-trust {
    background-color: rgba(255, 255, 255, 0.48);
}

/* Light card background and shadow. */
html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card {
    background:
        radial-gradient(circle at 82% 12%, rgba(238, 152, 38, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 253, 248, 0.72));
    box-shadow: 0 18px 52px rgba(81, 59, 25, 0.08);
}

/* Product illustration backgrounds */
html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card-visual--smtprs {
    background: #f9f7f1;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card-visual--invoiceguard,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card-visual--retainiq,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card-visual--vendorlens {
    background: #f9f7f1;
}



html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card-meta > span:first-child {
    color: #a85e00;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card--invoice .saas-product-card-meta > span:first-child {
    color: #0369a1;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card--retain .saas-product-card-meta > span:first-child {
    color: #be123c;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-product-card--vendor .saas-product-card-meta > span:first-child {
    color: #0f766e;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-tag-list span:hover {
    color: #9a5100;
    border-color: rgba(190, 107, 12, 0.48);
    background: rgba(238, 152, 38, 0.12);
    box-shadow: inset 0 0 0 1px rgba(190, 107, 12, 0.05), 0 8px 20px rgba(81, 59, 25, 0.08);
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-flow-grid {
    background: rgba(255, 255, 255, 0.82);
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-status {
    background: rgba(255, 255, 255, 0.7);
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-announcement {
    border-color: rgba(31, 139, 83, 0.34);
    background: rgba(53, 191, 113, 0.1);
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-announcement strong,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-window-live,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-status--live {
    color: #18784a;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-announcement > span:not(.saas-announcement-dot) {
    color: #35624b;
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-status:not(.saas-status--live) {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.34);
    background: rgba(59, 130, 246, 0.1);
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-status--live {
    border-color: rgba(31, 139, 83, 0.34);
    background: rgba(53, 191, 113, 0.11);
}

/* ==========================================================================
   D12. RESPONSIVE BREAKPOINTS
   Homepage-company layout changes ordered from 1080px through tablet and phone widths.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET / SMALL DESKTOP: 1080px AND BELOW
   Major two-column sections collapse to one column.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    :where(html[data-style-profile~="company"]) .saas-home-hero-grid,
:where(html[data-style-profile~="company"]) .saas-home-api-grid,
:where(html[data-style-profile~="company"]) .saas-home-trust-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="company"]) .saas-home-hero-copy {
        max-width: 820px;
    }

    :where(html[data-style-profile~="company"]) .saas-home-visual-bare img {
        width: min(100%, 760px);
        max-width: 100%;
        height: auto;
        max-height: none;
    }

    :where(html[data-style-profile~="company"]) .saas-home-visual-bare {
        place-items: center;
    }

    :where(html[data-style-profile~="company"]) .saas-home-visual {
        width: min(760px, 100%);
        transform: none;
    }

    :where(html[data-style-profile~="company"]) .saas-home-api-copy,
:where(html[data-style-profile~="company"]) .saas-home-trust-grid > div:first-child {
        max-width: 760px;
    }

    :where(html[data-style-profile~="company"]) .saas-home-trust-grid {
        gap: 48px;
    }
}

/* --------------------------------------------------------------------------
   TABLET: 900px AND BELOW
   Product cards become full width; four-column grids become two columns.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :where(html[data-style-profile~="company"]) .saas-section-heading--split {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    :where(html[data-style-profile~="company"]) .saas-product-card,
:where(html[data-style-profile~="company"]) .saas-product-card--featured,
:where(html[data-style-profile~="company"]) .saas-product-card--invoice {
        grid-column: span 12;
    }

    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid,
:where(html[data-style-profile~="company"]) .saas-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:nth-child(2),
:where(html[data-style-profile~="company"]) .saas-flow-grid article:nth-child(2) {
        border-right: 0;
    }

    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:nth-child(-n + 2),
:where(html[data-style-profile~="company"]) .saas-flow-grid article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line-soft);
    }

    :where(html[data-style-profile~="company"]) .saas-final-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    :where(html[data-style-profile~="company"]) .saas-final-card .hero-actions {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   LARGE PHONE / SMALL TABLET: 720px AND BELOW
   Reduces typography, card spacing, and simplifies hero/window content.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    :where(html[data-style-profile~="company"]) .company-logo-intro {
        min-height: clamp(300px, 44svh, 380px);
    }

    :where(html[data-style-profile~="company"]) .company-logo-intro-mark {
        width: min(72vw, 360px);
        opacity: 0.34;
    }

    :where(html[data-style-profile~="company"]) .company-homepage main h1 {
        font-size: clamp(40px, 11vw, 52px);
    }

    :where(html[data-style-profile~="company"]) .company-homepage main h2 {
        font-size: clamp(34px, 10vw, 48px);
    }

    :where(html[data-style-profile~="company"]) .saas-home-hero {
        padding-top: 40px;
    }

    :where(html[data-style-profile~="company"]) .saas-home-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 46px;
    }

    :where(html[data-style-profile~="company"]) .saas-home-hero-lede {
        font-size: 17px;
    }

    :where(html[data-style-profile~="company"]) .saas-announcement > span:not(.saas-announcement-dot) {
        display: none;
    }

    :where(html[data-style-profile~="company"]) .saas-home-visual-metrics {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="company"]) .saas-home-visual-metrics div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    :where(html[data-style-profile~="company"]) .saas-home-visual-metrics div:last-child {
        border-bottom: 0;
    }

    :where(html[data-style-profile~="company"]) .saas-home-visual-metrics span {
        margin: 0;
    }

    :where(html[data-style-profile~="company"]) .saas-product-card--featured {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    :where(html[data-style-profile~="company"]) .saas-product-card--featured .saas-product-card-visual {
        min-height: 0;
        margin: 28px 0 0;
        border-radius: 16px;
    }

    :where(html[data-style-profile~="company"]) .saas-product-card {
        min-height: 0;
        padding: 22px;
    }

    :where(html[data-style-profile~="company"]) .saas-product-card-visual {
        height: auto;
    }

    :where(html[data-style-profile~="company"]) .saas-product-card--featured .saas-product-card-visual {
        aspect-ratio: 16 / 9;
    }

    :where(html[data-style-profile~="company"]) .saas-flow-grid article {
        min-height: 260px;
    }

}

/* --------------------------------------------------------------------------
   PHONE: 560px AND BELOW
   Proof and flow grids collapse to one column.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    :where(html[data-style-profile~="company"]) .saas-home-proof {
        display: grid;
    }

    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid,
:where(html[data-style-profile~="company"]) .saas-flow-grid {
        grid-template-columns: 1fr;
    }

    /* Shared transition timing for interactive proof, flow, and trust items. */
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div,
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:first-child,
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:nth-child(2),
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:nth-child(3),
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:last-child {
        padding: 23px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:last-child {
        border-bottom: 0;
    }

    :where(html[data-style-profile~="company"]) .saas-flow-grid article,
:where(html[data-style-profile~="company"]) .saas-flow-grid article:nth-child(2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    :where(html[data-style-profile~="company"]) .saas-flow-grid article:last-child {
        border-bottom: 0;
    }

    :where(html[data-style-profile~="company"]) .saas-flow-icon {
        margin: 28px 0 22px;
    }

    :where(html[data-style-profile~="company"]) .saas-window-title > span:last-child,
:where(html[data-style-profile~="company"]) .saas-window-live {
        display: none;
    }

    :where(html[data-style-profile~="company"]) .saas-product-card-meta {
        align-items: flex-start;
    }

    :where(html[data-style-profile~="company"]) .saas-final-card {
        padding: 30px 22px;
    }
}

/* ==========================================================================
   D13. INTERACTIONS, MOTION, AND ACCESSIBILITY
   Hover treatments, live/development pulses, API breathing indicator, and reduced-motion fallbacks.
   ========================================================================== */

/* Applies the green pulse animation to all live-status dots. */
:where(html[data-style-profile~="company"]) .saas-announcement-dot,
:where(html[data-style-profile~="company"]) .saas-window-live i,
:where(html[data-style-profile~="company"]) .saas-status--live i {
    transform-origin: center;
    animation: saas-live-status-pulse 2.5s ease-in-out infinite;
}

:where(html[data-style-profile~="company"]) .saas-status:not(.saas-status--live)::before {
    transform-origin: center;
    animation: saas-development-status-pulse 2.5s ease-in-out infinite;
}

:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div,
:where(html[data-style-profile~="company"]) .saas-flow-grid article,
:where(html[data-style-profile~="company"]) .saas-trust-list article,
:where(html[data-style-profile~="company"]) .saas-flow-icon,
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div > span,
:where(html[data-style-profile~="company"]) .saas-flow-grid article > span,
:where(html[data-style-profile~="company"]) .saas-trust-list article > span {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

/* Invisible inset outline that becomes visible on hover. */
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div::after,
:where(html[data-style-profile~="company"]) .saas-flow-grid article::after,
:where(html[data-style-profile~="company"]) .saas-trust-list article::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid transparent;
    border-radius: 12px;
    pointer-events: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Hover effects are limited to devices that actually support hovering. */
@media (hover: hover) {
    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:hover,
:where(html[data-style-profile~="company"]) .saas-flow-grid article:hover,
:where(html[data-style-profile~="company"]) .saas-trust-list article:hover {
        background-color: rgba(238, 152, 38, 0.085);
    }

    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:hover::after,
:where(html[data-style-profile~="company"]) .saas-flow-grid article:hover::after,
:where(html[data-style-profile~="company"]) .saas-trust-list article:hover::after {
        border-color: rgba(246, 191, 63, 0.45);
        box-shadow: 0 0 24px rgba(238, 152, 38, 0.08);
    }

    :where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div:hover > span,
:where(html[data-style-profile~="company"]) .saas-flow-grid article:hover > span,
:where(html[data-style-profile~="company"]) .saas-trust-list article:hover > span {
        color: #ffd166;
    }

    :where(html[data-style-profile~="company"]) .saas-flow-grid article:hover .saas-flow-icon {
        border-color: rgba(246, 191, 63, 0.55);
        color: #ffd166;
        background-color: rgba(238, 152, 38, 0.16);
        box-shadow: 0 12px 38px rgba(238, 152, 38, 0.2);
    }
}

html:where([data-style-profile~="company"])[data-theme="light"] .saas-proof-strip-grid > div:hover,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-flow-grid article:hover,
html:where([data-style-profile~="company"])[data-theme="light"] .saas-trust-list article:hover {
    background-color: rgba(238, 152, 38, 0.13);
}

/* Green live-status pulse animation. */
@keyframes saas-live-status-pulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.1), 0 0 7px rgba(83, 213, 142, 0.24);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 7px rgba(83, 213, 142, 0.025), 0 0 17px rgba(83, 213, 142, 0.72);
    }
}

/* Blue development-status pulse animation. */
@keyframes saas-development-status-pulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1), 0 0 7px rgba(96, 165, 250, 0.24);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 7px rgba(96, 165, 250, 0.025), 0 0 17px rgba(96, 165, 250, 0.72);
    }
}

/* Accessibility: disables transitions and animations when requested by OS. */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-style-profile~="company"]) .saas-announcement,
:where(html[data-style-profile~="company"]) .saas-product-card,
:where(html[data-style-profile~="company"]) .saas-product-card-visual img,
:where(html[data-style-profile~="company"]) .saas-card-link i,
:where(html[data-style-profile~="company"]) .saas-proof-strip-grid > div,
:where(html[data-style-profile~="company"]) .saas-flow-grid article,
:where(html[data-style-profile~="company"]) .saas-trust-list article,
:where(html[data-style-profile~="company"]) .saas-flow-icon,
:where(html[data-style-profile~="company"]) .saas-tag-list span {
        transition: none;
    }

    :where(html[data-style-profile~="company"]) .saas-announcement-dot,
:where(html[data-style-profile~="company"]) .saas-window-live i,
:where(html[data-style-profile~="company"]) .saas-status--live i,
:where(html[data-style-profile~="company"]) .saas-api-result-live::after,
:where(html[data-style-profile~="company"]) .saas-status:not(.saas-status--live)::before {
        animation: none;
    }
}

/* Breathing halo used by the green overlay dot on the API screenshot. */
@keyframes saas-api-result-breathe {
    0%,
    100% {
        opacity: 0.12;
        transform: scale(0.92);
        box-shadow: 0 0 0 1px rgba(83, 213, 142, 0.025), 0 0 3px rgba(83, 213, 142, 0.16);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
        box-shadow: 0 0 0 3px rgba(83, 213, 142, 0.045), 0 0 8px rgba(83, 213, 142, 0.46);
    }
}

/* ==========================================================================
   END OF D. HOMEPAGE COMPANY SYSTEM
   The following marketing/page-maturity rules are active only when the root
   style profile includes `marketing` and are intentionally late in the cascade.
   ========================================================================== */

/* ==========================================================================
   E. MARKETING / PAGE-MATURITY SYSTEM
   Public marketing/product/pricing/docs/contact refinements gated by
   data-style-profile~="marketing". These rules remain unlayered intentionally.
   ========================================================================== */

/* ==========================================================================
   E01. SHARED MARKETING FOUNDATION
   Marketing-profile typography, container width, headings, buttons, eyebrow labels, section-heading helpers, and text links.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .company-homepage main,
:where(html[data-style-profile~="marketing"]) .product-saas-page main,
:where(html[data-style-profile~="marketing"]) .page-pricing main,
:where(html[data-style-profile~="marketing"]) .page-docs main,
:where(html[data-style-profile~="marketing"]) .page-contact main {
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:where(html[data-style-profile~="marketing"]) .company-homepage main .container,
:where(html[data-style-profile~="marketing"]) .product-saas-page main .container,
:where(html[data-style-profile~="marketing"]) .page-pricing main .container,
:where(html[data-style-profile~="marketing"]) .page-docs main .container,
:where(html[data-style-profile~="marketing"]) .page-contact main .container {
    width: min(1240px, calc(100% - 64px));
    max-width: none;
}

:where(html[data-style-profile~="marketing"]) .company-homepage main h1,
:where(html[data-style-profile~="marketing"]) .company-homepage main h2,
:where(html[data-style-profile~="marketing"]) .company-homepage main h3,
:where(html[data-style-profile~="marketing"]) .product-saas-page main h1,
:where(html[data-style-profile~="marketing"]) .product-saas-page main h2,
:where(html[data-style-profile~="marketing"]) .product-saas-page main h3,
:where(html[data-style-profile~="marketing"]) .page-pricing main h1,
:where(html[data-style-profile~="marketing"]) .page-pricing main h2,
:where(html[data-style-profile~="marketing"]) .page-pricing main h3,
:where(html[data-style-profile~="marketing"]) .page-docs main h1,
:where(html[data-style-profile~="marketing"]) .page-docs main h2,
:where(html[data-style-profile~="marketing"]) .page-docs main h3,
:where(html[data-style-profile~="marketing"]) .page-contact main h1,
:where(html[data-style-profile~="marketing"]) .page-contact main h2,
:where(html[data-style-profile~="marketing"]) .page-contact main h3 {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
    text-wrap: balance;
}

:where(html[data-style-profile~="marketing"]) .company-homepage main p,
:where(html[data-style-profile~="marketing"]) .product-saas-page main p,
:where(html[data-style-profile~="marketing"]) .page-pricing main p,
:where(html[data-style-profile~="marketing"]) .page-docs main p,
:where(html[data-style-profile~="marketing"]) .page-contact main p {
    text-wrap: pretty;
}

:where(html[data-style-profile~="marketing"]) .company-homepage main .btn,
:where(html[data-style-profile~="marketing"]) .product-saas-page main .btn,
:where(html[data-style-profile~="marketing"]) .page-pricing main .btn,
:where(html[data-style-profile~="marketing"]) .page-docs main .btn,
:where(html[data-style-profile~="marketing"]) .page-contact main .btn {
    min-height: 48px;
    padding-inline: 20px;
    border-radius: 10px;
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

:where(html[data-style-profile~="marketing"]) .mkt-eyebrow {
    margin: 0 0 14px;
    color: var(--accent-bright) !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

:where(html[data-style-profile~="marketing"]) .mkt-section-heading {
    display: grid;
    gap: 22px;
    margin-bottom: 46px;
}

:where(html[data-style-profile~="marketing"]) .mkt-section-heading--split {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.72fr);
    align-items: end;
    justify-content: space-between;
}

:where(html[data-style-profile~="marketing"]) .mkt-section-heading--split > p,
:where(html[data-style-profile~="marketing"]) .mkt-section-heading--center > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

:where(html[data-style-profile~="marketing"]) .mkt-section-heading--split > p {
    max-width: 590px;
    justify-self: end;
}

:where(html[data-style-profile~="marketing"]) .mkt-section-heading--center {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

:where(html[data-style-profile~="marketing"]) .mkt-section-heading h2 {
    margin: 0;
    font-size: clamp(38px, 4.3vw, 58px);
    font-weight: 610;
    letter-spacing: -0.045em;
    line-height: 1.04;
}

:where(html[data-style-profile~="marketing"]) .mkt-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 700;
    transition: color 160ms ease, gap 160ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-text-link:hover {
    gap: 12px;
    color: var(--accent-bright);
}

:where(html[data-style-profile~="marketing"]) .mkt-text-link i {
    font-size: 11px;
}

/* ==========================================================================
   E02. HOMEPAGE HERO
   Current platform hero, facts column, signal-fusion visual, caption strip, availability state, and interactions.
   ========================================================================== */

/* ==========================================================================
   E02.1. HOMEPAGE HERO BACKDROP AND OUTER SHELL

   PURPOSE
   -------
   Defines the current marketing hero boundary, subtle grid mask, orange glow,
   and overall hero shell spacing.

   INCLUDES
   --------
   - Hero section/isolation
   - Grid-pattern pseudo-element
   - Large radial glow
   - Shell spacing

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The background pseudo-elements sit behind all hero content through
     negative z-index within the isolated stacking context.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(78px, 8vw, 118px) 0 86px;
    border-bottom: 1px solid var(--line-soft);
}

:where(html[data-style-profile~="marketing"]) .mkt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 88%);
    pointer-events: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(900px, 76vw);
    height: min(900px, 76vw);
    top: -520px;
    left: calc(50% - 790px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 152, 38, 0.2), rgba(238, 152, 38, 0.055) 42%, transparent 72%);
    pointer-events: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-shell {
    display: grid;
    gap: 58px;
}

/* ==========================================================================
   E02.2. HOMEPAGE HERO COPY, AVAILABILITY, AND FACTS

   PURPOSE
   -------
   Builds the two-column copy/facts composition, availability pill, primary
   headline/lede/actions, and interactive operating facts.

   INCLUDES
   --------
   - Copy grid placement
   - Availability status and pulse keyframes
   - Headline/lede/actions
   - Fact definition list and hover states

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - At 920px the facts move below the main copy and become a three-column
     strip.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(350px, 0.55fr);
    column-gap: 64px;
    align-items: end;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-kicker-row,
:where(html[data-style-profile~="marketing"]) .mkt-hero-copy h1,
:where(html[data-style-profile~="marketing"]) .mkt-hero-lede,
:where(html[data-style-profile~="marketing"]) .mkt-hero-actions {
    grid-column: 1;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-kicker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-kicker-row .mkt-eyebrow {
    margin: 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(83, 213, 142, 0.3);
    border-radius: 999px;
    color: #80dfad;
    background: rgba(53, 191, 113, 0.07);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    transition: border-color 160ms ease, background 160ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-availability:hover {
    border-color: rgba(83, 213, 142, 0.5);
    background: rgba(53, 191, 113, 0.11);
}

:where(html[data-style-profile~="marketing"]) .mkt-availability > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65d89a;
    box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.1);
}

:where(html[data-style-profile~="marketing"]) .mkt-availability i {
    font-size: 9px;
}

@keyframes mktLivePulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.10), 0 0 10px rgba(83, 213, 142, 0.24);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(83, 213, 142, 0.025), 0 0 18px rgba(83, 213, 142, 0.58);
    }
}

@keyframes mktDevelopmentPulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.10), 0 0 8px rgba(96, 165, 250, 0.22);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(96, 165, 250, 0.025), 0 0 16px rgba(96, 165, 250, 0.50);
    }
}


:where(html[data-style-profile~="marketing"]) .mkt-hero h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(44px, 4.8vw, 64px);
    font-weight: 600;
    letter-spacing: -0.058em;
    line-height: 0.99;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-lede {
    max-width: 760px;
    margin: 28px 0 0;
    color: var(--text-soft);
    font-size: clamp(18px, 1.75vw, 21px);
    /* font-size: clamp(15px, 1.5vw, 18px); */
    line-height: 1.64;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-actions {
    margin-top: 32px;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-facts {
    grid-column: 2;
    grid-row: 1 / span 4;
    display: grid;
    gap: 0;
    align-self: end;
    margin: 0;
    border-top: 1px solid var(--line);
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-facts > div {
    padding: 18px 18px;
    border-bottom: 1px solid var(--line-soft);
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-facts > div:hover {
    border-color: rgba(246, 191, 63, 0.34);
    background: rgba(238, 152, 38, 0.06);
    box-shadow: inset 0 0 0 1px rgba(246, 191, 63, 0.2);
    transform: translateX(-2px);
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-facts dt {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-facts dd {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ==========================================================================
   E02.3. HOMEPAGE SIGNAL-FUSION VISUAL AND CAPTION STRIP

   PURPOSE
   -------
   Defines the current framed hero/API visual shell, mock window bar,
   full-width illustration, and three-part evidence/action caption strip.

   INCLUDES
   --------
   - Shared hero/API visual frame
   - Window bar and brand mark
   - Responsive hero image
   - Three-column caption strip

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The richer traffic-light/title/status chrome later in E10 overrides the
     simple window-bar internals when matching markup is present.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-hero-platform,
:where(html[data-style-profile~="marketing"]) .mkt-api-visual {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(238, 152, 38, 0.23);
    border-radius: 20px;
    background: #08090b;
    box-shadow: 0 38px 120px rgba(0, 0, 0, 0.34);
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-platform::before {
    content: "";
    position: absolute;
    inset: 12% 18% -26%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 152, 38, 0.18), transparent 70%);
    filter: blur(30px);
}

:where(html[data-style-profile~="marketing"]) .mkt-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 52px;
    padding: 0 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #dcd7ce;
    background: rgba(255, 255, 255, 0.018);
    font-size: 11px;
}

:where(html[data-style-profile~="marketing"]) .mkt-window-bar > div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-window-bar strong {
    overflow: hidden;
    font-size: 11px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html[data-style-profile~="marketing"]) .mkt-window-bar > span {
    color: #77736b;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

:where(html[data-style-profile~="marketing"]) .mkt-window-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #15110c;
    background: linear-gradient(135deg, #f7c548, #e88316);
    font-family: "Rubik", sans-serif;
    font-weight: 900;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-platform > img {
    display: block;
    width: 100%;
    height: auto;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-platform figcaption {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    background: #0b0d10;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-platform figcaption span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 10px 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.075);
    color: #9f9a91;
    font-size: 11px;
    font-weight: 680;
    text-align: center;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-platform figcaption span:first-child {
    border-left: 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-hero-platform figcaption i {
    color: #eca02a;
    font-size: 12px;
}


/* ==========================================================================
   E02A. HOMEPAGE CUSTOMER MARQUEE
   Continuous social-proof logo rail positioned directly below the hero.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-customer-proof {
    position: relative;
    overflow: hidden;
    padding: 76px 0 84px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background:
        radial-gradient(circle at 50% -35%, rgba(238, 152, 38, 0.08), transparent 42%),
        rgba(255, 255, 255, 0.006);
}

/* Remove Grid */
:where(html[data-style-profile~="marketing"]) .mkt-customer-proof-heading {
    /* display: grid; */
    /* grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr); */
    /* grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
    */

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(900px, calc(100% - 48px));
    margin: 0 auto;

    text-align: center;
}

/* :where(html[data-style-profile~="marketing"]) .mkt-customer-proof-heading .mkt-eyebrow {
    margin-top: 8px;
} */

:where(html[data-style-profile~="marketing"])
.mkt-customer-proof-heading h2 {
/* :where(html[data-style-profile~="marketing"]) .mkt-customer-proof-heading h2 { */
    /* max-width: 980px;*/
    /* margin: 0;*/

    /* Added */
    /* width: 100%;
    max-width: none;

    margin: 0 auto;
    text-align: center;

    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 610;
    letter-spacing: -0.042em;
    line-height: 1.08;
    */

    width: 100%;
    max-width: 850px;

    margin: 0;

    color: var(--text);

    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.03em;

    text-align: center;
}

:where(html[data-style-profile~="marketing"])
.mkt-customer-proof-subtext {
    max-width: 680px;

    /* GAP BETWEEN H2 AND SUBTEXT */
    margin: 28px auto 0;

    /* TEXT STYLE */
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;

    text-align: center;
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-marquee {
    position: relative;
    width: 100%;
    margin-top: 46px;
    overflow: hidden;
    border: 0;
    background: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-marquee::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: mktCustomerMarquee 74s linear infinite;
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-marquee:hover .mkt-customer-marquee-track {
    animation-play-state: paused;
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-logo-set {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(46px, 5vw, 84px);
    min-width: max-content;
    padding: 20px clamp(23px, 2.5vw, 42px);
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-logo {
    position: relative;
    display: grid;
    flex: 0 0 190px;
    width: 190px;
    height: 72px;
    place-items: center;
    overflow: hidden;
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-logo img {
    grid-area: 1 / 1;
    display: block;
    max-width: none;
    height: auto;
    opacity: 0.74;
    filter: grayscale(1) invert(1) brightness(1.08) contrast(0.9);
    transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-logo .mkt-customer-logo-color {
    opacity: 0;
    filter: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-logo:hover .mkt-customer-logo-gray {
    opacity: 0;
    transform: scale(1.04);
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-logo:hover .mkt-customer-logo-color {
    opacity: 1;
    filter: none;
    transform: scale(1.04);
}

:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--pcaob img { width: 172px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--amc img { width: 142px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--apax img { width: 162px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--booz-allen img { width: 62px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--envestnet img { width: 170px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--enviva img { width: 122px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--fidelity img { width: 176px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--morgan-stanley img { width: 214px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--authority-brands img { width: 172px; }
:where(html[data-style-profile~="marketing"]) .mkt-customer-logo--regal img { width: 102px; }

@keyframes mktCustomerMarquee {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* ==========================================================================
   E03. HOMEPAGE ASSURANCE
   Operating-standard assurance cards, numbered states, icon boxes, and hover emphasis.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-assurance {
    position: relative;
    padding: 96px 0;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.01);
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.55fr);
    column-gap: 74px;
    align-items: end;
    margin-bottom: 42px;
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading .mkt-eyebrow,
:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading h2 {
    grid-column: 1;
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(38px, 4.3vw, 58px);
    font-weight: 610;
    letter-spacing: -0.045em;
    line-height: 1.04;
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--line-soft);
    gap: 1px;
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article {
    position: relative;
    min-height: 190px;
    padding: 26px;
    background: rgba(11, 13, 16, 0.98);
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

/* Added to move down the following a tad: Focused scope | Traceable results | Visible confidence | Human authority */
.mkt-assurance-grid article h3 {
    margin-top: 10px;
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article:hover {
    background: rgba(238, 152, 38, 0.075);
    box-shadow: inset 0 0 0 1px rgba(246, 191, 63, 0.24);
    transform: translateY(-2px);
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article > span {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    transition: color 180ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-icon,
:where(html[data-style-profile~="marketing"]) .mkt-model-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent-line);
    border-radius: 12px;
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.055);
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article:hover .mkt-icon,
:where(html[data-style-profile~="marketing"]) .mkt-model-grid article:hover .mkt-model-icon {
    border-color: rgba(246, 191, 63, 0.54);
    background: rgba(238, 152, 38, 0.12);
    box-shadow: 0 12px 28px rgba(238, 152, 38, 0.14);
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid h3 {
    margin: 54px 0 0;
    font-size: 21px;
    font-weight: 620;
    letter-spacing: -0.025em;
}

:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid p {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

/* ==========================================================================
   E04. HOMEPAGE PRODUCT PORTFOLIO
   Live smtpRS card, roadmap cards, lockups, status pills, visual stages, and responsive card placement.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-products {
    padding: 112px 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.009)),
        rgba(10, 12, 15, 0.88);
    box-shadow: 0 24px 82px rgba(0, 0, 0, 0.12);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

/* ==========================================================================
   E04.1. LIVE SMTPRS PORTFOLIO CARD

   PURPOSE
   -------
   Defines the full-width live-product card, split copy/visual layout, product
   metadata, status pill, lockup, supporting points, and actions.

   INCLUDES
   --------
   - Full-width card grid placement
   - Copy column and metadata
   - Live/development status pills
   - Lockup, points, and actions

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - At 920px the card becomes one column and the visual moves below the
     copy.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-product-card--live {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.83fr) minmax(540px, 1.17fr);
    min-height: 520px;
    border-color: rgba(238, 152, 38, 0.24);
    background:
        radial-gradient(circle at 22% 0%, rgba(238, 152, 38, 0.12), transparent 42%),
        rgba(10, 12, 15, 0.96);
}

:where(html[data-style-profile~="marketing"]) .mkt-product-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(36px, 4.2vw, 58px);
}

:where(html[data-style-profile~="marketing"]) .mkt-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

:where(html[data-style-profile~="marketing"]) .mkt-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 999px;
    color: #92c5fd;
    background: rgba(59, 130, 246, 0.08);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-status:not(.mkt-status--live)::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #60a5fa;
    animation: mktDevelopmentPulse 2.5s ease-in-out infinite;
}

:where(html[data-style-profile~="marketing"]) .mkt-status--live {
    border-color: rgba(83, 213, 142, 0.34);
    color: #80dfad;
    background: rgba(53, 191, 113, 0.08);
}

:where(html[data-style-profile~="marketing"]) .mkt-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #65d89a;
    animation: mktLivePulse 2.5s ease-in-out infinite;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-lockup {
    display: block;
    width: auto;
    max-width: min(240px, 70%);
    max-height: 56px;
    margin-top: 34px;
    object-fit: contain;
    object-position: left center;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-card--live .mkt-product-lockup {
    max-width: min(270px, 75%);
    max-height: 66px;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-copy h3,
:where(html[data-style-profile~="marketing"]) .mkt-roadmap-copy h3 {
    margin: 28px 0 0;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-copy > p {
    max-width: 600px;
    margin: 18px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.7;
}

:where(html[data-style-profile~="marketing"]) .mkt-inline-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-inline-points li {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.02);
    font-size: 11px;
    font-weight: 700;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (hover: hover) {
    :where(html[data-style-profile~="marketing"]) .mkt-inline-points li:hover {
        color: #f6bf3f;
        border-color: rgba(246, 191, 63, 0.52);
        background: rgba(246, 191, 63, 0.08);
        box-shadow: 0 7px 18px rgba(246, 191, 63, 0.1);
        transform: translateY(-2px);
    }

    html[data-theme="light"]:where([data-style-profile~="marketing"]) .mkt-inline-points li:hover {
        color: #b7650d;
        border-color: rgba(183, 101, 13, 0.52);
        background: rgba(183, 101, 13, 0.08);
        box-shadow: 0 7px 18px rgba(183, 101, 13, 0.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(html[data-style-profile~="marketing"]) .mkt-inline-points li {
        transition: none;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-inline-points li:hover {
        transform: none;
    }
}

:where(html[data-style-profile~="marketing"]) .mkt-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 32px;
}

/* ==========================================================================
   E04.2. LIVE PRODUCT LAPTOP VISUAL AND OPERATIONAL INDICATOR

   PURPOSE
   -------
   Builds the gridded laptop illustration stage and anchors a green pulse to a
   measured point inside the source image.

   INCLUDES
   --------
   - Visual canvas and border
   - Oversized image stage
   - Contained illustration
   - Percentage-based live indicator and shared anchored pulse

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The stage width intentionally exceeds 100% for composition.
   - Keep indicator percentages coordinated with the source image.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-product-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-left: 1px solid var(--line);
    background:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        radial-gradient(circle at 48% 58%, rgba(238, 152, 38, 0.13), transparent 44%),
        #08090b;
    background-size: 52px 52px, 52px 52px, auto, auto;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-visual-stage {
    position: relative;
    width: 112%;
    aspect-ratio: 1672 / 941;
    transform: translateX(2%);
}

:where(html[data-style-profile~="marketing"]) .mkt-product-visual-stage > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18));
}

:where(html[data-style-profile~="marketing"]) .mkt-product-live-indicator {
    position: absolute;
    top: 73.01%;
    left: 76.8%;
    z-index: 2;
    width: 0;
    height: 0;
    pointer-events: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-live-indicator::before,
:where(html[data-style-profile~="marketing"]) .mkt-api-visual-live::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(5px, 0.7vw, 10px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #53d58e;
    transform-origin: center;
    animation: mktAnchoredLivePulse 2.5s ease-in-out infinite;
}

/* ==========================================================================
   E04.3. ROADMAP PRODUCT CARDS

   PURPOSE
   -------
   Defines the three smaller roadmap cards, image crops, hover zoom, copy
   column, lockups, and bottom-aligned text links.

   INCLUDES
   --------
   - Desktop 12-column placement
   - Roadmap visual/image overlay
   - Hover lift/zoom
   - Roadmap copy and action

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Intermediate widths display two cards per row and center the final card
     before phone layouts stack them.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    min-height: 570px;
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-visual {
    position: relative;
    min-height: 228px;
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: #08090b;
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(8, 9, 11, 0.42));
    pointer-events: none;
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 228px;
    object-fit: cover;
    object-position: center;
    transition: transform 420ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap:hover {
    border-color: rgba(246, 191, 63, 0.38);
    background:
        radial-gradient(circle at 18% 0%, rgba(238, 152, 38, 0.085), transparent 34%),
        rgba(10, 12, 15, 0.94);
    box-shadow: 0 28px 88px rgba(238, 152, 38, 0.08);
    transform: translateY(-2px);
}

:where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap:hover .mkt-roadmap-visual img {
    transform: scale(1.025);
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-copy .mkt-product-lockup {
    max-width: min(210px, 70%);
    max-height: 48px;
    margin-top: 28px;
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-copy h3 {
    margin-top: 24px;
    font-size: 25px;
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-copy > p {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

:where(html[data-style-profile~="marketing"]) .mkt-roadmap-copy .mkt-text-link {
    margin-top: auto;
    padding-top: 28px;
}

/* ==========================================================================
   E05. HOMEPAGE OPERATING MODEL
   Connect/Evaluate/Explain/Govern model grid and its numbered/icon treatments.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-model {
    position: relative;
    padding: 112px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        rgba(255, 255, 255, 0.008);
    background-size: 60px 60px, 60px 60px, auto;
}

:where(html[data-style-profile~="marketing"]) .mkt-model-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(9, 11, 14, 0.96);
}

:where(html[data-style-profile~="marketing"]) .mkt-model-grid::before {
    content: "";
    position: absolute;
    top: 47px;
    left: 11%;
    right: 11%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(238, 152, 38, 0.34), transparent);
}

:where(html[data-style-profile~="marketing"]) .mkt-model-grid article {
    position: relative;
    min-height: 225px;
    padding: 24px;
    border-left: 1px solid var(--line-soft);
}

/* Added to move down the following a tad: Connect | Evaluate | Explain | Govern */
.mkt-model-grid article h3 {
    margin-top: 10px;
}

:where(html[data-style-profile~="marketing"]) .mkt-model-grid article:first-child {
    border-left: 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-model-grid article > span {
    position: absolute;
    top: 22px;
    right: 22px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

:where(html[data-style-profile~="marketing"]) .mkt-model-icon {
    position: relative;
    z-index: 1;
    background: #0b0d10;
}

:where(html[data-style-profile~="marketing"]) .mkt-model-grid h3 {
    margin: 48px 0 0;
    font-size: 23px;
    font-weight: 620;
    letter-spacing: -0.025em;
}

:where(html[data-style-profile~="marketing"]) .mkt-model-grid p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.68;
}

/* ==========================================================================
   E06. HOMEPAGE INTEGRATION
   API result visual, live indicator, integration copy/list, and hover states.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-integration {
    padding: 112px 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-grid {
    display: grid;
    grid-template-columns: minmax(520px, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(54px, 7vw, 92px);
    align-items: center;
}

:where(html[data-style-profile~="marketing"]) .mkt-api-visual {
    align-self: center;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.18);
}

:where(html[data-style-profile~="marketing"]) .mkt-api-visual-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1402 / 1122;
}

:where(html[data-style-profile~="marketing"]) .mkt-api-visual-stage > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

:where(html[data-style-profile~="marketing"]) .mkt-api-visual-light {
    display: none !important;
}


:where(html[data-style-profile~="marketing"]) .mkt-api-visual-live {
    position: absolute;
    top: 13.9%;
    left: 13.75%;
    z-index: 2;
    width: 0;
    height: 0;
    pointer-events: none;
}

@keyframes mktAnchoredLivePulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.94);
        box-shadow: 0 0 0 4px rgba(83, 213, 142, 0.10), 0 0 10px rgba(83, 213, 142, 0.24);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 0 0 8px rgba(83, 213, 142, 0.025), 0 0 18px rgba(83, 213, 142, 0.58);
    }
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-copy h2 {
    margin: 0;
    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 610;
    letter-spacing: -0.045em;
    line-height: 1.04;
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-copy > p:not(.mkt-eyebrow) {
    margin: 24px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-list {
    display: grid;
    gap: 0;
    margin: 30px 0 34px;
    border-top: 1px solid var(--line);
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-list article {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 18px;
    border-bottom: 1px solid var(--line-soft);
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-list article:hover {
    border-color: rgba(246, 191, 63, 0.36);
    background: rgba(238, 152, 38, 0.06);
    box-shadow: inset 0 0 0 1px rgba(246, 191, 63, 0.18);
    transform: translateX(2px);
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-list > article > i {
    margin-top: 3px;
    color: var(--accent-bright);
    font-size: 14px;
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-list h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 720;
    letter-spacing: -0.01em;
}

:where(html[data-style-profile~="marketing"]) .mkt-integration-list p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.58;
}

/* ==========================================================================
   E07. HOMEPAGE TRUST AND FINAL CTA
   Documentation/security/legal trust cards plus the closing conversion panel.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-trust {
    padding: 112px 0;
    border-top: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.009);
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a {
    position: relative;
    min-height: 168px;
    padding: 16px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.015);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a:hover {
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.035);
    transform: translateY(-2px);
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a > span {
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid h3 {
    max-width: 500px;
    margin: 10px 0 0;
    font-size: 25px;
    font-weight: 610;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid p {
    max-width: 560px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.66;
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a > i {
    position: absolute;
    right: 22px;
    bottom: 16px;
    color: var(--accent-bright);
    font-size: 13px;
    transition: transform 180ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a:hover > i {
    transform: translateX(4px);
}

:where(html[data-style-profile~="marketing"]) .mkt-final {
    padding: 94px 0 112px;
}

:where(html[data-style-profile~="marketing"]) .mkt-final-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
    overflow: hidden;
    padding: clamp(38px, 5vw, 64px);
    border: 1px solid rgba(238, 152, 38, 0.25);
    border-radius: 20px;
    background:
        radial-gradient(circle at 86% 12%, rgba(246, 191, 63, 0.13), transparent 30%),
        linear-gradient(135deg, rgba(238, 152, 38, 0.08), rgba(255, 255, 255, 0.012) 48%, rgba(238, 152, 38, 0.025)),
        #0b0d10;
}

:where(html[data-style-profile~="marketing"]) .mkt-final-card::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -70px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(238, 152, 38, 0.12);
    border-radius: 50%;
}

:where(html[data-style-profile~="marketing"]) .mkt-final-card h2 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(34px, 3.7vw, 48px);
    font-weight: 610;
    letter-spacing: -0.048em;
    line-height: 1.02;
}

:where(html[data-style-profile~="marketing"]) .mkt-final-card p:not(.mkt-eyebrow) {
    max-width: 720px;
    margin: 20px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.68;
}

:where(html[data-style-profile~="marketing"]) .mkt-final-card .hero-actions {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
}

/* ==========================================================================
   E08. PRODUCT-PAGE MATURITY OVERRIDES
   Shared product hero, sticky subnav, outcomes, sections, step/feature/principle grids, demos, roadmap, and final CTA.
   ========================================================================== */

/* ==========================================================================
   E08.1. PRODUCT TYPOGRAPHY, HERO, AND PRIMARY VISUAL REFINEMENT

   PURPOSE
   -------
   Applies the current established-company typography and density to shared
   SaaS product pages, then refines hero spacing, background effects, copy,
   proof points, and primary visuals.

   INCLUDES
   --------
   - Product heading scales
   - Hero grid/glow
   - Product line and lede
   - Primary visual borders/radii/shadows
   - InvoiceGuard hero sizing

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These selectors intentionally appear after Section B and therefore
     provide the final marketing-profile presentation.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .product-saas-page main {
    overflow: clip;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page main h1 {
    max-width: 760px;
    /* font-size: clamp(48px, 5.4vw, 72px); */
    font-size: clamp(38px, 3.8vw, 52px);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page main h2 {
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 610;
    letter-spacing: -0.045em;
    line-height: 1.04;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page main h3 {
    font-weight: 620;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-hero {
    padding: clamp(78px, 7vw, 104px) 0 78px;
    border-bottom: 1px solid var(--line-soft);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-hero::before {
    background:
        linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
    background-size: 64px 64px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-hero::after {
    width: 840px;
    height: 840px;
    top: -530px;
    left: calc(50% - 780px);
    background: radial-gradient(circle, rgba(238, 152, 38, 0.19), rgba(238, 152, 38, 0.045) 44%, transparent 72%);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
    gap: clamp(52px, 6vw, 84px);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-product-line {
    margin-bottom: 25px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-product-line > span:first-child {
    font-size: 11px;
    letter-spacing: 0.14em;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-lede {
    max-width: 720px;
    margin-top: 25px;
    /* font-size: clamp(18px, 1.6vw, 20px); */
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.65;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-proof {
    gap: 10px 20px;
    margin-top: 28px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-proof span {
    color: var(--muted);
    font-size: 12px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-workflow-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-evidence-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-contract-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-waitlist-visual {
    border-color: rgba(238, 152, 38, 0.2);
    border-radius: 18px;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.3);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-visual {
    transform: none;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-window-head {
    min-height: 50px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .invoiceguard-hero-theme-visual {
    width: min(116%, 790px);
    margin-inline: -8%;
}

/* ==========================================================================
   E08.2. FINAL PRODUCT SUBNAV AND OUTCOME-BAND REFINEMENT

   PURPOSE
   -------
   Sets the final sticky offset beneath the collapsible site header, refines
   the subnav CTA, and adjusts the outcome band grid, spacing, and row density.

   INCLUDES
   --------
   - Header-aware subnav offset
   - Reduced-motion transition removal
   - Subnav row/CTA sizing
   - Outcome band columns and rows

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The fallback offset is 89px and must match the desktop header height.
   - JavaScript updates --site-header-visible-height while the main header
     collapses.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-subnav {
    top: var(--site-header-visible-height, 89px);
    border-top: 0;
    background: rgba(10, 11, 13, 0.96);
    transition: top 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-subnav {
        transition: none;
    }
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-subnav .container {
    min-height: 60px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-subnav strong {
    letter-spacing: -0.01em;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-subnav .product-saas-subnav-cta {
    border-radius: 8px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcomes {
    background:
        linear-gradient(90deg, rgba(238, 152, 38, 0.035), transparent 46%),
        rgba(255, 255, 255, 0.008);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcomes-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr);
    padding-top: 70px;
    padding-bottom: 70px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcomes h2 {
    font-size: clamp(34px, 3.7vw, 48px);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcome-list {
    border-radius: 14px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcome-list article {
    min-height: 72px;
    align-items: center;
    padding: 16px 18px;
}

/* ==========================================================================
   E08.3. PRODUCT SECTION RHYTHM, WORKFLOW, AND STEP GRID

   PURPOSE
   -------
   Defines the final section spacing, muted section surfaces, heading layouts,
   workflow/contract margins, and compact numbered step cards.

   INCLUDES
   --------
   - Section padding/backgrounds
   - Split/centered headings
   - Workflow/evidence/contract spacing
   - Compact step grid/cards

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The 720px marketing breakpoint stacks step cards and removes internal
     side borders.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section {
    padding: 108px 0;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section--muted,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section--integration,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principles,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-roadmap {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.009);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section-heading {
    margin-bottom: 44px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section-heading--split {
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.64fr);
    gap: 64px;
    align-items: end;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section-heading--split > p,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section-heading--center > p:last-child {
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-workflow-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-contract-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-evidence-visual {
    margin-top: 38px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-step-grid {
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--line-soft);
    gap: 1px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-step-grid article {
    min-height: 190px;
    padding: 22px 24px;
    border: 0;
    background: rgba(10, 12, 15, 0.97);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-step-grid h3 {
    margin-top: 38px;
    font-size: 21px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-step-grid p {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.62;
}

:where(html[data-style-profile~="marketing"]) :is(.product-saas-invoiceguard, .product-saas-retainiq, .product-saas-vendorlens) .product-saas-step-grid article {
    min-height: 145px;
    padding: 7px 18px 11px;
}

:where(html[data-style-profile~="marketing"]) :is(.product-saas-invoiceguard, .product-saas-retainiq, .product-saas-vendorlens) .product-saas-step-grid h3 {
    margin-top: 8px;
}

:where(html[data-style-profile~="marketing"]) :is(.product-saas-invoiceguard, .product-saas-retainiq, .product-saas-vendorlens) .product-saas-step-grid p {
    margin-top: 8px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-smtprs .product-saas-step-grid article {
    min-height: 145px;
    padding: 7px 18px 11px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-smtprs .product-saas-step-grid h3 {
    margin-top: 8px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-smtprs .product-saas-step-grid p {
    margin-top: 8px;
}

/* ==========================================================================
   E08.4. PRODUCT FEATURES, EVIDENCE, INTEGRATION, PRINCIPLES, AND ROADMAP

   PURPOSE
   -------
   Applies the final card density and gap system across feature/use-case cards,
   evidence/integration/API/demo splits, principles, and roadmap columns.

   INCLUDES
   --------
   - Feature grid/card refinement
   - Evidence and integration gaps/lists
   - Principle grid/card refinement
   - Roadmap columns and cards

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These are presentation overrides only; the structural grid definitions
     remain in Section B.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-feature-grid {
    gap: 12px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-feature-card {
    min-height: 240px;
    padding: 24px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent),
        rgba(10, 12, 15, 0.92);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-usecase-grid .product-saas-feature-card {
    min-height: 190px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-smtprs .product-saas-usecase-grid .product-saas-feature-card {
    min-height: 114px;
    padding: 7px 24px 11px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-smtprs .product-saas-usecase-grid .product-saas-feature-card h3 {
    margin-top: 8px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-smtprs .product-saas-usecase-grid .product-saas-feature-card p {
    margin-top: 13px;
}

:where(html[data-style-profile~="marketing"]) :is(.product-saas-invoiceguard, .product-saas-retainiq, .product-saas-vendorlens) .product-saas-feature-card {
    min-height: 145px;
    padding: 7px 24px 11px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-feature-card:hover {
    transform: translateY(-2px);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-feature-card h3 {
    margin-top: 42px;
    font-size: 22px;
    line-height: 1.17;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-feature-card p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.64;
}

:where(html[data-style-profile~="marketing"]) :is(.product-saas-invoiceguard, .product-saas-retainiq, .product-saas-vendorlens) .product-saas-feature-card h3 {
    margin-top: 8px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-evidence-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-integration-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-api-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-demo-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-roadmap-grid {
    gap: clamp(54px, 7vw, 90px);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-evidence-list,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-integration-list {
    border-top: 1px solid var(--line);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-evidence-list article {
    padding: 22px 0;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--line-soft);
    gap: 1px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid article {
    min-height: 180px;
    padding: 24px;
    border: 0;
    background: rgba(10, 12, 15, 0.97);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid h3 {
    margin-top: 42px;
    font-size: 22px;
}


:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid p {
    margin-top: 10px;
    line-height: 1.62;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid article {
    min-height: 145px;
    padding: 7px 24px 11px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid h3 {
    margin-top: 8px;
}

@media (hover: hover) and (pointer: fine) {
    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid article:hover {
        background:
            linear-gradient(135deg, rgba(238, 152, 38, 0.18), rgba(238, 152, 38, 0.075)),
            #0d0e11;
        box-shadow: inset 0 0 0 1px rgba(246, 191, 63, 0.2);
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid article:hover::after {
        border-color: transparent;
        box-shadow: none;
    }

    html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-principle-grid article:hover {
        background:
            linear-gradient(135deg, rgba(238, 152, 38, 0.2), rgba(238, 152, 38, 0.08)),
            #fffaf1;
        box-shadow: inset 0 0 0 1px rgba(183, 101, 13, 0.18);
    }
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-roadmap-columns {
    gap: 16px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-roadmap-columns article {
    min-height: 250px;
    padding: 28px;
    border-radius: 16px;
    background: rgba(10, 12, 15, 0.92);
}

/* ==========================================================================
   E08.5. PRODUCT DEMO, CODE, FORM, AND FINAL CTA REFINEMENT

   PURPOSE
   -------
   Finishes the marketing-profile product system by refining demo/code
   surfaces, input radius/height, and the closing CTA panel.

   INCLUDES
   --------
   - Demo/code radius and shadow
   - Demo input sizing
   - Final section spacing/background/heading

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Functional form behavior and code content are unchanged.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-demo-tool,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-code-panel {
    border-radius: 16px;
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.22);
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-demo-form .field input {
    min-height: 52px;
    border-radius: 10px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-final {
    padding: 94px 0 112px;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-final-card {
    padding: clamp(38px, 5vw, 62px);
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 10%, rgba(246, 191, 63, 0.12), transparent 28%),
        linear-gradient(135deg, rgba(238, 152, 38, 0.075), rgba(255, 255, 255, 0.012)),
        #0b0d10;
}

:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-final-card h2 {
    max-width: 780px;
    font-size: clamp(32px, 3.5vw, 46px);
}

/* ==========================================================================
   E09. PRICING, DOCUMENTATION, AND CONTACT
   Standard hero system, assurance strip, pricing tiers, docs layouts/cards, contact intro, and form shell.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .page-pricing main,
:where(html[data-style-profile~="marketing"]) .page-docs main,
:where(html[data-style-profile~="marketing"]) .page-contact main {
    overflow: clip;
}

/* ==========================================================================
   E09.1. STANDARD MARKETING HERO FOR PRICING, DOCS, AND CONTACT

   PURPOSE
   -------
   Creates a common mature-page hero with the subtle grid backdrop, orange
   glow, split copy/summary layout, and consistent heading/lede/action scale.

   INCLUDES
   --------
   - Shared hero surface and pseudo-elements
   - Split hero grid
   - Heading/lede/actions
   - Summary panel

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Each page inherits the same structure while retaining its own body
     content below.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(76px, 7vw, 104px) 0 76px;
    border-bottom: 1px solid var(--line-soft);
}

:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero::before,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero::before,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 90%);
}

:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero::after,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero::after,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 760px;
    height: 760px;
    top: -490px;
    left: calc(50% - 710px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 152, 38, 0.18), rgba(238, 152, 38, 0.04) 44%, transparent 72%);
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.56fr);
    gap: 70px;
    align-items: end;
}

/*
Font Resize
 - Page: pages/docs/
 - Text: Documentation for products your systems can rely on.
*/
:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero h1,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero h1,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero h1,
:where(html[data-style-profile~="marketing"]) .page-careers .standard-hero h1 {
    max-width: 860px;
    margin: 0;
    /* font-size: clamp(48px, 5.5vw, 72px); */
    font-size: clamp(38px, 3.8vw, 52px);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1;
}

/*
Font Resize
 - Page: pages/docs/
 - Text: Review the product contract before you commit....
*/
:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero .lede,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero .lede,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero .lede,
:where(html[data-style-profile~="marketing"]) .page-careers .standard-hero .lede {
    max-width: 760px;
    margin: 25px 0 0;
    color: var(--text-soft);
    /* font-size: clamp(18px, 1.6vw, 20px); */
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.66;
}

:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero .hero-actions,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero .hero-actions,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero .hero-actions,
:where(html[data-style-profile~="marketing"]) .page-careers .standard-hero .hero-actions {
    margin-top: 30px;
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-summary {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(10, 12, 15, 0.88);
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-summary > span {
    display: block;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.035);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-summary dl {
    margin: 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-summary dl > div {
    display: grid;
    grid-template-columns: minmax(100px, 0.62fr) minmax(0, 1fr);
    gap: 20px;
    padding: 16px 18px;
    border-top: 1px solid var(--line-soft);
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-summary dl > div:first-child {
    border-top: 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-summary dt {
    color: var(--text);
    font-size: 13px;
    font-weight: 720;
}

:where(html[data-style-profile~="marketing"]) .mkt-standard-summary dd {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

/* ==========================================================================
   E09.2. STANDARD PAGE ASSURANCE STRIP

   PURPOSE
   -------
   Defines the three-column informational strip used beneath standard heroes
   for pricing, documentation, and contact context.

   INCLUDES
   --------
   - Full-width assurance band
   - Three equal columns
   - Heading and supporting copy

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Phone layouts stack the rows and replace vertical separators with
     horizontal ones.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance {
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.008);
}

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border-right: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
}

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid article {
    position: relative;
    min-height: 112px;
    padding: 22px 24px;
    border-left: 1px solid var(--line-soft);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid article:hover {
    z-index: 1;
    background: rgba(238, 152, 38, 0.04);
    box-shadow:
        inset 0 0 0 1px rgba(246, 191, 63, 0.28),
        inset 0 0 28px rgba(238, 152, 38, 0.11);
}

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid article:first-child {
    border-left: 0;
}

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid strong,
:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid span {
    display: block;
}

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 730;
}

:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

/* ==========================================================================
   E09.3. PRICING PAGE FINAL DENSITY AND CARD TREATMENT

   PURPOSE
   -------
   Applies mature-page section spacing, tier-card dimensions, featured-plan
   emphasis, and credit-pack spacing.

   INCLUDES
   --------
   - Plan section rhythm
   - Tier grid/card treatment
   - Featured tier shadow
   - Credit-pack spacing

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The base pricing feature list and comparison table remain in A13.2.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .page-pricing .plan-section,
:where(html[data-style-profile~="marketing"]) .page-docs main > .section,
:where(html[data-style-profile~="marketing"]) .page-contact .form-section {
    padding-top: 96px;
    padding-bottom: 108px;
}

:where(html[data-style-profile~="marketing"]) .page-pricing .pricing-tier-grid {
    gap: 16px;
}

:where(html[data-style-profile~="marketing"]) .page-pricing .tier-card {
    min-height: 590px;
    padding: 28px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 44%),
        rgba(10, 12, 15, 0.9);
}

:where(html[data-style-profile~="marketing"]) .page-pricing .tier-card.featured-tier {
    border-color: rgba(238, 152, 38, 0.35);
    box-shadow: 0 26px 82px rgba(238, 152, 38, 0.06);
}

:where(html[data-style-profile~="marketing"]) .page-pricing .tier-card h2 {
    margin: 18px 0 0;
    font-size: 38px;
    font-weight: 620;
}

:where(html[data-style-profile~="marketing"]) .page-pricing .tier-card p {
    color: var(--text-soft);
}

:where(html[data-style-profile~="marketing"]) .page-pricing .price-block {
    width: 100%;
}

:where(html[data-style-profile~="marketing"]) .page-pricing .comparison-table,
:where(html[data-style-profile~="marketing"]) .page-pricing .credit-pack-pricing {
    border-radius: 16px;
}

:where(html[data-style-profile~="marketing"]) .page-pricing .credit-pack-pricing {
    margin-top: 76px;
}

:where(html[data-style-profile~="marketing"]) .page-pricing p.kicker {
    color: var(--accent-bright);
}

/* ==========================================================================
   E09.4. DOCUMENTATION PAGE FINAL LAYOUT AND API CARDS

   PURPOSE
   -------
   Refines the docs reference shell, sticky navigation, article heading/copy,
   API-card density, and available-card hover lift.

   INCLUDES
   --------
   - Docs shell columns/gap
   - Sticky sidebar surface
   - Article heading and copy
   - API grid/card typography

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - At 920px the docs shell becomes one column and the sidebar becomes a
     wrapping row.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .page-docs .docs-reference-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 42px;
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-sidebar {
    position: sticky;
    top: 124px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(10, 12, 15, 0.88);
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-article {
    min-width: 0;
}
/*
Font Resize
 - Page: pages/docs/
 - Text: Product documentation and roadmap.
*/
:where(html[data-style-profile~="marketing"]) .page-docs .docs-section > h2 {
    margin: 0;
    /* font-size: clamp(36px, 4vw, 52px); */
    font-size: clamp(30px, 3.3vw, 43px);
    font-weight: 610;
    letter-spacing: -0.043em;
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-section > p {
    max-width: 760px;
    margin-top: 20px;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.72;
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-api-grid {
    gap: 16px;
    margin-top: 34px;
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-api-card {
    min-height: 230px;
    padding: 26px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent),
        rgba(10, 12, 15, 0.9);
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-api-card.is-available:hover {
    transform: translateY(-2px);
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-api-card strong {
    font-family: "Rubik", "Aptos", sans-serif;
    font-size: 24px;
    font-weight: 620;
}

:where(html[data-style-profile~="marketing"]) .page-docs .docs-api-card p {
    font-family: "Aptos", sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

/* ==========================================================================
   E09.5. CONTACT PAGE INTRODUCTION AND FORM SHELL

   PURPOSE
   -------
   Defines the final contact-page split introduction, context card, centered
   form container, and field radius/height refinements.

   INCLUDES
   --------
   - Contact intro columns
   - Contact context card
   - Centered form shell
   - Input/select/textarea refinements

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The shared field/validation/Turnstile system remains in A13.4-A13.5.
   ========================================================================== */

:where(html[data-style-profile~="marketing"]) .page-contact .contact-intro {
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.58fr);
    gap: 70px;
    align-items: end;
}

:where(html[data-style-profile~="marketing"]) .page-contact .contact-card {
    padding: 28px;
    border-radius: 16px;
    background: rgba(10, 12, 15, 0.88);
}

:where(html[data-style-profile~="marketing"]) .page-contact .contact-card h2 {
    margin: 24px 0 0;
    font-size: 30px;
    font-weight: 610;
}

:where(html[data-style-profile~="marketing"]) .page-contact .form-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 36px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 45%),
        rgba(10, 12, 15, 0.9);
}

:where(html[data-style-profile~="marketing"]) .page-contact .site-form .field input,
:where(html[data-style-profile~="marketing"]) .page-contact .site-form .field textarea,
:where(html[data-style-profile~="marketing"]) .page-contact .site-form .field select {
    border-radius: 10px;
}

:where(html[data-style-profile~="marketing"]) .page-contact .site-form .field input,
:where(html[data-style-profile~="marketing"]) .page-contact .site-form .field select {
    min-height: 52px;
}

:where(html[data-style-profile~="marketing"]) .page-contact .site-form .field > .kicker {
    margin: 0;
    color: #f6bf3f;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

html[data-theme="light"]:where([data-style-profile~="marketing"]) .page-contact .site-form .field > .kicker {
    color: #b7650d;
}


/* ==========================================================================
   E10. SHARED VISUAL CHROME
   Traffic lights, centered title/LIVE group, SYSTEM STATUS/UTC group, motion, theme colors, and responsive scaling.
   ========================================================================== */

/*
 * Three persistent zones:
 *   left   = macOS window controls
 *   center = title + LIVE badge as one centered group
 *   right  = SYSTEM STATUS + health pulse + divider + UTC clock
 */
:where(html[data-style-profile~="marketing"]) .mkt-window-bar,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-window-head {
    --visual-chrome-edge: 17px;
    --visual-chrome-center-safe: 190px;

    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-right: var(--visual-chrome-edge);
    padding-left: var(--visual-chrome-edge);
    overflow: visible;
}

/* --------------------------------------------------------------------------
   Visual chrome: left zone
   macOS-style traffic-light controls anchored to the left.
   -------------------------------------------------------------------------- */

:where(html[data-style-profile~="marketing"]) .mkt-window-bar > .visual-chrome-controls,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head > .visual-chrome-controls {
    position: static;

    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;

    min-width: max-content;
    margin: 0;
    white-space: nowrap;
    transform: none;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot {
    display: block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.18),
        0 0 8px rgba(255, 255, 255, 0.035);
    transform-origin: center;
    transition:
        filter 180ms ease-out,
        box-shadow 200ms ease-out,
        transform 180ms ease-out;
    will-change: filter, box-shadow, transform;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot--close {
    background: #ff5f57;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot--minimize {
    background: #febc2e;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot--maximize {
    background: #28c840;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot:hover {
    filter: brightness(1.22) saturate(1.12);
    transform: scale(1.18);
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot--close:hover {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(255, 95, 87, 1),
        0 0 14px rgba(255, 95, 87, 0.72),
        0 0 24px rgba(255, 95, 87, 0.32);
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot--minimize:hover {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(254, 188, 46, 1),
        0 0 14px rgba(254, 188, 46, 0.72),
        0 0 24px rgba(254, 188, 46, 0.32);
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-dot--maximize:hover {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(40, 200, 64, 1),
        0 0 14px rgba(40, 200, 64, 0.72),
        0 0 24px rgba(40, 200, 64, 0.32);
}

/* --------------------------------------------------------------------------
   Visual chrome: center zone
   Title and LIVE badge form one mathematically centered group.
   -------------------------------------------------------------------------- */

:where(html[data-style-profile~="marketing"]) .mkt-window-bar > .visual-chrome-center,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head > .visual-chrome-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: max-content;
    max-width: calc(100% - (var(--visual-chrome-center-safe) * 2));
    min-width: 0;
    margin: 0;

    white-space: nowrap;
    transform: translate(-50%, -50%);
}

:where(html[data-style-profile~="marketing"]) .mkt-window-bar .visual-chrome-center > strong,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head .visual-chrome-center > strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;

    color: #dcd7ce;
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.075em;
    line-height: 1;

    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 21px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 95, 87, 0.42);
    border-radius: 999px;
    color: #ff766f;
    background: rgba(255, 95, 87, 0.09);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.075em;
    line-height: 1;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-live > i {
    position: relative;
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow:
        0 0 6px rgba(255, 95, 87, 0.9),
        0 0 12px rgba(255, 95, 87, 0.45);
    transform-origin: center;
    animation: visualChromeLivePulse 1.6s ease-in-out infinite;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-live > i::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(255, 95, 87, 0.72);
    border-radius: 50%;
    pointer-events: none;
    animation: visualChromeLiveRing 1.6s ease-out infinite;
}

/* --------------------------------------------------------------------------
   Visual chrome: right zone
   SYSTEM STATUS, green health pulse, divider, and tabular UTC clock.
   -------------------------------------------------------------------------- */

:where(html[data-style-profile~="marketing"]) .mkt-window-bar > .visual-chrome-system,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head > .visual-chrome-system {
    position: static;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 5px;

    min-width: max-content;
    margin: 0 0 0 auto;

    color: #8f8b84;
    white-space: nowrap;
    transform: none;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-system-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #8f8b84;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * SYSTEM STATUS indicator:
 * - uses the same restrained pulse language as the LIVE indicator
 * - the core breathes gently instead of dramatically changing size
 * - a single thin ring expands and fades; no second halo layer
 */
:where(html[data-style-profile~="marketing"]) .visual-chrome-health {
    position: relative;
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #63e36b;
    box-shadow:
        0 0 6px rgba(99, 227, 107, 0.90),
        0 0 12px rgba(99, 227, 107, 0.45);
    transform-origin: center;
    animation: visualChromeHealthPulse 1.6s ease-in-out infinite;
    will-change: transform, box-shadow;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-health::before {
    content: none;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-health::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(99, 227, 107, 0.72);
    border-radius: 50%;
    pointer-events: none;
    animation: visualChromeHealthRing 1.6s ease-out infinite;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 2px;
    overflow: hidden;
    flex: 0 0 1px;
    color: transparent;
    background: rgba(201, 197, 189, 0.48);
    font-size: 0;
    line-height: 0;
}

:where(html[data-style-profile~="marketing"]) .visual-chrome-clock {
    min-width: 0;
    flex: 0 0 auto;
    color: #c9c5bd;
    font-family: "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: 0.025em;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Visual chrome animations
   Red LIVE and green SYSTEM STATUS pulse/ring keyframes.
   -------------------------------------------------------------------------- */

@keyframes visualChromeLivePulse {
    0%,
    100% {
        transform: scale(0.90);
        box-shadow:
            0 0 5px rgba(255, 95, 87, 0.82),
            0 0 10px rgba(255, 95, 87, 0.38);
    }

    50% {
        transform: scale(1.22);
        box-shadow:
            0 0 9px rgba(255, 95, 87, 1),
            0 0 20px rgba(255, 95, 87, 0.82);
    }
}

@keyframes visualChromeLiveRing {
    0% {
        opacity: 0.88;
        transform: scale(0.45);
    }

    72%,
    100% {
        opacity: 0;
        transform: scale(1.72);
    }
}

@keyframes visualChromeHealthPulse {
    0%,
    100% {
        transform: scale(0.90);
        box-shadow:
            0 0 5px rgba(99, 227, 107, 0.82),
            0 0 10px rgba(99, 227, 107, 0.38);
    }

    50% {
        transform: scale(1.18);
        box-shadow:
            0 0 8px rgba(99, 227, 107, 1),
            0 0 17px rgba(99, 227, 107, 0.72);
    }
}

@keyframes visualChromeHealthRing {
    0% {
        opacity: 0.78;
        transform: scale(0.48);
    }

    72%,
    100% {
        opacity: 0;
        transform: scale(1.65);
    }
}

/* --------------------------------------------------------------------------
   Visual chrome light-theme colors
   Maintains readable title/status/clock colors over dark visual bars.
   -------------------------------------------------------------------------- */

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-window-bar .visual-chrome-center > strong,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-window-head .visual-chrome-center > strong {
    color: #f0ece3;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .visual-chrome-system-label {
    color: #aaa49a;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .visual-chrome-clock {
    color: #dad5cb;
}

/* --------------------------------------------------------------------------
   Visual chrome responsive behavior
   Scales controls and text at narrow widths without intentionally hiding zones.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    :where(html[data-style-profile~="marketing"]) .mkt-window-bar,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-window-head {
        --visual-chrome-edge: 12px;
        --visual-chrome-center-safe: 150px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-window-bar > .visual-chrome-controls,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head > .visual-chrome-controls {
        gap: 6px;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-dot {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-window-bar > .visual-chrome-center,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head > .visual-chrome-center {
        gap: 5px;
        max-width: calc(100% - (var(--visual-chrome-center-safe) * 2));
    }

    :where(html[data-style-profile~="marketing"]) .mkt-window-bar .visual-chrome-center > strong,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head .visual-chrome-center > strong {
        max-width: 100%;
        font-size: 8px;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-live {
        min-height: 18px;
        padding: 2px 5px;
        font-size: 7px;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-system-label {
        gap: 4px;
        font-size: 7.5px;
        letter-spacing: 0.06em;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-clock {
        font-size: 7.5px;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-divider {
        height: 14px;
        margin-inline: 1px;
    }
}

@media (max-width: 520px) {
    :where(html[data-style-profile~="marketing"]) .mkt-window-bar,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-window-head {
        --visual-chrome-edge: 8px;
        --visual-chrome-center-safe: 116px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-window-bar > .visual-chrome-controls,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head > .visual-chrome-controls {
        gap: 4px;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-dot {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-window-bar > .visual-chrome-center,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head > .visual-chrome-center {
        gap: 4px;
        max-width: calc(100% - (var(--visual-chrome-center-safe) * 2));
    }

    :where(html[data-style-profile~="marketing"]) .mkt-window-bar .visual-chrome-center > strong,
:where(html[data-style-profile~="marketing"]) .product-saas-window-head .visual-chrome-center > strong {
        max-width: 100%;
        font-size: 6.5px;
        letter-spacing: 0.045em;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-live {
        min-height: 16px;
        padding: 2px 4px;
        font-size: 6px;
        letter-spacing: 0.04em;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-live > i {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
    }

    /* Keep SYSTEM STATUS pulse clearly visible even at narrow widths. */
    :where(html[data-style-profile~="marketing"]) .visual-chrome-health {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-system-label {
        gap: 3px;
        font-size: 6.5px;
        letter-spacing: 0.035em;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-clock {
        font-size: 6.5px;
        letter-spacing: 0;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-divider {
        height: 12px;
        margin: 0;
    }
}

/*
 * Keep the core dot visible when reduced motion is requested.
 * Motion is removed, but the static indicator remains bright.
 */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-style-profile~="marketing"]) .visual-chrome-live > i,
:where(html[data-style-profile~="marketing"]) .visual-chrome-live > i::after,
:where(html[data-style-profile~="marketing"]) .visual-chrome-health,
:where(html[data-style-profile~="marketing"]) .visual-chrome-health::after {
        animation: none;
    }

    :where(html[data-style-profile~="marketing"]) .visual-chrome-health {
        transform: none;
        background: #63e36b;
        box-shadow:
            0 0 6px rgba(99, 227, 107, 0.90),
            0 0 12px rgba(99, 227, 107, 0.45);
    }
}

/* ==========================================================================
   E11. MARKETING LIGHT-THEME OVERRIDES
   Marketing light canvases, dark embedded-visual exceptions, gold separators, cards, subnav, and status colors.
   ========================================================================== */

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-availability {
    color: #18784a;
    border-color: rgba(31, 139, 83, 0.3);
    background: rgba(53, 191, 113, 0.1);
}


html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-customer-proof {
    background:
        radial-gradient(circle at 50% -35%, rgba(209, 121, 19, 0.10), transparent 42%),
        rgba(255, 255, 255, 0.30);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-customer-marquee {
    background: transparent;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-customer-marquee::before {
    background: none;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-customer-logo img {
    opacity: 0.66;
    filter: grayscale(1) contrast(1.05);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-customer-logo .mkt-customer-logo-color {
    opacity: 0;
    filter: none;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-customer-logo:hover .mkt-customer-logo-gray {
    opacity: 0;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-customer-logo:hover .mkt-customer-logo-color {
    opacity: 1;
    filter: none;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-hero::before,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-hero::before,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-pricing .standard-hero::before,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-docs .standard-hero::before,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-contact .standard-hero::before {
    background:
        linear-gradient(rgba(22, 20, 17, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 20, 17, 0.04) 1px, transparent 1px);
}

/* ==========================================================================
   E11.1. LIGHT-THEME SURFACE SYSTEM FOR MARKETING CARDS

   PURPOSE
   -------
   Repaints assurance/model grids, product cards, product-page cards, standard
   summaries, pricing tiers, docs cards, and contact forms with warm light
   surfaces and restrained shadows.

   INCLUDES
   --------
   - Light grid separators
   - Card/panel surfaces
   - Live product card surface

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These declarations precede the embedded-dark-visual exceptions below.
   ========================================================================== */

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-assurance-grid,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-model-grid,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-step-grid,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-principle-grid {
    background: rgba(22, 20, 17, 0.08);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-assurance-grid article,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-model-grid,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-model-grid article,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-product-card,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-step-grid article,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-feature-card,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-principle-grid article,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-roadmap-columns article,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-standard-summary,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-pricing .tier-card,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-docs .docs-sidebar,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-docs .docs-api-card,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-contact .contact-card,
html:where([data-style-profile~="marketing"])[data-theme="light"] .page-contact .form-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 68px rgba(62, 48, 22, 0.06);
}

@media (hover: hover) and (pointer: fine) {
    html:where([data-style-profile~="marketing"])[data-theme="light"] body.product-saas-page .product-saas-principle-grid article:hover {
        background:
            linear-gradient(135deg, rgba(238, 152, 38, 0.2), rgba(238, 152, 38, 0.08)),
            #fffaf1;
        box-shadow: inset 0 0 0 1px rgba(183, 101, 13, 0.18);
    }
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-product-card--live {
    background:
        radial-gradient(circle at 22% 0%, rgba(238, 152, 38, 0.14), transparent 42%),
        rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   E11.2. DARK EMBEDDED VISUALS AND GOLD SEPARATOR EXCEPTIONS

   PURPOSE
   -------
   Keeps selected product screenshots and diagrams on their dark canvas in
   light mode, while adding gold borders/separators so the embedded dark UI
   remains clearly framed.

   INCLUDES
   --------
   - Dark visual canvas exceptions
   - White homepage laptop exception
   - Bare transparent workflow exception
   - Gold outer borders and image separators
   - Dark/light API image swap

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - These selectors intentionally override the broad light card surfaces
     above.
   - Do not generalize the gold separators; each visual needs only the edges
     listed here.
   ========================================================================== */

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-roadmap-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-hero-platform,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-api-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-workflow-visual:not(.product-saas-workflow-visual--bare),
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-evidence-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-contract-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-waitlist-visual {
    background: #08090b;
}


/* Homepage smtpRS product visual switches to a white canvas in light mode. */
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-product-visual {
    background: #ffffff;
}

/* Bare workflow visuals stay transparent on the light theme. */
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-workflow-visual--bare {
    background: transparent;
}

/* Keep dark illustration widgets visibly framed against the light canvas. */
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-api-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-workflow-visual:not(.product-saas-workflow-visual--bare),
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-evidence-visual,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-contract-visual {
    border: 1px solid rgba(238, 152, 38, 0.23);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-hero-platform .mkt-window-bar {
    border-bottom: 1px solid rgba(238, 152, 38, 0.23);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-hero-platform figcaption {
    border-top: 1px solid rgba(238, 152, 38, 0.23);
}

/* The API visual only needs the upper gold separator in light mode. */
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-api-visual .mkt-window-bar {
    border-bottom: 1px solid rgba(238, 152, 38, 0.23);
}

/* Product-page API code response gets the same upper gold separator in light mode. */
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-code-panel .product-saas-code-head {
    border-bottom: 1px solid rgba(238, 152, 38, 0.23);
}

/* Product visual headers get the same upper gold separator in light mode. */
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-contract-visual .product-saas-window-head,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-workflow-visual .product-saas-window-head,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-evidence-visual .product-saas-window-head {
    border-bottom: 1px solid rgba(238, 152, 38, 0.23);
}

/* Product hero visuals need gold separators above and below the embedded image in light mode. */
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-visual .product-saas-window-head {
    border-bottom: 1px solid rgba(238, 152, 38, 0.23);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-visual .product-saas-window-states {
    border-top: 1px solid rgba(238, 152, 38, 0.23);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-api-visual-dark {
    display: none !important;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-api-visual-light {
    display: block !important;
}

/* ==========================================================================
   E11.3. LIGHT-THEME NUMBERS, HOVERS, STATUS PILLS, TRUST CARDS, AND SUBNAV

   PURPOSE
   -------
   Finishes the marketing light theme with darker orange numbers, warm hover
   fills, accessible status colors, light trust/final cards, and the
   translucent product subnav.

   INCLUDES
   --------
   - Number color
   - Hover fills
   - Development/live status colors
   - Trust/final card backgrounds
   - Product subnav surface

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This block remains after visual exceptions so card-level surfaces do not
     overwrite embedded media.
   ========================================================================== */

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-assurance-grid article > span,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-model-grid article > span {
    color: #a85e00;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-hero-facts > div:hover,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-integration-list article:hover,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-product-card--roadmap:hover,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-assurance-grid article:hover {
    background: rgba(238, 152, 38, 0.12);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-status:not(.mkt-status--live) {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.3);
    background: rgba(59, 130, 246, 0.1);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-status--live {
    color: #18784a;
    border-color: rgba(31, 139, 83, 0.3);
    background: rgba(53, 191, 113, 0.1);
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-trust-grid a,
html:where([data-style-profile~="marketing"])[data-theme="light"] .mkt-final-card,
html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-final-card {
    background:
        radial-gradient(circle at 88% 10%, rgba(246, 191, 63, 0.14), transparent 28%),
        linear-gradient(135deg, rgba(238, 152, 38, 0.09), rgba(255, 255, 255, 0.72)),
        #fffdf9;
}

html:where([data-style-profile~="marketing"])[data-theme="light"] .product-saas-page .product-saas-subnav {
    background: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   E12. MARKETING RESPONSIVE BEHAVIOR
   Marketing-profile adaptations ordered from 1120px through phone widths plus reduced-motion fallbacks.
   ========================================================================== */

/* ==========================================================================
   E12.1. MARKETING LARGE-TABLET BREAKPOINT: 1120PX

   PURPOSE
   -------
   Narrows marketing containers, restructures live/roadmap product cards,
   converts assurance/model grids to two columns, and tightens product
   hero/outcome minimums.

   INCLUDES
   --------
   - Container width
   - Portfolio card placement
   - Assurance/model columns
   - Product hero/outcome columns

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Later 920px and 720px stages complete the collapse.
   ========================================================================== */

@media (max-width: 1120px) {
    :where(html[data-style-profile~="marketing"]) .company-homepage main .container,
:where(html[data-style-profile~="marketing"]) .product-saas-page main .container,
:where(html[data-style-profile~="marketing"]) .page-pricing main .container,
:where(html[data-style-profile~="marketing"]) .page-docs main .container,
:where(html[data-style-profile~="marketing"]) .page-contact main .container {
        width: min(100% - 48px, 1080px);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-card--live {
        grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap {
        grid-column: span 6;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap:last-child {
        grid-column: 4 / span 6;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance-grid,
:where(html[data-style-profile~="marketing"]) .mkt-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article:nth-child(3),
:where(html[data-style-profile~="marketing"]) .mkt-model-grid article:nth-child(3) {
        border-left: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-model-grid::before {
        display: none;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-hero-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcomes-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
    }
}

/* ==========================================================================
   E12.2. MARKETING TABLET BREAKPOINT: 920PX

   PURPOSE
   -------
   Collapses major marketing hero, assurance, integration, final, product,
   standard-page, and contact grids to one column.

   INCLUDES
   --------
   - Hero facts strip
   - Single-column live product
   - Product visual placement
   - Docs sidebar row
   - Summary panel width

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This is the primary structural tablet breakpoint for the marketing
     profile.
   ========================================================================== */

@media (max-width: 920px) {
    :where(html[data-style-profile~="marketing"]) .mkt-hero-copy,
:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading,
:where(html[data-style-profile~="marketing"]) .mkt-section-heading--split,
:where(html[data-style-profile~="marketing"]) .mkt-integration-grid,
:where(html[data-style-profile~="marketing"]) .mkt-final-card,
:where(html[data-style-profile~="marketing"]) .mkt-standard-hero-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-hero-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcomes-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section-heading--split,
:where(html[data-style-profile~="marketing"]) .page-contact .contact-intro {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-facts {
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 34px;
        border-bottom: 1px solid var(--line);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-facts > div {
        padding: 18px;
        border-right: 1px solid var(--line-soft);
        border-bottom: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-facts > div:first-child {
        padding-left: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-facts > div:last-child {
        border-right: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance-heading > p:last-child,
:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading .mkt-eyebrow,
:where(html[data-style-profile~="marketing"]) .mkt-assurance-heading h2 {
        grid-column: 1;
        grid-row: auto;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance-heading > p:last-child {
        max-width: 720px;
        margin-top: 22px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-section-heading--split > p {
        max-width: 720px;
        justify-self: start;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-card--live {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-visual {
        min-height: 420px;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-final-card .hero-actions {
        justify-content: flex-start;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .invoiceguard-hero-theme-visual {
        max-width: 820px;
        margin-right: auto;
        margin-left: auto;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .invoiceguard-hero-theme-visual {
        width: min(108%, 780px);
        margin-inline: -4%;
        justify-self: center;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-outcomes-grid {
        gap: 34px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-standard-summary {
        max-width: 720px;
    }

    :where(html[data-style-profile~="marketing"]) .page-docs .docs-reference-shell {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="marketing"]) .page-docs .docs-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ==========================================================================
   E12.3. MARKETING PHONE BREAKPOINT: 720PX

   PURPOSE
   -------
   Applies phone container widths, heading scales, one-column
   facts/assurance/model/trust/product grids, mobile subnav layout, and
   product/pricing/contact card stacking.

   INCLUDES
   --------
   - Phone typography and section spacing
   - Single-column content grids
   - Product visual scaling
   - Subnav and step/principle stacking
   - Pricing/contact form adjustments

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - Visual chrome has its own earlier 720px block in E10.
   - Source order allows this broader layout block to follow
     component-specific scaling.
   ========================================================================== */

@media (max-width: 720px) {
    :where(html[data-style-profile~="marketing"]) .company-homepage main .container,
:where(html[data-style-profile~="marketing"]) .product-saas-page main .container,
:where(html[data-style-profile~="marketing"]) .page-pricing main .container,
:where(html[data-style-profile~="marketing"]) .page-docs main .container,
:where(html[data-style-profile~="marketing"]) .page-contact main .container {
        width: calc(100% - 32px);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-hero,
:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero {
        padding-top: 62px;
        padding-bottom: 62px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero h1,
:where(html[data-style-profile~="marketing"]) .product-saas-page main h1,
:where(html[data-style-profile~="marketing"]) .page-pricing .standard-hero h1,
:where(html[data-style-profile~="marketing"]) .page-docs .standard-hero h1,
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero h1,
:where(html[data-style-profile~="marketing"]) .page-careers .standard-hero h1 {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -0.052em;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-facts,
:where(html[data-style-profile~="marketing"]) .mkt-hero-platform figcaption,
:where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-facts > div {
        padding: 16px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-facts > div:last-child {
        border-bottom: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-platform figcaption span {
        justify-content: flex-start;
        border-top: 1px solid rgba(255, 255, 255, 0.075);
        border-left: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-platform figcaption span:first-child {
        border-top: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance,
:where(html[data-style-profile~="marketing"]) .mkt-products,
:where(html[data-style-profile~="marketing"]) .mkt-model,
:where(html[data-style-profile~="marketing"]) .mkt-integration,
:where(html[data-style-profile~="marketing"]) .mkt-trust,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-section {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance-grid,
:where(html[data-style-profile~="marketing"]) .mkt-model-grid,
:where(html[data-style-profile~="marketing"]) .mkt-trust-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article,
:where(html[data-style-profile~="marketing"]) .mkt-model-grid article {
        border-top: 1px solid var(--line-soft);
        border-left: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article:first-child,
:where(html[data-style-profile~="marketing"]) .mkt-model-grid article:first-child {
        border-top: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap,
:where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap:last-child {
        grid-column: 1 / -1;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-visual {
        min-height: 330px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-visual-stage {
        width: 128%;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-integration-grid {
        gap: 44px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-final {
        padding-top: 70px;
        padding-bottom: 90px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-final-card {
        gap: 30px;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-subnav .container {
        grid-template-columns: 1fr auto;
        min-height: 56px;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-subnav .container > div {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        padding-bottom: 12px;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-step-grid,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-step-grid article,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid article {
        border-top: 1px solid var(--line-soft);
    }

    :where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-step-grid article:first-child,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-principle-grid article:first-child {
        border-top: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid article {
        min-height: auto;
        border-top: 1px solid var(--line-soft);
        border-left: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-page-assurance-grid article:first-child {
        border-top: 0;
    }

    :where(html[data-style-profile~="marketing"]) .page-pricing .pricing-tier-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-style-profile~="marketing"]) .page-pricing .tier-card {
        min-height: auto;
    }

    :where(html[data-style-profile~="marketing"]) .page-contact .form-shell {
        padding: 24px;
    }
}

/* ==========================================================================
   E12.4. MARKETING NARROW-PHONE BREAKPOINT: 520PX

   PURPOSE
   -------
   Makes profile buttons full width, stacks hero metadata, reduces
   radii/padding, and further scales visual/product/summary content for narrow
   phones.

   INCLUDES
   --------
   - Full-width buttons
   - Stacked metadata
   - Compact radii and padding
   - Narrow product visuals and summaries

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - This is the final width-specific marketing stage before reduced-motion
     rules.
   ========================================================================== */

@media (max-width: 520px) {
    :where(html[data-style-profile~="marketing"]) .company-homepage main .btn,
:where(html[data-style-profile~="marketing"]) .product-saas-page main .btn,
:where(html[data-style-profile~="marketing"]) .page-pricing main .btn,
:where(html[data-style-profile~="marketing"]) .page-docs main .btn,
:where(html[data-style-profile~="marketing"]) .page-contact main .btn {
        width: 100%;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-kicker-row {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-hero-platform,
:where(html[data-style-profile~="marketing"]) .mkt-api-visual,
:where(html[data-style-profile~="marketing"]) .mkt-product-card,
:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid,
:where(html[data-style-profile~="marketing"]) .mkt-model-grid,
:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a,
:where(html[data-style-profile~="marketing"]) .mkt-final-card,
:where(html[data-style-profile~="marketing"]) .mkt-standard-summary,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-workflow-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-evidence-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-contract-visual,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-final-card,
:where(html[data-style-profile~="marketing"]) .page-pricing .tier-card,
:where(html[data-style-profile~="marketing"]) .page-docs .docs-api-card,
:where(html[data-style-profile~="marketing"]) .page-contact .form-shell {
        border-radius: 14px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-copy,
:where(html[data-style-profile~="marketing"]) .mkt-roadmap-copy,
:where(html[data-style-profile~="marketing"]) .mkt-assurance-grid article,
:where(html[data-style-profile~="marketing"]) .mkt-model-grid article,
:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a {
        padding: 24px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-product-visual {
        min-height: 260px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-roadmap-visual,
:where(html[data-style-profile~="marketing"]) .mkt-roadmap-visual img {
        min-height: 190px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-standard-summary dl > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* ==========================================================================
   E12.5. MARKETING REDUCED-MOTION FALLBACKS

   PURPOSE
   -------
   Disables anchored pulse animation and nonessential card/image/link
   transitions for users who request reduced motion.

   INCLUDES
   --------
   - Static product/API live indicators
   - Roadmap image transition removal
   - Trust/text-link/card transition removal

   CASCADE / MAINTENANCE NOTES
   ---------------------------
   - The indicators remain visible; only motion is removed.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :where(html[data-style-profile~="marketing"]) .mkt-product-live-indicator::before,
:where(html[data-style-profile~="marketing"]) .mkt-api-visual-live::before {
        animation: none;
        transform: translate(-50%, -50%);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-roadmap-visual img,
:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a,
:where(html[data-style-profile~="marketing"]) .mkt-trust-grid a > i,
:where(html[data-style-profile~="marketing"]) .mkt-text-link,
:where(html[data-style-profile~="marketing"]) .mkt-product-card--roadmap,
:where(html[data-style-profile~="marketing"]) .product-saas-page .product-saas-feature-card {
        transition: none;
    }
}

/* ==========================================================================
   END OF E. MARKETING / PAGE-MATURITY SYSTEM
   END OF PARAVANE AUTHORITATIVE STYLESHEET
   ========================================================================== */
/* ==========================================================================
   MOBILE PRIMARY NAVIGATION
   Keeps the public header to one row and moves primary links into an
   accessible, touch-friendly disclosure panel at phone widths.
   ========================================================================== */

.mobile-nav-toggle {
    display: none;
}

@media (max-width: 720px) {
    /* Non-modal navigation: opening it must not lock document scrolling. */
    html.site-is-ready body:not(.page-app) .site-header.mobile-nav-open {
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-header .nav {
        position: relative;
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 68px;
        padding: 10px 0;
    }

    .site-header .logo {
        display: none;
    }

    .site-header .nav-actions {
        order: initial;
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .site-header .nav-actions .nav-action {
        display: inline-flex;
    }

    .mobile-nav-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--line-soft);
        border-radius: 999px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.025);
        cursor: pointer;
        transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
    }

    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus-visible,
    .mobile-nav-toggle[aria-expanded="true"] {
        border-color: var(--accent-line);
        color: var(--accent-bright);
        background: rgba(238, 152, 38, 0.07);
    }

    .mobile-nav-toggle__icon,
    .mobile-nav-toggle__icon::before,
    .mobile-nav-toggle__icon::after {
        position: absolute;
        width: 17px;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .mobile-nav-toggle__icon {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .mobile-nav-toggle__icon::before,
    .mobile-nav-toggle__icon::after {
        content: "";
        left: 0;
    }

    .mobile-nav-toggle__icon::before {
        transform: translateY(-5px);
    }

    .mobile-nav-toggle__icon::after {
        transform: translateY(5px);
    }

    .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon {
        background: transparent;
    }

    .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::before {
        transform: rotate(45deg);
    }

    .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::after {
        transform: rotate(-45deg);
    }

    .site-header .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        z-index: 30;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-height: 0;
        padding: 0 15px;
        overflow: hidden;
        border-bottom: 1px solid transparent;
        background: var(--bg);
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: max-height 240ms ease, padding 240ms ease, opacity 160ms ease,
            transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    }

    .site-header .nav-links > * {
        flex-shrink: 0;
    }

    /*
     * Keep this absolute, relative to the navigation row. A fixed descendant
     * resolves against this blurred/transformed header, not the viewport.
     * Only the outer panel scrolls; catalog content stays in normal flow.
     */
    .site-header.mobile-nav-open .nav-links {
        max-height: var(--mobile-nav-available-height, calc(100svh - 69px));
        padding-top: 10px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
        overflow-y: auto;
        /* At a panel boundary, let scrolling continue into the page. */
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom-color: var(--line-soft);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-header .nav-links > a,
    .site-header .nav-links > span,
    .site-header .nav-catalog-trigger {
        width: 100%;
        min-height: 46px;
        padding: 0 14px;
        border-radius: 7px;
        font-size: 15px;
    }

    .site-header .nav-links > a:hover,
    .site-header .nav-links > a:focus-visible,
    .site-header .nav-catalog-trigger:hover,
    .site-header .nav-catalog-trigger:focus-visible {
        background: rgba(238, 152, 38, 0.065);
    }

    .site-header .nav-catalog {
        display: block;
        width: 100%;
        min-height: 46px;
    }

    .site-header .nav-catalog-trigger {
        justify-content: space-between;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .site-header .product-catalog-menu,
    .site-header .nav-catalog:hover .product-catalog-menu,
    .site-header .nav-catalog:focus-within .product-catalog-menu {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        max-height: 0;
        margin: 0;
        padding: 0 12px;
        overflow: hidden;
        border-width: 0;
        opacity: 0;
        visibility: hidden;
        transform: none;
        pointer-events: none;
        box-shadow: none;
    }

    .site-header .nav-catalog.is-open .product-catalog-menu {
        width: 100%;
        max-height: none;
        margin: 4px 0 8px;
        padding: 12px;
        overflow: visible;
        border-width: 1px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
    }

    .site-header .nav-catalog.is-open .nav-catalog-trigger {
        color: var(--accent-bright);
        background: rgba(238, 152, 38, 0.065);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-toggle__icon,
    .mobile-nav-toggle__icon::before,
    .mobile-nav-toggle__icon::after,
    .site-header .nav-links {
        transition: none;
    }
}


/* Customer portal polish: v011.000.001-alpha.107 */
.page-app { --portal-accent:#f5a623; --portal-accent-soft:rgba(245,166,35,.14); --portal-border:rgba(255,255,255,.12); --portal-panel:rgba(255,255,255,.045); --portal-muted:rgba(255,255,255,.62); }
html[data-theme="light"] .page-app { --portal-border:rgba(22,19,14,.14); --portal-panel:rgba(255,255,255,.78); --portal-muted:rgba(22,19,14,.62); }
.page-app button:not(:disabled),.page-app [role="button"],.page-app .btn:not(:disabled),.page-app select,.page-app summary{cursor:pointer}
.page-app button:disabled,.page-app .btn:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.48;box-shadow:none}
.page-app [data-app-status][hidden],.page-app [data-cancel-status][hidden]{display:none}
.app-account-menu{position:relative;z-index:30}
.app-account-trigger{min-height:42px;display:inline-flex;align-items:center;gap:9px;padding:5px 11px 5px 6px;color:inherit;font:inherit;font-weight:750;border:1px solid var(--portal-border);border-radius:999px;background:var(--portal-panel);transition:transform 160ms ease,border-color 160ms ease,background 160ms ease}
.app-account-trigger:hover,.app-account-menu.is-open .app-account-trigger{transform:translateY(-1px);border-color:rgba(245,166,35,.58);background:var(--portal-accent-soft)}
.app-account-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#16120c;background:linear-gradient(135deg,#ffc14c,#ef9313);font-size:.72rem;font-weight:900;letter-spacing:.04em}
.app-account-trigger>i{color:var(--portal-muted);font-size:.66rem;transition:transform 160ms ease}.app-account-menu.is-open .app-account-trigger>i{transform:rotate(180deg)}
.app-account-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(280px,calc(100vw - 28px));padding:8px;border:1px solid var(--portal-border);border-radius:16px;background:#151515;box-shadow:0 22px 60px rgba(0,0,0,.38)}
html[data-theme="light"] .app-account-panel{background:#fffdfa;box-shadow:0 22px 60px rgba(67,48,18,.16)}
.app-account-identity{display:grid;gap:3px;padding:10px 11px 12px;margin-bottom:5px;border-bottom:1px solid var(--portal-border)}.app-account-identity small{color:var(--portal-muted);overflow-wrap:anywhere}
.app-account-panel>a,.app-account-menu-action{width:100%;min-height:42px;display:flex;align-items:center;gap:11px;padding:9px 11px;color:inherit;font:inherit;font-weight:700;text-decoration:none;border:0;border-radius:10px;background:transparent;text-align:left}
.app-account-panel>a:hover,.app-account-menu-action:hover{color:var(--portal-accent);background:var(--portal-accent-soft)}.app-account-panel>a i,.app-account-menu-action i{width:18px;color:var(--portal-accent);text-align:center}
.app-sidebar-mobile-toggle{display:none}
.app-usage-progress-card{display:grid;gap:15px;padding-block:22px}.app-progress-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.app-progress-heading h2{margin:4px 0 0}.app-progress-heading>strong{color:var(--portal-accent);font-size:1.05rem}
.app-progress-track{height:12px;overflow:hidden;border:1px solid rgba(245,166,35,.28);border-radius:999px;background:rgba(127,127,127,.14)}.app-progress-fill{width:0;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#ef9418,#ffc757);box-shadow:0 0 18px rgba(245,166,35,.32);transition:width 500ms ease}.app-usage-progress-card>p{margin:0;color:var(--portal-muted)}
.app-usage-layout{grid-template-columns:1fr}.app-usage-layout>.app-card{min-height:auto}.app-card-head-controls{align-items:end}
.app-inline-filter{min-width:168px;display:grid;gap:6px;color:var(--portal-muted);font-size:.74rem;font-weight:700}.app-inline-filter select{min-height:40px;padding:8px 34px 8px 11px;color:inherit;font:inherit;border:1px solid var(--portal-border);border-radius:10px;background:var(--portal-panel)}
.app-table-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;margin-top:10px;border-top:1px solid var(--portal-border)}.app-table-pagination p{margin:0;color:var(--portal-muted)}.app-pagination-actions{display:flex;gap:8px}
.app-state-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--portal-border);border-radius:999px;font-size:.72rem;font-weight:800;text-transform:capitalize}.app-state-badge:before{width:6px;height:6px;content:"";border-radius:50%;background:currentColor}.app-state-badge.is-active{color:#61c88b;border-color:rgba(97,200,139,.3);background:rgba(97,200,139,.08)}.app-state-badge.is-revoked{color:var(--portal-muted)}
.app-settings-grid .app-card,.app-security-card{min-height:auto}.app-detail-list{display:grid;gap:0;margin:0}.app-detail-list>div{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr);gap:18px;padding:15px 0;border-top:1px solid var(--portal-border)}.app-detail-list dt{color:var(--portal-muted)}.app-detail-list dd{margin:0;font-weight:750;overflow-wrap:anywhere}
.app-danger-zone{padding:0;overflow:hidden}.app-danger-zone>summary{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;list-style:none}.app-danger-zone>summary::-webkit-details-marker{display:none}.app-danger-zone>summary span{display:grid;gap:5px}.app-danger-zone>summary strong{color:#e9b5ad;font-size:1.06rem}.app-danger-zone>summary small{color:var(--portal-muted)}.app-danger-zone>summary i{color:#d77e70;transition:transform 180ms ease}.app-danger-zone[open]>summary i{transform:rotate(180deg)}.app-danger-zone-content{padding:4px 22px 22px;border-top:1px solid rgba(215,92,74,.25)}
.page-app .site-footer .footer-social,.page-app .site-footer .footer-links{display:none}.page-app .site-footer .footer-inner--social{min-height:92px;justify-content:center}
@media(max-width:760px){
.page-app .app-site-header .logo{display:flex;width:42px;min-width:42px}.page-app .app-site-header .logo img{width:42px;height:42px}.app-account-label,.app-account-trigger>i{display:none}.app-account-trigger{min-height:40px;padding:4px}
.app-sidebar-mobile-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;color:inherit;font:inherit;text-align:left;border:1px solid var(--portal-border);border-radius:12px;background:var(--portal-panel)}.app-sidebar-mobile-toggle span{display:grid;gap:2px}.app-sidebar-mobile-toggle small{color:var(--portal-accent);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.app-sidebar-mobile-toggle i{transition:transform 180ms ease}.app-sidebar.is-open .app-sidebar-mobile-toggle i{transform:rotate(180deg)}
.page-app .app-sidebar-head{display:none}.page-app .app-sidebar:not(.is-open)>.app-nav-link{display:none}.page-app .app-sidebar.is-open>.app-nav-link{display:flex;margin-top:7px}.page-app .app-sidebar{padding:8px}
.app-progress-heading,.app-card-head-controls,.app-table-pagination{align-items:stretch;flex-direction:column}.app-inline-filter{width:100%}.app-pagination-actions{display:grid;grid-template-columns:1fr 1fr}.app-detail-list>div{grid-template-columns:1fr;gap:5px}
}


/* Account accessibility and loader completion: v011.000.001-alpha.107 */
.page-app .app-route-backdrop,
.page-app .app-route-loader {
    transition-duration: 240ms !important;
}
.page-app .app-route-backdrop[hidden],
.page-app .app-route-loader[hidden] {
    display: none !important;
}


/* Mobile account menu viewport correction: v011.000.001-alpha.107 */
@media (max-width: 760px) {
    .app-account-panel {
        position: fixed;
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}
/* smtpRS documentation code-copy controls: v011.000.001-alpha.107 */
.page-docs .code-card {
    position: relative;
    overflow: hidden;
}

.page-docs .code-card > .docs-code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.7rem 0.85rem 0.7rem 1rem;
}

.page-docs .docs-copy-button {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-width: 5.75rem;
    min-height: 2.15rem;
    margin: -0.15rem 0;
    padding: 0.42rem 0.72rem;
    border: 1px solid rgba(245, 166, 35, 0.45);
    border-radius: 0.6rem;
    background: rgba(245, 166, 35, 0.08);
    color: var(--accent, #f5a623);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-docs .docs-copy-button:hover {
    border-color: var(--accent, #f5a623);
    background: var(--accent, #f5a623);
    color: #111;
    transform: translateY(-1px);
}

.page-docs .docs-copy-button:focus-visible {
    outline: 2px solid var(--accent, #f5a623);
    outline-offset: 2px;
}

.page-docs .docs-copy-button.is-copied {
    border-color: #58c58b;
    background: rgba(88, 197, 139, 0.14);
    color: #72dca3;
}

.page-docs .docs-copy-button.is-copy-error {
    border-color: #e27474;
    background: rgba(226, 116, 116, 0.12);
    color: #f09a9a;
}

@media (max-width: 520px) {
    .page-docs .code-card > .docs-code-toolbar {
        gap: 0.65rem;
        padding-left: 0.8rem;
    }

    .page-docs .docs-copy-button {
        min-width: 5.25rem;
        padding-inline: 0.58rem;
    }
}

/* Company page: v012.000.001-alpha.100 */
.page-company{--company-accent:#f5a623;--company-green:#54d590;--company-panel:rgba(255,255,255,.035);--company-panel-strong:#151515;--company-rule:rgba(255,255,255,.11);overflow-x:clip}
html[data-theme="light"] .page-company{--company-panel:rgba(38,31,19,.035);--company-panel-strong:#f4f0e8;--company-rule:rgba(32,26,17,.13)}
.page-company main{background:radial-gradient(circle at 78% 8%,rgba(245,166,35,.105),transparent 26rem),linear-gradient(180deg,rgba(255,255,255,.012),transparent 22rem)}
.company-hero{position:relative;padding:clamp(6rem,10vw,9.5rem) 0 clamp(5rem,9vw,8rem);border-bottom:1px solid var(--company-rule)}
.company-hero:before{position:absolute;inset:0;content:"";pointer-events:none;opacity:.32;background-image:linear-gradient(var(--company-rule) 1px,transparent 1px),linear-gradient(90deg,var(--company-rule) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 76%)}
.company-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);align-items:center;gap:clamp(3rem,7vw,7rem)}
.company-eyebrow{display:flex;align-items:center;gap:.8rem;margin:0 0 1.35rem;color:var(--company-accent);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.company-eyebrow span{padding-left:.8rem;border-left:1px solid var(--company-rule);color:var(--muted)}
.page-company main h1,.page-company main h2,.page-company main h3{font-family:"Space Grotesk","Avenir Next",sans-serif;letter-spacing:-.035em}
.page-company main h1{max-width:880px;margin:0;font-size:clamp(3.25rem,5.4vw,5rem);line-height:.93}
.company-hero-lede{max-width:700px;margin:2rem 0 2.1rem;color:var(--muted);font-size:clamp(1.08rem,1.8vw,1.32rem);line-height:1.65}
.company-signal-card{overflow:hidden;border:1px solid var(--company-rule);border-radius:1.35rem;background:var(--company-panel-strong);box-shadow:0 32px 80px rgba(0,0,0,.25)}
.company-signal-head{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 1.25rem;border-bottom:1px solid var(--company-rule);color:var(--muted);font-size:.76rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.company-signal-head strong{display:flex;align-items:center;gap:.5rem;color:var(--company-green)}.company-signal-head i{width:.48rem;height:.48rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(84,213,144,.1)}
.company-signal-plot{position:relative;height:230px;background:linear-gradient(var(--company-rule) 1px,transparent 1px),linear-gradient(90deg,var(--company-rule) 1px,transparent 1px);background-size:25% 25%}
.company-signal-plot span{position:absolute;inset:20% 5% 11%;display:block;border-top:3px solid var(--company-accent);transform:skewY(-21deg);transform-origin:left center;filter:drop-shadow(0 0 8px rgba(245,166,35,.32))}
.company-signal-plot i{position:absolute;left:var(--x);top:var(--y);width:.7rem;height:.7rem;border:3px solid var(--company-panel-strong);border-radius:50%;background:var(--company-accent);box-shadow:0 0 0 1px var(--company-accent),0 0 18px rgba(245,166,35,.45)}
.company-signal-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid var(--company-rule)}.company-signal-facts div{min-width:0;padding:1.1rem;border-right:1px solid var(--company-rule)}.company-signal-facts div:last-child{border-right:0}.company-signal-facts dt{color:var(--company-accent);font-size:.8rem;font-weight:850}.company-signal-facts dd{margin:.35rem 0 0;color:var(--muted);font-size:.72rem;line-height:1.45}
.company-intro,.company-history,.company-ownership,.company-final{padding:clamp(5.5rem,9vw,9rem) 0}.company-intro-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(3rem,8vw,8rem)}
.page-company main h2{margin:0;font-size:clamp(2.35rem,3.8vw,3.5rem);line-height:1.02}.company-intro-copy{padding-top:.2rem;border-top:1px solid var(--company-rule)}
.company-intro-copy p{margin:0;padding:1.4rem 0;border-bottom:1px solid var(--company-rule);color:var(--muted);font-size:1.05rem;line-height:1.75}.company-intro-copy strong,.company-timeline-copy strong,.company-ownership-card strong{color:var(--text)}
.company-principles{border-block:1px solid var(--company-rule);background:var(--company-panel)}.company-principles-grid{display:grid;grid-template-columns:repeat(3,1fr)}.company-principles article{position:relative;min-height:310px;padding:2.4rem;border-right:1px solid var(--company-rule)}.company-principles article:last-child{border-right:0}.company-principles article>span{color:var(--muted);font:700 .72rem/1 monospace}.company-principles article>i{display:block;margin:3.4rem 0 1.7rem;color:var(--company-accent);font-size:1.45rem}.company-principles h3{margin:0 0 .85rem;font-size:1.4rem}.company-principles p{margin:0;color:var(--muted);line-height:1.65}
.company-section-head{display:grid;grid-template-columns:.55fr 1.25fr .8fr;align-items:end;gap:2rem;margin-bottom:4.5rem}.company-section-head .company-eyebrow{align-self:start}.company-section-head>p:last-child{margin:0;color:var(--muted);line-height:1.65}
.company-timeline{margin:0;padding:0;list-style:none;border-top:1px solid var(--company-rule)}.company-timeline li{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:clamp(2rem,7vw,7rem);padding:2.5rem 0;border-bottom:1px solid var(--company-rule)}.company-timeline-date{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;align-items:center}.company-timeline-date span{grid-row:1/3;color:var(--company-accent);font:500 2rem/1 monospace}.company-timeline-date strong{font-size:.95rem}.company-timeline-date small{color:var(--muted)}.company-timeline-copy h3{margin:0 0 .75rem;font-size:clamp(1.45rem,2.3vw,2rem)}.company-timeline-copy p{max-width:760px;margin:0;color:var(--muted);line-height:1.72}
.company-ownership{padding-top:0}.company-ownership-card{display:grid;grid-template-columns:minmax(190px,.42fr) minmax(0,1.58fr);gap:clamp(2.5rem,7vw,7rem);padding:clamp(2.2rem,5vw,4.5rem);border:1px solid var(--company-rule);border-radius:1.5rem;background:var(--company-panel)}.company-ownership-mark{align-self:stretch;display:grid;place-items:center;min-height:220px;border:1px solid var(--company-rule);border-radius:1rem;background:linear-gradient(135deg,rgba(245,166,35,.12),transparent 48%),var(--company-panel-strong);color:var(--text);font:750 clamp(2.5rem,5vw,4.5rem)/1 "Space Grotesk",sans-serif;letter-spacing:-.08em}.company-ownership-mark span{color:var(--company-accent);font-weight:400}.company-ownership-card h2{max-width:880px;font-size:clamp(2.25rem,4vw,3.7rem)}.company-ownership-card>div:last-child>p:not(.company-eyebrow){max-width:880px;margin:1.5rem 0;color:var(--muted);line-height:1.75}.company-inline-link{display:inline-flex;align-items:center;gap:.55rem;color:var(--company-accent);font-weight:750}.company-inline-link i{font-size:.75em;transition:transform 160ms ease}.company-inline-link:hover i{transform:translate(2px,-2px)}
.company-final{padding-top:0}.company-final-card{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:clamp(2rem,7vw,7rem);padding:clamp(2.5rem,6vw,5.5rem);border-radius:1.5rem;color:#111;background:linear-gradient(120deg,#ee981f,#ffc14b 64%,#f1d89b);box-shadow:0 30px 80px rgba(238,152,31,.16)}.company-final-card .company-eyebrow,.company-final-card p{color:rgba(17,17,17,.72)}.company-final-card h2{color:#111}.company-final-card>div:last-child>p{margin:0 0 1.5rem;line-height:1.65}.company-final-card .btn-primary{color:#fff;background:#111;border-color:#111}.company-final-card .btn-secondary{color:#111;border-color:rgba(17,17,17,.3);background:rgba(255,255,255,.2)}
@media(max-width:980px){.company-hero-grid,.company-intro-grid,.company-ownership-card,.company-final-card{grid-template-columns:1fr}.company-signal-card{max-width:680px}.company-section-head{grid-template-columns:1fr;align-items:start}.company-section-head h2{max-width:760px}.company-section-head>p:last-child{max-width:600px}.company-principles-grid{grid-template-columns:1fr}.company-principles article{min-height:0;border-right:0;border-bottom:1px solid var(--company-rule)}.company-principles article:last-child{border-bottom:0}.company-principles article>i{margin:2rem 0 1.25rem}}
@media(max-width:680px){.company-hero{padding-top:4.8rem}.page-company main h1{font-size:clamp(2.8rem,12vw,3.6rem)}.company-signal-plot{height:180px}.company-signal-facts{grid-template-columns:1fr}.company-signal-facts div{border-right:0;border-bottom:1px solid var(--company-rule)}.company-signal-facts div:last-child{border-bottom:0}.company-timeline li{grid-template-columns:1fr;gap:1.4rem}.company-ownership-card{padding:1.25rem}.company-ownership-mark{min-height:160px}.company-final-card{border-radius:1rem}}

/* Company page typography and shared chrome alignment */
body.page-company {
    font-family: "Aptos", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-company main,
.page-company main .btn {
    font-family: "Manrope", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

.page-company main h1,
.page-company main h2,
.page-company main h3 {
    font-family: "Manrope", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

.page-company .company-hero {
    padding-top: clamp(5rem, 8vw, 7.25rem);
    padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.page-company main h1 {
    max-width: 760px;
    font-size: clamp(3rem, 4.25vw, 3.9rem);
    line-height: 1.01;
}

.page-company main h2 {
    font-size: clamp(2.15rem, 3.1vw, 3rem);
    line-height: 1.07;
}

.page-company .company-ownership-card h2 {
    font-size: clamp(2rem, 2.8vw, 2.75rem);
}

.page-company .company-intro,
.page-company .company-history,
.page-company .company-ownership,
.page-company .company-final {
    padding-top: clamp(5rem, 7vw, 7rem);
    padding-bottom: clamp(5rem, 7vw, 7rem);
}

.page-company .company-ownership,
.page-company .company-final {
    padding-top: 0;
}

@media (max-width: 680px) {
    .page-company .company-hero {
        padding-top: 4.5rem;
    }

    .page-company main h1 {
        font-size: clamp(2.65rem, 11vw, 3.4rem);
    }
}

/* Shared footer row and final Company page alignment */
.site-footer .footer-links {
    gap: 16px;
}

@media (min-width: 981px) {
    .site-footer .footer-links {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

.page-company main,
.page-company main .btn {
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-company main h1,
.page-company main h2,
.page-company main h3 {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
}

.page-company main h1 {
    font-size: clamp(44px, 4.5vw, 62px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.page-company main h2 {
    font-size: clamp(32px, 3.3vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.043em;
}

.page-company main h3 {
    letter-spacing: -0.025em;
}

.page-company .company-principles article,
.page-company .company-timeline li {
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.page-company .company-principles article:hover,
.page-company .company-timeline li:hover {
    z-index: 1;
    background: rgba(238, 152, 38, 0.04);
    box-shadow:
        inset 0 0 0 1px rgba(246, 191, 63, 0.28),
        inset 0 0 28px rgba(238, 152, 38, 0.11);
}

.page-company .company-principles article > i,
.page-company .company-timeline-date span {
    transition: color 180ms ease, filter 180ms ease;
}

.page-company .company-principles article:hover > i,
.page-company .company-timeline li:hover .company-timeline-date span {
    color: #f6bf3f;
    filter: drop-shadow(0 0 10px rgba(246, 191, 63, 0.22));
}

html[data-theme="light"] .page-company .company-principles article:hover,
html[data-theme="light"] .page-company .company-timeline li:hover {
    background: rgba(238, 152, 38, 0.065);
    box-shadow:
        inset 0 0 0 1px rgba(183, 101, 13, 0.3),
        inset 0 0 28px rgba(238, 152, 38, 0.09);
}

/* Company principles and final CTA density */
.page-company .company-principles article {
    min-height: 248px;
    padding: 1.8rem 2.4rem 2rem;
}

.page-company .company-principles article > span {
    color: #f6bf3f;
}

html[data-theme="light"] .page-company .company-principles article > span {
    color: #b7650d;
}

.page-company .company-principles article > i {
    margin: 1.65rem 0 1rem;
}

.page-company .company-principles h3 {
    margin-bottom: 0.65rem;
}

.page-company .company-final {
    padding-bottom: clamp(3.5rem, 5vw, 5rem);
}

.page-company .company-final-card {
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding: clamp(2.4rem, 4vw, 3.75rem);
}

@media (max-width: 980px) {
    .page-company .company-principles article {
        min-height: auto;
        padding-block: 1.75rem;
    }

    .page-company .company-principles article > i {
        margin: 1.35rem 0 0.9rem;
    }
}

/* Company page: SaaS profile redesign v012.000.001-alpha.100 */
.page-company {
    --pvco-line: rgba(255, 255, 255, 0.10);
    --pvco-line-strong: rgba(255, 255, 255, 0.16);
    --pvco-panel: rgba(255, 255, 255, 0.035);
    --pvco-panel-raised: #101216;
    --pvco-panel-soft: #0c0e11;
    --pvco-glow: rgba(238, 152, 38, 0.18);
    --pvco-green: #66d99b;
    overflow-x: clip;
}

html[data-theme="light"] .page-company {
    --pvco-line: rgba(34, 29, 21, 0.11);
    --pvco-line-strong: rgba(34, 29, 21, 0.17);
    --pvco-panel: rgba(44, 35, 23, 0.035);
    --pvco-panel-raised: #fffdf8;
    --pvco-panel-soft: #f6f2ea;
    --pvco-glow: rgba(209, 121, 19, 0.13);
    --pvco-green: #248a58;
}

.page-company .pvco-main {
    position: relative;
    background:
        radial-gradient(circle at 78% 3%, rgba(238, 152, 38, 0.12), transparent 25rem),
        radial-gradient(circle at 9% 31%, rgba(238, 152, 38, 0.055), transparent 24rem),
        var(--bg);
}

.page-company .pvco-main,
.page-company .pvco-main .btn {
  font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Keep the company page aligned with the typography used across the site. */
.page-company .pvco-card-index,
.page-company .pvco-time-marker span {
  font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-company .pvco-card-index,
.page-company .pvco-flow-node > span {
  color: #ffb31a !important;
}

html[data-theme="light"] .page-company .pvco-card-index,
html[data-theme="light"] .page-company .pvco-flow-node > span {
  color: #a85f00 !important;
}

/* Match the company page's display hierarchy to the shared marketing pages. */
.page-company .pvco-main h1 {
  font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(2.75rem, 3.8vw, 3.9rem) !important;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.page-company .pvco-main h2 {
  font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(2.1rem, 2.75vw, 3rem) !important;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

@media (max-width: 720px) {
  .page-company .pvco-main h1 {
    font-size: clamp(2.5rem, 11vw, 3rem) !important;
  }

  .page-company .pvco-main h2 {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
  }
}

/* Compact navigation shares the same 720px breakpoint as its controller. */
@media (max-width: 720px) {
  .site-header .container.nav {
    box-sizing: border-box;
    justify-content: space-between;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    position: relative;
    width: 100% !important;
  }

  .site-header .container.nav > .logo {
    align-items: center;
    display: flex !important;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    left: 14px !important;
    margin: 0 !important;
    order: 0;
    position: absolute !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 34px !important;
    min-width: 34px !important;
    width: 34px !important;
    z-index: 2;
  }

  .site-header .container.nav > .logo img {
    display: block !important;
    height: 34px !important;
    max-height: 34px;
    max-width: 34px;
    object-fit: contain;
    width: 34px !important;
  }

  .site-header .nav-actions {
    align-items: center;
    gap: 14px !important;
    margin-left: auto;
  }

  .site-header .nav-session-action[data-session-state="authenticated"] {
    align-items: center;
    display: inline-flex;
    flex: 0 0 34px;
    gap: 0;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0;
    width: 34px;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .site-header .nav-session-action[data-session-state="authenticated"] > span:last-child {
    display: none !important;
  }

  .site-header .nav-session-action__icon,
  .site-header .nav-session-action__icon svg {
    height: 15px !important;
    width: 15px !important;
  }

  .site-header .nav-session-action[data-session-state="authenticated"] > span:first-child {
    font-size: 0.6rem !important;
    height: 24px !important;
    min-height: 24px !important;
    min-width: 24px !important;
    width: 24px !important;
  }

  .site-header .theme-toggle {
    align-items: center;
    border-radius: 50% !important;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px !important;
    justify-content: center;
    min-width: 34px !important;
    padding: 0 !important;
    width: 34px !important;
  }

  .site-header .theme-toggle__side-icon {
    display: none !important;
  }

  .site-header .theme-toggle__thumb {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex;
    height: 32px !important;
    inset: auto !important;
    justify-content: center;
    position: relative !important;
    transform: none !important;
    width: 32px !important;
  }

  .site-header .theme-toggle__thumb-icon {
    color: #ffb31a !important;
    height: 15px !important;
    left: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 15px !important;
  }

  .site-header .theme-toggle__thumb-icon--sun {
    opacity: 0 !important;
  }

  .site-header .theme-toggle__thumb-icon--moon {
    opacity: 1 !important;
  }

  html[data-theme="light"] .site-header .theme-toggle__thumb-icon--sun {
    color: #a85f00 !important;
    opacity: 1 !important;
  }

  html[data-theme="light"] .site-header .theme-toggle__thumb-icon--moon {
    opacity: 0 !important;
  }

  .site-header .mobile-nav-toggle {
    align-items: center;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px !important;
    justify-content: center;
    min-width: 34px;
    padding: 0 !important;
    width: 34px !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .site-header .mobile-nav-toggle__icon {
    transform: scale(0.7);
    transform-origin: center;
  }
}

/* Live operating signals. */
.page-company .pvco-kicker-dot,
.page-company .pvco-live > i,
.page-company .pvco-status-dot-live {
  animation: pvco-live-pulse 1.8s ease-out infinite;
  transform-origin: center;
  will-change: box-shadow, transform;
}

.page-company .pvco-live > i {
  animation-delay: 0.2s;
}

.page-company .pvco-status-dot-live {
  animation-delay: 0.4s;
}

@keyframes pvco-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 211, 138, 0.42);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(74, 211, 138, 0);
    transform: scale(0.92);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 211, 138, 0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-company .pvco-kicker-dot,
  .page-company .pvco-live > i,
  .page-company .pvco-status-dot-live {
    animation: none;
  }
}

.page-company .pvco-main h1,
.page-company .pvco-main h2,
.page-company .pvco-main h3 {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
    color: var(--text);
    font-weight: 600;
}

.page-company .pvco-main h1 {
    max-width: 880px;
    margin: 0;
    font-size: clamp(3.6rem, 6.5vw, 6.35rem);
    line-height: 0.96;
    letter-spacing: -0.062em;
}

.page-company .pvco-main h2 {
    margin: 0;
    font-size: clamp(2.45rem, 4.4vw, 4.4rem);
    line-height: 1.03;
    letter-spacing: -0.052em;
}

.page-company .pvco-main h3 {
    letter-spacing: -0.03em;
}

.page-company .pvco-kicker,
.page-company .pvco-section-label {
    margin: 0 0 1rem;
    color: var(--accent-bright);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.page-company .pvco-kicker-dot {
    display: inline-block;
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.55rem;
    border-radius: 999px;
    background: var(--pvco-green);
    box-shadow: 0 0 0 5px rgba(102, 217, 155, 0.10), 0 0 18px rgba(102, 217, 155, 0.25);
    vertical-align: 0.05rem;
}

/* .page-company .pvco-hero {
    position: relative;
    padding: clamp(5rem, 8vw, 8rem) 0 clamp(4.5rem, 7.5vw, 7.5rem);
    border-bottom: 1px solid var(--pvco-line);
    overflow: hidden;
} */
.page-company .pvco-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(78px, 8vw, 118px) 0 86px;
    border-bottom: 1px solid var(--line-soft);
}

/* .page-company .pvco-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(var(--pvco-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--pvco-line) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.65) 55%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.65) 55%, transparent 92%);
} */
.page-company .pvco-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 88%);
    pointer-events: none;
}

/* .page-company .pvco-hero::after {
    position: absolute;
    width: 34rem;
    height: 34rem;
    right: -14rem;
    top: -16rem;
    border: 1px solid rgba(238, 152, 38, 0.18);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 110px rgba(238, 152, 38, 0.08);
    pointer-events: none;
} */
.page-company .pvco-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(900px, 76vw);
    height: min(900px, 76vw);
    top: -520px;
    left: calc(50% - 790px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 152, 38, 0.2), rgba(238, 152, 38, 0.055) 42%, transparent 72%);
    pointer-events: none;
}

.page-company .pvco-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(370px, 0.88fr);
    align-items: center;
    gap: clamp(3.5rem, 7vw, 7rem);
}

.page-company .pvco-hero-lede {
    max-width: 760px;
    margin: 1.75rem 0 2rem;
    color: var(--text-soft);
    font-size: clamp(1.08rem, 1.55vw, 1.28rem);
    line-height: 1.68;
}

.page-company .pvco-hero-actions {
    margin-bottom: 2.8rem;
}

.page-company .pvco-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 790px;
    border-top: 1px solid var(--pvco-line);
}

.page-company .pvco-hero-proof > div {
    padding: 1.15rem 1.15rem 0 0;
}

.page-company .pvco-hero-proof strong,
.page-company .pvco-hero-proof span {
    display: block;
}

.page-company .pvco-hero-proof strong {
    margin-bottom: 0.28rem;
    color: var(--text);
    font-size: 1.05rem;
}

.page-company .pvco-hero-proof span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.page-company .pvco-console {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pvco-line-strong);
    border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%), var(--pvco-panel-raised);
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255,255,255,.012) inset;
}

html[data-theme="light"] .page-company .pvco-console {
    box-shadow: 0 30px 80px rgba(65, 48, 24, 0.10), 0 0 0 1px rgba(255,255,255,.45) inset;
}

.page-company .pvco-console::after {
    position: absolute;
    width: 15rem;
    height: 15rem;
    right: -7rem;
    top: 3.5rem;
    border-radius: 50%;
    background: rgba(238, 152, 38, 0.08);
    filter: blur(46px);
    content: "";
    pointer-events: none;
}

.page-company .pvco-console-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--pvco-line);
}

.page-company .pvco-console-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 750;
}

.page-company .pvco-console-brand img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.page-company .pvco-live {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.4rem 0.62rem;
    border: 1px solid rgba(102, 217, 155, 0.22);
    border-radius: 999px;
    color: var(--pvco-green);
    background: rgba(102, 217, 155, 0.06);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-company .pvco-live i,
.page-company .pvco-status-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--accent);
}

.page-company .pvco-live i,
.page-company .pvco-status-dot-live {
    background: var(--pvco-green);
    box-shadow: 0 0 0 4px rgba(102, 217, 155, 0.10);
}

.page-company .pvco-console-body {
    position: relative;
    z-index: 1;
    padding: 1.25rem;
}

.page-company .pvco-console-label {
    margin-bottom: 0.85rem;
    color: var(--muted);
    font: 700 0.66rem/1.2 "Aptos", sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.page-company .pvco-flow {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0.25rem 0 1.15rem;
}

.page-company .pvco-flow-node {
    width: min(100%, 285px);
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--pvco-line);
    border-radius: 0.78rem;
    background: rgba(255,255,255,.025);
}

html[data-theme="light"] .page-company .pvco-flow-node {
    background: rgba(255,255,255,.55);
}

.page-company .pvco-flow-node span {
    float: right;
    color: var(--muted-2);
    font: 700 0.66rem/1 monospace;
}

.page-company .pvco-flow-node strong,
.page-company .pvco-flow-node small {
    display: block;
}

.page-company .pvco-flow-node strong {
    color: var(--text);
    font-size: 0.82rem;
}

.page-company .pvco-flow-node small {
    margin-top: 0.22rem;
    color: var(--muted);
    font-size: 0.67rem;
    line-height: 1.4;
}

.page-company .pvco-flow-line {
    position: relative;
    width: 1px;
    height: 30px;
    background: var(--pvco-line-strong);
}

.page-company .pvco-flow-line i {
    position: absolute;
    left: -2px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 10px rgba(246, 191, 63, 0.5);
    animation: pvco-signal-travel 2.3s ease-in-out infinite;
}

.page-company .pvco-flow-core {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(238, 152, 38, 0.32);
    border-radius: 50%;
    color: #111;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    box-shadow: 0 0 38px rgba(238, 152, 38, 0.20);
}

.page-company .pvco-flow-core strong {
    position: relative;
    z-index: 2;
    font: 800 1.2rem/1 "Rubik", sans-serif;
}

.page-company .pvco-core-orbit {
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(246, 191, 63, 0.19);
    border-radius: 50%;
}

.page-company .pvco-core-orbit-b {
    inset: -14px;
    border-color: rgba(246, 191, 63, 0.09);
}

@keyframes pvco-signal-travel {
    0%, 100% { transform: translateY(0); opacity: 0.25; }
    50% { transform: translateY(15px); opacity: 1; }
}

.page-company .pvco-product-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pvco-line);
}

.page-company .pvco-product-status a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.72rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 0.72rem;
    background: rgba(255,255,255,.025);
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.page-company .pvco-product-status a:hover {
    border-color: rgba(238, 152, 38, 0.24);
    background: rgba(238, 152, 38, 0.055);
    transform: translateY(-1px);
}

html[data-theme="light"] .page-company .pvco-product-status a {
    background: rgba(28, 24, 18, 0.025);
}

.page-company .pvco-product-status a > span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.page-company .pvco-product-status strong {
    color: var(--text);
    font-size: 0.72rem;
    white-space: nowrap;
}

.page-company .pvco-product-status small {
    color: var(--muted);
    font-size: 0.62rem;
    white-space: nowrap;
}

.page-company .pvco-statement,
.page-company .pvco-model,
.page-company .pvco-history,
.page-company .pvco-structure,
.page-company .pvco-cta {
    padding: clamp(5.5rem, 8vw, 8rem) 0;
}

.page-company .pvco-statement-grid {
    display: grid;
    grid-template-columns: 0.34fr 1.66fr;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.page-company .pvco-section-label {
    padding-top: 0.6rem;
}

.page-company .pvco-statement-copy {
    max-width: 1050px;
}

.page-company .pvco-statement-lede {
    max-width: 940px;
    margin: 1.7rem 0 2.7rem;
    color: var(--text-soft);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.55;
}

.page-company .pvco-story-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    padding-top: 1.7rem;
    border-top: 1px solid var(--pvco-line);
}

.page-company .pvco-story-columns p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.75;
}

.page-company .pvco-model {
    border-block: 1px solid var(--pvco-line);
    background: linear-gradient(180deg, var(--pvco-panel), transparent 30%), var(--bg-soft);
}

.page-company .pvco-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    align-items: end;
    gap: clamp(2rem, 6vw, 6rem);
    margin-bottom: clamp(2.8rem, 5vw, 4.5rem);
}

.page-company .pvco-section-heading > p {
    max-width: 570px;
    margin: 0 0 0.35rem;
    color: var(--muted);
    line-height: 1.7;
}

.page-company .pvco-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.page-company .pvco-bento-card {
    position: relative;
    min-height: 290px;
    padding: clamp(1.6rem, 3vw, 2.35rem);
    border: 1px solid var(--pvco-line);
    border-radius: 1.15rem;
    background: rgba(255,255,255,.022);
    overflow: hidden;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.page-company .pvco-bento-card:hover {
    border-color: rgba(238, 152, 38, 0.28);
    background: rgba(238, 152, 38, 0.045);
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(0,0,0,.10);
}

html[data-theme="light"] .page-company .pvco-bento-card {
    background: rgba(255,255,255,.56);
}

.page-company .pvco-bento-card-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(230px, 0.55fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.2rem);
    min-height: 260px;
}

.page-company .pvco-card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 2.4rem;
    border: 1px solid rgba(238, 152, 38, 0.24);
    border-radius: 0.82rem;
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.07);
}

.page-company .pvco-bento-card-wide .pvco-card-icon {
    margin: 0;
}

.page-company .pvco-card-index {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--muted-2);
    font: 700 0.68rem/1 monospace;
}

.page-company .pvco-bento-card h3 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.45rem, 2.25vw, 2rem);
}

.page-company .pvco-bento-card p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    line-height: 1.68;
}

.page-company .pvco-mini-stack {
    display: grid;
    gap: 0.58rem;
}

.page-company .pvco-mini-stack span {
    position: relative;
    display: block;
    padding: 0.7rem 0.82rem 0.7rem 2rem;
    border: 1px solid var(--pvco-line);
    border-radius: 0.65rem;
    color: var(--text-soft);
    background: rgba(255,255,255,.025);
    font-size: 0.74rem;
}

.page-company .pvco-mini-stack span::before {
    position: absolute;
    left: 0.82rem;
    top: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);
    content: "";
}

.page-company .pvco-bento-card-accent {
    background:
        radial-gradient(circle at 92% 12%, rgba(238, 152, 38, 0.11), transparent 11rem),
        rgba(255,255,255,.022);
}

.page-company .pvco-signal-bars {
    display: grid;
    gap: 0.62rem;
    margin-top: 2rem;
}

.page-company .pvco-signal-bars i {
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--pvco-line);
    overflow: hidden;
}

.page-company .pvco-signal-bars i::after {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
    content: "";
}

.page-company .pvco-section-heading-compact {
    margin-bottom: 3rem;
}

.page-company .pvco-timeline {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pvco-line);
    list-style: none;
}

.page-company .pvco-timeline li {
    display: grid;
    grid-template-columns: 70px minmax(180px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(1.2rem, 3.6vw, 3.5rem);
    padding: 2rem 0;
    border-bottom: 1px solid var(--pvco-line);
    transition: background-color 180ms ease;
}

.page-company .pvco-timeline li:hover {
    background: linear-gradient(90deg, rgba(238, 152, 38, 0.045), transparent 72%);
}

.page-company .pvco-time-marker {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--accent-bright);
}

.page-company .pvco-time-marker span {
    font: 750 0.72rem/1.25 monospace;
}

.page-company .pvco-time-marker i {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 0.08rem;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 0 1px var(--accent-bright), 0 0 12px rgba(246, 191, 63, 0.25);
}

.page-company .pvco-time-date strong,
.page-company .pvco-time-date small {
    display: block;
}

.page-company .pvco-time-date strong {
    color: var(--text);
    font-size: 0.92rem;
}

.page-company .pvco-time-date small {
    margin-top: 0.3rem;
    color: var(--muted);
}

.page-company .pvco-time-copy h3 {
    margin: 0 0 0.55rem;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.page-company .pvco-time-copy p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.page-company .pvco-structure {
    border-top: 1px solid var(--pvco-line);
    background: var(--bg-soft);
}

.page-company .pvco-structure-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.page-company .pvco-structure-copy h2 {
    max-width: 760px;
    font-size: clamp(2.35rem, 4vw, 3.8rem);
}

.page-company .pvco-structure-copy > p:not(.pvco-kicker) {
    max-width: 760px;
    margin: 1.5rem 0;
    color: var(--muted);
    line-height: 1.75;
}

.page-company .pvco-structure-copy strong {
    color: var(--text);
}

.page-company .pvco-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-bright);
    font-weight: 750;
}

.page-company .pvco-text-link i {
    font-size: 0.72em;
    transition: transform 160ms ease;
}

.page-company .pvco-text-link:hover i {
    transform: translate(2px, -2px);
}

.page-company .pvco-relationship {
    padding: 1.2rem;
    border: 1px solid var(--pvco-line);
    border-radius: 1.2rem;
    background: var(--pvco-panel-raised);
    box-shadow: 0 22px 60px rgba(0,0,0,.13);
}

.page-company .pvco-org {
    position: relative;
    padding: 1.35rem 1.45rem;
    border: 1px solid var(--pvco-line);
    border-radius: 0.9rem;
    background: var(--pvco-panel);
}

.page-company .pvco-org span,
.page-company .pvco-org strong,
.page-company .pvco-org small {
    display: block;
}

.page-company .pvco-org span {
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-company .pvco-org strong {
    color: var(--text);
    font-size: 1.15rem;
}

.page-company .pvco-org small {
    margin-top: 0.35rem;
    color: var(--muted);
    line-height: 1.45;
}

.page-company .pvco-org-paravane {
    border-color: rgba(238, 152, 38, 0.27);
    background: linear-gradient(135deg, rgba(238, 152, 38, 0.09), transparent 65%), var(--pvco-panel);
}

.page-company .pvco-org-connector {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.7rem;
    min-height: 54px;
    padding: 0 1.1rem;
    color: var(--muted-2);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-company .pvco-org-connector i {
    height: 1px;
    background: var(--pvco-line);
}

.page-company .pvco-cta {
    padding-top: clamp(4.5rem, 7vw, 6.5rem);
    padding-bottom: clamp(3.5rem, 5vw, 5rem);
}

.page-company .pvco-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(2.5rem, 5vw, 4.6rem);
    border: 1px solid rgba(238, 152, 38, 0.28);
    border-radius: 1.35rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 89% 12%, rgba(246, 191, 63, 0.22), transparent 15rem),
        linear-gradient(130deg, rgba(238, 152, 38, 0.12), rgba(238, 152, 38, 0.03) 48%, transparent 72%),
        var(--pvco-panel-raised);
    box-shadow: 0 28px 80px rgba(0,0,0,.15);
}

.page-company .pvco-cta-card::before {
    position: absolute;
    width: 18rem;
    height: 18rem;
    right: -9rem;
    bottom: -10rem;
    border: 1px solid rgba(246, 191, 63, 0.17);
    border-radius: 50%;
    content: "";
}

.page-company .pvco-cta-card h2 {
    max-width: 820px;
    font-size: clamp(2.25rem, 3.7vw, 3.65rem);
}

.page-company .pvco-cta-side {
    position: relative;
    z-index: 1;
}

.page-company .pvco-cta-side > p {
    margin: 0 0 1.5rem;
    color: var(--text-soft);
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .page-company .pvco-flow-line i { animation: none; }
    .page-company .pvco-bento-card,
    .page-company .pvco-product-status a { transition: none; }
}

@media (max-width: 1080px) {
    .page-company .pvco-hero-grid,
    .page-company .pvco-structure-grid {
        grid-template-columns: 1fr;
    }

    .page-company .pvco-console,
    .page-company .pvco-relationship {
        max-width: 760px;
    }

    .page-company .pvco-bento-card-wide {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .page-company .pvco-mini-stack {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .page-company .pvco-main h1 {
        font-size: clamp(3.15rem, 11vw, 5.1rem);
    }

    .page-company .pvco-statement-grid,
    .page-company .pvco-section-heading,
    .page-company .pvco-cta-card {
        grid-template-columns: 1fr;
    }

    .page-company .pvco-section-label {
        padding: 0;
    }

    .page-company .pvco-story-columns,
    .page-company .pvco-bento {
        grid-template-columns: 1fr;
    }

    .page-company .pvco-bento-card-wide {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .page-company .pvco-bento-card-wide .pvco-card-icon {
        margin-bottom: 0.25rem;
    }

    .page-company .pvco-mini-stack {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-company .pvco-timeline li {
        grid-template-columns: 54px 1fr;
    }

    .page-company .pvco-time-copy {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .page-company .pvco-hero {
        padding-top: 4.25rem;
    }

    .page-company .pvco-main h1 {
        font-size: clamp(2.85rem, 14vw, 4rem);
    }

    .page-company .pvco-hero-proof,
    .page-company .pvco-product-status,
    .page-company .pvco-mini-stack {
        grid-template-columns: 1fr;
    }

    .page-company .pvco-hero-proof > div {
        padding: 0.95rem 0;
        border-bottom: 1px solid var(--pvco-line);
    }

    .page-company .pvco-hero-proof > div:last-child {
        border-bottom: 0;
    }

    .page-company .pvco-console-body {
        padding: 1rem;
    }

    .page-company .pvco-product-status a {
        min-height: 46px;
    }

    .page-company .pvco-statement,
    .page-company .pvco-model,
    .page-company .pvco-history,
    .page-company .pvco-structure,
    .page-company .pvco-cta {
        padding-top: 4.25rem;
        padding-bottom: 4.25rem;
    }

    .page-company .pvco-bento-card {
        min-height: 0;
        padding: 1.4rem;
    }

    .page-company .pvco-card-icon {
        margin-bottom: 1.65rem;
    }

    .page-company .pvco-timeline li {
        grid-template-columns: 38px 1fr;
        gap: 0.9rem;
        padding: 1.65rem 0;
    }

    .page-company .pvco-time-marker {
        gap: 0;
    }

    .page-company .pvco-time-marker span {
        display: none;
    }

    .page-company .pvco-relationship {
        padding: 0.85rem;
    }

    .page-company .pvco-org-connector {
        padding-inline: 0.4rem;
    }

    .page-company .pvco-cta-card {
        padding: 1.6rem;
        border-radius: 1rem;
    }
}

/* Shared footer directory */
.site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    align-items: center;
    justify-content: end;
    gap: 10px 18px;
    white-space: normal;
}

.site-footer .footer-links a:nth-child(6) {
    grid-column: 2;
}

@media (max-width: 980px) {
    .site-footer .footer-links {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .site-footer .footer-links {
        grid-template-columns: repeat(3, max-content);
    }

    .site-footer .footer-links a:nth-child(6) {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------------------
   Shared standard-page hero type alignment: Careers + About / Company
   Keeps both pages on the same headline scale used by Pricing, Docs, and Contact.
   The Company rule is intentionally !important because an earlier pvco rule is
   also !important and would otherwise remain authoritative.
   -------------------------------------------------------------------------- */
.page-company .pvco-hero h1 {
    max-width: 860px;
    margin: 0;
    font-size: clamp(42px, 4.4vw, 60px) !important;
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1;
}

@media (max-width: 720px) {
    .page-company .pvco-hero h1 {
        font-size: clamp(42px, 12vw, 58px) !important;
        letter-spacing: -0.052em;
    }
}

/* Careers */
.page-careers .careers-hero {
    position: relative;
    overflow: hidden;
}

.page-careers .careers-hero::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%),
        linear-gradient(115deg, transparent 52%, color-mix(in srgb, var(--line) 48%, transparent) 52.1%, transparent 52.3%);
    content: "";
    pointer-events: none;
}

.page-careers .careers-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.page-careers .careers-hero-copy {
    max-width: 780px;
}

.page-careers .careers-hero-copy h1 {
    max-width: 740px;
}

.page-careers .careers-hero-actions {
    margin-top: 2rem;
}

.page-careers .careers-signal-card {
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: color-mix(in srgb, var(--control-bg) 88%, transparent);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
}

.page-careers .careers-signal-top,
.page-careers .careers-signal-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.page-careers .careers-signal-top {
    align-items: center;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-careers .careers-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-bright);
}

.page-careers .careers-live.is-empty {
    padding: 0.3rem 0.55rem;
    border: 1px solid color-mix(in srgb, #ff5f57 52%, transparent);
    border-radius: 999px;
    color: #ff5f57;
    background: color-mix(in srgb, #ff5f57 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff5f57 6%, transparent);
}

.page-careers .careers-live::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent);
    content: "";
    /* animation: careers-live-dot-pulse 1.8s ease-in-out infinite; */
    animation: careers-live-dot-pulse 1.6s ease-in-out infinite;
    will-change: transform, box-shadow;
}

/* @keyframes careers-live-dot-pulse {
    0%,
    100% {
        transform: scale(0.94);
        box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent),
            0 0 7px color-mix(in srgb, currentColor 24%, transparent);
    }

    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 0%, transparent),
            0 0 16px color-mix(in srgb, currentColor 68%, transparent);
    }
} */

@keyframes careers-live-dot-pulse {
    0%,
    100% {
        transform: scale(0.90);
        box-shadow:
            0 0 5px rgba(246, 191, 63, 0.82),
            0 0 10px rgba(246, 191, 63, 0.38);
    }

    50% {
        transform: scale(1.18);
        box-shadow:
            0 0 8px rgba(246, 191, 63, 1),
            0 0 17px rgba(246, 191, 63, 0.72);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-careers .careers-live::before {
        animation: none;
        transform: none;
    }
}

.page-careers .careers-signal-card > strong {
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.12;
}

.page-careers .careers-signal-card > p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.65;
}

.page-careers .careers-signal-list {
    display: grid;
    border-top: 1px solid var(--line);
}

.page-careers .careers-signal-row {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
}

.page-careers .careers-signal-row strong {
    color: var(--text);
    font-weight: 600;
}

.page-careers .careers-principles {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.page-careers .careers-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.page-careers .careers-section-heading h2 {
    margin: 0;
}

.page-careers .careers-section-heading > p {
    max-width: 650px;
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.page-careers .careers-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-careers .careers-principle {
    min-height: 260px;
    padding: 1.75rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--control-bg) 68%, transparent);
}

.page-careers .careers-principle i {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 3rem;
    place-items: center;
    border: 1px solid var(--accent-line);
    border-radius: 12px;
    color: var(--accent-bright);
}

.page-careers .careers-principle h3 {
    margin-bottom: 0.65rem;
}

.page-careers .careers-principle p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.65;
}

.page-careers .careers-application-section {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
    border-top: 1px solid var(--line);
}

.page-careers .careers-application-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.page-careers .careers-application-copy {
    position: sticky;
    top: 110px;
}

.page-careers .careers-application-copy p:not(.kicker) {
    color: var(--text-soft);
    line-height: 1.7;
}

.page-careers .careers-email {
    display: inline-flex;
    margin-top: 1rem;
    color: var(--accent-bright);
    font-weight: 600;
}

.page-careers .careers-email-intro {
    color: var(--accent-bright);
    font-weight: 600;
}

.page-careers .careers-form-shell {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.page-careers .careers-form-heading {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.page-careers .careers-form-heading h2 {
    margin: 0 0 0.5rem;
}

.page-careers .careers-form-heading p {
    margin: 0;
    color: var(--text-soft);
}

.page-careers .careers-upload {
    padding: 1rem;
    border: 1px dashed var(--accent-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 5%, var(--control-bg));
}

.page-careers .careers-upload input[type="file"] {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.page-careers .careers-upload input[type="file"]::file-selector-button {
    margin-right: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--accent-line);
    border-radius: 10px;
    color: var(--text);
    background: var(--control-bg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.page-careers .careers-field-help {
    color: var(--muted-2);
    font-size: 0.75rem;
    line-height: 1.5;
}

.page-careers .careers-consent {
    display: flex;
    grid-column: 1 / -1;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.55;
}

.page-careers .careers-consent input {
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    accent-color: var(--accent);
}

@media (max-width: 900px) {
    .page-careers .careers-hero-grid,
    .page-careers .careers-application-grid {
        grid-template-columns: 1fr;
    }

    .page-careers .careers-principle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-careers .careers-principle:last-child {
        grid-column: 1 / -1;
    }

    .page-careers .careers-application-copy {
        position: static;
    }
}

@media (max-width: 620px) {
    .page-careers .careers-section-heading,
    .page-careers .careers-principle-grid {
        grid-template-columns: 1fr;
    }

    .page-careers .careers-principle:last-child {
        grid-column: auto;
    }

    .page-careers .careers-principle {
        min-height: 0;
    }

    .page-careers .careers-principle i {
        margin-bottom: 1.75rem;
    }

    .page-careers .form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .page-careers .form-footer .btn {
        width: 100%;
    }
}


/* Shared Resources navigation and footer directory: v012.000.001-alpha.108 */
.site-header .nav-resources-menu {
    width: min(390px, calc(100vw - 40px));
    padding: 12px;
}

.site-header .nav-resources-menu .product-catalog-head {
    padding: 2px 4px 11px;
}

.site-header .nav-resources-menu .product-catalog-head strong {
    font-size: 12px;
}

.site-header .nav-resources-menu .product-catalog-head span {
    max-width: 32ch;
}

.nav-resources-list {
    display: grid;
    gap: 6px;
    padding-top: 8px;
}

.nav-resource-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.022);
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.nav-resource-item:hover,
.nav-resource-item:focus-visible,
.nav-resource-item[aria-current="page"] {
    border-color: var(--accent-line);
    background: rgba(238, 152, 38, 0.075);
    transform: translateY(-1px);
}

.nav-resource-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--accent-line);
    border-radius: 8px;
    color: var(--accent-bright);
    background: rgba(238, 152, 38, 0.08);
}

.nav-resource-item > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.nav-resource-item strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.25;
}

.nav-resource-item small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.nav-resource-arrow {
    color: var(--accent-bright);
    font-size: 10px;
    transition: transform 160ms ease;
}

.nav-resource-item:hover .nav-resource-arrow,
.nav-resource-item:focus-visible .nav-resource-arrow {
    transform: translateX(2px);
}

html[data-theme="light"] .nav-resource-item {
    background: rgba(38, 31, 19, 0.025);
}

html[data-theme="light"] .nav-resource-item:hover,
html[data-theme="light"] .nav-resource-item:focus-visible,
html[data-theme="light"] .nav-resource-item[aria-current="page"] {
    background: rgba(196, 115, 13, 0.08);
}

.site-header .nav-contact-action {
    white-space: nowrap;
}

.site-footer {
    padding: 0;
}

.site-footer .footer-directory {
    padding-top: clamp(30px, 3.5vw, 46px);
}

.footer-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: clamp(32px, 6vw, 88px);
    /* width: min(860px, 100%); */
}

.footer-directory-column {
    min-width: 0;
}

.footer-directory-column h2 {
    /* margin: 0 0 18px; */
    margin: 0 0 10px;
    color: var(--muted);
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0.015em;
    text-transform: none;
}

.footer-directory-links {
    display: grid;
    justify-items: start;
    /* gap: 11px; */
    gap: 5px;
}

.footer-directory-links a {
    color: var(--text);
    font-size: 15px;
    line-height: 1.35;
    transition: color 150ms ease, transform 150ms ease;
}

.footer-directory-links a:hover,
.footer-directory-links a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--accent-bright);
}

.footer-directory-links a:hover,
.footer-directory-links a:focus-visible {
    transform: translateX(2px);
}

.footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    margin-top: clamp(28px, 3vw, 42px);
    padding: 16px 0 18px;
    border-top: 1px solid var(--line-soft);
}

.footer-copyright {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.footer-copyright a {
    color: var(--text-soft);
    transition: color 150ms ease;
}

.footer-copyright a:hover,
.footer-copyright a:focus-visible {
    color: var(--accent-bright);
}

.footer-bottom .footer-social {
    justify-self: center;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 18px;
}

.footer-legal a {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    transition: color 150ms ease;
}

@media (max-width: 980px) {
    .footer-directory-grid {
        width: 100%;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .footer-bottom .footer-social {
        justify-self: center;
    }

    .footer-legal {
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .site-header .nav-resources-menu {
        width: 100%;
    }

    .site-header .nav-contact-action {
        min-height: 34px;
        padding-inline: 10px;
        font-size: 12px;
    }

    .footer-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 28px;
    }

    .footer-directory-column:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .site-footer .footer-directory {
        padding-top: 42px;
    }

    .footer-directory-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-directory-column:last-child {
        grid-column: auto;
    }

    .footer-directory-column h2 {
        margin-bottom: 13px;
    }

    .footer-bottom {
        justify-items: start;
        margin-top: 40px;
        text-align: left;
    }

    .footer-bottom .footer-social {
        justify-self: start;
    }

    .footer-legal {
        justify-content: flex-start;
    }
}

/* Targeted header contact spacing: v012.000.001-alpha.108 */
@media (min-width: 1024px) {
    .site-header .nav-actions {
        justify-content: flex-start;
    }

    .site-header .nav-actions .nav-contact-action {
        margin-left: 0 !important;
    }

    .site-header .nav-actions .theme-toggle {
        margin-left: auto;
    }
}

@media (max-width: 720px) {
    .site-header .nav-resources:not(.is-open) .nav-resources-menu {
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

/* Careers jobs directory and role pages: v012.000.001-alpha.109 */
.page-careers .careers-open-roles-section,
.page-careers .careers-jobs-section,
.page-careers .careers-job-content {
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid var(--line);
}

.page-careers .careers-jobs-directory {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: color-mix(in srgb, var(--control-bg) 76%, transparent);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
}

.page-careers .careers-jobs-directory-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
}

.page-careers .careers-jobs-directory-head h2,
.page-careers .careers-jobs-directory-head .kicker { margin-bottom: 0; }

.page-careers .careers-jobs-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.88rem;
}

.page-careers .careers-jobs-controls {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(145px, 0.28fr));
    gap: 0.75rem;
    padding: 1rem clamp(1.4rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
}

.page-careers .careers-jobs-controls[hidden] { display: none; }
.page-careers .careers-jobs-controls label { margin: 0; }

.page-careers .careers-jobs-controls input,
.page-careers .careers-jobs-controls select {
    width: 100%;
    min-height: 48px;
    margin: 0;
    border-color: var(--line);
    background: var(--control-bg);
}

.page-careers .careers-job-search { position: relative; }
.page-careers .careers-job-search i {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    color: var(--muted);
    transform: translateY(-50%);
}
.page-careers .careers-job-search input { padding-left: 2.7rem; }

.page-careers .careers-jobs-columns,
.page-careers .careers-job-row {
    display: grid;
    grid-template-columns: minmax(250px, 1.2fr) minmax(250px, 1fr) minmax(125px, 0.3fr) 24px;
    gap: 1.5rem;
    align-items: center;
}

.page-careers .careers-jobs-columns {
    padding: 0.8rem clamp(1.4rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
}

.page-careers .careers-job-row {
    min-height: 88px;
    padding: 1.15rem clamp(1.4rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    transition: border-color 180ms ease, background-color 180ms ease;
}

.page-careers .careers-job-row:last-child { border-bottom: 0; }
.page-careers .careers-job-row:hover,
.page-careers .careers-job-row:focus-visible {
    border-color: var(--accent-line);
    background: color-mix(in srgb, var(--accent) 7%, var(--control-bg));
}
.page-careers .careers-job-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.page-careers .careers-job-row-title,
.page-careers .careers-job-row-context { display: flex; min-width: 0; gap: 0.45rem; }
.page-careers .careers-job-row-title { flex-direction: column; }
.page-careers .careers-job-row-title strong { font-size: 1rem; }
.page-careers .careers-job-row-title small,
.page-careers .careers-job-row-context,
.page-careers .careers-job-row time { color: var(--muted); font-size: 0.82rem; }
.page-careers .careers-job-row-context { flex-wrap: wrap; }
.page-careers .careers-job-row-context span + span::before {
    margin-right: 0.45rem;
    color: var(--accent-bright);
    content: "·";
}
.page-careers .careers-job-row > i { color: var(--accent-bright); transition: transform 180ms ease; }
.page-careers .careers-job-row:hover > i { transform: translateX(4px); }

.page-careers .careers-jobs-empty {
    display: grid;
    gap: 0.55rem;
    justify-items: start;
    padding: clamp(2rem, 5vw, 4rem);
    color: var(--text-soft);
}
.page-careers .careers-jobs-empty strong { color: var(--text); font-size: 1.05rem; }

.page-careers .careers-jobs-footer-action {
    display: flex;
    justify-content: flex-end;
    padding: 1.2rem clamp(1.4rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
}

.page-careers .careers-jobs-hero,
.page-careers .careers-job-hero {
    padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
    background: radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--control-bg) 72%, transparent), transparent);
}

.page-careers .careers-jobs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
}

.page-careers .careers-jobs-hero h1,
.page-careers .careers-job-hero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(2.75rem, 4.8vw, 4rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.page-careers .careers-jobs-hero-grid > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.05rem;
    line-height: 1.75;
}

.page-careers .careers-job-back {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 2rem;
    color: var(--muted);
    font-size: 0.86rem;
}
.page-careers .careers-job-back:hover { color: var(--accent-bright); }

.page-careers .careers-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 1.6rem;
    color: var(--text-soft);
}
.page-careers .careers-job-meta span { display: inline-flex; gap: 0.5rem; align-items: center; }
.page-careers .careers-job-meta i { color: var(--accent-bright); }

.page-careers .careers-job-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.page-careers .careers-job-description,
.page-careers .careers-job-application { min-width: 0; }

.page-careers .careers-job-copy-section {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
}
.page-careers .careers-job-copy-section:last-child { margin-bottom: 0; border-bottom: 0; }
.page-careers .careers-job-copy-section h2 {
    margin: 0 0 1.25rem;
    color: var(--accent-bright);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.page-careers .careers-job-copy-section p,
/* .page-careers .careers-job-copy-section li { color: var(--text-soft); line-height: 1.75; } */
.page-careers .careers-job-copy-section li {/* color: var(--text-soft); */line-height: 1.75;}

.page-careers .careers-job-copy-section p { margin: 0 0 1rem; }
.page-careers .careers-job-copy-section li + li { margin-top: 0.75rem; }

.page-careers .careers-job-copy-section-policy h2 {
    /* font-size: clamp(1.25rem, 2vw, 1.65rem); */
    /* font-size: clamp(1.1rem, 1.6vw, 1.4rem);     */
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
}

.page-careers .careers-job-copy-section-policy p,
.page-careers .careers-job-copy-section-policy li {
    /* font-size: 0.92rem; */
    /* line-height: 1.65; */
    /* font-size: 0.82rem; */
    /* line-height: 1.55;     */
    font-size: 0.72rem;
    line-height: 1.45;
}

/* Policy-section spacing */
.page-careers .careers-job-copy-section-policy {padding-bottom: 1.5rem; margin-bottom: 1.5rem;}
.page-careers .careers-job-copy-section-policy h2 {margin-bottom: 0.75rem;}
.page-careers .careers-job-copy-section-policy p {margin-bottom: 0.7rem;}
.page-careers .careers-job-copy-section-policy p:last-child {margin-bottom: 0;}


.page-careers .careers-job-summary { color: var(--text) !important; font-size: 1.08rem; }

.page-careers .careers-job-application { position: sticky; top: 100px; }
.page-careers .careers-job-application .careers-form-shell {
    padding: clamp(1.35rem, 3vw, 2rem);
    border-color: var(--line);
    background: color-mix(in srgb, var(--control-bg) 90%, transparent);
}
.page-careers .careers-job-application .form-grid { gap: 1rem; }
.page-careers .careers-job-application .careers-form-heading .kicker { margin-bottom: 0.45rem; }
.page-careers .careers-job-application .careers-form-heading h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

@media (max-width: 1000px) {
    .page-careers .careers-jobs-controls { grid-template-columns: 1fr 1fr; }
    .page-careers .careers-job-layout,
    .page-careers .careers-jobs-hero-grid { grid-template-columns: 1fr; }
    .page-careers .careers-job-application { position: static; }
}

@media (max-width: 760px) {
    .page-careers .careers-jobs-columns { display: none; }
    .page-careers .careers-job-row { grid-template-columns: 1fr 20px; gap: 0.75rem 1rem; padding: 1.25rem; }
    .page-careers .careers-job-row-title,
    .page-careers .careers-job-row-context,
    .page-careers .careers-job-row time { grid-column: 1; }
    .page-careers .careers-job-row > i { grid-column: 2; grid-row: 1 / span 3; }
    .page-careers .careers-job-row-context { display: grid; gap: 0.25rem; }
    .page-careers .careers-job-row-context span + span::before { display: none; }
}

@media (max-width: 620px) {
    .page-careers .careers-jobs-directory-head { align-items: start; flex-direction: column; gap: 0.75rem; }
    .page-careers .careers-jobs-controls { grid-template-columns: 1fr; }
    .page-careers .careers-jobs-footer-action,
    .page-careers .careers-jobs-footer-action .btn { width: 100%; }
    .page-careers .careers-jobs-footer-action .btn { justify-content: center; }
    .page-careers .careers-job-layout { gap: 3rem; }
    .page-careers .careers-job-application .form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .page-careers .careers-job-row,
    .page-careers .careers-job-row > i { transition: none; }
}


/* Careers principle card hover treatment */
.page-careers .careers-principle {
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}

.page-careers .careers-principle i {
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms ease,
        filter 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .page-careers .careers-principle:hover {
        transform: translateY(-6px);
        border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
        background: color-mix(in srgb, var(--control-bg) 94%, var(--accent) 6%);
        box-shadow:
            0 18px 44px color-mix(in srgb, var(--bg) 58%, transparent),
            0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .page-careers .careers-principle:hover i {
        transform: translateY(-2px) scale(1.08);
        color: var(--accent);
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 42%, transparent));
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-careers .careers-principle,
    .page-careers .careers-principle i {
        transition: none;
    }
}

/* Careers role directory controls */
.careers-jobs-directory .careers-jobs-controls {
    --careers-control-panel: rgba(243, 167, 18, 0.045);
    --careers-control-surface: #111315;
    --careers-control-surface-focus: #151719;
    --careers-control-border: rgba(255, 255, 255, 0.1);
    --careers-control-text: #f6f2ea;
    --careers-control-muted: #9f9a91;
    --careers-control-accent: #f3a712;
    --careers-option-selected: #eceff1;
    --careers-option-selected-text: #17191c;
    grid-template-columns: minmax(260px, 1fr) repeat(3, max-content);
    align-items: end;
    gap: 0.7rem;
    margin: 1rem clamp(1rem, 2.8vw, 2rem);
    padding: 0.85rem;
    border: 1px solid rgba(243, 167, 18, 0.2);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(243, 167, 18, 0.07), transparent 38%), var(--careers-control-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.careers-jobs-directory .careers-jobs-controls > label {
    display: grid;
    min-width: 0;
    gap: 0.42rem;
    margin: 0;
}

.careers-jobs-directory .careers-control-label {
    padding-left: 0.15rem;
    color: var(--careers-control-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
}

.careers-jobs-directory .careers-control-field {
    position: relative;
    display: block;
    min-width: 0;
}

.careers-jobs-directory .careers-control-field {
    width: clamp(10rem, var(--careers-select-width, 14rem), 15rem);
    max-width: 100%;
}

.careers-jobs-directory .careers-control-field input,
.careers-jobs-directory .careers-control-field select {
    width: 100%;
    height: 48px;
    margin: 0;
    border: 1px solid var(--careers-control-border);
    border-radius: 10px;
    outline: 0;
    background: var(--careers-control-surface);
    color: var(--careers-control-text);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.careers-jobs-directory .careers-control-field input {
    padding: 0 1rem 0 2.8rem;
}

.careers-jobs-directory .careers-control-field select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 2.65rem 0 0.95rem;
    cursor: pointer;
    color-scheme: dark;
}

.careers-jobs-directory .careers-control-field input::placeholder {
    color: var(--careers-control-muted);
    font-weight: 500;
    opacity: 1;
}

.careers-jobs-directory .careers-job-search i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 1rem;
    color: var(--careers-control-accent);
    font-size: 0.86rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.careers-jobs-directory .careers-control-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid var(--careers-control-accent);
    border-bottom: 1.5px solid var(--careers-control-accent);
    pointer-events: none;
    transform: translateY(-68%) rotate(45deg);
}

.careers-jobs-directory .careers-control-field:focus-within input,
.careers-jobs-directory .careers-control-field:focus-within select {
    border-color: rgba(243, 167, 18, 0.72);
    background: var(--careers-control-surface-focus);
    box-shadow: 0 0 0 3px rgba(243, 167, 18, 0.12);
}

.careers-jobs-directory .careers-control-field select option {
    background: var(--careers-control-surface);
    color: var(--careers-control-text);
}

.careers-jobs-directory .careers-control-field select option:checked,
.careers-jobs-directory .careers-control-field select option:hover,
.careers-jobs-directory .careers-control-field select option:focus {
    background: var(--careers-option-selected) linear-gradient(0deg, var(--careers-option-selected) 0%, var(--careers-option-selected) 100%) !important;
    color: var(--careers-option-selected-text) !important;
    box-shadow: 0 0 0 100vmax var(--careers-option-selected) inset !important;
}

html.light .careers-jobs-directory .careers-jobs-controls,
html[data-theme="light"] .careers-jobs-directory .careers-jobs-controls {
    --careers-control-panel: rgba(210, 132, 0, 0.055);
    --careers-control-surface: #fffaf0;
    --careers-control-surface-focus: #ffffff;
    --careers-control-border: rgba(49, 38, 20, 0.17);
    --careers-control-text: #1b1711;
    --careers-control-muted: #70685c;
    --careers-control-accent: #c97b00;
    --careers-option-selected: #e8ebed;
    --careers-option-selected-text: #17191c;
    border-color: rgba(201, 123, 0, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html.light .careers-jobs-directory .careers-control-field select,
html[data-theme="light"] .careers-jobs-directory .careers-control-field select {
    color-scheme: light;
}

html.light .careers-jobs-directory .careers-control-field select option,
html[data-theme="light"] .careers-jobs-directory .careers-control-field select option {
    background: #fffaf0;
    color: #1b1711;
}

html.light .careers-jobs-directory .careers-control-field select option:checked,
html.light .careers-jobs-directory .careers-control-field select option:hover,
html.light .careers-jobs-directory .careers-control-field select option:focus,
html[data-theme="light"] .careers-jobs-directory .careers-control-field select option:checked,
html[data-theme="light"] .careers-jobs-directory .careers-control-field select option:hover,
html[data-theme="light"] .careers-jobs-directory .careers-control-field select option:focus {
    background: var(--careers-option-selected) linear-gradient(0deg, var(--careers-option-selected) 0%, var(--careers-option-selected) 100%) !important;
    color: var(--careers-option-selected-text) !important;
    box-shadow: 0 0 0 100vmax var(--careers-option-selected) inset !important;
}

@media (max-width: 1100px) {
    .careers-jobs-directory .careers-jobs-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .careers-jobs-directory .careers-control-field {
        width: 100%;
    }
}

/* Careers application confirmation */
.page-careers-confirmation .careers-confirmation-section {
    min-height: min(680px, calc(100vh - 160px));
    display: grid;
    place-items: center;
    padding: clamp(5rem, 10vw, 9rem) 0;
    background:
        radial-gradient(circle at 50% 18%, var(--accent-soft), transparent 34%),
        linear-gradient(180deg, transparent, rgba(238, 152, 38, 0.025));
}

.page-careers-confirmation .careers-confirmation-card {
    width: min(680px, 100%);
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--accent-line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.page-careers-confirmation .careers-confirmation-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 1.5rem;
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-bright);
    font-size: 1.5rem;
}

.page-careers-confirmation .careers-confirmation-card h1 {
    margin: 0 0 1rem;
    color: var(--text);
    font-size: clamp(2.2rem, 4.8vw, 3.5rem);
}

.page-careers-confirmation .careers-confirmation-card > p {
    max-width: 52ch;
    margin: 0 auto 1rem;
    color: var(--text-soft);
    line-height: 1.7;
}

.page-careers-confirmation .careers-confirmation-return {
    margin-top: 1.75rem;
}

@media (max-width: 680px) {
    .careers-jobs-directory .careers-jobs-controls {
        grid-template-columns: 1fr;
        gap: 0.68rem;
        margin: 0.8rem;
        padding: 0.75rem;
        border-radius: 12px;
    }

    .careers-jobs-directory .careers-control-field input,
    .careers-jobs-directory .careers-control-field select {
        height: 46px;
    }
}

/* Single-icon theme button. JavaScript continues to own state and ARIA text. */
.site-header .theme-toggle,
.assessment-portal .topbar .theme-toggle {
    --toggle-size: 38px;

    position: relative;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 var(--toggle-size) !important;
    width: var(--toggle-size) !important;
    min-width: var(--toggle-size) !important;
    height: var(--toggle-size) !important;
    min-height: var(--toggle-size) !important;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(246, 191, 63, 0.34) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    color: #f6bf3f;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 217, 120, 0.16), transparent 30%),
        rgba(238, 152, 38, 0.1) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 7px 22px rgba(0, 0, 0, 0.2) !important;
    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        transform 160ms ease;
}

.site-header .theme-toggle::before,
.assessment-portal .topbar .theme-toggle::before {
    inset: 4px;
    border-radius: 50%;
    background: rgba(8, 9, 11, 0.54);
    opacity: 1;
    transform: none;
}

.site-header .theme-toggle:hover,
.assessment-portal .topbar .theme-toggle:hover {
    border-color: rgba(246, 191, 63, 0.68) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(238, 152, 38, 0.14) !important;
    transform: translateY(-1px);
}

.site-header .theme-toggle:active,
.assessment-portal .topbar .theme-toggle:active {
    transform: translateY(0) scale(0.94);
}

.site-header .theme-toggle__side-icon,
.assessment-portal .topbar .theme-toggle__side-icon {
    display: none !important;
}

.site-header .theme-toggle__thumb,
.assessment-portal .topbar .theme-toggle__thumb {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.site-header .theme-toggle__thumb::after,
.assessment-portal .topbar .theme-toggle__thumb::after {
    display: none;
}

.site-header .theme-toggle__thumb-icon,
.assessment-portal .topbar .theme-toggle__thumb-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    color: currentColor !important;
    transition:
        opacity 180ms ease,
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.site-header .theme-toggle__thumb-icon--moon,
.assessment-portal .topbar .theme-toggle__thumb-icon--moon {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
}

.site-header .theme-toggle__thumb-icon--sun,
.assessment-portal .topbar .theme-toggle__thumb-icon--sun {
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(-70deg) scale(0.45) !important;
}

html[data-theme="light"] .site-header .theme-toggle,
html[data-theme="light"] .assessment-portal .topbar .theme-toggle {
    color: #3a2505;
    border-color: rgba(168, 95, 0, 0.46) !important;
    background:
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.7), transparent 26%),
        linear-gradient(145deg, #ffd36f, #ee981f) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 7px 20px rgba(116, 69, 8, 0.16) !important;
}

html[data-theme="light"] .site-header .theme-toggle::before,
html[data-theme="light"] .assessment-portal .topbar .theme-toggle::before {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
    transform: none;
}

html[data-theme="light"] .site-header .theme-toggle:hover,
html[data-theme="light"] .assessment-portal .topbar .theme-toggle:hover {
    border-color: rgba(121, 68, 0, 0.62) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 8px 22px rgba(116, 69, 8, 0.2),
        0 0 16px rgba(238, 152, 38, 0.2) !important;
}

html[data-theme="light"] .site-header .theme-toggle__thumb-icon--moon,
html[data-theme="light"] .assessment-portal .topbar .theme-toggle__thumb-icon--moon {
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(70deg) scale(0.45) !important;
}

html[data-theme="light"] .site-header .theme-toggle__thumb-icon--sun,
html[data-theme="light"] .assessment-portal .topbar .theme-toggle__thumb-icon--sun {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
}

/* Change font on pricing page for disclaimer */
.pricing-disclaimer {
    font-size: 13px;
}

/* Match the Contact hero type scale to product-page heroes. */
:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero h1 {
    font-size: clamp(38px, 3.8vw, 52px);
}

:where(html[data-style-profile~="marketing"]) .page-contact .standard-hero .lede {
    font-size: clamp(15px, 1.3vw, 17px);
}

@media (max-width: 720px) {
    :where(html[data-style-profile~="marketing"]) .page-contact .standard-hero h1 {
        font-size: clamp(42px, 12vw, 58px);
    }
}


@media (max-width: 720px) {
    :where(html[data-style-profile~="marketing"]) .mkt-customer-proof {
        padding: 58px 0 64px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-proof-heading {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-proof-heading .mkt-eyebrow {
        margin-top: 0;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-proof-heading h2 {
        font-size: clamp(30px, 9vw, 40px);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-marquee {
        margin-top: 34px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo-set {
        gap: 34px;
        padding: 16px 17px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo {
        flex-basis: 156px;
        width: 156px;
        height: 66px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(html[data-style-profile~="marketing"]) .mkt-customer-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: thin;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-marquee-track {
        animation: none;
        transform: none;
        will-change: auto;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo img {
        transition: none;
    }
}

/* ==========================================================================
   CUSTOMER PORTAL EDITABLE ACCOUNT SETTINGS
   Adds modern profile, workspace, and password-management controls while
   preserving the existing portal visual language and responsive behavior.
   v013.000.000-alpha.012
   ========================================================================== */
.page-app .app-settings-overview {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    border-color: rgba(245, 166, 35, 0.22);
    background:
        radial-gradient(circle at 0 0, rgba(245, 166, 35, 0.11), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.02);
}

.page-app .app-settings-overview::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.08), transparent 68%);
    pointer-events: none;
}

.page-app .app-settings-overview-identity {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 15px;
}

.page-app .app-settings-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(245, 166, 35, 0.42);
    border-radius: 14px;
    color: #17120b;
    background: linear-gradient(145deg, #ffc65b 0%, #f0a020 68%, #e88a13 100%);
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.18);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.page-app .app-settings-overview-identity > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.page-app .app-settings-overline {
    color: var(--portal-accent);
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-app .app-settings-overview-identity strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 1.04rem;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-app .app-settings-overview-identity small {
    min-width: 0;
    overflow: hidden;
    color: var(--portal-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-app .app-settings-overview-meta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, auto);
    align-items: stretch;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.12);
}

.page-app .app-settings-overview-meta > span {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 11px 14px;
    border-left: 1px solid var(--portal-border);
}

.page-app .app-settings-overview-meta > span:first-child {
    border-left: 0;
}

.page-app .app-settings-overview-meta small,
.page-app .app-settings-inline-meta small,
.page-app .app-settings-password-email small {
    color: var(--portal-muted);
    font-size: 0.68rem;
    font-weight: 720;
    letter-spacing: 0.02em;
}

.page-app .app-settings-overview-meta strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-app .app-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.page-app .app-settings-card {
    position: relative;
    min-height: 100%;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.page-app .app-settings-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 166, 35, 0.24);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.18);
}

.page-app .app-settings-card-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
}

.page-app .app-settings-card-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 166, 35, 0.26);
    border-radius: 11px;
    color: var(--portal-accent);
    background: var(--portal-accent-soft);
    font-size: 0.95rem;
}

.page-app .app-settings-card-head h2 {
    margin: 1px 0 5px;
    color: var(--text);
    font-size: 1.08rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.page-app .app-settings-card-head p {
    max-width: 520px;
    margin: 0;
    color: var(--portal-muted);
    font-size: 0.79rem;
    line-height: 1.55;
}

.page-app .app-settings-form {
    gap: 16px;
}

.page-app .app-settings-form .field {
    gap: 7px;
}

.page-app .app-settings-form .field > span {
    color: var(--text-soft);
    font-size: 0.73rem;
    font-weight: 720;
}

.page-app .app-settings-form .field input {
    min-height: 47px;
    border-color: var(--portal-border);
    background: rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.page-app .app-settings-form .field input:hover {
    border-color: rgba(245, 166, 35, 0.28);
}

.page-app .app-settings-form .field input:focus {
    border-color: rgba(245, 166, 35, 0.58);
    background: rgba(245, 166, 35, 0.035);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.08);
}

.page-app .app-settings-readonly-row {
    display: grid;
    gap: 4px;
    padding: 12px 13px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
}

.page-app .app-settings-readonly-row > span {
    color: var(--portal-muted);
    font-size: 0.68rem;
    font-weight: 720;
}

.page-app .app-settings-readonly-row strong {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.82rem;
}

.page-app .app-settings-readonly-row small {
    margin-top: 2px;
    color: var(--portal-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}


.page-app .app-settings-account-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px;
}

.page-app .app-settings-account-status > small {
    color: var(--portal-muted);
    font-size: 0.7rem;
    font-weight: 720;
}

.page-app .app-settings-inline-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
}

.page-app .app-settings-inline-meta > span {
    display: grid;
    gap: 6px;
    padding: 12px 13px;
    border-left: 1px solid var(--portal-border);
}

.page-app .app-settings-inline-meta > span:first-child {
    border-left: 0;
}

.page-app .app-settings-inline-meta > span > strong {
    color: var(--text);
    font-size: 0.82rem;
}

.page-app .app-settings-form-footer {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 2px;
}

.page-app .app-settings-form-status {
    min-width: 0;
    margin: 0;
    color: var(--portal-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.page-app .app-settings-form-status.is-loading {
    color: var(--portal-accent);
}

.page-app .app-settings-form-status.is-success {
    color: #72d39b;
}

.page-app .app-settings-form-status.is-error {
    color: #ee9b8f;
}

.page-app .app-settings-form-footer .btn {
    flex: 0 0 auto;
}

.page-app .app-settings-form-footer .btn:disabled {
    transform: none;
}

.page-app .app-settings-security-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    align-items: center;
    gap: 28px;
    border-color: rgba(245, 166, 35, 0.18);
}

.page-app .app-settings-security-copy {
    display: grid;
    gap: 16px;
}

.page-app .app-settings-security-points {
    display: grid;
    gap: 8px;
    padding-left: 55px;
}

.page-app .app-settings-security-points span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--portal-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.page-app .app-settings-security-points i {
    margin-top: 2px;
    color: #72d39b;
    font-size: 0.67rem;
}

.page-app .app-settings-password-action {
    display: grid;
    gap: 11px;
    padding: 16px;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
}

.page-app .app-settings-password-email {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.page-app .app-settings-password-email strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.81rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-app .app-settings-password-action .btn {
    width: 100%;
    gap: 8px;
}

.page-app .app-settings-button-spinner {
    width: 13px;
    height: 13px;
    display: inline-block;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: app-settings-spin 650ms linear infinite;
}

@keyframes app-settings-spin {
    to { transform: rotate(360deg); }
}

html[data-theme="light"] .page-app .app-settings-overview {
    background:
        radial-gradient(circle at 0 0, rgba(213, 126, 10, 0.1), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 238, 0.82));
}

html[data-theme="light"] .page-app .app-settings-overview-meta,
html[data-theme="light"] .page-app .app-settings-form .field input,
html[data-theme="light"] .page-app .app-settings-readonly-row,
html[data-theme="light"] .page-app .app-settings-inline-meta,
html[data-theme="light"] .page-app .app-settings-password-action {
    background: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1040px) {
    .page-app .app-settings-overview {
        grid-template-columns: 1fr;
    }

    .page-app .app-settings-overview-meta {
        grid-auto-columns: minmax(0, 1fr);
    }

    .page-app .app-settings-security-card {
        grid-template-columns: 1fr;
    }

    .page-app .app-settings-security-points {
        padding-left: 0;
    }
}

@media (max-width: 900px) {
    .page-app .app-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .page-app .app-settings-overview-meta {
        grid-auto-flow: row;
        grid-auto-columns: 1fr;
    }

    .page-app .app-settings-overview-meta > span {
        border-top: 1px solid var(--portal-border);
        border-left: 0;
    }

    .page-app .app-settings-overview-meta > span:first-child {
        border-top: 0;
    }

    .page-app .app-settings-inline-meta {
        grid-template-columns: 1fr;
    }

    .page-app .app-settings-inline-meta > span {
        border-top: 1px solid var(--portal-border);
        border-left: 0;
    }

    .page-app .app-settings-inline-meta > span:first-child {
        border-top: 0;
    }

    .page-app .app-settings-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .page-app .app-settings-form-footer .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-app .app-settings-card {
        transition: none;
    }

    .page-app .app-settings-card:hover {
        transform: none;
    }

    .page-app .app-settings-button-spinner {
        animation: none;
    }
}

/* Homepage smtpRS preview. Kept separate from the product-page image overlays. */
.mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse {
    position: absolute;
    top: 73.01%;
    left: 76.8%;
    z-index: 2;
    width: 0.78%;
    height: auto;
    aspect-ratio: 1;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
    transform-origin: center;
    animation: none;
    pointer-events: none;
}

.mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse::before,
.mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse::before {
    background: #63d45f;
}

.mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse::after {
    background: rgba(99, 212, 95, 0.5);
    transform: scale(1);
    transform-origin: center;
    animation: mkt-smtprs-operational-pulse 1.8s ease-out infinite;
}

@keyframes mkt-smtprs-operational-pulse {
    0% {
        opacity: 0.72;
        transform: scale(1);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(3.4);
    }
}

.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-traffic-lights {
    position: absolute;
    top: 12.55%;
    left: 23.76%;
    z-index: 4;
    display: flex;
    width: 3.13%;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
/* ==========================================================================
   Adjust Index Page Traffic Lights
   ==========================================================================
*/

/* .mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light {
    display: block;
    width: 25%;
    aspect-ratio: 1;
    flex: 0 0 25%;
    border-radius: 50%;
    transform-origin: center;
    pointer-events: auto;
    cursor: default;
    transition: filter 180ms ease-out, box-shadow 200ms ease-out, transform 180ms ease-out;
    will-change: filter, box-shadow, transform;
}
 .mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--red {
    color: #ff5f57;
    background: #ff5f57;
}
.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--yellow {
    color: #febc2e;
    background: #febc2e;
}
.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--green {
    color: #28c840;
    background: #28c840;
}
.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light:hover {
    filter: brightness(1.22) saturate(1.12);
    transform: scale(1.18);
} */

.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light {
    --light-x: 0%;
    --light-y: 0%;
    --light-scale: 1;

    display: block;
    width: 25%;
    aspect-ratio: 1;
    flex: 0 0 25%;
    border-radius: 50%;

    transform:
        translate(var(--light-x), var(--light-y))
        scale(var(--light-scale));
    transform-origin: center;

    pointer-events: auto;
    cursor: default;
    transition:
        filter 180ms ease-out,
        box-shadow 200ms ease-out,
        transform 180ms ease-out;
    will-change: filter, box-shadow, transform;
}
.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--red {
    --light-x: 0%;
    --light-y: 0%;

    color: #ff5f57;
    background: #ff5f57;
}
.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--yellow {
    --light-x: 0%;
    --light-y: 0%;

    color: #febc2e;
    background: #febc2e;
}
.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--green {
    --light-x: 0%;
    --light-y: 0%;

    color: #28c840;
    background: #28c840;
}
.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light:hover {
    --light-scale: 1.18;
    filter: brightness(1.22) saturate(1.12);
}

.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--red:hover {
    box-shadow: 0 0 6px rgba(255, 95, 87, 1), 0 0 14px rgba(255, 95, 87, 0.72), 0 0 24px rgba(255, 95, 87, 0.32);
}

.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--yellow:hover {
    box-shadow: 0 0 6px rgba(254, 188, 46, 1), 0 0 14px rgba(254, 188, 46, 0.72), 0 0 24px rgba(254, 188, 46, 0.32);
}

.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light--green:hover {
    box-shadow: 0 0 6px rgba(40, 200, 64, 1), 0 0 14px rgba(40, 200, 64, 0.72), 0 0 24px rgba(40, 200, 64, 0.32);
}

.mkt-smtprs-interface-note {
    max-width: 42rem;
    margin: 0.7rem auto 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-align: center;
}

@media (hover: none), (pointer: coarse) {
    .mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light {
        pointer-events: none;
    }

    .mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light:hover {
        filter: none;
        box-shadow: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse::after {
        animation: none;
        opacity: 0;
    }

    .mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light {
        transition: none;
    }
}

@media (max-width: 720px) {
    .mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse {
        width: 3px;
        height: 3px;
        aspect-ratio: auto;
        padding: 0;
        border-radius: 50%;
    }

    .mkt-smtprs-laptop-stage .mkt-smtprs-laptop-traffic-lights {
        width: auto;
        height: 3px;
        gap: 1px;
        justify-content: flex-start;
    }

    .mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light {
        width: 3px;
        height: 3px;
        aspect-ratio: auto;
        flex: 0 0 3px;
        border-radius: 50%;
    }
}
/* Keep customer marks intact in phone and heavily minimized desktop layouts. */
@media (max-width: 680px) {
    :where(html[data-style-profile~="marketing"]) .mkt-customer-marquee {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-marquee-track {
        display: block;
        width: 100%;
        transform: none;
        animation: none;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo-set {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 18px 14px;
        width: 100%;
        min-width: 0;
        padding: 18px;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo-set[aria-hidden="true"] {
        display: none;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo {
        width: 100%;
        min-width: 0;
        height: 62px;
        overflow: visible;
        flex: none;
    }

    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo img,
    :where(html[data-style-profile~="marketing"]) .mkt-customer-logo[class*="mkt-customer-logo--"] img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 52px;
        object-fit: contain;
    }
}
/* Align product outcome indicators with their titles, not the full copy block. */
.product-saas-outcome-list article {
    align-items: start;
}

.product-saas-outcome-list .product-saas-state-dot {
    align-self: start;
    margin-top: 0.28rem;
    flex: 0 0 auto;
}
/*
 * Keep homepage laptop indicators proportional to the image at every zoom.
 * Container units avoid the desktop/mobile breakpoint changing their scale.
 */
.mkt-smtprs-laptop-stage {
    container-type: inline-size;
    --mkt-smtprs-indicator-size: clamp(3px, 0.78cqi, 12px);
    --mkt-smtprs-indicator-gap: clamp(1px, 0.2cqi, 3px);
}

.mkt-smtprs-laptop-stage .mkt-smtprs-operational-pulse {
    width: var(--mkt-smtprs-indicator-size);
    height: var(--mkt-smtprs-indicator-size);
    aspect-ratio: 1;
}

.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-traffic-lights {
    width: auto;
    height: var(--mkt-smtprs-indicator-size);
    gap: var(--mkt-smtprs-indicator-gap);
    justify-content: flex-start;
}

.mkt-smtprs-laptop-stage .mkt-smtprs-laptop-light {
    width: var(--mkt-smtprs-indicator-size);
    height: var(--mkt-smtprs-indicator-size);
    aspect-ratio: 1;
    flex: 0 0 var(--mkt-smtprs-indicator-size);
}

/* Refine the completed-preview upgrade panel without affecting other forms. */
body.product-saas-smtprs .demo-api-upgrade-benefits article {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 1.15rem 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    text-align: center;
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease;
}

body.product-saas-smtprs .demo-api-upgrade-benefits article > i {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border: 1px solid rgba(246, 191, 63, 0.24);
    border-radius: 0.65rem;
    background: rgba(246, 191, 63, 0.075);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

body.product-saas-smtprs .demo-api-upgrade-benefits article > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

body.product-saas-smtprs .demo-api-upgrade-benefits article strong,
body.product-saas-smtprs .demo-api-upgrade-benefits article small {
    width: 100%;
    text-align: center;
}

body.product-saas-smtprs .demo-api-upgrade-benefits article:hover {
    background: rgba(246, 191, 63, 0.085);
    box-shadow: inset 0 0 0 1px rgba(246, 191, 63, 0.32);
}

body.product-saas-smtprs .demo-api-upgrade-benefits article:hover > i {
    border-color: rgba(246, 191, 63, 0.5);
    background: rgba(246, 191, 63, 0.16);
    box-shadow: 0 0 16px rgba(246, 191, 63, 0.12);
    transform: scale(1.04);
}

body.product-saas-smtprs .demo-api-upgrade-docs-link {
    display: inline-flex;
    margin-top: 0.9rem;
    align-items: center;
    gap: 0.55rem;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.4;
    text-decoration: none;
    transition: color 180ms ease, gap 180ms ease;
}

body.product-saas-smtprs .demo-api-upgrade-docs-link i {
    color: var(--brand);
    font-size: 0.75em;
}

body.product-saas-smtprs .demo-api-upgrade-docs-link:hover {
    gap: 0.75rem;
    color: var(--brand);
}

html[data-theme="light"] body.product-saas-smtprs .demo-api-upgrade-benefits article:hover {
    background: rgba(238, 152, 38, 0.08);
    box-shadow: inset 0 0 0 1px rgba(173, 104, 6, 0.28);
}

@media (max-width: 680px) {
    body.product-saas-smtprs .demo-api-upgrade-benefits article {
        padding: 1rem;
    }

    body.product-saas-smtprs .demo-api-upgrade-docs-link {
        margin-top: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.product-saas-smtprs .demo-api-upgrade-benefits article,
    body.product-saas-smtprs .demo-api-upgrade-benefits article > i,
    body.product-saas-smtprs .demo-api-upgrade-docs-link {
        transition: none;
    }
}

/* ==========================================================================
   DEVELOPER AND OPEN-SOURCE PAGES
   ========================================================================== */
.dev-main{overflow:hidden;background:radial-gradient(circle at 18% 8%,rgba(238,152,38,.1),transparent 26rem),var(--bg)}

body.page-developers .dev-main,
body.page-open-source .dev-main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

body.page-developers .dev-main > .dev-hero,
body.page-open-source .dev-main > .dev-hero {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
}
.dev-hero,
.dev-section {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
.dev-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(#000, transparent);
}
.dev-hero-grid,
.dev-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}
.dev-hero-grid > *,
.dev-heading > *,
.dev-sdk > * {
  min-width: 0;
}
.dev-kicker {
  margin: 0 0 1rem;
  color: var(--accent-bright);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.dev-hero h1 {
  max-width: 850px;
  margin-bottom: 1.5rem;
  font-size: clamp(3.2rem, 6.4vw, 6.6rem);
  line-height: 0.94;
}
.dev-lede,
.dev-heading > p,
.dev-heading > div > p {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.75;
}

.dev-actions,
.oss-actions,
.docs-sdk-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.dev-hero .dev-actions {
  margin-top: 2rem;
}

.dev-api-card,
.dev-sdk,
.oss-card {
  border: 1px solid var(--accent-line);
  border-radius: 24px;
  background: color-mix(
    in srgb,
    var(--bg-raised) 92%,
    transparent
  );
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

/* API card */

.dev-api-card {
  padding: clamp(1.5rem, 3vw, 2.2rem);
}

.dev-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  color: var(--accent-bright);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dev-label i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #62dc91;
  box-shadow: 0 0 15px #62dc91;
}

.dev-api-card h2 {
  margin-bottom: 1rem;
  font-size: 1.35rem;
}

.dev-api-card code,
.dev-command {
  display: block;
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--accent-bright);
  background: rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.dev-api-card > p {
  margin: 1rem 0;
  color: var(--muted);
  line-height: 1.6;
}

.dev-api-card > a,
.dev-link,
.oss-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 760;
}

.dev-api-card > a:hover,
.dev-link:hover,
.oss-actions a:hover {
  color: var(--accent-bright);
}

/* Section heading */

.dev-heading {
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.dev-heading h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.98;
}

.dev-strip {
  background: var(--bg-soft);
}

/* SDK */

.dev-sdk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.8fr);
  overflow: hidden;
}

.dev-sdk-main,
.dev-code {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.dev-sdk-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dev-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dev-identity > span,
.oss-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 3.25rem;
  border-radius: 16px;
  color: #17120a;
  background: linear-gradient(
    145deg,
    var(--accent-bright),
    var(--accent)
  );
  font-size: 1.35rem;
}

.dev-identity small,
.dev-identity strong {
  display: block;
}

.dev-identity small {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.dev-identity strong {
  font-size: 1.35rem;
}

.dev-sdk-main .dev-actions {
  margin-top: 1.5rem;
}

/* Benefits */

.dev-benefits {
  display: grid;
  border-left: 1px solid var(--line-soft);
}

.dev-benefits article {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.dev-benefits article:last-child {
  border: 0;
}

.dev-benefits i {
  color: var(--accent-bright);
}

.dev-benefits strong {
  color: var(--text);
}

.dev-benefits p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Code */

.dev-code {
  border-left: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.12);
}

.dev-code pre {
  padding: 0;
  background: none;
  white-space: pre-wrap;
}

/* Principles */

.dev-principles {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Resource signals */

.dev-resource-signals {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(
    in srgb,
    var(--bg-raised) 88%,
    transparent
  );
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.dev-resource-signals article {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--line-soft);
  transition:
    background-color 180ms ease,
    transform 180ms ease;
}

.dev-resource-signals article:last-child {
  border-right: 0;
}

.dev-resource-signals article:hover {
  z-index: 1;
  background: rgba(246, 191, 63, 0.065);
  transform: translateY(-2px);
}

.dev-resource-signals i {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(246, 191, 63, 0.24);
  border-radius: 11px;
  color: var(--accent-bright);
  background: rgba(246, 191, 63, 0.08);
}

.dev-resource-signals strong,
.dev-resource-signals span {
  display: block;
}

.dev-resource-signals strong {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.35;
}

.dev-resource-signals span {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Open source cards */

.oss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.oss-card {
  display: flex;
  min-height: 350px;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-color: var(--line);
  transition: 180ms ease;
}

.oss-featured {
  grid-row: span 2;
}

.oss-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
}

.oss-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.oss-status,
.oss-tags span {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 760;
}

.oss-card h3 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
}

.oss-card > p {
  color: var(--text-soft);
  line-height: 1.7;
}

.oss-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0;
}

.oss-actions {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}

/* Docs / SDK links */

.docs-sdk-links {
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: rgba(238, 152, 38, 0.045);
}

/* Responsive */

@media (max-width: 900px) {
  .dev-hero-grid,
  .dev-heading,
  .dev-sdk {
    grid-template-columns: 1fr;
  }

  .dev-benefits,
  .dev-code {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .dev-hero-grid,
  .dev-heading {
    gap: 2rem;
  }
}

@media (max-width: 680px) {
  .dev-hero,
  .dev-section {
    padding: 4.5rem 0;
  }

  .dev-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.4rem);
  }

  .dev-heading h2 {
    font-size: clamp(2.2rem, 10vw, 3.4rem);
  }

  .dev-actions,
  .docs-sdk-links {
    align-items: stretch;
    flex-direction: column;
  }

  .dev-actions .btn,
  .docs-sdk-links > * {
    width: 100%;
    justify-content: center;
  }

  .dev-api-card,
  .dev-sdk-main,
  .dev-code {
    padding: 1.25rem;
  }

  .oss-grid {
    grid-template-columns: 1fr;
  }

  .oss-featured {
    grid-row: auto;
  }

  .oss-card {
    min-height: 0;
  }
}

/* Light theme */

html[data-theme="light"] .dev-main {
  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(218, 132, 17, 0.11),
      transparent 26rem
    ),
    var(--bg);
}

html[data-theme="light"] .dev-api-card,
html[data-theme="light"] .dev-sdk,
html[data-theme="light"] .oss-card {
  box-shadow: 0 24px 70px rgba(73, 49, 15, 0.08);
}

html[data-theme="light"] .dev-resource-signals {
  background: color-mix(
    in srgb,
    var(--bg-raised) 96%,
    transparent
  );
  box-shadow: 0 18px 44px rgba(73, 49, 15, 0.07);
}

html[data-theme="light"] .dev-resource-signals article:hover {
  background: rgba(183, 101, 13, 0.065);
}

html[data-theme="light"] .dev-resource-signals i {
  border-color: rgba(183, 101, 13, 0.2);
  color: #b7650d;
  background: rgba(183, 101, 13, 0.07);
}

/* ==========================================================================
   SHARED SITE SHELL AND DEVELOPER PAGE TYPOGRAPHY
   Keep navigation and footer typography consistent regardless of page theme.
   ========================================================================== */
.site-header,
.site-header button,
.site-header a,
.site-footer,
.site-footer a,
.footer-bottom {
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.page-developers .dev-main,
body.page-open-source .dev-main {
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.page-developers .dev-main :is(h1, h2, h3),
body.page-open-source .dev-main :is(h1, h2, h3) {
    font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif;
}

body.page-developers .dev-hero h1,
body.page-open-source .dev-hero h1 {
    font-size: clamp(2.45rem, 3.25vw, 3rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

body.page-developers .dev-heading h2,
body.page-open-source .dev-heading h2 {
    font-size: clamp(1.95rem, 2.75vw, 2.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

body.page-developers .oss-card h3,
body.page-open-source .oss-card h3 {
    font-size: clamp(1.25rem, 1.55vw, 1.55rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

@media (max-width: 680px) {
    body.page-developers .dev-hero h1,
    body.page-open-source .dev-hero h1 {
        font-size: clamp(2rem, 9.5vw, 2.5rem);
    }

    body.page-developers .dev-heading h2,
    body.page-open-source .dev-heading h2 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }
}

/* ==========================================================================
   PAGE-LEVEL TYPOGRAPHY OVERRIDES

   HOW TO USE
   ----------
   1. Find the page or page family below.
   2. Remove /* and */ from only the line you want to activate.
   3. Change the example size to any valid CSS size: 56px, 3.5rem, clamp(...).

   Every rule is commented out by default, so this section does not alter the
   current design. Rules affect <main> only and never the shared navbar/footer.
   The !important flag intentionally makes an enabled override win over the
   older typography sections elsewhere in this stylesheet.
   ========================================================================== */

/* Home: /index.html */
/* body.page-index main h1 { font-size: clamp(48px, 5vw, 72px) !important; } */
/* body.page-index main h2 { font-size: clamp(36px, 4vw, 54px) !important; } */
/* body.page-index main h3 { font-size: 22px !important; } */
/* body.page-index main p { font-size: 16px !important; } */
/* body.page-index main li { font-size: 16px !important; } */
/* body.page-index main :is(.btn, button) { font-size: 14px !important; } */

/* Product: /pages/products/smtprs */
/* body.product-saas-smtprs main h1 { font-size: 58px !important; } */
/* body.product-saas-smtprs main h2 { font-size: 48px !important; } */
/* body.product-saas-smtprs main h3 { font-size: 20px !important; } */
/* body.product-saas-smtprs main p { font-size: 16px !important; } */
/* body.product-saas-smtprs main li { font-size: 16px !important; } */
/* body.product-saas-smtprs main :is(.btn, button) { font-size: 14px !important; } */

/* Product: /pages/products/invoiceguard */
/* body.product-saas-invoiceguard main h1 { font-size: 58px !important; } */
/* body.product-saas-invoiceguard main h2 { font-size: 48px !important; } */
/* body.product-saas-invoiceguard main h3 { font-size: 20px !important; } */
/* body.product-saas-invoiceguard main p { font-size: 16px !important; } */
/* body.product-saas-invoiceguard main li { font-size: 16px !important; } */
/* body.product-saas-invoiceguard main :is(.btn, button) { font-size: 14px !important; } */

/* Product: /pages/products/retainiq */
/* body.product-saas-retainiq main h1 { font-size: 58px !important; } */
/* body.product-saas-retainiq main h2 { font-size: 48px !important; } */
/* body.product-saas-retainiq main h3 { font-size: 20px !important; } */
/* body.product-saas-retainiq main p { font-size: 16px !important; } */
/* body.product-saas-retainiq main li { font-size: 16px !important; } */
/* body.product-saas-retainiq main :is(.btn, button) { font-size: 14px !important; } */

/* Product: /pages/products/vendorlens */
/* body.product-saas-vendorlens main h1 { font-size: 58px !important; } */
/* body.product-saas-vendorlens main h2 { font-size: 48px !important; } */
/* body.product-saas-vendorlens main h3 { font-size: 20px !important; } */
/* body.product-saas-vendorlens main p { font-size: 16px !important; } */
/* body.product-saas-vendorlens main li { font-size: 16px !important; } */
/* body.product-saas-vendorlens main :is(.btn, button) { font-size: 14px !important; } */

/* Product: /pages/products/waitlist */
/* body.product-saas-waitlist main h1 { font-size: 58px !important; } */
/* body.product-saas-waitlist main h2 { font-size: 48px !important; } */
/* body.product-saas-waitlist main h3 { font-size: 20px !important; } */
/* body.product-saas-waitlist main p { font-size: 16px !important; } */
/* body.product-saas-waitlist main li { font-size: 16px !important; } */
/* body.product-saas-waitlist main :is(.btn, button) { font-size: 14px !important; } */

/* Documentation: all pages under /pages/docs/ */
/* body.page-docs main h1 { font-size: 54px !important; } */
/* body.page-docs main h2 { font-size: 38px !important; } */
/* body.page-docs main h3 { font-size: 22px !important; } */
/* body.page-docs main p { font-size: 16px !important; } */
/* body.page-docs main li { font-size: 16px !important; } */
/* body.page-docs main :is(.btn, button) { font-size: 14px !important; } */

/* Pricing: /pages/pricing/ */
/* body.page-pricing main h1 { font-size: 58px !important; } */
/* body.page-pricing main h2 { font-size: 44px !important; } */
/* body.page-pricing main h3 { font-size: 22px !important; } */
/* body.page-pricing main p { font-size: 16px !important; } */
/* body.page-pricing main li { font-size: 16px !important; } */
/* body.page-pricing main :is(.btn, button) { font-size: 14px !important; } */

/* Company: /pages/company/ */
/* body.page-company main h1 { font-size: 58px !important; } */
/* body.page-company main h2 { font-size: 44px !important; } */
/* body.page-company main h3 { font-size: 22px !important; } */
/* body.page-company main p { font-size: 16px !important; } */
/* body.page-company main li { font-size: 16px !important; } */
/* body.page-company main :is(.btn, button) { font-size: 14px !important; } */

/* Contact: all contact pages */
/* body.page-contact main h1 { font-size: 58px !important; } */
/* body.page-contact main h2 { font-size: 40px !important; } */
/* body.page-contact main h3 { font-size: 22px !important; } */
/* body.page-contact main p { font-size: 16px !important; } */
/* body.page-contact main li { font-size: 16px !important; } */
/* body.page-contact main :is(.btn, button) { font-size: 14px !important; } */

/* Careers: all careers and job pages */
/* body.page-careers main h1 { font-size: 58px !important; } */
/* body.page-careers main h2 { font-size: 42px !important; } */
/* body.page-careers main h3 { font-size: 22px !important; } */
/* body.page-careers main p { font-size: 16px !important; } */
/* body.page-careers main li { font-size: 16px !important; } */
/* body.page-careers main :is(.btn, button) { font-size: 14px !important; } */

/* Legal: all legal and policy pages */
/* body.page-legal main h1 { font-size: 52px !important; } */
/* body.page-legal main h2 { font-size: 34px !important; } */
/* body.page-legal main h3 { font-size: 21px !important; } */
/* body.page-legal main p { font-size: 16px !important; } */
/* body.page-legal main li { font-size: 16px !important; } */
/* body.page-legal main :is(.btn, button) { font-size: 14px !important; } */

/* Account application: all /pages/app/ pages */
/* body.page-app main h1 { font-size: 48px !important; } */
/* body.page-app main h2 { font-size: 34px !important; } */
/* body.page-app main h3 { font-size: 20px !important; } */
/* body.page-app main p { font-size: 16px !important; } */
/* body.page-app main li { font-size: 16px !important; } */
/* body.page-app main :is(.btn, button) { font-size: 14px !important; } */

/* Authentication: registration, sign-in, and password pages */
/* body.page-auth main h1 { font-size: 48px !important; } */
/* body.page-auth main h2 { font-size: 34px !important; } */
/* body.page-auth main h3 { font-size: 20px !important; } */
/* body.page-auth main p { font-size: 16px !important; } */
/* body.page-auth main li { font-size: 16px !important; } */
/* body.page-auth main :is(.btn, button) { font-size: 14px !important; } */

/* Developer Platform: /pages/developers/ */
/* body.page-developers main h1 { font-size: 58px !important; } */
/* body.page-developers main h2 { font-size: 48px !important; } */
/* body.page-developers main h3 { font-size: 23px !important; } */
/* body.page-developers main p { font-size: 16px !important; } */
/* body.page-developers main li { font-size: 16px !important; } */
/* body.page-developers main :is(.btn, button) { font-size: 14px !important; } */

/* Open Source: /pages/open-source/ */
/* body.page-open-source main h1 { font-size: 58px !important; } */
/* body.page-open-source main h2 { font-size: 48px !important; } */
/* body.page-open-source main h3 { font-size: 23px !important; } */
/* body.page-open-source main p { font-size: 16px !important; } */
/* body.page-open-source main li { font-size: 16px !important; } */
/* body.page-open-source main :is(.btn, button) { font-size: 14px !important; } */

/* Optional mobile-only override examples (activate and edit as needed). */
@media (max-width: 720px) {
    /* body.product-saas-smtprs main h1 { font-size: 42px !important; } */
    /* body.page-docs main h1 { font-size: 40px !important; } */
}

/* ==========================================================================
   DEVELOPER AND OPEN-SOURCE DETAIL TUNING
   Scoped to the two engineering pages so shared site components are unchanged.
   ========================================================================== */

/* Brand-colored section labels. */
body.page-developers .dev-kicker,
body.page-open-source .dev-kicker {
    color: #f6bf3f;
}

/* Compact vertical rhythm for the two engineering pages. */
body.page-developers .dev-main :is(.dev-hero, .dev-section),
body.page-open-source .dev-main :is(.dev-hero, .dev-section) {
    padding-block: clamp(2.5rem, 4vw, 3.75rem);
}

body.page-developers .dev-main .container,
body.page-open-source .dev-main .container {
    width: min(var(--max), calc(100% - 48px));
}

body.page-developers .site-header .container.nav,
body.page-open-source .site-header .container.nav {
    width: min(var(--max), calc(100% - 48px));
    margin-inline: auto;
}

/* body.page-developers .dev-main :is(.dev-lede, .dev-heading > p, .dev-heading > div > p), */
body.page-developers .dev-main :is(.dev-lede, .dev-heading > p, .dev-heading > div > p) {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.65;
    text-wrap: pretty;
}

body.page-open-source .dev-main :is(.dev-lede, .dev-heading > p, .dev-heading > div > p) {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.65;
    text-wrap: pretty;
}

@media (min-width: 901px) {
    body.page-developers .dev-main :is(.dev-hero-grid, .dev-heading),
    body.page-open-source .dev-main :is(.dev-hero-grid, .dev-heading) {
        grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
        gap: clamp(3rem, 7vw, 6rem);
    }
}

body.page-developers .dev-main .dev-heading,
body.page-open-source .dev-main .dev-heading {
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

body.page-developers .dev-main .dev-kicker,
body.page-open-source .dev-main .dev-kicker {
    margin-bottom: 0.6rem;
    font-size: 0.6875rem !important;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.11em;
}

body.page-developers .dev-strip .dev-heading > div:first-child .dev-link {
    margin-top: 0.9rem;
}

body.page-developers .dev-main .dev-hero .dev-actions,
body.page-open-source .dev-main .dev-hero .dev-actions {
    margin-top: 1rem;
}

body.page-developers .dev-main .dev-identity,
body.page-open-source .dev-main .dev-identity {
    margin-bottom: 1rem;
}

body.page-developers .dev-main .dev-sdk-main .dev-actions,
body.page-open-source .dev-main .dev-sdk-main .dev-actions {
    margin-top: 0.8rem;
}

body.page-developers .dev-main .oss-top,
body.page-open-source .dev-main .oss-top {
    margin-bottom: 1rem;
}

/* Keep the featured SDK card content-sized while it occupies the tall grid column. */
body.page-developers .oss-featured,
body.page-open-source .oss-featured {
    min-height: 0;
    align-self: start;
}

/* Independent hover feedback for each SDK benefit row. */
body.page-developers .dev-benefits article,
body.page-open-source .dev-benefits article {
    position: relative;
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

body.page-developers .dev-benefits article:hover,
body.page-open-source .dev-benefits article:hover {
    z-index: 1;
    background: rgba(246, 191, 63, 0.065);
    box-shadow: inset 3px 0 0 #f6bf3f;
    transform: translateX(3px);
}

body.page-developers .dev-benefits article i,
body.page-open-source .dev-benefits article i {
    transition: filter 180ms ease, transform 180ms ease;
}

body.page-developers .dev-benefits article:hover i,
body.page-open-source .dev-benefits article:hover i {
    filter: drop-shadow(0 0 7px rgba(246, 191, 63, 0.48));
    transform: scale(1.12);
}

html[data-theme="light"] body.page-developers .dev-benefits article:hover,
html[data-theme="light"] body.page-open-source .dev-benefits article:hover {
    background: rgba(183, 101, 13, 0.06);
    box-shadow: inset 3px 0 0 #b7650d;
}

/* Present the Open Source engineering principles as a balanced feature panel. */
body.page-open-source .dev-hero .dev-api-card {
    width: 100%;
    max-width: 34rem;
    align-self: start;
    justify-self: center;
    padding: 1.25rem clamp(1.4rem, 2.5vw, 2rem) 1.75rem;
    background:
        linear-gradient(145deg, rgba(246, 191, 63, 0.055), transparent 48%),
        color-mix(in srgb, var(--bg-raised) 94%, transparent);
}

body.page-developers .dev-hero .dev-api-card {
    background:
        linear-gradient(145deg, rgba(246, 191, 63, 0.055), transparent 48%),
        color-mix(in srgb, var(--bg-raised) 94%, transparent);
}

body.page-open-source .dev-hero .dev-api-card > .dev-kicker {
    margin-bottom: 0.65rem;
}

body.page-open-source .dev-principles {
    gap: 0.65rem;
    padding: 0;
    list-style: none;
}

body.page-open-source .dev-principles li {
    position: relative;
    padding: 0.8rem 0.9rem 0.8rem 2.45rem;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

body.page-open-source .dev-principles li::before {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    border-radius: 50%;
    content: "\2713";
    color: #17120a;
    background: #f6bf3f;
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
}

body.page-open-source .dev-principles li:hover {
    color: var(--text);
    border-color: rgba(246, 191, 63, 0.48);
    background: rgba(246, 191, 63, 0.07);
    transform: translateX(3px);
}

html[data-theme="light"] body.page-developers .dev-hero .dev-api-card,
html[data-theme="light"] body.page-open-source .dev-hero .dev-api-card {
    background:
        linear-gradient(145deg, rgba(183, 101, 13, 0.07), transparent 48%),
        color-mix(in srgb, var(--bg-raised) 96%, transparent);
}

html[data-theme="light"] body.page-open-source .dev-principles li::before {
    color: #fff;
    background: #b7650d;
}

html[data-theme="light"] body.page-open-source .dev-principles li:hover {
    border-color: rgba(183, 101, 13, 0.46);
    background: rgba(183, 101, 13, 0.07);
}

/* Let every project technology tag respond independently. */
body.page-developers :is(.oss-status, .oss-tags span),
body.page-open-source :is(.oss-status, .oss-tags span) {
    cursor: default;
    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

body.page-developers :is(.oss-status, .oss-tags span):hover,
body.page-open-source :is(.oss-status, .oss-tags span):hover {
    color: #f6bf3f;
    border-color: rgba(246, 191, 63, 0.58);
    background: rgba(246, 191, 63, 0.09);
    box-shadow: 0 6px 18px rgba(246, 191, 63, 0.12);
    transform: translateY(-2px);
}

html[data-theme="light"] body.page-developers :is(.oss-status, .oss-tags span):hover,
html[data-theme="light"] body.page-open-source :is(.oss-status, .oss-tags span):hover {
    color: #b7650d;
    border-color: rgba(183, 101, 13, 0.55);
    background: rgba(183, 101, 13, 0.08);
    box-shadow: 0 6px 18px rgba(183, 101, 13, 0.12);
}

html[data-theme="light"] body.page-developers .dev-kicker,
html[data-theme="light"] body.page-open-source .dev-kicker {
    color: #b7650d;
}

/* Compact command text while retaining horizontal scrolling for long values. */
body.page-developers .dev-api-card code,
body.page-developers .dev-command,
body.page-open-source .dev-api-card code,
body.page-open-source .dev-command,
body.page-smtprs .dev-command {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
}

/* Light-mode code surfaces use the site's off-white --bg-soft token (#f7f4ed). */
html[data-theme="light"] :is(body.page-developers, body.page-open-source, body.page-smtprs) :is(.dev-command, .dev-code),
html[data-theme="light"] body.page-developers .dev-api-card > code {
    border-color: rgba(183, 101, 13, 0.18);
    background: var(--bg-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* Production API status pulse. Animating the glow preserves the dot's circle. */
body.page-developers .dev-label i {
    animation: developer-api-status-pulse 1.8s ease-out infinite;
    will-change: box-shadow, opacity;
}

@keyframes developer-api-status-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(98, 220, 145, 0.48), 0 0 14px rgba(98, 220, 145, 0.85);
    }

    55% {
        opacity: 0.82;
        box-shadow: 0 0 0 8px rgba(98, 220, 145, 0), 0 0 20px rgba(98, 220, 145, 0.62);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-developers .dev-label i {
        animation: none;
        box-shadow: 0 0 14px rgba(98, 220, 145, 0.78);
    }
}

/* Copy controls for engineering-page command boxes. */
body.page-developers .dev-command.has-copy-control,
body.page-open-source .dev-command.has-copy-control,
body.page-smtprs .dev-command.has-copy-control {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    white-space: normal;
}

body.page-developers .dev-command.has-copy-control > code,
body.page-open-source .dev-command.has-copy-control > code,
body.page-smtprs .dev-command.has-copy-control > code {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    padding-block: 2px;
    white-space: nowrap;
    scrollbar-width: thin;
}

body.page-developers .dev-command .dev-copy-button,
body.page-open-source .dev-command .dev-copy-button,
body.page-smtprs .dev-command .dev-copy-button {
    display: inline-flex;
    min-width: 68px;
    min-height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--bg-soft);
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

body.page-developers .dev-command .dev-copy-button:hover,
body.page-open-source .dev-command .dev-copy-button:hover,
body.page-smtprs .dev-command .dev-copy-button:hover {
    border-color: #f6bf3f;
    color: #f6bf3f;
    background: rgba(246, 191, 63, 0.08);
    transform: translateY(-1px);
}

html[data-theme="light"] body.page-developers .dev-command .dev-copy-button:hover,
html[data-theme="light"] body.page-open-source .dev-command .dev-copy-button:hover,
html[data-theme="light"] body.page-smtprs .dev-command .dev-copy-button:hover {
    border-color: #b7650d;
    color: #b7650d;
    background: rgba(183, 101, 13, 0.08);
}

body.page-developers .dev-command .dev-copy-button:focus-visible,
body.page-open-source .dev-command .dev-copy-button:focus-visible,
body.page-smtprs .dev-command .dev-copy-button:focus-visible {
    outline: 2px solid #f6bf3f;
    outline-offset: 3px;
}

html[data-theme="light"] body.page-developers .dev-command .dev-copy-button:focus-visible,
html[data-theme="light"] body.page-open-source .dev-command .dev-copy-button:focus-visible,
html[data-theme="light"] body.page-smtprs .dev-command .dev-copy-button:focus-visible {
    outline-color: #b7650d;
}

body.page-developers .dev-command .dev-copy-button.is-copied,
body.page-open-source .dev-command .dev-copy-button.is-copied,
body.page-smtprs .dev-command .dev-copy-button.is-copied {
    border-color: rgba(98, 220, 145, 0.55);
    color: #62dc91;
    background: rgba(98, 220, 145, 0.1);
}

body.page-developers .dev-command .dev-copy-button.is-copy-error,
body.page-open-source .dev-command .dev-copy-button.is-copy-error,
body.page-smtprs .dev-command .dev-copy-button.is-copy-error {
    border-color: rgba(226, 116, 116, 0.55);
    color: #e27474;
    background: rgba(226, 116, 116, 0.1);
}

@media (max-width: 420px) {
    body.page-developers .dev-command .dev-copy-button,
    body.page-open-source .dev-command .dev-copy-button,
    body.page-smtprs .dev-command .dev-copy-button {
        min-width: 32px;
        width: 32px;
        padding-inline: 0;
    }

    body.page-developers .dev-command .dev-copy-button span,
    body.page-open-source .dev-command .dev-copy-button span,
    body.page-smtprs .dev-command .dev-copy-button span {
        display: none;
    }
}

@media (max-width: 680px) {
    body.page-developers .dev-main :is(.dev-hero, .dev-section),
    body.page-open-source .dev-main :is(.dev-hero, .dev-section) {
        padding-block: 2.25rem;
    }

    body.page-developers .dev-main .dev-heading,
    body.page-open-source .dev-main .dev-heading {
        margin-bottom: 1.25rem;
    }
}

/* ==========================================================================
   V015.000.005 CONTENT TYPE SCALE

   Final site-wide content caps for this deployment. These rules only target
   <main>, so the shared navbar and footer typography remain unchanged.
   Adjust the three variables below to tune this version's content globally.
   ========================================================================== */

:root {
    --v005-main-h1-size: clamp(2.4rem, 3.75vw, 3.25rem);
    --v005-main-h2-size: clamp(1.85rem, 2.85vw, 2.375rem);
    --v005-heading-lede-size: clamp(0.94rem, 1vw, 1rem);
}

body main h1 {
    font-size: var(--v005-main-h1-size) !important;
}

body main h2 {
    font-size: var(--v005-main-h2-size) !important;
}

body main h1 + p,
body main h2 + p {
    font-size: var(--v005-heading-lede-size) !important;
}

@media (max-width: 720px) {
    :root {
        --v005-main-h1-size: clamp(2.15rem, 9vw, 2.65rem);
        --v005-main-h2-size: clamp(1.7rem, 7.5vw, 2.1rem);
        --v005-heading-lede-size: 0.94rem;
    }
}

/* Compact shared footer typography on phones without changing desktop. */
@media (max-width: 720px) {
    footer {
        font-size: 0.8125rem;
    }

    footer :is(h2, h3, h4, .footer-title, .footer-heading) {
        margin-bottom: 0.65rem;
        font-size: 0.75rem !important;
        line-height: 1.25;
        letter-spacing: 0.02em;
    }

    footer :is(a, p, li) {
        font-size: 0.875rem !important;
        line-height: 1.4;
    }

    footer :is(ul, .footer-links) {
        gap: 0.4rem;
    }
}

/* ==========================================================================
   V015.000.006 SMTPRS PREVIEW SCOPE
   Sets expectations before a visitor runs the public-signal preview.
   ========================================================================== */

.product-saas-smtprs .smtprs-preview-scope {
    position: relative;
    display: grid;
    gap: 16px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--accent-bright) 30%, var(--line));
    border-radius: 16px;
    background:
        radial-gradient(circle at 0 0, rgba(246, 191, 63, 0.1), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.product-saas-smtprs .smtprs-preview-scope::before {
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(246, 191, 63, 0.7), transparent);
}

.product-saas-smtprs .smtprs-preview-scope-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.product-saas-smtprs .smtprs-preview-scope-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(246, 191, 63, 0.28);
    border-radius: 12px;
    color: #f6bf3f;
    background: rgba(246, 191, 63, 0.09);
    box-shadow: 0 10px 28px rgba(246, 191, 63, 0.08);
}

.product-saas-smtprs .smtprs-preview-scope-head > div {
    display: grid;
    gap: 3px;
}

.product-saas-smtprs .smtprs-preview-scope-head > div > span {
    color: #f6bf3f;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.product-saas-smtprs .smtprs-preview-scope-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

.product-saas-smtprs .smtprs-preview-scope-head > small {
    padding: 7px 10px;
    border: 1px solid rgba(246, 191, 63, 0.25);
    border-radius: 999px;
    color: #f6bf3f;
    background: rgba(246, 191, 63, 0.07);
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.product-saas-smtprs .smtprs-preview-scope-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.product-saas-smtprs .smtprs-preview-scope-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-raised) 76%, transparent);
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.product-saas-smtprs .smtprs-preview-scope-item:hover {
    border-color: rgba(246, 191, 63, 0.28);
    background: rgba(246, 191, 63, 0.04);
    transform: translateY(-2px);
}

.product-saas-smtprs .smtprs-preview-scope-item > span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 0.62rem;
}

.product-saas-smtprs .smtprs-preview-scope-item--included > span {
    color: #62dc91;
    background: rgba(98, 220, 145, 0.12);
    box-shadow: inset 0 0 0 1px rgba(98, 220, 145, 0.2);
}

.product-saas-smtprs .smtprs-preview-scope-item--limited > span {
    color: #f6bf3f;
    background: rgba(246, 191, 63, 0.11);
    box-shadow: inset 0 0 0 1px rgba(246, 191, 63, 0.2);
}

.product-saas-smtprs .smtprs-preview-scope-item > div {
    display: grid;
    gap: 5px;
}

.product-saas-smtprs .smtprs-preview-scope-item strong {
    color: var(--text);
    font-size: 0.78rem;
    line-height: 1.35;
}

.product-saas-smtprs .smtprs-preview-scope-item p,
.product-saas-smtprs .smtprs-preview-scope-summary {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem !important;
    line-height: 1.48;
}

.product-saas-smtprs .smtprs-preview-scope-summary {
    max-width: 72ch;
    color: var(--text-soft);
    font-size: 0.76rem !important;
}

.product-saas-smtprs .product-saas-demo-submit .btn {
    gap: 9px;
}

.product-saas-smtprs .product-saas-demo-submit .btn i {
    font-size: 0.72rem;
    transition: transform 180ms ease;
}

.product-saas-smtprs .product-saas-demo-submit .btn:hover i {
    transform: translateX(3px);
}

html[data-theme="light"] .product-saas-smtprs .smtprs-preview-scope {
    border-color: rgba(183, 101, 13, 0.24);
    background:
        radial-gradient(circle at 0 0, rgba(183, 101, 13, 0.09), transparent 34%),
        rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 44px rgba(82, 53, 19, 0.055);
}

html[data-theme="light"] .product-saas-smtprs .smtprs-preview-scope-mark,
html[data-theme="light"] .product-saas-smtprs .smtprs-preview-scope-head > div > span,
html[data-theme="light"] .product-saas-smtprs .smtprs-preview-scope-head > small {
    color: #b7650d;
}

html[data-theme="light"] .product-saas-smtprs .smtprs-preview-scope-mark,
html[data-theme="light"] .product-saas-smtprs .smtprs-preview-scope-head > small {
    border-color: rgba(183, 101, 13, 0.24);
    background: rgba(183, 101, 13, 0.07);
}

@media (max-width: 720px) {
    .product-saas-smtprs .smtprs-preview-scope {
        gap: 11px;
        padding: 14px;
        border-radius: 14px;
    }

    .product-saas-smtprs .smtprs-preview-scope-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .product-saas-smtprs .smtprs-preview-scope-head > small {
        grid-column: 1 / -1;
        width: max-content;
    }

    .product-saas-smtprs .smtprs-preview-scope-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-saas-smtprs .smtprs-preview-scope-item,
    .product-saas-smtprs .product-saas-demo-submit .btn i {
        transition: none;
    }
}

/* Slow color-only pulse for links containing Font Awesome right arrows. */
@keyframes linked-arrow-pulse-dark {
    0%, 100% { color: #f6bf3f; }
    50% { color: #8b681f; }
}

@keyframes linked-arrow-pulse-light {
    0%, 100% { color: #b7650d; }
    50% { color: #dc9953; }
}

/* TURN OFF GLOBAL LINK COLOR PULSE */
a:has(.fa-solid.fa-arrow-right):not(:has(h1, h2, h3, h4, p)):not(:hover):not(:focus-visible) {
    color: #f6bf3f;
    animation: linked-arrow-pulse-dark 3.2s ease-in-out infinite;
    filter: none;
    text-shadow: none;
}
html[data-theme="light"] a:has(.fa-solid.fa-arrow-right):not(:has(h1, h2, h3, h4, p)):not(:hover):not(:focus-visible) {
    color: #b7650d;
    animation-name: linked-arrow-pulse-light;
}

body.page-open-source .oss-actions a:has(.fa-arrow-up-right-from-square):not(:hover):not(:focus-visible) {
    color: #f6bf3f;
    animation: linked-arrow-pulse-dark 3.2s ease-in-out infinite;
    filter: none;
    text-shadow: none;
}

html[data-theme="light"] body.page-open-source .oss-actions a:has(.fa-arrow-up-right-from-square):not(:hover):not(:focus-visible) {
    color: #b7650d;
    animation-name: linked-arrow-pulse-light;
}

body.page-open-source .oss-actions a:has(.fa-arrow-up-right-from-square):is(:hover, :focus-visible) {
    animation: none;
}

a:has(.fa-solid.fa-arrow-right) .fa-solid.fa-arrow-right {
    color: inherit;
    animation: none;
    filter: none;
    text-shadow: none;
}

a:has(h1, h2, h3, h4, p):not(:hover):not(:focus-visible) .fa-solid.fa-arrow-right {
    color: #f6bf3f;
    animation: linked-arrow-pulse-dark 3.2s ease-in-out infinite;
}

html[data-theme="light"] a:has(h1, h2, h3, h4, p):not(:hover):not(:focus-visible) .fa-solid.fa-arrow-right {
    color: #b7650d;
    animation-name: linked-arrow-pulse-light;
}

a:has(.fa-solid.fa-arrow-right):is(:hover, :focus-visible) {
    animation: none;
}

a:has(.fa-solid.fa-arrow-right):is(:hover, :focus-visible) .fa-solid.fa-arrow-right {
    color: inherit;
    animation: none;
}

/* Keep shared navigation and footer geometry stationary between page loads. */
html {
    scrollbar-gutter: stable;
}

@media (min-width: 769px) {
    html {
        overflow-y: scroll;
    }
}

html.site-is-arriving body:not(.page-app) .site-footer,
html.site-is-leaving body:not(.page-app) .site-footer,
html.site-is-ready body:not(.page-app) .site-footer {
    transform: none;
}

@media (max-width: 680px) {
    .dev-resource-signals {
        grid-template-columns: 1fr;
    }

    .dev-resource-signals article {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .dev-resource-signals article:last-child {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    a:has(.fa-solid.fa-arrow-right),
    a .fa-solid.fa-arrow-right,
    body.page-open-source .oss-actions a:has(.fa-arrow-up-right-from-square) {
        animation: none !important;
    }
}

/* The homepage availability badge is a static status indicator, not a pulsing CTA. */
body.page-index a.mkt-availability:has(.fa-solid.fa-arrow-right):not(:hover):not(:focus-visible) {
    color: var(--positive);
    animation: none;
}

body.page-index .mkt-availability > span {
    transform-origin: center;
    animation: mktLivePulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.page-index .mkt-availability > span {
        animation: none;
    }
}

/* ==========================================================================
   GLOBAL FOOTER TYPOGRAPHY CONTROLS

   PURPOSE
   -------
   Keeps corresponding footer text at identical sizes on every page. These
   final rules are intentionally isolated from page-level content typography.

   USAGE
   -----
   Adjust the values here to change footer headings, directory links, and the
   copyright/social/legal row site-wide, including the mobile overrides.
   ========================================================================== */

.site-footer {
    font-family: "Aptos", "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-footer .footer-directory-column h2 {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
}

.site-footer .footer-directory-links a {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}

.site-footer .footer-bottom,
.site-footer .footer-bottom span,
.site-footer .footer-bottom a {
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .site-footer .footer-directory-column h2,
    .site-footer .footer-directory-links a {
        font-size: 12px;
    }

    .site-footer .footer-bottom,
    .site-footer .footer-bottom span,
    .site-footer .footer-bottom a {
        font-size: 11px;
    }
}

/* ==========================================================================
   ENGINEERING PAGES ON THE SHARED PRODUCT-SAAS ARCHITECTURE

   Developers and Open Source reuse the same container widths, hero columns,
   sticky sub-navigation, section rhythm, split headings, cards, and final CTA
   architecture as the smtpRS product page while retaining their own content.
   ========================================================================== */
.engineering-saas {
    overflow: hidden;
    background: var(--bg);
}

.engineering-saas .engineering-saas-hero-panel {
    width: 100%;
    max-width: none;
    align-self: center;
    margin: 0;
    background:
        linear-gradient(145deg, rgba(246, 191, 63, 0.055), transparent 48%),
        color-mix(in srgb, var(--bg-raised) 94%, transparent);
}
/* Developer API card: add spacing above the endpoint command block. */
body.page-developers .dev-api-card > code {
    margin-top: 0.40rem;
}

html[data-theme="light"] .engineering-saas .engineering-saas-hero-panel {
    background:
        linear-gradient(145deg, rgba(183, 101, 13, 0.07), transparent 48%),
        color-mix(in srgb, var(--bg-raised) 96%, transparent);
}

.engineering-saas .engineering-saas-proof {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.55rem;
}

.engineering-saas .engineering-saas-proof > span {
    align-items: flex-start;
    line-height: 1.45;
}

.engineering-saas .engineering-saas-proof > span > i {
    margin-top: 0.18em;
}

.engineering-saas .dev-api-card h2 {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.08;
}

.engineering-saas .dev-principles {
    padding: 0;
    list-style: none;
}

.engineering-saas .dev-principles li {
    position: relative;
    padding: 0.9rem 1rem 0.9rem 2.65rem;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
}

.engineering-saas .dev-principles li::before {
    position: absolute;
    top: 50%;
    left: 1rem;
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    border-radius: 50%;
    content: "✓";
    color: #17120a;
    background: var(--accent-bright);
    font-size: 0.62rem;
    font-weight: 900;
    transform: translateY(-50%);
}

.engineering-saas .dev-sdk {
    border-color: var(--line);
    border-radius: 20px;
    box-shadow: none;
}

.engineering-project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.engineering-project-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    border-color: var(--line);
}

.engineering-project-card .oss-top {
    margin-bottom: 1.4rem;
}

.engineering-project-card h3 {
    margin-bottom: 0.75rem;
}

.engineering-project-card > p {
    color: var(--text-soft);
    line-height: 1.65;
}

.engineering-project-card .dev-command {
    margin-top: 0.9rem;
}

.engineering-project-card .oss-actions {
    margin-top: auto;
}

html[data-theme="light"] .engineering-saas {
    background: var(--bg);
}


/* Condensed Open Source engineering-principles panel */
body.page-open-source .engineering-saas-hero-panel {
    min-height: 0;
    height: auto;
    padding: 1.75rem 2rem;
}

body.page-open-source .engineering-saas-hero-panel .product-saas-eyebrow {
    margin: 0 0 1rem;
}

body.page-open-source .engineering-saas-hero-panel .dev-principles {
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

body.page-open-source .engineering-saas-hero-panel .dev-principles li {
    padding: 0.85rem 1rem 0.85rem 2.5rem;
}


@media (max-width: 980px) {
    .engineering-project-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .engineering-saas .engineering-saas-hero-panel {
        align-self: stretch;
    }

    .engineering-saas .product-saas-subnav > .container {
        align-items: flex-start;
    }
}

/* Keep a clicked desktop catalog exclusive until its click lock is canceled. */
@media (hover: hover) and (pointer: fine) {
    .site-header.nav-catalog-click-locked .nav-catalog:not(.is-click-locked) .product-catalog-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ==========================================================================
   BEHAVIOR-TRIGGERED CAMPAIGN

   Hidden fixed-position promotion. Content and campaign timing are configured
   in promotion.js; this section only owns presentation and responsive layout.
   ========================================================================== */
.campaign-promo-backdrop[hidden] {
    display: none !important;
}

.campaign-promo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999990;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 24px;
    background: rgba(2, 3, 4, 0.76);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.campaign-promo-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.campaign-promo {
    position: relative;
    width: min(850px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    border: 1px solid var(--accent-line);
    border-radius: 24px;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0, rgba(246, 191, 63, 0.13), transparent 44%),
        linear-gradient(145deg, color-mix(in srgb, var(--bg-raised) 96%, #15191e) 0%, var(--bg) 72%);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.62);
    outline: none;
    transform: translateY(14px) scale(0.985);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.campaign-promo-backdrop.is-open .campaign-promo {
    transform: none;
}

.campaign-promo::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--accent), var(--accent-bright), #f6d58c);
}

.campaign-promo-close {
    position: absolute;
    top: 17px;
    right: 17px;
    z-index: 3;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.campaign-promo-close svg {
    display: block;
    width: 15px;
    height: 15px;
}

.campaign-promo-close:hover,
.campaign-promo-close:focus-visible {
    color: var(--text);
    border-color: var(--accent-line);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
/*
 * Hide the browser focus ring for mouse/programmatic focus while preserving
 * an accessible branded indicator for keyboard navigation.
 */
.campaign-promo-close:focus:not(:focus-visible) {
    outline: none;
}

.campaign-promo-close:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
}

.campaign-promo-grid {
    display: grid;
    /* Existing declarations continue here. */
}

.campaign-promo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
}

.campaign-promo-copy {
    padding: 48px 44px 42px;
}

.campaign-promo-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.campaign-promo-brand img {
    display: block;
    width: 34px;
    height: 34px;
}

.campaign-promo-brand div {
    display: grid;
    gap: 2px;
}

.campaign-promo-brand strong {
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.campaign-promo-brand span {
    color: var(--muted);
    font-size: 11px;
}

.campaign-promo-eyebrow {
    margin: 0 0 13px;
    color: var(--accent-bright);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.145em;
    text-transform: uppercase;
}

.campaign-promo-copy h2 {
    max-width: 520px;
    margin: 0;
    font-size: clamp(35px, 4.2vw, 51px);
    line-height: 1.03;
    letter-spacing: -0.047em;
}

.campaign-promo-intro {
    margin: 20px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.65;
}

.campaign-promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.campaign-promo-actions .btn {
    min-height: 46px;
    padding: 12px 17px;
    border-radius: 11px;
    font-size: 13px;
}

.campaign-promo-actions .btn-primary span {
    margin-left: 5px;
}

.campaign-promo-note {
    margin: 14px 0 0;
    color: var(--muted-2);
    font-size: 11px;
    line-height: 1.5;
}

.campaign-promo-visual {
    --promo-tilt-x: 0deg;
    --promo-tilt-y: 0deg;
    --promo-rest-x: 0.55deg;
    --promo-rest-y: -1.15deg;
    --promo-light-x: 68%;
    --promo-light-y: 18%;
    --promo-cast-shadow: rgba(0, 0, 0, 0.56);
    --promo-layer-shadow: rgba(0, 0, 0, 0.34);
    --promo-edge-highlight: rgba(255, 255, 255, 0.085);
    --promo-edge-lowlight: rgba(0, 0, 0, 0.34);
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100%;
    align-items: center;
    padding: 70px 34px 42px 8px;
    perspective: 1150px;
    perspective-origin: 54% 44%;
}

.campaign-promo-visual::before {
    position: absolute;
    z-index: 0;
    inset: 16% 2% 10% -8%;
    border-radius: 42%;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(ellipse at 66% 28%, color-mix(in srgb, var(--accent) 19%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 48% 68%, color-mix(in srgb, var(--text) 4%, transparent) 0%, transparent 62%);
    filter: blur(28px);
    opacity: 0.78;
}

.campaign-promo-visual::after {
    position: absolute;
    z-index: 0;
    right: 2%;
    bottom: 29px;
    left: 8%;
    height: 56px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--promo-cast-shadow) 76%, transparent) 0%,
        transparent 70%
    );
    filter: blur(15px);
    opacity: 0.72;
    transform: scaleX(0.92);
}

.campaign-promo-console {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent-line));
    border-radius: 18px;
    background:
        radial-gradient(
            circle at var(--promo-light-x) var(--promo-light-y),
            color-mix(in srgb, var(--accent-soft) 38%, transparent) 0%,
            transparent 38%
        ),
        linear-gradient(
            150deg,
            color-mix(in srgb, var(--bg-raised) 88%, var(--code-bg)) 0%,
            color-mix(in srgb, var(--code-bg) 91%, var(--bg)) 100%
        );
    box-shadow:
        0 34px 64px -28px var(--promo-cast-shadow),
        0 18px 30px -24px color-mix(in srgb, var(--accent) 40%, transparent),
        inset 0 1px 0 var(--promo-edge-highlight),
        inset 0 -1px 0 var(--promo-edge-lowlight);
    backface-visibility: hidden;
    transform:
        rotateX(calc(var(--promo-rest-x) + var(--promo-tilt-x)))
        rotateY(calc(var(--promo-rest-y) + var(--promo-tilt-y)))
        translateZ(0);
    transform-origin: 50% 52%;
    transform-style: preserve-3d;
    transition:
        /* transform 360ms cubic-bezier(0.2, 0.72, 0.2, 1), */
        transform 180ms cubic-bezier(0.2, 0.72, 0.2, 1),
        box-shadow 220ms ease;
    will-change: transform;
}

.campaign-promo-console::before,
.campaign-promo-console::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.campaign-promo-console::before {
    z-index: 0;
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    box-shadow:
        inset 1px 0 0 color-mix(in srgb, var(--text) 2%, transparent),
        inset -1px 0 0 color-mix(in srgb, var(--accent) 5%, transparent);
    transform: translateZ(1px);
}

.campaign-promo-console::after {
    z-index: 0;
    background: linear-gradient(
        128deg,
        color-mix(in srgb, var(--text) 5%, transparent) 0%,
        transparent 27%,
        transparent 72%,
        color-mix(in srgb, var(--accent) 6%, transparent) 100%
    );
    opacity: 0.78;
    transform: translateZ(2px);
}

.campaign-promo-console-head,
.campaign-promo-email,
.campaign-promo-signals,
.campaign-promo-decision {
    position: relative;
    z-index: 2;
    backface-visibility: hidden;
    transition:
        /* transform 360ms cubic-bezier(0.2, 0.72, 0.2, 1),     */
        transform 180ms cubic-bezier(0.2, 0.72, 0.2, 1),
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.campaign-promo-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 2px 0;
    padding: 13px 13px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 15px 15px 10px 10px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-raised) 95%, var(--text) 1.5%) 0%,
        color-mix(in srgb, var(--bg-raised) 87%, var(--code-bg)) 100%
    );
    box-shadow:
        0 10px 22px -20px var(--promo-layer-shadow),
        inset 0 1px 0 var(--promo-edge-highlight);
    transform: translateZ(10px);
}

.campaign-promo-console-head > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.campaign-promo-console-head .campaign-promo-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px 4px 6px;
    border: 1px solid color-mix(in srgb, var(--positive) 25%, transparent);
    border-radius: 999px;
    color: var(--positive);
    background: color-mix(in srgb, var(--positive) 7%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent),
        0 5px 12px -10px color-mix(in srgb, var(--positive) 54%, transparent);
}

.campaign-promo-live i {
    position: relative;
    top: -0.5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--positive) 9%, transparent),
        0 0 10px color-mix(in srgb, var(--positive) 32%, transparent);
    animation: campaign-promo-status-pulse 2.8s ease-in-out infinite;
}

@keyframes campaign-promo-status-pulse {
    0%, 100% {
        opacity: 0.78;
        transform: scale(0.92);
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--positive) 7%, transparent),
            0 0 8px color-mix(in srgb, var(--positive) 22%, transparent);
    }

    50% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--positive) 10%, transparent),
            0 0 12px color-mix(in srgb, var(--positive) 34%, transparent);
    }
}

.campaign-promo-email {
    margin: 14px 15px 13px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-line));
    border-radius: 12px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--bg-raised) 96%, var(--text) 1%) 0%,
        color-mix(in srgb, var(--bg-raised) 86%, var(--code-bg)) 100%
    );
    box-shadow:
        0 15px 28px -21px var(--promo-layer-shadow),
        0 5px 12px -12px color-mix(in srgb, var(--accent) 28%, transparent),
        inset 0 1px 0 var(--promo-edge-highlight);
    transform: translateZ(22px);
}

.campaign-promo-email::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--promo-edge-lowlight) 62%, transparent);
}

.campaign-promo-email small {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.campaign-promo-email strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 13px;
}

.campaign-promo-signals {
    display: grid;
    gap: 6px;
    margin: 0 10px;
    padding: 2px 0 3px;
    transform: translateZ(12px);
}

.campaign-promo-signals > div {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--line-soft) 90%, transparent);
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-raised) 89%, var(--code-bg)) 0%,
        color-mix(in srgb, var(--bg-raised) 80%, var(--bg)) 100%
    );
    box-shadow:
        0 8px 18px -18px var(--promo-layer-shadow),
        inset 0 1px 0 color-mix(in srgb, var(--promo-edge-highlight) 72%, transparent);
}

.campaign-promo-signals > div::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 1px;
    border-radius: 1px;
    content: "";
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 48%, transparent) 50%,
        transparent 100%
    );
    opacity: 0.44;
}

.campaign-promo-signals span {
    color: var(--text-soft);
    font-size: 12px;
}

.campaign-promo-signals strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--accent-line) 74%, transparent);
    border-radius: 999px;
    color: var(--accent-bright);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-soft) 60%, transparent) 0%,
        color-mix(in srgb, var(--accent-soft) 26%, transparent) 100%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent),
        0 5px 12px -10px color-mix(in srgb, var(--accent) 62%, transparent);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.campaign-promo-signals strong::before {
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 50%;
    content: "";
    background: var(--accent-bright);
    box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 38%, transparent);
}

.campaign-promo-decision {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 13px 15px 15px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent-line) 88%, var(--line));
    border-radius: 12px;
    background: linear-gradient(
        115deg,
        color-mix(in srgb, var(--accent-soft) 74%, var(--bg-raised)) 0%,
        color-mix(in srgb, var(--accent-soft) 22%, var(--bg-raised)) 62%,
        color-mix(in srgb, var(--bg-raised) 88%, var(--code-bg)) 100%
    );
    box-shadow:
        0 16px 30px -22px color-mix(in srgb, var(--accent) 60%, transparent),
        0 8px 18px -17px var(--promo-layer-shadow),
        inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
    transform: translateZ(25px);
}

.campaign-promo-decision::after {
    position: absolute;
    top: 0;
    right: 14px;
    left: 14px;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--accent-bright) 34%, transparent),
        transparent
    );
    opacity: 0.58;
}

.campaign-promo-decision span {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.campaign-promo-decision strong {
    color: var(--text);
    font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .campaign-promo-visual.is-depth-active .campaign-promo-console-head {
        transform: translateZ(12px);
    }

    .campaign-promo-visual.is-depth-active .campaign-promo-email {
        transform: translateZ(25px);
    }

    .campaign-promo-visual.is-depth-active .campaign-promo-signals {
        transform: translateZ(14px);
    }

    .campaign-promo-visual.is-depth-active .campaign-promo-decision {
        transform: translateZ(29px);
    }
}

html[data-theme="light"] .campaign-promo-visual {
    --promo-cast-shadow: rgba(68, 52, 28, 0.23);
    --promo-layer-shadow: rgba(77, 59, 31, 0.16);
    --promo-edge-highlight: rgba(255, 255, 255, 0.92);
    --promo-edge-lowlight: rgba(47, 38, 25, 0.09);
}

html[data-theme="light"] .campaign-promo-visual::before {
    opacity: 0.62;
}

html[data-theme="light"] .campaign-promo-visual::after {
    opacity: 0.5;
}

html[data-theme="light"] .campaign-promo-console {
    border-color: color-mix(in srgb, var(--line) 82%, var(--accent-line));
    background:
        radial-gradient(
            circle at var(--promo-light-x) var(--promo-light-y),
            color-mix(in srgb, var(--accent-soft) 46%, transparent) 0%,
            transparent 39%
        ),
        linear-gradient(
            150deg,
            color-mix(in srgb, var(--bg-raised) 96%, var(--bg-soft)) 0%,
            color-mix(in srgb, var(--bg-muted) 72%, var(--bg-raised)) 100%
        );
    box-shadow:
        0 31px 56px -28px var(--promo-cast-shadow),
        0 15px 28px -24px color-mix(in srgb, var(--accent) 30%, transparent),
        inset 0 1px 0 var(--promo-edge-highlight),
        inset 0 -1px 0 var(--promo-edge-lowlight);
}

html[data-theme="light"] .campaign-promo-console-head {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-raised) 98%, white) 0%,
        color-mix(in srgb, var(--bg-soft) 76%, var(--bg-raised)) 100%
    );
}

html[data-theme="light"] .campaign-promo-email {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--bg-raised) 98%, white) 0%,
        color-mix(in srgb, var(--bg-soft) 58%, var(--bg-raised)) 100%
    );
}

html[data-theme="light"] .campaign-promo-signals > div {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-raised) 96%, var(--bg-soft)) 0%,
        color-mix(in srgb, var(--bg-soft) 75%, var(--bg-raised)) 100%
    );
}

html[data-theme="light"] .campaign-promo-decision {
    background: linear-gradient(
        115deg,
        color-mix(in srgb, var(--accent-soft) 58%, var(--bg-raised)) 0%,
        color-mix(in srgb, var(--accent-soft) 16%, var(--bg-raised)) 62%,
        color-mix(in srgb, var(--bg-soft) 70%, var(--bg-raised)) 100%
    );
}

html[data-theme="light"] .campaign-promo-backdrop {
    background: rgba(46, 38, 27, 0.48);
}

html[data-theme="light"] .campaign-promo {
    background:
        radial-gradient(circle at 100% 0, rgba(183, 101, 13, 0.1), transparent 44%),
        linear-gradient(145deg, #fffefb 0%, var(--bg-soft) 72%);
    box-shadow: 0 30px 80px rgba(62, 48, 22, 0.24);
}

/*
 * Desktop campaign presentation
 * Enlarges the modal and its product-preview console as one proportional unit.
 * Mobile retains the compact layout defined by the breakpoints below.
 */
@media (min-width: 1024px) {
    .campaign-promo-backdrop {
        padding: 32px;
    }

    .campaign-promo {
        width: min(1120px, calc(100vw - 64px));
        max-height: calc(100dvh - 64px);
        border-radius: 28px;
    }

    .campaign-promo-close {
        top: 21px;
        right: 21px;
        width: 46px;
        height: 46px;
    }

    .campaign-promo-close svg {
        width: 18px;
        height: 18px;
    }

    .campaign-promo-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    }

    .campaign-promo-copy {
        padding: 64px 58px 56px;
    }

    .campaign-promo-brand {
        gap: 14px;
        margin-bottom: 36px;
    }

    .campaign-promo-brand img {
        width: 42px;
        height: 42px;
    }

    .campaign-promo-brand strong {
        font-size: 13px;
    }

    .campaign-promo-brand span,
    .campaign-promo-eyebrow {
        font-size: 12px;
    }

    .campaign-promo-copy h2 {
        max-width: 590px;
        font-size: clamp(48px, 4vw, 62px);
    }

    .campaign-promo-intro {
        margin-top: 24px;
        font-size: 17px;
    }

    .campaign-promo-actions {
        gap: 12px;
        margin-top: 32px;
    }

    .campaign-promo-actions .btn {
        min-height: 50px;
        padding: 14px 20px;
        font-size: 14px;
    }

    .campaign-promo-note {
        margin-top: 17px;
        font-size: 12px;
    }

    .campaign-promo-visual {
        padding: 88px 50px 56px 14px;
        perspective: 1350px;
    }

    .campaign-promo-console {
        border-radius: 21px;
    }

    .campaign-promo-console-head {
        padding: 16px 17px 15px;
        border-radius: 18px 18px 12px 12px;
    }

    .campaign-promo-console-head > span {
        font-size: 10px;
    }

    .campaign-promo-console-head .campaign-promo-live {
        gap: 7px;
        padding: 5px 9px 5px 7px;
    }

    .campaign-promo-live i {
        width: 8px;
        height: 8px;
    }

    .campaign-promo-email {
        margin: 18px 18px 16px;
        padding: 18px;
        border-radius: 14px;
    }

    .campaign-promo-email small {
        font-size: 10px;
    }

    .campaign-promo-email strong {
        margin-top: 7px;
        font-size: 15px;
    }

    .campaign-promo-signals {
        gap: 8px;
        margin: 0 13px;
    }

    .campaign-promo-signals > div {
        min-height: 52px;
        padding: 0 16px;
        border-radius: 12px;
    }

    .campaign-promo-signals span {
        font-size: 13px;
    }

    .campaign-promo-signals strong {
        padding: 5px 9px;
        font-size: 9px;
    }

    .campaign-promo-decision {
        margin: 16px 18px 18px;
        padding: 17px;
        border-radius: 14px;
    }

    .campaign-promo-decision span {
        font-size: 11px;
    }

    .campaign-promo-decision strong {
        font-size: 16px;
    }
}

@media (max-width: 720px) {
    .campaign-promo-backdrop {
        align-items: end;
        padding: 12px;
    }

    .campaign-promo {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 21px;
    }

    .campaign-promo-grid {
        display: block;
    }

    .campaign-promo-copy {
        padding: 38px 24px 25px;
    }

    .campaign-promo-brand {
        margin-bottom: 23px;
        padding-right: 44px;
    }

    .campaign-promo-copy h2 {
        font-size: clamp(32px, 9vw, 41px);
    }

    .campaign-promo-intro {
        font-size: 15px;
    }

    .campaign-promo-actions {
        display: grid;
    }

    .campaign-promo-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .campaign-promo-visual {
        padding: 0 24px 28px;
    }

    .campaign-promo-console {
        border-radius: 15px;
    }
}

@media (max-width: 420px) {
    .campaign-promo-copy {
        padding-right: 19px;
        padding-left: 19px;
    }

    .campaign-promo-visual {
        padding-right: 19px;
        padding-left: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-promo-backdrop,
    .campaign-promo,
    .campaign-promo-close,
    .campaign-promo-console,
    .campaign-promo-console-head,
    .campaign-promo-email,
    .campaign-promo-signals,
    .campaign-promo-decision {
        transition: none !important;
    }

    .campaign-promo-console {
        will-change: auto;
    }

    .campaign-promo-live i,
    .campaign-promo-signals strong {
        animation: none !important;
    }
}

/* ==========================================================================
   PRODUCTS PORTFOLIO PAGE
   Uses the shared product SaaS architecture for the main products route.
   ========================================================================== */

.products-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 22px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.products-hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.products-hero-proof i {
    color: var(--accent);
}

.products-saas-snapshot {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.products-saas-snapshot > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.products-saas-snapshot span {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.products-saas-snapshot strong {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.products-saas-snapshot strong.is-available {
    color: var(--success);
}

.products-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.products-portfolio-card {
    display: flex;
    min-height: 320px;
    flex-direction: column;
}

.products-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.products-card-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: var(--accent);
    color: #080a0c;
    font-size: 18px;
}

.products-card-status {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.products-card-status.is-available {
    border-color: color-mix(in srgb, var(--success) 45%, var(--line));
    color: var(--success);
}

.products-card-kicker {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.products-portfolio-card h3 {
    margin: 0;
}

.products-portfolio-card > p:not(.products-card-kicker) {
    margin-top: 14px;
}

.products-card-actions {
    margin-top: auto;
    padding-top: 24px;
}

.products-card-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.products-saas-cta {
    background:
        radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
        var(--surface);
}

@media (max-width: 720px) {
    .products-portfolio-grid {
        grid-template-columns: 1fr;
    }

    .products-portfolio-card {
        min-height: 0;
    }

    .products-saas-snapshot > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* ==========================================================================
   CAREERS: DISABLE GLOBAL LINK COLOR PULSE
   Prevents the global linked-arrow-pulse animation from changing the color
   of careers job-row text and arrows on careers and job-detail pages.
   This does not affect hover transitions or unrelated status-dot animations.
   ==========================================================================
body.page-careers .careers-job-row {
    color: var(--text) !important;
    animation: none !important;
}

body.page-careers .careers-job-row > .fa-solid.fa-arrow-right {
    color: var(--accent-bright);
    animation: none !important;
} */

/* ==========================================================================
   CAREERS: LIMIT GLOBAL LINK COLOR PULSE TO JOB-ROW ARROWS
   Prevents careers job-row text from pulsing while preserving the color pulse
   exclusively on each Font Awesome right-arrow icon.
   ========================================================================== */
body.page-careers .careers-job-row {
    color: var(--text) !important;
    animation: none !important;
}
body.page-careers .careers-job-row > .fa-solid.fa-arrow-right {
    color: #f6bf3f;
    animation: linked-arrow-pulse-dark 3.2s ease-in-out infinite;
}
/* Light mode */
html[data-theme="light"]
body.page-careers
.careers-job-row > .fa-solid.fa-arrow-right {
    color: #b7650d;
    animation-name: linked-arrow-pulse-light;
}
/* Stop pulsing while hovering or keyboard-focusing the job row */
body.page-careers
.careers-job-row:is(:hover, :focus-visible) > .fa-solid.fa-arrow-right {
    animation: none;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    body.page-careers .careers-job-row > .fa-solid.fa-arrow-right {
        animation: none;
    }
}


/* ==========================================================================
   COMPANY PAGE: DOYDL TECHNOLOGIES EXTERNAL-LINK PULSE

   Applies the a slow color pulse to the DOYDL Technologies text link and its
   external-link arrow, drawing attention without adding glow or shadow effects.

   Behavior:
   - Uses the gold pulse dark-mode pulse by algorithm by default.
   - Switches to the darker orange pulse palette in light mode.
   - Stops the animation while the link over or keyboard-focusing the link.
   - Disables the animation when reduced motion is requested.
   ========================================================================== */
body.page-company
.pvco-text-link:has(.fa-arrow-up-right-from-square):not(:hover):not(:focus-visible) {
    color: #f6bf3f;
    animation: linked-arrow-pulse-dark 3.2s ease-in-out infinite;
    filter: none;
    text-shadow: none;
}

/* Use the higher-contrast orange pulse palette when light mode is active. */
html[data-theme="light"]
body.page-company
.pvco-text-link:has(.fa-arrow-up-right-from-square):not(:hover):not(:focus-visible) {
    color: #b7650d;
    animation-name: linked-arrow-pulse-light-light;
}

/* Present a stable accent color while the link is being interacted with. */
body.page-company
.pvco-text-link:has(.fa-arrow-up-right-from-square):is(:hover, :focus-visible) {
    animation: none;
    color: var(--accent-bright);
}

/* Respect the visitor's operating-system reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    body.page-company
    .pvco-text-link:has(.fa-arrow-up-right-from-square) {
        animation: none;
    }
}

/* ==========================================================================
   COMPANY CARD LABEL COLOR

   Applies the shared accent color to company-card labels so elements such as
   "Parent company" and "Software company" match the company-page kicker and
   section labels consistently across dark and light themes.
   ========================================================================== */
body.page-company .pvco-company-label {
    color: var(--accent-bright);
}

/* ==========================================================================
   CAREERS JOB POLICY PARAGRAPH TYPOGRAPHY

   Keeps every paragraph within Compensation, Equal Opportunity,
   Accommodations, and Recruiting Agencies at the same text size.
   ========================================================================== */

body.page-careers
.careers-job-copy-section-policy > p {
    font-size: 0.72rem !important;
    font-weight: 400;
    line-height: 1.45;
}

/* ==========================================================================
   CAMPAIGN MODAL STATUS EMPHASIS

   Strengthens the READY state and restores animated SIGNAL indicators while
   preserving a static presentation for visitors who prefer reduced motion.
   ========================================================================== */
.campaign-promo-live i {
    animation-duration: 1.9s;
}

@keyframes campaign-promo-status-pulse {
    0%, 100% {
        opacity: 0.72;
        transform: scale(0.86);
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--positive) 10%, transparent),
            0 0 9px color-mix(in srgb, var(--positive) 30%, transparent);
    }

    50% {
        opacity: 1;
        transform: scale(1.18);
        box-shadow:
            0 0 0 7px color-mix(in srgb, var(--positive) 14%, transparent),
            0 0 19px color-mix(in srgb, var(--positive) 58%, transparent);
    }
}

.campaign-promo-signals strong {
    position: relative;
    overflow: hidden;
}

.campaign-promo-signals strong::before {
    animation: campaign-promo-signal-dot-pulse 1.8s ease-in-out infinite;
}

.campaign-promo-signals > div:nth-child(2) strong::before {
    animation-delay: 150ms;
}

.campaign-promo-signals > div:nth-child(3) strong::before {
    animation-delay: 300ms;
}

.campaign-promo-signals > div:nth-child(4) strong::before {
    animation-delay: 450ms;
}

.campaign-promo-signals strong::after {
    position: absolute;
    inset: 0 7px 0 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    content: "Signal";
    color: transparent;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.08) 38%,
        rgba(255, 245, 205, 0.96) 50%,
        rgba(255, 255, 255, 0.08) 62%,
        transparent 80%
    );
    background-size: 240% 100%;
    background-position: 180% 0;
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
    animation: campaign-promo-signal-letter-sweep 3.2s ease-in-out infinite;
}

@keyframes campaign-promo-signal-dot-pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(0.82);
        box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 32%, transparent);
    }

    50% {
        opacity: 1;
        transform: scale(1.24);
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent),
            0 0 12px color-mix(in srgb, var(--accent) 68%, transparent);
    }
}

@keyframes campaign-promo-signal-letter-sweep {
    0%, 30% {
        background-position: 180% 0;
    }

    68%, 100% {
        background-position: -180% 0;
    }
}

@media (min-width: 1024px) {
    .campaign-promo-console-head .campaign-promo-live {
        gap: 8px;
        padding: 7px 11px 7px 9px;
        font-size: 12px;
        letter-spacing: 0.15em;
    }

    .campaign-promo-live i {
        width: 10px;
        height: 10px;
    }

    .campaign-promo-signals strong {
        gap: 8px;
        padding: 7px 10px;
        font-size: 10px;
    }

    .campaign-promo-signals strong::before {
        width: 6px;
        height: 6px;
    }

    .campaign-promo-signals strong::after {
        right: 10px;
        left: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-promo-live i,
    .campaign-promo-signals strong::before,
    .campaign-promo-signals strong::after {
        animation: none !important;
    }
}

/* ==========================================================================
   HOMEPAGE HERO ARTWORK — edit --hero-art-width here
   ========================================================================== */

/* Edit --hero-art-width below (or in DevTools) to resize the image. Keep its native ratio
   and fit smaller screens without changing the surrounding hero copy. */
.mkt-hero-shell {
    grid-template-columns: minmax(0, 1fr);
}
.mkt-hero-team-image {
    /* --hero-art-width: 1600px; */
    --hero-art-width: 1400px;
    display: block;
    justify-self: center;
    width: var(--hero-art-width);
    max-width: calc(100vw - 48px);
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
}



/* ==========================================================================
   SMTPRS PUBLIC LIVE CHECKER
   ========================================================================== */

/* Public Mini-model showcase. Dark product surface in either website theme.
   Palette values reuse paravane.css dark tokens and its smtpRS status colors. */
@property --smtprs-screen-beam-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: -42deg;
}
.product-saas-hero--smtprs { padding-top: clamp(68px, 7vw, 104px); }
.smtprs-live-hero { position: relative; }
.smtprs-live-hero-heading { position: relative; z-index: 2; max-width: 1040px; margin-inline: auto; text-align: center; }
.smtprs-live-hero-heading .product-saas-product-line { flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.smtprs-live-hero-heading h1 { max-width: 980px; margin: 25px auto 0; font-size: clamp(48px, 6vw, 82px); line-height: .98; text-wrap: balance; }
/* Override the shared product heading's margin reset, keeping its type scale. */
.product-saas-page main .smtprs-live-hero-heading h1 { margin-inline: auto; }
.smtprs-live-hero-support { width: min(850px, 100%); margin: clamp(38px, 5vw, 60px) auto 0; }
.smtprs-live-hero-support .product-saas-lede { max-width: none; margin: 0; }
.smtprs-live-hero-support .product-saas-proof { align-items: center; }

.smtprs-live-screen {
    /* Keep the outer shell dark; the checker interior has scoped light tokens below. */
    --smtprs-screen-beam-angle: -42deg;
    --code-bg: #0a0b0e;
    --smtprs-shell-line: rgba(255, 255, 255, .085);
    --smtprs-shell-accent-line: rgba(238, 152, 38, .22);
    --bg: #090a0c;
    --bg-soft: #0d0f12;
    --text: #f2f0ea;
    --text-soft: #c9c5bd;
    --muted: #aaa69f;
    --line: rgba(255, 255, 255, .12);
    --accent: #ee9826;
    --accent-bright: #f6bf3f;
    --accent-line: rgba(238, 152, 38, .3);
    --accent-soft: rgba(238, 152, 38, .1);
    --control-bg: rgba(255, 255, 255, .028);
    --smtprs-green: #5cc98a;
    --smtprs-red: #e37d75;
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: clamp(42px, 5vw, 64px) auto 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--smtprs-shell-line) 78%, var(--smtprs-shell-accent-line));
    border-radius: 18px;
    color: var(--text);
    background: var(--code-bg);
    box-shadow: 0 34px 90px -54px rgba(0, 0, 0, .92);
    isolation: isolate;
    scroll-margin-top: 110px;
    color-scheme: dark;
}
/* Checker display text is not selectable; preserve normal email editing. */
.smtprs-live-screen,
.smtprs-live-screen * {
    -webkit-user-select: none;
    user-select: none;
}
.smtprs-live-screen input,
.smtprs-live-screen textarea {
    -webkit-user-select: text;
    user-select: text;
}
.smtprs-live-screen::before {
    position: absolute;
    inset: -1px;
    z-index: 4;
    padding: 1px;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    background: conic-gradient(from var(--smtprs-screen-beam-angle), transparent 0deg 285deg, color-mix(in srgb, var(--accent) 8%, transparent) 310deg, color-mix(in srgb, var(--accent-bright) 84%, transparent) 340deg, transparent 360deg);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 24%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: smtprs-live-screen-beam 6s linear infinite;
}
@keyframes smtprs-live-screen-beam { to { --smtprs-screen-beam-angle: 318deg; } }
.smtprs-live-screen-stage {
    position: relative;
    z-index: 1;
    padding: 0;
    /* Neutral grid only: no warm radial glow behind the checker. */
    background: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px), var(--code-bg);
    background-size: 42px 42px, 42px 42px, auto;
}
.smtprs-live-screen-stage .smtprs-preview-form {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.smtprs-live-screen [hidden] { display: none !important; }
.smtprs-live-screen-chrome { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 24px; border-bottom: 1px solid color-mix(in srgb, var(--smtprs-shell-line) 86%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), color-mix(in srgb, var(--code-bg) 88%, var(--bg-soft)); box-shadow: inset 1px 6px 16px rgba(255,255,255,.025), 0 10px 28px rgba(0,0,0,.18); }
.smtprs-chrome-brand, .smtprs-chrome-status { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.smtprs-chrome-brand strong { margin-left: 22px; color: var(--accent-bright); letter-spacing: .08em; }
.smtprs-chrome-brand > span { color: var(--text-soft); }
.smtprs-chrome-brand .visual-chrome-controls { display: flex; align-items: center; gap: 7px; }
.smtprs-chrome-status > * + * { padding-left: 18px; border-left: 1px solid var(--line); }
.smtprs-chrome-status > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.smtprs-chrome-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--smtprs-green); box-shadow: 0 0 12px rgba(92,201,138,.45); }
.smtprs-chrome-status i { animation: smtprs-public-status-pulse 2.2s ease-in-out infinite; }
@keyframes smtprs-public-status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(92,201,138,.3), 0 0 12px rgba(92,201,138,.45); }
    50% { opacity: .7; box-shadow: 0 0 0 5px rgba(92,201,138,0), 0 0 5px rgba(92,201,138,.2); }
}
.smtprs-chrome-status time { font-variant-numeric: tabular-nums; font-size: 11px; }
.smtprs-preview-form.site-form { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 0; padding: 36px; margin: 0; }
.smtprs-preview-input { min-width: 0; padding-right: 28px; }
.smtprs-preview-results { display: flex; flex-direction: column; min-width: 0; padding-left: 28px; border-left: 1px solid var(--line); }
.smtprs-live-screen .smtprs-preview-eyebrow { margin: 0 0 14px; color: var(--accent-bright); font-size: 11px; font-weight: 800; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; }
.smtprs-preview-input h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); font-weight: 750; line-height: 1.13; letter-spacing: -.045em; color: var(--text); }
.smtprs-preview-intro { margin: 15px 0 28px; color: var(--text-soft); font-size: 15px; line-height: 1.7; }
.smtprs-live-screen .smtprs-email-field { display: block; margin: 0 0 14px; }
.smtprs-live-screen .smtprs-email-field > span:first-child { color: var(--text-soft); font-size: 14px; font-weight: 500; }
.smtprs-email-control { display: block; position: relative; margin-top: 9px; }
.smtprs-email-control > i { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--accent-bright); font-size: 17px; pointer-events: none; }
.smtprs-live-screen .smtprs-email-control input { width: 100%; min-width: 0; height: 54px; padding: 12px 16px 12px 46px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: linear-gradient(140deg, rgba(255,255,255,.03), transparent), var(--bg-soft); color: var(--text); font-size: 16px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.smtprs-live-screen input::placeholder { color: #94918b; }
.smtprs-live-screen .smtprs-preview-submit { display: flex; gap: 12px; justify-content: center; width: 100%; min-height: 54px; padding: 13px 18px; border: 1px solid var(--accent-bright); border-radius: 11px; background: linear-gradient(115deg, var(--accent), var(--accent-bright) 48%, #ead7b3); color: #15110b; font-size: 14px; font-weight: 800; box-shadow: 0 5px 18px rgba(238,152,38,.08); white-space: normal; }
.smtprs-live-screen .smtprs-preview-submit { cursor: pointer; }
.smtprs-live-screen .smtprs-preview-submit:disabled { cursor: wait; opacity: .8; }
.smtprs-live-screen :is(input, button, summary, a):focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }
.smtprs-verification-row { margin-top: 14px; min-width: 0; }
.smtprs-live-screen .turnstile-slot { margin: 0; min-height: 0; max-width: 100%; }
.smtprs-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; scroll-margin-top: 100px; }
.smtprs-results-heading .smtprs-preview-eyebrow { margin: 0; }
.smtprs-results-heading > span { color: var(--muted); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.smtprs-results-body { flex: 1; min-height: 365px; }
.smtprs-ready { display: flex; min-height: 365px; flex-direction: column; align-items: center; justify-content: center; padding: 26px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; }
.smtprs-ready-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 22px; border: 1px solid var(--accent-line); border-radius: 18px; color: var(--accent-bright); background: var(--accent-soft); font-size: 23px; box-shadow: 0 0 36px rgba(238,152,38,.04); }
.smtprs-live-screen .smtprs-ready h3 { margin: 0 0 12px; font-size: 22px; color: var(--text); }
.smtprs-ready p { max-width: 320px; margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-soft); }
.product-saas-page .smtprs-live-screen .smtprs-demo-analysis { min-height: 365px; margin: 0; padding: 19px; background: linear-gradient(135deg, rgba(238,152,38,.05), transparent), var(--bg-soft); }
.smtprs-analysis-note { margin: -4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.smtprs-live-screen .smtprs-demo-analysis-head { flex-wrap: wrap; gap: 7px; font-size: 9px; }
.smtprs-live-screen .smtprs-demo-analysis-steps li { opacity: 1; }
.smtprs-live-screen .smtprs-demo-analysis-steps li:not(.is-active):not(.is-complete) strong { color: var(--muted); }
.smtprs-live-screen .smtprs-demo-analysis-steps strong { font-size: 12px; }
.smtprs-live-screen .smtprs-demo-analysis-steps small { font-size: 10px; color: var(--muted); }
.smtprs-live-screen .smtprs-preview-status { min-height: 30px; margin: 12px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.smtprs-live-screen .smtprs-preview-status.is-success { color: var(--smtprs-green); }
.smtprs-live-screen .smtprs-preview-status.is-error { color: var(--smtprs-red); }
.smtprs-model-note { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent), var(--bg-soft); }
.smtprs-model-note > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.03); color: var(--text-soft); }
.smtprs-live-screen .smtprs-model-note h3 { margin: 0 0 5px; font-size: 14px; color: var(--text); }
.smtprs-model-note p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--text-soft); }
.smtprs-model-note a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.smtprs-preview-result { animation: smtprs-result-reveal 180ms ease-out; }
.smtprs-verdict { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 142px; padding: 20px 16px; border: 1px solid var(--accent-line); border-radius: var(--radius-md); background: linear-gradient(120deg, rgba(238,152,38,.055), transparent); }
.smtprs-verdict-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; color: var(--accent-bright); background: var(--accent-soft); font-size: 24px; }
.smtprs-live-screen .smtprs-verdict h3 { margin: 0 0 9px; color: var(--text); font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
.smtprs-verdict p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.65; }
.smtprs-verdict-band { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 98px; padding-left: 14px; border-left: 1px solid var(--line); color: var(--accent-bright); }
.smtprs-verdict-band small { color: var(--text-soft); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.smtprs-verdict-band strong { font-size: 13px; }
.smtprs-verdict-band span { font-size: 9px; line-height: 1.5; color: var(--text-soft); }
.risk-low .smtprs-verdict { border-color: rgba(92,201,138,.3); background: linear-gradient(120deg, rgba(92,201,138,.07), rgba(92,201,138,.015)); }
.risk-low .smtprs-verdict-icon { color: white; border-color: var(--smtprs-green); background: linear-gradient(135deg, #219455, #5cc98a); }
.risk-low .smtprs-verdict-band { color: var(--smtprs-green); }
.risk-high .smtprs-verdict, .smtprs-preview-error { border-color: rgba(227,125,117,.35); background: rgba(227,125,117,.04); }
.risk-high .smtprs-verdict-icon, .risk-high .smtprs-verdict-band { color: var(--smtprs-red); }
.smtprs-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; margin-top: 18px; }
.smtprs-signal { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-soft); }
.smtprs-signal:last-child { grid-column: 1 / -1; }
.smtprs-signal summary { display: grid; grid-template-columns: 23px minmax(0, 1fr) 8px; gap: 10px; align-items: center; min-height: 92px; padding: 14px; cursor: pointer; list-style: none; border-radius: inherit; }
.smtprs-signal:last-child summary { min-height: 76px; }
.smtprs-signal summary::-webkit-details-marker { display: none; }
.smtprs-signal summary::after { content: '›'; font-size: 23px; color: var(--muted); }
.smtprs-signal[open] summary::after { transform: rotate(90deg); }
.smtprs-signal summary:hover { background: rgba(255,255,255,.025); }
.smtprs-signal strong, .smtprs-signal small { display: block; }
.smtprs-signal strong { margin-bottom: 5px; font-size: 14px; color: var(--text); }
.smtprs-signal small { color: var(--text-soft); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.smtprs-signal-icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50%; color: var(--muted); font-size: 14px; }
.signal-clear .smtprs-signal-icon, .signal-capable .smtprs-signal-icon { color: white; border-color: var(--smtprs-green); background: #269e5b; }
.signal-elevated .smtprs-signal-icon { color: var(--accent-bright); background: var(--accent-soft); }
.signal-not_capable .smtprs-signal-icon { color: var(--smtprs-red); background: rgba(227,125,117,.07); }
.smtprs-signal-evidence { border-top: 1px solid var(--line); padding: 12px 16px; color: var(--text-soft); font-size: 11px; line-height: 1.65; }
.smtprs-signal-evidence p { margin: 0; }
.smtprs-signal-evidence ul { padding-left: 16px; margin: 8px 0 0; }
.smtprs-preview-error { min-height: 365px; padding: 26px; border: 1px solid rgba(227,125,117,.35); border-radius: var(--radius-md); }
.smtprs-preview-error > span { font-size: 30px; color: var(--smtprs-red); }
.smtprs-live-screen .smtprs-preview-error h3 { margin: 18px 0 12px; font-size: 22px; color: var(--text); }
.smtprs-preview-error p { color: var(--text-soft); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
/* Light interior follows the preview theme, independently of the page. */
.smtprs-studio[data-preview-theme="light"] .smtprs-live-screen-stage {
    --code-bg: #f7f6f2;
    --bg: #f7f6f2;
    --bg-soft: #fff;
    --text: #20221f;
    --text-soft: #464940;
    --muted: #606459;
    --line: rgba(25, 30, 20, .18);
    --control-bg: rgba(25, 30, 20, .05);
    --accent-bright: #936000;
    --accent-line: rgba(147, 96, 0, .32);
    --accent-soft: rgba(147, 96, 0, .08);
    --smtprs-shell-line: rgba(25, 30, 20, .12);
    --smtprs-green: #16794b;
    --smtprs-red: #b3293d;
    color: var(--text);
    color-scheme: light;
    background-image: linear-gradient(rgba(25, 30, 20, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 30, 20, .025) 1px, transparent 1px);
}
.smtprs-studio[data-preview-theme="light"] .smtprs-email-control input { border-color: var(--line); box-shadow: none; }
.smtprs-studio[data-preview-theme="light"] input::placeholder { color: #77786e; }
.smtprs-studio[data-preview-theme="light"] .smtprs-live-screen-stage :is(.smtprs-signal, .smtprs-model-note, .smtprs-ready) { background-color: rgba(255, 255, 255, .55); }
.smtprs-studio[data-preview-theme="light"] .smtprs-live-screen-stage .smtprs-signal summary:hover { background: rgba(25, 30, 20, .035); }
.smtprs-studio[data-preview-theme="light"] .smtprs-demo-analysis-steps li.is-complete .smtprs-demo-analysis-marker { color: var(--smtprs-green); border-color: var(--smtprs-green); }
.smtprs-studio[data-preview-theme="light"] .smtprs-action-button:focus-visible { outline-color: var(--accent-bright); }
@keyframes smtprs-result-reveal { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 1050px) {
    .smtprs-preview-form.site-form { padding: 26px; }
    .smtprs-preview-input { padding-right: 20px; }
    .smtprs-preview-results { padding-left: 20px; }
    .smtprs-verdict { grid-template-columns: 36px minmax(0, 1fr); }
    .smtprs-verdict-icon { width: 36px; height: 36px; }
    .smtprs-verdict-band { grid-column: 2; flex-direction: row; flex-wrap: wrap; max-width: none; padding: 0; border: 0; gap: 8px; }
    .smtprs-verdict-band small { display: none; }
}
@media (max-width: 820px) {
    .smtprs-preview-form.site-form { grid-template-columns: minmax(0, 1fr); padding: 28px; }
    .smtprs-preview-input { padding: 0 0 28px; }
    .smtprs-preview-results { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .smtprs-chrome-status time { display: none; }
    .smtprs-chrome-brand strong { margin-left: 8px; }
    .smtprs-verdict { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .smtprs-verdict-band { grid-column: auto; flex-direction: column; padding-left: 14px; border-left: 1px solid var(--line); max-width: 100px; }
    .smtprs-verdict-band small { display: block; }
}
@media (max-width: 900px) {
    .smtprs-live-screen { border-radius: 16px; }
}
@media (max-width: 640px) {
    .smtprs-live-screen-stage { background-size: 30px 30px, 30px 30px, auto; }
}
@media (max-width: 540px) {
    .product-saas-hero--smtprs { padding-top: 54px; }
    .smtprs-live-hero-heading h1 { margin-top: 20px; font-size: clamp(38px, 12vw, 52px); line-height: 1; text-wrap: initial; }
    .smtprs-live-screen { margin-top: 34px; border-radius: 16px; scroll-margin-top: 86px; }
    .smtprs-live-screen-chrome { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .smtprs-chrome-brand { font-size: 11px; gap: 8px; }
    .smtprs-chrome-brand strong { margin-left: 5px; }
    .smtprs-chrome-status { font-size: 10px; gap: 12px; }
    .smtprs-chrome-status > * + * { padding-left: 12px; }
    .smtprs-preview-form.site-form { padding: 20px 16px; }
    .smtprs-preview-intro { font-size: 14px; }
    .smtprs-signal-grid { grid-template-columns: minmax(0, 1fr); }
    .smtprs-signal summary { min-height: 76px; }
    .smtprs-verdict { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 14px; }
    .smtprs-verdict-band { grid-column: 2; flex-direction: row; flex-wrap: wrap; max-width: none; padding: 0; border: 0; gap: 8px; }
    .smtprs-verdict-band small { display: none; }
    .smtprs-model-note { padding: 15px; gap: 12px; }
    .smtprs-results-body, .smtprs-ready, .smtprs-live-screen .smtprs-demo-analysis { min-height: 390px; }
    .smtprs-live-hero-support { margin-top: 34px; }
    .smtprs-live-hero-support .product-saas-lede { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .smtprs-live-screen::before { animation: none; }
    .smtprs-live-screen *, .smtprs-live-screen *::before, .smtprs-live-screen *::after { animation: none !important; transition: none !important; }
}

/* One submit control: a raised dark face joined to a slim gold pill.
   Existing data-state values continue to drive validation feedback and motion. */
#demo-score-form .smtprs-action-button {
    --action-disc-size: 96px;
    --action-bright: #f6bf3f;
    --action-green: #82c7a0;
    --action-amber: #f0a435;
    --action-light: #f5c85e;
    --action-halo: rgba(246,191,63,.26);
    --action-glyph: var(--action-light);
    --action-pill: linear-gradient(105deg, #f5a211, #ffcc43 45%, #f8e6a6);
    --action-rim: linear-gradient(145deg, #fff0ae, #ffc54a 35%, #a46312 67%, #f5bc38 85%, #ffe8a0);
    --action-pill-border: #fbd36d;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: var(--action-disc-size) minmax(0,1fr) 24px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--action-disc-size);
    padding: 0 22px 0 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #15110b;
    box-shadow: none;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    transform: none;
    overflow: visible;
}
#demo-score-form .smtprs-action-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 25%;
    bottom: 25%;
    left: calc(var(--action-disc-size) / 2);
    right: 0;
    border: 1px solid var(--action-pill-border);
    border-radius: 999px;
    pointer-events: none;
    background: var(--action-pill);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 16px var(--action-halo);
    transition: box-shadow .16s ease;
}
.smtprs-action-control {
    position: relative;
    display: grid;
    grid-template: minmax(0,1fr) / minmax(0,1fr);
    place-items: center;
    width: var(--action-disc-size);
    height: var(--action-disc-size);
    color: var(--action-light);
    transform-origin: center;
    transition: transform .12s ease, color .16s ease;
}
.smtprs-action-control > * { grid-area: 1 / 1; pointer-events: none; }
.smtprs-action-glow, .smtprs-action-halo, .smtprs-action-hover-halo {
    width: calc(var(--action-disc-size) + 12px);
    height: calc(var(--action-disc-size) + 12px);
    border-radius: 50%;
}
.smtprs-action-glow { opacity: .28; transition: opacity .18s ease; }
.smtprs-action-halo, .smtprs-action-hover-halo {
    display: block;
    background: radial-gradient(circle closest-side, transparent 68%, currentColor 83%, transparent 100%);
}
.smtprs-action-hover-halo { opacity: 0; transition: opacity .16s ease; }
.smtprs-action-bezel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--action-rim);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 0 16px var(--action-halo), 4px 3px 10px rgba(77,42,0,.24);
}
.smtprs-action-face {
    width: calc(100% - 7px);
    height: calc(100% - 7px);
    border: 1px solid #5b4628;
    border-radius: 50%;
    /* Dark-theme face; the warm light surface is defined below. */
    background: radial-gradient(ellipse at 45% 12%, #232426, #111315 58%, #0a0c0e);
    box-shadow: inset 0 2px 5px rgba(255,207,120,.09), inset 0 -4px 8px rgba(0,0,0,.6);
}
.smtprs-action-ring { width: calc(100% + 3px); height: calc(100% + 3px); display: none; overflow: visible; transform-origin: center; }
.smtprs-action-ripple { width: 100%; height: 100%; opacity: 0; overflow: visible; transform-origin: center; }
.smtprs-action-icon {
    position: relative;
    display: none;
    width: 37%;
    height: 37%;
    overflow: visible;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--action-glyph);
}
.smtprs-action-idle { display: block; }
/* Warm light surface retains the bezel and readable state-specific icons. */
.smtprs-studio[data-preview-theme="light"] #demo-score-form .smtprs-action-button {
    --action-glyph: #775012;
}
.smtprs-studio[data-preview-theme="light"] .smtprs-action-button .smtprs-action-face {
    background: #F7EBDA;
    border-color: #b88b43;
    box-shadow: inset 0 2px 4px rgba(255,255,255,.9), inset 0 -3px 7px rgba(139,94,24,.15);
}
.smtprs-studio[data-preview-theme="light"] .smtprs-action-button:not(:disabled):hover .smtprs-action-face {
    box-shadow: inset 0 2px 5px #fff8ee, inset 0 -3px 8px rgba(139,94,24,.2);
}
.smtprs-studio[data-preview-theme="light"] .smtprs-action-button:not(:disabled):active .smtprs-action-face {
    box-shadow: inset 0 2px 5px rgba(139,94,24,.22);
}
.smtprs-studio[data-preview-theme="light"] #demo-score-form .smtprs-action-button[data-state="success"] { --action-glyph: #196440; }
.smtprs-studio[data-preview-theme="light"] #demo-score-form .smtprs-action-button[data-state="warning"] { --action-glyph: #805000; }
.smtprs-studio[data-preview-theme="light"] #demo-score-form .smtprs-action-button[data-state="error"] { --action-glyph: #a12e3c; }
.smtprs-action-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.smtprs-action-label { min-width: 0; }
.smtprs-action-status { font-size: 11px; font-weight: 600; color: #655024; }
.smtprs-action-arrow { font-size: 25px; font-weight: 500; line-height: 1; transition: opacity .16s ease; }
#demo-score-form .smtprs-action-button:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 5px; }
@media (hover: hover) {
    #demo-score-form .smtprs-action-button:not(:disabled):hover::before {
        box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 22px var(--action-halo);
    }
    .smtprs-action-button:not(:disabled):hover .smtprs-action-control { transform: scale(1.015); }
    .smtprs-action-button:not(:disabled):hover .smtprs-action-hover-halo { opacity: .22; }
}
#demo-score-form .smtprs-action-button:not(:disabled):active::before { box-shadow: inset 0 2px 4px rgba(88,49,0,.2); }
.smtprs-action-button:not(:disabled):active .smtprs-action-control { transform: scale(.98); }
#demo-score-form .smtprs-action-button[data-state="running"] {
    cursor: wait;
    --action-pill: linear-gradient(105deg, #d68a13, #f8be34 40%, #f5dda0);
}
.smtprs-action-button[data-state="running"] .smtprs-action-glow { opacity: .4; }
.smtprs-action-button[data-state="running"] .smtprs-action-ring { display: block; animation: smtprs-action-orbit 1.2s linear infinite; }
.smtprs-action-button[data-state="running"] .smtprs-action-halo { animation: smtprs-action-breathe 2.4s linear infinite; }
.smtprs-action-button[data-state="running"] .smtprs-action-arrow { opacity: .35; }
#demo-score-form .smtprs-action-button[data-state="success"] {
    --action-light: var(--action-green);
    --action-halo: rgba(130,199,160,.26);
    --action-rim: linear-gradient(145deg, #d3f4df, #82c7a0 35%, #346c4c 67%, #aadabe);
}
#demo-score-form .smtprs-action-button[data-state="warning"] {
    --action-light: var(--action-amber);
    --action-halo: rgba(240,164,53,.3);
}
#demo-score-form .smtprs-action-button[data-state="error"] {
    --action-light: #ffafa4;
    --action-glyph: #ffb9ae;
    --action-halo: rgba(225,83,93,.32);
    --action-pill-border: #f4897d;
    --action-pill: linear-gradient(105deg, #a12e3c, #d94b53 48%, #ed766b);
    --action-rim: linear-gradient(145deg, #ffe3d6, #f58b7e 35%, #902c38 67%, #f79685);
    color: #fff;
}
.smtprs-action-button[data-state="error"] .smtprs-action-status { color: #ffe1db; }
.smtprs-action-button:is([data-state="success"], [data-state="warning"], [data-state="error"]) .smtprs-action-glow { opacity: .38; }
.smtprs-action-button:is([data-state="success"], [data-state="warning"], [data-state="error"]) .smtprs-action-idle { display: none; }
.smtprs-action-button[data-state="success"] .smtprs-action-check,
.smtprs-action-button:is([data-state="warning"], [data-state="error"]) .smtprs-action-caution { display: block; }
#demo-score-form .smtprs-action-button:disabled { opacity: 1; }
#demo-score-form .smtprs-action-button[data-state="idle"]:disabled { cursor: default; }
.smtprs-action-button[data-state="idle"]:disabled :is(.smtprs-action-control, .smtprs-action-text, .smtprs-action-arrow) { opacity: .4; }
@keyframes smtprs-action-orbit { to { transform: rotate(360deg); } }
@keyframes smtprs-action-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (max-width: 480px) {
    #demo-score-form .smtprs-action-button { --action-disc-size: 88px; grid-template-columns: var(--action-disc-size) minmax(0,1fr) 18px; padding-right: 14px; gap: 7px; font-size: 14px; }
    .smtprs-action-status { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #demo-score-form .smtprs-action-button,
    .smtprs-action-button *, .smtprs-action-button::before { animation: none !important; transition: none !important; }
    .smtprs-action-button:not(:disabled):is(:hover, :active) .smtprs-action-control { transform: none; }
    .smtprs-action-ripple { visibility: hidden; }
}

#demo-score-form .smtprs-action-button::after { content: none; }


/* F. CAREERS ASSESSMENTS — scoped migration from assessment v001.001.004. */
body.assessment-portal {
  color-scheme: light;
  --ink: #101318;
  --ink-soft: #1b2029;
  --slate-900: #202630;
  --slate-700: #4b5563;
  --slate-600: #5f6875;
  --slate-500: #737d8c;
  --slate-300: #cfd5dd;
  --slate-200: #dfe3e8;
  --slate-100: #eef1f4;
  --paper: #f5f6f8;
  --surface: #ffffff;
  --surface-muted: #f8f9fb;
  --line: #e1e5ea;
  --line-strong: #cfd5dc;
  --brand: #c57616;
  --brand-soft: #fff7e9;
  --brand-line: #ead1aa;
  --success: #176b46;
  --success-soft: #edf8f2;
  --danger: #a23535;
  --danger-soft: #fff3f3;
  --warning: #915b0b;
  --warning-soft: #fff8e8;
  --shadow-sm: 0 1px 2px rgba(16, 19, 24, .04), 0 7px 20px rgba(16, 19, 24, .035);
  --shadow-md: 0 1px 2px rgba(16, 19, 24, .05), 0 18px 50px rgba(16, 19, 24, .06);
  font-family: "Aptos", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.assessment-portal * { box-sizing: border-box; }
body.assessment-portal { min-height: 100%; background: var(--paper); }
body.assessment-portal { min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.assessment-portal button, body.assessment-portal input { font: inherit; }
body.assessment-portal a { color: inherit; }
body.assessment-portal [hidden] { display: none !important; }
body.assessment-portal :focus-visible { outline: 3px solid rgba(197, 118, 22, .24); outline-offset: 3px; }
body.assessment-portal .topbar {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}
body.assessment-portal .topbar-inner { width: min(100% - 48px, 1200px); min-height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body.assessment-portal .topbar-actions { display: flex; align-items: center; gap: 16px; }
body.assessment-portal .topbar-actions .theme-toggle { flex: 0 0 auto; }
body.assessment-portal .brand { min-width: 0; display: inline-flex; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; }
body.assessment-portal .brand-lockup { display: block; width: 166px; height: 46px; object-fit: contain; object-position: left center; }
body.assessment-portal .brand-rule { width: 1px; height: 25px; background: var(--line-strong); }
body.assessment-portal .brand-context { color: var(--slate-600); font-size: 13px; font-weight: 650; letter-spacing: -.005em; white-space: nowrap; }
body.assessment-portal .page-grid { min-height: calc(100vh - 76px); background: linear-gradient(180deg, #fafbfc 0, var(--paper) 250px); }
body.assessment-portal .container { width: min(100% - 48px, 1200px); margin: auto; padding: 50px 0 74px; }
body.assessment-portal .center-page { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 48px 24px; }
/* Center the invitation entry in the space below the header. Padding and
   min-height let the page grow naturally on short/mobile viewports. */
body.assessment-portal main.center-page { align-content: center; align-items: center; padding: clamp(32px, 5vw, 64px) 24px; }
body.assessment-portal h1, body.assessment-portal h2, body.assessment-portal h3, body.assessment-portal p { overflow-wrap: anywhere; }
body.assessment-portal h1, body.assessment-portal h2, body.assessment-portal h3 { font-family: "Rubik", "Aptos", ui-sans-serif, system-ui, sans-serif; }
body.assessment-portal h1 { margin: 0; color: var(--ink); font-size: clamp(34px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.04em; font-weight: 700; }
body.assessment-portal h2 { margin: 0; color: var(--ink); letter-spacing: -.022em; }
body.assessment-portal .eyebrow { margin: 0 0 11px; color: var(--slate-600); font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
body.assessment-portal .lede { max-width: 720px; margin: 15px 0 0; color: var(--slate-600); font-size: 17px; line-height: 1.65; }
body.assessment-portal .muted { color: var(--slate-600); }
body.assessment-portal .small { font-size: 13px; line-height: 1.58; }
body.assessment-portal .section-code { display: inline-flex; align-items: center; gap: 9px; color: var(--slate-500); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body.assessment-portal .section-code::before { width: 18px; height: 1px; background: var(--brand); content: ""; }
body.assessment-portal .pill { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 5px 10px; border: 1px solid #b8dcc8; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: 11px; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }
body.assessment-portal .pill::before { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; transform-origin: center; animation: assessment-status-pulse 1.65s ease-in-out infinite; }
body.assessment-portal .pill.slate { border-color: var(--line-strong); background: #f3f5f7; color: #5b6470; }
body.assessment-portal .pill.amber { border-color: #ead1a2; background: var(--warning-soft); color: var(--warning); }
body.assessment-portal .pill.category { border-color: #d8dde4; background: #f5f7f9; color: #424b57; }
body.assessment-portal .pill.dark { border-color: #d5dae1; background: #fff; color: #374151; box-shadow: 0 1px 2px rgba(16, 19, 24, .03); }
body.assessment-portal .pill.dark::before { color: var(--success); }
body.assessment-portal .card { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-md); }
body.assessment-portal .card-accent { height: 3px; background: linear-gradient(90deg, #202630 0 72%, var(--brand) 72% 100%); }
body.assessment-portal .card-body { padding: clamp(28px, 4vw, 46px); }
body.assessment-portal .side-card { padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); }
body.assessment-portal .side-card.dark { border-color: var(--ink-soft); background: var(--ink-soft); color: #fff; box-shadow: 0 12px 32px rgba(16, 19, 24, .12); }
body.assessment-portal .side-card.dark h2 { color: #fff; }
body.assessment-portal .layout { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(292px, .52fr); gap: 24px; align-items: start; }
body.assessment-portal .stack { display: grid; gap: 16px; }
body.assessment-portal .assessment-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
body.assessment-portal .assessment-statuses { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.assessment-portal .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 32px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); }
body.assessment-portal .fact { min-height: 89px; padding: 17px 18px; border-left: 1px solid var(--line); }
body.assessment-portal .fact:first-child { border-left: 0; }
body.assessment-portal .fact-label { margin: 0; color: var(--slate-500); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
body.assessment-portal .fact-value { margin: 8px 0 0; color: var(--slate-900); font-size: 14px; font-weight: 700; }
body.assessment-portal .notice { padding: 22px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
body.assessment-portal .notice-head { display: flex; align-items: flex-start; gap: 14px; }
body.assessment-portal .notice-index { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--slate-700); font: 700 11px/1 "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace; }
body.assessment-portal .notice h2 { font-size: 18px; font-weight: 700; }
body.assessment-portal .notice p { margin: 6px 0 0; color: var(--slate-600); font-size: 14px; line-height: 1.62; }
body.assessment-portal .start-note { margin: 11px 0 0 48px !important; color: var(--slate-500) !important; font-size: 12px !important; }
body.assessment-portal .error { padding: 14px 16px; border: 1px solid #edcaca; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 13px; line-height: 1.55; }
body.assessment-portal .success { padding: 14px 16px; border: 1px solid #b7dec8; border-radius: 8px; background: var(--success-soft); color: #15583a; font-size: 13px; line-height: 1.55; }
body.assessment-portal .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--ink); border-radius: 7px; background: var(--ink); color: #fff; cursor: pointer; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 1px 2px rgba(16, 19, 24, .12); transition: background .15s, border-color .15s, transform .08s, box-shadow .15s; }
body.assessment-portal .button:hover { background: #272d37; border-color: #272d37; box-shadow: 0 5px 14px rgba(16, 19, 24, .12); }
body.assessment-portal .button:active { transform: translateY(1px); }
body.assessment-portal .button:disabled { cursor: not-allowed; opacity: .52; }
body.assessment-portal .button.secondary { border-color: var(--line-strong); background: #fff; color: var(--ink); box-shadow: none; }
body.assessment-portal .button.secondary:hover { border-color: #adb5bf; background: #f8f9fa; }
body.assessment-portal .button.small-button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
body.assessment-portal .button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
body.assessment-portal .start-button { margin: 18px 0 0 48px; }
body.assessment-portal .full-button { width: 100%; margin-top: 20px; }
body.assessment-portal .timer { position: relative; margin-top: 28px; padding: 26px; overflow: hidden; border: 1px solid #303640; border-radius: 9px; background: #171b22; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
body.assessment-portal .timer::after { position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--brand); content: ""; }
body.assessment-portal .timer-label { position: relative; z-index: 1; margin: 0; color: #c9d0d9; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.assessment-portal .timer-value { position: relative; z-index: 1; margin: 10px 0 0; color: #fff; font: 700 clamp(36px, 5vw, 54px)/1 "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace; letter-spacing: -.055em; }
body.assessment-portal .timer-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 15px; margin-top: 13px; color: #9ea7b3; font-size: 11px; }
body.assessment-portal .progress { position: relative; z-index: 1; height: 5px; margin-top: 22px; overflow: hidden; border-radius: 99px; background: #343b46; }
body.assessment-portal .progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width .3s linear; }
body.assessment-portal .action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
body.assessment-portal .action-box { display: block; min-height: 136px; padding: 19px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: inherit; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(16,19,24,.02); transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
body.assessment-portal .action-box:hover { border-color: #b4bbc5; background: #fcfcfd; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16,19,24,.05); }
body.assessment-portal .action-icon { width: 32px; height: 32px; display: grid !important; place-items: center; margin: 0 !important; border-radius: 7px; background: #eef1f4; color: #27303b !important; font-size: 17px !important; font-weight: 750; }
body.assessment-portal .action-box strong { display: block; margin-top: 14px; font-size: 14px; }
body.assessment-portal .action-box > span:last-of-type { display: block; margin-top: 5px; color: var(--slate-600); font-size: 12px; line-height: 1.48; }
body.assessment-portal .side-title { font-size: 16px; font-weight: 700; }
body.assessment-portal .side-kicker { margin: 0 0 8px; color: var(--slate-500); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
body.assessment-portal .guidance-list { margin: 18px 0 0; padding: 0; list-style: none; }
body.assessment-portal .guidance-list li { position: relative; padding: 13px 0 13px 23px; border-top: 1px solid var(--line); color: var(--slate-600); font-size: 13px; line-height: 1.55; }
body.assessment-portal .guidance-list li:first-child { padding-top: 0; border-top: 0; }
body.assessment-portal .guidance-list li::before { position: absolute; top: 18px; left: 1px; width: 7px; height: 7px; border: 1.5px solid var(--slate-500); border-radius: 50%; content: ""; }
body.assessment-portal .guidance-list li:first-child::before { top: 5px; }
body.assessment-portal .history { margin: 16px 0 0; padding: 0; list-style: none; }
body.assessment-portal .history li { padding: 14px 0; border-top: 1px solid var(--line); }
body.assessment-portal .history li:first-child { border-top: 0; padding-top: 0; }
body.assessment-portal .filename { margin: 0; font-size: 13px; font-weight: 700; }
body.assessment-portal .metadata { margin: 4px 0 0; color: var(--slate-500); font-size: 11px; }
body.assessment-portal .protocol-label { color: #aeb7c3; }
body.assessment-portal .protocol-copy { margin-bottom: 0; color: #d7dce3; }
body.assessment-portal .assurance-row { display: flex; align-items: flex-start; gap: 12px; }
body.assessment-portal .assurance-icon { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #3f4752; border-radius: 7px; color: #d9dee5; font-size: 13px; }
body.assessment-portal .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 24px; }
body.assessment-portal .metric { padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow-sm); }
body.assessment-portal .metric-label { margin: 0; color: var(--slate-600); font-size: 12px; }
body.assessment-portal .metric-value { margin: 8px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
body.assessment-portal .admin-title { font-size: clamp(34px, 4vw, 46px); }
body.assessment-portal .admin-layout { display: grid; grid-template-columns: minmax(290px, .62fr) minmax(0, 1.55fr); gap: 24px; align-items: start; }
body.assessment-portal .panel-title { font-size: 18px; }
body.assessment-portal .field { display: grid; gap: 7px; margin-top: 17px; }
body.assessment-portal .field label { color: #424b57; font-size: 12px; font-weight: 700; }
body.assessment-portal .field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
body.assessment-portal .field input:focus { border-color: #9ca5b0; box-shadow: 0 0 0 3px rgba(16, 19, 24, .06); }
body.assessment-portal .invite-list { margin: 0; padding: 0; list-style: none; }
body.assessment-portal .invite { padding: 20px 24px; border-top: 1px solid var(--line); }
body.assessment-portal .invite:first-child { border-top: 0; }
body.assessment-portal .invite-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
body.assessment-portal .invite-name { margin: 0; font-weight: 700; }
body.assessment-portal .invite-email { margin: 4px 0 0; color: var(--slate-600); font-size: 12px; }
body.assessment-portal .invite-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: var(--slate-500); font: 11px/1.45 "FiraCode iScript", Consolas, "Liberation Mono", Menlo, monospace; }
body.assessment-portal .created-link { margin-top: 18px; }
body.assessment-portal .created-link code { display: block; margin: 10px 0; padding: 10px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; }
body.assessment-portal .admin-error { margin-top: 16px; }
body.assessment-portal .timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 20px; }
body.assessment-portal .admin-loading { min-height: 220px; display: grid; place-items: center; }
body.assessment-portal .admin-empty { padding: 0 24px 28px; }
body.assessment-portal .empty-panel { --v005-main-h1-size: clamp(32px, 5vw, 46px); position: relative; width: min(100%, 700px); padding: 48px; text-align: left; }
body.assessment-portal .empty-panel::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--ink) 0 84%, var(--brand) 84%); content: ""; }
body.assessment-portal .entry-mark { display: block; width: 52px; height: 52px; margin-bottom: 30px; object-fit: contain; }
body.assessment-portal .empty-panel h1 { max-width: 560px; font-size: clamp(32px, 5vw, 46px); }
body.assessment-portal .empty-panel > p { max-width: 570px; margin: 16px 0 0; color: var(--slate-600); font-size: 15px; line-height: 1.7; }
body.assessment-portal .invitation-form { margin-top: 28px; }
body.assessment-portal .invitation-form .field { margin-top: 0; }
body.assessment-portal .invitation-form label { font-size: 14px; }
body.assessment-portal .invitation-form input { min-width: 0; font-size: 16px; }
body.assessment-portal .invitation-help { margin: 10px 0 0; color: var(--slate-600); font-size: 14px; line-height: 1.5; }
body.assessment-portal .invitation-form .error { margin: 14px 0 0; }
body.assessment-portal .invitation-form .button { width: 100%; margin-top: 16px; }
body.assessment-portal .entry-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
body.assessment-portal .entry-meta span { min-height: 38px; padding: 0 14px; border-left: 1px solid var(--line); color: var(--slate-600); font-size: 11px; font-weight: 650; line-height: 1.45; }
body.assessment-portal .entry-meta span:first-child { padding-left: 0; border-left: 0; }
body.assessment-portal .footer-note { margin-top: 24px; color: #8a929e; font-size: 11px; letter-spacing: .015em; text-align: center; }
body.assessment-portal .hr-note { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--slate-500); font-size: 11px; }
body.assessment-portal .hr-note::before { width: 6px; height: 6px; border-radius: 50%; background: var(--success); content: ""; transform-origin: center; animation: assessment-status-pulse 1.65s ease-in-out infinite -.35s; }
body.assessment-portal .spinner { width: 28px; height: 28px; border: 3px solid #e0e4e9; border-top-color: #596270; border-radius: 50%; animation: assessment-spin .8s linear infinite; }
@keyframes assessment-status-pulse {
  0%, 100% { opacity: .48; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.22); }
}
@keyframes assessment-spin { to { transform: rotate(360deg); } }
body.assessment-portal dialog { width: min(calc(100% - 32px), 470px); padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); box-shadow: 0 34px 100px rgba(0, 0, 0, .24); }
body.assessment-portal dialog::backdrop { background: rgba(16, 19, 24, .62); backdrop-filter: blur(3px); }
body.assessment-portal .dialog-body { padding: 27px; }
body.assessment-portal .dialog-body h2 { font-size: 22px; }
body.assessment-portal .dialog-body p { color: var(--slate-600); line-height: 1.65; }
body.assessment-portal .dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 17px 25px; border-top: 1px solid var(--line); background: #f6f7f8; }
@media (max-width: 900px) {
body.assessment-portal .layout, body.assessment-portal .admin-layout { grid-template-columns: 1fr; }
body.assessment-portal .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.assessment-portal .metric-grid { grid-template-columns: repeat(3, 1fr); }


}
@media (max-width: 700px) {
body.assessment-portal .topbar-inner, body.assessment-portal .container { width: min(100% - 30px, 1200px); }
body.assessment-portal .topbar-inner { min-height: 70px; }
body.assessment-portal .page-grid, body.assessment-portal .center-page { min-height: calc(100vh - 70px); }
body.assessment-portal .brand-lockup { width: 150px; height: 42px; }
body.assessment-portal .brand-rule, body.assessment-portal .brand-context { display: none; }
body.assessment-portal .container { padding-top: 32px; }
body.assessment-portal .assessment-topline { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
body.assessment-portal .facts, body.assessment-portal .metric-grid, body.assessment-portal .entry-meta { grid-template-columns: 1fr; }
body.assessment-portal .fact { min-height: auto; border-top: 1px solid var(--line); border-left: 0; }
body.assessment-portal .fact:first-child { border-top: 0; }
body.assessment-portal .entry-meta span { min-height: auto; padding: 10px 0; border-top: 1px solid var(--line); border-left: 0; }
body.assessment-portal .entry-meta span:first-child { padding-top: 0; border-top: 0; }
body.assessment-portal .action-grid, body.assessment-portal .stack { grid-template-columns: 1fr; }
body.assessment-portal .action-box { min-height: 124px; }
body.assessment-portal .timer { padding: 22px; }
body.assessment-portal .timer-meta, body.assessment-portal .invite-head, body.assessment-portal .timeline-head { align-items: flex-start; flex-direction: column; }
body.assessment-portal .card-body { padding: 24px; }
body.assessment-portal .empty-panel { padding: 34px 28px 36px; }
body.assessment-portal main.center-page { padding: 32px 15px; }
body.assessment-portal .start-button { margin-left: 0; width: 100%; }
body.assessment-portal .start-note { margin-left: 0 !important; }


}
@media (max-width: 440px) {
body.assessment-portal .topbar .pill { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
body.assessment-portal .brand-lockup { width: 144px; }
body.assessment-portal .timer-value { font-size: 32px; }
body.assessment-portal .dialog-actions { flex-direction: column-reverse; }
body.assessment-portal .dialog-actions .button { width: 100%; }


}
@media (prefers-reduced-motion: reduce) {
body.assessment-portal *, body.assessment-portal *::before, body.assessment-portal *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }


}


body.assessment-portal { font-size: 16px; line-height: 1.5; }
body.assessment-portal .action-box[role="button"]:focus-visible { outline: 3px solid var(--brand); }
/* Keep the portal's compact working layout within the main site's type caps. */
body.assessment-portal { --v005-main-h1-size: clamp(34px, 4.4vw, 50px); }
body.assessment-portal main .side-title { font-size: 16px !important; }
body.assessment-portal main .notice h2 { font-size: 18px !important; }
body.assessment-portal main .notice h2 + p { font-size: 14px !important; }
body.assessment-portal main .dialog-body h2 { font-size: 22px !important; }
body.assessment-portal main .lede { font-size: 17px !important; }
/* The portal has its own header instead of the public .site-header. */
body.assessment-portal .topbar { flex-shrink: 0; transition: opacity var(--page-transition-in-ms) ease-out, transform var(--page-transition-in-ms) ease-out; }
html.site-is-arriving body.assessment-portal .topbar { opacity: 0; transform: translateY(4px); }
html.site-is-leaving body.assessment-portal .topbar { opacity: 0; transform: translateY(3px); transition-duration: var(--page-transition-out-ms); }
html.site-is-ready body.assessment-portal .topbar { opacity: 1; transform: translateY(0); }
/* Candidate themes reuse the shared theme controller and sun/moon switch.
   Keep every override inside the portal so public and admin pages are unchanged. */
html[data-theme="dark"] body.assessment-portal {
  color-scheme: dark;
  --ink: #f2f4f7;
  --slate-900: #e4e8ef;
  --slate-700: #c1c9d5;
  --slate-600: #b3bdcb;
  --slate-500: #9aa7b9;
  --slate-300: #536074;
  --slate-200: #354153;
  --slate-100: #283242;
  --paper: #101318;
  --surface: #191f28;
  --surface-muted: #202834;
  --line: #333e4e;
  --line-strong: #4b596d;
  --brand: #f0a530;
  --brand-soft: #302616;
  --brand-line: #785626;
  --success: #80d9ae;
  --success-soft: #142d24;
  --danger: #ffb5b5;
  --danger-soft: #351f25;
  --warning: #f6cd80;
  --warning-soft: #32291a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2), 0 7px 20px rgba(0, 0, 0, .12);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .25), 0 18px 50px rgba(0, 0, 0, .2);
}
html[data-theme="dark"] body.assessment-portal .topbar { background: var(--surface); }
html[data-theme="dark"] body.assessment-portal .page-grid { background: linear-gradient(180deg, #151b24 0, var(--paper) 250px); }
html[data-theme="dark"] body.assessment-portal .pill { border-color: #365b49; }
html[data-theme="dark"] body.assessment-portal .pill.amber { border-color: var(--brand-line); }
html[data-theme="dark"] body.assessment-portal .pill.slate,
html[data-theme="dark"] body.assessment-portal .pill.category,
html[data-theme="dark"] body.assessment-portal .pill.dark { border-color: var(--line-strong); background: var(--surface-muted); color: var(--slate-700); }
html[data-theme="dark"] body.assessment-portal .notice,
html[data-theme="dark"] body.assessment-portal .dialog-actions { background: var(--surface-muted); }
html[data-theme="dark"] body.assessment-portal .notice-index,
html[data-theme="dark"] body.assessment-portal .action-box,
html[data-theme="dark"] body.assessment-portal .field input,
html[data-theme="dark"] body.assessment-portal dialog { background: var(--surface); }
html[data-theme="dark"] body.assessment-portal .field label { color: var(--slate-700); }
html[data-theme="dark"] body.assessment-portal .field input::placeholder { color: var(--slate-500); opacity: 1; }
html[data-theme="dark"] body.assessment-portal .field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(240, 165, 48, .15); }
html[data-theme="dark"] body.assessment-portal :focus-visible { outline-color: var(--brand); }
html[data-theme="dark"] body.assessment-portal .button { border-color: var(--brand); background: var(--brand); color: #101318; }
html[data-theme="dark"] body.assessment-portal .button:hover { border-color: #ffbf59; background: #ffbf59; }
html[data-theme="dark"] body.assessment-portal .button.secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] body.assessment-portal .button.secondary:hover,
html[data-theme="dark"] body.assessment-portal .action-box:hover { border-color: var(--brand-line); background: var(--surface-muted); }
html[data-theme="dark"] body.assessment-portal .action-icon { background: var(--surface-muted); color: var(--brand) !important; }
html[data-theme="dark"] body.assessment-portal .error { border-color: #75424c; }
html[data-theme="dark"] body.assessment-portal .success { border-color: #365b49; color: var(--success); }
html[data-theme="dark"] body.assessment-portal .footer-note { color: var(--slate-500); }
html[data-theme="dark"] body.assessment-portal .spinner { border-color: var(--line-strong); border-top-color: var(--brand); }
@media (max-width: 560px) {
  body.assessment-portal .topbar-inner { flex-wrap: wrap; gap: 8px; padding: 12px 0; }
  body.assessment-portal .topbar-actions { width: 100%; justify-content: space-between; gap: 12px; }
  body.assessment-portal .page-grid, body.assessment-portal .center-page { min-height: calc(100vh - 114px); }
}
@media (prefers-reduced-motion: reduce) {
  body.assessment-portal .topbar { transition: none; }
}

/* smtpRS Web Studio — public-preview presentation derived from Desktop Studio.
   Scoped to this workspace; marketing pages and the API transport are unchanged. */
.product-saas-page main .container.smtprs-live-hero { width: min(1460px, calc(100% - 40px)); max-width: none; }
.smtprs-live-screen.smtprs-studio { --v005-main-h2-size: clamp(26px, 2.5vw, 34px); --v005-heading-lede-size: 14px; max-width: 1400px; font-family: 'Segoe UI', Aptos, Arial, sans-serif; }
.product-saas-page main .smtprs-studio :is(h2, h3, h4) { font-family: inherit; }
.smtprs-studio::before { content: none; }
.smtprs-studio .smtprs-live-screen-chrome { box-shadow: none; }
.smtprs-studio .smtprs-chrome-brand { gap: 8px; white-space: nowrap; }
.smtprs-studio .smtprs-studio-wordmark { display: inline-grid; place-items: center start; width: 164px; height: 24px; margin-left: 6px; flex: 0 0 auto; }
.smtprs-studio-wordmark img { display: block; grid-area: 1 / 1; width: 164px; height: auto; max-height: 24px; object-fit: contain; object-position: left center; pointer-events: none; }
.smtprs-studio-wordmark .smtprs-studio-wordmark-light { display: none; }
.smtprs-studio[data-preview-theme='light'] .smtprs-studio-wordmark-dark { display: none; }
.smtprs-studio[data-preview-theme='light'] .smtprs-studio-wordmark-light { display: block; }
.smtprs-studio .smtprs-studio-beta { margin-left: 8px; color: var(--muted); font-size: 10px; }
.smtprs-studio .smtprs-chrome-status { font-size: 11px; }
.smtprs-studio .smtprs-chrome-status i { transform: translateY(-1px); }
.smtprs-studio .smtprs-live-screen-stage { display: grid; grid-template-columns: 244px minmax(0, 1fr); height: clamp(700px, 62vw, 848px); }
.smtprs-studio svg:not([class*='smtprs-action-']) { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.smtprs-studio button { font-family: inherit; }
.smtprs-studio button:disabled { cursor: not-allowed; }
.smtprs-studio-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 16px 14px 0; border-right: 1px solid var(--line); background: linear-gradient(150deg, var(--control-bg), transparent 70%); }
.smtprs-studio-new { display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; width: 100%; min-height: 38px; margin: 0 0 20px; border: 1px solid var(--accent-line); border-radius: 9px; background: linear-gradient(140deg, var(--accent-soft), var(--control-bg)); color: var(--accent-bright); font-size: 12px; font-weight: 750; cursor: pointer; }
.smtprs-studio-new:hover:not(:disabled) { border-color: var(--accent-bright); background: var(--accent-soft); }
.smtprs-studio .smtprs-studio-section-label { margin: 0 8px 8px; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .1em; }
.smtprs-studio-nav { display: grid; gap: 3px; margin-bottom: 22px; }
.smtprs-studio-nav button { position: relative; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 9px 10px; border: 0; background: transparent; color: var(--muted); text-align: left; font-size: 13px; font-weight: 650; }
.smtprs-studio-nav button.is-active { color: var(--accent-bright); background: linear-gradient(90deg, var(--accent-soft), transparent); cursor: pointer; }
.smtprs-studio-nav button.is-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent-bright); }
.smtprs-studio-nav button:disabled { opacity: .42; }
.smtprs-studio-lock { margin-left: auto; font-size: 15px; }
.smtprs-studio-profiles { display: grid; gap: 4px; margin: 0 4px; }
.smtprs-studio-profiles button { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--control-bg); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.4; }
.smtprs-studio-profiles button:disabled { opacity: .45; }
.smtprs-studio-profiles .is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-bright); cursor: pointer; }
.smtprs-studio .smtprs-studio-free-note { margin: 9px 8px 18px; font-size: 9px; color: var(--muted); line-height: 1.5; }
.smtprs-studio-recent { min-height: 38px; max-height: 260px; flex-shrink: 0; }
.smtprs-studio-recent > p { margin: 6px 8px; color: var(--muted); font-size: 11px; }
.smtprs-studio-recent button { display: grid; gap: 4px; width: 100%; padding: 10px; margin: 0 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--control-bg); color: var(--text); text-align: left; cursor: pointer; }
.smtprs-studio-recent button:hover:not(:disabled) { border-color: var(--accent-line); }
.smtprs-studio-recent button:disabled { opacity: .6; }
.smtprs-studio-recent strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.smtprs-studio-recent span, .smtprs-studio-recent small { font-size: 10px; line-height: 1.5; }
.smtprs-studio-recent small { color: var(--muted); }
.smtprs-studio-side-bottom { margin-top: auto; padding-top: 28px; }
.smtprs-studio-theme { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 7px 22px; padding: 0; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent-bright); background: radial-gradient(ellipse at 30% 20%, var(--accent-soft), var(--bg)); box-shadow: inset 0 0 0 3px var(--accent-soft); cursor: pointer; }
.smtprs-studio-theme:hover { border-color: var(--accent-bright); }
.smtprs-studio-theme svg { width: 19px; height: 19px; }
.studio-theme-sun { display: none; }
.smtprs-studio[data-preview-theme='light'] .studio-theme-sun { display: block; }
.smtprs-studio[data-preview-theme='light'] .studio-theme-moon { display: none; }
.smtprs-studio[data-preview-theme='light'] .smtprs-studio-theme { background: linear-gradient(145deg, #ffe8ad, #ffc24a); }
.smtprs-studio-session { display: flex; justify-content: space-between; gap: 6px; padding: 17px 9px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.smtprs-studio-session strong { color: var(--text-soft); font-weight: 600; }
.smtprs-studio-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.smtprs-studio-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-height: 52px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.smtprs-studio-metadata { display: flex; flex-wrap: wrap; gap: 6px; }
.smtprs-studio-metadata > span { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 6px; background: var(--control-bg); color: var(--muted); font-size: 8px; line-height: 1.5; white-space: nowrap; }
.smtprs-studio-metadata strong { color: var(--text-soft); font-weight: 650; }
.smtprs-studio-utilities { display: inline-flex; margin-left: auto; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--control-bg); }
.smtprs-studio-utilities button { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 5px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms; }
.smtprs-studio-utilities svg { width: 13px; height: 13px; }
.smtprs-studio-utilities button + button::before { content: ''; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.smtprs-studio-utilities button:is(:hover, :focus-visible, [aria-pressed='true']) { color: var(--accent-bright); border-color: var(--accent-line); background: var(--accent-soft); }
.smtprs-studio-utilities button[aria-pressed='true'] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-bright) 7%, transparent); }
.smtprs-studio-content { position: relative; min-width: 0; min-height: 0; }
.smtprs-studio-scroll { height: 100%; min-width: 0; outline-offset: -3px; }
.smtprs-studio .smtprs-preview-form.site-form { min-height: 100%; padding: 24px 28px 32px; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
.smtprs-studio .smtprs-preview-input { padding-right: 28px; }
.smtprs-studio .smtprs-preview-results { padding-left: 28px; padding-top: 0; border-top: 0; }
.product-saas-page main .smtprs-studio .smtprs-preview-input h2 { margin: 0; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.15; font-weight: 750; letter-spacing: -.045em; }
.smtprs-studio .smtprs-preview-intro { margin: 14px 0 30px; font-size: 14px; line-height: 1.8; }
.smtprs-studio .smtprs-email-field > span:first-child { font-weight: 600; font-size: 13px; }
.smtprs-studio .smtprs-email-control input { font-size: 15px; background: color-mix(in srgb, var(--bg) 65%, var(--bg-soft)); }
.smtprs-studio .smtprs-email-control input[aria-invalid="true"] {
  border-color: var(--smtprs-red);
  outline: 2px solid var(--smtprs-red);
  outline-offset: 3px;
}
.smtprs-studio .smtprs-verification-row { margin-top: 16px; }
.smtprs-studio .smtprs-preview-status { display: table; min-height: 0; max-width: 100%; margin: 8px 0 14px; padding: 5px 9px; border: 1px solid var(--accent-line); border-radius: 6px; background: var(--accent-soft); color: var(--text-soft); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.smtprs-studio .smtprs-preview-status::before { content: '●'; margin-right: 7px; color: var(--accent-bright); font-size: 8px; }
.smtprs-studio .smtprs-preview-status:empty { visibility: hidden; }
.smtprs-studio .smtprs-preview-status.is-success { border-color: color-mix(in srgb, var(--smtprs-green) 30%, transparent); background: color-mix(in srgb, var(--smtprs-green) 5%, transparent); }
.smtprs-studio .smtprs-preview-status.is-success::before { color: var(--smtprs-green); }
.smtprs-studio .smtprs-preview-status.is-error { border-color: color-mix(in srgb, var(--smtprs-red) 35%, transparent); background: color-mix(in srgb, var(--smtprs-red) 5%, transparent); }
.smtprs-studio .smtprs-preview-status.is-error::before { color: var(--smtprs-red); }
.smtprs-studio-note-wrap { padding-top: 16px; border-top: 1px solid var(--line); }
.smtprs-studio .smtprs-model-note { padding: 16px; gap: 12px; align-items: flex-start; }
.smtprs-studio .smtprs-model-note h3 { font-size: 13px; line-height: 1.5; }
.smtprs-studio .smtprs-model-note p { font-size: 11px; line-height: 1.7; }
.smtprs-studio .smtprs-results-heading { margin-bottom: 10px; }
.smtprs-studio .smtprs-results-heading h3 { font-size: 10px; }
.smtprs-studio .smtprs-results-heading > span { font-size: 9px; }
.smtprs-studio-coverage { margin-bottom: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, var(--control-bg), transparent); }
.smtprs-studio-coverage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.smtprs-studio .smtprs-studio-coverage-head h4 { margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.smtprs-studio-coverage-head > span { color: var(--muted); font-size: 8px; text-align: right; }
.smtprs-studio-coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.smtprs-studio-coverage-grid button { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 54px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 9px; background: var(--control-bg); color: var(--text); text-align: left; cursor: pointer; }
.smtprs-studio-coverage-grid button:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.smtprs-studio-coverage-grid button > span:last-child { min-width: 0; }
.smtprs-studio-coverage-grid strong { display: block; margin-bottom: 2px; font-size: 9px; line-height: 1.4; font-weight: 650; }
.smtprs-studio-coverage-grid small { display: block; color: var(--muted); font-size: 8px; line-height: 1.5; }
.smtprs-studio-state { display: grid; place-items: center; flex: 0 0 19px; height: 19px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; line-height: 1; }
.smtprs-studio .tone-good { color: var(--smtprs-green); }
.smtprs-studio .tone-bad { color: var(--smtprs-red); }
.smtprs-studio .tone-caution { color: var(--accent-bright); }
.smtprs-studio .tone-unknown, .smtprs-studio .tone-muted { color: var(--muted); }
.smtprs-studio .smtprs-results-body { flex: initial; min-height: 0; }
.smtprs-studio .smtprs-ready { min-height: 365px; padding: 24px; }
.smtprs-studio .smtprs-ready h3 { font-size: 22px; font-weight: 750; }
.smtprs-studio .smtprs-ready p { font-size: 13px; }
.smtprs-studio .smtprs-studio-verdict { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; padding: 20px; gap: 16px; }
.smtprs-studio .smtprs-verdict-icon { width: 38px; height: 38px; background: transparent; color: var(--accent-bright); }
.smtprs-studio .risk-low .smtprs-verdict-icon { color: var(--smtprs-green); }
.smtprs-studio .risk-high .smtprs-verdict-icon { color: var(--smtprs-red); }
.smtprs-studio .smtprs-verdict h3 { margin-bottom: 5px; font-size: 20px; font-weight: 750; }
.smtprs-studio .smtprs-studio-result-email { font-size: 11px; overflow-wrap: anywhere; }
.smtprs-studio-risk-label { display: grid; gap: 3px; text-align: right; }
.smtprs-studio-risk-label small { font-size: 9px; color: var(--muted); }
.smtprs-studio-risk-label strong { font-size: 11px; }
.smtprs-studio-result-copy { grid-column: 1 / -1; padding-top: 13px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.smtprs-studio .smtprs-studio-result-copy p { margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; }
.smtprs-studio .smtprs-studio-result-copy p:last-child { color: var(--muted); }
.smtprs-studio-run-details { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.smtprs-studio .smtprs-studio-run-details h4 { margin: 0 0 6px; color: var(--muted); font-size: 10px; font-weight: 650; }
.smtprs-studio-run-details dl { margin: 0; }
.smtprs-studio-run-details dl > div { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 10px; line-height: 1.5; }
.smtprs-studio-run-details dt { font-weight: 650; }
.smtprs-studio-run-details dd { margin: 0; overflow-wrap: anywhere; }
.smtprs-studio-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.smtprs-studio-result-actions > *, .smtprs-studio-settings-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 36px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--control-bg); font-size: 12px; text-decoration: none; cursor: pointer; }
.smtprs-studio-result-actions > *:hover { border-color: var(--accent-line); color: var(--accent-bright); }
.smtprs-studio-drawer { position: absolute; z-index: 5; inset: 0 auto 0 0; display: flex; flex-direction: column; width: min(360px, 100%); min-height: 0; border-right: 1px solid var(--line); background: var(--bg); box-shadow: 12px 0 24px rgba(0,0,0,.18); opacity: 0; transform: translateX(-24px); transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 180ms ease; }
.smtprs-studio-drawer.is-open { transform: translateX(0); opacity: 1; }
.smtprs-studio-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 18px 16px; border-bottom: 1px solid var(--line); }
.smtprs-studio-drawer .smtprs-studio-section-label { margin: 0 0 5px; color: var(--accent-bright); }
.smtprs-studio .smtprs-studio-drawer-head h3 { margin: 0; color: var(--text); font-size: 18px; font-weight: 750; }
.smtprs-studio-drawer-head button { display: grid; place-items: center; width: 30px; height: 30px; padding: 6px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.smtprs-studio-drawer-head button:hover { border-color: var(--accent-line); color: var(--accent-bright); background: var(--accent-soft); }
.smtprs-studio-drawer-body { min-height: 0; padding: 18px; }
.smtprs-studio .smtprs-studio-panel-note { margin: 0 0 18px; color: var(--text-soft); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.smtprs-studio fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.smtprs-studio fieldset:disabled { opacity: .42; }
.smtprs-studio-settings { display: grid; gap: 16px; }
.smtprs-studio-settings label { display: grid; gap: 7px; color: var(--text-soft); font-size: 12px; }
.smtprs-studio-settings label > span { display: flex; justify-content: space-between; }
.smtprs-studio-settings :is(select, input:not([type='checkbox']):not([type='range'])) { width: 100%; min-width: 0; min-height: 36px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--control-bg); color: var(--text); font: inherit; }
.smtprs-studio-settings input[type='range'] { width: 100%; accent-color: var(--accent-bright); }
.smtprs-studio-settings .smtprs-studio-check { display: flex; align-items: center; gap: 8px; }
.smtprs-studio-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.smtprs-studio-settings-actions button:first-child { border-color: var(--accent-line); color: var(--accent-bright); background: var(--accent-soft); }
.smtprs-studio-options label { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); }
.smtprs-studio-options strong { display: block; margin-bottom: 5px; font-size: 12px; }
.smtprs-studio-options small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
.smtprs-studio-options input { appearance: none; width: 30px; height: 17px; flex: 0 0 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--control-bg); }
.smtprs-studio-options input::before { content: ''; display: block; width: 11px; height: 11px; margin: 2px; border-radius: 50%; background: var(--muted); }
.smtprs-studio-options + .smtprs-studio-panel-note { margin-top: 18px; }
.smtprs-studio-evidence { margin-bottom: 9px; border: 1px solid var(--line); border-radius: 8px; }
.smtprs-studio-evidence summary { display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer; list-style: none; font-size: 12px; }
.smtprs-studio-evidence summary::-webkit-details-marker { display: none; }
.smtprs-studio-evidence summary::after { content: '›'; margin-left: auto; }
.smtprs-studio-evidence[open] summary::after { transform: rotate(90deg); }
.smtprs-studio-evidence summary small { color: var(--muted); font-size: 10px; }
.smtprs-studio-evidence summary:hover { color: var(--accent-bright); background: var(--accent-soft); }
.smtprs-studio-evidence > div { border-top: 1px solid var(--line); padding: 12px; }
.smtprs-studio-evidence :is(p, li), .smtprs-studio-scope p { margin: 0 0 8px; color: var(--text-soft); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; user-select: text; }
.smtprs-studio-evidence ul { padding-left: 16px; margin: 8px 0 0; }
.smtprs-studio .smtprs-studio-scope h4 { margin: 18px 0 7px; color: var(--text); font-size: 12px; font-weight: 650; }
.smtprs-studio-scope { border-top: 1px solid var(--line); margin-top: 18px; }
.smtprs-studio :is(.smtprs-studio-side, .smtprs-studio-scroll, .smtprs-studio-drawer-body, .smtprs-studio-recent) { overflow-y: auto; overflow-x: hidden; scrollbar-width: auto; }
.smtprs-studio :is(.smtprs-studio-side, .smtprs-studio-scroll, .smtprs-studio-drawer-body, .smtprs-studio-recent)::-webkit-scrollbar { width: 8px; }
.smtprs-studio ::-webkit-scrollbar-track { background: transparent; }
.smtprs-studio ::-webkit-scrollbar-thumb { border: 2px solid transparent; background: transparent; background-clip: padding-box; border-radius: 999px; }
.smtprs-studio :is(.smtprs-studio-side, .smtprs-studio-scroll, .smtprs-studio-drawer-body, .smtprs-studio-recent):is(:hover, :focus-visible, .is-scrolling)::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.smtprs-studio ::-webkit-scrollbar-thumb:hover { background-color: var(--muted) !important; }
.smtprs-studio ::-webkit-scrollbar-button { display: none; }
.smtprs-studio .smtprs-studio-lock svg { width: 11px; height: 11px; }
.smtprs-studio[data-preview-theme='light'] { --code-bg: #f7f6f2; --bg: #f7f6f2; --bg-soft: #fff; --text: #20221f; --text-soft: #464940; --muted: #606459; --line: rgba(25,30,20,.18); --control-bg: rgba(25,30,20,.035); --accent-bright: #936000; --accent-line: rgba(147,96,0,.32); --accent-soft: rgba(147,96,0,.08); --smtprs-shell-line: rgba(25,30,20,.12); --smtprs-green: #16794b; --smtprs-red: #b3293d; color-scheme: light; }
.smtprs-studio[data-preview-theme='light'] .smtprs-studio-metadata > span { border-color: var(--accent-line); }
.smtprs-studio[data-preview-theme='light'] .smtprs-live-screen-chrome { background: linear-gradient(180deg, #faf9f6, #f4f2ed); }
.smtprs-studio[data-preview-theme='light'] .smtprs-email-control input { background: #fff; }
@media (max-width: 1200px) {
    .smtprs-studio .smtprs-live-screen-stage { grid-template-columns: 206px minmax(0,1fr); }
    .smtprs-studio .smtprs-preview-form.site-form { padding: 24px 20px; }
    .smtprs-studio .smtprs-preview-input { padding-right: 20px; }
    .smtprs-studio .smtprs-preview-results { padding-left: 20px; }
    .smtprs-studio-coverage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .smtprs-studio .smtprs-studio-verdict { grid-template-columns: 36px minmax(0,1fr); padding: 16px; gap: 12px; }
    .smtprs-studio-risk-label { display: none; }
}
@media (max-width: 1050px) {
    .smtprs-studio .smtprs-preview-form.site-form { grid-template-columns: minmax(0,1fr); align-content: start; }
    .smtprs-studio .smtprs-preview-input { padding: 0 0 24px; }
    .smtprs-studio .smtprs-preview-results { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .smtprs-studio-coverage-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .smtprs-studio .smtprs-studio-verdict { grid-template-columns: 38px minmax(0,1fr) auto; }
    .smtprs-studio-risk-label { display: grid; }
}
@media (max-width: 760px) {
    .product-saas-page main .container.smtprs-live-hero { width: calc(100% - 24px); }
    .smtprs-studio .smtprs-live-screen-stage { display: block; height: auto; }
    .smtprs-studio-side { position: relative; display: grid; grid-template-columns: minmax(0,1fr); padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
    .smtprs-studio-new { width: calc(100% - 54px); margin-bottom: 16px; }
    .smtprs-studio-nav { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; margin-bottom: 16px; }
    .smtprs-studio-nav button { gap: 7px; padding: 8px; font-size: 11px; }
    .smtprs-studio-nav svg { width: 15px; height: 15px; }
    .smtprs-studio-lock { display: none; }
    .smtprs-studio-profiles { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
    .smtprs-studio-profiles button { font-size: 9px; }
    .smtprs-studio-recent { max-height: 115px; }
    .smtprs-studio-recent:has(button) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
    .smtprs-studio-side-bottom { padding: 0; margin: 0; }
    .smtprs-studio-theme { position: absolute; top: 14px; right: 14px; margin: 0; }
    .smtprs-studio-session { display: none; }
    .smtprs-studio-toolbar { padding: 10px 14px; }
    .smtprs-studio-metadata { width: 100%; }
    .smtprs-studio-utilities { margin-left: 0; }
    .smtprs-studio-scroll { height: auto; }
    .smtprs-studio .smtprs-preview-form.site-form { padding: 24px 18px; }
    .smtprs-studio-drawer { max-height: min(680px, calc(100dvh - 90px)); width: min(360px,100%); }
    .smtprs-studio .smtprs-chrome-brand { flex-wrap: wrap; }
    .smtprs-studio .smtprs-studio-beta { display: none; }
    .smtprs-studio .smtprs-preview-intro { margin-bottom: 24px; }
    .smtprs-studio .smtprs-email-control input { font-size: 16px; }
}
@media (max-width: 480px) {
    .smtprs-studio .smtprs-live-screen-chrome { padding: 14px; gap: 10px; }
    .smtprs-studio .smtprs-studio-wordmark { margin-left: 5px; }
    .smtprs-studio .smtprs-chrome-status { font-size: 10px; }
    .smtprs-studio-utilities { width: 100%; }
    .smtprs-studio-utilities button { justify-content: center; flex: 1; gap: 5px; padding: 6px; font-size: 10px; }
    .smtprs-studio-coverage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .smtprs-studio .smtprs-studio-verdict { grid-template-columns: 32px minmax(0,1fr); padding: 14px; gap: 12px; }
    .smtprs-studio .smtprs-verdict-icon { width: 32px; height: 32px; }
    .smtprs-studio-risk-label { display: none; }
    .smtprs-studio .smtprs-verdict h3 { font-size: 18px; }
    .smtprs-studio .smtprs-ready { min-height: 300px; padding: 20px 14px; }
    .smtprs-studio .smtprs-ready h3 { font-size: 20px; }
    .smtprs-studio .smtprs-model-note { padding: 12px; gap: 10px; }
    .smtprs-studio .smtprs-model-note > span { flex-basis: 30px; height: 30px; }
    .smtprs-studio .smtprs-studio-coverage-head h4 { font-size: 8px; }
    .smtprs-studio-coverage-head > span { font-size: 7px; }
}
@media (max-width: 360px) {
    .smtprs-studio-utilities button { min-width: 0; flex: 0 0 40px; }
    .smtprs-studio-utilities button[data-studio-panel='summary'] { flex: 1; }
    .smtprs-studio-utilities button:not([data-studio-panel='summary']) > span { display: none; }
}