/* ============================================
   SoseCore Marketplace — Premium Design System
   Inter Tight + Inter + JetBrains Mono + Tailwind 3.4
   Alpine.js 3 + Lucide Icons
   White surfaces + Indigo brand + Cyan accent + Ink dark sections
   ============================================ */

/* === CSS Custom Properties === */
:root {
    /* Surface (cream legacy aliases now resolve to neutral-soft) */
    --cream: #FFFFFF;
    --cream-dark: #F8FAFC;
    /* Footer / dark bands */
    --footer: #16181B;
    --footer-light: #111827;
    --footer-border: #1F2937;
    /* Brand — Indigo. Overridable by storefront-brand-theme :root from admin primary_color */
    --color-brand-50:  #EEF2FF;
    --color-brand-100: #E0E7FF;
    --color-brand-200: #C7D2FE;
    --color-brand-300: #A5B4FC;
    --color-brand-400: #818CF8;
    --color-brand-500: #6366F1;
    --color-brand-600: #4F46E5;
    --color-brand-700: #4338CA;
    --color-brand-800: #3730A3;
    --color-brand-900: #312E81;
    --brand: var(--color-brand-600);
    --brand-hover: var(--color-brand-700);
    --brand-light: var(--color-brand-50);
    /* Accent (cyan) */
    --color-accent-400: #22D3EE;
    --color-accent-500: #06B6D4;
    --color-accent-600: #0891B2;
    /* Status accents */
    --gold: #D97706;
    --sale: #E11D48;
    --trust: #059669;
    /* Content surfaces */
    --surface: #FFFFFF;
    --surface-soft: #F8FAFC;
    --surface-dark: #16181B;
    --border: #E2E8F0;
    --border-subtle: #F1F5F9;
    --border-dark: #1F2937;
    /* Text */
    --text-heading: #16181B;
    --text-body: #475569;
    --text-muted: #94A3B8;
    /* Utils */
    --radius: 1rem;
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Base === */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-body);
    background: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Headings — Inter Tight === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
    color: var(--text-heading);
    letter-spacing: -0.015em;
}
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.022em; }

/* Headings inside a .text-white container inherit white from the parent
   (the global h1-h6 rule above forces #16181B which is invisible on dark
   sections). Affects: vendor/info hero, Trust by design, Final CTA card,
   homepage "Sell on Sosecore" card, and any future text-white section. */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
    color: inherit;
}

/* === Scrollbar (subtle, light) === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
html { scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9; }

/* === Focus === */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* === Scroll Progress Bar === */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--color-accent-500) 100%);
    z-index: 9999;
    transition: width 100ms linear;
    pointer-events: none;
}

/* === Content Links === */
.content-link,
.content-body a:not(.btn):not([class*="card"]) {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.content-link:hover,
.content-body a:not(.btn):not([class*="card"]):hover {
    color: var(--brand-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* === Page-content typography ===
   Used by Admin → Pages content (About, Terms, Privacy, Refund, Contact).
   We don't ship the `@tailwindcss/typography` plugin, so `prose` is a no-op;
   these rules give pasted HTML proper heading sizes, list bullets, table
   borders, and blockquote styling without requiring inline styles. */
.content-body h1 { font-size: 1.875rem; font-weight: 700; margin: 2rem 0 1rem; color: #0f172a; letter-spacing: -0.01em; }
.content-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: #0f172a; padding-bottom: 0.5rem; border-bottom: 1px solid #e2e8f0; letter-spacing: -0.01em; }
.content-body h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #334155; }
.content-body h4 { font-size: 1.125rem; font-weight: 600; margin: 1.25rem 0 0.5rem; color: #334155; }
.content-body p { margin: 0.875rem 0; line-height: 1.7; color: #334155; }
.content-body ul { list-style-type: disc; padding-left: 1.75rem; margin: 0.875rem 0; }
.content-body ol { list-style-type: decimal; padding-left: 1.75rem; margin: 0.875rem 0; }
.content-body li { margin: 0.5rem 0; line-height: 1.65; color: #334155; }
.content-body li > p { margin: 0.25rem 0; }
.content-body strong { color: #0f172a; font-weight: 600; }
.content-body em { color: #475569; }
.content-body blockquote { border-left: 4px solid var(--brand); background: #eef2ff; margin: 1.5rem 0; padding: 1rem 1.25rem; color: #312e81; font-style: italic; border-radius: 4px; }
.content-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9375rem; }
.content-body th { background: #f8fafc; border: 1px solid #e2e8f0; padding: 0.625rem 0.875rem; text-align: left; font-weight: 600; color: #0f172a; }
.content-body td { border: 1px solid #e2e8f0; padding: 0.625rem 0.875rem; text-align: left; vertical-align: top; color: #334155; }
.content-body code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875em; color: #be185d; }
.content-body pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 1rem 0; }
.content-body pre code { background: transparent; color: inherit; padding: 0; }
.content-body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2rem 0; }
.content-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.content-body :first-child { margin-top: 0; }
.content-body :last-child { margin-bottom: 0; }

/* === Scroll Animations === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Page Header Banner (cream zone for inner pages) === */
.page-header-banner {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
}

/* === Notification badge pulse === */
@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* === Form Inputs (shared) === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* === Empty State (shared) === */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-body);
}
.empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #94A3B8;
}
.empty-state-title {
    font-family: 'Inter Tight', Inter, system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.25rem;
    letter-spacing: -0.015em;
}
.empty-state-desc {
    font-size: 0.8125rem;
    color: var(--text-body);
}

/* === Pagination (shared) === */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 2rem;
}
.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-body);
    transition: all 200ms;
}
.pagination a:hover {
    background: var(--border-subtle);
    color: var(--text-heading);
}
.pagination .active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

/* === Alert/Flash Messages === */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-error   { background: #FFF1F2; color: #9F1239; border: 1px solid #FECDD3; }
.alert-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.alert-info    { background: var(--color-brand-50); color: var(--color-brand-900); border: 1px solid var(--color-brand-200); }

/* === Tabs (shared component) === */
.tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.tabs-nav a,
.tabs-nav button {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-body);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 200ms;
}
.tabs-nav a:hover,
.tabs-nav button:hover {
    color: var(--text-heading);
}
.tabs-nav a.active,
.tabs-nav button.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    font-weight: 600;
}

/* === Badge === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* === Lucide Icons alignment === */
[data-lucide] {
    vertical-align: middle;
}

/* Clicks must hit the control, not only the SVG stroke — main nav row only.
   Do NOT apply to .header-topbar (follow us / mail): pointer-events:none on child SVGs breaks
   hit-testing on that thin strip in some browsers even with pass-through. */
#site-header .header-main button svg,
#site-header .header-main a[href] svg,
.wishlist-toggle-btn svg {
    pointer-events: none;
}

/* === Price display (mono font, tabular numerics) === */
.price {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    font-feature-settings: "tnum", "ss01";
    letter-spacing: -0.01em;
}

/* === Tabular numerics utility === */
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* === Horizontal scroll container (no scrollbar) === */
.scroll-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scroll-hide::-webkit-scrollbar {
    display: none;
}

/* === Metallic gradients for creator tiers === */
.tier-bronze   { background: linear-gradient(135deg, #CD7F32, #A0522D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tier-silver   { background: linear-gradient(135deg, #C0C0C0, #808080); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tier-gold     { background: linear-gradient(135deg, #FFD700, #DAA520); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tier-platinum { background: linear-gradient(135deg, #E5E4E2, #BCC6CC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* === Sale pulse glow === */
.sale-pulse {
    animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(225,29,72,.20); }
    50%      { box-shadow: 0 0 30px rgba(225,29,72,.40); }
}

/* === Mesh gradient hero backdrop ===
   Three radial blobs over white. Pair with .grid-faint-overlay for the grid texture. */
.mesh-hero {
    background-color: #FFFFFF;
    background-image:
        radial-gradient(at 18% 20%, rgba(79,70,229,.18) 0, transparent 55%),
        radial-gradient(at 82% 12%, rgba(6,182,212,.16) 0, transparent 50%),
        radial-gradient(at 60% 90%, rgba(99,102,241,.12) 0, transparent 60%);
}
.mesh-dark {
    background-color: #16181B;
    background-image:
        radial-gradient(at 12% 10%, rgba(99,102,241,.32) 0, transparent 55%),
        radial-gradient(at 92% 20%, rgba(34,211,238,.22) 0, transparent 50%),
        radial-gradient(at 70% 100%, rgba(79,70,229,.20) 0, transparent 60%);
}
/* Sale-themed mesh — dark ink background with rose + amber glows for the
   deals hero. Same recipe shape as .mesh-dark, recoloured for sale energy.
   Pair with .grid-faint-overlay-dark for the white-line grid texture. */
.mesh-sale {
    background-color: #16181B;
    background-image:
        radial-gradient(at 12% 10%, rgba(244,63,94,.32) 0, transparent 55%),
        radial-gradient(at 92% 20%, rgba(251,191,36,.22) 0, transparent 50%),
        radial-gradient(at 70% 100%, rgba(225,29,72,.20) 0, transparent 60%);
}

/* Faint grid overlay (used over .mesh-hero) */
.grid-faint-overlay {
    background-image:
        linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
    background-size: 32px 32px;
}
.grid-faint-overlay-dark {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* === Terminal chrome — fake browser/terminal frame for product preview cards === */
/* Note: no `position` here — keep cascade open so callers can use Tailwind's
   `absolute` (hero stack) without being overridden by this stylesheet. */
.terminal-chrome {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgba(15,23,42,.04), 0 16px 40px -12px rgba(15,23,42,.14);
    overflow: hidden;
}
.terminal-chrome::before {
    content: '';
    display: block;
    height: 30px;
    background:
        radial-gradient(circle at 14px 15px, #F87171 4.5px, transparent 5px),
        radial-gradient(circle at 32px 15px, #FBBF24 4.5px, transparent 5px),
        radial-gradient(circle at 50px 15px, #34D399 4.5px, transparent 5px),
        linear-gradient(180deg, #F8FAFC, #F1F5F9);
    border-bottom: 1px solid var(--border);
}

/* === Glass card — soft hairline + lift === */
.glass-card {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms, border-color 220ms;
}
.glass-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-200);
    box-shadow: 0 1px 2px 0 rgba(15,23,42,.05), 0 16px 40px -10px rgba(15,23,42,.14);
}

/* === Tech-stack chip (for product cards) === */
.tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-body);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* === Keyboard key chip (for ⌘K hint in search button) === */
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(15,23,42,.06);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 1px 0 0 rgba(15,23,42,.04);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1;
}
.kbd-dark {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    color: rgba(255,255,255,.85);
    box-shadow: none;
}

/* === Status dot (used in topbar live counter) === */
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16,185,129,.55);
    animation: statusPulse 2s ease-out infinite;
}
@keyframes statusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Pulsing accent (cyan) dot — used on the seller PS in the More tools strip.
   Same animation pattern as the existing .status-dot (emerald) in the topbar. */
.bg-accent-400 { background-color: #22D3EE; }
.dot-pulse-accent {
    box-shadow: 0 0 0 0 rgba(34,211,238,.55);
    animation: dotPulseAccent 2s ease-out infinite;
}
@keyframes dotPulseAccent {
    0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(34,211,238,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

/* Pulsing brand (indigo) dot — for the "Request a product" item in the
   hero search palette footer. Same halo-pulse animation as the topbar
   .status-dot, just keyed to the indigo brand colour. */
.bg-brand-500 { background-color: #6366F1; }
.dot-pulse-brand {
    box-shadow: 0 0 0 0 rgba(99,102,241,.55);
    animation: dotPulseBrand 2s ease-out infinite;
}
@keyframes dotPulseBrand {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* Pulsing amber dot — for the "Compare them" item in the hero search
   palette footer. Same halo-pulse animation, keyed to amber. */
.bg-amber-600 { background-color: #D97706; }
.dot-pulse-amber {
    box-shadow: 0 0 0 0 rgba(217,119,6,.55);
    animation: dotPulseAmber 2s ease-out infinite;
}
@keyframes dotPulseAmber {
    0%   { box-shadow: 0 0 0 0 rgba(217,119,6,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(217,119,6,0); }
    100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
}

/* Pulsing white dot — used inside the "HOT" badge on the Deals nav item.
   Scale-pulse style (not box-shadow) so it works inside a tight pill where
   a shadow halo would be clipped by the badge's overflow boundary. */
.hot-pulse-dot {
    animation: hotPulseDot 1.5s ease-in-out infinite;
    transform-origin: center;
}
@keyframes hotPulseDot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.7; }
}

/* Underline decoration utilities — the shipped tailwind.css doesn't include
   decoration-2 (thickness) or decoration-accent-400 (colour). Without these,
   the cyan underline under "Sell on SoseCore" reverts to the default text
   colour at default thickness. */
.decoration-2 { text-decoration-thickness: 2px; }
.decoration-accent-400 { text-decoration-color: #22D3EE; }

/* === Fallback utilities for the toast portal + cart drawer ===
   The shipped tailwind.css is pre-compiled and doesn't include some
   arbitrary-value classes these UI surfaces use (`bottom-5`,
   `z-[12500]`, `w-[360px]`, `max-w-[85vw]`, `max-w-[calc(...)]`,
   `z-[10001]`, `translate-x-4`). Without these, the toast container
   has no position/width and renders below the footer; the cart drawer
   has no width and renders as a thin cut-off shell on the right edge.

   Defining them here means a fresh install renders correctly without
   needing `npm run build:css`. */
.bottom-5 { bottom: 1.25rem; }
.z-\[10001\] { z-index: 10001; }
.z-\[12100\] { z-index: 12100; }
.z-\[12110\] { z-index: 12110; }
.z-\[12115\] { z-index: 12115; }
.z-\[12120\] { z-index: 12120; }
.z-\[12200\] { z-index: 12200; }
.z-\[12300\] { z-index: 12300; }
.z-\[12500\] { z-index: 12500; }
.w-\[360px\] { width: 360px; }
.max-w-\[85vw\] { max-width: 85vw; }
.max-w-\[calc\(100vw-2\.5rem\)\] { max-width: calc(100vw - 2.5rem); }
.translate-x-4 {
    --tw-translate-x: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* `.btn-secondary` is declared in input.css with @apply but didn't make it into
   the shipped tailwind.css build. Falls back to the same dark-filled style so
   the icon+text render side-by-side instead of stacking. */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #1e293b;
    color: #fff;
    font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
}
.btn-secondary:hover { background-color: #0f172a; }
.btn-secondary:active { transform: scale(0.98); }

/* Site container max width — overrides the compiled tailwind.css value
   (which is still 1280px until `npm run build:css` is run). Bumped to
   1440px so product grids and editorial sections fill modern large
   desktops (1440p / 4K) without feeling cramped. */
.max-w-site { max-width: 1440px; }

/* Hero headline — one step smaller than the previous 5.5rem peak (which
   read too big), still a step bigger than the legacy compiled display-xl
   (4.5rem). Mirrors the updated value in tailwind.config.js so the change
   is live without re-running `npm run build:css`. */
.text-display-xl {
    font-size: clamp(3rem, 5.1vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.026em;
}

/* Trust band stat numbers — smaller than the compiled .stat-number
   (text-3xl lg:text-4xl was too dominant once the cards became frosted
   instead of dark-filled). Override the size only; weight/letterspacing
   inherited from the original utility. */
.stat-number {
    font-size: 1.5rem;          /* 24px on mobile */
    line-height: 1.1;
}
@media (min-width: 1024px) {
    .stat-number {
        font-size: 1.75rem;     /* 28px on lg+ */
    }
}

/* Hero dot-grid background — matches Variant B from _hero_bg_variants.html
   exactly. Dots cover the whole hero, with a soft radial mask that fades
   them out toward the extreme edges (cleaner section-to-section join).
   Replaces the old loud mesh-hero gradient. */
.hero-dot-grid {
    position: relative;
    background-color: #FFFFFF;
    background-image: radial-gradient(circle at 1.5px 1.5px, rgba(15,23,42,0.18) 1.5px, transparent 0);
    background-size: 26px 26px;
    background-position: -1px -1px;
}
.hero-dot-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 0%, #FFFFFF 90%);
    pointer-events: none;
    z-index: 0;
}
/* Make sure all hero content sits above the mask overlay. */
.hero-dot-grid > * {
    position: relative;
    z-index: 1;
}

/* Dark variant of .hero-dot-grid — same recipe (uniform white dots on a
   solid base + radial mask fading to the base at the edges), inverted for
   dark sections (vendor/info hero, deals hero, internal vendor sections).
   Replaces the old loud .mesh-dark + .grid-faint-overlay-dark combo. */
.hero-dot-grid-dark {
    position: relative;
    background-color: #0B141F;
    background-image: radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,0.15) 1.5px, transparent 0);
    background-size: 26px 26px;
    background-position: -1px -1px;
}
.hero-dot-grid-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 0%, #0B141F 90%);
    pointer-events: none;
    z-index: 0;
}
.hero-dot-grid-dark > * {
    position: relative;
    z-index: 1;
}

/* Warm variant of .hero-dot-grid — same recipe on #383F48 (the warm-gray
   trust band + vendor CTA color). Dots slightly more visible (0.20 alpha)
   so they read clearly on the medium-dark base. */
.hero-dot-grid-warm {
    position: relative;
    background-color: #383F48;
    background-image: radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,0.20) 1.5px, transparent 0);
    background-size: 26px 26px;
    background-position: -1px -1px;
}
.hero-dot-grid-warm::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 0%, #383F48 90%);
    pointer-events: none;
    z-index: 0;
}
.hero-dot-grid-warm > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Ink token override (#0B0F1A → #16181B unified system dark)
   ============================================================
   The compiled tailwind.css still has the old `#0B0F1A` baked in
   for `.bg-ink-900`, `.text-ink-900`, `.border-ink-900` (and the
   `bg-ink`/`text-ink` DEFAULT aliases). These overrides flip the
   utility classes to the new unified dark `#16181B` without
   requiring `npm run build:css`. Once a rebuild runs, the new
   tailwind.config.js values will replace these.

   NO `!important` here — by cascade order (style.css loads AFTER
   tailwind.css) our rule wins for the base state, while pseudo-class
   utilities like `.hover\:bg-brand-600:hover` keep higher specificity
   and still beat us on :hover. That preserves hover behaviour for
   buttons like the topbar "Get started".
   ============================================================ */
.bg-ink-900,
.bg-ink {
    background-color: #16181B;
}
.text-ink-900,
.text-ink {
    color: #16181B;
}
.border-ink-900,
.border-ink {
    border-color: #16181B;
}
/* Hover variants used in the codebase (e.g. .hover\:text-ink-900) */
.hover\:bg-ink-900:hover,
.hover\:bg-ink:hover {
    background-color: #16181B;
}
.hover\:text-ink-900:hover,
.hover\:text-ink:hover {
    color: #16181B;
}