/*!
 * LinkForge — Auth0-style standalone CSS
 * Drop-in replacement for the build/manifest output. Upload to public/auth0.css
 * and reference it BEFORE any other CSS in your layouts.
 *
 * Self-contained: defines CSS variables, utility classes, and component
 * classes. No Tailwind/PostCSS build required.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
 * 1. Design tokens
 * ========================================================================= */
:root {
    --bg-primary:        #FFFFFF;
    --bg-secondary:      #F7F7F8;
    --bg-tertiary:       #EFEFF1;
    --bg-inverse:        #0B0C0F;
    --bg-inverse-soft:   #16181D;

    --brand-primary:     #3F59E4;
    --brand-hover:       #2E45C4;
    --brand-secondary:   #635DFF;
    --brand-tertiary:    #EB5424;
    --brand-50:          #EEF1FE;

    --text-primary:      #0B0C0F;
    --text-secondary:    #4A4D55;
    --text-tertiary:     #7C7F88;
    --text-on-brand:     #FFFFFF;
    --text-on-inverse:   #FFFFFF;
    --text-on-inverse-muted: #A0A4AF;

    --border-subtle:     #E5E7EB;
    --border-default:    #D1D5DB;
    --border-strong:     #9CA3AF;

    --success: #16A34A;
    --warning: #F59E0B;
    --danger:  #DC2626;
    --info:    #0EA5E9;

    --gradient-hero:
        radial-gradient(ellipse at top, rgba(99,93,255,0.12), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(63,89,228,0.08), transparent 50%);
    --gradient-card:
        linear-gradient(135deg, rgba(99,93,255,0.04), rgba(63,89,228,0.02));

    --shadow-sm:   0 1px 2px rgba(11,12,15,0.04);
    --shadow-md:   0 4px 16px rgba(11,12,15,0.06);
    --shadow-lg:   0 12px 40px rgba(11,12,15,0.08);
    --shadow-glow: 0 0 60px rgba(63,89,228,0.15);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
 * 2. Base
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Alpine.js — hide cloaked elements until Alpine initializes.
   Without this, x-show=false elements flash visible during page load
   AND stay visible if Alpine fails to load (e.g. blocked CDN).
   Critical for mobile sidebar overlay, modals, dropdowns. */
[x-cloak] { display: none !important; }
body {
    margin: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01", "ss03";
    line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Aeonik', 'Inter Display', 'Inter', sans-serif;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { text-underline-offset: 3px; color: inherit; text-decoration: none; }

/* Reset native button styling — only .btn-* classes get explicit visual styling.
   Prevents browser default gray-bordered look on accordions, icon buttons, etc. */
button {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: inherit;
}
button:disabled { cursor: not-allowed; opacity: 0.5; }
img, svg { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 9999px;
    border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::selection { background: rgba(63, 89, 228, 0.18); color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
 * 3. Surface / background utilities
 * ========================================================================= */
.bg-surface-1, .bg-surface-DEFAULT { background-color: var(--bg-primary); }
.bg-surface-2 { background-color: var(--bg-secondary); }
.bg-surface-3 { background-color: var(--bg-tertiary); }
.bg-surface-inverse { background-color: var(--bg-inverse); }
.bg-surface-inverse-soft { background-color: var(--bg-inverse-soft); }
.bg-brand, .bg-brand-DEFAULT { background-color: var(--brand-primary); }
.bg-brand-50 { background-color: var(--brand-50); }
.bg-white { background-color: #FFFFFF; }

/* legacy compat — `bg-dark-*` flipped to light surfaces */
.bg-dark-950 { background-color: var(--bg-primary); }
.bg-dark-900 { background-color: var(--bg-secondary); }
.bg-dark-800 { background-color: var(--bg-primary); }
.bg-dark-700 { background-color: var(--bg-secondary); }
.bg-dark-600 { background-color: var(--bg-tertiary); }
.bg-dark-500 { background-color: var(--border-default); }

/* ============================================================================
 * 4. Text / ink utilities
 * ========================================================================= */
.text-ink-primary, .text-ink-DEFAULT { color: var(--text-primary); }
.text-ink-secondary { color: var(--text-secondary); }
.text-ink-tertiary { color: var(--text-tertiary); }
.text-ink-on-brand { color: var(--text-on-brand); }
.text-ink-on-inverse { color: var(--text-on-inverse); }
.text-ink-on-inverse-muted { color: var(--text-on-inverse-muted); }
.text-brand, .text-brand-DEFAULT { color: var(--brand-primary); }
.text-brand-hover:hover { color: var(--brand-hover); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }

/* `text-white` legacy compat: in old views, text-white meant "primary text on
   dark theme". With auth0 light theme, dark primary text is what we actually
   want for things like h1s, table cells, etc. New views use text-ink-on-inverse
   when explicit white-on-dark is needed (footer, stats band, hero CTAs use
   .btn-primary which has its own color rule). */
.text-white { color: var(--text-primary); }
.bg-surface-inverse .text-white,
.bg-ink-primary .text-white,
[data-on-dark] .text-white,
footer .text-white,
.text-ink-on-inverse,
.btn-primary .text-white { color: #FFFFFF; }

/* legacy compat */
.text-accent-pink { color: var(--brand-primary); }
.text-accent-pink-light { color: #6379EC; }
.text-accent-purple { color: var(--brand-secondary); }
.text-accent-purple-light { color: #8EA3F4; }
.text-gray-300, .text-gray-400 { color: var(--text-secondary); }
.text-gray-500, .text-gray-600 { color: var(--text-tertiary); }
.text-emerald-400 { color: var(--success); }
.text-amber-400 { color: var(--warning); }
.text-red-400 { color: var(--danger); }
.text-sky-400 { color: var(--info); }

/* gradient text shim — render as solid brand */
.text-gradient {
    color: var(--brand-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* ============================================================================
 * 5. Border / hairline utilities
 * ========================================================================= */
.border { border: 1px solid var(--border-subtle); }
.border-hairline, .border-hairline-DEFAULT { border-color: var(--border-subtle); }
.border-hairline-subtle { border-color: var(--border-subtle); }
.border-hairline-default { border-color: var(--border-default); }
.border-hairline-strong { border-color: var(--border-strong); }
.border-brand { border-color: var(--brand-primary); }
.border-t { border-top: 1px solid var(--border-subtle); }
.border-b { border-bottom: 1px solid var(--border-subtle); }
.border-y { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.divide-hairline > * + * { border-top: 1px solid var(--border-subtle); }
.divide-y > * + * { border-top: 1px solid var(--border-subtle); }

/* ============================================================================
 * 6. Typography
 * ========================================================================= */
.text-eyebrow { font-size: 13px; line-height: 1; letter-spacing: 0.08em; font-weight: 600; }
.text-body-sm { font-size: 14px; line-height: 1.5; }
.text-body-md { font-size: 16px; line-height: 1.6; }
.text-body-lg { font-size: 18px; line-height: 1.55; }
.text-heading-sm { font-size: 18px; line-height: 1.35; font-weight: 600; }
.text-heading-md { font-size: 22px; line-height: 1.3;  font-weight: 600; }
.text-heading-lg { font-size: 28px; line-height: 1.25; font-weight: 600; }
.text-display-sm { font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.text-display-md { font-size: 48px; line-height: 1.1;  font-weight: 600; letter-spacing: -0.02em; }
.text-display-lg { font-size: 64px; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; }
.text-display-xl { font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }

@media (max-width: 768px) {
    .text-display-xl { font-size: 48px; }
    .text-display-lg { font-size: 40px; }
    .text-display-md { font-size: 36px; }
    .text-display-sm { font-size: 28px; }
}

.font-display { font-family: 'Aeonik', 'Inter Display', 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.tracking-tight { letter-spacing: -0.025em; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ============================================================================
 * 7. Eyebrow component
 * ========================================================================= */
.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
}

/* ============================================================================
 * 8. Layout primitives
 * ========================================================================= */
.container-page {
    margin-inline: auto;
    width: 100%;
    max-width: 1280px;
    padding-inline: 24px;
}
@media (min-width: 1024px) { .container-page { padding-inline: 48px; } }
.section { padding-block: 64px; }
@media (min-width: 768px) { .section { padding-block: 96px; } }
.section-tight { padding-block: 48px; }
@media (min-width: 768px) { .section-tight { padding-block: 64px; } }

/* ============================================================================
 * 9. Buttons (auth0-style pills)
 * ========================================================================= */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    padding: 12px 24px;
    transition: all 200ms var(--ease-out);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.btn-sm { font-size: 14px; padding: 8px 16px; }
.btn-lg { font-size: 16px; padding: 14px 28px; }

.btn-primary {
    background: var(--brand-primary);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--brand-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-secondary:hover {
    border-color: var(--border-strong);
    background: var(--bg-secondary);
}

.btn-ghost {
    background: transparent;
    color: var(--brand-primary);
    padding: 8px 12px;
}
.btn-ghost:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: rgba(220, 38, 38, 0.3);
}
.btn-danger:hover { background: rgba(220, 38, 38, 0.08); border-color: var(--danger); }

.btn-success {
    background: transparent;
    color: var(--success);
    border-color: rgba(22, 163, 74, 0.3);
}
.btn-success:hover { background: rgba(22, 163, 74, 0.08); border-color: var(--success); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all 150ms var(--ease-out);
    border: 0;
    background: transparent;
    cursor: pointer;
}
.btn-icon:hover { color: var(--text-primary); background: var(--bg-secondary); }

button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================================
 * 10. Cards
 * ========================================================================= */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: transform 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out),
                border-color 200ms var(--ease-out);
}
.card-hover:hover, .card:hover {
    /* card-hover — hover behavior for cards */
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-default);
}
.card-sharp {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
}
.card-feature {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 32px;
    position: relative;
    overflow: hidden;
}
.card-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-card);
    opacity: 0;
    transition: opacity 250ms var(--ease-out);
    pointer-events: none;
}
.card-feature:hover::before { opacity: 1; }

/* ============================================================================
 * 11. Inputs
 * ========================================================================= */
.input,
.input-dark,
.select-dark,
input[type="text"]:not(.unstyled),
input[type="email"]:not(.unstyled),
input[type="password"]:not(.unstyled),
input[type="url"]:not(.unstyled),
input[type="number"]:not(.unstyled),
input[type="search"]:not(.unstyled),
textarea:not(.unstyled),
select:not(.unstyled) {
    height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.4;
    transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
    width: 100%;
    font-family: inherit;
}
textarea:not(.unstyled) {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    line-height: 1.55;
}
input:focus:not(.unstyled),
textarea:focus:not(.unstyled),
select:focus:not(.unstyled),
.input:focus, .input-dark:focus, .select-dark:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(63, 89, 228, 0.15);
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }

/* ============================================================================
 * 12. Sidebar nav
 * ========================================================================= */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 150ms, background 150ms;
    text-decoration: none;
}
.sidebar-link:hover { color: var(--text-primary); background: var(--bg-secondary); }
.sidebar-link.active { color: var(--brand-primary); background: rgba(63, 89, 228, 0.08); }

/* ============================================================================
 * 13. Header chrome
 * ========================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid var(--border-subtle);
}
.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 150ms;
    text-decoration: none;
}
.nav-link:hover, .nav-link.active { color: var(--text-primary); }

/* ============================================================================
 * 14. Badges (auth0-style pills)
 * ========================================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.badge-pink, .badge-brand { background: rgba(63, 89, 228, 0.10); color: var(--brand-primary); }
.badge-purple { background: rgba(99, 93, 255, 0.10); color: var(--brand-secondary); }
.badge-green  { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.badge-yellow { background: rgba(245, 158, 11, 0.12); color: #B45309; }
.badge-red    { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
.badge-cyan   { background: rgba(14, 165, 233, 0.10); color: var(--info); }
.badge-gray   { background: var(--bg-tertiary); color: var(--text-secondary); }

/* ============================================================================
 * 15. Tables
 * ========================================================================= */
.table-dark {
    width: 100%;
    text-align: left;
    font-size: 14px;
    border-collapse: collapse;
}
.table-dark thead {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table-dark th { padding: 12px 20px; font-weight: 600; }
.table-dark td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.table-dark tbody tr { transition: background 150ms; }
.table-dark tbody tr:hover { background: var(--bg-secondary); }

/* ============================================================================
 * 16. Stats / metrics
 * ========================================================================= */
.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.metric-value {
    font-family: 'Aeonik', 'Inter Display', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.metric-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================================================
 * 17. Hero / decorative orbs
 * ========================================================================= */
.hero-bg {
    position: relative;
    background: var(--bg-primary);
}
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    pointer-events: none;
    z-index: 0;
}
.orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.orb-brand   { background: rgba(63, 89, 228, 0.18); }
.orb-violet  { background: rgba(99, 93, 255, 0.15); }
.orb-amber   { background: rgba(235, 84, 36, 0.10); }

/* ============================================================================
 * 18. Code block
 * ========================================================================= */
.code-block {
    background: var(--bg-inverse);
    color: var(--text-on-inverse);
    border-radius: 12px;
    padding: 20px 24px;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 13.5px;
    line-height: 1.6;
    overflow-x: auto;
    position: relative;
}

/* ============================================================================
 * 19. Border-radius scale
 * ========================================================================= */
.rounded-xs   { border-radius: 4px; }
.rounded-sm   { border-radius: 8px; }
.rounded-md   { border-radius: 12px; }
.rounded-lg   { border-radius: 16px; }
.rounded-xl   { border-radius: 24px; }
.rounded-pill { border-radius: 9999px; }
.rounded-full { border-radius: 9999px; }

/* ============================================================================
 * 20. Shadows
 * ========================================================================= */
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ============================================================================
 * 21. Animations
 * ========================================================================= */
@keyframes fade-in-up {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 400ms var(--ease-out) both; }

/* Scroll-reveal — content is ALWAYS visible. Only translateY animates.
   No opacity tricks, no race conditions. If JS fails, content stays put. */
[data-reveal] {
    transform: translateY(6px);
    transition: transform 500ms var(--ease-out);
}
[data-reveal].is-revealed { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { transform: none; transition: none; }
}

/* ============================================================================
 * 22. Helpful raw utilities (the absolute basics so views don't break)
 * Tailwind ships hundreds of these; this is the subset our views actually use.
 * ========================================================================= */
/* Display */
.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}
/* Flex / grid */
.flex-1{flex:1 1 0%}.flex-wrap{flex-wrap:wrap}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.shrink-0{flex-shrink:0}.grow{flex-grow:1}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.col-span-5{grid-column:span 5}.col-span-6{grid-column:span 6}.col-span-7{grid-column:span 7}.col-span-8{grid-column:span 8}.col-span-9{grid-column:span 9}.col-span-10{grid-column:span 10}.col-span-12{grid-column:span 12}.col-span-full{grid-column:1 / -1}
@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:col-span-2{grid-column:span 2}.sm\:col-span-3{grid-column:span 3}.sm\:w-auto{width:auto}.sm\:px-6{padding-left:24px;padding-right:24px}.sm\:px-8{padding-left:32px;padding-right:32px}}
@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:flex{display:flex}.md\:hidden{display:none}.md\:py-24{padding-block:96px}}
@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:col-span-1{grid-column:span 1}.lg\:col-span-2{grid-column:span 2}.lg\:col-span-3{grid-column:span 3}.lg\:col-span-4{grid-column:span 4}.lg\:col-span-5{grid-column:span 5}.lg\:col-span-6{grid-column:span 6}.lg\:col-span-7{grid-column:span 7}.lg\:col-span-8{grid-column:span 8}.lg\:col-span-9{grid-column:span 9}.lg\:col-span-10{grid-column:span 10}.lg\:col-span-12{grid-column:span 12}.lg\:pl-64{padding-left:256px}.lg\:translate-x-0{transform:translateX(0)}.lg\:px-12{padding-left:48px;padding-right:48px}.lg\:block{display:block}}
/* Spacing — reasonable subset */
.gap-1{gap:4px}.gap-1\.5{gap:6px}.gap-2{gap:8px}.gap-2\.5{gap:10px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}.gap-12{gap:48px}.gap-16{gap:64px}
.gap-x-1{column-gap:4px}.gap-x-2{column-gap:8px}.gap-x-3{column-gap:12px}.gap-x-4{column-gap:16px}.gap-x-6{column-gap:24px}.gap-x-8{column-gap:32px}
.gap-y-1{row-gap:4px}.gap-y-2{row-gap:8px}.gap-y-3{row-gap:12px}.gap-y-4{row-gap:16px}.gap-y-6{row-gap:24px}.gap-y-8{row-gap:32px}
.space-y-1>*+*{margin-top:4px}.space-y-2>*+*{margin-top:8px}.space-y-3>*+*{margin-top:12px}.space-y-4>*+*{margin-top:16px}.space-y-6>*+*{margin-top:24px}.space-y-8>*+*{margin-top:32px}
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}.p-8{padding:32px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:20px;padding-right:20px}.px-6{padding-left:24px;padding-right:24px}
.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}.py-5{padding-top:20px;padding-bottom:20px}.py-6{padding-top:24px;padding-bottom:24px}.py-8{padding-top:32px;padding-bottom:32px}.py-12{padding-top:48px;padding-bottom:48px}.py-16{padding-top:64px;padding-bottom:64px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}.mt-12{margin-top:48px}.mt-16{margin-top:64px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-12{margin-bottom:48px}.mb-16{margin-bottom:64px}
.mx-auto{margin-left:auto;margin-right:auto}
/* Sizing */
.w-1{width:4px}.w-1\.5{width:6px}.w-2{width:8px}.w-2\.5{width:10px}.w-3{width:12px}.w-3\.5{width:14px}.w-4{width:16px}.w-5{width:20px}.w-6{width:24px}.w-7{width:28px}.w-8{width:32px}.w-9{width:36px}.w-10{width:40px}.w-12{width:48px}.w-14{width:56px}.w-16{width:64px}.w-20{width:80px}.w-24{width:96px}.w-32{width:128px}.w-40{width:160px}.w-48{width:192px}.w-56{width:224px}.w-64{width:256px}.w-72{width:288px}.w-80{width:320px}.w-96{width:384px}
.w-full{width:100%}.w-auto{width:auto}.w-screen{width:100vw}.w-fit{width:fit-content}.w-max{width:max-content}.min-w-0{min-width:0}
.h-1{height:4px}.h-1\.5{height:6px}.h-2{height:8px}.h-2\.5{height:10px}.h-3{height:12px}.h-3\.5{height:14px}.h-4{height:16px}.h-5{height:20px}.h-6{height:24px}.h-7{height:28px}.h-8{height:32px}.h-9{height:36px}.h-10{height:40px}.h-12{height:48px}.h-14{height:56px}.h-16{height:64px}.h-20{height:80px}.h-24{height:96px}.h-32{height:128px}
.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}
.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}
.max-w-container{max-width:1280px}.max-w-article{max-width:720px}.max-w-legal{max-width:760px}
/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}
.top-2{top:8px}.left-2{left:8px}.-top-3{top:-12px}.-top-4{top:-16px}.right-6{right:24px}
.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-100{z-index:100}
/* Misc */
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-visible{overflow:visible}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}
.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}
.opacity-0{opacity:0}.opacity-50{opacity:0.5}.opacity-60{opacity:0.6}.opacity-100{opacity:1}
.transition-all{transition:all 150ms var(--ease-out)}.transition-colors{transition:color 150ms,background-color 150ms,border-color 150ms}.transition-transform{transition:transform 150ms var(--ease-out)}.transition-opacity{transition:opacity 150ms var(--ease-out)}
.duration-150{transition-duration:150ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}
.translate-x-0{transform:translateX(0)}.-translate-x-full{transform:translateX(-100%)}.-translate-y-1{transform:translateY(-4px)}.-translate-y-2{transform:translateY(-8px)}.translate-y-0{transform:translateY(0)}.-translate-x-1\/2{transform:translateX(-50%)}
.rotate-180{transform:rotate(180deg)}
.whitespace-nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-none{list-style:none}
.peer-checked\:border-brand:where([type=radio]:checked) ~ * { border-color: var(--brand-primary); }
.peer { /* marker only */ }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}
/* Backdrop */
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
/* Filter / blur */
.blur-3xl{filter:blur(64px)}
/* Aspect ratio */
.aspect-square{aspect-ratio:1/1}
/* Grayscale on logos */
.grayscale{filter:grayscale(100%)}
.hover\:grayscale-0:hover{filter:grayscale(0)}

/* ============================================================================
 * 23. Arbitrary value classes — extracted from view templates
 * Tailwind JIT-style arbitrary values (e.g., h-[72px]) need explicit
 * definitions in static CSS. These cover every arbitrary value the views use.
 * ========================================================================= */

/* Heights */
.h-\[44px\]{height:44px}
.h-\[64px\]{height:64px}
.h-\[72px\]{height:72px}
.h-\[300px\]{height:300px}
.h-\[360px\]{height:360px}
.h-\[400px\]{height:400px}
.h-\[420px\]{height:420px}
.h-\[500px\]{height:500px}

/* Widths */
.w-\[300px\]{width:300px}
.w-\[360px\]{width:360px}
.w-\[400px\]{width:400px}
.w-\[420px\]{width:420px}
.w-\[438px\]{width:438px}

/* Max/min widths */
.max-w-\[180px\]{max-width:180px}
.max-w-\[200px\]{max-width:200px}
.max-w-\[250px\]{max-width:250px}
.max-w-\[335px\]{max-width:335px}
.min-w-\[150px\]{min-width:150px}
.min-w-\[200px\]{min-width:200px}

/* Font sizes (used heavily for fine-grained typography) */
.text-\[9px\]{font-size:9px}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.text-\[16px\]{font-size:16px}
.text-\[20px\]{font-size:20px}
.text-\[24px\]{font-size:24px}
.text-\[28px\]{font-size:28px}
.text-\[32px\]{font-size:32px}
.text-\[36px\]{font-size:36px}
.text-\[40px\]{font-size:40px}
.text-\[44px\]{font-size:44px}

/* Tracking (letter-spacing) */
.tracking-\[0\.04em\]{letter-spacing:0.04em}
.tracking-\[0\.06em\]{letter-spacing:0.06em}
.tracking-\[0\.08em\]{letter-spacing:0.08em}

/* Misc spacing */
.p-\[0\.4rem\]{padding:0.4rem}
.p-\[6\.6rem\]{padding:6.6rem}

/* Responsive: sm: variants for arbitrary text sizes (used in heroes) */
@media (min-width: 640px) {
    .sm\:text-display-md{font-size:48px;line-height:1.1;letter-spacing:-0.02em}
    .sm\:text-\[44px\]{font-size:44px}
    .sm\:text-\[40px\]{font-size:40px}
}
@media (min-width: 1024px) {
    .lg\:text-display-lg{font-size:64px;line-height:1.08;letter-spacing:-0.025em}
    .lg\:text-\[60px\]{font-size:60px}
}

/* Common spacing classes that may have been missed */
.divide-y > :first-child{border-top:0}
.divide-hairline > * + * { border-top: 1px solid var(--border-subtle); }

/* Print */
@media print {
    .hero-bg::before, .orb { display: none; }
}