/* ============================================================
   STACKCTL UI THEME — Pulse Uptime Edition
   ------------------------------------------------------------
   Purpose:
   - Provide clean, reusable UI primitives
   - Reduce Tailwind repetition
   - Support light/dark mode via .dark class (dark-first)
   - NO build tools required (CDN friendly)
   ------------------------------------------------------------
   Philosophy:
   - Keep it minimal
   - Let patterns evolve before expanding
   - Do NOT recreate Tailwind
   ------------------------------------------------------------
   Brand:
   - Pulse Uptime · StackCTL Framework
   - Primary color: #C8102E (Pulse Crimson — from logo)
   - Danger color:  #F05A22 (Orange-red — distinct from brand)
   - Font: JetBrains Mono throughout
   - Dark-first. Mobile-first.
============================================================ */


/* ============================================================
   GOOGLE FONT IMPORT
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');


/* ============================================================
   CSS CUSTOM PROPERTIES
   Swap variables to retheme everything.
   --color-primary is set from the logo upload.
============================================================ */

:root {
    /* --- Brand / Primary (Pulse Crimson — extracted from logo) --- */
    --color-primary:         #C8102E;
    --color-primary-hover:   #E01535;
    --color-primary-bright:  #FF1A3C;   /* pulse line in charts / loading anim  */
    --color-primary-muted:   #7D0A1C;   /* borders, subdued accents             */
    --color-primary-dim:     #C8102E26; /* 15% alpha — ghost fills, hover bg    */

    /* --- Backgrounds (dark-first) --- */
    --color-bg:              #0D0F12;   /* app root                             */
    --color-bg-raised:       #111418;   /* modals, dropdowns above bg           */
    --color-surface:         #171B21;   /* card / panel surface                 */
    --color-surface-hover:   #1D2229;   /* card hover                           */
    --color-surface-active:  #222830;   /* pressed / selected                   */
    --color-overlay:         #0D0F12CC; /* modal scrim 80%                      */

    /* --- Borders --- */
    --color-border:          #252B34;
    --color-border-strong:   #333C47;
    --color-border-subtle:   #1A1F26;

    /* --- Text --- */
    --color-text:            #E8EDF2;
    --color-text-secondary:  #8B96A3;
    --color-text-tertiary:   #505A66;
    --color-text-inverse:    #0D0F12;   /* text on light / colored surfaces     */
    --color-text-link:       var(--color-primary);
    --color-text-link-hover: var(--color-primary-hover);

    /* --- Status / Signal --- */
    --color-success:         #22C55E;   /* online / healthy                     */
    --color-success-dim:     #22C55E1A;
    --color-success-border:  #166534;

    --color-warning:         #F59E0B;   /* degraded / partial                   */
    --color-warning-dim:     #F59E0B1A;
    --color-warning-border:  #78350F;

    --color-danger:          #F05A22;   /* alert / down — orange-red NOT brand  */
    --color-danger-dim:      #F05A221A;
    --color-danger-border:   #7C2D12;

    --color-info:            #60A5FA;   /* informational / maintenance          */
    --color-info-dim:        #60A5FA1A;
    --color-info-border:     #1E3A5F;

    --color-neutral:         #8B96A3;   /* paused / pending / unknown           */
    --color-neutral-dim:     #8B96A31A;
    --color-neutral-border:  #374151;

    /* --- NetPulse LED (mirrors physical hardware LED) --- */
    --color-led-green:       #22C55E;
    --color-led-amber:       #F59E0B;
    --color-led-red:         #C8102E;   /* brand crimson — intentional match    */
    --color-led-glow-green:  #22C55E55;
    --color-led-glow-amber:  #F59E0B55;
    --color-led-glow-red:    #C8102E55;

    /* --- Typography --- */
    --font-mono:             'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-size-xs:          0.6875rem; /* 11px */
    --font-size-sm:          0.75rem;   /* 12px */
    --font-size-base:        0.875rem;  /* 14px — default UI */
    --font-size-md:          1rem;      /* 16px */
    --font-size-lg:          1.125rem;  /* 18px */
    --font-size-xl:          1.25rem;   /* 20px */
    --font-size-2xl:         1.5rem;    /* 24px */
    --font-size-3xl:         1.875rem;  /* 30px */

    /* --- Transitions --- */
    --transition-fast:       80ms ease;
    --transition-base:       150ms ease;
    --transition-slow:       250ms ease;
    --transition-bounce:     200ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Border radius --- */
    --radius-sm:             0.1875rem; /* 3px  */
    --radius-base:           0.375rem;  /* 6px  */
    --radius-md:             0.5rem;    /* 8px  */
    --radius-lg:             0.75rem;   /* 12px */
    --radius-xl:             1rem;      /* 16px */
    --radius-full:           9999px;

    /* --- Layout --- */
    --sidebar-width:         240px;
    --sidebar-collapsed:     64px;
    --topbar-height:         56px;

    /* --- Z-index scale --- */
    --z-dropdown:            100;
    --z-sticky:              200;
    --z-modal:               300;
    --z-toast:               400;
    --z-tooltip:             500;
}

/* Light mode — applied via .light class on <html> or <body> */
.light {
    --color-bg:              #F4F5F7;
    --color-bg-raised:       #FFFFFF;
    --color-surface:         #FFFFFF;
    --color-surface-hover:   #F9FAFB;
    --color-surface-active:  #F3F4F6;
    --color-overlay:         #00000066;

    --color-border:          #E5E7EB;
    --color-border-strong:   #D1D5DB;
    --color-border-subtle:   #F0F1F3;

    --color-text:            #111827;
    --color-text-secondary:  #6B7280;
    --color-text-tertiary:   #9CA3AF;
    --color-text-inverse:    #FFFFFF;
}


/* ============================================================
   GLOBAL BASE
============================================================ */

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

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

body {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-text-link-hover); }

/* Scrollbar */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--color-bg); }
::-webkit-scrollbar-thumb        { background: var(--color-border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--color-text-tertiary); }

/* Selection */
::selection { background: var(--color-primary-dim); color: var(--color-text); }

/* Focus ring — keyboard navigation only */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }


/* ============================================================
   CONTAINER / WIDTH SYSTEM
   Mobile-first. Containers constrain content width per
   breakpoint. Use .container inside page wrappers.

   Breakpoints:
     xs:  480px  — large phones landscape
     sm:  640px  — small tablets
     md:  768px  — tablets
     lg:  1024px — laptops
     xl:  1280px — desktops
     2xl: 1536px — wide screens
============================================================ */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 480px) {
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px;  padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1400px; } }

/* Named-purpose containers */

/* Standard page content wrapper */
.container-page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}
@media (min-width: 768px) {
    .container-page { padding: 1.5rem; }
}

/* Forms, settings, focused single-column content */
.container-narrow {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Slide-out panels, detail drawers */
.container-panel {
    width: 100%;
    max-width: 480px;
}

/* Full bleed — no max-width, just padding */
.container-fluid {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 768px) {
    .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
}


/* ============================================================
   GRID / ROW SYSTEM
   Mobile-first — single column by default, expands at md (768px)
============================================================ */

/* Base row — single column on mobile */
.row {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

/* Auto-fit — responsive tiles, no breakpoint needed */
.row-auto {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Stat/metric cards — smaller minimum */
.row-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Fixed column layouts — activate at 768px */
@media (min-width: 768px) {
    .row-2 { grid-template-columns: repeat(2, 1fr); }
    .row-3 { grid-template-columns: repeat(3, 1fr); }
    .row-4 { grid-template-columns: repeat(4, 1fr); }
    .row-5 { grid-template-columns: repeat(5, 1fr); }
    .row-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Sidebar + main — activates at 1024px */
@media (min-width: 1024px) {
    .row-sidebar { grid-template-columns: var(--sidebar-width) 1fr; }
    .row-aside   { grid-template-columns: 1fr 320px; }
}

/* Gap modifiers */
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }


/* ============================================================
   APP SHELL
   Topbar + sidebar + main content layout.
   Mobile: topbar + hamburger, sidebar slides in.
   Desktop (1024px+): fixed sidebar column, content beside it.
============================================================ */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

@media (min-width: 1024px) {
    .app-shell {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        grid-template-rows: var(--topbar-height) 1fr;
    }
    .app-shell.sidebar-collapsed {
        grid-template-columns: var(--sidebar-collapsed) 1fr;
    }
}

/* Topbar */
.app-topbar {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .app-topbar { grid-column: 1 / -1; padding: 0 1.5rem; }
}

/* Sidebar */
.app-sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition-slow), width var(--transition-slow);
    z-index: var(--z-dropdown);
}
.app-sidebar.sidebar-open { transform: translateX(0); }

@media (min-width: 1024px) {
    .app-sidebar {
        position: sticky;
        top: var(--topbar-height);
        height: calc(100dvh - var(--topbar-height));
        transform: none;
        grid-column: 1;
        grid-row: 2;
    }
    .app-shell.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed); }
}

/* Main content */
.app-main {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 2rem 2.5rem;
}

.app-main-inner {
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .app-main { padding: 1.25rem 1rem; }
}

@media (min-width: 1024px) {
    .app-main { grid-column: 2; grid-row: 2; }
}


/* ============================================================
   NAVIGATION
============================================================ */

.nav-section {
    display: block;
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--color-border-subtle);
}

.nav-section-label {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-tertiary);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0.5rem;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    transition: background var(--transition-fast), color var(--transition-fast);
}

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

.nav-link-active {
    background: var(--color-primary-dim);
    color: var(--color-primary);
    border-color: var(--color-primary-muted);
    font-weight: 600;
}

.nav-link-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: var(--color-primary);
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.nav-link-active:hover { color: var(--color-primary); }

.nav-divider {
    height: 1px;
    background: var(--color-border-subtle);
    margin: 0.5rem 1rem;
}


/* ============================================================
   BUTTONS
============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-base);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition:
            background     var(--transition-fast),
            color          var(--transition-fast),
            border-color   var(--transition-fast),
            box-shadow     var(--transition-fast),
            transform      var(--transition-bounce);
}

.btn:active { transform: scale(0.97); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sizes */
.btn-xs   { padding: 0.1875rem 0.5rem; font-size: var(--font-size-xs); }
.btn-sm   { padding: 0.375rem 0.75rem; font-size: var(--font-size-xs); }
.btn-lg   { padding: 0.75rem 1.5rem;   font-size: var(--font-size-base); }
.btn-xl   { padding: 1rem 2rem;        font-size: var(--font-size-md); }
.btn-full { width: 100%; }
.btn-icon { padding: 0.5rem; width: 2rem; height: 2rem; }
.btn-icon.btn-sm { width: 1.75rem; height: 1.75rem; padding: 0.375rem; }
.btn-icon.btn-lg { width: 2.5rem;  height: 2.5rem;  padding: 0.625rem; }

/* Primary — Pulse Crimson */
.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: var(--color-surface-active);
    border-color: var(--color-text-secondary);
    box-shadow: 0 0 0 3px var(--color-primary-dim);
}

/* Secondary */
.btn-secondary {
    background: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn-secondary:hover {
    background: var(--color-surface-active);
    border-color: var(--color-text-secondary);
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

/* Outline — crimson border, no fill */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary-muted);
}
.btn-outline:hover {
    background: var(--color-primary-dim);
    border-color: var(--color-primary);
}

/* Danger */
.btn-danger {
    background: var(--color-danger-dim);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}
.btn-danger:hover {
    background: var(--color-danger);
    color: #ffffff;
    border-color: var(--color-danger);
}

/* Success */
.btn-success {
    background: var(--color-success-dim);
    color: var(--color-success);
    border-color: var(--color-success-border);
}
.btn-success:hover {
    background: var(--color-success);
    color: #ffffff;
    border-color: var(--color-success);
}

/* Theme selector */
.theme-btn {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.theme-btn:hover     { background: var(--color-surface-hover); color: var(--color-text); }
.theme-btn-active    { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); }


/* ============================================================
   INPUTS & FORMS
============================================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.label-required::after {
    content: ' *';
    color: var(--color-danger);
}

.form-hint  { font-size: var(--font-size-xs); color: var(--color-text-tertiary); line-height: 1.5; }
.form-error { font-size: var(--font-size-xs); color: var(--color-danger); }

.input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder { color: var(--color-text-tertiary); }
.input:hover        { border-color: var(--color-border-strong); }
.input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-dim);
}

.input-sm { padding: 0.375rem 0.625rem; font-size: var(--font-size-xs); }
.input-lg { padding: 0.75rem 1rem;      font-size: var(--font-size-base); }

.input-error       { border-color: var(--color-danger); }
.input-error:focus { box-shadow: 0 0 0 3px var(--color-danger-dim); border-color: var(--color-danger); }

textarea.input { resize: vertical; min-height: 5rem; }

select.input {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B96A3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}

/* Input with leading icon */
.input-wrap        { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-left: 2.25rem; }
.input-icon {
    position: absolute;
    left: 0.625rem;
    color: var(--color-text-tertiary);
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}


/* ============================================================
   CARDS
============================================================ */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: border-color var(--transition-fast);
}

.card:hover             { border-color: var(--color-border-strong); }
.card-sm                { padding: 0.75rem 1rem; }
.card-lg                { padding: 2rem; }
.card-flush             { padding: 0; }
.card-interactive       { cursor: pointer; }
.card-interactive:hover { background: var(--color-surface-hover); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem; /* ← THIS is the fix */
    border-bottom: 1px solid var(--color-border-subtle);
}

.card-title  { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); }

.card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
}

/* Status-tinted cards */
.card-success { border-color: var(--color-success-border); }
.card-warning { border-color: var(--color-warning-border); }
.card-danger  { border-color: var(--color-danger-border); }
.card-primary { border-color: var(--color-primary-muted); }


/* ============================================================
   TABLES & DATA ROWS
============================================================ */

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

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table thead tr { border-bottom: 1px solid var(--color-border); }

.table th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    background: var(--color-bg);
    white-space: nowrap;
    user-select: none;
}

.table th.sortable       { cursor: pointer; }
.table th.sortable:hover { color: var(--color-text-secondary); }

.table td {
    padding: 0.75rem 1rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}

.table tbody tr:last-child td    { border-bottom: none; }
.table tbody tr:hover td         { background: var(--color-surface-hover); }
.table tbody tr.row-selected td  { background: var(--color-primary-dim); }

/* Monitor list row */
.monitor-row {
    display: grid;
    /* mobile: name | status+actions stacked */
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background var(--transition-fast);
    cursor: pointer;
}

@media (min-width: 768px) {
    .monitor-row {
        /* name | uptime bar | response ms | status badge | actions */
        grid-template-columns: minmax(160px, 1fr) 300px 80px 70px 90px;
        gap: 1.25rem;
    }
}

.monitor-row:last-child { border-bottom: none; }
.monitor-row:hover      { background: var(--color-surface-hover); }

.monitor-row-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
}

.monitor-row-url {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monitor-row-stat {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: right;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.monitor-row-bar {
    display: none;
}

@media (min-width: 768px) {
    .monitor-row-bar {
        display: flex;
        align-items: center;
    }
}


/* ============================================================
   STATUS INDICATORS
============================================================ */

/* Status dot */
.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.status-dot-up       { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-success-dim); }
.status-dot-degraded { background: var(--color-warning); box-shadow: 0 0 0 2px var(--color-warning-dim); }
.status-dot-down     { background: var(--color-danger);  box-shadow: 0 0 0 2px var(--color-danger-dim); animation: pulse-down 1.5s ease infinite; }
.status-dot-paused   { background: var(--color-neutral); }
.status-dot-pending  { background: var(--color-neutral); animation: pulse-neutral 2s ease infinite; }

@keyframes pulse-down {
    0%, 100% { box-shadow: 0 0 0 2px var(--color-danger-dim); }
    50%       { box-shadow: 0 0 0 5px transparent; }
}
@keyframes pulse-neutral {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-up       { color: var(--color-success); background: var(--color-success-dim); border-color: var(--color-success-border); }
.badge-degraded { color: var(--color-warning); background: var(--color-warning-dim); border-color: var(--color-warning-border); }
.badge-down     { color: var(--color-danger);  background: var(--color-danger-dim);  border-color: var(--color-danger-border); }
.badge-paused   { color: var(--color-neutral); background: var(--color-neutral-dim); border-color: var(--color-neutral-border); }
.badge-primary  { color: var(--color-primary); background: var(--color-primary-dim); border-color: var(--color-primary-muted); }
.badge-info     { color: var(--color-info);    background: var(--color-info-dim);    border-color: var(--color-info-border); }

/* Monitor type tag */
.badge-type {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.125rem 0.375rem;
}

/* Role badges */
.badge-role-super    { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid #4C1D95; color: #A78BFA; background: #A78BFA1A; }
.badge-role-admin    { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-primary-muted);   color: var(--color-primary); background: var(--color-primary-dim); }
.badge-role-manager  { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-info-border);    color: var(--color-info);    background: var(--color-info-dim); }
.badge-role-tech     { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-warning-border);  color: var(--color-warning); background: var(--color-warning-dim); }
.badge-role-support  { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-neutral-border);  color: var(--color-neutral); background: var(--color-neutral-dim); }
.badge-role-customer { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-border-strong);  color: var(--color-text-secondary); background: var(--color-border); }


/* ============================================================
   NETPULSE LED
   Mirrors the physical hardware LED on the Raspberry Pi device.
   Green = healthy · Amber = cellular failover · Red = alert
============================================================ */

.netpulse-led {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.netpulse-led-green { background: var(--color-led-green); box-shadow: 0 0 8px 2px var(--color-led-glow-green); animation: led-breathe 3s ease-in-out infinite; }
.netpulse-led-amber { background: var(--color-led-amber); box-shadow: 0 0 8px 2px var(--color-led-glow-amber); animation: led-breathe 2s ease-in-out infinite; }
.netpulse-led-red   { background: var(--color-led-red);   box-shadow: 0 0 10px 3px var(--color-led-glow-red);  animation: led-flash 1s ease infinite; }

@keyframes led-breathe {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}
@keyframes led-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}


/* ============================================================
   ALERTS / FLASH MESSAGES
============================================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
    line-height: 1.5;
}

.alert-success { background: var(--color-success-dim); color: var(--color-success); border-color: var(--color-success-border); }
.alert-warning { background: var(--color-warning-dim); color: var(--color-warning); border-color: var(--color-warning-border); }
.alert-error   { background: var(--color-danger-dim);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.alert-info    { background: var(--color-info-dim);    color: var(--color-info);    border-color: var(--color-info-border); }
.alert-primary { background: var(--color-primary-dim); color: var(--color-primary); border-color: var(--color-primary-muted); }


/* ============================================================
   PAGE HEADER
============================================================ */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1.2;
}

.page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}


/* ============================================================
   UPTIME BAR (30-day visualization)
============================================================ */

.uptime-bar {
    display: flex;
    gap: 2px;
    align-items: center;
    height: 1.25rem;
    overflow: hidden;  /* ← add this */
}

.uptime-bar-segment          { width: 3px; height: 100%; border-radius: 1px; flex-shrink: 0; background: var(--color-border); }
.uptime-bar-segment-up       { background: var(--color-success); }
.uptime-bar-segment-degraded { background: var(--color-warning); }
.uptime-bar-segment-down     { background: var(--color-danger); }


/* ============================================================
   UTILITIES
============================================================ */

/* Spacing */
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mt-xl { margin-top: 2rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mb-xl { margin-bottom: 2rem; }

/* Text colors */
.text-muted    { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger); }
.text-info     { color: var(--color-info); }

/* Text sizes */
.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md   { font-size: var(--font-size-md); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }

/* Font weights */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Monospace value (uptime %, ms, IPs, ports) */
.mono-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary);
}

/* Large metric display */
.metric      { font-family: var(--font-mono); font-size: var(--font-size-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--color-text); }
.metric-unit { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-secondary); margin-left: 0.25rem; }

/* Dividers */
.divider        { height: 1px; background: var(--color-border);        border: none; margin: 1rem 0; }
.divider-subtle { height: 1px; background: var(--color-border-subtle); border: none; margin: 0.75rem 0; }

/* Truncate */
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

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


.lp-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 3rem 0 1.5rem;
    margin-top: auto;
}

.lp-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .lp-footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lp-footer-inner {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.lp-footer-brand {}

.lp-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lp-footer-nav-heading {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

.lp-footer-nav a {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.lp-footer-nav a:hover {
    color: var(--color-text);
}

.lp-footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lp-footer-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================================
PAGE STYLES — scoped to landing page
============================================================ */


     /* ── Hero ──────────────────────────────────────────────────── */
 .lp-hero {
     position: relative;
     padding: 5rem 1rem 4rem;
     text-align: center;
     overflow: hidden;
 }

.lp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
    opacity: 0.5;
}

.lp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.875rem;
    margin-bottom: 1.75rem;
}

.lp-hero-headline {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.lp-hero-headline em {
    font-style: normal;
    color: var(--color-primary);
}

.lp-hero-sub {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
}

.lp-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.lp-hero-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: 1rem;
    letter-spacing: 0.04em;
}

.lp-hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.pulse-logo-img {
    height: 4rem;
    width: auto;
    object-fit: contain;
}

/* ── Trust strip ───────────────────────────────────────────── */
.lp-trust-strip {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 0.625rem 0;
    font-size: var(--font-size-xs);
}

.lp-trust-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.lp-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lp-trust-divider {
    width: 1px;
    height: 1rem;
    background: var(--color-border);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .lp-trust-divider { display: none; }
    .lp-trust-items   { flex-direction: column; gap: 0.5rem; }
}

/* ── Sections ──────────────────────────────────────────────── */
.lp-section {
    padding: 5rem 0;
}

.lp-section-alt {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.lp-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* ── Monitor cards ─────────────────────────────────────────── */
.lp-monitor-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lp-monitor-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lp-monitor-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.lp-monitor-icon-primary { background: var(--color-primary-dim);  color: var(--color-primary);  border: 1px solid var(--color-primary-muted); }
.lp-monitor-icon-info    { background: var(--color-info-dim);     color: var(--color-info);     border: 1px solid var(--color-info-border); }
.lp-monitor-icon-warning { background: var(--color-warning-dim);  color: var(--color-warning);  border: 1px solid var(--color-warning-border); }
.lp-monitor-icon-success { background: var(--color-success-dim);  color: var(--color-success);  border: 1px solid var(--color-success-border); }

.lp-use-cases {
    list-style: none;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.lp-use-cases li {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    padding-left: 0.875rem;
    position: relative;
}

.lp-use-cases li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* ── Cron card ─────────────────────────────────────────────── */
.lp-cron-card { padding: 2rem; }

.lp-cron-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .lp-cron-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

.lp-cron-code-block {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.lp-code-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
}

.lp-code {
    padding: 1.25rem 1rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.8;
    color: var(--color-text-secondary);
    overflow-x: auto;
    margin: 0;
    white-space: pre;
}

.lp-code-comment { color: var(--color-text-tertiary); }
.lp-code-muted   { color: var(--color-text-secondary); }
.lp-code-dim     { color: var(--color-text-tertiary); }
.lp-code-key     { color: var(--color-primary); }
.lp-code-val     { color: var(--color-success); }

/* ── Steps ─────────────────────────────────────────────────── */
.lp-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 680px;
    margin: 0 auto;
}

.lp-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 0;
}

.lp-step-number {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-primary);
    opacity: 0.25;
    line-height: 1;
    flex-shrink: 0;
    width: 3rem;
    text-align: right;
    letter-spacing: -0.04em;
}

.lp-step-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.lp-step-connector {
    width: 2px;
    height: 2rem;
    background: var(--color-border);
    margin-left: calc(3rem + 0.875rem);
    border-radius: var(--radius-full);
}

@media (min-width: 768px) {
    .lp-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        max-width: 960px;
        align-items: start;
    }
    .lp-step {
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
        text-align: center;
    }
    .lp-step-number {
        width: auto;
        text-align: center;
        font-size: var(--font-size-2xl);
    }
    .lp-step-connector {
        display: none;
    }
}

/* ── Smart alerting features ───────────────────────────────── */
.lp-alert-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lp-alert-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.lp-alert-feature i {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* ── Incident timeline mock ────────────────────────────────── */
.lp-incident-mock {
    padding: 1.5rem;
}

.lp-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lp-timeline-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem 0;
}

.lp-timeline-connector {
    width: 2px;
    height: 1.5rem;
    background: var(--color-border);
    margin-left: 0.4375rem;
    border-radius: var(--radius-full);
}

.lp-timeline-dot {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 0.25rem;
    border: 2px solid;
}

.lp-timeline-dot-danger  { background: var(--color-danger-dim);  border-color: var(--color-danger); }
.lp-timeline-dot-neutral { background: var(--color-neutral-dim); border-color: var(--color-neutral); }
.lp-timeline-dot-success { background: var(--color-success-dim); border-color: var(--color-success); }

/* ── Status page mock ──────────────────────────────────────── */
.lp-uptime-mini {
    height: 1rem;
}

.lp-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ── Coming soon ───────────────────────────────────────────── */
.lp-coming-soon-section {
    text-align: center;
}

.lp-coming-soon-inner {
    max-width: 600px;
    margin: 0 auto;
}

.lp-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary-dim);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-muted);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.875rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lp-coming-soon-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.lp-coming-soon-pills span {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}

/* ── Pricing ───────────────────────────────────────────────── */
.lp-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

@media (min-width: 640px) {
    .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .lp-pricing-grid { grid-template-columns: repeat(4, 1fr); }
}

.lp-plan-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.5rem;
    position: relative;
}

.lp-plan-featured {
    box-shadow: 0 0 0 1px var(--color-primary), 0 8px 32px var(--color-primary-dim);
}

.lp-plan-popular {
    position: absolute;
    top: -0.875rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.875rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.lp-plan-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

.lp-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
}

.lp-plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    flex: 1;
}

.lp-plan-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Audience cards ────────────────────────────────────────── */
.lp-audience-card {
    display: flex;
    flex-direction: column;
}

.lp-audience-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-dim);
    border: 1px solid var(--color-primary-muted);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ── CTA section ───────────────────────────────────────────── */
.lp-cta-section {
    position: relative;
    padding: 6rem 1rem;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
}

.lp-cta-grid {
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, black 20%, transparent 80%);
    opacity: 0.4;
}

.lp-cta-checks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    letter-spacing: 0.04em;
}

.lp-cta-checks span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ── Mobile overrides ──────────────────────────────────────── */
@media (max-width: 767px) {
    .lp-section  { padding: 3rem 0; }
    .lp-cta-section { padding: 4rem 1rem; }

    .lp-status-mock { order: 1 !important; }
    .lp-status-mock + div { order: 2 !important; }
}

/* MARKDOWN CSS */
.prose {
    line-height: 1.6;
}

.prose h1,
.prose h2,
.prose h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose p {
    margin-bottom: 1rem;
}

.prose hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid var(--color-border-subtle);
}

.prose ul {
    margin: 1rem 0 1rem 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
}