/* ── Design Tokens ─────────────────────────────────────────── */

:root {
  color-scheme: dark;
  --bg:      #000;
  --card:    #12121a;
  --panel:   #070707;
  --panel2:  #0d0d0d;
  --text:    #f8fafc;
  --muted:   #9ca3af;
  --line:    #27272f;
  --accent:  #38bdf8;
  --accent2: #7dd3fc;
  --danger:  #fb7185;
  --warn:    #f59e0b;
  --good:    #38bdf8;
  --bad:     #ff6b6b;
}

/* ── Reset ─────────────────────────────────────────────────── */

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

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

/* ── Header / Nav ──────────────────────────────────────────── */

body > header { border-bottom: 1px solid var(--line); background: rgba(0,0,0,.72); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 2; }
body > header nav { width: min(1240px, calc(100% - 36px)); min-height: 64px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { display: block; width: 52px; height: 52px; object-fit: contain; }
.nav-center-image { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 146px; height: 58px; object-fit: contain; object-position: center; opacity: .96; }
.navlinks { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.navlinks a { color: var(--muted); }
.navlinks a:hover { color: var(--text); }
.navlinks a.button, .navlinks a.button:hover { color: #000; border-radius: 6px; padding: 5px 14px; margin: 0; font-size: 14px; font-weight: 600; box-shadow: none; transform: none; }

/* ── Typography ────────────────────────────────────────────── */

h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -.04em; }
h2 { font-size: clamp(20px, 3vw, 28px); line-height: 1.2; margin: 0 0 10px; letter-spacing: -.02em; }
h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.02em; }
p  { color: var(--muted); line-height: 1.5; margin: 0 0 18px; }

.muted  { color: var(--muted); }
.ok     { color: var(--good); }
.bad    { color: var(--bad); }
.warn   { color: var(--warn); }
.small  { font-size: 13px; }
.nowrap { white-space: nowrap; }
.stat   { font-size: 34px; font-weight: 900; letter-spacing: -.04em; text-align: center; }

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

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #050505;
  border: 1px solid var(--line);
  border-radius: 10px;
}
code { padding: 2px 5px; }
pre  { white-space: pre-wrap; overflow: auto; padding: 14px; color: #e7e7e7; }
.codeBlock { position: relative; min-width: 0; }
pre.configCode {
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0;
  padding-top: 46px;
  text-align: left;
}
button.codeCopyBtn, .button.codeCopyBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  margin: 0;
  padding: 6px 10px;
  min-height: 0;
  font-size: 12px;
  line-height: 1.2;
}

/* ── Layout Primitives ─────────────────────────────────────── */

.wrap      { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }
.row       { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack     { display: grid; gap: 16px; min-width: 0; }
.grid      { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid-3    { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.two       { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.statsGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tableWrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.hidden    { display: none !important; }

/* ── Card ───────────────────────────────────────────────────── */

.card {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
  min-width: 0;
  overflow: hidden;
}
a.card       { display: block; transition: border-color .18s ease; }
a.card:hover { border-color: #555; }
.card.soft   { background: rgba(13, 13, 13, .9); }

/* ── Buttons ────────────────────────────────────────────────── */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 11px 16px;
  margin: 8px 8px 0 0;
  background: #fff;
  color: #000;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 2px 0 #8a8a8a;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
button:hover, .button:hover  { transform: translateY(-1px); box-shadow: 0 3px 0 #8a8a8a; }
.button:hover { color: #000; }
button:active, .button:active { transform: translateY(1px);   box-shadow: 0 1px 0 #8a8a8a; }

button.secondary, .button.secondary {
  background: #050505;
  color: var(--text);
  border-color: #3a3a3a;
  box-shadow: 0 2px 0 #1f1f1f;
}
button.secondary:hover, .button.secondary:hover { border-color: #777; box-shadow: 0 3px 0 #1f1f1f; }

button.danger, .button.danger {
  background: #991b2b;
  color: #fff;
  border-color: #6b1220;
  box-shadow: 0 2px 0 #3d0b12;
}
button.danger:hover, .button.danger:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #3d0b12; }
button.danger:active, .button.danger:active { transform: translateY(1px); box-shadow: 0 1px 0 #3d0b12; }

button:disabled, .button.disabled, .button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: 0 1px 0 #555;
}

/* ── Pill ───────────────────────────────────────────────────── */

.pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Notices ────────────────────────────────────────────────── */

.notice { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; white-space: pre-wrap; }
.notice.info    { background: #07111f; border-color: #1e3a5f; color: #c7e7ff; }
.notice.success { background: #052016; border-color: #14532d; color: #b9f6d3; }
.notice.error   { background: #2a0b13; border-color: #7f1d1d; color: #fecdd3; }

/* ── Forms ──────────────────────────────────────────────────── */

label { display: block; color: var(--muted); font-size: 13px; margin: 12px 0 6px; }

input, select, textarea {
  width: 100%;
  background: #09090f;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
}
textarea {
  min-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

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

table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 9px 7px; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Secret Box ─────────────────────────────────────────────── */

.secretBox         { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.secretBox input   { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* ── OAuth Buttons (kebab-case — site pages) ────────────────── */

.oauth-buttons { display: grid; gap: 10px; max-width: 360px; margin: 18px auto 0; }
.oauth-button {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center;
  gap: 12px; border-radius: 4px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; text-decoration: none;
  cursor: pointer; box-shadow: none; transition: filter .12s ease, border-color .12s ease;
}
.oauth-button:hover { filter: brightness(1.05); }
.oauth-button:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.oauth-logo  { width: 20px; height: 20px; display: block; flex: 0 0 20px; }
.oauth-google  { background: #fff; color: #3c4043; border-color: #dadce0; font-family: Roboto, Arial, sans-serif; }
.oauth-google:hover { color: #3c4043; border-color: #c5c9ce; }
.oauth-github  { background: #24292f; color: #fff; border-color: #24292f; }
.oauth-github:hover { color: #fff; }
.oauth-discord { background: #5865f2; color: #fff; border-color: #5865f2; }
.oauth-discord:hover { color: #fff; }

/* OAuth Buttons (camelCase — app dashboard) */
.oauthButtons { display: grid; gap: 10px; max-width: 360px; margin: 18px auto 0; }
.oauthButton  {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center;
  gap: 12px; border-radius: 4px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; text-decoration: none;
  cursor: pointer; box-shadow: none; transition: filter .12s ease, border-color .12s ease;
}
.oauthButton:hover { filter: brightness(1.05); }
.oauthButton:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.oauthLogo   { width: 20px; height: 20px; display: block; flex: 0 0 20px; }
.oauthGoogle  { background: #fff; color: #3c4043; border-color: #dadce0; font-family: Roboto, Arial, sans-serif; }
.oauthGoogle:hover { color: #3c4043; border-color: #c5c9ce; }
.oauthGithub  { background: #24292f; color: #fff; border-color: #24292f; }
.oauthGithub:hover { color: #fff; }
.oauthDiscord { background: #5865f2; color: #fff; border-color: #5865f2; }
.oauthDiscord:hover { color: #fff; }

/* ── Promo ──────────────────────────────────────────────────── */

.promo-card  { border-color: rgba(56, 189, 248, .7); box-shadow: 0 18px 80px rgba(56, 189, 248, .12); }
.promo-active {
  display: inline-flex; gap: 6px; align-items: center;
  border: 1px solid rgba(56, 189, 248, .65); border-radius: 999px; padding: 5px 10px;
  color: #e0f2fe; background: rgba(56, 189, 248, .12); font-size: 12px; font-weight: 900;
}

/* ── Terminal ───────────────────────────────────────────────── */

.terminal { position: relative; }
.terminal::before {
  content: ""; display: block; width: 44px; height: 10px; margin-bottom: 13px;
  background:
    radial-gradient(circle, #fb7185 0 4px, transparent 5px),
    radial-gradient(circle, #facc15 0 4px, transparent 5px),
    radial-gradient(circle, #22c55e 0 4px, transparent 5px);
  background-size: 14px 10px; background-position: 0 0, 14px 0, 28px 0;
  background-repeat: no-repeat;
}

/* ── Lists ──────────────────────────────────────────────────── */

ul { color: #cfcfcf; padding-left: 18px; }
li { margin: 7px 0; }

.beta-ribbon {
  border-top: 1px solid rgba(148, 163, 184, .12);
  border-bottom: 1px solid rgba(56, 189, 248, .34);
  background: linear-gradient(180deg, rgba(10, 15, 23, .98), rgba(3, 7, 12, .96));
  color: #dbeafe;
  font-size: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(56, 189, 248, .10);
}
.beta-ribbon-inner {
  min-height: 52px;
  padding: 9px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  font-weight: 850;
  line-height: 1.35;
}
.beta-ribbon-kicker {
  color: #7dd3fc;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}
.beta-ribbon-kicker::before { content: none; }
.beta-ribbon-message { flex: 1; color: #f8fafc; }
.beta-ribbon-message code {
  border-color: rgba(56, 189, 248, .22);
  background: rgba(56, 189, 248, .08);
  color: #e0f2fe;
}
.beta-ribbon-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(255,255,255,.94);
  color: #020617 !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .12s ease, background .12s ease;
}
.beta-ribbon-cta:hover { background: #fff; transform: translateY(-1px); }
.beta-ribbon a:not(.beta-ribbon-cta) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

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

@media (max-width: 1020px) { .statsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grid, .grid-3, .two { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .hero { display: block; } .nav-center-image { display: none; } }
@media (max-width: 640px)  { .beta-ribbon-inner { align-items: stretch; flex-direction: column; gap: 8px; } .beta-ribbon-cta { width: 100%; } }
@media (max-width: 520px)  { .statsGrid { grid-template-columns: 1fr; } .secretBox { display: block; } }

/* ── Modal ──────────────────────────────────────────────────── */

.modalOverlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 28px 16px; background: rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.modalPanel   { width: min(760px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.55); }

/* ── Tabler dashboard skin (/app + /admin) ───────────────────── */
html:has(body.tabler-dashboard) { background: #0a1424; }

html:has(body.tabler-site) {
  background-color: #07111f;
  background-image:
    linear-gradient(rgba(2,6,23,.16), rgba(2,6,23,.16)),
    linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(56,189,248,.08) 25%, rgba(168,85,247,.08) 50%, rgba(32,107,196,.08) 75%, rgba(15,23,42,0) 100%),
    radial-gradient(60% 50% at 15% 8%, rgba(56,189,248,.30), transparent 65%),
    radial-gradient(55% 48% at 85% 28%, rgba(168,85,247,.28), transparent 65%),
    radial-gradient(58% 50% at 25% 48%, rgba(32,107,196,.24), transparent 65%),
    radial-gradient(56% 48% at 78% 68%, rgba(168,85,247,.24), transparent 65%),
    radial-gradient(62% 52% at 18% 88%, rgba(56,189,248,.28), transparent 65%),
    radial-gradient(54% 46% at 82% 108%, rgba(32,107,196,.24), transparent 65%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body.tabler-dashboard {
  --bg: #0f172a;
  --card: #182235;
  --panel: #111827;
  --panel2: #151f32;
  --text: #f8fafc;
  --muted: #94a3b8;
  --line: rgba(148, 163, 184, .22);
  --accent: #206bc4;
  --accent2: #60a5fa;
  --good: #2fb344;
  --warn: #f59f00;
  --danger: #d63939;
  --bad: #d63939;
  min-height: 100vh;
  background-color: #0f172a;
  background-image:
    radial-gradient(circle at 16% -10%, rgba(32,107,196,.24), transparent 28rem),
    radial-gradient(circle at 84% 4%, rgba(96,165,250,.16), transparent 24rem);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--tblr-font-sans-serif, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

body.tabler-dashboard > header {
  border-bottom: 1px solid var(--line);
  background: rgba(15, 23, 42, .84);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 32px rgba(2,6,23,.28);
}
body.tabler-dashboard > header nav { width: min(1240px, calc(100% - 36px)); min-height: 58px; }
body.tabler-dashboard .brand span { color: #fff !important; font-size: 14px !important; letter-spacing: .08em !important; }
body.tabler-dashboard .navlinks { gap: 6px; font-size: 13px; }
body.tabler-dashboard .navlinks a {
  color: #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
}
body.tabler-dashboard .navlinks a:hover { color: #fff; background: rgba(148,163,184,.12); }

body.tabler-dashboard main { position: relative; }
body.tabler-dashboard main::before {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.5), transparent);
  pointer-events: none;
}
body.tabler-dashboard .hero {
  align-items: center;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24,34,53,.92), rgba(17,24,39,.92));
  box-shadow: 0 14px 40px rgba(2,6,23,.28);
}
body.tabler-dashboard .hero h1,
body.tabler-dashboard .hero h2 { margin-bottom: 6px; }
body.tabler-dashboard .hero p { margin-bottom: 0; }

body.tabler-dashboard .card {
  border-color: var(--line);
  border-radius: 10px;
  background: rgba(24, 34, 53, .94);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .22);
}
body.tabler-dashboard .card.soft { background: rgba(17,24,39,.9); }
body.tabler-dashboard .card h2 { font-size: 20px; }
body.tabler-dashboard .statsGrid .card { text-align: left; }
body.tabler-dashboard .stat {
  color: #fff;
  font-size: 30px;
  letter-spacing: -.03em;
  text-align: left;
}

body.tabler-dashboard button,
body.tabler-dashboard .button {
  min-height: 36px;
  border: 1px solid #206bc4;
  border-radius: 6px;
  padding: 8px 13px;
  background: #206bc4;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
body.tabler-dashboard button:hover,
body.tabler-dashboard .button:hover { color: #fff; background: #1b5ca8; border-color: #1b5ca8; box-shadow: none; }
body.tabler-dashboard button.secondary,
body.tabler-dashboard .button.secondary {
  background: rgba(148,163,184,.08);
  color: #e2e8f0;
  border-color: rgba(148,163,184,.28);
  box-shadow: none;
}
body.tabler-dashboard button.secondary:hover,
body.tabler-dashboard .button.secondary:hover { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.42); box-shadow: none; }
body.tabler-dashboard button.danger,
body.tabler-dashboard .button.danger { background: #d63939; border-color: #d63939; color: #fff; box-shadow: none; }

body.tabler-dashboard input,
body.tabler-dashboard select,
body.tabler-dashboard textarea {
  border-color: rgba(148,163,184,.24);
  border-radius: 6px;
  background: rgba(15, 23, 42, .82);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
body.tabler-dashboard input:focus,
body.tabler-dashboard select:focus,
body.tabler-dashboard textarea:focus {
  outline: 0;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(32,107,196,.22);
}
body.tabler-dashboard label { color: #cbd5e1; font-weight: 600; }

body.tabler-dashboard .pill {
  border-color: rgba(96,165,250,.28);
  border-radius: 999px;
  background: rgba(32,107,196,.12);
  color: #bfdbfe;
  font-weight: 600;
}
body.tabler-dashboard table { font-size: 13px; }
body.tabler-dashboard th {
  color: #94a3b8;
  background: rgba(15,23,42,.7);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
body.tabler-dashboard td { color: #e2e8f0; }
body.tabler-dashboard code,
body.tabler-dashboard pre {
  border-color: rgba(148,163,184,.22);
  background: #0b1220;
}
body.tabler-dashboard .notice { border-radius: 8px; }
body.tabler-dashboard .modalPanel { border-radius: 12px; background: #182235; }
body.tabler-dashboard > footer { border-top-color: var(--line); }
body.tabler-dashboard > footer .wrap { width: min(1240px, calc(100% - 36px)); }

/* ── Tabler site skin (public pages) ─────────────────────────── */
body.tabler-site {
  --bg: #0f172a;
  --card: #182235;
  --panel: #111827;
  --panel2: #151f32;
  --text: #f8fafc;
  --muted: #94a3b8;
  --line: rgba(148, 163, 184, .22);
  --accent: #206bc4;
  --accent2: #60a5fa;
  --good: #2fb344;
  --warn: #f59f00;
  --danger: #d63939;
  --bad: #d63939;
  min-height: 100vh;
  background: transparent;
  color: var(--text);
  font-family: var(--tblr-font-sans-serif, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

body.tabler-site > header {
  border-bottom: 1px solid var(--line);
  background: rgba(15, 23, 42, .84);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 32px rgba(2,6,23,.28);
}
body.tabler-site > header nav { width: min(1240px, calc(100% - 36px)); min-height: 58px; }
body.tabler-site .brand span { color: #fff !important; font-size: 14px !important; letter-spacing: .08em !important; }
body.tabler-site .navlinks { gap: 6px; font-size: 13px; }
body.tabler-site .navlinks a {
  color: #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
}
body.tabler-site .navlinks a:hover { color: #fff; background: rgba(148,163,184,.12); }

body.tabler-site main.wrap { position: relative; }
body.tabler-site main.wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.5), transparent);
  pointer-events: none;
}
body.tabler-site section { text-align: left; }

/* Vertical rhythm — home sections used to stack flush; this gives them air. */
body.tabler-site main.wrap > section + section { margin-top: 32px; }
@media (max-width: 760px) { body.tabler-site main.wrap > section + section { margin-top: 24px; } }

/* Naked (frameless) section — used for testimonials and use cases to break the
   all-card monotony and let the surrounding carded sections pop by contrast. */
body.tabler-site .nakedSection { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 8px; }
body.tabler-site .nakedSection::before { content: none; }
body.tabler-site .hero {
  max-width: none;
  min-height: 460px;
  padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #000 url('/assets/yolo-auto-hero-bg-1920.jpg') center / cover no-repeat;
  box-shadow: 0 18px 50px rgba(2,6,23,.32);
  overflow: hidden;
  position: relative;
}
body.tabler-site .hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 140% at 50% 30%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.62) 60%, rgba(0,0,0,.80) 100%);
}
body.tabler-site .hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 50% 18%, rgba(56,189,248,.18), transparent 60%), radial-gradient(35% 45% at 70% 82%, rgba(168,85,247,.16), transparent 60%);
}
body.tabler-site .hero-copy {
  max-width: 820px;
  padding: 0;
  text-align: left;
  position: relative;
  z-index: 1;
}
body.tabler-site .hero-copy .lede { margin-left: 0; }
body.tabler-site h1,
body.tabler-site h2,
body.tabler-site h3 { color: #fff; }
body.tabler-site .lede { color: #cbd5e1; }

body.tabler-site .card {
  border-color: var(--line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(40,52,76,.55) 0%, rgba(24,34,53,.94) 38%, rgba(17,24,39,.94) 100%);
  box-shadow: 0 10px 30px rgba(2, 6, 23, .28), inset 0 1px 0 rgba(125,211,252,.12);
  position: relative;
}
body.tabler-site .card.soft,
body.tabler-site .terminal { background: linear-gradient(180deg, rgba(30,41,59,.80) 0%, rgba(17,24,39,.80) 100%); }
body.tabler-site a.card:hover { border-color: rgba(96,165,250,.5); }
body.tabler-site .promo-card { border-color: rgba(32,107,196,.7); box-shadow: 0 18px 60px rgba(32,107,196,.18); }

body.tabler-site button,
body.tabler-site .button {
  min-height: 38px;
  border: 1px solid #206bc4;
  border-radius: 6px;
  padding: 9px 14px;
  background: #206bc4;
  color: #fff !important;
  font-weight: 650;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
body.tabler-site button:hover,
body.tabler-site .button:hover { background: #1b5ca8; border-color: #1b5ca8; box-shadow: none; }
body.tabler-site button.secondary,
body.tabler-site .button.secondary {
  background: rgba(148,163,184,.08);
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.28);
}
body.tabler-site button.secondary:hover,
body.tabler-site .button.secondary:hover { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.42); }
body.tabler-site button.danger,
body.tabler-site .button.danger { background: #d63939; border-color: #d63939; color: #fff !important; }

body.tabler-site input,
body.tabler-site select,
body.tabler-site textarea {
  border-color: rgba(148,163,184,.24);
  border-radius: 6px;
  background: rgba(15, 23, 42, .82);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
body.tabler-site input:focus,
body.tabler-site select:focus,
body.tabler-site textarea:focus {
  outline: 0;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(32,107,196,.22);
}
body.tabler-site label { color: #cbd5e1; font-weight: 600; }
body.tabler-site .pill,
body.tabler-site .legal-date {
  border-color: rgba(96,165,250,.28);
  border-radius: 999px;
  background: rgba(32,107,196,.12);
  color: #bfdbfe;
  font-weight: 650;
}
body.tabler-site code,
body.tabler-site pre {
  border-color: rgba(148,163,184,.22);
  background: #0b1220;
}
body.tabler-site .notice { border-radius: 8px; }
body.tabler-site .price { color: #fff; }
body.tabler-site .price-original { color: #94a3b8; }
body.tabler-site > footer { border-top-color: var(--line); }
body.tabler-site > footer .wrap { width: min(1240px, calc(100% - 36px)); }
body.tabler-site .beta-ribbon {
  border-color: rgba(96,165,250,.24);
  background: rgba(17,24,39,.92);
  box-shadow: 0 10px 34px rgba(2, 6, 23, .28);
}
body.tabler-site .beta-ribbon-cta {
  border-radius: 6px;
  background: #206bc4;
  color: #fff !important;
  box-shadow: none;
}
body.tabler-site .beta-ribbon-cta:hover { background: #1b5ca8; }

@media (max-width: 860px) {
  body.tabler-site .hero { padding: 30px 18px; min-height: 360px; background-image: url('/assets/yolo-auto-hero-bg-960.jpg'); }
  body.tabler-site .heroDemo pre { font-size: 12px; }
}

/* ── Homepage card layout refresh ───────────────────────────── */
body.tabler-site .homeStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
body.tabler-site .metricCard {
  position: relative;
  overflow: hidden;
  padding: 18px;
}
body.tabler-site .metricCard::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #206bc4, rgba(96,165,250,.25));
}
body.tabler-site .metricValue {
  color: #fff;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
}
body.tabler-site .metricLabel {
  margin-top: 8px;
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
body.tabler-site .metricCard p { margin: 10px 0 0; font-size: 14px; }

body.tabler-site .homeSection { margin-top: 28px; }
body.tabler-site .sectionHeader {
  max-width: 860px;
  margin: 0 auto 22px;
  padding: 0 18px;
  text-align: center;
}
body.tabler-site .sectionHeader .pill { padding: 6px 12px; font-size: 13px; }
body.tabler-site .sectionHeader h2 { margin: 14px 0 10px; font-size: clamp(30px, 4vw, 42px); line-height: 1.08; }
body.tabler-site .sectionHeader p { max-width: 760px; margin: 0 auto; color: #cbd5e1; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; }
body.tabler-site .featureCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body.tabler-site .problemCard {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
}
body.tabler-site .problemIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(214, 57, 57, .12);
  border: 1px solid rgba(214, 57, 57, .28);
  font-size: 20px;
}
body.tabler-site .problemCard h3 { margin: 0 0 6px; font-size: 17px; }
body.tabler-site .problemCard p { margin: 0; font-size: 14px; }

body.tabler-site .splitCard {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  margin-top: 20px;
  padding: 24px;
}
body.tabler-site .splitCard h2 { margin: 14px 0 0; }
body.tabler-site .splitCard .lede { margin: 0 0 10px; max-width: none; }
body.tabler-site .splitCard p:last-child { margin-bottom: 0; }
body.tabler-site .centeredCallout {
  margin-top: 16px;
  text-align: center;
  padding: 24px;
}
body.tabler-site .centeredCallout h2 { margin: 14px 0 8px; }
body.tabler-site .centeredCallout h3 { margin: 0 0 8px; }
body.tabler-site .centeredCallout p { max-width: 780px; margin: 0 auto; }
body.tabler-site .compactCallout { padding: 20px 24px; }

body.tabler-site .pricingCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
body.tabler-site .pricingCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}
body.tabler-site .pricingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.tabler-site .pricingHeader h3 { margin: 0; }
body.tabler-site .pricingCard .price { margin: 0; text-align: left; }
body.tabler-site .pricingPriceLine { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; width: 100%; }
body.tabler-site .pricingPriceLine .promo-active { margin-left: auto; letter-spacing: 0; }
body.tabler-site .pricingCard p { margin: 0; }
body.tabler-site .pricingCard .button { width: 100%; margin-top: auto; }

@media (max-width: 980px) {
  body.tabler-site .homeStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tabler-site .featureCards { grid-template-columns: 1fr; }
  body.tabler-site .pricingCards,
  body.tabler-site .pricingPlanGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body.tabler-site .homeStats,
  body.tabler-site .pricingCards,
  body.tabler-site .splitCard { grid-template-columns: 1fr; }
  body.tabler-site .sectionHeader { text-align: left; }
  body.tabler-site .pricingPlanGrid { grid-template-columns: 1fr; }
}

body.tabler-site .moeCard {
  margin-top: 20px;
  padding: 24px;
}
body.tabler-site .moeIntro {
  display: grid;
  gap: 10px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}
body.tabler-site .moeIntro h2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .moeIntro p { margin: 0; font-size: 16px; }
body.tabler-site .moeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
body.tabler-site .moeItem {
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, .52);
  padding: 18px;
}
body.tabler-site .moeKicker {
  display: block;
  margin-bottom: 8px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.tabler-site .moeItem > strong {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
}
body.tabler-site .moeItem p { margin: 0; }
body.tabler-site .moeItem p strong { color: #fff; }

@media (max-width: 720px) {
  body.tabler-site .moeGrid { grid-template-columns: 1fr; }
}

/* Keep Tabler pills from stretching inside grid/card layouts */
body.tabler-site .pill,
body.tabler-dashboard .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
}
body.tabler-site .centeredCallout > .pill,
body.tabler-site #desktop-download > .pill {
  margin-left: auto;
  margin-right: auto;
}
body.tabler-site .moeIntro .pill,
body.tabler-site .sectionHeader .pill {
  justify-self: center;
}

body.tabler-site .privacyCard {
  margin-top: 16px;
  padding: 24px;
}
body.tabler-site .privacyIntro {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}
body.tabler-site .privacyIntro h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .privacyIntro .lede {
  max-width: 760px;
  margin: 0;
  color: #cbd5e1;
}
body.tabler-site .privacyGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
body.tabler-site .privacyItem {
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, .52);
  padding: 18px;
}
body.tabler-site .privacyItem span {
  display: inline-flex;
  margin-bottom: 10px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
}
body.tabler-site .privacyItem strong {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}
body.tabler-site .privacyItem p { margin: 0; font-size: 14px; }

@media (max-width: 860px) {
  body.tabler-site .privacyGrid { grid-template-columns: 1fr; }
}

body.tabler-site .compatibilityCard {
  margin-top: 16px;
  padding: 24px;
}
body.tabler-site .compatibilityIntro {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}
body.tabler-site .compatibilityIntro h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .compatibilityIntro .lede {
  max-width: 760px;
  margin: 0;
  color: #cbd5e1;
}
body.tabler-site .compatibilityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
body.tabler-site .compatibilityItem {
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, .52);
  padding: 18px;
}
body.tabler-site .compatibilityItem strong {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}
body.tabler-site .compatibilityItem p { margin: 0; font-size: 14px; }
body.tabler-site .compatibilityActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
body.tabler-site .compatibilityActions .button { min-width: 170px; }

@media (max-width: 860px) {
  body.tabler-site .compatibilityGrid { grid-template-columns: 1fr; }
}

body.tabler-site .useCasesIntro {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}
body.tabler-site .useCasesIntro h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .useCasesGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
body.tabler-site .useCaseItem {
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, .52);
  padding: 18px;
}
body.tabler-site .useCaseItem strong {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}
body.tabler-site .useCaseItem p { margin: 0; font-size: 14px; }
@media (max-width: 720px) {
  body.tabler-site .useCasesGrid { grid-template-columns: 1fr; }
}

body.tabler-site .testimonialsIntro {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}
body.tabler-site .testimonialsIntro h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .testimonialsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
body.tabler-site .discordProofLink {
  color: #7dd3fc;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.tabler-site .discordProofLink:hover { color: #fff; }
body.tabler-site .discordMsg {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: #2b2d31;
  border: 1px solid rgba(88,101,242,.22);
}
body.tabler-site .discordAvatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c, #5865F2);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
body.tabler-site .discordBody { min-width: 0; flex: 1; }
body.tabler-site .discordHeader {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
body.tabler-site .discordUser {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
body.tabler-site .discordHandle {
  color: #b5bac1;
  font-size: 13px;
}
body.tabler-site .discordTag {
  color: #949ba4;
  font-size: 12px;
}
body.tabler-site .discordText {
  margin: 0;
  color: #dbdee1;
  font-size: 14.5px;
  line-height: 1.5;
}
@media (max-width: 720px) {
  body.tabler-site .testimonialsGrid { grid-template-columns: 1fr; }
}


body.tabler-site .pricingPerks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
body.tabler-site .pricingPerks li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: #e2e8f0;
}
body.tabler-site .pricingPerks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2bb24c;
}
body.tabler-site .pricingRiskReversal { margin: 0; }

body.tabler-site .problemSection {
  margin-top: 28px;
  padding: 24px;
}
body.tabler-site .problemSection .sectionHeader { margin-bottom: 22px; }
body.tabler-site .problemSection .featureCards { margin-top: 0; }

body.tabler-site .faqCard {
  margin-top: 20px;
  padding: 24px;
}
body.tabler-site .faqIntro {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto 22px;
  text-align: center;
  justify-items: center;
}
body.tabler-site .faqIntro h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .faqIntro p { margin: 0; font-size: 16px; }
body.tabler-site .faqList {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, .52);
  overflow: hidden;
}
body.tabler-site .faqList details { margin: 0; }
body.tabler-site .faqList details + details { border-top: 1px solid rgba(148,163,184,.18); }
body.tabler-site .faqList summary {
  cursor: pointer;
  padding: 16px 18px;
  color: #fff;
  font-weight: 750;
  list-style-position: outside;
}
body.tabler-site .faqList p {
  margin: 0;
  padding: 0 18px 18px 36px;
  color: #cbd5e1;
}

/* FAQ polish: fill the section instead of a tiny centered box */
body.tabler-site .faqCard { padding: 28px; }
body.tabler-site .faqList {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
body.tabler-site .faqList details {
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, .52);
  overflow: hidden;
}
body.tabler-site .faqList details + details { border-top: 1px solid rgba(148,163,184,.20); }
body.tabler-site .faqList summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: 18px;
  list-style: none;
}
body.tabler-site .faqList summary::-webkit-details-marker { display: none; }
body.tabler-site .faqList summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(96,165,250,.30);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(32,107,196,.12);
}
body.tabler-site .faqList details[open] summary::after { content: "–"; }
body.tabler-site .faqList p { padding: 0 18px 18px; }

@media (max-width: 860px) {
  body.tabler-site .faqList { grid-template-columns: 1fr; }
}

/* Center top metric cards */
body.tabler-site .metricCard { text-align: center; }
body.tabler-site .metricCard::after { background: linear-gradient(90deg, transparent, #206bc4 18%, #60a5fa 82%, transparent); }
body.tabler-site .metricCard p { max-width: 220px; margin-left: auto; margin-right: auto; }

body.tabler-site .finalCta {
  margin-top: 20px;
  padding: 30px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(32,107,196,.22), transparent 28rem),
    linear-gradient(180deg, rgba(24,34,53,.96), rgba(17,24,39,.96));
}
body.tabler-site .finalCta h2 { margin: 0 0 10px; }
body.tabler-site .finalCta .lede { max-width: 640px; margin: 0 auto 20px; }
body.tabler-site .finalCta .button {
  width: auto;
  min-width: 260px;
  margin: 0 auto;
}

/* Marketing flow sections */
body.tabler-site .solutionCard,
body.tabler-site .pricingSection {
  margin-top: 20px;
  padding: 24px;
}
body.tabler-site .solutionIntro,
body.tabler-site .pricingIntro {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}
body.tabler-site .solutionIntro h2,
body.tabler-site .pricingIntro h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .solutionIntro .lede {
  max-width: 760px;
  margin: 0;
  color: #cbd5e1;
}
body.tabler-site .pricingIntro p { margin: 0; font-size: 16px; }
body.tabler-site .solutionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
body.tabler-site .solutionItem {
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, .52);
  padding: 18px;
  text-align: center;
}
body.tabler-site .solutionItem strong {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}
body.tabler-site .solutionItem p { margin: 0; font-size: 14px; }
body.tabler-site .pricingSection .pricingCards { margin-top: 22px; }

@media (max-width: 860px) {
  body.tabler-site .solutionGrid { grid-template-columns: 1fr; }
}

/* ── Intentional marketing color system / section separation ── */
body.tabler-site .problemSection,
body.tabler-site .solutionCard,
body.tabler-site .moeCard,
body.tabler-site .compatibilityCard,
body.tabler-site .pricingSection,
body.tabler-site .privacyCard,
body.tabler-site .faqCard,
body.tabler-site .finalCta {
  position: relative;
  overflow: hidden;
}
body.tabler-site .problemSection::before,
body.tabler-site .solutionCard::before,
body.tabler-site .moeCard::before,
body.tabler-site .compatibilityCard::before,
body.tabler-site .pricingSection::before,
body.tabler-site .privacyCard::before,
body.tabler-site .faqCard::before,
body.tabler-site .finalCta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}

/* Proof cards: same layout, subtly different accents */
body.tabler-site .metricCard:nth-child(1) { border-color: rgba(47,179,68,.32); background: linear-gradient(180deg, rgba(47,179,68,.08), rgba(24,34,53,.94)); }
body.tabler-site .metricCard:nth-child(1)::after { background: linear-gradient(90deg, transparent, #2fb344 18%, rgba(47,179,68,.42) 82%, transparent); }
body.tabler-site .metricCard:nth-child(2) { border-color: rgba(96,165,250,.32); background: linear-gradient(180deg, rgba(32,107,196,.10), rgba(24,34,53,.94)); }
body.tabler-site .metricCard:nth-child(3) { border-color: rgba(125,211,252,.30); background: linear-gradient(180deg, rgba(125,211,252,.08), rgba(24,34,53,.94)); }
body.tabler-site .metricCard:nth-child(4) { border-color: rgba(47,179,68,.28); background: linear-gradient(180deg, rgba(47,179,68,.06), rgba(24,34,53,.94)); }

/* Problem: controlled red/warning, only here */
body.tabler-site .problemSection {
  border-color: rgba(214,57,57,.28);
  background: radial-gradient(circle at 50% 0%, rgba(214,57,57,.10), transparent 28rem), linear-gradient(180deg, rgba(30,38,55,.82), rgba(17,24,39,.82));
}
body.tabler-site .problemSection::before { background: linear-gradient(90deg, transparent, rgba(214,57,57,.88), transparent); }
body.tabler-site .problemSection .pill { border-color: rgba(214,57,57,.36); background: rgba(214,57,57,.12); color: #fecaca; }
body.tabler-site .problemCard { border-color: rgba(214,57,57,.22); background: rgba(24, 20, 30, .72); }

/* Solution: trustworthy blue + subtle success green */
body.tabler-site .solutionCard {
  border-color: rgba(47,179,68,.28);
  background: radial-gradient(circle at 50% 0%, rgba(47,179,68,.12), transparent 30rem), linear-gradient(180deg, rgba(22,39,48,.82), rgba(17,24,39,.82));
}
body.tabler-site .solutionCard::before { background: linear-gradient(90deg, transparent, #2fb344, rgba(96,165,250,.68), transparent); }
body.tabler-site .solutionCard .pill { border-color: rgba(47,179,68,.34); background: rgba(47,179,68,.12); color: #bbf7d0; }
body.tabler-site .solutionItem { border-color: rgba(47,179,68,.20); background: rgba(13, 35, 31, .54); }

/* How it works: infrastructure blue */
body.tabler-site .moeCard {
  border-color: rgba(96,165,250,.28);
  background: radial-gradient(circle at 18% 0%, rgba(32,107,196,.14), transparent 28rem), linear-gradient(180deg, rgba(22,32,50,.82), rgba(17,24,39,.82));
}
body.tabler-site .moeCard::before { background: linear-gradient(90deg, transparent, #206bc4, rgba(96,165,250,.72), transparent); }
body.tabler-site .moeItem { border-color: rgba(96,165,250,.20); background: rgba(12, 28, 48, .54); }

/* Compatibility: calm blue, docs-oriented */
body.tabler-site .compatibilityCard {
  border-color: rgba(125,211,252,.26);
  background: radial-gradient(circle at 82% 0%, rgba(125,211,252,.11), transparent 28rem), linear-gradient(180deg, rgba(20,35,52,.82), rgba(17,24,39,.82));
}
body.tabler-site .compatibilityCard::before { background: linear-gradient(90deg, transparent, rgba(125,211,252,.86), #206bc4, transparent); }
body.tabler-site .compatibilityItem { border-color: rgba(125,211,252,.18); background: rgba(12, 28, 48, .50); }

/* Pricing: strongest value/savings treatment */
body.tabler-site .pricingSection {
  border-color: rgba(47,179,68,.34);
  background: radial-gradient(circle at 50% 0%, rgba(47,179,68,.14), transparent 30rem), linear-gradient(180deg, rgba(20,41,38,.97), rgba(17,24,39,.97));
}
body.tabler-site .pricingSection::before { background: linear-gradient(90deg, transparent, #2fb344, transparent); }
body.tabler-site .pricingSection .pill { border-color: rgba(47,179,68,.34); background: rgba(47,179,68,.12); color: #bbf7d0; }
body.tabler-site .pricingCard:first-child { border-color: rgba(148,163,184,.24); background: rgba(15,23,42,.58); }
body.tabler-site .pricingCard:nth-child(2) { border-color: rgba(47,179,68,.52); background: linear-gradient(180deg, rgba(47,179,68,.13), rgba(15,23,42,.62)); box-shadow: 0 18px 60px rgba(47,179,68,.10); }

/* Privacy/trust: green without shouting */
body.tabler-site .privacyCard {
  border-color: rgba(47,179,68,.26);
  background: radial-gradient(circle at 50% 0%, rgba(47,179,68,.10), transparent 28rem), linear-gradient(180deg, rgba(20,39,38,.96), rgba(17,24,39,.96));
}
body.tabler-site .privacyCard::before { background: linear-gradient(90deg, transparent, rgba(47,179,68,.72), rgba(125,211,252,.52), transparent); }
body.tabler-site .privacyItem { border-color: rgba(47,179,68,.18); background: rgba(13, 35, 31, .50); }
body.tabler-site .privacyItem span { color: #bbf7d0; }

/* FAQ: neutral objection handling */
body.tabler-site .faqCard {
  border-color: rgba(148,163,184,.24);
  background: linear-gradient(180deg, rgba(24,34,53,.92), rgba(17,24,39,.96));
}
body.tabler-site .faqCard::before { background: linear-gradient(90deg, transparent, rgba(148,163,184,.44), transparent); }
body.tabler-site .faqList details { border-color: rgba(148,163,184,.18); background: rgba(15,23,42,.48); }

/* Final CTA: echo hero + primary blue */
body.tabler-site .finalCta {
  border-color: rgba(32,107,196,.44);
  background: radial-gradient(circle at 50% 0%, rgba(32,107,196,.26), transparent 30rem), linear-gradient(180deg, rgba(22,32,50,.98), rgba(17,24,39,.98));
}
body.tabler-site .finalCta::before { background: linear-gradient(90deg, transparent, #206bc4, rgba(96,165,250,.86), transparent); }

/* ── Pricing page polish ───────────────────────────────────── */
body.tabler-site .pricingPageHero,
body.tabler-site .pricingPlanSection,
body.tabler-site .pricingObjections {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  text-align: center;
}
body.tabler-site .pricingPageHero {
  margin-bottom: 16px;
  border-color: rgba(47,179,68,.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(47,179,68,.18), transparent 30rem),
    linear-gradient(180deg, rgba(20,41,38,.97), rgba(17,24,39,.97));
}
body.tabler-site .pricingPageHero::before,
body.tabler-site .pricingPlanSection::before,
body.tabler-site .pricingObjections::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, #2fb344, rgba(96,165,250,.72), transparent);
}
body.tabler-site .pricingPageHero h1 {
  max-width: 760px;
  margin: 14px auto 10px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
}
body.tabler-site .pricingPageHero .lede {
  max-width: 760px;
  margin: 0 auto;
  color: #cbd5e1;
}
body.tabler-site .pricingHeroPrice {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(47,179,68,.28);
  border-radius: 10px;
  background: rgba(15,23,42,.46);
}
body.tabler-site .pricingHeroPrice span { color: #cbd5e1; font-weight: 650; }
body.tabler-site .pricingHeroPrice strong { color: #fff; font-size: clamp(32px, 4vw, 46px); line-height: 1; }
body.tabler-site .pricingHeroPrice small { color: #94a3b8; font-size: 18px; font-weight: 650; }
body.tabler-site .pricingHeroActions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
body.tabler-site .pricingHeroActions .button { min-width: 170px; }

body.tabler-site .pricingProof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
body.tabler-site .pricingProofCard {
  padding: 16px;
  text-align: center;
  border-color: rgba(47,179,68,.22);
  background: linear-gradient(180deg, rgba(47,179,68,.07), rgba(24,34,53,.94));
}
body.tabler-site .pricingProofCard strong { display: block; color: #fff; margin-bottom: 6px; }
body.tabler-site .pricingProofCard span { display: block; color: #cbd5e1; font-size: 14px; }

body.tabler-site .pricingPlanSection {
  margin-top: 16px;
  border-color: rgba(47,179,68,.30);
  background:
    radial-gradient(circle at 50% 0%, rgba(47,179,68,.12), transparent 30rem),
    linear-gradient(180deg, rgba(20,41,38,.96), rgba(17,24,39,.96));
}
body.tabler-site .pricingPageIntro {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto 22px;
  text-align: center;
  justify-items: center;
}
body.tabler-site .pricingPageIntro h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
}
body.tabler-site .pricingPageIntro p { margin: 0; font-size: 16px; }
body.tabler-site .pricingPlanGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
body.tabler-site .pricingPagePlan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  text-align: left;
  border-color: rgba(148,163,184,.22);
  background: rgba(15,23,42,.56);
}
body.tabler-site .pricingPagePlan.recommended {
  border-color: rgba(47,179,68,.58);
  background: linear-gradient(180deg, rgba(47,179,68,.14), rgba(15,23,42,.64));
  box-shadow: 0 18px 60px rgba(47,179,68,.12);
}
body.tabler-site .pricingPagePlan .price { margin: 0; text-align: left; }
body.tabler-site .pricingPagePlan p { margin: 0; }
body.tabler-site .pricingPagePlan ul { margin: 2px 0 4px; padding-left: 18px; }
body.tabler-site .pricingPagePlan li { color: #cbd5e1; }
body.tabler-site .pricingPagePlan .button { width: 100%; margin-top: auto; }
body.tabler-site .pricingTerms { margin: 14px 0 0; text-align: center; }
body.tabler-site .pricingTerms a { color: #7dd3fc; text-decoration: underline; text-underline-offset: 3px; }

body.tabler-site .pricingObjections {
  margin-top: 16px;
  border-color: rgba(96,165,250,.26);
  background:
    radial-gradient(circle at 50% 0%, rgba(32,107,196,.14), transparent 28rem),
    linear-gradient(180deg, rgba(22,32,50,.96), rgba(17,24,39,.96));
}
body.tabler-site .pricingObjections::before { background: linear-gradient(90deg, transparent, #206bc4, rgba(96,165,250,.72), transparent); }
body.tabler-site .pricingObjectionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body.tabler-site .pricingObjectionGrid > div {
  padding: 18px;
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 10px;
  background: rgba(12,28,48,.50);
  text-align: center;
}
body.tabler-site .pricingObjectionGrid strong { display: block; color: #fff; font-size: 18px; margin-bottom: 8px; }
body.tabler-site .pricingObjectionGrid p { margin: 0; }

@media (max-width: 900px) {
  body.tabler-site .pricingProof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tabler-site .pricingObjectionGrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.tabler-site .pricingProof { grid-template-columns: 1fr; }
}

/* ── Models page: simple reference list ─────────────────────── */
body.tabler-site .modelsPageHero,
body.tabler-site .modelsListSection {
  position: relative;
  overflow: hidden;
  padding: 24px;
  text-align: left;
}
body.tabler-site .modelsPageHero {
  border-color: rgba(96,165,250,.28);
  background: linear-gradient(180deg, rgba(22,32,50,.96), rgba(17,24,39,.96));
}
body.tabler-site .modelsPageHero::before,
body.tabler-site .modelsListSection::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #206bc4, rgba(96,165,250,.72), transparent);
}
body.tabler-site .modelsPageHero h1 {
  margin: 14px 0 10px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
}
body.tabler-site .modelsPageHero .lede {
  max-width: 820px;
  margin: 0;
  color: #cbd5e1;
}
body.tabler-site .modelsListSection {
  margin-top: 16px;
  border-color: rgba(125,211,252,.22);
  background: linear-gradient(180deg, rgba(20,35,52,.94), rgba(17,24,39,.96));
}
body.tabler-site .modelsListHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
body.tabler-site .modelsListHeader h2 { margin: 0; font-size: 24px; }
body.tabler-site .modelsListHeader p { margin: 0; }
body.tabler-site .modelsTableWrap {
  overflow-x: auto;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: rgba(12,28,48,.42);
}
body.tabler-site .modelsTable {
  width: 100%;
  min-width: 560px;
  table-layout: fixed;
  border-collapse: collapse;
}
body.tabler-site .modelsTable th,
body.tabler-site .modelsTable td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,.14);
  text-align: left;
  white-space: nowrap;
}
body.tabler-site .modelsTable th:nth-child(1),
body.tabler-site .modelsTable td:nth-child(1) { width: 46%; }
body.tabler-site .modelsTable th:nth-child(2),
body.tabler-site .modelsTable td:nth-child(2) { width: 18%; text-align: center; }
body.tabler-site .modelsTable th:nth-child(3),
body.tabler-site .modelsTable td:nth-child(3) { width: 16%; text-align: center; }
body.tabler-site .modelsTable th:nth-child(4),
body.tabler-site .modelsTable td:nth-child(4) { width: 20%; text-align: right; }
body.tabler-site .modelsTable th {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(15,23,42,.46);
}
body.tabler-site .modelsInfo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border: 1px solid rgba(125,211,252,.45);
  border-radius: 999px;
  color: #bae6fd;
  background: rgba(125,211,252,.10);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  letter-spacing: 0;
  text-transform: none;
}
body.tabler-site .modelsInfo:hover,
body.tabler-site .modelsInfo:focus { border-color: rgba(125,211,252,.85); color: #fff; outline: none; }
body.tabler-site .modelsTable th:first-child,
body.tabler-site .modelsTable td:first-child { text-align: left; }
body.tabler-site .modelsTable tbody tr:last-child td { border-bottom: 0; }
body.tabler-site .modelsTable tbody tr:hover { background: rgba(125,211,252,.05); }
body.tabler-site .modelsTableModel code { font-weight: 850; }
body.tabler-site .modelsTableModel span {
  display: block;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 12px;
}
body.tabler-site .modelPageCard.empty {
  padding: 20px;
  text-align: center;
  border-color: rgba(125,211,252,.22);
  background: rgba(12,28,48,.50);
}

@media (max-width: 720px) {
  body.tabler-site .modelsListHeader { display: block; }
  body.tabler-site .modelsListHeader p { margin-top: 6px; }
}

/* ── Docs page: reference, not sales ────────────────────────── */
body.tabler-site .docsShell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
body.tabler-site .docsContent { min-width: 0; }
body.tabler-site .docsSidebar {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24,34,53,.96), rgba(17,24,39,.96));
  box-shadow: 0 10px 35px rgba(0,0,0,.22);
}
body.tabler-site .docsSidebar nav { display: grid; gap: 16px; }
body.tabler-site .docsSidebarGroup { display: grid; gap: 4px; }
body.tabler-site .docsSidebarTitle {
  margin: 0 0 3px;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.tabler-site .docsSidebar a {
  display: block;
  padding: 7px 9px;
  border-radius: 10px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
body.tabler-site .docsSidebar a:hover,
body.tabler-site .docsSidebar a.active { color: #fff; background: rgba(96,165,250,.14); }
body.tabler-site .docsAgentLinkGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
body.tabler-site .docsAgentLinkGrid a {
  display: block;
  padding: 12px;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 12px;
  background: rgba(15,23,42,.55);
  text-decoration: none;
}
body.tabler-site .docsAgentLinkGrid a:hover,
body.tabler-site .docsAgentLinkGrid a.active { border-color: rgba(125,211,252,.62); background: rgba(30,41,59,.78); }
body.tabler-site .docsAgentLinkGrid strong { display: block; margin-bottom: 4px; color: #fff; }
body.tabler-site .docsAgentLinkGrid span { display: block; color: #cbd5e1; font-size: 13px; line-height: 1.35; }
body.tabler-site .docsAgentSetupPage h2 { margin: 18px 0 8px; }
body.tabler-site .docsAgentSetupPage h2:first-child { margin-top: 0; }
body.tabler-site .docsPageHero,
body.tabler-site .docsSection {
  position: relative;
  overflow: hidden;
  padding: 24px;
  text-align: left;
}
body.tabler-site .docsPageHero {
  border-color: rgba(96,165,250,.28);
  background: linear-gradient(180deg, rgba(22,32,50,.96), rgba(17,24,39,.96));
}
body.tabler-site .docsPageHero::before,
body.tabler-site .docsSection::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #206bc4, rgba(96,165,250,.72), transparent);
}
body.tabler-site .docsPageHero h1 {
  margin: 14px 0 10px;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.08;
}
body.tabler-site .docsPageHero .lede {
  max-width: 820px;
  margin: 0;
  color: #cbd5e1;
}
body.tabler-site .docsQuickGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
body.tabler-site .docsQuickCard {
  padding: 18px;
  border-color: rgba(96,165,250,.22);
  background: rgba(12,28,48,.50);
}
body.tabler-site .docsQuickCard h3 { margin-bottom: 10px; }
body.tabler-site .docsQuickCard pre { margin: 0; max-height: 180px; }
body.tabler-site .docsSection {
  margin-top: 16px;
  border-color: rgba(148,163,184,.22);
  background: linear-gradient(180deg, rgba(24,34,53,.94), rgba(17,24,39,.96));
}
body.tabler-site .docsSection h2 { margin: 0 0 10px; }
body.tabler-site .docsSection p { margin: 0; }
body.tabler-site .docsNavSection { padding: 18px; }
body.tabler-site .docsNavGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
body.tabler-site .docsNavGrid a {
  display: block;
  padding: 12px;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 12px;
  background: rgba(15,23,42,.55);
  text-decoration: none;
}
body.tabler-site .docsNavGrid a:hover { border-color: rgba(125,211,252,.62); background: rgba(30,41,59,.78); }
body.tabler-site .docsNavGrid strong { display: block; margin-bottom: 4px; color: #fff; }
body.tabler-site .docsNavGrid span { display: block; color: #cbd5e1; font-size: 13px; line-height: 1.35; }
body.tabler-site .docsRouteGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
body.tabler-site .docsRouteGrid > div {
  padding: 16px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  background: rgba(15,23,42,.50);
}
body.tabler-site .docsRouteGrid code { display: inline-block; margin-bottom: 8px; }
body.tabler-site .docsRouteGrid span { display: block; color: #cbd5e1; font-size: 14px; }
body.tabler-site .docsExamples h3 { margin: 22px 0 10px; }
body.tabler-site .docsExamples h3:first-of-type { margin-top: 16px; }
body.tabler-site .docsExamples pre { margin: 0; }
body.tabler-site .docsConfigExamples .card { padding: 16px; scroll-margin-top: 138px; }
body.tabler-site .docsConfigExamples h3 { margin-bottom: 6px; }
body.tabler-site .docsConfigExamples pre.configCode { max-height: 260px; }
body.tabler-site .docsAgentPrompt { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,.16); }
body.tabler-site .docsAgentPrompt summary { cursor: pointer; color: #dbeafe; font-size: 13px; font-weight: 850; }
body.tabler-site .docsAgentPrompt p { margin-top: 8px; }
body.tabler-site .docsAgentPrompt pre.configCode { max-height: 220px; }

@media (max-width: 900px) {
  body.tabler-site .docsShell { grid-template-columns: 1fr; }
  body.tabler-site .docsSidebar { position: relative; top: auto; max-height: none; }
  body.tabler-site .docsSidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tabler-site .docsQuickGrid,
  body.tabler-site .docsRouteGrid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body.tabler-site .docsSidebar nav { grid-template-columns: 1fr; }
}

body.tabler-site .docsActionRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
body.tabler-site .docsDesktopSection .codeBlock { margin-top: 12px; }

/* Site alternating card borders */
body.tabler-site .card,
body.tabler-site .moeItem,
body.tabler-site .privacyItem,
body.tabler-site .compatibilityItem,
body.tabler-site .useCaseItem,
body.tabler-site .discordMsg,
body.tabler-site .faqList details,
body.tabler-site .pricingObjectionGrid > div,
body.tabler-site .docsRouteGrid > div,
body.tabler-site .docsAgentLinkGrid a,
body.tabler-site .docsNavGrid a {
  border-color: var(--site-card-border, rgba(96,165,250,.34));
}
body.tabler-site main.wrap > section.card:nth-of-type(4n+1),
body.tabler-site :is(.grid, .homeStats, .pricingCards, .featureCards, .moeGrid, .privacyGrid, .compatibilityGrid, .useCasesGrid, .testimonialsGrid, .pricingProof, .pricingPlanGrid, .pricingObjectionGrid, .docsQuickGrid, .docsRouteGrid, .docsConfigExamples, .docsAgentLinkGrid, .docsNavGrid, .faqList) > :is(.card, div, article, a, details):nth-child(4n+1) {
  --site-card-border: rgba(96,165,250,.58);
  border-color: var(--site-card-border);
}
body.tabler-site main.wrap > section.card:nth-of-type(4n+2),
body.tabler-site :is(.grid, .homeStats, .pricingCards, .featureCards, .moeGrid, .privacyGrid, .compatibilityGrid, .useCasesGrid, .testimonialsGrid, .pricingProof, .pricingPlanGrid, .pricingObjectionGrid, .docsQuickGrid, .docsRouteGrid, .docsConfigExamples, .docsAgentLinkGrid, .docsNavGrid, .faqList) > :is(.card, div, article, a, details):nth-child(4n+2) {
  --site-card-border: rgba(125,211,252,.58);
  border-color: var(--site-card-border);
}
body.tabler-site main.wrap > section.card:nth-of-type(4n+3),
body.tabler-site :is(.grid, .homeStats, .pricingCards, .featureCards, .moeGrid, .privacyGrid, .compatibilityGrid, .useCasesGrid, .testimonialsGrid, .pricingProof, .pricingPlanGrid, .pricingObjectionGrid, .docsQuickGrid, .docsRouteGrid, .docsConfigExamples, .docsAgentLinkGrid, .docsNavGrid, .faqList) > :is(.card, div, article, a, details):nth-child(4n+3) {
  --site-card-border: rgba(47,179,68,.56);
  border-color: var(--site-card-border);
}
body.tabler-site main.wrap > section.card:nth-of-type(4n),
body.tabler-site :is(.grid, .homeStats, .pricingCards, .featureCards, .moeGrid, .privacyGrid, .compatibilityGrid, .useCasesGrid, .testimonialsGrid, .pricingProof, .pricingPlanGrid, .pricingObjectionGrid, .docsQuickGrid, .docsRouteGrid, .docsConfigExamples, .docsAgentLinkGrid, .docsNavGrid, .faqList) > :is(.card, div, article, a, details):nth-child(4n) {
  --site-card-border: rgba(168,85,247,.52);
  border-color: var(--site-card-border);
}

.footerInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}