/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 1024px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 26px;
  --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: #fbfdff;
  --accent-2: #f5f9ff;
  --accent-3: #eaf3fe;
  --accent-4: #dbecff;
  --accent-5: #cae2ff;
  --accent-6: #b6d5fb;
  --accent-7: #9dc4f4;
  --accent-8: #77adec;
  --accent-9: #006fcf;
  --accent-10: #0061bf;
  --accent-11: #0872d2;
  --accent-12: #0c345e;

  --accent-a1: #0080ff04;
  --accent-a2: #0066ff0a;
  --accent-a3: #006ef315;
  --accent-a4: #0079ff24;
  --accent-a5: #0074ff35;
  --accent-a6: #006df249;
  --accent-a7: #0066e362;
  --accent-a8: #0066dc88;
  --accent-a9: #006fcf;
  --accent-a10: #0061bf;
  --accent-a11: #006dd1f7;
  --accent-a12: #002a56f3;

  --accent-contrast: #fff;
  --accent-surface: #f3f8ffcc;
  --accent-indicator: #006fcf;
  --accent-track: #006fcf;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0028 253.5);
      --accent-2: oklch(98.2% 0.0085 253.5);
      --accent-3: oklch(96% 0.0177 253.5);
      --accent-4: oklch(93.7% 0.0332 253.5);
      --accent-5: oklch(90.6% 0.0481 253.5);
      --accent-6: oklch(86.4% 0.0621 253.5);
      --accent-7: oklch(80.9% 0.0797 253.5);
      --accent-8: oklch(73.4% 0.1088 253.5);
      --accent-9: oklch(54.4% 0.1704 253.5);
      --accent-10: oklch(49.7% 0.1704 253.5);
      --accent-11: oklch(55.4% 0.1704 253.5);
      --accent-12: oklch(32.3% 0.0869 253.5);

      --accent-a1: color(display-p3 0.0235 0.5137 1 / 0.016);
      --accent-a2: color(display-p3 0.0235 0.349 0.8941 / 0.036);
      --accent-a3: color(display-p3 0.0078 0.3725 0.898 / 0.075);
      --accent-a4: color(display-p3 0.0078 0.4 0.9412 / 0.13);
      --accent-a5: color(display-p3 0.0078 0.3804 0.9412 / 0.189);
      --accent-a6: color(display-p3 0.0039 0.3608 0.898 / 0.263);
      --accent-a7: color(display-p3 0.0039 0.3373 0.8353 / 0.353);
      --accent-a8: color(display-p3 0.0039 0.3333 0.8078 / 0.487);
      --accent-a9: color(display-p3 0 0.298 0.7373 / 0.816);
      --accent-a10: color(display-p3 0 0.2549 0.6745 / 0.844);
      --accent-a11: color(display-p3 0 0.302 0.7451 / 0.804);
      --accent-a12: color(display-p3 0 0.1176 0.2902 / 0.906);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9725 0.9961 / 0.8);
      --accent-indicator: oklch(54.4% 0.1704 253.5);
      --accent-track: oklch(54.4% 0.1704 253.5);
    }
  }
}


.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: #050c17;
  --accent-2: #0e1726;
  --accent-3: #0d254b;
  --accent-4: #072f67;
  --accent-5: #0f3b7b;
  --accent-6: #1a488d;
  --accent-7: #2557a3;
  --accent-8: #2c68c2;
  --accent-9: #6ca6ff;
  --accent-10: #619af2;
  --accent-11: #7cb5ff;
  --accent-12: #cce2ff;

  --accent-a1: #0028f209;
  --accent-a2: #2a86f919;
  --accent-a3: #1373ff40;
  --accent-a4: #016dfe5e;
  --accent-a5: #1476ff73;
  --accent-a6: #2880ff86;
  --accent-a7: #3586fe9e;
  --accent-a8: #3787febf;
  --accent-a9: #6ca6ff;
  --accent-a10: #65a1fef2;
  --accent-a11: #7cb5ff;
  --accent-a12: #cce2ff;

  --accent-contrast: #fff;
  --accent-surface: #11233d80;
  --accent-indicator: #6ca6ff;
  --accent-track: #6ca6ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(15.2% 0.0282 258.7);
      --accent-2: oklch(20.5% 0.0331 258.7);
      --accent-3: oklch(27% 0.0757 258.7);
      --accent-4: oklch(31.6% 0.1085 258.7);
      --accent-5: oklch(36.3% 0.119 258.7);
      --accent-6: oklch(41.1% 0.1245 258.7);
      --accent-7: oklch(46.6% 0.1347 258.7);
      --accent-8: oklch(52.7% 0.1548 258.7);
      --accent-9: oklch(72.4% 0.1439 258.7);
      --accent-10: oklch(68.8% 0.1439 258.7);
      --accent-11: oklch(77.1% 0.1439 258.7);
      --accent-12: oklch(90.9% 0.0524 258.7);

      --accent-a1: color(display-p3 0 0.1765 0.9765 / 0.03);
      --accent-a2: color(display-p3 0.2588 0.5569 1 / 0.092);
      --accent-a3: color(display-p3 0.1765 0.4588 1 / 0.238);
      --accent-a4: color(display-p3 0.1451 0.4392 1 / 0.35);
      --accent-a5: color(display-p3 0.2 0.4706 1 / 0.434);
      --accent-a6: color(display-p3 0.2627 0.5098 1 / 0.505);
      --accent-a7: color(display-p3 0.302 0.5373 1 / 0.596);
      --accent-a8: color(display-p3 0.3098 0.5451 1 / 0.721);
      --accent-a9: color(display-p3 0.4902 0.6627 1 / 0.971);
      --accent-a10: color(display-p3 0.4667 0.651 1 / 0.917);
      --accent-a11: color(display-p3 0.5451 0.7216 1 / 0.975);
      --accent-a12: color(display-p3 0.8275 0.8941 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0784 0.1333 0.2275 / 0.5);
      --accent-indicator: oklch(72.4% 0.1439 258.7);
      --accent-track: oklch(72.4% 0.1439 258.7);
    }
  }
}


.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(0, 111, 207, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(108, 166, 255, 1);
  --background: rgba(11, 11, 15, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #0b0b0f;
}

/* ==========================================================================
   American Express Developers — custom styling
   Loaded via `css:` in docs.yml.
   ========================================================================== */

:root {
  --amex-deep-blue: #00175a;
  --amex-bright-blue: #006fcf;
  --amex-gray-01: #f7f8f9;
  --amex-gray-border: #d3d3d3;
}

/* Fern runs MDX images through react-medium-image-zoom, which makes them
   click-to-enlarge. The hero and band artwork is background decoration, so
   the zoom wrapper is disabled for those. */
.amex-hero [data-rmiz],
.amex-hero__separator [data-rmiz],
.amex-band [data-rmiz] {
  pointer-events: none;
  cursor: default;
}

.amex-hero [data-rmiz] img,
.amex-hero__separator [data-rmiz] img,
.amex-band [data-rmiz] img {
  cursor: default;
}

/* --------------------------------------------------------------------------
   Hero — mirrors the marquee on developer.americanexpress.com: deep blue
   band, tagline lockup and headline on the left, illustration on the right.
   -------------------------------------------------------------------------- */

/* Flat #00175a, sampled from blue-top-bg.png, so the wave separator below
   joins the hero seamlessly. A gradient here would leave a visible seam. */
.amex-hero {
  background-color: var(--amex-deep-blue);
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  /* Positioning context for the overlaid illustration, which is absolutely
     positioned so its size cannot grow the hero. */
  position: relative;
  overflow: visible;
  z-index: 2;
}

/* Animated wave lines behind the hero copy.
   The SVG is twice the viewBox period wide, so translating one full period
   (1440 user units) returns to an identical frame -- no seam. Three layers
   at different speeds give parallax. */
.amex-hero__waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.amex-hero__waves svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 200%;
  height: 100%;
  transform: translateY(-50%);
}

.amex-wave {
  animation: amex-wave-drift linear infinite;
  will-change: transform;
}

.amex-wave--a { animation-duration: 26s; opacity: 0.5; }
.amex-wave--b { animation-duration: 38s; opacity: 0.36; }
.amex-wave--c { animation-duration: 19s; opacity: 0.28; }

@keyframes amex-wave-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-1440px); }
}

/* Honour a reduced-motion preference: keep the lines, drop the movement. */
@media (prefers-reduced-motion: reduce) {

  .amex-wave {
    animation: none;
  }

}

/* Full-bleed like the portal's `container-fluid`, so the enlarged tagline has
   room to run. */
.amex-hero__inner {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 4rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.amex-hero__copy {
  flex: 0 1 62%;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* 4x the original 340px lockup. `width: 100%` keeps it fluid below that. */
.amex-hero__tagline {
  display: block;
  width: 100%;
  max-width: 1360px;
  height: auto;
}

.amex-hero__headline {
  margin: 2.25rem 2rem 0 0;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.4;
  font-weight: 700;
  /* Fern styles h1 heavily; reset what would fight the hero. */
  border: 0;
  padding: 0;
  /* Plain text: Fern turns headings into their own anchor on hover, which
     has nowhere useful to point from a hero. */
  cursor: default !important;
  pointer-events: none;
}

.amex-hero__headline a,
.amex-hero .fern-anchor,
.amex-hero .fern-anchor-icon {
  display: none !important;
}

/* Taken out of the flex flow entirely: absolutely positioned so scaling it
   overlays the hero and the white space below instead of stretching the hero.
   Tune these three:
     --amex-art-width  size, as a share of the hero width
     --amex-art-right  distance from the right edge (raise it to move left)
     --amex-art-drop   how far its centre sits below the hero's centre */
.amex-hero__art {
  --amex-art-width: 23%;
  --amex-art-right: 8%;
  --amex-art-drop: 60px;

  position: absolute;
  top: 50%;
  right: var(--amex-art-right);
  width: var(--amex-art-width);
  transform: translateY(calc(-50% + var(--amex-art-drop)));
  z-index: 5;
  /* Decorative, and it overlaps real content -- must not eat clicks. */
  pointer-events: none;
}

.amex-hero__art img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Wave closing the hero. The source PNG is white-over-blue, so it is flipped
   vertically: its blue edge butts against the hero, curving into the page. */
.amex-hero__separator {
  width: 100%;
  line-height: 0;
  margin-top: -1px;
  position: relative;
  z-index: 1;
}

.amex-hero__separator img {
  display: block;
  width: 100%;
  height: 90px;
  transform: scaleY(-1);
}

@media (max-width: 900px) {

  .amex-hero {
    min-height: 0;
  }
  .amex-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 1.25rem;
  }
  .amex-hero__copy {
    flex: 1 1 auto;
    width: 100%;
  }
  /* Back into the flow on small screens; an overlay would swamp the copy. */
  .amex-hero__art {
    position: static;
    width: 100%;
    max-width: 420px;
    margin: 1.5rem auto 0;
    transform: none;
  }
  .amex-hero__headline {
    margin-right: 0;
    font-size: 1.25rem;
  }
  .amex-hero__separator img {
    height: 48px;
  }

}

/* --------------------------------------------------------------------------
   Landing page body — the hero is full-bleed, so the prose below it needs
   its own centred column.
   -------------------------------------------------------------------------- */

.amex-page {
  max-width: 88rem;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

/* Fern's prose rhythm is tuned for a narrow article column; these sections
   are full width, so heading, body and call-to-action need more air between
   them or they read as one block. */
.amex-page h2 {
  margin-bottom: 1.25rem;
}

.amex-page p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* ...but not inside the cards, where that spacing detaches the product links
   from the description they belong to. */
.amex-page .fern-card p {
  margin-bottom: 0;
  line-height: 1.6;
}

.amex-page .amex-btn {
  margin-top: 1rem;
}

@media (max-width: 900px) {

  .amex-page {
    padding: 2rem 1.25rem 3rem;
  }

}

/* --------------------------------------------------------------------------
   Product switcher — the "Explore" entry exists only so the switcher has a
   neutral label on the landing page (Fern shows the active product's name and
   offers no separate label setting). Hide it from the open dropdown so it is
   not selectable; it is the only option whose link is the site root.
   -------------------------------------------------------------------------- */

a.fern-product-item-link[href="/"],
/* Support is a product only so its pages have routes; it is reached from the
   header menu, not the category switcher. */
a.fern-product-item-link[href^="/support"] {
  display: none;
}

/* The default panel is a 258px single column, which crowds names like
   "Personalized Services" against an oversized icon tile. Widen it and lay
   the categories out two-up. Scoped by the panel's test id so the Support
   and version dropdowns, which share `.fern-dropdown`, are untouched. */
[data-testid="product-dropdown-content"] {
  /* An explicit width, not min-width: Radix sizes the panel to its content,
     and the subtitles would otherwise stretch it to ~990px instead of
     wrapping. */
  width: min(40rem, 92vw);
  max-width: 92vw;
}

[data-testid="product-dropdown-content"] .fern-product-selector-radio-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

[data-testid="product-dropdown-content"] .fern-selection-item {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  gap: 0.75rem;
  transition: background-color 0.12s ease;
}

[data-testid="product-dropdown-content"] a.fern-product-item-link:hover
  .fern-selection-item {
  background-color: var(--amex-gray-01);
}
[data-testid="product-dropdown-content"] a.fern-product-item-link:focus-within .fern-selection-item {
  background-color: var(--amex-gray-01); outline: none;
}

/* Trim the icon tile so the label, not the chrome, leads. */
[data-testid="product-dropdown-content"] .fern-selection-item-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
}

[data-testid="product-dropdown-content"] .fern-selection-item-title {
  white-space: nowrap;
}

[data-testid="product-dropdown-content"] .fern-selection-item-subtitle {
  white-space: normal;
  line-height: 1.35;
}

@media (max-width: 700px) {

  [data-testid="product-dropdown-content"] {
    min-width: 0;
  }
  [data-testid="product-dropdown-content"] .fern-product-selector-radio-group {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* --------------------------------------------------------------------------
   Version selector — hidden unless the current route opts in.

   Fern attaches versions to a product (here, a category), so the selector
   would otherwise show on every tab in Fraud Prevention and Payment
   Services. assets/custom.js sets the flag below from the route; the list of
   opted-in tabs lives there.
   -------------------------------------------------------------------------- */

.fern-version-selector {
  display: none !important;
}

html[data-amex-versioned="true"] .fern-version-selector {
  display: flex !important;
}

/* Fern styles the version trigger smaller and bolder than the product one
   (14px/700 against 16px/400). They sit side by side in the header, so match
   them. Heights and padding already agree. */
.fern-version-selector .version-dropdown-trigger,
.fern-version-selector .version-dropdown-trigger p,
.fern-version-selector .version-dropdown-trigger span,
.fern-version-selector .fern-selection-item-title {
  font-size: 16px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Secondary blue band ("Integration is easy") — a shorter echo of the hero,
   bookended by the same wave art. The top wave uses the PNG as authored
   (white into blue); the bottom one is flipped to come back out to white.
   -------------------------------------------------------------------------- */

.amex-band {
  width: 100%;
  margin: 2rem 0;
}

.amex-band__wave {
  line-height: 0;
}

.amex-band__wave img {
  display: block;
  width: 100%;
  height: 90px;
}

.amex-band__wave--bottom img {
  transform: scaleY(-1);
}

.amex-band__body {
  background-color: var(--amex-deep-blue);
  color: #fff;
  /* -1px pulls the band over the waves' antialiased edge, avoiding a hairline. */
  margin: -1px 0;
  padding: 1rem 0 2rem;
}

.amex-band__body > * {
  max-width: 88rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* Fern's own type and Steps colours assume a light surface. */
.amex-band__body h2,
.amex-band__body h3,
.amex-band__body p,
.amex-band__body li,
.amex-band__body strong {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.amex-band__body a {
  color: #9cc7ff;
}

/* Fern wraps each step's number badge in an anchor link to its own heading.
   Keep the badge, drop the link behaviour. */
.amex-band__body .fern-anchor {
  pointer-events: none;
  cursor: default;
  color: inherit;
}

/* Step numbers as a ringed circle, echoing the portal's outline badges.
   Fern's own `.fern-anchor-icon:not(.copied)` is two classes, so these use
   three to win on specificity rather than reaching for !important. */
/* No connecting rule behind the numbers -- just the circles.
   Padding is the band's own gutter (2.5rem, matching the "Integration is
   easy" heading) plus 3.25rem for the badge, so the circles start on the
   heading's left edge rather than outdented past it. */
.amex-band__body .fern-steps {
  border-left: 0;
  /* Deliberately no `margin-left` here: the block must keep the `margin: auto`
     centring it shares with the heading, or the badges drift to the viewport
     edge while the heading stays centred. */
  padding-left: calc(2.5rem + 3.25rem);
}

.amex-band__body .fern-step {
  margin-bottom: 2.75rem;
}

.amex-band__body .fern-step:last-child {
  margin-bottom: 0;
}

.amex-band__body .fern-step > .fern-anchor {
  /* Sits in the padding gutter opened up by .fern-steps above. */
  margin-left: -3.25rem;
  margin-top: 0;
  width: 2rem;
  height: 2rem;
}

/* Freeze the badge. Fern swaps the number for a link glyph on hover and
   recolours the chip; these steps are not linkable, so every hover state is
   pinned to the resting state and the number is treated as plain text.
   Both the resting and :hover selectors are declared so nothing can flicker
   between them mid-transition. */
.amex-band__body .fern-step .fern-anchor-icon,
.amex-band__body .fern-step:hover .fern-anchor-icon,
.amex-band__body .fern-step .fern-anchor:hover .fern-anchor-icon,
.amex-band__body .fern-step .fern-anchor-icon.copied,
.amex-band__body .fern-step .fern-anchor-icon:not(.copied) {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 700;
  backdrop-filter: none !important;
  transition: none !important;
}
.amex-band__body .fern-step:focus-within .fern-anchor-icon,
.amex-band__body .fern-step .fern-anchor:focus-within .fern-anchor-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 700;
  backdrop-filter: none !important;
  transition: none !important; outline: none;
}

/* The number is drawn by CSS rather than left to Fern's markup. On hover Fern
   replaces the badge's contents with a link glyph, so pinning styles on its
   children is not enough -- the number is simply gone from the DOM and the
   circle blinks empty. A counter cannot be swapped out. */
.amex-band__body .fern-steps {
  counter-reset: amex-step;
}

.amex-band__body .fern-step {
  counter-increment: amex-step;
}

.amex-band__body .fern-step .fern-anchor-icon > * {
  display: none !important;
}

.amex-band__body .fern-step .fern-anchor-icon::before {
  content: counter(amex-step);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

/* Same for the section heading, which Fern also makes clickable. */
.amex-band__body h2 {
  cursor: default !important;
  pointer-events: none;
}

@media (max-width: 900px) {

  .amex-band__wave img {
    height: 48px;
  }
  .amex-band__body > * {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .amex-band__body .fern-steps {
    padding-left: calc(1.25rem + 3.25rem);
  }

}

/* --------------------------------------------------------------------------
   Per-product links inside the category cards.
   -------------------------------------------------------------------------- */

/* Whole-card link, done as a "stretched link" rather than by wrapping the
   card in an <a>: the card already contains per-product links, and nesting
   one anchor inside another is invalid HTML (browsers drop the inner ones).
   The cover anchor is a normal sibling whose ::after is stretched over the
   card, and the product links are lifted above it so they still win clicks. */
.amex-page .fern-card {
  position: relative;
}

/* Pin the "Browse …" link to the bottom of the card rather than letting it
   sit directly under the product links.
   Fern nests the link three wrappers deep inside the card, so `margin-top:
   auto` only has room to work if every one of those wrappers is itself a
   full-height flex column -- otherwise the content box stops short of the
   card's stretched height and there is no free space to absorb. */
.amex-page .fern-card > * {
  height: 100%;
  align-items: stretch;
}

.amex-page .fern-card > * > *,
.amex-page .fern-card > * > * > * {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.amex-page .fern-card .amex-card-cover {
  margin-top: auto;
}

.amex-card-cover {
  display: inline-block;
  margin-top: 0.85rem;
  color: var(--amex-bright-blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.amex-card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.amex-page .fern-card:hover .amex-card-cover {
  text-decoration: underline;
}
.amex-page .fern-card:focus-within .amex-card-cover {
  text-decoration: underline; outline: none;
}

/* Inline flow, not flex: the separators are plain text between the links, so
   they need to wrap along with them rather than become flex items. */
.amex-card-links {
  margin-top: 0.75rem;
  /* Guarantees a gap above the "Browse …" link even on the tall cards, where
     `margin-top: auto` on that link resolves to zero. */
  margin-bottom: 1rem;
  line-height: 1.9;
  /* Above the stretched cover, or these would never be clickable. */
  position: relative;
  z-index: 2;
}

.amex-card-links p {
  margin: 0;
}

/* The dot sits outside every anchor, so it is never part of a link. */
.amex-sep {
  margin: 0 0.15rem;
  opacity: 0.45;
  user-select: none;
}

.amex-card-links a {
  color: var(--amex-bright-blue);
  font-weight: 600;
  text-decoration: none;
}

.amex-card-links a:hover {
  text-decoration: underline;
}
.amex-card-links a:focus-visible {
  text-decoration: underline; outline: none;
}

/* --------------------------------------------------------------------------
   "Get started" — copy on the left, illustration on the right, as on the
   portal's own home page.
   -------------------------------------------------------------------------- */

/* Top aligned, and the heading sits above this row, so the artwork lines up
   with the paragraph rather than floating against the section's centre. */
.amex-getstarted {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}

.amex-getstarted__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.amex-getstarted__art {
  flex: 0 0 auto;
  /* Decorative only. */
  pointer-events: none;
}

.amex-getstarted__art img {
  display: block;
  width: 319px;
  max-width: 100%;
  height: auto;
}

/* The paragraph opens the column, so drop Fern's leading gap. */
.amex-getstarted__copy > :first-child {
  margin-top: 0;
}

@media (max-width: 900px) {

  .amex-getstarted {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .amex-getstarted__art {
    align-self: center;
  }

}

/* --------------------------------------------------------------------------
   Small button, matching the portal's "Sign Up" control.
   -------------------------------------------------------------------------- */

.amex-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--amex-bright-blue);
  border-radius: 4px;
  background: var(--amex-bright-blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.amex-btn:hover {
  background: #0a5fae;
  border-color: #0a5fae;
  color: #fff;
  text-decoration: none;
}
.amex-btn:focus-visible {
  background: #0a5fae;
  border-color: #0a5fae;
  color: #fff;
  text-decoration: none; outline: none;
}

/* Fern's MDX link renderer adds an external-link glyph and wraps the label in
   a paragraph; neither belongs inside a button. The glyph's own class carries
   higher specificity, so !important is needed to keep the button one line. */
.amex-btn svg,
.amex-btn .external-link-icon {
  display: none !important;
}

.amex-btn p {
  margin: 0;
  color: inherit;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Footer — rendered by components/Footer.tsx. Fern places the footer outside
   the sidebar grid, so it spans the viewport; these rules keep its inner
   content aligned with the rest of the page.
   -------------------------------------------------------------------------- */

/* Typography lifted verbatim from Amex's own footer rules:
     body               color #333, Helvetica Neue, .9375rem/1.375rem, 400
     .nav-footer .nav-link   color #006fcf, same face and metrics
     .heading-1         color #53565a, .8125rem/1.125rem, uppercase
   Dark mode is ours, not theirs, so those greys are lightened there rather
   than left unreadable. */
.amex-footer {
  width: 100%;
  border-top: 1px solid var(--amex-gray-border);
  background: var(--background, #fff);
  color: #333;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.375rem;
}

/* Left aligned: `margin: 0` rather than `0 auto`, so the content hugs the
   left edge instead of centring in an 88rem column on wide viewports. */
/* Geometry copied from Amex's own footer, measured at a 1600px viewport:
   the row starts at x=41 (their 21px footer padding + 20px on the menu) and
   everything below it lines up on the same edge. */
.amex-footer__inner {
  max-width: none;
  margin: 0;
  padding: 2.5rem 2rem 3rem 41px;
  text-align: left;
}

/* Their columns are content-sized and adjacent, not equal thirds with a gap:
   412 / 559 / auto from x=41 puts the headings at 41, 453 and 1012. */
.amex-footer__cols {
  display: grid;
  grid-template-columns: 412px 559px auto;
  gap: 0;
}

.amex-footer__heading {
  margin: 0 0 0.75rem;
  /* Fern's heading rules set their own face, so restate it here. */
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  color: #53565a;
  font-size: 0.8125rem;
  /* Bolder than Amex's own .heading-1, which is 400. */
  font-weight: 700;
  line-height: 1.125rem;
  text-transform: uppercase;
}

.amex-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.amex-footer__list li {
  margin-bottom: 0.5rem;
}

.amex-footer__link {
  color: var(--amex-bright-blue);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.375rem;
  text-decoration: none;
}

.amex-footer__link:hover {
  text-decoration: underline;
}
.amex-footer__link:focus-visible {
  text-decoration: underline; outline: none;
}

/* Logotype opens the lower block, above the legal copy and copyright. */
.amex-footer__brand {
  margin-top: 2rem;
  margin-bottom: 1.25rem;
}

/* 0.75x the previous 32px. */
.amex-footer__logo {
  height: 24px;
  width: auto;
}

/* Swap the logotype with the active colour scheme. */
.amex-footer__logo--dark,
.dark .amex-footer__logo--light {
  display: none;
}

.dark .amex-footer__logo--dark {
  display: inline-block;
}

.amex-footer__legal,
.amex-footer__copyright {
  margin: 1rem 0 0;
  color: #333;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.375rem;
}

.amex-footer__legal a,
.amex-footer__copyright a {
  color: var(--amex-bright-blue);
}

.dark .amex-footer,
.dark .amex-footer__legal,
.dark .amex-footer__copyright {
  color: #d6d7d8;
}

.dark .amex-footer__heading {
  color: #97999b;
}

@media (max-width: 1100px) {

  .amex-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

}

@media (max-width: 900px) {

  .amex-footer__cols {
    grid-template-columns: 1fr;
  }
  .amex-footer__inner {
    padding: 2rem 1.25rem 2.5rem;
  }

}