:root {
  color-scheme: light;
  --bg: oklch(97.02% 0 251.4);
  --surface: oklch(100% 0 0);
  --surface-hover: oklch(95.24% 0 251.4);
  --surface-raised: oklch(93.73% 0 251.4);
  --border: oklch(90% 0 251.4);
  --border-strong: color-mix(in oklab, var(--border) 68%, var(--text));
  --text: oklch(21.03% 0 251.4);
  --text-muted: oklch(55.17% 0 251.4);
  --text-subtle: oklch(70.5% 0 251.4);
  --accent: oklch(54.04% 0.1498 251.4);
  --accent-hover: oklch(48% 0.1498 251.4);
  --accent-foreground: oklch(99% 0 0);
  --danger: oklch(58% 0.2 13.48);
  --danger-bg: oklch(96% 0.025 13.48);
  --success: oklch(48% 0.13 138.55);
  --success-bg: oklch(95% 0.04 138.55);
  --radius: 0.125rem;
}

:root[data-theme="dark"] {
            color-scheme: dark;
            --bg: oklch(20.5% 0.008 251.4);
            --surface: oklch(24.5% 0.01 251.4);
            --surface-hover: oklch(28.5% 0.012 251.4);
            --surface-raised: oklch(31% 0.014 251.4);
            --border: oklch(34% 0.014 251.4);
            --border-strong: color-mix(in oklab, var(--border) 68%, var(--text));
            --text: oklch(96% 0 251.4);
            --text-muted: oklch(72% 0.01 251.4);
            --text-subtle: oklch(55% 0.01 251.4);
            --accent: oklch(66% 0.1498 251.4);
            --accent-hover: oklch(72% 0.1498 251.4);
            --accent-foreground: oklch(16% 0.02 251.4);
            --accent-ink: oklch(78% 0.13 251.4);
            --danger: oklch(68% 0.2 13.48);
            --danger-bg: oklch(28% 0.06 13.48);
            --success: oklch(70% 0.14 138.55);
            --success-bg: oklch(28% 0.05 138.55);
            --focus-ring: color-mix(in oklab, var(--accent) 34%, transparent);
            --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4);
            --shadow-raised: 0 18px 42px rgb(0 0 0 / 0.55);
        }

:root { --muted: var(--text-muted); --subtle: var(--text-subtle); }
:root[data-theme="dark"] .encoded-wordmark { filter: brightness(0) invert(1); }

html { background: var(--bg); }

body {
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.nav {
  min-height: 64px;
  height: 64px !important;
  padding-inline: clamp(20px, 4vw, 48px) !important;
  border-bottom: 1px solid var(--border) !important;
  background: color-mix(in oklab, var(--surface) 94%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-brand img { height: 21px !important; }

.btn-primary,
.btn-solid,
button.btn-primary,
.auth-form-side form > button,
a.btn.primary {
  border-color: transparent !important;
  border-radius: var(--radius) !important;
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  box-shadow: 0 1px 2px rgb(19 24 35 / .08) !important;
}

.btn-primary:hover,
.btn-solid:hover,
button.btn-primary:hover,
.auth-form-side form > button:hover,
a.btn.primary:hover {
  background: var(--accent-hover) !important;
  opacity: 1 !important;
}

.btn-ghost,
.btn-secondary,
.btn-outline,
a.btn.secondary {
  border-radius: var(--radius) !important;
}

.btn-secondary,
.btn-outline,
a.btn.secondary {
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
a.btn.secondary:hover { background: var(--surface-hover) !important; }

input,
textarea,
select {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 1px rgb(19 24 35 / .035);
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent) !important;
}

.card,
.plan,
.cmd,
.cta-card,
.onboarding-shell {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgb(21 41 28 / .08);
}

.auth-form-side .card {
  max-width: 410px;
  padding: 32px;
}

.brand-wordmark { opacity: 1 !important; }
.encoded-wordmark { filter: brightness(0); }

.btn-sso.github {
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.btn-sso.github:hover { background: var(--surface-hover) !important; }

.pricing-hero {
  margin: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.pricing-hero::before {
  background-image: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.plan-featured {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 18px 42px rgb(19 24 35 / .12) !important;
}

.billing-toggle button.active {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.eyebrow .dot { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent) !important; }
.save-pill { background: color-mix(in oklab, var(--accent) 14%, var(--surface)) !important; color: var(--accent) !important; }
.billing-toggle button.active .save-pill { background: rgb(255 255 255 / .2) !important; color: var(--accent-foreground) !important; }
.plan-badge { color: var(--accent-foreground) !important; }

.policy-nav a,
.billing-toggle,
.eyebrow,
.badge,
.tip,
.step .num,
.step-body code,
.cmd code {
  border-color: var(--border) !important;
  background-color: var(--surface) !important;
}

.policy-nav a.active {
  border-color: var(--border-strong) !important;
  background: var(--surface-raised) !important;
  color: var(--text) !important;
}

.page-header,
.footer { border-color: var(--border) !important; }

.error {
  border-color: color-mix(in oklab, var(--danger) 30%, transparent) !important;
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.success {
  border-color: color-mix(in oklab, var(--success) 30%, transparent) !important;
  background: var(--success-bg) !important;
  color: var(--success) !important;
}

.banned-card {
  border-color: color-mix(in oklab, var(--danger) 35%, transparent) !important;
  background: var(--danger-bg) !important;
}

.banned-card p { color: var(--danger) !important; }

.onboarding-shell { max-width: 540px !important; padding: 34px; }
.step-dot.active { background: var(--accent) !important; }
.btn-back, .btn-skip, .btn-add-link { color: var(--text-muted) !important; }

@media (max-width: 560px) {
  .nav { padding-inline: 16px !important; }
  .auth-form-side { padding: 24px 16px !important; }
  .auth-form-side .card, .onboarding-shell { padding: 24px; border-radius: var(--radius) !important; }
  .pricing-hero { border-radius: var(--radius); }
}

.footer-quote {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.7;
}

@media (min-width: 900px) {
    .footer:has(> .footer-quote) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .footer:has(> .footer-quote) > .footer-right {
        justify-self: end;
    }
}

@media (max-width: 899px) {
    .footer > .footer-quote {
        flex: 0 0 100%;
        width: 100%;
        order: 1;
    }
}

/* Keep individual links intact while allowing their groups to reflow. */
.footer-links { flex-wrap: wrap; }
.footer-links a, .nav-actions a { white-space: nowrap; flex-shrink: 0; }
.footer-left, .footer-right { flex-wrap: wrap; min-width: 0; }
.footer-copy { white-space: nowrap; }