word-games-theme 3.3.6 → 3.3.7

data/assets/css/wordgames-home-v2.css

@@ -0,0 +1,2955 @@
+.wordgametheme-sidebar-right,
+.wordgametheme-sidebar-left {
+  min-width: 220px;
+  max-width: fit-content;
+  height: 100vh;
+  min-height: 300px;
+  max-height: fit-content;
+  top: 65px;
+  position: absolute;
+}
+
+.wordgametheme-sidebar-left {
+  left: 5px;
+}
+
+.wordgametheme-sidebar-right {
+  right: 5px;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+  /* Firefox */
+}
+
+/* Hide the decimal points */
+input[type="number"] {
+  -moz-appearance: textfield;
+  /* Firefox */
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  top: 0px;
+}
+
+#header-img {
+  width: 100%;
+}
+
+/* headings css */
+.main-header {
+  margin-bottom: 45vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pageHeaderBg {
+  background-position: center;
+  background-size: cover;
+  margin-bottom: 30vh;
+  padding: 15px 0;
+}
+
+.pageHeading {
+  position: relative;
+}
+
+.pageHeading h1 {
+  font-size: 37px;
+  font-weight: 799;
+  margin: 10px 0;
+  color: var(--mid-gray);
+}
+
+.heading-h2{
+  font-size: 17px;
+    padding-top: 8px;
+    font-weight: 500;
+    color: gray;
+}
+#containerWd {
+  max-width: 100%;
+  width: 900px !important;
+  padding: 0px;
+  position: relative;
+}
+
+#result-page-data {
+  max-width: 100%;
+  width: 950px !important;
+  padding: 0px;
+  position: relative;
+}
+
+
+.st0 {
+  fill: var(--primary-color)
+}
+
+.serachSection {
+  position: relative;
+}
+
+.serachSection .serachBox .txtBox {
+  text-transform: uppercase;
+  height: 80px;
+  border: solid 3px #313131;
+  border-radius: 74px;
+  background: #fff;
+  padding: 2rem;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  color: var(--txtColor);
+  text-indent: 15px;
+  position: relative;
+  box-shadow: 3px 6px 1px 0px var(--primary-color);
+}
+
+/* .txtBox:focus {
+  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
+  border-color: #86b7fe !important;
+} */
+
+.blinkBoxShadow {
+  animation: blinkBoxShadow 1s infinite alternate;
+}
+
+@keyframes blinkBoxShadow {
+  0% {
+    box-shadow: 0 0 2px 2px var(--primary-color);
+  }
+
+  100% {
+    box-shadow: 0 0 4px 4px var(--primary-color);
+  }
+}
+
+
+.serachSection .serachBox .letter-close-button {
+  position: absolute;
+  right: 300px;
+  top: 24px;
+  font-size: 18px;
+  cursor: pointer;
+  display: none;
+}
+
+.serachSection .serachBox .close_ltr_icon {
+  display: block;
+}
+
+.search-btn-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* margin-top: 1rem; */
+  width: 100%;
+  text-align: center;
+}
+
+.serachSection .serachBox .serachBtn {
+  color: transparent;
+  background-color: var(--primary-color) !important;
+  background: url(/assets/images/search.svg) no-repeat center center;
+  background-size: 35px 35px !important;
+  height: 64px;
+  width: 112px;
+  border: none;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  outline: 0;
+  border-radius: 74px;
+}
+
+.serachSection .serachBox .serachBtn:focus {
+  box-shadow: unset;
+}
+
+.serachSection .serachBox .select_dropDown2 {
+  height: 80px;
+  position: absolute;
+  top: 0px;
+  font-size: 16px;
+  width: 142px;
+  overflow: hidden;
+  object-fit: cover;
+  right: 142px;
+  border-bottom: 0 !important;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  border-top: 1px solid rgba(0, 0, 0, 0.11);
+}
+
+
+.serachSection .serachBox .select_dropDown2:focus {
+  outline: none;
+  box-shadow: unset;
+}
+
+input:focus-visible {
+  outline: none;
+  box-shadow: unset;
+}
+
+
+.serachSection .serachBox .advancedFilter .filterButton {
+  background: #f8f9fa;
+  box-shadow: 0 0 2px #343a4063;
+  width: 210px;
+  border-radius: 10px;
+  cursor: pointer;
+  border: none;
+  padding: 12px;
+  text-align: left;
+  color: #1c1107;
+  font-size: 13px;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  outline: none;
+}
+
+.angle-arrow2 {
+  background: url(/assets/images/angle-arrow-down.svg) no-repeat center center;
+  background-size: contain;
+  object-fit: cover;
+  width: 10px;
+  height: 10px;
+  font-weight: 900;
+  position: absolute;
+  top: 19px;
+  right: 9px;
+  margin: -3px 0;
+  cursor: pointer;
+  /* z-index: 9999; */
+}
+
+
+.startsWith,
+.mustInclude,
+.endsWith,
+.exculdeWith,
+.inculdeWith,
+.wordLength {
+  position: relative;
+}
+
+.actives {
+  z-index: 999;
+  top: 90px;
+  background: #fff;
+  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
+  padding: 15px 15px;
+  border-radius: 15px;
+  height: auto;
+  position: absolute;
+  right: -16px;
+  margin: 1rem 0;
+  flex-direction: column;
+  width: 240px;
+  display: inline-flex !important;
+  gap: 5px;
+}
+
+.advancedFilterOptions {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  display: none;
+}
+
+.filtersOptions {
+  cursor: pointer;
+  background-color: #000;
+  color: #fff;
+  width: 300px;
+  border: none;
+  outline: none;
+  padding: 1rem;
+  font-size: 16px;
+  border-end-start-radius: 30px;
+  border-bottom-right-radius: 30px;
+}
+
+.filterShow {
+  display: flex;
+}
+
+
+.fillterWrapper {
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+}
+
+.highlight_filter::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: red;
+  border-radius: 5px;
+  position: absolute;
+  right: 13px;
+}
+
+.fillterWrapper input {
+  border-radius: 74px;
+  border: solid 2px #313131;
+  background-color: #fff;
+  font-size: 17px;
+  padding: 5px 12px;
+  width: 200px;
+  outline: none;
+  box-shadow: none;
+  padding: 1.5rem 2.5rem;
+}
+
+.fillterWrapper .filter-tooltip {
+  /* opacity: .5; */
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.filter-tooltip i {
+  color: var(--white-color);
+  background-color: var(--primary-color);
+  border-radius: 100px;
+  width: 30px;
+  padding: 3px;
+  display: block;
+  text-align: center;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+.filter-tooltip::after,
+.filter-tooltip::before {
+  right: 0px;
+  opacity: 0;
+  position: absolute;
+  z-index: -100;
+
+}
+
+.filter-tooltip:focus::after,
+.filter-tooltip:focus::before,
+.filter-tooltip:hover::after,
+.filter-tooltip:hover::before {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  z-index: 100
+}
+
+.filter-tooltip::before {
+  border-style: var(--tooltip-border-style);
+  ;
+  border-width: 1em .75em 0 .75em;
+  border-color: #3e474f transparent transparent transparent;
+  transition: 0 !important;
+  bottom: 100%;
+  content: '';
+  margin-left: -.5em;
+  transform: scale(.6) translateY(-90%);
+  font-size: 12px;
+  top: -10px;
+}
+
+.filter-tooltip:focus::before,
+.filter-tooltip:hover::before {
+  transition: all .65s cubic-bezier(.84, -.18, .31, 1.26) .2s
+}
+
+.filter-tooltip::after {
+  font-size: 10px;
+  text-align: center;
+  background: #000;
+  border-radius: .25em;
+  bottom: 120%;
+  color: #edeff0;
+  content: attr(data-tip);
+  margin-left: -4em;
+  padding: var(--tooltip-padding);
+  transition: all .65s cubic-bezier(.84, -.18, .31, 1.26);
+  transform: scale(.6) translateY(50%);
+  width: 150px;
+}
+
+.filter-tooltip:focus::after,
+.filter-tooltip:hover::after {
+  transition: all .65s cubic-bezier(.84, -.18, .31, 1.26)
+}
+
+/* Feature highlightes section css */
+.feature-highlight-title,
+.howto,
+.infographics-title,
+.related_post_heading,
+.points-table {
+  font-size: 35px;
+  font-weight: 900;
+  border-bottom: 4px solid var(--primary-color);
+  width: 644px;
+}
+
+.features_data .card-body .card-title {
+  box-shadow: 2px 2px 0px 0 rgba(0, 0, 0, 1);
+  padding: 5px 1.2rem;
+  transition: all 0.5s ease;
+  font-size: 16px;
+  line-height: 25px;
+  color: var(--secondary-color-1);
+  font-weight: 600;
+  margin-bottom: 8px;
+  margin-top: 5px;
+  text-align: left;
+  background-color: var(--primary-color);
+  border-radius: 4px;
+}
+
+.features_data .card-body:hover i {
+  transform: scale(1.2);
+  transition: all 0.5s linear;
+}
+
+/* FAQ's section css */
+.faqs {
+  width: 100%;
+}
+
+.faqs details {
+  margin: 25px 0;
+}
+
+.faqs summary {
+  list-style: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  padding: 0;
+  margin-bottom: 1rem;
+  outline: 0;
+  border-radius: 0.25rem;
+  text-align: left;
+  cursor: pointer;
+  position: relative;
+  border-radius: 0;
+}
+
+details[open]>summary::after {
+  font-family: "Font Awesome 5 Free";
+  top: 0;
+  position: absolute;
+  content: '\2212';
+  right: 0;
+  font-size: 24px;
+  color: var(--primary-color);
+  border: 3px solid;
+  /* background-color: var(--primary-color); */
+  width: 29px;
+  height: 29px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+}
+
+details>summary::after {
+  font-family: "Font Awesome 5 Free";
+  position: absolute;
+  content: '\002B';
+  right: 0;
+  top: 0;
+  font-size: 24px;
+  color: var(--primary-color);
+  border: 3px solid;
+  width: 29px;
+  height: 29px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+}
+
+.faqList-container {
+  margin-top: 50px;
+  margin-bottom: 120px;
+}
+
+.faq-question {
+  margin: 0 0 25px;
+  font-size: 19px;
+  font-weight: 600;
+  color: #1E1E1E;
+  position: relative;
+  line-height: 28px;
+  cursor: pointer;
+}
+
+.faq-answer {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  color: #3E3E3E;
+  margin: 0 0 25px;
+  height: auto;
+  overflow: hidden;
+  width: 100%;
+}
+
+/* How to section design css */
+
+
+.how-to-section {
+  background-color: var(--secondary-color);
+}
+
+.how-to-section .how-to-leftimg {
+  margin-bottom: 24px;
+}
+
+.how-to-title {
+  background-color: #1E1E1E;
+  color: var(--white-color);
+  font-size: 22px;
+  line-height: 33px;
+  max-width: fit-content;
+  padding: 0 8px;
+  letter-spacing: 2px;
+}
+
+.how-to-section .how-to-list {
+  margin: 0;
+  padding: 6px 0;
+  list-style: none;
+  text-align: left;
+  margin-top: 1.5rem;
+}
+
+.youtubeVideoPlayer {
+  border-radius: 7px;
+  border: 2px solid black;
+  box-shadow: 3px 6px 1px 0px var(--primary-color);
+}
+
+.how-to-section .how-to-list-item {
+  line-height: 24px;
+  font-size: 15px;
+  font-weight: 400;
+  display: flex;
+  padding: 6px 0;
+}
+
+.how-to-section .how-to-list-item span {
+  min-width: 24px;
+}
+
+.how-to-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+.how-to-video .youtube-play-btn-wrapper {
+  position: absolute;
+  top: -4%;
+  left: -17px;
+  display: flex;
+  text-align: center;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.youtube-play-btn-wrapper .play-btn {
+  font-size: 28px;
+  width: 68px;
+  background-color: red;
+  border: none;
+  border-radius: 15px;
+}
+
+/* infographicss css */
+.inforgraphics_section {
+  width: 100%;
+  /* padding: 50px 0px 50px 0px; */
+  /* border-top: 1px solid rgb(224, 224, 224); */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.inforgraphics_section .wrapper {
+  display: flex;
+  max-width: 100%;
+  position: relative;
+  align-items: center;
+}
+
+.inforgraphics_section .wrapper svg {
+  top: 50%;
+  height: 44px;
+  width: 44px;
+  color: #343F4F;
+  cursor: pointer;
+  font-size: 1.15rem;
+  position: absolute;
+  text-align: center;
+  line-height: 44px;
+  background: #eee;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.1s linear;
+}
+
+.inforgraphics_section .wrapper svg:active {
+  transform: translateY(-50%) scale(0.9);
+}
+
+.inforgraphics_section .wrapper svg:hover {
+  background: #f2f2f2;
+}
+
+.inforgraphics_section .wrapper svg:first-child {
+  left: 0px;
+  display: none;
+  z-index: 999;
+}
+
+.inforgraphics_section .wrapper svg:last-child {
+  right: 0px;
+}
+
+.carousel {
+  display: flex;
+  max-width: 100%;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+.carousel-inner {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.slide {
+  cursor: pointer;
+  flex: 0 0 calc(100% / 3);
+  scroll-snap-align: start;
+  padding: 20px;
+}
+
+.carousel img {
+  width: 100%;
+  object-fit: contain;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.carousel-inner p {
+  text-align: center;
+  margin: 10px 0;
+  font-size: 14px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+/* recent and related posts on home page css */
+.recent-post-card,
+.related-post-card {
+  /* padding: 1rem; */
+  border: 3px solid var(--black-color);
+  border-radius: 10px;
+  box-shadow: 3px 6px 1px 0px var(--primary-color);
+}
+
+.related_post_heading {
+  /* width: 100%; */
+  font-size: 46px;
+  font-weight: 800;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.24;
+  letter-spacing: normal;
+  color: #11304e;
+  margin-bottom: 45px;
+  padding-top: 75px;
+  display: block;
+}
+
+.card-body {
+  padding: 1rem !important;
+}
+
+.card-body .anchor_link {
+  text-decoration: none !important;
+  color: #343a40 !important;
+}
+
+.post-desc {
+  font-size: 16px;
+  color: #3E3E3E;
+  line-height: 24px;
+}
+
+.card-body .anchor_link .card-title {
+  font-weight: 600;
+  font-size: 35px;
+  background-color: var(--primary-color);
+  line-height: 43px;
+  border-radius: 10px;
+  /* height: 166px; */
+  padding: 15px;
+}
+
+.card-footer {
+  border: none;
+}
+
+.wrapfooter {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.wrapfooter img {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+}
+
+.wrapfooter .author-meta {
+  flex: 1 1 auto;
+  padding: 0 15px;
+}
+
+.wrapfooter .author-meta a {
+  font-size: 15px;
+  color: #000;
+  text-transform: capitalize;
+}
+
+/* Rating tool css */
+.rating-tool {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0px 20px 0px;
+  border-top: 1px solid rgb(221, 221, 221);
+  border-bottom: 1px solid rgb(221, 221, 221);
+  margin-bottom: 60px;
+  position: relative;
+  top: 30px;
+}
+
+.rating-tool #rating-img {
+  height: 1px;
+  width: 1px;
+  filter: brightness(100);
+}
+
+.rating {
+  font-size: 30px;
+}
+
+.rating-tool .rating-text {
+  font-size: 35px;
+  font-weight: 700;
+  color: rgb(33, 33, 33);
+  padding: 6px;
+}
+
+.rating-tool .rating-stars {
+  color: #9d9d9d !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 1rem 0px;
+}
+
+.rating-tool .rating-stars i {
+  padding: 5px;
+  font-size: 40px;
+}
+
+.rating-tool .rating-value {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgb(33, 33, 33);
+  padding: 6px;
+}
+
+/* internatiionalization css */
+#int-modal-btn {
+  border: none;
+  padding: 0px 1rem;
+}
+
+/* word meaning page css */
+.information-title {
+  font-size: 43px;
+  font-weight: 900;
+}
+
+.section-gap {
+  padding: 60px 0;
+  font-size: 25px;
+  color: var(--black-color);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 30px;
+}
+
+.card-footer:last-child {
+  border-radius: 40px !important;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+
+@media (max-width: 768px) {
+
+  .letter-close-button img {
+    width: 30px;
+  }
+
+  .main-header {
+    padding-top: 0rem !important;
+    margin-bottom: 0vh;
+    padding-bottom: 3rem;
+    background: var(--primary-color);
+    height: auto !important;
+  }
+
+  .top_tool_bar {
+    display: block !important;
+  }
+
+  .blog-link,
+  #navbarDropdown {
+    display: none;
+  }
+
+  .navbar-toggler {
+    position: absolute;
+    right: 10px;
+    z-index: 999999;
+    top: 10px;
+    width: 50px;
+    height: 50px;
+    padding: 0;
+  }
+
+  .navbar-toggler img {
+    height: 50px;
+  }
+
+  .mobile-top-bar {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 100%;
+    top: 0;
+  }
+
+  .navbar-nav .top_tool_bar {
+    max-height: 100vh;
+    padding: 3rem;
+  }
+
+  .advancedFilterOptions {
+    display: block;
+    margin-top: 5px;
+  }
+
+  .filterShow {
+    display: none;
+  }
+
+  .fillterWrapper {
+    gap: 10px;
+    margin: 1rem 0px !important;
+  }
+
+  .overlay {
+    display: none;
+  }
+
+  #header-img {
+    display: none;
+  }
+
+  .txt-box-container {
+    padding: 0 1rem;
+  }
+
+  .fillterWrapper input {
+    width: 150px;
+    font-size: 12px;
+    font-weight: 900;
+  }
+
+  /* navbar ||| pageheading || searchsection css for mobile */
+  .navbar {
+    padding: 1.2rem 15px !important;
+  }
+
+  .pageHeaderBg {
+    background: unset;
+  }
+
+  .pageHeading h1 {
+    font-size: 2.1875rem;
+    line-height: normal;
+  }
+
+  .pageHeading>h2 {
+    font-size: 1.4rem;
+  }
+
+  #containerWd {
+    width: 100% !important;
+    /* padding: 0px 15px; */
+  }
+
+  .serachSection .serachBox .txtBox {
+    height: 70px !important;
+    font-size: 12px;
+    padding: 1rem !important;
+  }
+
+  .serachSection .serachBox .letter-close-button {
+    right: 45%;
+    top: 15px;
+    font-size: 15px;
+  }
+
+  .serachSection .serachBox .serachBtn {
+    height: 50px !important;
+    width: 50px !important;
+    top: 10px;
+    background-size: 20px 20px !important;
+    right: 24px;
+  }
+
+
+  .serachSection .serachBox .select_dropDown2 {
+    height: 50px;
+    width: 22%;
+    right: 77px;
+    border: none;
+    font-size: 12px;
+    top: 10px;
+  }
+
+  .filter-tooltip img {
+    width: 23.37px;
+    height: 23.37px;
+  }
+
+  .wrapper_dropDown {
+    align-items: flex-end;
+    /* flex-direction: column; */
+    gap: 5px !important;
+  }
+
+  .actives {
+    top: 102px;
+    right: -5px;
+  }
+
+  .letter-close-button svg {
+    width: 30px;
+  }
+
+  /* Feature Highlights ||  How to || Faq css for mobile */
+  .features_data .card-body {
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: unset;
+    /* margin: 20px 0; */
+  }
+
+  .feature-highlight-title,
+  .howto {
+    width: 120px !important;
+    font-size: 28px;
+    text-align: center;
+    margin: 0 auto
+  }
+
+  .related_post_heading {
+    font-size: 28px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .infographics-title {
+    font-size: 28px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .points-table {
+    width: auto !important;
+    font-size: 28px;
+  }
+
+  .card-text {
+    /* font-size: 12px !important; */
+    text-align: center !important;
+    padding: 1rem;
+  }
+
+
+
+  .faqList-container {
+    margin-bottom: 0px !important;
+  }
+
+  .faq-question {
+    font-size: 20px;
+    padding-right: 5rem;
+  }
+
+  .faq-answer {
+    font-size: 14px;
+    width: auto !important;
+  }
+
+  .how-to-section .how-to-leftimg {
+    margin-bottom: 24px;
+    width: 100%;
+  }
+
+  /* rating and social media  share icons css for mobile */
+
+
+  .social-icons {
+    position: static;
+    width: 100%;
+    font-size: 16px;
+    gap: 50px;
+    flex-direction: row;
+    z-index: 999;
+    box-shadow: unset;
+    border-top: 1px solid rgb(221, 221, 221);
+    border-bottom: 1px solid rgb(221, 221, 221);
+    height: auto;
+    padding: 20px;
+
+  }
+
+  .share-icon {
+    width: 14px;
+  }
+
+  .share-this {
+    font-weight: 900;
+    font-size: 14px;
+    display: block !important;
+    color: #000;
+    text-align: center;
+  }
+
+  /* youtube video how css */
+  .how-to-video-wrapper .youtubeVideoPlayer {
+    width: 100%;
+  }
+
+  .how-to-img-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  /* infographics css */
+  .inforgraphics_section .wrapper {
+    max-width: 100%;
+  }
+
+  .carousel-inner p {
+    font-size: 20px;
+  }
+
+  .inforgraphics_section .wrapper svg:first-child {
+    left: 0;
+    z-index: 99;
+  }
+
+  .inforgraphics_section .wrapper svg:last-child {
+    right: 0;
+    z-index: 99;
+    display: block !important;
+  }
+
+  .carousel {
+    overflow-x: hidden;
+  }
+
+  .carousel img {
+    height: auto !important;
+  }
+
+  .slide {
+    flex: 0 0 100%;
+    margin-right: 0;
+  }
+
+  /* footer css for mobile */
+  .footer-section .language-drop-down-item {
+    width: 100% !important;
+  }
+
+  .email_heaidng {
+    margin-top: 3rem;
+  }
+
+  .relatedPosts {
+    padding: 0 1.5rem;
+  }
+}
+
+
+@media (max-width: 992px) {
+
+  .wordgametheme-sidebar-right,
+  .wordgametheme-sidebar-left {
+    display: none;
+  }
+
+  .navbar-nav {
+    margin-left: 0rem;
+  }
+
+  .navbar-nav .nav-item {
+    padding: 0px !important;
+  }
+
+  .dropdown-menu.show {
+    display: block !important;
+    padding: 15px !important;
+  }
+}
+
+@media (max-width:1024px) {
+  .overlay {
+    display: none;
+  }
+
+
+
+}
+
+@media screen and (min-width: 1450px) {
+  .wordgametheme-sidebar-left {
+    left: 40px !important;
+  }
+
+  .wordgametheme-sidebar-right {
+    right: 40px !important;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .wordgametheme-sidebar-left {
+    left: 313px !important;
+  }
+
+  .wordgametheme-sidebar-right {
+    right: 313px !important;
+  }
+}
+
+
+/* //loader */
+
+
+.button-loader {
+  position: absolute;
+  top: 25px;
+  /* left: 100px; */
+  transform: translate(-50%, -50%);
+  border: 4px solid #ffffff;
+  border-top: 4px solid var(--primary-color);
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  animation: spin 1s linear infinite;
+  display: none;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+#download-button.loading .button-loader {
+  display: block;
+  /* Show the loader when button has loading class */
+}
+
+#processing-btn {
+  position: relative;
+}
+
+#processing-btn .button-loader {
+  left: 9%;
+}
+
+/* ==========================================================================
+   Home UI system (body.wg-home). Only presentation: markup hooks, Liquid data
+   and JS selectors used by the word finder are unchanged.
+   ========================================================================== */
+
+/* Unscoped fallback for the shared how-to step number */
+.how-to-step-num { min-width: 24px; }
+.how-to-step-num::after { content: "."; }
+
+.wg-home {
+  /* palette: 1 primary, 1 accent, neutrals */
+  --wg-primary: #6d28d9;
+  --wg-primary-2: #9333ea;
+  --wg-primary-soft: #f1e9fd;
+  --wg-accent: #ffb020;
+  --wg-accent-hover: #f59e0b;
+  --wg-on-accent: #2b1700;
+  --wg-bg: #f7f6fb;
+  --wg-surface: #ffffff;
+  --wg-surface-2: #f1eff7;
+  --wg-text: #1e1b2e;
+  --wg-muted: #5c5873;
+  --wg-line: #e5e2ee;
+  --wg-header: #15111f;
+  --wg-link: #6d28d9;
+  --wg-ring: rgba(109, 40, 217, .35);
+  --wg-hero: linear-gradient(135deg, #3b1596 0%, #6d28d9 52%, #a63ee8 100%);
+  /* shape + elevation (8px grid) */
+  --wg-r-sm: 12px; --wg-r: 16px; --wg-r-lg: 24px;
+  --wg-sh-1: 0 1px 2px rgba(30, 27, 46, .06), 0 1px 3px rgba(30, 27, 46, .08);
+  --wg-sh-2: 0 2px 4px rgba(30, 27, 46, .05), 0 12px 28px -12px rgba(30, 27, 46, .25);
+  --wg-sh-3: 0 4px 8px rgba(30, 27, 46, .06), 0 28px 56px -20px rgba(76, 29, 149, .45);
+  --wg-gap: 80px;
+  --wg-ad-h: 100px;
+  font-family: var(--font-family);
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--wg-text);
+  background: var(--wg-bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+.wg-home :focus-visible { outline: 3px solid var(--wg-ring); outline-offset: 2px; border-radius: 8px; }
+.wg-home a { color: var(--wg-link); }
+.wg-home.wg-lock { overflow: hidden; }
+.wg-skip { position: absolute; left: 16px; top: -64px; z-index: 2000; background: var(--wg-accent); color: var(--wg-on-accent); padding: 12px 16px; border-radius: 12px; font-weight: 800; transition: top .2s; }
+.wg-skip:focus { top: 8px; }
+
+/* ---------- Buttons ---------- */
+.wg-home .wg-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 44px; padding: 0 24px; border: 2px solid transparent; border-radius: 999px;
+  font: inherit; font-weight: 800; font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer;
+  transition: transform .15s, background .15s, box-shadow .15s, border-color .15s;
+}
+.wg-home .wg-btn--ghost { background: transparent; color: var(--wg-primary); border-color: var(--wg-primary); }
+.wg-home .wg-btn--ghost:hover { background: var(--wg-primary); color: #fff; }
+.wg-home .wg-btn--accent { background: var(--wg-accent); color: var(--wg-on-accent); box-shadow: 0 8px 20px -8px rgba(245, 158, 11, .8); }
+.wg-home .wg-btn--accent:hover { background: var(--wg-accent-hover); color: var(--wg-on-accent); transform: translateY(-2px); }
+
+/* ---------- Header ---------- */
+.wg-home .wg-header {
+  position: sticky; top: 0; z-index: 1000; width: 100%;
+  background: var(--wg-header); border-bottom: 1px solid rgba(255, 255, 255, .08);
+}
+.wg-header__bar { display: flex; align-items: center; gap: 16px; max-width: 1200px; height: 64px; margin: 0 auto; padding: 0 16px; }
+.wg-home .wg-logo { display: inline-flex; flex: none; }
+.wg-home .wg-logo img { height: 36px; width: auto; display: block; }
+.wg-home .wg-burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 12px; align-items: center; justify-content: center; }
+.wg-home .wg-header .navbar-toggler img { height: 24px; width: 24px; }
+.wg-home .wg-theme { margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
+.wg-home .wg-theme:hover { background: rgba(255, 255, 255, .16); }
+.wg-home #navbarSupportedContent { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
+.wg-menu__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.wg-menu__item { position: relative; }
+.wg-home .wg-menu__btn, .wg-home .wg-menu__link {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; background: transparent;
+  color: #fff; font: inherit; font-size: 15px; font-weight: 700; border-radius: 12px; cursor: pointer; text-decoration: none; transition: background .15s;
+}
+.wg-home .wg-menu__btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
+.wg-home .wg-menu__item.is-open > .wg-menu__btn::after { transform: translateY(1px) rotate(-135deg); }
+.wg-home .wg-menu__btn:hover, .wg-home .wg-menu__link:hover, .wg-home .wg-menu__item.is-open > .wg-menu__btn { background: rgba(255, 255, 255, .12); color: #fff; }
+.wg-mega {
+  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; display: none; gap: 8px 24px; padding: 20px;
+  min-width: 260px; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r); box-shadow: var(--wg-sh-3);
+}
+.wg-mega--wide { grid-template-columns: repeat(3, minmax(190px, 1fr)); width: max-content; max-width: min(840px, 92vw); }
+.wg-menu__item.is-open > .wg-mega { display: grid; }
+@media (hover: hover) and (min-width: 992px) {
+  .wg-menu__item:hover > .wg-mega { display: grid; }
+}
+.wg-mega__col { display: flex; flex-direction: column; min-width: 0; }
+.wg-mega__title { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wg-muted); }
+.wg-home .wg-mega a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--wg-text); font-size: 15px; font-weight: 600; text-decoration: none; min-height: 40px; }
+.wg-home .wg-mega a:hover { background: var(--wg-primary-soft); color: var(--wg-primary); }
+.wg-mega a small { margin-left: auto; font-size: 12px; color: var(--wg-muted); font-weight: 600; }
+.wg-home .wg-search { position: relative; width: min(280px, 100%); flex: none; }
+.wg-home .wg-search input.form-control { width: 100%; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; padding: 0 16px; font-size: 15px; box-shadow: none; }
+.wg-home .wg-search input.form-control::placeholder { color: rgba(255, 255, 255, .65); }
+.wg-home .wg-search input.form-control:focus { background: var(--wg-surface); color: var(--wg-text); border-color: var(--wg-accent); }
+.wg-home .wg-search .searchbarResults { width: auto; padding: 4px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 320px; overflow: auto; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-sm); box-shadow: var(--wg-sh-2); z-index: 30; }
+.wg-home .wg-search .result-item a { display: block; padding: 10px 14px; color: var(--wg-text); text-decoration: none; }
+.wg-home .wg-search .result-item a:hover { background: var(--wg-primary-soft); }
+
+@media (max-width: 991.98px) {
+  .wg-home .wg-burger { display: inline-flex; }
+  .wg-home .wg-header .wg-logo img { height: 32px; }
+  .wg-home #navbarSupportedContent {
+    display: none; position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 999; flex-direction: column; align-items: stretch; justify-content: flex-start;
+    gap: 16px; padding: 16px; overflow-y: auto; background: var(--wg-header); border-top: 1px solid rgba(255, 255, 255, .1);
+  }
+  .wg-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
+  .wg-menu__item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
+  .wg-home .wg-menu__btn, .wg-home .wg-menu__link { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 8px; color: #fff; font-size: 17px; }
+  .wg-home .wg-menu__btn:hover, .wg-home .wg-menu__link:hover, .wg-home .wg-menu__item.is-open > .wg-menu__btn { background: rgba(255, 255, 255, .1); color: #fff; }
+  .wg-mega { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 12px; min-width: 0; width: auto; max-width: none; }
+  .wg-menu__item.is-open > .wg-mega { display: block; }
+  .wg-mega--wide { width: auto; }
+  .wg-mega__col { margin-bottom: 12px; }
+  .wg-home .wg-search { width: 100%; }
+}
+@media (min-width: 992px) {
+  .wg-home #navbarSupportedContent { display: flex !important; }
+}
+
+/* ---------- Hero band + tool card ---------- */
+.wg-home .main-header { position: relative; isolation: isolate; padding-bottom: 8px; margin-bottom: 0; }
+.wg-home .wg-hero .pageHeading { position: relative; padding: 56px 16px 136px !important; }
+.wg-home .wg-hero .pageHeading::before {
+  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
+  background: var(--wg-hero); border-radius: 0 0 48px 48px;
+}
+.wg-home .pageHeading h1 { margin: 0 0 8px; color: #fff; font-size: clamp(32px, 5vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
+.wg-home .heading-h2 { padding: 0; color: rgba(255, 255, 255, .86); font-size: clamp(16px, 1.8vw, 20px); font-weight: 600; }
+.wg-home .serachSection { position: relative; z-index: 2; margin-top: -104px; padding: 0 16px; box-shadow: none; }
+.wg-home .serachSection .serachBox { max-width: 920px; margin: 0 auto; }
+.wg-tool-card {
+  position: relative; margin-top: 28px; padding: 48px 24px 24px; background: var(--wg-surface);
+  border: 1px solid var(--wg-line); border-radius: var(--wg-r-lg); box-shadow: var(--wg-sh-3);
+}
+.wg-tool-card, .wg-tool-card .container, .wg-tool-card .container-fluid { min-width: 0; max-width: 100%; }
+.wg-dict {
+  position: absolute; top: -26px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
+  height: 52px; padding: 0 8px 0 10px; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: 999px; box-shadow: var(--wg-sh-2); white-space: nowrap;
+}
+.wg-dict__icons { display: inline-flex; }
+.wg-dict__icons i { width: 24px; height: 24px; margin-left: -8px; border: 2px solid var(--wg-surface); border-radius: 50%; }
+.wg-dict__icons i:first-child { margin-left: 0; background: var(--wg-primary); }
+.wg-dict__icons i:nth-child(2) { background: var(--wg-accent); }
+.wg-dict__icons i:nth-child(3) { background: #14b8a6; }
+.wg-dict__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+.wg-home .serachSection .serachBox .select_dropDown2 {
+  position: static; width: auto; height: 44px; min-width: 190px; padding: 0 12px; border: 0; background: transparent; color: var(--wg-text);
+  font-size: 15px; font-weight: 800; cursor: pointer; border-radius: 999px;
+}
+.wg-home .serachSection .serachBox .select_dropDown2 option { color: #1e1b2e; }
+
+.wg-home #containerWd { width: 100% !important; max-width: 100%; padding: 0; }
+.wg-home .serachSection .serachBox .txtBox {
+  width: 100%; height: 64px; padding: 0 56px 0 52px; text-indent: 0; border: 2px solid var(--wg-line); border-radius: 18px;
+  background: var(--wg-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236d28d9' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
+  box-shadow: none; color: var(--wg-text); font-size: 18px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transition: border-color .15s, box-shadow .15s, background-color .15s;
+}
+.wg-home .serachSection .serachBox .txtBox::placeholder { color: var(--wg-muted); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 16px; }
+.wg-home .serachSection .serachBox .txtBox:focus { background-color: var(--wg-surface); border-color: var(--wg-primary); box-shadow: 0 0 0 4px var(--wg-ring); outline: none; }
+.wg-home .serachSection .serachBox .letter-close-button { right: 14px; top: 50%; transform: translateY(-50%); }
+.wg-home .letter-close-button img, .wg-home .letter-close-button svg { width: 28px; height: 28px; }
+
+.wg-home #result-page-data { width: 100% !important; max-width: 100%; padding: 0; }
+.wg-home .fillterWrapper {
+  display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0 !important; align-items: stretch; justify-content: stretch;
+}
+.wg-home .fillterWrapper > div { position: relative; }
+.wg-home .fillterWrapper input {
+  width: 100%; height: 48px; padding: 0 40px 0 14px; border: 2px solid var(--wg-line); border-radius: 12px; background: var(--wg-surface);
+  color: var(--wg-text); font-size: 15px; font-weight: 700; box-shadow: none; transition: border-color .15s, box-shadow .15s;
+}
+.wg-home .fillterWrapper input::placeholder { color: var(--wg-muted); font-weight: 600; }
+.wg-home .fillterWrapper input:hover { border-color: #c9bfe3; }
+.wg-home .fillterWrapper input:focus { border-color: var(--wg-primary); box-shadow: 0 0 0 4px var(--wg-ring); }
+.wg-home .fillterWrapper .filter-tooltip { position: absolute; top: 10px; right: 8px; transform: none; margin: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
+.wg-home .fillterWrapper .filter-tooltip img { width: 22px; height: 22px; }
+.wg-home .filtersOptions { width: 100%; max-width: 320px; min-height: 44px; border-radius: 999px; background: var(--wg-surface-2); color: var(--wg-text); font-weight: 800; border: 1px solid var(--wg-line); }
+.wg-home .actives { border-radius: 12px; border: 1px solid var(--wg-line); box-shadow: var(--wg-sh-2); background: var(--wg-surface); color: var(--wg-text); }
+.wg-home .search-btn-container { margin-top: 20px; display: flex; justify-content: center; width: 100%; }
+.wg-home .serachSection .serachBox .serachBtn {
+  position: static; width: 100%; max-width: 360px; height: 56px; padding: 0 32px; border: 0; border-radius: 999px;
+  background: var(--wg-accent) !important; background-image: none !important; color: var(--wg-on-accent); font-size: 18px; font-weight: 900; letter-spacing: .01em;
+  box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .9); transition: transform .15s, background-color .15s, box-shadow .15s;
+}
+.wg-home .serachSection .serachBox .serachBtn:hover { background: var(--wg-accent-hover) !important; transform: translateY(-2px); }
+.wg-home .serachSection .serachBox .serachBtn:active { transform: scale(.98); }
+.wg-home .serachSection .serachBox .serachBtn:focus { box-shadow: 0 0 0 4px var(--wg-ring); }
+
+/* results */
+.wg-home .allGroupWords { margin: 24px 0; padding: 20px; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r); box-shadow: var(--wg-sh-1); }
+.wg-home .wordListHeading, .wg-home .wordListHeading > h3 { color: var(--wg-text); font-weight: 900; }
+.wg-home .wordList > ul li, .wg-home .list_word { background: var(--wg-surface-2); color: var(--wg-text); border: 1px solid var(--wg-line); border-radius: 10px; font-weight: 800; cursor: copy; transition: transform .12s, border-color .12s, background .12s; }
+.wg-home .list_word:hover { border-color: var(--wg-primary); background: var(--wg-primary-soft); transform: translateY(-1px); }
+.wg-home .points { color: var(--wg-primary); font-weight: 900; }
+.wg-home .showmore_btn { background: var(--wg-primary) !important; border-radius: 999px !important; min-height: 44px; font-weight: 800 !important; }
+.wg-home .wordCount, .wg-home .errorMsg { color: var(--wg-text); }
+.wg-home .sort-select, .wg-home .length-select { min-height: 44px; border-radius: 999px; border: 1px solid var(--wg-line); background-color: var(--wg-surface); color: var(--wg-text); font-weight: 700; }
+
+/* ---------- Chip row ---------- */
+.wg-chips { max-width: 1200px; margin: 24px auto 0; padding: 0 16px; }
+.wg-chips__row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
+.wg-chips__row::-webkit-scrollbar { display: none; }
+.wg-home .wg-chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--wg-surface-2); border: 1px solid var(--wg-line); color: var(--wg-text); font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .15s, background .15s, color .15s; }
+.wg-home .wg-chip:hover { background: var(--wg-primary); color: #fff; border-color: var(--wg-primary); transform: translateY(-2px); }
+
+/* ---------- Page sections ---------- */
+.wg-page { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
+.wg-section { margin-top: var(--wg-gap); scroll-margin-top: 88px; }
+.wg-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
+.wg-section__head h2 { margin: 0; font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; color: var(--wg-text); }
+.wg-section__head p { margin: 4px 0 0; color: var(--wg-muted); font-size: 16px; }
+.wg-home .wg-more { flex: none; font-weight: 800; text-decoration: none; padding: 10px 0; }
+.wg-grid { display: grid; gap: 16px; }
+.wg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.wg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.wg-home .wg-card {
+  display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r);
+  box-shadow: var(--wg-sh-1); color: var(--wg-text); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s;
+}
+.wg-home .wg-card:hover { transform: translateY(-4px); box-shadow: var(--wg-sh-2); border-color: var(--wg-primary); color: var(--wg-text); }
+
+/* rail */
+.wg-arrows { display: flex; gap: 8px; }
+.wg-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wg-line); background: var(--wg-surface); color: var(--wg-text); font-size: 24px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
+.wg-arrow:hover { background: var(--wg-primary); color: #fff; }
+.wg-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: thin; }
+.wg-home .wg-rail__card {
+  flex: 0 0 240px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 112px; padding: 16px;
+  border: 2px solid var(--wg-line); border-radius: var(--wg-r); background: var(--wg-surface); color: var(--wg-text); text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s;
+}
+.wg-rail__card b { font-size: 17px; line-height: 1.3; }
+.wg-rail__card span { color: var(--wg-primary); font-weight: 800; font-size: 14px; }
+.wg-home .wg-rail__card:hover { transform: translateY(-4px); border-color: var(--wg-primary); box-shadow: var(--wg-sh-2); color: var(--wg-text); }
+.wg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.wg-home .wg-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--wg-primary-soft); color: var(--wg-primary); font-weight: 800; font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
+.wg-home .wg-pill:hover { background: var(--wg-primary); color: #fff; }
+
+/* game cards */
+.wg-game { display: flex; flex-direction: column; overflow: hidden; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r); box-shadow: var(--wg-sh-1); transition: transform .18s, box-shadow .18s; }
+.wg-game:hover { transform: translateY(-4px); box-shadow: var(--wg-sh-2); }
+.wg-game__thumb { display: flex; align-items: center; justify-content: center; height: 144px; background: linear-gradient(135deg, var(--c1), var(--c2)); font-size: 56px; }
+.wg-game__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; flex: 1; }
+.wg-game__body h3, .wg-game__body h4 { margin: 0; font-size: 20px; font-weight: 900; color: var(--wg-text); }
+.wg-game__body p { margin: 0 0 8px; color: var(--wg-muted); font-size: 15px; flex: 1; }
+.wg-badge { padding: 2px 10px; border-radius: 999px; background: var(--wg-primary-soft); color: var(--wg-primary); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
+
+/* hints + solvers */
+.wg-hint { position: relative; }
+.wg-hint__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; background: var(--wg-primary-soft); font-size: 22px; }
+.wg-hint b, .wg-solver b { font-size: 18px; font-weight: 900; }
+.wg-hint small { color: var(--wg-muted); font-size: 14px; }
+.wg-date { margin-top: 12px; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--wg-surface-2); color: var(--wg-muted); font-size: 12px; font-weight: 800; }
+.wg-solver span { color: var(--wg-muted); font-size: 15px; }
+
+/* crossword tabs */
+.wg-tabs__list { display: inline-flex; gap: 4px; padding: 4px; background: var(--wg-surface-2); border-radius: 999px; }
+.wg-tab { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--wg-muted); font: inherit; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
+.wg-tab.is-active { background: var(--wg-primary); color: #fff; }
+.wg-clues { margin: 16px 0 0; padding: 0; list-style: none; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r); overflow: hidden; }
+.wg-clues[hidden] { display: none; }
+.wg-clues li + li { border-top: 1px solid var(--wg-line); }
+.wg-home .wg-clues a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 20px; color: var(--wg-text); text-decoration: none; transition: background .15s; }
+.wg-home .wg-clues a:hover { background: var(--wg-primary-soft); }
+.wg-clues b { flex: none; padding: 4px 12px; border-radius: 8px; background: var(--wg-surface-2); letter-spacing: .12em; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
+
+/* ---------- Existing content blocks (data-driven) ---------- */
+.wg-home .container { max-width: 1200px; }
+.wg-home .feature-highlight-title, .wg-home .howto, .wg-home .infographics-title, .wg-home .related_post_heading, .wg-home .points-table {
+  position: relative; display: block; width: auto; max-width: 100%; border: 0; padding: 0 0 16px; margin: 0 0 8px; color: var(--wg-text);
+  font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; line-height: 1.2;
+}
+.wg-home .feature-highlight-title::after, .wg-home .howto::after, .wg-home .infographics-title::after, .wg-home .related_post_heading::after, .wg-home .points-table::after {
+  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--wg-accent);
+}
+.wg-home #featureContainer { margin-top: 0 !important; padding-top: 32px; }
+.wg-home #howContainer, .wg-home #faqsContainer { margin-top: 56px !important; margin-bottom: 0 !important; }
+.wg-home #featureContainer .feature-highlight-title { margin-left: 15px; }
+
+.wg-seo { max-width: 1200px; margin: var(--wg-gap) auto 0; padding: 0; position: relative; scroll-margin-top: 88px; }
+
+.wg-home .features_data { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 24px 15px 0 !important; }
+.wg-home .features_data > .card-body {
+  flex: none; max-width: none; width: auto; margin: 0 !important; padding: 24px !important; text-align: left;
+  background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r); box-shadow: var(--wg-sh-1); transition: transform .18s, box-shadow .18s;
+}
+.wg-home .features_data > .card-body:hover { transform: translateY(-4px); box-shadow: var(--wg-sh-2); }
+.wg-home .features_data .card-body .card-title { position: relative; margin: 0 0 12px; padding: 0 0 0 16px; background: none; box-shadow: none; border-radius: 0; color: var(--wg-text); font-size: 18px; font-weight: 800; line-height: 1.4; text-align: left; }
+.wg-home .features_data .card-body .card-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--wg-primary); }
+.wg-home .features_data .card-text { color: var(--wg-muted) !important; font-size: 15px !important; line-height: 1.75; }
+
+.wg-home .how-to-section { margin: 24px 0 0 !important; padding: 32px 12px !important; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-lg); box-shadow: var(--wg-sh-1); }
+.wg-home .how-to-section .how-to-leftimg, .wg-home .youtubeVideoPlayer { border: 0; border-radius: var(--wg-r); box-shadow: none; margin: 0; }
+.wg-home .how-to-title { max-width: none; margin: 0 0 16px; padding: 0; background: none; color: var(--wg-text); font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; letter-spacing: 0; line-height: 1.3; }
+.wg-home .how-to-section .how-to-list-item { align-items: flex-start; gap: 14px; margin-bottom: 8px; padding: 14px 16px; background: var(--wg-surface-2); border: 1px solid var(--wg-line); border-radius: 12px; color: var(--wg-text); font-size: 16px; line-height: 1.6; }
+.wg-home .how-to-step-num { flex: none; min-width: 0; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wg-primary); color: #fff; font-size: 14px; font-weight: 800; }
+.wg-home .how-to-step-num::after { content: none; }
+.wg-home .how-to-step-text { padding-top: 3px; }
+
+.wg-home .faqs { max-width: none; margin: 24px 0 0 !important; }
+.wg-home .faqs details { margin: 0 0 12px; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-sm); box-shadow: var(--wg-sh-1); transition: border-color .2s, box-shadow .2s; }
+.wg-home .faqs details[open] { border-color: var(--wg-primary); box-shadow: var(--wg-sh-2); }
+.wg-home .faqs summary { display: block; position: relative; min-height: 56px; padding: 16px 64px 16px 20px; margin: 0; border-radius: var(--wg-r-sm); color: var(--wg-text); font-size: 17px; font-weight: 800; line-height: 1.5; cursor: pointer; list-style: none; }
+.wg-home .faqs summary::-webkit-details-marker { display: none; }
+.wg-home .faqs details > summary::after, .wg-home .faqs details[open] > summary::after {
+  top: 50%; right: 16px; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; font-size: 18px; font-weight: 900;
+  background: var(--wg-primary-soft); color: var(--wg-primary); transition: background .2s, color .2s;
+}
+.wg-home .faqs details[open] > summary::after { background: var(--wg-primary); color: #fff; }
+.wg-home .faqs .faq-answer, .wg-home .faqs .faq__content { padding: 0 20px 20px; margin: 0; color: var(--wg-muted); font-size: 16px; line-height: 1.75; }
+.wg-home .faqs .faq-answer a { color: var(--wg-link); text-decoration: underline; text-underline-offset: 3px; }
+
+.wg-home .rating-tool { width: min(560px, 100%); margin: var(--wg-gap) auto 0; top: 0; padding: 32px 24px; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-lg); box-shadow: var(--wg-sh-2); }
+.wg-home .rating-tool .rating-text { color: var(--wg-text); font-size: 24px; font-weight: 900; }
+.wg-home .rating-tool .rating-stars svg { width: 40px; height: auto; cursor: pointer; transition: transform .15s; }
+.wg-home .rating-tool .rating-stars svg:hover { transform: scale(1.15); }
+.wg-home .rating-tool .rating-value, .wg-home .rating { color: var(--wg-muted); }
+
+.wg-home .container.px-5 { margin-top: var(--wg-gap); padding-left: 16px !important; padding-right: 16px !important; }
+.wg-home .recent-post-card, .wg-home .related-post-card { height: 100%; border: 1px solid var(--wg-line); border-radius: var(--wg-r); background: var(--wg-surface); box-shadow: var(--wg-sh-1); transition: transform .18s, box-shadow .18s; }
+.wg-home .recent-post-card:hover, .wg-home .related-post-card:hover { transform: translateY(-4px); box-shadow: var(--wg-sh-2); }
+.wg-home .card-body { padding: 24px !important; }
+.wg-home .card-body .anchor_link { color: var(--wg-text) !important; }
+.wg-home .card-body .anchor_link .card-title { padding: 0; margin-bottom: 12px !important; background: none; border-radius: 0; font-size: 20px; font-weight: 900; line-height: 1.4; }
+.wg-home .post-desc { color: var(--wg-muted); font-size: 15px; line-height: 1.7; }
+.wg-home .card-footer { background: transparent !important; border: 0; border-top: 1px solid var(--wg-line); padding: 16px 24px; }
+.wg-home .card-footer:last-child { border-radius: 0 0 var(--wg-r) var(--wg-r) !important; }
+.wg-home .wrapfooter { margin-bottom: 0; }
+.wg-home .wrapfooter .author-meta a { color: var(--wg-text); font-weight: 800; }
+.wg-home .post-date { color: var(--wg-muted); font-size: 13px; }
+.wg-home .carousel img { border-radius: 12px; box-shadow: var(--wg-sh-1); }
+.wg-home #infographicsContainer { margin-top: var(--wg-gap); }
+.wg-home .authors-list, .wg-home .authors-heading { color: var(--wg-text); }
+
+/* ---------- Ad slots (fixed height, never inside the tool card) ---------- */
+.wg-ad-slot { position: relative; max-width: 1200px; margin: 24px auto 0; min-height: var(--wg-ad-h); background: var(--wg-surface); border: 1px dashed var(--wg-line); border-radius: var(--wg-r); contain: layout size; }
+.wg-ad-slot::after { content: "Advertisement"; position: absolute; top: 8px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wg-muted); opacity: .7; }
+.wg-ad-slot--rect { min-height: 280px; }
+@media (max-width: 767.98px) { .wg-ad-slot { min-height: 100px; margin-left: 16px; margin-right: 16px; } }
+
+/* ---------- Footer ---------- */
+.wg-footer { margin-top: var(--wg-gap); background: var(--wg-header); color: #cfc9e6; padding: 56px 16px 24px; border-radius: 48px 48px 0 0; }
+.wg-footer__inner { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; max-width: 1200px; margin: 0 auto; }
+.wg-footer__brand p { margin: 16px 0; color: #a59fc0; max-width: 28ch; }
+.wg-footer__social { display: flex; gap: 8px; }
+.wg-home .wg-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
+.wg-footer__col { display: flex; flex-direction: column; }
+.wg-footer__col h3 { margin: 0 0 12px; color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
+.wg-footer__sub { margin-top: 24px !important; }
+.wg-home .wg-footer__col a { display: block; padding: 6px 0; min-height: 32px; color: #cfc9e6; font-size: 15px; text-decoration: none; }
+.wg-home .wg-footer__col a:hover { color: #fff; text-decoration: underline; }
+.wg-footer__feedback { display: flex; justify-content: center; max-width: 1200px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
+.wg-home .wg-footer + .footer-bottom { background: var(--wg-header) !important; color: #a59fc0 !important; margin: 0 !important; padding: 16px; }
+.wg-home .footer-bottom p, .wg-home .footer-bottom .drop-down-btn { color: #a59fc0; }
+
+/* toast */
+.wg-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2000; transform: translate(-50%, 24px); padding: 12px 20px; border-radius: 999px; background: var(--wg-header); color: #fff; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
+.wg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 1023.98px) {
+  .wg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .wg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .wg-home .fillterWrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .wg-footer__inner { grid-template-columns: repeat(3, 1fr); }
+  .wg-footer__brand { grid-column: 1 / -1; }
+}
+@media (max-width: 767.98px) {
+  .wg-home { --wg-gap: 56px; }
+  .wg-home .wg-hero .pageHeading { padding: 32px 16px 120px !important; }
+  .wg-home .wg-hero .pageHeading::before { border-radius: 0 0 32px 32px; }
+  .wg-tool-card { padding: 44px 16px 20px; border-radius: 20px; }
+  .wg-home .serachSection { padding: 0 12px; }
+  .wg-home .serachSection .serachBox .txtBox { height: 60px !important; font-size: 17px; padding: 0 52px 0 48px !important; }
+  .wg-home .serachSection .serachBox .select_dropDown2 { min-width: 0; width: 100%; max-width: 180px; height: 44px !important; font-size: 14px; right: auto; top: auto; }
+  .wg-home .serachSection .serachBox .serachBtn { height: 56px !important; width: 100% !important; max-width: none; right: auto; top: auto; background-size: auto !important; }
+  .wg-home .serachSection .serachBox .letter-close-button { right: 12px; top: 50%; }
+  .wg-home .advancedFilterOptions { display: block; margin-top: 12px; }
+  .wg-home .filterShow { display: none; }
+  .wg-home .filterShow.d-flex { display: grid !important; }
+  .wg-home .fillterWrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+  .wg-home .fillterWrapper input { width: 100%; font-size: 15px; font-weight: 700; }
+  .wg-grid--3, .wg-grid--4 { grid-template-columns: 1fr; }
+  .wg-section__head { flex-direction: column; align-items: flex-start; }
+  .wg-section__head .wg-arrows { display: none; }
+  .wg-home .features_data { grid-template-columns: 1fr; margin-left: 0 !important; margin-right: 0 !important; }
+  .wg-home .how-to-section { padding: 20px 8px !important; }
+  .wg-home .how-to-section > [class*="col-"] { margin-bottom: 16px; }
+  .wg-home .faqs summary { font-size: 16px; padding: 14px 56px 14px 16px; }
+  .wg-home .faqs .faq-answer { padding: 0 16px 16px; }
+  .wg-footer { border-radius: 32px 32px 0 0; }
+  .wg-footer__inner { grid-template-columns: 1fr 1fr; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wg-home *, .wg-home *::before, .wg-home *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
+}
+
+/* ---------- Icons (inline SVG line set, replaces emoji) ---------- */
+.wg-ico { display: block; flex: none; }
+.wg-game__thumb { position: relative; overflow: hidden; }
+.wg-game__thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, .28), transparent 55%), radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px) 0 0 / 16px 16px; }
+.wg-game__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 26px; color: #fff; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .25s; }
+.wg-game__icon .wg-ico { width: 42px; height: 42px; stroke-width: 1.6; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
+.wg-game:hover .wg-game__icon { transform: scale(1.06) rotate(-3deg); }
+.wg-hint__icon { color: var(--wg-primary); background: linear-gradient(145deg, var(--wg-primary-soft), var(--wg-surface-2)); border: 1px solid var(--wg-line); transition: background .18s, color .18s, transform .18s; }
+.wg-hint__icon .wg-ico { width: 24px; height: 24px; }
+.wg-hint:hover .wg-hint__icon { background: var(--wg-primary); color: #fff; transform: scale(1.06); }
+.wg-mega__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--wg-primary-soft); color: var(--wg-primary); transition: background .15s, color .15s; }
+.wg-mega__ico .wg-ico { width: 18px; height: 18px; }
+.wg-home .wg-mega a:hover .wg-mega__ico { background: var(--wg-primary); color: #fff; }
+
+/* ---------- Audit fixes ---------- */
+/* search no longer paints the hero white (JS sets an inline background) */
+.wg-home .main-header { background: transparent !important; }
+.wg-home .fillterWrapper.hide { display: none !important; }
+
+/* result skeleton follows the theme */
+.wg-home .placeholder-loader { width: 100%; }
+.wg-home .placeholder-loader ul { width: 100%; padding: 0; list-style: none; }
+.wg-home .skeleton-box { max-width: 100%; border-radius: 10px; background-color: var(--wg-surface-2); }
+.wg-home .skeleton-box::after { background-image: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .35) 30%, rgba(255, 255, 255, .6) 60%, transparent); animation-duration: 1.6s; }
+
+/* skip link contrast (the global link colour was overriding it) */
+.wg-home .wg-skip { color: var(--wg-on-accent); }
+
+/* tap targets */
+.wg-home .wrapfooter .author-meta a, .wg-home .authorName, .wg-home .authors-list a { display: inline-flex; align-items: center; min-height: 44px; }
+.wg-home .footer-bottom .drop-down-btn, .wg-home #int-modal-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 6px; }
+.wg-home .wg-footer__col a { min-height: 44px; display: flex; align-items: center; padding: 0; }
+
+/* one container width for every content block */
+.wg-home #featureContainer, .wg-home #howContainer, .wg-home #faqsContainer, .wg-home #infographicsContainer, .wg-home .container.px-5 {
+  width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 16px !important; padding-right: 16px !important;
+}
+.wg-home #featureContainer > .row { margin-left: 0; margin-right: 0; }
+.wg-home #featureContainer .feature-highlight-title { margin-left: 0; padding-left: 0; }
+.wg-home .features_data { margin-left: 0 !important; margin-right: 0 !important; }
+.wg-home #howContainer .how-to-section, .wg-home #howContainer .howto { margin-left: 0 !important; margin-right: 0 !important; }
+.wg-home .infographics-title { width: auto !important; }
+.wg-home .infographic-desc { color: var(--wg-muted); font-size: 14px; }
+.wg-home .slide img { width: 100%; height: auto; }
+
+/* mobile: fit dictionary pill + placeholder; dark drawer panels */
+@media (max-width: 991.98px) {
+  .wg-mega { background: transparent; }
+  .wg-home .wg-mega a { color: #e7e2f7; }
+  .wg-home .wg-mega a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
+  .wg-mega__title { color: #a59fc0; }
+  .wg-mega a small { color: #a59fc0; }
+  .wg-home .wg-mega__ico { background: rgba(255, 255, 255, .1); color: #e3a0f7; }
+}
+@media (max-width: 767.98px) {
+  .wg-dict { max-width: calc(100% - 24px); }
+  .wg-home .serachSection .serachBox .select_dropDown2 { min-width: 0; width: auto; max-width: none; text-overflow: ellipsis; }
+  .wg-home .serachSection .serachBox .txtBox::placeholder { font-size: 15px; }
+  .wg-home .placeholder-loader .skeleton-box { width: 100% !important; }
+}
+.wg-home .serachSection { background: transparent !important; }
+.wg-home .placeholder-loader ul { max-width: 920px; margin: 24px auto 0; }
+.wg-home .placeholder-loader .o-media__figure, .wg-home .placeholder-loader .o-media__body { width: 100%; }
+
+/* features: heading stacks above the card grid (bootstrap .row made them flex siblings) */
+.wg-home #featureContainer > .row { display: block; }
+.wg-home #featureContainer > .row > * { max-width: 100%; }
+.wg-home #featureContainer .feature-highlight-title { width: 100%; margin-bottom: 8px; }
+.wg-home #featureContainer .features_data { width: 100%; }
+
+/* old mobile rule pinned .navbar-toggler to the right edge; keep the burger in the header flow */
+.wg-home .wg-header .wg-burger { position: static; right: auto; top: auto; z-index: auto; width: 44px; height: 44px; padding: 0; flex: none; }
+@media (max-width: 991.98px) {
+  .wg-header__bar { gap: 8px; padding: 0 8px; }
+  .wg-home .wg-header .wg-logo { min-width: 0; }
+  .wg-home .wg-header .wg-logo img { max-width: 100%; }
+}
+
+/* ---------- UX polish ---------- */
+/* empty results toolbar (filter/sort icons) left a 60px gap under the tool card */
+.wg-home #containerWd .filters:has(.wordCount:empty) { display: none !important; }
+.wg-home #containerWd .pad:has(.wordCount:empty) { padding: 0 !important; }
+.wg-home #containerWd .pad:has(.wordCount:empty) > [class*="col-"] { padding-top: 0; padding-bottom: 0; }
+
+/* gentler tooltip "?" badges so the inputs read first */
+.wg-home .fillterWrapper .filter-tooltip { opacity: .55; transition: opacity .15s; }
+.wg-home .fillterWrapper > div:hover .filter-tooltip, .wg-home .fillterWrapper .filter-tooltip:hover { opacity: 1; }
+
+/* letters box: "/" shortcut hint on wide screens */
+@media (min-width: 992px) {
+  .wg-home .serachSection .txt-box-container::after {
+    content: "/"; position: absolute; right: 56px; top: 50%; transform: translateY(-50%); pointer-events: none;
+    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--wg-line); border-radius: 8px;
+    background: var(--wg-surface); color: var(--wg-muted); font-size: 14px; font-weight: 800;
+  }
+  .wg-home .serachSection .txt-box-container:focus-within::after { opacity: 0; }
+}
+
+/* header search icon */
+.wg-home .wg-search input.form-control {
+  padding-left: 42px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23b8b2d4' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: 16px center;
+}
+
+/* chips: fade the overflow edge so the row reads as scrollable */
+@media (max-width: 1199.98px) {
+  .wg-chips__row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 32px; }
+}
+
+/* section head: arrows sit on the heading's centre line */
+.wg-section__head { align-items: center; }
+.wg-arrow:disabled { opacity: .35; cursor: default; }
+.wg-arrow:disabled:hover { background: var(--wg-surface); color: var(--wg-text); }
+
+/* words-by-length: big number tile */
+.wg-home .wg-rail__card { position: relative; overflow: hidden; flex-basis: 200px; min-height: 132px; }
+.wg-rail__num {
+  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
+  background: var(--wg-hero); color: #fff; font-size: 22px; font-weight: 900; line-height: 1; box-shadow: 0 6px 14px -6px rgba(109, 40, 217, .6);
+  transition: transform .18s;
+}
+.wg-home .wg-rail__card .wg-rail__num { color: #fff; font-size: 22px; }
+.wg-home .wg-rail__card b { font-weight: 900; }
+.wg-home .wg-rail__card:hover .wg-rail__num { transform: rotate(-6deg) scale(1.06); }
+.wg-rail { scroll-padding-left: 2px; }
+
+/* game cards: the whole card is the hit area */
+.wg-game { position: relative; }
+.wg-home .wg-game__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
+.wg-home .wg-game:hover .wg-game__link { background: var(--wg-primary); color: #fff; }
+.wg-game:focus-within { box-shadow: 0 0 0 3px var(--wg-ring), var(--wg-sh-2); }
+.wg-home .wg-game__link:focus-visible { outline: none; }
+
+/* solvers: arrow affordance */
+.wg-home .wg-solver { position: relative; padding-right: 56px; }
+.wg-solver__go {
+  position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: 50%; background: var(--wg-primary-soft); color: var(--wg-primary); font-style: normal; font-weight: 900;
+  transition: background .15s, color .15s, transform .15s;
+}
+.wg-home .wg-solver:hover .wg-solver__go { background: var(--wg-primary); color: #fff; transform: translate(3px, -50%); }
+
+/* back to top */
+.wg-top {
+  position: fixed; right: 20px; bottom: 20px; z-index: 1500; display: inline-flex; align-items: center; justify-content: center;
+  width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--wg-primary); color: #fff; box-shadow: var(--wg-sh-3); cursor: pointer;
+  animation: wg-pop .2s ease-out; transition: transform .15s, background .15s;
+}
+.wg-top[hidden] { display: none; }
+.wg-top:hover { transform: translateY(-3px); background: var(--wg-primary-2); }
+@keyframes wg-pop { from { opacity: 0; transform: translateY(12px); } }
+
+/* infographics carousel overflowed the viewport by a couple of px on phones */
+.wg-home #infographicsContainer { overflow-x: clip; }
+
+/* phones: compact cards so the page isn't one long stack */
+@media (max-width: 767.98px) {
+  .wg-section__head { flex-direction: row; align-items: flex-end; }
+  .wg-section__head > div { min-width: 0; }
+  .wg-section__head p { font-size: 15px; }
+
+  .wg-game { flex-direction: row; align-items: stretch; }
+  .wg-game__thumb { flex: 0 0 104px; height: auto; min-height: 120px; }
+  .wg-game__icon { width: 56px; height: 56px; border-radius: 18px; }
+  .wg-game__icon .wg-ico { width: 28px; height: 28px; }
+  .wg-game__body { gap: 4px; padding: 14px 16px; }
+  .wg-game__body h3, .wg-game__body h4 { font-size: 18px; }
+  .wg-game__body p { font-size: 14px; line-height: 1.45; margin: 0; }
+  .wg-home .wg-game__link { min-height: 0; padding: 0; border: 0; background: none; font-size: 15px; margin-top: 4px; }
+  .wg-home .wg-game:hover .wg-game__link { background: none; color: var(--wg-primary); }
+
+  #daily-hints .wg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+  .wg-home .wg-hint { padding: 14px; }
+  .wg-hint__icon { width: 40px; height: 40px; margin-bottom: 6px; }
+  .wg-hint b { font-size: 16px; line-height: 1.3; }
+  .wg-hint small { font-size: 13px; }
+
+  .wg-home .wg-solver { padding: 16px 56px 16px 16px; }
+  .wg-hint b, .wg-solver b { font-size: 16px; }
+  .wg-solver span { font-size: 14px; }
+  #solvers .wg-grid--3 { gap: 10px; }
+
+  .wg-home .wg-rail__card { flex-basis: 160px; min-height: 120px; }
+  .wg-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
+}
+
+/* ---------- Game groups (NYT / LinkedIn / More) ---------- */
+.wg-group { scroll-margin-top: 88px; }
+.wg-group ~ .wg-group { margin-top: 40px; }
+.wg-group__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+.wg-group__head h3 { margin: 0; font-size: 22px; font-weight: 900; color: var(--wg-text); }
+@media (max-width: 767.98px) {
+  .wg-group ~ .wg-group { margin-top: 32px; }
+  .wg-group__head h3 { font-size: 19px; }
+}
+
+/* ---------- Round 3: parity with leading word sites ---------- */
+/* phones: advanced filters start collapsed (the grid !important above was keeping them open) */
+@media (max-width: 767.98px) {
+  .wg-home .fillterWrapper.filterShow:not(.d-flex) { display: none !important; }
+}
+
+/* words by length: main list + extra lists */
+.wg-home .wg-rail__card { flex: 0 0 216px; justify-content: flex-start; gap: 12px; min-height: 0; padding: 16px; }
+.wg-home .wg-rail__card:hover { transform: none; }
+.wg-home .wg-rail__main { display: flex; align-items: center; gap: 12px; color: var(--wg-text); text-decoration: none; }
+.wg-home .wg-rail__main b { font-size: 17px; font-weight: 900; }
+.wg-home .wg-rail__main:hover b { color: var(--wg-primary); }
+.wg-home .wg-rail__main:hover .wg-rail__num { transform: rotate(-6deg) scale(1.06); }
+.wg-rail__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.wg-home .wg-rail__links a {
+  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--wg-surface-2); border: 1px solid var(--wg-line);
+  color: var(--wg-text); font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
+}
+.wg-home .wg-rail__links a:hover { background: var(--wg-primary-soft); border-color: var(--wg-primary); color: var(--wg-primary); }
+@media (pointer: coarse) { .wg-home .wg-rail__links a { min-height: 40px; } }
+
+/* game artwork in a light tile */
+.wg-game__icon--art { background: rgba(255, 255, 255, .94); border-color: rgba(255, 255, 255, .9); }
+.wg-game__icon--art .wg-art { width: 52px; height: 52px; display: block; }
+.wg-game__thumb { height: 128px; }
+
+/* card meta: badge + updated date */
+.wg-game__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.wg-game__date { color: var(--wg-muted); font-size: 13px; font-weight: 700; }
+
+/* featured card: ribbon + tinted body */
+.wg-game__ribbon {
+  position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px;
+  background: rgba(255, 255, 255, .95); color: #1e1b2e; font-size: 12px; font-weight: 900; letter-spacing: .02em; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35);
+}
+.wg-game--featured { border-color: var(--wg-primary); box-shadow: 0 0 0 1px var(--wg-primary), var(--wg-sh-2); }
+.wg-game--featured .wg-game__body { background: linear-gradient(180deg, var(--wg-primary-soft), transparent 70%); }
+.wg-home .wg-game--featured .wg-game__link { background: var(--wg-primary); color: #fff; }
+
+@media (max-width: 767.98px) {
+  .wg-game__thumb { height: auto; }
+  .wg-game__icon--art .wg-art { width: 36px; height: 36px; }
+  .wg-game__ribbon { top: auto; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 2px 8px; font-size: 10px; white-space: nowrap; }
+  .wg-home .wg-game--featured .wg-game__link { background: none; color: var(--wg-primary); }
+  .wg-home .wg-rail__card { flex-basis: 196px; }
+}
+.wg-home .wg-rail__main b { white-space: nowrap; }
+@media (max-width: 767.98px) { .wg-home .wg-rail__card { flex-basis: 212px; } .wg-home .wg-rail__main b { font-size: 16px; } }
+
+/* ---------- Mega menu v2 (full-width panels under the header bar) ---------- */
+@media (min-width: 992px) {
+  .wg-header__bar { position: relative; }
+  .wg-home #navbarSupportedContent { align-self: stretch; }
+  .wg-menu, .wg-menu__list { height: 100%; }
+  .wg-menu__item { position: static; display: flex; align-items: center; height: 100%; }
+  .wg-mega {
+    left: 16px; right: 16px; top: 100%; min-width: 0; padding: 0; overflow: hidden;
+    border-radius: 0 0 var(--wg-r-lg) var(--wg-r-lg); border-top: 0;
+  }
+  .wg-menu__item.is-open > .wg-mega { display: block; }
+  .wg-menu__item:hover > .wg-mega { display: block; }
+  .wg-mega__inner { display: grid; gap: 32px; padding: 24px 28px 28px; }
+  .wg-mega__inner--solvers { grid-template-columns: 1.5fr 1fr 1fr; }
+  .wg-mega__inner--daily { grid-template-columns: 1fr 1fr 280px; }
+  .wg-mega__inner--games, .wg-mega__inner--cross { grid-template-columns: 1fr; }
+  .wg-mega__games--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .wg-mega__games--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+.wg-mega__title { margin-bottom: 12px; }
+.wg-home .wg-mega a small { margin-left: 0; }
+
+/* solver cards */
+.wg-mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.wg-home .wg-mega .wg-mega__card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 0; border-radius: 12px; }
+.wg-mega__card b { font-size: 15px; font-weight: 800; line-height: 1.3; }
+.wg-home .wg-mega .wg-mega__card small { font-size: 13px; line-height: 1.4; color: var(--wg-muted); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.wg-home .wg-mega .wg-mega__card:hover small { color: var(--wg-text); }
+
+/* plain links column */
+.wg-home .wg-mega .wg-mega__link { min-height: 36px; padding: 6px 10px; font-size: 15px; font-weight: 600; }
+
+/* words-by-length number grid */
+.wg-mega__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
+.wg-home .wg-mega .wg-mega__nums a {
+  flex-direction: column; justify-content: center; gap: 0; min-height: 52px; padding: 6px 4px; border: 1px solid var(--wg-line); border-radius: 12px; background: var(--wg-surface-2); text-align: center;
+}
+.wg-mega__nums b { font-size: 18px; font-weight: 900; line-height: 1.1; }
+.wg-home .wg-mega .wg-mega__nums small { font-size: 11px; color: var(--wg-muted); font-weight: 700; }
+.wg-home .wg-mega .wg-mega__nums a:hover { background: var(--wg-primary); border-color: var(--wg-primary); color: #fff; }
+.wg-home .wg-mega .wg-mega__nums a:hover small { color: rgba(255, 255, 255, .85); }
+.wg-home .wg-mega .wg-mega__more { min-height: 40px; margin-top: 8px; padding: 6px 10px; color: var(--wg-primary); font-weight: 800; }
+
+/* game rows with artwork */
+.wg-mega__games { display: grid; grid-template-columns: 1fr; gap: 4px; }
+.wg-home .wg-mega .wg-mega__game { gap: 12px; padding: 8px 10px; min-height: 52px; border-radius: 12px; }
+.wg-mega__game > span:last-child { display: flex; flex-direction: column; min-width: 0; }
+.wg-mega__game b { font-size: 15px; font-weight: 800; line-height: 1.25; }
+.wg-home .wg-mega .wg-mega__game small { font-size: 12px; color: var(--wg-muted); font-weight: 600; }
+.wg-mega__art {
+  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
+  background: #fff; border: 1px solid var(--wg-line); box-shadow: var(--wg-sh-1); transition: transform .15s;
+}
+.wg-mega__art .wg-art { width: 30px; height: 30px; }
+.wg-mega__art--ico { color: var(--wg-primary); }
+.wg-mega__art--ico .wg-ico { width: 20px; height: 20px; }
+.wg-home .wg-mega .wg-mega__game:hover .wg-mega__art { transform: scale(1.08) rotate(-4deg); }
+
+/* promo card */
+.wg-home .wg-mega .wg-mega__promo {
+  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; min-height: 100%; padding: 20px;
+  border-radius: var(--wg-r); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; overflow: hidden;
+}
+.wg-mega__promo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 90% 0%, rgba(255, 255, 255, .35), transparent 60%), radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px) 0 0 / 16px 16px; }
+.wg-mega__promo > * { position: relative; }
+.wg-mega__promo-art { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: auto; border-radius: 18px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
+.wg-mega__promo-art .wg-art { width: 46px; height: 46px; }
+.wg-home .wg-mega .wg-mega__promo small { margin-top: 16px; color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
+.wg-mega__promo b { font-size: 22px; font-weight: 900; line-height: 1.2; }
+.wg-mega__promo span:not(.wg-mega__promo-art) { font-size: 14px; color: rgba(255, 255, 255, .92); }
+.wg-mega__promo em { margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; color: #1e1b2e; font-style: normal; font-weight: 900; font-size: 14px; transition: transform .15s; }
+.wg-home .wg-mega .wg-mega__promo:hover { background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; }
+.wg-home .wg-mega .wg-mega__promo:hover em { transform: translateX(4px); }
+
+/* mobile drawer */
+@media (max-width: 991.98px) {
+  .wg-mega__inner { display: flex; flex-direction: column; gap: 20px; padding: 8px 4px 16px; }
+  .wg-mega__cards { grid-template-columns: 1fr; gap: 0; }
+  .wg-home .wg-mega .wg-mega__card small { display: none; }
+  .wg-home .wg-mega .wg-mega__card { min-height: 44px; justify-content: center; }
+  .wg-mega__nums { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .wg-home .wg-mega .wg-mega__nums a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; min-height: 48px; }
+  .wg-home .wg-mega .wg-mega__nums small, .wg-home .wg-mega .wg-mega__game small { color: #a59fc0; }
+  .wg-mega__games, .wg-mega__games--3, .wg-mega__games--4 { grid-template-columns: 1fr 1fr; gap: 4px; }
+  .wg-mega__art { width: 34px; height: 34px; border-radius: 10px; border: 0; }
+  .wg-mega__art .wg-art { width: 26px; height: 26px; }
+  .wg-mega__game b { font-size: 14px; }
+  .wg-home .wg-mega .wg-mega__promo { display: none; }
+  .wg-home .wg-mega .wg-mega__more { color: #d8b4fe; }
+}
+@media (max-width: 380px) {
+  .wg-mega__games, .wg-mega__games--3, .wg-mega__games--4 { grid-template-columns: 1fr; }
+}
+
+/* ---------- Finder hero & modern tool card ---------- */
+.wg-home .wg-header {
+  background: #ffffff !important;
+  border-bottom: 1px solid #e5e2ee !important;
+  box-shadow: 0 1px 3px rgba(30, 27, 46, 0.04) !important;
+}
+.wg-home .wg-header .wg-logo {
+  display: inline-flex;
+  align-items: center;
+}
+.wg-home .wg-header .wg-logo-svg {
+  height: 36px;
+  width: auto;
+  display: block;
+}
+.wg-home .wg-header .wg-logo-svg .st1 {
+  fill: #1e1b2e !important;
+}
+.wg-home .wg-footer .wg-logo-svg {
+  height: 32px;
+  width: auto;
+  display: block;
+}
+.wg-home .wg-footer .wg-logo-svg .st1 {
+  fill: #ffffff !important;
+}
+.wg-home .wg-menu__btn, .wg-home .wg-menu__link {
+  color: #1e1b2e !important;
+  white-space: nowrap;
+  font-weight: 700 !important;
+  font-size: 15px;
+}
+.wg-home .wg-menu__btn:hover,
+.wg-home .wg-menu__link:hover,
+.wg-home .wg-menu__item.is-open > .wg-menu__btn {
+  background: #f1e9fd !important;
+  color: #6d28d9 !important;
+}
+.wg-home .wg-header .navbar-toggler img {
+  filter: invert(1) !important;
+}
+.wg-home .wg-search {
+  display: none !important;
+}
+.wg-home .wg-theme {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: #f1eff7;
+  border: 1px solid #e5e2ee;
+  color: #1e1b2e;
+  margin-left: auto;
+  cursor: pointer;
+  transition: background .15s, color .15s, border-color .15s;
+}
+.wg-home .wg-theme:hover {
+  background: #ede9fe;
+  border-color: #c4b5fd;
+  color: #6d28d9;
+}
+
+@media (max-width: 991.98px) {
+  .wg-home #navbarSupportedContent {
+    background: #ffffff !important;
+    border-top: 1px solid #e5e2ee !important;
+  }
+  .wg-home .wg-menu__item {
+    border-bottom: 1px solid #e5e2ee !important;
+  }
+  .wg-home .wg-menu__btn, .wg-home .wg-menu__link {
+    color: #1e1b2e !important;
+  }
+}
+
+.wg-home .wg-hero .pageHeading {
+  padding: 56px 16px 148px !important;
+  position: relative;
+}
+.wg-home .wg-hero .pageHeading::before {
+  background: linear-gradient(140deg, #18092f 0%, #340c60 32%, #581596 68%, #6a1ab3 100%) !important;
+  border-radius: 0 0 36px 36px !important;
+}
+.wg-hero-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 18px;
+  margin-bottom: 20px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.wg-hero-pill__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #10b981;
+}
+.wg-home .pageHeading h1 {
+  font-size: clamp(34px, 4.6vw, 50px);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: #ffffff !important;
+  margin-bottom: 12px;
+}
+.wg-home .heading-h2 {
+  font-size: clamp(15px, 1.7vw, 17.5px);
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.88) !important;
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.wg-home .serachSection {
+  margin-top: -116px;
+  position: relative;
+  z-index: 2;
+  padding: 0 16px;
+}
+.wg-home .serachSection .serachBox {
+  max-width: 760px;
+  margin: 0 auto;
+}
+.wg-home .wg-tool-card {
+  position: relative;
+  margin-top: 0;
+  padding: 24px 28px 26px;
+  background: #ffffff !important;
+  border-radius: 22px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 20px 50px -15px rgba(22, 6, 44, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+.wg-card-header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+.wg-dict {
+  position: static;
+  transform: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 14px;
+  background: #fdf4ff;
+  border: 1px solid #fae8ff;
+  border-radius: 12px;
+  height: auto;
+}
+.wg-dict__icon {
+  stroke: #b641da;
+  color: #b641da;
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+.wg-dict__label {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e1b2e;
+  margin: 0;
+}
+.wg-home .serachSection .serachBox .wg-dict .select_dropDown2 {
+  background: transparent !important;
+  border: 0 !important;
+  font-size: 13px !important;
+  font-weight: 800 !important;
+  color: #b641da !important;
+  padding: 0 16px 0 2px !important;
+  cursor: pointer;
+  outline: none;
+  box-shadow: none !important;
+  width: auto;
+  height: auto;
+}
+.wg-dict-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #64748b;
+}
+.wg-dict-hint__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fae8ff;
+  color: #b641da;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.wg-home .serachSection .serachBox .txt-box-container {
+  position: relative;
+}
+.wg-home .serachSection .serachBox .txtBox {
+  width: 100% !important;
+  height: 60px !important;
+  padding: 0 96px 0 52px !important;
+  border-radius: 14px !important;
+  border: 1.5px solid #e2e8f0 !important;
+  font-size: 16px !important;
+  font-weight: 500 !important;
+  color: #1e1b2e !important;
+  background-color: #f8fafc !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b641da' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-size: 20px 20px !important;
+  background-position: 18px center !important;
+  transition: border-color .15s, box-shadow .15s, background-color .15s !important;
+}
+.wg-home .serachSection .serachBox .txtBox:focus {
+  background-color: #ffffff !important;
+  border-color: #b641da !important;
+  box-shadow: 0 0 0 4px rgba(182, 65, 218, 0.18) !important;
+  outline: none !important;
+}
+.wg-char-count {
+  position: absolute;
+  right: 52px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  font-weight: 600;
+  color: #94a3b8;
+  pointer-events: none;
+}
+
+.wg-quick-rack {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+.wg-quick-rack__label {
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: #64748b;
+  margin-right: 4px;
+}
+.wg-rack-chip {
+  padding: 4px 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e1b2e;
+  cursor: pointer;
+  transition: all .15s;
+}
+.wg-rack-chip:hover {
+  background: #fdf4ff;
+  border-color: #f0abfc;
+  color: #b641da;
+  transform: translateY(-1px);
+}
+
+.wg-home .advancedFilterOptions {
+  display: flex;
+  justify-content: center;
+  margin-top: 18px;
+}
+.wg-home .filtersOptions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 20px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.wg-home .filtersOptions:hover {
+  background: #e2e8f0;
+  color: #1e1b2e;
+}
+
+.wg-home .fillterWrapper {
+  display: grid !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  gap: 10px !important;
+  margin: 16px 0 0 !important;
+}
+.wg-home .fillterWrapper .startsWith,
+.wg-home .fillterWrapper .endsWith,
+.wg-home .fillterWrapper .inculdeWith,
+.wg-home .fillterWrapper .exculdeWith,
+.wg-home .fillterWrapper .mustInclude,
+.wg-home .fillterWrapper .wordLength {
+  position: relative !important;
+  height: 46px !important;
+}
+.wg-home .fillterWrapper .filter_val {
+  width: 100% !important;
+  height: 46px !important;
+  padding: 0 40px 0 14px !important;
+  border-radius: 12px !important;
+  border: 1.5px solid #e2e8f0 !important;
+  background: #f8fafc !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #1e1b2e !important;
+}
+.wg-home .fillterWrapper .filter_val:focus {
+  border-color: #b641da !important;
+  box-shadow: 0 0 0 3px rgba(182, 65, 218, 0.18) !important;
+  background: #ffffff !important;
+}
+.wg-home .fillterWrapper .filter-tooltip {
+  position: absolute !important;
+  top: 50% !important;
+  right: 12px !important;
+  left: auto !important;
+  margin: 0 !important;
+  transform: translateY(-50%) !important;
+}
+.wg-home .fillterWrapper .filter-tooltip img {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.wg-home .search-btn-container {
+  display: flex !important;
+  justify-content: center !important;
+  width: 100% !important;
+  margin-top: 24px !important;
+}
+.wg-home .serachSection .serachBox .serachBtn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  height: 54px !important;
+  min-height: 54px !important;
+  width: min(100%, 340px) !important;
+  padding: 0 36px !important;
+  border: 0 !important;
+  border-radius: 999px !important;
+  font-size: 17px !important;
+  font-weight: 800 !important;
+  letter-spacing: .01em !important;
+  background: linear-gradient(135deg, #b641da 0%, #8c20ad 100%) !important;
+  background-image: linear-gradient(135deg, #b641da 0%, #8c20ad 100%) !important;
+  color: #ffffff !important;
+  box-shadow: 0 12px 28px -6px rgba(182, 65, 218, 0.5) !important;
+  cursor: pointer !important;
+  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
+}
+.wg-home .serachSection .serachBox .serachBtn:hover {
+  background: linear-gradient(135deg, #c04de4 0%, #9b28bd 100%) !important;
+  background-image: linear-gradient(135deg, #c04de4 0%, #9b28bd 100%) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 16px 34px -4px rgba(182, 65, 218, 0.65) !important;
+  color: #ffffff !important;
+}
+.wg-home .serachSection .serachBox .serachBtn:active {
+  transform: scale(.98) !important;
+}
+.wg-home .serachSection .serachBox .serachBtn svg {
+  stroke: #ffffff !important;
+  color: #ffffff !important;
+}
+.wg-home .serachSection .serachBox .serachBtn span {
+  color: #ffffff !important;
+}
+
+@media (max-width: 767.98px) {
+  .wg-home .wg-hero .pageHeading {
+    padding: 36px 16px 110px !important;
+  }
+  .wg-home .serachSection {
+    margin-top: -84px;
+  }
+  .wg-home .wg-tool-card {
+    padding: 18px 16px 18px;
+    border-radius: 20px;
+  }
+  .wg-home .serachSection .serachBox .txtBox {
+    height: 56px !important;
+    font-size: 15px !important;
+  }
+  .wg-home .fillterWrapper {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: 8px !important;
+  }
+  .wg-home .serachSection .serachBox .serachBtn {
+    width: 100% !important;
+  }
+}
+.wg-home .wg-menu__btn, .wg-home .wg-menu__link { white-space: nowrap; }
+
+/* ---------- Word finder UX polish ---------- */
+/* counter only while typing; "/" shortcut hint only while empty (they used to overlap) */
+.wg-home .wg-char-count { right: 54px; opacity: 0; transition: opacity .15s, color .15s; font-variant-numeric: tabular-nums; }
+.wg-home .txt-box-container.has-value .wg-char-count { opacity: 1; }
+.wg-home .wg-char-count.is-full { color: #b641da; }
+@media (min-width: 992px) {
+  .wg-home .serachSection .txt-box-container.has-value::after { display: none; }
+  .wg-home .serachSection .txt-box-container::after { right: 16px; }
+}
+.wg-home .serachSection .serachBox .letter-close-button { cursor: pointer; border-radius: 50%; transition: transform .15s; }
+.wg-home .serachSection .serachBox .letter-close-button:hover { transform: translateY(-50%) scale(1.1); }
+
+/* quick rack: tactile chips */
+.wg-home .wg-rack-chip { min-height: 32px; font-family: inherit; letter-spacing: .02em; }
+.wg-home .wg-rack-chip:active { transform: scale(.96); }
+.wg-home .wg-rack-chip:focus-visible,
+.wg-home .filtersOptions:focus-visible,
+.wg-home .serachBtn:focus-visible { outline: 3px solid rgba(182, 65, 218, .45); outline-offset: 2px; }
+@media (pointer: coarse) { .wg-home .wg-rack-chip { min-height: 40px; padding: 6px 14px; } }
+
+/* advanced options: clear toggle with active-filter badge */
+.wg-home .filtersOptions { position: relative; transition: background .15s, color .15s, border-color .15s; }
+.wg-home .filtersOptions img { width: 18px; height: 18px; opacity: .7; }
+.wg-home .wg-filter-badge {
+  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
+  border-radius: 999px; background: #b641da; color: #fff; font-size: 11px; font-weight: 800;
+}
+.wg-home .filtersOptions:hover { border-color: #f0abfc; }
+
+/* filter inputs: stronger hover/filled states */
+.wg-home .fillterWrapper .filter_val { transition: border-color .15s, box-shadow .15s, background .15s; }
+.wg-home .fillterWrapper .filter_val:hover { border-color: #cbd5e1 !important; }
+.wg-home .fillterWrapper .filter_val:not(:placeholder-shown) { border-color: #d8b4fe !important; background: #fdf4ff !important; font-weight: 700 !important; }
+.wg-home .fillterWrapper .filter_val::placeholder { color: #64748b; font-weight: 600; }
+
+/* ---------- Word finder UX polish, round 2 ---------- */
+/* advanced toggle: compact, left-aligned row with a divider line instead of a stretched pill */
+.wg-home .advancedFilterOptions { justify-content: flex-start; align-items: center; gap: 14px; margin-top: 20px; }
+.wg-home .advancedFilterOptions::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
+.wg-home .advancedFilterOptions .filtersOptions {
+  width: auto !important; height: 36px; padding: 0 14px; gap: 8px; background: #fff; color: #6b21a8; border-color: #e9d5ff;
+}
+.wg-home .advancedFilterOptions .filtersOptions:hover { background: #fdf4ff; color: #6b21a8; }
+.wg-home .filtersOptions .wg-filter-chev { transition: transform .2s; }
+.wg-home .filtersOptions[aria-expanded="true"] .wg-filter-chev { transform: rotate(180deg); }
+@media (min-width: 768px) { .wg-home .fillterWrapper.wg-filters-closed { display: none !important; } }
+
+/* filter inputs: floating label once filled, quieter "?" help icons */
+.wg-home .fillterWrapper .wg-filter-label {
+  position: absolute; top: -8px; left: 12px; padding: 0 6px; background: #fff; border-radius: 4px;
+  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #9333ea; pointer-events: none;
+  opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .15s;
+}
+.wg-home .fillterWrapper .filter_val:not(:placeholder-shown) ~ .wg-filter-label,
+.wg-home .fillterWrapper .filter_val:focus ~ .wg-filter-label { opacity: 1; transform: none; }
+.wg-home .fillterWrapper .filter-tooltip img { width: 18px !important; height: 18px !important; }
+.wg-home .fillterWrapper .filter-tooltip { opacity: .4; }
+
+/* letter picker: one full-width row under the filters */
+.wg-home .fillterWrapper .dropdown-content {
+  grid-column: 1 / -1; width: 100%; max-height: none; min-width: 0; overflow: hidden;
+  flex-wrap: nowrap; justify-content: space-between; gap: 2px; padding: 8px;
+  background: #fff; border: 1.5px solid #e9d5ff; border-radius: 14px;
+  box-shadow: 0 10px 24px -8px rgba(124, 58, 237, .25);
+}
+.wg-home .fillterWrapper .dropdown-content a {
+  flex: 1 1 0; min-width: 0; padding: 8px 0; text-align: center; text-decoration: none;
+  font-size: 15px; font-weight: 800; color: #1e1b2e; border-radius: 8px; transition: background .12s, color .12s;
+}
+.wg-home .fillterWrapper .dropdown-content a:hover { background: #b641da; color: #fff; }
+
+/* ---------- Word finder: premium hero + tool card ---------- */
+.wg-home .wg-hero .pageHeading::after {
+  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; border-radius: 0 0 36px 36px; pointer-events: none;
+  background:
+    radial-gradient(520px 260px at 82% 18%, rgba(232, 121, 249, .38), transparent 70%),
+    radial-gradient(460px 300px at 12% 88%, rgba(129, 140, 248, .32), transparent 70%),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420'%3E%3Cg font-family='Georgia,serif' font-weight='800' fill='%23fff' fill-opacity='.07' text-anchor='middle'%3E%3Cg transform='rotate(-14 130 90)'%3E%3Crect x='96' y='56' width='68' height='68' rx='12'/%3E%3C/g%3E%3Cg transform='rotate(10 1080 70)'%3E%3Crect x='1048' y='40' width='64' height='64' rx='12'/%3E%3C/g%3E%3Cg transform='rotate(18 70 300)'%3E%3Crect x='40' y='270' width='58' height='58' rx='11'/%3E%3C/g%3E%3Cg transform='rotate(-8 1140 290)'%3E%3Crect x='1110' y='262' width='60' height='60' rx='11'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center top / cover no-repeat;
+}
+@media (max-width: 767.98px) { .wg-home .wg-hero .pageHeading::after { border-radius: 0 0 32px 32px; } }
+
+.wg-home .serachSection .serachBox { max-width: 820px; }
+.wg-home .wg-tool-card {
+  padding: 28px 32px 32px; border-radius: 26px; border: 1px solid rgba(182, 65, 218, .12); overflow: hidden;
+  box-shadow: 0 30px 70px -24px rgba(44, 10, 90, .45), 0 2px 0 rgba(255, 255, 255, .8) inset;
+}
+.wg-home .wg-tool-card::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
+  background: linear-gradient(90deg, #6d28d9, #b641da 55%, #f0abfc);
+}
+.wg-home .serachSection .serachBox .txtBox { height: 64px !important; font-size: 17px !important; border-radius: 16px !important; }
+
+/* find words: bigger CTA with a soft shine */
+.wg-home .serachSection .serachBox .serachBtn { height: 58px !important; min-height: 58px !important; width: min(100%, 380px) !important; position: relative !important; overflow: hidden; }
+.wg-home .serachSection .serachBox .serachBtn::after {
+  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: left .6s;
+}
+.wg-home .serachSection .serachBox .serachBtn:hover::after { left: 130%; }
+.wg-home .serachSection .serachBox .serachBtn svg { transition: transform .2s; }
+.wg-home .serachSection .serachBox .serachBtn:hover svg { transform: translateX(4px); }
+
+@media (max-width: 767.98px) {
+  .wg-home .wg-tool-card { padding: 22px 16px 22px; border-radius: 22px; }
+}
+
+/* ---------- Word finder: phone fixes ---------- */
+@media (max-width: 767.98px) {
+  .wg-home .wg-card-header-bar { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 14px; }
+  .wg-home .wg-card-header-bar .wg-dict { position: static; transform: none; width: 100%; max-width: 100%; height: 46px; justify-content: flex-start; }
+  .wg-home .wg-card-header-bar .select_dropDown2 { flex: 1; min-width: 0; width: 100% !important; text-overflow: ellipsis; }
+  .wg-home .wg-dict-hint { font-size: 12.5px; padding-left: 4px; }
+  .wg-home .wg-tool-card #containerWd,
+  .wg-home .wg-tool-card #result-page-data { padding-left: 0; padding-right: 0; }
+  .wg-home .serachSection .serachBox .txtBox { padding: 0 72px 0 46px !important; background-position: 15px center !important; font-size: 15px !important; text-overflow: ellipsis; }
+  .wg-home .wg-char-count { right: 48px; }
+  .wg-home .fillterWrapper { margin-top: 12px !important; }
+}
+@media (max-width: 380px) {
+  .wg-home .fillterWrapper { grid-template-columns: 1fr !important; }
+  .wg-home .wg-tool-card { padding: 18px 14px 20px; }
+}
+@media (max-width: 767.98px) {
+  .wg-home .wg-tool-card .container-fluid,
+  .wg-home .wg-tool-card .container { padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; max-width: 100% !important; }
+  .wg-home .wg-tool-card .txt-box-container { margin: 0 !important; padding: 0 !important; width: 100%; }
+}
+
+/* ---------- Word finder: finishing touches ---------- */
+/* CTA was ~12px off-centre: let the container span the card and centre the button */
+.wg-home .search-btn-container { width: 100% !important; margin: 26px 0 0 !important; padding: 0 !important; }
+.wg-home .serachSection .serachBox .serachBtn { margin: 0 auto !important; }
+.wg-home .fillterWrapper { margin-bottom: 0 !important; }
+
+/* header row: dictionary pill + clear-all */
+.wg-reset {
+  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
+  background: transparent; color: #64748b; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s;
+}
+.wg-reset[hidden] { display: none; }
+.wg-reset:hover { background: #fdf4ff; color: #9333ea; }
+.wg-reset:focus-visible { outline: 3px solid rgba(182, 65, 218, .45); outline-offset: 2px; }
+@media (max-width: 767.98px) { .wg-home .wg-card-header-bar .wg-reset { align-self: flex-end; margin-top: -2px; } }
+
+/* card + filters: gentle entrance and hover lift */
+.wg-home .wg-tool-card { animation: wg-card-in .5s cubic-bezier(.2, .8, .2, 1) both; }
+@keyframes wg-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
+.wg-home .fillterWrapper .filter_val:hover:not(:focus) { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(124, 58, 237, .35); }
+.wg-home .serachSection .serachBox .txtBox { box-shadow: 0 6px 18px -10px rgba(124, 58, 237, .35) !important; }
+.wg-home .serachSection .serachBox .txtBox:focus { box-shadow: 0 0 0 4px rgba(182, 65, 218, .18), 0 10px 24px -10px rgba(124, 58, 237, .45) !important; }
+@media (prefers-reduced-motion: reduce) { .wg-home .wg-tool-card { animation: none; } }
+.wg-home .serachSection .serachBox .serachBtn { right: auto !important; left: auto !important; top: auto !important; }
+
+/* ---------- Word finder: dictionary chip + popover inside the letters box ---------- */
+.wg-home .wg-tool-card { background: linear-gradient(90deg, #6d28d9, #b641da 55%, #f0abfc) top / 100% 4px no-repeat, #ffffff !important; overflow: visible; }
+.wg-home .wg-tool-card::before { display: none; }
+.wg-home .wg-card-header-bar.is-empty { display: none; }
+.wg-home .wg-dict--dd { position: static; transform: none; width: 100%; height: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
+.wg-home .wg-dict--dd .wg-dict__icon, .wg-home .wg-dict--dd .wg-dict__label { display: none; }
+.wg-home .serachSection .serachBox .wg-dict--dd .select_dropDown2 {
+  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none;
+}
+.wg-home .txt-box-container::after { display: none !important; }
+
+.wg-input-tools { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; z-index: 2; }
+.wg-home .wg-input-tools .wg-char-count { position: static; transform: none; }
+.wg-home .wg-input-tools .letter-close-button { position: static !important; transform: none !important; width: 28px; height: 28px; display: none; }
+.wg-home .wg-input-tools .letter-close-button img { width: 24px; height: 24px; }
+.wg-home .serachSection .serachBox .txtBox { padding-right: 290px !important; }
+
+.wg-dd { position: relative; }
+.wg-dd__btn {
+  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 14px; border: 1px solid #ead7ff; border-radius: 12px; cursor: pointer;
+  background: linear-gradient(180deg, #fbf5ff, #f3e8ff); color: #7e22ce; font: 800 13.5px/1 inherit; font-family: inherit; white-space: nowrap;
+  transition: background .15s, border-color .15s, box-shadow .15s;
+}
+.wg-dd__btn:hover { border-color: #d8b4fe; box-shadow: 0 6px 14px -8px rgba(126, 34, 206, .5); }
+.wg-dd__btn:focus-visible { outline: 3px solid rgba(182, 65, 218, .45); outline-offset: 2px; }
+.wg-dd__chev { transition: transform .2s; }
+.wg-dd.is-open .wg-dd__chev { transform: rotate(180deg); }
+.wg-dd.is-open .wg-dd__btn { border-color: #b641da; background: #fff; }
+
+.wg-dd__menu {
+  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 300px; margin: 0; padding: 6px; list-style: none;
+  background: #fff; border: 1px solid #efe3ff; border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(44, 10, 90, .4), 0 2px 6px rgba(44, 10, 90, .08);
+  animation: wg-dd-in .16s ease-out both;
+}
+.wg-dd__menu[hidden] { display: none; }
+@keyframes wg-dd-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
+.wg-dd__menu li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; text-align: left; outline: none; transition: background .12s; }
+.wg-dd__menu li:hover, .wg-dd__menu li:focus-visible { background: #faf5ff; }
+.wg-dd__check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #e4d4f7; color: transparent; }
+.wg-dd__menu li.is-on .wg-dd__check { background: linear-gradient(135deg, #b641da, #8c20ad); border-color: transparent; color: #fff; }
+.wg-dd__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.wg-dd__txt b { font-size: 14px; font-weight: 800; color: #1e1b2e; }
+.wg-dd__txt small { font-size: 12px; font-weight: 500; color: #7c6f92; }
+.wg-dd__menu li.is-on .wg-dd__txt b { color: #7e22ce; }
+
+.wg-home .advancedFilterOptions .wg-reset { margin-left: auto; }
+.wg-home .advancedFilterOptions::after { order: 1; }
+.wg-home .advancedFilterOptions .wg-reset { order: 2; }
+
+@media (max-width: 767.98px) {
+  .wg-home .wg-card-header-bar { margin-bottom: 10px; }
+  .wg-home .wg-dict--dd .wg-dd, .wg-home .wg-dict--dd .wg-dd__btn { width: 100%; }
+  .wg-home .wg-dict--dd .wg-dd__btn { height: 48px; justify-content: flex-start; }
+  .wg-home .wg-dict--dd .wg-dd__chev { margin-left: auto; }
+  .wg-home .wg-dict--dd .wg-dd__menu { left: 0; right: 0; width: auto; }
+  .wg-home .serachSection .serachBox .txtBox { padding-right: 84px !important; }
+}
+@media (prefers-reduced-motion: reduce) { .wg-dd__menu { animation: none; } .wg-dd__chev { transition: none; } }
+
+/* the word finder loads wordfinder-result.css after a search (.serachSection { top: 68px }); keep the card in flow so it never covers the results */
+.wg-home .serachSection { top: 0 !important; }
+
+/* ---------- Word finder: results area matches the card ---------- */
+.wg-home .wg-hero > #containerWd { width: 100% !important; max-width: 1040px !important; margin: 0 auto !important; padding: 0 16px !important; }
+.wg-home #containerWd .pad { padding-top: 8px; }
+.wg-home #containerWd .wordCount { font-size: 18px; font-weight: 800; color: #1e1b2e; }
+.wg-home #containerWd .filters { gap: 12px; padding: 18px 0 10px; flex-wrap: wrap; }
+
+.wg-home #containerWd .length-select,
+.wg-home #containerWd .sort-select {
+  height: 44px; min-width: 130px; padding: 0 36px 0 14px; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important;
+  background-color: #fff; box-shadow: none !important; color: #1e1b2e; font-size: 14px; font-weight: 700; cursor: pointer;
+  transition: border-color .15s, box-shadow .15s;
+}
+.wg-home #containerWd .length-select:hover,
+.wg-home #containerWd .sort-select:hover { border-color: #d8b4fe !important; }
+.wg-home #containerWd .length-select:focus,
+.wg-home #containerWd .sort-select:focus { border-color: #b641da !important; box-shadow: 0 0 0 3px rgba(182, 65, 218, .18) !important; outline: none; }
+
+.wg-home #containerWd .wordlistContainer,
+.wg-home #containerWd .allGroupWords {
+  margin: 14px 0; padding: 14px; background: #fff; border: 1px solid #efe3ff; border-radius: 18px; box-shadow: 0 10px 28px -18px rgba(44, 10, 90, .35);
+}
+.wg-home #containerWd .wordListHeading {
+  margin: 0 0 14px; padding: 12px 18px; border-radius: 12px; background: linear-gradient(135deg, #4c1d95, #7e22ce 60%, #b641da);
+  color: #fff !important; font-size: 17px; font-weight: 800; letter-spacing: .01em;
+}
+.wg-home #containerWd .wordListHeading, .wg-home #containerWd .wordListHeading > h3 { color: #fff !important; }
+.wg-home #containerWd .list_word { border: 1.5px solid #ead7ff !important; background: #fdfaff !important; box-shadow: none !important; }
+.wg-home #containerWd .list_word:hover { border-color: #b641da !important; background: #faf0ff !important; transform: translateY(-1px); }
+
+@media (max-width: 767.98px) {
+  .wg-home #containerWd .filters { padding-top: 14px; }
+  .wg-home #containerWd .sortingFilters { width: 100%; }
+  .wg-home #containerWd .sortingFilters > div { flex: 1; }
+  .wg-home #containerWd .length-select, .wg-home #containerWd .sort-select { width: 100%; }
+}
+
+/* ---------- Word finder: CLS/LCP hardening (everything is server-rendered; JS never moves boxes) ---------- */
+.wg-home .serachSection .serachBox .wg-dd__select {
+  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
+  border: 0 !important; opacity: 0 !important; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0);
+}
+/* filter count badge overlays the toggle instead of resizing it */
+.wg-home .filtersOptions .wg-filter-badge { position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 2px #fff; }
+/* the toggle row keeps its height whether or not "Clear all" is visible */
+.wg-home .advancedFilterOptions { min-height: 36px; }
+/* no opacity-0 entrance on the card (would delay it as an LCP candidate) */
+.wg-home .wg-tool-card { animation: none !important; }
+/* hero decoration: gradients only (no data-URI image that Chrome could pick as the LCP element) */
+.wg-home .wg-hero .pageHeading::after {
+  background:
+    radial-gradient(520px 260px at 82% 18%, rgba(232, 121, 249, .38), transparent 70%),
+    radial-gradient(460px 300px at 12% 88%, rgba(129, 140, 248, .32), transparent 70%) !important;
+}
+.wg-home .wg-hero::after {
+  content: ""; position: absolute; z-index: -1; top: 90px; left: 8%; width: 68px; height: 68px; border-radius: 14px; transform: rotate(-14deg);
+  background: rgba(255, 255, 255, .07); pointer-events: none;
+}
+@media (max-width: 767.98px) { .wg-home .wg-hero::after { display: none; } }
+
+/* phones: chip sits above the letters box via CSS order (no JS relocation) */
+@media (max-width: 767.98px) {
+  .wg-home .txt-box-container { display: flex; flex-direction: column; }
+  .wg-home .wg-input-tools { display: contents; }
+  .wg-home .wg-dd { order: -1; width: 100%; margin-bottom: 10px; }
+  .wg-home .wg-dd .wg-dd__btn { width: 100%; height: 48px; justify-content: flex-start; }
+  .wg-home .wg-dd .wg-dd__chev { margin-left: auto; }
+  .wg-home .wg-dd .wg-dd__menu { left: 0; right: 0; width: auto; }
+  .wg-home .txt-box-container .wg-char-count { position: absolute; right: 48px; bottom: 28px; top: auto; transform: translateY(50%); }
+  .wg-home .txt-box-container .letter-close-button { position: absolute !important; right: 12px; bottom: 28px; top: auto !important; transform: translateY(50%) !important; }
+}
+@media (min-width: 768px) { .wg-searching .wg-hero > #containerWd { min-height: 560px; } }
+/* while a search is loading, keep the (still empty) "Found N words" row in flow so it can't push the list down when it fills */
+html.wg-searching .wg-home #containerWd .filters:has(.wordCount:empty) { display: flex !important; min-height: 72px; }
+html.wg-searching .wg-home #containerWd .pad:has(.wordCount:empty) { padding-top: 8px !important; }
+
+/* mobile/tablet: logo on the left, hamburger on the right (DOM order is unchanged, so tab order/drawer stay the same) */
+@media (max-width: 991.98px) {
+  .wg-header__bar { padding: 0 12px 0 16px; }
+  .wg-home .wg-header .wg-burger { order: 3; margin-left: auto; }
+  .wg-home .wg-header .wg-logo { order: 1; }
+}
+
+/* ---------- Mega menu v3: clean panels, tidy cards, readable on the light drawer ---------- */
+.wg-home .wg-mega__title {
+  display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7c6f92;
+}
+.wg-home .wg-mega__title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b641da; flex: none; }
+.wg-home .wg-mega a { text-decoration: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
+
+/* solver cards */
+.wg-home .wg-mega .wg-mega__card { padding: 12px 14px; gap: 4px; border: 1px solid #f1eafc; border-radius: 14px; background: #fff; color: #1e1b2e; }
+.wg-home .wg-mega .wg-mega__card:hover { border-color: #d8b4fe; background: #faf5ff; color: #6d28d9; transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(126, 34, 206, .5); }
+.wg-home .wg-mega .wg-mega__card small { color: #7c6f92; }
+
+/* finder links with an arrow that slides in */
+.wg-home .wg-mega .wg-mega__link { justify-content: space-between; min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: #1e1b2e; }
+.wg-home .wg-mega .wg-mega__link::after { content: "\2192"; color: #b641da; opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s; }
+.wg-home .wg-mega .wg-mega__link:hover { background: #faf5ff; color: #6d28d9; }
+.wg-home .wg-mega .wg-mega__link:hover::after { opacity: 1; transform: none; }
+
+/* words by length */
+.wg-home .wg-mega .wg-mega__nums a { min-height: 54px; border: 1px solid #eee3ff; border-radius: 12px; background: #faf7ff; color: #1e1b2e; justify-content: center; }
+.wg-home .wg-mega .wg-mega__nums a:hover { background: linear-gradient(135deg, #b641da, #8c20ad); border-color: transparent; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 18px -10px rgba(140, 32, 173, .8); }
+.wg-home .wg-mega .wg-mega__more { display: inline-flex; margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: #f5ecff; color: #7e22ce; font-weight: 800; }
+.wg-home .wg-mega .wg-mega__more:hover { background: #7e22ce; color: #fff; }
+
+/* games / crosswords tiles */
+.wg-home .wg-mega .wg-mega__game { border: 1px solid #f1eafc; border-radius: 14px; background: #fff; color: #1e1b2e; padding: 10px 12px; }
+.wg-home .wg-mega .wg-mega__game:hover { border-color: #d8b4fe; background: #faf5ff; color: #6d28d9; box-shadow: 0 10px 20px -14px rgba(126, 34, 206, .5); }
+.wg-home .wg-mega .wg-mega__game small { color: #7c6f92; }
+
+@media (min-width: 992px) {
+  .wg-home .wg-mega {
+    background: #fff; border: 1px solid #efe7ff; border-top: 0; border-radius: 0 0 22px 22px;
+    box-shadow: 0 38px 60px -30px rgba(44, 10, 90, .4);
+  }
+  .wg-home .wg-mega__inner { gap: 0; padding: 0; }
+  .wg-home .wg-mega__col { padding: 26px 28px 28px; }
+  .wg-home .wg-mega__col + .wg-mega__col { border-left: 1px solid #f1eafc; }
+  .wg-home .wg-mega__inner--solvers { grid-template-columns: 1.7fr 1fr 1.05fr; }
+  .wg-home .wg-mega__inner--daily { grid-template-columns: 1fr 1fr 300px; }
+  .wg-home .wg-mega .wg-mega__promo { margin: 18px 18px 18px 6px; }
+  .wg-home .wg-mega__nums { gap: 8px; }
+
+  /* the two short menus open as compact panels under their own trigger */
+  .wg-home .wg-menu__item:has(#mm-games),
+  .wg-home .wg-menu__item:has(#mm-cross) { position: relative; }
+  .wg-home #mm-games.wg-mega, .wg-home #mm-cross.wg-mega { left: 0; right: auto; width: min(560px, 92vw); border-top: 1px solid #efe7ff; border-radius: 0 0 22px 22px; }
+  .wg-home #mm-games .wg-mega__games--3, .wg-home #mm-cross .wg-mega__games--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+}
+
+/* phones/tablets: drawer is white, so links must be dark */
+@media (max-width: 991.98px) {
+  .wg-home .wg-mega { background: transparent; box-shadow: none; border: 0; padding: 0 0 8px; }
+  .wg-home .wg-mega__inner { gap: 14px; padding: 4px 0 6px; }
+  .wg-home .wg-mega a { color: #1e1b2e !important; }
+  .wg-home .wg-mega a:hover { background: #faf5ff; color: #6d28d9 !important; }
+  .wg-home .wg-mega__title { margin: 6px 8px 8px; color: #7c6f92; }
+  .wg-home .wg-mega .wg-mega__card { border: 0; border-radius: 10px; padding: 10px 12px; min-height: 44px; box-shadow: none; }
+  .wg-home .wg-mega .wg-mega__link::after { display: none; }
+  .wg-home .wg-mega .wg-mega__link { justify-content: flex-start; }
+  .wg-home .wg-mega .wg-mega__nums a { background: #faf7ff; border-color: #eee3ff; color: #1e1b2e !important; }
+  .wg-home .wg-mega .wg-mega__nums a:hover { background: #7e22ce; color: #fff !important; }
+  .wg-home .wg-mega .wg-mega__nums small, .wg-home .wg-mega .wg-mega__game small, .wg-home .wg-mega a small { color: #7c6f92; }
+  .wg-home .wg-mega .wg-mega__nums a:hover small { color: rgba(255, 255, 255, .85); }
+  .wg-home .wg-mega .wg-mega__game { border-color: #f1eafc; }
+  .wg-home .wg-mega .wg-mega__more { background: #f5ecff; color: #7e22ce !important; }
+}
+@media (min-width: 992px) {
+  .wg-home .wg-mega .wg-mega__promo { min-height: 0; align-self: stretch; border-radius: 16px; }
+  .wg-home .wg-mega__inner--solvers { grid-template-columns: 1.5fr 1.15fr 1fr; }
+}
+@media (min-width: 992px) { .wg-home #mm-cross.wg-mega { width: min(480px, 92vw); } }
+
+/* ---------- Language picker modal (CSS only; markup/logic untouched) ---------- */
+.wg-home .modal-backdrop.show { opacity: 1; background: rgba(24, 9, 47, .55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
+.wg-home #staticBackdrop .modal-dialog { max-width: 680px; width: calc(100% - 32px); margin: 0 auto; min-height: 100%; display: flex; align-items: center; }
+.wg-home #staticBackdrop .modal-content {
+  width: 100%; max-height: calc(100vh - 48px); border: 0; border-radius: 24px; background: #fff; overflow: hidden;
+  box-shadow: 0 40px 80px -24px rgba(24, 9, 47, .6), 0 0 0 1px rgba(182, 65, 218, .08);
+}
+.wg-home #staticBackdrop .modal-header {
+  position: relative; display: flex; align-items: center; justify-content: flex-start; padding: 22px 24px 14px; border: 0; background: #fff;
+}
+.wg-home #staticBackdrop .modal-header::before {
+  content: ""; width: 4px; height: 22px; margin-right: 12px; border-radius: 4px; background: linear-gradient(180deg, #b641da, #6d28d9); flex: none;
+}
+.wg-home #staticBackdrop .modal-title {
+  width: auto !important; margin: 0; text-align: left !important; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #1e1b2e;
+}
+.wg-home #staticBackdrop .modal-header .close {
+  position: static; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 0 0 auto; padding: 0;
+  border: 0; border-radius: 50%; background: #f5f0ff; color: #7e22ce; font-size: 24px; font-weight: 400; line-height: 1; opacity: 1; text-shadow: none;
+  transition: background .15s, color .15s, transform .15s;
+}
+.wg-home #staticBackdrop .modal-header .close:hover { background: #7e22ce; color: #fff; transform: rotate(90deg); }
+.wg-home #staticBackdrop .modal-header .close:focus-visible { outline: 3px solid rgba(182, 65, 218, .45); outline-offset: 2px; }
+
+.wg-home #staticBackdrop .modal-body { max-height: calc(100vh - 140px); padding: 6px 24px 26px !important; overflow-y: auto; }
+.wg-home #staticBackdrop .language-drop-down-menu {
+  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; max-height: none; overflow: visible; box-shadow: none; border: 0;
+}
+.wg-home #staticBackdrop .language-drop-down-menu a {
+  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 10px 14px; width: auto;
+  border: 1.5px solid #f0e8ff; border-radius: 14px; background: #fff; color: #1e1b2e; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none;
+  transition: border-color .15s, background .15s, color .15s, transform .15s, box-shadow .15s;
+}
+.wg-home #staticBackdrop .language-drop-down-menu a:hover { border-color: #d8b4fe; background: #faf5ff; color: #6d28d9; transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(126, 34, 206, .55); }
+.wg-home #staticBackdrop .language-drop-down-menu a:focus-visible { outline: 3px solid rgba(182, 65, 218, .45); outline-offset: 2px; }
+.wg-home #staticBackdrop .language-drop-down-menu a.active-lang,
+.wg-home #staticBackdrop .language-drop-down-menu .active-lang {
+  border-color: transparent; background: linear-gradient(135deg, #b641da, #7e22ce); color: #fff; font-weight: 800; box-shadow: 0 12px 22px -12px rgba(126, 34, 206, .8);
+}
+.wg-home #staticBackdrop .language-drop-down-menu .active-lang img { filter: brightness(0) invert(1); width: 16px; height: 16px; }
+
+@media (max-width: 575.98px) {
+  .wg-home #staticBackdrop .language-drop-down-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+  .wg-home #staticBackdrop .modal-header { padding: 18px 18px 10px; }
+  .wg-home #staticBackdrop .modal-body { padding: 4px 18px 22px !important; }
+}
+@media (prefers-reduced-motion: reduce) { .wg-home #staticBackdrop .language-drop-down-menu a, .wg-home #staticBackdrop .modal-header .close { transition: none; } }
+
+/* footer language button */
+.wg-home .drop-down-btn {
+  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
+  background: rgba(255, 255, 255, .05); color: #e7e2f7; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
+}
+.wg-home .drop-down-btn svg { width: 18px; height: 18px; fill: currentColor; }
+.wg-home .drop-down-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); color: #fff; }
+.wg-home .drop-down-btn:focus-visible { outline: 3px solid rgba(182, 65, 218, .55); outline-offset: 2px; }
+/* ID selector so the generic #int-modal-btn reset and the muted .footer-bottom colour don't hide it on the dark footer */
+.wg-home #int-modal-btn { border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .1); color: #fff; padding: 0 18px 0 14px; }
+.wg-home #int-modal-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
+.wg-home #int-modal-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
+
+/* ---------- Home page polish (CSS only) ---------- */
+/* one heading underline style across every section: brand gradient instead of the orange bar */
+.wg-home .feature-highlight-title::after, .wg-home .howto::after, .wg-home .infographics-title::after,
+.wg-home .related_post_heading::after, .wg-home .points-table::after { background: linear-gradient(90deg, #6d28d9, #b641da); width: 48px; }
+
+/* FAQ: two columns on desktop so the long list is half as tall */
+@media (min-width: 992px) {
+  .wg-home #faqsContainer .faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
+  .wg-home #faqsContainer .faqs details { margin: 0; }
+}
+.wg-home .faqs summary { font-size: 16px; }
+.wg-home .faqs summary:hover { color: #6d28d9; }
+.wg-home .faqs details > :not(summary) { padding: 0 64px 18px 20px; color: var(--wg-muted); line-height: 1.7; }
+
+/* recent posts: even cards, author pinned to the bottom, no stray indent */
+.wg-home .related_post_heading + .row .card.h-100,
+.wg-home .container .row .card-group .card.h-100 { display: flex; flex-direction: column; border: 1px solid var(--wg-line); border-radius: 18px; overflow: hidden; box-shadow: var(--wg-sh-1); transition: transform .15s, box-shadow .15s, border-color .15s; }
+.wg-home .card-group .card.h-100:hover { transform: translateY(-2px); box-shadow: var(--wg-sh-2); border-color: #d8b4fe; }
+.wg-home .card-group .card-body { flex: 1 1 auto; padding: 22px 24px 12px; }
+.wg-home .card-group .card-body .card-title { margin: 0 0 8px !important; font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--wg-text); }
+.wg-home .card-group .post-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--wg-muted); font-size: 14.5px; line-height: 1.6; }
+.wg-home .card-group .card-footer { margin-top: auto; padding: 14px 24px 18px; border-top: 1px solid #f1eafc; background: #fff !important; }
+.wg-home .card-group .wrapfooter { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; }
+.wg-home .card-group .wrapfooter .meta-footer-thumb, .wg-home .card-group .wrapfooter img { margin: 0; flex: none; }
+.wg-home .card-group .wrapfooter img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
+.wg-home .card-group .author-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; line-height: 1.3; }
+.wg-home .card-group .author-meta br { display: none; }
+.wg-home .card-group .post-name a { font-size: 14px; font-weight: 800; color: var(--wg-text); text-decoration: none; }
+.wg-home .card-group .post-date { font-size: 12.5px; color: var(--wg-muted); }
+
+/* rating: stars light up on hover */
+.wg-home .rating-tool .rating-stars { display: flex; justify-content: center; gap: 6px; }
+.wg-home .rating-tool .rating-stars svg { fill: #e3dcf1; transition: fill .15s, transform .15s; }
+.wg-home .rating-tool .rating-stars:hover svg { fill: #f5b301; }
+.wg-home .rating-tool .rating-stars svg:hover ~ svg { fill: #e3dcf1; }
+.wg-home .rating-tool .rating-value { margin: 18px 0 0 !important; color: var(--wg-muted); text-align: center; }
+
+/* footer base row lines up with the footer grid */
+.wg-home .wg-footer + .footer-bottom { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; max-width: none; padding: 18px max(16px, calc((100% - 1200px) / 2 + 16px)); }
+.wg-home .wg-footer + .footer-bottom p { margin: 0; text-align: left; font-size: 14px; }
+.wg-home .wg-footer + .footer-bottom center { display: contents; }
+@media (max-width: 767.98px) { .wg-home .wg-footer + .footer-bottom { justify-content: center; text-align: center; } .wg-home .wg-footer + .footer-bottom p { text-align: center; } }
+
+/* FAQ rows keep a uniform height so the two columns line up */
+.wg-home .faqs summary { display: flex; align-items: center; min-height: 64px; }
+@media (min-width: 992px) { .wg-home #faqsContainer .faqs summary { min-height: 72px; } }
+
+/* recent posts: force the column layout so the author row sits at the bottom of every card */
+.wg-home .card-group > .card { display: flex !important; flex-direction: column !important; height: 100%; }
+.wg-home .card-group > .card > .card-body { flex: 1 1 auto !important; }
+.wg-home .card-group > .card > .card-footer { margin-top: auto !important; }
+.wg-home .card-group > .card .post-desc { margin-bottom: 4px; }
+
+/* author block: centred card with a proper avatar (also covers a missing photo) */
+.wg-home .featurePageAuthor { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(420px, 100%); margin: 0 auto; padding: 24px; background: #fff; border: 1px solid var(--wg-line); border-radius: 20px; box-shadow: var(--wg-sh-1); text-align: center; }
+.wg-home .featurePageAuthor .author_image { display: inline-flex; }
+.wg-home .featurePageAuthor img.author-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; font-size: 0; color: transparent; background: linear-gradient(135deg, #b641da, #6d28d9); box-shadow: 0 8px 18px -8px rgba(109, 40, 217, .6); }
+.wg-home .featurePageAuthor .author-meta { display: block; width: 100%; }
+.wg-home .featurePageAuthor .authorName { justify-content: center; min-height: 0; font-size: 18px; font-weight: 800; color: #6d28d9; text-decoration: none; }
+.wg-home .featurePageAuthor .authorName:hover { text-decoration: underline; }
+.wg-home .featurePageAuthor .author_bio { color: var(--wg-muted); font-size: 14px; line-height: 1.6; }
+.wg-home .featurePageAuthor .author_bio:empty { display: none; }
+.wg-home .authors-list { margin-top: 56px !important; margin-bottom: 56px; }
+
+/* phones: section headings and feature text align to the same left gutter as the rest of the page */
+@media (max-width: 767.98px) {
+  .wg-home .feature-highlight-title, .wg-home .howto, .wg-home .infographics-title, .wg-home .related_post_heading, .wg-home .points-table,
+  .wg-home #featureContainer .feature-highlight-title, .wg-home #faqsContainer .feature-highlight-title { text-align: left !important; margin-left: 0 !important; padding-left: 0 !important; }
+  .wg-home #featureContainer .features_data, .wg-home #featureContainer .features_data * { text-align: left !important; }
+  .wg-home .related_post_heading { width: 100%; }
+}
+
+/* footer link lists: comfortable line-height when a label wraps */
+.wg-home .wg-footer__col a { line-height: 1.45; padding: 7px 0; }
+.wg-home .authors-list > .row { margin-left: 0; margin-right: 0; justify-content: center; }
+.wg-home .featurePageAuthor { margin-left: auto; margin-right: auto; }
+
+/* ---------- Words by Length: refined cards (same markup/behaviour) ---------- */
+.wg-home #letter-lists .wg-rail { gap: 14px; padding: 6px 4px 18px; scroll-padding-left: 4px; scrollbar-width: thin; scrollbar-color: #d8b4fe transparent; }
+.wg-home #letter-lists .wg-rail::-webkit-scrollbar { height: 6px; }
+.wg-home #letter-lists .wg-rail::-webkit-scrollbar-thumb { background: #e3cffa; border-radius: 6px; }
+.wg-home #letter-lists .wg-rail__card {
+  position: relative; flex: 0 0 236px; gap: 16px; padding: 20px 18px 18px; overflow: hidden;
+  border: 1.5px solid #efe3ff; border-radius: 20px; background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 100%);
+  box-shadow: 0 1px 2px rgba(44, 10, 90, .04);
+  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+.wg-home #letter-lists .wg-rail__card::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #6d28d9, #b641da 60%, #f0abfc);
+  opacity: .35; transition: opacity .18s;
+}
+.wg-home #letter-lists .wg-rail__card:hover { transform: translateY(-3px); border-color: #d8b4fe; box-shadow: 0 18px 32px -18px rgba(109, 40, 217, .5); }
+.wg-home #letter-lists .wg-rail__card:hover::before { opacity: 1; }
+.wg-home #letter-lists .wg-rail__main { gap: 14px; }
+.wg-home #letter-lists .wg-rail__num {
+  width: 52px; height: 52px; border-radius: 15px; font-size: 26px; background: linear-gradient(135deg, #6d28d9 0%, #b641da 100%);
+  box-shadow: 0 10px 18px -8px rgba(109, 40, 217, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
+}
+.wg-home #letter-lists .wg-rail__main b { font-size: 17px; line-height: 1.2; }
+.wg-home #letter-lists .wg-rail__main::after {
+  content: "\2192"; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
+  background: #f5ecff; color: #7e22ce; font-size: 15px; font-weight: 800; transition: background .18s, color .18s, transform .18s;
+}
+.wg-home #letter-lists .wg-rail__card:hover .wg-rail__main::after { background: #7e22ce; color: #fff; transform: translateX(2px); }
+.wg-home #letter-lists .wg-rail__links { gap: 8px; }
+.wg-home #letter-lists .wg-rail__links a {
+  min-height: 34px; padding: 0 14px; border: 1px solid #ead7ff; background: #fff; color: #6d28d9; font-size: 13px; font-weight: 700;
+}
+.wg-home #letter-lists .wg-rail__links a:hover { background: #7e22ce; border-color: #7e22ce; color: #fff; }
+.wg-home #letter-lists .wg-rail__main:focus-visible, .wg-home #letter-lists .wg-rail__links a:focus-visible { outline: 3px solid rgba(182, 65, 218, .45); outline-offset: 2px; border-radius: 12px; }
+.wg-home #letter-lists .wg-arrow { border-color: #ead7ff; color: #7e22ce; transition: background .15s, color .15s, border-color .15s, transform .15s; }
+.wg-home #letter-lists .wg-arrow:hover:not(:disabled) { background: linear-gradient(135deg, #b641da, #7e22ce); border-color: transparent; color: #fff; transform: scale(1.06); }
+@media (max-width: 767.98px) {
+  .wg-home #letter-lists .wg-rail__card { flex-basis: 214px; padding: 18px 16px 16px; }
+  .wg-home #letter-lists .wg-rail__num { width: 46px; height: 46px; font-size: 23px; border-radius: 13px; }
+}
+@media (prefers-reduced-motion: reduce) { .wg-home #letter-lists .wg-rail__card, .wg-home #letter-lists .wg-rail__main::after { transition: none; } }
+
+/* 6-card groups (NYT, More Puzzles): same compact 4-up cards as LinkedIn; the last two sit left-aligned on the second row */
+@media (min-width: 992px) {
+  .wg-grid--4x6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+.wg-group__desc { margin: 6px 0 0; max-width: 72ch; color: var(--wg-muted, #5b5b73); font-size: 15px; line-height: 1.55; }
+.wg-group__head:has(.wg-group__desc) { display: block; }