/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/deel-prod.docs.buildwithfern.com/0be2399ea925f1f83ff974764761da9860ec50742ed29a5d4c1ffd0c5c7ac3a8/docs/assets/fonts/inter/Inter-Variable.ttf') format('ttf');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/deel-prod.docs.buildwithfern.com/6136f73372fedc37b80fd1a8ec3e21734073ff17376f3672718f186779672e7a/docs/assets/fonts/inter/Inter-Italic-Variable.ttf') format('ttf');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Bagoss';
    src: url('/_fern-files/deel-prod.docs.buildwithfern.com/d5d9c71f6a8b347301ad13a8b316d0399652a12bf6012d8b95cd70650eddfca7/docs/assets/fonts/bagoss-condensed/bagoss-variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 20px;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Bagoss', 'Inter', 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);
}


.light, :root {
  --accent-1: #fcfdff;
  --accent-2: #f5f9ff;
  --accent-3: #eaf2ff;
  --accent-4: #ddeaff;
  --accent-5: #cce0ff;
  --accent-6: #b9d2ff;
  --accent-7: #a1bfff;
  --accent-8: #7ea5ff;
  --accent-9: #1d3476;
  --accent-10: #2d478b;
  --accent-11: #4a6dc6;
  --accent-12: #172d6e;

  --accent-a1: #0055ff03;
  --accent-a2: #0066ff0a;
  --accent-a3: #0062ff15;
  --accent-a4: #0062ff22;
  --accent-a5: #0064ff33;
  --accent-a6: #005cff46;
  --accent-a7: #0052ff5e;
  --accent-a8: #004eff81;
  --accent-a9: #001a64e2;
  --accent-a10: #002072d2;
  --accent-a11: #0032afb5;
  --accent-a12: #001860e8;

  --accent-contrast: #fff;
  --accent-surface: #f3f8ffcc;
  --accent-indicator: #1d3476;
  --accent-track: #1d3476;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0039 266);
      --accent-2: oklch(98.1% 0.0113 266);
      --accent-3: oklch(96% 0.0233 266);
      --accent-4: oklch(93.7% 0.0438 266);
      --accent-5: oklch(90.6% 0.0635 266);
      --accent-6: oklch(86.4% 0.0818 266);
      --accent-7: oklch(80.9% 0.1053 266);
      --accent-8: oklch(73.4% 0.1442 266);
      --accent-9: oklch(34.9% 0.1169 266);
      --accent-10: oklch(41.5% 0.1169 266);
      --accent-11: oklch(55.4% 0.1442 266);
      --accent-12: oklch(32.3% 0.1169 266);

      --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.3569 0.9529 / 0.079);
      --accent-a4: color(display-p3 0.0078 0.349 0.9412 / 0.126);
      --accent-a5: color(display-p3 0.0039 0.3255 0.9373 / 0.185);
      --accent-a6: color(display-p3 0.0039 0.2941 0.9412 / 0.255);
      --accent-a7: color(display-p3 0.0039 0.2627 0.9451 / 0.346);
      --accent-a8: color(display-p3 0.0039 0.251 0.9451 / 0.475);
      --accent-a9: color(display-p3 0 0.0784 0.3608 / 0.867);
      --accent-a10: color(display-p3 0 0.0941 0.4078 / 0.8);
      --accent-a11: color(display-p3 0 0.1529 0.6353 / 0.679);
      --accent-a12: color(display-p3 0 0.0706 0.3451 / 0.891);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9725 1 / 0.8);
      --accent-indicator: oklch(34.9% 0.1169 266);
      --accent-track: oklch(34.9% 0.1169 266);
    }
  }
}


.light, :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) {
    .light, :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: #0a0818;
  --accent-2: #16122a;
  --accent-3: #271756;
  --accent-4: #35127c;
  --accent-5: #3f1c8e;
  --accent-6: #49299d;
  --accent-7: #5735b4;
  --accent-8: #683fd6;
  --accent-9: #5938b7;
  --accent-10: #4b2b9f;
  --accent-11: #b3a5ff;
  --accent-12: #e0dcff;

  --accent-a1: #0000f60b;
  --accent-a2: #694efc1e;
  --accent-a3: #6836fd4d;
  --accent-a4: #671cfd75;
  --accent-a5: #6d2cfe88;
  --accent-a6: #743efe98;
  --accent-a7: #7a49ffb0;
  --accent-a8: #7b49ffd4;
  --accent-a9: #7b4cffb3;
  --accent-a10: #7541fe9a;
  --accent-a11: #b3a5ff;
  --accent-a12: #e0dcff;

  --accent-contrast: #fff;
  --accent-surface: #211a4680;
  --accent-indicator: #5938b7;
  --accent-track: #5938b7;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(14.8% 0.0339 288.6);
      --accent-2: oklch(20.1% 0.0459 288.6);
      --accent-3: oklch(26.9% 0.1076 288.6);
      --accent-4: oklch(31.7% 0.16 288.6);
      --accent-5: oklch(35.7% 0.1715 288.6);
      --accent-6: oklch(39.8% 0.1753 288.6);
      --accent-7: oklch(44.8% 0.1884 288.6);
      --accent-8: oklch(50.7% 0.2167 288.6);
      --accent-9: oklch(45.7% 0.1884 288.6);
      --accent-10: oklch(40.4% 0.1753 288.6);
      --accent-11: oklch(77.6% 0.2057 288.6);
      --accent-12: oklch(91.4% 0.0657 288.6);

      --accent-a1: color(display-p3 0 0 0.9843 / 0.038);
      --accent-a2: color(display-p3 0.4078 0.3333 1 / 0.108);
      --accent-a3: color(display-p3 0.4 0.2314 1 / 0.287);
      --accent-a4: color(display-p3 0.3882 0.1294 1 / 0.436);
      --accent-a5: color(display-p3 0.4078 0.1961 1 / 0.507);
      --accent-a6: color(display-p3 0.4431 0.2627 1 / 0.569);
      --accent-a7: color(display-p3 0.4627 0.3098 1 / 0.66);
      --accent-a8: color(display-p3 0.4745 0.3098 1 / 0.797);
      --accent-a9: color(display-p3 0.4667 0.3137 0.9961 / 0.673);
      --accent-a10: color(display-p3 0.451 0.2706 1 / 0.577);
      --accent-a11: color(display-p3 0.7098 0.6627 1 / 0.976);
      --accent-a12: color(display-p3 0.8863 0.8745 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1176 0.102 0.2588 / 0.5);
      --accent-indicator: oklch(45.7% 0.1884 288.6);
      --accent-track: oklch(45.7% 0.1884 288.6);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(29, 52, 118, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(232, 235, 242, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(89, 56, 183, 1);
  --background: rgba(11, 10, 14, 1);
  --border: rgba(27, 27, 27, 1);
  --sidebar-background: rgba(11, 10, 14, 1);
  --header-background: rgba(11, 10, 14, 1);
  --card-background: initial;
  --theme-color: #0b0a0e;
}

/* =========================================================================
   Landing page — design tokens & fonts
   Source: design_handoff_developer_docs/designs/colors_and_type.css and the
   inline <style> block in index-v3.html. Scoped to .landing (the landing page
   wraps its <main> in this class) so we don't pollute the rest of the docs.
   ========================================================================= */

/* Fonts — variable assets shipped under /docs/assets/fonts ----------------- */
@font-face {
  font-family: 'Bagoss';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/docs/assets/fonts/bagoss-condensed/bagoss-variable.woff2') format('woff2-variations'),
       url('/docs/assets/fonts/bagoss-condensed/bagoss-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/docs/assets/fonts/inter/Inter-Variable.ttf') format('truetype-variations'),
       url('/docs/assets/fonts/inter/Inter-Variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('/docs/assets/fonts/inter/Inter-Italic-Variable.ttf') format('truetype-variations'),
       url('/docs/assets/fonts/inter/Inter-Italic-Variable.ttf') format('truetype');
}

/* Page-scoped tokens — all keyed off .landing so Fern docs pages are unaffected.
   Fern uses Tailwind's class-based dark mode (html.dark), so we target that.
   We also keep data-theme selectors for broader compatibility. */
.landing {
  --font-main:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: 'Bagoss', 'Times New Roman', serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Light theme is the default — dev-product-feel cool whites */
  --bg: #ffffff;
  --bg-2: #f7f5f2;
  --ink: #1b1b1b;
  --ink-2: #5c5c5c;
  --ink-3: #8a8a8a;
  --line: #e9e9e9;
  --line-2: #dedede;
  --card: #ffffff;
  --card-2: #f7f5f2;
  --accent: #1f74b3;
  --accent-hov: #146eb8;
  --purple: #7d5bc9;
  /* Journey cards — neutral off-white surface, consistent across themes.
     Icons sit in the title ink color and shift to Deel purple on hover. */
  --journey-bg: #F7F5F2;
  --journey-ink: #1b1b1b;
  --journey-ink-2: #5c5c5c;
  --journey-ink-3: #8a8a8a;
  --journey-line: #e3ddd2;
  --journey-icon: #1b1b1b;
  --journey-icon-hover: #5938b7;
  --chip: #f2efeb;
  --focus: #1f74b3;
  --ai-grad: linear-gradient(135deg, #f57848 0%, #724ec9 55%, #1f74b3 100%);

  /* Code card (hero) — dark shell even in light mode */
  --code-bg: #0d0d0f;
  --code-ink: #e9e9ec;
  --code-dim: #8a8a95;
  --code-line: #22222a;
  --code-key: #c792ea;
  --code-str: #a5e8a1;
  --code-num: #f0a37a;
  --code-prop: #8bd4ff;
  --code-comment: #6b7280;
}

/* Dark theme — Fern toggles .dark on <html>; we also support data-theme */
html.dark .landing,
html[data-theme="dark"] .landing {
  --bg: #0f0f10;
  --bg-2: #161618;
  --ink: #ffffff;
  --ink-2: #b8b8be;
  --ink-3: #7d7d84;
  --line: #232326;
  --line-2: #2e2e33;
  --card: #17171a;
  --card-2: #1d1d21;
  --accent: #5aa8e6;
  --accent-hov: #7dbeee;
  --purple: #b79bff;
  /* Journey & task cards flip to a dark surface in dark mode so the text
     stays legible. Per-card hover accent colors are set inline on .journey.* */
  --journey-bg: #17171a;
  --journey-ink: #ffffff;
  --journey-ink-2: #b8b8be;
  --journey-ink-3: #7d7d84;
  --journey-line: #2e2e33;
  --journey-icon: #ffffff;
  --journey-icon-hover: #b79bff;
  --chip: #22222a;
  --code-bg: #0a0a0c;
  --code-ink: #e9e9ec;
  --code-line: #1f1f25;
}

/* System-level dark mode fallback — applies when the OS prefers dark AND
   Fern hasn't explicitly forced light mode. */
@media (prefers-color-scheme: dark) {

  html:not(.light):not([data-theme="light"]) .landing {
    --bg: #0f0f10;
    --bg-2: #161618;
    --ink: #ffffff;
    --ink-2: #b8b8be;
    --ink-3: #7d7d84;
    --line: #232326;
    --line-2: #2e2e33;
    --card: #17171a;
    --card-2: #1d1d21;
    --accent: #5aa8e6;
    --accent-hov: #7dbeee;
    --purple: #b79bff;
    --journey-bg: #17171a;
    --journey-ink: #ffffff;
    --journey-ink-2: #b8b8be;
    --journey-ink-3: #7d7d84;
    --journey-line: #2e2e33;
    --journey-icon: #ffffff;
    --journey-icon-hover: #b79bff;
    --chip: #22222a;
    --code-bg: #0a0a0c;
    --code-ink: #e9e9ec;
    --code-line: #1f1f25;
  }

}

/* =========================================================================
   Landing page — sections & layout
   Source: index-v3.html <style> block, ported with every selector scoped
   to .landing so we don't pollute the rest of the docs.
   Sections kept: hero, code card, section chrome, journeys, tasks, support,
   trusted, footer.
   Sections dropped: reference strip (removed per design notes), white-label
   track (not in shipping markup), rationale stripe (review-time scaffolding),
   tweaks panel (debug only).
   The topbar and the document footer are NOT ported here — we reuse the
   prev branch's <Header /> and <Footer /> components and their existing
   header-footer-styling.css.
   ========================================================================= */

.landing,
.landing * { box-sizing: border-box; }
.landing {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 180ms ease, color 180ms ease;
}
.landing a { color: inherit; text-decoration: none; }

/* ─── Layout container ─────────────────────────────────── */
.landing .page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── Hero ─────────────────────────────────────────────── */
.landing .hero {
  padding: 56px 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.landing .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.landing .hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #53a945;
  box-shadow: 0 0 0 4px color-mix(in oklab, #53a945 20%, transparent);
}
.landing .hero h1 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 52px; line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
  text-wrap: balance;
}
.landing .hero h1 em { font-style: normal; color: var(--ink-2); }
.landing .hero p.lede {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 0 24px;
}
.landing .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.landing .btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-main); font-weight: 500; font-size: 14px;
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  text-decoration: none;
}
.landing .btn .material-symbols-rounded { font-size: 18px; line-height: 1; }
/* MDX wraps inline button children in a <p>; reset it to inline-flex so the
   icon and label share a vertically-centered line box. */
.landing .btn > p { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.landing .btn-primary { background: var(--ink); color: var(--bg); }
.landing .btn-primary:hover { background: color-mix(in oklab, var(--ink) 88%, var(--accent)); }
.landing .btn-primary:focus-visible { background: color-mix(in oklab, var(--ink) 88%, var(--accent)); outline: none;
}
.landing .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.landing .btn-ghost:hover { background: var(--bg-2); }
.landing .btn-ghost:focus-visible { background: var(--bg-2); outline: none;
}

.landing .hero-meta {
  margin-top: 28px;
  display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
.landing .hero-meta span strong { color: var(--ink-2); font-weight: 500; }

/* ─── Code card (hero right) ──────────────────────────── */
.landing .hero-code-wrap {
  position: relative;
  width: 100%;
}
.landing .code-card {
  background: var(--code-bg);
  border: 1px solid var(--code-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.7;
  color: var(--code-ink);
}
.landing .code-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--code-line);
  background: color-mix(in oklab, var(--code-bg) 92%, white);
  font-size: 12px;
}
.landing .code-dots { display: flex; gap: 6px; margin-right: 8px; }
.landing .code-dots span { width: 10px; height: 10px; border-radius: 50%; background: #2a2a32; }
.landing .code-tabs { display: flex; gap: 2px; }
.landing .code-tab {
  font-family: var(--font-mono);
  font-size: 11.5px; padding: 5px 10px; border-radius: 6px;
  color: var(--code-dim); cursor: pointer;
  transition: background 150ms, color 150ms;
  border: 1px solid transparent;
}
.landing .code-tab:hover { color: var(--code-ink); }
.landing .code-tab:focus-visible { color: var(--code-ink); outline: none;
}

/* Radio-driven tab switching — hide radios, show matching panel */
.landing .code-radio { display: none; }
.landing .code-panel { display: none; }
.landing .hero-code-wrap #code-curl:checked ~ .code-card [data-tab="curl"],
.landing .hero-code-wrap #code-ts:checked ~ .code-card [data-tab="ts"],
.landing .hero-code-wrap #code-py:checked ~ .code-card [data-tab="py"],
.landing .hero-code-wrap #code-go:checked ~ .code-card [data-tab="go"],
.landing .hero-code-wrap #code-java:checked ~ .code-card [data-tab="java"],
.landing .hero-code-wrap #code-mcp:checked ~ .code-card [data-tab="mcp"] {
  color: var(--code-ink); background: #1a1a22; border-color: #26262f;
}
.landing .hero-code-wrap #code-curl:checked ~ .code-card [data-panel="curl"],
.landing .hero-code-wrap #code-ts:checked ~ .code-card [data-panel="ts"],
.landing .hero-code-wrap #code-py:checked ~ .code-card [data-panel="py"],
.landing .hero-code-wrap #code-go:checked ~ .code-card [data-panel="go"],
.landing .hero-code-wrap #code-java:checked ~ .code-card [data-panel="java"],
.landing .hero-code-wrap #code-mcp:checked ~ .code-card [data-panel="mcp"] {
  display: block;
}

.landing .code-body {
  padding: 14px 18px; white-space: pre;
  overflow-x: auto; overflow-y: auto;
  height: 340px;          /* fixed — prevents layout shift between tabs */
}
.landing .code-body::-webkit-scrollbar { height: 6px; width: 6px; }
.landing .code-body::-webkit-scrollbar-thumb { background: #26262f; border-radius: 4px; }
.landing .code-method { color: var(--code-key); font-weight: 600; }
.landing .code-path { color: var(--code-ink); }
.landing .code-str { color: var(--code-str); }
.landing .code-num { color: var(--code-num); }
.landing .code-prop { color: var(--code-prop); }
.landing .code-comment { color: var(--code-comment); }
.landing .code-dim { color: var(--code-dim); }
.landing .code-key { color: var(--code-key); }
.landing .code-divider {
  height: 1px; background: var(--code-line);
  margin: 6px -18px; border: none;
}
.landing .code-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-top: 1px solid var(--code-line);
  font-size: 11.5px; color: var(--code-dim);
  background: color-mix(in oklab, var(--code-bg) 92%, white);
}
.landing .code-foot .ok { color: #a5e8a1; }
.landing .code-foot .pill {
  font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 4px;
  background: #13131a; border: 1px solid #22222a; color: var(--code-ink);
}

/* ─── Section chrome ──────────────────────────────────── */
.landing .section { padding: 40px 0; }
.landing .section-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 32px; margin-bottom: 32px;
}
.landing .section-head h2 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 28px; line-height: 1.1;
  letter-spacing: -0.01em; margin: 0; color: var(--ink);
}
.landing .section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.landing .section-head p {
  margin: 0; color: var(--ink-2); font-size: 14px;
  max-width: 42ch;
}

/* ─── Primary journeys (3-up cards) ───────────────────── */
.landing .journeys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.landing .journeys-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
 .landing .journeys-3 { grid-template-columns: 1fr 1fr; } 
}
@media (max-width: 680px) {
 .landing .journeys, .landing .journeys-3 { grid-template-columns: 1fr; } 
}

.landing .journey {
  position: relative;
  border: 1px solid transparent;
  background: var(--journey-bg);
  color: var(--journey-ink);
  border-radius: 16px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 280px;
  overflow: hidden;
  transition: border-color 150ms, transform 150ms;
}
.landing .journey:hover { border-color: var(--journey-line); transform: translateY(-1px); }
.landing .journey:focus-visible { border-color: var(--journey-line); transform: translateY(-1px); outline: none;
}

/* Icon + product label sit on a flex row; title drops to the next line. */
.landing .journey-header {
  display: flex; align-items: center; gap: 10px;
}
.landing .journey-icon {
  flex-shrink: 0;
  font-size: 32px; line-height: 1;
  color: var(--journey-icon);
  transition: color 180ms, filter 220ms ease;
  font-variation-settings: 'FILL' 0, 'wght' 400;
}
.landing .journey:hover .journey-icon {
  color: var(--journey-icon-hover);
  /* Soft glow that follows the glyph outline rather than a hard square. */
  filter: drop-shadow(0 0 14px rgba(89, 56, 183, 0.45));
}
.landing .journey:focus-within .journey-icon {
  color: var(--journey-icon-hover);
  /* Soft glow that follows the glyph outline rather than a hard square. */
  filter: drop-shadow(0 0 14px rgba(89, 56, 183, 0.45)); outline: none;
}
.landing .journey-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
  color: var(--journey-ink-3);
}
.landing .journey .tag {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--journey-ink-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.landing .journey h2,
.landing .journey h3 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 20px; line-height: 1.2;
  margin: 0; letter-spacing: -0.005em; color: var(--journey-ink);
  max-width: 22ch;
}
.landing .journey p {
  margin: 0; color: var(--journey-ink-2);
  font-size: 14px; line-height: 1.55; font-weight: 400;
  max-width: 48ch;
}

/* Per-card hover accent — each journey card glows in its own colour family
   so the trio reads as related but distinct surfaces. */
.landing .journey.ai:hover       .journey-icon { color: #5938b7; filter: drop-shadow(0 0 14px rgba(89, 56, 183, 0.45)); }
.landing .journey.ai:focus-within .journey-icon { color: #5938b7; filter: drop-shadow(0 0 14px rgba(89, 56, 183, 0.45)); outline: none;
}
.landing .journey.partner:hover  .journey-icon { color: #2f7df0; filter: drop-shadow(0 0 16px rgba(47, 125, 240, 0.6)); }
.landing .journey.partner:focus-within .journey-icon { color: #2f7df0; filter: drop-shadow(0 0 16px rgba(47, 125, 240, 0.6)); outline: none;
}
.landing .journey.embedded:hover .journey-icon { color: #c0392b; filter: drop-shadow(0 0 14px rgba(192, 57, 43, 0.45)); }
.landing .journey.embedded:focus-within .journey-icon { color: #c0392b; filter: drop-shadow(0 0 14px rgba(192, 57, 43, 0.45)); outline: none;
}
.landing .journey.ai:hover       .journey-cta .material-symbols-rounded { color: #5938b7; }
.landing .journey.ai:focus-within .journey-cta .material-symbols-rounded { color: #5938b7; outline: none;
}
.landing .journey.partner:hover  .journey-cta .material-symbols-rounded { color: #2f7df0; }
.landing .journey.partner:focus-within .journey-cta .material-symbols-rounded { color: #2f7df0; outline: none;
}
.landing .journey.embedded:hover .journey-cta .material-symbols-rounded { color: #c0392b; }
.landing .journey.embedded:focus-within .journey-cta .material-symbols-rounded { color: #c0392b; outline: none;
}

/* Embedded card illustration — centred with padding, faded so text reads clearly.
   A radial mask fades the edges into the card background. */
.landing .journey.embedded .journey-diagram {
  position: absolute;
  inset: 24px;
  width: auto; height: auto;
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  margin: auto;
  object-fit: contain;
  opacity: 0.5;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}
.landing .journey.embedded > * { position: relative; z-index: 1; }
.landing .journey.embedded > .journey-diagram { position: absolute; z-index: 0; }

.landing .journey-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--journey-ink); font-weight: 500;
  padding-top: 14px; border-top: 1px solid var(--journey-line);
}
.landing .journey-cta .material-symbols-rounded {
  font-size: 16px; color: var(--journey-ink-3); margin-left: auto;
  transition: transform 180ms, color 180ms;
}
.landing .journey:hover .journey-cta .material-symbols-rounded {
  transform: translate(2px, -2px); color: var(--journey-icon-hover);
}
.landing .journey:focus-within .journey-cta .material-symbols-rounded {
  transform: translate(2px, -2px); color: var(--journey-icon-hover); outline: none;
}
/* ─── Product showcase (accordion + image) ───────────────────── */
.landing .showcase-radio { display: none; }

.landing .showcase {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  align-items: start;
  /* Fixed height prevents the task section below from bouncing when the
     accordion expands one item before contracting the previous one. */
  height: 400px;
  overflow: hidden;
}

/* Right — stacked images, crossfade on selection.
   All four source images share a ~1.16:1 ratio (1920×1653 / 1280×1102).
   We match that exactly with 64/55 so object-fit:cover shows the full
   image with zero clipping. */
.landing .showcase-image {
  position: relative;
  aspect-ratio: 64/55;
  border-radius: 12px;
  overflow: hidden;
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: start;
}
.landing .showcase-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

/* Left — accordion */
.landing .showcase-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-column: 1;
  grid-row: 1 / 6;
  align-self: start;
  border: none;
  background: none;
}
.landing .showcase-item {
  display: block;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  /* Kill any stray borders — no left bar, no horizontal indent on active. */
  border-left: none;
  border-right: none;
  border-top: none;
  outline: none;
  background: none;
}
.landing .showcase-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.landing .showcase-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.landing .showcase-item-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.landing .showcase-item-chevron {
  font-size: 22px;
  color: var(--ink-3);
  transition: transform 300ms ease, color 200ms;
  flex-shrink: 0;
}
.landing .showcase-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease, opacity 300ms ease;
  opacity: 0;
}
.landing .showcase-item-body p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
}

/* ── Radio-driven state: image crossfade ── */
.landing #sc-payroll:checked ~ .showcase-image #img-payroll,
.landing #sc-hire:checked    ~ .showcase-image #img-hire,
.landing #sc-mobility:checked ~ .showcase-image #img-mobility,
.landing #sc-it:checked      ~ .showcase-image #img-it {
  opacity: 1;
}

/* ── Radio-driven state: accordion expand + highlight ── */
.landing #sc-payroll:checked  ~ .showcase-accordion .showcase-item[data-for="payroll"]  .showcase-item-body,
.landing #sc-hire:checked     ~ .showcase-accordion .showcase-item[data-for="hire"]     .showcase-item-body,
.landing #sc-mobility:checked ~ .showcase-accordion .showcase-item[data-for="mobility"] .showcase-item-body,
.landing #sc-it:checked       ~ .showcase-accordion .showcase-item[data-for="it"]       .showcase-item-body {
  max-height: 120px;
  opacity: 1;
}

.landing #sc-payroll:checked  ~ .showcase-accordion .showcase-item[data-for="payroll"]  .showcase-item-chevron,
.landing #sc-hire:checked     ~ .showcase-accordion .showcase-item[data-for="hire"]     .showcase-item-chevron,
.landing #sc-mobility:checked ~ .showcase-accordion .showcase-item[data-for="mobility"] .showcase-item-chevron,
.landing #sc-it:checked       ~ .showcase-accordion .showcase-item[data-for="it"]       .showcase-item-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Active state is shown by the expanded body + chevron rotation only —
   no horizontal shift, no left accent bar. */

@media (max-width: 960px) {

  .landing .showcase {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .landing .showcase-image {
    grid-column: 1;
    grid-row: auto;
  }
  .landing .showcase-accordion {
    grid-column: 1;
    grid-row: auto;
  }

}

/* ─── Task grid ────────────────────────────────────────── */
.landing .task-rows {
  display: flex; flex-direction: column; gap: 40px;
}
.landing .task-row {
  display: flex; flex-direction: column; gap: 18px;
}
.landing .task-row-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 4px;
}
.landing .task-row-title {
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.landing .task-row .row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.landing .task {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  transition: border-color 150ms, transform 150ms;
  text-decoration: none; color: inherit;
}
.landing .task:hover { border-color: var(--line-2); transform: translateY(-1px); }
.landing .task:focus-visible { border-color: var(--line-2); transform: translateY(-1px); outline: none;
}
.landing .task .thumb {
  aspect-ratio: 16/10; width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); overflow: hidden;
}
.landing .task .thumb svg { width: 100%; height: 100%; display: block; }
.landing .task .thumb img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center; padding: 4px;
}
.landing .task h4 {
  font-family: var(--font-main); font-weight: 500;
  font-size: 16px; line-height: 1.35;
  margin: 0; color: var(--journey-ink);
  letter-spacing: -0.005em;
}
.landing .task p {
  margin: 0; color: var(--journey-ink-2);
  font-size: 14px; line-height: 1.55; font-weight: 400;
}
.landing .task .task-cta {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: nowrap; white-space: nowrap;
  width: max-content;
  font-size: 13px; font-weight: 500; color: var(--journey-ink);
}
.landing .task:hover .task-cta { text-decoration: underline; }
.landing .task:focus-within .task-cta { text-decoration: underline; outline: none;
}
.landing .task .task-cta .material-symbols-rounded {
  font-size: 15px; color: var(--journey-ink);
  margin-left: 0;
}

/* ─── Support strip ───────────────────────────────────── */
.landing .support {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.landing .support-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 150ms, transform 150ms;
}
.landing .support-card:hover {
  border-color: var(--line-2); transform: translateY(-1px);
}
.landing .support-card:focus-visible {
  border-color: var(--line-2); transform: translateY(-1px); outline: none;
}
.landing .support-card .material-symbols-rounded {
  font-size: 22px; color: var(--ink); margin-bottom: 4px;
}
.landing .support-card h4 {
  margin: 4px 0 0; font-weight: 500; font-size: 15px; color: var(--ink);
}
.landing .support-card p {
  margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
}

/* ─── Trusted-by (logo scroller) ──────────────────────── */
.landing .trusted-section { padding-top: 24px; }
.landing .trusted-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  text-align: center; margin: 0 0 28px;
}
.landing .trusted {
  overflow: hidden; padding: 8px 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.landing .trusted-track {
  display: flex; gap: 72px;
  width: max-content;
  animation: landing-scroll-logos 42s linear infinite;
  align-items: center;
  opacity: 0.7;
}
.landing .trusted-track img {
  height: 28px;
  width: auto;
  display: block;
  filter: grayscale(1) opacity(0.85);
}
html.dark .landing .trusted-track img,
html[data-theme="dark"] .landing .trusted-track img {
  filter: grayscale(1) brightness(0) invert(1) opacity(0.7);
}
@media (prefers-color-scheme: dark) {

  html:not(.light):not([data-theme="light"]) .landing .trusted-track img {
    filter: grayscale(1) brightness(0) invert(1) opacity(0.7);
  }

}
@keyframes landing-scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {

  .landing .trusted-track { animation: none; }

}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 960px) {

  .landing .page { padding-left: 20px; padding-right: 20px; }
  .landing .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .landing .hero h1 { font-size: 38px; }
  .landing .journeys { grid-template-columns: 1fr; }
  .landing .task-row .row { grid-template-columns: 1fr; }
  .landing .support { grid-template-columns: 1fr; }
  .landing .journey-diagram { display: none; }

}

/* =========================================================================
   Landing page — Fern app shell overrides
   These rules ONLY take effect on pages that include a .landing wrapper —
   i.e. only the custom-layout MDX at /home. Fern's docs pages are unaffected.
   ========================================================================= */

/* ─── Announcement banner: accessible inline <code> ────────────────────────
   Fern's default code-block style (light bg) is unreadable against the banner's
   dark navy (light mode, #1d3476) or purple (dark mode, #5938b7) background
   when the banner text is white.

   Light mode fix: rgba(0,0,0,0.22) over #1d3476 → effective ~#17295c → 14:1 on white (AAA)
   Dark mode fix:  rgba(0,0,0,0.30) over #5938b7 → effective ~#3e2780 → 11:1 on white (AAA)

   Targets the three most likely Fern announcement selectors; if Fern changes
   its DOM, inspect the rendered <code> element and update the selectors below. */

.fern-announcement code,
[data-announcement] code,
#fern-announcement code {
  background-color: rgba(0, 0, 0, 0.22) !important;
  color: #ffffff !important;
  border-radius: 3px;
  padding: 0.1em 0.375em;
}

html.dark .fern-announcement code,
html.dark [data-announcement] code,
html.dark #fern-announcement code,
html[data-theme="dark"] .fern-announcement code,
html[data-theme="dark"] [data-announcement] code,
html[data-theme="dark"] #fern-announcement code {
  background-color: rgba(0, 0, 0, 0.30) !important;
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {

  :root:not(.light):not([data-theme="light"]) .fern-announcement code,
  :root:not(.light):not([data-theme="light"]) [data-announcement] code,
  :root:not(.light):not([data-theme="light"]) #fern-announcement code {
    background-color: rgba(0, 0, 0, 0.30) !important;
    color: #ffffff !important;
  }

}

/* Hide Fern's default header on the landing route. We render our own
   <Header /> component (from prev branch) and don't want both stacked. */
body:has(.landing) #fern-header { display: none !important; }

/* Kill the top padding Fern reserves for its sticky header — we don't have one. */
body:has(.landing) { padding-top: 0 !important; }

/* The custom-layout MDX is wrapped by Fern in some defaults that constrain
   width and add gutters. Nuke them inside the landing wrapper so .page can
   manage its own gutters. */
body:has(.landing) main,
body:has(.landing) [data-fern-content] {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Disable Fern's default image lightbox/zoom on the landing page.
   Fern wraps images in interactive containers — kill pointer events
   and any zoom-cursor styling so images are purely decorative here. */
.landing img {
  cursor: default !important;
  pointer-events: none !important;
}
.landing [data-rmiz],
.landing [data-rmiz-wrap],
.landing [data-rmiz-overlay],
.landing [data-rmiz-btn-unzoom],
.landing button[aria-label="Zoom image"] {
  pointer-events: none !important;
  cursor: default !important;
}
.landing [data-rmiz-modal-overlay] {
  display: none !important;
}

/* =========================================================================
   Header & Footer — theme-aware tokens
   Scoped via body:has(.landing) so only the landing page is affected.
   Flips automatically with Fern's data-theme toggle AND prefers-color-scheme.
   ========================================================================= */

:root {
  --hf-bg: #ffffff;
  --hf-ink: #1b1b1b;
  --hf-ink-70: rgba(0, 0, 0, 0.7);
  --hf-ink-50: rgba(0, 0, 0, 0.5);
  --hf-ink-40: rgba(0, 0, 0, 0.4);
  --hf-overlay-08: rgba(0, 0, 0, 0.05);
  --hf-overlay-10: rgba(0, 0, 0, 0.08);
  --hf-overlay-15: rgba(0, 0, 0, 0.12);
  --hf-border: rgba(0, 0, 0, 0.1);
  --hf-border-hover: rgba(0, 0, 0, 0.25);
  --hf-footer-bg: #f5f5f5;
}

html.dark,
html[data-theme="dark"] {
  --hf-bg: #1B1B1B;
  --hf-ink: #ffffff;
  --hf-ink-70: rgba(255, 255, 255, 0.7);
  --hf-ink-50: rgba(255, 255, 255, 0.5);
  --hf-ink-40: rgba(255, 255, 255, 0.4);
  --hf-overlay-08: rgba(255, 255, 255, 0.08);
  --hf-overlay-10: rgba(255, 255, 255, 0.1);
  --hf-overlay-15: rgba(255, 255, 255, 0.15);
  --hf-border: rgba(255, 255, 255, 0.1);
  --hf-border-hover: rgba(255, 255, 255, 0.3);
  --hf-footer-bg: #1a1a1a;
}

@media (prefers-color-scheme: dark) {

  :root:not(.light):not([data-theme="light"]) {
    --hf-bg: #1B1B1B;
    --hf-ink: #ffffff;
    --hf-ink-70: rgba(255, 255, 255, 0.7);
    --hf-ink-50: rgba(255, 255, 255, 0.5);
    --hf-ink-40: rgba(255, 255, 255, 0.4);
    --hf-overlay-08: rgba(255, 255, 255, 0.08);
    --hf-overlay-10: rgba(255, 255, 255, 0.1);
    --hf-overlay-15: rgba(255, 255, 255, 0.15);
    --hf-border: rgba(255, 255, 255, 0.1);
    --hf-border-hover: rgba(255, 255, 255, 0.3);
    --hf-footer-bg: #1a1a1a;
  }

}


/* ─── Fern built-with-fern overrides ─────────────────────── */

#builtwithfern * {
  display: none !important;
}

#builtwithfern-custom {
  display: inline-flex !important;
  margin: 0 !important;
}

.builtwithfern-text {
  color: var(--hf-ink-50);
}

@media (max-width: 768px) {

  #builtwithfern-custom {
    align-items: start !important;
    justify-content: start !important;
    margin-left: 0 !important;
  }

}


/* ─── Footer ─────────────────────────────────────────────── */

.footer {
  background: var(--hf-footer-bg);
  padding: 0;
  margin-top: 4rem;
}

.footer-nav-wrapper {
  width: 100%;
  border-bottom: 1px solid var(--hf-border);
}

.footer-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0;
}

.footer-nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  flex: 1;
}

.footer-nav-link {
  font-size: 0.875rem;
  color: var(--hf-ink-70);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-nav-link:hover {
  color: var(--hf-ink);
}
.footer-nav-link:focus-visible {
  color: var(--hf-ink); outline: none;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.5rem;
  background: var(--hf-overlay-15);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hf-ink-70);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  gap: 2rem;
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--hf-ink-50);
}

.footer-builtwithfern {
  flex: 0 0 auto;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-legal-link {
  font-size: 0.875rem;
  color: var(--hf-ink-50);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.footer-legal-link:hover {
  color: var(--hf-ink-70);
}
.footer-legal-link:focus-visible {
  color: var(--hf-ink-70); outline: none;
}

/* Footer responsive */
@media (max-width: 1024px) {

  .footer-nav-links {
    gap: 1.5rem;
  }

  .footer-legal-links {
    gap: 1.5rem;
  }

}

@media (max-width: 1200px) {

  .footer-container {
    padding: 0 1rem;
  }

  .footer-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .footer-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .footer-builtwithfern {
    order: 2;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-copyright {
    order: 1;
  }

  .footer-legal-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    order: 2;
  }

}

@media (max-width: 480px) {

  .footer-container {
    padding: 0 10px;
  }

  .footer-nav {
    padding: 1.5rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .footer-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .footer-builtwithfern {
    order: 2;
  }

  .footer-bottom {
    padding: 1rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-copyright {
    order: 3;
  }

  .footer-legal-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    order: 1;
  }

  .footer-nav-link,
  .footer-legal-link,
  .footer-copyright {
    font-size: 0.8rem;
  }

}


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

.header {
  width: 100%;
  background-color: var(--hf-bg);
  color: var(--hf-ink);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hf-border);
}

.header-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--hf-ink);
}

.header-logo-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hf-ink);
}

.header-version {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--hf-ink-50);
  cursor: pointer;
}

.header-version-arrow {
  color: var(--hf-ink-50);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}

.header-nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hf-ink-70);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 24px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.header-nav-link:hover {
  color: var(--hf-ink);
  background: var(--hf-overlay-08);
}
.header-nav-link:focus-visible {
  color: var(--hf-ink);
  background: var(--hf-overlay-08); outline: none;
}

.header-nav-link-active {
  color: var(--hf-ink);
  background: var(--hf-overlay-10);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* Theme toggle — bare icon button matching Fern's native toggle style.
   No bounding box, no background — just an icon that shifts on hover. */
.header-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--hf-ink-70);
  cursor: pointer;
  transition: color 150ms ease;
  line-height: 0;
}

.header-theme-toggle:hover {
  color: var(--hf-ink);
}

.header-theme-toggle:focus-visible {
  outline: 2px solid var(--hf-ink-50);
  outline-offset: 2px;
}

.header-theme-toggle svg {
  display: block;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--hf-overlay-08);
  border: 1px solid var(--hf-border);
  border-radius: 6px;
  color: var(--hf-ink-50);
  cursor: pointer;
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}

.header-search:hover {
  border-color: var(--hf-border-hover);
}
.header-search:focus-visible {
  border-color: var(--hf-border-hover); outline: none;
}

.header-search svg {
  color: var(--hf-ink-50);
  flex-shrink: 0;
}

.header-search-key {
  font-size: 0.75rem;
  color: var(--hf-ink-40);
  font-family: monospace;
  padding: 0.1rem 0.3rem;
  background: var(--hf-overlay-10);
  border-radius: 3px;
}

.header-login-btn {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hf-ink);
  text-decoration: none;
  padding: 0.5rem 1rem;
  background: var(--hf-overlay-10);
  border: 1px solid var(--hf-border-hover);
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.header-login-btn:hover {
  background: var(--hf-overlay-15);
  border-color: var(--hf-ink-50);
}
.header-login-btn:focus-visible {
  background: var(--hf-overlay-15);
  border-color: var(--hf-ink-50); outline: none;
}

@media (max-width: 768px) {

  .header-container {
    padding: 0 20px;
    height: 56px;
  }

  .header-version {
    display: none;
  }

  .header-nav {
    display: none;
  }

  .header-search-key {
    display: none;
  }

}