@charset "UTF-8";
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter/Inter-Regular-ofDvCin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter/Inter-Medium-A6fsSHA.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter/Inter-SemiBold-GyZPrHn.woff2") format("woff2");
}
@font-face {
  font-family: "Beatrice";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Beatrice/Beatrice-Regular-vdxgjZQ.woff") format("woff");
}
@font-face {
  font-family: "Beatrice";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Beatrice/Beatrice-Medium-ULhqLcB.woff") format("woff");
}
@font-face {
  font-family: "Untitled Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/UntitledSans/UntitledSans-Regular-i_CWcQ_.woff") format("woff");
}
@font-face {
  font-family: "Untitled Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/UntitledSans/UntitledSans-Medium-aPaBZ98.woff") format("woff");
}
@font-face {
  font-family: "Acumin Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/AcuminPro/AcuminPro-Regular-i5OmUGf.woff2") format("woff2");
}
@font-face {
  font-family: "Acumin Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/AcuminPro/AcuminPro-Medium-Ipri6o-.woff2") format("woff2");
}
@font-face {
  font-family: "Acumin Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/AcuminPro/AcuminPro-SemiBold-M5__yct.woff2") format("woff2");
}
@font-face {
  font-family: "Acumin Pro Wide";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/AcuminPro/AcuminProWide-Regular-ZwZT9lw.woff2") format("woff2");
}
.hd-PlainButton:focus-visible, .hd-LinkList__link:focus-visible, .hd-LinkCard:focus-visible, .hd-DropdownItem__link:focus-visible, .hd-Button:focus-visible, .hd-Breadcrumb__link:focus-visible, .prose a:focus-visible {
  outline: var(--hd-focus-outlineWidth) solid var(--hd-focus-outlineColor);
  outline-offset: var(--hd-focus-outlineOffset);
}

.hd-Drawer__dialog::backdrop, .hd-Dialog__dialog::backdrop {
  background: color-mix(in oklab, var(--hd-color-foundation-static-black) 50%, transparent);
  backdrop-filter: blur(var(--hd-backdrop-blur));
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

.hd-mt-1 {
  margin-top: var(--hd-dimension-1);
}

.hd-mt-2 {
  margin-top: var(--hd-dimension-2);
}

.hd-mt-4 {
  margin-top: var(--hd-dimension-4);
}

.hd-mt-8 {
  margin-top: var(--hd-dimension-8);
}

.hd-mt-16 {
  margin-top: var(--hd-dimension-16);
}

.hd-mt-24 {
  margin-top: var(--hd-dimension-24);
}

.hd-mt-32 {
  margin-top: var(--hd-dimension-32);
}

.hd-mt-64 {
  margin-top: var(--hd-dimension-64);
}

.hd-mb-1 {
  margin-bottom: var(--hd-dimension-1);
}

.hd-mb-2 {
  margin-bottom: var(--hd-dimension-2);
}

.hd-mb-4 {
  margin-bottom: var(--hd-dimension-4);
}

.hd-mb-8 {
  margin-bottom: var(--hd-dimension-8);
}

.hd-mb-16 {
  margin-bottom: var(--hd-dimension-16);
}

.hd-mb-24 {
  margin-bottom: var(--hd-dimension-24);
}

.hd-mb-32 {
  margin-bottom: var(--hd-dimension-32);
}

.hd-mb-64 {
  margin-bottom: var(--hd-dimension-64);
}

.hd-ml-1 {
  margin-left: var(--hd-dimension-1);
}

.hd-ml-2 {
  margin-left: var(--hd-dimension-2);
}

.hd-ml-4 {
  margin-left: var(--hd-dimension-4);
}

.hd-ml-8 {
  margin-left: var(--hd-dimension-8);
}

.hd-ml-16 {
  margin-left: var(--hd-dimension-16);
}

.hd-ml-24 {
  margin-left: var(--hd-dimension-24);
}

.hd-ml-32 {
  margin-left: var(--hd-dimension-32);
}

.hd-ml-64 {
  margin-left: var(--hd-dimension-64);
}

.hd-mr-1 {
  margin-right: var(--hd-dimension-1);
}

.hd-mr-2 {
  margin-right: var(--hd-dimension-2);
}

.hd-mr-4 {
  margin-right: var(--hd-dimension-4);
}

.hd-mr-8 {
  margin-right: var(--hd-dimension-8);
}

.hd-mr-16 {
  margin-right: var(--hd-dimension-16);
}

.hd-mr-24 {
  margin-right: var(--hd-dimension-24);
}

.hd-mr-32 {
  margin-right: var(--hd-dimension-32);
}

.hd-mr-64 {
  margin-right: var(--hd-dimension-64);
}

.hd-my-1 {
  margin-top: var(--hd-dimension-1);
  margin-bottom: var(--hd-dimension-1);
}

.hd-my-2 {
  margin-top: var(--hd-dimension-2);
  margin-bottom: var(--hd-dimension-2);
}

.hd-my-4 {
  margin-top: var(--hd-dimension-4);
  margin-bottom: var(--hd-dimension-4);
}

.hd-my-8 {
  margin-top: var(--hd-dimension-8);
  margin-bottom: var(--hd-dimension-8);
}

.hd-my-16 {
  margin-top: var(--hd-dimension-16);
  margin-bottom: var(--hd-dimension-16);
}

.hd-my-24 {
  margin-top: var(--hd-dimension-24);
  margin-bottom: var(--hd-dimension-24);
}

.hd-my-32 {
  margin-top: var(--hd-dimension-32);
  margin-bottom: var(--hd-dimension-32);
}

.hd-my-64 {
  margin-top: var(--hd-dimension-64);
  margin-bottom: var(--hd-dimension-64);
}

.hd-mx-1 {
  margin-left: var(--hd-dimension-1);
  margin-right: var(--hd-dimension-1);
}

.hd-mx-2 {
  margin-left: var(--hd-dimension-2);
  margin-right: var(--hd-dimension-2);
}

.hd-mx-4 {
  margin-left: var(--hd-dimension-4);
  margin-right: var(--hd-dimension-4);
}

.hd-mx-8 {
  margin-left: var(--hd-dimension-8);
  margin-right: var(--hd-dimension-8);
}

.hd-mx-16 {
  margin-left: var(--hd-dimension-16);
  margin-right: var(--hd-dimension-16);
}

.hd-mx-24 {
  margin-left: var(--hd-dimension-24);
  margin-right: var(--hd-dimension-24);
}

.hd-mx-32 {
  margin-left: var(--hd-dimension-32);
  margin-right: var(--hd-dimension-32);
}

.hd-mx-64 {
  margin-left: var(--hd-dimension-64);
  margin-right: var(--hd-dimension-64);
}

:root {
  --hd-color-foundation-static-white: oklch(100% 0 0);
  --hd-color-foundation-static-black: oklch(16.42% 0.002 286.17);
  --hd-color-foundation-gray-0: oklch(100% 0 0);
  --hd-color-foundation-gray-1: oklch(98.81% 0 0);
  --hd-color-foundation-gray-2: oklch(97.02% 0 0);
  --hd-color-foundation-gray-3: oklch(95.51% 0 0);
  --hd-color-foundation-gray-4: oklch(93.1% 0 0);
  --hd-color-foundation-gray-5: oklch(89.75% 0 0);
  --hd-color-foundation-gray-6: oklch(86.07% 0 0);
  --hd-color-foundation-gray-7: oklch(79.21% 0 0);
  --hd-color-foundation-gray-8: oklch(72.52% 0 0);
  --hd-color-foundation-gray-9: oklch(56.93% 0 0);
  --hd-color-foundation-gray-10: oklch(51.73% 0 0);
  --hd-color-foundation-gray-11: oklch(41.28% 0 0);
  --hd-color-foundation-gray-12: oklch(25.2% 0 0);
  --hd-color-foundation-gray-a1: oklch(33.68% 0 0 / 2%);
  --hd-color-foundation-gray-a2: oklch(11.49% 0 0 / 4%);
  --hd-color-foundation-gray-a3: oklch(11.49% 0 0 / 6%);
  --hd-color-foundation-gray-a4: oklch(21.34% 0 0 / 10%);
  --hd-color-foundation-gray-a5: oklch(15.43% 0 0 / 14%);
  --hd-color-foundation-gray-a6: oklch(15.91% 0 0 / 19%);
  --hd-color-foundation-gray-a7: oklch(9.69% 0 0 / 27%);
  --hd-color-foundation-gray-a8: oklch(6.72% 0 0 / 35%);
  --hd-color-foundation-gray-a9: oklch(9.69% 0 0 / 54%);
  --hd-color-foundation-gray-a10: oklch(9.69% 0 0 / 60%);
  --hd-color-foundation-gray-a11: oklch(6.72% 0 0 / 71%);
  --hd-color-foundation-gray-a12: oklch(6.72% 0 0 / 87%);
  --hd-color-foundation-red-1: oklch(98.87% 0.0055 31.05);
  --hd-color-foundation-red-2: oklch(97.3% 0.0132 28.86);
  --hd-color-foundation-red-3: oklch(95.74% 0.0211 28.33);
  --hd-color-foundation-red-4: oklch(93.52% 0.0328 29.37);
  --hd-color-foundation-red-5: oklch(90.26% 0.0507 28.66);
  --hd-color-foundation-red-6: oklch(87.05% 0.0695 29.53);
  --hd-color-foundation-red-7: oklch(80.47% 0.1057 28.89);
  --hd-color-foundation-red-8: oklch(74.11% 0.1405 28.78);
  --hd-color-foundation-red-9: oklch(59.51% 0.219 28.78);
  --hd-color-foundation-red-10: oklch(48.99% 0.2003 28.72);
  --hd-color-foundation-red-11: oklch(43.52% 0.1782 28.57);
  --hd-color-foundation-red-12: oklch(28.01% 0.1147 28.61);
  --hd-color-foundation-orange-1: oklch(98.78% 0.0075 61.46);
  --hd-color-foundation-orange-2: oklch(97.25% 0.0198 70);
  --hd-color-foundation-orange-3: oklch(95.59% 0.0299 65.85);
  --hd-color-foundation-orange-4: oklch(93.38% 0.0474 68.21);
  --hd-color-foundation-orange-5: oklch(89.9% 0.0714 66.02);
  --hd-color-foundation-orange-6: oklch(86.69% 0.0969 66.46);
  --hd-color-foundation-orange-7: oklch(80.2% 0.1441 63);
  --hd-color-foundation-orange-8: oklch(73.81% 0.1826 54.28);
  --hd-color-foundation-orange-9: oklch(66.85% 0.169404 53.1304);
  --hd-color-foundation-orange-10: oklch(57.97% 0.145661 53.7957);
  --hd-color-foundation-orange-11: oklch(45.73% 0.1123 55.67);
  --hd-color-foundation-orange-12: oklch(25.43% 0.0584 62.19);
  --hd-color-foundation-green-1: oklch(98.63% 0.0025 165.08);
  --hd-color-foundation-green-2: oklch(97.15% 0.0066 160.08);
  --hd-color-foundation-green-3: oklch(95.4% 0.01 164.87);
  --hd-color-foundation-green-4: oklch(92.94% 0.0151 164.71);
  --hd-color-foundation-green-5: oklch(89.37% 0.0227 164.46);
  --hd-color-foundation-green-6: oklch(85.82% 0.0298 166.37);
  --hd-color-foundation-green-7: oklch(78.84% 0.0463 165.58);
  --hd-color-foundation-green-8: oklch(71.63% 0.0606 166.35);
  --hd-color-foundation-green-9: oklch(55.66% 0.0953 165.55);
  --hd-color-foundation-green-10: oklch(50.53% 0.104 165.3);
  --hd-color-foundation-green-11: oklch(40.24% 0.0822 166.09);
  --hd-color-foundation-green-12: oklch(24.23% 0.0495 165.47);
  --hd-color-foundation-teal-1: oklch(98.88% 0.0032 197.11);
  --hd-color-foundation-teal-2: oklch(97.09% 0.0074 197.03);
  --hd-color-foundation-teal-3: oklch(95.36% 0.0106 196.98);
  --hd-color-foundation-teal-4: oklch(92.82% 0.017 196.86);
  --hd-color-foundation-teal-5: oklch(89.41% 0.0265 193.75);
  --hd-color-foundation-teal-6: oklch(85.83% 0.0349 196.52);
  --hd-color-foundation-teal-7: oklch(78.75% 0.0532 194.61);
  --hd-color-foundation-teal-8: oklch(71.49% 0.0699 195.7);
  --hd-color-foundation-teal-9: oklch(55.73% 0.0917 195.81);
  --hd-color-foundation-teal-10: oklch(50.8% 0.0835 195.93);
  --hd-color-foundation-teal-11: oklch(40.53% 0.0667 196.29);
  --hd-color-foundation-teal-12: oklch(24.46% 0.0398 197.61);
  --hd-color-foundation-blue-1: oklch(98.94% 0.0042 236.5);
  --hd-color-foundation-blue-2: oklch(97.03% 0.0103 247.93);
  --hd-color-foundation-blue-3: oklch(95.4% 0.0155 247.99);
  --hd-color-foundation-blue-4: oklch(93.04% 0.0232 246.05);
  --hd-color-foundation-blue-5: oklch(89.56% 0.0359 243);
  --hd-color-foundation-blue-6: oklch(85.95% 0.0484 244.54);
  --hd-color-foundation-blue-7: oklch(79.21% 0.074 244.5);
  --hd-color-foundation-blue-8: oklch(72.34% 0.099 245.47);
  --hd-color-foundation-blue-9: oklch(56.6% 0.1324 249.05);
  --hd-color-foundation-blue-10: oklch(51.56% 0.1199 249.19);
  --hd-color-foundation-blue-11: oklch(41.29% 0.0913 248.26);
  --hd-color-foundation-blue-12: oklch(24.89% 0.0479 247.39);
  --hd-color-foundation-purple-1: oklch(98.86% 0.0026 286.35);
  --hd-color-foundation-purple-2: oklch(97.26% 0.008 293.91);
  --hd-color-foundation-purple-3: oklch(95.65% 0.0135 295.32);
  --hd-color-foundation-purple-4: oklch(93.27% 0.0218 297.41);
  --hd-color-foundation-purple-5: oklch(90% 0.0318 297.69);
  --hd-color-foundation-purple-6: oklch(86.52% 0.0434 298.75);
  --hd-color-foundation-purple-7: oklch(79.88% 0.0643 298.16);
  --hd-color-foundation-purple-8: oklch(73.13% 0.0845 297.72);
  --hd-color-foundation-purple-9: oklch(58.19% 0.1336 297.84);
  --hd-color-foundation-purple-10: oklch(53.25% 0.1484 297.81);
  --hd-color-foundation-purple-11: oklch(42.59% 0.1269 297.7);
  --hd-color-foundation-purple-12: oklch(25.72% 0.0765 297.2);
  --hd-color-whcc-gray-0: oklch(100% 0 0);
  --hd-color-whcc-gray-1: oklch(98.81% 0 0);
  --hd-color-whcc-gray-2: oklch(97.24% 0.0011 197.14);
  --hd-color-whcc-gray-3: oklch(95.47% 0.0017 247.84);
  --hd-color-whcc-gray-4: oklch(93.16% 0.0027 286.35);
  --hd-color-whcc-gray-5: oklch(89.63% 0.0026 228.79);
  --hd-color-whcc-gray-6: oklch(86.28% 0.0035 247.86);
  --hd-color-whcc-gray-7: oklch(79.17% 0.0061 264.53);
  --hd-color-whcc-gray-8: oklch(72.35% 0.0085 253.87);
  --hd-color-whcc-gray-9: oklch(57.04% 0.011 252.87);
  --hd-color-whcc-gray-10: oklch(51.9% 0.0093 253.91);
  --hd-color-whcc-gray-11: oklch(41.28% 0.0087 268.44);
  --hd-color-whcc-gray-12: oklch(24.75% 0.0041 264.49);
  --hd-color-whcc-gray-a1: oklch(33.68% 0 0 / 2%);
  --hd-color-whcc-gray-a2: oklch(21.57% 0.0309 195.11 / 4%);
  --hd-color-whcc-gray-a3: oklch(27.43% 0.0331 247.41 / 7%);
  --hd-color-whcc-gray-a4: oklch(22.42% 0.0386 282.84 / 10%);
  --hd-color-whcc-gray-a5: oklch(21.79% 0.0228 232.78 / 15%);
  --hd-color-whcc-gray-a6: oklch(17.86% 0.0274 251.46 / 19%);
  --hd-color-whcc-gray-a7: oklch(15.53% 0.0326 260.86 / 28%);
  --hd-color-whcc-gray-a8: oklch(16.19% 0.0343 254.32 / 37%);
  --hd-color-whcc-gray-a9: oklch(13.78% 0.0312 239.31 / 55%);
  --hd-color-whcc-gray-a10: oklch(13.63% 0.0221 248.6 / 61%);
  --hd-color-whcc-gray-a11: oklch(11.41% 0.021 257.04 / 72%);
  --hd-color-whcc-gray-a12: oklch(9.62% 0.0094 258.7 / 88%);
  --hd-color-whcc-blue-1: oklch(98.7% 0.0062 255.47);
  --hd-color-whcc-blue-2: oklch(97.17% 0.012 259.82);
  --hd-color-whcc-blue-3: oklch(95.49% 0.0188 255.53);
  --hd-color-whcc-blue-4: oklch(93.03% 0.0306 258.94);
  --hd-color-whcc-blue-5: oklch(89.72% 0.0459 256.47);
  --hd-color-whcc-blue-6: oklch(85.99% 0.0618 257.52);
  --hd-color-whcc-blue-7: oklch(79.35% 0.0941 257.08);
  --hd-color-whcc-blue-8: oklch(72.61% 0.1283 257.2);
  --hd-color-whcc-blue-9: oklch(51.4% 0.1931 259.4);
  --hd-color-whcc-blue-10: oklch(47.2% 0.1769 259.44);
  --hd-color-whcc-blue-11: oklch(41.97% 0.1545 259.41);
  --hd-color-whcc-blue-12: oklch(33.34% 0.1153 258.43);
  --hd-color-whcc-blue-a1: oklch(60.45% 0.2161 258.29 / 3%);
  --hd-color-whcc-blue-a2: oklch(55.74% 0.2143 260.43 / 6%);
  --hd-color-whcc-blue-a3: oklch(57.78% 0.1974 257.87 / 10%);
  --hd-color-whcc-blue-a4: oklch(54.53% 0.2256 260.54 / 14%);
  --hd-color-whcc-blue-a5: oklch(55.25% 0.2248 260.06 / 21%);
  --hd-color-whcc-blue-a6: oklch(54.6% 0.2235 260.12 / 28%);
  --hd-color-whcc-blue-a7: oklch(54.44% 0.221 260.02 / 42%);
  --hd-color-whcc-blue-a8: oklch(54.6% 0.2235 260.12 / 56%);
  --hd-color-whcc-blue-a9: oklch(49.38% 0.2001 259.96 / 95%);
  --hd-color-whcc-blue-a10: oklch(45.94% 0.1828 259.72 / 96%);
  --hd-color-whcc-blue-a11: oklch(39.91% 0.1634 260.21 / 96%);
  --hd-color-whcc-blue-a12: oklch(32.1% 0.119 258.65 / 98%);
  --hd-color-whcc-yellow-1: oklch(98.79% 0.0163 91.55);
  --hd-color-whcc-yellow-2: oklch(97.05% 0.0393 91.2);
  --hd-color-whcc-yellow-3: oklch(95.55% 0.0627 92.45);
  --hd-color-whcc-yellow-4: oklch(93.12% 0.0951 91.98);
  --hd-color-whcc-yellow-5: oklch(89.76% 0.1415 91.9);
  --hd-color-whcc-yellow-6: oklch(86.2% 0.1448 91.77);
  --hd-color-whcc-yellow-7: oklch(79.31% 0.1334 91.4);
  --hd-color-whcc-yellow-8: oklch(72.48% 0.1218 91.53);
  --hd-color-whcc-yellow-9: oklch(89.05% 0.1495 91.57);
  --hd-color-whcc-yellow-10: oklch(84.98% 0.173865 86.5517);
  --hd-color-whcc-yellow-11: oklch(54.19% 0.0936 91.73);
  --hd-color-whcc-yellow-12: oklch(25.07% 0.0421 92.04);
  --hd-color-whcc-tan-1: oklch(98.64% 0.0025 48.72);
  --hd-color-whcc-tan-2: oklch(97.11% 0.0034 67.78);
  --hd-color-whcc-tan-3: oklch(95.44% 0.0059 59.65);
  --hd-color-whcc-tan-4: oklch(93.32% 0.0097 72.66);
  --hd-color-whcc-tan-5: oklch(89.83% 0.015 70.88);
  --hd-color-whcc-tan-6: oklch(86.26% 0.0187 70.21);
  --hd-color-whcc-tan-7: oklch(79.25% 0.0295 65.67);
  --hd-color-whcc-tan-8: oklch(72.79% 0.0394 68.45);
  --hd-color-whcc-tan-9: oklch(57.13% 0.0509 65.44);
  --hd-color-whcc-tan-10: oklch(46.78% 0.0405 66.57);
  --hd-color-whcc-tan-11: oklch(41.47% 0.0344 64.92);
  --hd-color-whcc-tan-12: oklch(27.06% 0.02 70.12);
  --hd-color-prodpi-gray-0: oklch(100% 0 0);
  --hd-color-prodpi-gray-1: oklch(98.81% 0 0);
  --hd-color-prodpi-gray-2: oklch(97.04% 0.0013 286.38);
  --hd-color-prodpi-gray-3: oklch(95.51% 0 0);
  --hd-color-prodpi-gray-4: oklch(93.13% 0.0013 286.37);
  --hd-color-prodpi-gray-5: oklch(89.51% 0.0027 286.35);
  --hd-color-prodpi-gray-6: oklch(86.41% 0.0014 286.37);
  --hd-color-prodpi-gray-7: oklch(79.58% 0.0028 286.34);
  --hd-color-prodpi-gray-8: oklch(72.32% 0.0057 286.26);
  --hd-color-prodpi-gray-9: oklch(57.09% 0.0076 286.16);
  --hd-color-prodpi-gray-10: oklch(51.55% 0.0078 286.12);
  --hd-color-prodpi-gray-11: oklch(41.39% 0.0049 286.18);
  --hd-color-prodpi-gray-12: oklch(0% 0 0);
  --hd-color-prodpi-gray-a1: oklch(33.68% 0 0 / 2%);
  --hd-color-prodpi-gray-a2: oklch(13.73% 0.054 276.61 / 4%);
  --hd-color-prodpi-gray-a3: oklch(11.49% 0 0 / 6%);
  --hd-color-prodpi-gray-a4: oklch(21.82% 0.0195 284.67 / 10%);
  --hd-color-prodpi-gray-a5: oklch(12.57% 0.033 280.54 / 14%);
  --hd-color-prodpi-gray-a6: oklch(11.91% 0.0159 283.72 / 18%);
  --hd-color-prodpi-gray-a7: oklch(13.27% 0.0161 283.98 / 27%);
  --hd-color-prodpi-gray-a8: oklch(12.3% 0.0268 281.72 / 36%);
  --hd-color-prodpi-gray-a9: oklch(10.54% 0.0264 280.87 / 54%);
  --hd-color-prodpi-gray-a10: oklch(9.41% 0.0276 279.71 / 60%);
  --hd-color-prodpi-gray-a11: oklch(7.64% 0.025 278.68 / 71%);
  --hd-color-prodpi-gray-a12: oklch(9.89% 0.0082 284.8 / 88%);
  --hd-color-prodpi-teal-1: oklch(98.96% 0.0021 197.12);
  --hd-color-prodpi-teal-2: oklch(97.12% 0.0035 219.53);
  --hd-color-prodpi-teal-3: oklch(95.62% 0.0076 207.14);
  --hd-color-prodpi-teal-4: oklch(93.18% 0.0117 196.95);
  --hd-color-prodpi-teal-5: oklch(90.02% 0.014 202.44);
  --hd-color-prodpi-teal-6: oklch(86.42% 0.0188 209.43);
  --hd-color-prodpi-teal-7: oklch(79.24% 0.0286 205.07);
  --hd-color-prodpi-teal-8: oklch(71.81% 0.0331 211.6);
  --hd-color-prodpi-teal-9: oklch(57.15% 0.0357 221.72);
  --hd-color-prodpi-teal-10: oklch(49.47% 0.0303 221.12);
  --hd-color-prodpi-teal-11: oklch(40.03% 0.0255 223.66);
  --hd-color-prodpi-teal-12: oklch(25.47% 0.0378 218.76);
  --hd-color-prodpi-teal-a1: oklch(47.84% 0.0805 194.8 / 0%);
  --hd-color-prodpi-teal-a2: oklch(39.26% 0.0679 224.96 / 5%);
  --hd-color-prodpi-teal-a3: oklch(44.54% 0.0756 209.97 / 8%);
  --hd-color-prodpi-teal-a4: oklch(45.8% 0.0733 194.9 / 13%);
  --hd-color-prodpi-teal-a5: oklch(39.01% 0.0658 203.73 / 17%);
  --hd-color-prodpi-teal-a6: oklch(38.36% 0.0664 214.38 / 23%);
  --hd-color-prodpi-teal-a7: oklch(39.18% 0.0659 208.24 / 35%);
  --hd-color-prodpi-teal-a8: oklch(35.32% 0.0619 216.31 / 45%);
  --hd-color-prodpi-teal-a9: oklch(27.75% 0.0541 227.95 / 62%);
  --hd-color-prodpi-teal-a10: oklch(24.33% 0.0419 225.13 / 70%);
  --hd-color-prodpi-teal-a11: oklch(24.33% 0.0419 225.13 / 70%);
  --hd-color-prodpi-teal-a12: oklch(24.33% 0.0419 225.13 / 70%);
  --hd-color-prodpi-brass-1: oklch(98.83% 0.0029 84.56);
  --hd-color-prodpi-brass-2: oklch(97.18% 0.0079 73.74);
  --hd-color-prodpi-brass-3: oklch(95.46% 0.0125 75.37);
  --hd-color-prodpi-brass-4: oklch(93.18% 0.0188 75.32);
  --hd-color-prodpi-brass-5: oklch(89.7% 0.0281 76.19);
  --hd-color-prodpi-brass-6: oklch(86.3% 0.038 75.11);
  --hd-color-prodpi-brass-7: oklch(79.49% 0.0563 76.78);
  --hd-color-prodpi-brass-8: oklch(69.64% 0.0917 74.72);
  --hd-color-prodpi-brass-9: oklch(57.5% 0.0769 74.22);
  --hd-color-prodpi-brass-10: oklch(52% 0.0634 76.1);
  --hd-color-prodpi-brass-11: oklch(41.54% 0.0512 75.85);
  --hd-color-prodpi-brass-12: oklch(25.24% 0.0307 74.27);
  --hd-color-prodpi-brass-a1: oklch(59.78% 0.0943 82.82 / 3%);
  --hd-color-prodpi-brass-a2: oklch(52.71% 0.1199 61.64 / 6%);
  --hd-color-prodpi-brass-a3: oklch(54.04% 0.1151 66.11 / 10%);
  --hd-color-prodpi-brass-a4: oklch(54.04% 0.1151 66.11 / 15%);
  --hd-color-prodpi-brass-a5: oklch(52.6% 0.1136 65.99 / 22%);
  --hd-color-prodpi-brass-a6: oklch(52.48% 0.1165 63.65 / 29%);
  --hd-color-prodpi-brass-a7: oklch(50.93% 0.1137 65.6497 / 42%);
  --hd-color-prodpi-brass-a8: oklch(53.7% 0.1208 64.31 / 65%);
  --hd-color-prodpi-brass-a9: oklch(40.36% 0.087 67.7 / 73%);
  --hd-color-prodpi-brass-a10: oklch(35.45% 0.0765 69.07 / 76%);
  --hd-color-prodpi-brass-a11: oklch(28.82% 0.0589 70.67 / 84%);
  --hd-color-prodpi-brass-a12: oklch(19.23% 0.0355 77.72 / 94%);
}

:root {
  --_hd-dimension: 0.25rem;
  --hd-dimension-1: 1px;
  --hd-dimension-2: calc(var(--_hd-dimension) * 0.5);
  --hd-dimension-4: calc(var(--_hd-dimension) * 1);
  --hd-dimension-6: calc(var(--_hd-dimension) * 1.5);
  --hd-dimension-8: calc(var(--_hd-dimension) * 2);
  --hd-dimension-10: calc(var(--_hd-dimension) * 2.5);
  --hd-dimension-12: calc(var(--_hd-dimension) * 3);
  --hd-dimension-14: calc(var(--_hd-dimension) * 3.5);
  --hd-dimension-16: calc(var(--_hd-dimension) * 4);
  --hd-dimension-20: calc(var(--_hd-dimension) * 5);
  --hd-dimension-24: calc(var(--_hd-dimension) * 6);
  --hd-dimension-28: calc(var(--_hd-dimension) * 7);
  --hd-dimension-32: calc(var(--_hd-dimension) * 8);
  --hd-dimension-36: calc(var(--_hd-dimension) * 9);
  --hd-dimension-40: calc(var(--_hd-dimension) * 10);
  --hd-dimension-44: calc(var(--_hd-dimension) * 11);
  --hd-dimension-48: calc(var(--_hd-dimension) * 12);
  --hd-dimension-56: calc(var(--_hd-dimension) * 14);
  --hd-dimension-64: calc(var(--_hd-dimension) * 16);
  --hd-dimension-80: calc(var(--_hd-dimension) * 20);
  --hd-dimension-96: calc(var(--_hd-dimension) * 24);
  --hd-dimension-112: calc(var(--_hd-dimension) * 28);
  --hd-dimension-128: calc(var(--_hd-dimension) * 32);
  --hd-dimension-144: calc(var(--_hd-dimension) * 36);
  --hd-dimension-160: calc(var(--_hd-dimension) * 40);
  --hd-dimension-176: calc(var(--_hd-dimension) * 44);
  --hd-dimension-192: calc(var(--_hd-dimension) * 48);
  --hd-dimension-208: calc(var(--_hd-dimension) * 52);
  --hd-dimension-224: calc(var(--_hd-dimension) * 56);
  --hd-dimension-240: calc(var(--_hd-dimension) * 60);
  --hd-dimension-256: calc(var(--_hd-dimension) * 64);
  --hd-dimension-288: calc(var(--_hd-dimension) * 72);
  --hd-dimension-320: calc(var(--_hd-dimension) * 80);
  --hd-dimension-384: calc(var(--_hd-dimension) * 96);
  --hd-dimension-448: calc(var(--_hd-dimension) * 112);
  --hd-dimension-512: calc(var(--_hd-dimension) * 128);
  --hd-dimension-576: calc(var(--_hd-dimension) * 144);
  --hd-dimension-640: calc(var(--_hd-dimension) * 160);
  --hd-dimension-768: calc(var(--_hd-dimension) * 192);
  --hd-dimension-896: calc(var(--_hd-dimension) * 224);
  --hd-dimension-1024: calc(var(--_hd-dimension) * 256);
  --hd-dimension-1152: calc(var(--_hd-dimension) * 288);
  --hd-dimension-1280: calc(var(--_hd-dimension) * 320);
  --hd-dimension-1440: calc(var(--_hd-dimension) * 360);
  --hd-dimension-1600: calc(var(--_hd-dimension) * 400);
  --hd-dimension-1760: calc(var(--_hd-dimension) * 440);
  --hd-dimension-1920: calc(var(--_hd-dimension) * 480);
  --hd-radius-0: 0;
  --hd-radius-2: 0.125rem;
  --hd-radius-4: 0.25rem;
  --hd-radius-6: 0.375rem;
  --hd-radius-8: 0.5rem;
  --hd-radius-10: 0.625rem;
  --hd-radius-12: 0.75rem;
  --hd-radius-14: 0.875rem;
  --hd-radius-16: 1rem;
  --hd-radius-full: 9999px;
}

:root {
  --hd-fontFamily-inter:
    "Inter", "Helvetica Neue", "Helvetica", "Arial", ui-sans-serif, system-ui,
    sans-serif;
  --hd-fontFamily-untitledSans:
    "Untitled Sans", "Helvetica Neue", "Helvetica", "Arial", ui-sans-serif,
    system-ui, sans-serif;
  --hd-fontFamily-beatrice:
    "Beatrice", "Helvetica Neue", "Helvetica", "Arial", ui-sans-serif,
    system-ui, sans-serif;
  --hd-fontFamily-acuminPro:
    "Acumin Pro", "Helvetica Neue", "Helvetica", "Arial", ui-sans-serif,
    system-ui, sans-serif;
  --hd-fontFamily-acuminProWide:
    "Acumin Pro Wide", "Helvetica Neue", "Helvetica", "Arial", ui-sans-serif,
    system-ui, sans-serif;
  --hd-fontSize-11: 0.6875rem;
  --hd-fontSize-12: 0.75rem;
  --hd-fontSize-14: 0.875rem;
  --hd-fontSize-16: 1rem;
  --hd-fontSize-18: 1.125rem;
  --hd-fontSize-20: 1.25rem;
  --hd-fontSize-22: 1.375rem;
  --hd-fontSize-25: 1.5625rem;
  --hd-fontSize-28: 1.75rem;
  --hd-fontSize-32: 2rem;
  --hd-fontSize-36: 2.25rem;
  --hd-fontSize-42: 2.625rem;
  --hd-fontSize-46: 2.875rem;
  --hd-fontSize-52: 3.25rem;
  --hd-fontSize-58: 3.625rem;
  --hd-fontSize-64: 4rem;
  --hd-fontSize-74: 4.625rem;
  --hd-fontSize-84: 5.25rem;
  --hd-lineHeight-xs: 1.25;
  --hd-lineHeight-sm: 1.375;
  --hd-lineHeight-md: 1.5;
  --hd-lineHeight-lg: 1.625;
  --hd-lineHeight-xl: 2;
  --hd-body-font-xs: var(--hd-fontWeight-body) var(--hd-fontSize-12) /
    var(--hd-lineHeight-md) var(--hd-fontFamily-body);
  --hd-body-font-sm: var(--hd-fontWeight-body) var(--hd-fontSize-14) /
    var(--hd-lineHeight-md) var(--hd-fontFamily-body);
  --hd-body-font-md: var(--hd-fontWeight-body) var(--hd-fontSize-16) /
    var(--hd-lineHeight-md) var(--hd-fontFamily-body);
  --hd-subheading-font-md: var(--hd-fontWeight-heading) var(--hd-fontSize-14) /
    var(--hd-lineHeight-sm) var(--hd-fontFamily-heading);
  --hd-heading-font-xs: var(--hd-fontWeight-heading) var(--hd-fontSize-14) /
    var(--hd-lineHeight-sm) var(--hd-fontFamily-heading);
  --hd-heading-font-sm: var(--hd-fontWeight-heading) var(--hd-fontSize-16) /
    var(--hd-lineHeight-sm) var(--hd-fontFamily-heading);
  --hd-heading-font-md: var(--hd-fontWeight-heading) var(--hd-fontSize-18) /
    var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
  --hd-heading-font-lg: var(--hd-fontWeight-heading) var(--hd-fontSize-22) /
    var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
  --hd-heading-font-xl: var(--hd-fontWeight-heading) var(--hd-fontSize-25) /
    var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
  --hd-heading-font-2xl: var(--hd-fontWeight-heading) var(--hd-fontSize-28) /
    var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
  --hd-heading-font-3xl: var(--hd-fontWeight-heading) var(--hd-fontSize-32) /
    var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
}
@media (min-width: 64rem) {
  :root {
    --hd-heading-font-lg: var(--hd-fontWeight-heading) var(--hd-fontSize-25) /
      var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
    --hd-heading-font-xl: var(--hd-fontWeight-heading) var(--hd-fontSize-28) /
      var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
    --hd-heading-font-2xl: var(--hd-fontWeight-heading) var(--hd-fontSize-32) /
      var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
    --hd-heading-font-3xl: var(--hd-fontWeight-heading) var(--hd-fontSize-36) /
      var(--hd-lineHeight-xs) var(--hd-fontFamily-heading);
  }
}

:root {
  --hd-focus-outlineColor: var(--hd-fgColor-brand-primary);
  --hd-focus-outlineWidth: 2px;
  --hd-focus-outlineOffset: 2px;
  --hd-buttonGroup-gap: var(--hd-dimension-12);
  --hd-backdrop-blur: var(--hd-dimension-4);
  --hd-container-maxWidth: var(--hd-dimension-1920);
  --hd-container-padding: var(--hd-dimension-16);
}
@media (min-width: 40rem) {
  :root {
    --hd-container-padding: var(--hd-dimension-24);
  }
}
@media (min-width: 64rem) {
  :root {
    --hd-container-padding: var(--hd-dimension-32);
  }
}
@media (min-width: 96rem) {
  :root {
    --hd-container-padding: var(--hd-dimension-40);
  }
}

:root {
  --hd-button-brand-primary-fgColor: var(--hd-fgColor-brand-onStrong);
  --hd-button-brand-primary-bgColor: var(--hd-bgColor-brand-strong);
  --hd-button-brand-primary-bgColor-hover: var(--hd-bgColor-brand-strong-hover);
  --hd-button-brand-primary-bgColor-active: var(
    --hd-bgColor-brand-strong-active
  );
  --hd-button-brand-secondary-fgColor: var(--hd-fgColor-brand-primary);
  --hd-button-brand-secondary-bgColor: transparent;
  --hd-button-brand-secondary-bgColor-hover: var(--hd-color-foundation-gray-a2);
  --hd-button-brand-secondary-bgColor-active: var(
    --hd-color-foundation-gray-a3
  );
  --hd-button-brand-secondary-borderColor: var(--hd-borderColor-brand-strong);
  --hd-button-brand-tertiary-fgColor: var(--hd-fgColor-brand-primary);
  --hd-button-brand-tertiary-bgColor: transparent;
  --hd-button-brand-tertiary-bgColor-hover: var(--hd-color-foundation-gray-a2);
  --hd-button-brand-tertiary-bgColor-active: var(--hd-color-foundation-gray-a3);
  --hd-button-neutral-primary-fgColor: var(--hd-color-foundation-gray-12);
  --hd-button-neutral-primary-bgColor: var(--hd-color-foundation-gray-a4);
  --hd-button-neutral-primary-bgColor-hover: var(--hd-color-foundation-gray-a5);
  --hd-button-neutral-primary-bgColor-active: var(
    --hd-color-foundation-gray-a6
  );
  --hd-button-neutral-secondary-fgColor: var(--hd-color-foundation-gray-12);
  --hd-button-neutral-secondary-bgColor: transparent;
  --hd-button-neutral-secondary-bgColor-hover: var(
    --hd-color-foundation-gray-a3
  );
  --hd-button-neutral-secondary-bgColor-active: var(
    --hd-color-foundation-gray-a5
  );
  --hd-button-neutral-secondary-borderColor: var(--hd-color-foundation-gray-a6);
  --hd-button-neutral-tertiary-fgColor: var(--hd-color-foundation-gray-12);
  --hd-button-neutral-tertiary-bgColor: transparent;
  --hd-button-neutral-tertiary-bgColor-hover: var(
    --hd-color-foundation-gray-a3
  );
  --hd-button-neutral-tertiary-bgColor-active: var(
    --hd-color-foundation-gray-a5
  );
  --hd-button-destructive-primary-fgColor: var(--hd-fgColor-negative-onStrong);
  --hd-button-destructive-primary-bgColor: var(--hd-bgColor-negative-strong);
  --hd-button-destructive-primary-bgColor-hover: var(
    --hd-bgColor-negative-strong-hover
  );
  --hd-button-destructive-primary-bgColor-active: var(
    --hd-bgColor-negative-strong-active
  );
  --hd-button-destructive-secondary-fgColor: var(
    --hd-fgColor-negative-onSubtle
  );
  --hd-button-destructive-secondary-bgColor: transparent;
  --hd-button-destructive-secondary-bgColor-hover: var(
    --hd-bgColor-negative-subtle-hover
  );
  --hd-button-destructive-secondary-bgColor-active: var(
    --hd-bgColor-negative-subtle-active
  );
  --hd-button-destructive-secondary-borderColor: var(
    --hd-borderColor-negative-strong
  );
  --hd-button-destructive-tertiary-fgColor: var(--hd-fgColor-negative-onSubtle);
  --hd-button-destructive-tertiary-bgColor: transparent;
  --hd-button-destructive-tertiary-bgColor-hover: var(
    --hd-bgColor-negative-subtle-hover
  );
  --hd-button-destructive-tertiary-bgColor-active: var(
    --hd-bgColor-negative-subtle-active
  );
  --hd-button-inverse-primary-fgColor: var(--hd-color-foundation-gray-12);
  --hd-button-inverse-primary-bgColor: var(--hd-color-foundation-gray-0);
  --hd-button-inverse-primary-bgColor-hover: var(--hd-color-foundation-gray-4);
  --hd-button-inverse-primary-bgColor-active: var(--hd-color-foundation-gray-2);
  --hd-button-fontFamily: var(--hd-fontFamily-inter);
  --hd-button-fontWeight: 600;
  --hd-button-opticalAlignment-translateY: 0;
  --hd-button-letterSpacing: 0;
  --hd-button-textTransform: none;
  --hd-button-borderRadius: var(--hd-radius-4);
}

:root {
  --hd-label-fontFamily: var(--hd-fontFamily-body);
  --hd-label-fontWeight: 600;
  --hd-input-fontFamily: var(--hd-fontFamily-body);
  --hd-input-borderColor: var(--hd-color-foundation-gray-a8);
  --hd-input-borderRadius: var(--hd-radius-2);
  --hd-input-focusOutlineColor: color-mix(
    in srgb,
    var(--hd-borderColor-selected) 50%,
    transparent
  );
  --hd-input-focusOutlineWidth: var(--hd-dimension-2);
  --hd-input-focusOutlineOffset: var(--hd-dimension-0);
  --hd-input-borderColor-disabled: var(--hd-borderColor-neutral-disabled);
  --hd-input-bgColor-disabled: var(--hd-bgColor-neutral-disabled);
}

:root {
  --hd-bgColor-neutral-primary: var(--hd-color-foundation-gray-0);
  --hd-bgColor-neutral-primary-hover: var(--hd-color-foundation-gray-3);
  --hd-bgColor-neutral-primary-active: var(--hd-color-foundation-gray-4);
  --hd-bgColor-neutral-secondary: var(--hd-color-foundation-gray-2);
  --hd-bgColor-neutral-secondary-hover: var(--hd-color-foundation-gray-3);
  --hd-bgColor-neutral-secondary-active: var(--hd-color-foundation-gray-4);
  --hd-bgColor-neutral-tertiary: var(--hd-color-foundation-gray-3);
  --hd-bgColor-neutral-tertiary-hover: var(--hd-color-foundation-gray-4);
  --hd-bgColor-neutral-tertiary-active: var(--hd-color-foundation-gray-5);
  --hd-bgColor-neutral-inverse: var(--hd-color-foundation-gray-12);
  --hd-bgColor-neutral-inverse-hover: var(--hd-color-foundation-gray-10);
  --hd-bgColor-neutral-inverse-active: var(--hd-color-foundation-gray-11);
  --hd-bgColor-neutral-disabled: var(--hd-color-foundation-gray-a3);
  --hd-bgColor-selected-strong: var(--hd-bgColor-brand-strong);
  --hd-bgColor-selected-subtle: var(--hd-bgColor-brand-subtle);
  --hd-bgColor-brand-strong: var(--hd-color-foundation-gray-12);
  --hd-bgColor-brand-strong-hover: var(--hd-color-foundation-gray-10);
  --hd-bgColor-brand-strong-active: var(--hd-color-foundation-gray-11);
  --hd-bgColor-brand-subtle: var(--hd-color-foundation-gray-4);
  --hd-bgColor-brand-subtle-hover: var(--hd-color-foundation-gray-6);
  --hd-bgColor-brand-subtle-active: var(--hd-color-foundation-gray-7);
  --hd-bgColor-info-strong: var(--hd-color-foundation-blue-9);
  --hd-bgColor-info-strong-hover: var(--hd-color-foundation-blue-10);
  --hd-bgColor-info-strong-active: var(--hd-color-foundation-blue-11);
  --hd-bgColor-info-subtle: var(--hd-color-foundation-blue-3);
  --hd-bgColor-info-subtle-hover: var(--hd-color-foundation-blue-4);
  --hd-bgColor-info-subtle-active: var(--hd-color-foundation-blue-5);
  --hd-bgColor-positive-strong: var(--hd-color-foundation-green-9);
  --hd-bgColor-positive-strong-hover: var(--hd-color-foundation-green-10);
  --hd-bgColor-positive-strong-active: var(--hd-color-foundation-green-11);
  --hd-bgColor-positive-subtle: var(--hd-color-foundation-green-3);
  --hd-bgColor-positive-subtle-hover: var(--hd-color-foundation-green-4);
  --hd-bgColor-positive-subtle-active: var(--hd-color-foundation-green-5);
  --hd-bgColor-caution-strong: var(--hd-color-foundation-orange-9);
  --hd-bgColor-caution-strong-hover: var(--hd-color-foundation-orange-10);
  --hd-bgColor-caution-strong-active: var(--hd-color-foundation-orange-11);
  --hd-bgColor-caution-subtle: var(--hd-color-foundation-orange-3);
  --hd-bgColor-caution-subtle-hover: var(--hd-color-foundation-orange-4);
  --hd-bgColor-caution-subtle-active: var(--hd-color-foundation-orange-5);
  --hd-bgColor-negative-strong: var(--hd-color-foundation-red-9);
  --hd-bgColor-negative-strong-hover: var(--hd-color-foundation-red-10);
  --hd-bgColor-negative-strong-active: var(--hd-color-foundation-red-11);
  --hd-bgColor-negative-subtle: var(--hd-color-foundation-red-3);
  --hd-bgColor-negative-subtle-hover: var(--hd-color-foundation-red-4);
  --hd-bgColor-negative-subtle-active: var(--hd-color-foundation-red-5);
  --hd-fgColor-neutral-primary: var(--hd-color-foundation-gray-12);
  --hd-fgColor-neutral-secondary: var(--hd-color-foundation-gray-10);
  --hd-fgColor-neutral-inverse: var(--hd-color-foundation-gray-0);
  --hd-fgColor-neutral-disabled: var(--hd-color-foundation-gray-a5);
  --hd-fgColor-neutral-onDisabled: var(--hd-color-foundation-gray-a7);
  --hd-fgColor-brand-primary: var(--hd-color-foundation-gray-12);
  --hd-fgColor-brand-onSubtle: var(--hd-color-foundation-gray-12);
  --hd-fgColor-brand-onStrong: var(--hd-color-foundation-gray-0);
  --hd-fgColor-info-primary: var(--hd-color-foundation-blue-10);
  --hd-fgColor-info-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-info-onSubtle: var(--hd-color-foundation-blue-11);
  --hd-fgColor-positive-primary: var(--hd-color-foundation-green-10);
  --hd-fgColor-positive-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-positive-onSubtle: var(--hd-color-foundation-green-11);
  --hd-fgColor-caution-primary: var(--hd-color-foundation-orange-10);
  --hd-fgColor-caution-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-caution-onSubtle: var(--hd-color-foundation-orange-11);
  --hd-fgColor-negative-primary: var(--hd-color-foundation-red-10);
  --hd-fgColor-negative-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-negative-onSubtle: var(--hd-color-foundation-red-11);
  --hd-borderColor-selected: var(--hd-color-foundation-gray-12);
  --hd-borderColor-neutral-subtle: var(--hd-color-foundation-gray-a4);
  --hd-borderColor-neutral-disabled: var(--hd-color-foundation-gray-a3);
  --hd-borderColor-brand-strong: var(--hd-color-foundation-gray-12);
  --hd-borderColor-brand-subtle: var(--hd-color-foundation-gray-4);
  --hd-borderColor-info-subtle: var(--hd-color-foundation-blue-7);
  --hd-borderColor-positive-subtle: var(--hd-color-foundation-green-7);
  --hd-borderColor-caution-subtle: var(--hd-color-foundation-orange-7);
  --hd-borderColor-negative-strong: var(--hd-color-foundation-red-9);
  --hd-borderColor-negative-subtle: var(--hd-color-foundation-red-7);
  --hd-borderRadius-xs: var(--hd-radius-2);
  --hd-borderRadius-sm: var(--hd-radius-4);
  --hd-borderRadius-md: var(--hd-radius-6);
  --hd-borderRadius-lg: var(--hd-radius-8);
  --hd-borderRadius-xl: var(--hd-radius-12);
  --hd-fontFamily-heading: var(--hd-fontFamily-inter);
  --hd-fontFamily-body: var(--hd-fontFamily-inter);
  --hd-fontWeight-heading: 600;
  --hd-fontWeight-body: 400;
  --hd-fontWeight-body-medium: 500;
  --hd-fontWeight-body-strong: 600;
  --hd-letterSpacing-uppercase: 1.5px;
  --hd-font-opticalAlignment-translateY: 0;
  --hd-font-opticalAlignmentNum-translateY: 0;
  --hd-bgColor-neutral-productPreview: var(--hd-color-foundation-gray-a2);
  --hd-loading-bgColor: var(--hd-color-foundation-gray-a3);
  --hd-loading-fgColor: var(--hd-fgColor-brand-primary);
  --hd-dropzone-bgColor-active: var(--hd-color-foundation-gray-a7);
  --hd-dropzone-borderColor-active: var(--hd-color-foundation-gray-12);
  --hd-badge-fontFamily: var(--hd-fontFamily-inter);
}

[data-brand=whcc] {
  --hd-button-brand-primary-fgColor: var(--hd-fgColor-brand-onStrong);
  --hd-button-brand-primary-bgColor: var(--hd-bgColor-brand-strong);
  --hd-button-brand-primary-bgColor-hover: var(--hd-bgColor-brand-strong-hover);
  --hd-button-brand-primary-bgColor-active: var(
    --hd-bgColor-brand-strong-active
  );
  --hd-button-brand-secondary-fgColor: var(--hd-fgColor-brand-primary);
  --hd-button-brand-secondary-bgColor: transparent;
  --hd-button-brand-secondary-bgColor-hover: var(--hd-color-whcc-blue-a2);
  --hd-button-brand-secondary-bgColor-active: var(--hd-color-whcc-blue-a3);
  --hd-button-brand-secondary-borderColor: var(--hd-borderColor-brand-strong);
  --hd-button-brand-tertiary-fgColor: var(--hd-fgColor-brand-primary);
  --hd-button-brand-tertiary-bgColor: transparent;
  --hd-button-brand-tertiary-bgColor-hover: var(--hd-color-whcc-blue-a2);
  --hd-button-brand-tertiary-bgColor-active: var(--hd-color-whcc-blue-a3);
  --hd-button-neutral-primary-fgColor: var(--hd-color-whcc-gray-12);
  --hd-button-neutral-primary-bgColor: var(--hd-color-whcc-gray-a4);
  --hd-button-neutral-primary-bgColor-hover: var(--hd-color-whcc-gray-a5);
  --hd-button-neutral-primary-bgColor-active: var(--hd-color-whcc-gray-a6);
  --hd-button-neutral-secondary-fgColor: var(--hd-color-whcc-gray-12);
  --hd-button-neutral-secondary-bgColor: transparent;
  --hd-button-neutral-secondary-bgColor-hover: var(--hd-color-whcc-gray-a3);
  --hd-button-neutral-secondary-bgColor-active: var(--hd-color-whcc-gray-a5);
  --hd-button-neutral-secondary-borderColor: var(--hd-color-whcc-gray-a6);
  --hd-button-neutral-tertiary-fgColor: var(--hd-color-whcc-gray-12);
  --hd-button-neutral-tertiary-bgColor: transparent;
  --hd-button-neutral-tertiary-bgColor-hover: var(--hd-color-whcc-gray-a3);
  --hd-button-neutral-tertiary-bgColor-active: var(--hd-color-whcc-gray-a5);
  --hd-button-inverse-primary-fgColor: var(--hd-color-whcc-gray-12);
  --hd-button-inverse-primary-bgColor: var(--hd-color-whcc-gray-0);
  --hd-button-inverse-primary-bgColor-hover: var(--hd-color-whcc-gray-4);
  --hd-button-inverse-primary-bgColor-active: var(--hd-color-whcc-gray-2);
  --hd-button-fontFamily: var(--hd-fontFamily-beatrice);
  --hd-button-fontWeight: 500;
  --hd-button-opticalAlignment-translateY: 0;
  --hd-button-letterSpacing: 0;
  --hd-button-textTransform: none;
  --hd-button-borderRadius: var(--hd-radius-4);
}

[data-brand=whcc] {
  --hd-label-fontFamily: var(--hd-fontFamily-body);
  --hd-label-fontWeight: 500;
  --hd-input-fontFamily: var(--hd-fontFamily-body);
  --hd-input-borderColor: var(--hd-color-foundation-gray-a8);
  --hd-input-borderRadius: var(--hd-radius-4);
}

[data-brand=whcc] {
  --hd-bgColor-neutral-primary: var(--hd-color-whcc-gray-0);
  --hd-bgColor-neutral-primary-hover: var(--hd-color-whcc-gray-2);
  --hd-bgColor-neutral-primary-active: var(--hd-color-whcc-gray-3);
  --hd-bgColor-neutral-secondary: var(--hd-color-whcc-gray-2);
  --hd-bgColor-neutral-secondary-hover: var(--hd-color-whcc-gray-4);
  --hd-bgColor-neutral-secondary-active: var(--hd-color-whcc-gray-5);
  --hd-bgColor-neutral-tertiary: var(--hd-color-whcc-gray-3);
  --hd-bgColor-neutral-tertiary-hover: var(--hd-color-whcc-gray-4);
  --hd-bgColor-neutral-tertiary-active: var(--hd-color-whcc-gray-5);
  --hd-bgColor-neutral-inverse: var(--hd-color-whcc-gray-12);
  --hd-bgColor-neutral-inverse-hover: var(--hd-color-whcc-gray-10);
  --hd-bgColor-neutral-inverse-active: var(--hd-color-whcc-gray-11);
  --hd-bgColor-neutral-disabled: var(--hd-color-whcc-gray-a3);
  --hd-bgColor-selected-strong: var(--hd-bgColor-brand-strong);
  --hd-bgColor-selected-subtle: var(--hd-bgColor-brand-subtle);
  --hd-bgColor-brand-strong: var(--hd-color-whcc-blue-9);
  --hd-bgColor-brand-strong-hover: var(--hd-color-whcc-blue-10);
  --hd-bgColor-brand-strong-active: var(--hd-color-whcc-blue-11);
  --hd-bgColor-brand-subtle: var(--hd-color-whcc-blue-3);
  --hd-bgColor-brand-subtle-hover: var(--hd-color-whcc-blue-4);
  --hd-bgColor-brand-subtle-active: var(--hd-color-whcc-blue-5);
  --hd-bgColor-info-strong: var(--hd-color-whcc-blue-9);
  --hd-bgColor-info-strong-hover: var(--hd-color-whcc-blue-10);
  --hd-bgColor-info-strong-active: var(--hd-color-whcc-blue-11);
  --hd-bgColor-info-subtle: var(--hd-color-whcc-blue-3);
  --hd-bgColor-info-subtle-hover: var(--hd-color-whcc-blue-4);
  --hd-bgColor-info-subtle-active: var(--hd-color-whcc-blue-5);
  --hd-fgColor-neutral-primary: var(--hd-color-whcc-gray-12);
  --hd-fgColor-neutral-secondary: var(--hd-color-whcc-gray-10);
  --hd-fgColor-neutral-inverse: var(--hd-color-whcc-gray-0);
  --hd-fgColor-neutral-disabled: var(--hd-color-whcc-gray-a5);
  --hd-fgColor-neutral-onDisabled: var(--hd-color-whcc-gray-a7);
  --hd-fgColor-brand-primary: var(--hd-color-whcc-blue-9);
  --hd-fgColor-brand-onSubtle: var(--hd-color-whcc-blue-11);
  --hd-fgColor-brand-onStrong: var(--hd-color-foundation-static-white);
  --hd-fgColor-info-primary: var(--hd-color-whcc-blue-10);
  --hd-fgColor-info-onSubtle: var(--hd-color-whcc-blue-11);
  --hd-borderColor-selected: var(--hd-color-whcc-blue-9);
  --hd-borderColor-neutral-subtle: var(--hd-color-whcc-gray-a4);
  --hd-borderColor-neutral-disabled: var(--hd-color-whcc-gray-a3);
  --hd-borderColor-brand-strong: var(--hd-color-whcc-blue-9);
  --hd-borderColor-brand-subtle: var(--hd-color-whcc-blue-7);
  --hd-borderColor-info-subtle: var(--hd-color-whcc-blue-7);
  --hd-borderRadius-xs: var(--hd-radius-4);
  --hd-borderRadius-sm: var(--hd-radius-6);
  --hd-borderRadius-md: var(--hd-radius-8);
  --hd-borderRadius-lg: var(--hd-radius-12);
  --hd-borderRadius-xl: var(--hd-radius-16);
  --hd-fontFamily-heading: var(--hd-fontFamily-beatrice);
  --hd-fontFamily-body: var(--hd-fontFamily-untitledSans);
  --hd-fontWeight-heading: 500;
  --hd-fontWeight-body: 400;
  --hd-fontWeight-body-strong: 500;
  --hd-letterSpacing-uppercase: 1px;
  --hd-font-opticalAlignmentNum-translateY: -0.015em;
  --hd-bgColor-neutral-productPreview: var(--hd-color-whcc-gray-a2);
  --hd-loading-bgColor: var(--hd-color-whcc-gray-a3);
  --hd-dropzone-bgColor-active: var(--hd-color-whcc-blue-a5);
  --hd-dropzone-borderColor-active: var(--hd-borderColor-brand-strong);
  --hd-badge-fontFamily: var(--hd-fontFamily-beatrice);
}

[data-brand=prodpi] {
  --hd-button-brand-primary-fgColor: var(--hd-fgColor-brand-onStrong);
  --hd-button-brand-primary-bgColor: var(--hd-bgColor-brand-strong);
  --hd-button-brand-primary-bgColor-hover: var(--hd-bgColor-brand-strong-hover);
  --hd-button-brand-primary-bgColor-active: var(
    --hd-bgColor-brand-strong-active
  );
  --hd-button-brand-secondary-fgColor: var(--hd-fgColor-brand-primary);
  --hd-button-brand-secondary-bgColor: transparent;
  --hd-button-brand-secondary-bgColor-hover: var(--hd-color-prodpi-teal-a4);
  --hd-button-brand-secondary-bgColor-active: var(--hd-color-prodpi-teal-a6);
  --hd-button-brand-secondary-borderColor: var(--hd-borderColor-brand-strong);
  --hd-button-brand-tertiary-fgColor: var(--hd-fgColor-brand-primary);
  --hd-button-brand-tertiary-bgColor: transparent;
  --hd-button-brand-tertiary-bgColor-hover: var(--hd-color-prodpi-teal-a4);
  --hd-button-brand-tertiary-bgColor-active: var(--hd-color-prodpi-teal-a6);
  --hd-button-neutral-primary-fgColor: var(--hd-color-prodpi-brass-12);
  --hd-button-neutral-primary-bgColor: var(--hd-color-prodpi-brass-a4);
  --hd-button-neutral-primary-bgColor-hover: var(--hd-color-prodpi-brass-a5);
  --hd-button-neutral-primary-bgColor-active: var(--hd-color-prodpi-brass-a6);
  --hd-button-neutral-secondary-fgColor: var(--hd-color-prodpi-brass-12);
  --hd-button-neutral-secondary-bgColor: transparent;
  --hd-button-neutral-secondary-bgColor-hover: var(--hd-color-prodpi-brass-a3);
  --hd-button-neutral-secondary-bgColor-active: var(--hd-color-prodpi-brass-a5);
  --hd-button-neutral-secondary-borderColor: var(--hd-color-prodpi-gray-a7);
  --hd-button-neutral-tertiary-fgColor: var(--hd-color-prodpi-brass-12);
  --hd-button-neutral-tertiary-bgColor: transparent;
  --hd-button-neutral-tertiary-bgColor-hover: var(--hd-color-prodpi-brass-a3);
  --hd-button-neutral-tertiary-bgColor-active: var(--hd-color-prodpi-brass-a5);
  --hd-button-inverse-primary-fgColor: var(--hd-color-prodpi-brass-12);
  --hd-button-inverse-primary-bgColor: var(--hd-color-prodpi-brass-1);
  --hd-button-inverse-primary-bgColor-hover: var(--hd-color-prodpi-brass-4);
  --hd-button-inverse-primary-bgColor-active: var(--hd-color-prodpi-brass-2);
  --hd-button-fontFamily: var(--hd-fontFamily-acuminProWide);
  --hd-button-fontWeight: 400;
  --hd-button-opticalAlignment-translateY: 2px;
  --hd-button-letterSpacing: 0.6px;
  --hd-button-textTransform: uppercase;
  --hd-button-borderRadius: var(--hd-radius-0);
}

[data-brand=prodpi] {
  --hd-label-fontFamily: var(--hd-fontFamily-body);
  --hd-label-fontWeight: 600;
  --hd-input-fontFamily: var(--hd-fontFamily-body);
  --hd-input-borderColor: var(--hd-color-foundation-gray-a12);
  --hd-input-borderRadius: var(--hd-radius-0);
}

[data-brand=prodpi] {
  --hd-bgColor-neutral-primary: var(--hd-color-prodpi-brass-1);
  --hd-bgColor-neutral-primary-hover: var(--hd-color-prodpi-brass-3);
  --hd-bgColor-neutral-primary-active: var(--hd-color-prodpi-brass-4);
  --hd-bgColor-neutral-secondary: var(--hd-color-prodpi-brass-2);
  --hd-bgColor-neutral-secondary-hover: var(--hd-color-prodpi-brass-3);
  --hd-bgColor-neutral-secondary-active: var(--hd-color-prodpi-brass-4);
  --hd-bgColor-neutral-tertiary: var(--hd-color-prodpi-brass-3);
  --hd-bgColor-neutral-tertiary-hover: var(--hd-color-prodpi-brass-4);
  --hd-bgColor-neutral-tertiary-active: var(--hd-color-prodpi-brass-5);
  --hd-bgColor-neutral-inverse: var(--hd-color-prodpi-gray-12);
  --hd-bgColor-neutral-inverse-hover: var(--hd-color-prodpi-gray-10);
  --hd-bgColor-neutral-inverse-active: var(--hd-color-prodpi-gray-11);
  --hd-bgColor-neutral-disabled: var(--hd-color-prodpi-gray-a3);
  --hd-bgColor-selected-strong: var(--hd-bgColor-brand-strong);
  --hd-bgColor-selected-subtle: var(--hd-bgColor-brand-subtle);
  --hd-bgColor-brand-strong: var(--hd-color-prodpi-teal-12);
  --hd-bgColor-brand-strong-hover: var(--hd-color-prodpi-teal-10);
  --hd-bgColor-brand-strong-active: var(--hd-color-prodpi-teal-11);
  --hd-bgColor-brand-subtle: var(--hd-color-prodpi-teal-3);
  --hd-bgColor-brand-subtle-hover: var(--hd-color-prodpi-teal-5);
  --hd-bgColor-brand-subtle-active: var(--hd-color-prodpi-teal-6);
  --hd-fgColor-neutral-primary: var(--hd-color-prodpi-gray-12);
  --hd-fgColor-neutral-secondary: var(--hd-color-prodpi-gray-10);
  --hd-fgColor-neutral-inverse: var(--hd-color-prodpi-gray-0);
  --hd-fgColor-neutral-disabled: var(--hd-color-prodpi-gray-a5);
  --hd-fgColor-neutral-onDisabled: var(--hd-color-prodpi-gray-a7);
  --hd-fgColor-brand-primary: var(--hd-color-prodpi-teal-12);
  --hd-fgColor-brand-onSubtle: var(--hd-color-prodpi-teal-11);
  --hd-fgColor-brand-onStrong: var(--hd-color-prodpi-gray-0);
  --hd-borderColor-selected: var(--hd-color-prodpi-teal-12);
  --hd-borderColor-neutral-subtle: var(--hd-color-prodpi-gray-a5);
  --hd-borderColor-neutral-disabled: var(--hd-color-prodpi-gray-a3);
  --hd-borderColor-brand-strong: var(--hd-color-prodpi-teal-9);
  --hd-borderColor-brand-subtle: var(--hd-color-prodpi-teal-7);
  --hd-borderRadius-xs: 0;
  --hd-borderRadius-sm: 0;
  --hd-borderRadius-md: 0;
  --hd-borderRadius-lg: 0;
  --hd-borderRadius-xl: 0;
  --hd-fontFamily-heading: var(--hd-fontFamily-acuminProWide);
  --hd-fontFamily-body: var(--hd-fontFamily-acuminPro);
  --hd-fontWeight-heading: 400;
  --hd-fontWeight-body: 400;
  --hd-fontWeight-body-strong: 600;
  --hd-letterSpacing-uppercase: 2px;
  --hd-font-opticalAlignment-translateY: 0.125em;
  --hd-font-opticalAlignmentNum-translateY: 0.0625em;
  --hd-bgColor-neutral-productPreview: var(--hd-color-prodpi-brass-a2);
  --hd-container-maxWidth: 1440px;
  --hd-loading-bgColor: var(--hd-color-prodpi-gray-a3);
  --hd-dropzone-bgColor-active: var(--hd-color-prodpi-teal-a5);
  --hd-dropzone-borderColor-active: var(--hd-borderColor-brand-strong);
  --hd-badge-fontFamily: var(--hd-fontFamily-acuminProWide);
}

/*
  Adapted from Tailwind CSS https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
*/
/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/
*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: var(--hd-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
  font-feature-settings: var(--hd-default-font-feature-settings, normal); /* 5 */
  font-variation-settings: var(--hd-default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: var(--hd-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
  font-feature-settings: var(--hd-default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: var(--hd-default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/
ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/
:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/
:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/
::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/
::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentColor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
}
/*
  Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/
::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/
::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/
button,
input:where([type=button], [type=reset], [type=submit]),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/
[hidden]:where(:not([hidden=until-found])) {
  display: none !important;
}

body {
  font-family: var(--hd-fontFamily-body);
  font-size: var(--hd-fontSize-16);
  line-height: var(--hd-lineHeight-md);
  color: var(--hd-fgColor-neutral-primary);
  background: var(--hd-bgColor-neutral-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hd-heading-xs {
  font: var(--hd-heading-font-xs);
}

.hd-heading-sm {
  font: var(--hd-heading-font-sm);
}

.hd-heading-md {
  font: var(--hd-heading-font-md);
}

.hd-heading-lg {
  font: var(--hd-heading-font-lg);
}

.hd-heading-xl {
  font: var(--hd-heading-font-xl);
}

.hd-heading-2xl {
  font: var(--hd-heading-font-2xl);
}

.hd-heading-3xl {
  font: var(--hd-heading-font-3xl);
}

.hd-subheading-md-uppercase {
  font: var(--hd-subheading-font-md);
  letter-spacing: var(--hd-letterSpacing-uppercase);
  text-transform: uppercase;
}

.hd-body-xs {
  font: var(--hd-body-font-xs);
}

.hd-body-sm {
  font: var(--hd-body-font-sm);
}

.hd-body-md {
  font: var(--hd-body-font-md);
}

.prose > * {
  margin-top: 1lh;
}
.prose a {
  text-decoration: underline 1px;
  text-underline-offset: 0.125lh;
}
.prose a:hover, .prose a:focus-visible {
  text-decoration: none;
}
.prose strong {
  font-weight: var(--hd-fontWeight-body-strong);
}
.prose ul {
  padding-left: 0.75lh;
  list-style-type: disc;
}
.prose ul li + li {
  margin-top: 0.25lh;
}
.prose > :first-child {
  margin-top: 0;
}
.prose > :last-child {
  margin-bottom: 0;
}

html:has([data-disable-document-scroll=true]) {
  overflow: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hd-ActionToolbar {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-8);
  padding-bottom: var(--hd-dimension-16);
}

.hd-ActionToolbar__columnLeft,
.hd-ActionToolbar__columnRight {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-8);
}

.hd-ActionToolbar__columnRight {
  justify-content: flex-end;
  margin-left: auto;
}

.hd-Alert {
  padding-block: var(--hd-dimension-64);
  padding-inline: var(--hd-dimension-32);
  border-radius: var(--hd-borderRadius-xl);
  background: var(--_hd-alert-bgColor);
}

.hd-Alert--brand {
  --_hd-alert-bgColor: var(--hd-bgColor-brand-subtle);
  --_hd-alert-title-fgColor: var(--hd-fgColor-brand-primary);
  --_hd-alert-description-fgColor: var(--hd-fgColor-neutral-primary);
}

.hd-Alert--error {
  --_hd-alert-bgColor: var(--hd-bgColor-negative-subtle);
  --_hd-alert-title-fgColor: var(--hd-fgColor-negative-onSubtle);
  --_hd-alert-description-fgColor: var(--hd-fgColor-negative-onSubtle);
}

.hd-Alert--positive {
  --_hd-alert-bgColor: var(--hd-bgColor-positive-subtle);
  --_hd-alert-title-fgColor: var(--hd-fgColor-positive-onSubtle);
  --_hd-alert-description-fgColor: var(--hd-fgColor-positive-onSubtle);
}

.hd-Alert__content {
  width: 100%;
  max-width: var(--hd-dimension-448);
  margin-inline: auto;
  text-align: center;
}

.hd-Alert__icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--hd-dimension-16);
}

.hd-Alert__title {
  font: var(--hd-heading-font-lg);
  color: var(--_hd-alert-title-fgColor);
}

.hd-Alert__description {
  font: var(--hd-body-font-md);
  margin-top: var(--hd-dimension-8);
  color: var(--_hd-alert-description-fgColor);
}

.hd-Alert__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hd-dimension-16);
  margin-top: var(--hd-dimension-32);
}

.hd-Badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hd-dimension-24);
  padding-inline: var(--hd-dimension-8);
  border: 1px solid color-mix(in oklab, var(--_hd-badge-borderColor) 10%, var(--_hd-badge-bgColor));
  border-radius: var(--hd-borderRadius-xs);
  letter-spacing: var(--hd-letterSpacing-uppercase);
  font-family: var(--hd-badge-fontFamily);
  font-weight: var(--hd-fontWeight-body-medium);
  font-size: var(--hd-fontSize-11);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--_hd-badge-fgColor);
  background: var(--_hd-badge-bgColor);
}

.hd-Badge--infoSubtle {
  --_hd-badge-fgColor: var(--hd-fgColor-info-onSubtle);
  --_hd-badge-bgColor: var(--hd-bgColor-info-subtle);
  --_hd-badge-borderColor: var(--hd-fgColor-info-primary);
}

.hd-Message {
  display: flex;
  align-items: flex-start;
  gap: var(--hd-dimension-12);
  padding: var(--hd-dimension-16);
}

.hd-Message--info {
  padding: var(--hd-dimension-0);
  background: transparent;
}

.hd-Message--error {
  border-radius: var(--hd-borderRadius-md);
  background: var(--hd-bgColor-negative-subtle);
}

.hd-Message__icon {
  flex-shrink: 0;
  margin-top: var(--hd-dimension-2);
}

.hd-Message__content {
  flex: 1;
}

.hd-Message__text {
  font: var(--hd-body-font-md);
  color: var(--hd-fgColor-negative-onSubtle);
  margin: var(--hd-dimension-0);
  line-height: 1.5;
}
.hd-Message--info .hd-Message__text {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-Message__link {
  color: var(--hd-fgColor-negative-onSubtle);
  text-decoration: underline;
  text-underline-offset: var(--hd-dimension-2);
}
.hd-Message__link:hover {
  text-decoration-thickness: 2px;
}
.hd-Message__link:focus-visible {
  outline: 2px solid var(--hd-fgColor-negative-onSubtle);
  outline-offset: var(--hd-dimension-2);
  border-radius: var(--hd-borderRadius-xs);
}
.hd-Message--info .hd-Message__link {
  color: inherit;
}
.hd-Message--info .hd-Message__link:focus-visible {
  outline-color: currentColor;
}

.hd-Breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hd-dimension-2);
  color: var(--hd-fgColor-neutral-secondary);
  overflow-wrap: break-word;
}

.hd-Breadcrumb__link {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-2);
  height: var(--hd-dimension-20);
  font: var(--hd-body-font-sm);
  line-height: 1;
  transition: color 0.1s ease;
}
.hd-Breadcrumb__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.hd-Breadcrumb__link:active {
  color: var(--hd-fgColor-neutral-primary);
}

.hd-Breadcrumb__label {
  padding: var(--hd-dimension-4);
}

.hd-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hd-dimension-6);
  min-width: var(--hd-dimension-40);
  min-height: var(--hd-dimension-40);
  padding: var(--_hd-button-padding, var(--hd-dimension-6) var(--hd-dimension-14));
  border: 1px solid var(--_hd-button-borderColor, transparent);
  border-radius: var(--_hd-button-borderRadius, var(--hd-button-borderRadius));
  font-family: var(--hd-button-fontFamily);
  font-weight: var(--hd-button-fontWeight);
  font-size: var(--hd-fontSize-14);
  line-height: 1;
  text-transform: var(--hd-button-textTransform);
  letter-spacing: var(--hd-button-letterSpacing);
  color: var(--_hd-button-fgColor);
  background: var(--_hd-button-bgColor);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.hd-Button:hover {
  background: var(--_hd-button-bgColor-hover);
}
.hd-Button:active {
  background: var(--_hd-button-bgColor-active);
}
.hd-Button[aria-disabled=true], .hd-Button:disabled {
  color: var(--hd-fgColor-neutral-onDisabled);
  background: var(--_hd-button-bgColor-disabled, transparent);
  border-color: var(--_hd-button-borderColor-disabled, transparent);
  cursor: default;
  pointer-events: none;
}
.hd-Button:not([aria-busy=true]) .hd-Button__icon-end {
  display: block;
}
.hd-Button:not([aria-busy=true]) .hd-Button__spinner {
  display: none;
}
.hd-Button[aria-busy=true] {
  cursor: default;
  pointer-events: none;
}
.hd-Button[aria-busy=true] .hd-Button__icon-end {
  display: none;
}
.hd-Button[aria-busy=true] .hd-Button__spinner {
  display: block;
}
.hd-Button[aria-busy=true] .hd-Spinner {
  --hd-spinner-fgColor: currentColor;
}

.hd-Button--iconOnly {
  --_hd-button-padding: 0;
}

.hd-Button--brandPrimary {
  --_hd-button-fgColor: var(--hd-button-brand-primary-fgColor);
  --_hd-button-bgColor: var(--hd-button-brand-primary-bgColor);
  --_hd-button-bgColor-hover: var(--hd-button-brand-primary-bgColor-hover);
  --_hd-button-bgColor-active: var(--hd-button-brand-primary-bgColor-active);
  --_hd-button-bgColor-disabled: var(--hd-bgColor-neutral-disabled);
}

.hd-Button--brandSecondary {
  --_hd-button-fgColor: var(--hd-button-brand-secondary-fgColor);
  --_hd-button-bgColor: var(--hd-button-brand-secondary-bgColor);
  --_hd-button-bgColor-hover: var(--hd-button-brand-secondary-bgColor-hover);
  --_hd-button-bgColor-active: var(--hd-button-brand-secondary-bgColor-active);
  --_hd-button-borderColor: var(--hd-button-brand-secondary-borderColor);
  --_hd-button-borderColor-disabled: var(--hd-borderColor-neutral-disabled);
}

.hd-Button--brandTertiary {
  --_hd-button-fgColor: var(--hd-button-brand-tertiary-fgColor);
  --_hd-button-bgColor: var(--hd-button-brand-tertiary-bgColor);
  --_hd-button-bgColor-hover: var(--hd-button-brand-tertiary-bgColor-hover);
  --_hd-button-bgColor-active: var(--hd-button-brand-tertiary-bgColor-active);
  --_hd-button-bgColor-disabled: var(--hd-bgColor-neutral-disabled);
}

.hd-Button--neutralPrimary {
  --_hd-button-fgColor: var(--hd-button-neutral-primary-fgColor);
  --_hd-button-bgColor: var(--hd-button-neutral-primary-bgColor);
  --_hd-button-bgColor-hover: var(--hd-button-neutral-primary-bgColor-hover);
  --_hd-button-bgColor-active: var(--hd-button-neutral-primary-bgColor-active);
  --_hd-button-bgColor-disabled: var(--hd-bgColor-neutral-disabled);
}

.hd-Button--neutralSecondary {
  --_hd-button-fgColor: var(--hd-button-neutral-secondary-fgColor);
  --_hd-button-bgColor: var(--hd-button-neutral-secondary-bgColor);
  --_hd-button-bgColor-hover: var(--hd-button-neutral-secondary-bgColor-hover);
  --_hd-button-bgColor-active: var(
    --hd-button-neutral-secondary-bgColor-active
  );
  --_hd-button-borderColor: var(--hd-button-neutral-secondary-borderColor);
  --_hd-button-borderColor-disabled: var(--hd-borderColor-neutral-disabled);
}

.hd-Button--neutralTertiary {
  --_hd-button-fgColor: var(--hd-button-neutral-tertiary-fgColor);
  --_hd-button-bgColor: var(--hd-button-neutral-tertiary-bgColor);
  --_hd-button-bgColor-hover: var(--hd-button-neutral-tertiary-bgColor-hover);
  --_hd-button-bgColor-active: var(--hd-button-neutral-tertiary-bgColor-active);
  --_hd-button-bgColor-disabled: var(--hd-bgColor-neutral-disabled);
}

.hd-Button--destructivePrimary {
  --_hd-button-fgColor: var(--hd-button-destructive-primary-fgColor);
  --_hd-button-bgColor: var(--hd-button-destructive-primary-bgColor);
  --_hd-button-bgColor-hover: var(
    --hd-button-destructive-primary-bgColor-hover
  );
  --_hd-button-bgColor-active: var(
    --hd-button-destructive-primary-bgColor-active
  );
  --_hd-button-bgColor-disabled: var(--hd-bgColor-neutral-disabled);
  --hd-focus-outlineColor: var(--hd-button-destructive-secondary-borderColor);
}

.hd-Button--destructiveSecondary {
  --_hd-button-fgColor: var(--hd-button-destructive-secondary-fgColor);
  --_hd-button-bgColor: var(--hd-button-destructive-secondary-bgColor);
  --_hd-button-bgColor-hover: var(
    --hd-button-destructive-secondary-bgColor-hover
  );
  --_hd-button-bgColor-active: var(
    --hd-button-destructive-secondary-bgColor-active
  );
  --_hd-button-borderColor: var(--hd-button-destructive-secondary-borderColor);
  --_hd-button-borderColor-disabled: var(--hd-borderColor-neutral-disabled);
  --hd-focus-outlineColor: var(--hd-button-destructive-secondary-borderColor);
}

.hd-Button--destructiveTertiary {
  --_hd-button-fgColor: var(--hd-button-destructive-tertiary-fgColor);
  --_hd-button-bgColor: var(--hd-button-destructive-tertiary-bgColor);
  --_hd-button-bgColor-hover: var(
    --hd-button-destructive-tertiary-bgColor-hover
  );
  --_hd-button-bgColor-active: var(
    --hd-button-destructive-tertiary-bgColor-active
  );
  --hd-focus-outlineColor: var(--hd-button-destructive-secondary-borderColor);
}

.hd-Button--inversePrimary {
  --_hd-button-fgColor: var(--hd-button-inverse-primary-fgColor);
  --_hd-button-bgColor: var(--hd-button-inverse-primary-bgColor);
  --_hd-button-bgColor-hover: var(--hd-button-inverse-primary-bgColor-hover);
  --_hd-button-bgColor-active: var(--hd-button-inverse-primary-bgColor-active);
  --_hd-button-bgColor-disabled: var(--hd-bgColor-neutral-disabled);
}

.hd-Button--rounded {
  --_hd-button-borderRadius: var(--hd-radius-full);
}

.hd-ButtonGroup {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-16);
}

.hd-ButtonGroup__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--hd-buttonGroup-gap);
}

.hd-ButtonGroup__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hd-dimension-2);
}

.hd-CardGrid {
  --_hd-cardGrid-max-col-count: 5;
  --_hd-cardGrid-min-col-size: var(--hd-dimension-256);
  --_hd-cardGrid-gap: var(--hd-dimension-32);
  --_hd-cardGrid-total-gap-size: calc(
    (var(--_hd-cardGrid-max-col-count) - 1) * var(--_hd-cardGrid-gap)
  );
  --_hd-cardGrid-max-col-size: calc(
    (100% - var(--_hd-cardGrid-total-gap-size)) /
      var(--_hd-cardGrid-max-col-count)
  );
  --_hd-cardGrid-calc: min(
    100%,
    max(var(--_hd-cardGrid-min-col-size), var(--_hd-cardGrid-max-col-size))
  );
  display: grid;
  gap: var(--hd-dimension-32);
  grid-template-columns: repeat(auto-fill, minmax(var(--_hd-cardGrid-calc), 1fr));
}

.hd-CardGrid__card {
  display: grid;
}

.hd-CommerceCard {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--hd-borderRadius-sm);
}
.hd-CommerceCard::after {
  content: "";
  position: absolute;
  border: transparent 1px solid;
  inset: calc(-1 * var(--hd-dimension-8));
  border-radius: var(--hd-borderRadius-sm);
  transition: border-color 0.2s ease, border-width 0.2s ease;
  pointer-events: none;
}

.hd-CommerceCard:has(.hd-CommerceCard__mediaLink[href]) {
  cursor: pointer;
}
.hd-CommerceCard:has(.hd-CommerceCard__mediaLink[href]):hover::after {
  border-color: var(--hd-borderColor-neutral-subtle);
}

.hd-CommerceCard__mediaLink:focus-visible {
  outline: none;
}

.hd-CommerceCard:has(.hd-CommerceCard__mediaLink:focus-visible)::after {
  border: var(--hd-focus-outlineWidth) solid var(--hd-focus-outlineColor);
}

.hd-CommerceCard__media {
  position: relative;
  padding: var(--hd-dimension-40);
  background: var(--hd-bgColor-neutral-productPreview);
  border-radius: var(--hd-borderRadius-sm);
}
.hd-CommerceCard__media--fullSize {
  padding: 0;
}
.hd-CommerceCard__media--multiImage {
  background: none;
}

.hd-CommerceCard__badge {
  position: absolute;
  z-index: 1;
  top: var(--hd-dimension-8);
  left: var(--hd-dimension-8);
  display: flex;
}

.hd-CommerceCard__image {
  width: 100%;
  object-fit: contain;
  aspect-ratio: 1;
  filter: drop-shadow(1px 2px 4px color-mix(in srgb, var(--hd-color-foundation-static-black) 15%, transparent));
}
.hd-CommerceCard__image--fullSize {
  filter: none;
}

.hd-CommerceCard__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--hd-dimension-16);
  padding-inline: var(--hd-dimension-14);
  padding-block: var(--hd-dimension-16) var(--hd-dimension-8);
}

.hd-CommerceCard__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-4);
}

.hd-CommerceCard__title {
  font: var(--hd-heading-font-md);
  color: var(--hd-fgColor-neutral-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

.hd-CommerceCard__subtitle {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-primary);
}

.hd-CommerceCard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hd-buttonGroup-gap);
}
.hd-CommerceCard__actions > :first-child {
  flex: 0 0 var(--hd-dimension-64);
}
.hd-CommerceCard__actions > :last-child {
  flex: 1;
}

.hd-CommerceCard__footer {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-secondary);
  border-top: var(--hd-borderColor-neutral-subtle) 1px solid;
  padding-top: var(--hd-dimension-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hd-CountBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--_hd-countBadge-width);
  height: var(--_hd-countBadge-height);
  padding-inline: var(--hd-dimension-4);
  border-radius: var(--_hd-countBadge-borderRadius);
  font-size: var(--_hd-countBadge-fontSize);
  font-weight: var(--hd-fontWeight-body-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--_hd-countBadge-fgColor);
  background: var(--_hd-countBadge-bgColor);
}

.hd-CountBadge--brandSubtle,
[data-state=active].hd-CountBadge--neutralSubtle {
  --_hd-countBadge-fgColor: var(--hd-fgColor-brand-onSubtle);
  --_hd-countBadge-bgColor: var(--hd-bgColor-brand-subtle);
}

.hd-CountBadge--neutralSubtle {
  --_hd-countBadge-fgColor: var(--hd-fgColor-neutral-secondary);
  --_hd-countBadge-bgColor: var(--hd-bgColor-neutral-tertiary);
}

.hd-CountBadge--sm {
  --_hd-countBadge-width: 1.125rem;
  --_hd-countBadge-height: 1.125rem;
  --_hd-countBadge-fontSize: var(--hd-fontSize-12);
}

.hd-CountBadge--md {
  --_hd-countBadge-width: var(--hd-dimension-20);
  --_hd-countBadge-height: var(--hd-dimension-20);
  --_hd-countBadge-fontSize: var(--hd-fontSize-14);
}

.hd-CountBadge--square {
  --_hd-countBadge-borderRadius: var(--hd-borderRadius-xs);
}

.hd-DetailsHeader {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-20);
  margin-bottom: var(--hd-dimension-24);
}

.hd-DetailsHeader__header {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-2);
}

.hd-DetailsHeader__title {
  color: var(--hd-fgColor-neutral-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

.hd-DetailsHeader__subtitle {
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-DetailsHeader__options {
  margin-top: var(--hd-dimension-4);
}

.hd-DetailsHeader__lastUpdated {
  color: var(--hd-fgColor-neutral-secondary);
  margin-top: var(--hd-dimension-4);
}

.hd-DesignLanding__inner {
  padding-block-end: var(--hd-dimension-144);
}

.hd-DesignLanding__title {
  font: var(--hd-heading-font-3xl);
  padding-block: var(--hd-dimension-48);
  text-align: center;
}

.hd-DesignLanding__grid--inset {
  max-width: var(--hd-dimension-1024);
  margin-inline: auto;
}
.hd-DesignLanding__grid--inset .hd-CardGrid {
  --_hd-cardGrid-max-col-count: 2;
  --_hd-cardGrid-min-col-size: var(--hd-dimension-448);
}
@media (min-width: 80rem) {
  .hd-DesignLanding__grid--inset .hd-CardGrid {
    --_hd-cardGrid-min-col-size: var(--hd-dimension-384);
  }
}
@media (min-width: 30rem) and (max-width: 79.9375rem) {
  .hd-DesignLanding__grid--inset .hd-CardGrid {
    --_hd-cardGrid-min-col-size: var(--hd-dimension-320);
  }
}

.hd-DesignsSubnav {
  background: var(--hd-bgColor-neutral-secondary);
  padding: var(--hd-dimension-16) 0;
}

.hd-DesignsSubnav ~ page components {
  max-width: var(--hd-container-maxWidth);
  padding-inline: var(--hd-container-padding);
}

.hd-DesignsSubnav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--hd-container-maxWidth);
  margin-inline: auto;
  padding-inline: var(--hd-container-padding);
}

.hd-DesignsSubnav__nav {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-12);
}
@media (max-width: 30rem) {
  .hd-DesignsSubnav__nav {
    border-left: 1px solid var(--hd-borderColor-neutral-subtle);
    padding-left: var(--hd-dimension-16);
  }
}
.hd-DesignsSubnav__nav .hd-PlainButton {
  background: transparent;
  color: var(--hd-fgColor-neutral-secondary);
}
.hd-DesignsSubnav__nav .hd-PlainButton:hover {
  background: var(--hd-bgColor-neutral-primary-hover);
}
.hd-DesignsSubnav__nav .hd-PlainButton:active {
  background: var(--hd-bgColor-neutral-primary-active);
}
.hd-DesignsSubnav__nav .hd-Dropdown__trigger {
  flex-direction: row-reverse;
}
.hd-DesignsSubnav__nav .hd-Dropdown__menu {
  padding: var(--hd-dimension-8);
}
.hd-DesignsSubnav__nav .hd-Dropdown__menu .hd-DropdownItem {
  padding-left: 0;
}
.hd-DesignsSubnav__nav .hd-DropdownItem__link {
  min-height: var(--hd-dimension-40);
}

@media only screen and (max-width: 768px) {
  .hd-DesignsSubnav__container {
    justify-content: flex-start;
    gap: var(--hd-dimension-16);
  }
  .hd-DesignsSubnav__nav {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    margin-inline-end: calc(-1 * var(--hd-container-padding));
    padding-inline-end: var(--hd-container-padding);
  }
  .hd-DesignsSubnav__nav::-webkit-scrollbar {
    display: none;
  }
  .hd-DesignsSubnav__nav .hd-Dropdown {
    position: static;
  }
}
.hd-Dialog {
  --_hd-dialog-padding: var(--hd-dimension-24);
}
@media (min-width: 64rem) {
  .hd-Dialog {
    --_hd-dialog-padding: var(--hd-dimension-40);
  }
}

.hd-Dialog--md {
  --_hd-dialog-width: var(--hd-dimension-576);
}

.hd-Dialog--staticHeight {
  --_hd-dialog-height: var(--hd-dimension-576);
}

.hd-Dialog__container {
  display: flex;
  flex-direction: column;
  height: var(--_hd-dialog-height, auto);
  max-height: calc(100dvh - var(--hd-container-padding) * 2);
}

.hd-Dialog__dialog {
  width: 100%;
  max-width: min(var(--_hd-dialog-width, 100%), 100% - var(--hd-container-padding) * 2);
  max-height: calc(100% - var(--hd-container-padding) * 2);
  margin: auto;
  border-radius: var(--hd-borderRadius-lg);
  background: var(--hd-bgColor-neutral-primary);
  box-shadow: 0px 2px 16px 0px color-mix(in srgb, var(--hd-color-foundation-static-black), transparent 80%);
  outline: none;
  will-change: transform;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .hd-Dialog__dialog[open] {
    animation-name: Dialog__scaleUpAndFadeIn;
  }
  .hd-Dialog__dialog[closing] {
    animation-name: Dialog__scaleDownAndFadeOut;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hd-Dialog__dialog[open]::backdrop {
    animation-name: Dialog__fadeIn;
  }
  .hd-Dialog__dialog[closing]::backdrop {
    animation-name: Dialog__fadeOut;
  }
}
.hd-Dialog__content {
  flex: 9999;
  padding-inline: var(--_hd-dialog-padding);
  padding-bottom: var(--_hd-dialog-padding);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hd-fgColor-neutral-secondary) transparent;
}
.hd-Dialog__content::before {
  content: "";
  position: sticky;
  z-index: 1;
  top: 0;
  display: block;
  width: 100%;
  height: var(--_hd-dialog-padding);
  background: linear-gradient(to bottom, var(--hd-bgColor-neutral-primary) 50%, transparent 100%);
}

.hd-Dialog__dialog[data-loading=true] .hd-Dialog__loader {
  width: 100%;
  height: 100%;
  min-height: var(--hd-dimension-64);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--_hd-dialog-padding);
}
.hd-Dialog__dialog[data-loading=true] .hd-Dialog__content {
  display: none;
}
.hd-Dialog__dialog[data-loading=true] .hd-Dialog__header {
  padding-bottom: 0;
}

.hd-Dialog__dialog:not([data-loading=true]) .hd-Dialog__loader {
  display: none;
}

.hd-Dialog__close {
  position: absolute;
  top: 0;
  right: 0;
  margin: var(--hd-dimension-8);
}

.hd-Dialog__header {
  display: flex;
  align-items: flex-start;
  flex: 1;
  gap: var(--hd-dimension-16);
  padding: var(--_hd-dialog-padding);
}
.hd-Dialog__header:has(+ .hd-Dialog__content) {
  padding-bottom: 0;
}

.hd-Dialog__headerContent {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-8);
}

.hd-Dialog__title {
  font: var(--hd-heading-font-xl);
}

.hd-Dialog__description {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-Dialog__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--hd-dimension-40);
  height: var(--hd-dimension-40);
  border-radius: var(--hd-radius-full);
}
.hd-Dialog--destructive .hd-Dialog__icon {
  background: var(--hd-bgColor-negative-subtle);
  color: var(--hd-fgColor-negative-onSubtle);
}

.hd-Dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--hd-buttonGroup-gap);
  padding: var(--_hd-dialog-padding);
  border-top: 1px solid var(--hd-borderColor-neutral-subtle);
}
@media (min-width: 64rem) {
  .hd-Dialog__footer {
    padding-block: var(--hd-dimension-24);
  }
}

.hd-Dialog__footer:has(> :nth-of-type(3)) :first-child {
  margin-right: auto;
}

@keyframes Dialog__fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Dialog__fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes Dialog__scaleUpAndFadeIn {
  from {
    opacity: 0;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes Dialog__scaleDownAndFadeOut {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.95;
  }
}
.hd-Drawer {
  --_hd-drawer-padding: var(--hd-dimension-40);
}

.hd-Drawer__dialog {
  height: 100dvh;
  width: 100%;
  max-width: unset;
  max-height: unset;
  background: var(--hd-bgColor-neutral-primary);
  outline: none;
  will-change: transform;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
.hd-Drawer__dialog[data-side=right] {
  left: unset;
}
@media (prefers-reduced-motion: no-preference) {
  .hd-Drawer__dialog[data-side=left][data-state=open] {
    animation-name: Drawer__fromLeftIn;
  }
  .hd-Drawer__dialog[data-side=left][data-state=closing] {
    animation-name: Drawer__fromLeftOut;
  }
  .hd-Drawer__dialog[data-side=right][data-state=open] {
    animation-name: Drawer__fromRightIn;
  }
  .hd-Drawer__dialog[data-side=right][data-state=closing] {
    animation-name: Drawer__fromRightOut;
  }
}
@media (min-width: 30rem) {
  .hd-Drawer__dialog {
    width: calc(min(var(--hd-dimension-384), 100%) - var(--hd-dimension-32));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hd-Drawer__dialog[data-state=open]::backdrop {
    animation-name: Drawer__fadeIn;
  }
  .hd-Drawer__dialog[data-state=closing]::backdrop {
    animation-name: Drawer__fadeOut;
  }
}
.hd-Drawer__container {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.hd-Drawer__header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--_hd-drawer-padding) / 2);
  padding-left: var(--_hd-drawer-padding);
  border-bottom: 1px solid var(--hd-borderColor-neutral-subtle);
  background: var(--hd-bgColor-neutral-primary);
}

.hd-Drawer__title {
  font: var(--hd-heading-font-md);
}

.hd-Drawer__close {
  margin-left: auto;
}

.hd-Drawer__content {
  isolation: isolate;
  padding: var(--_hd-drawer-padding);
  padding-bottom: var(--hd-dimension-64);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hd-fgColor-neutral-secondary) transparent;
}

@keyframes Drawer__fromLeftIn {
  from {
    translate: -100%;
  }
  to {
    translate: 0;
  }
}
@keyframes Drawer__fromLeftOut {
  from {
    translate: 0;
  }
  to {
    translate: -100%;
  }
}
@keyframes Drawer__fromRightIn {
  from {
    translate: 100%;
  }
  to {
    translate: 0;
  }
}
@keyframes Drawer__fromRightOut {
  from {
    translate: 0;
  }
  to {
    translate: 100%;
  }
}
@keyframes Drawer__fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Drawer__fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hd-Dropdown {
  position: relative;
  display: inline-block;
}

.hd-Dropdown__menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--hd-bgColor-neutral-primary);
  padding: var(--hd-dimension-8);
  border: 1px solid var(--hd-borderColor-neutral-subtle);
  border-radius: var(--hd-borderRadius-md);
  box-shadow: 0px 1px 5px 0px color-mix(in srgb, var(--hd-color-foundation-static-black) 9%, transparent), 0px 1px 2px -1px color-mix(in srgb, var(--hd-color-foundation-static-black) 9%, transparent);
  width: min(var(--hd-dimension-224), 100vw);
  animation-duration: 150ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 9999;
}
.hd-Dropdown__menu[data-state=open] {
  animation-name: Dropdown__fadeIn;
}
.hd-Dropdown__menu[data-state=closing] {
  animation-name: Dropdown__fadeOut;
}
.hd-Dropdown__menu[data-state=closed] {
  display: none;
}

@keyframes Dropdown__fadeIn {
  0% {
    opacity: 0;
    transform: translateY(var(--hd-dimension-6));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes Dropdown__fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--hd-dimension-6));
  }
}
.hd-DropdownItem {
  list-style: none;
}

.hd-DropdownItem__link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--hd-dimension-6);
  padding-block: var(--hd-dimension-8);
  padding-inline: var(--hd-dimension-12);
  border-radius: var(--hd-borderRadius-sm);
  background: unset;
  color: var(--_hd-dropdownItem-fgColor);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.hd-DropdownItem__link:hover:not([aria-disabled=true]) {
  background: var(--_hd-dropdownItem-bgColor-hover);
}
.hd-DropdownItem__link:active:not([aria-disabled=true]) {
  background: var(--_hd-dropdownItem-bgColor-active);
}
.hd-DropdownItem__link[aria-disabled=true] {
  color: var(--hd-fgColor-neutral-onDisabled);
  cursor: not-allowed;
}

.hd-DropdownItem--neutral {
  --_hd-dropdownItem-fgColor: var(--hd-fgColor-neutral-primary);
  --_hd-dropdownItem-bgColor-hover: var(--hd-bgColor-neutral-primary-hover);
  --_hd-dropdownItem-bgColor-active: var(--hd-bgColor-neutral-primary-active);
}

.hd-DropdownItem--error {
  --_hd-dropdownItem-fgColor: var(--hd-fgColor-negative-onSubtle);
  --_hd-dropdownItem-bgColor-hover: var(--hd-bgColor-negative-subtle);
  --_hd-dropdownItem-bgColor-active: var(--hd-bgColor-negative-subtle-active);
}

.hd-DropdownItem--divider {
  padding: 0;
  margin: 0;
}
.hd-DropdownItem--divider > .hd-DropdownItem__link {
  display: none;
}

.hd-DropdownItem__divider-wrapper {
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.hd-DropdownItem__divider-line {
  width: 100%;
  height: 1px;
  background-color: var(--hd-borderColor-neutral-subtle, rgba(25, 25, 45, 0.1));
  margin: 0;
  flex-shrink: 0;
  border: none;
}

.hd-DropdownItem--info {
  padding: 0;
}
.hd-DropdownItem--info .hd-DropdownItem__link {
  display: none;
}

.hd-DropdownItem__info {
  padding: var(--hd-dimension-8) var(--hd-dimension-12);
  color: var(--hd-fgColor-neutral-primary, #202123);
  font-size: 16px;
  font-family: var(--hd-fontFamily-untitledSans, "Untitled Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif);
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
}
.hd-DropdownItem__info strong {
  font-weight: var(--hd-fontWeight-body-strong, 600);
}

.hd-DropdownItem__info-paragraph {
  margin: 0;
  margin-bottom: 16px;
}
.hd-DropdownItem__info-paragraph:last-child {
  margin-bottom: 0;
}

.hd-DropdownItem__link-inline {
  color: var(--hd-fgColor-neutral-primary, #202123);
  font-size: 16px;
  font-family: var(--hd-fontFamily-untitledSans, "Untitled Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif);
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
  text-decoration: underline;
}
.hd-DropdownItem__link-inline:hover {
  color: var(--hd-fgColor-brand-primary);
}
.hd-DropdownItem__link-inline:focus-visible {
  outline: 2px solid var(--hd-color-foundation-static-black);
  outline-offset: 2px;
  border-radius: var(--hd-borderRadius-xs);
}

.hd-Dropzone {
  --_hd-dropzone-opacity: 0;
  --_hd-dropzone-padding: 0;
  position: relative;
}
.hd-Dropzone::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: calc(var(--_hd-dropzone-padding) * -1);
  border: 3px dashed var(--hd-dropzone-borderColor-active);
  border-radius: var(--hd-borderRadius-lg);
  background: var(--hd-dropzone-bgColor-active);
  opacity: var(--_hd-dropzone-opacity);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.hd-Dropzone:has(.hd-Dropzone__input:focus-visible), .hd-Dropzone[data-dragged] {
  --_hd-dropzone-opacity: 1;
}

.hd-Dropzone--paddingSm {
  --_hd-dropzone-padding: var(--hd-dimension-16);
}

.hd-FileList {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-16);
}

.hd-FileList__header {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-2);
}

.hd-FileList__title {
  font: var(--hd-heading-font-sm);
}

.hd-FileList__description {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-FileList__list {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-12);
}

.hd-FileListItem {
  display: flex;
  gap: var(--hd-dimension-12);
  font: var(--hd-body-font-sm);
  line-height: var(--hd-lineHeight-sm);
  word-break: break-word;
}
.hd-FileListItem:where([data-status=idle], [data-status=loading]) {
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-FileListItem[data-status=idle] .hd-FileListItem__icon {
  color: color-mix(in srgb, var(--hd-fgColor-neutral-secondary) 40%, transparent);
}

.hd-FileListItem:not([data-status=idle]) [data-status-icon=idle],
.hd-FileListItem:not([data-status=loading]) [data-status-icon=loading],
.hd-FileListItem:not([data-status=success]) [data-status-icon=success],
.hd-FileListItem:not([data-status=error]) [data-status-icon=error] {
  display: none;
}

.hd-FormRow {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-4);
}

.hd-FormRow__label {
  font-family: var(--hd-label-fontFamily);
  font-size: var(--hd-fontSize-16);
  font-weight: var(--hd-label-fontWeight);
  line-height: var(--hd-lineHeight-sm);
  color: var(--hd-fgColor-neutral-primary);
}
.hd-FormRow__label--disabled {
  color: var(--hd-fgColor-neutral-disabled);
}

.hd-FormRow__input {
  min-height: var(--hd-dimension-40);
  padding: var(--hd-dimension-10) var(--hd-dimension-12);
  align-items: center;
  gap: var(--hd-dimension-10);
  background: var(--hd-bgColor-neutral-primary);
  border: 1px solid var(--hd-input-borderColor);
  border-radius: var(--hd-input-borderRadius);
  font-family: var(--hd-input-fontFamily);
  font-size: var(--hd-fontSize-16);
  font-weight: var(--hd-fontWeight-body);
  line-height: var(--hd-lineHeight-sm);
  color: var(--hd-fgColor-neutral-primary);
}
.hd-FormRow__input:focus {
  outline: var(--hd-input-focusOutlineWidth) solid var(--hd-input-focusOutlineColor);
  outline-offset: var(--hd-input-focusOutlineOffset);
  border-color: var(--hd-fgColor-brand-primary);
}
.hd-FormRow__input:disabled {
  color: var(--hd-fgColor-neutral-onDisabled);
  border-color: var(--hd-input-borderColor-disabled);
  background: var(--hd-input-bgColor-disabled);
  cursor: not-allowed;
}
.hd-FormRow__input--errors {
  border-color: var(--hd-borderColor-negative-strong);
}
.hd-FormRow__input--select {
  background-image: url("/images/dropdown.svg");
  background-position: right var(--hd-dimension-12) center;
  background-repeat: no-repeat;
  background-size: var(--hd-dimension-16) var(--hd-dimension-16);
  padding-right: var(--hd-dimension-40);
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.hd-FormRow__errorList {
  color: var(--hd-fgColor-negative-primary);
  font-family: var(--hd-fontFamily-body);
  font-size: var(--hd-fontSize-14);
  font-weight: var(--hd-fontWeight-body);
  line-height: var(--hd-lineHeight-sm);
}

.hd-Icon--sm {
  width: var(--hd-dimension-16);
  height: var(--hd-dimension-16);
}

.hd-Icon--md {
  width: var(--hd-dimension-20);
  height: var(--hd-dimension-20);
}

.hd-Icon--lg {
  width: var(--hd-dimension-32);
  height: var(--hd-dimension-32);
}

.hd-ImageGrid {
  --_hd-imageGrid-gap: var(--hd-dimension-20);
  --_hd-imageGrid-minHeight: var(--hd-dimension-240);
  --_hd-imageGrid-minAspectRatio: calc(9 / 16);
  --_hd-imageGrid-maxAspectRatio: calc(3 / 1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--_hd-imageGrid-gap);
}
@media (min-width: 30rem) {
  .hd-ImageGrid::after {
    content: "";
    flex-grow: 99999999;
  }
}

.hd-ImageGrid > * {
  --_hd-aspectRatio: clamp(
    var(--_hd-imageGrid-minAspectRatio),
    var(--_hd-width) / var(--_hd-height),
    var(--_hd-imageGrid-maxAspectRatio)
  );
  flex-grow: calc(var(--_hd-aspectRatio) * 10);
  flex-basis: calc(var(--_hd-imageGrid-minHeight) * var(--_hd-aspectRatio));
  overflow: hidden;
}
.hd-ImageGrid > * img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: var(--_hd-aspectRatio);
}

.hd-ImageRendition {
  background: var(--hd-bgColor-neutral-secondary);
  position: relative;
  width: 100%;
  height: 100%;
}
.hd-ImageRendition__image {
  position: relative;
}
.hd-ImageRendition__icon {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--hd-fgColor-neutral-secondary);
}
.hd-ImageRendition__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--hd-fgColor-neutral-secondary);
}
.hd-ImageRendition[data-loaded=false] .hd-ImageRendition__image {
  visibility: hidden;
}
.hd-ImageRendition[data-loaded=true] .hd-ImageRendition__spinner {
  display: none;
}
.hd-ImageRendition[data-loaded=true] .hd-ImageRendition__icon {
  display: none;
}
.hd-ImageRendition[data-loaded=true] .hd-ImageRendition__image {
  visibility: visible;
}
.hd-ImageRendition[data-failed=true] .hd-ImageRendition__spinner {
  display: none;
}
.hd-ImageRendition[data-failed=true] .hd-ImageRendition__icon {
  display: block;
}
.hd-ImageRendition[data-failed=true] .hd-ImageRendition__image {
  visibility: hidden;
}
.hd-ImageRendition--floating {
  background: transparent;
}

.hd-ItemList {
  display: flex;
  flex-direction: column;
  margin: var(--hd-dimension-32) 0;
}

.hd-ItemList__item {
  padding-top: var(--hd-dimension-16);
  padding-bottom: var(--hd-dimension-24);
  border-top: 1px solid var(--hd-borderColor-neutral-subtle);
}
.hd-ItemList__item:first-child {
  padding-top: var(--hd-dimension-32);
  border-top: 1px solid var(--hd-borderColor-neutral-subtle);
}
.hd-ItemList__item:last-child {
  padding-bottom: var(--hd-dimension-24);
  border-bottom: 1px solid var(--hd-borderColor-neutral-subtle);
}

.hd-ItemSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hd-dimension-16);
}
@media (min-width: 30rem) {
  .hd-ItemSummary {
    gap: var(--hd-dimension-24);
  }
}

.hd-ItemSummary__thumbnail {
  width: var(--hd-dimension-112);
  flex-shrink: 0;
}

.hd-ItemSummary__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-12);
  min-width: min(100%, var(--hd-dimension-192));
}

.hd-ItemSummary__header {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-2);
}

.hd-LinkCard {
  display: flex;
  flex-direction: column;
  border: var(--hd-borderColor-neutral-subtle) 1px solid;
  border-radius: var(--hd-borderRadius-sm);
  overflow: hidden;
}

.hd-LinkCard__imageWrapper {
  aspect-ratio: 3/2;
  overflow: hidden;
}

.hd-LinkCard__iconWrapper {
  background-color: var(--hd-bgColor-neutral-tertiary);
  display: grid;
  place-items: center;
  aspect-ratio: 3/2;
  width: 100%;
  color: color-mix(in srgb, var(--hd-fgColor-neutral-primary) 20%, transparent);
}

.hd-LinkCard__image,
.hd-LinkCard__icon {
  transition: transform 0.4s ease;
}

.hd-LinkCard:hover .hd-LinkCard__image {
  transform: scale(1.025);
}

.hd-LinkCard:hover .hd-LinkCard__icon {
  transform: scale(1.125);
}

.hd-LinkCard__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: var(--hd-dimension-16);
  padding: var(--hd-dimension-16);
}

.hd-LinkCard__title {
  font: var(--hd-heading-font-md);
  color: var(--hd-fgColor-neutral-primary);
  margin-bottom: var(--hd-dimension-8);
}

.hd-LinkCard__description {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-primary);
}

.hd-LinkCard__footer {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-secondary);
  border-top: var(--hd-borderColor-neutral-subtle) 1px solid;
  padding-top: var(--hd-dimension-8);
}

.hd-LinkList {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-8);
  color: var(--hd-fgColor-neutral-primary);
}

.hd-LinkList__heading {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-8);
  padding-bottom: var(--hd-dimension-8);
  border-bottom: 1px solid var(--hd-borderColor-neutral-subtle);
  font: var(--hd-heading-font-sm);
}

.hd-LinkList__list {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-4);
}

.hd-LinkList__link {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-6);
  min-height: var(--hd-dimension-32);
  padding: var(--hd-dimension-6);
  font: var(--hd-body-font-md);
  line-height: var(--hd-lineHeight-xs);
  border-radius: var(--hd-borderRadius-xs);
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.hd-LinkList__link:hover {
  background: var(--hd-bgColor-neutral-primary-hover);
}
.hd-LinkList__link:active {
  background: var(--hd-bgColor-neutral-primary-active);
}
.hd-LinkList__link svg,
.hd-LinkList__link .hd-Icon {
  transform: translateY(3px);
}

/* Prevents the link from being clickable until a Stimulus controller has loaded. */
.hd-LinkList__link[data-state=loading] {
  pointer-events: none;
}

.hd-LinkListGroup {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-24);
}

.hd-LoadingOverlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hd-dimension-16);
  background: color-mix(in oklab, var(--hd-bgColor-neutral-primary) 90%, transparent);
  backdrop-filter: blur(var(--hd-backdrop-blur));
  will-change: opacity;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  animation-fill-mode: forwards;
}
.hd-LoadingOverlay[data-state=open] {
  animation-name: LoadingOverlayFadeIn;
}
.hd-LoadingOverlay[data-state=closing] {
  animation-name: LoadingOverlayFadeOut;
  pointer-events: none;
}
.hd-LoadingOverlay[data-state=closed] {
  display: none;
}
.hd-LoadingOverlay > * {
  flex-shrink: 0;
}

.hd-LoadingOverlay__label {
  font: var(--hd-body-font-md);
  text-align: center;
}

@keyframes LoadingOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes LoadingOverlayFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hd-MultiImageThumbnail {
  --_hd-multiImageThumbnail-gap: var(--hd-dimension-4);
  --_hd-multiImageThumbnail-padding: var(--hd-dimension-8);
  --radius: var(--hd-borderRadius-sm);
}

.hd-MultiImageThumbnail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--_hd-multiImageThumbnail-gap);
  width: 100%;
  aspect-ratio: 1;
}

.hd-MultiImageThumbnail__tile {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.hd-MultiImageThumbnail__tile .hd-Thumbnail {
  width: 100%;
  height: 100%;
  padding: 0;
}
.hd-MultiImageThumbnail__tile .hd-ImageRendition {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd-MultiImageThumbnail__tile img.hd-Thumbnail__image {
  max-width: 78%;
  max-height: 78%;
}

.hd-MultiImageThumbnail__grid--count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.hd-MultiImageThumbnail__grid--count-1 .hd-MultiImageThumbnail__tile:nth-child(1),
.hd-MultiImageThumbnail__grid--count-1 .hd-MultiImageThumbnail__tile:nth-child(1) .hd-Thumbnail {
  border-radius: var(--radius);
}

.hd-MultiImageThumbnail__grid--count-2 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.hd-MultiImageThumbnail__grid--count-2 .hd-MultiImageThumbnail__tile:nth-child(1),
.hd-MultiImageThumbnail__grid--count-2 .hd-MultiImageThumbnail__tile:nth-child(1) .hd-Thumbnail {
  border-radius: var(--radius) var(--radius) 0 0;
}
.hd-MultiImageThumbnail__grid--count-2 .hd-MultiImageThumbnail__tile:nth-child(2),
.hd-MultiImageThumbnail__grid--count-2 .hd-MultiImageThumbnail__tile:nth-child(2) .hd-Thumbnail {
  border-radius: 0 0 var(--radius) var(--radius);
}

.hd-MultiImageThumbnail__grid--count-3 .hd-MultiImageThumbnail__tile:nth-child(3) {
  grid-column: 1/-1;
}
.hd-MultiImageThumbnail__grid--count-3 .hd-MultiImageThumbnail__tile:nth-child(1),
.hd-MultiImageThumbnail__grid--count-3 .hd-MultiImageThumbnail__tile:nth-child(1) .hd-Thumbnail {
  border-radius: var(--radius) 0 0 0;
}
.hd-MultiImageThumbnail__grid--count-3 .hd-MultiImageThumbnail__tile:nth-child(2),
.hd-MultiImageThumbnail__grid--count-3 .hd-MultiImageThumbnail__tile:nth-child(2) .hd-Thumbnail {
  border-radius: 0 var(--radius) 0 0;
}
.hd-MultiImageThumbnail__grid--count-3 .hd-MultiImageThumbnail__tile:nth-child(3),
.hd-MultiImageThumbnail__grid--count-3 .hd-MultiImageThumbnail__tile:nth-child(3) .hd-Thumbnail {
  border-radius: 0 0 var(--radius) var(--radius);
}

.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(1),
.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(1) .hd-Thumbnail {
  border-radius: var(--radius) 0 0 0;
}
.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(2),
.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(2) .hd-Thumbnail {
  border-radius: 0 var(--radius) 0 0;
}
.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(3),
.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(3) .hd-Thumbnail {
  border-radius: 0 0 0 var(--radius);
}
.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(4),
.hd-MultiImageThumbnail__grid--count-4 .hd-MultiImageThumbnail__tile:nth-child(4) .hd-Thumbnail {
  border-radius: 0 0 var(--radius) 0;
}

.hd-MultiImageThumbnail__tile--overlay .hd-Thumbnail__image {
  opacity: 0.5;
}

.hd-MultiImageThumbnail__count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hd-fontFamily-body);
  font-weight: var(--hd-fontWeight-body-medium);
  font-size: var(--hd-fontSize-18);
  line-height: var(--hd-lineHeight-xs);
  color: var(--hd-fgColor-neutral-primary);
  text-shadow: 0.5px 0.5px 2px var(--hd-color-foundation-static-white);
}

.hd-MinimalHeader {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--hd-dimension-16);
  min-height: var(--hd-dimension-64);
  padding-block: var(--hd-dimension-16) var(--hd-dimension-8);
  border-bottom: 1px solid var(--hd-borderColor-neutral-subtle);
}

.hd-MinimalHeader__title {
  font: var(--hd-heading-font-sm);
  text-align: center;
}

.hd-MinimalHeader__right {
  display: flex;
  justify-content: flex-end;
}

.hd-PageContainer {
  width: 100%;
  max-width: var(--hd-container-maxWidth);
  margin-inline: auto;
  padding-inline: var(--hd-container-padding);
}

.hd-PageHeader {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-12);
  padding-top: var(--hd-dimension-24);
  padding-bottom: var(--hd-dimension-16);
}

.hd-PageHeader__main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hd-dimension-16);
}
@media screen and (min-width: 640px) {
  .hd-PageHeader__main {
    flex-wrap: nowrap;
  }
}

.hd-PageHeader__title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  max-width: var(--hd-dimension-768);
  min-height: var(--hd-dimension-40);
  color: var(--hd-fgColor-neutral-primary);
  transform: translateY(var(--hd-font-opticalAlignment-translateY, 0));
}

.hd-PageHeader__actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (min-width: 640px) {
  .hd-PageHeader__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

.hd-PageLayoutSidebar {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-64);
}
@media (min-width: 64rem) {
  .hd-PageLayoutSidebar {
    flex-direction: row;
  }
}

@media (min-width: 64rem) {
  .hd-PageLayoutSidebar__sidebar {
    width: 100%;
    max-width: var(--hd-dimension-288);
  }
}

@media (min-width: 64rem) {
  .hd-PageLayoutSidebar__sidebarMobile {
    display: none;
  }
}

.hd-PageLayoutSidebar__sidebarDesktop {
  display: none;
}
@media (min-width: 64rem) {
  .hd-PageLayoutSidebar__sidebarDesktop {
    display: block;
  }
}

.hd-PageLayoutSidebar__title {
  margin-bottom: var(--hd-dimension-24);
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-PageLayoutSidebar__main {
  flex: 1;
}

.hd-PlainButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hd-dimension-4);
  min-height: var(--hd-dimension-32);
  padding: var(--hd-dimension-6);
  border-radius: var(--hd-button-borderRadius);
  line-height: var(--hd-lineHeight-xs);
  color: var(--hd-fgColor-neutral-secondary);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.hd-PlainButton:hover {
  background: var(--hd-bgColor-neutral-primary-hover);
}
.hd-PlainButton:active {
  background: var(--hd-bgColor-neutral-primary-active);
}
.hd-PlainButton:disabled {
  color: var(--hd-fgColor-neutral-disabled);
  cursor: default;
  pointer-events: none;
}
.hd-PlainButton.hd-PlainButton--destructive {
  color: var(--hd-fgColor-negative-onSubtle);
}
.hd-PlainButton.hd-PlainButton--md {
  font: var(--hd-body-font-md);
}
.hd-PlainButton.hd-PlainButton--sm {
  font: var(--hd-body-font-sm);
}

.hd-ProductSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hd-dimension-16);
}
@media (min-width: 30rem) {
  .hd-ProductSummary {
    gap: var(--hd-dimension-24);
  }
}

.hd-ProductSummary__thumbnail {
  max-width: var(--hd-dimension-176);
}

.hd-ProductSummary__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-12);
  min-width: min(100%, var(--hd-dimension-192));
}

.hd-ProductSummary__header {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-2);
}

.hd-ProductSummary__quantity {
  display: flex;
  justify-content: space-between;
  gap: var(--hd-dimension-16);
}

.hd-Spinner {
  width: var(--_hd-spinner-size);
  height: var(--_hd-spinner-size);
  animation: Spinner 0.5s linear infinite;
}

.hd-Spinner--brand {
  --hd-spinner-bgColor: var(--hd-color-foundation-gray-a2);
  --hd-spinner-fgColor: var(--hd-fgColor-brand-primary);
}

.hd-Spinner--inherit {
  --hd-spinner-bgColor: color-mix(in srgb, currentColor 20%, transparent);
  --hd-spinner-fgColor: currentColor;
}

.hd-Spinner--sm {
  --_hd-spinner-size: var(--hd-dimension-16);
}

.hd-Spinner--md {
  --_hd-spinner-size: var(--hd-dimension-20);
}

.hd-Spinner--lg {
  --_hd-spinner-size: var(--hd-dimension-32);
}

.hd-Spinner--xl {
  --_hd-spinner-size: var(--hd-dimension-44);
}

@keyframes Spinner {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
.hd-SpinnerWithText {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-12);
}

.hd-SpinnerWithText--column {
  flex-direction: column;
}

.hd-SpinnerWithText--row {
  flex-direction: row;
}

.hd-SpinnerWithText__text {
  font: var(--hd-body-font-md);
  color: var(--hd-fgColor-neutral-primary);
}

.hd-IconWithText {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-12);
}

.hd-IconWithText--column {
  flex-direction: column;
}

.hd-IconWithText--row {
  flex-direction: row;
}

.hd-IconWithText__icon {
  color: var(--hd-fgColor-brand-primary);
}

.hd-IconWithText__text {
  font: var(--hd-body-font-md);
  color: var(--hd-fgColor-neutral-primary);
  text-align: center;
  line-height: 1.5;
}

.hd-StatusIcon--brand {
  color: var(--hd-bgColor-selected-strong);
}
.hd-StatusIcon--negative {
  color: var(--hd-fgColor-negative-primary);
}
.hd-StatusIcon--info {
  color: var(--hd-fgColor-info-primary);
}
.hd-StatusIcon--positive {
  color: var(--hd-fgColor-positive-primary);
}
.hd-StatusIcon--warning {
  color: var(--hd-fgColor-caution-primary);
}

.hd-TabList {
  position: relative;
  display: flex;
  gap: var(--hd-dimension-16);
  box-shadow: inset 0 -1px var(--hd-borderColor-neutral-subtle);
}

.hd-Tab {
  display: inline-flex;
  align-items: center;
  gap: var(--hd-dimension-4);
  height: var(--hd-dimension-40);
  color: var(--hd-fgColor-neutral-secondary);
  border-bottom: 2px solid transparent;
  outline: none;
  cursor: pointer;
}
.hd-Tab[data-selected] {
  color: var(--hd-fgColor-neutral-primary);
}
.hd-Tab[href][data-selected] {
  border-color: var(--hd-borderColor-brand-strong);
}
.hd-Tab:hover {
  border-color: var(--hd-borderColor-brand-subtle);
}

.hd-Tab__inner {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-6);
  height: var(--hd-dimension-28);
  padding-inline: var(--hd-dimension-4);
}
.hd-Tab:focus-visible .hd-Tab__inner {
  outline: var(--hd-focus-outlineWidth) solid var(--hd-focus-outlineColor);
  outline-offset: calc(var(--hd-focus-outlineWidth) * -1);
}

.hd-TabIndicator {
  --_hd-translateX: calc(var(--selected-tab-left, 0) * 1px);
  --_hd-scaleX: calc(var(--selected-tab-width, 0) / 100);
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  width: 100px;
  height: var(--hd-dimension-2);
  background: var(--hd-borderColor-brand-strong);
  transform: translateX(var(--_hd-translateX)) scaleX(var(--_hd-scaleX));
  transform-origin: 0 0 0;
  transition: transform 0.15s ease;
}

.hd-TabPanel:focus-visible {
  outline: var(--hd-focus-outlineWidth) solid var(--hd-focus-outlineColor);
  outline-offset: calc(var(--hd-focus-outlineWidth) * -1);
}

.hd-Thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--hd-bgColor-neutral-productPreview);
  border-radius: var(--hd-borderRadius-sm);
}

.hd-Thumbnail__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78%;
  height: 78%;
  max-width: 78%;
  max-height: 78%;
  filter: drop-shadow(1px 2px 4px color-mix(in srgb, var(--hd-color-foundation-static-black) 15%, transparent));
}
.hd-Thumbnail__image .hd-Thumbnail__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.hd-TwoColumnLayout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-width: var(--hd-dimension-1152);
  margin-inline: auto;
  height: 100vh;
}

.hd-TwoColumnLayout__container {
  --_hd-twoColumnLayout-columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--_hd-twoColumnLayout-columns), minmax(0, var(--hd-dimension-576)));
  justify-content: center;
  padding-inline: var(--hd-container-padding);
}
@media (max-width: 47.9375rem) {
  .hd-TwoColumnLayout__container {
    overflow-y: auto;
    align-content: flex-start;
    gap: var(--hd-dimension-32);
    padding-block: var(--hd-dimension-32);
  }
}
@media (min-width: 48rem) {
  .hd-TwoColumnLayout__container {
    --_hd-twoColumnLayout-columns: 2;
    overflow: hidden;
  }
}

@media (min-width: 48rem) {
  .hd-TwoColumnLayout__column {
    overflow-y: auto;
    padding-block: var(--hd-dimension-32);
  }
  .hd-TwoColumnLayout__column:first-child {
    padding-right: var(--hd-container-padding);
    border-right: 1px solid var(--hd-borderColor-neutral-subtle);
  }
  .hd-TwoColumnLayout__column:last-child {
    padding-left: var(--hd-container-padding);
  }
}
@media (min-width: 64rem) {
  .hd-TwoColumnLayout__column {
    padding-block: var(--hd-container-padding);
  }
}

.hd-TwoThirdsColumnLayout {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-32);
}
@media (min-width: 48rem) {
  .hd-TwoThirdsColumnLayout {
    flex-direction: row;
    height: calc(100vh - (var(--hd-dimension-64) + var(--hd-dimension-1)));
  }
}
@media (min-width: 80rem) {
  .hd-TwoThirdsColumnLayout {
    gap: var(--hd-dimension-48);
  }
}
@media (min-width: 96rem) {
  .hd-TwoThirdsColumnLayout {
    gap: var(--hd-dimension-64);
  }
}

.hd-TwoThirdsColumnLayout__main {
  flex: 1;
  overflow: hidden;
  position: relative;
}
@media (min-width: 48rem) {
  .hd-TwoThirdsColumnLayout__main {
    flex: 2;
    overflow-y: auto;
    height: 100%;
  }
}

.hd-TwoThirdsColumnLayout__sidebar {
  flex: 1;
}
@media (min-width: 48rem) {
  .hd-TwoThirdsColumnLayout__sidebar {
    flex: 1;
    max-width: var(--hd-dimension-512);
    min-width: var(--hd-dimension-384);
    overflow-y: auto;
    height: 100%;
  }
}

.hd-ProgressBar {
  display: block;
  width: 100%;
  background-color: var(--hd-loading-bgColor);
}
.hd-ProgressBar::-moz-progress-bar {
  background: var(--hd-loading-fgColor);
  transition: width 0.15s ease-out;
}
.hd-ProgressBar::-webkit-progress-bar {
  background-color: var(--hd-loading-bgColor);
}
.hd-ProgressBar::-webkit-progress-value {
  background: var(--hd-loading-fgColor);
  transition: width 0.15s ease-out;
}

.hd-ProgressBar--md {
  height: var(--hd-dimension-4);
}

.hd-ProgressBar--lg {
  height: var(--hd-dimension-8);
}

.hd-ProgressBar--default {
  border-radius: var(--hd-radius-full);
}
.hd-ProgressBar--default::-webkit-progress-bar {
  border-radius: var(--hd-radius-full);
}
.hd-ProgressBar--default::-webkit-progress-value {
  border-bottom-left-radius: var(--hd-radius-full);
  border-top-left-radius: var(--hd-radius-full);
}

.hd-ProgressBar--fullWidth {
  border-radius: var(--hd-radius-0);
}

.hd-OrderSummary__item {
  display: flex;
  justify-content: space-between;
  gap: var(--hd-dimension-16);
}
.hd-OrderSummary__item + .hd-OrderSummary__item {
  margin-top: var(--hd-dimension-6);
}

.hd-OrderSummary__description {
  font: var(--hd-body-font-sm);
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-OrderSummary__value {
  text-align: right;
}

.hd-OrderSummary__value--placeholder {
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-OrderSummary__total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--hd-dimension-16);
  font: var(--hd-heading-font-md);
}

.hd-SummaryList {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-2);
}

.hd-SummaryListItem {
  font: var(--hd-body-font-sm);
}

.hd-SummaryListItem__label {
  display: inline-block;
  margin-right: var(--hd-dimension-8);
  font-weight: var(--hd-fontWeight-body-strong);
}

.hd-SummaryListItem__value {
  display: inline;
}

.hd-ProductPreview-face {
  text-align: center;
  padding: 40px;
  margin: var(--hd-dimension-0) auto;
}

.hd-ProductPreview-face__image-container {
  display: inline-block;
  position: relative;
}

.hd-ProductPreview-face__image {
  margin: var(--hd-dimension-0) auto;
  max-width: 100%;
  max-height: 78vh;
  filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.2));
  object-fit: contain;
}

.hd-ProductPreview-face__label {
  text-align: center;
  margin: 10px 0 0 0;
  font-size: var(--hd-body-font-sm);
  opacity: 0.7;
}

.hd-ProductPreview {
  height: auto;
}
.hd-ProductPreview.hd-ProductPreview--withBackground {
  background-color: var(--hd-bgColor-neutral-productPreview);
}

.hd-ConnectedAccountsPage__content > .hd-PageHeader {
  padding-top: 0;
}

.hd-PayoutsBlock__card {
  border-radius: var(--hd-borderRadius-sm);
  background: var(--hd-bgColor-neutral-primary);
  box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--hd-color-foundation-static-black) 8%, transparent);
}

.hd-PayoutsBlock__cardContent {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-24);
  padding: var(--hd-dimension-32);
}

.hd-PayoutsBlock__title {
  font: var(--hd-heading-font-lg);
  color: var(--hd-fgColor-neutral-primary);
  margin: 0 0 var(--hd-dimension-8) 0;
}

.hd-PayoutsBlock__body {
  font: var(--hd-body-font-md);
  color: var(--hd-fgColor-neutral-primary);
  margin: 0;
}

.hd-PayoutsBlock__link {
  color: var(--hd-fgColor-neutral-primary);
  font-size: 16px;
  font-family: var(--hd-fontFamily-untitledSans, "Untitled Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif);
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
  text-decoration: underline;
}
.hd-PayoutsBlock__link:hover {
  color: var(--hd-fgColor-brand-primary);
}
.hd-PayoutsBlock__link:focus-visible {
  outline: 2px solid var(--hd-color-foundation-static-black);
  outline-offset: 2px;
  border-radius: var(--hd-borderRadius-xs);
}

.hd-PayoutsBlock__actions {
  display: flex;
  flex-wrap: wrap;
}

.hd-PayoutsBlock__actions--pending > .hd-Button {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

.hd-AccountDetailsPage__content > .hd-PageHeader {
  padding-top: 0;
}

.hd-AccountDetailsBlock {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-24);
}

.hd-AccountDetailsBlock__card {
  border-radius: var(--hd-borderRadius-sm);
  background: var(--hd-bgColor-neutral-primary);
  box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--hd-color-foundation-static-black) 8%, transparent);
}

.hd-AccountDetailsBlock__cardContent {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-24);
  padding: var(--hd-dimension-32);
}

.hd-AccountDetailsBlock__title {
  font: var(--hd-heading-font-lg);
  color: var(--hd-fgColor-neutral-primary);
  margin: 0 0 var(--hd-dimension-8) 0;
}

.hd-AccountDetailsBlock__subtitle {
  color: var(--hd-fgColor-neutral-secondary);
  margin: 0 0 var(--hd-dimension-8) 0;
}

.hd-AccountDetailsBlock__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--hd-dimension-16) var(--hd-dimension-24);
  margin: 0;
  padding: 0;
}

.hd-AccountDetailsBlock__field {
  display: flex;
  flex-direction: column;
  gap: var(--hd-dimension-4);
}

.hd-AccountDetailsBlock__label {
  color: var(--hd-fgColor-neutral-secondary);
}

.hd-AccountDetailsBlock__value {
  color: var(--hd-fgColor-neutral-primary);
  margin: 0;
}

.hd-AccountDetailsBlock__actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--hd-dimension-8);
}

.hd-AccountDetailsBlock__address {
  display: flex;
  flex-direction: column;
}

.hd-AccountDetailsBlock__addressGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--hd-dimension-24);
}

.hd-AccountDetailsBlock__addressText {
  font-style: normal;
  line-height: var(--hd-lineHeight-md);
  color: var(--hd-fgColor-neutral-primary);
}

.hd-AccountDetailsBlock__reportPicker {
  display: flex;
  align-items: center;
  gap: var(--hd-dimension-8);
}
@media (max-width: 29.9375rem) {
  .hd-AccountDetailsBlock__reportPicker {
    flex-direction: column;
    align-items: stretch;
  }
}

.hd-AccountDetailsBlock__reportSelect {
  min-width: 8rem;
}

.hd-ProjectCard {
  flex: 1;
  max-width: calc(100% - var(--hd-dimension-32));
}

.hd-ProjectCardGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hd-dimension-32);
}

.hd-BatchPrintDialog {
  color: var(--hd-fgColor-neutral-primary);
  width: 576px;
}
.hd-BatchPrintDialog .hd-Dialog__description {
  color: var(--hd-fgColor-neutral-primary);
}

.hd-BatchPrintForm {
  display: flex;
  flex-direction: column;
}
.hd-BatchPrintForm .hd-FormRow {
  margin-bottom: var(--hd-dimension-24);
}
.hd-BatchPrintForm .hd-FormRow:last-child {
  margin-bottom: 0;
}

.hd-BatchPrintForm__section {
  margin-bottom: var(--hd-dimension-24);
}

.hd-BatchPrintForm__sectionTitle {
  font: var(--hd-heading-font-md);
  padding-bottom: var(--hd-dimension-4);
}

.hd-BatchPrintForm__errorMessage {
  margin-bottom: var(--hd-dimension-24);
}

.hd-DesignGridIframe__dialog {
  width: 100vw;
  height: 100vh;
  max-width: unset;
  max-height: unset;
  background: var(--hd-bgColor-neutral-primary);
}

.hd-DesignGridIframe__container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header" "content";
  height: 100%;
}

.hd-DesignGridIframe__header {
  grid-area: header;
}

.hd-DesignGridIframe__content {
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  grid-area: content;
}

.hd-DesignGridIframe__loadingFacade {
  display: grid;
  place-items: center;
  padding: var(--hd-container-padding);
}

.hd-ImageGrid > .hd-GalleryImage {
  position: relative;
  overflow: visible;
}

.hd-GalleryImage__actions {
  display: flex;
  gap: var(--hd-dimension-12);
  position: absolute;
  bottom: var(--hd-dimension-8);
  right: var(--hd-dimension-8);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
}
.hd-GalleryImage__actions .hd-Button {
  --_hd-button-bgColor: var(--hd-bgColor-neutral-primary);
  --_hd-button-bgColor-hover: var(--hd-bgColor-neutral-primary-hover);
  --_hd-button-bgColor-active: var(--hd-bgColor-neutral-primary-active);
}
.hd-GalleryImage:hover .hd-GalleryImage__actions {
  opacity: 1;
}
@media (hover: none) {
  .hd-GalleryImage .hd-GalleryImage__actions {
    opacity: 1;
  }
}
.hd-GalleryImage:has(:focus-visible) .hd-GalleryImage__actions {
  opacity: 1;
}

.hd-ProjectProductDetailPage .hd-PageContainer {
  max-width: 100%;
  position: sticky;
  top: 0;
  background-color: var(--hd-bgColor-neutral-primary);
  z-index: 1;
}

@media (min-width: 48rem) {
  .hd-ProjectProductDetailPage__pageContainer {
    padding-inline: 0;
  }
}

@media (max-width: 48rem) {
  .hd-ProjectProductDetailPage__mainContent {
    padding: var(--hd-container-padding) 0;
  }
}

.hd-ProjectProductDetailPage__sidebarContent {
  padding: var(--hd-container-padding) var(--hd-container-padding) var(--hd-dimension-64) 0;
}
@media (max-width: 48rem) {
  .hd-ProjectProductDetailPage__sidebarContent {
    padding-bottom: var(--hd-dimension-64);
  }
}

.hd-ProjectProductDetailPage__productPreview {
  background-color: var(--hd-bgColor-neutral-productPreview);
}

.hd-ProjectProductDetailPage__iframe,
.hd-ProjectProductDetailPage__productPreview {
  display: none;
}
@media (min-width: 48rem) {
  .hd-ProjectProductDetailPage__iframe,
  .hd-ProjectProductDetailPage__productPreview {
    display: block;
  }
}

@media (min-width: 48rem) {
  .hd-ProjectProductDetailPage__iframe {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 48rem) {
  .hd-ProjectProductDetailPage__multiImagePreview {
    display: none;
  }
}

.hd-ProjectProductDetailPage__imagePreview {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--hd-bgColor-neutral-productPreview);
}
@media (min-width: 48rem) {
  .hd-ProjectProductDetailPage__imagePreview.hd-ProjectProductDetailPage__imagePreview--hide {
    display: none;
  }
}
@media (max-width: 48rem) {
  .hd-ProjectProductDetailPage__imagePreview {
    width: 100%;
  }
}

.hd-ProjectProductDetailPage__imagePreviewImage {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.15));
}

.hd-ProjectProductDetailPage__imagePreviewImage--itemGroup {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: none;
  filter: none;
}

.hd-ProjectProductDetailPage__viewAllButton {
  display: flex;
  position: absolute;
  right: var(--hd-dimension-16);
  bottom: var(--hd-dimension-32);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.09), 0 1px 2px -1px rgba(0, 0, 0, 0.09);
}
@media (min-width: 48rem) {
  .hd-ProjectProductDetailPage__viewAllButton {
    display: none;
  }
}

.hd-ProjectProductDetailPage__badge {
  margin-bottom: var(--hd-dimension-16);
}

.hd-ProjectProductDetailPage .hd-ItemList .hd-ProductSummary__thumbnail {
  width: var(--hd-dimension-112);
  max-width: var(--hd-dimension-112);
  flex-shrink: 0;
}

.hd-InlineEdit {
  width: 100%;
}

.hd-InlineEdit__button-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.hd-InlineEdit__button-container:hover .hd-InlineEdit__edit-icon {
  opacity: 1;
}

.hd-InlineEdit__edit-icon {
  color: var(--hd-fgColor-neutral-secondary);
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.hd-InlineEdit__submit-button {
  margin-top: var(--hd-dimension-2);
}

.hd-InlineEdit__form-container {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  flex-direction: column;
  gap: var(--hd-dimension-8);
}

.hd-InlineEdit__form {
  width: 100%;
}

.hd-InlineEdit__input-container {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--hd-dimension-4);
  padding-bottom: var(--hd-dimension-4);
}

.hd-InlineEdit__input {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hd-InlineEdit__character-counter {
  color: var(--hd-fgColor-neutral-secondary);
  font-family: var(--hd-fontFamily-body);
  font-weight: var(--hd-fontWeight-body);
  font-size: var(--hd-fontSize-14);
  line-height: var(--hd-lineHeight-sm);
}

.hd-InlineEdit__character-counter--over-limit {
  color: var(--hd-fgColor-negative-primary);
}

.hd-PaymentLinkCheckoutContent__section {
  margin-bottom: var(--hd-dimension-32);
}

.hd-PaymentLinkCheckoutContent__section > * {
  margin-bottom: var(--hd-dimension-16);
}

.hd-PaymentLinkCheckoutContent__formContainer {
  padding-bottom: var(--hd-dimension-64);
}

.hd-PaymentLinkCheckoutContent__submitButton_Container {
  width: 100%;
}

.hd-PaymentLinkCheckoutContent__submitButton {
  width: 100%;
}

.hd-PaymentLinkCheckoutContent__sectionTitle {
  margin-top: var(--hd-dimension-16);
  font-weight: var(--hd-fontWeight-heading);
  font-size: var(--hd-fontSize-25);
}

.hd-PaymentLinkCheckoutContent__productSummary {
  margin-bottom: var(--hd-dimension-32);
}

.hd-PaymentLinkCheckoutContent__mobileProductSummary,
.hd-PaymentLinkCheckoutContent__mobileOrderSummary {
  display: none;
  margin-bottom: var(--hd-dimension-32);
}
@media (max-width: 768px) {
  .hd-PaymentLinkCheckoutContent__mobileProductSummary,
  .hd-PaymentLinkCheckoutContent__mobileOrderSummary {
    display: block;
  }
}

@media (max-width: 768px) {
  .hd-TwoColumnLayout__column:last-child {
    display: none;
  }
}
.hd-UnbrandedError {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--hd-dimension-32);
}

.hd-UnbrandedError__title {
  font-weight: var(--hd-fontWeight-heading);
  font-size: var(--hd-fontSize-40);
  color: var(--hd-fgColor-brand-onSubtle);
  margin-bottom: var(--hd-dimension-16);
  margin-top: 0;
}

.hd-UnbrandedError__message {
  font-size: var(--hd-fontSize-16);
  color: var(--hd-fgColor-brand-onSubtle);
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

.hd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hd-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-pt-32 {
  padding-top: var(--hd-dimension-32);
}

.hd-pb-112 {
  padding-bottom: var(--hd-dimension-112);
}

/*# sourceMappingURL=app.output.css.map */