@font-face {
  font-family: "Roboto Flex";
  src: url("https://digitalupgrade.com/images/misc/RobotoFlex-VariableFont_GRADXTRAYOPQYTASYTDEYTFIYTLCYTUCopszslntwdthwght.woff2") format("woff2");
}
body {
  font-family: "Roboto Flex", sans-serif;
}

/* Reduce vertical padding inside embedded app */
#vwrap {
#  padding-top: 36px !important;
#  padding-bottom: 36px !important;
  padding-top: 35px !important;
  padding-bottom: 45px !important;
}

/* Gruvbox Dark Palette */
:root {
  --gb-bg: #282828;
  --gb-bg-soft: #3c3836;
  --gb-fg: #ebdbb2;
  --gb-muted: #a89984;
  --gb-border: #504945;
  --gb-yellow: #fabd2f;
  --gb-orange: #fe8019;
  --gb-green: #b8bb26;
  --gb-blue: #83a598;
  --gb-purple: #d3869b;
  --gb-red: #fb4934;
}

/* Base colors */
html.bg-black,
body {
  background-color: var(--gb-bg) !important;
  color: var(--gb-fg);
}

.text-white { color: var(--gb-fg) !important; }

/* Borders/dividers */
.grid.border-x { border-left-color: var(--gb-border) !important; border-right-color: var(--gb-border) !important; }
.border-l { border-left-color: var(--gb-border) !important; }
.divide-white > :not([hidden]) ~ :not([hidden]) { border-color: var(--gb-muted) !important; }
.divide-gray-400 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gb-border) !important; }

/* Accents */
.num { color: var(--gb-yellow); }
.group .uppercase { color: var(--gb-blue); }
.group q,
.group p { color: var(--gb-fg); }
/* Ensure bottom bar sits in front; details behind */
.grid > article .text-9xl p {
  position: absolute;
  z-index: 0;
  top: auto !important;
  bottom: 8rem !important;
}
.grid > article .stretch {
  position: relative;
  z-index: 10;
}

@media (min-width: 640px) { /* sm */
  .grid > article .text-9xl p {
    bottom: 8rem !important;
  }
}
.stretch.bg-black { background-color: var(--gb-bg-soft) !important; }

.group-hover\:transition-transform {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  animation-direction: alternate;
}

.num {
  font-size: 10rem;
  line-height: 0.9;
  font-weight: 550;
  font-variation-settings: "wdth" 35, "YTFI" 788;
}

.stretch {
  font-weight: 500;
  font-variation-settings: "wdth" 35;
  writing-mode: vertical-rl;
}

/* Bottom labels: center content; height set via JS to longest */
.grid > article .stretch {
  height: auto;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-card accent colors */
.grid > article:nth-child(1) .num { color: var(--gb-yellow) !important; }
.grid > article:nth-child(2) .num { color: var(--gb-orange) !important; }
.grid > article:nth-child(3) .num { color: var(--gb-green) !important; }
.grid > article:nth-child(4) .num { color: var(--gb-blue) !important; }
.grid > article:nth-child(5) .num { color: var(--gb-purple) !important; }
.grid > article:nth-child(6) .num { color: var(--gb-red) !important; }

/* Per-card bottom label backgrounds with contrasting text */
.grid > article:nth-child(1) .stretch { background-color: var(--gb-yellow) !important; color: var(--gb-bg) !important; }
.grid > article:nth-child(2) .stretch { background-color: var(--gb-orange) !important; color: var(--gb-bg) !important; }
.grid > article:nth-child(3) .stretch { background-color: var(--gb-green) !important; color: var(--gb-bg) !important; }
.grid > article:nth-child(4) .stretch { background-color: var(--gb-blue) !important; color: var(--gb-bg) !important; }
.grid > article:nth-child(5) .stretch { background-color: var(--gb-purple) !important; color: var(--gb-bg) !important; }
.grid > article:nth-child(6) .stretch { background-color: var(--gb-red) !important; color: var(--gb-bg) !important; }

/* Add leading and trailing padding to the longest word (Operate) */
.grid > article:nth-child(6) .stretch {
  padding-inline-start: 3rem;
  padding-inline-end: 3rem;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}