/* ===== css/pcrisk-template.css ===== */
@font-face {
  font-family: swiper-icons;
  font-style: normal;
  font-weight: 400;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA")
    format("woff");
}
:root {
  --swiper-theme-color: #007aff;
}
.swiper {
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.swiper-wrapper {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property:
    transform,
    -webkit-transform;
  width: 100%;
  z-index: 1;
}
.swiper-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.swiper-pointer-events {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.swiper-pointer-events.swiper-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}
.swiper-slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property:
    transform,
    -webkit-transform;
  width: 100%;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property:
    height,
    -webkit-transform;
  transition-property:
    height,
    -webkit-transform;
  transition-property: transform, height;
  transition-property:
    transform,
    height,
    -webkit-transform;
}
.swiper-backface-hidden .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  -webkit-perspective: 1200px;
  perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    from(rgba(0, 0, 0, 0.5)),
    to(transparent)
  );
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 0, 0, 0.5)),
    to(transparent)
  );
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.5)),
    to(transparent)
  );
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0.5)),
    to(transparent)
  );
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}
.swiper-centered > .swiper-wrapper:before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-ordinal-group: 10000;
  -ms-flex-order: 9999;
  order: 9999;
}
.swiper-centered.swiper-horizontal
  > .swiper-wrapper
  > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
  height: 100%;
  width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper:before {
  height: var(--swiper-centered-offset-after);
  width: 100%;
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
.embed-container embed,
.embed-container iframe,
.embed-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
ul.relatedul {
  width: 100%;
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 1;
}
@media (min-width: 768px) {
  ul.relatedul {
    width: 100%;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
  }
}
ul.relatedul .relatedli {
  height: auto;
  padding: 5px 3px 0 55px;
  margin: 9px 2px 5px 8px;
  min-height: 48px;
  list-style-type: none;
}
.browsers-selector {
  background: #eef0f0;
  color: #005475;
  display: block;
  float: left;
  margin: 3px;
  padding: 11px 10px;
  text-decoration: underline;
  min-width: 145px;
  text-align: center;
}
.browsers-selector.selected {
  background: #21b8e7;
  color: #000;
  text-decoration: none;
}
.common_type {
  font-size: 1em;
  min-width: 180px;
}
.faq-question {
  margin: 15px 0 5px 0;
  font-weight: 700;
}
.faq-answer {
  padding-left: 15px;
  margin: 0 0 25px 0;
}
#faq {
  border-bottom-width: 1px;
  padding-bottom: 5px;
}
.bg-\[\#e1762d\] {
  background-color: #e1762d;
}
.hover\:bg-\[\#b45e24\]:hover {
  background-color: #b45e24;
}
.bg-\[\#505050\] {
  background-color: #505050;
}
.\!text-black {
  color: #000 !important;
}
.group:hover .group-hover\:\!text-blue-800 {
  color: #1e40af !important;
}
.border-none {
  border-style: none;
}
.text-97rem {
  font-size: 0.97rem;
}
.review-icon {
  width: 100px !important;
  height: 125px !important;
  object-fit: contain !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.gap-4 {
  gap: 1rem;
}
.green-v,
.red-x {
  font-size: 1.5rem;
}
.green-v {
  color: green;
}
.red-x {
  color: red;
}
.top-bar-review {
  overflow: hidden;
  justify-content: space-evenly;
}
.fact-checked {
  font-size: 2.25rem;
  color: green;
  height: 43px !important;
  width: 43px !important;
  vertical-align: middle;
}
.inline-block {
  display: inline-block;
}
.mx-\[5px\] {
  margin-left: 5px;
  margin-right: 5px;
}
.ml-5 {
  margin-left: 1.25rem;
}
.mx-2\.5 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.justify-between {
  justify-content: space-between;
}
.m-discount {
  margin: 10px 20px 4px !important;
}
.special-deal {
  padding: 10px 15px;
  justify-content: space-between;
  margin-top: 18px;
}
.border-1px-dashed-\#ff0000 {
  border: 1px dashed red;
}
.h-20 {
  height: 5rem;
}
.margin-none {
  margin: 0 !important;
}
.hover\:\!text-green-700:hover {
  color: rgb(21 128 61) !important;
}
.pseudo-divider-grey {
  background-color: rgb(245 245 245);
  height: 2.75rem;
  display: none;
  width: 2px;
}
@media (min-width: 1024px) {
  .pseudo-divider-grey {
    display: inline-block;
  }
  .top-bar-review {
    height: 5rem;
  }
}
@media (min-width: 1272px) and (max-width: 1460px) {
  .special-deal {
    justify-content: center;
    padding-bottom: 15px;
  }
  .top-bar-review {
    height: 7.5rem;
  }
}
@media (max-width: 385px) {
  .special-deal {
    justify-content: center;
    padding-bottom: 15px;
  }
}
.sm\:space-x-20 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(5rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(5rem * var(--tw-space-x-reverse));
}
@media (max-width: 1024px) {
  .center-author {
    transform: translateX(-25.5px);
  }
  .center-fact-checker {
    transform: translateX(-18px);
  }
}
@media (max-width: 600px) {
  .top-product-table-content-600 {
    display: block;
    height: 40px;
  }
  .pb-maxw600-5 {
    padding-bottom: 1.25rem;
  }
}
@media (max-width: 450px) {
  .visit-av-button {
    display: none;
    min-width: initial;
  }
  .visit-min-w {
    width: auto !important;
    display: inline !important;
  }
}
@media (min-width: 768px) {
  .md\:space-x-20 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(5rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(5rem * var(--tw-space-x-reverse));
  }
}
.top-product-table {
  margin: 0 0 0 10px;
}
.top-av-nav {
  height: auto;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}
.w-fit {
  width: fit-content;
}
.h-fit {
  height: fit-content;
}
.ml-4 {
  margin-left: 1rem;
}
.group:hover .group-hover\:bg-\[\#b45e24\]:hover {
  background-color: #b45e24 !important;
}
.hover\:bg-\[\#f26f00\]:hover {
  background-color: #f26f00;
}
.\!text-inherit {
  color: inherit !important;
}
.transition-none {
  transition: none !important;
}
.mt-5 {
  margin-top: 1.25rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
  margin-top: calc(0.25rem * (1 - var(--tw-space-y-reverse)));
}
.border-\[\#2eb82e\] {
  --tw-border-opacity: 1;
  border-color: rgb(46 184 46 / var(--tw-border-opacity));
}
.p-2 {
  padding: 0.5rem;
}
.\!text-blue-800 {
  --tw-text-opacity: 1 !important;
  color: rgb(30 64 175 / var(--tw-text-opacity)) !important;
}
.hover\:\!text-white:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.order-3 {
  order: 3;
}
.mt-0 {
  margin-top: 0;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 640px) {
  .sm\:my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .sm\:flex-1 {
    flex: 1 1 0%;
  }
  .sm\:h-\[100px\] {
    height: 100px;
  }
  .sm\:border-b {
    border-bottom-width: 1px;
  }
  .sm\:min-w-72 {
    min-width: 18rem;
  }
  .sm\:w-\[300px\] {
    width: 300px;
  }
}
.min-w-\[175px\] {
  width: 175px;
}
.items-stretch {
  align-items: stretch !important;
}
.gap-2 {
  gap: 0.5rem;
}
.text-inherit {
  font-size: inherit;
}
@media (min-width: 1024px) {
  .lg\:\!h-auto {
    height: auto !important;
  }
}
.pseudo-divider-grey-horizontal {
  background-color: rgb(245 245 245);
  height: 2px;
  width: 100%;
}
.av-grid {
  display: grid;
}
.mb-\[50px\],
.my-\[50px\] {
  margin-bottom: 50px !important;
}
.mt-\[50px\],
.my-\[50px\] {
  margin-top: 50px !important;
}
.border-green-700 {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity)) !important;
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity)) !important;
}
.hover\:\!underline:hover {
  text-decoration-line: underline !important;
}
.my-\[25px\] {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}
@media (min-width: 640px) {
  .sm\:mb-\[50px\],
  .sm\:my-\[50px\] {
    margin-bottom: 50px !important;
  }
  .sm\:mt-\[50px\],
  .sm\:my-\[50px\] {
    margin-top: 50px !important;
  }
  .sm\:my-\[18px\] {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
  .sm\:w-\[250px\] {
    width: 250px;
  }
}
*,
:after,
:before {
  border: 0 solid #e5e7eb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
label.invalid {
  color: red;
}
.invalid {
  border-color: red;
}
#system-message,
.info,
.jmessage {
  background-color: #f5f5f5;
  border: 1px dotted #bbb;
  padding: 8px 12px 10px;
  margin-bottom: 20px;
  margin-right: 4px;
  border-radius: 0.375rem;
}
#system-message dt,
.info dt,
.jmessage dt {
  margin-bottom: 10px;
}
.list-disc {
  list-style-type: disc;
}
.list-inside {
  list-style-position: inside;
}
:after,
:before {
  --tw-content: "";
}
:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}
body {
  line-height: inherit;
  margin: 0;
}
hr {
  border-top-width: 1px;
  color: inherit;
  height: 0;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
pre,
samp {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-size: 1em;
  font-variation-settings: normal;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  border-collapse: collapse;
  border-color: inherit;
  text-indent: 0;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font-family: inherit;
  -webkit-font-feature-settings: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-variation-settings: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
}
fieldset,
legend {
  padding: 0;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}
textarea {
  resize: vertical;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #9ca3af;
  opacity: 1;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #9ca3af;
  opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #9ca3af;
  opacity: 1;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #9ca3af;
  opacity: 1;
}
input::placeholder,
textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}
[role="button"],
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  height: auto;
  max-width: 100%;
}
em {
  margin-right: 4px;
}
[hidden] {
  display: none;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
::-ms-backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1272px) {
  .container {
    max-width: 1272px;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose img {
  display: inline;
}
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 1.25em;
  margin-top: 1.25em;
}
.prose
  :where([class~="lead"]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-bottom: 1.2em;
  margin-top: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  font-weight: 500;
  text-decoration: underline;
}
.prose
  :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose
  :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
}
.prose
  :where(blockquote strong):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  color: inherit;
}
.prose
  :where(thead th strong):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-bottom: 1.25em;
  margin-top: 1.25em;
  padding-left: 1.625em;
}
.prose
  :where(ol[type="A"]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: upper-alpha;
}
.prose
  :where(ol[type="a"]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: lower-alpha;
}
.prose
  :where(ol[type="A" s]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: upper-alpha;
}
.prose
  :where(ol[type="a" s]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: lower-alpha;
}
.prose
  :where(ol[type="I"]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: upper-roman;
}
.prose
  :where(ol[type="i"]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: lower-roman;
}
.prose
  :where(ol[type="I" s]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: upper-roman;
}
.prose
  :where(ol[type="i" s]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: lower-roman;
}
.prose
  :where(ol[type="1"]):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  list-style-type: disc;
  margin-bottom: 1.25em;
  margin-top: 1.25em;
  padding-left: 1.625em;
}
.prose
  :where(ol > li):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  )::marker {
  color: var(--tw-prose-counters);
  font-weight: 400;
}
.prose
  :where(ul > li):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  )::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-bottom: 3em;
  margin-top: 3em;
}
.prose
  :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-left-color: var(--tw-prose-quote-borders);
  border-left-width: 0.25rem;
  color: var(--tw-prose-quotes);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 1.6em;
  margin-top: 1.6em;
  padding-left: 1em;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.prose
  :where(blockquote p:first-of-type):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ):before {
  content: open-quote;
}
.prose
  :where(blockquote p:last-of-type):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ):after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-size: 2.25em;
  font-weight: 800;
  line-height: 1.1111111;
  margin-bottom: 0.8888889em;
  margin-top: 0;
}
.prose
  :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
  font-weight: 900;
}
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3333333;
  margin-bottom: 1em;
  margin-top: 2em;
}
.prose
  :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
  font-weight: 800;
}
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 0.6em;
  margin-top: 1.6em;
}
.prose
  :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
  font-weight: 700;
}
.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.5em;
  margin-top: 1.5em;
}
.prose
  :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
  font-weight: 700;
}
.prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 2em;
  margin-top: 2em;
}
.prose
  :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  display: block;
  margin-bottom: 2em;
  margin-top: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-radius: 0.3125rem;
  -webkit-box-shadow:
    0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),
    0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  box-shadow:
    0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),
    0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  color: var(--tw-prose-kbd);
  font-family: inherit;
  font-size: 0.875em;
  font-weight: 500;
  padding: 0.1875em 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-size: 0.875em;
  font-weight: 600;
}
.prose
  :where(code):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ):before {
  content: "`";
}
.prose
  :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
  content: "`";
}
.prose
  :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
}
.prose
  :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
}
.prose
  :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose
  :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose
  :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: inherit;
}
.prose
  :where(blockquote code):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  color: inherit;
}
.prose
  :where(thead th code):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  background-color: var(--tw-prose-pre-bg);
  border-radius: 0.375rem;
  color: var(--tw-prose-pre-code);
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.7142857;
  margin-bottom: 1.7142857em;
  margin-top: 1.7142857em;
  overflow-x: auto;
  padding: 0.8571429em 1.1428571em;
}
.prose
  :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  background-color: transparent;
  border-radius: 0;
  border-width: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
}
.prose
  :where(pre code):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ):before {
  content: none;
}
.prose
  :where(pre code):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ):after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-bottom: 2em;
  margin-top: 2em;
  table-layout: auto;
  text-align: left;
  width: 100%;
}
.prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-bottom-color: var(--tw-prose-th-borders);
  border-bottom-width: 1px;
}
.prose
  :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
  padding-right: 0.5714286em;
  vertical-align: bottom;
}
.prose
  :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-bottom-color: var(--tw-prose-td-borders);
  border-bottom-width: 1px;
}
.prose
  :where(tbody tr:last-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  border-bottom-width: 0;
}
.prose
  :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-top-color: var(--tw-prose-th-borders);
  border-top-width: 1px;
}
.prose
  :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  vertical-align: top;
}
.prose
  :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 0;
  margin-top: 0;
}
.prose
  :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #a5a5a5;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgba(0, 0, 0, 0.5);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose
  :where(picture > img):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-bottom: 0;
  margin-top: 0;
}
.prose :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 2em;
  margin-top: 2em;
}
.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
.prose
  :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose
  :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose
  :where(.prose > ul > li p):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-bottom: 0.75em;
  margin-top: 0.75em;
}
.prose
  :where(.prose > ul > li > :first-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-top: 1.25em;
}
.prose
  :where(.prose > ul > li > :last-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-bottom: 1.25em;
}
.prose
  :where(.prose > ol > li > :first-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-top: 1.25em;
}
.prose
  :where(.prose > ol > li > :last-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-bottom: 1.25em;
}
.prose
  :where(ul ul, ul ol, ol ul, ol ol):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-bottom: 0.75em;
  margin-top: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 1.25em;
  margin-top: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose
  :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0;
}
.prose
  :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0;
}
.prose
  :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0;
}
.prose
  :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0;
}
.prose
  :where(thead th:first-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  padding-left: 0;
}
.prose
  :where(thead th:last-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  padding-right: 0;
}
.prose
  :where(tbody td, tfoot td):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  padding: 0.5714286em;
}
.prose
  :where(tbody td:first-child, tfoot td:first-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  padding-left: 0;
}
.prose
  :where(tbody td:last-child, tfoot td:last-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  padding-right: 0;
}
.prose
  :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 2em;
  margin-top: 2em;
}
.prose
  :where(.prose > :first-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-top: 0;
}
.prose
  :where(.prose > :last-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-bottom: 0;
}
#search-form.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#open-search.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.active-tab-button {
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity));
  font-weight: 700;
}
.popup.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0;
}
.bottom-\[1px\] {
  bottom: 1px;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.right-3 {
  right: 0.75rem;
}
.right-3\.5 {
  right: 0.875rem;
}
.top-0 {
  top: 0;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-\[72px\] {
  top: 72px;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-\[9999\] {
  z-index: 9999;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-10 {
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}
.my-5 {
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}
.my-7 {
  margin-bottom: 1.75rem;
  margin-top: 1.75rem;
}
.my-\[18px\] {
  margin-bottom: 18px;
  margin-top: 18px;
}
.my-\[20px\] {
  margin-bottom: 20px;
  margin-top: 20px;
}
.my-\[24px\] {
  margin-bottom: 24px;
  margin-top: 24px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-\[100px\] {
  margin-bottom: 100px;
}
.mb-\[12px\] {
  margin-bottom: 12px;
}
.mb-\[27px\] {
  margin-bottom: 27px;
}
.mb-\[60px\] {
  margin-bottom: 60px;
}
.mr-auto {
  margin-right: auto;
}
.mr-5 {
  margin-right: 1.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-\[32px\] {
  margin-top: 32px;
}
.mt-\[60px\] {
  margin-top: 60px;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  -webkit-line-clamp: 2;
}
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.line-clamp-3 {
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.table {
  display: table;
}
.table-cell {
  display: table-cell;
}
.hidden {
  display: none;
}
.size-10 {
  height: 2.5rem;
  width: 2.5rem;
}
.size-11 {
  height: 2.75rem;
  width: 2.75rem;
}
.size-3 {
  height: 0.75rem;
  width: 0.75rem;
}
.size-4 {
  height: 1rem;
  width: 1rem;
}
.size-5 {
  height: 1.25rem;
  width: 1.25rem;
}
.size-6 {
  height: 1.5rem;
  width: 1.5rem;
}
.size-7 {
  height: 1.75rem;
  width: 1.75rem;
}
.size-\[150px\] {
  height: 150px;
  width: 150px;
}
.size-\[152px\] {
  height: 152px;
  width: 152px;
}
.size-\[34px\] {
  height: 34px;
  width: 34px;
}
.size-\[43px\] {
  height: 43px;
  width: 43px;
}
.size-\[52px\] {
  height: 52px;
  width: 52px;
}
.size-\[60px\] {
  height: 60px;
  width: 60px;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-4 {
  height: 1rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[160px\] {
  height: 160px;
}
.h-\[188px\] {
  height: 188px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[21px\] {
  height: 21px;
}
.h-\[28px\] {
  height: 28px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[40px\] {
  height: 40px;
}
.h-\[48px\] {
  height: 48px;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[72px\] {
  height: 72px;
}
.h-\[82px\] {
  height: 82px;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-0 {
  max-height: 0;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0 {
  width: 0;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-28 {
  width: 7rem;
}
.w-60 {
  width: 15rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-\[10\%\] {
  width: 10%;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[121px\] {
  width: 121px;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[27px\] {
  width: 27px;
}
.w-\[40px\] {
  width: 40px;
}
.w-\[48px\] {
  width: 48px;
}
.w-\[288px\] {
  width: 288px;
}
.w-\[46\%\] {
  width: 46%;
}
.w-\[90\%\] {
  width: 90%;
}
.w-full {
  width: 100%;
}
.max-w-\[1000px\] {
  max-width: 1000px;
}
.max-w-\[1440px\] {
  max-width: 1440px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[300px\] {
  max-width: 300px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[375px\] {
  max-width: 375px;
}
.max-w-\[528px\] {
  max-width: 528px;
}
.max-w-\[800px\] {
  max-width: 800px;
}
.max-w-\[955px\] {
  max-width: 955px;
}
.max-w-\[980px\] {
  max-width: 980px;
}
.max-w-none {
  max-width: none;
}
.min-w-\[85px\] {
  min-width: 85px;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.shrink-0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.grow {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.origin-center {
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
.origin-left {
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}
.-translate-x-10 {
  --tw-translate-x: -2.5rem;
}
.-translate-x-10,
.translate-x-0 {
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
}
.translate-x-2 {
  --tw-translate-x: 0.5rem;
}
.translate-x-2,
.translate-x-full {
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
  --tw-translate-x: 100%;
}
.-rotate-0 {
  --tw-rotate: -0deg;
}
.-rotate-0,
.rotate-0 {
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
  --tw-rotate: 0deg;
}
.rotate-180 {
  --tw-rotate: 180deg;
}
.rotate-180,
.transform {
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor: pointer;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.flex-row {
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-col,
.flex-row {
  -webkit-box-direction: normal;
}
.flex-col {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.items-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.justify-normal {
  -webkit-box-pack: normal;
  -ms-flex-pack: normal;
  justify-content: normal;
}
.justify-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.justify-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(0px * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(0px * var(--tw-space-x-reverse));
}
.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(0.125rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(0.25rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
}
.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(0.375rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
}
.space-x-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(2.5rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
}
.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(0.625rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(0.625rem * var(--tw-space-x-reverse));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(0.75rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(1rem * var(--tw-space-x-reverse));
}
.space-x-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(1.25rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(1.5rem * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
}
.space-x-\[14px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(14px * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(14px * var(--tw-space-x-reverse));
}
.space-x-\[3px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(3px * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(3px * var(--tw-space-x-reverse));
}
.space-x-\[8px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-left: calc(8px * (1 - var(--tw-space-x-reverse)));
  margin-right: calc(8px * var(--tw-space-x-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
  margin-top: calc(2.5rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
  margin-top: calc(3rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
  margin-top: calc(0.625rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  margin-top: calc(0.75rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  margin-top: calc(2rem * (1 - var(--tw-space-y-reverse)));
}
.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 1;
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-left-width: calc(1px * (1 - var(--tw-divide-x-reverse)));
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
}
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-left-width: calc(2px * (1 - var(--tw-divide-x-reverse)));
  border-right-width: calc(2px * var(--tw-divide-x-reverse));
}
.divide-gray-900\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(17, 24, 39, 0.6);
}
.divide-neutral-400 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-divide-opacity));
}
.divide-white > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-divide-opacity));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[40px\] {
  border-radius: 40px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-bl-2xl {
  border-bottom-left-radius: 1rem;
}
.rounded-br-2xl {
  border-bottom-right-radius: 1rem;
}
.rounded-tl-2xl {
  border-top-left-radius: 1rem;
}
.rounded-tr-2xl {
  border-top-right-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l-\[4px\] {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#dde5ef\] {
  --tw-border-opacity: 1;
  border-color: rgb(221 229 239 / var(--tw-border-opacity));
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-black\/10 {
  border-color: rgba(0, 0, 0, 0.1);
}
.border-black\/5 {
  border-color: rgba(0, 0, 0, 0.05);
}
.border-blue-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}
.border-blue-900 {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-gray-900\/10 {
  border-color: rgba(17, 24, 39, 0.1);
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-opacity-10 {
  --tw-border-opacity: 0.1;
}
.bg-\[\#00A11A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 161 26 / var(--tw-bg-opacity));
}
.bg-\[\#0B84EE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 132 238 / var(--tw-bg-opacity));
}
.bg-\[\#2878B7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(40 120 183 / var(--tw-bg-opacity));
}
.bg-\[\#E4E4E4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 228 / var(--tw-bg-opacity));
}
.bg-\[\#55ACE3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(85 172 227 / var(--tw-bg-opacity));
}
.bg-\[\#C8D9F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(200 217 242 / var(--tw-bg-opacity));
}
.bg-\[\#DDE5EF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(221 229 239 / var(--tw-bg-opacity));
}
.bg-\[\#E6ECF6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(230 236 246 / var(--tw-bg-opacity));
}
.bg-\[\#ECF1F7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 241 247 / var(--tw-bg-opacity));
}
.bg-\[\#F6C656\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 198 86 / var(--tw-bg-opacity));
}
.bg-\[\#F6F6F6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}
.bg-\[\#F74848\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 72 72 / var(--tw-bg-opacity));
}
.bg-\[\#F7F8FA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 248 250 / var(--tw-bg-opacity));
}
.bg-\[\#ffefcb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 239 203 / var(--tw-bg-opacity));
}
.bg-black\/5 {
  background-color: rgba(0, 0, 0, 0.05);
}
.bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.5);
}
.bg-black\/100 {
  background-color: rgba(0, 0, 0, 1);
}
.bg-blue-100\/50 {
  background-color: rgba(219, 234, 254, 0.5);
}
.bg-blue-50\/70 {
  background-color: rgba(239, 246, 255, 0.7);
}
.bg-blue-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.bg-blue-800\/10 {
  background-color: rgba(30, 64, 175, 0.1);
}
.bg-blue-800\/5 {
  background-color: rgba(30, 64, 175, 0.05);
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(205 205 205 / var(--tw-bg-opacity));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.bg-neutral-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.highlight {
  font-weight: 700;
  background-color: yellow;
}
.bg-opacity-5 {
  --tw-bg-opacity: 0.05;
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-30 {
  --tw-bg-opacity: 0.3;
}
.bg-gradient-to-r {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(var(--tw-gradient-stops))
  );
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-800 {
  --tw-gradient-from: #1e40af var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(30, 64, 175, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.stroke-\[\#00255C\] {
  stroke: #00255c;
}
.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}
.p-10 {
  padding: 2.5rem;
}
.p-5 {
  padding: 1.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-1 {
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}
.py-10 {
  padding-bottom: 2.5rem;
  padding-top: 2.5rem;
}
.py-2 {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}
.py-2\.5 {
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}
.py-3 {
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
}
.py-4 {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
.py-5 {
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;
}
.py-6 {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}
.pb-0 {
  padding-bottom: 0;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-\[60px\] {
  padding-bottom: 60px;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-\[0\.6em\] {
  padding-right: 0.6em;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.break-word {
  word-break: break-word;
}
.font-roboto {
  font-family: Roboto, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-5xl {
  font-size: 2.5rem;
}
.text-\[1\.25em\] {
  font-size: 1.25em;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.\!leading-none {
  line-height: 1 !important;
}
.\!leading-normal {
  line-height: 1.5 !important;
}
.\!leading-snug {
  line-height: 1.375 !important;
}
.leading-10 {
  line-height: 2.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-loose {
  line-height: 2;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.text-\[\#0041A1\],
.text-\[\#0041a1\] {
  --tw-text-opacity: 1;
  color: rgb(0 65 161 / var(--tw-text-opacity));
}
.text-\[\#111827\] {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-\[\#1E202499\] {
  color: #1e202499;
}
.text-\[\#DE9301\] {
  --tw-text-opacity: 1;
  color: rgb(222 147 1 / var(--tw-text-opacity));
}
.text-\[\#EFB41D\] {
  --tw-text-opacity: 1;
  color: rgb(239 180 29 / var(--tw-text-opacity));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-black\/40 {
  color: rgba(0, 0, 0, 0.4);
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
}
.text-blue-900\/10 {
  color: rgba(30, 58, 138, 0.3);
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-gray-900\/50 {
  color: rgba(17, 24, 39, 0.5);
}
.text-gray-900\/60 {
  color: rgba(17, 24, 39, 0.6);
}
.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-blugray {
  --tw-text-opacity: 1;
  color: rgb(230 236 246 / var(--tw-text-opacity));
}
.text-opacity-60 {
  --tw-text-opacity: 0.6;
}
.underline {
  text-decoration-line: underline;
}
.\!no-underline {
  text-decoration-line: none !important;
}
.no-underline {
  text-decoration-line: none;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.shadow-md {
  --tw-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored:
    0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  -webkit-box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.transition {
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    -webkit-box-shadow,
    -webkit-transform,
    -webkit-filter,
    -webkit-backdrop-filter;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    -webkit-box-shadow,
    -webkit-transform,
    -webkit-filter,
    -webkit-backdrop-filter;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter,
    -webkit-box-shadow,
    -webkit-transform,
    -webkit-filter,
    -webkit-backdrop-filter;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-all {
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-colors {
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-opacity {
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-transform {
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property:
    transform,
    -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.delay-150 {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.delay-300 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.delay-75 {
  -webkit-transition-delay: 75ms;
  transition-delay: 75ms;
}
.duration-300 {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.duration-500 {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.ease-linear {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.ease-out {
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
  will-change: transform;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg width='11.000000' height='7.000000' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path  d='M0.5 0.75L5 5.25L9.5 0.75' stroke='%231E2024' stroke-opacity='1.000000' stroke-width='2.000000' stroke-linejoin='round' stroke-linecap='round' /></svg>");
  background-position-x: calc(100% - 12px);
  background-position-y: 50%;
  background-repeat: no-repeat;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem 2rem 1rem 1rem;
}
ol > li {
  display: table;
  margin-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(0 65 161 / var(--tw-text-opacity));
}
ol > li a {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
}
ol > li a:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
li > ol {
  padding-left: 1rem;
}
li ol > li {
  margin: 0.5rem;
}
li ol > li a {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
li ol > li:first-child {
  margin-top: 0.75rem;
}
li ol > li:last-child {
  margin-bottom: 0;
}
li > ol > li > ol > li {
  margin: 0.25rem;
}
li > ol > li > ol > li a {
  font-size: 13px;
}
table.threat_properties_table {
  border-radius: 0.75rem;
  overflow: hidden;
  width: 100%;
}
table.threat_properties_table caption {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
  line-height: 2;
  padding-bottom: 1rem;
  padding-top: 1rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
table.threat_properties_table tbody {
  width: 100%;
}
table.threat_properties_table tbody > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-divide-opacity));
}
@media (min-width: 640px) {
  table.threat_properties_table tbody > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    border-top-width: calc(1px * (1 - var(--tw-divide-y-reverse)));
  }
}
table.threat_properties_table tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
table.threat_properties_table tr > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-divide-opacity));
}
@media (min-width: 768px) {
  table.threat_properties_table tr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  table.threat_properties_table tr > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-left-width: calc(1px * (1 - var(--tw-divide-x-reverse)));
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
  }
}
table.threat_properties_table tr td {
  word-break: break-word;
}
table.threat_properties_table tr td:first-child {
  display: block;
  width: 100%;
  -ms-flex-negative: 0;
  background-color: rgba(30, 64, 175, 0.1);
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  padding: 1rem 1.25rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
  table.threat_properties_table tr td:first-child {
    width: 316px;
  }
}
table.threat_properties_table tr td:last-child {
  background-color: rgba(30, 64, 175, 0.05);
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 1rem 1.25rem;
  width: 100%;
}
table.threat_properties_table tr td p {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
code:after,
code:before {
  content: "" !important;
}
blockquote p:after,
blockquote p:before,
blockquote:after,
blockquote:before,
code p:after,
code p:before {
  content: "";
}
blockquote,
blockquote p,
code,
code p,
q,
q p {
  quotes: "" "" "" "";
}
.prose p {
  margin-bottom: 18px;
  margin-top: 18px;
}
.prose blockquote {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 239 / var(--tw-border-opacity));
  padding-left: 1rem;
}
.prose blockquote p {
  color: #1e202499;
  font-style: italic;
}
.prose a {
  color: rgb(37 99 235 / var(--tw-text-opacity));
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.prose a,
.prose a:hover {
  --tw-text-opacity: 1;
}
.prose a:hover {
  color: rgb(96 165 250 / var(--tw-text-opacity));
}
.prose img,
.prose picture {
  margin-bottom: 20px;
  margin-top: 20px;
}
.prose h2 {
  border-bottom-width: 1px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.375;
  margin-top: 32px;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.prose h3 {
  font-size: 1.25em;
  line-height: 1.5;
  margin-bottom: 24px;
  margin-top: 24px;
}
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.prose h4,
.prose h5,
.prose h6 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}
.script {
  border-radius: 0.75rem;
  display: block;
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
  line-height: 2;
  padding: 1.25rem;
}
.placeholder\:text-neutral-800::-webkit-input-placeholder {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}
.placeholder\:text-neutral-800::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}
.placeholder\:text-neutral-800:-ms-input-placeholder {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}
.placeholder\:text-neutral-800::-ms-input-placeholder {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}
.placeholder\:text-neutral-800::placeholder {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity));
}
.focus-within\:border-blue-800:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}
.hover\:border-blue-800:hover {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}
.hover\:border-green-700:hover {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity));
}
.hover\:bg-blue-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:bg-green-700\/80:hover {
  background-color: rgba(21, 128, 61, 0.8);
}
.hover\:bg-green-700\/100:hover {
  background-color: rgba(21, 128, 61, 1);
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:text-\[\#0041A1\]:hover {
  --tw-text-opacity: 1;
  color: rgb(0 65 161 / var(--tw-text-opacity));
}
.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}
.hover\:text-green-700:hover {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-70:hover {
  opacity: 0.7;
}
.focus\:border-blue-800:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}
.focus\:border-gray-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246/var(--tw-ring-opacity));
}
.enabled\:hover\:text-blue-400:hover:enabled {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:stroke-white {
  stroke: #fff;
}
.group:hover .group-hover\:text-\[\#00A11A\] {
  --tw-text-opacity: 1;
  color: rgb(0 161 26 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.group.is-active .group-\[\.is-active\]\:block {
  display: block;
}
.group.is-active .group-\[\.is-active\]\:hidden {
  display: none;
}
.prose-headings\:mb-5
  :is(
    :where(h1, h2, h3, h4, h5, h6, th):not(
      :where([class~="not-prose"], [class~="not-prose"] *)
    )
  ) {
  margin-bottom: 1.25rem;
}
.prose-h2\:border-b
  :is(:where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  border-bottom-width: 1px;
}
.prose-h2\:pb-2
  :is(:where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  padding-bottom: 0.5rem;
}
.prose-h2\:text-\[30px\]
  :is(:where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  font-size: 30px;
}
.prose-h2\:text-xl
  :is(:where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.prose-h4\:text-lg
  :is(:where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.prose-p\:mb-3
  :is(:where(p):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  margin-bottom: 0.75rem;
}
.prose-p\:mt-3
  :is(:where(p):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  margin-top: 0.75rem;
}
.prose-a\:text-blue-500
  :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}
.prose-a\:text-blue-600
  :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.prose-a\:text-blue-800
  :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}
.prose-a\:underline
  :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  text-decoration-line: underline;
}
.hover\:prose-a\:text-blue-500
  :is(
    :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))
  ):hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}
.prose-blockquote\:mb-3
  :is(
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))
  ) {
  margin-bottom: 0.75rem;
}
.prose-blockquote\:mt-3
  :is(
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))
  ) {
  margin-top: 0.75rem;
}
.prose-blockquote\:font-normal
  :is(
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))
  ) {
  font-weight: 400;
}
.prose-blockquote\:text-gray-400
  :is(
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))
  ) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.prose-strong\:text-gray-900\/60
  :is(
    :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))
  ) {
  color: rgba(17, 24, 39, 0.6);
}
.prose-tr\:border-b-0
  :is(:where(tr):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
  border-bottom-width: 0;
}
@media not all and (min-width: 1272px) {
  .max-xl\:max-w-\[288px\] {
    max-width: 288px;
  }
  .max-xl\:max-w-\[500px\] {
    max-width: 500px;
  }
}
@media not all and (min-width: 1024px) {
  .max-lg\:-mx-5 {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  .max-lg\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
  }
}
@media not all and (min-width: 768px) {
  .max-md\:mt-3 {
    margin-top: 0.75rem;
  }
  .max-md\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
  }
  .max-md\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
  }
  .max-md\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
}
@media not all and (min-width: 640px) {
  .max-sm\:static {
    position: static;
  }
  .max-sm\:mb-1 {
    margin-bottom: 0.25rem;
  }
  .max-sm\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .max-sm\:mt-3 {
    margin-top: 0.75rem;
  }
  .max-sm\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .max-sm\:hidden {
    display: none;
  }
  .max-sm\:size-10 {
    height: 2.5rem;
    width: 2.5rem;
  }
  .max-sm\:w-\[80\%\] {
    width: 80%;
  }
  .max-sm\:flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .max-sm\:items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .max-sm\:justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .max-sm\:justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .max-sm\:space-y-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
    margin-top: calc(2.5rem * (1 - var(--tw-space-y-reverse)));
  }
  .max-sm\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
  }
  .max-sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
  }
  .max-sm\:space-y-\[60px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(60px * var(--tw-space-y-reverse));
    margin-top: calc(60px * (1 - var(--tw-space-y-reverse)));
  }
  .max-sm\:rounded-\[40px\] {
    border-radius: 40px;
  }
  .max-sm\:border-r-0 {
    border-right-width: 0;
  }
  .max-sm\:border-t {
    border-top-width: 1px;
  }
  .max-sm\:pl-0 {
    padding-left: 0;
  }
  .max-sm\:pr-0 {
    padding-right: 0;
  }
  .max-sm\:pt-10 {
    padding-top: 2.5rem;
  }
}
@media (min-width: 640px) {
  .sm\:mb-\[100px\] {
    margin-bottom: 100px;
  }
  .sm\:mb-\[37px\] {
    margin-bottom: 37px;
  }
  .sm\:mt-0 {
    margin-top: 0;
  }
  .sm\:block {
    display: block;
  }
  .sm\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:size-\[72px\] {
    height: 72px;
    width: 72px;
  }
  .sm\:h-\[60px\] {
    height: 60px;
  }
  .sm\:w-24 {
    width: 6rem;
  }
  .sm\:flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .sm\:flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .sm\:items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .sm\:items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(2.5rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
  }
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(1rem * var(--tw-space-x-reverse));
  }
  .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1.25rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
  }
  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(2rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(2rem * var(--tw-space-x-reverse));
  }
  .sm\:space-x-\[20px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(20px * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(20px * var(--tw-space-x-reverse));
  }
  .sm\:p-10 {
    padding: 2.5rem;
  }
  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .sm\:pb-20 {
    padding-bottom: 5rem;
  }
  .sm\:pl-10 {
    padding-left: 2.5rem;
  }
  .sm\:pt-10 {
    padding-top: 2.5rem;
  }
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .sm\:text-3xl {
    font-size: 1.75rem;
  }
  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  @media not all and (min-width: 1272px) {
    .sm\:max-xl\:block {
      display: block;
    }
  }
}
@media not all and (min-width: 1272px) {
  @media (min-width: 640px) {
    .max-xl\:sm\:space-y-20 > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-bottom: calc(5rem * var(--tw-space-y-reverse));
      margin-top: calc(5rem * (1 - var(--tw-space-y-reverse)));
    }
  }
}
@media (min-width: 640px) {
  @media not all and (min-width: 1024px) {
    .sm\:max-lg\:border-t {
      border-top-width: 1px;
    }
    .sm\:max-lg\:pb-10 {
      padding-bottom: 2.5rem;
    }
  }
}
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .md\:w-\[316px\] {
    width: 316px;
  }
  .md\:w-\[24px\] {
    width: 24px;
  }
  .md\:max-w-\[280px\] {
    max-width: 280px;
  }
  .md\:flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1.25rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
  }
  .md\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
  }
}
@media (min-width: 1024px) {
  .lg\:static {
    position: static;
  }
  .lg\:mr-0 {
    margin-right: 0;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:h-auto {
    height: auto;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:max-w-\[356px\] {
    max-width: 356px;
  }
  .lg\:max-w-\[562px\] {
    max-width: 562px;
  }
  .lg\:max-w-none {
    max-width: none;
  }
  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .lg\:flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .lg\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .lg\:justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .lg\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(2.5rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
  }
  .lg\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1.5rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  }
  .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(2rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(2rem * var(--tw-space-x-reverse));
  }
  .lg\:rounded-2xl {
    border-radius: 1rem;
  }
  .lg\:rounded-xl {
    border-radius: 0.75rem;
  }
  .lg\:bg-transparent {
    background-color: transparent;
  }
  .lg\:py-\[60px\] {
    padding-bottom: 60px;
    padding-top: 60px;
  }
  .lg\:pt-0 {
    padding-top: 0;
  }
  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .lg\:text-neutral-800 {
    --tw-text-opacity: 1;
    color: rgb(38 38 38 / var(--tw-text-opacity));
  }
  .lg\:hover\:text-blue-800:hover {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity));
  }
  .lg\:hover\:no-underline:hover {
    text-decoration-line: none;
  }
}
@media (min-width: 1272px) {
  .xl\:static {
    position: static;
  }
  .xl\:mb-36 {
    margin-bottom: 9rem;
  }
  .xl\:mb-\[120px\] {
    margin-bottom: 120px;
  }
  .xl\:mr-\[57px\] {
    margin-right: 57px;
  }
  .xl\:mr-auto {
    margin-right: auto;
  }
  .xl\:block {
    display: block;
  }
  .xl\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .xl\:hidden {
    display: none;
  }
  .xl\:h-\[90px\] {
    height: 90px;
  }
  .xl\:w-40 {
    width: 10rem;
  }
  .xl\:w-\[280px\] {
    width: 280px;
  }
  .xl\:w-\[288px\] {
    width: 288px;
  }
  .xl\:w-\[360px\] {
    width: 360px;
  }
  .xl\:max-w-\[812px\] {
    max-width: 812px;
  }
  .xl\:flex-row {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .xl\:flex-col,
  .xl\:flex-row {
    -webkit-box-direction: normal;
  }
  .xl\:flex-col {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .xl\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(0px * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(0px * var(--tw-space-x-reverse));
  }
  .xl\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1.5rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  }
  .xl\:space-x-\[60px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(60px * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(60px * var(--tw-space-x-reverse));
  }
  .xl\:rounded-\[40px\] {
    border-radius: 40px;
  }
  .xl\:border-r-0 {
    border-right-width: 0;
  }
  .xl\:border-t {
    border-top-width: 1px;
  }
  .xl\:border-transparent {
    border-color: transparent;
  }
  .xl\:pb-\[120px\] {
    padding-bottom: 120px;
  }
  .xl\:pl-0 {
    padding-left: 0;
  }
  .xl\:pr-0 {
    padding-right: 0;
  }
  .xl\:pr-\[60px\] {
    padding-right: 60px;
  }
  .xl\:pt-10 {
    padding-top: 2.5rem;
  }
  .xl\:pt-\[60px\] {
    padding-top: 60px;
  }
  .xl\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .xl\:text-3xl {
    font-size: 1.75rem;
  }
  .xl\:text-4xl {
    font-size: 2rem;
  }
  .xl\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1440px) {
  .xxl\:max-w-\[980px\] {
    max-width: 980px;
  }
}
@media (min-width: 1440px) {
  .\32xl\:justify-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}
.\[\&\.active-menu\]\:translate-x-0.active-menu {
  --tw-translate-x: 0px;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\.current-page\]\:underline.current-page {
  text-decoration-line: underline;
}
@media (min-width: 1024px) {
  .lg\:\[\&\.current-page\]\:text-blue-800.current-page {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity));
  }
}
@media not all and (min-width: 1024px) {
  .max-lg\:\[\&\.is-active\]\:block.is-active {
    display: block;
  }
}
.\[\&\>\*\:not\(\:first-child\)\]\:pl-3 > :not(:first-child) {
  padding-left: 0.75rem;
}
.\[\&\>\*\:not\(\:last-child\)\]\:mb-2 > :not(:last-child) {
  margin-bottom: 0.5rem;
}
.\[\&\>\*\:not\(\:last-child\)\]\:mr-2 > :not(:last-child) {
  margin-right: 0.5rem;
}
.\[\&\>\*\:nth-child\(1\)\]\:rotate-45 > :first-child {
  --tw-rotate: 45deg;
}
.\[\&\>\*\:nth-child\(1\)\]\:rotate-45 > :first-child,
.\[\&\>\*\:nth-child\(2\)\]\:-rotate-45 > :nth-child(2) {
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>\*\:nth-child\(2\)\]\:-rotate-45 > :nth-child(2) {
  --tw-rotate: -45deg;
}
.btn-after-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #e6f9ea 0, #d0edda 100%);
  border: 1px solid #b8e0c2;
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  cursor: pointer;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  transition: 0.25s;
  box-sizing: border-box;
}
.btn-after-cta:active,
.btn-after-cta:focus,
.btn-after-cta:hover,
.btn-after-expert:active,
.btn-after-expert:focus,
.btn-after-expert:hover,
.rec-callout-btn:active,
.rec-callout-btn:focus,
.rec-callout-btn:hover {
  border-color: #00a11a;
  box-shadow: 0 4px 18px rgba(0, 161, 26, 0.15);
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-after-cta:hover .cta-main-text,
.btn-after-expert:hover .ep-main-text,
.rec-callout-btn:hover .rec-callout-btn-main {
  color: #0a6b18;
}
.btn-after-cta:hover .cta-sub-text {
  color: rgba(10, 107, 24, 0.6);
}
.btn-after-cta .cta-icon-wrap,
.btn-after-expert .ep-icon,
.rec-callout-btn-icon {
  width: 40px;
  height: 40px;
  background: #00a11a;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-after-purple,
.btn-after-secondary {
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  text-decoration: none;
}
.btn-after-cta .cta-icon-wrap svg,
.btn-after-expert .ep-icon svg,
.btn-after-purple .pp-icon svg,
.cc-dl-icon svg,
.rec-callout-btn-icon svg {
  width: 20px;
  height: 20px;
}
.btn-after-cta .cta-text-wrap,
.btn-after-expert .ep-text-wrap,
.btn-after-purple .pp-text-wrap,
.cc-dl-text,
.rec-callout-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
}
.btn-after-cta .cta-main-text,
.btn-after-expert .ep-main-text,
.rec-callout-btn-main {
  font-size: 15px;
  font-weight: 700;
  color: #0a6b18;
  line-height: 1.3;
}
.btn-after-cta .cta-sub-text {
  font-size: 12px;
  color: rgba(10, 107, 24, 0.6);
  font-weight: 500;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-after-cta .cta-deal-badge {
  display: inline-flex;
  align-items: center;
  background: #00a11a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.btn-after-cta .cta-arrow {
  color: #00a11a;
  font-size: 15px;
  opacity: 0.5;
  flex-shrink: 0;
  transition: 0.25s;
}
.btn-after-cta:hover .cta-arrow,
.btn-after-expert:hover .ep-arrow,
.btn-after-purple:hover .pp-arrow,
.btn-after-secondary:hover .sec-arrow,
.cc-dl-cta:hover .cc-dl-arrow,
.rec-callout-btn:hover .rec-callout-btn-arrow {
  transform: translateX(3px);
  opacity: 1;
}
.btn-after-secondary {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #e8eefb 0, #dae4f7 100%);
  border: 1px solid #c3d4ed;
  border-radius: 12px;
  transition: 0.25s;
}
.btn-after-secondary:active,
.btn-after-secondary:focus,
.btn-after-secondary:hover {
  border-color: #1e40af;
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.12);
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-after-secondary:hover .sec-title {
  color: #1e3a8a;
}
.btn-after-secondary:hover .sec-sub {
  color: rgba(30, 58, 138, 0.6);
}
.btn-after-secondary .sec-icon {
  width: 38px;
  height: 38px;
  background: #1e40af;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-after-secondary .sec-icon svg {
  width: 18px;
  height: 18px;
}
.btn-after-secondary .sec-text-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.btn-after-secondary .sec-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e3a8a;
  line-height: 1.3;
}
.btn-after-secondary .sec-sub {
  font-size: 12px;
  color: rgba(30, 58, 138, 0.6);
  font-weight: 500;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-after-secondary .sec-deal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #00a11a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px 2px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.btn-after-secondary .sec-arrow {
  margin-left: auto;
  color: #1e40af;
  font-size: 15px;
  transition: transform 0.25s;
  flex-shrink: 0;
  opacity: 0.5;
}
.btn-after-purple {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #e8e0f7 0, #d0c8f0 100%);
  border: 1px solid #b8aee0;
  border-radius: 12px;
  transition: 0.25s;
}
.btn-after-purple:active,
.btn-after-purple:focus,
.btn-after-purple:hover,
.cc-dl-cta:active,
.cc-dl-cta:focus,
.cc-dl-cta:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.15);
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-after-purple:hover .pp-main-text,
.cc-dl-cta:hover .cc-dl-main {
  color: #4c1d95;
}
.btn-after-purple:hover .pp-sub-text {
  color: rgba(76, 29, 149, 0.6);
}
.btn-after-purple .pp-icon,
.cc-dl-icon {
  width: 40px;
  height: 40px;
  background: #7c3aed;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-after-purple .pp-main-text,
.cc-dl-main {
  font-size: 15px;
  font-weight: 700;
  color: #4c1d95;
  line-height: 1.3;
}
.btn-after-purple .pp-sub-text,
.cc-dl-sub {
  font-size: 12px;
  font-weight: 500;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(76, 29, 149, 0.6);
}
.btn-after-expert,
.rec-callout {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.btn-after-purple .pp-badge,
.cc-dl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  background: #7c3aed;
  color: #fff;
}
.btn-after-purple .pp-arrow,
.cc-dl-arrow {
  color: #7c3aed;
  font-size: 15px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: 0.25s;
}
.btn-after-expert,
.vpn-card {
  align-items: center;
  display: flex;
  text-decoration: none;
  cursor: pointer;
}
.btn-after-expert {
  gap: 12px;
  background: linear-gradient(135deg, #b8e6c4 0, #a8e6b8 100%);
  border: 1px solid #8dd8a0;
  border-radius: 12px;
  padding: 14px 18px;
  transition: 0.25s;
}
.btn-after-expert:hover .ep-sub-text {
  color: rgba(10, 107, 24, 0.55);
}
.btn-after-expert .ep-sub-text {
  font-size: 12px;
  font-weight: 500;
  margin-top: 3px;
  color: rgba(10, 107, 24, 0.55);
}
.btn-after-expert .ep-arrow,
.rec-callout-btn-arrow {
  color: #00a11a;
  font-size: 15px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: 0.25s;
}
.vpn-cards-after {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  background: linear-gradient(180deg, #fafbfc 0, #f0f7f1 100%);
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
}
.vpn-card {
  gap: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 18px;
  transition: 0.3s;
  position: relative;
}
.vpn-card:hover {
  border-color: rgba(0, 161, 26, 0.3);
  box-shadow: 0 4px 20px rgba(0, 161, 26, 0.08);
  transform: translateY(-1px);
}
.vpn-card.featured {
  border: 2px solid #00a11a;
  background: linear-gradient(135deg, #fafffa 0, #f0fdf4 100%);
  padding: 16px 18px;
}
.vpn-card.featured .vpn-tag {
  position: absolute;
  top: -10px;
  right: 16px;
  background: #00a11a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 2px 10px 3px;
  border-radius: 6px;
}
.vpn-card .rank-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.dc-row.dc-featured .dc-btn-text,
.dc-row.dc-featured .dc-rank,
.vpn-card.featured .rank-badge {
  background: #00a11a;
  color: #fff;
}
.dc-row:not(.dc-featured) .dc-rank,
.vpn-card:not(.featured) .rank-badge {
  background: #f8f9fb;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.vpn-card .vpn-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.vpn-card .vpn-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vpn-card .vpn-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
}
.vpn-card .vpn-stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 1px;
}
.vpn-card .vpn-stars .half-star {
  position: relative;
  display: inline-block;
  color: #e5e7eb;
}
.vpn-card .vpn-stars .half-star::before {
  content: "\2605";
  position: absolute;
  left: 0;
  overflow: hidden;
  width: 50%;
  color: #f59e0b;
}
.vpn-card .vpn-meta {
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vpn-card .vpn-meta .sep {
  width: 3px;
  height: 3px;
  background: #e5e7eb;
  border-radius: 50%;
  flex-shrink: 0;
}
.vpn-card .vpn-meta .nab-highlight {
  color: #00a11a;
  font-weight: 600;
}
.vpn-card .card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #00a11a;
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.25s;
  flex-shrink: 0;
  margin-left: auto;
}
.vpn-card .card-cta:active,
.vpn-card .card-cta:focus,
.vpn-card .card-cta:hover {
  background: #008a16;
  box-shadow: 0 2px 8px rgba(0, 161, 26, 0.3);
  color: #fff;
}
.dc-row:not(.dc-featured) .dc-btn-text,
.vpn-card:not(.featured) .card-cta {
  background: 0 0;
  color: #00a11a;
  border: 1.5px solid #00a11a;
}
.vpn-card:not(.featured) .card-cta:active,
.vpn-card:not(.featured) .card-cta:focus,
.vpn-card:not(.featured) .card-cta:hover {
  background: #e6f9ea;
  color: #00a11a;
}
@media (max-width: 560px) {
  .vpn-card {
    flex-wrap: wrap;
    gap: 10px;
  }
  .vpn-card .card-cta {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}
.rec-callout {
  background: linear-gradient(135deg, #f0fdf4 0, #e6f9ea 100%);
  border: 1px solid #b8e0c2;
  border-left: 4px solid #00a11a;
  border-radius: 4px 12px 12px 4px;
  padding: 20px 24px;
}
.rec-callout .rec-callout-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.rec-callout .rec-callout-icon {
  width: 24px;
  height: 24px;
  background: #00a11a;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rec-callout .rec-callout-icon svg {
  width: 12px;
  height: 12px;
}
.rec-callout .rec-callout-title {
  font-size: 14px;
  font-weight: 700;
  color: #0a6b18;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rec-callout .rec-callout-score {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.rec-callout .rec-callout-score .num {
  font-size: 23px;
  font-weight: 800;
  color: #0a6b18;
}
.rec-callout .rec-callout-score .den {
  font-size: 13px;
  font-weight: 500;
  color: rgba(10, 107, 24, 0.45);
}
.rec-callout .rec-callout-text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.55;
  margin-bottom: 12px;
}
.cc-callout .cc-callout-text strong,
.rec-callout .rec-callout-text strong {
  color: #1f2937;
  font-weight: 600;
}
.rec-callout .rec-callout-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rec-callout .rec-callout-features li {
  font-size: 13px;
  color: rgba(10, 107, 24, 0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rec-callout .rec-callout-features li .chk {
  width: 18px;
  height: 18px;
  background: rgba(0, 161, 26, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: #00a11a;
}
.dc-row,
.rec-callout-btn {
  align-items: center;
  display: flex;
  text-decoration: none;
  cursor: pointer;
}
.rec-callout-btn {
  gap: 12px;
  background: #a8e6b8;
  border: 1px solid #8dd8a0;
  border-radius: 12px;
  padding: 14px 18px;
  width: 100%;
  transition: 0.25s;
  box-sizing: border-box;
}
.rec-callout-btn-sub {
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
  color: rgba(10, 107, 24, 0.55);
}
.cc-callout,
.deal-cards-wrap {
  max-width: 480px;
  margin: 0 auto;
}
.cc-callout,
.cc-dl-cta,
.deal-cards-wrap {
  width: 100%;
  box-sizing: border-box;
}
.deal-cards-wrap .dc-heading {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.deal-cards-wrap .dc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-row {
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: 0.2s;
}
.dc-row:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
  text-decoration: none;
}
.dc-row.dc-featured {
  border: 2px solid #00a11a;
  background: linear-gradient(135deg, #fafffa, #f0fdf4);
  position: relative;
}
.dc-row .dc-rank {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.dc-row .dc-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.dc-row .dc-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
}
.dc-row .dc-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.dc-row .dc-meta .dc-hl {
  color: #00a11a;
  font-weight: 700;
}
.dc-row .dc-meta .dc-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e5e7eb;
  flex-shrink: 0;
}
.dc-row .dc-btn-text {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: 0.2s;
}
.dc-row.dc-featured .dc-tag {
  position: absolute;
  top: -8px;
  right: 12px;
  background: #00a11a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.dc-row:hover .dc-btn-text {
  box-shadow: 0 2px 8px rgba(0, 161, 26, 0.2);
}
.dc-row.dc-featured:hover .dc-btn-text {
  background: #008a16;
}
.dc-row:not(.dc-featured):hover .dc-btn-text {
  background: #e6f9ea;
}
.cc-callout {
  background: linear-gradient(135deg, #faf8ff 0, #f3f0ff 100%);
  border: 1px solid #e4ddf7;
  border-left: 4px solid #7c3aed;
  border-radius: 4px 16px 16px 4px;
  padding: 20px 24px;
}
.cc-callout .cc-callout-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cc-callout .cc-callout-icon {
  width: 24px;
  height: 24px;
  background: #7c3aed;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cc-callout .cc-trust-row,
.cc-dl-cta {
  align-items: center;
  gap: 12px;
  display: flex;
}
.cc-callout .cc-callout-icon svg {
  width: 13px;
  height: 13px;
}
.cc-callout .cc-callout-title {
  font-size: 14px;
  font-weight: 700;
  color: #4c1d95;
}
.cc-callout .cc-callout-text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.55;
  margin-bottom: 14px;
}
.cc-dl-cta {
  background: linear-gradient(135deg, #e8e0f7 0, #d0c8f0 100%);
  border: 1px solid #b8aee0;
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s;
}
.cc-callout .cc-trust-row {
  margin-top: 12px;
  flex-wrap: wrap;
}
.cc-callout .cc-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #7c3aed;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.cc-callout .cc-trust-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  .btn-after-cta,
  .btn-after-expert,
  .btn-after-purple,
  .btn-after-secondary,
  .cc-dl-cta,
  .rec-callout-btn {
    gap: 10px;
    padding: 12px 14px;
  }
  .btn-after-cta .cta-sub-text,
  .btn-after-purple .pp-sub-text,
  .btn-after-secondary .sec-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .btn-after-cta .cta-main-text,
  .btn-after-expert .ep-main-text,
  .btn-after-purple .pp-main-text,
  .btn-after-secondary .sec-title,
  .cc-dl-main,
  .rec-callout-btn-main {
    font-size: 14px;
  }
  .btn-after-cta .cta-sub-text,
  .btn-after-expert .ep-sub-text,
  .btn-after-purple .pp-sub-text,
  .btn-after-secondary .sec-sub,
  .rec-callout-btn-sub {
    font-size: 11px;
  }
  .btn-after-cta .cta-icon-wrap,
  .btn-after-expert .ep-icon,
  .btn-after-purple .pp-icon,
  .btn-after-secondary .sec-icon,
  .cc-dl-icon,
  .rec-callout-btn-icon {
    width: 34px;
    height: 34px;
  }
  .btn-after-cta .cta-icon-wrap svg,
  .btn-after-expert .ep-icon svg,
  .btn-after-purple .pp-icon svg,
  .btn-after-secondary .sec-icon svg,
  .cc-dl-icon svg,
  .rec-callout-btn-icon svg {
    width: 17px;
    height: 17px;
  }
  .cc-callout,
  .rec-callout {
    padding: 16px 14px;
  }
  .dc-row {
    gap: 8px;
    padding: 8px 10px;
  }
  .dc-row .dc-name {
    font-size: 13px;
  }
  .cc-callout .cc-trust-item,
  .dc-row .dc-meta {
    font-size: 10px;
  }
  .dc-row .dc-btn-text {
    font-size: 11px;
    padding: 5px 10px;
  }
  .dc-row .dc-rank {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .cc-dl-sub {
    font-size: 11px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .cc-callout .cc-trust-row {
    gap: 8px;
  }
}

/* ===== css/styles.css ===== */
/* PCrisk Website Threat Scanner - Styles */
[x-cloak] { display: none !important; }
.skip-nav { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10000; }
.skip-nav:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 10px 20px; background: var(--blue); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

/* Skeleton placeholders for partials loaded after first paint. The
   skeleton markup lives inside #page-home (see index.html) and is replaced
   when /sections/home.html arrives. Dimensions roughly match the final
   hero card so there's minimal layout jump when the real content swaps in. */
.skel {
  background: linear-gradient(90deg, #eef0f2 0%, #dee2e6 50%, #eef0f2 100%);
  background-size: 200% 100%;
  animation: skel-pulse 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.skel_text {
  display:inline-block;
  height:14px;
  border-radius:4px;
  vertical-align:middle
}
@keyframes skel-pulse {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* Hero skeleton mirrors .v4 .main-card: 960 max-width (= .v4 .inner),
   16 px radius, light border + shadow, no own padding - the body and
   footer blocks handle their own, exactly like the real hero. */
.skel-card {
  max-width: 960px;
  margin: 0px auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
  overflow: hidden;
}
.skel-card-body { padding: 32px 36px 20px; }
/* Card-footer strip: 5 flex check-items with icon + text - matches
   .v4 .card-footer + .v4 .check-item. */
.skel-card-footer {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #f1f5f9;
}
.skel-card-footer-item {
  flex: 1;
  min-width: 140px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid #f1f5f9;
}
.skel-card-footer-item:last-child { border-right: none; }
.skel-card-footer-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.skel-card-footer-text { height: 12px; flex: 1; max-width: 120px; }
@media (max-width: 640px) {
  .skel-card-footer { display: grid; grid-template-columns: repeat(3, 1fr); }
  .skel-card-footer-item { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .skel-card-footer-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
  .skel-card-footer { display: flex; flex-direction: column; }
  .skel-card-footer-item { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .skel-card-footer-item:last-child { border-bottom: none; }
}
.skel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.skel-header-left {
  flex: 1;
  min-width: 240px;
}
.skel-chips {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Search bar: 56 px matches .v4 input vertical padding + font; 12 px radius
   matches .v4 .search-bar. Was 10 px here - off by 2. */
.skel-search {
  height: 56px;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* Skeleton variants for content that streams in after first paint -
   recent/popular lists, the scan-results report, and paginated list pages.
   They mirror the real components' outer dimensions so the swap-in is
   visually steady and the page doesn't jump. */
.skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.skel-site-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.skel-site-card-thumb { height: 140px; border-radius: 0; }
.skel-site-card-body { padding: 12px 14px; }
/* Matches .card-domain (14 px font, ~18 px line) + margin-bottom: 4 → 6 px. */
.skel-site-card-title { height: 14px; width: 65%; margin-bottom: 8px; }
.skel-site-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* Matches .badge (11 px font + 3/10 padding → ~18 px). */
.skel-site-card-badge { height: 28px; width: 64px; border-radius: 20px; }
/* Matches .badge-score (12 px font + 2/8 padding → ~20 px). */
.skel-site-card-score { height: 20px; width: 44px; border-radius: 6px; }
/* Matches .card-bar 4 px track. */
.skel-site-card-bar { height: 4px; margin-top: 6px; border-radius: 2px; }

.skel-pop-tbl {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  margin-bottom: 28px;
}
.skel-pop-row {
  display: grid;
  grid-template-columns: 36px 60px 1fr 110px 100px 80px 170px;
  gap: 12px;
  align-items: center;
  padding: 17.4px 18px;
  margin-bottom: 1px;
  border-bottom: 1px solid #f0f2f5;
}
.skel-pop-row:last-child { border-bottom: none; }
.skel-pop-row .skel { border-radius: 6px; }
.skel-pop-cell-rank { height: 26px; width: 26px; border-radius: 6px; }
.skel-pop-cell-thumb { height: 32px; width: 48px; border-radius: 4px; }
/* Domain cell now uses a container with two stacked .skel children to
   mirror the real .p-domain (bold 15 px domain + 13 px category small). */
.skel-pop-cell-dom { min-width: 0; overflow: hidden; }
.skel-pop-cell-dom-line1 { height: 14px; width: 78%; margin-bottom: 4px; }
.skel-pop-cell-dom-line2 { height: 11px; width: 52%; }
.skel-pop-cell-date { height: 14px; width: 80%; }
.skel-pop-cell-bl { height: 14px; width: 50%; }
/* Match .sbadge dimensions (14 px font + 4/12 padding, 38 px min-width). */
.skel-pop-cell-score { height: 26px; width: 38px; border-radius: 6px; margin: 0 auto; }
/* Verdict badge - slightly wider to hint at "No Threats Found" / "Suspicious". */
.skel-pop-cell-verd { height: 26px; width: 110px; border-radius: 6px; margin: 0 auto; }
@media (max-width: 900px) {
  .skel-pop-row { grid-template-columns: 36px 60px 1fr 100px 80px; }
  .skel-pop-row > :nth-child(4), .skel-pop-row > :nth-child(7) { display: none; }
}
@media (max-width: 600px) {
  .skel-pop-row { grid-template-columns: 28px 1fr 50px; gap: 8px; padding: 9px 12px; }
  .skel-pop-row > :nth-child(2), .skel-pop-row > :nth-child(4),
  .skel-pop-row > :nth-child(5), .skel-pop-row > :nth-child(7) { display: none; }
}

/* Scan-report skeleton - mirrors the real report's shape (URL header,
   score card, stacked .rc sections, two-col row) exactly: 3 px radius,
   10 px gaps, shared border/shadow tokens with the real components so the
   reveal is visually imperceptible. */
.skel-report { 
  max-width: 1280px; 
  margin: 17px auto 28px; 
  padding: 0 24px; 
}
/* URL header - matches .url-hdr (14/18 padding, 3 px radius, 10 px margin). */
.skel-report-hdr {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.skel-report-hdr-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 21px; flex-wrap: wrap; }
.skel-report-hdr-fav { height: 32px; width: 32px; border-radius: 4px; }
.skel-report-hdr-title { height: 18px; flex: 1 1 220px; max-width: 280px; }
.skel-report-hdr-meta { height: 14px; width: 400px; max-width: 100%; margin-left: auto; }
.skel-report-score {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--border-lt);
}
/* .sc-big-num: 36 px font 800 weight → actual glyph height ~34-36 px.
   Width of "100" at that size ~70-90 px. */
.skel-report-score-num { height: 36px; width: 80px; }
/* .vbig badge: 12 px font + 5/14 padding → ~26-28 px; 20 px radius is pill. */
.skel-report-score-verd { height: 28px; width: 130px; border-radius: 20px; }
/* .sc-track: 8 px, 4 px radius. */
.skel-report-score-bar { height: 26px; grid-column: 1 / -1; border-radius: 4px; margin-top: 16px; margin-bottom: 5px;}

/* Section block - matches .rc: 3 px radius, 10 px margin, shared border +
   shadow. Inner structure: a header strip (.rc-h look-alike) and a body
   (.rc-b look-alike) with their own padding. */
.skel-report-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.skel-report-section-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-lt);
  background: #f8fafe;
  display: flex;
  align-items: center;
  gap: 8px;
}
.skel-report-section-header-icon { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.skel-report-section-header-title { height: 13px; flex: 1; max-width: 180px; }
.skel-report-section-body { padding: 12px 14px; }
.skel-report-section-line { height: 12px; margin-bottom: 8px; }
.skel-report-section-line:last-child { margin-bottom: 0; }
.skel-report-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 900px) { .skel-report-twocol { grid-template-columns: 1fr; } }
.skel-report-twocol .skel-report-section { margin-bottom: 0; }



/* The route-aware skeleton (#skel-home / #skel-results / #skel-recent /
   #skel-popular wrapped in #app-skeleton) was removed once the
   server-side assembler started inlining all section content into the
   first response - every page now arrives with the real markup in DOM
   and uses its own in-section shimmer-in-place skeleton. The Alpine
   alpine:initialized handler that used to remove #app-skeleton, plus
   the per-skeleton padding rule that lived here, are gone too. */

/* The [data-route="X"] gates that used to live here (gating
   #static-hero / #page-home / #page-recent / #page-popular /
   #page-results visibility based on the route stamped on <html>)
   were obsolete after the SSR migration: each route now ships its
   own complete HTML, so e.g. the hero <div id="static-hero"> is
   present in the DOM only on the home page - no need to hide it
   on results pages because it isn't there to begin with. The
   `data-route` attribute is still set on <html> by the layout for
   any other consumer that wants to query the current route. */

/* Respect reduced-motion preferences - a pulsing gradient is decorative
   and can be uncomfortable for motion-sensitive users. Falls back to a
   static tint that still reads as a placeholder. */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: #e9ecef; }
}

:root {
  --blue:        #2356b2;
  --blue-dark:   #1a3f8a;
  --blue-btn:    #3565c8;
  --blue-link:   #1a56b2;
  --orange:      #d4580e;
  --green:       #1a9550;
  --green-bg:    #e8f5ee;
  --red:         #c0392b;
  --red-bg:      #fce8e6;
  --yellow:      #d4820a;
  --yellow-bg:   #fef3d7;
  --text:        #1a1a1a;
  --text-mid:    #444;
  --text-light:  #5a5a5a;  /* was #777 - 4.47:1 on white just failed WCAG AA. #5a5a5a hits 5.93:1. */
  --border:      #d0d0d0;
  --border-lt:   #e8e8e8;
  --bg-page:     #fff;
  --bg-page_old: #f1f5f9;
  --bg-white:    #fff;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.09);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Clip horizontal overflow at the root so an off-screen element (long
   domain, unwrapped URL, the off-canvas mobile nav with translate-x-full,
   etc.) can't be dragged into view on iOS Safari.
   Two-stage declaration: `hidden` is the universal fallback; `clip` is
   the preferred value on browsers that support it (iOS 16+, modern
   Chrome/Firefox) because it doesn't establish a scroll container -
   that keeps `position: sticky` on the header working. Older iOS
   Safari (< 16) doesn't know `clip`, ignores the second declaration,
   and falls back to `hidden`. overscroll-behavior-x: contain adds
   belt-and-braces protection against rubber-band on any child scroll
   container. */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: contain; }
body { 
  font-family: 'Roboto', sans-serif; background: var(--bg-page); color: var(--text); font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;}
/* a { color: var(--blue-link); text-decoration: none; } 
a:hover { text-decoration: underline; }*/

/* pcrisk.com wrapper SVGs are inlined into index.html (which we can't
   edit) with Tailwind width classes but no width/height HTML attrs,
   so the browser can't reserve vertical space until CSS parses -
   triggers CLS and Lighthouse's unsized-images audit. Applying
   aspect-ratio against the src path reserves the box before the image
   network-loads. Ratios match each SVG's intrinsic viewBox. */
img[src*="/joomspirit_70/images/v2/logo.svg"] { aspect-ratio: 160 / 46; }
img[src*="/joomspirit_70/images/v2/search.svg"],
img[src*="/joomspirit_70/images/v2/location.svg"],
img[src*="/joomspirit_70/images/v2/socials/"] { aspect-ratio: 1 / 1; }

/* ══════════ HEADER ══════════ */

header {
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  position: sticky; top: 0; z-index: 100;
  height: 72px; display: flex; align-items: center;
}
@media (min-width: 1280px) { header { height: 90px; } }
.hdr-inner {
  max-width: 1440px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; padding: 0 16px;
  justify-content: space-between;
}
@media (min-width: 1536px) { .hdr-inner { justify-content: flex-start; } }
.hdr-logo {
  display: flex; align-items: center; flex-shrink: 0; cursor: pointer;
  margin-right: auto; text-decoration: none;
}
@media (min-width: 1024px) { .hdr-logo { margin-right: 0; } }
@media (min-width: 1280px) { .hdr-logo { margin-right: 57px; } }
.hdr-logo img { height: auto; width: 121px; object-fit: contain; display: block; }
@media (min-width: 640px) { .hdr-logo img { width: 96px; } }
@media (min-width: 1280px) { .hdr-logo img { width: 160px; } }
.hdr-nav {
  display: none; align-items: center; justify-content: center; gap: 32px; flex-grow: 1;
}
@media (min-width: 1024px) { .hdr-nav { display: flex; } }
@media (min-width: 1280px) { .hdr-nav { margin-right: auto; } }
.hdr-nav a {
  display: flex; align-items: center;
  color: #262626; font-size: 14px; font-weight: 500;
  text-transform: uppercase; line-height: 1.25;
  white-space: nowrap; transition: color 0.15s; text-decoration: none;
}
.hdr-nav a:hover { color: #1e40af; text-decoration: none; }
.hdr-nav a.active { color: #1e40af; }
.hdr-search {
  display: none; align-items: center; gap: 8px;
  background: #f5f5f5; border: 1px solid transparent;
  border-radius: 40px; padding: 0 14px; height: 44px;
  width: 280px; transition: border-color 0.2s;
}
@media (min-width: 1280px) { .hdr-search { display: flex; } }
.hdr-search:focus-within { border-color: #1e40af; }
.hdr-search input {
  border: none; background: transparent; outline: none;
  font-size: 14px; color: #262626; width: 100%;
  font-family: 'Roboto', sans-serif; line-height: normal;
}
.hdr-search input::placeholder { color: #262626; }
.hdr-search button {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 24px; height: 24px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center;
}
.hdr-search svg { width: 20px; height: 20px; flex-shrink: 0; color: #525252; }
.hdr-hamburger {
  display: none; background: none; border: none; cursor: pointer;
  width: 24px; height: 24px; padding: 0; margin-left: 16px;
}
@media (min-width: 640px) and (max-width: 1279px) { .hdr-hamburger { display: block; } }
.hdr-hamburger svg { width: 24px; height: 24px; color: #262626; }
.hdr-mobile-search { display: flex; align-items: center; gap: 8px; }
@media (min-width: 640px) { .hdr-mobile-search { display: none; } }
.hdr-mobile-search button {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 24px; height: 24px; flex-shrink: 0;
}
.hdr-mobile-search svg { width: 24px; height: 24px; color: #525252; }

/* ══════════ HERO V4 ══════════ */
.v4 { 
  /*background: #f1f5f9; */
  padding: 64px 20px 56px; position: relative; }
/* 
.v4::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.07) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
*/




.v4 {
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 30%,
      rgba(35, 86, 178, 0.14) 0%,
      rgba(35, 86, 178, 0.05) 40%,
      transparent 75%
    ),
    linear-gradient(
      180deg,
      #e8eef9 0%,
      #f1f5f9 100%
    );
}
/*  */
/*
.v4 {
  background: linear-gradient(180deg, #e8eef9 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

.v4:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 1600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle,
      transparent 0,
      transparent 198px,
      rgba(35,86,178,0.08) 199px,
      rgba(35,86,178,0.08) 200px,
      transparent 201px,
      transparent 318px,
      rgba(35,86,178,0.06) 319px,
      rgba(35,86,178,0.06) 320px,
      transparent 321px,
      transparent 438px,
      rgba(35,86,178,0.05) 439px,
      rgba(35,86,178,0.05) 440px,
      transparent 441px,
      transparent 558px,
      rgba(35,86,178,0.04) 559px,
      rgba(35,86,178,0.04) 560px,
      transparent 561px);
}
*/

.v4 .inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.v4 .stat-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.v4 .stat-chip { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 12px; font-size: 11px; color: #64748b; font-weight: 500; }
.v4 .stat-chip strong { color: #0f172a; font-weight: 700; }
.v4 .main-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(15,23,42,0.04); overflow: hidden; }
.v4 .card-header { padding: 32px 36px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.v4 .card-header-left { flex: 1; min-width: 0; }
.v4 h1 { font-size: 32px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.v4 .subtitle { font-size: 15px; color: #64748b; line-height: 1.6; max-width: 520px; }
.v4 .search-section { padding: 24px 36px 20px 36px;  }
.v4 .search-bar { display: flex; gap: 0; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; transition: border-color 0.2s; }
/* Sync the focus border with the Scan Now button's current colour so the
   bar visually "locks in" with whatever state the button is showing -
   default enabled, hovered/active, or disabled. :has() lets the child
   button's pseudo-state bubble up to the parent. */
.v4 .search-bar:focus-within { border-color: #1e40af; background: #fff; }
.v4 .search-bar:focus-within:has(.scan-btn:hover),
.v4 .search-bar:focus-within:has(.scan-btn:active) { border-color: #1d4ed8; }
.v4 .search-bar:focus-within:has(.scan-btn:disabled) { border-color: #788ccf;   }
.v4 .protocol-tag { display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 600; color: #94a3b8; border-right: 1px solid #e2e8f0; background: #f1f5f9; white-space: nowrap; border-radius: 10px 0 0 10px; }
.v4 input[type="text"] { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; padding: 16px 14px; color: #1e293b; font-family: 'Roboto Mono', 'Roboto', monospace; }
.v4 input::placeholder { color: #94a3b8; font-family: 'Roboto', sans-serif; }
.v4 .scan-btn {
  background: #1e40af;
  color: #fff;
  border: none;
  padding: 0 31px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
  /* Extend the button across the 2px .search-bar border on three sides
     so its blue area reaches the outermost edge of the bar. Without
     this, the button looks 4px shorter than the bar's total height
     (the 2px top + 2px bottom border steal that space). Matching 12px
     radius on the two rounded corners mirrors the bar's outer shape. */
  margin: -2px -2px -2px 0;
  border-radius: 0 12px 12px 0;
}
.v4 .scan-btn:hover { background: #1d4ed8; }
.v4 .scan-btn:disabled {  background-color: #788ccf;  cursor: not-allowed; }
.v4 .scan-btn svg { width: 16px; height: 16px; }
.v4 .card-footer { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid #f1f5f9; }
.v4 .check-item { flex: 1; min-width: 140px; padding: 16px 20px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: #475569; border-right: 1px solid #f1f5f9; }
.v4 .check-item:last-child { border-right: none; }
.v4 .check-item .icon-box { width: 32px; height: 32px; border-radius: 8px; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v4 .check-item .icon-box svg { width: 16px; height: 16px; color: #2563eb; }
.v4 .bottom-row { display: flex; flex-direction: column; align-items: center; margin-top: 20px; gap: 12px; }
.v4 .trust-row { display: flex; gap: 20px; flex-wrap: wrap; }
.v4 .trust-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #94a3b8; font-weight: 500; }
.v4 .trust-item svg { width: 14px; height: 14px; color: #22c55e; }
.v4 .disclaimer { font-size: 11px; color: #94a3b8; line-height: 1.6; max-width: 960px; text-align: center; }
.v4 .disclaimer strong { color: #64748b; }
.v4 .disclaimer a { color: #2563eb; text-decoration: none; }

/* Keep scan-btn globally for other pages */
.scan-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; background: var(--blue); border: none; border-radius: 0px; color: #fff; padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.scan-btn:hover { background: var(--blue-dark); }
.scan-btn:disabled {  cursor: not-allowed; }

/* Tablet */
@media (max-width: 768px) {
  .v4 { padding: 48px 16px 40px; }
  .v4 .card-header { flex-direction: column; gap: 16px; padding: 24px 24px 0; }
  .v4 .stat-chips { justify-content: flex-start; }
  .v4 .search-section { padding: 20px 24px 24px; }
  .v4 .main-scanning-container { margin-left: 24px; margin-right: 24px; }
  .v4 .card-footer { display: grid; grid-template-columns: repeat(3, 1fr); }
  .v4 .check-item { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .v4 .check-item:nth-last-child(-n+2) { border-bottom: none; }
  .v4 .trust-row { justify-content: center; }
}
/* Mobile */
@media (max-width: 480px) {
  .v4 { padding: 32px 12px 32px; }
  .v4 h1 { font-size: 24px; }
  .v4 .subtitle { font-size: 14px; }
  .v4 .card-header { padding: 20px 16px 0; }
  .v4 .search-section { padding: 16px 16px 20px; }
  .v4 .main-scanning-container { margin-left: 16px; margin-right: 16px; }
  .v4 .search-bar { flex-direction: column; }
  /* Stacked layout - button sits below the input, so the overlap
     switches from the right edge to the bottom edge. Horizontal padding
     doesn't change the button's actual width here (width:100%), so
     vertical padding carries the "wider by ~3px" bump from desktop -
     +3px top & bottom matches the visual weight. */
  .v4 .scan-btn { padding: 17px 20px; justify-content: center; margin: 0 -2px -2px -2px; border-radius: 0 0 12px 12px; }
  /* Stacked layout - rounded corners switch from left side to top side. */
  .v4 .protocol-tag {border-right: none; border-bottom: 1px solid #e2e8f0; padding: 10px 14px; border-radius: 10px 10px 0 0; }
  .v4 .card-footer { display: flex; flex-direction: column; }
  .v4 .check-item { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .v4 .check-item:last-child { border-bottom: none; }
  .v4 .stat-chips { gap: 4px; }
  .v4 .stat-chip { padding: 5px 10px; font-size: 10px; }
  .v4 .trust-row { gap: 12px; justify-content: center; }
  .v4 .trust-item { font-size: 11px; }
  .v4 .disclaimer { font-size: 10px; }
  .v4 .bottom-row { margin-top: 16px; gap: 10px; }
}

/* ── LAYOUT ── */
.section { max-width: 1280px; margin: 0 auto; padding: 28px 24px; }
.rw { max-width: 1280px; margin: 12px auto 0px; padding: 0 24px; }
.main-layout { max-width: 1280px; margin: 24px auto 40px; padding: 0 24px; }
.sec-head {
  font-size: 18px; font-weight: 800; padding-bottom: 10px; padding-top: 10px;margin: 0 0 16px;
  border-bottom: 2.5px solid var(--blue); display: flex; justify-content: space-between;
  align-items: baseline; letter-spacing: -0.2px;
}
.sec-head a {
  font-size: 14px; font-weight: 600; color: var(--blue-link);
  transition: color 0.15s, gap 0.15s; display: inline-flex; align-items: center; gap: 3px;
}
.sec-head a:hover { color: var(--blue); gap: 6px; text-decoration: none; }
.sec-head .sec-head-pages{
  font-size:13px;font-weight:400;color:var(--text-light);
}

@media (max-width: 520px) {.sec-head {font-size: 18px;} .sec-head  .sec-head-pages{font-size:12px;}}
@media (max-width: 500px) {.sec-head {font-size: 18px;} .sec-head  .sec-head-pages{font-size:11px;}}
@media (max-width: 480px) {.sec-head {font-size: 17px;} .sec-head  .sec-head-pages{font-size:10px;}}
@media (max-width: 460px) {.sec-head {font-size: 16px;} .sec-head  .sec-head-pages{font-size:9px;}}
@media (max-width: 440px) {.sec-head {font-size: 15px;} .sec-head  .sec-head-pages{font-size:8px;}}

.sec-icon {
  display: inline-flex;
  align-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  position: relative;
  top: 3px;
  margin-right: 7px;
}
.sec-icon svg {
  width: 20px; height: 20px;
  stroke: #888;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── CARDS (Recently Scanned) ── */
.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
/* Max-2-rows behaviour is driven by _hideOverflowCards() in app.js, which
   counts the actual column count at the current viewport and display:none's
   cards beyond cols×2. Driving it from JS avoids the gap-accumulation +
   phantom-border issue that `grid-auto-rows: 0 + overflow: hidden` had
   with 1- or 2-column layouts. */
.cards-grid-max2rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.card {
  background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #eee;
  box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer; text-decoration: none; color: inherit; display: block;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
/* Skeleton state - same .card outer element, with .skel placeholders
   inside instead of real content. Disable interactions so the user
   can't click an empty slot, and suppress the hover lift. */
.card.card-loading { cursor: default; pointer-events: none; }
.card.card-loading:hover { box-shadow: var(--shadow-sm); transform: none; }
.card-thumb {
  height: 140px; 
  background: #f1f5f9; 
  display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative;
}
/* Stack the placeholder SVG (always rendered) and the screenshot img
   (rendered when site.screenshot_url is set) on top of each other, both
   filling the thumb. The img comes after the SVG in DOM order so it
   stacks on top by default - when present it covers the SVG entirely;
   when absent the SVG remains visible as the placeholder. */
.card-thumb > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* translateZ pins the thumb bitmap to its own compositor layer.
   Without it, hovering one card promotes that card to a new layer and
   forces Chromium to re-rasterize sibling cards too; with filter:blur(8px)
   on low-trust thumbnails, the re-sample comes out at a slightly different
   intensity and the user sees neighbors visibly "shimmer". Pinning each
   thumb img to its own layer up front isolates the filter rendering. */
.card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); }
.card-thumb .placeholder { color: #94a3b8; font-size: 32px; }
.card-body { padding: 12px 14px; }
.card-domain { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-bar { height: 4px; background: #eef0f3; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.card-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
.card-bar-fill.safe { background: linear-gradient(90deg, #34d399, #059669); }
.card-bar-fill.moderate { background: linear-gradient(90deg, #fbbf24, #d97706); }
.card-bar-fill.danger { background: linear-gradient(90deg, #f87171, #dc2626); }
.card-meta { display: flex; align-items: center; justify-content: space-between; }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 20px; font-size: 11px; font-weight: 600;
}
.badge-green { background: #e7f6ed; color: #136e33; } /* was #15803d - 4.49 on #e7f6ed just failed */
.badge-amber { background: #fef6e7; color: #a16207; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-score {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}

/* ── TABLE (Popular) ── */
.pop-tbl { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); margin-bottom: 28px; }
.pop-row { display: grid; grid-template-columns: 36px 60px 1fr 110px 100px 80px 170px; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid #f0f2f5; cursor: pointer; transition: background 0.15s ease; position: relative; }
a.pop-row { text-decoration: none; color: inherit; }
.pop-row:last-child { border-bottom: none; }
.pop-row:hover { background: #f5f8fc; }
.pop-row:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); border-radius: 0 2px 2px 0; }
.pop-row.th { background: #f6f8fb; cursor: default; font-size: 12px; font-weight: 700; color: #8895a7; text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 18px; border-bottom: 1px solid var(--border); }
.pop-row.th:hover { background: #f6f8fb; }
.pop-row.th:hover::before { display: none; }
.p-rank { text-align: center; font-size: 14px; font-weight: 800; color: #8895a7; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #f0f2f5; }
.p-thumb { width: 48px; height: 32px; border: 1px solid #e2e6eb; border-radius: 4px; background: linear-gradient(145deg, #f0f4fa, #e4ecf7); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.p-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease, filter 0.35s ease; filter: saturate(0) contrast(0.82) brightness(1.12); }
.pop-row:hover .p-thumb img { transform: scale(1.05); filter: saturate(1) contrast(1) brightness(1); }
.p-domain { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.1px; overflow: hidden; min-width: 0; }
.p-domain b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-domain small { font-weight: 400; color: #8895a7; font-size: 13px; display: block; margin-top: 1px; }
.p-bl-text { font-size: 14px; font-weight: 600; color: #4b5563; }
.p-bl-text .bl-count { font-weight: 800; }
.p-bl-text.clean .bl-count { color: #1a9550; }
.p-bl-text.flagged .bl-count { color: #c0392b; }
.p-last { font-size: 14px; color: var(--text-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-score { text-align: center; }
.pop-row > :nth-child(6) { text-align: center; }
.sbadge { display: inline-block; font-size: 14px; font-weight: 800; padding: 4px 12px; border-radius: 6px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }
.sbadge.hi { background: #e7f6ed; color: #15803d; }
.sbadge.mo { background: #fef6e7; color: #a16207; }
.sbadge.mi { background: #fde8d8; color: #c2410c; }
.sbadge.lo { background: #fee2e2; color: #b91c1c; }
.p-verd { font-size: 11.5px; font-weight: 500; color: var(--text-mid); }
@media(max-width:900px) {
  .pop-row { grid-template-columns: 36px 60px 1fr 100px 80px; }
  .p-last { display: none; }
  .p-verd { display: none; }
  .pop-row.th span:nth-child(4), .pop-row.th span:nth-child(7) { display: none; }
}
@media(max-width:640px) {
  .pop-row { grid-template-columns: 28px 1fr 50px; gap: 8px; padding: 9px 12px; }
  .pop-row.th { padding: 6px 12px; }
  .p-thumb { display: none; }
  .p-last { display: none; }
  .p-bl { display: none; }
  .p-verd { display: none; }
  .pop-row.th span:nth-child(2), .pop-row.th span:nth-child(4), .pop-row.th span:nth-child(5), .pop-row.th span:nth-child(7) { display: none; }
  .p-rank { width: 22px; height: 22px; font-size: 11px; border-radius: 5px; }
  .p-domain { font-size: 12px; }
  .p-domain small { font-size: 10px; }
  .sbadge { font-size: 11px; padding: 3px 8px; }
}

/* ══════════ BREADCRUMBS ══════════ */
.bc-bar { background: transparent; padding: 10px 24px 0; max-width: 1280px; margin: 0 auto; }
.bc-inner { font-size: 14px; color: var(--text-light); display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.bc-inner span:last-child { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.bc-inner a { color: var(--blue-link); text-decoration: none; }
.bc-inner a:hover { text-decoration: underline; }

/* ══════════ COMBO CLEANER CTA ══════════ */
/* Boss-approved design - emerald revision. Three-column grid: icon ·
   body (headline + sub + social-proof) · button column. All children
   classes scoped under .cc-cta so the short names (.cc-icon, .cc-body,
   .cc-btn, .stars, .rec…) can't collide with anything else in the app.
   Bricolage Grotesque on the headline is listed for best effort - falls
   back to Roboto when the font isn't loaded (index.html is off-limits
   to us, so we don't force-load it). */
.cc-cta {
  background:
    radial-gradient(circle at 85% 120%, rgba(34,197,94,0.22) 0%, transparent 55%),
    linear-gradient(135deg, #052e1b 0%, #0f5132 42%, #1a7a4d 100%);
  border-radius: 12px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.cc-cta::after {
  content: '';
  position: absolute;
  top: -80%; left: -20%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.cc-cta .cc-icon {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.cc-cta .cc-icon svg { width: 36px; height: 36px; color: #fff; }

.cc-cta .cc-body { min-width: 0; position: relative; z-index: 1; }
.cc-cta .cc-headline {
  font-family: 'Bricolage Grotesque', 'DM Sans', 'Roboto', -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  line-height: 1.32;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 24, 'wdth' 100;
  text-rendering: optimizeLegibility;
}
.cc-cta .cc-sub {
  font-size: 12.5px; color: rgba(255,255,255,0.72);
  margin-top: 4px; line-height: 1.45;
}
.cc-cta .cc-proof {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  font-size: 11.5px; color: rgba(255,255,255,0.85);
  flex-wrap: wrap;
}
.cc-cta .cc-proof .stars {
  color: #ffd76a;
  letter-spacing: 1px;
  font-size: 12.5px;
}
/* Glass "Recommended" pill - frosted translucent background reads
   against the dark emerald gradient without fighting the icons/text. */
.cc-cta .cc-proof .rec {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 100px;
  color: #ecfdf5;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cc-cta .cc-proof .rec svg { width: 11px; height: 11px; }

.cc-cta .cc-btn-col {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.cc-cta .cc-free {
  font-size: 10.5px; color: rgba(255,255,255,0.6);
  font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* White button with emerald-wipe hover: lifts 2px on a spring ease,
   mint wash (#f0fdf4), glow shadow, arrow nudges 2px down. Respects
   prefers-reduced-motion (no movement for users who opt out). */
.cc-cta .cc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  font-size: 14px; font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  color: #0f5132;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  position: relative;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.25s ease;
}
.cc-cta .cc-btn-label { display: inline-flex; align-items: center; }
.cc-cta .cc-btn-arrow {
  display: inline-flex; align-items: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.cc-cta .cc-btn-arrow svg { width: 14px; height: 14px; }
.cc-cta .cc-btn:hover {
  background: #f0fdf4;
  color: #052e1b;
  transform: translateY(-2px);
  border-color: rgba(22,163,74,0.2);
  box-shadow:
    0 8px 20px -6px rgba(22,163,74,0.4),
    0 4px 10px rgba(0,0,0,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  text-decoration: none;
}
.cc-cta .cc-btn:hover .cc-btn-arrow { transform: translateY(2px); }
.cc-cta .cc-btn:active { transform: translateY(-1px); transition-duration: 0.1s; }
.cc-cta .cc-btn:focus-visible {
  outline: 3px solid rgba(34,197,94,0.5);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .cc-cta .cc-btn,
  .cc-cta .cc-btn-arrow {
    transition: color 0.2s ease, background 0.2s ease;
  }
  .cc-cta .cc-btn:hover,
  .cc-cta .cc-btn:hover .cc-btn-arrow { transform: none; }
}

@media (max-width: 760px) {
  .cc-cta { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .cc-cta .cc-icon { justify-self: center; }
  .cc-cta .cc-btn-col { align-items: center; }
  .cc-cta .cc-proof { justify-content: center; }
}

/* Combo Cleaner - disclaimer footer. Spans all columns of the .cc-cta
   3-column grid so it lays out as a full-width row beneath icon / body /
   button. RCS LT attribution required by PCRisk's parent-company
   ownership; link points to /about-us. */
.cc-cta .cc-disclaimer {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
}
.cc-cta .cc-disclaimer a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════ RESULTS PAGE ══════════ */

/* Generic result card */
.rc { background: #fff; border: 1px solid var(--border); border-radius: 3px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 10px; }
.rc-h { padding: 8px 14px; border-bottom: 1px solid var(--border-lt); background: #f8fafe; font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rc-h .note { font-size: 11px; color: var(--text-light); font-weight: 400; }
.rc-h .rc-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1; overflow-wrap: anywhere; word-break: break-word; }
.rc-h .rc-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.rc-h .rc-icon svg { width: 18px; height: 18px; }
.rc-b { padding: 12px 14px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; grid-auto-rows: 1fr; }
.two-col .rc { margin-bottom: 0 !important; height: 100%; display: flex; flex-direction: column; }
.two-col .rc .rc-b { flex: 1; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; grid-auto-rows:auto; } }

/* URL header */
.url-hdr { background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 14px 18px; box-shadow: var(--shadow-sm); margin-bottom: 10px; }
.url-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.url-fav { width: 32px; height: 32px; background: #e8f0fe; border: 1px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.url-fav img { display: block; }
.url-inf { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.url-inf h1, .url-inf h2 {
   font-size: 22px;
   font-weight: bold; 
   color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
.url-inf p { font-size: 12px; color: var(--text-light); margin-top: 1px; }
.url-meta { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.url-meta strong { color: var(--text); font-weight: 700; }
.url-meta .qs-i { font-size: 12px; color: var(--text-light); }
.url-meta .qs-i strong { font-size: 12px; font-weight: 700; }
.date-sep { color: #ccc; }
@media(max-width:820px) { .url-meta { font-size: 11px; } }
@media(max-width:640px) { .url-meta { flex-direction: column; gap: 2px; align-items: flex-end; } .date-sep { display: none; } }
@media(max-width:550px) { .url-meta { display: flex; margin-left: 0; align-items: flex-start; justify-content: flex-start; width: 100%; }}
/* Incomplete scan toast */
/* Incomplete scan banner */
.incomplete-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-radius: 6px; margin-bottom: 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd; animation: staleSlide 0.35s ease-out;
}
.incomplete-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: rgba(59,130,246,0.12); }
.incomplete-body { flex: 1; min-width: 0; }
.incomplete-title { font-size: 12.5px; font-weight: 700; color: #1e40af; line-height: 1.3; }
.incomplete-sub { font-size: 11px; color: #3b82f6; margin-top: 1px; line-height: 1.35; }
.incomplete-services { font-size: 10px; font-weight: 600; color: #1e40af; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; }

/* Stale results banner */
/* The keyframe is shared with .incomplete-bar above (dynamically
 * inserted, animation makes sense). The stale-bar used to share it
 * back when Alpine flipped x-cloak off post-mount, but the bar is
 * now SSR'd - animating it on every initial paint reads as a flash. */
@keyframes staleSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.stale-bar {
  display: none; align-items: center; gap: 14px;
  padding: 12px 18px; border-radius: 6px; margin-bottom: 10px;
  position: relative; overflow: hidden;
}
.stale-bar.visible { display: flex; }
.stale-bar.warn { background: linear-gradient(135deg, #fef3e2 0%, #fde9cc 100%); border: 1px solid #f5c97a; box-shadow: 0 1px 6px rgba(180,130,40,0.08); }
.stale-bar.critical { background: linear-gradient(135deg, #fef0ef 0%, #fde4e1 100%); border: 1px solid #f5a09a; box-shadow: 0 1px 6px rgba(180,50,40,0.10); }
.stale-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.stale-bar.warn .stale-icon { background: rgba(217,151,39,0.12); }
.stale-bar.critical .stale-icon { background: rgba(192,57,43,0.12); }
.stale-body { flex: 1; min-width: 0; }
.stale-title { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.stale-bar.warn .stale-title { color: #8b6914; }
.stale-bar.critical .stale-title { color: #991b1b; }
.stale-sub { font-size: 11px; margin-top: 1px; line-height: 1.35; }
.stale-bar.warn .stale-sub { color: #a07d2e; }
.stale-bar.critical .stale-sub { color: #b44a42; }
.stale-days { font-weight: 700; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.stale-bar.warn .stale-days { background: rgba(217,151,39,0.12); color: #8b6914; }
.stale-bar.critical .stale-days { background: rgba(192,57,43,0.12); color: #991b1b; }
.stale-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 5px; border: none; cursor: pointer;
  font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s; white-space: nowrap;
}
.stale-btn:hover { transform: translateY(-1px); }
.stale-bar.warn .stale-btn { background: #d99727; color: #fff; box-shadow: 0 2px 8px rgba(217,151,39,0.25); }
.stale-bar.warn .stale-btn:hover { background: #c58820; }
.stale-bar.critical .stale-btn { background: #c0392b; color: #fff; box-shadow: 0 2px 8px rgba(192,57,43,0.25); }
.stale-bar.critical .stale-btn:hover { background: #a93226; }
.stale-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.stale-btn svg { width: 13px; height: 13px; }
@media(max-width:640px) { .stale-bar { flex-wrap: wrap; gap: 10px; } .stale-btn { width: 100%; justify-content: center; } }

/* Rescan in progress banner */
/* Rescan progress strip on report page */
.url-hdr + .scan-progress-strip,
.scan-progress-strip + .url-hdr { margin-bottom: 10px; }

/* Score card */
.score-card { padding-top: 12px; border-top: 1px solid var(--border-lt);  }
.sc-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;  }
.sc-big-num { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.sc-big-den { font-size: 15px; font-weight: 600; color: var(--text-light); }
.sc-header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* ≤550px: drop the verdict badge onto its own row below the big score. */
@media(max-width:550px) {
  .sc-header { flex-wrap: wrap; }
  .sc-header-right { margin-left: 0; width: 100%; }
}
.vbig { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; 
  white-space: nowrap; }
.vbig.safe { background: #ecfdf5; color: #157040; border: 1px solid #a7f3d0; }
.vbig.suspicious, .vbig.moderate { background: #fffbeb; color: #a06010; border: 1px solid #fde68a; }
.vbig.danger { background: #fef2f2; color: #9c2720; border: 1px solid #fca5a5; }
.sc-track { height: 8px; background: #f1f3f5; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.sc-fill { height: 100%; border-radius: 4px; animation: scBarGrow 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s both; }
.sc-fill.safe { background: linear-gradient(90deg, #34d399, #059669); }
.sc-fill.moderate { background: linear-gradient(90deg, #fbbf24, #d97706); }
.sc-fill.danger { background: linear-gradient(90deg, #f87171, #dc2626); }
.sc-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-light); }
.sc-ticks span:first-child { color: #dc2626; }
.sc-ticks span:last-child { color: #047857; } /* darkened from #059669 - 3.76→5.04 on white */
@keyframes scFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scBarGrow { from { width: 0%; } }
@keyframes scNumCount { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* Quick info panel */
.qi-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.qi-it { padding: 9px 14px; border-right: 1px solid var(--border-lt); border-bottom: 1px solid var(--border-lt); }
.qi-it:nth-child(3n) { border-right: none; }
.qi-it:nth-child(n+7) { border-bottom: none; }
.qi-it label { font-size: 9px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 1px; }
.qi-it span { font-size: 12px; font-weight: 500; color: var(--text); }
/* var(--green) #1a9550 on white is 3.84:1 - fails WCAG AA for body text.
   The qi-it labels are 12px, so use a darker shade here that clears 4.5:1
   without changing the brand green used on green backgrounds elsewhere. */
.qi-it span.g { color: #117a3f; }
.qi-it span.r { color: var(--red); }
.pop-tier { font-weight: 600 !important; padding: 2px 8px; border-radius: 4px; }
.pop-tier.pop-t1 { background: #f0fdf4; }
.pop-tier.pop-t2 { background: #f0fdf4; }
.pop-tier.pop-t3 { background: #f0fdf4; }
.pop-tier.pop-t4 { background: #fefce8; }
.pop-tier.pop-t5 { background: #fef2f2; }
.pop-tier.pop-t6 { background: #fef2f2; }
.pop-tier.pop-t7 { background: #fef2f2; }
.pop-tier.pop-t1 { color: #16a34a; }
.pop-tier.pop-t2 { color: #166534; }
.pop-tier.pop-t3 { color: #166534; }
.pop-tier.pop-t4 { color: #4d7c0f; }
.pop-tier.pop-t5 { color: #991b1b; }
.pop-tier.pop-t6 { color: #991b1b; }
.pop-tier.pop-t7 { color: #991b1b; }
.ssl-ok { display: inline-flex; align-items: center; gap: 4px; background: var(--green-bg); color: #157040; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 2px; }
.ssl-bad { display: inline-flex; align-items: center; gap: 4px; background: var(--red-bg); color: #991b1b; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 2px; }
@media(max-width:820px) {
  .qi-panel { grid-template-columns: repeat(2, 1fr); }
  .qi-it:nth-child(3n) { border-right: 1px solid var(--border-lt); }
  .qi-it:nth-child(2n) { border-right: none; }
}
@media(max-width:480px) {
  .qi-panel { grid-template-columns: 1fr; }
  .qi-it { border-right: none !important; }
}

/* AI overview sections */
.ai-sec { margin-bottom: 0; padding: 16px 18px; border-radius: 6px; }
.ai-sec + .ai-sec { margin-top: 10px; }
.ai-sec h2.ai-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; border: none; padding: 0; overflow-wrap: anywhere; word-break: break-word; }
.ai-sec h2.ai-heading .ai-ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 5px; }
.ai-sec h2.ai-heading .ai-ico svg { width: 14px; height: 14px; }
.ai-sec p { font-size: 13px; color: var(--text-mid); line-height: 1.7; margin-bottom: 0; }
.ai-sec p + p { margin-top: 10px; }
.ai-sec.ai-desc { background: #f8fafe; border: 1px solid #e8eef6; }
.ai-sec.ai-desc h5 { color: #374a6b; }
.ai-sec.ai-desc h5 .ai-ico { background: #e0ecf8; }
.ai-sec.ai-safe { background: linear-gradient(135deg, #f0faf4 0%, #e6f7ed 100%); border: 1px solid #b6e2c8; }
.ai-sec.ai-safe h5 { color: #166534; font-size: 14px; }
.ai-sec.ai-safe h5 .ai-ico { background: #bbf0d0; }
.ai-sec.ai-safe p { color: #1e4030; }
.ai-sec.ai-danger { background: linear-gradient(135deg, #fef6f5 0%, #fdecea 100%); border: 1px solid #f0bcb6; }
.ai-sec.ai-danger h5 { color: #991b1b; font-size: 14px; }
.ai-sec.ai-danger h5 .ai-ico { background: #fdd; color: #dc2626; }
.ai-sec.ai-danger p { color: #5c1e1e; }

.ai-sec.ai-caution { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border: 1px solid #fdba74; }
.ai-sec.ai-caution h5 { color: #9a3412; font-size: 14px; }
.ai-sec.ai-caution h5 .ai-ico { background: #fed7aa; color: #ea580c; }
.ai-sec.ai-caution p { color: #7c2d12; }

.ai-sec.ai-warning { background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); border: 1px solid #fde047; }
.ai-sec.ai-warning h5 { color: #854d0e; font-size: 14px; }
.ai-sec.ai-warning h5 .ai-ico { background: #fef08a; color: #ca8a04; }
.ai-sec.ai-warning p { color: #713f12; }

.ai-sec.ai-good { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #86efac; }
.ai-sec.ai-good h5 { color: #166534; font-size: 14px; }
.ai-sec.ai-good h5 .ai-ico { background: #bbf7d0; color: #16a34a; }
.ai-sec.ai-good p { color: #14532d; }
.ai-sec.ai-tech { background: #fafafa; border: 1px solid #e5e7eb; }
.ai-sec.ai-tech h5 { color: #52525b; }
.ai-sec.ai-tech h5 .ai-ico { background: #e9e9ec; }
.ai-sec.ai-tech p { font-size: 12.5px; color: #71717a; line-height: 1.65; }

/* Screenshot + Quick Info combined card */
.ss-layout { display: flex; flex-direction: column; }
.ss-area {
  border-bottom: 1px solid var(--border-lt);
  background: linear-gradient(135deg, #edf2fb, #e2ecfb);
  min-height: 240px; display: flex; align-items: flex-start;
  justify-content: center; padding: 16px;
}
.ss-win {
  max-width: 962px; background: #fff;
  width: 100%;
  border: 1px solid #bbb; border-radius: 5px 5px 0 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); overflow: hidden;
}
.ss-ch {
  height: 26px; background: #f0f0f0; display: flex;
  align-items: center; gap: 4px; padding: 0 10px;
  border-bottom: 1px solid #ddd;
}
.ss-d { width: 7px; height: 7px; border-radius: 50%; }
.ss-adr {
  flex: 1; height: 14px; background: #fff; border: 1px solid #ddd;
  border-radius: 7px; margin-left: 5px; display: flex;
  align-items: center; padding: 0 8px; font-size: 8.5px;
  color: #555; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ss-bd {
  position: relative;
  overflow: hidden;
  /* 16:9 matches the 1920×1080 screenshot the worker captures and keeps
     the no-screenshot placeholder the same shape - no layout jump
     between the two states. The placeholder + img layers below are both
     position:absolute filling .ss-bd, so the box's own flex/centering is
     unused - layout is handled per layer. */
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
}
/* Placeholder text+icon layer: always rendered, always centered. The img
   layer below stacks on top via DOM order when present; when absent the
   placeholder shows through the (transparent) gap. */
.ss-bd-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.ss-blur-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-align: center; padding: 24px;
}
.ss-blur-card {
  background: rgba(255,255,255,0.95); padding: 16px 24px; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12); max-width: 320px;
  /* Center the title + description text. The icon SVG is centered by
     the rule below because Tailwind preflight forces svg{display:block}
     globally, which makes text-align ineffective on the icon - we have
     to use margin auto on a block element with an explicit width. */
  text-align: center;
}
.ss-blur-card svg { margin-left: auto; margin-right: auto; }
.ss-blur-btn {
  color: #fff; border: none; padding: 6px 16px; border-radius: 5px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
/* Real screenshot - absolute fill so it sits on top of the placeholder
   layer and covers it when present. Object-fit: cover handles any
   aspect-ratio drift if the captured image isn't exactly 16:9. */
.screenshot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HTML watermark overlay. Sits on top of the baked-in pill that
   src/utils/watermark.ts composites into the JPEG. The baked version
   becomes pixelated/illegible when the screenshot scales down on mobile
   - this CSS pill stays crisp at any size and overlaps the baked one
   so the user sees the readable HTML version, not the rasterised
   underlying mark. Anchor + size match the baked spec at desktop scale,
   then step down via media queries on smaller viewports.
   z-index 4 keeps it under .ss-blur-overlay (z:5) and the NSFW badge
   (z:6) so risk warnings still take priority. */
.ss-wm {
  position: absolute;
  left: 1.3%;
  bottom: 2.6%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  background: rgba(255, 255, 255, 0.97);
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  box-sizing: border-box;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
  opacity: 1;
}
.ss-wm-logo {
  height: 18px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.ss-wm-rule {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(0, 0, 0, 0.16);
  flex-shrink: 0;
}
.ss-wm-date {
  font-family: ui-monospace, "Courier New", Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  line-height: 1;
}
@media (max-width: 768px) {
  .ss-wm { padding: 5px 10px 5px 8px; gap: 6px; left: 1.2%; bottom: 2.4%;}
  .ss-wm-logo { height: 14px; }
  .ss-wm-rule { height: 10px; }
  .ss-wm-date { font-size: 9px; }
}
@media (max-width: 480px) {
  .ss-wm { padding: 3px 7px 3px 5px; gap: 4px; border-width: 1px; left: 1.1%; bottom: 2.2%; }
  .ss-wm-logo { height: 11px; }
  .ss-wm-rule { height: 8px; }
  .ss-wm-date { font-size: 7.5px; letter-spacing: 0; }
}

/* Blacklist Status - redesigned */
.bl-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.bl-big-num { font-size: 36px; font-weight: 900; line-height: 1; }
.bl-big-num.clean { color: var(--green); }
.bl-big-num.flagged { color: var(--red); }
.bl-meta { display: flex; flex-direction: column; gap: 2px; }
.bl-meta-line { font-size: 12px; color: var(--text-light); }
.bl-meta-line strong { color: var(--text); font-weight: 700; }
.bl-grid-wrap { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; padding: 4px 0; max-width: 654px; margin-left: auto; margin-right: auto; }
.bl-square { width: 10px; height: 10px; border-radius: 2px; transition: background 0.3s ease; display: inline-block; }
.bl-square.clean { background: #b0dcc0; }
.bl-square.flagged-low { background: #e05a4a; }
.bl-square.flagged-mid { background: #e05a4a; }
.bl-square.flagged-high { background: #d4453a; }
.bl-grid-note { font-size: 10.5px; color: var(--text-light); }
.bl-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.bl-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-light); }
.bl-legend-swatch { width: 8px; height: 8px; border-radius: 1.5px; flex-shrink: 0; }
.bl-section-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; font-size: 11px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.4px; }
.bl-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-lt); }
.bl-sources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.bl-src-card { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #fafbfc; border: 1px solid var(--border-lt); border-radius: 6px; gap: 8px; transition: border-color 0.15s; text-decoration: none; color: inherit; }
.bl-src-card:hover { border-color: var(--border); text-decoration: none; }
/* Skeleton placeholder swallows clicks - href="#" satisfies the Lighthouse
   crawlable-anchors check but we don't want a stray click during the brief
   pre-data window to scroll to the top. */
.bl-src-card-loading { pointer-events: none; cursor: default; }
.bl-src-name { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-src-chip { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; flex-shrink: 0; }
.bl-src-chip.clean { background: var(--green-bg); color: #0f6939; border: 1px solid #c6e9d4; } /* was var(--green)=#1a9550 - 3.43 on #e8f5ee fails. #0f6939 hits 5.1 */
.bl-src-chip.flagged { background: var(--red-bg); color: var(--red); border: 1px solid #f5c6c0; text-transform: uppercase; }
.bl-vt-link { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; background: #f8fafe; border: 1px solid #d6e4f7; border-radius: 6px; font-size: 12px; color: var(--blue-link); font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.bl-vt-link:hover { background: #eef3fb; border-color: #b8cee8; text-decoration: none; }
.bl-vt-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.bl-vt-arrow { margin-left: auto; opacity: 0.5; }
@media(max-width:640px) { .bl-sources-grid { grid-template-columns: 1fr 1fr; } .bl-summary { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media(max-width:440px) { .bl-sources-grid { grid-template-columns: 1fr; } }

/* External links cards */
.el-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.el-card { background: #f8fafe; border: 1px solid var(--border-lt); border-radius: 6px; padding: 10px 12px; text-align: center; }
.el-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.el-lbl { font-size: 9px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }
.el-status { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-top: 5px; }
.el-status.ok { background: var(--green-bg); color: #157040; }
.el-status.bad { background: var(--red-bg); color: #991b1b; }
@media(max-width:640px) { .el-grid { grid-template-columns: repeat(2, 1fr); } }

/* Redirect chain */
.rd-chain-list { display: flex; flex-flow: row wrap; align-items: center; gap: 6px 10px; padding: 4px 0; max-height: 300px; overflow-y: auto; }
.rd-step { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.rd-node-url-full { font-weight: 600; color: var(--text); font-size: 11px; word-break: break-all; }
.rd-node-code { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.rd-node-code.c2 { background: var(--green-bg); color: #157040; }
.rd-node-code.c3 { background: #fef3c7; color: #92400e; }
.rd-arrow-right { color: var(--text-light); display: inline-flex; align-items: center; flex-shrink: 0; }
.rd-none { font-size: 12px; color: var(--text-light); padding: 8px 0; display: flex; align-items: center; gap: 6px; }
.rd-none .rd-ok { color: var(--green); font-weight: 700; }

/* Disclaimer */
.scan-disclaimer { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: #f8f9fb; border: 1px solid var(--border-lt); border-radius: 3px; margin-bottom: 10px; }
.scan-disclaimer-icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; color: var(--text-light); opacity: 0.6; }
.scan-disclaimer-text { font-size: 11px; color: var(--text-light); line-height: 1.55; }
/* Underline by default so the link is distinguishable without relying on
   colour (WCAG 1.4.1). Hover is the same underline - no flicker. */
.scan-disclaimer-text a { color: var(--blue-link); text-decoration: underline; }

/* ── Inline Scan Progress Strip ── */
@keyframes spsExpand {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; margin-top: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 200px; margin-top: 16px; }
}
@keyframes spsShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(220%); }
}
@keyframes spsRadar {
  0%   { box-shadow: 0 0 0 0 rgba(35,86,178,0.55), 0 0 0 0 rgba(35,86,178,0); }
  70%  { box-shadow: 0 0 0 8px rgba(35,86,178,0), 0 0 0 16px rgba(35,86,178,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,86,178,0), 0 0 0 0 rgba(35,86,178,0); }
}
@keyframes spsStepFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main-scanning-container
{
  margin: 0 36px 20px 36px;
  border: 1px solid #dde6f3;
  border-radius: 12px;
  padding: 0px;
  
  background: linear-gradient(180deg, #f9fbfe 0%, #f3f7fc 100%);
}
.scan-progress-strip {
  
  display: none;
  overflow: hidden;
  position: relative;
  margin: 0px;
  margin-top: 0px !important;
  padding: 0 18px 0px 18px;
  max-height: 0;
  opacity: 0;
}
.scan-progress-strip.on {
  display: block;
  animation: spsExpand 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  padding: 18px;
  border-radius: inherit;
}
/* Inline-flow layout. Children are <span>s and flow naturally as
   text - the radar dot acts like an inline bullet, label/step/pct
   read like one continuous line. When the message overflows the
   strip's width (often on phones, occasionally on desktop with long
   content) it wraps to multiple lines instead of truncating. The
   single-line flex layout with text-overflow: ellipsis was producing
   "..." truncation on narrow screens; this version is width-
   independent and never hides the message. */
.sps-head {
  margin-bottom: 12px;
}
.sps-radar {
  display: inline-block;
  vertical-align: middle;
  width: 9px; height: 9px; border-radius: 50%;
  background: #2356b2;
  margin-right: 8px;
  animation: spsRadar 1.6s ease-out infinite;
}
.sps-label {
  font-size: 11px;
  font-weight: 700;
  color: #5b6b85;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-right: 6px;
}
.sps-step {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #1a1a1a;
  animation: spsStepFade 0.35s ease both;
}
.sps-step strong { color: #2356b2; font-weight: 700; }
.sps-pct {
  font-size: 12px;
  font-weight: 800;
  color: #2356b2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  margin-left: 6px;
  transition: color 0.5s ease;
}
.sps-track {
  position: relative;
  height: 6px;
  background: #e4ecf7;
  border-radius: 999px;
  overflow: hidden;
}
.sps-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #4d7ec9 0%, #2356b2 60%, #1e3f8a 100%);
  border-radius: 999px;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s ease;
}
.scan-progress-strip.finishing .sps-fill {
  background: linear-gradient(90deg, #34c66a 0%, #1f9e4f 100%);
}
.scan-progress-strip.finishing .sps-pct { color: #1f9e4f; }
.scan-progress-strip.finishing .sps-step strong { color: #1f9e4f; }
.sps-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  animation: spsShimmer 1.4s linear infinite;
}
.sps-pips {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.sps-pip {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #d8e1f0;
  transition: background 0.4s ease;
}
.sps-pip.done { background: #2356b2; }
.sps-pip.active { animation: spsPipPulse 1.5s ease-in-out infinite; }
.scan-progress-strip.finishing .sps-pip.done { background: #1f9e4f; }
@keyframes spsPipPulse {
  0%, 100% { background: #d8e1f0; }
  50% { background: #a8bde0; }
}
/* Error state */
.scan-progress-strip.sps-error { background: linear-gradient(180deg, #fef8f8 0%, #fef2f2 100%); border-color: #fecaca; }
.scan-progress-strip.sps-error .sps-label { color: #991b1b; }
.scan-progress-strip.sps-error .sps-step { color: #6b7280; }
.sps-radar-err { background: #dc2626; animation: spsRadar 1.6s ease-out infinite; }
.sps-fill-err { background: linear-gradient(90deg, #f87171 0%, #dc2626 100%); }
/* Warning state */
.scan-progress-strip.sps-warn { background: linear-gradient(180deg, #fffdf7 0%, #fffbeb 100%); border-color: #fde68a; }
.scan-progress-strip.sps-warn .sps-label { color: #92400e; }
.scan-progress-strip.sps-warn .sps-step { color: #6b7280; }
.sps-radar-warn { background: #d97706; animation: spsRadar 1.6s ease-out infinite; }

/* Info state (not-scanned banner) */
.scan-progress-strip.sps-info { background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%); border-color: #bfdbfe; }
.scan-progress-strip.sps-info .sps-label { color: #1e40af; }
.scan-progress-strip.sps-info .sps-step { color: #1e40af; }
.sps-radar-info { background: #3b82f6; animation: spsRadar 1.6s ease-out infinite; }
.sps-fill-warn { background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%); }

/* Multi-line variant - used by the "scan exhausted" state where the message
   needs to wrap across multiple lines instead of being truncated. */
.scan-progress-strip.sps-multiline .sps-head { margin-bottom: 6px; }
.sps-multiline-msg {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
  white-space: normal;
  word-wrap: break-word;
}

@media (max-width: 540px) {
  .sps-step { font-size: 12px; }
  .sps-label { font-size: 10px; }
  .sps-multiline-msg { font-size: 12px; }
}

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
/* Skeleton bar inside the .faq-q button - used by the pre-Alpine FAQ
   placeholders so the section reserves vertical space before faq-item
   <template x-for> mounts. Width tuned to look like a question line. */
.skel-faq-q-text { height: 16px; width: 60%; border-radius: 4px; }
.faq-item {
  background: #fff; border: 1px solid #d0d0d0;
  border-radius: 8px; overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.faq-item:hover { border-color: #c6d4e8; box-shadow: 0 2px 8px rgba(35,86,178,0.06); }
.faq-item.open { border-color: #93c5fd; box-shadow: 0 2px 12px rgba(35,86,178,0.08); }
.faq-q {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: #1f2937;
  background: none; border: none; width: 100%; text-align: left;
  font-family: inherit; transition: background 0.15s;
}
.faq-q:hover { background: #f9fafb; }
.faq-q-icon {
  flex-shrink: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #eff6ff; color: var(--blue);
  transition: transform 0.3s ease, background 0.2s;
}
.faq-item.open .faq-q-icon { transform: rotate(45deg); background: var(--blue); color: #fff; }
.faq-q-text { flex: 1; }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.25s ease;
}
.faq-item.open .faq-a { max-height: 800px; }
.faq-a-inner {
  padding: 0 18px 16px 52px;
  font-size: 15.5px; line-height: 1.7; color: #4b5563;
}
.faq-a-inner p + p { margin-top: 8px; }
.faq-a-inner a { color: var(--blue); text-decoration: none; }
.faq-a-inner a:hover { text-decoration: underline; }
.faq-a-inner ul { margin: 6px 0 2px 18px; }
.faq-a-inner li { margin-bottom: 3px; }
@media (max-width: 540px) {
  .faq-q { padding: 12px 14px; font-size: 15px; gap: 10px; }
  .faq-a-inner { padding: 0 14px 14px 46px; font-size: 15px; }
}

/* ── PAGINATION ──
   SSR'd pages use <a href> for nav buttons and <span class="disabled">
   for the inert ends; the legacy SPA used <button @click>. Style all
   three via the same baseline-aligned inline-flex chip so the
   "Page X of N" label sits LEVEL with the prev / next controls
   instead of dropping to its own row. */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 20px; margin-bottom: 20px;
}
.pagination a, .pagination button, .pagination span {
  display: inline-flex; align-items: center;
  padding: 6px 14px; font-size: 13px; line-height: 1;
  color: var(--text); text-decoration: none;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  cursor: pointer; transition: all 0.15s;
}
.pagination a:hover, .pagination button:hover { background: #f1f5f9; }
.pagination a.active, .pagination button.active {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.pagination button:disabled, .pagination span.disabled {
  opacity: 0.4; cursor: not-allowed;
  background: #fff; border-color: #d1d5db;
  color: var(--text-light);
  pointer-events: none;
}
/* The "Page X of N" label is a plain <span> (no .disabled). Keep the
   same vertical box geometry as the chips above (so it baselines
   identically) but drop the border + background so it reads as a
   label rather than a control. */
.pagination span:not(.disabled) {
  border-color: transparent; background: transparent;
  color: #6b7280; cursor: default;
}

/* ── LOADING ── */
.loading { text-align: center; padding: 40px; color: #6b7280; }
.spinner {
  width: 32px; height: 32px; border: 3px solid #e5e7eb;
  border-top-color: var(--blue); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Disqus-induced Safari bug: when Disqus's embed.js injects its
 * iframes + stylesheet into the report page, Safari's compositor
 * starts mishandling unrelated elements that have CSS transitions -
 * specifically the footer social-icon opacity transitions left the
 * icons painted invisible after mouseout. isolation: isolate creates
 * a new stacking context and `contain: layout paint` tells the
 * browser that anything inside the disqus container is not allowed
 * to affect layout or paint of elements outside it. Together they
 * box Disqus's compositor effects to its own subtree.
 *
 * Scoped to #disqus_thread (the div Disqus injects into) so nothing
 * else is affected; harmless before Disqus loads because the div is
 * empty. */
#disqus_thread {
  contain: layout paint;
  isolation: isolate;
}

/* ══════════ FOOTER ══════════ */
footer { margin-top: 0; }
.ft-top { background: #f1f5f9; padding: 40px 0; }
@media (min-width: 1024px) { .ft-top { padding: 60px 0; } }
.ft-top-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; justify-content: space-between;
}
@media (min-width: 1024px) { .ft-top-inner { flex-direction: row; } }
.ft-brand { width: 100%; max-width: none; padding-bottom: 0; }
@media (min-width: 1024px) { .ft-brand { max-width: 356px; } }
.ft-brand-text { margin-bottom: 27px; }
@media (min-width: 640px) { .ft-brand-text { margin-bottom: 37px; } }
.ft-brand-text p { color: #262626; margin: 0; }
.ft-brand-text p:first-child { font-size: 18px; margin-bottom: 12px; }
.ft-brand-text p:last-child { font-size: 14px; }
.ft-brand-text a { color: #1e40af; text-decoration: none; }
.ft-brand-text a:hover { text-decoration: underline; }
.ft-brand-text .ft-medium { font-weight: 500; }
.ft-addr { display: flex; gap: 16px; align-items: flex-start; }
.ft-addr img { width: 33px; height: 33px; flex-shrink: 0; margin-top: 2px; }
.ft-addr-text { font-size: 14px; color: #262626; line-height: 1.5; }
.ft-addr-text a { color: #1e40af; font-weight: 500; text-decoration: none; }
.ft-addr-text a:hover { text-decoration: underline; }
.ft-cols {
  display: flex; width: 100%; max-width: none;
  flex-direction: row; justify-content: space-between; padding-top: 40px;
}
@media (max-width: 639px) { .ft-cols { flex-direction: column; gap: 40px; } }
@media (min-width: 640px) { .ft-cols { gap: 32px; } }
@media (min-width: 640px) and (max-width: 1023px) { .ft-cols { border-top: 1px solid rgba(0,0,0,0.1); } }
@media (min-width: 1024px) { .ft-cols { max-width: 562px; padding-top: 0; } }
.ft-col .ft-col-title {
  font-size: 16px; font-weight: 500; text-transform: uppercase;
  color: #1e40af; margin-bottom: 12px; line-height: normal;
}
.ft-col a {
  display: block; font-size: 16px; color: #262626;
  margin-bottom: 8px; transition: color 0.15s; line-height: 24px; text-decoration: none;
}
.ft-col a:hover { color: #1e40af; text-decoration: none; }
.ft-btm { background: #e2e8f0; padding: 20px 0; }
.ft-btm-in {
  max-width: 1440px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 20px;
}
@media (min-width: 1024px) { .ft-btm-in { flex-direction: row; gap: 40px; } }
.ft-btm-left {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
@media (min-width: 1024px) { .ft-btm-left { flex-direction: row; gap: 24px; } }
.ft-btm-left p { font-size: 14px; color: #000; margin: 0; white-space: nowrap; }
.ft-btm-links { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; }
.ft-btm-links li { padding-left: 12px; border-left: 1px solid rgba(17,24,39,0.6); }
.ft-btm-links li:first-child { padding-left: 0; border-left: none; }
.ft-btm-links a { font-size: 14px; color: #000; transition: color 0.15s; text-decoration: none; }
.ft-btm-links a:hover { color: #1e40af; }
.ft-socials { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.ft-socials a { display: block; transition: opacity 0.15s; }
.ft-socials a:hover { opacity: 0.7; }
.ft-socials img { width: 36px; height: 36px; display: block; }

/* ══════════ WHOIS INFO ══════════ */
.whois-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.whois-row { display: flex; justify-content: space-between; padding: 5px 2px; font-size: 12px; border-bottom: 1px solid #f0f0f0; gap: 12px; }
.whois-row:last-child { border-bottom: none; }
.whois-lbl { color: var(--text-light); font-weight: 500; white-space: nowrap; }
.whois-val { color: var(--text); font-weight: 700; text-align: right; }
.whois-val.g { color: var(--green); }
.whois-val.r { color: var(--red); }
.whois-val.n { color: var(--text-light); font-weight: 500; }

/* Parenthetical next to WHOIS fields when the scanned URL is a subdomain -
   tells the user the "25 years" age belongs to the PARENT domain, not the
   specific subdomain they scanned. Muted so it doesn't fight the main value. */
.parent-hint {
  font-weight: 500;
  color: var(--text-light);
  font-size: 11px;
  margin-left: 2px;
}

/* Amber note at the bottom of the WHOIS card when the subdomain sits on a
   free hosting platform (blogspot, vercel, netlify, etc.). Distinguishes
   "this data is for the platform" from "this data is for the scanned site" -
   crucial on phishing-prone free-host subdomains where WHOIS age is 20+ years
   but the subdomain itself might be hours old. */
.hosting-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 14px 12px;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 11.5px;
  color: #92400e;
  line-height: 1.5;
}
.hosting-note svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: #d97706;
  margin-top: 1px;
}
.hosting-note strong { font-weight: 700; color: #78350f; }
@media(max-width:640px) { .whois-grid { grid-template-columns: 1fr; } }

/* ══════════ FILE SCAN ══════════ */
.fs-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.fs-top-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.fs-top-lbl { font-size: 12px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.3px; }
.fs-summary { display: flex; flex-direction: column; gap: 8px; }
.fs-row { display: flex; align-items: center; gap: 10px; }
.fs-label { font-size: 11px; font-weight: 600; color: var(--text-light); width: 110px; flex-shrink: 0; }
.fs-bar-wrap { flex: 1; height: 18px; background: #f1f5f9; border-radius: 9px; overflow: hidden; }
.fs-bar { height: 100%; border-radius: 9px; transition: width 0.6s ease; }
.fs-bar.clean { background: #059669; }
.fs-bar.p-susp { background: #f59e0b; }
.fs-bar.susp { background: #ea580c; }
.fs-bar.mal { background: #dc2626; }
.fs-count { font-size: 11px; font-weight: 700; color: var(--text); min-width: 28px; text-align: right; }
.fs-legend { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.fs-legend-i { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-light); }
.fs-legend-i .fs-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* File scan malware CTA */
.fs-cta {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; /* lets the .fs-disclaimer (flex:1 1 100%) drop to a
                      new row beneath icon / text / button on wide screens.
                      Without this it would compete for column space and
                      sit beside the button instead of underneath the row. */
  margin-top: 14px; padding: 12px 16px; border-radius: 6px;
  background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
  border: 1px solid #fca5a5;
}
.fs-cta-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fee2e2; color: #dc2626;
}
.fs-cta-icon svg { width: 18px; height: 18px; }
.fs-cta-text { flex: 1; min-width: 0; }
.fs-cta-title { font-size: 13px; font-weight: 700; color: #991b1b; }
.fs-cta-desc { font-size: 11px; color: #b44a42; margin-top: 1px; }
.fs-cta-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 5px; border: none; cursor: pointer;
  background: #dc2626; color: #fff; font-family: 'Roboto', sans-serif;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(220,38,38,0.25);
  transition: background 0.15s, transform 0.1s;
}
.fs-cta-btn:hover { background: #b91c1c; transform: translateY(-1px); }
/* Medium risk */
.fs-cta.fs-cta-medium { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-color: #fdba74; }
.fs-cta.fs-cta-medium .fs-cta-icon { background: #fed7aa; color: #ea580c; }
.fs-cta.fs-cta-medium .fs-cta-title { color: #9a3412; }
.fs-cta.fs-cta-medium .fs-cta-desc { color: #c2410c; }
.fs-cta.fs-cta-medium .fs-cta-btn { background: #ea580c; box-shadow: 0 2px 8px rgba(234,88,12,0.25); }
.fs-cta.fs-cta-medium .fs-cta-btn:hover { background: #c2410c; }
/* Low risk */
.fs-cta.fs-cta-low { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #fcd34d; }
.fs-cta.fs-cta-low .fs-cta-icon { background: #fde68a; color: #d97706; }
.fs-cta.fs-cta-low .fs-cta-title { color: #92400e; }
.fs-cta.fs-cta-low .fs-cta-desc { color: #b45309; }
.fs-cta.fs-cta-low .fs-cta-btn { background: #d97706; box-shadow: 0 2px 8px rgba(217,119,6,0.25); }
.fs-cta.fs-cta-low .fs-cta-btn:hover { background: #b45309; }
@media(max-width:640px) {
  .fs-cta { flex-wrap: wrap; gap: 10px; }
  .fs-cta-btn { width: 100%; justify-content: center; }
}

/* Quttera CTA - FTC-style affiliate disclosure. flex:1 1 100% drops it
   to a new row inside the .fs-cta flex container so it sits beneath the
   button. No link in the copy itself (would pass authority to the
   third-party domain and create a leak path past the affiliate button).
   Variant tints below match the surrounding box palette. */
.fs-cta .fs-disclaimer {
  flex: 1 1 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 10.5px;
  line-height: 1.5;
}
.fs-cta-low    .fs-disclaimer { color: #92531c; border-top-color: rgba(146,83,28,0.18); }
.fs-cta-medium .fs-disclaimer { color: #9a3412; border-top-color: rgba(154,52,18,0.18); }
.fs-cta-high   .fs-disclaimer { color: #991b1b; border-top-color: rgba(153,27,27,0.18); }

/* File scan accordion */
.fa-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.fa-group { border: 1px solid var(--border-lt); border-radius: 6px; overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s; }
.fa-group:hover { border-color: #c6d4e8; }
.fa-group.open { border-color: #93c5fd; box-shadow: 0 2px 10px rgba(35,86,178,0.07); }
.fa-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 600; color: var(--text); transition: background 0.15s; }
.fa-hdr:hover { background: #f9fafb; }
.fa-hdr-icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform 0.3s ease; }
.fa-hdr-icon svg { width: 10px; height: 10px; }
.fa-hdr-icon.clean { background: #e8f5ee; color: #059669; }
.fa-hdr-icon.p-susp { background: #fef3c7; color: #f59e0b; }
.fa-hdr-icon.susp { background: #ffedd5; color: #ea580c; }
.fa-hdr-icon.mal { background: #fee2e2; color: #dc2626; }
.fa-group.open .fa-hdr-icon { transform: rotate(90deg); }
.fa-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.fa-dot.clean { background: #059669; }
.fa-dot.p-susp { background: #f59e0b; }
.fa-dot.susp { background: #ea580c; }
.fa-dot.mal { background: #dc2626; }
.fa-label { flex: 1; }
.fa-count { font-size: 11px; font-weight: 700; color: var(--text-light); background: #f1f5f9; padding: 1px 8px; border-radius: 10px; }
.fa-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.fa-group.open .fa-body { max-height: 4000px; }
.fa-list { border-top: 1px solid var(--border-lt); }
.fa-file { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 42px; font-size: 11px; color: var(--text-mid); border-bottom: 1px solid #f5f5f5; transition: background 0.1s; }
.fa-file:last-child { border-bottom: none; }
.fa-file:hover { background: #fafbfd; }
.fa-fname { flex: 1; font-family: monospace; font-size: 10.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-fsize { font-size: 10px; color: var(--text-light); min-width: 45px; text-align: right; }
/* Below 640px the right-side chip + size are hidden because the row
   doesn't have room for them. To avoid losing the status signal
   entirely, draw a thin colour bar on the left of each row that
   mirrors the chip's status. CSS `:has()` reads the chip's status
   class on each row and colours the bar accordingly. Browsers
   without `:has()` support (very old) just see no bar - the URL
   text still renders. */
@media (max-width: 640px) {
  .fa-fsize { display: none; }
  .fa-ftag { display: none; }

  .fa-file { position: relative; }
  .fa-file::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: transparent;
  }
  .fa-file:has(.fa-ftag.clean)::before { background: #059669; }
  .fa-file:has(.fa-ftag.p-susp)::before { background: #f59e0b; }
  .fa-file:has(.fa-ftag.susp)::before { background: #ea580c; }
  .fa-file:has(.fa-ftag.mal)::before { background: #dc2626; }
}
.fa-ftag { font-size: 8.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.fa-ftag.clean { background: #e8f5ee; color: #157040; }
.fa-ftag.p-susp { background: #fef3c7; color: #92400e; }
.fa-ftag.susp { background: #ffedd5; color: #9a3412; }
.fa-ftag.mal { background: #fee2e2; color: #991b1b; }
.fa-more { padding: 6px 14px 8px 42px; font-size: 10px; color: var(--blue); font-weight: 600; cursor: pointer; }
.fa-more:hover { text-decoration: underline; }
.fa-note { padding: 4px 14px 8px 42px; font-size: 10px; color: var(--text-light); font-style: italic; }

/* ══════════ WEBSITE INSIGHTS ══════════ */
.wi-tabs { display: flex; border-bottom: 1px solid var(--border-lt); background: #fafbfc; }
.wi-tab { flex: 1; padding: 7px 8px; font-size: 10.5px; font-weight: 600; color: var(--text-light); text-align: center; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; text-transform: uppercase; letter-spacing: 0.3px; }
.wi-tab:hover { color: var(--text-mid); }
.wi-tab.active { color: var(--blue); border-bottom-color: var(--blue); background: #fff; }
/* Pre-Alpine fallback: the first tab (Popularity) paints as active until
   Alpine binds .active. Once any later sibling has .active (e.g. user
   switched to Cookies), the :has() guard hides this fallback so the
   active class wins. Requires :has() - supported in all evergreen
   browsers since 2023. */
.wi-tab:first-of-type:not(:has(~ .wi-tab.active)) { color: var(--blue); border-bottom-color: var(--blue); background: #fff; }
.wi-panel { display: none; padding: 8px 14px; height: 208px; overflow-y: auto; }
.wi-panel.active { display: flex; flex-direction: column; }
/* Same pre-Alpine fallback for the panel: first .wi-panel (Popularity)
   shows until a later sibling gets .active. */
.wi-panel:first-of-type:not(:has(~ .wi-panel.active)) { display: flex; flex-direction: column; }

/* Popularity tab */
.wi-pop-row { display: flex; gap: 10px; flex: 1; min-height: 0; }
.wi-pop-left { flex-shrink: 0; width: 140px; display: flex; flex-direction: column; justify-content: center; padding: 4px 12px 4px 0; border-right: 1px solid var(--border-lt); }
.wi-rank-num { font-size: 22px; font-weight: 900; color: var(--blue); line-height: 1; letter-spacing: -0.5px; }
.wi-rank-label { font-size: 9px; color: var(--text-light); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.wi-rank-badge { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: 9px; font-weight: 700; margin-top: 8px; width: fit-content; }
.wi-rank-badge.top1k { background: #dcfce7; color: #15803d; }
.wi-rank-badge.top10k { background: #dcfce7; color: #15803d; }
.wi-rank-badge.top100k { background: #e0eaf6; color: var(--blue); }
.wi-rank-badge.top1m { background: #fef3d7; color: #92400e; }
.wi-rank-badge.unranked { background: #fce8e6; color: #c0392b; }
.wi-pop-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-lt); }
.wi-pop-meta-row { display: flex; justify-content: space-between; font-size: 10px; padding: 2px 0; }
.wi-pop-meta-lbl { color: var(--text-light); }
.wi-pop-meta-val { font-weight: 600; color: var(--text); text-align: end; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.wi-pop-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wi-chart-title { font-size: 8px; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 2px; } /* opacity 0.7 removed - dragged the effective colour back below WCAG */
.wi-chart-wrap { flex: 1; position: relative; min-height: 0; background: linear-gradient(180deg, #f8fafd 0%, #fff 100%); border: 1px solid #e4eaf2; border-radius: 6px; padding: 5px 8px 4px; overflow: hidden; }
.wi-chart-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Relative wrapper matching the SVG's render box so the absolutely-
   positioned end-dot's coords align with the SVG content (and aren't
   shifted by .wi-chart-wrap's padding). */
.wi-chart-area { position: relative; width: 100%; height: 100%; }
/* End-dot for the rank chart. Rendered as an HTML element rather than
   an SVG circle/ellipse because the chart's outer <svg> uses
   preserveAspectRatio="none" so the line distorts to fill the
   container - that same distortion would squash an SVG-native circle
   into an ellipse on every viewport whose container aspect ratio
   wasn't 200:80. As an HTML element with width=height the dot stays
   round at any container size. translate(-50%, -50%) centres it on
   the (left%, top%) coordinates emitted by getTrancoEndDotPosition. */
.wi-chart-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3b7cf5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wi-chart-labels { display: flex; justify-content: space-between; font-size: 7px; color: var(--text-light); margin-top: 1px; letter-spacing: 0.2px; } /* opacity 0.6 removed - dragged the effective colour back below WCAG */

/* Cookies tab */
.wi-ck-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.wi-ck-total { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1; }
.wi-ck-total-lbl { font-size: 10px; color: var(--text-light); }
.wi-ck-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: #f0f0f0; }
.wi-ck-bar-seg { height: 100%; transition: width 0.4s ease; min-width: 0; }
.wi-ck-bar-seg.essential { background: #7dbb9a; }
.wi-ck-bar-seg.analytics { background: #89aed6; }
.wi-ck-bar-seg.advertising { background: #d4ad6e; }
.wi-ck-bar-seg.social { background: #ab93c9; }
.wi-ck-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; }
.wi-ck-legend-row { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.wi-ck-legend-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.wi-ck-legend-name { color: var(--text-mid); flex: 1; }
.wi-ck-legend-val { font-weight: 700; color: var(--text); min-width: 14px; text-align: right; }
.wi-ck-party { display: flex; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-lt); }
.wi-ck-party-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-light); }
.wi-ck-party-val { font-weight: 800; color: var(--text); font-size: 11px; }
.wi-no-data { font-size: 20px; color: #c0c0c0; text-align: center; font-weight: 500; font-family: Roboto, sans-serif; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; }

@media (max-width: 640px) { .wi-pop-left { width: 120px; } }

/* Dispute verified toast */
.dp-verified-toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 999; max-width: 600px; width: 90%;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 8px;
  background: #166534; color: #fff; font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.dp-verified-icon { font-size: 18px; flex-shrink: 0; background: rgba(255,255,255,0.2); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ══════════ DISPUTE FORM ══════════ */
.dp-intro { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding: 14px 16px; background: #f8fafe; border: 1px solid #d6e4f7; border-radius: 6px; }
.dp-intro-icon { flex-shrink: 0; width: 36px; height: 36px; background: #e0eaf6; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dp-intro-icon svg { width: 18px; height: 18px; color: var(--blue); }
.dp-intro-text { flex: 1; }
.dp-intro-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.dp-intro-desc { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.dp-chevron { flex-shrink: 0; align-self: flex-end; transition: transform 0.25s ease; opacity: 0.6; }
.dp-chevron.open { transform: rotate(180deg); opacity: 1; }
.dp-form { display: flex; flex-direction: column; gap: 14px; }
.dp-field { display: flex; flex-direction: column; gap: 4px; }
.dp-label { font-size: 11px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.3px; }
.dp-label .dp-required { color: var(--red); margin-left: 2px; }
.dp-input, .dp-select, .dp-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 5px; font-family: 'Roboto', sans-serif; font-size: 13px; color: var(--text); background: #fff; transition: border-color 0.15s; outline: none; }
.dp-input:focus, .dp-select:focus, .dp-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(35,86,178,0.1); }
.dp-input::placeholder, .dp-textarea::placeholder { color: #aaa; }
.dp-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.dp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dp-verify-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; background: var(--yellow-bg); border: 1px solid #f0d68a; border-radius: 5px; font-size: 11.5px; color: #78590a; line-height: 1.5; }
.dp-verify-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--yellow); margin-top: 1px; }
.dp-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.dp-submit-btn { padding: 10px 28px; background: var(--blue); color: #fff; border: none; border-radius: 5px; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.dp-submit-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
.dp-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.dp-disclaimer { font-size: 10.5px; color: var(--text-light); line-height: 1.4; flex: 1; }
.dp-success { text-align: center; padding: 30px 20px; }
.dp-success-icon { width: 52px; height: 52px; background: var(--green-bg); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.dp-success-icon svg { width: 26px; height: 26px; color: var(--green); }
.dp-success-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dp-success-desc { font-size: 12px; color: var(--text-light); line-height: 1.5; }
@media (max-width: 640px) { .dp-row { grid-template-columns: 1fr; } .dp-submit-row { flex-direction: column-reverse; align-items: stretch; text-align: center; } }

/* Utility classes (.hidden, .flex, .mt-4, etc.) used to live here.
   Removed 2026-04 when the pcrisk.com Tailwind build (joomspirit_70/css/style.min.css)
   started loading on index.html - the names collided and our `.hidden`
   (with !important) was winning over `sm:flex`, `xl:flex`, etc. in the
   wrapper header, which kept the search form stuck hidden at every
   breakpoint. Tailwind provides identical utilities now, so the cleanup
   is just "delete and let the Tailwind build handle it". The one
   scanner usage (`mt-4` in similar-sites.html) resolves to Tailwind's
   `margin-top: 1rem` which matches our old 16px. */

/* ── Look-Alike Domain Check (typosquat) ─────────────────────────────
   Originally lived inline at the bottom of public/sections/report/
   typosquat-check.html. Moved here when that section was migrated to
   SSR (views/sections/typosquat-check.ejs) so the styles still apply.
   The .typo-status-tag svg { width:10px; height:10px } rule is the
   one that actually keeps the warning triangle from rendering huge.
*/
.typo-narrative { font-size: 14px; line-height: 1.6; color: #374151; }
.typo-narrative strong { color: #111827; font-weight: 700; }
.typo-status-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  border-radius: 10px; margin-right: 8px;
  vertical-align: 1px; white-space: nowrap;
}
.typo-status-tag svg { width: 10px; height: 10px; }
.typo-status-tag.verdict-suspect { background:#fce8e6; color:#c0392b; border:1px solid #f5c6c0; }
.typo-status-tag.verdict-likely  { background:#fde8e8; color:#9b1c1c; border:1px solid #f0aaaa; }
.typo-status-tag.verdict-clean   { background:#e8f5ee; color:#1a9550; border:1px solid #c6e9d4; }
.typo-match-dom {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #f0f4fa; padding: 2px 7px; border-radius: 4px;
  border: 1px solid #d6e4f7; color: #2356b2;
  font-size: 13px; font-weight: 600; letter-spacing: -0.2px;
  white-space: nowrap;
}
.typo-signals {
  padding-top: 12px; margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.typo-signals-label {
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-right: 6px;
}
.typo-signals-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 500;
  color: #374151; background: #f3f4f6; border-radius: 4px;
}

/* ── Why this score? (admin-gated trust-score breakdown) ─────────────
   Same provenance as the typosquat block above - originally inline at
   the bottom of public/sections/report/score-breakdown.html, moved here
   when that section was migrated to SSR. */
.wts-dev-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #2563eb;
  background: #dbeafe; padding: 2px 6px; border-radius: 4px;
  margin-left: 6px; vertical-align: middle;
}
.wts-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #64748b;
  margin: 18px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
}
.wts-h:first-of-type { margin-top: 6px; }
.wts-verdict { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: #1e293b; }
.wts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wts-row {
  display: flex; gap: 10px; padding: 8px 12px;
  border-radius: 6px; border: 1px solid #e5e7eb;
  background: #fafbfc; align-items: flex-start;
}
.wts-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #94a3b8; }
.wts-text { flex: 1; min-width: 0; }
.wts-title {
  font-size: 12.5px; font-weight: 700; color: #0f172a;
  margin-bottom: 2px; letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wts-badge {
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 10px;
}
.wts-badge-plus { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.wts-badge-cap  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.wts-detail { font-size: 12px; line-height: 1.55; color: #475569; }
.wts-math {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: #64748b;
  background: #f1f5f9; padding: 3px 7px; border-radius: 4px;
  display: inline-block;
}
.wts-row.wts-positive { border-color: #bbf7d0; background: #f0fdf4; }
.wts-row.wts-positive .wts-dot { background: #16a34a; }
.wts-row.wts-neutral  { border-color: #e5e7eb; background: #fafbfc; }
.wts-row.wts-neutral  .wts-dot { background: #64748b; }
.wts-row.wts-caution  { border-color: #fde68a; background: #fffbeb; }
.wts-row.wts-caution  .wts-dot { background: #d97706; }
.wts-row.wts-concern  { border-color: #fecaca; background: #fef2f2; }
.wts-row.wts-concern  .wts-dot { background: #dc2626; }
.wts-calc {
  list-style: none; padding: 0; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.wts-calc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 4px; color: #334155;
}
.wts-calc-row:nth-child(odd) { background: #f8fafc; }
.wts-calc-label { flex: 1; min-width: 0; }
.wts-calc-arrow { color: #94a3b8; }
.wts-calc-value {
  font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums;
  min-width: 32px; text-align: right;
}
.wts-calc-note { color: #94a3b8; font-size: 11px; }
.wts-calc-final { background: #eff6ff !important; border-top: 1px solid #bfdbfe; margin-top: 4px; }
.wts-calc-final-num { font-size: 14px; color: #1e40af; }
.wts-foot {
  margin: 14px 0 0; font-size: 11.5px; line-height: 1.5;
  color: #64748b; padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
}
.wts-foot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f1f5f9; padding: 1px 5px; border-radius: 3px; font-size: 11px;
}

/* ══════════ EU COOKIE CONSENT BANNER ══════════
 * Copied verbatim from www.pcrisk.com so the scanner subdomain shows
 * the same visual banner the parent site does. SSR layout emits the
 * markup only when needsCookieConsent is true (see views/layout.ejs +
 * src/utils/cookie-consent.ts).
 */
.cc_banner-wrapper { z-index: 9001; position: relative; }
.cc_container {
  border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  padding: 10px 15px 70px; left: initial; right: 25px; bottom: 20px;
  width: 300px; overflow: hidden; background: #fff; color: #545454;
  font-size: 1em; box-sizing: border-box; border: 1px solid #ccc;
  position: fixed;
}
.cc_container a, .cc_container a:hover, .cc_container a:visited {
  text-decoration: none; color: #0278ab;
}
.cc_container .cc_btn, .cc_container .cc_btn:visited {
  color: #000; background-color: #dbdbdb; border-radius: 5px;
  padding: 8px 16px; position: absolute; text-align: center;
  bottom: 25px; font-size: 1em; right: 15px; left: 15px; cursor: pointer;
}
.cc_container .cc_btn:active, .cc_container .cc_btn:hover {
  background-color: #d7bf00; color: #000;
}
.cc_container .cc_message { font-size: 1em; margin: 0; padding: 0; line-height: 1.5em; }
@media screen and (max-width: 500px) {
  .cc_container { left: 0; right: 0; bottom: 0; padding: 10px 15px 50px; width: auto; }
  .cc_container .cc_btn { font-size: 0.9em; bottom: 10px; }
  .cc_container .cc_message { font-size: 0.9em; }
}