/* mails0 HeroUI Pro migration layer.
   The project is still static HTML for SEO, so this layer maps the existing
   markup to HeroUI Pro component anatomy and tokens. */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");

:root,
[data-theme="light"] {
  color-scheme: light;
  --spacing: 0.25rem;
  --radius: 0.875rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.6875rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.375rem;
  --radius-3xl: 1.75rem;

  --background: #f6f8fb;
  --background-secondary: #eef2f7;
  --foreground: #111827;
  --muted: #687184;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-secondary: rgba(241, 245, 249, 0.86);
  --surface-tertiary: rgba(226, 232, 240, 0.68);
  --surface-secondary-foreground: #172033;
  --overlay: rgba(255, 255, 255, 0.94);
  --default: rgba(15, 23, 42, 0.065);
  --default-hover: rgba(15, 23, 42, 0.105);
  --border: rgba(15, 23, 42, 0.12);
  --separator: rgba(15, 23, 42, 0.12);
  --separator-tertiary: rgba(15, 23, 42, 0.08);
  --field-background: rgba(255, 255, 255, 0.92);
  --field-border: rgba(15, 23, 42, 0.14);
  --field-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --focus: #2563eb;
  --color-focus: #2563eb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.1);
  --accent-soft-hover: rgba(37, 99, 235, 0.16);
  --accent-foreground: #ffffff;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --disabled-opacity: 0.55;
  --cursor-interactive: pointer;
  --cursor-disabled: not-allowed;
  --surface-shadow: 0 18px 48px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.78) inset;
  --overlay-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  --shadow-surface: var(--surface-shadow);
  --glass-blur: 18px;

  --bg: var(--background);
  --bg-card: var(--surface);
  --bg-elevated: var(--surface-secondary);
  --bg2: var(--surface);
  --bg3: var(--surface-secondary);
  --text: var(--foreground);
  --text2: var(--muted);
  --text-muted: var(--muted);
  --code-bg: rgba(15, 23, 42, 0.06);
  --claim-btn-text: var(--primary-foreground);
  --input-placeholder: #96a0b4;
  --noise-opacity: 0;
  --focus-ring: rgba(37, 99, 235, 0.18);
  --terminal-bg: #0d1117;
  --terminal-titlebar: #111827;
  --terminal-fg: #e5e7eb;
  --terminal-chrome: #111827;
  --term-cursor: #60a5fa;
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: #0c111d;
  --background-secondary: #111827;
  --foreground: #eef2ff;
  --muted: #9aa4b2;
  --surface: rgba(17, 24, 39, 0.82);
  --surface-secondary: rgba(30, 41, 59, 0.72);
  --surface-tertiary: rgba(51, 65, 85, 0.52);
  --surface-secondary-foreground: #e5edf9;
  --overlay: rgba(15, 23, 42, 0.95);
  --default: rgba(148, 163, 184, 0.1);
  --default-hover: rgba(148, 163, 184, 0.16);
  --border: rgba(148, 163, 184, 0.18);
  --separator: rgba(148, 163, 184, 0.16);
  --separator-tertiary: rgba(148, 163, 184, 0.1);
  --field-background: rgba(15, 23, 42, 0.84);
  --field-border: rgba(148, 163, 184, 0.2);
  --field-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --focus: #60a5fa;
  --color-focus: #60a5fa;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-soft: rgba(96, 165, 250, 0.14);
  --accent-soft-hover: rgba(96, 165, 250, 0.22);
  --accent-foreground: #08111f;
  --primary: #60a5fa;
  --primary-foreground: #08111f;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --surface-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.045) inset;
  --overlay-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
  --bg: var(--background);
  --bg-card: var(--surface);
  --bg-elevated: var(--surface-secondary);
  --bg2: var(--surface);
  --bg3: var(--surface-secondary);
  --text: var(--foreground);
  --text2: var(--muted);
  --text-muted: var(--muted);
  --code-bg: rgba(148, 163, 184, 0.12);
  --claim-btn-text: var(--primary-foreground);
  --input-placeholder: #64748b;
  --terminal-bg: #070b12;
  --terminal-titlebar: #0d1320;
  --terminal-fg: #e5e7eb;
  --terminal-chrome: #0d1320;
  --term-cursor: #93c5fd;
}

html[data-heroui-pro="mails0"] {
  background: var(--background);
  overflow-x: hidden;
}

body {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--background) 92%, var(--accent) 8%) 0%, var(--background) 340px),
    var(--background) !important;
  color: var(--foreground) !important;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  overflow-x: hidden;
}

body::before {
  opacity: 0 !important;
}

* {
  letter-spacing: 0 !important;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

.skip-link:not(:focus):not(:focus-visible) {
  top: 0 !important;
  transform: translateY(-140%) !important;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 12px !important;
  transform: translateY(0) !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent) !important;
}

/* Navigation / shell */
.topbar,
.header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 10px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.4) !important;
  background: var(--surface) !important;
  box-shadow: var(--surface-shadow) !important;
  backdrop-filter: blur(var(--glass-blur));
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 30;
  width: min(calc(100% - 24px), 1180px) !important;
  max-width: 1180px !important;
  min-height: 64px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 12px !important;
  padding: 12px 16px !important;
}

.topbar-left,
.topbar-right,
.header-left,
.header-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.topbar a,
.navbar__item,
.brand-link,
.topbar-current,
.btn-logout {
  min-height: 36px !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.topbar-left a,
.brand-link,
.logo {
  color: var(--foreground) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
}

.topbar a:hover,
.navbar__item:hover,
.btn-logout:hover {
  color: var(--foreground) !important;
  background: var(--default) !important;
  text-decoration: none !important;
}

.theme-toggle,
.mobile-menu-btn,
.hpro-icon-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-secondary) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
}

.theme-toggle:hover,
.mobile-menu-btn:hover {
  background: var(--default-hover) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
}

/* Landing */
.wrap {
  max-width: 1180px !important;
  width: 100% !important;
  box-sizing: border-box;
}

.hero {
  align-items: center !important;
  gap: 56px !important;
  padding-top: 64px !important;
  min-width: 0;
}

.hero-heading,
.section-heading,
.content h1,
.content h2,
.page-intro h1,
h1,
h2,
h3 {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  color: var(--foreground) !important;
}

.hero-heading {
  font-size: 64px !important;
  line-height: 1.02 !important;
  font-weight: 700 !important;
  max-width: 10ch;
}

.hero-brand,
.section-label,
.eyebrow,
.section-kicker {
  color: var(--accent) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

.hero-heading .accent {
  color: var(--accent) !important;
}

.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.reveal.visible {
  animation: none !important;
}

.hero-sub,
.section-desc,
.lede,
.subtitle {
  color: var(--muted) !important;
  max-width: 64ch;
}

.claim-form {
  width: min(100%, 570px);
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--field-shadow);
}

.claim-input,
.claim-domain,
.claim-btn {
  min-height: 44px;
  border: 0 !important;
  box-shadow: none !important;
}

.claim-input {
  max-width: none !important;
  background: transparent !important;
  color: var(--foreground) !important;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}

.claim-domain {
  background: transparent !important;
  color: var(--muted) !important;
}

.claim-btn,
.btn-connect,
.primary-button,
.cta,
.dialog-confirm {
  border: 1px solid color-mix(in srgb, var(--accent) 84%, white 16%) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent) !important;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease !important;
}

.claim-btn {
  border-radius: var(--radius-lg) !important;
}

.claim-btn:hover,
.btn-connect:hover,
.primary-button:hover,
.cta:hover,
.dialog-confirm:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.claim-result,
.terminal,
.terminal-surface,
.capability-card,
.step-card,
.compare-grid,
.vendor-card,
.login-card,
.email-list,
.detail-body-card,
.attachments-card,
.thread-card,
.rail-section,
.demo-hero,
.cta-card,
.feature-card,
.card,
.endpoint,
.side-rail {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface) !important;
  box-shadow: var(--surface-shadow) !important;
  backdrop-filter: blur(var(--glass-blur));
}

.terminal,
.terminal-surface {
  background: var(--terminal-bg) !important;
  color: var(--terminal-fg) !important;
  overflow: hidden;
  max-width: 100%;
}

.terminal-titlebar,
.terminal-head {
  background: var(--terminal-chrome) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.hero-install-block {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.install-row {
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--field-background) !important;
  box-shadow: var(--field-shadow) !important;
}

.install-row:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--field-border)) !important;
}

.install-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  background: var(--surface-secondary) !important;
  border-right: 1px solid var(--separator) !important;
  color: var(--accent) !important;
}

.install-cmd {
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--foreground) !important;
}

.copy-btn {
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  min-height: 50px !important;
  border-left: 1px solid var(--separator) !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.copy-btn:hover {
  background: var(--default) !important;
  color: var(--foreground) !important;
}

.copy-btn-sm,
.ghost-button,
.btn-logout,
.dialog-cancel,
.btn-load-more,
.btn-thread,
.btn-toggle-body,
.cta-action button,
.controls button,
.command-chip,
.label-pill,
.mode-pill,
.onboard-tab,
.integration-tab {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-secondary) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  min-height: 36px !important;
}

.copy-btn-sm:hover,
.ghost-button:hover,
.dialog-cancel:hover,
.btn-load-more:hover,
.btn-thread:hover,
.btn-toggle-body:hover,
.cta-action button:hover,
.controls button:hover,
.command-chip:hover,
.label-pill:hover,
.mode-pill:hover,
.onboard-tab:hover,
.integration-tab:hover {
  background: var(--default-hover) !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
}

.label-pill.active,
.mode-pill.active,
.onboard-tab.active,
.segment__item[data-selected="true"],
.btn-toggle-body.active,
.integration-tab.active {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  border-color: var(--accent) !important;
}

.btn-delete,
.dialog-confirm.btn-delete {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--border)) !important;
  background: color-mix(in srgb, var(--danger) 12%, transparent) !important;
  color: var(--danger) !important;
  box-shadow: none !important;
}

.btn-delete:hover {
  background: var(--danger) !important;
  color: white !important;
}

.form-input,
.search-input,
.search-mode-select,
.field-block input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select {
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--field-background) !important;
  color: var(--foreground) !important;
  box-shadow: var(--field-shadow) !important;
}

input::placeholder {
  color: var(--input-placeholder) !important;
}

/* Docs */
.layout {
  background: transparent !important;
}

.sidebar {
  width: 280px !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--surface-shadow) !important;
}

.sidebar-header,
.sidebar__header {
  padding: 18px 18px 12px !important;
  gap: 10px !important;
}

.sidebar .logo {
  color: var(--foreground) !important;
}

.sidebar .logo span {
  color: var(--accent) !important;
}

.sidebar nav,
.sidebar__content {
  padding: 0 14px 18px !important;
}

.sidebar nav .section,
.sidebar__menu-header,
.sidebar__group-label {
  padding: 18px 12px 6px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

.sidebar nav a,
.sidebar__menu-item {
  display: block !important;
  width: 100% !important;
  border-radius: var(--field-radius) !important;
  box-sizing: border-box !important;
  color: var(--muted) !important;
  background: transparent !important;
  min-height: 38px !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.sidebar nav a:not(:has(.sidebar__menu-item-content)) {
  padding: 9px 10px !important;
}

.sidebar__menu-item-content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: var(--field-radius) !important;
  box-sizing: border-box !important;
  color: var(--muted) !important;
  background: transparent !important;
}

.sidebar__menu-label,
.sidebar__menu-label-text {
  display: block !important;
  min-width: 0 !important;
  line-height: 20px !important;
  color: var(--muted) !important;
}

.sidebar nav a:hover .sidebar__menu-item-content,
.sidebar nav a.active:not(:has(.sidebar__menu-item-content)),
.sidebar__menu-item[data-current="true"] .sidebar__menu-item-content {
  background: var(--default) !important;
  color: var(--foreground) !important;
}

.sidebar__menu-item[data-current="true"] .sidebar__menu-label {
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

.sidebar nav a:hover .sidebar__menu-label,
.sidebar nav a:hover .sidebar__menu-label-text,
.sidebar__menu-item[data-current="true"] .sidebar__menu-label-text {
  color: var(--foreground) !important;
}

.content {
  width: min(100% - 64px, 900px) !important;
  max-width: 900px !important;
  box-sizing: border-box !important;
  color: var(--foreground) !important;
}

.content h1 {
  color: var(--foreground) !important;
  font-size: 38px !important;
}

.content h2 {
  border-bottom-color: var(--separator) !important;
}

.content p,
.content li,
.content td,
.content .card p {
  color: var(--muted) !important;
}

.content code,
code {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--code-bg) !important;
  color: var(--accent) !important;
}

pre {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--terminal-bg) !important;
  box-shadow: var(--surface-shadow) !important;
}

pre code {
  display: block !important;
  width: auto !important;
  min-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--terminal-fg) !important;
}

table {
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.content th,
.content td {
  border-color: var(--separator) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.content th {
  background: var(--surface-secondary) !important;
}

.content p code,
.content li code,
.content td code,
.content th code {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.cards,
.vendor-grid,
.capability-grid,
.steps-grid {
  gap: 16px !important;
}

.card,
.vendor-card,
.capability-card,
.step-card {
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.card:hover,
.vendor-card:hover,
.capability-card:hover,
.step-card:hover,
.demo-hero:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

.badge,
.method-badge,
.badge-code-value,
.mailbox-badge {
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, currentColor 10%, transparent) !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.badge.get { color: #16a34a !important; }
.badge.post { color: #d97706 !important; }
.badge.patch { color: #2563eb !important; }
.badge.delete { color: #dc2626 !important; }

/* Console */
.app-container {
  max-width: 1240px !important;
}

.header {
  margin-top: 12px !important;
  padding: 12px 16px !important;
}

.logo-icon {
  border-radius: var(--radius-md) !important;
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.main-content {
  padding-top: 24px !important;
}

.login-screen {
  min-height: min(720px, calc(100vh - 120px)) !important;
}

.login-card {
  max-width: 460px !important;
  padding: 28px !important;
}

.login-title {
  color: var(--foreground) !important;
  font-size: 26px !important;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.login-subtitle,
.login-footer,
.form-label {
  color: var(--muted) !important;
}

.selfhosted-toggle input[type="checkbox"] {
  width: 52px !important;
  height: 32px !important;
  min-width: 52px !important;
  border-radius: 999px !important;
  border-color: var(--border) !important;
  background: var(--surface-secondary) !important;
}

.selfhosted-toggle input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 2px !important;
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--overlay) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important;
  transform: translateX(0) !important;
  transition: transform 0.16s ease, background-color 0.16s ease !important;
}

.selfhosted-toggle input[type="checkbox"]:checked {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

.selfhosted-toggle input[type="checkbox"]:checked::after {
  left: 2px !important;
  top: 2px !important;
  transform: translateX(22px) !important;
  background: var(--accent-foreground) !important;
}

.content button:not(.mobile-menu-btn):not(.theme-toggle),
.cta-action button,
.controls button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-secondary) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

.content button:not(.mobile-menu-btn):not(.theme-toggle):hover,
.cta-action button:hover,
.controls button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
  background: var(--default-hover) !important;
}

.cta-action {
  border-color: var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface-secondary) !important;
  box-shadow: none !important;
}

.links-row a,
.ai-native-row a,
.page-intro-links a,
.content .feature-card a,
.content .cta-action a.value {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
}

.controls .speed {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 3px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--default) !important;
}

.controls .speed button {
  min-height: 34px !important;
  border-color: transparent !important;
  background: transparent !important;
}

.controls .speed button.active {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  border-color: var(--accent) !important;
}

.integration-tabs {
  width: max-content !important;
  border-bottom: 1px solid var(--border) !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.integration-tabs::-webkit-scrollbar {
  display: none;
}

.integration-tab {
  padding: 8px 14px !important;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  text-transform: none !important;
}

.toolbar {
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.search-group {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface) !important;
  box-shadow: var(--surface-shadow) !important;
}

.search-group .search-input,
.search-group .search-mode-select {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.label-filters,
.mode-switch,
.onboard-tabs,
.integration-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border) !important;
  background: var(--default) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.label-pill,
.mode-pill,
.onboard-tab,
.integration-tab {
  min-height: 32px !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.label-filters .segment__item,
.mode-switch .segment__item,
.onboard-tabs .segment__item,
.integration-tabs .segment__item {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

.onboard-block {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.email-list {
  overflow: hidden;
}

.email-row,
.list-view__item,
.thread-card-header {
  border-bottom: 1px solid var(--separator-tertiary) !important;
  background: transparent !important;
}

.email-row:hover,
.thread-card-header:hover {
  background: var(--default) !important;
}

.email-from,
.email-subject,
.thread-card-from,
.detail-subject {
  color: var(--foreground) !important;
}

.email-snippet,
.email-row-meta,
.email-date,
.thread-card-snippet,
.thread-card-date,
.detail-meta,
.detail-body-card .plain-text-body {
  color: var(--muted) !important;
}

.empty-state {
  background: transparent !important;
  box-shadow: none !important;
}

.empty-state-icon,
.empty-state__media {
  border-radius: 999px !important;
  background: var(--default) !important;
  color: var(--accent) !important;
}

.dialog-overlay {
  background: rgba(2, 6, 23, 0.52) !important;
  backdrop-filter: blur(8px);
}

.dialog-box {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--overlay) !important;
  box-shadow: var(--overlay-shadow) !important;
}

.toast {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--overlay) !important;
  box-shadow: var(--overlay-shadow) !important;
}

/* Playground */
.page-shell {
  max-width: 1280px !important;
}

.page-intro {
  border-bottom-color: var(--separator) !important;
}

.workspace {
  gap: 22px !important;
}

.side-rail {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rail-section {
  padding: 18px !important;
}

.command-list {
  gap: 8px !important;
}

.terminal-foot {
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: var(--terminal-chrome) !important;
  color: #94a3b8 !important;
}

footer {
  border-top-color: var(--separator) !important;
}

/* HeroUI Pro Brutalism theme */
:root,
html[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --spacing: 4px;
  --font-sans: "Hanken Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-2xl: 8px;
  --radius-3xl: 8px;
  --field-radius: 8px;
  --field-border-width: 1px;

  --backdrop: rgba(0, 0, 0, 0.5);
  --background: #eff8f1;
  --background-secondary: #e5eee7;
  --background-tertiary: #dbe4de;
  --background-inverse: #18181b;
  --foreground: #18181b;
  --muted: #68766b;
  --overlay: #ffffff;
  --overlay-foreground: #18181b;
  --surface: #ffffff;
  --surface-foreground: #18181b;
  --surface-hover: #eaeaea;
  --surface-secondary: #e7f3e9;
  --surface-secondary-foreground: #18181b;
  --surface-tertiary: #e2eee4;
  --surface-tertiary-foreground: #18181b;
  --accent: #00793a;
  --accent-hover: #2f864d;
  --accent-foreground: #fcfcfc;
  --accent-soft: rgba(0, 121, 58, 0.15);
  --accent-soft-hover: rgba(0, 121, 58, 0.2);
  --accent-soft-foreground: #1a5a32;
  --primary: var(--accent);
  --primary-foreground: var(--accent-foreground);
  --danger: #fd4579;
  --danger-hover: #e4426f;
  --danger-foreground: #fcfcfc;
  --danger-soft: rgba(253, 69, 121, 0.15);
  --danger-soft-hover: rgba(253, 69, 121, 0.2);
  --danger-soft-foreground: #a33a55;
  --success: #88b11a;
  --success-hover: #7ca022;
  --success-foreground: #18181b;
  --success-soft: rgba(136, 177, 26, 0.15);
  --success-soft-hover: rgba(136, 177, 26, 0.2);
  --success-soft-foreground: #546b29;
  --warning: #f59b38;
  --warning-hover: #dc8d38;
  --warning-foreground: #18181b;
  --warning-soft: rgba(245, 155, 56, 0.15);
  --warning-soft-hover: rgba(245, 155, 56, 0.2);
  --warning-soft-foreground: #855a32;
  --border: #d8e0da;
  --border-secondary: #c6c6c7;
  --border-tertiary: #a8a8a9;
  --default: #e5eee7;
  --default-hover: #dce4de;
  --default-foreground: #18181b;
  --default-soft: rgba(229, 238, 231, 0.5);
  --default-soft-hover: rgba(229, 238, 231, 0.6);
  --default-soft-foreground: #18181b;
  --focus: #00793a;
  --color-focus: #00793a;
  --link: #18181b;
  --scrollbar: #cfd7d0;
  --segment: #ffffff;
  --segment-foreground: #18181b;
  --separator: #dfe7e0;
  --separator-secondary: #d8d8d8;
  --separator-tertiary: #cdcdce;
  --field-background: #ffffff;
  --field-background-hover: #f9f9f9;
  --field-border: #d8e0da;
  --field-border-focus: #a7ada9;
  --field-border-hover: #c2c9c4;
  --field-foreground: #18181b;
  --field-placeholder: #68766b;
  --field-focus: #ffffff;
  --chart-1: #003400;
  --chart-2: #005618;
  --chart-3: #00793a;
  --chart-4: #3b9e5c;
  --chart-5: #64c480;
  --eclipse: #18181b;
  --snow: #fcfcfc;
  --black: #000000;
  --white: #ffffff;

  --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
  --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
  --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03), 0 14px 28px 0 rgba(0, 0, 0, 0.08);
  --shadow-surface: var(--surface-shadow);
  --glass-blur: 0px;
  --code-bg: var(--accent-soft);
  --input-placeholder: var(--field-placeholder);
  --focus-ring: rgba(0, 121, 58, 0.18);
  --terminal-bg: #030704;
  --terminal-titlebar: #101c13;
  --terminal-fg: #fcfcfc;
  --terminal-chrome: #101c13;
  --term-cursor: #00793a;
  --claim-btn-text: var(--accent-foreground);
}

html[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --spacing: 4px;
  --font-sans: "Hanken Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-2xl: 8px;
  --radius-3xl: 8px;
  --field-radius: 8px;
  --field-border-width: 1px;

  --backdrop: rgba(0, 0, 0, 0.6);
  --background: #030704;
  --background-secondary: #080e09;
  --background-tertiary: #0f1511;
  --background-inverse: #fcfcfc;
  --foreground: #fcfcfc;
  --muted: #95a598;
  --overlay: #101c13;
  --overlay-foreground: #fcfcfc;
  --surface: #101c13;
  --surface-foreground: #fcfcfc;
  --surface-hover: #1f2b22;
  --surface-secondary: #1d261f;
  --surface-secondary-foreground: #fcfcfc;
  --surface-tertiary: #202a22;
  --surface-tertiary-foreground: #fcfcfc;
  --accent: #00793a;
  --accent-hover: #2f864d;
  --accent-foreground: #fcfcfc;
  --accent-soft: rgba(0, 121, 58, 0.12);
  --accent-soft-hover: rgba(0, 121, 58, 0.16);
  --accent-soft-foreground: #5b9c6d;
  --primary: var(--accent);
  --primary-foreground: var(--accent-foreground);
  --danger: #fd4579;
  --danger-hover: #e4426f;
  --danger-foreground: #fcfcfc;
  --danger-soft: rgba(253, 69, 121, 0.15);
  --danger-soft-hover: rgba(253, 69, 121, 0.2);
  --danger-soft-foreground: #ff819b;
  --success: #88b11a;
  --success-hover: #7ca022;
  --success-foreground: #18181b;
  --success-soft: rgba(136, 177, 26, 0.12);
  --success-soft-hover: rgba(136, 177, 26, 0.16);
  --success-soft-foreground: #a6c66b;
  --warning: #f59b38;
  --warning-hover: #dc8d38;
  --warning-foreground: #18181b;
  --warning-soft: rgba(245, 155, 56, 0.12);
  --warning-soft-hover: rgba(245, 155, 56, 0.16);
  --warning-soft-foreground: #f9b778;
  --border: #252b26;
  --border-secondary: #3c463e;
  --border-tertiary: #565f58;
  --default: #232924;
  --default-hover: #2a302b;
  --default-foreground: #fcfcfc;
  --default-soft: rgba(35, 41, 36, 0.5);
  --default-soft-hover: rgba(35, 41, 36, 0.6);
  --default-soft-foreground: #fcfcfc;
  --focus: #00793a;
  --color-focus: #00793a;
  --link: #fcfcfc;
  --scrollbar: #9ba29c;
  --segment: #424943;
  --segment-foreground: #fcfcfc;
  --separator: #1d231f;
  --separator-secondary: #2d3830;
  --separator-tertiary: #364038;
  --field-background: #101c13;
  --field-background-hover: #142017;
  --field-border: #252b26;
  --field-border-focus: #505551;
  --field-border-hover: #383d38;
  --field-foreground: #fcfcfc;
  --field-placeholder: #95a598;
  --field-focus: #101c13;
  --chart-1: #003400;
  --chart-2: #005618;
  --chart-3: #00793a;
  --chart-4: #3b9e5c;
  --chart-5: #64c480;
  --eclipse: #18181b;
  --snow: #fcfcfc;
  --black: #000000;
  --white: #ffffff;

  --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
  --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
  --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03), 0 14px 28px 0 rgba(0, 0, 0, 0.08);
  --shadow-surface: var(--surface-shadow);
  --glass-blur: 0px;
  --code-bg: var(--accent-soft);
  --input-placeholder: var(--field-placeholder);
  --focus-ring: rgba(0, 121, 58, 0.22);
  --terminal-bg: #030704;
  --terminal-titlebar: #101c13;
  --terminal-fg: #fcfcfc;
  --terminal-chrome: #101c13;
  --term-cursor: #00793a;
  --claim-btn-text: var(--accent-foreground);
}

html[data-heroui-theme="brutalism"] body,
body {
  background: var(--background) !important;
  font-family: var(--font-sans) !important;
}

button,
input,
select,
textarea {
  font-family: var(--font-sans) !important;
}

.topbar,
.header,
.claim-form,
.search-group,
.dialog-box,
.toast,
.claim-result,
.terminal,
.terminal-surface,
.capability-card,
.step-card,
.compare-grid,
.vendor-card,
.login-card,
.email-list,
.detail-body-card,
.attachments-card,
.thread-card,
.rail-section,
.demo-hero,
.cta-card,
.feature-card,
.card,
.endpoint,
.sidebar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--surface-shadow) !important;
  backdrop-filter: none !important;
}

.topbar,
.header {
  background: var(--surface) !important;
}

.side-rail {
  box-shadow: none !important;
}

.topbar a,
.navbar__item,
.brand-link,
.topbar-current,
.btn-logout,
.theme-toggle,
.mobile-menu-btn,
.hpro-icon-button,
.copy-btn-sm,
.ghost-button,
.dialog-cancel,
.btn-load-more,
.btn-thread,
.btn-toggle-body,
.cta-action button,
.controls button,
.command-chip,
.label-pill,
.mode-pill,
.onboard-tab,
.integration-tab,
.content button:not(.mobile-menu-btn):not(.theme-toggle),
.page-intro-links a,
.links-row a,
.ai-native-row a,
.content .feature-card a,
.content .cta-action a.value {
  border: 1px solid var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  box-shadow: var(--field-shadow) !important;
}

.topbar a:hover,
.navbar__item:hover,
.btn-logout:hover,
.theme-toggle:hover,
.mobile-menu-btn:hover,
.copy-btn-sm:hover,
.ghost-button:hover,
.dialog-cancel:hover,
.btn-load-more:hover,
.btn-thread:hover,
.btn-toggle-body:hover,
.cta-action button:hover,
.controls button:hover,
.command-chip:hover,
.label-pill:hover,
.mode-pill:hover,
.onboard-tab:hover,
.integration-tab:hover,
.content button:not(.mobile-menu-btn):not(.theme-toggle):hover {
  background: var(--default-hover) !important;
  border-color: var(--field-border-hover) !important;
  transform: none !important;
}

.claim-btn,
.btn-connect,
.primary-button,
.cta,
.dialog-confirm {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--field-radius) !important;
  color: var(--accent-foreground) !important;
  box-shadow: var(--field-shadow) !important;
}

.claim-btn:hover,
.btn-connect:hover,
.primary-button:hover,
.cta:hover,
.dialog-confirm:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  transform: none !important;
}

.form-input,
.search-input,
.search-mode-select,
.field-block input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
.install-row {
  background: var(--field-background) !important;
  border: var(--field-border-width) solid var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  box-shadow: var(--field-shadow) !important;
  color: var(--field-foreground) !important;
}

.form-input:hover,
.search-input:hover,
.search-mode-select:hover,
.field-block input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
select:hover,
.install-row:hover {
  background: var(--field-background-hover) !important;
  border-color: var(--field-border-hover) !important;
}

.form-input:focus,
.search-input:focus,
.search-mode-select:focus,
.field-block input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
select:focus {
  border-color: var(--field-border-focus) !important;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--field-shadow) !important;
}

.install-label {
  background: var(--surface-secondary) !important;
  border-right: 1px solid var(--field-border) !important;
  color: var(--accent) !important;
}

.copy-btn,
.claim-domain,
.terminal-titlebar,
.terminal-head {
  border-color: var(--border) !important;
}

.badge,
.method-badge,
.badge-code-value,
.mailbox-badge,
.content code,
code,
.controls .speed,
.label-filters,
.mode-switch,
.onboard-tabs,
.integration-tabs {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

.content code,
code {
  background: var(--code-bg) !important;
  color: var(--accent-soft-foreground) !important;
}

.content table tr,
table,
pre {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--field-shadow) !important;
}

.content table tr {
  background: var(--surface) !important;
}

.sidebar__menu-item[data-current="true"] .sidebar__menu-item-content,
.sidebar nav a.active .sidebar__menu-item-content,
.sidebar nav a.active:not(:has(.sidebar__menu-item-content)) {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--accent-soft-hover) !important;
  color: var(--accent-soft-foreground) !important;
}

.sidebar__menu-item[data-current="true"] .sidebar__menu-label,
.sidebar__menu-item[data-current="true"] .sidebar__menu-label-text,
.sidebar nav a.active .sidebar__menu-label,
.sidebar nav a.active .sidebar__menu-label-text {
  color: var(--accent-soft-foreground) !important;
  font-weight: 700 !important;
}

.terminal,
.terminal-surface {
  background: var(--terminal-bg) !important;
  color: var(--terminal-fg) !important;
}

.terminal-titlebar,
.terminal-head {
  background: var(--terminal-titlebar) !important;
}

.card:hover,
.vendor-card:hover,
.capability-card:hover,
.step-card:hover,
.demo-hero:hover {
  transform: none !important;
  box-shadow: var(--surface-shadow) !important;
}

.hero-heading,
.section-heading,
.page-intro h1,
.content h1 {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
}

/* Refined HeroUI chrome: one surface per control group, no nested borders. */
.topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 54px !important;
  padding: 10px 0 !important;
}

.topbar-left a,
.topbar .brand-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 34px !important;
  padding: 6px 0 !important;
}

.topbar-right {
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  box-shadow: var(--field-shadow) !important;
}

.topbar-right a,
.topbar-right .navbar__item,
.topbar-right .theme-toggle,
.topbar-right .hpro-icon-button {
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.topbar-right a,
.topbar-right .navbar__item {
  min-height: 34px !important;
  padding: 7px 12px !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.topbar-right a:hover,
.topbar-right .navbar__item:hover {
  background: var(--surface-secondary) !important;
  color: var(--foreground) !important;
}

.topbar-right .theme-toggle,
.topbar-right .hpro-icon-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  background: var(--surface-secondary) !important;
}

.topbar-right .theme-toggle:hover,
.topbar-right .hpro-icon-button:hover {
  background: var(--default-hover) !important;
}

.claim-form {
  display: flex !important;
  align-items: center !important;
  width: min(100%, 570px) !important;
  min-height: 58px !important;
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--field-border) !important;
  border-radius: calc(var(--field-radius) + 4px) !important;
  background: var(--field-background) !important;
  box-shadow: var(--field-shadow) !important;
}

.claim-form .claim-input,
.claim-form .claim-domain,
.claim-form .claim-btn {
  border: 0 !important;
  box-shadow: none !important;
}

.claim-form .claim-input {
  flex: 1 1 auto !important;
  min-width: 120px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border-radius: var(--field-radius) !important;
}

.claim-form .claim-input:focus,
.claim-form .claim-input:focus-visible {
  box-shadow: none !important;
}

.claim-form .claim-domain {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
}

.claim-form .claim-btn {
  align-self: stretch !important;
  min-height: 48px !important;
  margin-left: 4px !important;
  padding: 0 24px !important;
  border-radius: var(--field-radius) !important;
}

/* Integrations: one designed surface instead of scattered chips. */
.integrations-section {
  padding: 72px 0 56px !important;
}

.integrations-section .section-desc {
  margin-bottom: 24px !important;
}

.integration-tabs {
  width: fit-content !important;
  margin-bottom: 12px !important;
  transform: none;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  box-shadow: var(--field-shadow) !important;
}

.integration-tab {
  display: inline-flex !important;
  width: auto !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.integration-tab:hover {
  background: var(--surface-secondary) !important;
  color: var(--foreground) !important;
}

.integration-tab.active {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.integration-panel {
  display: none;
  margin-top: 0 !important;
}

.integration-panel.active {
  display: block;
  animation: integrationFadeIn 0.2s ease;
}

@keyframes integrationFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.integration-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(420px, 1.35fr);
  gap: 28px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--surface-shadow);
}

.integration-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.integration-kicker {
  width: fit-content;
  margin-bottom: 18px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.integration-copy h3 {
  max-width: 13ch;
  margin: 0 0 12px;
  color: var(--foreground);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 800;
}

.integration-copy p {
  max-width: 46ch;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.integration-install {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: auto 0 16px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius) !important;
  background: var(--field-background) !important;
  color: var(--muted) !important;
  box-shadow: var(--field-shadow);
  overflow-x: auto;
}

.integration-install span {
  color: var(--muted);
}

.integration-install code {
  background: transparent !important;
  border: 0 !important;
  color: var(--foreground) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: nowrap;
}

.integration-link {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.integration-link:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

.integration-terminal {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--field-radius);
  background: var(--terminal-bg);
  box-shadow: var(--field-shadow);
}

.integration-terminal-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--terminal-fg) 14%, transparent);
  background: var(--terminal-titlebar);
  color: var(--terminal-fg);
}

.integration-terminal-head span {
  color: color-mix(in srgb, var(--terminal-fg) 72%, transparent);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.integration-terminal-head button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--terminal-fg) 18%, transparent);
  border-radius: var(--field-radius);
  background: color-mix(in srgb, var(--terminal-fg) 7%, transparent);
  color: var(--terminal-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.integration-terminal-head button:hover {
  background: color-mix(in srgb, var(--terminal-fg) 12%, transparent);
}

.integration-code {
  display: block !important;
  min-height: 168px;
  margin: 0 !important;
  padding: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--terminal-bg) !important;
  color: var(--terminal-fg) !important;
  box-shadow: none !important;
  overflow-x: auto;
  white-space: pre;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

.links-section {
  padding: 32px 0 56px !important;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.resource-group {
  min-width: 0;
}

.resource-group h3 {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resource-group a {
  display: flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.resource-group a::after {
  content: "↗";
  margin-left: 7px;
  color: var(--muted);
  font-size: 12px;
}

.resource-group a[href^="/"]::after {
  content: "→";
}

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

@media (max-width: 900px) {
  .wrap,
  .page-shell,
  .content,
  .app-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .topbar {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .layout {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  .hero,
  .workspace,
  .page-intro {
    grid-template-columns: 1fr !important;
  }

  .hero-heading {
    font-size: 44px !important;
    max-width: 12ch;
  }

  .hero-left,
  .hero-right,
  .hero-sub,
  .hero-claim-block,
  .claim-result,
  .hero-install-block,
  .integration-tabs,
  .integration-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-right,
  .terminal,
  .terminal-surface {
    width: min(100%, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    box-sizing: border-box !important;
  }

  .claim-form {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .claim-input {
    min-width: 0 !important;
  }

  .sidebar {
    width: min(88vw, 320px) !important;
  }

  .content pre,
  .content code,
  .content table,
  .content .card,
  .content .endpoint,
  .content .demo-hero,
  .content .cta-card,
  .content .cta-action,
  .content .feature-card,
  .content .cards,
  .content .feature-grid,
  .content .cta-actions,
  .step-code,
  .integration-code {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content pre code {
    width: auto !important;
    min-width: 0 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .content table {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .content table thead,
  .content table .responsive-table-header {
    display: none !important;
  }

  .content table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  .content table tr {
    display: grid !important;
    gap: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--field-shadow) !important;
  }

  .content th,
  .content td {
    display: grid !important;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--separator-tertiary) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .content td:last-child {
    border-bottom: 0 !important;
  }

  .content td::before {
    content: attr(data-label);
    color: var(--foreground);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
  }

  .content td:not([data-label])::before {
    content: none;
  }

  .integration-code,
  .step-code,
  .install-cmd {
    white-space: pre-wrap !important;
    overflow-x: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .integration-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .resource-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 560px) {
  .topbar,
  .header {
    border-radius: var(--radius-lg) !important;
  }

  .topbar {
    position: static;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-start;
    gap: 0 !important;
    padding: 3px !important;
  }

  .topbar-right a,
  .topbar-right .navbar__item {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
  }

  .topbar-right .theme-toggle,
  .topbar-right .hpro-icon-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .hero-heading,
  .page-intro h1,
  .content h1 {
    font-size: 34px !important;
  }

  .claim-form {
    display: grid !important;
    grid-template-columns: 1fr;
    padding: 6px !important;
  }

  .claim-input,
  .claim-domain,
  .claim-btn {
    width: 100% !important;
    border: 0 !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none !important;
    text-align: left;
  }

  .claim-domain {
    min-height: 28px !important;
    padding-top: 0 !important;
  }

  .claim-btn {
    justify-content: center !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    text-align: center !important;
  }

  .integrations-section {
    padding: 56px 0 42px !important;
  }

  .integrations-section .section-desc {
    margin-bottom: 18px !important;
  }

  .integration-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    border-radius: 12px !important;
    padding: 3px !important;
  }

  .integration-tab {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .integration-card {
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .integration-kicker {
    margin-bottom: 14px;
  }

  .integration-copy h3 {
    max-width: 15ch;
    font-size: 28px;
    line-height: 1.03;
  }

  .integration-copy p {
    margin-bottom: 18px;
  }

  .integration-install {
    margin: 0 0 14px !important;
    min-height: 46px;
  }

  .integration-link {
    margin-bottom: 4px;
  }

  .integration-terminal {
    margin-top: 2px;
    border-radius: 10px;
  }

  .integration-terminal-head {
    min-height: 40px;
    padding: 0 12px;
  }

  .integration-code {
    min-height: 0;
    padding: 16px !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .onboard-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    padding: 3px !important;
    border-radius: 12px !important;
  }

  .onboard-tab {
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .onboard-block {
    padding: 48px 14px 14px !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .onboard-copy {
    top: 10px !important;
    right: 10px !important;
  }

  .page-intro-links {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0 !important;
    width: 100%;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--separator) !important;
  }

  .page-intro-links a {
    width: 100% !important;
    justify-content: space-between;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--separator-tertiary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .page-intro-links a::after {
    content: "→";
    color: var(--muted);
  }

  .login-screen {
    align-items: flex-start !important;
    min-height: auto !important;
    padding: 28px 0 44px !important;
  }

  .login-card {
    padding: 28px 24px !important;
  }
}