/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 850px;
  --sidebar-width: 300px;
  --page-width: 100vw;
  --logo-height: 40px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


:root {
  --accent-1: #fcfdff;
  --accent-2: #f5f9ff;
  --accent-3: #e9f3ff;
  --accent-4: #daebff;
  --accent-5: #c7e1ff;
  --accent-6: #b2d3ff;
  --accent-7: #98c1ff;
  --accent-8: #73a7ff;
  --accent-9: #06f;
  --accent-10: #0059e8;
  --accent-11: #005dec;
  --accent-12: #0a2e6b;

  --accent-a1: #0055ff03;
  --accent-a2: #0066ff0a;
  --accent-a3: #0074ff16;
  --accent-a4: #0076ff25;
  --accent-a5: #0077ff38;
  --accent-a6: #006eff4d;
  --accent-a7: #0066ff67;
  --accent-a8: #005fff8c;
  --accent-a9: #0066ff;
  --accent-a10: #0059e8;
  --accent-a11: #005dec;
  --accent-a12: #002565f5;

  --accent-contrast: #fff;
  --accent-surface: #f3f8ffcc;
  --accent-indicator: #06f;
  --accent-track: #06f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99.4% 0.0027 260.8);
      --accent-2: oklch(98.2% 0.0108 260.8);
      --accent-3: oklch(96% 0.0226 260.8);
      --accent-4: oklch(93.6% 0.0436 260.8);
      --accent-5: oklch(90.4% 0.0649 260.8);
      --accent-6: oklch(86.3% 0.0871 260.8);
      --accent-7: oklch(80.8% 0.1087 260.8);
      --accent-8: oklch(73.2% 0.145 260.8);
      --accent-9: oklch(56.3% 0.2408 260.8);
      --accent-10: oklch(51.8% 0.2282 260.8);
      --accent-11: oklch(53.1% 0.2282 260.8);
      --accent-12: oklch(31.8% 0.1151 260.8);

      --accent-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --accent-a2: color(display-p3 0.0235 0.349 0.8941 / 0.036);
      --accent-a3: color(display-p3 0.0078 0.4078 0.9529 / 0.079);
      --accent-a4: color(display-p3 0.0078 0.3882 0.9451 / 0.134);
      --accent-a5: color(display-p3 0 0.3922 0.9412 / 0.2);
      --accent-a6: color(display-p3 0.0039 0.3686 0.9451 / 0.279);
      --accent-a7: color(display-p3 0.0039 0.3412 0.949 / 0.373);
      --accent-a8: color(display-p3 0 0.3137 0.949 / 0.506);
      --accent-a9: color(display-p3 0 0.2706 0.9569 / 0.836);
      --accent-a10: color(display-p3 0 0.2392 0.8588 / 0.859);
      --accent-a11: color(display-p3 0 0.251 0.8706 / 0.851);
      --accent-a12: color(display-p3 0 0.102 0.349 / 0.918);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9725 1 / 0.8);
      --accent-indicator: oklch(56.3% 0.2408 260.8);
      --accent-track: oklch(56.3% 0.2408 260.8);
    }
  }
}


:root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8e8c99;
  --grayscale-track: #8e8c99;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.555 0.549 0.596);
      --grayscale-track: color(display-p3 0.555 0.549 0.596);
    }
  }
}


.dark {
  --accent-1: #000;
  --accent-2: #121211;
  --accent-3: #1f1f1d;
  --accent-4: #282826;
  --accent-5: #30302e;
  --accent-6: #3a3a37;
  --accent-7: #484845;
  --accent-8: #60605e;
  --accent-9: #fff;
  --accent-10: #f6f6f4;
  --accent-11: #b3b3b0;
  --accent-12: #eeeeec;

  --accent-a1: #00000000;
  --accent-a2: #fffff112;
  --accent-a3: #ffffef1f;
  --accent-a4: #fffff328;
  --accent-a5: #fffff530;
  --accent-a6: #fffff23a;
  --accent-a7: #fffff548;
  --accent-a8: #fffffa60;
  --accent-a9: #ffffff;
  --accent-a10: #fffffdf6;
  --accent-a11: #fffffbb3;
  --accent-a12: #fffffdee;

  --accent-contrast: #311921;
  --accent-surface: #24242280;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0023 106.5);
      --accent-2: oklch(18.3% 0.0022 106.5);
      --accent-3: oklch(23.9% 0.0032 106.5);
      --accent-4: oklch(27.5% 0.0036 106.5);
      --accent-5: oklch(30.8% 0.004 106.5);
      --accent-6: oklch(34.7% 0.004 106.5);
      --accent-7: oklch(40% 0.004 106.5);
      --accent-8: oklch(49% 0.004 106.5);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0.0027 106.5);
      --accent-11: oklch(76.7% 0.004 106.5);
      --accent-12: oklch(94.8% 0.0027 106.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9961 0.9961 0.9412 / 0.071);
      --accent-a3: color(display-p3 1 1 0.9333 / 0.122);
      --accent-a4: color(display-p3 1 1 0.9529 / 0.157);
      --accent-a5: color(display-p3 0.9961 0.9961 0.9569 / 0.189);
      --accent-a6: color(display-p3 1 1 0.949 / 0.228);
      --accent-a7: color(display-p3 1 1 0.9569 / 0.283);
      --accent-a8: color(display-p3 1 1 0.9804 / 0.377);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 0.9922 / 0.965);
      --accent-a11: color(display-p3 1 1 0.9843 / 0.702);
      --accent-a12: color(display-p3 1 1 0.9922 / 0.934);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1412 0.1412 0.1333 / 0.5);
      --accent-indicator: oklch(100% 0 none);
      --accent-track: oklch(100% 0 none);
    }
  }
}


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d66;
  --grayscale-track: #6f6d66;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.403);
      --grayscale-track: color(display-p3 0.434 0.428 0.403);
    }
  }
}

:root {
  color-scheme: light;
  --accent: rgba(0, 102, 255, 1);
  --background: #fff;
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #06f;
}

.dark {
  color-scheme: light;
  --background: #000000;
  --accent: #ffffff;
}

.fern-background-image {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--accent), var(--background) 90%) 0, var(--background) 100%);
}

@keyframes fadeUpIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow {
    0% {
        text-shadow: 0 0 20px rgba(0, 113, 235, 0);
    }
    50% { 
        text-shadow: 0 0 20px rgba(0, 113, 235, 0.2);
    }
    100% {
        text-shadow: 0 0 20px rgba(0, 113, 235, 0);
    }
}

:root {
    --primary-color: #0066FF; /* TaxCloud's primary blue */
    --accent-color: #0066FF; /* Lighter blue for accents */
    --background-dark: #FFFFFF;
    --background-light: #F8FAFC;
    --text-color: #1E293B; /* Darker blue for text */
    --text-secondary: #64748B; /* Softer secondary text */
    --border-color: #E2E8F0;
    --border-radius: 8px; /* Slightly smaller radius to match TaxCloud */
    --max-width: 1200px;
    --transition: all 0.3s ease;
}

body {
    margin: 0;
    padding: 0;
    background: var(--background-dark);
    color: var(--text-color);
    font-family: 'Inter', sans-serif; /* Matching Koywe's font */
}

.hero-section {
    padding: 6rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%);
    margin: -2rem -2rem 4rem -2rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/grid-pattern.svg') center/cover;
    opacity: 0.1;
    pointer-events: none;
}

.hero-section h1 {
    font-size: 3.5rem; /* Slightly smaller for better readability */
    font-weight: 700; /* Less bold to match TaxCloud */
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    animation: fadeUpIn 1s ease-out;
}

.hero-section h1 span {
    color: var(--primary-color);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.5;
    animation: fadeUpIn 1s ease-out 0.2s backwards;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap; 
    gap: 1.5rem;
    justify-content: center;
    margin-top: 3rem;
    animation: fadeUpIn 1s ease-out 0.4s backwards;
}

.primary-button, .secondary-button {
    padding: 6px 24px !important; 
    width: 185px;
    height: 55px;
    justify-content: center;
    border-radius: var(--border-radius);
    font-weight: 900;
    font-size: 0.9rem;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.primary-button {
    background: var(--primary-color);
    color: white; /* White text on blue background */
    padding: 0.875rem 1.75rem;
    border-radius: 6px;
    font-weight: 500;
}

.primary-button:hover {
    background: #0062cc; /* Darker blue on hover */
    transform: translateY(-2px);
}
.primary-button:focus-visible {
    background: #0062cc; /* Darker blue on hover */
    transform: translateY(-2px); outline: none;
}

.secondary-button {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.875rem 1.75rem;
    border-radius: 6px;
}

.external-link-icon {
    color: var(--primary-color) !important; 
}

.truncate.font-medium:hover {
    background: transparent; /* Darker blue on hover */
    color: #0066FF;
    transform: translateY(-2px);
}
.truncate.font-medium:focus-visible {
    background: transparent; /* Darker blue on hover */
    color: #0066FF;
    transform: translateY(-2px); outline: none;
}

.secondary-button:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}
.secondary-button:focus-visible {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px); outline: none;
}

.fern-button.outlined.normal:hover {
    background: #cee2ff; /* Darker blue on hover */
    color: #0066FF;
    transform: translateY(-2px);
}
.fern-button.outlined.normal:focus-visible {
    background: #cee2ff; /* Darker blue on hover */
    color: #0066FF;
    transform: translateY(-2px); outline: none;
}

.github-icon {
    width: 16px;
    height: 16px;
    filter: invert(1);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 6rem auto;
    max-width: var(--max-width);
    padding: 0 2rem;
}

.feature-card {
    padding: 1.75rem;
    background: var(--background-dark);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--text-color);
    font-weight: 600;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color);
}
.feature-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent-color); outline: none;
}

.code-preview {
    max-width: var(--max-width);
    margin: 4rem auto;
    background: #1E293B; /* Dark background for code */
    border-radius: var(--border-radius);
    overflow: hidden;
    border: none;
}

.code-header {
    background: #2D3748; /* Slightly lighter than code background */
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #4A5568;
}

.code-title {
    font-size: 0.875rem;
    color: #E2E8F0;
    font-weight: 500;
}

pre {
    margin: 0;
    padding: 1.25rem !important;
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-x: auto;
    background: #1E293B;
    color: #E2E8F0;
}

/* ---------------------------------------------------------------------- *
 * Defensive code-block contrast
 *
 * Fern wraps code blocks in nested components whose default light-mode
 * styling sometimes renders plain text in near-white on a white
 * background (especially for bare ``` fences without a language hint).
 * The rules below guarantee legible contrast in both themes without
 * fighting Fern's syntax-highlight colors (which already have their own
 * `color` set on nested <span> tokens).
 * ---------------------------------------------------------------------- */

/* Light mode: force a tinted panel background and dark default text. */
:root pre,
:root pre code,
html:not(.dark) pre,
html:not(.dark) pre code,
html:not(.dark) :not(pre) > code {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
}

/* Inline `code` snippets in prose */
html:not(.dark) :not(pre) > code {
    padding: 0.15em 0.35em;
    border-radius: 4px;
    border: 1px solid #E2E8F0;
}

/* Any Fern-wrapped code container that slips through the `pre` selector */
html:not(.dark) [class*="code-block"],
html:not(.dark) [class*="CodeBlock"],
html:not(.dark) [class*="codeblock"] {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
}

/* Dark mode: keep the dark panel but make sure default text is light. */
html.dark pre,
html.dark pre code,
html.dark :not(pre) > code {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
}

/* ---------------------------------------------------------------------- *
 * "Choose your path" cards, welcome page path picker
 * ---------------------------------------------------------------------- */

.path-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
}

.path-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.path-card:hover {
    transform: translateY(-4px);
    border-color: #0066FF;
    box-shadow: 0 18px 40px -14px rgba(0, 102, 255, 0.28);
    text-decoration: none;
}
.path-card:focus-visible {
    transform: translateY(-4px);
    border-color: #0066FF;
    box-shadow: 0 18px 40px -14px rgba(0, 102, 255, 0.28);
    text-decoration: none; outline: none;
}

/* Zero out any Fern/prose default spacing on the image block so the SVG
 * sits flush against the top of the card with no peek-through bar. */
.path-card > .path-card-image:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.path-card img {
    margin: 0 !important;
    border-radius: 0 !important;
}

.path-card.featured {
    border-color: #0066FF;
    box-shadow: 0 6px 20px -8px rgba(0, 102, 255, 0.22);
}

.path-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.path-card-image img,
.path-card-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

.path-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.path-card-body h3 {
    margin: 0.1rem 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
}

.path-card-body p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
    font-size: 0.95rem;
}

.path-card-body p code {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.85em;
    padding: 0.1em 0.35em !important;
    border-radius: 4px !important;
    background: #F1F5F9 !important;
    color: #0066FF !important;
    border: 1px solid #E2E8F0 !important;
}

.path-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #0066FF 0%, #3A8CFF 100%);
    color: #FFFFFF;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.35);
}

.path-badge::before {
    content: "★";
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0;
}

/* Dark mode variants */
html.dark .path-card {
    background: #0F172A;
    border-color: #1E293B;
}

html.dark .path-card:hover {
    border-color: #0066FF;
}
html.dark .path-card:focus-visible {
    border-color: #0066FF; outline: none;
}

html.dark .path-card.featured {
    border-color: #0066FF;
    box-shadow: 0 6px 20px -8px rgba(0, 102, 255, 0.45);
}

html.dark .path-card-image {
    background: #0B1220;
    border-bottom-color: #1E293B;
}

html.dark .path-card-body h3 {
    color: #F8FAFC;
}

html.dark .path-card-body p {
    color: #94A3B8;
}

html.dark .path-card-body p code {
    background: #1E293B !important;
    color: #60A5FA !important;
    border-color: #334155 !important;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {

    .path-cards {
        grid-template-columns: 1fr;
    }

}

/* ---------------------------------------------------------------------- *
 * Welcome intro stats strip
 * ---------------------------------------------------------------------- */

.stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 1.5rem 0 1.75rem;
}

.stat-tile {
    padding: 1.1rem 1.35rem;
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF3FF 100%);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    transition: border-color 0.2s ease, transform 0.2s ease;
    /* Query container for .stat-num, so a long value scales to the tile
       instead of wrapping. See the note on .stat-num below. */
    container-type: inline-size;
}

.stat-tile:hover {
    border-color: #0066FF;
    transform: translateY(-2px);
}
.stat-tile:focus-visible {
    border-color: #0066FF;
    transform: translateY(-2px); outline: none;
}

/* Sized against the tile, not the viewport: with both the nav sidebar and
   the "On this page" rail showing, the content column bottoms out near
   600px, leaving ~146px inside each tile. A fixed 1.75rem wraps a value
   like "US & Canada" onto two lines and drops that tile's label out of
   line with its neighbours. Tiles are equal width, so all three values
   always resolve to the same size and stay aligned. */
.stat-num {
    font-size: clamp(1.35rem, 15cqi, 1.75rem);
    font-weight: 800;
    color: #0066FF;
    line-height: 1.1;
    margin-bottom: 0.3rem;
    letter-spacing: -0.015em;
}

.stat-label {
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.4;
}

/* Dark mode */
html.dark .stat-tile {
    background: linear-gradient(135deg, #0F172A 0%, #17233F 100%);
    border-color: #1E293B;
}

html.dark .stat-num {
    color: #60A5FA;
}

html.dark .stat-label {
    color: #94A3B8;
}

@media (max-width: 720px) {

    .stat-strip {
        grid-template-columns: 1fr;
    }

}

.getting-started {
    max-width: var(--max-width);
    margin: 8rem auto;
    padding: 0 2rem;
    text-align: center;
}

.getting-started h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
    color: var(--text-color);
    font-weight: 700;
}

.getting-started-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.getting-started-card {
    padding: 2rem;
    background: var(--background-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
    text-align: left;
}

.getting-started-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 113, 235, 0.1);
}
.getting-started-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 113, 235, 0.1); outline: none;
}

.community-section {
    background: var(--background-light);
    padding: 6rem 2rem;
    margin: 4rem -2rem;
    text-align: center;
}

.community-links {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
}

.community-button {
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
    text-decoration: none;
}

.community-button.discord {
    background: var(--accent-color);
    color: var(--primary-color);
}

.community-button.github {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.community-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
.community-button:focus-visible {
    transform: translateY(-2px);
    opacity: 0.9; outline: none;
}

@media (max-width: 1200px) {

    :root {
        --max-width: 90vw;
    }
    
    .hero-section h1 {
        font-size: 4rem;
    }

}

@media (max-width: 768px) {

    .hero-section {
        padding: 6rem 1rem;
    }
    
    .hero-section h1 {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
        padding: 0 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        padding: 0 2rem;
    }
    
    .features-grid, 
    .getting-started-grid {
        grid-template-columns: 1fr;
    }
    
    .community-links {
        flex-direction: column;
        align-items: stretch;
    }

}

@media (max-width: 480px) {

    .hero-section h1 {
        font-size: 2.5rem;
    }
    
    .getting-started h2 {
        font-size: 2rem;
    }

}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 113, 235, 0.05) 0%, transparent 50%);
    opacity: 0.5;
    z-index: 0;
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.3;
    }
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {

  .btn-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

}

/* ---------------------------------------------------------------------- *
 * Tutorial step-by-step format
 *
 * Used in fern/docs/pages/tutorials/*.mdx for sequential walkthroughs.
 * Each tutorial wraps its steps in <div className="tutorial">; each step
 * is <div className="tutorial-step"> containing an <h3> heading and an
 * <img> screenshot. Step numbers are auto-generated via CSS counters —
 * no manual numbering needed in MDX. To reorder steps, just move blocks.
 * ---------------------------------------------------------------------- */

.tutorial {
    counter-reset: tutorial-step;
    margin: 1.5rem 0;
}

.tutorial-step {
    counter-increment: tutorial-step;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 1.75rem 2rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.tutorial-step h3 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.4;
}

.tutorial-step h3::before {
    content: counter(tutorial-step);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: #EEF3FF;
    color: #0066FF;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.tutorial-step img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0;
    display: block;
}

/* Optional caption / hint paragraph beneath the screenshot */
.tutorial-step p {
    margin: 1rem 0 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Dark mode */
html.dark .tutorial-step {
    background: #0F172A;
    border-color: #1E293B;
}

html.dark .tutorial-step h3 {
    color: #F8FAFC;
}

html.dark .tutorial-step h3::before {
    background: #17233F;
    color: #60A5FA;
}

html.dark .tutorial-step p {
    color: #94A3B8;
}

@media (max-width: 720px) {

    .tutorial-step {
        padding: 1.25rem 1.25rem 1.5rem;
    }
    .tutorial-step h3 {
        font-size: 1.05rem;
        gap: 0.75rem;
    }
    .tutorial-step h3::before {
        width: 1.85rem;
        height: 1.85rem;
        font-size: 0.9rem;
    }

}
/* Copy-to-clipboard button for CSV export (see custom.js) */
.copy-csv-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: #0066FF;
    background: transparent;
    border: 1px solid #0066FF;
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    margin: 0.25rem 0 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.copy-csv-button::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='13'%20height='13'%20rx='2'/%3E%3Cpath%20d='M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='13'%20height='13'%20rx='2'/%3E%3Cpath%20d='M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1'/%3E%3C/svg%3E") no-repeat center / contain;
}

.copy-csv-button:hover {
    background: #0066FF;
    color: #ffffff;
}
.copy-csv-button:focus-visible {
    background: #0066FF;
    color: #ffffff; outline: none;
}

.copy-csv-button.copy-csv-button--copied {
    color: #16A34A;
    border-color: #16A34A;
    background: transparent;
}

.copy-csv-button.copy-csv-button--copied::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E");
}

html.dark .copy-csv-button {
    color: #60A5FA;
    border-color: #60A5FA;
}

html.dark .copy-csv-button:hover {
    background: #60A5FA;
    color: #0B1220;
}
html.dark .copy-csv-button:focus-visible {
    background: #60A5FA;
    color: #0B1220; outline: none;
}

html.dark .copy-csv-button.copy-csv-button--copied {
    color: #4ADE80;
    border-color: #4ADE80;
}

/* Collapsible table wrapper (see events.mdx "Tax authority values") */
details.csv-table {
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    padding: 0 1rem;
    margin: 0.5rem 0 1rem;
}

details.csv-table > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.75rem 0;
    list-style: none;
    color: #0066FF;
    user-select: none;
}

details.csv-table > summary::-webkit-details-marker {
    display: none;
}

details.csv-table > summary::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 0.32em solid transparent;
    border-bottom: 0.32em solid transparent;
    border-left: 0.42em solid currentColor;
    margin-right: 0.6rem;
    vertical-align: middle;
    transition: transform 0.15s ease;
}

details.csv-table[open] > summary::before {
    transform: rotate(90deg);
}

details.csv-table[open] > summary {
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 0.5rem;
}

html.dark details.csv-table {
    border-color: #1E293B;
}

html.dark details.csv-table > summary {
    color: #60A5FA;
}

html.dark details.csv-table[open] > summary {
    border-bottom-color: #1E293B;
}

/* ===================================================================
   Ziptax for Platforms landing page
   Recreates the cdn.zip.tax/infographics/PlatformMerchants one-pager.
   Blue = platform (Ziptax), Orange = merchant (TaxCloud).
   =================================================================== */
.zx-cols,
.zx-caption {
    --zx-blue: #0066FF;
    --zx-blue-ink: #0047B0;
    --zx-orange: #FF6600;
    --zx-ink: #0F172A;
    --zx-body: #334155;
    --zx-muted: #64748B;
}

/* ---- Page header: eyebrow tag + hero headline ----
   The built-in H1 ("Ziptax for Platforms") becomes the small all-caps
   tag; the :has() guard scopes the override to pages that render a
   .zx-hero-title, so no other doc page is affected. */
article:has(.zx-hero-title) header h1.fern-page-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    color: #4D94FF;
}
html.dark article:has(.zx-hero-title) header h1.fern-page-heading {
    color: #6FA8FF;
}
article:has(.zx-hero-title) > header {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.zx-hero-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0F172A;
    margin: 0 0 0.9rem;
}
html.dark .zx-hero-title { color: #F1F5F9; }
p.zx-lede {
    font-size: 16px;
    line-height: 1.6;
    color: #64748B;
    margin: 0 0 2.25rem;
}
html.dark p.zx-lede { color: #94A3B8; }

.zx-cols {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.75rem;
    align-items: stretch;
    margin: 1.5rem 0 2rem;
}
.zx-cols.pair {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 760px) {

    .zx-cols,
    .zx-cols.pair {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .zx-rel {
        display: none;
    }

}

/* ---- Card shell ---- */
.zx-card {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.zx-card.platform {
    background: linear-gradient(#EEF3FF 0%, #FFFFFF 70%);
    border-color: #CFE0FF;
}
.zx-card.merchant {
    background: linear-gradient(#FFF0E6 0%, #FFFFFF 70%);
    border-color: #FFD5B8;
}

/* ---- Card header: icon chip + brand logo ---- */
.zx-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.zx-chip {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    flex: none;
}
.zx-card.platform .zx-chip { background: var(--zx-blue); }
.zx-card.merchant .zx-chip { background: var(--zx-orange); }
.zx-chip svg { width: 24px; height: 24px; }
.zx-logo { height: 22px; width: auto; display: block; }
.zx-logo.zx-logo--dark { display: none; }
html.dark .zx-logo.zx-logo--light { display: none; }
html.dark .zx-logo.zx-logo--dark { display: block; }

/* ---- Eyebrow / title / paragraph ---- */
.zx-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.zx-card.platform .zx-eyebrow { color: var(--zx-blue-ink); }
.zx-card.merchant .zx-eyebrow { color: var(--zx-orange); }
.zx-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--zx-ink);
    margin: 0 0 8px;
}
html.dark .zx-title { color: #F1F5F9; }
.zx-card p {
    margin: 0 0 0.5rem;
    color: var(--zx-body);
    font-size: 14.5px;
    line-height: 1.55;
}
html.dark .zx-card p { color: #94A3B8; }
.zx-card p:last-child { margin-bottom: 0; }

/* ---- Section 2: pill badge + action title ---- */
.zx-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    /* line-height 1 defeats the inherited 1.75 prose line box so vertical
       padding is true; right padding is 1px less to offset the trailing
       letter-space after the last glyph; top padding is 3px more because
       Inter's uppercase ink sits ~3px high in the em box (no descenders) —
       measured ink-to-border gaps: ~8.8px top/bottom, ~13px left/right */
    line-height: 1;
    padding: 9px 12px 6px 13px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.zx-card.platform .zx-badge { background: #FFFFFF; border: 1px solid #A9C8FF; color: var(--zx-blue-ink); }
.zx-card.merchant .zx-badge { background: #FFFFFF; border: 1px solid #FFC49B; color: var(--zx-orange); }
html.dark .zx-card.platform .zx-badge { background: rgba(0, 102, 255, 0.22); border: 1px solid rgba(0, 102, 255, 0.5); color: #93C5FD; }
html.dark .zx-card.merchant .zx-badge { background: rgba(255, 102, 0, 0.22); border: 1px solid rgba(255, 102, 0, 0.5); color: #FDBA74; }
.zx-caption {
    text-align: center;
    font-size: 13px;
    color: var(--zx-muted);
    margin: -1.25rem 0 2rem;
}
html.dark .zx-caption { color: #94A3B8; }

/* ---- Section 2: checklist ---- */
.zx-check {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
}
.zx-check li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--zx-body);
    margin-bottom: 0.65rem;
    /* Fern's prose pipeline adds [&>li]:pl-3 to every MDX list item */
    padding-left: 0;
}
.zx-check li:last-child { margin-bottom: 0; }
/* Fern's prose pipeline draws list bullets via li::before — suppress ours */
.zx-check li::before { content: none; }
html.dark .zx-check li { color: #CBD5E1; }
.zx-check li svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
}
.zx-card.platform .zx-check li svg { color: var(--zx-blue); }
.zx-card.merchant .zx-check li svg { color: var(--zx-orange); }

/* ---- Section 2: numbered lifecycle steps ---- */
.zx-steps {
    list-style: none;
    counter-reset: zx;
    margin: 0.5rem 0 0;
    padding: 0;
}
.zx-steps.start-3 { counter-reset: zx 2; }
.zx-steps li {
    position: relative;
    padding-left: 2.35rem;
    margin-bottom: 0.85rem;
    font-size: 14px;
    line-height: 1.5;
    color: var(--zx-body);
}
.zx-steps li:last-child { margin-bottom: 0; }
html.dark .zx-steps li { color: #94A3B8; }
.zx-steps li b {
    display: block;
    color: var(--zx-ink);
    font-size: 14.5px;
    margin-bottom: 1px;
}
html.dark .zx-steps li b { color: #F1F5F9; }
.zx-steps li::before {
    counter-increment: zx;
    content: counter(zx);
    position: absolute;
    left: 0;
    top: -1px;
    /* neutralize Fern's [&>li]:before:ml-[-22px] / mt-[-1px] bullet offsets */
    margin: 0;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #FFFFFF;
}
.zx-card.platform .zx-steps li::before { background: var(--zx-blue); }
.zx-card.merchant .zx-steps li::before { background: var(--zx-orange); }

/* ---- Section 1 connector ("1 : many") ---- */
.zx-rel {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    text-align: center;
}
.zx-rel b {
    font-size: 15px;
    color: var(--zx-ink);
}
html.dark .zx-rel b { color: #F1F5F9; }
.zx-rel-arrow {
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--zx-blue), var(--zx-orange));
    position: relative;
}
.zx-rel-arrow::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -3px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--zx-orange);
}
.zx-rel-cap {
    font-size: 12px;
    color: var(--zx-muted);
    line-height: 1.35;
}


/* ===================================================================
   Plan requirement badge for API Reference endpoint descriptions
   (injected via fern/apis/ziptax/overrides.yaml). Visual style mirrors
   the merchant .zx-badge pill on the Ziptax for Platforms page.
   =================================================================== */
.plan-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    /* same optical padding rationale as .zx-badge on the Platforms page */
    line-height: 1;
    padding: 9px 12px 6px 13px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.plan-badge--enterprise {
    background: #FFFFFF;
    border: 1px solid #FFC49B;
    color: #FF6600;
}

html.dark .plan-badge--enterprise {
    background: rgba(255, 102, 0, 0.22);
    border-color: rgba(255, 102, 0, 0.5);
    color: #FDBA74;
}

/* Amber family echoing the Pro tier pill in docs/components/PlanBadge.tsx,
   adapted to the API-reference badge pattern (white bg in light mode). */
.plan-badge--pro {
    background: #FFFFFF;
    border: 1px solid #FDE68A;
    color: #B45309;
}

html.dark .plan-badge--pro {
    background: rgba(217, 119, 6, 0.22);
    border-color: rgba(217, 119, 6, 0.5);
    color: #FCD34D;
}


/* ===================================================================
   "Recommended" pill for the lookup-method cards on the REST API
   overview. Same pill family and optical padding as .zx-badge (see the
   note there); blue borrowed from the platform-side variant.

   Colour is the literal #0047B0 rather than var(--zx-blue-ink): that
   token is scoped to `.zx-cols, .zx-caption`, which exist only on the
   Platforms page, so the var is undefined here and the declaration
   would drop to the inherited card text colour.
   =================================================================== */
.rec-badge {
    /* Floated into the card's top-right corner. `.fern-card` is the
       nearest positioned ancestor (Tailwind `relative`); every wrapper
       between it and the badge is static. Offsets match the card's own
       24px padding, which lands the pill level with the card icon. */
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    padding: 9px 12px 6px 13px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #A9C8FF;
    color: #0047B0;
}

html.dark .rec-badge {
    background: rgba(0, 102, 255, 0.22);
    border-color: rgba(0, 102, 255, 0.5);
    color: #93C5FD;
}


/* ===================================================================
   Per-client blocks in "Client configuration" on the MCP Server page.

   The client names are h3s, only 4px smaller than the section h2 and at
   a similar weight, and each is followed by a tall code block — so the
   boundary between one client and the next reads as loose prose rather
   than a new section. Wrapping each client draws that boundary.

   The names stay real h3s: they carry heading anchors and populate the
   "On this page" rail, which tabs or accordions would have cost.
   =================================================================== */
.mcp-client {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
    background: #FCFDFF;
}

.mcp-client > h3:first-child {
    margin-top: 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #E2E8F0;
}

/* The block supplies the trailing space, so the last child shouldn't. */
.mcp-client > *:last-child {
    margin-bottom: 0;
}

html.dark .mcp-client {
    border-color: #1E293B;
    background: rgba(15, 23, 42, 0.4);
}

html.dark .mcp-client > h3:first-child {
    border-bottom-color: #1E293B;
}