/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --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);
}


.light, :root {
  --accent-1: #f3f3f6;
  --accent-2: #eeeef6;
  --accent-3: #e6e6f6;
  --accent-4: #dbdafb;
  --accent-5: #cfcefe;
  --accent-6: #c1befd;
  --accent-7: #ada9f6;
  --accent-8: #948af0;
  --accent-9: #4900b7;
  --accent-10: #5727cc;
  --accent-11: #5935c8;
  --accent-12: #30216b;

  --accent-a1: #66ad2207;
  --accent-a2: #1243630a;
  --accent-a3: #0721a712;
  --accent-a4: #0108f41d;
  --accent-a5: #bbbbffaa;
  --accent-a6: #5550ff55;
  --accent-a7: #0b03e950;
  --accent-a8: #1502e170;
  --accent-a9: #4900b7;
  --accent-a10: #3901c3d7;
  --accent-a11: #2e00bac8;
  --accent-a12: #110054dd;

  --accent-contrast: #fff;
  --accent-surface: #ececf5cc;
  --accent-indicator: #4900b7;
  --accent-track: #4900b7;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(96.5% 0.0032 286.3);
      --accent-2: oklch(95.1% 0.0114 286.3);
      --accent-3: oklch(92.9% 0.0222 286.3);
      --accent-4: oklch(90% 0.045 286.3);
      --accent-5: oklch(86.7% 0.0667 286.3);
      --accent-6: oklch(82.5% 0.0874 286.3);
      --accent-7: oklch(76.7% 0.1106 286.3);
      --accent-8: oklch(68.7% 0.1472 286.3);
      --accent-9: oklch(39.5% 0.2287 286.3);
      --accent-10: oklch(45.5% 0.2287 286.3);
      --accent-11: oklch(46.9% 0.2113 286.3);
      --accent-12: oklch(31.4% 0.1226 286.3);

      --accent-a1: color(display-p3 0.1843 0.5725 0.0078 / 0.02);
      --accent-a2: color(display-p3 0.0157 0.2196 0.349 / 0.037);
      --accent-a3: color(display-p3 0.0039 0.1098 0.6471 / 0.069);
      --accent-a4: color(display-p3 0.0078 0.0353 0.8824 / 0.114);
      --accent-a5: color(display-p3 0.0039 0.0196 0.9608 / 0.162);
      --accent-a6: color(display-p3 0.0118 0.0039 0.9294 / 0.225);
      --accent-a7: color(display-p3 0.0235 0.0039 0.8471 / 0.311);
      --accent-a8: color(display-p3 0.0627 0.0039 0.8235 / 0.437);
      --accent-a9: color(display-p3 0.2392 0 0.6824 / 0.972);
      --accent-a10: color(display-p3 0.1843 0 0.7255 / 0.829);
      --accent-a11: color(display-p3 0.1451 0 0.6863 / 0.776);
      --accent-a12: color(display-p3 0.0549 0 0.3098 / 0.862);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9255 0.9255 0.9608 / 0.8);
      --accent-indicator: oklch(39.5% 0.2287 286.3);
      --accent-track: oklch(39.5% 0.2287 286.3);
    }
  }
}


.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: #180f1a;
  --accent-2: #221025;
  --accent-3: #390f40;
  --accent-4: #4d0358;
  --accent-5: #5a0b66;
  --accent-6: #681b74;
  --accent-7: #802b8e;
  --accent-8: #a338b5;
  --accent-9: #e439ff;
  --accent-10: #d725f2;
  --accent-11: #f880ff;
  --accent-12: #fccdff;

  --accent-a1: #c0006e03;
  --accent-a2: #f111f40e;
  --accent-a3: #e10bfc2c;
  --accent-a4: #df00ff46;
  --accent-a5: #df02fd56;
  --accent-a6: #e62cff65;
  --accent-a7: #e645ff82;
  --accent-a8: #e64bffad;
  --accent-a9: #e439ff;
  --accent-a10: #e226fff1;
  --accent-a11: #f880ff;
  --accent-a12: #fccdff;

  --accent-contrast: #fff;
  --accent-surface: #2e103180;
  --accent-indicator: #e439ff;
  --accent-track: #e439ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(18.5% 0.0274 321.7);
      --accent-2: oklch(20.9% 0.0488 321.7);
      --accent-3: oklch(26.5% 0.0969 321.7);
      --accent-4: oklch(30.5% 0.1407 321.7);
      --accent-5: oklch(34.2% 0.1516 321.7);
      --accent-6: oklch(38.9% 0.1544 321.7);
      --accent-7: oklch(45.7% 0.1695 321.7);
      --accent-8: oklch(54.5% 0.2039 321.7);
      --accent-9: oklch(68.2% 0.288 321.7);
      --accent-10: oklch(64.3% 0.288 321.7);
      --accent-11: oklch(78.6% 0.2475 321.7);
      --accent-12: oklch(90.6% 0.087 321.7);

      --accent-a1: color(display-p3 0.9569 0 0.5333 / 0.009);
      --accent-a2: color(display-p3 0.9137 0.1412 1 / 0.052);
      --accent-a3: color(display-p3 0.8196 0.1137 1 / 0.165);
      --accent-a4: color(display-p3 0.8078 0 0.9961 / 0.265);
      --accent-a5: color(display-p3 0.8314 0.102 1 / 0.321);
      --accent-a6: color(display-p3 0.8549 0.2392 1 / 0.381);
      --accent-a7: color(display-p3 0.8588 0.3294 1 / 0.49);
      --accent-a8: color(display-p3 0.8627 0.3412 1 / 0.654);
      --accent-a9: color(display-p3 0.8471 0.2902 1 / 0.966);
      --accent-a10: color(display-p3 0.8431 0.2431 1 / 0.91);
      --accent-a11: color(display-p3 0.9333 0.5412 1 / 0.97);
      --accent-a12: color(display-p3 0.9725 0.8235 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1647 0.0706 0.1882 / 0.5);
      --accent-indicator: oklch(68.2% 0.288 321.7);
      --accent-track: oklch(68.2% 0.288 321.7);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(73, 0, 183, 1);
  --background: rgba(247, 245, 252, 1);
  --border: rgba(228, 222, 242, 1);
  --sidebar-background: rgba(241, 237, 250, 1);
  --header-background: rgba(247, 245, 252, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #f7f5fc;
}

.dark {
  color-scheme: dark;
  --accent: rgba(228, 57, 255, 1);
  --background: rgba(22, 16, 25, 1);
  --border: rgba(42, 35, 51, 1);
  --sidebar-background: rgba(27, 20, 32, 1);
  --header-background: rgba(22, 16, 25, 1);
  --card-background: rgba(33, 26, 43, 1);
  --theme-color: #161019;
}

/* Product switcher: the built-in icon sizing (size-5, ~50% of the 56px slot)
   is tuned for small Font Awesome glyphs. Our product marks are full-bleed
   logos, so size them closer to the slot and make sure they're centered. */
.fern-selection-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Direct child only (the size-5 wrapper span/img) — letting its own nested
   svg (width/height 100% already) fill it, instead of resizing both levels
   independently, which caused inconsistent/clipped intermediate layouts. */
.fern-selection-item-icon > .fern-file-icon {
  width: 85% !important;
  height: 85% !important;
  max-width: none !important;
  max-height: none !important;
  flex-shrink: 0;
}

/* Custom sitewide footer, injected by custom.js (Fern's docs.yml footer-links
   only renders a small icon row, not a full multi-column footer). Lives
   outside the sidebar/content layout so it spans full width on every page. */
.ixo-footer {
  background: #20232B;
  color: #C7CAD1;
  padding: 48px 48px 32px;
}
.ixo-footer-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 48px;
}
.ixo-footer-col {
  display: flex;
  flex-direction: column;
}
.ixo-footer-heading {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.ixo-footer-col a {
  color: #AEB2BC;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.ixo-footer-col a:hover {
  color: #FFFFFF;
}
.ixo-footer-col a:focus-visible {
  color: #FFFFFF; outline: none;
}
.ixo-footer-col a svg {
  opacity: 0.6;
  flex-shrink: 0;
}
.ixo-footer-bottom {
  max-width: 1360px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 13px;
  color: #8A8E99;
}
@media (max-width: 640px) {

  .ixo-footer {
    padding: 40px 20px 28px;
  }
  .ixo-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

}

/* Landing page design tokens (from the Aether design system used to design the
   IXOPAY landing page). Font families intentionally omitted — falls back to
   whatever the site already uses. Scoped by usage: these variables are only
   referenced by fern/pages/landing.mdx's inline styles, so they don't affect
   any other page. */
:root {
  --grey-00:#FFFFFF; --grey-05:#F9F9F9; --grey-10:#F2F2F2; --grey-20:#EDEDED;
  --grey-30:#E6E6E6; --grey-35:#C0C0C0; --grey-40:#A6A6A6; --grey-45:#949494;
  --grey-50:#6B6B6B; --grey-55:#525252; --grey-60:#3B3B3B; --grey-70:#303030;
  --grey-80:#2B2B2B; --grey-85:#262626; --grey-90:#212121;

  --orange-10:#FFF0EA; --orange-20:#FFD2BF; --orange-30:#FFB294; --orange-40:#FF9168;
  --orange-50:#FF6C37; --orange-60:#ED5B2A; --orange-70:#D03E0A; --orange-80:#A22C06; --orange-90:#602B1F;

  --purple-10:#F6F2FF; --purple-20:#DED2F9; --purple-30:#C1A9EE; --purple-40:#A07FDD;
  --purple-50:#7E57C9; --purple-60:#6546AB; --purple-70:#50388A; --purple-80:#3D2C66; --purple-90:#2A1F45;

  --teal-10:#ECFFFD; --teal-20:#C9F4F0; --teal-30:#96E0DA; --teal-40:#63CDC6;
  --teal-50:#36B6AE; --teal-60:#299A94; --teal-70:#217D78; --teal-80:#1A5F5B; --teal-90:#134543;

  --spacing-zero:0px; --spacing-xxs:2px; --spacing-xs:4px; --spacing-s:6px;
  --spacing-m:8px; --spacing-l:12px; --spacing-xl:16px; --spacing-xxl:24px;
  --spacing-xxxl:32px; --spacing-xxxxl:48px;

  --text-family-default: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --text-family-code: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --text-size-xs:10px; --text-size-s:11px; --text-size-m:12px; --text-size-l:13px;
  --text-size-xl:15px; --text-size-xxl:18px; --text-size-xxxl:21px;

  --line-height-xs:12px; --line-height-s:16px; --line-height-m:20px; --line-height-l:24px;
  --line-height-xl:28px; --line-height-xxl:32px; --line-height-xxxl:40px;

  --text-weight-regular:400; --text-weight-medium:500; --text-weight-bold:600;

  --border-width-s:0.5px; --border-width-default:1px; --border-width-l:2px; --border-width-xl:4px;
  --border-radius-xs:2px; --border-radius-s:4px; --border-radius-default:6px;
  --border-radius-m:8px; --border-radius-l:12px; --border-radius-xl:16px; --border-radius-max:50vh;

  --content-color-primary:var(--grey-90); --content-color-secondary:var(--grey-50);
  --content-color-tertiary:var(--grey-40); --content-color-link:#2F67CC;

  --background-color-primary:var(--grey-00); --background-color-secondary:var(--grey-05);
  --background-color-brand:var(--orange-10);

  --border-color-default:var(--grey-20);

  --highlight-background-color-primary:var(--grey-20);

}

/* The hero's outlined "Read the docs" button sits on a dark gradient, but
   Fern's default outlined-button styling is tuned for a light background —
   override it locally so the text/border stay legible there. */
.ixo-landing .fern-button.outlined {
  color: var(--grey-00);
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.ixo-landing .fern-button.outlined:hover {
  background: rgba(255, 255, 255, 0.08);
}
.ixo-landing .fern-button.outlined:focus-visible {
  background: rgba(255, 255, 255, 0.08); outline: none;
}

/* Card row: same max-width + horizontal padding as the hero's inner content
   (fern/pages/landing.mdx), so the cards line up with the hero above them
   instead of running edge-to-edge. */
.ixo-landing-cards {
  max-width: 1360px;
  margin: 0 auto;
  padding: 64px 48px 96px;
}

/* Icon badge — a colored square behind the card icon, matching the design. */
.ixo-landing-cards .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  padding: 9px;
  border-radius: var(--border-radius-default);
  background: var(--background-color-brand);
  box-sizing: border-box;
}

/* Sub-links inside each card, styled as rows (background chip + hover +
   trailing chevron) instead of a plain bulleted list. */
.ixo-landing-cards .fern-card ul {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ixo-landing-cards .fern-card ul > li {
  padding: 0;
  border-radius: var(--border-radius-s);
  background: var(--background-color-secondary);
  transition: background 0.15s ease;
}
.ixo-landing-cards .fern-card ul > li::before {
  content: none !important;
}
.ixo-landing-cards .fern-card ul > li:hover {
  background: var(--highlight-background-color-primary);
}
.ixo-landing-cards .fern-card ul > li:focus-visible {
  background: var(--highlight-background-color-primary); outline: none;
}
.ixo-landing-cards .fern-card ul > li a,
.ixo-landing-cards .fern-card ul > li .fern-mdx-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--content-color-primary);
  font-weight: var(--text-weight-medium);
  text-decoration: none;
}
.ixo-landing-cards .fern-card ul > li a::after,
.ixo-landing-cards .fern-card ul > li .fern-mdx-link::after {
  content: "\203A";
  color: var(--content-color-tertiary);
  margin-left: 8px;
}

/* Hero terminal: fully custom (not a Fern code block) so it can be animated
   by custom.js — a typed-command + printed-output loop (install the CLI,
   check its version, run a command). Mac-style window-control dots drawn as
   three radial-gradient circles on one pseudo-element, same technique as
   before, now scoped to our own markup instead of Fern's code-block DOM. */
.ixo-term {
  position: relative;
  background: #1e1e1e;
  border-radius: var(--border-radius-l);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.65), 0 0 90px -20px rgba(255, 108, 55, 0.35);
  overflow: hidden;
}
.ixo-term-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  background: #2b2b2b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ixo-term-dots {
  display: inline-block;
  width: 54px;
  height: 13px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 6.3px at 6.3px 6.3px, #ff5f56 100%, transparent 100%),
    radial-gradient(circle 6.3px at 27px 6.3px, #ffbd2e 100%, transparent 100%),
    radial-gradient(circle 6.3px at 47.7px 6.3px, #27c93f 100%, transparent 100%);
}
.ixo-term-title {
  font-family: var(--text-family-code);
  font-size: 13px;
  color: var(--grey-40);
}
.ixo-term-body {
  margin: 0;
  padding: 25px 23px;
  font-family: var(--text-family-code);
  font-size: 14px;
  line-height: 1.7;
  color: #d4d4d4;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 368px;
  max-height: 483px;
  overflow: auto;
}
.ixo-term-body .term-line {
  min-height: 1.7em;
}
.ixo-term-body .term-prompt {
  color: #6a9955;
  margin-right: 7px;
  user-select: none;
}
.ixo-term-body .term-cursor {
  display: inline-block;
  width: 8px;
  height: 17px;
  background: #d4d4d4;
  margin-left: 2px;
  vertical-align: -3px;
  animation: ixo-term-blink 1s step-end infinite;
}
@keyframes ixo-term-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The hero's 2-column grid and the terminal's min-height were never given a
   mobile fallback, so the terminal overlapped the heading text below ~760px.
   !important beats the grid/min-height values set inline in landing.mdx. */
@media (max-width: 760px) {

  .ixo-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ixo-hero-visual {
    order: 2;
  }
  .ixo-term-body {
    min-height: 253px !important;
  }

}

/* Scale the CTA buttons alongside the rest of the hero (+15%: 40px/16px ->
   ~46px/18px). Scoped to the hero so it doesn't affect buttons elsewhere. */
.ixo-hero-ctas .fern-button.large {
  height: 46px;
  font-size: 18px;
  padding-left: 18px;
  padding-right: 18px;
}

/* The package name in the hero terminal's install line is a live link —
   for now to the CLI repo, eventually to its package-manager listing. */
.ixo-term-body .term-pkg-link {
  color: #3dd68c;
  text-decoration: none;
  cursor: pointer;
}
.ixo-term-body .term-pkg-link:hover {
  text-decoration: underline;
}
.ixo-term-body .term-pkg-link:focus-visible {
  text-decoration: underline; outline: none;
}