/*fern-site-stylesheet*/@font-face {
    font-family: 'UPSRoboto';
    src: url('/_fern-files/ups.ferndocs.com/bcab6949c6eda21b0e21c07ab420d2fb78302afb49da639b82fa65b2fdb7f7c2/docs/fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-01B0, U+01F0-0237, U+0259, U+02C7-0323, U+0384-03D6, U+0400-0513, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1EF9, U+1F4D, U+2074-207F, U+20A3-20BD, U+2105-212E, U+215B-215E, U+2202-2265, U+25CA, U+EE01-EE02, U+F6C3, U+FB01-FB04, U+FFFC;
}
@font-face {
    font-family: 'UPSRoboto';
    src: url('/_fern-files/_img/bcab6949c6eda21b0e21c07ab420d2fb-v1.latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+0002, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-2011, U+2013-2015, U+2017-201E, U+2020-2022, U+2025-2027, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'UPSRoboto';
    src: url('/_fern-files/ups.ferndocs.com/bcab6949c6eda21b0e21c07ab420d2fb78302afb49da639b82fa65b2fdb7f7c2/docs/fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-01B0, U+01F0-0237, U+0259, U+02C7-0323, U+0384-03D6, U+0400-0513, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1EF9, U+1F4D, U+2074-207F, U+20A3-20BD, U+2105-212E, U+215B-215E, U+2202-2265, U+25CA, U+EE01-EE02, U+F6C3, U+FB01-FB04, U+FFFC;
}
@font-face {
    font-family: 'UPSRoboto';
    src: url('/_fern-files/_img/bcab6949c6eda21b0e21c07ab420d2fb-v1.latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+0002, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-2011, U+2013-2015, U+2017-201E, U+2020-2022, U+2025-2027, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'UPSRoboto Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 99.78%;
    ascent-override: 92.98%;
    descent-override: 24.47%;
    line-gap-override: 0.00%;
}

: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: 'UPSRoboto', 'UPSRoboto Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'UPSRoboto', 'UPSRoboto Fallback', 'UPSRoboto', 'UPSRoboto Fallback', 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: #fefdfb;
  --accent-2: #fffae9;
  --accent-3: #fff3c1;
  --accent-4: #ffe99c;
  --accent-5: #ffde79;
  --accent-6: #fbd376;
  --accent-7: #e8c167;
  --accent-8: #d6aa39;
  --accent-9: #ffc813;
  --accent-10: #f6bf22;
  --accent-11: #9a7000;
  --accent-12: #463a1d;

  --accent-a1: #c0800004;
  --accent-a2: #ffc60016;
  --accent-a3: #ffce003e;
  --accent-a4: #ffc70063;
  --accent-a5: #ffc10086;
  --accent-a6: #f8ae0089;
  --accent-a7: #d9970098;
  --accent-a8: #ca9200c6;
  --accent-a9: #ffc400ec;
  --accent-a10: #f5b500dd;
  --accent-a11: #9a7000;
  --accent-a12: #2e2100e2;

  --accent-contrast: #2a2009;
  --accent-surface: #fff9e4cc;
  --accent-indicator: #ffc813;
  --accent-track: #ffc813;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0029 86.55);
      --accent-2: oklch(98.6% 0.0234 86.55);
      --accent-3: oklch(96.9% 0.0678 86.55);
      --accent-4: oklch(94.6% 0.102 86.55);
      --accent-5: oklch(91.9% 0.1298 86.55);
      --accent-6: oklch(88.1% 0.1207 86.55);
      --accent-7: oklch(82.8% 0.118 86.55);
      --accent-8: oklch(75.9% 0.1355 86.55);
      --accent-9: oklch(86.2% 0.1739 86.55);
      --accent-10: oklch(83.1% 0.1635 86.55);
      --accent-11: oklch(57% 0.1385 86.55);
      --accent-12: oklch(35.2% 0.0462 86.55);

      --accent-a1: color(display-p3 0.7569 0.5137 0.0235 / 0.016);
      --accent-a2: color(display-p3 0.9529 0.7529 0.0078 / 0.079);
      --accent-a3: color(display-p3 0.9686 0.7922 0.0039 / 0.224);
      --accent-a4: color(display-p3 0.9569 0.7686 0.0039 / 0.353);
      --accent-a5: color(display-p3 0.9608 0.7333 0.0039 / 0.471);
      --accent-a6: color(display-p3 0.9216 0.6549 0.0039 / 0.487);
      --accent-a7: color(display-p3 0.7922 0.5608 0 / 0.546);
      --accent-a8: color(display-p3 0.7255 0.5294 0 / 0.691);
      --accent-a9: color(display-p3 0.9529 0.7098 0 / 0.718);
      --accent-a10: color(display-p3 0.902 0.6588 0 / 0.71);
      --accent-a11: color(display-p3 0.5098 0.3569 0 / 0.859);
      --accent-a12: color(display-p3 0.1569 0.1137 0 / 0.871);

      --accent-contrast: #2a2009;
      --accent-surface: color(display-p3 1 0.9765 0.902 / 0.8);
      --accent-indicator: oklch(86.2% 0.1739 86.55);
      --accent-track: oklch(86.2% 0.1739 86.55);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

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


.dark {
  --accent-1: #1d1a14;
  --accent-2: #231f16;
  --accent-3: #32280e;
  --accent-4: #402e00;
  --accent-5: #4c3700;
  --accent-6: #584309;
  --accent-7: #6b541b;
  --accent-8: #866a24;
  --accent-9: #ffc400;
  --accent-10: #f4ba00;
  --accent-11: #ffcc2c;
  --accent-12: #fee7b5;

  --accent-a1: #da1a0004;
  --accent-a2: #eb8e000b;
  --accent-a3: #fd9f001b;
  --accent-a4: #fc91002b;
  --accent-a5: #fe9f0038;
  --accent-a6: #fcb00046;
  --accent-a7: #fdbd1d5b;
  --accent-a8: #fdc22f79;
  --accent-a9: #ffc400;
  --accent-a10: #ffc200f3;
  --accent-a11: #ffcc2c;
  --accent-a12: #ffe8b6fe;

  --accent-contrast: #2a2009;
  --accent-surface: #2c241380;
  --accent-indicator: #ffc400;
  --accent-track: #ffc400;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(21.8% 0.0123 86.55);
      --accent-2: oklch(24% 0.0173 86.55);
      --accent-3: oklch(28.1% 0.0425 86.55);
      --accent-4: oklch(31.4% 0.069 86.55);
      --accent-5: oklch(34.9% 0.0784 86.55);
      --accent-6: oklch(39.5% 0.0758 86.55);
      --accent-7: oklch(45.7% 0.079 86.55);
      --accent-8: oklch(53.8% 0.0932 86.55);
      --accent-9: oklch(85% 0.1739 86.55);
      --accent-10: oklch(81.8% 0.1739 86.55);
      --accent-11: oklch(87.3% 0.1692 86.55);
      --accent-12: oklch(93.5% 0.0695 86.55);

      --accent-a1: color(display-p3 0.9765 0.1059 0 / 0.009);
      --accent-a2: color(display-p3 1 0.6627 0 / 0.035);
      --accent-a3: color(display-p3 0.9922 0.6706 0 / 0.097);
      --accent-a4: color(display-p3 1 0.6431 0 / 0.153);
      --accent-a5: color(display-p3 0.9961 0.6745 0 / 0.206);
      --accent-a6: color(display-p3 1 0.7412 0.0431 / 0.258);
      --accent-a7: color(display-p3 1 0.7922 0.2314 / 0.337);
      --accent-a8: color(display-p3 1 0.8039 0.302 / 0.455);
      --accent-a9: color(display-p3 1 0.8039 0.2745 / 0.961);
      --accent-a10: color(display-p3 1 0.8 0.2667 / 0.913);
      --accent-a11: color(display-p3 1 0.8314 0.3294 / 0.966);
      --accent-a12: color(display-p3 0.9961 0.9255 0.7451 / 0.979);

      --accent-contrast: #2a2009;
      --accent-surface: color(display-p3 0.1647 0.1412 0.0784 / 0.5);
      --accent-indicator: oklch(85% 0.1739 86.55);
      --accent-track: oklch(85% 0.1739 86.55);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(255, 196, 0, 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(255, 196, 0, 1);
  --background: rgba(26, 26, 26, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #1a1a1a;
}

/* UPS Brand Colors - Typeform-style design */
:root {
  --ups-brown: #351C15;
  --ups-gold: #FFC400;
  --ups-brown-light: #4A2A20;
  --light-brown: #F5EDE8;
  --light-gold: #FFF4D6;
  --text-dark: #1A1A1A;
  --text-muted: #6B6B6B;
  --white: #FFFFFF;

  /* Typeform-style grayscale variables */
  --grayscale-a12: rgba(0, 0, 0, 0.87);
  --grayscale-a11: rgba(0, 0, 0, 0.74);
  --grayscale-a10: rgba(0, 0, 0, 0.6);
  --grayscale-a9: rgba(0, 0, 0, 0.48);
  --grayscale-a8: rgba(0, 0, 0, 0.36);
  --grayscale-a6: rgba(0, 0, 0, 0.24);
  --grayscale-a4: rgba(0, 0, 0, 0.12);
  --grayscale-a3: rgba(0, 0, 0, 0.08);
  --grayscale-a2: rgba(0, 0, 0, 0.04);

  /* Card background colors - UPS palette */
  --card-shipping-bg: #FFB500;
  --card-tracking-bg: #351C15;
  --card-address-bg: #F5EDE8;
  --card-trade-bg: #4A2A20;
}

/* Header button pill style */
.fern-button.filled {
  padding: 10px 22px;
  border-radius: 99999px;
}

.fern-button.filled:hover {
  background: rgb(255, 208, 51) !important;
  border-color: rgb(255, 208, 51) !important;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.08) 0px 4px 12px -2px, rgba(0, 0, 0, 0.08) 0px 15px 32px -3px;
}
.fern-button.filled:focus-visible {
  background: rgb(255, 208, 51) !important;
  border-color: rgb(255, 208, 51) !important;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.08) 0px 4px 12px -2px, rgba(0, 0, 0, 0.08) 0px 15px 32px -3px;
}

/* Hero Section - UPS Developer Portal Style */
.hero-section {
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 48px auto;
}

.hero-content {
  text-align: left;
}

.hero-title {
  color: #1A1A1A;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}

.hero-content h1 {
  pointer-events: none !important;
}

.hero-underline {
  width: 48px;
  height: 4px;
  background: var(--ups-gold);
  margin-bottom: 24px;
}

.hero-subtitle {
  color: #1A1A1A;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 500px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-cta-primary {
  background: var(--ups-gold);
  color: var(--ups-brown);
  padding: 10px 22px 10px !important;
  border-radius: 24px;
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hero-cta-primary:hover {
  background: rgb(255, 208, 51);
  border-color: rgb(255, 208, 51);
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.08) 0px 4px 12px -2px, rgba(0, 0, 0, 0.08) 0px 15px 32px -3px;
}
.hero-cta-primary:focus-visible {
  background: rgb(255, 208, 51);
  border-color: rgb(255, 208, 51);
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.08) 0px 4px 12px -2px, rgba(0, 0, 0, 0.08) 0px 15px 32px -3px;
}

.hero-cta-secondary {
  background: transparent;
  color: #0662bb;
  border: 2px solid #0662bb;
  padding: 10px 22px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hero-cta-secondary:hover {
  background: rgba(6, 98, 187, 0.05);
  border-color: #418ed9;
  color: #418ed9;
  box-shadow: none;
}
.hero-cta-secondary:focus-visible {
  background: rgba(6, 98, 187, 0.05);
  border-color: #418ed9;
  color: #418ed9;
  box-shadow: none;
}

.hero-image img {
  width: 100%;
  height: auto;
}

/* API Cards Grid - UPS Developer Portal Style */
.api-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
}

.api-card {
  background: var(--white);
  border: 1px solid var(--grayscale-a4);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.api-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.api-card:focus-visible {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.api-card-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.api-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.api-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--grayscale-a12);
  margin: 0 0 8px 0;
}

.api-card-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grayscale-a10);
  margin: 0;
  flex-grow: 1;
}

.api-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 16px;
}

.api-card-links a {
  color: #0066CC;
  font-size: 14px;
  text-decoration: none;
}

.api-card-links a:hover {
  text-decoration: underline;
}
.api-card-links a:focus-visible {
  text-decoration: underline;
}

/* Welcome Section */
.welcome-section {
  max-width: 800px;
  margin: 0 auto 64px auto;
  text-align: center;
  padding: 0 24px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--grayscale-a12);
  margin-bottom: 16px;
}

.section-description {
  color: var(--grayscale-a10);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

.section-underline {
  width: 48px;
  height: 4px;
  background: var(--ups-gold);
  margin: 0 auto 24px auto;
}

/* API Feature Sections - Typeform Style */
.api-feature-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto 64px auto;
  padding: 48px 24px;
  border-top: 1px solid var(--grayscale-a4);
}

/* Remove border-top from first api-feature-section after welcome-section */
.welcome-section + .api-feature-section {
  border-top: none;
}

.api-feature-reverse {
  direction: rtl;
}

.api-feature-reverse > * {
  direction: ltr;
}

.api-feature-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.api-feature-icon-small {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.api-feature-emoji {
  font-size: 24px;
}

/* Font Awesome icon styles for feature sections */
.api-feature-icon-small i {
  font-size: 24px;
}

.api-icon-shipping {
  background: var(--card-shipping-bg);
}

.api-icon-shipping i {
  color: var(--ups-brown);
}

.api-icon-tracking {
  background: var(--card-tracking-bg);
}

.api-icon-tracking i {
  color: var(--white);
}

.api-icon-address {
  background: var(--card-address-bg);
}

.api-icon-address i {
  color: var(--ups-brown);
}

.api-icon-trade {
  background: var(--card-trade-bg);
}

.api-icon-trade i {
  color: var(--white);
}

.api-feature-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--grayscale-a12);
  margin: 0 0 12px 0;
}

.api-feature-description {
  color: var(--grayscale-a10);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.learn-more-btn {
  display: inline-block;
  background: var(--ups-gold);
  color: var(--ups-brown);
  padding: 10px 22px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.learn-more-btn:hover {
  background: rgb(255, 208, 51);
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.08) 0px 4px 12px -2px, rgba(0, 0, 0, 0.08) 0px 15px 32px -3px;
}
.learn-more-btn:focus-visible {
  background: rgb(255, 208, 51);
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.08) 0px 4px 12px -2px, rgba(0, 0, 0, 0.08) 0px 15px 32px -3px;
}

.api-feature-code {
  background: #F5F5F5;
  border-radius: 12px;
  overflow: hidden;
}

.api-feature-code > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.api-feature-code pre {
  margin: 0 !important;
  padding: 24px !important;
  background: transparent !important;
}

.api-feature-code code {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Endpoints Section */
.endpoints-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
  border-top: 1px solid var(--grayscale-a4);
}

.endpoints-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.endpoint-card {
  display: inline-block;
  background: var(--white);
  border: 1px solid var(--grayscale-a6);
  color: var(--grayscale-a12);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.endpoint-card:hover {
  background: var(--ups-gold);
  border-color: var(--ups-gold);
  color: var(--ups-brown);
  transform: translateY(-2px);
}
.endpoint-card:focus-visible {
  background: var(--ups-gold);
  border-color: var(--ups-gold);
  color: var(--ups-brown);
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {

  .api-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  .hero-section {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    text-align: center;
  }

  .hero-content {
    text-align: center;
  }

  .hero-underline {
    margin: 0 auto 24px;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-image {
    order: -1;
  }

  .hero-title {
    font-size: 32px;
  }

  .api-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .api-card-emoji {
    font-size: 36px;
  }

  .section-title {
    font-size: 24px;
  }

  .api-feature-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }

  .api-feature-reverse {
    direction: ltr;
  }

  .api-feature-title {
    font-size: 20px;
  }

  .endpoints-grid {
    flex-direction: column;
    align-items: center;
  }

  .endpoint-card {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

}

@media (max-width: 480px) {

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

  .api-card {
    aspect-ratio: 16/9;
  }

}

/* Postman/GitHub button links - hide external link icon and fix image display */
a:has(img[src*="pstmn.io"]),
a:has(img[src*="gitHubButton"]) {
  display: inline-flex;
  align-items: center;
}

a:has(img[src*="pstmn.io"]) .external-link-icon,
a:has(img[src*="gitHubButton"]) .external-link-icon {
  display: none !important;
}

a:has(img[src*="pstmn.io"]) img,
a:has(img[src*="gitHubButton"]) img {
  display: inline !important;
}

/* Dark mode adjustments */
.dark {
  --grayscale-a12: rgba(255, 255, 255, 0.87);
  --grayscale-a11: rgba(255, 255, 255, 0.74);
  --grayscale-a10: rgba(255, 255, 255, 0.6);
  --grayscale-a9: rgba(255, 255, 255, 0.48);
  --grayscale-a8: rgba(255, 255, 255, 0.36);
  --grayscale-a6: rgba(255, 255, 255, 0.24);
  --grayscale-a4: rgba(255, 255, 255, 0.12);
  --grayscale-a3: rgba(255, 255, 255, 0.08);
  --grayscale-a2: rgba(255, 255, 255, 0.04);
}

.dark .api-card {
  background: #2A2A2A;
  border-color: var(--grayscale-a4);
}

.dark .api-card-links a {
  color: #66AAFF;
}

.dark .api-icon-address {
  background: #4A3A30;
}

.dark .endpoint-card {
  background: #2A2A2A;
  border-color: var(--grayscale-a6);
}

.dark .endpoint-card:hover {
  background: var(--ups-gold);
  border-color: var(--ups-gold);
  color: var(--ups-brown);
}
.dark .endpoint-card:focus-visible {
  background: var(--ups-gold);
  border-color: var(--ups-gold);
  color: var(--ups-brown);
}

.dark .api-feature-code {
  background: #0D0D0D;
}

/* Hero section dark mode */
.dark .hero-title {
  color: var(--grayscale-a12);
}

.dark .hero-subtitle {
  color: var(--grayscale-a10);
}

.dark .hero-cta-secondary {
  color: #66AAFF;
  border-color: #66AAFF;
}

.dark .hero-cta-secondary:hover {
  background: rgba(102, 170, 255, 0.1);
  border-color: #99CCFF;
  color: #99CCFF;
}
.dark .hero-cta-secondary:focus-visible {
  background: rgba(102, 170, 255, 0.1);
  border-color: #99CCFF;
  color: #99CCFF;
}

/* ========================================
   API Catalog Component Styles
   ======================================== */

.catalog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
}

.catalog-header {
  text-align: center;
  margin-bottom: 48px;
}

.catalog-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--grayscale-a12);
  margin: 0 0 16px 0;
}

.catalog-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--grayscale-a10);
  max-width: 700px;
  margin: 0 auto;
}

/* Tab Navigation */
.catalog-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--grayscale-a4);
  padding-bottom: 0;
}

.catalog-tab {
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--grayscale-a10);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  margin-bottom: -1px;
}

.catalog-tab:hover {
  color: var(--grayscale-a12);
}
.catalog-tab:focus-visible {
  color: var(--grayscale-a12);
}

.catalog-tab.active {
  color: var(--ups-brown);
  font-weight: 600;
}

.catalog-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ups-gold);
}

/* Search Input */
.catalog-search {
  position: relative;
  max-width: 400px;
  margin: 0 auto 32px auto;
}

.catalog-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grayscale-a8);
  pointer-events: none;
}

.catalog-search-input {
  width: 100%;
  padding: 12px 16px 12px 48px;
  font-size: 14px;
  border: 1px solid var(--grayscale-a6);
  border-radius: 8px;
  background: var(--white);
  color: var(--grayscale-a12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-search-input:focus {
  outline: none;
  border-color: var(--ups-gold);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.2);
}

.catalog-search-input::placeholder {
  color: var(--grayscale-a8);
}

/* Section Header */
.catalog-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.catalog-section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--grayscale-a12);
  margin: 0 0 16px 0;
}

.catalog-section-underline {
  width: 60px;
  height: 4px;
  background: var(--ups-gold);
  margin: 0 auto 16px auto;
}

.catalog-section-subtitle {
  font-size: 16px;
  color: var(--grayscale-a10);
  margin: 0;
}

/* Card Grid */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card Styles */
.catalog-card {
  background: var(--white);
  border: 1px solid var(--grayscale-a4);
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-card:hover {
  border-color: var(--grayscale-a6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.catalog-card:focus-visible {
  border-color: var(--grayscale-a6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.catalog-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Badge Styles */
.catalog-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.catalog-badge-premium {
  background: #17A896;
  color: white;
}

.catalog-badge-new {
  background: transparent;
  color: #cc0000;
  border: 1px solid #cc0000;
}

.catalog-badge-manage {
  background: #FEF6CC;
  color: #5C4813;
}

.catalog-badge-create {
  background: #FEF6CC;
  color: #5C4813;
}

.catalog-badge-prepare {
  background: #F2F1EF;
  color: #4A4A4A;
}

.catalog-badge-auth {
  background: #E7F2F2;
  color: #2D5959;
}

.catalog-badge-supply {
  background: #FEF6CC;
  color: #5C4813;
}

.catalog-badge-default {
  background: var(--grayscale-a3);
  color: var(--grayscale-a11);
}

.catalog-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--grayscale-a12);
  margin: 0 0 8px 0;
}

.catalog-card-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grayscale-a10);
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.catalog-pricing-link {
  display: inline-block;
  color: #0066CC;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 16px;
}

.catalog-pricing-link:hover {
  text-decoration: underline;
}
.catalog-pricing-link:focus-visible {
  text-decoration: underline;
}

/* Card Actions */
.catalog-card-actions {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--grayscale-a4);
  margin-top: auto;
}

.catalog-action-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--grayscale-a11);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.catalog-action-link:hover {
  color: var(--ups-brown);
}
.catalog-action-link:focus-visible {
  color: var(--ups-brown);
}

.catalog-action-link svg {
  opacity: 0.7;
}

/* Empty State */
.catalog-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--grayscale-a10);
}

/* Responsive Styles */
@media (max-width: 1024px) {

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  .catalog-container {
    padding: 32px 16px;
  }

  .catalog-title {
    font-size: 28px;
  }

  .catalog-tabs {
    gap: 4px;
  }

  .catalog-tab {
    padding: 10px 12px;
    font-size: 13px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-search {
    max-width: 100%;
  }

}

/* Dark Mode */
.dark .catalog-search-input {
  background: #2A2A2A;
  border-color: var(--grayscale-a6);
  color: var(--grayscale-a12);
}

.dark .catalog-card {
  background: #2A2A2A;
  border-color: var(--grayscale-a4);
}

.dark .catalog-card:hover {
  border-color: var(--grayscale-a6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark .catalog-card:focus-visible {
  border-color: var(--grayscale-a6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .catalog-badge-prepare {
  background: #3A3A3A;
  color: #CCCCCC;
}

.dark .catalog-badge-auth {
  background: #2D4A4A;
  color: #A8D4D4;
}

.dark .catalog-badge-manage,
.dark .catalog-badge-create,
.dark .catalog-badge-supply {
  background: #4A4020;
  color: #FFE699;
}

.dark .catalog-pricing-link {
  color: #66AAFF;
}

.dark .catalog-tab.active {
  color: var(--ups-gold);
}

/* ========================================
   Developer Resources Section
   ======================================== */
.dev-resources-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px;
  border-top: 1px solid var(--grayscale-a4);
}

.dev-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.dev-resource-card {
  background: var(--white);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.dev-resource-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dev-resource-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

.dev-resource-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dev-resource-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--grayscale-a12);
  margin: 0 0 8px 0;
}

.dev-resource-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grayscale-a10);
  margin: 0 0 16px 0;
}

.dev-resource-text-link {
  color: #0066CC;
  text-decoration: none;
}

.dev-resource-text-link:hover {
  text-decoration: underline;
}
.dev-resource-text-link:focus-visible {
  text-decoration: underline;
}

.dev-resource-link {
  display: inline-block;
  color: #0662bb;
  border: 2px solid #0662bb;
  padding: 10px 22px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
  align-self: flex-start;
}

.dev-resource-link:hover {
  background: rgba(6, 98, 187, 0.05);
  border-color: #418ed9;
  color: #418ed9;
}
.dev-resource-link:focus-visible {
  background: rgba(6, 98, 187, 0.05);
  border-color: #418ed9;
  color: #418ed9;
}

/* Dark mode for Developer Resources */
.dark .dev-resource-card {
  background: #2A2A2A;
}

.dark .dev-resource-text-link {
  color: #66AAFF;
}

.dark .dev-resource-link {
  color: #66AAFF;
  border-color: #66AAFF;
}

.dark .dev-resource-link:hover {
  background: rgba(102, 170, 255, 0.1);
  border-color: #99CCFF;
  color: #99CCFF;
}
.dark .dev-resource-link:focus-visible {
  background: rgba(102, 170, 255, 0.1);
  border-color: #99CCFF;
  color: #99CCFF;
}

/* Responsive for Developer Resources */
@media (max-width: 1024px) {

  .dev-resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  .dev-resources-section {
    padding: 48px 24px;
  }

  .dev-resources-grid {
    grid-template-columns: 1fr;
  }

}

/* UPS Footer Styles */

/* Main footer container */
.ups-footer {
  background-color: #351C15;
  color: #FFFFFF;
}

.ups-footer-container {
  max-width: 1492px;
  margin: 0 auto;
  padding: 40px 60px 80px;
}

/* 4-column grid layout */
.ups-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  justify-content: space-between;
}

/* Footer column */
.ups-footer-column {
  display: flex;
  flex-direction: column;
}

/* Column title */
.ups-footer-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
  padding: 20px 0;
  color: #FFFFFF;
}

/* Links list */
.ups-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual link */
.ups-footer-links li {
  padding: 10px 0;
}

.ups-footer-link {
  color: #BFB8AF;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.ups-footer-link:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
.ups-footer-link:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}

/* External link icon */
.ups-footer-external-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Social media icon - circular border style */
.ups-footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
}

/* Social link with icon and text */
.ups-footer-social-link {
  display: flex;
  align-items: center;
  gap: 2ch;
  color: #BFB8AF;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.ups-footer-social-link:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
.ups-footer-social-link:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Legal links section */
.ups-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 32px;
  padding-top: 24px;
  display: flex;
  flex-flow: row wrap;
  gap: 14px;
  font-size: 14px;
}

.ups-footer-legal-link {
  color: #BFB8AF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ups-footer-legal-link:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
.ups-footer-legal-link:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Pipe divider between legal links */
.ups-footer-legal-divider {
  color: rgba(255, 255, 255, 0.4);
}

/* Copyright text */
.ups-footer-copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 30px;
}

/* Responsive: stack columns on tablet */
@media (max-width: 1024px) {

  .ups-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* Responsive: stack columns on mobile */
@media (max-width: 640px) {

  .ups-footer-grid {
    grid-template-columns: 1fr;
  }

  .ups-footer-container {
    padding: 32px 16px;
  }

  .ups-footer-legal {
    flex-direction: column;
    gap: 12px;
  }

  .ups-footer-legal-divider {
    display: none;
  }

}