/* ============================================================
   Strat.AI — BLUEPRINT theme (2026)
   Warm off-white paper, construction orange, charcoal ink,
   sharp corners, engineering-spec aesthetic, Fraunces serif +
   Inter Tight sans + JetBrains Mono. This layer overrides the
   prior design so the existing JS (class/id hooks) keeps
   working while the visual system is completely rebuilt.
   ============================================================ */

/* ---- 1. Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- 2. Tokens ---- */
:root {
    /* Core palette */
    --bg:            #FAF8F3;
    --bg-raised:     #FFFFFF;
    --bg-muted:      #F2EFE7;
    --bg-ink:        #1A1614;

    --ink:           #1C1917;
    --ink-2:         #44403C;
    --ink-3:         #78716C;
    --ink-4:         #A8A29E;

    --rule:          #1C1917;
    --rule-soft:     #D6D3C8;
    --rule-hair:     #E6E2D6;

    --orange:        #C2410C;
    --orange-hot:    #E0530F;
    --orange-ink:    #7C2D12;
    --orange-tint:   #FDEAD4;

    --ok:            #166534;
    --ok-tint:       #D9EDD7;
    --warn:          #A16207;
    --warn-tint:     #FDE68A;
    --bad:           #991B1B;
    --bad-tint:      #FCD7D0;
    --info:          #1E3A8A;
    --info-tint:     #DBE4FF;

    /* Type */
    --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', 'Inter Tight', ui-serif, Georgia, serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Sharp corners */
    --r-0:  0px;
    --r-1:  2px;
    --r-2:  4px;
    --r-pill: 999px;

    /* Shadows (engineering minimal) */
    --shadow-1: 0 1px 0 rgba(28,25,23,0.04), 0 1px 2px rgba(28,25,23,0.04);
    --shadow-2: 0 2px 0 rgba(28,25,23,0.04), 0 8px 20px -6px rgba(28,25,23,0.08);
    --shadow-pop: 0 12px 40px -12px rgba(28,25,23,0.22);

    /* Compatibility tokens so existing CSS variables don't break */
    --primary-color: var(--orange);
    --secondary-color: var(--ink);
    --accent-color: var(--orange);
    --primary-gradient: var(--orange);
    --secondary-gradient: var(--ink);
    --accent-gradient: var(--orange);
    --hero-gradient: var(--ink);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --text-light: var(--ink-4);
    --bg-primary: var(--bg);
    --bg-secondary: var(--bg-muted);
    --bg-tertiary: var(--bg-muted);
    --border-light: var(--rule-soft);
    --border-medium: var(--rule-soft);
    --shadow-light: var(--shadow-1);
    --shadow-medium: var(--shadow-1);
    --shadow-heavy: var(--shadow-2);
    --shadow-glow: none;
    --shadow-glow-lg: none;
    --glow-primary: transparent;
    --glow-secondary: transparent;
    --glow-accent: transparent;
    --success-color: var(--ok);
    --warning-color: var(--warn);
    --info-color: var(--info);
}

[data-theme="dark"] {
    /* Dark variant — inverted: ink base, bone text, orange accent */
    --bg:            #15110F;
    --bg-raised:     #1F1A17;
    --bg-muted:      #2A231F;
    --bg-ink:        #0B0908;

    --ink:           #F5F1E8;
    --ink-2:         #D6D3C8;
    --ink-3:         #A8A29E;
    --ink-4:         #78716C;

    --rule:          #F5F1E8;
    --rule-soft:     #3A322D;
    --rule-hair:     #2A231F;

    --orange:        #E0530F;
    --orange-hot:    #F97316;
    --orange-ink:    #FDEAD4;
    --orange-tint:   rgba(224,83,15,0.18);

    --ok-tint:       rgba(22,101,52,0.22);
    --warn-tint:     rgba(161,98,7,0.22);
    --bad-tint:      rgba(153,27,27,0.22);
    --info-tint:     rgba(30,58,138,0.28);

    --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.25);
    --shadow-2: 0 2px 0 rgba(0,0,0,0.3), 0 8px 20px -6px rgba(0,0,0,0.5);
    --shadow-pop: 0 12px 40px -12px rgba(0,0,0,0.8);
}

/* ---- 3. Base reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg) !important; color: var(--ink); }

body {
    font-family: var(--font-sans) !important;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink) !important;
    background: var(--bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
}

::selection { background: var(--orange); color: #fff; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---- 4. Nuke prior decorations ---- */
.bg-elements, .bg-circle, .grid-pattern { display: none !important; }
#particleCanvas { display: none !important; }

.glass, .glass-dark { background: transparent !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; }
.gradient-border::before { display: none !important; }

.page {
    background: var(--bg) !important;
    /* min-height removed — used to be 100vh, which forced short pages
       (Careers, Press, Status, Changelog) to leave a giant blank gap
       between the last content and the footer. Let pages size to their
       content; the footer naturally sits where the content ends. */
    animation: fade-up .28s ease both;
    position: relative;
    z-index: 1;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Paper grid background helpers */
.paper-grid {
    background-image:
      linear-gradient(to right, rgba(28,25,23,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(28,25,23,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

.paper-grid-fine {
    background-image:
      linear-gradient(to right, rgba(28,25,23,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(28,25,23,0.035) 1px, transparent 1px);
    background-size: 8px 8px;
}

[data-theme="dark"] .paper-grid,
[data-theme="dark"] .paper-grid-fine {
    background-image:
      linear-gradient(to right, rgba(245,241,232,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(245,241,232,0.04) 1px, transparent 1px);
}

/* ---- 5. Typography ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
    line-height: 1.08 !important;
    margin: 0 0 0.5em;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: currentColor !important;
}

h1 { font-size: clamp(44px, 5.5vw, 76px); letter-spacing: -0.035em !important; line-height: 1 !important; font-weight: 500 !important; }
h2 { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em !important; font-weight: 500 !important; }
h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600 !important; }
h4 { font-size: 20px; font-weight: 600 !important; }

.h-display {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

.mono {
    font-family: var(--font-mono) !important;
    font-feature-settings: "zero", "ss01";
}

.caps {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-weight: 600;
}

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 600;
    color: var(--orange) !important;
    margin-bottom: 12px;
}

.gradient-text,
.gradient-text-secondary,
.gradient-text-accent {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--orange) !important;
    font-style: italic;
    font-family: var(--font-display) !important;
    animation: none !important;
}

/* ---- 6. Utilities ---- */
.hidden { display: none !important; }

.container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    width: 100% !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) { .container { padding: 0 20px !important; } }

/* ---- 7. Header ---- */
.header {
    position: sticky !important;
    top: 0;
    z-index: 50;
    background: rgba(250, 248, 243, 0.85) !important;
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--rule-soft) !important;
    padding: 14px 32px !important;
    min-height: auto !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    gap: 32px;
    transition: background .18s ease, border-color .18s ease;
}

[data-theme="dark"] .header {
    background: rgba(21, 17, 15, 0.85) !important;
    border-bottom-color: var(--rule-soft) !important;
}

.logo-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    transition: opacity .15s ease;
}

.logo-container:hover { opacity: 0.8; transform: none !important; box-shadow: none !important; }

.logo {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    background: var(--ink) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    box-shadow: none !important;
}

.logo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    border-radius: 0;
}

.logo::after {
    content: "";
    position: absolute;
    top: 7px; left: 5px; right: 5px; bottom: 7px;
    background:
      /* simple upward step path rendered as two bars + dots */
      linear-gradient(to top, var(--orange) 50%, transparent 50%) no-repeat,
      linear-gradient(to right, var(--orange) 60%, transparent 60%) no-repeat;
    background-size: 2px 12px, 12px 2px;
    background-position: 0 100%, 0 100%;
}

.logo-icon { display: none !important; }

.logo-text {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
    color: var(--ink) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--ink) !important;
    position: relative;
}

.logo-text::after {
    content: "";
    position: absolute;
    display: inline-block;
}

/* Put an orange dot between "Strat" and "Ai" via content swap */
.logo-text { color: var(--ink) !important; }
.logo-container .logo-text::before {
    content: "";
}

[data-theme="dark"] .logo-text { color: var(--ink) !important; }

.nav-desktop {
    display: flex !important;
    gap: 24px !important;
    margin-left: 24px;
    align-items: center;
}

.nav-btn {
    background: transparent !important;
    border: none !important;
    color: var(--ink-2) !important;
    font-family: var(--font-sans) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    padding: 6px 2px !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: color .12s ease;
    box-shadow: none !important;
    min-height: auto !important;
    position: relative;
    text-decoration: none !important;
}

.nav-btn:hover {
    background: transparent !important;
    color: var(--ink) !important;
    transform: none !important;
    box-shadow: none !important;
}

.nav-btn.active {
    background: transparent !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
}

.nav-btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 2px;
    background: var(--orange);
}

/* Top-right CTA */
.sign-in-btn,
.dashboard-btn,
.desktop-sign-in {
    background: var(--orange) !important;
    border: 1px solid var(--orange) !important;
    color: #fff !important;
    font-family: var(--font-sans) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.003em;
    padding: 8px 14px !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease;
    box-shadow: none !important;
    min-height: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.sign-in-btn:hover,
.dashboard-btn:hover,
.desktop-sign-in:hover {
    background: var(--orange-hot) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.mobile-container { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.mobile-menu-btn {
    background: transparent !important;
    border: 1px solid var(--rule-soft) !important;
    width: 38px; height: 38px;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
}

.hamburger { width: 18px; height: 12px; position: relative; }
.hamburger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--ink);
    border-radius: 0;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 5px; }
.hamburger-line:nth-child(3) { top: 10px; }
.hamburger.open .hamburger-line:nth-child(1) { top: 5px; transform: rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger-line:nth-child(3) { top: 5px; transform: rotate(-45deg); }

@media (max-width: 900px) {
    .nav-desktop { display: none !important; }
    .desktop-sign-in { display: none !important; }
}

@media (min-width: 901px) {
    .mobile-container .sign-in-btn { display: none !important; }
    .mobile-menu-btn { display: none !important; }
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    background: var(--bg-raised) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--rule-soft) !important;
    padding: 8px 24px 16px !important;
    box-shadow: var(--shadow-1);
    z-index: 49;
    max-width: 100vw;
    overflow-x: hidden;
}
.mobile-menu.open { display: block; }
[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] body .mobile-menu,
[data-theme="dark"] .mobile-menu#mobileMenu,
[data-theme="dark"] .header .mobile-menu {
    background: #1F1A17 !important;
    background-color: #1F1A17 !important;
    border-bottom-color: #3A322D !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mobile-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}
.mobile-nav-btn {
    background: transparent !important;
    border: none !important;
    color: var(--ink-2) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 14px 4px !important;
    border-bottom: 1px solid var(--rule-hair) !important;
    border-radius: 0 !important;
    text-align: left !important;
    cursor: pointer;
    width: 100% !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}
.mobile-nav-btn:last-child { border-bottom: 0 !important; }
.mobile-nav-btn.active { color: var(--orange) !important; font-weight: 600 !important; background: transparent !important; }

/* ---- 8. Buttons ---- */
.btn,
.hero-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: -0.005em;
    padding: 10px 16px !important;
    min-height: auto !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    background: var(--bg-ink) !important;
    background-image: none !important;
    color: #fff !important;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, color .15s ease, border-color .15s ease !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    text-transform: none;
    overflow: visible;
}

.btn::before { display: none !important; }

.btn:hover {
    background: #000 !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.btn:active { transform: translateY(0); }

.btn-primary,
.hero-action-btn-primary {
    background: var(--orange) !important;
    background-image: none !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-primary:hover:not(:disabled),
.hero-action-btn-primary:hover {
    background: var(--orange-hot) !important;
    border-color: var(--orange-hot) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.btn-secondary,
.hero-action-btn-secondary {
    background: transparent !important;
    background-image: none !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
    box-shadow: none !important;
}

.btn-secondary:hover:not(:disabled),
.hero-action-btn-secondary:hover {
    background: var(--ink) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
}
.btn-outline:hover:not(:disabled) {
    background: var(--ink) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-white {
    background: var(--bg-raised) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule-soft) !important;
}
.btn-white:hover:not(:disabled) {
    background: var(--bg-muted) !important;
    border-color: var(--rule) !important;
}

.btn-accent {
    background: var(--orange) !important;
    color: #fff !important;
    border-color: var(--orange) !important;
}
.btn-accent:hover:not(:disabled) { background: var(--orange-hot) !important; border-color: var(--orange-hot) !important; }

.btn-success {
    background: var(--ok) !important;
    color: #fff !important;
    border-color: var(--ok) !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--ink) !important;
    border-color: transparent !important;
}
.btn-ghost:hover { background: var(--bg-muted) !important; transform: none !important; }

.btn-lg,
.hero-action-btn {
    padding: 14px 22px !important;
    font-size: 15px !important;
}

.btn-sm { padding: 6px 10px !important; font-size: 12.5px !important; }

.btn:disabled,
.btn.btn-disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* Hero action buttons row */
.hero-action-buttons {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0 !important;
}

/* ---- 9. Chips & badges ---- */
.chip,
.hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 3px 8px !important;
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    background: var(--bg-muted) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.chip--orange,
.hero-badge {
    background: var(--orange-tint) !important;
    color: var(--orange-ink) !important;
    border-color: rgba(194, 65, 12, 0.25) !important;
}

[data-theme="dark"] .chip--orange,
[data-theme="dark"] .hero-badge {
    color: var(--orange-ink) !important;
}

.status-dot,
.live-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #16A34A !important;
    box-shadow: none !important;
    display: inline-block;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

.live-dot--orange { background: var(--orange) !important; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ---- 10. Hero (landing) ---- */
#home-page {
    background:
      /* subtle paper grid */
      linear-gradient(to right, rgba(28,25,23,0.035) 1px, transparent 1px) 0 0/24px 24px,
      linear-gradient(to bottom, rgba(28,25,23,0.035) 1px, transparent 1px) 0 0/24px 24px,
      var(--bg) !important;
}

[data-theme="dark"] #home-page {
    background:
      linear-gradient(to right, rgba(245,241,232,0.035) 1px, transparent 1px) 0 0/24px 24px,
      linear-gradient(to bottom, rgba(245,241,232,0.035) 1px, transparent 1px) 0 0/24px 24px,
      var(--bg) !important;
}

.hero {
    display: block !important;
    width: 100%;
    padding: 64px 0 80px !important;
    text-align: left !important;
    position: relative;
    background: transparent !important;
}

.hero > .container {
    display: block !important;
    text-align: left;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-copy {}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.hero-meta .mono {
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
}

.hero-title {
    font-family: var(--font-display) !important;
    font-size: clamp(44px, 5vw, 76px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;
    color: var(--ink) !important;
    margin: 0 0 20px !important;
    max-width: 16ch;
    text-align: left !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.hero-title br { display: block !important; }
.hero-title em,
.hero-title .hero-accent {
    color: var(--orange) !important;
    font-style: italic !important;
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
}

.hero-subtitle {
    font-size: 18.5px !important;
    color: var(--ink-2) !important;
    line-height: 1.55 !important;
    max-width: 580px;
    margin: 0 0 32px !important;
    font-weight: 400 !important;
    text-align: left !important;
}

.hero-stats {
    display: flex !important;
    gap: 40px !important;
    flex-wrap: wrap;
    max-width: none !important;
    margin: 40px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    justify-content: flex-start;
}

.hero-stat {
    flex: 0 0 auto !important;
    min-width: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start !important;
    padding: 0 !important;
}

.hero-stat-number {
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink) !important;
    line-height: 1 !important;
}

.hero-stat-label {
    font-size: 11px !important;
    color: var(--ink-3) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    font-weight: 600;
}

.hero-stat-divider { display: none !important; }

/* Hero visual frame with corner brackets */
.hero-visual {
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    padding: 20px;
    position: relative;
}

/* SVG pipeline scrollable on narrow screens — preserves aspect ratio
   instead of squishing labels into illegibility. */
.hero-visual-svg-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.hero-visual-svg-wrap > svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    /* Edge-to-edge horizontal scroll for the SVG without forcing the
       wrapper itself to be wider than its container. Negative margins
       used to do this also pushed the row past the viewport on tiny
       screens, so they're gone — overflow: auto on the wrapper alone
       keeps the SVG scrollable inside the .hero-visual frame. */
    .hero-visual-svg-wrap {
        scrollbar-width: thin;
        max-width: 100%;
        width: 100%;
    }
    .hero-visual-svg-wrap > svg {
        min-width: 520px;
        width: 520px;
    }
    .hero-visual-svg-wrap::-webkit-scrollbar { height: 4px; }
    .hero-visual-svg-wrap::-webkit-scrollbar-thumb {
        background: var(--rule-soft);
        border-radius: 2px;
    }
}

.hero-visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-visual-head strong { color: var(--ink-2); font-weight: 600; }

/* Corner brackets */
.corner {
    position: relative;
}
.corner::before, .corner::after,
.corner > .corner-br, .corner > .corner-bl {
    content: '';
    position: absolute; width: 10px; height: 10px;
    pointer-events: none;
}
.corner::before { top: -1px; left: -1px; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.corner::after  { top: -1px; right: -1px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }
.corner > .corner-bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.corner > .corner-br { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }

/* Hide leftover dashboard-preview from old hero (we replace with hero-visual) */
.dashboard-preview { display: none !important; }

/* ---- 11. Trust/logo bar ---- */
.trust-bar {
    margin-top: 72px;
    padding-top: 32px;
    border-top: 1px solid var(--rule-soft);
}

.trust-bar-label {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: center;
    margin-bottom: 20px;
}

.trust-bar-logos {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
}

.trust-bar-logos span {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink-2);
}

/* ---- 12. Features section ---- */
.features-section {
    padding: 96px 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--rule-soft);
}

.features-header,
.ai-diagram-header {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 56px !important;
    max-width: none !important;
    gap: 32px;
    flex-wrap: wrap;
    text-align: left !important;
}

.features-title {
    font-family: var(--font-display) !important;
    font-size: clamp(36px, 4vw, 56px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink) !important;
    margin: 0 !important;
    max-width: 760px;
    line-height: 1.05 !important;
}

.features-subtitle {
    font-size: 16px !important;
    color: var(--ink-2) !important;
    line-height: 1.55 !important;
    max-width: 560px;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Grid dividers use gap+background, not border-right on cards. A 1px CSS
 * border at a fractional device-pixel position gets partially overwritten
 * by the next sibling's background paint, leaving only ~22% of the line
 * visible at some viewport widths. A 1px gap with the rule color bleeding
 * through is always integer-aligned and renders identically everywhere. */
.features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
    border: 1px solid var(--rule);
    background: var(--rule);
}

@media (max-width: 900px) { .features-grid { grid-template-columns: 1fr !important; } }

.feature-card {
    padding: 32px !important;
    background: var(--bg-raised) !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 360px;
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    box-shadow: none !important;
    position: relative;
    transition: background .15s ease;
}

.feature-card:hover {
    background: var(--bg-muted) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--rule) !important;
}

.feature-card::after { display: none !important; }

.feature-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.feature-number {
    font-family: var(--font-mono) !important;
    font-size: 42px;
    font-weight: 500;
    color: var(--orange) !important;
    letter-spacing: -0.02em;
    line-height: 1;
}

.feature-eyebrow {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
}

.feature-icon {
    display: none !important;
}

.feature-title {
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

.feature-description {
    color: var(--ink-2) !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.feature-stats {
    margin-top: auto;
    display: flex;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px dashed var(--rule-soft);
}

.feature-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-stat-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.feature-stat-label {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-3);
}

/* ---- 13. How-it-works (dark) ---- */
.how-it-works {
    padding: 96px 0 !important;
    background: var(--bg-ink) !important;
    color: #F5F1E8 !important;
    position: relative;
    overflow: hidden;
}

.how-it-works::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image:
      linear-gradient(to right, #fff 1px, transparent 1px),
      linear-gradient(to bottom, #fff 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.how-it-works > .container { position: relative; }

.how-it-works .eyebrow { color: var(--orange) !important; }

.how-it-works-title {
    font-family: var(--font-display) !important;
    font-size: clamp(36px, 4vw, 56px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: #FFF !important;
    margin: 0 0 56px !important;
    max-width: 820px;
    line-height: 1.05 !important;
}

.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 900px) { .how-it-works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .how-it-works-grid { grid-template-columns: 1fr; } }

.hiw-step {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 20px;
}

.hiw-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.hiw-step-num {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--orange);
}

.hiw-step-time {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-weight: 600;
    color: #A8A29E;
}

.hiw-step-title {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #F5F1E8 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.02em !important;
}

.hiw-step-desc {
    font-size: 14px;
    color: #A8A29E;
    margin: 0;
    line-height: 1.55;
}

/* Hide old HIW card layout */
.hiw-section,
.hiw-card,
.hiw-badge { display: none !important; }

/* ---- 14. Testimonials / AI Diagram replace ---- */
.testimonials-section {
    padding: 96px 0 !important;
    background: var(--bg-muted) !important;
    border-top: 1px solid var(--rule-soft);
}

.testimonials-grid { display: none !important; }

.quote-block {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    padding: 0 32px;
}

.quote-block::before {
    content: '“';
    position: absolute;
    top: -32px;
    left: 24px;
    font-family: var(--font-display);
    font-size: 180px;
    line-height: 1;
    color: var(--orange);
    opacity: 0.18;
    pointer-events: none;
}

.quote-text {
    font-family: var(--font-display) !important;
    font-size: clamp(24px, 3vw, 40px) !important;
    line-height: 1.25 !important;
    color: var(--ink) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    position: relative;
}

.quote-attr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    position: relative;
}

.quote-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: #F5F1E8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 17px;
    flex-shrink: 0;
}

.quote-attr-name { font-weight: 600; color: var(--ink); }
.quote-attr-role { font-size: 13px; color: var(--ink-3); }

/* Hide ai diagram section — we moved conceptually into hero-visual */
.ai-diagram-section { display: none !important; }

/* ---- 15. Pricing ---- */

/* Monthly / Annual toggle. Sits above the grid; matches the chip pattern
   used elsewhere on the marketing site. */
.pricing-billing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin: 24px auto 28px;
    background: var(--bg-muted);
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
}
.pricing-billing__opt {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 999px;
    font: 600 13px/1 var(--font-sans);
    color: var(--ink-3);
    letter-spacing: 0.02em;
    transition: background .15s ease, color .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pricing-billing__opt:hover { color: var(--ink); }
.pricing-billing__opt.is-active {
    background: var(--ink);
    color: var(--bg-raised);
}
.pricing-billing__save {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--orange-tint);
    color: var(--orange-ink);
}
.pricing-billing__opt.is-active .pricing-billing__save {
    background: var(--orange);
    color: #fff;
}
/* Center the toggle inside the section header. */
#pricing { text-align: center; }
#pricing .bp-section-head,
#pricing .pricing-grid { text-align: left; }

.pricing-grid,
.subscription-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
    border: 1px solid var(--rule);
    background: var(--rule);
    margin: 0 auto !important;
    max-width: none !important;
}

@media (max-width: 900px) {
    .pricing-grid, .subscription-grid { grid-template-columns: 1fr !important; }
}

.pricing-card,
.subscription-card {
    padding: 32px !important;
    min-height: 460px;
    background: var(--bg-raised) !important;
    color: var(--ink) !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    position: relative;
    box-shadow: none !important;
    transition: none !important;
    text-align: left !important;
}

.pricing-card::after,
.subscription-card::after { display: none !important; }

.pricing-card:hover,
.subscription-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--bg-muted) !important;
}

/* Dark treatment follows USER SELECTION (.pricing-selected), not "Most Popular"
 * (.pricing-featured). The MOST POPULAR badge highlights the recommended tier;
 * the dark background highlights what the user has actively chosen. Pro starts
 * with both classes (.pricing-featured + .pricing-selected) so the recommended
 * tier is the default selection. Clicking another card moves .pricing-selected
 * (and therefore the dark treatment) to the clicked card while the MOST POPULAR
 * badge stays where it is. forms.js → selectPricingTier() handles the class
 * swap on click. */
.pricing-card.pricing-selected,
.subscription-card.selected,
.subscription-card.popular {
    background: var(--bg-ink) !important;
    color: #F5F1E8 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.pricing-card.pricing-selected:hover,
.subscription-card.selected:hover,
.subscription-card.popular:hover {
    background: var(--bg-ink) !important;
    transform: none !important;
}

.pricing-card.pricing-selected *,
.subscription-card.selected *,
.subscription-card.popular * { color: inherit; }

/* Neutralize legacy .pricing-selected styling from components.css that adds
 * a checkmark ::before and scale(1.02). Background/color come from the rule
 * above. */
.pricing-card.pricing-selected::before { display: none !important; }
.pricing-card.pricing-selected { transform: none !important; }

.pricing-badge {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    transform: none !important;
    background: var(--orange-tint) !important;
    color: var(--orange-ink) !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(194, 65, 12, 0.25) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.pricing-header { margin-bottom: 0; }

.pricing-plan,
.subscription-plan-name {
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ink-3) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 0 !important;
}

.pricing-card.pricing-selected .pricing-plan,
.subscription-card.popular .subscription-plan-name { color: var(--orange) !important; }

.pricing-price,
.subscription-price {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px !important;
    margin-bottom: 0 !important;
}

.pricing-price .main-price-wrapper {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 2px !important;
}

.pricing-currency {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: inherit !important;
    align-self: baseline !important;
    margin-top: 0 !important;
}

.pricing-amount {
    font-family: var(--font-display) !important;
    font-size: 56px !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    color: inherit !important;
    font-variant-numeric: tabular-nums;
    line-height: 1 !important;
}

/* Variant for the Enterprise card where the "price" is a phrase ("Let's
   Talk") rather than a number. Drops the size + tightens letter-spacing
   so the phrase fills the same vertical slot as $949 / $2,449 without
   wrapping or dwarfing the rest of the card. */
.pricing-amount--phrase {
    font-size: 40px !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: normal !important;
    white-space: nowrap;
}

.subscription-price {
    font-family: var(--font-display) !important;
    font-size: 56px !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    color: inherit !important;
    line-height: 1 !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px;
}

.subscription-price::before {
    content: "$";
    font-size: 24px;
    font-weight: 500;
    vertical-align: top;
    margin-right: 0;
    align-self: flex-start;
}

.pricing-period,
.subscription-price-period {
    font-family: var(--font-sans) !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 4px 0 0 !important;
    display: block;
    flex-basis: 100% !important;
}

.pricing-card.pricing-selected .pricing-period,
.pricing-card.pricing-selected .pricing-yearly,
.subscription-card.popular .subscription-price-period { color: #A8A29E !important; }

.pricing-yearly {
    font-family: var(--font-sans) !important;
    color: var(--orange) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    display: block;
    flex-basis: 100% !important;
}

.pricing-monthly-equivalent {
    color: var(--orange) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    text-align: left !important;
}

.pricing-description {
    font-size: 14px !important;
    color: var(--ink-2) !important;
    line-height: 1.55 !important;
    margin: 8px 0 0 !important;
}

.pricing-card.pricing-selected .pricing-description,
.subscription-card.popular .pricing-description { color: #A8A29E !important; }

.pricing-features,
.subscription-features {
    list-style: none;
    padding: 0 !important;
    margin: 8px 0 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pricing-card.pricing-selected .pricing-features,
.subscription-card.popular .subscription-features {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 16px !important;
}

.pricing-feature,
.subscription-feature {
    display: flex !important;
    align-items: flex-start;
    gap: 10px !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--font-sans) !important;
    position: relative;
}

.pricing-card.pricing-selected .pricing-feature,
.pricing-card.pricing-selected .subscription-feature,
.subscription-card.popular .pricing-feature,
.subscription-card.popular .subscription-feature { color: #F5F1E8 !important; }

/* pricing-feature already has literal "✓" in JS template — no ::before needed */
.pricing-feature::before { display: none !important; }

.subscription-feature::before {
    content: "";
    display: inline-block;
    width: 14px; height: 14px;
    flex-shrink: 0;
    margin-top: 3px;
    background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23C2410C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Style the literal "✓" from JS template */
.pricing-feature {
    color: var(--ink) !important;
}
/* Light cream feature text only on the dark-background (selected) card.
 * Featured-but-not-selected stays on light bg with dark text. */
.pricing-card.pricing-selected .pricing-feature { color: #F5F1E8 !important; }

.pricing-cta,
.pricing-card .btn,
.subscription-card .btn {
    width: 100% !important;
    margin-top: auto !important;
    justify-content: center !important;
}

.pricing-card.pricing-selected .pricing-cta,
.subscription-card.popular .pricing-cta {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
}

/* Billing toggle */
.annual-toggle-card {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    max-width: 560px;
    margin: 0 auto 48px !important;
    box-shadow: none !important;
}

.annual-toggle-content {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.annual-toggle-info h3 {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin: 0 !important;
    letter-spacing: -0.005em !important;
}

.annual-toggle-subtitle {
    font-size: 12px !important;
    color: var(--ink-3) !important;
    margin: 0 !important;
}

.annual-toggle-switch { display: flex; align-items: center; gap: 10px; }

.toggle-label {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
    user-select: none;
}

.toggle-button {
    position: relative;
    width: 40px !important;
    height: 22px !important;
    background: var(--rule-soft) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    cursor: pointer;
    padding: 0 !important;
    transition: background .15s ease;
    flex-shrink: 0;
    box-shadow: none !important;
}

.toggle-button.active { background: var(--orange) !important; border-color: var(--orange) !important; }

.toggle-slider {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--bg-raised);
    border-radius: 0;
    transition: transform .2s ease;
    box-shadow: none;
}

.toggle-button.active .toggle-slider { transform: translateX(18px); }

.annual-savings-banner {
    display: flex !important;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 8px 12px !important;
    margin-top: 12px !important;
    background: var(--orange-tint) !important;
    color: var(--orange-ink) !important;
    border: 1px solid rgba(194, 65, 12, 0.25) !important;
    border-radius: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.savings-icon { display: inline-block; }

.subscription-savings {
    margin-top: 4px;
    padding: 6px 10px;
    background: var(--orange-tint);
    border: 1px solid rgba(194, 65, 12, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.savings-text { color: var(--orange-ink); font-weight: 600; }
.savings-amount { color: var(--ink-3); }

.subscription-actions,
.payment-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* ---- 16. Final CTA ---- */
.final-cta {
    padding: 112px 0 !important;
    background: var(--bg-ink) !important;
    color: #F5F1E8 !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image:
      linear-gradient(to right, #fff 1px, transparent 1px),
      linear-gradient(to bottom, #fff 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.final-cta > .container { position: relative; }

.final-cta-title {
    font-family: var(--font-display) !important;
    font-size: clamp(40px, 5vw, 72px) !important;
    font-weight: 500 !important;
    color: #FFF !important;
    letter-spacing: -0.035em !important;
    line-height: 1.02 !important;
    margin: 0 0 16px !important;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.final-cta-title em,
.final-cta-title .hero-accent {
    color: var(--orange) !important;
    font-style: italic !important;
    font-family: var(--font-display) !important;
}

.final-cta-sub {
    font-size: 17px !important;
    color: #A8A29E !important;
    margin: 0 0 32px !important;
    max-width: 600px;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.55 !important;
}

.final-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.final-cta .btn-outline,
.final-cta .btn-secondary {
    color: #F5F1E8 !important;
    border-color: #F5F1E8 !important;
    background: transparent !important;
}

.final-cta .btn-outline:hover,
.final-cta .btn-secondary:hover {
    background: #F5F1E8 !important;
    /* hover bg is always cream regardless of theme, so the text must
       always be dark — `var(--ink)` flips to cream in dark mode and
       collapses contrast. Hardcode a dark warm ink instead. */
    color: #1C1917 !important;
}

/* Final CTA buttons must be inline — override the global .btn.early-access-btn width */
.final-cta .btn,
.hero-action-buttons .btn,
.hero-action-buttons .hero-action-btn {
    width: auto !important;
    display: inline-flex !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---- 17. Forms (global) ---- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-label,
.label {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ink-2) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

.form-input,
select.form-input,
textarea.form-input,
.input, .select, .textarea {
    width: 100%;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    padding: 10px 12px !important;
    background: var(--bg-raised) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
}

.form-input::placeholder { color: var(--ink-4) !important; }

.form-input:focus, .input:focus, .select:focus, .textarea:focus {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.08) !important;
    background: var(--bg-raised) !important;
}

select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2344403C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    background-color: var(--bg-raised) !important;
    padding-right: 34px !important;
    cursor: pointer;
}

/* components.css line ~6800 sets `background:` shorthand on dark form-inputs,
 * which resets background-repeat to its default (repeat) and position to
 * (0,0). Without re-asserting these, the dropdown chevron SVG tiles across
 * the entire select like a wavy scribble pattern. */
[data-theme="dark"] select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23D6D3C8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
}

textarea.form-input, .textarea, .form-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5 !important;
}

.form-error,
.form-success {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 0 !important;
    margin-top: 4px !important;
    text-align: left !important;
}

.form-error {
    background: var(--bad-tint) !important;
    border: 1px solid rgba(153, 27, 27, 0.3) !important;
    color: var(--bad) !important;
}

.form-success {
    background: var(--ok-tint) !important;
    border: 1px solid rgba(22, 101, 52, 0.3) !important;
    color: var(--ok) !important;
}

/* ---- 18. Signin / Create Account (two-column auth) ---- */
#signin-page,
#create-account-page,
#subscription-selection-page,
#payment-confirmation-page {
    background: var(--bg) !important;
}

.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 60px);
    width: 100%;
}

/* When the dark product panel is omitted (e.g. create-account page in
   v19.62+), the .auth-split grid collapses to a single column so the
   form fills the full viewport width — no orphan empty grid track. The
   :has() check is a CSS-only guard; supporting browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+) cover ~95% of our visitors. The 960px
   media query below catches everything else. */
.auth-split:not(:has(> .auth-visual-col)) {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .auth-split { grid-template-columns: 1fr; min-height: auto; }
}

.auth-form-col {
    display: flex;
    flex-direction: column;
    padding: 32px 48px;
    position: relative;
}

.auth-form-col--wide {
    padding: 32px 48px 48px;
}

@media (max-width: 640px) {
    .auth-form-col, .auth-form-col--wide { padding: 24px; }
}

.auth-form-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 30px;
    margin-bottom: 24px;
}

.auth-meta {
    font-size: 11px !important;
    color: var(--ink-3) !important;
    letter-spacing: 0.12em;
}

.auth-form-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#create-account-page .auth-form-inner {
    align-items: flex-start;
    padding-top: 8px;
}

.auth-form-box {
    width: 100%;
    max-width: 420px;
}

.auth-form-box--wide {
    max-width: 560px;
}

.auth-form-box .eyebrow { margin-bottom: 12px; }

.signin-title {
    font-family: var(--font-display) !important;
    font-size: 40px !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink) !important;
    margin: 0 0 8px !important;
    line-height: 1.05 !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.signin-subtitle {
    font-family: var(--font-sans) !important;
    font-size: 14.5px !important;
    color: var(--ink-3) !important;
    margin: 0 0 32px !important;
    line-height: 1.5 !important;
}

.auth-form-box form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Neutralize old signin classes inside new structure */
.signin-container, .create-account-container,
.signin-form-container, .signin-card,
.signin-header, .signin-glow { all: unset; display: block; }

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2px;
}

.form-label-row .forgot-password-link {
    font-size: 12px !important;
    color: var(--orange) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.forgot-password-link {
    color: var(--orange) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.forgot-password-link:hover { text-decoration: underline !important; }

.auth-form-box .btn-primary,
#submitSignin, #submitCreateAccount {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    margin-top: 8px;
    margin-left: 0 !important; margin-right: 0 !important;
    font-size: 14px !important;
    border-radius: 0 !important;
}

.auth-form-box .btn-primary:hover { background: var(--orange-hot) !important; border-color: var(--orange-hot) !important; }

.auth-footer-link {
    margin-top: 24px;
    font-size: 14px;
    color: var(--ink-3);
}

.auth-switch-link {
    background: none !important;
    border: none !important;
    color: var(--orange) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    padding: 0 !important;
    width: auto !important;
    margin-left: 4px;
}

.auth-switch-link[style*="display: none"],
.auth-switch-link.hidden { display: none !important; }
.auth-switch-link:hover { text-decoration: underline !important; }

.auth-form-footer {
    margin-top: 24px;
    font-size: 10.5px !important;
    color: var(--ink-4) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Right column — dark panel */
.auth-visual-col {
    position: relative;
    background: var(--bg-ink);
    color: #F5F1E8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 48px;
}

.auth-visual-col::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image:
      linear-gradient(to right, #fff 1px, transparent 1px),
      linear-gradient(to bottom, #fff 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.auth-visual-label {
    position: relative;
    font-size: 10.5px !important;
    color: var(--orange) !important;
    letter-spacing: 0.15em;
}

.auth-visual-main {
    position: relative;
    margin-top: auto;
}

.auth-visual-title {
    font-family: var(--font-display) !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    margin: 0 0 20px !important;
    color: #FFF !important;
}

.auth-visual-title em {
    color: var(--orange) !important;
    font-style: italic !important;
    font-family: var(--font-display) !important;
}

.auth-visual-sub {
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    color: #A8A29E !important;
    max-width: 440px;
    margin: 0 0 32px !important;
    line-height: 1.55 !important;
}

.auth-visual-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 24px;
}

.auth-visual-stat-v {
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    color: #FFF;
}

.auth-visual-stat-l {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-weight: 600;
    color: #A8A29E;
    margin-top: 4px;
}

@media (max-width: 960px) {
    .auth-visual-col { min-height: 320px; padding: 32px 24px; }
    .auth-visual-title { font-size: 32px !important; }
}

/* Signup progress indicator inside the blueprint form */
.signup-progress {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0;
    margin: 24px 0 32px !important;
    padding: 0 !important;
    max-width: 440px;
    flex-wrap: nowrap;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    z-index: 1;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-3);
    background: var(--bg-raised);
    border: 1px solid var(--rule-soft);
    transition: all .2s ease;
}

.progress-step.active .step-number {
    color: #fff;
    background: var(--orange);
    border-color: var(--orange);
}

.progress-step.completed .step-number {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    font-size: 0;
    position: relative;
}

.progress-step.completed .step-number::after {
    content: "✓";
    position: absolute;
    font-size: 13px;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
}

.step-label {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
}
.progress-step.active .step-label { color: var(--ink); }

.progress-line {
    flex: 1;
    height: 1px;
    background: var(--rule-soft);
    margin: 0 -8px;
    margin-top: -22px;
    transition: background .2s ease;
}
.progress-line.completed { background: var(--ink); }

/* (Removed v=19.36) Floating "TLS 1.3 · AES-256 AT REST · SSO AVAILABLE"
   pseudo-element under the sign-in form. Was duplicating the
   <div class="auth-form-footer"> that already lived outside the card,
   so the sign-in page was rendering the same line twice and the
   create-account page rendered it once but visually orphaned outside
   the white card. Both removed; security primitives live on
   /security where they belong. */

/* ---- 19. Popups / Modals ---- */
.popup-overlay,
.modal-overlay {
    position: fixed !important;
    inset: 0;
    background: rgba(26, 22, 20, 0.55) !important;
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn .18s ease;
}

.popup-overlay.hidden, .modal-overlay.hidden { display: none !important; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.popup-content,
.modal-content {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 28px !important;
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: var(--shadow-pop) !important;
    animation: modalIn .24s ease;
}

@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.popup-header, .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
    padding: 0 !important;
    border-bottom: 0 !important;
}

.popup-title, .modal-title {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin: 0 !important;
    letter-spacing: -0.02em;
}

.popup-subtitle {
    color: var(--ink-3) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 20px !important;
}

.popup-close {
    background: transparent !important;
    border: none !important;
    font-size: 22px !important;
    color: var(--ink-3) !important;
    cursor: pointer;
    padding: 0 4px !important;
    line-height: 1;
}
.popup-close:hover { color: var(--ink) !important; }

.modal-body { margin-bottom: 16px; }

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 !important;
    border-top: 0 !important;
    margin-top: 12px;
}

/* ---- 20. Footer (legacy — forced out) ---- */
.footer {
    display: none !important;
}

/* ==========================================================================
   BLUEPRINT FOOTER — 5-column grid matching the design
   ========================================================================== */
.bp-footer {
    background: var(--bg);
    border-top: 1px solid var(--rule-soft);
    padding: 56px 32px 32px;
    margin-top: auto;
    color: var(--ink);
    width: 100%;
}

.bp-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bp-footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule-soft);
}

@media (max-width: 960px) {
    .bp-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }
    .bp-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .bp-footer-main { grid-template-columns: 1fr; }
}

/* Brand column */
.bp-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bp-footer-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bp-footer-logo {
    width: 26px;
    height: 26px;
    background: var(--ink);
    border-radius: 6px;
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}

.bp-footer-logo-mark {
    position: absolute;
    top: 7px; left: 5px; right: 5px; bottom: 7px;
    background:
      linear-gradient(to top, var(--orange) 50%, transparent 50%) no-repeat,
      linear-gradient(to right, var(--orange) 60%, transparent 60%) no-repeat;
    background-size: 2px 12px, 12px 2px;
    background-position: 0 100%, 0 100%;
}

.bp-footer-wordmark {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
}

.bp-footer-dot { color: var(--orange); }

.bp-footer-desc {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink-3);
    max-width: 320px;
    margin: 0;
    line-height: 1.55;
}

.bp-footer-meta {
    font-size: 11px !important;
    color: var(--ink-3) !important;
    letter-spacing: 0.1em;
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Link columns */
.bp-footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bp-footer-col-head {
    color: var(--ink-3) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    font-weight: 600;
    text-transform: uppercase;
}

.bp-footer-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bp-footer-col-link {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .12s ease;
    font-weight: 500;
}

.bp-footer-col-link:hover { color: var(--orange); }
.bp-footer-col-link.active,
.footer-link.active {
    color: var(--orange) !important;
    font-weight: 600;
}

/* Bottom bar */
.bp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bp-footer-build {
    font-size: 11px !important;
    color: var(--ink-3) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
}

/* Dark variant (used on dashboard/projects/settings) */
.bp-footer--dark {
    background: var(--bg-ink);
    border-top: 1px solid #000;
    color: #A8A29E;
}

.bp-footer--dark .bp-footer-main { border-bottom-color: rgba(255, 255, 255, 0.08); }

.bp-footer--dark .bp-footer-logo { background: transparent; }
.bp-footer--dark .bp-footer-logo-mark { inset: 6px 5px 6px 5px; }

.bp-footer--dark .bp-footer-wordmark { color: #F5F1E8; }

.bp-footer--dark .bp-footer-desc { color: #78716C; }

.bp-footer--dark .bp-footer-meta,
.bp-footer--dark .bp-footer-build { color: #78716C !important; }

.bp-footer--dark .bp-footer-col-head { color: #F5F1E8 !important; }

.bp-footer--dark .bp-footer-col-link { color: #A8A29E; }
.bp-footer--dark .bp-footer-col-link:hover { color: var(--orange); }

.bp-footer--dark .theme-toggle {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #A8A29E !important;
}
.bp-footer--dark .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #F5F1E8 !important;
}

.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    align-items: flex-start !important;
    justify-content: initial !important;
}

@media (max-width: 900px) {
    .footer-content { grid-template-columns: 1fr 1fr; text-align: left !important; }
}

@media (max-width: 540px) {
    .footer-content { grid-template-columns: 1fr; }
}

.footer-left {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-logo {
    width: 24px !important;
    height: 24px !important;
    background: var(--ink) !important;
    border-radius: 5px !important;
    position: relative;
}

.footer-logo::before { display: none; }
.footer-logo::after {
    content: "";
    position: absolute;
    top: 6px; left: 5px; right: 5px; bottom: 6px;
    background:
      linear-gradient(to top, var(--orange) 50%, transparent 50%) no-repeat,
      linear-gradient(to right, var(--orange) 60%, transparent 60%) no-repeat;
    background-size: 2px 10px, 10px 2px;
    background-position: 0 100%, 0 100%;
}

.footer-logo-icon { display: none !important; }

.footer-brand-text {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    font-size: 18px !important;
    letter-spacing: -0.02em;
}

.footer-center {
    grid-column: span 4;
    order: 10;
    border-top: 1px solid var(--rule-soft);
    padding-top: 20px;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-tagline {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--ink-3) !important;
    margin: 0 !important;
    text-align: left !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-right {
    display: flex !important;
    align-items: center;
    gap: 12px;
    order: 11;
}

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

.footer-link {
    font-family: var(--font-sans) !important;
    color: var(--ink-2) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.footer-link:hover { color: var(--orange) !important; }

.theme-toggle {
    background: transparent !important;
    border: 1px solid var(--rule-soft) !important;
    width: 32px; height: 32px;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-2) !important;
    padding: 0 !important;
    transition: background .15s;
}
.theme-toggle:hover { background: var(--bg-muted) !important; color: var(--ink) !important; border-color: var(--rule) !important; }

.theme-icon--dark { display: none; }
.theme-icon--light { display: inline-block; }

[data-theme="dark"] .theme-icon--dark { display: inline-block; }
[data-theme="dark"] .theme-icon--light { display: none; }

/* ---- 21. Dashboard chrome — DARK topnav matching design ---- */
.dashboard-body .header {
    background: var(--bg-ink) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 14px 28px !important;
    height: auto;
    min-height: 56px;
}

.dashboard-body .logo-container .logo-text {
    color: #F5F1E8 !important;
    -webkit-text-fill-color: #F5F1E8 !important;
}

.dashboard-body .logo {
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-body .logo::after {
    background:
      linear-gradient(to top, var(--orange) 50%, transparent 50%) no-repeat,
      linear-gradient(to right, var(--orange) 60%, transparent 60%) no-repeat;
    background-size: 2px 12px, 12px 2px;
    background-position: 0 100%, 0 100%;
}

.dashboard-body .nav-btn {
    color: #9A918A !important;
    font-size: 13.5px !important;
}

.dashboard-body .nav-btn:hover {
    color: #D6D3D1 !important;
}

.dashboard-body .nav-btn.active {
    color: #F5F1E8 !important;
    font-weight: 600 !important;
}

.dashboard-body .nav-btn.active::after {
    background: var(--orange);
    bottom: -16px;
}

.dashboard-body .user-name { color: #F5F1E8 !important; }
.dashboard-body .user-role { color: #9A918A !important; }
.dashboard-body .user-menu-btn { color: #9A918A !important; }
.dashboard-body .user-menu-btn:hover { background: rgba(255, 255, 255, 0.06) !important; color: #F5F1E8 !important; }

.dashboard-body .hamburger-line { background: #F5F1E8; }
.dashboard-body .mobile-menu-btn { border-color: rgba(255, 255, 255, 0.15) !important; }

.dashboard-body .user-dropdown {
    background: #2A231F;
    border-color: rgba(255, 255, 255, 0.12);
}
.dashboard-body .user-dropdown .dropdown-item { color: #F5F1E8; }
.dashboard-body .user-dropdown .dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
.dashboard-body .user-dropdown .dropdown-divider { background: rgba(255, 255, 255, 0.08); }

.dashboard-body .mobile-menu {
    background: #2A231F;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.dashboard-body .mobile-nav-btn {
    color: #D6D3D1 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.dashboard-body .mobile-nav-btn.active { color: var(--orange) !important; }

/* Dashboard footer: dark */
.dashboard-body .footer {
    background: var(--bg-ink) !important;
    color: #A8A29E !important;
    border-top: 1px solid #000 !important;
}

.dashboard-body .footer-brand-text { color: #F5F1E8 !important; }
.dashboard-body .footer-logo { background: transparent !important; }
.dashboard-body .footer-tagline { color: #78716C !important; }
.dashboard-body .footer-link { color: #A8A29E !important; }
.dashboard-body .footer-link:hover { color: var(--orange) !important; }
.dashboard-body .theme-toggle {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #A8A29E !important;
}
.dashboard-body .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #F5F1E8 !important;
}

/* Dashboard main content area */
.dashboard-main {
    background: var(--bg) !important;
    min-height: calc(100vh - 200px);
    padding: 32px !important;
}

[data-theme="dark"] .dashboard-main { background: var(--bg) !important; }

/* User menu */
.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 4px 8px;
    border-radius: 0;
}

.user-info { display: flex; align-items: center; gap: 10px; }

.user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.user-initials { font-weight: 600; }

.user-details { display: flex; flex-direction: column; line-height: 1.2; }

.user-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.user-role { font-size: 11px; color: var(--ink-3); }

.user-menu-btn {
    background: transparent !important;
    border: none !important;
    color: var(--ink-3) !important;
    cursor: pointer;
    padding: 4px !important;
    border-radius: 0;
}
.user-menu-btn:hover { color: var(--ink) !important; background: var(--bg-muted) !important; }

.user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: var(--shadow-pop);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 100;
}

.user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
}
.dropdown-item:hover { background: var(--bg-muted); }

.dropdown-divider { height: 1px; background: var(--rule-soft); margin: 4px 0; }

/* ---- 22. Loading / Network ---- */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity .35s ease;
}
.app-loading-overlay.hidden { opacity: 0; pointer-events: none; }

.app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.app-loading-logo {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: var(--ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-loading-logo::before { display: none; }
.app-loading-logo::after {
    content: "";
    position: absolute;
    inset: 14px;
    background:
      linear-gradient(to top, var(--orange) 50%, transparent 50%) no-repeat,
      linear-gradient(to right, var(--orange) 60%, transparent 60%) no-repeat;
    background-size: 3px 20px, 20px 3px;
    background-position: 0 100%, 0 100%;
}

.app-loading-icon { display: none; }

.app-loading-text {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.app-loading-bar {
    width: 120px;
    height: 2px;
    background: var(--rule-hair);
    overflow: hidden;
    position: relative;
}

.app-loading-bar-fill {
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--orange);
    animation: loadingSlide 1.2s ease-in-out infinite;
}

@keyframes loadingSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.network-status {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 90;
    padding: 8px 14px;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--ink);
    transition: transform .25s ease, opacity .25s ease;
    /* Idle state: empty <div> would still render a bordered box at the
     * top of the viewport because translateY(-120%) of a ~16px-tall element
     * is only ~20px — not enough to hide it behind the nav. Hide it
     * completely until .offline or .reconnected gets added. */
    opacity: 0;
    pointer-events: none;
}

.network-status.offline {
    background: var(--bad);
    color: #fff;
    border-color: var(--bad);
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.network-status.reconnected {
    background: var(--ok);
    color: #fff;
    border-color: var(--ok);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ---- 23. Misc and compatibility nukes ---- */
.card,
.card-glass,
.contact-card,
.message-card,
.blog-card {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: background .15s ease, border-color .15s ease !important;
}

.card::after, .card-glass::after { display: none !important; }

.card:hover, .card-glass:hover,
.contact-card:hover, .message-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--bg-muted) !important;
    border-color: var(--rule-soft) !important;
}

.feature-restricted {
    opacity: 0.4 !important;
    pointer-events: none;
    position: relative;
}
.feature-restricted::after {
    content: "🔒 UPGRADE";
    position: absolute;
    top: 8px; right: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 3px 7px;
    background: var(--bg-muted);
    color: var(--ink-2);
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.approaching-limit { color: var(--warn) !important; font-weight: 600; }
.expired { color: var(--bad) !important; }
.expiring-soon { color: var(--warn) !important; }

/* Scroll animate — subtle */
.scroll-animate,
.scroll-animate-left,
.scroll-animate-right {
    filter: none !important;
}

.scroll-animate {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.scroll-animate.animate { opacity: 1; transform: none; }

.scroll-animate-left { opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s; }
.scroll-animate-left.animate { opacity: 1; transform: none; }

.scroll-animate-right { opacity: 0; transform: translateX(8px); transition: opacity .5s, transform .5s; }
.scroll-animate-right.animate { opacity: 1; transform: none; }

/* Cards inside divider grids cannot use the scroll-animate entrance.
 * The grid uses `background: var(--rule)` so a 1px gap shows the rule color
 * as a divider line. But scroll-animate's pre-state (opacity:0 + 8px translate)
 * causes either:
 *   - opacity:0 → the dark grid bg bleeds through the entire card (flash of
 *     black rectangle until the IntersectionObserver fires)
 *   - 8px translate → 8px-wide dark bands appear around the offset card while
 *     mid-animation, looking like a thick black border.
 * Render these cells in their final state from the start. The grid lines (1px)
 * are the visible motion; the cells themselves don't need to fly in. */
.features-grid > .scroll-animate,
.features-grid > .scroll-animate-left,
.features-grid > .scroll-animate-right,
.bp-roi-grid > .scroll-animate,
.bp-roi-grid > .scroll-animate-left,
.bp-roi-grid > .scroll-animate-right,
.pricing-grid > .scroll-animate,
.pricing-grid > .scroll-animate-left,
.pricing-grid > .scroll-animate-right,
.subscription-grid > .scroll-animate,
.subscription-grid > .scroll-animate-left,
.subscription-grid > .scroll-animate-right,
.bp-integrations > .scroll-animate,
.bp-integrations > .scroll-animate-left,
.bp-integrations > .scroll-animate-right,
.bp-team-grid > .scroll-animate,
.bp-team-grid > .scroll-animate-left,
.bp-team-grid > .scroll-animate-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .scroll-animate, .scroll-animate-left, .scroll-animate-right {
        opacity: 1; transform: none;
    }
}

.spinner-border {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 24. Payment confirmation ---- */
.payment-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
}

.selected-plan-summary {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 24px;
}

.plan-summary-name {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.plan-summary-price {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.035em;
    margin-bottom: 12px;
    line-height: 1;
}

.plan-summary-features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-summary-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-2);
}

.plan-summary-feature::before {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23C2410C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    flex-shrink: 0;
}

/* ---- 25. Empty / Skeleton states ---- */
.empty-state {
    text-align: center;
    padding: 64px 32px;
    max-width: 520px;
    margin: 0 auto;
}

.empty-state-icon {
    width: 56px; height: 56px;
    margin: 0 auto 20px;
    background: var(--bg-muted);
    border: 1px solid var(--rule-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 22px;
    border-radius: 0;
}

.empty-state-title {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em;
}

.empty-state-description {
    font-size: 14px !important;
    color: var(--ink-3) !important;
    line-height: 1.55;
    margin-bottom: 24px !important;
}

.skeleton {
    background: linear-gradient(90deg,
      var(--bg-muted) 0%, var(--bg-raised) 50%, var(--bg-muted) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.6s ease-in-out infinite;
    border-radius: 0;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- 26. Hide stuff from prior design to reduce noise ---- */
.magnetic-element { /* keep class hook, neutral style */ }

/* The old landing-hero "dashboard preview" component (.dashboard-preview > .dashboard-container)
 * was replaced by the .hero-visual SVG. Suppress only those legacy preview elements when they
 * appear inside .dashboard-preview — never the actual dashboard pages, which also use
 * .dashboard-container as their primary layout class. */
.dashboard-preview .dashboard-container,
.dashboard-preview .dashboard-glow { display: none !important; }

/* Keep status circle but restyle */
.status-circle { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-complete { background: var(--ok); }
.status-progress { background: var(--orange); }
.status-scheduled { background: var(--ink-4); }

.item-progress, .item-label { display: none !important; }

/* ---- 27. Print ---- */
@media print {
    .header, .footer, .mobile-menu, #particleCanvas, .theme-toggle { display: none !important; }
    .page { background: #fff !important; }
    body { color: #000 !important; }
}

/* ---- 28. Final safety: old gradient-text override ---- */
.hero-title,
.signin-title,
.features-title,
.pricing-amount,
.plan-summary-price {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
}

/* ==========================================================================
   29. BLUEPRINT additions — product/about/contact/legal + dashboard content
   ========================================================================== */

/* --- Page hero used on product/about/contact/legal --- */
.bp-page-hero {
    max-width: 820px;
    margin: 0 auto 16px;
    text-align: left;
}

.bp-page-hero .eyebrow { margin-bottom: 16px; }

.bp-page-title {
    font-family: var(--font-display) !important;
    font-size: clamp(36px, 5vw, 68px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;
    color: var(--ink) !important;
    margin: 0 0 20px !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.bp-page-title em,
.bp-page-title .hero-accent {
    font-style: italic !important;
    color: var(--orange) !important;
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
}

.bp-page-sub {
    font-family: var(--font-sans) !important;
    font-size: 18px !important;
    color: var(--ink-2) !important;
    line-height: 1.55 !important;
    margin: 0 0 32px !important;
    max-width: 680px;
    font-weight: 400 !important;
}

/* --- Generic section head/title --- */
.bp-section {
    padding: 56px 0;
    position: relative;
    border-top: 1px solid var(--rule-soft);
}

.bp-section:first-child { border-top: 0; }

.bp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    text-align: left !important;
}

.bp-section-title {
    font-family: var(--font-display) !important;
    font-size: clamp(28px, 3.5vw, 44px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
    margin: 0 !important;
    max-width: 760px;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

/* --- ROI stat strip (product page) --- */
.bp-roi-section {
    padding: 56px 0 32px;
    border-top: 1px solid var(--rule-soft);
    margin-top: 32px;
}

.bp-roi-head { margin-bottom: 32px; }

.bp-roi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid var(--rule);
    background: var(--rule);
}

@media (max-width: 900px) { .bp-roi-grid { grid-template-columns: repeat(2, 1fr); } }

.bp-roi-stat {
    padding: 28px 24px;
    background: var(--bg-raised);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bp-roi-num {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -0.035em;
    color: var(--orange);
    line-height: 1;
}

.bp-roi-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* --- Integrations grid (product page) --- */
.bp-integrations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid var(--rule);
    background: var(--rule);
}

@media (max-width: 900px) { .bp-integrations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bp-integrations { grid-template-columns: 1fr; } }

.bp-integration-cell {
    padding: 24px;
    background: var(--bg-raised);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background .15s ease;
}
.bp-integration-cell:hover { background: var(--bg-muted); }

.bp-int-num {
    font-size: 11px;
    color: var(--orange);
    font-weight: 500;
    letter-spacing: 0.14em;
}

.bp-int-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.bp-int-tag {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 8px;
    font-weight: 500;
}

/* --- Team grid (about page) --- */
.bp-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid var(--rule);
    background: var(--rule);
}

@media (max-width: 900px) { .bp-team-grid { grid-template-columns: 1fr; } }

.bp-team-cell {
    padding: 32px;
    background: var(--bg-raised);
}

.bp-team-tag {
    display: inline-block;
    font-size: 11px;
    color: var(--orange);
    letter-spacing: 0.14em;
    margin-bottom: 16px;
    font-weight: 500;
}

.bp-team-title {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: -0.025em;
    margin: 0 0 10px !important;
}

.bp-team-desc {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
}

/* --- Contact grid (contact page) --- */
.bp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 48px;
}

@media (max-width: 900px) { .bp-contact-grid { grid-template-columns: 1fr; } }

.bp-contact-meta {
    background: var(--bg-ink);
    color: #F5F1E8;
    padding: 32px;
    position: relative;
    border: 1px solid var(--bg-ink);
}

.bp-contact-meta .corner-bl,
.bp-contact-meta .corner-br {
    border-color: var(--orange);
}
.bp-contact-meta.corner::before,
.bp-contact-meta.corner::after {
    border-color: var(--orange);
}

.bp-contact-meta-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: #A8A29E;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 24px;
}

.bp-contact-meta-body h3 {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #F5F1E8 !important;
    margin: 0 0 20px !important;
    letter-spacing: -0.025em;
}

.bp-contact-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bp-contact-steps li {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #D6D3C8;
    line-height: 1.55;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.bp-contact-steps .mono {
    color: var(--orange);
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.bp-contact-footer {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bp-contact-footer-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #D6D3C8;
    font-family: var(--font-sans);
}

.bp-contact-footer-row .caps {
    color: #78716C;
    font-size: 10.5px;
}

.bp-contact-form-card {
    background: var(--bg-raised);
    padding: 32px;
    border: 1px solid var(--rule-soft);
}

.bp-contact-form-head { margin-bottom: 24px; }

.bp-contact-form-head .eyebrow { margin-bottom: 8px; }

.bp-contact-form-title {
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin: 0 !important;
    letter-spacing: -0.025em;
}

.bp-contact-form { display: flex; flex-direction: column; gap: 16px; }

.bp-contact-form .btn-primary {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    width: 100% !important;
    justify-content: center !important;
    display: inline-flex !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
    margin-top: 8px;
}

/* --- Legal pages --- */
.bp-legal-hero {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: left;
}

.bp-legal-meta {
    margin-top: 16px;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    color: var(--ink-3) !important;
    text-transform: uppercase;
}

.bp-legal-content {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--rule-soft);
    background: var(--bg-raised);
}

/* Reskin existing .content-card inside privacy/terms to blueprint styling */
.bp-legal-content .content-card {
    background: var(--bg-raised) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    padding: 28px 32px !important;
    margin: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.bp-legal-content .content-card:last-child { border-bottom: 0 !important; }
.bp-legal-content .content-card::after { display: none !important; }
.bp-legal-content .content-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--bg-muted) !important;
}

.bp-legal-content .content-title {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.025em;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.bp-legal-content .feature-description {
    color: var(--ink-2) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    font-family: var(--font-sans) !important;
}

.bp-legal-content .feature-description p { margin: 0 0 12px !important; }
.bp-legal-content .feature-description p:last-child { margin-bottom: 0 !important; }
.bp-legal-content .feature-description ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 0 12px !important;
}
.bp-legal-content .feature-description li {
    padding-left: 20px !important;
    margin: 0 0 6px !important;
    position: relative;
}
.bp-legal-content .feature-description li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-family: var(--font-mono);
}

/* ==========================================================================
   30. BLANKET OVERRIDES — kill any leftover purple/old UI
   ========================================================================== */

/* Any remaining .content-card or .about-hero/.about-title still in DOM */
.content-card {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--ink) !important;
}

.content-title {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

.about-hero,
.about-title,
.about-content,
.content-section,
.team-section,
.team-card,
.team-title,
.team-member,
.team-grid,
.member-avatar,
.member-info,
.roi-section,
.roi-card,
.roi-title,
.roi-stats,
.roi-stat,
.roi-number,
.roi-label,
.roi-glow,
.integration-section,
.integration-logos,
.integration-item,
.integration-logo,
.integration-name,
.message-section,
.message-card,
.message-glow,
.team-glow,
.contact-grid,
.contact-card,
.cta-section,
.cta-title,
.cta-subtitle,
.hero-action-btn-white {
    background: var(--bg-raised) !important;
    border-color: var(--rule-soft) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
}

.roi-glow, .team-glow, .message-glow { display: none !important; }

.cta-section {
    background: var(--bg-ink) !important;
    color: #F5F1E8 !important;
    padding: 56px 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: center;
}

.cta-title {
    font-family: var(--font-display) !important;
    color: #FFF !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    background: none !important;
    -webkit-text-fill-color: #FFF !important;
}

.cta-subtitle { color: #A8A29E !important; }

.hero-action-btn-white {
    background: var(--orange) !important;
    color: #fff !important;
    border: 1px solid var(--orange) !important;
}

.hero-action-btn-white:hover { background: var(--orange-hot) !important; border-color: var(--orange-hot) !important; }

/* ==========================================================================
   31. POPUP / MODAL refinements — blueprint style
   ========================================================================== */
.popup-overlay .popup-content,
.modal-overlay .modal-content {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-pop) !important;
    padding: 32px !important;
    color: var(--ink);
}

.popup-title, .modal-title {
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: -0.025em;
    margin: 0 !important;
}

.popup-subtitle {
    font-family: var(--font-sans) !important;
    color: var(--ink-2) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 8px 0 20px !important;
}

.popup-close {
    background: transparent !important;
    border: 1px solid var(--rule-soft) !important;
    color: var(--ink-2) !important;
    width: 32px;
    height: 32px;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.popup-close:hover { background: var(--bg-muted) !important; color: var(--ink) !important; }

/* Popup form buttons fixes */
.popup-content .btn-primary,
.popup-content #submitEarlyAccess,
.popup-content #submitNewsletter,
.popup-content #submitDemo,
.popup-content #submitForgotPassword {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    margin: 4px 0 0 !important;
}

.popup-content .btn-primary:hover { background: var(--orange-hot) !important; border-color: var(--orange-hot) !important; }

.popup-content .form-label,
.popup-content label { color: var(--ink-2) !important; }
.popup-content .form-input { border-radius: 0 !important; }

/* Onboarding popup — blueprint */
.onboarding-page h2,
.onboarding-page h3,
.onboarding-title,
.onboarding-subtitle {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
    letter-spacing: -0.025em;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

#onboardingPopup .btn {
    border-radius: 0 !important;
}

/* ==========================================================================
   32. DASHBOARD INNERHTML content (project cards, KPIs, empty state)
   ========================================================================== */
.dashboard-body .dashboard-main { padding: 28px !important; }

/* Empty state on dashboard */
.dashboard-empty-state,
#dashboardEmptyState {
    max-width: 560px;
    margin: 80px auto;
    padding: 48px 32px !important;
    text-align: center;
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dashboard-empty-state .empty-icon,
#dashboardEmptyState .empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: var(--orange-tint);
    border: 1px solid rgba(194, 65, 12, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--orange-ink);
}

.dashboard-empty-state .empty-title,
#dashboardEmptyState .empty-title {
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.025em;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.dashboard-empty-state .empty-desc,
#dashboardEmptyState .empty-desc {
    color: var(--ink-2) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 24px !important;
}

.dashboard-empty-state .btn-primary,
#dashboardEmptyState .btn-primary {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* Project cards */
.project-card,
.project-card-large,
.dashboard-body .card,
.dashboard-body .stat-card {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px !important;
    backdrop-filter: none !important;
    transition: border-color .15s ease, background .15s ease !important;
    position: relative;
}

.project-card::after, .project-card-large::after { display: none !important; }

.project-card:hover, .project-card-large:hover {
    border-color: var(--rule) !important;
    box-shadow: none !important;
    transform: none !important;
    background: var(--bg-muted) !important;
}

.project-header, .project-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0 !important;
    border: 0 !important;
}

.project-title {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em;
    margin: 0 !important;
    flex: 1;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.project-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.project-status.status-active, .project-status.active { background: var(--ok); }
.project-status.status-planning, .project-status.planning { background: var(--orange); }
.project-status.status-on-hold, .project-status.paused, .project-status.status-hold { background: var(--warn); }
.project-status.status-completed, .project-status.completed { background: var(--ink-4); }

.project-menu { margin-left: auto; position: relative; }

.project-menu-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--ink-3) !important;
    cursor: pointer;
    padding: 6px !important;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.project-menu-btn:hover { background: var(--bg-muted) !important; color: var(--ink) !important; border-color: var(--rule-soft) !important; }

.project-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 40;
    box-shadow: var(--shadow-pop);
}
.project-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.project-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 10px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    text-align: left !important;
    cursor: pointer;
    border-radius: 0 !important;
}
.project-dropdown .dropdown-item:hover { background: var(--bg-muted) !important; }
.project-dropdown .dropdown-item-danger { color: var(--bad) !important; }

.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--rule-hair);
    border-radius: 0;
    overflow: hidden;
    position: relative;
    margin: 0 0 8px;
}

.progress-fill {
    height: 100%;
    background: var(--orange);
    border-radius: 0;
    transition: width .4s ease;
}

.progress-fill.complete, .progress-fill.status-completed { background: var(--ok); }
.progress-fill.planning { background: var(--orange); }
.progress-fill.paused, .progress-fill.hold { background: var(--warn); }

.progress-text,
.progress-label,
.progress-percentage {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
    letter-spacing: -0.005em;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.progress-percentage {
    font-family: var(--font-mono);
    color: var(--ink);
    font-weight: 600;
}

.project-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule-soft);
}

.project-date, .project-team, .project-budget {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

.project-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin: 12px 0;
    padding: 12px 0;
    border-top: 1px dashed var(--rule-soft);
    border-bottom: 1px dashed var(--rule-soft);
}

.project-detail { display: flex; justify-content: space-between; gap: 8px; }

.detail-label {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.detail-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
    font-weight: 500;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.project-tag {
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-muted);
    color: var(--ink-2);
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.project-card-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rule-soft);
}

.project-card-footer .btn { flex: 1; }

/* Dashboard grids */
.projects-grid,
.dashboard-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.dashboard-container {
    max-width: 1440px;
    margin: 0 auto;
}

.recent-projects-section,
.stats-section {
    margin-bottom: 40px;
}

.section-header,
.dashboard-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule-soft);
}

.section-title,
.dashboard-section-title {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: -0.025em;
    margin: 0 !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

/* Dashboard stat cards */
.stat-card, .dashboard-stat-card {
    padding: 20px !important;
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.stat-card-label, .stat-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

.stat-card-value, .stat-value {
    font-family: var(--font-display) !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    color: var(--ink) !important;
    line-height: 1 !important;
}

.stat-card-change, .stat-change {
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
    color: var(--ok);
}

.stat-card-change.negative, .stat-change.negative { color: var(--bad); }

/* Settings content */
.dashboard-body .settings-section,
.dashboard-body .settings-card,
.dashboard-body .settings-tab,
.dashboard-body .tab-content {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    padding: 24px !important;
}

.dashboard-body .settings-nav,
.dashboard-body .settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 24px;
}

.dashboard-body .settings-tab,
.dashboard-body .tab-button {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 16px !important;
    color: var(--ink-2) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    border-radius: 0 !important;
    margin: 0 !important;
}

.dashboard-body .settings-tab.active,
.dashboard-body .tab-button.active {
    color: var(--ink) !important;
    border-bottom-color: var(--orange) !important;
    font-weight: 600 !important;
}

.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3 {
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    color: var(--ink) !important;
}

/* Notifications */
.notification, .toast {
    background: var(--bg-raised) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-pop) !important;
    padding: 12px 16px !important;
}

/* ==========================================================================
   33. Nuke any remaining indigo/purple references via attribute selectors
   ========================================================================== */
[style*="#C2410C"],
[style*="#9A3412"],
[style*="#FB923C"],
[style*="#EA580C"],
[style*="#FB923C"],
[style*="#F97316"] {
    /* We cannot override inline color per-property, but we can de-prioritize
       by scoping within specific containers. Not applied globally to avoid
       breaking legitimate inline styles. */
}

/* Reset any inline color:#C2410C/#9A3412 on nav-btn, etc. */
.nav-btn, .mobile-nav-btn, .btn, .feature-icon, .card-icon {
    /* allow nested content to inherit */
}

/* ==========================================================================
   34. Theme-flash warm inline bg fix (was cool navy)
   ========================================================================== */
[data-theme="dark"] body { background: var(--bg) !important; color: var(--ink) !important; }


/* ==========================================================================
   35. Minimal app footer (dashboard / projects / settings)
   ==========================================================================
   The marketing site uses .bp-footer (5 columns, brand block, etc.) which
   makes sense when you're browsing. Once a user is signed in to the app,
   they don't need a giant marketing nav at the bottom — they want a thin
   utility strip with build version, status, and the essentials.
*/
.app-footer {
    border-top: 1px solid var(--rule-soft);
    padding: 14px 32px;
    background: var(--bg);
    margin-top: 64px;
    font-family: var(--font-sans);
}
.app-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.app-footer-left,
.app-footer-center,
.app-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.app-footer-build {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.app-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-3);
}
.app-footer-status .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.16);
}
.app-footer-link {
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .15s ease;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.app-footer-link:hover { color: var(--orange); }
.app-footer-link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.app-footer-divider {
    width: 1px;
    height: 14px;
    background: var(--rule-soft);
    display: inline-block;
}
.app-footer .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--rule-soft);
    color: var(--ink-3);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.app-footer .theme-toggle:hover {
    color: var(--ink);
    border-color: var(--rule);
}

@media (max-width: 720px) {
    .app-footer { padding: 16px; }
    .app-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .app-footer-right { flex-wrap: wrap; }
}

/* ---- Mobile responsive overflow guards ---- */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    /* Compliance / ROI stat numbers shrink so they don't clip */
    .bp-roi-num {
        font-size: clamp(20px, 6vw, 36px) !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.1 !important;
    }
    .bp-roi-stat {
        padding: 16px 10px !important;
        min-width: 0 !important;
        text-align: center;
        align-items: center;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow: hidden;
    }
    .bp-roi-grid {
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 100%;
    }
    .bp-roi-section { padding-left: 0; padding-right: 0; }
    /* Prevent integration cells from overflowing on narrow screens */
    .bp-int-name {
        font-size: 17px;
        word-break: break-word;
    }
    .bp-integration-cell {
        padding: 18px 14px;
        min-width: 0;
    }
    .bp-integrations {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    /* Section titles + page titles */
    .bp-section-title { word-break: break-word; }
    .bp-page-title { word-break: break-word; hyphens: auto; }
    /* Pricing cards: prevent large numbers from forcing horizontal scroll */
    .pricing-card { min-width: 0; }
    .pricing-amount { word-break: break-word; }
    /* Containers shouldn't exceed viewport. Only override horizontal
       padding — vertical padding comes from page-specific inline
       styles (legal pages use padding-bottom: 80-120px to leave a
       gap before the footer; padding shorthand would clobber that). */
    .container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 460px) {
    .bp-roi-num {
        font-size: clamp(16px, 5.2vw, 26px) !important;
    }
    .bp-roi-stat {
        padding: 12px 8px !important;
        gap: 4px;
    }
    .bp-roi-label {
        font-size: 9px !important;
        letter-spacing: 0.08em !important;
        word-break: break-word;
    }
    .container { padding: 0 12px !important; }
    .bp-integrations {
        grid-template-columns: 1fr !important;
    }
}

/* Universal min-width safety for grid + flex children to prevent clipping */
.bp-roi-grid,
.bp-team-grid,
.bp-integrations,
.pricing-grid {
    min-width: 0;
}
.bp-roi-grid > *,
.bp-team-grid > *,
.bp-integrations > *,
.pricing-grid > * {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bp-roi-grid > * > *,
.bp-team-grid > * > * {
    min-width: 0;
    max-width: 100%;
}

/* =========================================================
   MOBILE MENU — owns appearance, theme-aware
   ---------------------------------------------------------
   Spec: solid background fully covering page content; simple
   full-width text-link items; active item gets a subtle
   orange-tinted background, orange text, orange outline.
   Light mode = white surface + dark text. Dark mode =
   warm dark surface + light text. The structural rules
   (position, layout, padding, gaps, item shape) are theme-
   neutral so they live in one place.
   ========================================================= */

/* ---- Structural (both themes) ---- */
body:not(.dashboard-body) .mobile-menu,
body:not(.dashboard-body) .mobile-menu#mobileMenu {
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;

    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;

    z-index: 1000 !important;
    padding: 16px 20px 24px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body:not(.dashboard-body) .mobile-menu .mobile-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    background: transparent !important;
    list-style: none !important;
}

body:not(.dashboard-body) .mobile-menu .mobile-nav-btn {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;

    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease !important;
}

/* Active item — orange-tinted, orange outline + orange text in both themes */
body:not(.dashboard-body) .mobile-menu .mobile-nav-btn.active {
    background: rgba(194, 65, 12, 0.12) !important;
    background-color: rgba(194, 65, 12, 0.12) !important;
    background-image: none !important;
    color: var(--orange) !important;
    border: 2px solid var(--orange) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Strip any decorative ::after / ::before from older rules */
body:not(.dashboard-body) .mobile-menu .mobile-nav-btn::before,
body:not(.dashboard-body) .mobile-menu .mobile-nav-btn::after,
body:not(.dashboard-body) .mobile-menu .mobile-nav-btn.active::before,
body:not(.dashboard-body) .mobile-menu .mobile-nav-btn.active::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* ---- Light mode (default — no [data-theme="dark"]) ---- */
html:not([data-theme="dark"]) body:not(.dashboard-body) .mobile-menu {
    background: #FAF8F3 !important;
    background-color: #FAF8F3 !important;
    border-top: 1px solid #D6D3C8 !important;
}
html:not([data-theme="dark"]) body:not(.dashboard-body) .mobile-menu .mobile-nav-btn {
    color: #1C1917 !important;
}
html:not([data-theme="dark"]) body:not(.dashboard-body) .mobile-menu .mobile-nav-btn:hover {
    color: #1C1917 !important;
    background-color: rgba(28, 25, 23, 0.05) !important;
}
html:not([data-theme="dark"]) body:not(.dashboard-body) .mobile-menu .mobile-nav-btn.active {
    /* Light surface + orange tint + orange text + orange outline */
    background: rgba(194, 65, 12, 0.10) !important;
    background-color: rgba(194, 65, 12, 0.10) !important;
    color: var(--orange) !important;
    border: 2px solid var(--orange) !important;
}

/* ---- Dark mode ---- */
html[data-theme="dark"] body:not(.dashboard-body) .mobile-menu {
    background: #1A1614 !important;
    background-color: #1A1614 !important;
    border-top: 1px solid #3A322D !important;
}
html[data-theme="dark"] body:not(.dashboard-body) .mobile-menu .mobile-nav-btn {
    color: #F5F1E8 !important;
}
html[data-theme="dark"] body:not(.dashboard-body) .mobile-menu .mobile-nav-btn:hover {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] body:not(.dashboard-body) .mobile-menu .mobile-nav-btn.active {
    background: rgba(194, 65, 12, 0.12) !important;
    background-color: rgba(194, 65, 12, 0.12) !important;
    color: var(--orange) !important;
    border: 2px solid var(--orange) !important;
}

/* =========================================================
   MOBILE SAFETY — sitewide guards against horizontal clipping
   ========================================================= */

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

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    /* Ensure every section/container has at least 16px breathing room.
       Inline negative-margin "full-bleed" CTAs (final-cta uses
       `margin: 56px -32px 80px` to escape the container's 32px padding
       on desktop) get those negative margins zeroed on mobile so the
       dark band stays inside the viewport. */
    .final-cta[style*="-32px"],
    .final-cta {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 64px !important;
        padding-bottom: 72px !important;
    }
    .final-cta > .container {
        padding: 0 !important;
    }
    .final-cta-title {
        font-size: clamp(26px, 7.2vw, 40px) !important;
        word-break: break-word;
        hyphens: auto;
    }
    .final-cta-sub {
        font-size: 15px !important;
        word-break: break-word;
    }
    .final-cta-actions { gap: 10px; }
    .final-cta .btn,
    .final-cta .btn-lg { min-width: 0 !important; }

    /* Section headings everywhere shouldn't poke past the viewport */
    h1 { font-size: clamp(28px, 7vw, 44px) !important; word-break: break-word; }
    h2 { font-size: clamp(24px, 6.2vw, 36px) !important; word-break: break-word; }
    h3 { font-size: clamp(18px, 4.6vw, 24px) !important; word-break: break-word; }
    .hero-title,
    .features-title,
    .bp-section-title,
    .bp-page-title { word-break: break-word; hyphens: auto; }

    /* Generic safety: any element that takes a viewport-wide image
       can't blow out the layout. */
    img, video, iframe, canvas, svg { max-width: 100%; }

    /* Inline-styled long words can't push the page wider than 100vw. */
    p, li, span, a, button, label { overflow-wrap: anywhere; }
}

@media (max-width: 460px) {
    .final-cta {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 48px !important;
        padding-bottom: 56px !important;
    }
    .final-cta-title { font-size: clamp(22px, 6.4vw, 32px) !important; }
    .final-cta-sub { font-size: 14px !important; }
    h1 { font-size: clamp(24px, 6.4vw, 36px) !important; }
    h2 { font-size: clamp(20px, 5.6vw, 30px) !important; }
}

/* =========================================================
   HERO MOBILE FIX — class-specificity, !important
   .hero-title is .hero-title (class) so plain `h1` rules don't
   win against the existing `.hero-title { font-size: clamp(44px,
   5vw, 76px) !important }`. Override here with the same
   specificity, plus stats row wrapping + tighter padding.
   ========================================================= */
@media (max-width: 768px) {
    /* Hero container: full-width with safe gutters */
    .hero {
        padding: 40px 0 56px !important;
        max-width: 100vw;
        overflow-x: hidden;
    }
    .hero > .container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Heading shrinks aggressively so the longest line fits a
       375px viewport with 16px gutters (= 343px content). */
    .hero-title,
    .hero-title.scroll-animate {
        font-size: clamp(28px, 7.6vw, 40px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
        max-width: 100% !important;
        word-break: break-word;
        hyphens: auto;
    }
    .hero-subtitle {
        font-size: 15px !important;
        max-width: 100% !important;
        line-height: 1.55 !important;
    }

    /* Hero meta + badges wrap cleanly */
    .hero-meta { gap: 8px !important; row-gap: 6px !important; }
    .hero-badge { font-size: 11px !important; padding: 4px 8px !important; }

    /* Action buttons stack on narrow screens */
    .hero-action-buttons {
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }
    .hero-action-buttons .hero-action-btn,
    .hero-action-buttons .btn {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    /* Stats row — three stats can't sit side-by-side on a
       narrow viewport. Reduce gap, allow wrap, keep numbers
       compact. */
    .hero-stats {
        gap: 18px 28px !important;
        margin: 28px 0 0 !important;
        max-width: 100% !important;
    }
    .hero-stat-number { font-size: 24px !important; }
    .hero-stat-label  { font-size: 10px !important; letter-spacing: 0.1em !important; }

    /* Visual frame (FIG-01) shouldn't push the page wider */
    .hero-visual-wrap { max-width: 100%; }
    .hero-visual { padding: 14px !important; max-width: 100%; }
}

@media (max-width: 460px) {
    .hero-title,
    .hero-title.scroll-animate {
        font-size: clamp(24px, 7.2vw, 32px) !important;
    }
    .hero-subtitle { font-size: 14px !important; }
    .hero-stats { gap: 14px 22px !important; }
    .hero-stat-number { font-size: 22px !important; }
    .hero-action-buttons .hero-action-btn,
    .hero-action-buttons .btn { font-size: 14px !important; padding: 12px 16px !important; }
}

@media (max-width: 360px) {
    .hero-title,
    .hero-title.scroll-animate {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }
}

/* =========================================================
   STRUCTURAL OVERFLOW GUARDS (last block — always wins)
   No element under #home-page may push the page wider than 100vw.
   Cap every ancestor of the hero with max-width and overflow-x:
   hidden so any child trying to escape is clipped at its parent.
   ========================================================= */
@media (max-width: 768px) {
    #home-page,
    #home-page > *,
    .hero,
    .hero-grid,
    .hero-copy,
    .hero-visual-wrap,
    .hero-visual,
    .hero-stats,
    .hero-action-buttons,
    .hero-meta {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* Headline/paragraph cannot be wider than container regardless
       of inline JS-set transforms or animation wrappers. */
    .hero-title,
    .hero-title .hero-line,
    .hero-subtitle,
    .hero-stat,
    .hero-meta > * {
        max-width: 100% !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    /* Mono caption beneath the live-dot can't be one long unbroken token */
    .hero-meta .mono { overflow-wrap: anywhere; word-break: break-all; }
    /* Hero visual horizontal scroll stays inside its frame */
    .hero-visual { overflow-x: hidden !important; }
    .hero-visual-svg-wrap { overflow-x: auto !important; }
}

/* =========================================================
   FOOTER BUFFER — restore breathing room before the footer
   ---------------------------------------------------------
   The home-page .final-cta has no inline margin, so it relied
   purely on its `padding: 112px 0` to push away from the
   footer. The mobile override that shrank that padding to 72px
   collapsed the gap on small screens. Re-establish a universal
   bottom margin so every page leaves comfortable space between
   the last section and the footer, regardless of which page
   variant of .final-cta is rendered.
   ========================================================= */
section.final-cta,
.final-cta {
    margin-bottom: 80px !important;
}

@media (max-width: 768px) {
    section.final-cta,
    .final-cta {
        margin-bottom: 56px !important;
        padding-bottom: 88px !important;
    }
    /* Tighter footer padding on mobile so the gap doesn't blow out */
    .bp-footer { padding: 48px 20px 32px !important; }
}

/* Universal safety net: guarantee a clear gap before the footer on
   every page, regardless of whether the page ends in a .final-cta
   or a content card. Margin collapse handles the home-page case
   correctly — adjacent .final-cta margin-bottom + footer margin-top
   collapse to one 80px gap, not stacked. Legal, careers, press, and
   status pages now get their gap unconditionally. */
.bp-footer,
footer.bp-footer {
    margin-top: 80px;
}
@media (max-width: 768px) {
    .bp-footer,
    footer.bp-footer {
        margin-top: 56px;
    }
}

/* =========================================================
   HERO ACTION BUTTONS — kill leftover shimmer pseudo + fix
   secondary hover contrast in dark mode
   ---------------------------------------------------------
   1. components.css adds .hero-action-btn::before — a white
      gradient shimmer parked at left: -100%, supposed to sweep
      across on hover. design-refresh.css forces overflow:
      visible on .btn/.hero-action-btn for icon overflow, so the
      shimmer is no longer clipped and shows as a fixed white
      sliver to the LEFT of the primary button. Neutralize it.
   2. .hero-action-btn-secondary:hover sets `background:
      var(--ink); color: #fff`. In dark mode --ink is #F5F1E8
      (cream), so white text on cream = invisible. Switch the
      hover text colour to var(--bg) so it inverts with the
      theme: dark text on cream in dark mode, bone-on-ink in
      light mode.
   ========================================================= */
.hero-action-btn::before,
.hero-action-btn::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.btn-secondary:hover:not(:disabled),
.hero-action-btn-secondary:hover {
    background: var(--ink) !important;
    color: var(--bg) !important;
    border-color: var(--ink) !important;
}

/* =========================================================
   CAREERS GRID — fill trailing empty cell so the bright
   `background: var(--rule)` of .bp-integrations doesn't show
   through as a cream/white block when role count isn't a
   multiple of the column count (currently 5 roles in a 3-col
   grid leaves one trailing empty slot per row).
   ---------------------------------------------------------
   Scoped to #careers-page so the marketing integrations grid
   (which has exactly 6 cells filling 2 rows of 3) stays
   untouched. The pseudo-element auto-places into the next
   available grid track at every breakpoint (3-col, 2-col,
   1-col), and `var(--bg-raised)` matches the filled cells'
   colour so the slot blends into the row.
   ========================================================= */
#careers-page .bp-integrations::after {
    content: "";
    display: block;
    background: var(--bg-raised);
    min-height: 100%;
}

/* =========================================================
   GHOST/OUTLINE BUTTON HOVER — universal contrast safety net
   ---------------------------------------------------------
   In dark mode, `--ink` is the cream colour `#F5F1E8`. Several
   button hover rules across the codebase fill the background
   with the same cream and set color: var(--ink) (or the
   inverse: bg cream + color #fff). Result is cream-on-cream
   (or white-on-cream) and the label disappears. Force a dark
   text colour on every outline/secondary/ghost-style button
   whose hover background is light, regardless of which file
   defined it.
   ========================================================= */
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .hero-action-btn-secondary:hover,
html[data-theme="dark"] .hero-action-btn-white:hover,
html[data-theme="dark"] .final-cta .btn-outline:hover,
html[data-theme="dark"] .final-cta .btn-secondary:hover,
html[data-theme="dark"] .demo-btn:hover {
    color: #1C1917 !important;
}

/* =========================================================
   Contrast safety net — same rationale as in app.html. Any
   inline-styled region with a hard-coded background but no
   matching `color:` gets a contrasting foreground forced on
   it, so theme switches can't leave a card cream-on-cream or
   ink-on-ink.
   ========================================================= */
[style*="background:#F5F1E8"]:not([style*="color"]),
[style*="background: #F5F1E8"]:not([style*="color"]),
[style*="background:#FAF7F0"]:not([style*="color"]),
[style*="background: #FAF7F0"]:not([style*="color"]),
[style*="background:#fff"]:not([style*="color"]),
[style*="background: #fff"]:not([style*="color"]),
[style*="background:#FFFFFF"]:not([style*="color"]),
[style*="background: #FFFFFF"]:not([style*="color"]) {
    color: #1C1714 !important;
}
[style*="background:#1C1714"]:not([style*="color"]),
[style*="background: #1C1714"]:not([style*="color"]),
[style*="background:#1A1512"]:not([style*="color"]),
[style*="background: #1A1512"]:not([style*="color"]),
[style*="background:#14110F"]:not([style*="color"]),
[style*="background: #14110F"]:not([style*="color"]),
[style*="background:#0B0907"]:not([style*="color"]),
[style*="background: #0B0907"]:not([style*="color"]) {
    color: #F5F1E8 !important;
}

/* Form input placeholders, both themes */
input::placeholder, textarea::placeholder { color: #78716C; opacity: 1; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #9A8F82; }

/* Browser autofill paints inputs bright yellow even in dark mode.
   Mask it with the theme's surface + ink color. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: var(--ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-raised, #FFFFFF) inset !important;
    caret-color: var(--ink) !important;
    transition: background-color 99999s ease-out;
}

/* Disabled buttons should not lose their label entirely. */
button:disabled, .btn:disabled { opacity: 0.55; }