/* ── LEXI — Global Styles ──────────────────────────────────────── */

:root {
    --lexi-primary:       #3b82f6;
    --lexi-primary-dark:  #2563eb;
    --lexi-secondary:     #06b6d4;
    --lexi-success:       #22c55e;
    --lexi-warning:       #f59e0b;
    --lexi-danger:        #ef4444;

    --lexi-bg:            #020617;
    --lexi-bg-card:       #0f172a;
    --lexi-bg-surface:    #1e293b;
    --lexi-bg-elevated:   #334155;

    --lexi-text:          #f1f5f9;
    --lexi-text-muted:    #94a3b8;
    --lexi-text-dim:      #64748b;

    --lexi-border:        #1e293b;
    --lexi-border-mid:    #334155;
    --lexi-border-high:   #475569;

    --lexi-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    --lexi-display: 'Space Grotesk', 'Inter', sans-serif;
    --lexi-radius-sm: 3px;
    --lexi-radius:    4px;
    --lexi-radius-md: 6px;
}

html, body {
    font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:             var(--lexi-bg);
    color:                  var(--lexi-text);
    margin:                 0;
    padding:                0;
    min-height:             100vh;
    font-size:              15px;
    line-height:            1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--lexi-display);
}

a:focus, button:focus { outline: none; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    padding: 0.7rem;
    background: var(--lexi-bg-elevated);
    color: var(--lexi-text-muted);
    text-align: center;
    font-size: 0.85rem;
}

/* ── Navbar ─────────────────────────────────────────────────────── */

.navbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.1rem 2.5rem;
    background:      rgb(2, 6, 23);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom:   1px solid rgba(55, 65, 81, 0.5);
    box-shadow:      0 4px 30px rgba(0, 0, 0, 0.3);
    position:        sticky;
    top:             0;
    z-index:         100;
}

.navbar-brand {
    font-size:       1.2rem;
    font-weight:     700;
    color:           var(--lexi-text);
    text-decoration: none;
    letter-spacing:  -0.02em;
    outline:         none;
    display:         flex;
    align-items:     center;
    gap:             0;
}

.brand-dot {
    display:       inline-block;
    width:         6px;
    height:        6px;
    background:    var(--lexi-primary);
    border-radius: 50%;
    margin-right:  8px;
    box-shadow:    0 0 8px rgba(59, 130, 246, 0.8),
                   0 0 16px rgba(59, 130, 246, 0.4);
    flex-shrink:   0;
    position:      relative;
    top:           -1px;
}

.nav-ghost {
    color:           var(--lexi-text-muted);
    text-decoration: none;
    font-size:       0.875rem;
    transition:      color 0.15s;
}

.nav-ghost:hover { color: var(--lexi-text); }
.nav-ghost::after, .nav-cta::after, .lang-toggle a::after { display: none !important; }

.navbar-links {
    display:     flex;
    gap:         1.5rem;
    align-items: center;
}

.navbar-links a {
    color:           var(--lexi-text-muted);
    text-decoration: none;
    font-size:       0.875rem;
    font-weight:     450;
    letter-spacing:  0.01em;
    transition:      color 0.15s;
    padding:         0.3rem 0;
    position:        relative;
}

.navbar-links a:hover { color: var(--lexi-text); }

.navbar-links a::after {
    content:       '';
    position:      absolute;
    bottom:        -2px;
    left:          0;
    right:         0;
    height:        1px;
    background:    var(--lexi-primary);
    transform:     scaleX(0);
    transition:    transform 0.2s;
}

.navbar-links a:hover::after { transform: scaleX(1); }

.nav-sep {
    width:      1px;
    height:     16px;
    background: var(--lexi-border-mid);
    flex-shrink: 0;
}

/* ── Section layout ─────────────────────────────────────────────── */

.section {
    padding:   5rem 2rem;
    max-width: 1040px;
    margin:    0 auto;
}

.section-title {
    font-size:      1.75rem;
    font-weight:    600;
    margin-bottom:  0.5rem;
    letter-spacing: -0.02em;
}

.section-subtitle {
    color:         var(--lexi-text-muted);
    font-size:     0.975rem;
    margin-bottom: 2rem;
    max-width:     600px;
}

/* ── Hero ───────────────────────────────────────────────────────── */

.hero-section {
    padding-top:    8rem;
    padding-bottom: 6rem;
}

/* ── Hero split layout ───────────────────────────────────────────────── */

.hero-split {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    min-height:  calc(92vh - 56px);
    max-width:   1200px;
    margin:      0 auto;
    padding:     0 3rem;
    align-items: center;
    gap:         5rem;
}

.hero-left  { padding: 5rem 0; }
.hero-right { display: flex; align-items: center; justify-content: center; }

.hero-eyebrow {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    color:          var(--lexi-primary);
    margin-bottom:  1.5rem;
    letter-spacing: 0.04em;
}

/* ── Hero diff card ──────────────────────────────────────────────────── */

.hero-diff-card {
    background:    rgba(15, 23, 42, 0.7);
    border:        1px solid rgba(55, 65, 81, 0.5);
    border-radius: 16px;
    overflow:      hidden;
    width:         100%;
    max-width:     420px;
    box-shadow:    0 20px 60px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
    backdrop-filter: blur(12px);
}

.hdc-header {
    background:    var(--lexi-bg-surface);
    border-bottom: 1px solid var(--lexi-border);
    padding:       0.75rem 1.25rem;
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
}

.hdc-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--lexi-border-high);
}

.hdc-title {
    font-family:    var(--lexi-mono);
    font-size:      0.68rem;
    color:          var(--lexi-text-dim);
    letter-spacing: 0.04em;
    margin-left:    0.5rem;
}

.hdc-body { padding: 0; }

.hdc-line {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    padding:     0.875rem 1.25rem;
    font-family: var(--lexi-mono);
    font-size:   0.875rem;
}

.hdc-line.removed {
    background:  rgba(239, 68, 68, 0.06);
    border-left: 3px solid rgba(239, 68, 68, 0.4);
    color:       rgba(220, 130, 130, 0.85);
}

.hdc-line.added {
    background:  rgba(34, 197, 94, 0.06);
    border-left: 3px solid rgba(34, 197, 94, 0.5);
    color:       var(--lexi-text);
    border-top:  1px solid var(--lexi-border);
}

.hdc-sign {
    font-weight: 700;
    font-size:   1rem;
    min-width:   12px;
}

.hdc-line.removed .hdc-sign { color: rgba(239, 68, 68, 0.6); }
.hdc-line.added   .hdc-sign { color: rgba(34, 197, 94, 0.7); }

.hdc-url {
    word-break: break-all;
    font-size:  0.8rem;
}

.hdc-footer {
    font-size:     0.8rem;
    color:         var(--lexi-text-muted);
    padding:       0.75rem 1.25rem;
    border-top:    1px solid var(--lexi-border);
    font-family:   var(--lexi-mono);
    letter-spacing: 0.01em;
}

/* ── Hero terminal card ──────────────────────────────────────────── */

.hero-terminal {
    background:    rgba(15, 23, 42, 0.7);
    border:        1px solid rgba(55, 65, 81, 0.5);
    border-radius: 16px;
    overflow:      hidden;
    width:         100%;
    max-width:     420px;
}

.hero-term-body {
    padding: 1.25rem;
}

.hero-term-section {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

.hero-term-label {
    font-family:    var(--lexi-mono);
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--lexi-text-dim);
    margin-bottom:  0.15rem;
}

.hero-term-code {
    font-family: var(--lexi-mono);
    font-size:   0.8rem;
    color:       var(--lexi-text-muted);
    line-height: 1.5;
}

.htc-kw  { color: #c084fc; font-weight: 600; }
.htc-str { color: #67e8f9; }
.htc-dim { color: var(--lexi-text-dim); }
.htc-green { color: #4ade80; }

.hero-term-divider {
    height:     1px;
    background: var(--lexi-border);
    margin:     0.9rem 0;
}

.hero-term-metric {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.2rem 0;
}

.hero-term-metric-label {
    font-family: var(--lexi-mono);
    font-size:   0.78rem;
    color:       var(--lexi-text-muted);
}

.hero-term-metric-val {
    font-family:    var(--lexi-mono);
    font-size:      0.85rem;
    font-weight:    600;
    color:          var(--lexi-text);
    font-variant-numeric: tabular-nums;
}

.hero-term-metric-val.htc-green { color: #4ade80; }
.hero-term-metric-val.htc-dim   { color: var(--lexi-text-dim); text-decoration: line-through; }

.hero-term-saved {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    margin-top:    0.6rem;
    padding:       0.6rem 0.75rem;
    background:    rgba(34, 197, 94, 0.08);
    border:        1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    font-family:   var(--lexi-mono);
    font-size:     0.78rem;
    font-weight:   600;
    color:         #4ade80;
}

.hero-term-saved .material-symbols-outlined {
    font-size: 1.1rem;
}

.eyebrow {
    font-family:    var(--lexi-mono);
    font-size:      0.72rem;
    font-weight:    400;
    letter-spacing: 0.12em;
    color:          var(--lexi-text-muted);
    text-transform: uppercase;
    margin-bottom:  1.75rem;
}

.hero-title {
    font-family:    var(--lexi-display);
    font-size:      6rem;
    font-weight:    700;
    line-height:    0.95;
    letter-spacing: -0.04em;
    color:          var(--lexi-text);
    margin:         0 0 1.5rem 0;
}

.hero-title-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #3b82f6 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 6s ease infinite;
}

.hero-sub {
    color:         var(--lexi-text-muted);
    font-size:     1.2rem;
    line-height:   1.5;
    margin-bottom: 2.5rem;
    font-weight:   400;
}

/* ── URL diff block ─────────────────────────────────────────────── */

.diff-block {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: var(--lexi-radius);
    font-family:   var(--lexi-mono);
    font-size:     0.8rem;
    overflow:      hidden;
    max-width:     520px;
    margin-bottom: 2rem;
}

.diff-label {
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--lexi-text-dim);
    background:     var(--lexi-bg-surface);
    border-bottom:  1px solid var(--lexi-border);
    padding:        0.4rem 1rem;
}

.diff-line {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     0.55rem 1rem;
}

.diff-line.removed {
    background:  rgba(239, 68, 68, 0.06);
    border-left: 3px solid rgba(239, 68, 68, 0.35);
    color:       rgba(220, 120, 120, 0.75);
}

.diff-line.added {
    background:  rgba(34, 197, 94, 0.06);
    border-left: 3px solid rgba(34, 197, 94, 0.45);
    color:       var(--lexi-text);
}

.diff-sign {
    font-weight: 600;
    min-width:   10px;
    color:       var(--lexi-text-dim);
}

.diff-line.removed .diff-sign { color: rgba(239, 68, 68, 0.55); }
.diff-line.added   .diff-sign { color: rgba(34, 197, 94, 0.65); }

.hero-cta {
    display:     flex;
    gap:         1rem;
    align-items: center;
    flex-wrap:   wrap;
}

.hero-meta {
    font-size:  0.85rem;
    color:      var(--lexi-text-muted);
    margin-top: 0.6rem;
}

/* ── Eyebrow bar (section label) ─────────────────────────────────── */

.eyebrow-bar {
    font-family:    var(--lexi-mono);
    font-size:      0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    padding-bottom: 1rem;
    border-bottom:  1px solid var(--lexi-border);
    margin-bottom:  0;
}

/* ── Response trace block ───────────────────────────────────────── */

.trace-section { padding-top: 0; }

.trace-block {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: var(--lexi-radius-md);
    overflow:      hidden;
    max-width:     660px;
}

.trace-topbar {
    background:    var(--lexi-bg-surface);
    border-bottom: 1px solid var(--lexi-border);
    padding:       0.5rem 1rem;
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
}

.trace-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--lexi-border-high);
}

.trace-label {
    font-family:    var(--lexi-mono);
    font-size:      0.67rem;
    color:          var(--lexi-text-dim);
    letter-spacing: 0.04em;
    margin-left:    0.5rem;
}

.trace-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         0.42rem 1rem;
    border-bottom:   1px solid var(--lexi-border);
    font-family:     var(--lexi-mono);
    font-size:       0.78rem;
    gap:             1rem;
}

.trace-row:last-child { border-bottom: none; }

.trace-key {
    color:       var(--lexi-text-muted);
    white-space: nowrap;
}

.trace-val {
    color:                var(--lexi-text);
    font-weight:          500;
    font-variant-numeric: tabular-nums;
    text-align:           right;
}

.trace-row.hl             { background: rgba(59, 130, 246, 0.05); }
.trace-row.hl .trace-key  { color: var(--lexi-secondary); }
.trace-row.hl .trace-val  { color: var(--lexi-primary); }

.trace-note {
    font-size:   0.82rem;
    color:       var(--lexi-text-muted);
    margin-top:  0.75rem;
    max-width:   660px;
    line-height: 1.6;
}

/* ── Spec list ──────────────────────────────────────────────────── */

.spec-section { padding-top: 0; }

.spec-list {
    border:        1px solid var(--lexi-border-mid);
    border-radius: var(--lexi-radius-md);
    overflow:      hidden;
    margin-top:    1.25rem;
}

.spec-row {
    display:               grid;
    grid-template-columns: 155px 1fr;
    gap:                   1.5rem;
    padding:               0.875rem 1.25rem;
    border-bottom:         1px solid var(--lexi-border);
    font-size:             0.875rem;
    align-items:           baseline;
}

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

.spec-key {
    font-family:    var(--lexi-mono);
    font-size:      0.75rem;
    color:          var(--lexi-text-muted);
    font-weight:    500;
    letter-spacing: 0.01em;
    white-space:    nowrap;
}

.spec-val {
    color:       var(--lexi-text);
    line-height: 1.55;
}

.spec-val code {
    font-family:   var(--lexi-mono);
    font-size:     0.75rem;
    background:    var(--lexi-bg-surface);
    padding:       0.1rem 0.3rem;
    border-radius: var(--lexi-radius-sm);
    color:         var(--lexi-secondary);
}

/* ── Feature cards ──────────────────────────────────────────────── */

.feature-card {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: var(--lexi-radius-md);
    padding:       1.5rem;
    transition:    border-color 0.15s;
}

.feature-card:hover { border-color: var(--lexi-border-high); }

.feature-card h3 {
    font-size:      0.95rem;
    font-weight:    600;
    margin-bottom:  0.4rem;
    color:          var(--lexi-text);
    letter-spacing: -0.01em;
}

.feature-card p {
    color:       var(--lexi-text-muted);
    font-size:   0.85rem;
    line-height: 1.65;
    margin:      0;
}

.features-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   1rem;
    margin-top:            1.5rem;
}

/* ── Stats grid ─────────────────────────────────────────────────── */

.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   1rem;
    margin-bottom:         2rem;
}

.stat-card {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 12px;
    padding:       1.35rem 1.5rem;
    min-width:     0;
    transition:    border-color 0.2s, transform 0.2s;
}

.stat-card:hover {
    border-color: var(--lexi-border-high);
    transform:    translateY(-1px);
}

.stat-card .label {
    font-family:    var(--lexi-mono);
    font-size:      0.73rem;
    color:          var(--lexi-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  0.55rem;
    font-weight:    600;
    line-height:    1.35;
}

.stat-card .value {
    font-size:            2rem;
    font-weight:          700;
    line-height:          1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing:       -0.03em;
    color:                var(--lexi-text);
}

.stat-card .trend {
    font-size:   0.75rem;
    margin-top:  0.375rem;
    font-family: var(--lexi-mono);
}

.trend-up      { color: #4ade80; }
.trend-down    { color: #f87171; }
.trend-neutral { color: var(--lexi-text-dim); }

/* ── Code blocks ─────────────────────────────────────────────────── */

.code-block {
    background:    #060a0f;
    border:        1px solid var(--lexi-border-mid);
    border-left:   3px solid var(--lexi-primary);
    border-radius: var(--lexi-radius);
    padding:       1.125rem 1.375rem;
    font-family:   var(--lexi-mono);
    font-size:     0.875rem;
    overflow-x:    auto;
    color:         #c0cad8;
    line-height:   1.65;
}

.code-block pre { margin: 0; }

/* ── Auth pages ──────────────────────────────────────────────────── */

.auth-page {
    min-height:      calc(100vh - 57px - 52px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3rem 1.5rem;
}

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

.auth-brand {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    justify-content: center;
    margin-bottom:   1.75rem;
    font-size:       1.05rem;
    font-weight:     700;
    color:           var(--lexi-text);
    letter-spacing:  -0.01em;
    text-decoration: none;
}

.auth-brand-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--lexi-primary);
    box-shadow:    0 0 8px rgba(59,130,246,0.55);
    flex-shrink:   0;
}

.auth-card {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-top:    2px solid var(--lexi-primary);
    border-radius: 6px;
    padding:       2.25rem 2rem;
}

.auth-title {
    font-size:      1.5rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.4rem;
    text-align:     center;
}

.auth-sub {
    font-size:   0.875rem;
    color:       var(--lexi-text-muted);
    text-align:  center;
    margin:      0 0 1.75rem;
    line-height: 1.55;
}

.auth-foot {
    text-align:  center;
    margin-top:  1.25rem;
    font-size:   0.875rem;
    color:       var(--lexi-text-muted);
    line-height: 1.9;
}

.auth-foot a {
    color:           var(--lexi-primary);
    text-decoration: none;
}

.auth-foot a:hover { text-decoration: underline; }

.auth-terms {
    margin-top:  1.5rem;
    font-size:   0.82rem;
    color:       var(--lexi-text-muted);
    text-align:  center;
    line-height: 1.6;
}

.auth-terms a {
    color:                 var(--lexi-text-muted);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

.auth-success {
    background:    rgba(34,197,94,0.06);
    border:        1px solid rgba(34,197,94,0.2);
    border-radius: 4px;
    padding:       0.875rem 1rem;
    font-size:     0.875rem;
    color:         #4ade80;
    margin-bottom: 1.25rem;
    line-height:   1.5;
}

.auth-error {
    background:    rgba(239,68,68,0.06);
    border:        1px solid rgba(239,68,68,0.2);
    border-radius: 4px;
    padding:       0.875rem 1rem;
    font-size:     0.875rem;
    color:         #f87171;
    margin-bottom: 1.25rem;
    line-height:   1.5;
}

/* legacy auth-key-box removed — replaced by reg-v2-key-box */

/* ── Register success state v2 ───────────────────────────────────── */

.reg-v2-success-icon {
    text-align:     center;
    margin-bottom:  1rem;
}
.reg-v2-success-icon .material-symbols-outlined {
    font-size: 44px;
    color:     #22c55e;
}

.reg-v2-key-label {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    font-family:    var(--lexi-mono);
    font-size:      0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    margin-bottom:  0.5rem;
}

.reg-v2-key-box {
    background:      var(--lexi-bg-surface);
    border:          1px solid rgba(34,197,94,0.25);
    border-radius:   8px;
    padding:         0.875rem 1rem;
    margin-bottom:   0.5rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
}
.reg-v2-key-box code {
    font-family:  var(--lexi-mono);
    font-size:    0.78rem;
    color:        var(--lexi-text);
    word-break:   break-all;
    line-height:  1.5;
}

.reg-v2-key-note {
    font-size:      0.82rem;
    color:          var(--lexi-text-dim);
    line-height:    1.55;
    margin-bottom:  1.5rem;
}

.reg-v2-quickstart {
    border-radius:  12px;
    padding:        1.25rem;
    margin-bottom:  1.25rem;
}

.reg-v2-qs-label {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    font-family:    var(--lexi-mono);
    font-size:      0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #06b6d4;
    margin-bottom:  1rem;
}

.reg-v2-qs-step {
    display:       flex;
    gap:           0.75rem;
    align-items:   flex-start;
    font-size:     0.9rem;
    color:         var(--lexi-text);
    line-height:   1.55;
    margin-bottom: 1rem;
}
.reg-v2-qs-step:last-of-type { margin-bottom: 0.75rem; }

.reg-v2-qs-num {
    flex-shrink:     0;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--lexi-mono);
    font-size:       0.68rem;
    margin-top:      0.1rem;
}
.reg-v2-qs-num.cyan   { background: rgba(6,182,212,0.12); color: #06b6d4; border: 1px solid rgba(6,182,212,0.25); }
.reg-v2-qs-num.purple { background: rgba(168,85,247,0.12); color: #a855f7; border: 1px solid rgba(168,85,247,0.25); }

.reg-v2-qs-code {
    margin-top:    0.4rem;
    font-family:   var(--lexi-mono);
    font-size:     0.75rem;
    background:    var(--lexi-bg-elevated);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 6px;
    padding:       0.5rem 0.7rem;
    color:         var(--lexi-text);
    word-break:    break-all;
    line-height:   1.5;
}

.reg-v2-qs-sep      { color: var(--lexi-text-muted); }
.reg-v2-qs-provider { color: var(--lexi-text-muted); font-style: italic; }

.reg-v2-qs-docs {
    display:         flex;
    align-items:     center;
    gap:             0.35rem;
    font-size:       0.85rem;
    color:           var(--lexi-text-muted);
    text-decoration: none;
    margin-top:      0.875rem;
    padding-top:     0.875rem;
    border-top:      1px solid var(--lexi-border);
    transition:      color 0.15s;
}
.reg-v2-qs-docs:hover { color: #06b6d4; }

@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.25rem; }
}

/* ── 404 page ───────────────────────────────────────────────────── */

.notfound-page {
    min-height:      calc(100vh - 57px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         4rem 1.5rem;
}

.notfound-content {
    text-align: center;
    max-width:  460px;
}

.notfound-code {
    font-family:    'JetBrains Mono', monospace;
    font-size:      6rem;
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.06);
    margin-bottom:  0.5rem;
}

.notfound-heading {
    font-size:      1.5rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  0.75rem;
}

.notfound-sub {
    font-size:      0.95rem;
    color:          var(--lexi-text-muted);
    line-height:    1.6;
    margin-bottom:  2rem;
}

.notfound-links {
    display:  flex;
    gap:      0.75rem;
    justify-content: center;
}

.notfound-btn-primary {
    padding:          0.6rem 1.5rem;
    background:       var(--lexi-primary);
    color:            #fff;
    border-radius:    6px;
    font-size:        0.875rem;
    font-weight:      500;
    text-decoration:  none;
    transition:       opacity 0.15s;
}

.notfound-btn-primary:hover { opacity: 0.85; }

.notfound-btn-ghost {
    padding:          0.6rem 1.5rem;
    background:       rgba(255, 255, 255, 0.04);
    border:           1px solid rgba(255, 255, 255, 0.08);
    color:            var(--lexi-text-muted);
    border-radius:    6px;
    font-size:        0.875rem;
    font-weight:      500;
    text-decoration:  none;
    transition:       background 0.15s;
}

.notfound-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ── Auth v2 — centered card layout ──────────────────────────────── */

.auth-page-v2 {
    min-height:      calc(100vh - 57px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3rem 1.5rem;
}

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

.auth-form-wrap {
    width: 100%;
}

.auth-brand-v2 {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    justify-content: center;
    margin-bottom:   1.75rem;
    font-size:       1.1rem;
    font-weight:     700;
    color:           var(--lexi-text);
    letter-spacing:  -0.01em;
    text-decoration: none;
}

.auth-card-v2 {
    padding:       2.5rem 2.25rem;
    border-radius: 16px;
}

.auth-title-v2 {
    font-family:    var(--lexi-display);
    font-size:      1.5rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.4rem;
    text-align:     center;
}

.auth-sub-v2 {
    font-size:   0.925rem;
    color:       var(--lexi-text-muted);
    text-align:  center;
    margin:      0 0 1.75rem;
    line-height: 1.6;
}

.auth-link-muted {
    font-size:       0.875rem;
    color:           var(--lexi-text-muted);
    text-decoration: none;
    transition:      color 0.15s;
}

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

.auth-foot-v2 {
    text-align:  center;
    margin-top:  1.5rem;
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.9;
}

.auth-foot-v2 a {
    color:           var(--lexi-primary);
    text-decoration: none;
}

.auth-foot-v2 a:hover { text-decoration: underline; }

.auth-terms-v2 {
    margin-top:  1.5rem;
    font-size:   0.85rem;
    color:       var(--lexi-text-muted);
    text-align:  center;
    line-height: 1.6;
}

.auth-terms-v2 a {
    color:                 var(--lexi-text-muted);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

/* Feature pills below card */
.auth-features-row {
    display:         flex;
    justify-content: center;
    gap:             1.25rem;
    margin-top:      1.5rem;
    flex-wrap:       wrap;
}

.auth-feat-pill {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.82rem;
    color:       var(--lexi-text-muted);
}

.auth-feat-pill .material-symbols-outlined {
    font-size: 1rem;
}

@media (max-width: 480px) {
    .auth-card-v2 {
        padding: 2rem 1.5rem;
    }
    .auth-features-row {
        gap: 0.75rem;
    }
}

/* ── Dashboard layout ───────────────────────────────────────────── */

.dashboard-wrapper {
    display:    flex;
    min-height: calc(100vh - 57px);
    font-size:  16px;          /* pin dashboard/admin to original base size */
}

/* Legacy sidebar (kept for compat) */
.dashboard-sidebar {
    width:        220px;
    background:   var(--lexi-bg-card);
    border-right: 1px solid var(--lexi-border);
    padding:      1.5rem 0;
    flex-shrink:  0;
    position:     sticky;
    top:          57px;
    height:       calc(100vh - 57px);
    overflow-y:   auto;
}

.dashboard-content {
    flex:       1;
    padding:    2.25rem 2.5rem;
    overflow-y: auto;
    max-width:  900px;
}

/* ── Sidebar v2 ──────────────────────────────────────────────────── */

.dashboard-sidebar-v2 {
    width:        240px;
    background:   linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, var(--lexi-bg) 100%);
    border-right: 1px solid var(--lexi-border);
    padding:      1.5rem 0.75rem;
    flex-shrink:  0;
    position:     sticky;
    top:          57px;
    height:       calc(100vh - 57px);
    overflow-y:   auto;
}

.dashboard-content-v2 {
    flex:       1;
    padding:    2.5rem 3rem;
    overflow-y: auto;
    max-width:  960px;
}

.dsb-section-label {
    padding:        0.35rem 0.85rem 0.45rem;
    font-family:    var(--lexi-mono);
    font-size:      0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-muted);
    margin-top:     1rem;
    margin-bottom:  0.25rem;
    font-weight:    600;
}
.dsb-section-label:first-child { margin-top: 0; }

.dsb-link {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    padding:         0.6rem 0.85rem;
    margin-bottom:   0.2rem;
    color:           var(--lexi-text-muted);
    text-decoration: none;
    font-size:       0.875rem;
    font-weight:     500;
    border-radius:   8px;
    transition:      color 0.15s, background 0.15s;
}

.dsb-link .material-symbols-outlined {
    font-size: 1.15rem;
    opacity:   0.55;
}

.dsb-link:hover {
    color:      var(--lexi-text);
    background: var(--lexi-bg-surface);
}

.dsb-link:hover .material-symbols-outlined {
    opacity: 0.9;
}

.dsb-link.active {
    color:      var(--lexi-text);
    background: rgba(59, 130, 246, 0.08);
}

.dsb-link.active .material-symbols-outlined {
    opacity: 1;
    color:   var(--lexi-primary);
}

/* Admin badge in navbar */
.admin-badge {
    font-family:    var(--lexi-mono);
    font-size:      0.65rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          #a855f7;
    background:     rgba(168, 85, 247, 0.1);
    border:         1px solid rgba(168, 85, 247, 0.25);
    border-radius:  4px;
    padding:        0.15rem 0.4rem;
    margin-left:    0.35rem;
    vertical-align: middle;
}

.sidebar-section-label {
    padding:        0 1.25rem 0.5rem;
    font-family:    var(--lexi-mono);
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:          var(--lexi-text-muted);
    margin-top:     0.75rem;
}

.sidebar-link {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    padding:         0.6rem 1.25rem;
    color:           var(--lexi-text-muted);
    text-decoration: none;
    font-size:       0.875rem;
    font-weight:     500;
    transition:      color 0.1s, background 0.1s;
}

.sidebar-link:hover {
    color:      var(--lexi-text);
    background: var(--lexi-bg-surface);
}

.sidebar-link.active {
    color:        var(--lexi-text);
    background:   rgba(59, 130, 246, 0.07);
    border-right: 2px solid var(--lexi-primary);
}

.sidebar-link .mud-icon-root { opacity: 0.6; }
.sidebar-link.active .mud-icon-root { opacity: 1; color: var(--lexi-primary); }

/* ── Dashboard page chrome ──────────────────────────────────────── */

.db-page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    margin-bottom:   2rem;
    padding-bottom:  1.25rem;
    border-bottom:   1px solid var(--lexi-border);
    gap:             1rem;
}

.db-page-title {
    font-size:      1.75rem;
    font-weight:    700;
    letter-spacing: -0.035em;
    color:          var(--lexi-text);
    margin:         0.2rem 0 0;
    line-height:    1.15;
}

.db-section-title {
    font-family:    var(--lexi-mono);
    font-size:      0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    margin:         2rem 0 0.875rem;
}

/* ── Dashboard page chrome v2 ─────────────────────────────────── */

.db-page-header-v2 {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    margin-bottom:   2rem;
    padding-bottom:  1.25rem;
    border-bottom:   1px solid var(--lexi-border);
}

.db-header-icon-box {
    width:          44px;
    height:         44px;
    border-radius:  10px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
    transition:     background 0.2s;
}

.db-header-icon-box .material-symbols-outlined {
    font-size: 22px;
}

.db-hib-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
    color:      #06b6d4;
}

.db-hib-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    color:      #22c55e;
}

.db-hib-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05));
    color:      #a855f7;
}

.db-hib-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    color:      #f59e0b;
}

.db-header-label {
    font-family:    var(--lexi-mono);
    font-size:      0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    line-height:    1;
}

.db-page-title-v2 {
    font-size:      1.75rem;
    font-weight:    700;
    letter-spacing: -0.035em;
    color:          var(--lexi-text);
    margin:         0.2rem 0 0;
    line-height:    1.15;
}

.db-section-title-v2 {
    font-family:    var(--lexi-mono);
    font-size:      0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    margin:         2rem 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom:  1px solid var(--lexi-border);
}

/* ── Dashboard table ────────────────────────────────────────────── */

.db-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.875rem;
}

.db-table thead th {
    font-family:    var(--lexi-mono);
    font-size:      0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    padding:        0 1rem 0.65rem 0;
    font-weight:    500;
    text-align:     left;
    white-space:    nowrap;
    border-bottom:  1px solid var(--lexi-border-mid);
}

.db-table tbody td {
    padding:              0.8rem 1rem 0.8rem 0;
    color:                var(--lexi-text);
    border-bottom:        1px solid var(--lexi-border);
    vertical-align:       middle;
    font-variant-numeric: tabular-nums;
}

.db-table tbody tr:last-child td { border-bottom: none; }

.db-table th:first-child,
.db-table td:first-child { padding-left: 0; }

.db-table td.td-strong { color: var(--lexi-text); font-weight: 500; }
.db-table td.td-mono   { font-family: var(--lexi-mono); font-size: 0.8rem; color: var(--lexi-text); }
.db-table td.td-dim    { color: var(--lexi-text-muted); }
.db-table td.td-green  { color: #4ade80; font-family: var(--lexi-mono); font-variant-numeric: tabular-nums; }
.db-table td.td-blue   { color: var(--lexi-primary); font-family: var(--lexi-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.db-table td.td-cyan   { color: var(--lexi-secondary); font-family: var(--lexi-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Sortable columns ──────────────────────────────────────────── */

.db-sortable {
    cursor:     pointer;
    user-select: none;
    position:   relative;
    transition: color 0.15s;
}

.db-sortable:hover { color: var(--lexi-text); }

.db-sortable::after {
    content:     '⇅';
    margin-left: 0.35rem;
    opacity:     0.25;
    font-size:   0.65rem;
}

.db-sort-asc::after  { content: '↑'; opacity: 0.7; color: var(--lexi-primary); }
.db-sort-desc::after { content: '↓'; opacity: 0.7; color: var(--lexi-primary); }

/* ── Badges ─────────────────────────────────────────────────────── */

.db-badge {
    display:     inline-flex;
    align-items: center;
    padding:     0.2rem 0.55rem;
    border-radius: 3px;
    font-family: var(--lexi-mono);
    font-size:   0.68rem;
    font-weight: 500;
}

.db-badge--active  { background: rgba(34,197,94,0.1);  color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.db-badge--revoked { background: rgba(239,68,68,0.08); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.db-badge--prod    { background: rgba(59,130,246,0.1); color: var(--lexi-primary); border: 1px solid rgba(59,130,246,0.25); }
.db-badge--dev     { background: var(--lexi-bg-surface); color: var(--lexi-text-dim); border: 1px solid var(--lexi-border-mid); }

/* ── Key banner (new key revealed) ──────────────────────────────── */

.db-key-banner {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-left:   3px solid var(--lexi-primary);
    border-radius: 6px;
    padding:       1.5rem 2rem;
    margin-bottom: 1.75rem;
}

.db-key-banner-label {
    font-family:    var(--lexi-mono);
    font-size:      0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--lexi-primary);
    margin-bottom:  0.75rem;
}

.db-key-banner-box {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    background:      var(--lexi-bg-surface);
    border:          1px solid var(--lexi-border-mid);
    border-radius:   6px;
    padding:         1rem 1.25rem;
    min-height:      3rem;
}

.db-key-banner-box code {
    font-family: var(--lexi-mono);
    font-size:   0.85rem;
    color:       var(--lexi-text);
    word-break:  break-all;
    line-height: 1.5;
}

.db-key-banner-note {
    font-size:  0.85rem;
    color:      var(--lexi-text-muted);
    margin-top: 0.6rem;
    line-height: 1.5;
}

/* ── API key cards ─────────────────────────────────────────────── */

.db-keys-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:                   1rem;
}

.db-key-card {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-left:   3px solid #22c55e;
    border-radius: 8px;
    padding:       1.25rem 1.5rem;
}

.db-key-card--revoked {
    border-left-color: rgba(239, 68, 68, 0.4);
    opacity:           0.6;
}

.db-key-card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   0.75rem;
}

.db-key-card-name {
    font-weight:    600;
    font-size:      0.95rem;
    color:          var(--lexi-text);
}

.db-key-card-id {
    background:    var(--lexi-bg-surface);
    border:        1px solid var(--lexi-border);
    border-radius: 6px;
    padding:       0.6rem 0.85rem;
    margin-bottom: 1rem;
}

.db-key-card-id code {
    font-family:    var(--lexi-mono);
    font-size:      0.82rem;
    color:          var(--lexi-text-muted);
    letter-spacing: 0.02em;
}

.db-key-card-stats {
    display:       flex;
    gap:           1.5rem;
    margin-bottom: 1rem;
}

.db-key-stat {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.db-key-stat-label {
    font-family:    var(--lexi-mono);
    font-size:      0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--lexi-text-muted);
}

.db-key-stat-value {
    font-family:           var(--lexi-mono);
    font-size:             0.85rem;
    font-weight:           600;
    color:                 var(--lexi-text);
    font-variant-numeric:  tabular-nums;
}

.db-key-card-actions {
    padding-top: 0.75rem;
    border-top:  1px solid var(--lexi-border);
}

.db-key-revoke-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.35rem;
    background:    none;
    border:        1px solid rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    color:         var(--lexi-text-muted);
    font-size:     0.78rem;
    padding:       0.35rem 0.75rem;
    cursor:        pointer;
    transition:    all 0.15s;
}

.db-key-revoke-btn:hover {
    color:        #f87171;
    border-color: rgba(239, 68, 68, 0.5);
    background:   rgba(239, 68, 68, 0.06);
}

/* ── Empty state ────────────────────────────────────────────────── */

.db-empty {
    padding:    3.5rem 0;
    text-align: center;
}

.db-empty-title {
    font-size:      1rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  0.375rem;
    letter-spacing: -0.01em;
}

.db-empty-sub {
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.6;
    max-width:   380px;
    margin:      0 auto;
}

/* ── Period toggle ──────────────────────────────────────────────── */

.db-period-toggle {
    display:    flex;
    gap:        0.2rem;
    background: var(--lexi-bg-surface);
    border:     1px solid var(--lexi-border-mid);
    border-radius: 5px;
    padding:    0.2rem;
}

.db-period-btn {
    padding:     0.3rem 0.7rem;
    border:      none;
    background:  none;
    cursor:      pointer;
    font-family: var(--lexi-mono);
    font-size:   0.8rem;
    color:       var(--lexi-text-muted);
    border-radius: 3px;
    transition:  all 0.1s;
}

.db-period-btn:hover  { color: var(--lexi-text); }
.db-period-btn.active { background: var(--lexi-bg-elevated); color: var(--lexi-text); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* ── Billing ────────────────────────────────────────────────────── */

.db-balance-card {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 6px;
    padding:       2rem;
    margin-bottom: 0;
}

.dbc-label {
    font-family:    var(--lexi-mono);
    font-size:      0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    margin-bottom:  0.5rem;
}

.dbc-value {
    font-size:            2.75rem;
    font-weight:          800;
    letter-spacing:       -0.04em;
    font-variant-numeric: tabular-nums;
    line-height:          1;
}

.dbc-value.dbc-positive { color: var(--lexi-text); }
.dbc-value.dbc-low      { color: #f87171; }

.dbc-sub {
    font-size:  0.85rem;
    color:      var(--lexi-text-muted);
    margin-top: 0.5rem;
}

.db-topup-card {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 8px;
    padding:       1.5rem;
    max-width:     560px;
}

.db-topup-amount-row {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
}

.db-topup-pill {
    padding:              0.6rem 1.4rem;
    background:           transparent;
    border:               1px solid var(--lexi-border-mid);
    border-radius:        20px;
    color:                var(--lexi-text-muted);
    font-family:          var(--lexi-mono);
    font-size:            0.9rem;
    font-weight:          600;
    cursor:               pointer;
    transition:           all 0.15s;
    font-variant-numeric: tabular-nums;
}

.db-topup-pill:hover {
    border-color: var(--lexi-primary);
    color:        var(--lexi-text);
}

.db-topup-pill--on {
    border-color: var(--lexi-primary);
    background:   rgba(59, 130, 246, 0.1);
    color:        var(--lexi-primary);
}

.db-topup-or {
    font-size:      0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-dim);
    margin:         1rem 0 0.75rem;
    font-family:    var(--lexi-mono);
}

.db-topup-confirm {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    flex-wrap:     wrap;
    gap:           1rem;
    margin-top:    1.25rem;
    padding-top:   1.25rem;
    border-top:    1px solid var(--lexi-border);
}

.db-topup-confirm-left {
    display:     flex;
    align-items: baseline;
    gap:         0.6rem;
}

.db-topup-confirm-amount {
    font-family:   var(--lexi-mono);
    font-size:     1.75rem;
    font-weight:   700;
    color:         var(--lexi-primary);
}

.db-topup-confirm-note {
    font-size: 0.85rem;
    color:     var(--lexi-text-muted);
}

.db-topup-confirm-right {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.db-topup-cancel {
    background: none;
    border:     none;
    color:      var(--lexi-text-muted);
    font-size:  0.85rem;
    cursor:     pointer;
}

.db-topup-cancel:hover { color: var(--lexi-text); }

.db-topup-trust {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    font-size:   0.75rem;
    color:       var(--lexi-text-dim);
    margin-top:  1.25rem;
    padding-top: 1rem;
    border-top:  1px solid var(--lexi-border);
}

.db-topup-custom-row {
    display:     flex;
    gap:         0.5rem;
    align-items: stretch;
    max-width:   340px;
}

.db-custom-input-wrap {
    display:       flex;
    align-items:   center;
    flex:          1;
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 4px;
    transition:    border-color 0.1s;
}

.db-custom-input-wrap:focus-within { border-color: var(--lexi-primary); }

.db-custom-prefix {
    padding:     0 0.375rem 0 0.875rem;
    color:       var(--lexi-text-muted);
    font-family: var(--lexi-mono);
    font-size:   0.95rem;
    font-weight: 600;
    user-select: none;
}

.db-custom-input {
    background:           none;
    border:               none;
    outline:              none;
    color:                var(--lexi-text);
    font-family:          var(--lexi-mono);
    font-size:            0.95rem;
    font-weight:          600;
    font-variant-numeric: tabular-nums;
    width:                100%;
    padding:              0.65rem 0.875rem 0.65rem 0;
}

.db-custom-input::placeholder { color: var(--lexi-text-dim); }
.db-custom-input::-webkit-inner-spin-button,
.db-custom-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.db-custom-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.db-custom-error {
    font-size:   0.8rem;
    color:       var(--lexi-danger);
    margin-top:  0.5rem;
    font-family: var(--lexi-mono);
}

.db-tier-strip {
    display:       flex;
    align-items:   center;
    gap:           1.25rem;
    padding:       0.85rem 1.25rem;
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    flex-wrap:     wrap;
}

.db-tier-strip-item {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}

.db-tier-icon {
    font-size: 16px;
    color:     var(--lexi-text-dim);
}

.db-tier-strip-value {
    font-family:          var(--lexi-mono);
    font-size:            0.9rem;
    font-weight:          700;
    color:                var(--lexi-text);
    font-variant-numeric: tabular-nums;
}

.db-tier-strip-unit {
    font-size: 0.78rem;
    color:     var(--lexi-text-muted);
}

.db-tier-strip-sep {
    width:      1px;
    height:     1.2rem;
    background: var(--lexi-border-mid);
}

.db-tier-strip-next {
    opacity: 0.6;
}

@media (max-width: 600px) {
    .db-tier-strip-sep { display: none; }
    .db-tier-strip { gap: 0.75rem; }
}

/* ── Settings ───────────────────────────────────────────────────── */

.db-settings-section {
    max-width:     560px;
    margin-bottom: 2.5rem;
}

.db-ss-title {
    font-size:      1rem;
    font-weight:    700;
    color:          var(--lexi-text);
    letter-spacing: -0.02em;
    margin-bottom:  1rem;
    padding-bottom: 0.625rem;
    border-bottom:  1px solid var(--lexi-border);
}

.db-field-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.75rem 0;
    border-bottom:   1px solid var(--lexi-border);
    font-size:       0.875rem;
    gap:             1rem;
}

.db-field-row:last-child { border-bottom: none; }

.db-field-label {
    color:     var(--lexi-text-muted);
    flex-shrink: 0;
}

.db-field-value {
    color:       var(--lexi-text);
    font-family: var(--lexi-mono);
    font-size:   0.825rem;
    text-align:  right;
}

.db-field-edit {
    padding-top: 1.25rem;
    display:     flex;
    gap:         0.75rem;
    align-items: flex-end;
    flex-wrap:   wrap;
}

/* ── Dashboard responsive ───────────────────────────────────────── */

@media (max-width: 860px) {
    .dashboard-sidebar     { display: none; }
    .dashboard-sidebar-v2  { display: none; }
    .dashboard-content     { padding: 1.5rem; max-width: 100%; }
    .dashboard-content-v2  { padding: 1.5rem; max-width: 100%; }
    .db-page-header        { flex-direction: column; }
    .db-page-header-v2     { flex-wrap: wrap; }
}

@media (max-width: 540px) {
    .dashboard-content    { padding: 1.25rem; }
    .dashboard-content-v2 { padding: 1.25rem; }
    .db-table thead       { display: none; }
    .db-table td          { display: block; padding: 0.4rem 0; border: none; }
    .db-table tr          { border-bottom: 1px solid var(--lexi-border); padding: 0.75rem 0; display: block; }
}

/* ── Key display ─────────────────────────────────────────────────── */

.key-display {
    font-family:    var(--lexi-mono);
    font-size:      0.78rem;
    background:     var(--lexi-bg-surface);
    padding:        0.6rem 0.875rem;
    border-radius:  var(--lexi-radius);
    border:         1px solid var(--lexi-border-mid);
    word-break:     break-all;
    color:          var(--lexi-text-muted);
    letter-spacing: 0.01em;
}

/* ── Pricing ─────────────────────────────────────────────────────── */

.pricing-highlight {
    font-size:      4rem;
    font-weight:    700;
    color:          var(--lexi-primary);
    letter-spacing: -0.04em;
    line-height:    1;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer {
    background:  var(--lexi-bg-card);
    border-top:  1px solid var(--lexi-border);
    padding:     1.5rem 2rem;
    text-align:  center;
    color:       var(--lexi-text-muted);
    font-size:   0.82rem;
}

.site-footer a { color: var(--lexi-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--lexi-text); }

/* ── Tables ──────────────────────────────────────────────────────── */

.data-table {
    width:           100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding:       0.6rem 0.875rem;
    text-align:    left;
    border-bottom: 1px solid var(--lexi-border);
}

.data-table th {
    font-family:    var(--lexi-mono);
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-dim);
}

/* ── MudBlazor overrides ─────────────────────────────────────────── */

.mud-theme-dark {
    --mud-palette-background: var(--lexi-bg);
    --mud-palette-surface:    var(--lexi-bg-card);
}

/* ── Utilities ───────────────────────────────────────────────────── */

.feature-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   1rem;
    max-width:             1040px;
    margin:                0 auto;
}

.text-gradient { color: var(--lexi-primary); }

.trend-up      { color: var(--lexi-success); }
.trend-down    { color: var(--lexi-danger); }
.trend-neutral { color: var(--lexi-text-muted); }

/* ── Animations ──────────────────────────────────────────────────────── */

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

.animate-fiu          { animation: fadeInUp 0.52s cubic-bezier(0.22, 1, 0.36, 1) both; }
.delay-1              { animation-delay: 0.10s; }
.delay-2              { animation-delay: 0.22s; }
.delay-3              { animation-delay: 0.34s; }
.delay-4              { animation-delay: 0.46s; }
.delay-5              { animation-delay: 0.56s; }

/* Scroll reveal (disabled — everything visible) */
.reveal {
    opacity:   1;
    transform: none;
}

/* ── Hero link ───────────────────────────────────────────────────────── */

.hero-link {
    color:           var(--lexi-text-muted);
    font-size:       0.925rem;
    text-decoration: none;
    transition:      color 0.12s;
}

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

/* Subtle pulse ring on primary CTA button */
.hero-primary-btn {
    animation: pulseRing 2.8s 1.2s ease-out infinite;
}

@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0.35); }
    60%  { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0); }
}

/* ── Section label (blue eyebrow) ────────────────────────────────────── */

.section-label {
    font-family:    var(--lexi-mono);
    font-size:      0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--lexi-primary);
    margin-bottom:  1.25rem;
}

/* ── Pillars ─────────────────────────────────────────────────────────── */

.pillars-section { padding-top: 0; }

.pillars-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin-top:            0;
}

.pillar-card {
    background:    var(--lexi-bg-card);
    border:        1px solid var(--lexi-border-mid);
    border-radius: var(--lexi-radius-md);
    padding:       2rem;
    transition:    border-color 0.15s;
}

.pillar-card:hover { border-color: var(--lexi-border-high); }

.pillar-num {
    font-family:    var(--lexi-mono);
    font-size:      0.68rem;
    color:          var(--lexi-primary);
    letter-spacing: 0.1em;
    margin-bottom:  1rem;
}

.pillar-label {
    font-size:      1rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  0.75rem;
    letter-spacing: -0.01em;
    line-height:    1.3;
}

.pillar-text {
    color:       var(--lexi-text-muted);
    font-size:   0.9rem;
    line-height: 1.75;
    margin:      0;
}

/* ── Steps ───────────────────────────────────────────────────────────── */

.steps-section { padding-top: 0; }

.steps-list {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3rem;
    margin-top:            2.5rem;
}

.step-num {
    font-family:    var(--lexi-mono);
    font-size:      0.72rem;
    color:          var(--lexi-primary);
    letter-spacing: 0.1em;
    margin-bottom:  0.625rem;
}

.step-title {
    font-size:      1.05rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  0.5rem;
    letter-spacing: -0.01em;
}

.step-text {
    color:       var(--lexi-text-muted);
    font-size:   0.9rem;
    line-height: 1.7;
    margin:      0;
}

/* Connector line between steps */
.steps-list { position: relative; }

/* ── Visibility / header pills ───────────────────────────────────────── */

.visibility-section { padding-top: 0; }

.visibility-sub {
    color:         var(--lexi-text-muted);
    font-size:     0.975rem;
    line-height:   1.7;
    max-width:     540px;
    margin:        0.875rem 0 1.5rem;
}

.headers-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.header-pill {
    font-family:    var(--lexi-mono);
    font-size:      0.76rem;
    border-radius:  10px;
    padding:        0.5rem 1rem;
    color:          var(--lexi-secondary);
    letter-spacing: 0.01em;
    transition:     border-color 0.2s, transform 0.2s;
}

.header-pill:hover {
    transform: translateY(-2px);
}

/* ── Quick start ─────────────────────────────────────────────────────── */

.quickstart-section { padding-top: 0; }

/* ── Compat ──────────────────────────────────────────────────────────── */

.compat-section { padding-top: 0; }

.compat-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.75rem;
    margin-top:  1.25rem;
}

.compat-item {
    color:     var(--lexi-text-muted);
    font-size: 0.975rem;
}

.compat-sep {
    color:     var(--lexi-text-dim);
    font-size: 0.8rem;
}

/* ── CTA section ─────────────────────────────────────────────────────── */

.cta-section {
    text-align:       center;
    border-top:       1px solid var(--lexi-border);
    background-image: radial-gradient(ellipse at 50% 120%, rgba(59,130,246,0.07) 0%, transparent 60%);
}

.cta-inner {
    max-width: 560px;
    margin:    0 auto;
}

.cta-title {
    font-family:    var(--lexi-display);
    font-size:      3.25rem;
    font-weight:    700;
    letter-spacing: -0.035em;
    color:          var(--lexi-text);
    margin:         0 0 0.875rem 0;
}

.cta-sub {
    color:         var(--lexi-text-muted);
    font-size:     1.05rem;
    margin:        0 0 2.25rem 0;
    line-height:   1.7;
}

.cta-actions {
    display:         flex;
    gap:             1.25rem;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
}

/* ── Feature card grid ───────────────────────────────────────────────── */

.feature-section {
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    padding: 6rem 2.5rem;
}

.feature-section-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.feature-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.feature-card-v2 {
    border-radius: 16px;
    padding: 2rem;
}

.fc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%);
    margin-bottom: 1.25rem;
    animation: float 4s ease-in-out infinite;
}

.fc-icon .material-symbols-outlined {
    font-size: 26px;
    color: var(--lexi-primary);
}

.fc-title {
    font-family: var(--lexi-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lexi-text);
    margin: 0 0 0.625rem;
}

.fc-text {
    font-size: 0.925rem;
    color: var(--lexi-text-muted);
    line-height: 1.65;
    margin: 0;
}

.fc-tag {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--lexi-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lexi-primary);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
}

/* Legacy feature list aliases (keep for backward compat) */
.fl-container {
    max-width: 1400px;
    margin:    0 auto;
    padding:   0 2.5rem 6rem;
}

/* ── Section header (reusable centered) ──────────────────────────────── */

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

.section-header-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.section-header-icon .material-symbols-outlined {
    font-size: 20px;
    color: var(--lexi-primary);
}

.section-header-label {
    font-family: var(--lexi-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--lexi-primary);
    font-weight: 600;
}

.section-header h2 {
    font-family: var(--lexi-display);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--lexi-text);
    margin: 0 0 0.75rem;
}

.section-header p {
    color: var(--lexi-text-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Billboard ───────────────────────────────────────────────────────── */

.billboard {
    background:  var(--lexi-bg-card);
    border-top:  1px solid var(--lexi-border);
    border-bottom: 1px solid var(--lexi-border);
    padding:     7rem 2.5rem;
    text-align:  center;
}

.bb-inner { max-width: 740px; margin: 0 auto; }

.bb-quote {
    font-size:      2.25rem;
    font-weight:    500;
    line-height:    1.35;
    letter-spacing: -0.025em;
    color:          var(--lexi-text);
    margin:         0 0 1.5rem;
}

.bb-answer {
    font-size:   1.15rem;
    color:       var(--lexi-primary);
    font-weight: 600;
    margin:      0;
}

/* ── Engine band ─────────────────────────────────────────────────────── */

.engine-band {
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    padding:    6rem 2.5rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, transparent 100%);
}

.engine-inner {
    max-width: 1400px;
    margin:    0 auto;
}

.engine-title {
    font-family:    var(--lexi-display);
    font-size:      2.25rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
    line-height:    1.15;
}

.engine-sub {
    color:       var(--lexi-text-muted);
    font-size:   1rem;
    line-height: 1.65;
    max-width:   640px;
    margin-bottom: 2.5rem;
}

.engine-props {
    display:  grid;
    grid-template-columns: repeat(4, 1fr);
    gap:      2rem;
}

.engine-prop {
    border-radius: 16px;
    padding:       2.5rem 2rem;
}

.ep-label {
    display:     block;
    font-family: var(--lexi-mono);
    font-size:   0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:       var(--lexi-text-dim);
    margin-bottom: 0.5rem;
}

.ep-value {
    display:        block;
    font-size:      1.35rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--lexi-primary);
    margin-bottom:  0.625rem;
}

.ep-desc {
    display:     block;
    font-size:   0.875rem;
    color:       var(--lexi-text-muted);
    line-height: 1.5;
}

/* ── Benchmark section ────────────────────────────────────────────────── */

.bench-section {
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    padding:    6rem 2.5rem;
}

.bench-inner {
    max-width: 1000px;
    margin:    0 auto;
}

.bench-note {
    color:         var(--lexi-text-dim);
    font-family:   var(--lexi-mono);
    font-size:     0.8rem;
    margin-bottom: 2.5rem;
}

.bench-grid {
    display:  grid;
    grid-template-columns: repeat(3, 1fr);
    gap:      2rem;
}

.bench-card {
    border-radius: 16px;
    padding:       2.25rem 1.5rem;
    text-align:    center;
}

.bench-value {
    display:        block;
    font-size:      2.75rem;
    font-weight:    800;
    letter-spacing: -0.04em;
    color:          var(--lexi-primary);
    font-variant-numeric: tabular-nums;
    line-height:    1;
}

.bench-value.val-cyan  { color: #06b6d4; }
.bench-value.val-green { color: #22c55e; }

.bench-label {
    display:     block;
    margin-top:  0.75rem;
    font-family: var(--lexi-mono);
    font-size:   0.82rem;
    color:       var(--lexi-text-muted);
}

.bench-foot {
    margin-top: 2rem;
    color:      var(--lexi-text-muted);
    font-size:  0.95rem;
    line-height: 1.6;
    text-align: center;
}

/* ── Transparency band ────────────────────────────────────────────────── */

.transp-band {
    border-top:  1px solid var(--lexi-border);
    padding:     6rem 2.5rem;
}

.transp-inner {
    display:               grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap:                   5rem;
    max-width:             1400px;
    margin:                0 auto;
    align-items:           start;
}

.transp-title {
    font-size:      1.75rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0.5rem 0 1.125rem;
    line-height:    1.2;
}

.transp-body {
    color:       var(--lexi-text-muted);
    font-size:   0.95rem;
    line-height: 1.8;
    margin:      0;
}

.transp-right { padding-top: 0.5rem; }

/* ── Code section ────────────────────────────────────────────────────── */

.code-section {
    border-top: 1px solid var(--lexi-border);
    padding:    6rem 2.5rem;
}

.cs-inner {
    max-width: 1400px;
    margin:    0 auto;
}

/* ── Featured-on band ────────────────────────────────────────────────── */

/* featured-band removed — TAAFT badge moved to footer */

/* ── CTA band ────────────────────────────────────────────────────────── */

.cta-band {
    border-top:  1px solid var(--lexi-border);
    background:  var(--lexi-bg-card);
    padding:     7rem 2.5rem;
    text-align:  center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .hero-split        { grid-template-columns: 1fr; min-height: auto; padding: 4rem 2rem; gap: 3rem; }
    .hero-left         { padding: 2rem 0 0; }
    .hero-right        { justify-content: flex-start; }
    .hero-title        { font-size: 4rem; }
    .transp-inner      { grid-template-columns: 1fr; gap: 2.5rem; }
    .feature-grid-v2   { grid-template-columns: 1fr; }
    .engine-props      { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .engine-band       { padding: 3.5rem 1.5rem; }
    .bench-grid        { grid-template-columns: 1fr; gap: 1rem; }
    .bench-section     { padding: 3.5rem 1.5rem; }
    .bb-quote          { font-size: 1.625rem; }
    .bb-br             { display: none; }
    .cta-title         { font-size: 2.25rem; }
    .feature-section   { padding: 3.5rem 1.5rem; }
}

@media (max-width: 540px) {
    .hero-title  { font-size: 3rem; }
    .hero-sub    { font-size: 1rem; }
    .bb-quote    { font-size: 1.375rem; }
    .cta-title   { font-size: 1.875rem; }
    .engine-props { grid-template-columns: 1fr; }
    .feature-grid-v2 { grid-template-columns: 1fr; }
    .fl-container, .transp-band, .code-section, .cta-band, .billboard, .engine-band, .bench-section, .feature-section { padding-left: 1.25rem; padding-right: 1.25rem; }
    .transp-band { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── How It Works page ───────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

.hiw-hero {
    padding:       6rem 2.5rem 5rem;
    background:    var(--lexi-bg-card);
}

.hiw-hero-inner {
    max-width: 1400px;
    margin:    0 auto;
}

.hiw-hero-grid {
    display:     flex;
    gap:         4rem;
    align-items: center;
}

.hiw-hero-text { flex: 1; }

.hiw-title {
    font-size:      4.5rem;
    font-weight:    800;
    letter-spacing: -0.05em;
    margin:         0;
    line-height:    1;
    background:     linear-gradient(135deg, #f1f5f9 0%, #3b82f6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hiw-acronym {
    font-family:    var(--lexi-mono);
    font-size:      0.85rem;
    color:          var(--lexi-primary);
    margin:         1rem 0 0;
    letter-spacing: 0.02em;
}

.hiw-sub {
    color:       var(--lexi-text-muted);
    font-size:   1.1rem;
    line-height: 1.65;
    margin-top:  1.5rem;
    max-width:   640px;
}

/* ── Hero flow visual ──────────────────────────────────────────── */

.hiw-hero-visual {
    flex-shrink: 0;
    width:       320px;
}

.hiw-hero-flow {
    background:    var(--lexi-bg-surface);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 12px;
    padding:       1.5rem;
}

.hiw-flow-step {}

.hiw-flow-label {
    font-family:    var(--lexi-mono);
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-muted);
    margin-bottom:  0.4rem;
}

.hiw-flow-bar {
    border-radius:         6px;
    padding:               0.5rem 0.75rem;
    font-family:           var(--lexi-mono);
    font-size:             0.82rem;
    font-weight:           600;
    font-variant-numeric:  tabular-nums;
    transition:            width 0.6s ease;
}

.hiw-flow-bar--full {
    background: rgba(239, 68, 68, 0.12);
    border:     1px solid rgba(239, 68, 68, 0.25);
    color:      #f87171;
    width:      100%;
}

.hiw-flow-bar--reduced {
    background: rgba(59, 130, 246, 0.12);
    border:     1px solid rgba(59, 130, 246, 0.25);
    color:      #60a5fa;
    width:      38%;
    min-width:  fit-content;
}

.hiw-flow-arrow {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    padding:        0.6rem 0;
    color:          var(--lexi-text-dim);
    font-family:    var(--lexi-mono);
    font-size:      0.7rem;
    letter-spacing: 0.08em;
}

.hiw-flow-arrow .material-symbols-outlined {
    font-size: 18px;
    color:     var(--lexi-primary);
}

.hiw-flow-arrow-label {
    color:          var(--lexi-primary);
    font-weight:    600;
}

.hiw-flow-savings {
    display:       flex;
    align-items:   center;
    gap:           0.35rem;
    margin-top:    0.75rem;
    padding-top:   0.75rem;
    border-top:    1px solid var(--lexi-border);
    font-family:   var(--lexi-mono);
    font-size:     0.85rem;
    font-weight:   700;
    color:         #4ade80;
}

.hiw-section {
    padding: 5rem 2.5rem;
}

.hiw-section.hiw-alt {
    background: var(--lexi-bg-card);
}

.hiw-inner {
    max-width: 1400px;
    margin:    0 auto;
}

.hiw-h2 {
    font-size:      2rem;
    font-weight:    800;
    letter-spacing: -0.04em;
    color:          var(--lexi-text);
    margin:         0 0 1.25rem;
    line-height:    1.15;
}

.hiw-body {
    color:       var(--lexi-text-muted);
    font-size:   1rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.hiw-disclaimer {
    font-family: var(--lexi-mono);
    font-size:   0.875rem;
    color:       var(--lexi-text-dim);
}

/* Turn cards */
.hiw-turn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:     1.5rem;
    margin-top: 2.5rem;
}

.hiw-turn-card {
    border-radius: 16px;
    padding:       2rem 1.75rem;
}

.htc-turn {
    display:        block;
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--lexi-primary);
    margin-bottom:  0.75rem;
}

.htc-turn-blue  { color: #3b82f6; }
.htc-turn-cyan  { color: #06b6d4; }
.htc-turn-green { color: #22c55e; }

.htc-desc {
    display:     block;
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.55;
}

/* Property cards */
.hiw-prop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:     1.5rem;
    margin-top: 2rem;
}

.hiw-prop {
    border-radius: 16px;
    padding:       2.25rem 2rem;
}

.hiw-prop:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.hp-header {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    margin-bottom: 1rem;
}

.hp-value {
    font-size:      1.15rem;
    font-weight:    700;
    color:          var(--lexi-text);
    letter-spacing: -0.01em;
}

.hp-body {
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.6;
    margin:      0;
}

/* Benchmark table */
.hiw-bench-table {
    margin-top:    2rem;
    border-radius: 16px;
    overflow:      hidden;
}

.hbt-row {
    display:  grid;
    grid-template-columns: 80px 1fr 1fr 100px;
    padding:  0.875rem 1.25rem;
    border-bottom: 1px solid var(--lexi-border);
    font-family: var(--lexi-mono);
    font-size:   0.85rem;
    font-variant-numeric: tabular-nums;
    color:       var(--lexi-text-muted);
}

.hbt-row:last-child { border-bottom: none; }

.hbt-row.hbt-header {
    background:    var(--lexi-bg-surface);
    font-size:     0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:         var(--lexi-text-dim);
    font-weight:   600;
}

.hbt-turn {
    color:       var(--lexi-text);
    font-weight: 600;
}

.hbt-pct {
    color:       var(--lexi-primary);
    font-weight: 700;
    text-align:  right;
}

.hbt-pct-blue  { color: #3b82f6; }
.hbt-pct-cyan  { color: #06b6d4; }
.hbt-pct-green { color: #22c55e; }

/* Metric cards */
.hiw-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:     1.5rem;
    margin-top: 2.5rem;
}

.hiw-metric {
    text-align:     center;
    padding:        2rem 1.5rem;
    border-radius:  16px;
    border:         1px solid var(--lexi-border-mid);
    background:     var(--lexi-bg-card);
    transition:     border-color 0.2s, transform 0.2s;
}
.hiw-metric:hover {
    transform: translateY(-2px);
}
.hiw-metric-cyan  { border-top: 2px solid #06b6d4; }
.hiw-metric-purple { border-top: 2px solid #a855f7; }
.hiw-metric-green { border-top: 2px solid #22c55e; }
.hiw-metric-cyan:hover  { border-color: rgba(6,182,212,0.4); }
.hiw-metric-purple:hover { border-color: rgba(168,85,247,0.4); }
.hiw-metric-green:hover { border-color: rgba(34,197,94,0.4); }

.hm-value {
    display:        block;
    font-size:      2rem;
    font-weight:    800;
    letter-spacing: -0.03em;
    color:          var(--lexi-primary);
    font-variant-numeric: tabular-nums;
    line-height:    1;
}

.hm-label {
    display:     block;
    margin-top:  0.625rem;
    font-family: var(--lexi-mono);
    font-size:   0.8rem;
    color:       var(--lexi-text-muted);
}

.hm-cyan   { color: #06b6d4; }
.hm-purple { color: #a855f7; }
.hm-green  { color: #22c55e; }

/* Use case cards */
.hiw-use-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:     1.5rem;
    margin-top: 2rem;
}

.hiw-use {
    border-radius: 16px;
    padding:       2.25rem 2rem;
}

.hu-title {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--lexi-text);
    margin:      0 0 0.75rem;
}

.hu-body {
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.6;
    margin:      0;
}

/* HIW responsive */
@media (max-width: 900px) {
    .hiw-title              { font-size: 3.5rem; }
    .hiw-hero-grid          { flex-direction: column; gap: 2.5rem; }
    .hiw-hero-visual        { width: 100%; max-width: 400px; }
    .hiw-turn-grid          { grid-template-columns: 1fr; gap: 1rem; }
    .hiw-prop-grid          { grid-template-columns: 1fr; gap: 1rem; }
    .hiw-metrics-grid       { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .hiw-use-grid           { grid-template-columns: 1fr; gap: 1rem; }
    .hiw-section            { padding: 3.5rem 1.5rem; }
    .hiw-hero               { padding: 4rem 1.5rem 3.5rem; }
    .hbt-row                { grid-template-columns: 60px 1fr 1fr 70px; font-size: 0.78rem; padding: 0.75rem 1rem; }
}

@media (max-width: 540px) {
    .hiw-title              { font-size: 2.75rem; }
    .hiw-metrics-grid       { grid-template-columns: 1fr; }
    .hiw-section, .hiw-hero { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Pricing page ────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Pricing hero ────────────────────────────────────────────────────── */

.pricing-hero {
    border-bottom: 1px solid var(--lexi-border);
    padding:       6rem 2.5rem 5rem;
}

.pricing-hero-inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   5rem;
    max-width:             1160px;
    margin:                0 auto;
    align-items:           center;
}

.ph-title {
    font-size:      4rem;
    font-weight:    800;
    line-height:    1.0;
    letter-spacing: -0.04em;
    color:          var(--lexi-text);
    margin:         0 0 1.25rem;
}

.ph-sub {
    color:       var(--lexi-text-muted);
    font-size:   1rem;
    line-height: 1.75;
    margin:      0;
    max-width:   400px;
}

/* ── Formula block ───────────────────────────────────────────────────── */

.formula-block {
    border-radius: 16px;
    overflow:      hidden;
}

.fb-label {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--lexi-text-muted);
    background:     var(--lexi-bg-surface);
    border-bottom:  1px solid var(--lexi-border);
    padding:        0.625rem 1.25rem;
}

.formula-row {
    padding:     1rem 1.25rem;
    display:     flex;
    align-items: baseline;
}

.fr-item { display: flex; flex-direction: column; gap: 0.15rem; }

.fr-value {
    font-size:      1.375rem;
    font-weight:    700;
    color:          var(--lexi-text);
    letter-spacing: -0.02em;
}

.fr-total { color: var(--lexi-primary); }

.fr-desc {
    font-size:   0.875rem;
    color:       var(--lexi-text-muted);
    line-height: 1.4;
}

.formula-op {
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--lexi-text-muted);
    padding:     0 1.25rem 0.25rem;
}

.formula-divider {
    height:     1px;
    background: var(--lexi-border);
    margin:     0 1.25rem;
}

.formula-result { padding-top: 1rem; }

.fb-zero {
    font-family:    var(--lexi-mono);
    font-size:      0.875rem;
    color:          var(--lexi-text-muted);
    background:     var(--lexi-bg-surface);
    border-top:     1px solid var(--lexi-border);
    padding:        0.75rem 1.25rem;
    letter-spacing: 0.01em;
}

/* ── Calculator ──────────────────────────────────────────────────────── */

.calc-section {
    border-bottom: 1px solid var(--lexi-border);
    padding:       5rem 2.5rem;
}

.calc-inner {
    max-width: 720px;
    margin:    0 auto;
}

.calc-note {
    color:         var(--lexi-text-muted);
    font-size:     0.9rem;
    line-height:   1.65;
    margin:        0 0 2.5rem;
    max-width:     560px;
}

.calc-controls { display: flex; flex-direction: column; gap: 1.75rem; max-width: 540px; }

.calc-field { display: flex; flex-direction: column; gap: 0.5rem; }

.calc-field-label {
    font-size:   0.875rem;
    color:       var(--lexi-text-muted);
    font-weight: 500;
}

.calc-field-val {
    color:       var(--lexi-text);
    font-weight: 700;
    font-family: var(--lexi-mono);
}

.calc-slider-range {
    display:         flex;
    justify-content: space-between;
    font-size:       0.85rem;
    color:           var(--lexi-text-muted);
    font-family:     var(--lexi-mono);
    max-width:       480px;
}

.calc-results {
    margin-top:    2.5rem;
    border-radius: 16px;
    overflow:      hidden;
    max-width:     480px;
}

.cr-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         0.75rem 1.25rem;
    border-bottom:   1px solid var(--lexi-border);
    font-size:       0.9rem;
}

.cr-row:last-of-type { border-bottom: none; }

.cr-label { color: var(--lexi-text-muted); }

.cr-value {
    font-family:          var(--lexi-mono);
    font-variant-numeric: tabular-nums;
    color:                var(--lexi-text);
    font-weight:          600;
}

.cr-direct { color: var(--lexi-text-muted); text-decoration: line-through; }
.cr-margin { color: var(--lexi-text-muted); }

.cr-divider {
    height:     1px;
    background: var(--lexi-border-mid);
}

.cr-total-row {
    background: var(--lexi-bg-surface);
    border-top: 1px solid var(--lexi-border-mid);
}

.cr-total {
    color:     var(--lexi-primary);
    font-size: 1.05rem;
}

.cr-saved {
    background: rgba(34,197,94,0.06);
    border-top: 1px solid rgba(34,197,94,0.15);
    padding:    0.75rem 1.25rem;
    font-size:  0.82rem;
    color:      var(--lexi-text-muted);
}

.cr-note {
    padding:    0.75rem 1.25rem;
    font-size:  0.85rem;
    color:      var(--lexi-text-muted);
    border-top: 1px solid var(--lexi-border);
    font-family: var(--lexi-mono);
}

/* ── Rate limits ─────────────────────────────────────────────────────── */

.rate-section {
    border-bottom: 1px solid var(--lexi-border);
    padding:       5rem 2.5rem;
}

.rate-inner { max-width: 720px; margin: 0 auto; }

.rate-title {
    font-size:      2rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0.5rem 0 0.625rem;
}

.rate-sub {
    color:         var(--lexi-text-muted);
    font-size:     0.9rem;
    margin:        0 0 2rem;
    line-height:   1.65;
}

.rate-list {
    border-radius: 16px;
    overflow:      hidden;
    max-width:     640px;
}

.rate-header {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding:               0.6rem 1.25rem;
    background:            var(--lexi-bg-surface);
    border-bottom:         1px solid var(--lexi-border);
    font-family:           var(--lexi-mono);
    font-size:             0.68rem;
    text-transform:        uppercase;
    letter-spacing:        0.1em;
    color:                 var(--lexi-text-muted);
}

.rate-row {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding:               0.875rem 1.25rem;
    border-bottom:         1px solid var(--lexi-border);
    font-size:             0.9rem;
    align-items:           baseline;
}

.rate-row:last-child { border-bottom: none; }

.rr-spend {
    color:       var(--lexi-text);
    font-weight: 500;
}

.rr-limit {
    font-family:          var(--lexi-mono);
    font-variant-numeric: tabular-nums;
    color:                var(--lexi-text);
}

.rr-unit { color: var(--lexi-text-muted); font-size: 0.8rem; }

.rr-keys {
    font-family:          var(--lexi-mono);
    font-variant-numeric: tabular-nums;
    color:                var(--lexi-text-muted);
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq-section {
    border-bottom: 1px solid var(--lexi-border);
    padding:       5rem 2.5rem;
}

.faq-inner   { max-width: 720px; margin: 0 auto; }
.faq-list    { max-width: 680px; border-top: 1px solid var(--lexi-border); }

.faq-item {
    padding:       1.75rem 0;
    border-bottom: 1px solid var(--lexi-border);
}

.faq-q {
    font-size:      1.1rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  0.625rem;
    letter-spacing: -0.01em;
}

.faq-a {
    font-size:   1rem;
    color:       var(--lexi-text-muted);
    line-height: 1.75;
    margin:      0;
}

.faq-code {
    font-family:   var(--lexi-mono);
    font-size:     0.78rem;
    background:    var(--lexi-bg-surface);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 3px;
    padding:       0.1rem 0.35rem;
    color:         var(--lexi-secondary);
}

/* ── Pricing responsive ──────────────────────────────────────────────── */

@media (max-width: 860px) {
    .pricing-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
    .ph-title           { font-size: 3rem; }
    .calc-section, .rate-section, .faq-section, .pricing-hero { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 540px) {
    .ph-title  { font-size: 2.25rem; }
    .rate-title { font-size: 1.5rem; }
    .calc-section, .rate-section, .faq-section, .pricing-hero { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Docs page ───────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

.docs-wrapper {
    display:               grid;
    grid-template-columns: 220px 1fr;
    max-width:             1160px;
    margin:                0 auto;
    padding:               0 2.5rem;
    min-height:            calc(100vh - 56px);
}

.docs-sidebar {
    padding:      3rem 1.5rem 3rem 0;
    position:     sticky;
    top:          56px;
    height:       calc(100vh - 56px);
    overflow-y:   auto;
    border-right: 1px solid var(--lexi-border);
}

.dsb-label {
    font-family:    var(--lexi-mono);
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:          var(--lexi-text-muted);
    margin-bottom:  0.875rem;
    display:        block;
}

.docs-nav { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1.5rem; }

.docs-nav-link {
    display:         block;
    padding:         0.425rem 0.75rem;
    font-size:       0.875rem;
    color:           var(--lexi-text-muted);
    text-decoration: none;
    border-radius:   4px;
    transition:      color 0.1s, background 0.1s;
}

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

.dsb-divider { height: 1px; background: var(--lexi-border); margin: 0.5rem 0 1.25rem; }

.dsb-cta {
    display: block; font-size: 0.85rem; color: var(--lexi-primary);
    text-decoration: none; margin-bottom: 0.5rem; font-weight: 600; transition: opacity 0.1s;
}
.dsb-cta:hover { opacity: 0.8; }

.docs-nav-link {
    display: block; font-size: 0.82rem; color: var(--lexi-text-muted);
    text-decoration: none; padding: 0.2rem 0; transition: color 0.1s;
}
.docs-nav-link:hover { color: var(--lexi-text); }

.docs-content { padding: 3rem 0 5rem 3.5rem; min-width: 0; }

.docs-section {
    margin-bottom:     4rem;
    padding-bottom:    4rem;
    border-bottom:     1px solid var(--lexi-border);
    scroll-margin-top: 1.5rem;
}
.docs-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.ds-eyebrow {
    font-family: var(--lexi-mono); font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--lexi-primary); margin-bottom: 0.75rem;
}

.ds-title {
    font-size: 2rem; font-weight: 700; letter-spacing: -0.03em;
    color: var(--lexi-text); margin: 0 0 1.375rem; line-height: 1.2;
}

.ds-h3 {
    font-size: 1rem; font-weight: 600; color: var(--lexi-text);
    margin: 1.75rem 0 0.875rem; letter-spacing: -0.01em;
}

.ds-body {
    color: var(--lexi-text-muted); font-size: 1rem;
    line-height: 1.8; margin: 0 0 1rem; max-width: 640px;
}

.docs-plain {
    background: var(--lexi-bg-surface); border: 1px solid var(--lexi-border-mid);
    border-left: 3px solid var(--lexi-primary); border-radius: var(--lexi-radius);
    padding: 1rem 1.25rem; color: var(--lexi-text-muted);
    font-size: 0.925rem; line-height: 1.75; margin-bottom: 1.75rem; max-width: 660px;
}

.docs-aside {
    background: var(--lexi-bg-card); border: 1px solid var(--lexi-border-mid);
    border-radius: var(--lexi-radius); padding: 1rem 1.25rem;
    font-size: 0.875rem; color: var(--lexi-text-muted); line-height: 1.75; max-width: 640px;
}

.da-label {
    display: block; font-family: var(--lexi-mono); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--lexi-text-muted); margin-bottom: 0.375rem;
}

.ic {
    font-family: var(--lexi-mono); font-size: 0.8em;
    background: var(--lexi-bg-surface); border: 1px solid var(--lexi-border-mid);
    border-radius: 3px; padding: 0.1rem 0.35rem;
    color: var(--lexi-secondary); white-space: nowrap;
}

.docs-link {
    color: var(--lexi-primary); text-decoration: none;
    border-bottom: 1px solid rgba(59,130,246,0.3); transition: border-color 0.1s;
}
.docs-link:hover { border-bottom-color: var(--lexi-primary); }

.docs-table {
    width: 100%; border-collapse: collapse; border: 1px solid var(--lexi-border-mid);
    border-radius: 6px; overflow: hidden; font-size: 0.875rem; max-width: 720px;
}
.docs-table thead tr { background: var(--lexi-bg-surface); }
.docs-table th {
    padding: 0.6rem 1rem; border-bottom: 1px solid var(--lexi-border);
    font-family: var(--lexi-mono); font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--lexi-text-muted); text-align: left; font-weight: 400;
}
.docs-table td {
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--lexi-border);
    color: var(--lexi-text); vertical-align: top; line-height: 1.55;
}
.docs-table tr:last-child td { border-bottom: none; }
.docs-table td:first-child   { white-space: nowrap; }

.method-get, .method-post, .method-delete {
    font-family: var(--lexi-mono); font-size: 0.75rem; font-weight: 700;
    padding: 0.2rem 0.5rem; border-radius: 3px; letter-spacing: 0.04em; white-space: nowrap;
}
.method-get    { background: rgba(34,197,94,0.1);  color: #4ade80; }
.method-post   { background: rgba(59,130,246,0.1); color: #60a5fa; }
.method-delete { background: rgba(239,68,68,0.1);  color: #f87171; }

.ds-steps { display: flex; flex-direction: column; border-top: 1px solid var(--lexi-border); margin-top: 1.75rem; }

.ds-step {
    display: grid; grid-template-columns: 44px 1fr; gap: 1.5rem;
    padding: 2rem 0; border-bottom: 1px solid var(--lexi-border); align-items: start;
}
.ds-step:last-child { border-bottom: none; }

.ds-step-num {
    font-family: var(--lexi-mono); font-size: 0.68rem; color: var(--lexi-primary);
    letter-spacing: 0.1em; font-weight: 600; padding-top: 0.2rem;
}

.ds-step-title { font-size: 1rem; font-weight: 600; color: var(--lexi-text); margin-bottom: 0.5rem; letter-spacing: -0.01em; }

.ds-step-text {
    font-size: 0.975rem; color: var(--lexi-text-muted);
    line-height: 1.7; margin: 0 0 0.875rem; max-width: 580px;
}
.ds-step-text:last-child { margin-bottom: 0; }

.model-groups {
    display: flex; flex-direction: column;
    border: 1px solid var(--lexi-border-mid); border-radius: 6px; overflow: hidden; max-width: 680px;
}
.model-group {
    display: grid; grid-template-columns: 110px 1fr; gap: 1.25rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--lexi-border); align-items: start;
}
.model-group:last-child { border-bottom: none; }
.mg-provider { font-size: 0.8rem; font-weight: 600; color: var(--lexi-text); padding-top: 0.15rem; letter-spacing: -0.01em; }
.mg-pills    { display: flex; flex-wrap: wrap; gap: 0.375rem; }

@media (max-width: 860px) {
    .docs-wrapper { grid-template-columns: 1fr; padding: 0 1.5rem; }
    .docs-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--lexi-border); padding: 2rem 0 1.5rem; }
    .docs-nav     { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
    .docs-nav-link { font-size: 0.82rem; padding: 0.35rem 0.6rem; }
    .docs-content  { padding: 2.5rem 0; }
}

@media (max-width: 540px) {
    .docs-wrapper { padding: 0 1.25rem; }
    .ds-title     { font-size: 1.5rem; }
    .docs-table   { font-size: 0.8rem; }
    .model-group  { grid-template-columns: 1fr; gap: 0.5rem; }
    .ds-step      { grid-template-columns: 36px 1fr; gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Legal pages (Privacy, Terms) ───────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

.legal-page {
    max-width: 720px;
    margin:    0 auto;
    padding:   5rem 2.5rem 6rem;
}

.legal-eyebrow {
    font-family:    var(--lexi-mono);
    font-size:      0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--lexi-primary);
    margin-bottom:  1rem;
}

.legal-title {
    font-size:      2.75rem;
    font-weight:    800;
    letter-spacing: -0.04em;
    color:          var(--lexi-text);
    margin:         0 0 0.5rem;
}

.legal-date {
    font-size:    0.85rem;
    color:        var(--lexi-text-muted);
    font-family:  var(--lexi-mono);
    margin:       0 0 3.5rem;
    padding-bottom: 2rem;
    border-bottom:  1px solid var(--lexi-border);
}

.legal-section {
    margin-bottom: 2.75rem;
}

.legal-h2 {
    font-size:      1.05rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
}

.legal-p {
    font-size:   0.925rem;
    color:       var(--lexi-text-muted);
    line-height: 1.8;
    margin:      0 0 0.75rem;
}

.legal-p:last-child { margin-bottom: 0; }

.legal-ul {
    margin:       0 0 0.75rem;
    padding-left: 1.25rem;
    color:        var(--lexi-text-muted);
    font-size:    0.925rem;
    line-height:  1.8;
}

.legal-ul li { margin-bottom: 0.3rem; }

.legal-p a, .legal-ul a {
    color:                 var(--lexi-primary);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

@media (max-width: 680px) {
    .legal-page  { padding: 3rem 1.5rem 4rem; }
    .legal-title { font-size: 2rem; }
}

/* ── Contact page ────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Contact v2 ────────────────────────────────────────────────────── */

.contact-v2-inner {
    display:               grid;
    grid-template-columns: 340px 1fr;
    gap:                   2.5rem;
    align-items:           start;
    max-width:             1100px;
    margin:                0 auto;
}

.contact-v2-info {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.contact-v2-detail {
    padding:       1.25rem 1.5rem;
    border-radius: 16px;
    display:       flex;
    align-items:   center;
    gap:           1rem;
}

.contact-v2-label {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--lexi-text-muted);
    margin-bottom:  0.2rem;
    font-weight:    600;
}

.contact-v2-value {
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.55;
}

.contact-v2-card {
    border-radius: 16px;
    padding:       2rem;
}

.contact-v2-card-header {
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      1rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  1.5rem;
    padding-bottom: 1rem;
    border-bottom:  1px solid var(--lexi-border);
}

.contact-v2-card-header .material-symbols-outlined {
    font-size: 1.3rem;
}

.contact-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     0 1rem;
}

.contact-v2-success {
    border-radius: 16px;
    padding:       3rem 2rem;
    text-align:    center;
}

.cs-icon {
    margin-bottom: 1.25rem;
}

.cs-title {
    font-size:      1.5rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
}

.cs-text {
    font-size:   0.925rem;
    color:       var(--lexi-text-muted);
    line-height: 1.6;
    margin:      0 0 2rem;
}

.cs-text strong { color: var(--lexi-text); }

.cs-another {
    background:    transparent;
    border:        1px solid var(--lexi-border-mid);
    border-radius: 6px;
    padding:       0.55rem 1.25rem;
    font-size:     0.875rem;
    color:         var(--lexi-text-muted);
    cursor:        pointer;
    transition:    border-color 0.15s, color 0.15s;
}

.cs-another:hover {
    border-color: var(--lexi-border-high);
    color:        var(--lexi-text);
}

@media (max-width: 720px) {
    .contact-v2-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .contact-field-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── V2 — Glass, Animations, New Components ─────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Glass morphism ─────────────────────────────────────────────────── */

.glass {
    background:    rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:        1px solid rgba(55, 65, 81, 0.5);
    border-radius: 16px;
}

.glass:hover {
    border-color: rgba(75, 85, 101, 0.6);
}

/* ── Card hover effect ──────────────────────────────────────────────── */

.card-hover {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Scroll animation system (disabled — everything visible) ────────── */

.animate-on-scroll {
    opacity:   1;
    transform: none;
}

.stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5 {}

/* ── Keyframe animations ────────────────────────────────────────────── */

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
    50%      { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes icon-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Gradient text ──────────────────────────────────────────────────── */

.gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Progress bar ───────────────────────────────────────────────────── */

.progress-bar {
    width:         100%;
    height:        6px;
    background:    rgba(59, 130, 246, 0.1);
    border-radius: 3px;
    margin-top:    1rem;
    overflow:      hidden;
}

.progress-bar-fill {
    height:        100%;
    background:    linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
    border-radius: 2px;
    transition:    width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.progress-bar-fill[data-width="78"] { width: 78%; }
.progress-bar-fill[data-width="84"] { width: 84%; background: linear-gradient(90deg, #06b6d4 0%, #22d3ee 100%); }
.progress-bar-fill[data-width="90"] { width: 90%; background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }

/* ── Hero v2 enhancements ───────────────────────────────────────────── */

.hero-v2 {
    position:   relative;
    width:      100%;
    background: radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, transparent 100%);
}

.hero-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    font-family:    var(--lexi-mono);
    font-size:      0.78rem;
    color:          var(--lexi-text-muted);
    background:     rgba(59, 130, 246, 0.08);
    border:         1px solid rgba(59, 130, 246, 0.25);
    border-radius:  24px;
    padding:        0.5rem 1.1rem;
    margin-bottom:  2rem;
    letter-spacing: 0.02em;
}

.hero-badge-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #22c55e;
    animation:     pulse-glow 2s ease-in-out infinite;
    box-shadow:    0 0 6px rgba(34, 197, 94, 0.6);
}

/* ── Hero stat cards ────────────────────────────────────────────────── */

.hero-stats-band {
    border-top:  1px solid rgba(55, 65, 81, 0.4);
    border-bottom: 1px solid rgba(55, 65, 81, 0.4);
    padding:     4rem 2.5rem;
    background:  linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(10, 10, 11, 0.8) 100%);
}

.hero-stats-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem;
    max-width:             1100px;
    margin:                0 auto;
}

.hero-stat {
    text-align:    left;
    padding:       1.75rem;
    border-radius: 16px;
    transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-stat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.hero-stat-header .material-symbols-outlined {
    font-size: 20px;
    color: var(--lexi-primary);
}

.hero-stat-header span:last-child {
    font-size: 0.82rem;
    color: var(--lexi-text-muted);
}

.hero-stat-sub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--lexi-text-dim);
}

.hero-stat:hover {
    transform:  translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
}

.hero-stat-value {
    display:              block;
    font-size:            2.25rem;
    font-weight:          800;
    letter-spacing:       -0.04em;
    color:                var(--lexi-primary);
    font-variant-numeric: tabular-nums;
    line-height:          1;
}

.hero-stat-value.val-cyan   { color: #06b6d4; }
.hero-stat-value.val-purple { color: #a855f7; }
.hero-stat-value.val-green  { color: #22c55e; }
.hero-stat-value.val-amber  { color: #f59e0b; }

.hero-stat-label {
    display:     block;
    margin-top:  0.5rem;
    font-family: var(--lexi-mono);
    font-size:   0.75rem;
    color:       var(--lexi-text-muted);
}

.hero-stats-disclaimer {
    text-align:  center;
    font-family: var(--lexi-mono);
    font-size:   0.72rem;
    color:       var(--lexi-text-dim);
    margin:      1.25rem auto 0;
    max-width:   600px;
}

/* ── Paradigm comparison ────────────────────────────────────────────── */

.paradigm-section {
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    padding:    6rem 2.5rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, transparent 100%);
}

.paradigm-inner {
    max-width: 1400px;
    margin:    0 auto;
}

.paradigm-title {
    font-family:    var(--lexi-display);
    font-size:      2.25rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
}

.paradigm-sub {
    color:         var(--lexi-text-muted);
    font-size:     1rem;
    line-height:   1.65;
    margin-bottom: 2.5rem;
    max-width:     640px;
}

.paradigm-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2rem;
}

.paradigm-card {
    border-radius: 16px;
    padding:       2.5rem;
    position:      relative;
    overflow:      hidden;
    transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.paradigm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.paradigm-card-left {
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-top: none;
}

.paradigm-card-right {
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-top: none;
}

.paradigm-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}

.paradigm-card-left .paradigm-glow {
    background: rgba(239, 68, 68, 0.1);
}

.paradigm-card-right .paradigm-glow {
    background: rgba(59, 130, 246, 0.15);
}

.paradigm-card-header {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    font-size:      1.15rem;
    font-weight:    700;
    color:          var(--lexi-text);
    margin-bottom:  1.75rem;
    letter-spacing: -0.01em;
}

.paradigm-card-header .material-symbols-outlined {
    font-size: 24px;
}

.paradigm-card-left .paradigm-card-header {
    color: #f87171;
}

.paradigm-card-right .paradigm-card-header {
    color: var(--lexi-primary);
}

.paradigm-items {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.paradigm-item {
    display:     flex;
    align-items: flex-start;
    gap:         0.875rem;
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.5;
}

.paradigm-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lexi-text);
    margin-bottom: 0.2rem;
}

.paradigm-item-desc {
    font-size: 0.85rem;
    color: var(--lexi-text-muted);
    line-height: 1.5;
}

.paradigm-icon {
    flex-shrink:  0;
    width:        24px;
    height:       24px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    border-radius: 50%;
    font-size:    inherit;
    font-weight:  700;
    margin-top:   1px;
}

.paradigm-icon-bad {
    background: rgba(239, 68, 68, 0.12);
    color:      #f87171;
}

.paradigm-icon-good {
    background: rgba(34, 197, 94, 0.12);
    color:      #4ade80;
}

/* ── Provider grid ──────────────────────────────────────────────────── */

.provider-section {
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    padding:    6rem 2.5rem;
}

.provider-inner {
    max-width: 1400px;
    margin:    0 auto;
}

.provider-title {
    font-family:    var(--lexi-display);
    font-size:      2.25rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
}

.provider-sub {
    color:         var(--lexi-text-muted);
    font-size:     1rem;
    line-height:   1.65;
    margin-bottom: 2.5rem;
    max-width:     580px;
}

.provider-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}

.provider-card {
    border-radius: 16px;
    padding:       2.5rem 2rem;
    text-align:    center;
    transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.provider-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.12);
}

.provider-letter {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           56px;
    height:          56px;
    border-radius:   14px;
    background:      linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.03) 100%);
    font-size:       1.75rem;
    font-weight:     800;
    letter-spacing:  -0.04em;
    line-height:     1;
    margin:          0 auto 1rem;
    animation:       float 4s ease-in-out infinite;
}

.provider-name {
    display:     block;
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--lexi-text);
}

.provider-count {
    display:     block;
    margin-top:  0.25rem;
    font-family: var(--lexi-mono);
    font-size:   0.72rem;
    color:       var(--lexi-text-muted);
}

/* ── Chart section ──────────────────────────────────────────────────── */

.chart-section {
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    padding:    6rem 2.5rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, transparent 100%);
}

.chart-inner {
    max-width: 1400px;
    margin:    0 auto;
}

.chart-title {
    font-family:    var(--lexi-display);
    font-size:      2.25rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
}

.chart-sub {
    color:         var(--lexi-text-muted);
    font-size:     1rem;
    line-height:   1.65;
    margin-bottom: 2rem;
    max-width:     580px;
}

.chart-wrap {
    border-radius: 16px;
    padding:       2rem;
    position:      relative;
    max-height:    420px;
}

.chart-disclaimer {
    font-family: var(--lexi-mono);
    font-size:   0.72rem;
    color:       var(--lexi-text-dim);
    margin-top:  1rem;
}

/* ── CTA v2 — split layout with stat cards ─────────────────────────── */

.cta-band-v2 {
    border-top:  1px solid rgba(55, 65, 81, 0.3);
    background:  linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(10, 10, 11, 1) 100%);
    padding:     8rem 2.5rem;
    position:    relative;
    overflow:    hidden;
}

.cta-v2-inner {
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(55, 65, 81, 0.5);
    border-radius: 24px;
    padding: 4rem 3.5rem;
    position: relative;
    overflow: hidden;
    z-index:  1;
}

.cta-glow-orb {
    position:      absolute;
    width:         700px;
    height:        700px;
    border-radius: 50%;
    background:    radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, rgba(59, 130, 246, 0.08) 40%, rgba(6, 182, 212, 0.04) 70%, transparent 100%);
    top:           50%;
    left:          30%;
    transform:     translate(-50%, -50%);
    pointer-events: none;
    filter:        blur(60px);
    animation:     float 6s ease-in-out infinite;
}

.cta-layout {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         3rem;
    align-items: center;
}

.cta-left {
    text-align: left;
}

.cta-eyebrow {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #a855f7;
    margin-bottom:  1rem;
}

.cta-left .cta-title {
    text-align: left;
    font-size:  2.5rem;
}

.cta-left .cta-sub {
    text-align: left;
    font-size:  1rem;
    line-height: 1.7;
    color:       var(--lexi-text-muted);
    margin:      0 0 2rem 0;
}

.cta-left .cta-actions {
    justify-content: flex-start;
}

.cta-right {
    display:  grid;
    grid-template-columns: 1fr 1fr;
    gap:      0.875rem;
}

.cta-stat-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        1.5rem 1rem;
    border-radius:  14px;
    gap:            0.5rem;
    transition:     transform 0.25s ease, border-color 0.25s ease;
}

.cta-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.12);
}

.cta-stat-icon {
    font-size: 1.5rem;
}

.cta-stat-value {
    font-family:     var(--lexi-display);
    font-size:       2rem;
    font-weight:     700;
    letter-spacing:  -0.03em;
    color:           var(--lexi-text);
    font-variant-numeric: tabular-nums;
}

.cta-stat-label {
    font-family: var(--lexi-mono);
    font-size:   0.8rem;
    color:       var(--lexi-text-muted);
    letter-spacing: 0.02em;
}

.cta-stat-icon.text-cyan   { color: #06b6d4; }
.cta-stat-icon.text-purple { color: #a855f7; }
.cta-stat-icon.text-green  { color: #22c55e; }
.cta-stat-icon.text-amber  { color: #f59e0b; }

.cta-stat-value.val-cyan   { color: #06b6d4; }
.cta-stat-value.val-purple { color: #a855f7; }
.cta-stat-value.val-green  { color: #22c55e; }
.cta-stat-value.val-amber  { color: #f59e0b; }

/* ── Engine prop icons ──────────────────────────────────────────────── */

.ep-icon {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         56px;
    height:        56px;
    border-radius: 14px;
    background:    linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%);
    margin-bottom: 1.25rem;
    animation:     float 4s ease-in-out infinite;
}

.ep-icon .material-symbols-outlined {
    font-size: 26px;
    color:     var(--lexi-primary);
}

/* ── Footer v2 ──────────────────────────────────────────────────────── */

.site-footer-v2 {
    background:  linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(10, 10, 11, 0.9) 100%);
    border-top:  1px solid rgba(55, 65, 81, 0.3);
    padding:     5rem 2.5rem 2.5rem;
}

.footer-inner {
    max-width: 1400px;
    margin:    0 auto;
}

.footer-grid {
    display:               grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   3rem;
    margin-bottom:         3rem;
}

.footer-brand {
    font-size:      1.1rem;
    font-weight:    700;
    color:          var(--lexi-text);
    display:        flex;
    align-items:    center;
    gap:            0;
    margin-bottom:  0.75rem;
}

.footer-tagline {
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.6;
    margin:      0;
    max-width:   280px;
}

.footer-origin {
    margin-top:  0.25rem;
    font-size:   0.8rem;
    color:       var(--lexi-text-dim);
}

.footer-col {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

.footer-col-title {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:          var(--lexi-text-muted);
    margin-bottom:  0.5rem;
}

.footer-col a {
    font-size:       0.9rem;
    color:           var(--lexi-text-dim);
    text-decoration: none;
    transition:      color 0.1s;
    line-height:     1.8;
}

.footer-col a:hover { color: var(--lexi-text); }

.footer-taaft {
    text-align:  center;
    padding:     1.25rem 0 1.5rem;
    border-top:  1px solid var(--lexi-border);
}
.footer-taaft img {
    opacity:    0.7;
    transition: opacity 0.2s;
}
.footer-taaft img:hover { opacity: 1; }

.footer-bottom {
    border-top:      1px solid var(--lexi-border);
    padding-top:     1.25rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    font-size:       0.85rem;
    color:           var(--lexi-text-muted);
}

.footer-bottom a {
    color:           var(--lexi-text-dim);
    text-decoration: none;
    transition:      color 0.1s;
}

.footer-bottom a:hover { color: var(--lexi-text); }

.footer-sep {
    color:   var(--lexi-text-dim);
    opacity: 0.4;
}

/* ── Docs v2 — glassmorphic sidebar ─────────────────────────────────── */

.glass-sidebar {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(55, 65, 81, 0.4);
    border-radius: 0 16px 16px 0;
}

/* ── Code block v2 — terminal style ─────────────────────────────────── */

.code-block-v2 {
    background:    rgba(6, 10, 15, 0.9);
    border:        1px solid rgba(55, 65, 81, 0.4);
    border-left:   3px solid var(--lexi-primary);
    border-radius: 16px;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Mobile nav toggle ──────────────────────────────────────────────── */

.navbar-mobile-toggle {
    display:        none;
    flex-direction: column;
    gap:            4px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        4px;
}

.navbar-mobile-toggle span {
    display:       block;
    width:         20px;
    height:        2px;
    background:    var(--lexi-text-muted);
    border-radius: 1px;
    transition:    background 0.1s;
}

.navbar-mobile-toggle:hover span {
    background: var(--lexi-text);
}

/* ── V2 responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .hero-stats-grid     { grid-template-columns: repeat(2, 1fr); }
    .paradigm-grid       { grid-template-columns: 1fr; }
    .provider-grid       { grid-template-columns: repeat(2, 1fr); }
    .feature-grid-v2     { grid-template-columns: 1fr; }
    .footer-grid         { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .paradigm-section    { padding: 3.5rem 1.5rem; }
    .provider-section    { padding: 3.5rem 1.5rem; }
    .chart-section       { padding: 3.5rem 1.5rem; }
    .cta-band-v2         { padding: 4rem 1.5rem; }
    .hero-stats-band     { padding: 2rem 1.5rem; }
    .feature-section     { padding: 3.5rem 1.5rem; }
    .cta-v2-inner        { padding: 3rem 2rem; border-radius: 16px; }
    .cta-layout          { grid-template-columns: 1fr; text-align: center; }
    .cta-left            { text-align: center; }
    .cta-left .cta-title { text-align: center; font-size: 2rem; }
    .cta-left .cta-sub   { text-align: center; }
    .cta-left .cta-actions { justify-content: center; }
    .cta-eyebrow         { text-align: center; }
    .cta-right           { max-width: 400px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .navbar-links {
        display:        none;
        flex-direction: column;
        position:       absolute;
        top:            100%;
        left:           0;
        right:          0;
        background:     rgba(2, 6, 23, 0.98);
        backdrop-filter: blur(12px);
        padding:        1rem 2rem 1.5rem;
        border-bottom:  1px solid var(--lexi-border);
        gap:            0.75rem;
    }

    .navbar-links.mobile-open {
        display: flex;
    }

    .navbar-mobile-toggle {
        display: flex;
    }
}

@media (max-width: 540px) {
    .hero-stats-grid  { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .hero-stat        { padding: 1.25rem 0.75rem; }
    .hero-stat-value  { font-size: 1.75rem; }
    .provider-grid    { grid-template-columns: 1fr 1fr; }
    .feature-grid-v2  { grid-template-columns: 1fr; }
    .footer-grid      { grid-template-columns: 1fr; gap: 1.5rem; }
    .paradigm-section, .provider-section, .chart-section, .cta-band-v2, .feature-section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .hero-stats-band { padding-left: 1.25rem; padding-right: 1.25rem; }
    .paradigm-title, .provider-title, .chart-title { font-size: 1.5rem; }
    .cta-v2-inner { padding: 2.5rem 1.5rem; }
    .cta-left .cta-title { font-size: 1.75rem; }
    .cta-stat-value { font-size: 1.5rem; }
    .cta-stat-card  { padding: 1.25rem 0.75rem; }
    .section-header h2 { font-size: 1.875rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Dashboard-style Home Page Components ─────────────────────────────  */
/* ═══════════════════════════════════════════════════════════════════════ */

.hero-stat-icon-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-bottom: 0.75rem;
}

.hero-stat-icon {
    font-size: 1.25rem;
}

.hero-stat-icon.text-blue   { color: #3b82f6; }
.hero-stat-icon.text-cyan   { color: #06b6d4; }
.hero-stat-icon.text-purple { color: #a855f7; }
.hero-stat-icon.text-green  { color: #22c55e; }
.hero-stat-icon.text-amber  { color: #f59e0b; }

.hero-stat-icon-label {
    font-family: var(--lexi-mono);
    font-size:   0.72rem;
    color:       var(--lexi-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-section {
    padding: 5rem 2.5rem;
}

.home-section-alt {
    border-top:    1px solid rgba(55, 65, 81, 0.3);
    border-bottom: 1px solid rgba(55, 65, 81, 0.3);
    background:    linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, transparent 100%);
}

.home-section-inner {
    max-width: 1400px;
    margin:    0 auto;
}

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

.section-label-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    margin-bottom:   0.75rem;
}

.section-label-row .material-symbols-outlined {
    font-size: 1.35rem;
    color:     var(--lexi-primary);
}

.section-label-text {
    font-family:    var(--lexi-mono);
    font-size:      0.85rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--lexi-primary);
}

.section-label-row.sl-cyan .section-label-text,
.section-label-row.sl-cyan .material-symbols-outlined { color: #06b6d4; }

.section-label-row.sl-purple .section-label-text,
.section-label-row.sl-purple .material-symbols-outlined { color: #a855f7; }

.section-label-row.sl-green .section-label-text,
.section-label-row.sl-green .material-symbols-outlined { color: #22c55e; }

.section-label-row.sl-amber .section-label-text,
.section-label-row.sl-amber .material-symbols-outlined { color: #f59e0b; }

.section-heading {
    font-family:    var(--lexi-display);
    font-size:      2.75rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
}

.section-sub {
    color:      var(--lexi-text-muted);
    font-size:  1.1rem;
    line-height: 1.65;
    max-width:  700px;
    margin:     0 auto;
}

.home-grid-2x2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
}
.home-grid-3col {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}

.home-card {
    padding: 2rem;
    position: relative;
}

.home-card-icon-box {
    width:           64px;
    height:          64px;
    border-radius:   16px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   1.5rem;
    transition:      background 0.3s ease;
}

.home-card-icon-box .material-symbols-outlined {
    font-size: 1.75rem;
}

.icon-box-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    color:      var(--lexi-primary);
}

.card-hover:hover .icon-box-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
}

.icon-box-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
    color:      #06b6d4;
}

.card-hover:hover .icon-box-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.1));
}

.icon-box-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05));
    color:      #a855f7;
}

.card-hover:hover .icon-box-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.1));
}

.icon-box-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    color:      #22c55e;
}

.card-hover:hover .icon-box-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1));
}

.icon-box-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    color:      #f59e0b;
}

.card-hover:hover .icon-box-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
}

.home-card-title {
    font-family:    var(--lexi-display);
    font-size:      1.25rem;
    font-weight:    700;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
    letter-spacing: -0.01em;
}

.home-card-desc {
    font-size:   0.95rem;
    line-height: 1.6;
    color:       var(--lexi-text-muted);
    margin:      0 0 1.25rem;
}

.home-card-details {
    display:    flex;
    gap:        1.5rem;
    padding-top: 1rem;
    border-top:  1px solid rgba(55, 65, 81, 0.4);
}

.home-card-detail {
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      0.75rem;
}

.home-detail-mono {
    font-family:    var(--lexi-mono);
    font-weight:    600;
    color:          var(--lexi-primary);
}

.home-detail-mono.dm-cyan   { color: #06b6d4; }
.home-detail-mono.dm-purple { color: #a855f7; }
.home-detail-mono.dm-green  { color: #22c55e; }
.home-detail-mono.dm-amber  { color: #f59e0b; }

.home-detail-label {
    color: var(--lexi-text-dim);
}

.paradigm-glow-orb {
    position:      absolute;
    top:           0;
    right:         0;
    width:         128px;
    height:        128px;
    border-radius: 50%;
    filter:        blur(48px);
    pointer-events: none;
}

.paradigm-glow-red {
    background: rgba(239, 68, 68, 0.1);
}

.paradigm-glow-blue {
    background: rgba(34, 197, 94, 0.12);
}

.paradigm-card-content {
    position: relative;
    z-index:  1;
}

.paradigm-card-header-row {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 1.5rem;
}

.paradigm-header-icon {
    font-size: 1.5rem;
}

.paradigm-header-bad {
    font-size:   1.15rem;
    font-weight: 700;
    color:       #f87171;
}

.paradigm-header-good {
    font-size:   1.15rem;
    font-weight: 700;
    color:       #22c55e;
}

.paradigm-item-title {
    font-weight: 600;
    font-size:   1rem;
    color:       var(--lexi-text);
    line-height: 1.4;
}

.paradigm-item-desc {
    font-size:   0.9rem;
    color:       var(--lexi-text-dim);
    line-height: 1.5;
    margin-top:  0.15rem;
}

.provider-grid-v2 {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    max-width:             640px;
    margin:                0 auto;
}

.provider-card-v2 {
    text-align:  center;
    padding:     1.5rem 1rem;
}

.provider-icon-box {
    width:           48px;
    height:          48px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 0.75rem;
}

.provider-icon-letter {
    font-size:   1.5rem;
    font-weight: 700;
}

.provider-card-name {
    font-weight: 600;
    font-size:   0.9rem;
    color:       var(--lexi-text);
}

.provider-card-count {
    font-family: var(--lexi-mono);
    font-size:   0.72rem;
    color:       var(--lexi-text-dim);
    margin-top:  0.25rem;
}

.headers-grid-v2 {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   0.75rem;
    max-width:             720px;
    margin:                0 auto;
}

/* ── Why Lexi cards ─────────────────────────────────────────────────── */

.why-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
}

.why-card {
    padding:       2.5rem;
    border-radius: 16px;
    position:      relative;
    overflow:      hidden;
}

.why-card-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.75rem;
}

.why-number {
    font-family:          var(--lexi-mono);
    font-size:            2.5rem;
    font-weight:          700;
    color:                rgba(59, 130, 246, 0.55);
    letter-spacing:       -0.04em;
    line-height:          1;
    font-variant-numeric: tabular-nums;
}

.why-number.num-cyan   { color: rgba(6, 182, 212, 0.55); }
.why-number.num-purple { color: rgba(168, 85, 247, 0.55); }
.why-number.num-green  { color: rgba(34, 197, 94, 0.55); }
.why-number.num-amber  { color: rgba(245, 158, 11, 0.55); }

.why-icon-box {
    width:           48px;
    height:          48px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    color:           var(--lexi-primary);
    transition:      background 0.3s ease;
}

.why-icon-box .material-symbols-outlined {
    font-size: 1.35rem;
}

.card-hover:hover .why-icon-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
}

.why-icon-box.wib-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
    color:      #06b6d4;
}
.card-hover:hover .wib-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.1));
}

.why-icon-box.wib-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05));
    color:      #a855f7;
}
.card-hover:hover .wib-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.1));
}

.why-icon-box.wib-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    color:      #22c55e;
}
.card-hover:hover .wib-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1));
}

.why-icon-box.wib-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    color:      #f59e0b;
}
.card-hover:hover .wib-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
}

.why-title {
    font-family:    var(--lexi-display);
    font-size:      1.25rem;
    font-weight:    700;
    color:          var(--lexi-text);
    margin:         0 0 0.75rem;
    letter-spacing: -0.01em;
}

.why-desc {
    font-size:   0.95rem;
    line-height: 1.6;
    color:       var(--lexi-text-muted);
    margin:      0 0 1.5rem;
}

.why-stat-row {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    padding-top: 1.25rem;
    border-top:  1px solid rgba(55, 65, 81, 0.4);
}

.why-stat {
    display:     flex;
    align-items: baseline;
    gap:         0.5rem;
}

.why-stat-value {
    font-family:          var(--lexi-mono);
    font-size:            1.1rem;
    font-weight:          700;
    color:                var(--lexi-primary);
    font-variant-numeric: tabular-nums;
}

.why-stat-value.wsv-cyan   { color: #06b6d4; }
.why-stat-value.wsv-purple { color: #a855f7; }
.why-stat-value.wsv-green  { color: #22c55e; }
.why-stat-value.wsv-amber  { color: #f59e0b; }

.why-stat-label {
    font-size: 0.75rem;
    color:     var(--lexi-text-dim);
}

.why-stat-sep {
    width:      1px;
    height:     20px;
    background: rgba(55, 65, 81, 0.5);
}

/* ── Calculator v2 ──────────────────────────────────────────────────── */

.calc-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2rem;
    margin-top:            2.5rem;
    align-items:           start;
}

.calc-controls-card {
    padding:       2rem;
    border-radius: 16px;
    display:       flex;
    flex-direction: column;
    gap:            1.75rem;
}

.calc-results-card {
    border-radius: 16px;
    overflow:      hidden;
}

.calc-savings-hero {
    padding:    2.5rem 2rem 2rem;
    text-align: center;
    border-bottom: 1px solid var(--lexi-border);
}

.calc-savings-amount {
    font-family:          var(--lexi-display);
    font-size:            3rem;
    font-weight:          700;
    color:                var(--lexi-success);
    letter-spacing:       -0.04em;
    line-height:          1;
    margin-bottom:        0.5rem;
    font-variant-numeric: tabular-nums;
}

.calc-savings-label {
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-muted);
    font-family:    var(--lexi-mono);
    margin-bottom:  0.35rem;
}

.calc-savings-pct {
    font-size: 0.9rem;
    color:     var(--lexi-text-dim);
}

.calc-breakdown {
    padding: 0;
}

.calc-breakdown-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         0.75rem 1.5rem;
    border-bottom:   1px solid var(--lexi-border);
    font-size:       0.85rem;
}

.calc-breakdown-row:last-child {
    border-bottom: none;
}

.cb-label {
    color: var(--lexi-text-muted);
}

.cb-value {
    font-family:          var(--lexi-mono);
    font-variant-numeric: tabular-nums;
    color:                var(--lexi-text);
    font-weight:          600;
}

.cb-strikethrough {
    text-decoration: line-through;
    color:           var(--lexi-text-dim);
}

.calc-breakdown-total {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         1rem 1.5rem;
    background:      var(--lexi-bg-surface);
    border-top:      1px solid var(--lexi-border-mid);
    font-size:       0.9rem;
}

.cb-total {
    font-family:          var(--lexi-mono);
    font-variant-numeric: tabular-nums;
    font-size:            1.1rem;
    font-weight:          700;
    color:                var(--lexi-primary);
}

/* ── Rate cards (1×5 horizontal row) ────────────────────────────────── */

.rate-cards-row {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   1rem;
    margin:                2.5rem auto 0;
}

.rate-card-h {
    text-align:    center;
    padding:       1.75rem 1rem;
    border-radius: 16px;
    position:      relative;
    overflow:      hidden;
}

.rate-card-h-accent {
    position:      absolute;
    top:           0;
    left:          50%;
    transform:     translateX(-50%);
    width:         40px;
    height:        3px;
    border-radius: 0 0 3px 3px;
}

.rate-accent-blue   { background: #3b82f6; }
.rate-accent-cyan   { background: #06b6d4; }
.rate-accent-green  { background: #22c55e; }
.rate-accent-purple { background: #a855f7; }
.rate-accent-amber  { background: #f59e0b; }

.rate-card-h-spend {
    font-family:          var(--lexi-display);
    font-size:            1.5rem;
    font-weight:          700;
    letter-spacing:       -0.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom:        0.15rem;
}

.rate-card-h-label {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-dim);
    margin-bottom:  1rem;
}

.rate-card-h-stats {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.1rem;
    padding-top:    0.75rem;
    border-top:     1px solid rgba(55, 65, 81, 0.4);
}

.rate-card-h-stats + .rate-card-h-stats {
    margin-top:  0.5rem;
    padding-top: 0.5rem;
}

.rate-card-h-val {
    font-family:          var(--lexi-mono);
    font-size:            0.9rem;
    font-weight:          600;
    color:                var(--lexi-text);
    font-variant-numeric: tabular-nums;
}

.rate-card-h-unit {
    font-size: 0.8rem;
    color:     var(--lexi-text-dim);
}

/* ── FAQ compact (pricing page) ─────────────────────────────────────── */

.faq-compact-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem;
    margin-top:            2.5rem;
}

.faq-compact-card {
    padding:       1.75rem;
    border-radius: 16px;
    display:       flex;
    flex-direction: column;
    gap:            1rem;
}

.faq-compact-icon {
    width:           40px;
    height:          40px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    color:           var(--lexi-primary);
    flex-shrink:     0;
}

.faq-compact-icon .material-symbols-outlined {
    font-size: 1.15rem;
}

.faq-compact-content {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

/* ── FAQ page ───────────────────────────────────────────────────────── */

.faq-page-grid {
    display:        flex;
    flex-direction: column;
    gap:            3rem;
    margin-top:     3rem;
}

.faq-category {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.faq-category-header {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--lexi-border);
}

.faq-cat-icon {
    font-size: 1.25rem;
    color:     var(--lexi-primary);
}

.faq-cat-title {
    font-family:    var(--lexi-display);
    font-size:      1.1rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin:         0;
    letter-spacing: -0.01em;
}

.faq-page-card {
    padding:       1.5rem 1.75rem;
    border-radius: 12px;
}

.faq-link {
    color:           var(--lexi-primary);
    text-decoration: none;
    border-bottom:   1px solid rgba(59, 130, 246, 0.3);
    transition:      border-color 0.2s ease;
}

.faq-link:hover {
    border-bottom-color: var(--lexi-primary);
}

/* ── FAQ v2 — left-border list layout ──────────────────────────────── */

.faq-v2-header {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-bottom: 2rem;
}

.faq-v2-icon-box {
    width:           44px;
    height:          44px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.faq-v2-icon-box .material-symbols-outlined {
    font-size: 1.3rem;
}

.faq-ib-cyan   { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));   color: #06b6d4; }
.faq-ib-green  { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));   color: #22c55e; }
.faq-ib-purple { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05)); color: #a855f7; }
.faq-ib-amber  { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05)); color: #f59e0b; }

.faq-v2-cat-label {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  0.15rem;
}

.faq-v2-cat-title {
    font-family:    var(--lexi-display);
    font-size:      1.35rem;
    font-weight:    700;
    color:          var(--lexi-text);
    margin:         0;
    letter-spacing: -0.02em;
}

.faq-v2-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.faq-v2-item {
    padding:       1.5rem 0 1.5rem 1.5rem;
    border-bottom: 1px solid var(--lexi-border);
    border-left:   3px solid transparent;
    transition:    border-left-color 0.2s, background 0.2s;
}

.faq-v2-item:last-child {
    border-bottom: none;
}

.faq-v2-item:hover {
    background:  rgba(255, 255, 255, 0.015);
}

.faq-border-cyan:hover   { border-left-color: #06b6d4; }
.faq-border-green:hover  { border-left-color: #22c55e; }
.faq-border-purple:hover { border-left-color: #a855f7; }
.faq-border-amber:hover  { border-left-color: #f59e0b; }

.faq-v2-q {
    font-size:      1.05rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  0.5rem;
    letter-spacing: -0.01em;
}

.faq-v2-a {
    font-size:   0.925rem;
    color:       var(--lexi-text-muted);
    line-height: 1.75;
}

@media (max-width: 900px) {
    .why-grid { grid-template-columns: 1fr; }
    .home-grid-2x2 { grid-template-columns: 1fr; }
    .home-grid-3col { grid-template-columns: 1fr; }
    .provider-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .section-heading { font-size: 1.75rem; }
    .home-section { padding: 3.5rem 1.5rem; }
    .calc-layout { grid-template-columns: 1fr; }
    .faq-compact-grid { grid-template-columns: 1fr; }
    .rate-cards-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .why-grid { grid-template-columns: 1fr; }
    .provider-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .headers-grid-v2 { grid-template-columns: 1fr; }
    .home-section { padding: 2.5rem 1.25rem; }
    .section-heading { font-size: 1.5rem; }
    .home-card-details { flex-direction: column; gap: 0.5rem; }
    .rate-cards-row { grid-template-columns: repeat(2, 1fr); }
    .why-number { font-size: 2rem; }
    .calc-savings-amount { font-size: 2.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Docs v2 — Sidebar + content layout ──────────────────────────────  */
/* ═══════════════════════════════════════════════════════════════════════ */

.docs-page {
    display:               grid;
    grid-template-columns: 260px 1fr;
    max-width:             1400px;
    margin:                0 auto;
    padding:               3rem 2.5rem 5rem;
    gap:                   3rem;
    min-height:            100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */

.docs-sidebar-v2 {
    position:      sticky;
    top:           5rem;
    align-self:    start;
    padding:       1.5rem;
    border-radius: 16px;
    max-height:    calc(100vh - 6rem);
    overflow-y:    auto;
}

.docs-sidebar-title {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-muted);
    margin-bottom:  1.25rem;
    padding-bottom: 0.75rem;
    border-bottom:  1px solid var(--lexi-border);
}

.docs-sidebar-nav {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.docs-sidebar-link {
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    padding:         0.5rem 0.75rem;
    font-size:       0.875rem;
    color:           var(--lexi-text-muted);
    text-decoration: none;
    border-radius:   8px;
    transition:      color 0.15s, background 0.15s;
}

.docs-sidebar-link .material-symbols-outlined {
    font-size: 1.1rem;
    opacity:   0.6;
}

.docs-sidebar-link:hover {
    color:      var(--lexi-text);
    background: var(--lexi-bg-surface);
}

.docs-sidebar-link:hover .material-symbols-outlined {
    opacity: 1;
}

/* ── Content area ─────────────────────────────────────────────────── */

.docs-content-v2 {
    min-width: 0;
}

.docs-section-v2 {
    padding-bottom:    3.5rem;
    margin-bottom:     3.5rem;
    border-bottom:     1px solid var(--lexi-border);
    scroll-margin-top: 5rem;
}

.docs-section-v2:last-child {
    border-bottom:  none;
    margin-bottom:  0;
    padding-bottom: 0;
}

/* Section label (colored icon + text row) */
.docs-section-label {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-bottom: 0.75rem;
}

.docs-section-label .material-symbols-outlined {
    font-size: 1.25rem;
}

.docs-section-label > span:last-child {
    font-family:    var(--lexi-mono);
    font-size:      0.85rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Color variants — reuse sl- prefix colors */
.docs-section-label.sl-cyan .material-symbols-outlined,
.docs-section-label.sl-cyan > span:last-child { color: #06b6d4; }

.docs-section-label.sl-purple .material-symbols-outlined,
.docs-section-label.sl-purple > span:last-child { color: #a855f7; }

.docs-section-label.sl-green .material-symbols-outlined,
.docs-section-label.sl-green > span:last-child { color: #22c55e; }

.docs-section-label.sl-amber .material-symbols-outlined,
.docs-section-label.sl-amber > span:last-child { color: #f59e0b; }

/* Section title */
.docs-section-title {
    font-family:    var(--lexi-display);
    font-size:      2rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--lexi-text);
    margin:         0 0 1rem;
    line-height:    1.2;
}

/* Body text */
.docs-body {
    color:       var(--lexi-text-muted);
    font-size:   1rem;
    line-height: 1.8;
    margin:      0 0 1rem;
    max-width:   780px;
}

/* H3 sub-heading */
.docs-h3 {
    font-size:      1.05rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin:         1.75rem 0 1rem;
    letter-spacing: -0.01em;
}

.docs-h3-badge {
    font-family:    var(--lexi-mono);
    font-size:      0.7rem;
    font-weight:    500;
    color:          var(--lexi-text-muted);
    background:     var(--lexi-bg-surface);
    border:         1px solid var(--lexi-border-mid);
    border-radius:  100px;
    padding:        0.2rem 0.6rem;
    margin-left:    0.5rem;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* Callout block (blue left border) */
.docs-callout {
    border-radius: 8px;
    padding:       1.25rem 1.5rem;
    font-size:     0.95rem;
    line-height:   1.75;
    color:         var(--lexi-text-muted);
    margin-bottom: 1.75rem;
}

.docs-callout-blue {
    background:  rgba(59, 130, 246, 0.06);
    border-left: 3px solid #3b82f6;
    border:      1px solid rgba(59, 130, 246, 0.15);
    border-left: 3px solid #3b82f6;
}

/* Tip card (icon + label + text) */
.docs-tip {
    display:       flex;
    gap:           1rem;
    padding:       1.25rem 1.5rem;
    border-radius: 12px;
    margin-top:    1.5rem;
    align-items:   flex-start;
}

.docs-tip-icon {
    font-size:   1.5rem;
    flex-shrink: 0;
    margin-top:  0.1rem;
}

.docs-tip-label {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--lexi-text);
    margin-bottom:  0.35rem;
}

.docs-tip > div {
    font-size:   0.9rem;
    line-height: 1.7;
    color:       var(--lexi-text-muted);
}

/* Code block */
.docs-code {
    background:    var(--lexi-bg-surface);
    border:        1px solid var(--lexi-border-mid);
    border-radius: 10px;
    padding:       1.25rem 1.5rem;
    overflow-x:    auto;
    margin:        1rem 0 1.5rem;
}

.docs-code pre {
    margin: 0;
}

.docs-code code {
    font-family: var(--lexi-mono);
    font-size:   0.85rem;
    line-height: 1.7;
    color:       var(--lexi-secondary);
}

/* Steps (getting started) */
.docs-steps-v2 {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.docs-step-v2 {
    padding:       1.75rem 1.75rem;
    border-radius: 16px;
}

.docs-step-num-v2 {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    margin-bottom:  0.75rem;
}

.docs-step-title-v2 {
    font-size:      1.1rem;
    font-weight:    600;
    color:          var(--lexi-text);
    margin-bottom:  0.625rem;
    letter-spacing: -0.01em;
}

.docs-step-body {
    font-size:   0.925rem;
    color:       var(--lexi-text-muted);
    line-height: 1.7;
    margin:      0 0 0.75rem;
}

.docs-step-body:last-child {
    margin-bottom: 0;
}

.docs-step-v2 .docs-code {
    margin-top: 0.75rem;
}

/* Tables */
.docs-table-wrap {
    border-radius: 12px;
    overflow:      hidden;
    padding:       0;
}

.docs-table-v2 {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9rem;
}

.docs-table-v2 thead tr {
    background: rgba(15, 23, 42, 0.5);
}

.docs-table-v2 th {
    padding:        0.7rem 1.25rem;
    border-bottom:  1px solid var(--lexi-border);
    font-family:    var(--lexi-mono);
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-text-muted);
    text-align:     left;
    font-weight:    500;
}

.docs-table-v2 td {
    padding:        0.85rem 1.25rem;
    border-bottom:  1px solid var(--lexi-border);
    color:          var(--lexi-text);
    vertical-align: top;
    line-height:    1.55;
}

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

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

/* Model grid */
.docs-model-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

.docs-model-card {
    padding:       1.5rem;
    border-radius: 12px;
}

.docs-model-provider {
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    margin-bottom:  0.75rem;
}

.docs-model-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.375rem;
}

/* ── Docs responsive ──────────────────────────────────────────────── */

@media (max-width: 960px) {
    .docs-page {
        grid-template-columns: 1fr;
        padding:               2rem 1.5rem 4rem;
        gap:                   0;
    }
    .docs-sidebar-v2 {
        position:      static;
        max-height:    none;
        margin-bottom: 2rem;
    }
    .docs-sidebar-nav {
        flex-direction: row;
        flex-wrap:      wrap;
        gap:            0.25rem;
    }
    .docs-sidebar-link {
        font-size: 0.82rem;
        padding:   0.4rem 0.65rem;
    }
    .docs-model-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .docs-page {
        padding: 1.5rem 1.25rem 3rem;
    }
    .docs-section-title {
        font-size: 1.6rem;
    }
    .docs-table-v2 {
        font-size: 0.8rem;
    }
    .docs-table-v2 th,
    .docs-table-v2 td {
        padding: 0.6rem 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Provider strip (1x6 horizontal) ────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

.provider-strip {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   1rem;
    max-width:             1100px;
    margin:                0 auto;
}

.provider-strip-card {
    text-align:    center;
    padding:       1.5rem 0.75rem;
    border-radius: 16px;
}

@media (max-width: 900px) {
    .provider-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 540px) {
    .provider-strip { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .provider-strip-card { padding: 1.25rem 0.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Headers terminal (response headers rework) ─────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

.headers-terminal {
    max-width:     680px;
    margin:        0 auto;
    overflow:      hidden;
    border-radius: 16px;
}

.ht-bar {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    padding:       0.75rem 1.25rem;
    background:    var(--lexi-bg-surface);
    border-bottom: 1px solid var(--lexi-border);
}

.ht-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--lexi-border-high);
}

.ht-title {
    font-family:    var(--lexi-mono);
    font-size:      0.72rem;
    color:          var(--lexi-text-dim);
    letter-spacing: 0.04em;
    margin-left:    0.5rem;
}

.ht-body {
    padding: 0;
}

.ht-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         0.75rem 1.5rem;
    border-bottom:   1px solid var(--lexi-border);
    font-family:     var(--lexi-mono);
    font-size:       0.875rem;
}

.ht-row:last-child { border-bottom: none; }

.ht-key {
    color:       var(--lexi-text-muted);
    font-size:   0.82rem;
}

.ht-val {
    color:                var(--lexi-text);
    font-weight:          600;
    font-variant-numeric: tabular-nums;
}

.ht-val-green { color: var(--lexi-success); }
.ht-val-blue  { color: var(--lexi-primary); }

@media (max-width: 600px) {
    .ht-row { flex-direction: column; gap: 0.25rem; padding: 0.625rem 1.25rem; }
    .ht-key { font-size: 0.72rem; }
    .ht-val { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Integration split (text + code side by side) ───────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

.integration-split {
    display:               grid;
    grid-template-columns: 1fr 1.2fr;
    gap:                   3rem;
    align-items:           center;
}

.integration-text {
    display:        flex;
    flex-direction: column;
}

.integration-split .code-block {
    margin: 0;
}

@media (max-width: 900px) {
    .integration-split { grid-template-columns: 1fr; gap: 2rem; }
    .integration-text .section-heading { text-align: center !important; }
    .integration-text .section-label-row { justify-content: center !important; }
    .integration-text .section-sub { margin: 0 auto 1.5rem !important; text-align: center; }
    .integration-text .hero-link { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Legal pages — wide horizontal layout ───────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Legal v2 — shared by Privacy + Terms ──────────────────────────── */

.legal-v2-header {
    display:               grid;
    grid-template-columns: 1fr auto;
    gap:                   3rem;
    align-items:           start;
    max-width:             1400px;
    margin:                0 auto;
}

.legal-v2-header-left .section-label-row {
    justify-content: flex-start;
}

.legal-v2-intro {
    font-size:   1.1rem;
    color:       var(--lexi-text-muted);
    line-height: 1.7;
    max-width:   600px;
    margin:      0.5rem 0 0;
}

.legal-v2-meta {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    min-width:      180px;
}

.legal-v2-meta-card {
    padding:       1rem 1.25rem;
    border-radius: 12px;
    display:       flex;
    flex-direction: column;
    gap:           0.25rem;
}

.legal-v2-meta-label {
    font-family:    var(--lexi-mono);
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--lexi-text-muted);
    font-weight:    600;
}

.legal-v2-meta-value {
    font-size:   0.925rem;
    font-weight: 600;
    color:       var(--lexi-text);
}

.legal-v2-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.25rem;
}

.legal-v2-card {
    padding:       2rem;
    border-radius: 16px;
}

.legal-v2-card-title {
    font-family:    var(--lexi-display);
    font-size:      1.15rem;
    font-weight:    700;
    color:          var(--lexi-text);
    margin:         1rem 0 0.75rem;
    letter-spacing: -0.01em;
}

.legal-v2-p {
    font-size:   0.925rem;
    color:       var(--lexi-text-muted);
    line-height: 1.75;
    margin:      0 0 0.75rem;
}

.legal-v2-p:last-child { margin-bottom: 0; }

.legal-v2-ul {
    list-style:  none;
    padding:     0;
    margin:      0;
    font-size:   0.925rem;
    color:       var(--lexi-text-muted);
    line-height: 1.75;
}

.legal-v2-ul li {
    padding-left: 1.25rem;
    position:     relative;
    margin-bottom: 0.35rem;
}

.legal-v2-ul li::before {
    content:  "";
    position: absolute;
    left:     0;
    top:      0.65em;
    width:    5px;
    height:   5px;
    border-radius: 50%;
    background: var(--lexi-border-high);
}

.legal-v2-ul li strong {
    color: var(--lexi-text);
}

.legal-v2-rights-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    margin-top:            0;
}

.legal-v2-right {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
    padding:        1.25rem 1.5rem;
    border-radius:  12px;
}

.legal-v2-right strong {
    font-size: 0.95rem;
    color:     var(--lexi-text);
}

.legal-v2-right span {
    font-size:   0.9rem;
    color:       var(--lexi-text-muted);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .legal-v2-header { grid-template-columns: 1fr; gap: 1.5rem; }
    .legal-v2-grid { grid-template-columns: 1fr; }
    .legal-v2-rights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .legal-v2-rights-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Dashboard v2 — glass styling ───────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */

.dashboard-sidebar {
    background:   rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(55, 65, 81, 0.5);
}

.dashboard-content {
    background: transparent;
}

.stats-grid .stat-card,
.db-balance-card,
.db-tier-strip,
.db-key-banner,
.db-table {
    background:    rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:        1px solid rgba(55, 65, 81, 0.5);
    border-radius: 12px;
}

.db-table {
    border-collapse: separate;
    border-spacing:  0;
    overflow:        hidden;
}

.sidebar-link.active {
    background: rgba(59, 130, 246, 0.1);
}

.db-page-title {
    font-family: var(--lexi-display);
}

.fl-label {
    font-family:    var(--lexi-mono);
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--lexi-primary);
    margin-bottom:  0.25rem;
}

/* ── Responsive: section heading sizes ─────────────────────────────── */

@media (max-width: 900px) {
    .section-heading { font-size: 2.15rem; }
}

@media (max-width: 600px) {
    .section-heading { font-size: 1.75rem; }
    .section-sub { font-size: 1rem; }
    .section-label-text { font-size: 0.78rem; }
}

/* ── FAQ nav strip ───────────────────────────────────────────────────── */

.faq-nav-strip {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.faq-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
    background: var(--lexi-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: var(--lexi-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.faq-nav-pill .material-symbols-outlined {
    font-size: 18px;
}

.faq-nav-pill:hover {
    background: var(--lexi-bg-surface);
    color: var(--lexi-text);
}

.faq-nav-cyan:hover  { border-color: rgba(6, 182, 212, 0.4); }
.faq-nav-green:hover { border-color: rgba(34, 197, 94, 0.4); }
.faq-nav-purple:hover { border-color: rgba(168, 85, 247, 0.4); }
.faq-nav-amber:hover { border-color: rgba(245, 158, 11, 0.4); }

.faq-nav-cyan .material-symbols-outlined  { color: #06b6d4; }
.faq-nav-green .material-symbols-outlined { color: #22c55e; }
.faq-nav-purple .material-symbols-outlined { color: #a855f7; }
.faq-nav-amber .material-symbols-outlined { color: #f59e0b; }

.faq-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--lexi-text-dim);
}

@media (max-width: 600px) {
    .faq-nav-strip { gap: 0.5rem; }
    .faq-nav-pill { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
}

/* ── Language toggle ─────────────────────────────────────────────────── */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2px;
    margin-left: 0.5rem;
}

.lang-btn {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--lexi-text-muted);
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
    font-family: 'Inter', sans-serif;
}

.lang-btn:hover {
    color: var(--lexi-text);
    background: rgba(255, 255, 255, 0.08);
}

.lang-btn.lang-active {
    color: var(--lexi-text);
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
    .lang-toggle {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}