/* General Styling*/
* {
  padding: 0;
  margin: 0;
  font-family: var(--pq-font-sans);
}

/* =========================================================
   Premium Landing (2026)
   - Scoped to .pq-premium to avoid fighting legacy rules
   ========================================================= */

.pq-premium{
  background: var(--bg);
  color: var(--ink);
}

.pq-premium h1,
.pq-premium h2,
.pq-premium h3,
.pq-premium p{
  color: inherit;
}

/* Scroll reveal */
.pq-premium [data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.pq-premium .is-visible[data-reveal],
.pq-premium [data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .pq-premium [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Buttons */
.pq-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--pq-font-sans);
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.pq-btn:focus-visible{ outline: 2px solid var(--brandB); outline-offset: 3px; }
.pq-btn:active{ transform: translateY(1px); }

.pq-btn--primary{
  color: #fff;
  background: linear-gradient(135deg, rgba(82, 194, 171, 0.96) 0%, rgba(67, 178, 166, 0.94) 45%, rgba(17, 129, 106, 0.92) 100%);
  box-shadow: 0 14px 28px rgba(17, 129, 106, 0.18);
}
.pq-btn--primary:hover{
  box-shadow: 0 16px 32px rgba(17, 129, 106, 0.22), 0 0 0 10px rgba(82, 194, 171, 0.08);
  transform: translateY(-1px);
}

.pq-btn--secondary{
  color: var(--ink);
  background: rgba(255,255,255,0.7);
  border-color: var(--stroke);
  box-shadow: var(--shadow2);
}
html[data-theme="dark"] .pq-btn--secondary,
body.dark .pq-btn--secondary{
  background: rgba(255,255,255,0.08);
  color: rgba(230,237,247,0.92);
}
.pq-btn--secondary:hover{ transform: translateY(-1px); }

/* Section headings */
.pq-sectionHead{
  display: grid;
  gap: 8px;
  text-align: center;
  margin: 0 auto 18px;
  width: min(980px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
}
.pq-sectionHead h2{
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.5px;
}
.pq-sectionHead p{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 62ch;
}

.pq-sectionCta{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* HERO */
.pq-hero{
  position: relative;
  overflow: hidden;
}
.pq-hero__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(82, 194, 171, 0.28), transparent 60%),
    radial-gradient(820px 520px at 82% 32%, rgba(17, 129, 106, 0.26), transparent 58%),
    linear-gradient(135deg, rgba(82, 194, 171, 0.18) 0%, rgba(17, 129, 106, 0.08) 45%, rgba(2, 54, 104, 0.06) 100%);
  filter: saturate(1.06);
  animation: pqGradientDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes pqGradientDrift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-10px,0) scale(1.02); }
}

.pq-hero .intro-container_body{
  position: relative;
  z-index: 1;
}

.pq-hero__eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pq-hero__tagline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.66);
  box-shadow: var(--shadow2);
}

html[data-theme="dark"] .pq-hero__tagline,
body.dark .pq-hero__tagline{
  background: rgba(255,255,255,0.08);
}

.pq-hero__headline{
  margin: 8px auto 0;
  max-width: 18ch;
  text-wrap: balance;
}

.pq-hero__subtext{
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}

.pq-hero__secondary{
  margin-top: 10px;
}

/* Floating UI elements on hero image */
.pq-hero__float{
  position: absolute;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow2);
  border-radius: 18px;
  padding: 10px 12px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: rgba(11,18,32,0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: pqFloat 6.8s ease-in-out infinite;
}

html[data-theme="dark"] .pq-hero__float,
body.dark .pq-hero__float{
  background: rgba(255,255,255,0.10);
  color: rgba(230,237,247,0.90);
}

@keyframes pqFloat{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-10px,0); }
}

.pq-hero__float--match{
  top: 14px;
  left: 14px;
  min-width: 112px;
  justify-content: space-between;
}
.pq-hero__floatLabel{ font-size: 12px; opacity: 0.82; font-weight: 800; }
.pq-hero__floatValue{ font-size: 18px; font-weight: 900; letter-spacing: -0.3px; color: var(--brandA); }

.pq-hero__float--chat{
  bottom: 16px;
  left: 16px;
  right: 16px;
  border-radius: 20px;
  animation-duration: 7.8s;
}
.pq-hero__float--chat span{ font-size: 13px; line-height: 1.2; }

.pq-hero__float--verified{
  top: 14px;
  right: 14px;
  border-radius: 999px;
  padding: 10px 12px;
  animation-duration: 6.2s;
}
.pq-hero__float--verified i{ color: var(--brandB); }

/* Floating hero image (subtle) */
.pq-hero .figure-slider img{
  animation: pqHeroImageFloat 9.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes pqHeroImageFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-8px,0) scale(1.01); }
}

@media (prefers-reduced-motion: reduce){
  .pq-hero__bg{ animation: none; }
  .pq-hero__float{ animation: none; }
  .pq-hero .figure-slider img{ animation: none; }
}

/* Mobile nav: bottom-sheet style */
@media (max-width: 700px){
  .pq-premium .piq-mobile-nav-dropdown{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(12px + var(--pq-safe-bottom)) !important;
    width: auto !important;
    border-radius: 20px !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.80) !important;
    animation: pqSheetIn 220ms cubic-bezier(.2,.7,.2,1) both;
  }
  html[data-theme="dark"] .pq-premium .piq-mobile-nav-dropdown,
  body.dark .pq-premium .piq-mobile-nav-dropdown{
    background: rgba(35,39,47,0.86) !important;
  }

  @keyframes pqSheetIn{
    from{ transform: translate3d(0,12px,0); opacity: 0; }
    to{ transform: translate3d(0,0,0); opacity: 1; }
  }
}

/* Features: grid desktop, swipe carousel mobile */
.pq-featureGrid{
  width: min(1100px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pq-featureCard{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.74);
  box-shadow: var(--shadow2);
  padding: 18px 16px;
  transition: transform 180ms ease, box-shadow 220ms ease, background 220ms ease;
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] .pq-featureCard,
body.dark .pq-featureCard{
  background: rgba(255,255,255,0.08);
}

.pq-featureCard::before{
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(300px 180px at 20% 20%, rgba(82,194,171,0.22), transparent 60%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.pq-featureCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16,24,40,0.14);
}
.pq-featureCard:hover::before{ opacity: 1; }

.pq-featureCard__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(82,194,171,0.20), rgba(17,129,106,0.10));
  border: 1px solid var(--stroke);
  margin-bottom: 10px;
}
.pq-featureCard__icon i{ color: var(--brandA); }

.pq-featureCard__title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin: 0 0 6px;
}
.pq-featureCard__desc{ margin: 0; color: var(--muted); line-height: 1.5; }

@media (max-width: 64em){
  .pq-featureGrid{
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    overflow-x: auto;
    padding: 4px 18px 10px;
    width: 100%;
    scroll-snap-type: x mandatory;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .pq-featureCard{ scroll-snap-align: center; }
  .pq-featureGrid::-webkit-scrollbar{ height: 8px; }
  .pq-featureGrid::-webkit-scrollbar-thumb{ background: rgba(11,18,32,0.18); border-radius: 999px; }
}

/* How it works: connector feel */
.pq-steps__grid{
  position: relative;
}

/* Premium override: keep all step cards identical width */
.pq-premium .pq-steps__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pq-card-gap);
  align-items: stretch;
  justify-items: stretch;
}

.pq-premium .pq-step.workings-container_body__grid___content{
  width: auto;
  height: auto;
  min-height: 220px;
}

@media (max-width: 64em){
  .pq-premium .pq-steps__grid{
    grid-template-columns: 1fr;
  }
  .pq-premium .pq-step.workings-container_body__grid___content{
    width: 100%;
  }
}

@media (min-width: 701px){
  .pq-steps__grid::before{
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(82,194,171,0.55),
      rgba(17,129,106,0.55),
      transparent
    );
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
  }
  html[data-theme="dark"] .pq-steps__grid::before,
  body.dark .pq-steps__grid::before{
    opacity: 0.42;
  }
}

.pq-step{
  position: relative;
  transition: transform 160ms ease, box-shadow 220ms ease;
  z-index: 1;
}

.pq-step:hover{ transform: translateY(-2px); }

/* Why Piquora cards */
.pq-whyGrid{
  width: min(1100px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pq-card-gap);
}

.pq-whyCard{
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.78);
  box-shadow: var(--shadow2);
  padding: 16px;
  transition: transform 180ms ease, box-shadow 220ms ease;
}

html[data-theme="dark"] .pq-whyCard,
body.dark .pq-whyCard{ background: rgba(255,255,255,0.08); }

.pq-whyCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(16,24,40,0.14), 0 0 0 10px rgba(82,194,171,0.06);
}

.pq-whyCard__top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.pq-whyCard__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(17,129,106,0.14), rgba(82,194,171,0.10));
}
.pq-whyCard__icon i{ color: var(--brandA); }
.pq-whyCard__title{ margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -0.2px; }
.pq-whyCard__desc{ margin: 0; color: var(--muted); line-height: 1.5; }

@media (max-width: 64em){
  .pq-whyGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px){
  .pq-whyGrid{ grid-template-columns: 1fr; width: min(980px, calc(100% - 36px)); }
}

/* Mid CTA */
.pq-midcta{
  width: 100%;
  padding: 26px 0;
}
.pq-midcta__inner{
  width: min(1100px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(650px 240px at 20% 10%, rgba(82,194,171,0.22), transparent 58%),
    radial-gradient(680px 260px at 80% 20%, rgba(17,129,106,0.20), transparent 62%),
    rgba(255,255,255,0.72);
  box-shadow: var(--shadow);
  padding: 22px 18px;
  text-align: center;
  display: grid;
  gap: 14px;
}
html[data-theme="dark"] .pq-midcta__inner,
body.dark .pq-midcta__inner{ background: rgba(255,255,255,0.08); }

.pq-midcta__title{
  margin: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.4px;
}

/* Testimonials polish */
.pq-testimonialCard{
  text-align: left;
}
.pq-testimonialCard__top{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.pq-testimonialCard__avatar{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--stroke);
}
.pq-testimonialCard__nameRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pq-testimonialCard__location{
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
  display: block;
}
.pq-verifiedBadge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(82,194,171,0.14);
  color: rgba(11,18,32,0.86);
  font-weight: 900;
  font-size: 12px;
}
html[data-theme="dark"] .pq-verifiedBadge,
body.dark .pq-verifiedBadge{ color: rgba(230,237,247,0.92); background: rgba(82,194,171,0.16); }

.pq-stars{
  display: inline-flex;
  gap: 4px;
  margin-top: 6px;
}
.pq-stars .fa-star{ font-size: 12px; }
.pq-stars .is-active{ color: var(--brandB); }
.pq-stars .is-inactive{ color: rgba(102,112,133,0.38); }

.pq-testimonialCard__quote{
  margin: 0;
  color: rgba(11,18,32,0.78);
  line-height: 1.55;
}
html[data-theme="dark"] .pq-testimonialCard__quote,
body.dark .pq-testimonialCard__quote{ color: rgba(230,237,247,0.86); }

/* Email capture: floating label */
.pq-emailCapture{
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
}

.pq-emailCapture__form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.pq-field{
  position: relative;
  border-radius: 18px;
}

.pq-field__icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(102,112,133,0.8);
}

.pq-field__input{
  width: 100%;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.80);
  box-shadow: var(--shadow2);
  padding: 18px 14px 0 44px;
  font-weight: 700;
  outline: none;
}

html[data-theme="dark"] .pq-field__input,
body.dark .pq-field__input{ background: rgba(255,255,255,0.08); color: rgba(230,237,247,0.92); }

.pq-field__input:focus{ border-color: rgba(82,194,171,0.75); box-shadow: 0 0 0 6px rgba(82,194,171,0.12); }

.pq-field__label{
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(102,112,133,0.86);
  font-weight: 800;
  transition: transform 160ms ease, opacity 160ms ease, top 160ms ease, font-size 160ms ease;
  pointer-events: none;
}

.pq-field__input:focus + .pq-field__label,
.pq-field__input:not(:placeholder-shown) + .pq-field__label{
  top: 12px;
  transform: translateY(0);
  font-size: 12px;
  opacity: 0.92;
}

/* Inline alert (newsletter subscribe feedback) */
.pq-inlineAlert{
  width: fit-content;
  max-width: min(540px, 92vw);
  margin: 0 auto 14px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  border-left-width: 4px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 650;
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,0.80);
  color: var(--ink);
  text-align: left;
}

.pq-inlineAlert--success{
  border-left-color: var(--brandB);
  background: color-mix(in srgb, var(--brandB) 14%, rgba(255,255,255,0.86));
  border-color: color-mix(in srgb, var(--brandB) 55%, var(--stroke));
  color: var(--ink);
}

.pq-inlineAlert--info{
  border-left-color: var(--brandA);
  background: rgba(255,255,255,0.80);
  border-color: var(--stroke);
  color: var(--ink);
}

.pq-inlineAlert--error{
  border-left-color: var(--footer-color);
  background: color-mix(in srgb, var(--footer-color) 10%, rgba(255,255,255,0.86));
  border-color: color-mix(in srgb, var(--footer-color) 45%, var(--stroke));
  color: var(--ink);
}

html[data-theme="dark"] .pq-inlineAlert,
body.dark .pq-inlineAlert{
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--ink);
  border-color: rgba(230,237,247,0.16);
}

html[data-theme="dark"] .pq-inlineAlert--success,
body.dark .pq-inlineAlert--success{
  background: color-mix(in srgb, var(--brandB) 16%, var(--card));
  border-color: color-mix(in srgb, var(--brandB) 55%, rgba(230,237,247,0.16));
}

html[data-theme="dark"] .pq-inlineAlert--info,
body.dark .pq-inlineAlert--info{
  background: color-mix(in srgb, var(--brandA) 10%, var(--card));
}

html[data-theme="dark"] .pq-inlineAlert--error,
body.dark .pq-inlineAlert--error{
  background: color-mix(in srgb, var(--footer-color) 16%, var(--card));
  border-color: color-mix(in srgb, var(--footer-color) 55%, rgba(230,237,247,0.16));
}

@media (max-width: 700px){
  .pq-emailCapture__form{ grid-template-columns: 1fr; }
  .pq-emailCapture__btn{ width: 100%; }
}

/* Sticky mobile CTA */
.pq-stickyCta{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + var(--pq-safe-bottom));
  z-index: 10020;
  height: 52px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-family: var(--pq-font-sans);
  font-weight: 900;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, rgba(82, 194, 171, 0.96) 0%, rgba(67, 178, 166, 0.94) 45%, rgba(17, 129, 106, 0.92) 100%);
  box-shadow: 0 18px 44px rgba(17,129,106,0.24);
  border: 1px solid rgba(255,255,255,0.22);
}

@media (max-width: 700px){
  .pq-stickyCta{ display: inline-flex; }
  /* keep footer readable above sticky CTA */
  .pq-footer{ padding-bottom: 92px; }
}

@media (prefers-reduced-motion: reduce){
  .pq-btn, .pq-featureCard, .pq-whyCard{ transition: none; }
}

body {
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  overflow-x: hidden;
  outline: none;
}

/* ========== SEASONAL / HOLIDAY OVERLAY (canvas) ========== */
.pq-seasonal-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  /* Keep visible but not above modals/menus */
  z-index: 6;
  opacity: 0.22;
  /* Fade out near the top conversion zone for a cleaner premium feel */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.20) 14%,
    rgba(0,0,0,0.55) 28%,
    rgba(0,0,0,1) 52%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.20) 14%,
    rgba(0,0,0,0.55) 28%,
    rgba(0,0,0,1) 52%,
    rgba(0,0,0,1) 100%
  );
}

@media (max-width: 57em){
  .pq-seasonal-canvas{ opacity: 0.16; }
}

/* Phone: keep app content above seasonal canvas */
@media (max-width: 700px){
  .find-soulmate-pill {
    display: inline-block;
    font-size: 1em;
    padding: 10px 18px;
    min-width: 120px;
    max-width: 200px;
    border-radius: 999px;
    background: linear-gradient(90deg, #118169, #52C2AB);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(17,129,105,0.08);
    margin-left: auto;
    margin-right: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

:root {
  --pq-font-sans: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-color: white;
  --header-color: #11816A;
  --footer-color: #023668;
  --sub-script: grey;
  --footer-color-2: #2c2c2c;

  /* Safe-area insets (iOS notch, etc.) */
  --pq-safe-top: env(safe-area-inset-top, 0px);
  --pq-safe-right: env(safe-area-inset-right, 0px);
  --pq-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pq-safe-left: env(safe-area-inset-left, 0px);

  /* Theme tokens (light) */
  --bg: #ffffff;
  --card: rgba(255,255,255,0.86);
  --ink: #0b1220;
  --muted: #667085;
  --brandA: var(--header-color);
  --brandB: #52C2AB;
  --navy: var(--footer-color);
  --stroke: rgba(11,18,32,0.12);
  --shadow: 0 14px 34px rgba(2,54,104,0.14);
  --shadow2: 0 10px 28px rgba(16,24,40,0.10);
  --radius: 22px;

  /* UI variables (auto-adapt with dark overrides) */
  --pq-nav-bg: var(--header-color);
  --pq-nav-link-bg: rgba(255,255,255,0.10);
  --pq-nav-link-bg-hover: rgba(255,255,255,0.18);
  --pq-nav-link-color: var(--font-color);
  --pq-nav-signin-bg: rgba(255,255,255,0.92);
  --pq-nav-signin-color: var(--brandA);
  --pq-nav-cta-bg: var(--header-color);
  --pq-badge-bg: var(--card);
  --pq-badge-color: rgba(11,18,32,0.78);
  --pq-mobile-menu-bg: var(--header-color);
  --pq-mobile-link-bg: rgba(255,255,255,0.10);
  --pq-mobile-link-color: var(--font-color);
  --pq-shadow-color: rgba(0,0,0,0.18);
}

/* Legacy iOS (constant()) safe-area support */
@supports (padding-top: constant(safe-area-inset-top)){
  :root{
    --pq-safe-top: constant(safe-area-inset-top);
    --pq-safe-right: constant(safe-area-inset-right);
    --pq-safe-bottom: constant(safe-area-inset-bottom);
    --pq-safe-left: constant(safe-area-inset-left);
  }
}

/* Theme toggle: modern icon-only control */
#theme-toggle-btn{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  appearance: none;
  -webkit-appearance: none;
  color: var(--pq-nav-link-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#theme-toggle-btn:hover{
  background: var(--pq-nav-link-bg-hover);
}
#theme-toggle-btn .pq-theme-icon{
  line-height: 1;
  font-size: 1.05em;
}
#theme-toggle-btn .pq-theme-text{
  line-height: 1;
}
#theme-toggle-btn:focus-visible{
  outline: 2px solid var(--brandA);
  outline-offset: 3px;
}

/* About route: force same theme-toggle styling (avoid About-scoped overrides) */
.pq-about #theme-toggle-btn{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  appearance: none;
  -webkit-appearance: none;
  color: var(--pq-nav-link-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pq-about #theme-toggle-btn:hover{
  background: var(--pq-nav-link-bg-hover);
}
.pq-about #theme-toggle-btn .pq-theme-icon{
  line-height: 1;
  font-size: 1.05em;
}
.pq-about #theme-toggle-btn:focus-visible{
  outline: 2px solid var(--brandA);
  outline-offset: 3px;
}

/* Mobile + tablet: keep icon-only */
@media (max-width: 1024px){
  #theme-toggle-btn .pq-theme-text{ display: none; }
}

@media (max-width: 700px){
  #theme-toggle-btn{
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

@media (max-width: 700px){
  .pq-about #theme-toggle-btn{
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

.pq-headerTools{
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 992px){
  .pq-headerTools{
    margin-left: auto;
    padding-right: calc(12px + var(--pq-safe-right));
  }
  .pq-headerTools .eclipse-menu{
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    margin: 0 !important;
  }
}

html[data-theme="dark"], body.dark, html.force-dark {
  /* UI variables for dark */
  --pq-nav-bg: rgba(17,129,105,0.92);
  --pq-nav-link-bg: rgba(255,255,255,0.08);
  --pq-nav-link-bg-hover: rgba(255,255,255,0.18);
  --pq-nav-link-color: var(--font-color);
  --pq-nav-signin-bg: #23272f;
  --pq-nav-signin-color: var(--brandA);
  --pq-nav-cta-bg: linear-gradient(90deg, var(--brandB), var(--brandA));
  --pq-badge-bg: rgba(255,255,255,0.08);
  --pq-badge-color: rgba(230,237,247,0.86);
  --pq-mobile-menu-bg: linear-gradient(120deg, var(--brandA), var(--brandB) 80%, var(--navy) 100%);
  --pq-mobile-link-bg: rgba(255,255,255,0.10);
  --pq-mobile-link-color: var(--font-color);
  --pq-shadow-color: rgba(0,0,0,0.30);
}

/* Newsletter toast (no hardcoded colors in JS) */
.piq-toast{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 16px;
  border-radius: 999px;
  font-family: var(--pq-font-sans);
  font-weight: 600;
  z-index: 999999;
  box-shadow: var(--shadow);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--font-color);
  opacity: 1;
  transition: opacity 200ms ease;
}
.piq-toast[data-state="ok"]{ background: var(--header-color); }
.piq-toast[data-state="err"]{ background: var(--footer-color); }
/* Preloader styling*/

.piq-hero-line2{
  display: block;
  font-size: 0.78em;
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-top: 6px;
  opacity: 0.96;
}

.piq-hero-line1{
  display: block;
  /* width: 100%; */
  text-align: center;
}

@media (max-width: 700px){
  .piq-hero-line2{
    font-size: 0.72em;
    margin-top: 4px;
    line-height: 1.22;
  }
}

/* =========================================================
   Mobile/Tablet flow guard
   - Neutralizes legacy fixed heights on smaller screens
   ========================================================= */

@media (max-width: 1024px){
  .features-container,
  .benefit-container,
  .testimonial-container,
  .email-container,
  .footer-container{
    height: auto !important;
    min-height: 0 !important;
  }

  .featurs-container_div,
  .featurs-container_div__details___right,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body{
    height: auto !important;
    max-height: none !important;
  }
}

.preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 2147483646;
  background: var(--bg);
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
  gap: 12px;
  padding: 18px;
  justify-items: center;
  align-content: center;
}

.preloader__content {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  width: min(200px, calc(100% - 32px));
  text-align: center;
}

.preloader.pq-preloader-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader_loader {
  position: relative;
  width: 40px;
  height: 40px;
  border: 10px solid var(--font-color);
  border-top: 10px solid var(--header-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Legacy preloader caption (only when used with the legacy spinner) */
.preloader_loader + span{
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

/* Modern preloader text should remain readable in light mode */
.preloader .pq-loader__text{
  color: var(--ink);
}

.preloader .pq-loader__text span{
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Modern loader (ring + logo + dots) */
.pq-loader{
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.pq-loader__gif{
  display: block;
  width: min(84px, 34vw);
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  margin-inline: auto;
}

@media (max-width: 57em){
  .preloader{
    padding: 16px;
    gap: 10px;
  }

  .preloader__content{
    width: min(200px, calc(100% - 32px));
  }
}

@media (max-width: 700px){
  .pq-loader__gif{
    transform: translateX(-2px);
  }
}

@media (max-width: 38em){
  .preloader__content{
    width: min(190px, calc(100% - 28px));
  }

  .pq-loader__gif{
    width: min(72px, 32vw);
  }
  .pq-loader__text{
    font-size: 13px;
    width: 100%;
  }
}
.pq-loader__ring{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: conic-gradient(from 180deg, var(--brandA), var(--brandB), var(--brandA));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  animation: pq-preloader-spin 900ms linear infinite;
  filter: drop-shadow(0 10px 22px rgba(2,54,104,0.14));
  opacity: 0.95;
}
.pq-loader__logo{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.pq-loader__logo img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.12));
}
.pq-loader__text{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  width: 100%;
  text-align: center;
}

/* Ensure “Loading” stays first and dots stay after it */
.pq-loader__text > span:first-child{ order: 1; }
.pq-loader__text > .pq-loader__dots{ order: 2; margin-inline-start: 2px; }
.pq-loader__dots{
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.pq-loader__dots i{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.25;
  animation: pq-preloader-dot 1100ms ease-in-out infinite;
}
.pq-loader__dots i:nth-child(2){ animation-delay: 160ms; }
.pq-loader__dots i:nth-child(3){ animation-delay: 320ms; }

@keyframes pq-preloader-spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes pq-preloader-dot{
  0%, 100%{ opacity: 0.25; transform: translateY(0); }
  50%{ opacity: 0.95; transform: translateY(-2px); }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.app_container {
  width: 100%;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
}

/* Accessibility: skip link + visible focus */
.skip-link {
  position: absolute;
  top: 12px;
  left: -9999px;
  z-index: 10002;
  background: var(--font-color);
  color: var(--header-color);
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px;
}

:focus-visible {
  outline: 2px solid var(--brandA);
  outline-offset: 3px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:target { scroll-margin-top: calc(5.5rem + var(--pq-safe-top)); }

/*Header styling*/
.header-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: auto;
  min-height: 4rem;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--pq-safe-top);
  box-sizing: border-box;
  background: #118169;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.header-container_div {
  width: 100%;
  background: #118169;
  min-height: 4rem;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  border-radius: 0;
  transition: box-shadow 0.3s;
  padding-left: var(--pq-safe-left);
  padding-right: var(--pq-safe-right);
  box-sizing: border-box;
}
.header-container_div__left {
  color: var(--font-color);
  cursor: pointer;
  margin-left: 20%;
}
.header-container_div__right {
  display: flex;
  color: var(--font-color);
  font-size: 14px;
  cursor: pointer;

  justify-content: center;
  align-items: center;
}
.header-container_div__right___cont {
  display: flex;
  color: var(--font-color);
  font-size: 15px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  gap: 1.2rem;
}
.header-container_div__right___cont a {
  text-decoration: none;
  color: var(--font-color);
  padding: 8px 22px;
  border-radius: 24px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  background: transparent;
  border: 2px solid transparent;
}
.header-container_div__right___cont a:hover {
  background: var(--font-color);
  color: var(--header-color);
  box-shadow: 0 2px 8px rgba(17,129,105,0.08);
  border: 2px solid var(--header-color);
}
.header-container_div__right___cont .span-5 {
  background: var(--font-color);
  color: var(--header-color);
  border: 2px solid var(--header-color);
  margin-right: 0.5rem;
}
.header-container_div__right___cont .span-5:hover {
  background: var(--header-color);
  color: var(--font-color);
}
.header-container_div__right___cont .span-6 {
  background: var(--header-color);
  color: var(--font-color);
  border: 2px solid var(--font-color);
  margin-left: 0.5rem;
}
.header-container_div__right___cont .span-6:hover {
  background: var(--font-color);
  color: var(--header-color);
  border: 2px solid var(--header-color);
}
.header-container_div__left span {
  background-color: transparent;
  padding: 5px 15px;
  border-radius: 15px;
  transition: all 0.3s;
}
.header-container_div__right span {
  background-color: transparent;

  transition: all 0.3s;
}
.header-container_div__right span:hover {
  background-color: var(--footer-color);
  color: var(--font-color);
  padding: 5px 10px;
  border-radius: 15px;
}
/* Hamburger menu icon for mobile nav */
.eclipse-menu {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 36px;
  height: 36px;
  margin-right: 1.5rem;
  color: var(--font-color);
  z-index: 10001;
  background: none;
  border: none;
  transition: color 0.2s;
}
.eclipse-menu.active,
.eclipse-menu:focus {
  color: var(--font-color);
}

.eclipse-menu .piq-hamburger{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eclipse-menu .piq-hamburger__bar{
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Turn hamburger into an X when open */
.eclipse-menu.active .piq-hamburger__bar:nth-child(2){
  opacity: 0;
}
.eclipse-menu.active .piq-hamburger__bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.eclipse-menu.active .piq-hamburger__bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 700px) {
  .eclipse-menu {
    display: flex;
  }
  .hamburger { display: none !important; }
}
    @media (min-width: 701px) {
      .header-container_div__right {
        /* revert to original desktop styles */
        margin-left: 0;
        margin-right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 100%;
      }
      .header-container_div__right___cont {
        width: 100%;
        justify-content: center;
        gap: 1.2rem;
      }
    }
  .piq-desktop-only {
    display: none !important;
  }
  .piq-mobile-only {
    display: block !important;
  }
/* removed stray closing brace after media query */
@media (min-width: 701px) {
  .piq-desktop-only {
    display: block !important;
  }
  .piq-mobile-only {
    display: none !important;
  }
    /* align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 20px;
  } */
  .preloader_loader {
    width: 30px;
    height: 30px;
  }
  .header-container {
    top: 0;
    height: 5rem;
  }
  .header-container_div {
    width: 100%;
    background-color: var(--font-color);
    border-radius: 0;
    height: 100%;
    padding: 0;
/* removed stray closing brace after media query */
  }
  .header-container_div__left {
    z-index: 2;
    color: var(--header-color);
    transition: color 1s;
    margin-left: 15%;
    white-space: nowrap;
  }
  .header-container_div__left.active {
    color: var(--font-color);
  }
  .header-container_div__right {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    background-color: transparent;
    height: auto;
    display: flex;
    flex-direction: row;
    transition: none;
    margin-right: 0;
  }
  .hamburger {
    display: flex;
  }
  .header-container_div__right.active {
    top: auto;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
    background-color: var(--font-color);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    background-color: var(--font-color);
  }
}

/* Intro styling*/
.intro-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  margin-top: calc(90px + var(--pq-safe-top));
  overflow: hidden;
}
.intro-container_body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  width: 70%;

  align-items: center;
}
@media only screen and (max-width: 82em) {
  .intro-container_body {
    width: 85%;
  }
}
@media only screen and (max-width: 69em) {
  .intro-container_body {
    width: 90%;
  }
}


.intro-container_body__span-1 {
  color: var(--ink);
  font-size: 16px;
  border-left: 3px dashed var(--muted);
  padding: 5px 20px;
  border-right: 3px dashed var(--muted);
  border-radius: 30px;
}
.intro-container_body__span-2 {
  color: var(--ink);
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  transform: scale(1.1);
  display: block;
  width: 100%;
}

.intro-container_body__subtext {
  color: var(--ink);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  transform: scale(1.1);
}

.piq-confidence-animate {
  font-weight: 800;
  display: inline-block;
  background: linear-gradient(
    270deg,
    var(--brandA, #118169),
    #fff,
    var(--brandB, #52C2AB),
    var(--navy, #023668),
    var(--brandA, #118169)
  );
  background-size: 600% 600%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: piq-wave 6s linear infinite;
}

@keyframes piq-wave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .piq-confidence-animate {
    animation: none;
    background-position: 50% 50%;
  }
}

.intro-container_body__div {
  width: 100%;

  height: 100%;
  display: grid;
  grid-template-columns: 15rem 1fr 15rem;
  align-items: center;
}

@media only screen and (max-width: 64em) {
  .intro-container_body__div {
    grid-template-rows: auto 2fr;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }
  .intro-container_body__div___left {
    grid-row: 1/2;
    grid-column: 1/2;
    padding-left: 1rem;
  }
  .intro-container_body__div___middle {
    grid-column: 1/-1;
    grid-row: 2/3;
  }
  .intro-container_body__div___right {
    grid-column: 2/3;
    grid-row: 1/2;
  }
}
.intro-container_body__div___left {
  /* width: 30%; */
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.intro-container_body__div___left span {
  color: var(--ink);
  font-size: 15px;
  width: 287px;
}
.intro-container_body__div___left____button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 100px;
  background: linear-gradient(90deg, var(--brandB), var(--brandA));
  color: var(--font-color);
  padding: 7px 10px;
  height: 20px;
  border-radius: 20px;
  transition: 1s;
}

.intro-container_body__div___left____button-container a {
  position: absolute;
  left: 45px;

  font-size: 14px;
  transition: 1s;
  text-decoration: none;
}
.intro-container_body__div___left____button-container.active {
  background-color: #03473a;
  color: var(--font-color);
}
.intro-container_body__div___left____button-container a.slide_toggle {
  left: 10px;
  white-space: nowrap;
}
.intro-container_body__div___left____button-container_____right-arrow.slide {
  left: 90px;
}
.intro-container_body__div___left____button-container_____right-arrow {
  color: var(--brandA);
  background-color: var(--font-color);
  padding: 5px;
  border-radius: 100vmin;
  position: absolute;
  left: 8px;
  transition: 1s;
}
.intro-container_body__div___middle {
  overflow: hidden;
 /* height: 100%;*/
}
.intro-container_body__div___middle figure {
  position: relative;
  margin: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
.intro-container_body__div___middle figure img {
  width: 300px;
  display: block;
  height: auto;
  aspect-ratio: 1203 / 1300;
}
.intro-container_body__div___middle figure div {
  height: fit-content;
}
.semi-circle {
  position: relative;
  overflow: hidden;
}

.semi-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform: translateX(-50%);
  background: var(--header-color);
  background-size: cover;
  clip-path: circle(50% at 50% 100%);
  z-index: -1;
}

@media only screen and (max-width: 100em) {
  .semi-circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--header-color);
    background-size: cover;
    clip-path: circle(50% at 50% 100%);
    transform: translateX(0%);
    z-index: -1;
  }
}

@media only screen and (max-width: 69em) {
  .semi-circle::before {
    clip-path: circle(45% at 50% 100%);
  }
}

@media only screen and (max-width: 32em) {
  .intro-container_body__div___middle figure img {
    width: 100%;
  }
}

.intro-container_body__div___right {
  display: flex;
  flex-direction: column;
  justify-self: center;
}
.intro-container_body__div___right____fives-star-rating {
  width: 120px;
}
.intro-container_body__div___right____happy-customer-number-span {
  color: var(--ink);
  font-weight: 500;
  font-size: 27px;
  margin-top: 15px;
}
.intro-container_body__div___right____happy-customer-span {
  color: var(--ink);
  font-size: 14px;
}

@media (max-width: 600px) {
  .intro-container_body {
    width: 100%;
  }
  .intro-container_body__span-2 {
    font-size: 17px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .intro-container_body__div {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .intro-container_body__div___left span {
    font-size: 14px;
  }

  .intro-container_body__div___right____fives-star-rating {
    width: 100px;
  }
  .intro-container_body__div___right____happy-customer-number-span {
    font-size: 24px;
  }
  .intro-container_body__div___right____happy-customer-span {
    font-size: 12px;
    white-space: nowrap;
  }
}

/*Selector Styling*/
.selector-container {
  position: relative;
  z-index: 10000;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6rem;
  background-color: var(--footer-color);
}
.selector-container_div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 80%;
  position: relative;
  overflow: visible;

  gap: 2rem;
}
.selector-container_div__selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--font-color);
  position: relative;
}

/* Native dropdown (used by selector section) */
.selector-container_div__selector___select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
  color-scheme: light;
}
html[data-theme="dark"] .selector-container_div__selector___select,
body.dark .selector-container_div__selector___select{
  color: var(--font-color);
  color-scheme: dark;
}

.selector-container_div__selector___select option{
  color: var(--ink);
  background: var(--card);
}
html[data-theme="dark"] .selector-container_div__selector___select option,
body.dark .selector-container_div__selector___select option{
  color: var(--font-color);
  background: var(--card);
}
.selector-container_div__selector___select:focus{
  outline: none;
}
.selector-container_div__selector___flex {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: fit-content;
}
.selector-container_div__selector___flex :nth-child(1) {
  font-size: 13px;
  color: var(--font-color);
  font-weight: 100;
}
.selector-container_div__selector___list {
  display: flex;
  flex-direction: column;
}
.selector-container_div__selector___flex____carot {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--brandA);
  margin-left: 8px;
  transition: transform 0.3s;
}
.selector-container_div__selector___flex____carot.rotate {
  transform: rotate(180deg);
}
.selector-container_div__selector___list {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--stroke);
  font-size: 14px;
  border-radius: 10px;
  position: absolute;
  top: 60px;
  left: 0;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(2,54,104,0.10);
  opacity: 0;
  pointer-events: none;
  z-index: 1000000;
  transition: opacity 0.3s;
  padding: 8px 0;
}
html[data-theme="dark"] .selector-container_div__selector___list,
body.dark .selector-container_div__selector___list{
  color: var(--font-color);
}
.selector-container_div__selector___list.active {
  opacity: 1;
  pointer-events: auto;
}
.selector-container_div__selector___list span {
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s;
  display: block;
  user-select: none;
}
.selector-container_div__selector___list span:hover {
  background: var(--brandA);
  color: #fff;
}
@media (max-width: 700px) {
  .selector-container {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip;
  }
  .selector-container_div__selector {
    padding: 14px 8px 10px 12px;
    margin-bottom: 10px;
  }
  .selector-container_div__selector___flex {
    padding: 8px 10px;
  }
  .selector-container_div__selector___list {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    top: 48px;
  }
}

/*working styling*/
.workings-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30rem;
  background-color: var(--header-color);
}
.workings-container_body {
  display: flex;
  height: 90%;

  width: 80%;
  flex-direction: column;
  gap: 35px;
}
.workings-container_body__header {
  display: flex;
  width: 100%;

  justify-content: flex-end;
}
.workings-container_body__header___left {
  width: 40%;
}
.workings-container_body__header___left span {
  color: var(--font-color);
  font-size: 24px;
  font-weight: 600;
}
.workings-container_body__header___right {
  width: 50%;
  color: var(--font-color);
  font-size: 14px;
}
.workings-container_body__grid {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}
.workings-container_body__grid___content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  height: 240px;
  width: 230px;
  padding-left: 10px ;
  padding-right: 10px ;
  border: 1px solid var(--font-color);
  border-radius: 10px;
  background-color: var(--card);
}
.workings-container_body__grid___content____img {
  transform: scale(1.5);
  color: var(--footer-color);
  font-size: 18px;
}
.workings-container_body__grid___content____span-1 {
  color: var(--ink);
  font-weight: 400;
  font-size: 18px;
}
.workings-container_body__grid___content____span-2 {
  text-align: center;
  font-size: 12px;
  color: var(--sub-script);
}

html[data-theme="dark"] .workings-container_body__grid___content____span-2,
body.dark .workings-container_body__grid___content____span-2 {
  color: var(--ink);
}
.workings-container_body__buttons {
  display: flex;
  width: 100%;

  align-items: center;
  justify-content: center;
  gap: 10px;
}
.workings-container_body__buttons___link {
  color: var(--font-color);
  border: 1px solid var(--font-color);
  font-size: 12px;
  padding: 5px 15px;
  border-radius: 20px;
  cursor: pointer;
}

.workings-container_body__buttons___container {
  background-color: var(--font-color);
  color: #18181b;
}
html[data-theme="dark"] .header-container_div,
body.dark .header-container_div {
  color: #fff;
  position: relative;

  padding: 5px 25px;
  border-radius: 20px;
  /* border: 1px solid var(--font-color); */
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.7s;
}
.workings-container_body__buttons___container.active {
  background-color: #f3f4f8;
  border: 1px solid #f3f4f8;
}
.workings-container_body__buttons___container a {
  position: relative;
  left: 10px;
  transition: 1s;
}
.workings-container_body__buttons___container____right-arrow {
  background-color: var(--header-color);
  border-radius: 100%;
  color: var(--font-color);
  position: absolute;
  padding: 6px;
  left: 2px;
  transition: 1s;
}
.workings-container_body__buttons___container a.active {
  left: -12px;
}
.workings-container_body__buttons___container____right-arrow.active {
  left: 78px;
}
@media only screen and (min-width: 69em) {
  .workings-container_body__buttons___link:hover {
    background-color: var(--font-color);
    color: var(--header-color);
  }
}
@media (max-width: 57em) {
  .workings-container {
    width: 100%;
  }
  .workings-container_body {
    width: 80%;
    gap: 20px;
  }

  .workings-container_body__header {
    flex-direction: column;
    align-items: center;
  }
  .workings-container_body__header___left {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .workings-container_body__header___left br {
    display: none;
  }
  .workings-container_body__header___right {
    width: 100%;
    font-size: 12px;
  }
  .workings-container_body__grid {
    flex-direction: column;
    gap: 20px;
  }
  .workings-container_body__grid___content {
    width: 230px;
  }
}
@media (max-width: 64em){
  .find-soulmate-pill {
    display: inline-block;
    font-size: 1.08em;
    padding: 12px 32px;
    min-width: 180px;
    max-width: 90vw;
    border-radius: 999px;
    background: linear-gradient(90deg, #118169, #52C2AB);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(17,129,105,0.08);
    margin-left: auto;
    margin-right: 16px;
    text-align: center;
    white-space: nowrap;
  }
}
.featurs-container_div {
  display: flex;
  width: 75%;
  height: 85%;
  flex-direction: column;

  align-items: center;
  gap: 30px;
  padding-top: 20px;
}
.featurs-container_div__span {
  color: var(--footer-color);
  font-weight: 500;
  font-size: 28px;
}

@media (min-width: 1024px) {
  .featurs-container_div__span {
    margin-top: 48px;
  }
}
.featurs-container_div__details {
  display: flex;
  width: 100%;

  height: 70%;
}
.featurs-container_div__details___left {
  height: 100%;
  width: 43%;
  display: flex;

  flex-direction: column;
  gap: 21px;
  padding-left: 60px;
}
.featurs-container_div__details___right {
  /* height: 100%; */
  height: 542px;
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 2px dashed var(--footer-color);
  padding-left: 43px;
}
.featurs-container_div__details___left____first,
.featurs-container_div__details___left____second,
.featurs-container_div__details___left____third,
.featurs-container_div__details___right____first,
.featurs-container_div__details___right____second,
.featurs-container_div__details___right____third {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.featurs-container_div__details___left____first_____span-1,
.featurs-container_div__details___right____first_____span-1 {
  color: var(--footer-color);
  font-weight: 600;
  font-size: 20px;
}
html[data-theme="dark"] .featurs-container_div__details___left____first_____span-1,
  html[data-theme="dark"] .benefit-container_div__right___achievement____stats_____span-1,
  body.dark .benefit-container_div__right___achievement____stats_____span-1 {
    color: var(--brandB) !important;
  }
html[data-theme="dark"] .featurs-container_div__details___right____first_____span-1,
body.dark .featurs-container_div__details___left____first_____span-1,
body.dark .featurs-container_div__details___right____first_____span-1 {
  color: var(--ink);
}
.featurs-container_div__details___left____first_____date,
.featurs-container_div__details___right____first_____date {
  color: var(--sub-script);
  font-size: 13px;
  font-weight: 300;
}
html[data-theme="dark"] .featurs-container_div__details___left____first_____date,
html[data-theme="dark"] .featurs-container_div__details___right____first_____date,
body.dark .featurs-container_div__details___left____first_____date,
body.dark .featurs-container_div__details___right____first_____date {
  color: var(--font-color);
}

.font-weight{
  font-weight: bold;
}
.featurs-container_div__button {
  display: flex;
  width: 100%;
 /* margin-top: 140px;*/
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.featurs-container_div__button___link {
  color: var(--header-color);
  border: 1px solid var(--header-color);
  font-size: 12px;
  padding: 5px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: 1s;
}

.featurs-container_div__button___container {
  background-color: var(--header-color);
  color: var(--font-color);
  position: relative;

  padding: 5px 25px;
  border-radius: 20px;
  border: 1px solid var(--header-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 1s;
}
.featurs-container_div__button___container.active {
  background-color: #03473a;
  color: var(--font-color);
}
.featurs-container_div__button___container a {
  position: relative;
  left: 10px;
  transition: 1s;
}
.featurs-container_div__button___container____right-arrow {
  background-color: var(--font-color);
  border-radius: 100%;
  color: var(--header-color);
  position: absolute;
  left: 3px;
  padding: 5px;
  transition: 1s;
}
.featurs-container_div__button___container a.active {
  left: -12px;
}
.featurs-container_div__button___container____right-arrow.active {
  left: 80px;
}
@media only screen and (min-width: 69em) {
  .featurs-container_div__button___link:hover {
    color: var(--font-color);
    background-color: var(--header-color);
  }
}
@media (max-width: 57em) {
  .featurs-container_div {
    width: 94%;
  }
  .featurs-container_div__details___right {
    padding-left: 50px;
  }
}
@media (max-width: 38em) {
  .featurs-container_div__span {
    font-size: 23px;
  }
  .features-container {
    height: 102rem;
  }
  .featurs-container_div {
    width: 80%;
  }
  .featurs-container_div__details {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
  }
  .featurs-container_div__details___left {
    padding-left: 0;
    width: 100%;
    text-align: center;
  }
  .featurs-container_div__details___right {
    padding-left: 0;
    border-left: none;
    width: 100%;
    text-align: center;
  }
  .featurs-container_div__details {
    justify-content: space-between;
  }
  .featurs-container_div__details___left____first_____span-1,
  .featurs-container_div__details___right____first_____span-1 {
    color: var(--footer-color);
    font-weight: 600;
    font-size: 18px;
  }
}

/*benefits styling and responsiveness*/
.benefit-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 39rem;
  background-color: var(--bg);
  position: relative;
  overflow: hidden;
  margin-top: 14px;
}
.benefit-container_div {
  display: flex;
  width: 60%;
  height: 88%;
  position: relative;
  gap: 30px;
}
.benefit-container_div__left {
  height: 100%;
  width: 50%;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  position: relative;
}
.benefit-container_div__left___container {
  width: 85%;
  height: 85%;
  background-color: var(--header-color);
  border-radius: 22%;
  position: relative;
}
.benefit-container_div__left___img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
.benefit-container_div__right {
  height: 100%;
  width: 50%;

  display: flex;
  flex-direction: column;
  gap: 30px;
}
.benefit-container_div__right___span-1 {
  color: var(--ink);
  font-size: 28px;
}
.benefit-container_div__right___span-2 {
  font-size: 14px;
  color: var(--sub-script);
  width: 375px
}
.benefit-container_div__right___achievement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pq-card-gap);
}
.benefit-container_div__right___achievement____stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.benefit-container_div__right___achievement____stats_____span-1 {
  color: var(--footer-color);
}
html[data-theme="dark"] .benefit-container_div__right___achievement____stats_____span-1,
body.dark .benefit-container_div__right___achievement____stats_____span-1 {
  color: var(--brandB) !important;
  font-weight: 500;
  font-size: 14px;
  width: 170px
}
.benefit-container_div__right___achievement____stats_____span-2 {
  color: var(--sub-script);
  font-size: 12px;
}
html[data-theme="dark"] .benefit-container_div__right___achievement____stats_____span-2,
body.dark .benefit-container_div__right___achievement____stats_____span-2 {
  color: var(--ink);
}
.benefit-container_div__right___button {
  display: flex;
  width: 100%;

  align-items: center;
  justify-content: start;
}
.benefit-container_div__right___button____container {
  background-color: var(--header-color);
  color: var(--font-color);
  position: relative;

  padding: 5px 25px;
  border-radius: 20px;
  border: 1px solid var(--header-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 1s;
}
.benefit-container_div__right___button____container.active {
  background-color: #03473a;
  color: var(--font-color);
}

.benefit-container_div__right___button____container a {
  position: relative;
  left: 10px;
  transition: 1s;
}
.benefit-container_div__right___button____container_____right-arrow {
  background-color: var(--font-color);
  border-radius: 100%;
  color: var(--header-color);
  position: absolute;
  left: 3px;
  padding: 5px;
  transition: 1s;
}
.benefit-container_div__right___button____container a.active {
  left: -12px;
}
.benefit-container_div__right___button____container_____right-arrow.active {
  left: 80px;
}

@media (max-width: 57em) {
  .benefit-container {
    height: 35rem;
  }
  .benefit-container_div {
    width: 80%;
  }
  .benefit-container_div__left___container {
    width: 100%;
  }
  .benefit-container_div__left___img {
    top: -24px;
  }
}
@media (max-width: 38em) {
  .benefit-container {
    height: 50rem;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .benefit-container_div {
    width: 90%;
    height: 100%;

    flex-direction: column;
    gap: 40px;
  }
  .benefit-container_div__left {
    width: 100%;
    height: 80%;
  }
  .benefit-container_div__left___container {
    height: 85%;
    width: 85%;
  }
  .benefit-container_div__left___img {
    top: -16px;
  }
  .benefit-container_div__right {
    width: 97%;
    box-sizing: border-box;
    border-top: 1px solid var(--stroke);
    padding-top: 18px;
    padding-left: 10px;
  }
  @media (max-width: 21em) {
    .benefit-container_div__left___container {
      height: 92%;
    }
  }
}
@media (min-width: 131em) {
  .benefit-container_div__left___container {
    width: 60%;
    height: 90%;
  }
  .benefit-container_div__left {
    align-items: start;
  }
}

/*testimonial styling and responsiveness*/
.testimonial-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 33rem;
  padding-bottom: 25px;
  background-color: var(--pq-nav-bg);
}
.testimonial-container_div {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  height: 90%;
  width: 70%;
  gap: 30px;
}
.testimonial-container_div__header {
  display: flex;
  justify-content: space-between;
}
.testimonial-container_div__header___left {
  width: 40%;
  color: var(--font-color);
  font-weight: 600;
  font-size: 22px;
}
.testimonial-container_div__header___right {
  width: 50%;
  color: var(--font-color);
  font-size: 14px;
}
.testimonial-container_div__button {
  display: flex;
  width: 100%;

  align-items: center;
  justify-content: center;
  gap: 10px;
}
.testimonial-container_div__button___link {
  color: var(--font-color);
  border: 1px solid var(--font-color);
  font-size: 12px;
  padding: 5px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: 1s;
}

.testimonial-container_div__button___container {
  background-color: var(--font-color);
  color: #18181b;
}
html[data-theme="dark"] .featurs-container_div__button___container,
body.dark .featurs-container_div__button___container {
  color: #fff;
  position: relative;

  padding: 5px 25px;
  border-radius: 20px;
  border: 1px solid var(--font-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 1s;
}
.testimonial-container_div__button___container.active {
  background-color: #f3f4f8;
  border: 1px solid #f3f4f8;
}
.testimonial-container_div__button___container a {
  position: relative;
  left: 10px;
  transition: 1s;
}
.testimonial-container_div__button___container____right-arrow {
  background-color: var(--header-color);
  border-radius: 100%;
  color: var(--font-color);
  position: absolute;
  left: 3px;

  padding: 5px;
  transition: 1s;
}
.testimonial-container_div__button___container a.active {
  left: -12px;
}
.testimonial-container_div__button___container____right-arrow.active {
  left: 80px;
}
.testimonial-container_div__slider {
  width: 100%;
  height: 70%;
}

.testimonial-container_div__slider .swiper {
  width: 100%;
  height: 100%;

  display: flex;
  position: relative;
  z-index: 0;
}
.testimonial-container_div__slider .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.testimonial-container_div__slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-container_div__slider___container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 240px;
  /* width: 240px; */
  width: 285px;
  max-width: 100%;
  background-color: var(--bg);
  border-radius: var(--radius);
  position: relative;
  padding: 16px 16px 14px;
  gap: 12px;
  transition: transform 0.2s, background-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  box-shadow: var(--shadow2);
  border: 1px solid var(--stroke);
  overflow: hidden;
}

html[data-theme="dark"] .testimonial-container_div__slider___container,
body.dark .testimonial-container_div__slider___container {
  background-color: var(--card);
}


.testimonial-container_div__slider___container:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.testimonial-container_div__slider___container____image {
  height: 64px;
  width: 64px;
  border-radius: 100vmin;
  position: relative;
  z-index: 1;
  margin: 4px auto 2px;
  border: 2px solid var(--pq-nav-bg);
  background: var(--card);
  box-shadow: var(--shadow2);
  object-fit: cover;
}
.testimonial-container_div__slider___container____span {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  width: 100%;
  opacity: 0.92;
  overflow-wrap: anywhere;
}

.testimonial-container_div__slider___container____name {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}
.testimonial-container_div__slider .swiper-button-next,
.testimonial-container_div__slider .swiper-button-prev {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 100vmin;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow2);
  transition: all 0.3s;
}
.testimonial-container_div__slider .swiper-button-prev::after {
  font-size: 15px;
}
.testimonial-container_div__slider .swiper-button-next::after {
  font-size: 15px;
}

@media only screen and (min-width: 69em) {
  .testimonial-container_div__button___link:hover {
    color: var(--header-color);
    background-color: var(--font-color);
  }
  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    color: var(--header-color);
    background-color: var(--font-color);
  }
}
@media (max-width: 57em) {
  .testimonial-container_div {
    width: 80%;
  }
}
@media (max-width: 38em) {
  .testimonial-container {
    height: 36rem;
  }
  .testimonial-container_div {
    width: 90%;
  }
  .testimonial-container_div__header {
    flex-direction: column;
  }
  .testimonial-container_div__header___left {
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }
  .testimonial-container_div__header___left br {
    display: none;
  }
  .testimonial-container_div__header___right {
    width: 100%;

    font-size: 12px;
  }
  .testimonial-container_div__slider___container {
    width: min(320px, 92vw);
    min-height: 240px;
  }
}
@media (max-width: 20em) {
  .testimonial-container {
    height: 38rem;
  }
}

/*email styling and responsiveness*/
.email-container {
  display: flex;
  width: 100%;
  min-height: 15rem;
  height: auto;
  padding: 24px 0;
  align-items: center;
  justify-content: center;
}
.email-container_body {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;
  gap: 20px;

  align-items: center;
}
.email-container_body__span-1 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  transform: scale(1.4);
}
.email-container_body__email-container {
  display: flex;
  position: relative;
  align-items: center;
  border: 1px solid var(--header-color);
  border-radius: 100vmin;
}

.email-container_body__email-container___email {
  color: var(--header-color);
  position: absolute;
  left: 10px;
  background-color: #c0fef3;
  padding: 8px;
  border-radius: 100%;
  cursor: pointer;
}
.email-container_body__email-container___button {
    position: absolute;
    right: 5px;
    background-color: var(--header-color);
    padding: 5px 10px;
    border-radius: 52px;
    color: var(--font-color);
    font-size: 12px;
    cursor: pointer;
    transition: 1s;
    top: 5px;
}
.email-container_body__email-container___button:hover {
  background-color: #03473a;
}

.email-container_body__email-container input {
  height: 40px;
  width: 350px;
  padding: 0 50px;
  border-radius: 52px;
  border: 1px solid white;
}
.email-container_body__email-container input::placeholder {
  color: var(--footer-color);
  font-size: 14px;
}

.email-container_body__consent-note{
  margin: 6px 0 0 0;
  width: min(560px, 92vw);
  max-width: 92vw;
  padding: 0 6px;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
  color: var(--pq-badge-color);
}
.email-container_body__consent-note a{
  color: var(--brandA);
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 38em) {
  .email-container {
    padding: 26px 0 34px;
  }
  .email-container_body {
    width: 80%;
    gap: 31px;
    height: auto;
    margin-top: 26px;
  }
  .email-container_body__span-1 {
    font-size: 14px;
    width: 100%;
    transform: none;
  }
  .email-container_body__email-container input {
    width: 200px;
  }

  .email-container_body__consent-note{
    width: 100%;
    max-width: 100%;
  }
}

/*match styling and responsiveness*/
.match-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6.5rem;

  background-color: var(--header-color);
}
.match-container_div {
  display: flex;
  align-items: center;
  position: relative;

  background-color: var(--font-color);
  width: 100%;
  height: 50%;
  overflow: hidden;
}
.match-container_div__content {
  display: flex;
  gap: 1rem;
  width: fit-content;
}
.animation {
  animation: slide 50s linear infinite;
  animation-delay: 1s;
}
.emoji {
  color: var(--header-color);
}
.match-container_div__content___scroll {
  white-space: nowrap;
  color: #18181b;
  font-weight: 600;
  transition: color 0.3s;
}
html[data-theme="dark"] .match-container_div__content___scroll,
body.dark .match-container_div__content___scroll {
  color: #18181b;
  font-weight: 700;
}
@keyframes slide {
  /*from {
    transform: translateX(12%);
  }*/
  to {
    transform: translateX(-50%);
  }
}
/* footer styling and responsiveness */
.footer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 28rem;
  bottom: 0;

  background-color: var(--footer-color-2);
}
.footer-container a {
  cursor: pointer;
  text-decoration: none;
  color: var(--footer-color);
  transition: all 0.3s ease;
}
.footer-container a:hover {
  color: var(--font-color);
    padding-left: 8px;
}
.footer-container_div__content-4___social-icons {
  display: flex;
  gap: 10px;
}
.footer-container_div__content-4___social-icons div {
  background-color: var(--footer-color-2);
  height: 35px;
  width: 35px;
  border-radius: 100vmin;
  border: 1px solid var(--footer-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: 1s;
}

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}

.footer-container_div {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.footer-container_div__content-1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  margin-top: 50px;
}

.footer-container_div__content-1___header,
.footer-container_div__content-2___header,
.footer-container_div__content-3___header,
.footer-container_div__content-4___header {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
h3 {
  color: var(--font-color);
  font-size: 18px;
}
.footer-container_div__content-1___header div,
.footer-container_div__content-2___header div,
.footer-container_div__content-3___header div,
.footer-container_div__content-4___header div {
  width: 50px;
  height: 2px;
  background-color: var(--header-color);
}

.footer-container_div__content-2,
.footer-container_div__content-3,
.footer-container_div__content-4 {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  margin-top: 50px;
  color: var(--font-color);
}

.footer-container_break-line {
  position: absolute;
  bottom: 5px;
  gap: 3px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer-container_break-line hr {
  color: var(--footer-color-2);
}
.footer-container_break-line span {
  text-align: center;
  color: var(--font-color);
  font-size: 14px;
}
@media only screen and (min-width: 69em) {
  .footer-container_div__content-4___social-icons div:hover {
    background-color: rgb(17, 17, 17);

    border: 1px solid rgb(17, 17, 17);
  }
}
@media (max-width: 57em) {
  .footer-container {
    height: fit-content;
    padding-top: 2rem;
  }
  .footer-container_div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: fit-content;
    text-align: center;
    justify-items: center;
  }
  .footer-container_div__content-3 {
    margin-bottom: 100px;
  }
}

@media (max-width: 38em) {
  .footer-container {
    height: fit-content;
    padding-top: 2rem;
  }
  .footer-container_div {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    justify-items: center;
    height: fit-content;
  }
  .footer-container_div__content-1 {
    margin-top: 0;
  }
  .footer-container_div__content-2,
  .footer-container_div__content-3,
  .footer-container_div__content-4 {
    margin-top: 0;
  }
  .footer-container_div__content-1___header div,
  .footer-container_div__content-2___header div,
  .footer-container_div__content-3___header div,
  .footer-container_div__content-4___header div {
    display: none;
  }
  .footer-container_div__content-1___header,
  .footer-container_div__content-2___header,
  .footer-container_div__content-3___header,
  .footer-container_div__content-4___header {
    margin-bottom: 20px;
  }
}


/* ============================
   PIQUORA PREMIUM UI OVERRIDES
   Paste at the END of your CSS
   ============================ */

:root{
  --brandA: #118169; /* matches your header color */
  --brandB: #52C2AB;
  --navy: #023668;
  --ink: #0b1220;
  --muted: #667085;
  --bg: #f7fbff;
  --card: rgba(255,255,255,0.82);
  --stroke: rgba(16,24,40,0.10);
  --shadow: 0 18px 55px rgba(16,24,40,0.14);
  --shadow2: 0 10px 28px rgba(16,24,40,0.10);
  --radius: 22px;

  --pq-max: 1200px;
  --pq-wrap: min(var(--pq-max), 97%);
  --pq-pad: 16px;
}

*{ font-family: var(--pq-font-sans); }

body{
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(82,194,171,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(17,129,105,.20), transparent 60%),
    radial-gradient(850px 520px at 50% 100%, rgba(2,54,104,.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 40%, #ffffff 100%);
  color: var(--ink);
}

/* Keep all primary inner wrappers centered */
.header-container_div,
.intro-container_body,
.selector-container_div,
.workings-container_body,
.featurs-container_div,
.benefit-container_div,
.testimonial-container_div,
.email-container_body,
.match-container_div,
.footer-container_div{
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Preloader (cleaner + premium) ---------- */
.preloader{
  background: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="dark"] .preloader,
body.dark .preloader {
  background: #0b1220;
}
.preloader span{
  letter-spacing: .2px;
  opacity: .95;
}

html[data-theme="dark"] .pq-loader__text,
body.dark .pq-loader__text{
  color: var(--font-color);
}

@media (prefers-reduced-motion: reduce) {
  .pq-loader__ring,
  .pq-loader__dots i,
  .preloader_loader {
    animation: none !important;
  }
}

/* ---------- Header: glass + modern (keeps hamburger behavior) ---------- */
.header-container{
  background: rgba(17,129,105,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 26px rgba(2,54,104,0.12);
}

.header-container_div{
  background: transparent;
  width: var(--pq-wrap);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(var(--pq-pad) + var(--pq-safe-left));
  padding-right: calc(var(--pq-pad) + var(--pq-safe-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.header-container_div__left{
  margin-left: 0;
  display:flex;
  align-items:center;
}

.header-container_div__right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
}

.header-container_div__right___cont{
  width: auto;
  justify-content: flex-end;
  gap: 12px;
}
.header-container_div__left img{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18));
  height: 72px;
  width: auto;
  aspect-ratio: 2001 / 1001;
  object-fit: contain;
}

@media (max-width: 64em){
  .header-container_div__left img{ height: 48px; }
}

@media (max-width: 700px){
  .header-container_div__left img{ height: 40px; }
}

/* Nav items: modern pill buttons */
.header-container_div__right___cont a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-weight: 750;
  letter-spacing: 0.1px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.header-container_div__right___cont a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 12px 22px rgba(0,0,0,0.12);
}

/* Promote the primary CTA using existing class names */
.header-container_div__right___cont a.nav-cta{
  background: rgba(255,255,255,0.92);
  color: var(--brandA);
  border-color: rgba(255,255,255,0.82);
}
@media (hover:hover){
  .header-container_div__right___cont a.nav-cta:hover{
    background: #ffffff;
  }
}

/* Sign in / Sign up: premium */
.header-container_div__right___cont .span-5{
  background: #ffffff;
  color: var(--brandA);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 10px 20px rgba(2,54,104,0.12);
}
.header-container_div__right___cont .span-6{
  background: linear-gradient(90deg, var(--brandB), var(--brandA));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 24px rgba(17,129,105,0.22);
}
.header-container_div__right___cont .span-6:hover{
  background: linear-gradient(90deg, var(--brandA), var(--brandB));
}

/* Hamburger: slightly rounded bars */
.bar{
  border-radius: 999px;
}

/* Mobile menu: smoother open, better look */
@media (max-width: 38em){
  .header-container_div{
    background: transparent !important;
  }
  .header-container_div__right{
    background:
      radial-gradient(900px 520px at 30% 10%, rgba(82,194,171,.22), transparent 55%),
      linear-gradient(180deg, rgba(17,129,105,.98), rgba(2,54,104,.40));
    backdrop-filter: blur(16px);
  }
  .header-container_div__right___cont a{
    width: min(360px, 86%);
    justify-content:center;
    text-align:center;
    padding: 12px 18px;
    border-radius: 999px;
  }
}

/* =========================================================
   Smart Match Preview (pre-launch modal)
   - Namespaced to avoid collision with existing `.pq-modal` styles
   ========================================================= */
body.pq-modal-open{
  overflow: hidden;
}

.pq-smartmatch-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: 18px;
  isolation: isolate;

  /* Themeable modal tokens (default: light, matches landing page cards) */
  --pq-modal-backdrop: rgba(11,18,32,0.55);
  --pq-modal-surface: rgba(255,255,255,0.92);
  --pq-modal-border: var(--stroke);
  --pq-modal-shadow: 0 30px 90px rgba(0,0,0,0.20);
  --pq-modal-title: var(--ink);
  --pq-modal-subtitle: rgba(11,18,32,0.72);
  --pq-modal-muted: rgba(11,18,32,0.66);
  --pq-modal-panel-bg: rgba(255,255,255,0.60);
  --pq-modal-panel-border: rgba(16,24,40,0.10);
  --pq-modal-input-bg: rgba(11,18,32,0.04);
  --pq-modal-input-border: rgba(16,24,40,0.12);
  --pq-modal-input-ph: rgba(11,18,32,0.45);
}

html[data-theme="dark"] .pq-smartmatch-modal,
body.dark .pq-smartmatch-modal{
  --pq-modal-backdrop: rgba(2,54,104,0.52);
  --pq-modal-surface: rgba(17,27,46,0.96);
  --pq-modal-border: rgba(230,237,247,0.10);
  --pq-modal-shadow: 0 30px 90px rgba(0,0,0,0.35);
  --pq-modal-title: rgba(255,255,255,0.96);
  --pq-modal-subtitle: rgba(255,255,255,0.84);
  --pq-modal-muted: rgba(255,255,255,0.72);
  --pq-modal-panel-bg:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    rgba(11,18,32,0.18);
  --pq-modal-panel-border: rgba(255,255,255,0.12);
  --pq-modal-input-bg: rgba(11,18,32,0.34);
  --pq-modal-input-border: rgba(255,255,255,0.18);
  --pq-modal-input-ph: rgba(255,255,255,0.52);
}

.pq-smartmatch-modal[hidden]{
  display: none !important;
}

.pq-smartmatch-modal__backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--pq-modal-backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .24s ease;
}

.pq-smartmatch-modal__dialog{
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  max-height: min(86vh, 720px);
  max-height: min(86dvh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 22px;
  border: 1px solid var(--pq-modal-border);
  background: var(--pq-modal-surface);
  box-shadow: var(--pq-modal-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition: transform .24s ease, opacity .24s ease;
  will-change: transform, opacity;
}

.pq-smartmatch-modal.is-open .pq-smartmatch-modal__backdrop{ opacity: 1; }
.pq-smartmatch-modal.is-open .pq-smartmatch-modal__dialog{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pq-smartmatch-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,129,105,0.18);
  background: rgba(17,129,105,0.08);
  color: var(--brandA);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

@media (hover:hover){
  .pq-smartmatch-modal__close:hover{
    background: linear-gradient(135deg, rgba(82,194,171,0.18), rgba(17,129,105,0.12));
    border-color: rgba(82,194,171,0.34);
    filter: brightness(1.02);
  }
}

.pq-smartmatch-modal__close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 0 0 10px var(--ring2);
}

.pq-smartmatch-modal__content{
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.pq-smartmatch-modal__panel{
  display: grid;
  gap: 10px;
}

.pq-smartmatch-modal__panel.pq-panel-in{
  animation: pqSmartPanelIn .28s ease both;
}

.pq-smartmatch-modal__panel.pq-panel-out{
  animation: pqSmartPanelOut .20s ease both;
}

@keyframes pqSmartPanelIn{
  from{ opacity: 0; transform: translateY(10px) scale(0.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pqSmartPanelOut{
  from{ opacity: 1; transform: translateY(0) scale(1); }
  to{ opacity: 0; transform: translateY(6px) scale(0.99); }
}

.pq-smartmatch-modal__title{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--pq-modal-title);
}

.pq-smartmatch-modal__subtitle{
  margin: 0;
  color: var(--pq-modal-subtitle);
  line-height: 1.45;
  font-size: 14px;
}

.pq-smartmatch-modal__prefs{
  margin: 4px 0 0;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--pq-modal-panel-border);
  background: var(--pq-modal-panel-bg);
  box-shadow: var(--shadow2);
  display: grid;
  gap: 10px;
}

.pq-smartmatch-modal__pref{
  display: grid;
  grid-template-columns: 24px 110px 1fr;
  gap: 10px;
  align-items: center;
}

.pq-smartmatch-modal__prefIcon{
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(17,129,105,0.12);
  border: 1px solid rgba(17,129,105,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
  color: var(--brandA);
  font-size: 13px;
}

.pq-smartmatch-modal__prefIcon svg{
  width: 14px;
  height: 14px;
  display: block;
}

.pq-smartmatch-modal__prefLabel{
  color: var(--pq-modal-muted);
  font-weight: 750;
  font-size: 12px;
  letter-spacing: 0.18px;
}

.pq-smartmatch-modal__prefValue{
  color: var(--pq-modal-title);
  font-weight: 850;
  font-size: 13.5px;
}

.pq-smartmatch-modal__anticipation{
  margin-top: 2px;
}

.pq-smartmatch-modal__found{
  text-align: center;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid var(--pq-modal-panel-border);
  background: var(--pq-modal-panel-bg);
  color: var(--pq-modal-title);
  font-weight: 850;
  letter-spacing: -0.2px;
}

.pq-smartmatch-modal__form{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.pq-smartmatch-modal__label{
  color: var(--pq-modal-subtitle);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.2px;
}

.pq-smartmatch-modal__input{
  height: 46px;
  border-radius: 14px;
  padding: 0 14px;
  border: 1px solid var(--pq-modal-input-border);
  background: var(--pq-modal-input-bg);
  color: var(--pq-modal-title);
  outline: none;
}

.pq-smartmatch-modal__input::placeholder{ color: var(--pq-modal-input-ph); }
.pq-smartmatch-modal__input:focus-visible{
  box-shadow: 0 0 0 4px var(--ring), 0 0 0 10px var(--ring2);
  border-color: rgba(82,194,171,0.45);
}

.pq-smartmatch-modal__consent{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  opacity: 0.82;
}

.pq-smartmatch-modal__checkbox{
  width: 16px;
  height: 16px;
  margin-top: 0;
  accent-color: var(--brandB, #52C2AB);
}

.pq-smartmatch-modal__consentText{
  color: var(--pq-modal-subtitle);
  font-size: 12px;
  line-height: 1.35;
}

.pq-smartmatch-modal__consentText a{
  color: var(--brandA);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover:hover){
  .pq-smartmatch-modal__consentText a:hover{
    color: var(--brandB);
  }
}

.pq-smartmatch-modal__error{
  min-height: 18px;
  color: var(--pq-modal-title);
  font-size: 13px;
}

.pq-smartmatch-modal__error.is-error{
  color: var(--pq-modal-title);
  background: rgba(17,129,105,0.08);
  border: 1px solid rgba(17,129,105,0.18);
  padding: 8px 10px;
  border-radius: 12px;
}

.pq-smartmatch-modal__cta{
  height: 46px;
  width: 100%;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.2px;
  background: linear-gradient(90deg, var(--brandB), var(--brandA));
  color: #fff;
  box-shadow:
    0 18px 46px rgba(17,129,105,0.22),
    0 0 0 1px rgba(82,194,171,0.20);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

.pq-smartmatch-modal__cta:active{
  transform: translateY(0) scale(0.99);
}

.pq-smartmatch-modal__cta[disabled]{
  opacity: 0.66;
  cursor: not-allowed;
  filter: saturate(0.95);
  transform: none;
}


@media (hover:hover){
  .pq-smartmatch-modal__cta:hover{
    filter: brightness(1.02);
    transform: translateY(-1px) scale(1.02);
    box-shadow:
      0 22px 62px rgba(82,194,171,0.26),
      0 0 0 1px rgba(82,194,171,0.28);
  }

}

.pq-smartmatch-modal__trust{
  margin: 2px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--pq-modal-subtitle);
  opacity: 0.82;
}

.pq-smartmatch-modal__check{
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(82,194,171,0.30), rgba(17,129,105,0.26));
  border: 1px solid rgba(82,194,171,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 26px rgba(17,129,105,0.16);
  transform-origin: center;
}

/* Celebration: single pulse + subtle fade in (400–600ms) */
#pqSmartMatchSuccessModal.pq-smartmatch-modal--celebrate .pq-smartmatch-modal__check{
  animation: pqCheckPulse .52s ease both;
}

#pqSmartMatchSuccessModal.pq-smartmatch-modal--celebrate .pq-smartmatch-modal__content{
  animation: pqSuccessFade .56s ease both;
}

@keyframes pqCheckPulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.12); }
  70%{ transform: scale(0.98); }
  100%{ transform: scale(1); }
}

@keyframes pqSuccessFade{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.pq-smartmatch-modal__successCount{
  margin: 0;
  text-align: center;
  font-weight: 850;
  color: var(--pq-modal-title);
}

.pq-smartmatch-modal__successCount span{
  color: var(--brandA);
}

.pq-smartmatch-modal__successHighlight{
  margin: 0;
  text-align: center;
  color: var(--pq-modal-subtitle);
  opacity: 0.92;
}

.pq-smartmatch-modal__share{
  margin-top: 2px;
  border: 0;
  background: transparent;
  color: var(--pq-modal-subtitle);
  font-weight: 850;
  cursor: pointer;
  text-align: center;
  padding: 6px 0 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.88;
}

@media (hover:hover){
  .pq-smartmatch-modal__share:hover{ opacity: 1; color: var(--pq-modal-title); }
}

.pq-smartmatch-modal__microtrust{
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--pq-modal-subtitle);
  opacity: 0.62;
}

.pq-smartmatch-modal__cta[disabled]{
  opacity: 0.72;
  cursor: not-allowed;
}

.pq-smartmatch-modal__note{
  margin: 0;
  color: var(--pq-modal-muted);
  font-size: 12px;
}

@media (max-width: 38em){
  .pq-smartmatch-modal{ padding: 14px; }
  .pq-smartmatch-modal__dialog{ padding: 16px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px; }
  .pq-smartmatch-modal__content{ padding-top: 16px; }
  .pq-smartmatch-modal__pref{ grid-template-columns: 24px 96px 1fr; gap: 8px; }
  .pq-smartmatch-modal__input,
  .pq-smartmatch-modal__cta{ height: 48px; }
  .pq-smartmatch-modal__title{ font-size: 20px; }
}

@media (min-width: 38.01em) and (max-width: 57em){
  .pq-smartmatch-modal{ padding: 20px; }
  .pq-smartmatch-modal__dialog{
    width: min(640px, 100%);
    padding: 22px 22px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px;
  }
  .pq-smartmatch-modal__title{ font-size: 24px; }
  .pq-smartmatch-modal__subtitle{ font-size: 15px; }
}

@media (max-width: 28em){
  .pq-smartmatch-modal__prefs{ padding: 10px; }
  .pq-smartmatch-modal__pref{ grid-template-columns: 24px 1fr; }
  .pq-smartmatch-modal__prefLabel{ font-size: 11.5px; }
  .pq-smartmatch-modal__prefValue{ grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce){
  .pq-smartmatch-modal__backdrop,
  .pq-smartmatch-modal__dialog{
    transition: none !important;
  }
}

/* ---------- Intro: spacing + premium text ---------- */
.intro-container{
  margin-top: calc(100px + var(--pq-safe-top));
  padding: 20px 0 10px;
}
.intro-container_body{
  width: var(--pq-wrap) !important;
  padding: 0 var(--pq-pad);
  box-sizing: border-box;
  gap: 14px;
}

.intro-container_body__span-1{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: clamp(15px, 1.65vw, 21px);
  font-weight: 780;
  letter-spacing: -0.25px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 16px 38px rgba(2,54,104,.14);
}

.intro-container_body__span-1 i{
  color: var(--brandA);
}

.intro-container_body__span-2{
  font-size: clamp(20px, 2.15vw, 34px);
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: -0.4px;
  transform: none;
  max-width: 930px;
  margin: 0 auto;
}

/* Left hero paragraph: nicer readable width */
.intro-container_body__div___left span{
  width: auto;
  max-width: 360px;
  color: var(--ink);
  line-height: 1.7;
}
html[data-theme="dark"] .intro-container_body__div___left span,
body.dark .intro-container_body__div___left span {
  color: var(--font-color);
}

/* Hero button: real CTA */
.intro-container_body__div___left____button-container{
  width: 150px;
  height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brandB), var(--brandA));
  box-shadow: 0 14px 34px rgba(17,129,105,0.22);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.intro-container_body__div___left____button-container:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(17,129,105,0.26);
}
.intro-container_body__div___left____button-container:active{
  transform: translateY(0px) scale(0.99);
}
.intro-container_body__div___left____button-container a{
  left: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}
.intro-container_body__div___left____button-container_____right-arrow{
  left: auto;
  right: 8px;
  background: rgba(255,255,255,0.92);
  color: var(--brandA);
  padding: 8px;
}

/* Hero image background: softer */
.semi-circle::before{
  background: linear-gradient(180deg, rgba(82,194,171,0.65), rgba(17,129,105,0.9));
  filter: saturate(1.1);
}

/* Right hero stats: badge feel */
.intro-container_body__div___right{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: var(--shadow2);
}

/* Early access card (clickable) */
.piq-early-access-card{
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  text-align: center;
  width: min(323px, 80vw);
  max-width: 80vw;
}

.piq-early-access-card:focus{
  outline: none;
}

.piq-early-access-card__title{
  display: block;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.2px;
  font-size: 13.5px;
  margin-top: 2px;
}

.piq-early-access-card__note{
  display: block;
  color: var(--ink);
  opacity: 0.78;
  font-size: 12px;
  margin-top: 6px;
}

@media (hover:hover){
  .piq-early-access-card:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
}

.piq-early-access-card:active{
  transform: translateY(0px) scale(0.99);
}

/* Smooth scroll target should not hide under sticky header */
#newsletter{
  scroll-margin-top: calc(90px + var(--pq-safe-top));
}

@media (max-width: 38em){
  #newsletter{ scroll-margin-top: calc(5.5rem + var(--pq-safe-top)); }
}

/* ---------- Selector: more premium ---------- */
.selector-container{
  background: linear-gradient(90deg, var(--navy), rgba(2,54,104,0.92));
  height: auto;
  padding: 20px 0 26px;
}

.selector-container_div{
  width: var(--pq-wrap);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--pq-pad);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 18px;
  align-items: end;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 46px rgba(2,54,104,0.22);
  padding-top: 14px;
  padding-bottom: 14px;
}

.selector-container_div a{
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
}

/* Selector labels */
.selector-container_div__selector___span{
  color: rgba(255,255,255,0.90);
  font-weight: 750;
  font-size: 12.5px;
  letter-spacing: 0.2px;
}

/* Selector dropdowns: darker pills to match strip */
.selector-container .selector-container_div__selector___select{
  height: 40px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(11,18,32,0.40);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 10px 24px rgba(2,54,104,0.16);
  color-scheme: dark;
}

/* Laptop/desktop only */
@media (min-width: 57.01em){
  .selector-container_div__selector___select{
    width: 73%;
  }
}
.selector-container .selector-container_div__selector___select option{
  background: #0b1220;
  color: #fff;
}

/* Selector CTA: make it feel secondary vs hero CTA */
.selector-container_div__button{
  height: 40px;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.96);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.selector-container_div__button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}

@media (max-width: 900px){
  .selector-container_div{
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .selector-container_div__button{
    width: 100%;
  }
}

/* ---------- Workings: cards look modern ---------- */
.workings-container{
  background: linear-gradient(180deg, var(--brandA), rgba(17,129,105,0.92));
  height: auto;
  min-height: 30rem;
  padding: 54px 0 56px;
}
.workings-container_body{
  width: var(--pq-wrap);
  padding: 0 var(--pq-pad);
  box-sizing: border-box;
}
.workings-container_body__grid___content{
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  box-shadow: var(--shadow2);
}
.workings-container_body__grid___content____span-2{
  color: rgba(11,18,32,0.72);
  line-height: 1.5;
}

/* ---------- Features: create modern “split” + better reading ---------- */
.featurs-container_div{
  width: var(--pq-wrap);
  padding: 0 var(--pq-pad);
  box-sizing: border-box;
}
.featurs-container_div__span{
  text-align:center;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.4px;
}

/* Features heading: ensure readable contrast in dark mode */
html[data-theme="dark"] .featurs-container_div__span,
body.dark .featurs-container_div__span{
  color: var(--font-color);
}

.piq-features-title__accent{
  color: var(--footer-color);
  font-weight: 800;
}

html[data-theme="dark"] .piq-features-title__accent,
body.dark .piq-features-title__accent{
  color: var(--brandB);
}

/* Benefit heading accent (mobile/tablet): brighter in dark mode */
.piq-benefit-title__accent{
  color: var(--footer-color);
  font-weight: 800;
}

@media (max-width: 57em){
  .preloader{
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  }

  html[data-theme="dark"] .piq-benefit-title__accent,
  body.dark .piq-benefit-title__accent{
    color: var(--brandB);

  }
}

/* Email heading accent: brighter in dark mode */
.piq-email-title__accent{
  color: var(--footer-color);
  font-weight: 800;
}

html[data-theme="dark"] .piq-email-title__accent,
body.dark .piq-email-title__accent{
  color: var(--brandB);
}
.featurs-container_div__details{
  gap: 30px;
}

/* Feature items: clean modern list rows */
.piq-feature-item{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(16,24,40,0.10);
}
html[data-theme="dark"] .piq-feature-item,
body.dark .piq-feature-item{
  border-bottom: 1px solid rgba(230,237,247,0.10);
}

.featurs-container_div__details___left .piq-feature-item:last-child,
.featurs-container_div__details___right .piq-feature-item:last-child{
  border-bottom: 0;
}

.piq-feature-title{
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.2px;
  font-size: 16px;
}
html[data-theme="dark"] .piq-feature-title,
body.dark .piq-feature-title{
  color: var(--font-color);
}

.piq-feature-desc{
  color: var(--ink);
  opacity: 0.78;
  line-height: 1.6;
  font-size: 13.5px;
}
html[data-theme="dark"] .piq-feature-desc,
body.dark .piq-feature-desc{
  color: var(--font-color);
  opacity: 0.78;
}

/* Features expand/collapse */

/* Only collapse the list on mobile.
  Tablet + desktop stay fully expanded (no hidden items / no column hiding). */
@media (max-width: 700px){
  .featurs-container_div:not(.piq-features--expanded) .piq-feature-item--more{
    display: none;
  }

  /* When collapsed, the right column may have no visible items.
     Hide it to avoid an empty card/pill, and let the left column fill the space. */
  .featurs-container_div:not(.piq-features--expanded) .featurs-container_div__details___right{
    display: none;
  }
}

/* Remove 'View More' in this section on tablet + desktop */
@media (min-width: 701px){
  .featurs-container_div__button___link[data-pq-features-toggle],
  .featurs-container_div__button___link{
    display: none !important;
  }
}

.featurs-container_div__details___left,
.featurs-container_div__details___right {
  background: var(--feature-bg, rgba(255,255,255,0.72));
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow2);
}

html[data-theme="dark"] .featurs-container_div__details___left,
html[data-theme="dark"] .featurs-container_div__details___right,
body.dark .featurs-container_div__details___left,
body.dark .featurs-container_div__details___right {
  background: var(--card, #18181b);
  border: 1px solid rgba(230,237,247,0.10);
}
.featurs-container_div__details___left{
  width: 50%;
  padding-left: 22px;
}
.featurs-container_div__details___right{
  width: 50%;
  border-left: none;
  height: auto;
  padding-left: 22px;
}

/* Mobile/tablet: when collapsed and right column is hidden,
   let the visible card expand to full width. */
@media (max-width: 57em){
  .featurs-container_div:not(.piq-features--expanded) .featurs-container_div__details___left{
    /* width: min(640px, 92vw); */
    margin-left: auto;
    margin-right: auto;
  }

  .featurs-container_div:not(.piq-features--expanded) .featurs-container_div__details{
    justify-content: center;
  }
}
.featurs-container_div__details___left____first_____date,
.featurs-container_div__details___right____first_____date{
  line-height: 1.6;
}

/* ---------- Benefit section: softer + modern ---------- */
.benefit-container{
  background: linear-gradient(180deg, var(--benefit-bg-top, #f3f4f8), var(--benefit-bg-bottom, #fff));
}

html[data-theme="dark"] .benefit-container,
body.dark .benefit-container {
  background: linear-gradient(180deg, var(--card, #111b2e), var(--bg, #0b1220));
}
.benefit-container_div{
  /* width: var(--pq-wrap); */
  width: 80%;
  /* padding: 0 var(--pq-pad); */
  box-sizing: border-box;
}
.benefit-container_div__left___container{
  border-radius: 26px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.benefit-container_div__right___span-1{
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.4px;
}
.benefit-container_div__right___span-2{
  width: auto;
  max-width: 520px;
  line-height: 1.7;
}

.testimonial-container {
  background: linear-gradient(135deg,
    var(--brandA, #118169) 0%,
    var(--brandB, #52C2AB) 35%,
    var(--navy, #023668) 70%,
    var(--ink, #e6edf7) 100%
  );
}
.testimonial-container_div{
  width: var(--pq-wrap);
  padding: 0 var(--pq-pad);
  box-sizing: border-box;
}
.testimonial-container_div__slider___container{
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 18px;
  padding: 16px 10px;
}
.testimonial-container_div__slider___container:hover{
  box-shadow: var(--shadow2);
}

/* ---------- Email: modern form ---------- */
.email-container_body{
  width: min(900px, 97%);
  /* padding: 0 var(--pq-pad); */
  box-sizing: border-box;
}
.email-container_body__span-1{
  transform: none;
  font-weight: 800;
  letter-spacing: -0.4px;
  text-align:center;
  line-height: 1.2;
  font-size: clamp(18px, 2vw, 26px);
}
.email-container_body__email-container{
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow2);
  border: 1px solid rgba(16,24,40,0.10);
}
.email-container_body__email-container input{
  background: transparent;
  border: 0;
  outline: none;
}
.email-container_body__email-container___button{
  background: linear-gradient(90deg, var(--brandB), var(--brandA));
  border: 0;
  font-weight: 700;
  padding: 10px 16px;
  top: 1px;
  right: 1px;
}

/* ---------- Footer: more premium ---------- */
.footer-container{
  background: linear-gradient(180deg, #1f1f1f, #121212);
}
.footer-container_div__content-4___social-icons div{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}
.footer-container_div__content-4___social-icons div:hover{
  transform: translateY(-2px);
}

/* ---------- Smoothness across site ---------- */
a, button, .workings-container_body__grid,
.testimonial-container_div__slider___container,
.selector-container_div a{
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* ---------- Mobile tweaks (more breathing room) ---------- */
@media (max-width: 600px){
  .intro-container{
    margin-top: calc(5rem + var(--pq-safe-top));
    padding-top: 10px;
  }
  .intro-container_body__div{
    display: flex !important;
    flex-direction: column;
    gap: 18px;
  }
  .intro-container_body__div___right{
    width: min(360px, 90%);
    align-items:center;
    text-align:center;
  }
  .featurs-container_div__details___left,
  .featurs-container_div__details___right{
    padding: 18px;
    width: auto;
  }
  .email-container_body__email-container input{
    width: 220px;
  }
}


/* =========================================================
  PIQUORA - Modern Professional Buttons (drop-in)
   Paste at END of index.css
   ========================================================= */

/* Tokens */
:root{
  --btn-radius: 999px;
  --btn-h: 44px;
  --btn-h-sm: 40px;
  --btn-pad: 0 18px;
  --btn-font: 600;
  --btn-letter: .2px;

  --brandA: #118169;
  --brandB: #52C2AB;
  --navy: #023668;

  --ink: #0b1220;
  --muted: rgba(11,18,32,.72);

  --ring: rgba(82,194,171,.38);
  --ring2: rgba(17,129,105,.30);

  --shadowBtn: 0 16px 34px rgba(2,54,104,.14);
  --shadowBtn2: 0 10px 22px rgba(16,24,40,.12);
  --shadowInset: inset 0 1px 0 rgba(255,255,255,.22);

  --glass: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.18);
}

/* Make all button-like anchors consistent */
a.workings-container_body__buttons___link,
a.featurs-container_div__button___link,
a.testimonial-container_div__button___link,
.selector-container_div__button,
.email-container_body__email-container___button,
.intro-container_body__div___left____button-container,
.workings-container_body__buttons___container,
.featurs-container_div__button___container,
.testimonial-container_div__button___container,
.benefit-container_div__right___button____container,
.header-container_div__right___cont a{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  outline: none;
  text-decoration: none !important;
  user-select: none;
}

/* Base style: smooth, modern, professional */
.intro-container_body__div___left____button-container,
.workings-container_body__buttons___container,
.featurs-container_div__button___container,
.testimonial-container_div__button___container,
.benefit-container_div__right___button____container{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;

  height: var(--btn-h) !important;
  padding: var(--btn-pad) !important;

  border-radius: var(--btn-radius) !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  background: linear-gradient(90deg, var(--brandB), var(--brandA)) !important;
  color: var(--font-color) !important;

  font-weight: var(--btn-font) !important;
  letter-spacing: var(--btn-letter) !important;
  font-size: 14px !important;

  box-shadow: var(--shadowBtn), var(--shadowInset) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease !important;

  position: relative;
  overflow: hidden;
}

/* Subtle glossy highlight */
.intro-container_body__div___left____button-container::before,
.workings-container_body__buttons___container::before,
.featurs-container_div__button___container::before,
.testimonial-container_div__button___container::before,
.benefit-container_div__right___button____container::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(900px 160px at 20% 0%,
    rgba(255,255,255,.18), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* Hover / active */
@media (hover:hover){
  .intro-container_body__div___left____button-container:hover,
  .workings-container_body__buttons___container:hover,
  .featurs-container_div__button___container:hover,
  .testimonial-container_div__button___container:hover,
  .benefit-container_div__right___button____container:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(2,54,104,.18), var(--shadowInset) !important;
    filter: saturate(1.05);
  }
}
.intro-container_body__div___left____button-container:active,
.workings-container_body__buttons___container:active,
.featurs-container_div__button___container:active,
.testimonial-container_div__button___container:active,
.benefit-container_div__right___button____container:active{
  transform: translateY(0px) scale(.99);
}

/* Ensure text inside (your HTML uses <span>) looks right */
.intro-container_body__div___left____button-container span,
.workings-container_body__buttons___container span,
.featurs-container_div__button___container span,
.testimonial-container_div__button___container span,
.benefit-container_div__right___button____container span{
  font-weight: 700 !important;
  color: var(--font-color) !important;
  white-space: nowrap !important;
}

/* Remove arrow icon everywhere for these CTAs */
.intro-container_body__div___left____button-container_____right-arrow,
.workings-container_body__buttons___container____right-arrow,
.featurs-container_div__button___container____right-arrow,
.testimonial-container_div__button___container____right-arrow,
.benefit-container_div__right___button____container_____right-arrow{
  display: none !important;
}

/* Also keep the header/nav CTA on one line */
#nav-create-account{
  white-space: nowrap;
}

/* “View More” buttons: professional outline style */
a.workings-container_body__buttons___link,
a.featurs-container_div__button___link,
a.testimonial-container_div__button___link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: var(--btn-h) !important;
  padding: var(--btn-pad) !important;

  border-radius: var(--btn-radius) !important;
  border: 1px solid rgba(255,255,255,.26) !important;

  background: rgba(255,255,255,.10) !important;
  color: var(--ink, #fff) !important;

  font-weight: 700 !important;
  letter-spacing: .2px;
  font-size: 13.5px !important;

  box-shadow: var(--shadowBtn2) !important;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
@media (hover:hover){
  a.workings-container_body__buttons___link:hover,
  a.featurs-container_div__button___link:hover,
  a.testimonial-container_div__button___link:hover{
    background: rgba(255,255,255,.18) !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0,0,0,.14) !important;
  }
}
a.workings-container_body__buttons___link:active,
a.featurs-container_div__button___link:active,
a.testimonial-container_div__button___link:active{
  transform: scale(.99);
}

/* Selector CTA: keep it secondary vs hero CTA */
.selector-container_div__button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: var(--btn-h-sm) !important;
  padding: 0 18px !important;

  border-radius: var(--btn-radius) !important;
  border: 1px solid var(--stroke) !important;

  background: var(--glass) !important;
  color: rgba(255,255,255,0.96) !important;

  font-weight: 800 !important;
  letter-spacing: .2px;
  box-shadow: var(--shadowBtn2) !important;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;

  /* anchor popovers/tooltip pseudo-elements */
  position: relative !important;
}

/* Popover shown after navigating to Smart Match strip */
.pq-popover-anchor{
  position: relative !important;
  overflow: visible !important;
}
.pq-popover-anchor.pq-popover{
  z-index: 50;
}
.pq-popover-anchor.pq-popover::after{
  content: attr(data-pq-popover);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(2px);

  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.62);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadowBtn2);

  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .2px;
  white-space: nowrap;

  opacity: 1;
  pointer-events: none;
  z-index: 10;
}
.pq-popover-anchor.pq-popover::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);

  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(0,0,0,0.62);

  pointer-events: none;
  z-index: 9;
}
@media (hover:hover){
  .selector-container_div__button:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.26) !important;
    box-shadow: var(--shadowBtn) !important;
  }
}

/* Newsletter “Subscribe” button: modern pill */
.email-container_body__email-container___button{
  border: 0 !important;
  height: calc(var(--btn-h-sm) - 2px) !important;
  padding: 0 16px !important;
  border-radius: var(--btn-radius) !important;

  background: linear-gradient(90deg, var(--brandB), var(--brandA)) !important;
  color: var(--ink, #fff) !important;

  font-weight: 800 !important;
  letter-spacing: .2px;
  box-shadow: 0 16px 34px rgba(17,129,105,.22) !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
@media (hover:hover){
  .email-container_body__email-container___button:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(17,129,105,.26) !important;
    filter: saturate(1.05);
  }
}

/* Focus ring (keyboard accessibility) */
.header-container_div__right___cont a:focus-visible,
.intro-container_body__div___left____button-container:focus-visible,
.workings-container_body__buttons___container:focus-visible,
.featurs-container_div__button___container:focus-visible,
.testimonial-container_div__button___container:focus-visible,
.benefit-container_div__right___button____container:focus-visible,
a.workings-container_body__buttons___link:focus-visible,
a.featurs-container_div__button___link:focus-visible,
a.testimonial-container_div__button___link:focus-visible,
.selector-container_div__button:focus-visible,
.email-container_body__email-container___button:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ring), 0 0 0 10px var(--ring2), var(--shadowBtn) !important;
}

/* Mobile sizing tweaks */
@media (max-width: 38em){
  .intro-container{
    margin-top: calc(5rem + var(--pq-safe-top));
    padding-top: 10px;
  }

  .intro-container_body__div___left____button-container,
  .workings-container_body__buttons___container,
  .featurs-container_div__button___container,
  .testimonial-container_div__button___container,
  .benefit-container_div__right___button____container,
  a.workings-container_body__buttons___link,
  a.featurs-container_div__button___link,
  a.testimonial-container_div__button___link{
    width: min(360px, 92%);
    height: 46px !important;
    font-size: 14px !important;
  }

  .selector-container_div__button{
    height: 42px !important;
    width: min(200px, 90%);
  }
}

/* ---------------------------------------------------------
   Nav CTA refinement (your injected style already improved nav;
   this just makes it more "product-grade")
   --------------------------------------------------------- */
.header-container_div__right___cont a{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
@media (hover:hover){
  .header-container_div__right___cont a:hover{
    transform: translateY(-1px);
  }
}

/* Light mode: keep nav link text white on hover (avoid legacy green hover text) */
html:not([data-theme="dark"]) .header-container_div__right___cont a.nav-link:not(.nav-cta):hover{
  color: var(--pq-nav-link-color);
  background: var(--pq-nav-link-bg-hover);
  border-color: rgba(255,255,255,0.18);
}

/* Keep Sign In / Create Account premium */
.header-container_div__right___cont a:has(.span-5){
  background: rgba(255,255,255,.92) !important;
  color: var(--brandA) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
}
.header-container_div__right___cont a:has(.span-5) span{ color: var(--brandA) !important; }

.header-container_div__right___cont a:has(.span-6){
  background: linear-gradient(90deg, var(--brandB), var(--brandA)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.header-container_div__right___cont a:has(.span-6) span{ color: var(--ink, #fff) !important; }


/* --------------------------- Piquora Footer --------------------------- */
:root{
  --pq-brandA:#118169;
  --pq-brandB:#52C2AB;
  --pq-navy:#023668;
  --pq-white: #ffffff;
  --pq-soft: rgba(255,255,255,.08);
  --pq-soft2: rgba(255,255,255,.12);
  --pq-stroke: rgba(255,255,255,.18);
  --pq-shadow: 0 18px 55px rgba(16,24,40,.18);
  --pq-shadow2: 0 10px 28px rgba(16,24,40,.12);
}

.pq-footer{
  position: relative;
  background: var(--pq-navy);
  color: #fff;
  overflow: hidden;
}

.pq-footer__light{
  pointer-events: none;
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(900px 560px at 20% 20%, rgba(82,194,171,.22), transparent 60%),
    radial-gradient(800px 520px at 90% 10%, rgba(17,129,105,.18), transparent 55%),
    radial-gradient(780px 520px at 60% 90%, rgba(255,255,255,.10), transparent 55%);
  filter: blur(0px);
  opacity: .85;
}

.pq-footer__section{ position: relative; z-index: 1; }

.pq-footer__container{
  width: min(1200px, calc(100% - 30px));
  margin: 0 auto;
  padding: 20px 0 18px;
}

.pq-footer__grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 28px;
  align-items: start;
}

.pq-footer__logo{
  max-height: 104px;
  width: auto;
  display: block;
  margin-top: -24px;
  margin-left: -10px;
  margin-bottom: 10px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
}

.pq-footer__desc{
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  font-size: 15px;
  margin: 0 0 25px;
}

.pq-footer__title{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}

.pq-footer__links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.pq-footer__links a{
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-size: 15px;
  transition: color .18s ease, transform .18s ease;
}

.pq-footer__links a:hover{
  color: var(--pq-brandB);
  transform: translateX(2px);
}

.pq-footer__social{
  display: flex;
  gap: 10px;
}

.pq-social{
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pq-soft);
  border: 1px solid var(--pq-stroke);
  box-shadow: var(--pq-shadow2);
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.pq-social:hover{
  transform: translateY(-2px);
  background: rgba(90,194,160,.14);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

.pq-footer__stores{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pq-store-btn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  transition: transform .18s ease, filter .18s ease;
}

.pq-store-btn img{
  height: 40px;
  width: 135px;
  object-fit: contain;
  display: block;
}

.pq-store-btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }
.pq-store-btn:active{ transform: translateY(0px) scale(.99); }

.pq-footer__divider{
  position: relative;
  z-index: 1;
  width: calc(100% - 20px);
  max-width: 1200px;
  height: 1px;
  background: rgba(255,255,255,.25);
  margin: 10px auto 0;
}

.pq-footer__copyright{
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16px 14px 20px;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.pq-reg{
  font-size: 10px;
  margin-left: 2px;
  vertical-align: super;
}

.piq-workings-title__accent{
  color: var(--navy);
}

html[data-theme="dark"] .piq-workings-title__accent,
body.dark .piq-workings-title__accent,
html.force-dark .piq-workings-title__accent{
  color: var(--brandB);
}

/* ---------------- Mobile/Tablet Layout ---------------- */
.pq-only-desktop{ display: grid; }
.pq-only-mobile{ display: none; }

@media (max-width: 992px){
  .pq-only-desktop{ display: none; }
  .pq-only-mobile{ display: block; }
}

/* Tablet footer: show accordion groups side-by-side */
@media (min-width: 701px) and (max-width: 1024px){
  .pq-footer__accordion{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  .pq-summary{
    font-size: 15px;
  }
}

.pq-footer__mobileTop{
  margin-bottom: 14px;
}

.pq-footer__mobileTop .pq-footer__logo{
  max-height: 92px;
  margin-top: 0;
  margin-left: -10px;
}

.pq-footer__accordion{
  display: grid;
  gap: 10px;
}

.pq-details{
  border: 1px solid var(--pq-stroke);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.pq-summary{
  cursor: pointer;
  list-style: none;
  padding: 14px 14px;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pq-summary::-webkit-details-marker{ display: none; }

.pq-summary::after{
  content: "＋";
  font-weight: 900;
  opacity: .9;
}

.pq-details[open] .pq-summary{
  background: rgba(255,255,255,.06);
}

.pq-details[open] .pq-summary::after{
  content: "−";
}

/* Mobile footer accordion link lists */
.pq-body{
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.pq-body a{
  color: rgba(255,255,255,.92);
  text-decoration: none !important;
  font-size: 14.5px;
  font-weight: 500;
  display: block;
  width: 100%;
  transition: color .18s ease, transform .18s ease;
}

.pq-body a:visited{ color: rgba(255,255,255,.92); }

.pq-body a:hover{
  color: var(--pq-brandB);
  transform: translateX(2px);
  text-decoration: none !important;
}

.piq-badge{
  display:flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  color: var(--ink);
  backdrop-filter: blur(10px);
}

/* Badge icons: normalize Font Awesome baseline quirks
   so all icons (incl. brain) align consistently */
.piq-badge > i{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  line-height: 1;
  font-size: 14px;
  color: var(--brandA);
}
.piq-badge > i::before{
  line-height: 1;
}

/* Font Awesome brain glyph is optically right-heavy; nudge it left */
.piq-badge--ai > i{
  transform: translateX(-6px);
}

@media (max-width: 700px){
  .piq-badge--ai > i{
    transform: translateX(-14px);
  }
}

@media (max-width: 480px){
  .piq-badge > i{
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 13.5px;
  }
}
html[data-theme="dark"] .piq-badge,
body.dark .piq-badge {
  background: var(--card);
  color: var(--font-color);
  border: 1px solid var(--stroke);
}

.pq-footer__stores--mobile{
  margin-top: 10px;
}

/* ---------------- Coming Soon Modal ---------------- */
.pq-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.pq-modal[aria-hidden="false"]{ display: block; }

.pq-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

.pq-modal__card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 28px));
  background: rgba(255,255,255,.95);
  border-radius: 18px;
  box-shadow: var(--pq-shadow);
  border: 1px solid rgba(16,24,40,.10);
  overflow: hidden;
}

html[data-theme="dark"] .pq-modal__card,
body.dark .pq-modal__card,
html.force-dark .pq-modal__card{
  background: var(--card);
  border: 1px solid rgba(230,237,247,0.12);
}

.pq-modal__content{
  padding: 22px 18px 18px;
  color: #0b1220;
}

html[data-theme="dark"] .pq-modal__content,
body.dark .pq-modal__content,
html.force-dark .pq-modal__content{
  color: var(--font-color);
}

.pq-modal__content h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.pq-modal__content p{
  margin: 0;
  color: rgba(11,18,32,.78);
  line-height: 1.55;
}

html[data-theme="dark"] .pq-modal__content p,
body.dark .pq-modal__content p,
html.force-dark .pq-modal__content p{
  color: rgba(230,237,247,.78);
}

.pq-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.8);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-theme="dark"] .pq-modal__close,
body.dark .pq-modal__close,
html.force-dark .pq-modal__close{
  border: 1px solid rgba(230,237,247,0.12);
  background: rgba(11,18,32,0.52);
  color: var(--font-color);
}

.pq-modal__close:hover{
  background: #fff;
}

#pqGooglePlayBadge{
  height: 40px;
  width: 135px;
  object-fit: contain;
  display: block;
}

.pq-badge-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
}






/* Make the testimonial section stretch full width */
.testimonial-container_div__slider {
  width: 109%;
  max-width: 1200px;  /* optional: keeps it neat */
  margin: 0;
  padding: 0 18px;
  box-sizing: border-box;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.testimonial-container_div__slider .swiper {
  width: 100%;
  padding-bottom: 26px;
}

/* Remove arrow controls (swipe + dots only) */
.testimonial-container_div__slider .swiper-button-next,
.testimonial-container_div__slider .swiper-button-prev {
  display: none !important;
}

/* Pagination indicator (dots) */
.testimonial-container_div__slider .swiper-pagination {
  bottom: 8px;
}

.testimonial-container_div__slider .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(17, 129, 105, 0.28);
  opacity: 1;
}

.testimonial-container_div__slider .swiper-pagination-bullet-active {
  width: 20px;
  background: var(--brandB);
}

.testimonial-container_div__slider .swiper-wrapper {
  align-items: stretch;
}

.testimonial-container_div__slider .swiper-slide {
  height: auto;
  display: flex;
}

/* --- Mobile/tablet enhancements for testimonial, footer, modal --- */
@media (max-width: 700px) {
  .testimonial-container_div__slider {
    padding: 0 4vw;
  }
  .testimonial-container_div__slider .swiper-slide {
    flex-direction: column;
    align-items: center;
    padding: 0 0 18px 0;
  }
  .testimonial-card {
    max-width: 98vw;
    min-width: 0;
    margin: 0 auto 18px auto;
    padding: 20px 22px;
    font-size: 15px;
    border-radius: var(--radius);
    box-sizing: border-box;
  }
  .testimonial-card__img {
    width: 70px;
    height: 70px;
    margin: 0 auto 10px auto;
    left: 0;
    transform: none;
  }
  .testimonial-card__name {
    font-size: 15px;
    margin-bottom: 6px;
  }
  .testimonial-card__story {
    font-size: 14px;
    padding: 0;
  }
}

@media (max-width: 900px) {
  .pq-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}
@media (max-width: 600px) {
  .pq-footer__container {
    padding: 18px 0 10px;
  }
  .pq-footer__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pq-footer__logo {
    max-height: 92px;
    margin-top: 0;
    margin-left: -10px;
    margin-bottom: 6px;
  }
  .pq-footer__desc {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .pq-footer__links a {
    font-size: 14px;
  }
  .pq-footer__title {
    font-size: 18px;
  }
  .pq-footer__copyright {
    font-size: 12px;
    padding: 10px 4px 14px;
  }
  .pq-modal__card {
    width: min(98vw, 98vw);
    padding: 0 2vw;
    border-radius: 12px;
  }
  .pq-modal__content {
    padding: 16px 4px 12px;
    font-size: 14px;
  }
  .pq-modal__close {
    width: 34px;
    height: 34px;
    font-size: 18px;
    top: 6px;
    right: 6px;
  }
}

/* =========================================================
   Responsive polish (Mobile + Tablet)
   - Keeps desktop layout intact
   - Avoids fixed heights that break small screens
   ========================================================= */

@media (max-width: 1024px) {
  .intro-container_body,
  .selector-container_div,
  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .email-container_body {
    width: 97% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .testimonial-container_div {
    width: 98% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .workings-container {
    width: 100% !important;
  }

  .workings-container,
  .testimonial-container,
  .benefit-container {
    height: auto;
    padding: 34px 0;
  }

  .features-container {
    height: auto;
    padding: 18px 0 30px;
  }
}

@media (max-width: 700px) {
  /* Hero */
  .intro-container {
    margin-top: 2rem;
    padding-top: 12px;
  }
  .intro-container_body { gap: 12px; }
  .intro-container_body__div {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
  }
  .intro-container_body__div___left,
  .intro-container_body__div___right {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-left: 0 !important;
  }
  .intro-container_body__div___left span {
    width: auto;
    max-width: 560px;
  }
  .intro-container_body__div___middle figure img {
    width: min(386px, 88vw);
  }

  /* CTA buttons: full-width on mobile */
  .intro-container_body__div___left____button-container,
  .workings-container_body__buttons___container,
  .featurs-container_div__button___container,
  .benefit-container_div__right___button____container,
  .email-container_body__email-container___button {
    width: min(360px, 92vw) !important;
  }

  /* Hero CTA: add extra side padding on phone */
  .intro-container_body__div___left____button-container{
    width: min(360px, calc(100vw - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .testimonial-container_div__button___container {
    width: min(360px, 92vw);
  }

  /* Selector (search bar) */
  .selector-container { height: auto; padding: 18px 0 22px; }
  .selector-container_div {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: auto;
    gap: 12px;
    width: min(520px, 92vw) !important;
    box-sizing: border-box;

    padding: 16px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: var(--pq-nav-link-bg);
    box-shadow: var(--shadow2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .selector-container_div__selector { width: 100%; }

  .selector-container_div__selector___span{
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--font-color);
  }
  .selector-container_div__selector___flex {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--pq-mobile-link-bg);
    border: 1px solid var(--stroke);
  }
  .selector-container_div__selector___list {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    top: 56px;
  }
  .selector-container_div__button { width: 100% !important; }

  /* Workings */
  .workings-container_body { gap: 18px; }
  .workings-container_body__grid { gap: 14px; }
  .workings-container_body__grid___content {
    width: min(360px, 92vw);
  }
  .workings-container_body__buttons {
    flex-direction: column;
    gap: 12px;
  }
  a.workings-container_body__buttons___link,
  a.featurs-container_div__button___link {
    width: min(360px, 92vw) !important;
  }

  a.testimonial-container_div__button___link {
    width: min(360px, 92vw);
  }

  /* Features */
  .featurs-container_div { gap: 18px; }
  .featurs-container_div__details { margin-bottom: 10px; }
  .featurs-container_div__details___right { height: auto; }

  /* Benefit */
  .benefit-container_div { gap: 20px; }
  .benefit-container_div__right___span-2 { width: auto; max-width: 560px; }

  /* Testimonials */
  .testimonial-container_div { gap: 18px; }
  .testimonial-container_div__header { flex-direction: column; gap: 10px; }
  .testimonial-container_div__header___left,
  .testimonial-container_div__header___right { width: 100%; }
  .testimonial-container_div__button {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(520px, 92vw);
    margin: 0 auto;
  }
  a.testimonial-container_div__button___link,
  a.testimonial-container_div__button___container {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Newsletter */
  .email-container_body__email-container {
    width: min(520px, 92vw);
    height: auto;
    /* padding: 10px 10px; */
  }
  .email-container_body__email-container___form {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
  }
  .email-container_body__email-container___input {
    width: 100% !important;
    flex: 1;
    min-width: 0;
    padding: 0 12px 0 50px;
    box-sizing: border-box;
  }
  .email-container_body__email-container___button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  .intro-container_body__span-2 { font-size: clamp(18px, 6vw, 24px); }
  .piq-hero-badges { gap: 8px; }
  .piq-badge { font-size: 12.5px; padding: 7px 10px; }

  .selector-container_div__selector___flex :nth-child(1) { font-size: 12.5px; }
}

/* Restore newsletter as a functional email-submit section */
.email-container_body{
  width: min(900px, 97%) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.email-container_body__span-1{
  color: var(--ink) !important;
  text-align: center;
  font-size: clamp(22px, 2.3vw, 34px) !important;
  line-height: 1.18;
}

.piq-email-title__accent{
  color: var(--brandA) !important;
}

html[data-theme="dark"] .piq-email-title__accent,
body.dark .piq-email-title__accent{
  color: var(--brandB) !important;
}

.email-container_body__consent-note{
  color: var(--pq-badge-color) !important;
}

.email-container_body__consent-note a{
  color: var(--brandA) !important;
}

.email-container_body__email-container{
  position: relative;
  width: min(560px, 92vw) !important;
  min-height: 0 !important;
  margin-top: 0;
  padding: 0 !important;
  border: 1px solid var(--header-color) !important;
  border-radius: 100vmin !important;
  background: transparent !important;
  box-shadow: none !important;
}

.email-container_body__email-container___form{
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
}

.email-container_body__email-container___input,
.email-container_body__email-container input{
  width: 100% !important;
  min-height: 48px;
  padding: 0 124px 0 52px !important;
  border: 1px solid var(--piq-newsletter-input-border) !important;
  border-radius: 100vmin !important;
  background: var(--piq-newsletter-input-bg) !important;
  color: var(--piq-newsletter-input-text) !important;
  box-sizing: border-box;
}

/* Newsletter: keep floating label from overlapping input text */
.email-container_body__email-container .pq-field__input{
  padding-top: 18px !important;
  padding-bottom: 0 !important;
}

.email-container_body__email-container .pq-field__label{
  left: 52px !important;
}

.email-container_body__email-container___input::placeholder,
.email-container_body__email-container input::placeholder{
  color: var(--piq-newsletter-input-placeholder) !important;
}

.email-container_body__email-container___email{
  color: var(--header-color);
  left: 10px;
  z-index: 2;
}

.email-container_body__email-container___button{
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
  width: auto !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 52px !important;
  background: var(--header-color) !important;
  color: var(--font-color) !important;
  box-shadow: none !important;
}

@media (max-width: 700px){
  .email-container_body__email-container{
    width: min(520px, 92vw) !important;
  }

  .email-container_body__email-container___input,
  .email-container_body__email-container input{
    padding-right: 118px !important;
  }
}

/* =========================================================
  Selector form - mobile/tablet modern centered card
   (only affects <= 57em; desktop unchanged)
   ========================================================= */
@media (max-width: 57em){
  .selector-container{
    height: auto;
    padding: 20px 0 26px;
  }

  .selector-container_div{
    /* width: min(560px, 92vw) !important; */
    margin-left: auto !important;
    margin-right: auto !important;

    padding: 18px 16px !important;
    gap: 14px !important;

    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    box-shadow: var(--shadow2);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .selector-container_div__selector{
    width: 100%;
    gap: 8px;
    padding: 0;
    margin: 0;
  }

  .selector-container_div__selector___span{
    color: rgba(255,255,255,0.90);
    font-weight: 750;
    font-size: 12.5px;
    letter-spacing: 0.2px;
  }

  /* Use native select; keep legacy custom list hidden if present */
  .selector-container_div__selector___flex,
  .selector-container_div__selector___list{
    display: none !important;
  }

  .selector-container_div__selector___select{
    background: rgba(11,18,32,0.40) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.95) !important;
    box-shadow: 0 10px 24px rgba(2,54,104,0.16) !important;
    color-scheme: dark;
  }

  .selector-container_div__button{
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    margin: 10px 0 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow: var(--shadowBtn2) !important;
    letter-spacing: .2px;
  }
}

/* Mobile-only: show selectors side-by-side */
@media (max-width: 38em){
  .selector-container_div{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  /* Location spans full width (avoids awkward empty 4th cell) */
  .selector-container_div__selector:nth-child(3){
    grid-column: 1 / -1;
  }

  .selector-container_div__button{
    grid-column: 1 / -1;
    margin-top: 6px !important;
  }

  /* Workings section: two CTAs should be 50/50 side-by-side on mobile */
  .workings-container_body__buttons{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: min(520px, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  a.workings-container_body__buttons___link,
  a.workings-container_body__buttons___container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   Visual polish layer
   Preserves the existing layout/content and upgrades finish.
   ========================================================= */

:root{
  --piq-surface-soft: rgba(255,255,255,0.78);
  --piq-surface-strong: rgba(255,255,255,0.92);
  --piq-border-soft: rgba(11,18,32,0.08);
  --piq-border-strong: rgba(17,129,105,0.18);
  --piq-text-soft: #5f7289;
  --piq-shadow-xl: 0 28px 70px rgba(15,33,54,0.14);
  --piq-shadow-lg: 0 22px 48px rgba(15,33,54,0.12);
  --piq-shadow-card: 0 16px 28px rgba(15,33,54,0.10);
  --piq-hero-card-radius: 28px;
}

body{
  background:
    radial-gradient(900px 520px at 0% 4%, rgba(82,194,171,.18), transparent 58%),
    radial-gradient(860px 520px at 100% 0%, rgba(2,54,104,.12), transparent 54%),
    radial-gradient(920px 680px at 50% 100%, rgba(17,129,105,.07), transparent 60%),
    linear-gradient(180deg, #fbfffd 0%, #f5faf8 34%, #edf5f2 100%);
}

.intro-container,
.workings-container,
.features-container,
.benefit-container,
.testimonial-container,
.email-container{
  position: relative;
  z-index: 1;
}

.intro-container{
  /* margin-top: 88px; */
  padding: 32px 0 28px;
  overflow: visible;
}

.intro-container::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 22px));
  height: 100%;
  border-radius: 0;
  background:
    radial-gradient(620px 320px at 14% 8%, rgba(82,194,171,.18), transparent 64%),
    radial-gradient(520px 320px at 88% 10%, rgba(2,54,104,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--piq-shadow-xl);
  pointer-events: none;
}

.intro-container_body{
  position: relative;
  width: min(1220px, calc(100% - 28px)) !important;
  gap: 16px;
  box-sizing: border-box;
  padding: 24px 18px 22px;
}

.intro-container_body__span-1{
  border-left: 0;
  border-right: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 24px rgba(2,54,104,.08);
  color: var(--brandA);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.intro-container_body__span-2{
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 900 !important;
  color: var(--ink);
  transform: none;
}

.intro-container_body__subtext{
  display: block;
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--piq-text-soft);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.62;
  font-weight: 500;
  transform: none;
}

.piq-hero-badges{
  width: min(940px, calc(100% - 24px));
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 14px;
}

.piq-badge{
  display:flex;
  align-items:center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(11,18,32,.07);
  box-shadow: 0 10px 22px rgba(15,33,54,.08);
  color: #17324e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.intro-container_body__div{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.08fr) minmax(0, .82fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 12px;
  padding: 8px;
}

.intro-container_body__div > *{
  min-width: 0;
}

.intro-container_body__div___left,
.intro-container_body__div___right{
  align-self: stretch;
  padding: 24px 22px;
  border-radius: var(--piq-hero-card-radius);
  border: 1px solid var(--piq-border-soft);
  background: linear-gradient(180deg, var(--piq-surface-strong), var(--piq-surface-soft));
  box-shadow: var(--piq-shadow-lg);
  overflow: hidden;
}

.intro-container_body__div___left{
  gap: 22px;
  justify-content: space-between;
}

.intro-container_body__div___left span{
  width: auto;
}

.intro-container_body__div___right.piq-early-access-card{
  justify-self: end;
  width: min(420px, 100%);
  max-width: 100%;
}

.intro-container_body__features-list{
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.intro-container_body__features-list li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(11,18,32,.07);
}

.intro-container_body__features-list li:last-child{
  border-bottom: 0;
}

.intro-container_body__features-bullet{
  color: var(--brandA);
  font-size: 18px;
  line-height: 1;
}

.intro-container_body__features-text{
  color: #18324c;
  font-size: 14.5px;
  line-height: 1.62;
  font-weight: 600;
}

.intro-container_body__div___left____button-container{
  width: 100%;
  min-height: 56px;
  justify-content: space-between;
  padding: 0 18px 0 22px;
  border-radius: 18px;
  background: linear-gradient(90deg, #0f6f5e 0%, #118169 52%, #52c2ab 100%);
  box-shadow: 0 18px 28px rgba(17,129,105,.24);
  color: #fff;
}

.intro-container_body__div___left____button-container span{
  width: auto;
  color: inherit;
  font-size: 15px;
  font-weight: 800;
}

.intro-container_body__div___left____button-container_____right-arrow{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--brandA);
}

.intro-container_body__div___middle{
  display: grid;
  place-items: end center;
  padding: 24px 22px 0;
  border-radius: var(--piq-hero-card-radius);
  border: 1px solid var(--piq-border-soft);
  background:
    radial-gradient(420px 220px at 50% 10%, rgba(255,255,255,.62), transparent 72%),
    linear-gradient(180deg, #d8f2eb 0%, #b7e2d6 34%, #87cbbb 100%);
  box-shadow: var(--piq-shadow-xl);
  overflow: hidden;
}

.semi-circle::before{
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.54), rgba(17,129,105,.72) 55%, rgba(2,54,104,.78) 100%);
}

.intro-container_body__div___middle figure img{
  width: min(380px, 100%);
}

.intro-container_body__div___right{
  gap: 14px;
  text-align: left;
}

.intro-container_body__div___right____fives-star-rating{
  width: auto;
  display: inline-flex;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,215,0,.12);
}

.piq-early-access-card__title{
  color: #102742;
  font-size: 28px;
  line-height: 1.14;
  font-weight: 900;
}

.intro-container_body__div___right____happy-customer-span,
.piq-early-access-card__note{
  color: var(--piq-text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.selector-container{
  height: auto;
  padding: 18px 0 30px;
  background: transparent;
}

.selector-container_div{
  width: min(1220px, calc(100% - 28px)) !important;
  min-height: 108px;
  padding: 18px 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, #0d2844 0%, #123b66 44%, #118169 100%);
  box-shadow: var(--piq-shadow-xl);
  color: #fff;
}

.selector-container_div__selector___span{
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.selector-container_div__selector___select{
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.selector-container_div__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.94) !important;
  color: #0d2844 !important;
  font-weight: 800;
  box-shadow: 0 16px 24px rgba(0,0,0,.16);
}

.workings-container,
.features-container,
.benefit-container,
.testimonial-container,
.email-container{
  height: auto;
  padding: 18px 0;
  background: transparent;
}

.workings-container_body,
.featurs-container_div,
.benefit-container_div,
.testimonial-container_div,
.email-container_body{
  width: min(1220px, calc(100% - 28px)) !important;
  margin-left: auto;
  margin-right: auto;
}

.workings-container_body{
  height: auto;
  padding: 38px;
  border-radius: 32px;
  background: linear-gradient(135deg, #0d5a4d 0%, #0f3a60 52%, #16253f 100%);
  box-shadow: var(--piq-shadow-xl);
  gap: 30px;
}

.workings-container_body__header{
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.workings-container_body__header___left span{
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  font-weight: 900;
}

.workings-container_body__header___right{
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.72;
}

.workings-container_body__grid{
  gap: 16px;
  justify-content: space-between;
}

.workings-container_body__grid___content{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,248,245,.86));
  box-shadow: 0 20px 30px rgba(0,0,0,.12);
}

.workings-container_body__grid___content____span-1{
  font-weight: 800;
  color: #102742;
}

.workings-container_body__grid___content____span-2{
  color: #5c6f86;
  font-size: 13px;
  line-height: 1.58;
}

.featurs-container_div,
.benefit-container_div,
.testimonial-container_div,
.email-container_body{
  padding: 38px;
  border-radius: 32px;
  border: 1px solid var(--piq-border-soft);
  box-shadow: var(--piq-shadow-lg);
}

.featurs-container_div,
.benefit-container_div{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,251,248,.92));
}

.featurs-container_div__span,
.benefit-container_div__right___span-1,
.testimonial-container_div__header___left,
.email-container_body__span-1{
  color: #102742;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.1;
  font-weight: 900;
}

.featurs-container_div__details{
  gap: 18px;
}

.piq-feature-item{
  padding: 20px 20px 18px;
  border-radius: 24px;
  border: 1px solid rgba(11,18,32,.07);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 24px rgba(15,33,54,.06);
}

.piq-feature-title{
  display: block;
  margin-bottom: 10px;
  color: #102742;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.piq-feature-desc,
.benefit-container_div__right___span-2{
  color: var(--piq-text-soft);
  font-size: 15px;
  line-height: 1.72;
}

.featurs-container_div__button___container,
.benefit-container_div__right___button____container,
.testimonial-container_div__button___container,
.workings-container_body__buttons___container,
.workings-container_body__buttons___link,
.featurs-container_div__button___link{
  min-height: 52px;
  border-radius: 16px;
  font-weight: 800;
}

.benefit-container_div{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 24px;
}

.benefit-container_div__left___container{
  position: relative;
  min-height: 460px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 30px rgba(15,33,54,.12);
}

.benefit-container_div__left___img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefit-container_div__right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.testimonial-container_div{
  background:
    radial-gradient(600px 280px at 12% 8%, rgba(82,194,171,.18), transparent 58%),
    linear-gradient(135deg, #10233c 0%, #0d2d4d 58%, #174a72 100%);
  box-shadow: var(--piq-shadow-xl);
}

.testimonial-container_div__header{
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.testimonial-container_div__header___left,
.testimonial-container_div__header___right{
  color: #fff;
}

.testimonial-container_div__header___right{
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.72;
}

.testimonial-container_div__button___container{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

.email-container_body{
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(82,194,171,.20), transparent 54%),
    linear-gradient(135deg, #0b1628 0%, #0c2742 50%, #118169 100%);
  box-shadow: var(--piq-shadow-xl);
}

.email-container_body__span-1,
.email-container_body__consent-note,
.email-container_body__consent-note a{
  color: #fff;
}

.email-container_body__email-container{
  width: min(720px, 100%);
  min-height: 80px;
  margin-top: 20px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 28px rgba(0,0,0,.14);
}

.email-container_body__email-container___form{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.email-container_body__email-container___input{
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.92);
  color: #102742;
}

.email-container_body__email-container___button{
  position: static;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 16px;
  background: #fff;
  color: #0d2844;
  font-weight: 800;
  box-shadow: 0 16px 28px rgba(0,0,0,.14);
}

@media (max-width: 1024px){
  :root{ --pq-card-gap: 14px; }

  .intro-container_body__div{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .intro-container_body__div___middle{
    grid-column: 1 / -1;
  }

  .benefit-container_div{
    grid-template-columns: 1fr;
  }

  .workings-container_body__header,
  .testimonial-container_div__header{
    flex-direction: column;
    align-items: flex-start;
  }

  .workings-container_body__header___left,
  .workings-container_body__header___right,
  .testimonial-container_div__header___left,
  .testimonial-container_div__header___right{
    width: 100%;
  }
}

@media (min-width: 1025px){
  .benefit-container_div{
    width: min(1320px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(280px, 380px) minmax(620px, 1fr);
    gap: 56px;
    align-items: center;
    padding: 42px 48px;
  }

  .benefit-container_div__left{
    width: 100%;
    justify-content: flex-start;
  }

  .benefit-container_div__left___container{
    width: 100%;
    min-height: 540px;
  }

  .benefit-container_div__right{
    width: 100%;
    max-width: none;
    gap: 20px;
  }

  .benefit-container_div__right___span-1{
    max-width: 760px;
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.04;
  }

  .benefit-container_div__right___span-2{
    max-width: 720px;
    font-size: 16px;
  }

  .benefit-container_div__right___achievement{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pq-card-gap);
    max-width: 760px;
  }
}

@media (max-width: 700px){
  .intro-container{
    margin-top: calc(82px + var(--pq-safe-top));
    padding-top: 20px;
  }

  .intro-container::before{
    width: calc(100% - 20px);
    border-radius: 0;
  }

  .intro-container_body{
    width: calc(100% - 20px) !important;
    padding-top: 20px;
  }

  .intro-container_body__span-2{
    font-size: clamp(34px, 10vw, 54px);
  }

  .intro-container_body__div{
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .intro-container_body__div___left,
  .intro-container_body__div___right,
  .intro-container_body__div___middle,
  .selector-container_div,
  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body{
    width: calc(100% - 20px) !important;
    padding: 22px 18px;
    border-radius: 26px;
  }

  .intro-container_body__div___middle{
    min-height: auto;
  }

  .workings-container_body__grid,
  .benefit-container_div__right___achievement{
    grid-template-columns: 1fr;
  }

  .email-container_body__email-container___form{
    grid-template-columns: 1fr;
  }

  .email-container_body__email-container___button{
    width: 100%;
  }
}

/* =========================================================
   Final dark-mode cleanup
   - Keeps late premium overrides theme-aware
   ========================================================= */

:root{
  --piq-surface-soft: rgba(255,255,255,0.78);
  --piq-surface-strong: rgba(255,255,255,0.92);
  --piq-surface-card: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,248,245,.86));
  --piq-surface-card-strong: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,251,248,.92));
  --piq-surface-item: rgba(255,255,255,.92);
  --piq-surface-item-border: rgba(11,18,32,.07);
  --piq-text-strong: #102742;
  --piq-text-muted-strong: #5c6f86;
  --piq-text-soft: #5f7289;
  --pq-card-gap: 16px;
  --piq-newsletter-input-bg: rgba(255,255,255,.92);
  --piq-newsletter-input-border: rgba(255,255,255,.12);
  --piq-newsletter-input-text: #102742;
  --piq-newsletter-input-placeholder: var(--footer-color);
  --piq-newsletter-icon-bg: #c0fef3;
  --piq-newsletter-button-bg: linear-gradient(90deg, var(--brandB), var(--brandA));
  --piq-newsletter-button-text: #ffffff;
  --piq-rating-star-active: #ffd700;
  --piq-rating-star-inactive: #b0b0b0;
  --piq-rating-chip-bg: rgba(255,215,0,.12);
}

html[data-theme="dark"],
body.dark,
html.force-dark{
  --piq-surface-soft: rgba(13,24,42,.94);
  --piq-surface-strong: rgba(17,27,46,.98);
  --piq-surface-card: linear-gradient(180deg, rgba(17,27,46,.96), rgba(12,22,38,.92));
  --piq-surface-card-strong: linear-gradient(180deg, rgba(17,27,46,.98), rgba(13,24,42,.94));
  --piq-surface-item: rgba(11,18,32,.34);
  --piq-surface-item-border: rgba(230,237,247,.12);
  --piq-text-strong: var(--font-color);
  --piq-text-muted-strong: rgba(230,237,247,.74);
  --piq-text-soft: rgba(230,237,247,.74);
  --piq-shadow-xl: 0 28px 70px rgba(0,0,0,0.55);
  --piq-shadow-lg: 0 22px 48px rgba(0,0,0,0.45);
  --piq-shadow-card: 0 16px 28px rgba(0,0,0,0.35);
  --piq-newsletter-input-bg: rgba(11,18,32,.72);
  --piq-newsletter-input-border: rgba(230,237,247,.18);
  --piq-newsletter-input-text: var(--font-color);
  --piq-newsletter-input-placeholder: rgba(230,237,247,.62);
  --piq-newsletter-icon-bg: rgba(82,194,171,.16);
  --piq-newsletter-button-bg: linear-gradient(90deg, var(--brandB), var(--brandA));
  --piq-newsletter-button-text: var(--font-color);
  --piq-rating-star-inactive: rgba(230,237,247,.38);
  --piq-rating-chip-bg: rgba(255,215,0,.16);
}

html[data-theme="dark"] .intro-container::before,
body.dark .intro-container::before,
html.force-dark .intro-container::before{
  background:
    radial-gradient(620px 320px at 14% 8%, rgba(82,194,171,.12), transparent 64%),
    radial-gradient(520px 320px at 88% 10%, rgba(2,54,104,.18), transparent 58%),
    linear-gradient(180deg, var(--piq-surface-strong), var(--piq-surface-soft));
  border-color: var(--piq-surface-item-border);
  box-shadow: var(--piq-shadow-xl);
}

html[data-theme="dark"] .intro-container_body__span-1,
body.dark .intro-container_body__span-1,
html.force-dark .intro-container_body__span-1{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--piq-surface-item-border);
  color: var(--pq-badge-color);
  box-shadow: var(--piq-shadow-card);
}

html[data-theme="dark"] .piq-badge,
body.dark .piq-badge,
html.force-dark .piq-badge{
  background: var(--pq-badge-bg);
  color: var(--pq-badge-color);
  border-color: var(--piq-surface-item-border);
}

html[data-theme="dark"] .workings-container_body__grid___content____img,
body.dark .workings-container_body__grid___content____img,
html.force-dark .workings-container_body__grid___content____img{
  color: var(--brandB);
}

html[data-theme="dark"] .featurs-container_div__details___right,
body.dark .featurs-container_div__details___right,
html.force-dark .featurs-container_div__details___right{
  border-left-color: var(--piq-surface-item-border);
}

.piq-rating-star.is-active{
  color: var(--piq-rating-star-active);
}

.piq-rating-star.is-inactive{
  color: var(--piq-rating-star-inactive);
}

.intro-container_body__div___right____fives-star-rating{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--piq-rating-chip-bg);
}

.workings-container_body__grid___content{
  border-color: var(--piq-surface-item-border);
  background: var(--piq-surface-card);
  box-shadow: var(--piq-shadow-card);
}

.featurs-container_div,
.benefit-container_div{
  background: var(--piq-surface-card-strong);
}

.piq-feature-item{
  border-color: var(--piq-surface-item-border);
  background: var(--piq-surface-item);
}

.workings-container_body__grid___content____span-1,
.featurs-container_div__span,
.benefit-container_div__right___span-1,
.email-container_body__span-1,
.piq-feature-title,
.piq-early-access-card__title{
  color: var(--piq-text-strong);
}

.workings-container_body__grid___content____span-2,
.benefit-container_div__right___span-2,
.piq-feature-desc,
.intro-container_body__div___right____happy-customer-span,
.piq-early-access-card__note{
  color: var(--piq-text-muted-strong);
}

.email-container_body__email-container___input,
.email-container_body__email-container input{
  border: 1px solid var(--piq-newsletter-input-border) !important;
  background: var(--piq-newsletter-input-bg) !important;
  color: var(--piq-newsletter-input-text) !important;
}

.email-container_body__email-container___input::placeholder,
.email-container_body__email-container input::placeholder{
  color: var(--piq-newsletter-input-placeholder) !important;
}

.email-container_body__email-container___email{
  background-color: var(--piq-newsletter-icon-bg);
}

.email-container_body__email-container___button{
  background: var(--piq-newsletter-button-bg) !important;
  color: var(--piq-newsletter-button-text) !important;
}

.intro-container_body__span-1{
  color: var(--piq-text-strong);
  background: linear-gradient(180deg, var(--piq-surface-strong), var(--piq-surface-soft));
  border-color: var(--piq-surface-item-border);
}

.intro-container_body__div___left,
.intro-container_body__div___right{
  background: var(--piq-surface-card-strong) !important;
  border-color: var(--piq-surface-item-border) !important;
  box-shadow: var(--piq-shadow-lg) !important;
}

.intro-container_body__features-list li{
  border-bottom-color: var(--piq-surface-item-border) !important;
}

.intro-container_body__features-text,
.intro-container_body__div___right____happy-customer-number-span{
  color: var(--piq-text-strong) !important;
}

html[data-theme="dark"] .intro-container_body__div___middle,
body.dark .intro-container_body__div___middle,
html.force-dark .intro-container_body__div___middle{
  border-color: var(--piq-surface-item-border);
  background:
    radial-gradient(420px 220px at 50% 10%, rgba(255,255,255,.08), transparent 72%),
    linear-gradient(180deg, rgba(17,27,46,.98) 0%, rgba(13,24,42,.96) 34%, rgba(12,36,48,.94) 100%);
}

html[data-theme="dark"] .semi-circle::before,
body.dark .semi-circle::before,
html.force-dark .semi-circle::before{
  background: radial-gradient(circle at 50% 36%, rgba(82,194,171,.16), rgba(17,129,105,.42) 55%, rgba(2,54,104,.72) 100%);
}

.intro-container_body__div___left____button-container{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 190px !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  justify-self: center !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  text-decoration: none !important;
}

.intro-container_body__div___left____button-container span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.intro-container_body__div___left____button-container_____right-arrow{
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
}

@media (max-width: 700px){
  .intro-container_body__div___left____button-container{
    width: 100% !important;
  }
}

/* =========================================================
   Responsive redesign layer
   - Tablet and phone get a deliberate layout, not a compressed desktop fallback
   ========================================================= */

@media (max-width: 992px){
  :root{
    --pq-responsive-wrap: min(760px, calc(100vw - 32px - var(--pq-safe-left) - var(--pq-safe-right)));
  }

  body{
    overflow-x: hidden;
  }

  .header-container{
    height: auto !important;
  }

  .header-container_div{
    width: var(--pq-responsive-wrap) !important;
    min-height: 68px;
    padding: 10px 0 !important;
    padding-left: var(--pq-safe-left) !important;
    padding-right: var(--pq-safe-right) !important;
    box-sizing: border-box;
  }

  .header-container_div__left img{
    width: 176px !important;
    height: auto !important;
  }

  .find-soulmate-pill{
    margin-right: 0 !important;
    padding: 10px 16px !important;
    min-width: 0 !important;
    font-size: 0.95rem !important;
  }

  .piq-mobile-nav{
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 6px;
    z-index: 10002;
  }

  .piq-mobile-nav .eclipse-menu{
    margin-right: 0;
  }

  .piq-mobile-nav-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(240px, calc(100vw - 24px));
    padding: 8px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .piq-mobile-nav-item{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0.1px;
  }

  .piq-mobile-nav-item:hover{
    background: var(--pq-nav-link-bg-hover);
  }

  .intro-container{
    margin-top: calc(86px + var(--pq-safe-top)) !important;
    padding: 16px 0 8px !important;
  }

  .intro-container::before{
    width: var(--pq-responsive-wrap) !important;
    border-radius: 0 !important;
  }

  .intro-container_body{
    width: var(--pq-responsive-wrap) !important;
    gap: 18px !important;
    padding: 18px 0 8px !important;
  }

  .intro-container_body__span-1{
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 14px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.1em !important;
  }

  .intro-container_body__span-2{
    max-width: 12ch !important;
    margin: 0 auto !important;
    font-size: clamp(38px, 7.2vw, 56px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  .intro-container_body__subtext{
    display: block;
    max-width: 32ch;
    margin: 14px auto 0;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .piq-hero-badges{
    width: var(--pq-responsive-wrap) !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .piq-badge{
    min-height: 42px;
    padding: 8px 10px !important;
  }

  .intro-container_body__div{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .intro-container_body__div___middle,
  .intro-container_body__div___right,
  .intro-container_body__features-list.piq-mobile-only,
  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body{
    width: var(--pq-responsive-wrap) !important;
  }

  .intro-container_body__div___middle{
    order: 1;
    min-height: 0 !important;
    padding: 18px 18px 0 !important;
    border-radius: 28px !important;
  }

  .intro-container_body__div___middle figure img{
    width: min(380px, 88vw) !important;
  }

  .intro-container_body__div___right{
    order: 2;
    padding: 24px 20px !important;
    text-align: center !important;
  }

  .intro-container_body__div___right____fives-star-rating{
    margin: 0 auto 4px !important;
  }

  .piq-early-access-card__title{
    font-size: clamp(26px, 4.8vw, 34px) !important;
  }

  .intro-container_body__div___right____happy-customer-span,
  .piq-early-access-card__note{
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }

  .intro-container_body__features-list.piq-mobile-only{
    order: 3;
    display: grid !important;
    gap: 0 !important;
    margin: 0 auto !important;
    padding: 20px !important;
    border-radius: 26px;
    border: 1px solid var(--piq-surface-item-border);
    background: var(--piq-surface-card-strong);
    box-shadow: var(--piq-shadow-card);
    list-style: none;
  }

  .intro-container_body__features-list.piq-mobile-only li{
    padding: 14px 0 !important;
  }

  .intro-container_body__div___left{
    order: 4;
    width: var(--pq-responsive-wrap) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-content: center !important;
  }

  .intro-container_body__div___left > span{
    display: none !important;
  }

  .intro-container_body__div___left____button-container{
    width: min(228px, 100%) !important;
    min-height: 50px !important;
    margin: 0 auto !important;
  }

  .selector-container{
    height: auto !important;
    padding: 10px 0 24px !important;
    background: transparent !important;
    z-index: auto !important;
  }

  .selector-container_div{
    width: var(--pq-responsive-wrap) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #0f3153 0%, #124872 46%, #118169 100%) !important;
    box-shadow: var(--shadow) !important;
  }

  .selector-container_div__selector,
  .selector-container_div__selector:nth-child(3){
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .selector-container_div__selector:nth-child(3),
  .selector-container_div__button{
    grid-column: 1 / -1 !important;
  }

  .selector-container_div__selector___span{
    color: rgba(255,255,255,.92) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
  }

  .selector-container_div__selector___select{
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    background: rgba(11,18,32,.26) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.96) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
  }

  .selector-container_div__button{
    width: 100% !important;
    min-height: 52px !important;
    margin: 6px 0 0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: var(--navy) !important;
    border: 0 !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.16) !important;
  }

  .workings-container,
  .features-container,
  .benefit-container,
  .testimonial-container,
  .email-container{
    height: auto !important;
    padding: 16px 0 !important;
  }

  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body{
    padding: 24px 20px !important;
    border-radius: 28px !important;
  }

  .workings-container_body__header,
  .testimonial-container_div__header{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .workings-container_body__header___left,
  .workings-container_body__header___right,
  .testimonial-container_div__header___left,
  .testimonial-container_div__header___right{
    width: 100% !important;
  }

  .workings-container_body__grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .workings-container_body__grid___content{
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 16px !important;
  }

  .featurs-container_div__details,
  .benefit-container_div{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .benefit-container_div__left___container{
    min-height: 360px !important;
    border-radius: 22px !important;
  }

  .benefit-container_div__right___achievement{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: none !important;
  }

  .featurs-container_div__button,
  .benefit-container_div__right___button,
  .testimonial-container_div__button{
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .featurs-container_div__button___link,
  .featurs-container_div__button___container,
  .benefit-container_div__right___button____container,
  .testimonial-container_div__button___container,
  .workings-container_body__buttons___link,
  .workings-container_body__buttons___container{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .email-container_body{
    gap: 16px !important;
  }

  .email-container_body__span-1{
    font-size: clamp(24px, 5.4vw, 34px) !important;
  }

  .email-container_body__email-container{
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 24px !important;
    border: 1px solid var(--piq-surface-item-border) !important;
    background: var(--piq-surface-card) !important;
    box-shadow: var(--piq-shadow-card) !important;
  }

  .email-container_body__email-container___form{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .email-container_body__email-container___input,
  .email-container_body__email-container input{
    min-height: 50px !important;
    padding: 0 16px 0 48px !important;
  }

  .email-container_body__email-container___button{
    position: static !important;
    width: auto !important;
    min-width: 138px;
    min-height: 50px !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 24px rgba(17,129,105,.16) !important;
  }

  .email-container_body__email-container___email{
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
  }

  .email-container_body__consent-note{
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
  }

  .match-container{
    height: auto !important;
  }

  .pq-footer__container{
    width: var(--pq-responsive-wrap) !important;
    padding: 22px 0 16px !important;
  }

  .pq-footer__mobileTop{
    display: grid;
    gap: 14px;
    padding: 6px 2px 4px;
  }

  .pq-footer__mobileTop .pq-footer__logo{
    margin: 0 0 2px;
    justify-self: start;
    max-height: 82px;
  }

  .pq-footer__desc{
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
  }

  .pq-footer__social{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pq-details{
    border-radius: 16px;
  }

  .pq-summary{
    padding: 16px;
    font-size: 16px;
  }

  .pq-body{
    padding: 0 16px 16px;
    gap: 12px;
  }

  .pq-footer__stores--mobile{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .pq-store-btn img,
  #pqGooglePlayBadge{
    width: 100% !important;
    height: 44px !important;
  }
}

@media (max-width: 700px){
  :root{
    --pq-responsive-wrap: calc(100vw - 20px - var(--pq-safe-left) - var(--pq-safe-right));
    --pq-card-gap: 12px;
  }

  .intro-container_body__span-2{
    max-width: 11ch !important;
    font-size: clamp(30px, 10.2vw, 44px) !important;
  }

  .piq-hero-badges{
    width: var(--pq-responsive-wrap) !important;
  }

  .selector-container_div{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  .selector-container_div__selector:nth-child(3),
  .selector-container_div__button{
    grid-column: auto !important;
  }

  .workings-container_body__grid,
  .benefit-container_div__right___achievement{
    grid-template-columns: 1fr !important;
  }

  .email-container_body__email-container___form{
    grid-template-columns: 1fr !important;
  }

  .email-container_body__email-container___button{
    width: 100% !important;
    min-width: 0 !important;
  }

  .pq-footer__stores--mobile{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px){
  .intro-container_body__span-2{
    max-width: 10ch !important;
    font-size: clamp(28px, 10vw, 38px) !important;
  }

  .piq-badge{
    font-size: 12px !important;
  }

  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body,
  .intro-container_body__div___middle,
  .intro-container_body__div___right,
  .intro-container_body__features-list.piq-mobile-only{
    border-radius: 24px !important;
  }
}

/* =========================================================
   Small-screen overflow hardening
   - Prevent children from pushing past card edges on phone/tablet
   ========================================================= */

@media (max-width: 992px){
  .intro-container_body,
  .intro-container_body__div___middle,
  .intro-container_body__div___right,
  .intro-container_body__features-list.piq-mobile-only,
  .selector-container_div,
  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body,
  .pq-footer__container,
  .pq-modal__card,
  .pq-smartmatch-modal__dialog{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .intro-container_body__div,
  .intro-container_body__div > *,
  .featurs-container_div__details,
  .featurs-container_div__details > *,
  .benefit-container_div,
  .benefit-container_div > *,
  .workings-container_body__grid,
  .workings-container_body__grid > *,
  .selector-container_div,
  .selector-container_div > *,
  .email-container_body__email-container___form,
  .email-container_body__email-container___form > *,
  .pq-footer__stores--mobile,
  .pq-footer__stores--mobile > *{
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .intro-container_body__span-2,
  .intro-container_body__subtext,
  .intro-container_body__features-text,
  .piq-early-access-card__title,
  .intro-container_body__div___right____happy-customer-span,
  .piq-early-access-card__note,
  .workings-container_body__header___left span,
  .workings-container_body__header___right,
  .workings-container_body__grid___content____span-1,
  .workings-container_body__grid___content____span-2,
  .featurs-container_div__span,
  .piq-feature-title,
  .piq-feature-desc,
  .benefit-container_div__right___span-1,
  .benefit-container_div__right___span-2,
  .testimonial-container_div__header___left,
  .testimonial-container_div__header___right,
  .email-container_body__span-1,
  .email-container_body__consent-note,
  .pq-footer__desc,
  .pq-summary,
  .pq-body a,
  .pq-smartmatch-modal__title,
  .pq-smartmatch-modal__subtitle,
  .pq-smartmatch-modal__prefValue,
  .pq-smartmatch-modal__found{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .piq-hero-badges{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .piq-badge{
    white-space: normal !important;
    word-break: break-word;
  }

  .intro-container_body__div___middle,
  .intro-container_body__div___right,
  .intro-container_body__features-list.piq-mobile-only,
  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body{
    overflow: hidden !important;
  }

  .pq-store-btn{
    width: 100%;
    max-width: 100%;
  }

  .pq-store-btn img,
  #pqGooglePlayBadge{
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 700px){
  .intro-container_body,
  .intro-container_body__div___middle,
  .intro-container_body__div___right,
  .intro-container_body__features-list.piq-mobile-only,
  .selector-container_div,
  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body,
  .pq-footer__container{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .email-container_body__email-container{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   Hero mobile stack fix
   - Force full-width cards and prevent the image card sharing a row
   ========================================================= */

@media (max-width: 700px){
  .intro-container_body__div{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .intro-container_body__div___middle,
  .intro-container_body__div___right,
  .intro-container_body__features-list.piq-mobile-only,
  .intro-container_body__div___left{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  .piq-early-access-card,
  .intro-container_body__div___right{
    width: 100% !important;
    max-width: 100% !important;
  }

  .intro-container_body__features-list.piq-mobile-only{
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 20px 18px !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    clear: both !important;
  }

  .intro-container_body__div___middle{
    order: 1 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  .intro-container_body__div___middle figure,
  .intro-container_body__div___middle .semi-circle,
  .intro-container_body__div___middle .figure-slider{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .intro-container_body__div___middle figure img{
    width: min(320px, 100%) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .intro-container_body__div___right{
    order: 2 !important;
    box-sizing: border-box !important;
  }

  .intro-container_body__div___left{
    order: 4 !important;
  }

  .intro-container_body__div___right + .intro-container_body__features-list.piq-mobile-only{
    margin-top: 16px !important;
  }
}

/* =========================================================
   Final mobile experience cleanup
   - Single, predictable mobile layer that wins over earlier conflicts
   ========================================================= */

@media (max-width: 700px){
  body{
    overflow-x: hidden;
  }

  .header-container{
    height: auto !important;
  }

  .header-container_div{
    width: var(--pq-responsive-wrap) !important;
    min-height: 64px;
    padding: 10px 0 !important;
    padding-left: var(--pq-safe-left) !important;
    padding-right: var(--pq-safe-right) !important;
    box-sizing: border-box;
  }

  .header-container_div__left img{
    width: 168px !important;
    height: auto !important;
  }

  .find-soulmate-pill{
    margin-right: 0 !important;
    padding: 10px 16px !important;
    min-width: 0 !important;
    font-size: 0.94rem !important;
  }

  .intro-container{
    margin-top: calc(74px + var(--pq-safe-top)) !important;
    padding: 8px 0 6px !important;
  }

  .intro-container_body{
    width: 100% !important;
    gap: 14px !important;
    padding: 10px 0 10px !important;
    padding-left: calc(10px + var(--pq-safe-left)) !important;
    padding-right: calc(10px + var(--pq-safe-right)) !important;
    box-sizing: border-box;
    align-items: center !important;
  }

  .intro-container_body__span-1{
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }

  .intro-container_body__span-2{
    /* Center relative to the padded hero wrapper (safe-area aware) */
    max-width: min(100%, 28ch) !important;
    margin: 0 auto !important;
    font-size: clamp(28px, 9.4vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    text-align: center !important;
    transform: translateX(-3px);
  }

  .intro-container_body__span-2 .piq-mobile-only{
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  .piq-hero-line2{
    white-space: nowrap;
    font-size: 0.70em;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  .intro-container_body__subtext{
    max-width: 30ch;
    margin: 14px auto 0;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .piq-hero-badges{
    width: calc(100% - 20px) !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .piq-badge{
    min-height: 42px;
    padding: 8px 10px !important;
  }

  .intro-container_body__div{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .intro-container_body__div___middle{
    order: 1;
    width: calc(100% - 20px) !important;
    min-height: 0 !important;
    padding: 16px 16px 0 !important;
  }

  .intro-container_body__div___middle figure img{
    width: min(320px, 88vw) !important;
  }

  .intro-container_body__div___right{
    order: 2;
    width: calc(100% - 20px) !important;
    padding: 20px 18px !important;
    text-align: center !important;
  }

  .intro-container_body__div___right____fives-star-rating{
    align-self: center;
    margin: 0 auto;
  }

  .piq-early-access-card__title{
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  .intro-container_body__div___right____happy-customer-span,
  .piq-early-access-card__note{
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
  }

  .intro-container_body__features-list.piq-mobile-only{
    order: 3;
    width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 18px 18px !important;
    border-radius: 24px;
    border: 1px solid var(--piq-surface-item-border);
    background: var(--piq-surface-card-strong);
    box-shadow: var(--piq-shadow-card);
    list-style: none;
  }

  .intro-container_body__div___left{
    order: 4;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-content: center !important;
  }

  .intro-container_body__div___left > span{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none !important;
  }

  .intro-container_body__div___left____button-container{
    width: min(220px, 100%) !important;
    min-height: 48px !important;
    margin: 0 auto !important;
  }

  .selector-container{
    height: auto !important;
    padding: 10px 0 22px !important;
    background: transparent !important;
    z-index: auto !important;
  }

  .selector-container_div{
    width: calc(100% - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }

  .selector-container_div__selector,
  .selector-container_div__selector:nth-child(3){
    grid-column: auto !important;
    width: 100% !important;
  }

  .selector-container_div__button{
    grid-column: auto !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 6px 0 0 !important;
    justify-self: stretch !important;
  }

  .workings-container,
  .features-container,
  .benefit-container,
  .testimonial-container,
  .email-container{
    padding: 14px 0 !important;
    height: auto !important;
  }

  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body{
    width: calc(100% - 20px) !important;
    padding: 22px 18px !important;
    border-radius: 24px !important;
  }

  .workings-container_body__header,
  .testimonial-container_div__header{
    gap: 12px !important;
  }

  .workings-container_body__header___left,
  .workings-container_body__header___right,
  .testimonial-container_div__header___left,
  .testimonial-container_div__header___right{
    width: 100% !important;
    text-align: left !important;
  }

  .workings-container_body__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .workings-container_body__grid___content{
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 16px !important;
  }

  .featurs-container_div__details,
  .benefit-container_div{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .benefit-container_div__left___container{
    min-height: 320px !important;
    border-radius: 22px !important;
  }

  .benefit-container_div__right___achievement{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .featurs-container_div__button,
  .benefit-container_div__right___button,
  .testimonial-container_div__button{
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .featurs-container_div__button___link,
  .featurs-container_div__button___container,
  .benefit-container_div__right___button____container,
  .testimonial-container_div__button___container{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  .email-container_body{
    width: calc(100% - 20px) !important;
    padding: 0 !important;
  }

  .email-container_body__span-1{
    font-size: clamp(18px, 6.0vw, 19px) !important;
  }

  .email-container_body__email-container{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border-radius: 24px !important;
  }

  .email-container_body__email-container___form{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .email-container_body__email-container___input,
  .email-container_body__email-container input{
    min-height: 50px !important;
    padding: 0 16px 0 48px !important;
  }

  .email-container_body__email-container___button{
    position: static !important;
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  .email-container_body__email-container___email{
    top: 25px;
    transform: translateY(-50%);
  }

  .pq-footer__container{
    width: calc(100% - 24px);
  }
}

@media (max-width: 420px){
  .intro-container_body__span-2{
    /* Wider headline on small phones so the 2nd line can stay centered + single-line */
    max-width: min(92vw, 28ch) !important;
    font-size: clamp(28px, 10vw, 38px) !important;
    text-align: center !important;
  }

  .intro-container_body__span-2 .piq-hero-line2{
    width: 100% !important;
    text-align: center !important;
  }

  .piq-hero-badges{
    grid-template-columns: 1fr 1fr !important;
  }

  .benefit-container_div__right___achievement{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Phone hero ordering (final override)
   - Ensure the animated image card is above Early Access on phones
   ========================================================= */

@media (max-width: 700px){
  .intro-container_body__div{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .intro-container_body__div___middle{ order: 1 !important; }
  .intro-container_body__div___right{ order: 2 !important; }
  .intro-container_body__features-list.piq-mobile-only{ order: 3 !important; }
  .intro-container_body__div___left{ order: 4 !important; }

  /* Center the two hero cards on phones */
  .intro-container_body__div___middle,
  .intro-container_body__div___right{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Make the animated hero media bigger on phones */
  .intro-container_body__div___middle{
    padding: 0 !important;
    place-items: end center !important;
    height: auto !important;
  }

  .intro-container_body__div___middle figure,
  .intro-container_body__div___middle .semi-circle,
  .intro-container_body__div___middle .figure-slider{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
  }

  .intro-container_body__div___middle figure img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* If this hero media ever becomes a <video>, keep the same behavior */
  .intro-container_body__div___middle video{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* =========================================================
   Tablet polish (modern + robust)
   - iPad / tablets (701px–1024px)
   - Keeps mobile + desktop rules intact
   ========================================================= */

@media (min-width: 701px) and (max-width: 1024px){
  /* Consistent outer rhythm */
  .intro-container{ margin-top: calc(82px + var(--pq-safe-top)); }

  .intro-container_body,
  .selector-container_div,
  .workings-container_body,
  .featurs-container_div,
  .benefit-container_div,
  .testimonial-container_div,
  .email-container_body{
    width: min(980px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right))) !important;
  }

  /* Hero headline/subtext: premium scale without “zoom” transforms */
  .intro-container_body__span-2{
    transform: none !important;
    font-size: clamp(32px, 3.6vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.4px;
  }
  .intro-container_body__subtext{
    transform: none !important;
    font-size: 18px !important;
    line-height: 1.4;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hero layout: make better use of horizontal space */
  .intro-container_body__div{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 22px !important;
    align-items: start !important;
  }

  /* Make the two hero cards feel like a matched pair */
  .intro-container_body__div___middle,
  .intro-container_body__div___right{
    height: 100% !important;
    box-sizing: border-box !important;
    border-radius: calc(var(--radius) + 6px) !important;
  }

  
  .intro-container_body__div___middle{
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 380px !important;
    padding: 22px 20px 0 !important;
  }

  .intro-container_body__div___middle figure,
  .intro-container_body__div___middle .semi-circle,
  .intro-container_body__div___middle .figure-slider{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    place-items: end center !important;
  }

  .intro-container_body__div___middle figure img{
    width: min(440px, 96%) !important;
    max-height: 330px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .intro-container_body__div___left{
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: min(980px, 100%) !important;
    justify-self: center !important;
    background: var(--card) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow2) !important;
    padding: 16px 18px !important;
  }
  .intro-container_body__div___left span{
    width: auto !important;
    max-width: 48ch;
  }
  .intro-container_body__div___right{
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    min-height: 340px !important;
    padding: 22px 20px !important;
  }

  .intro-container_body__div___right____fives-star-rating{
    margin-bottom: 6px !important;
  }

  .piq-early-access-card__title{
    font-size: clamp(22px, 2.8vw, 30px) !important;
  }

  /* Early access card: full-width and readable on tablet */
  .piq-early-access-card{
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .piq-early-access-card__title,
  .piq-early-access-card__note,
  .intro-container_body__div___right____happy-customer-number-span,
  .intro-container_body__div___right____happy-customer-span{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .intro-container_body__div___right____happy-customer-span{
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Features list under hero: 2 columns for cleaner scan */
  .intro-container_body__features-list.piq-desktop-only{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 18px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .intro-container_body__features-list.piq-desktop-only li{
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid var(--stroke) !important;
    background: rgba(255,255,255,0.62) !important;
  }
  html[data-theme="dark"] .intro-container_body__features-list.piq-desktop-only li,
  body.dark .intro-container_body__features-list.piq-desktop-only li{
    background: rgba(255,255,255,0.08) !important;
  }

  /* CTA button inside left block should not float oddly */
  .intro-container_body__div___left____button-container{
    width: min(320px, 100%) !important;
    margin-top: 6px;
  }

  /* Badges: clean, balanced grid on tablet */
  .piq-hero-badges{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(720px, calc(100% - 48px)) !important;
    max-width: 100% !important;
    gap: 12px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    margin-top: 14px !important;
    margin-bottom: 16px !important;
  }
  .piq-badge{
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
  }

  /* Selector strip: less “squished”, wrap cleanly */
  .selector-container{ height: auto !important; padding: 8px 0 6px !important; }
  .selector-container_div{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .selector-container_div__selector{ min-width: 0 !important; }
  .selector-container_div__button{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  /* Workings: avoid fixed-height feel, allow 2-up/3-up wrap */
  .workings-container{ height: auto !important; min-height: 0 !important; padding: 6px 0 !important; }
  .workings-container_body__grid{
    flex-wrap: wrap !important;
    gap: 18px !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  .workings-container_body__grid___content{
    width: auto !important;
    flex: 1 1 260px !important;
    max-width: 340px !important;
    border-radius: var(--radius) !important;
  }

  /* Features: remove hard heights, keep the split readable */
  .features-container{ height: auto !important; padding: 10px 0 12px !important; }
  .featurs-container_div__details{ gap: 24px !important; }
  .featurs-container_div__details___left{ padding-left: 0 !important; width: 50% !important; }
  .featurs-container_div__details___right{
    width: 50% !important;
    height: auto !important;
    padding-left: 24px !important;
  }

  /* Benefits + Testimonials: allow content-driven height */
  .benefit-container{ height: auto !important; padding: 56px 0 !important; }
  .benefit-container_div{ height: auto !important; }
  .benefit-container_div__left___container{ border-radius: var(--radius) !important; height: auto !important; }
  .benefit-container_div__right___span-2{ width: auto !important; max-width: 52ch; }

  .testimonial-container{ height: auto !important; padding: 56px 0 !important; }

  /* Newsletter: align sizing with tablet width */
  .email-container_body{ margin-top: 32px !important; }
  .email-container_body__span-1{ transform: none !important; font-size: 20px !important; }
  .email-container_body__email-container{ width: min(540px, 92vw); }
  .email-container_body__email-container input{
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ========== OVERRIDES (cascade-first, no !important) ========== */
html[data-theme="light"] .testimonial-container_div__button___link,
body:not([data-theme="dark"]) .testimonial-container_div__button___link {
  color: #fff;
}
html[data-theme="light"] .workings-container_body__buttons___link,
body:not([data-theme="dark"]) .workings-container_body__buttons___link {
  color: #fff;
}
.workings-container_body__buttons___link {
  color: #fff;
}
html[data-theme="dark"] .email-container_body__email-container___button,
html[data-theme="light"] .email-container_body__email-container___button,
body.dark .email-container_body__email-container___button,
body:not([data-theme="dark"]) .email-container_body__email-container___button {
  color: #fff;
}
.email-container_body__email-container___button {
  color: #fff;
}
.benefit-container_div__left___img {
  pointer-events: none;
}

@media (max-width: 700px) {
  .email-container_body__span-1 {
    width: min(420px, 95vw);
    max-width: 95vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .piq-early-access-card {
    width: min(420px, 95vw);
    max-width: 95vw;
  }
}

@media (min-width: 1025px) {
  .piq-early-access-card {
    width: min(420px, 60vw);
    max-width: 60vw;
  }
}

.piq-early-access-card {
  width: min(420px, 95vw);
  max-width: 95vw;
}

@media (max-width: 1024px) {
  .pq-footer__accordion .pq-footer__links a[href*="about" i] {
    color: #fff;
  }

  /* Mobile: Arrange footer links vertically, white, no underline */
  .pq-footer__accordion .pq-footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding-left: 0;
  }
  .pq-footer__accordion .pq-footer__links a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1em;
    transition: color 0.2s;
    padding: 0;
    margin: 0;
  }
  .pq-footer__accordion .pq-footer__links a:hover {
    color: var(--brandB);
    text-decoration: none;
  }
}

@media (min-width: 38.01em) and (max-width: 57em) {
  .featurs-container_div__details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
    max-height: none;
    overflow: visible;
  }
  .featurs-container_div__details___left,
  .featurs-container_div__details___right {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    max-height: none;
    overflow: visible;
  }
  .piq-feature-item {
    display: block;
    max-height: none;
    overflow: visible;
  }

  .workings-container_body__grid {
    display: flex;
    flex-direction: row;
    gap: 18px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .workings-container_body__grid > * {
    flex: 1 1 0;
    min-width: 180px;
    max-width: 320px;
  }

  /* Tablet range should not hide both desktop + mobile blocks.
     Keep `piq-tablet-only` available, but off by default unless populated. */
  .piq-tablet-only {
    display: none;
  }

  .intro-container_body__span-2 {
    font-size: 2.2em;
    line-height: 1.1;
  }

  .selector-container_div {
    width: min(700px, 98vw);
    max-width: 98vw;
    padding-left: 32px;
    padding-right: 32px;
  }
  .selector-container_div__button {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .piq-badge {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    min-height: 2.6em;
    max-height: 3.2em;
  }
  .piq-hero-badges {
    width: min(520px, 95vw);
    max-width: 95vw;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .piq-badge {
    min-width: 120px;
    max-width: 48vw;
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    padding: 8px 10px;
  }
}

@media (min-width: 701px) {
  .header-container_div__right {
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
    align-items: center;
    display: flex;
  }
  .header-container_div__right___cont {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0;
    width: auto;
    gap: 10px;
  }
}

@media (max-width: 700px) {
  .eclipse-menu {
    display: flex;
  }
  .header-container_div__right___cont {
    display: none;
  }
  .find-soulmate-pill {
    display: inline-block;
    font-size: 1em;
    padding: 8px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #118169, #52C2AB);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(17, 129, 105, 0.08);
    margin-left: auto;
    margin-right: 16px;
  }

  /* Make the page title smaller on mobile */
  .intro-container_body__span-1 {
    font-size: 0.85em;
    letter-spacing: 0.01em;
    font-weight: 600;
    white-space: nowrap;
    width: fit-content;
    max-width: calc(100% - 24px);
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .testimonial-container_div__slider___container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 320px;
    max-height: 320px;
    height: 320px;
    padding: 16px 16px 14px !important;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: flex-start;
  }

  .testimonial-container_div__slider .swiper-slide{
    padding: 0 12px;
    box-sizing: border-box;
  }

  .intro-container_body__div___left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .intro-container_body__div___left____button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    left: unset;
    right: unset;
    position: static;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .intro-container_body__div___left____button-container a,
  .intro-container_body__div___left____button-container button {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: block;
    text-align: center;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 0;
    background: linear-gradient(90deg, var(--brandB), var(--brandA));
    color: #fff;
    box-shadow: 0 4px 16px rgba(17, 129, 105, 0.1);
  }
}

/* Make global theme button (light/dark) text smaller on all devices */
.theme-toggle-btn,
.theme-toggle-btn span,
.theme-toggle-btn i {
  font-size: 0.92em;
}
@media (max-width: 700px) {
  .theme-toggle-btn,
  .theme-toggle-btn span,
  .theme-toggle-btn i {
    font-size: 0.85em;
  }
}

/* Phone: hero trust badges should be 2-up and icons must stay inside pills */
@media (max-width: 700px){
  .piq-hero-badges,
  .piq-hero-badges.piq-badges-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .piq-hero-badges > .piq-badge{
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    justify-content: flex-start !important;
  }

  /* Prevent the AI icon nudge from pushing it outside the pill */
  .piq-badge--ai > i{
    transform: none !important;
  }
}

@media (min-width: 700px) {
  .piq-badges-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 22px;
    width: 100%;
  }
  .piq-badges-row > .piq-badge {
    margin-bottom: 0;
  }
}

/* Success story person's name: always bottom right, smaller */
.testimonial-container_div__slider___container____name {
  margin-top: auto;
  align-self: flex-end;
  font-size: 12.5px;
  font-style: normal;
  color: var(--brandA);
  opacity: 0.9;
  font-weight: 800;
  margin-left: auto;
  pointer-events: none;
  letter-spacing: 0.1px;
  text-align: right;
  z-index: 2;
}
html[data-theme="dark"] .testimonial-container_div__slider___container____name,
body.dark .testimonial-container_div__slider___container____name {
  color: var(--brandB);
}

/* ========== DARK MODE THEME (matches piquora-dating-website) ========== */
html[data-theme="dark"],
body.dark,
html.force-dark {
  --bg: #0b1220;
  --card: #111b2e;
  --ink: #e6edf7;
  --brandA: #118169;
  --brandB: #52C2AB;
  --navy: #023668;
  --muted: #667085;
  --stroke: rgba(230, 237, 247, 0.14);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  --shadow2: 0 10px 28px rgba(16, 24, 40, 0.1);
  --radius: 22px;
  --font-color: #e6edf7;
  --header-color: #118169;
  --footer-color: #023668;
  --footer-color-2: #18181b;
  --sub-script: #b0b8c1;
}

html[data-theme="dark"] body,
body.dark {
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(82, 194, 171, 0.1), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(17, 129, 105, 0.1), transparent 60%),
    radial-gradient(850px 520px at 50% 100%, rgba(2, 54, 104, 0.1), transparent 60%),
    linear-gradient(180deg, #18181b 0%, var(--bg) 40%, #23272f 100%);
  color: var(--ink);
}

html[data-theme="dark"] .header-container,
body.dark .header-container {
  background: rgba(17, 129, 105, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 26px rgba(2, 54, 104, 0.18);
}

html[data-theme="dark"] .header-container_div,
body.dark .header-container_div {
  background: transparent;
}

html[data-theme="dark"] .header-container_div__right___cont a,
body.dark .header-container_div__right___cont a {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #e6edf7;
}
html[data-theme="dark"] .header-container_div__right___cont a:hover,
body.dark .header-container_div__right___cont a:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
html[data-theme="dark"] .header-container_div__right___cont .span-5,
body.dark .header-container_div__right___cont .span-5 {
  background: #23272f;
  color: var(--brandA);
  border: 1px solid rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .header-container_div__right___cont .span-6,
body.dark .header-container_div__right___cont .span-6 {
  background: linear-gradient(90deg, var(--brandB), var(--brandA));
  border: 1px solid rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .header-container_div__right___cont .span-6:hover,
body.dark .header-container_div__right___cont .span-6:hover {
  background: linear-gradient(90deg, var(--brandA), var(--brandB));
}

html[data-theme="dark"] .preloader,
body.dark .preloader,
html.force-dark .preloader {
  background: #0b1220;
}

html[data-theme="dark"] .footer-container,
body.dark .footer-container {
  background-color: var(--footer-color-2);
  color: #e6edf7;
}

html[data-theme="dark"] .footer-container a,
body.dark .footer-container a {
  color: #bbbbbb;
}
html[data-theme="dark"] .footer-container a:hover,
body.dark .footer-container a:hover {
  color: #fff;
}

/* =========================================================
   Tablet: hamburger header + stacked hero (mobile-style)
   - 701px–1024px
   ========================================================= */

@media (min-width: 701px) and (max-width: 1024px){
  :root{
    /* Match tablet container widths used elsewhere (avoids intro card being wider) */
    --pq-responsive-wrap: min(980px, calc(100vw - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  }

  /* Hero headline: keep each line to a single line on tablet */
  .intro-container_body__span-2{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: normal !important;
    font-size: clamp(26px, 3.1vw, 36px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  .intro-container_body__span-2 .piq-hero-line1,
  .intro-container_body__span-2 .piq-hero-line2{
    display: block !important;
    /* width: 100% !important; */
    text-align: center !important;
    white-space: nowrap !important;
  }

  .intro-container_body__span-2 .piq-hero-line2{ font-size: 0.75em !important; }

  /* Tighten vertical rhythm between Selector -> Workings -> next sections */
  .selector-container{
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  .workings-container{
    /* Remove legacy min-height that creates empty space on tablet */
    min-height: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .workings-container_body{
    height: auto !important;
    padding: 16px !important;
    gap: 12px !important;
  }

  /* Reduce the gap AFTER Workings by tightening the next section too */
  .features-container{
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  /* Features (“Why You’ll Love Piquora”): keep the 2 cards side-by-side */
  .featurs-container_div__details{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .featurs-container_div__details___left,
  .featurs-container_div__details___right{
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Benefits: keep media + content side-by-side on tablet */
  .benefit-container_div{
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr) !important;
    align-items: start !important;
    gap: 18px !important;
  }

  .benefit-container_div__left,
  .benefit-container_div__right{
    width: 100% !important;
    min-width: 0 !important;
  }

  .benefit-container_div__left___container{
    width: 100% !important;
    min-height: 420px !important;
  }

  .benefit-container_div__right{
    justify-content: flex-start !important;
  }

  /* Testimonials: 3-up horizontal swipe on tablet */
  .testimonial-container_div__slider .swiper{
    overflow: hidden !important;
  }

  .testimonial-container_div__slider .swiper-wrapper{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .testimonial-container_div__slider .swiper-slide{
    height: auto !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex: 0 0 calc((100% - 28px) / 3) !important;
    width: calc((100% - 28px) / 3) !important;
  }

  .testimonial-container_div__slider___container{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Workings (“How to Start Dating”): keep all 3 cards on one row */
  .workings-container_body__grid{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
  }

  .workings-container_body__grid > *{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .workings-container_body__grid___content{
    width: auto !important;
    max-width: none !important;
  }

  /* Header: use hamburger dropdown on tablet */
  .header-container_div__right.piq-desktop-only{
    display: none !important;
  }

  .header-container .piq-mobile-nav.piq-mobile-only{
    display: flex !important;
  }

  .header-container .eclipse-menu{
    display: flex !important;
    margin-right: 0 !important;
  }

  .header-container .piq-mobile-nav{
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 6px;
    z-index: 10002;
  }

  .header-container .piq-mobile-nav-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(240px, calc(100vw - 24px));
    padding: 8px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .header-container .piq-mobile-nav-item{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0.1px;
  }

  .header-container .piq-mobile-nav-item:hover{
    background: var(--pq-nav-link-bg-hover);
  }

  /* Hero: stack image + early access + features/CTA */
  .intro-container_body__div{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 0 !important;
    width: min(980px, calc(100% - 48px)) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .intro-container_body__div___middle{ order: 1 !important; }
  .intro-container_body__div___right{ order: 2 !important; }
  .intro-container_body__div___left{ order: 3 !important; }

  /* Avoid big empty space in the early-access card on tablet */
  .intro-container_body__div___right{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 18px 18px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .intro-container_body__div___right.piq-early-access-card{
    width: 100% !important;
    max-width: none !important;
    justify-self: auto !important;
  }

  /* Keep left CTA/features card aligned with the stack */
  .intro-container_body__div___left{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep hero media comfortably sized when stacked */
  .intro-container_body__div___middle{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 340px !important;
    padding: 18px 18px 0 !important;
    padding-bottom: 14px !important;
  }

  .intro-container_body__div___middle figure img{
    width: min(440px, 92%) !important;
    max-height: 330px !important;
  }

  /* Trust badges (4 pills): 2-up grid with clear gaps on tablet */
  .piq-hero-badges.piq-badges-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 30px !important;
    row-gap: 16px !important;
    width: min(660px, calc(100% - 64px)) !important;
    max-width: calc(100% - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 14px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  .piq-hero-badges.piq-badges-row > .piq-badge{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* Prevent long labels from overflowing into the middle gap */
  .piq-hero-badges.piq-badges-row > .piq-badge .piq-badge__text{
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .piq-hero-badges.piq-badges-row > .piq-badge > i{
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* Keep tablet pills visually balanced (no AI icon nudge) */
  .piq-hero-badges.piq-badges-row > .piq-badge--ai > i{
    transform: none !important;
  }
}

/* Card spacing normalization (final override)
   - Keeps card-to-card spacing consistent across sections/breakpoints */
.pq-premium .workings-container_body__grid,
.pq-premium .benefit-container_div__right___achievement{
  gap: var(--pq-card-gap) !important;
}


/* =========================================================
   About Page (Premium)
   - Scoped to .pq-about
   ========================================================= */

.pq-about{
  min-height: 100vh;
}

.pq-aboutHeader{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--stroke);
}
html[data-theme="dark"] .pq-aboutHeader,
body.dark .pq-aboutHeader{
  background: color-mix(in srgb, var(--bg) 64%, transparent);
}

.pq-aboutHeader__inner{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  padding: calc(12px + var(--pq-safe-top)) 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pq-aboutHeader__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 900;
}

.pq-aboutHeader__logo{
  height: 54px;
  width: auto;
  max-width: 200px;
  border-radius: 14px;
  object-fit: contain;
  display: block;
}

@media (max-width: 700px){
  .pq-aboutHeader__logo{
    height: 50px;
    width: auto;
    max-width: 180px;
    border-radius: 12px;
  }
}

.pq-aboutHeader__wordmark{
  letter-spacing: -0.4px;
}

.pq-aboutHeader__nav{
  display: none;
  gap: 10px;
  align-items: center;
}

.pq-aboutHeader__nav a{
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}

.pq-aboutHeader__nav a:hover{
  background: color-mix(in srgb, var(--brandB) 14%, transparent);
  color: var(--ink);
}

.pq-aboutHeader__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pq-aboutHeader__theme{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 74%, transparent);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

html[data-theme="dark"] .pq-aboutHeader__theme,
body.dark .pq-aboutHeader__theme{
  background: rgba(255,255,255,0.08);
  color: rgba(230,237,247,0.92);
}

.pq-aboutHeader__theme:focus-visible{
  outline: 2px solid var(--brandB);
  outline-offset: 3px;
}

.pq-aboutHeader__theme:active{ transform: translateY(1px); }

.pq-aboutHeader__cta{
  height: 40px;
  padding: 0 14px;
}

@media (min-width: 980px){
  .pq-aboutHeader__nav{ display: inline-flex; }
}

.pq-aboutMain{
  padding-top: calc(86px + var(--pq-safe-top));
  padding-bottom: calc(42px + var(--pq-safe-bottom));
}

.pq-aboutHero{
  position: relative;
  overflow: hidden;
  padding: 26px 0 22px;
}

.pq-aboutHero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1000px 420px at 20% 0%, rgba(82,194,171,0.24) 0%, transparent 60%),
    radial-gradient(900px 420px at 80% 10%, rgba(17,129,106,0.18) 0%, transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, rgba(82,194,171,0.06)) 0%, var(--bg) 72%);
  pointer-events: none;
}

.pq-aboutHero__inner{
  position: relative;
  z-index: 1;
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  display: grid;
  gap: 18px;
  align-items: center;
}

@media (min-width: 980px){
  .pq-aboutHero__inner{ grid-template-columns: 1.2fr 0.8fr; gap: 22px; }
}

.pq-aboutHero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--brandA);
  text-transform: uppercase;
  font-size: 12px;
}

.pq-aboutHero__title{
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 10px 0 10px;
}

.pq-aboutHero__sub{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
}

.pq-aboutHero__ctaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.pq-aboutHero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.pq-chip{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  color: color-mix(in srgb, var(--ink) 86%, var(--muted));
  font-weight: 800;
  font-size: 13px;
}
html[data-theme="dark"] .pq-chip,
body.dark .pq-chip{
  background: rgba(255,255,255,0.08);
  color: rgba(230,237,247,0.86);
}

.pq-aboutHero__note{
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.pq-aboutHero__glass{
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
html[data-theme="dark"] .pq-aboutHero__glass,
body.dark .pq-aboutHero__glass{
  background: rgba(255,255,255,0.06);
}

.pq-aboutHero__imageWrap{
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(700px 320px at 60% 20%, rgba(82,194,171,0.22) 0%, transparent 60%),
    radial-gradient(700px 320px at 30% 80%, rgba(17,129,106,0.18) 0%, transparent 62%),
    linear-gradient(180deg, rgba(2,54,104,0.10), rgba(2,54,104,0.00));
}

.pq-aboutHero__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pq-aboutHero__imageFallback{
  position: absolute;
  inset: 0;
}

.pq-aboutHero__spark{
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(82,194,171,0.34), transparent 68%);
  filter: blur(1px);
  top: 18%;
  left: 12%;
  opacity: 0.9;
}

.pq-aboutHero__spark--2{
  width: 280px;
  height: 280px;
  top: 48%;
  left: 44%;
  background: radial-gradient(circle at 30% 30%, rgba(17,129,106,0.26), transparent 66%);
}

.pq-aboutHero__stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
}

.pq-miniStat{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  padding: 12px 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
html[data-theme="dark"] .pq-miniStat,
body.dark .pq-miniStat{
  background: rgba(255,255,255,0.05);
}

.pq-miniStat__label{
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.pq-miniStat__value{
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.pq-aboutHero__mediaHint{
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--muted);
}
.pq-aboutHero__mediaHint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.pq-aboutSection{
  padding: 42px 0;
}

.pq-aboutSplit{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

@media (min-width: 980px){
  .pq-aboutSplit{ grid-template-columns: 1.15fr 0.85fr; gap: 18px; }
}

.pq-aboutStory,
.pq-aboutCallout{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: var(--shadow2);
  padding: 18px;
}
html[data-theme="dark"] .pq-aboutStory,
html[data-theme="dark"] .pq-aboutCallout,
body.dark .pq-aboutStory,
body.dark .pq-aboutCallout{
  background: rgba(255,255,255,0.06);
}

.pq-aboutH3{
  font-size: 18px;
  letter-spacing: -0.3px;
  margin: 2px 0 10px;
}

.pq-aboutList{
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.pq-aboutBody{
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.pq-aboutFacts{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.pq-fact{
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
html[data-theme="dark"] .pq-fact,
body.dark .pq-fact{ background: rgba(255,255,255,0.05); }

.pq-fact__k{ color: var(--muted); font-weight: 800; font-size: 12px; }
.pq-fact__v{ font-weight: 900; letter-spacing: -0.2px; }

.pq-aboutMuted{ margin-top: 12px; color: var(--muted); line-height: 1.55; }

.pq-aboutGrid{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 740px){
  .pq-aboutGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px){
  .pq-aboutGrid{ grid-template-columns: repeat(3, 1fr); }
}

.pq-aboutCard{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: var(--shadow2);
  padding: 16px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
}
html[data-theme="dark"] .pq-aboutCard,
body.dark .pq-aboutCard{ background: rgba(255,255,255,0.06); }

.pq-aboutCard__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--brandA);
}
html[data-theme="dark"] .pq-aboutCard__icon,
body.dark .pq-aboutCard__icon{ background: rgba(255,255,255,0.05); }

.pq-aboutCard__title{ font-size: 16px; letter-spacing: -0.3px; margin: 2px 0 4px; }
.pq-aboutCard__desc{ margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

.pq-aboutFuture{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 16px auto 0;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--stroke);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(82,194,171,0.14) 0%, rgba(17,129,106,0.10) 45%, rgba(2,54,104,0.08) 100%);
}

.pq-aboutFuture__inner{ padding: 18px; }
.pq-aboutFuture__title{ font-size: 16px; margin: 0 0 6px; letter-spacing: -0.3px; }
.pq-aboutFuture__desc{ margin: 0; color: var(--muted); }

.pq-aboutFuture__list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.pq-aboutFuture__list li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
  line-height: 1.55;
}

.pq-aboutFuture__list li::before{
  content: "✓";
  font-weight: 900;
  color: var(--brandB);
  line-height: 1.2;
  transform: translateY(2px);
}

.pq-aboutTrustBar{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 820px){
  .pq-aboutTrustBar{ grid-template-columns: repeat(3, 1fr); }
}

.pq-aboutTrustBar__item{
  border-radius: 999px;
  border: 1px solid var(--stroke);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  color: color-mix(in srgb, var(--ink) 86%, var(--muted));
  font-weight: 800;
}
html[data-theme="dark"] .pq-aboutTrustBar__item,
body.dark .pq-aboutTrustBar__item{ background: rgba(255,255,255,0.06); color: rgba(230,237,247,0.86); }

.pq-aboutTrustBar__item i{ color: var(--brandB); }

.pq-aboutGlobal{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  display: grid;
  gap: 16px;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
html[data-theme="dark"] .pq-aboutGlobal,
body.dark .pq-aboutGlobal{ background: rgba(255,255,255,0.06); }

@media (min-width: 980px){
  .pq-aboutGlobal{ grid-template-columns: 0.95fr 1.05fr; }
}

.pq-aboutGlobal__map{
  position: relative;
  min-height: 220px;
  background:
    radial-gradient(900px 420px at 40% 40%, rgba(82,194,171,0.16) 0%, transparent 60%),
    radial-gradient(900px 420px at 70% 55%, rgba(17,129,106,0.12) 0%, transparent 62%),
    linear-gradient(180deg, rgba(2,54,104,0.10), rgba(2,54,104,0.02));
}

.pq-mapDot{
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--brandB);
  box-shadow: 0 0 0 8px rgba(82,194,171,0.14);
}

.pq-mapDot--us{ top: 42%; left: 28%; }
.pq-mapDot--ng{ top: 58%; left: 54%; background: var(--brandA); box-shadow: 0 0 0 8px rgba(17,129,106,0.14); }

.pq-mapPulse{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(10px 10px at 28% 42%, rgba(82,194,171,0.9), transparent 72%),
    radial-gradient(12px 12px at 54% 58%, rgba(17,129,106,0.85), transparent 72%);
  opacity: 0.75;
}

.pq-aboutGlobal__copy{
  padding: 18px;
}

.pq-aboutGlobal__pill{
  display: inline-flex;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--brandA);
}

.pq-aboutPlaceholder{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--stroke) 92%, transparent);
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  font-weight: 700;
}

.pq-aboutFounder{
  display: grid;
  gap: 24px;
}

.pq-aboutFounder__bio,
.pq-aboutFounder__quote,
.pq-aboutFounder__why{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: var(--shadow2);
  padding: 18px;
}

html[data-theme="dark"] .pq-aboutFounder__bio,
html[data-theme="dark"] .pq-aboutFounder__quote,
html[data-theme="dark"] .pq-aboutFounder__why,
body.dark .pq-aboutFounder__bio,
body.dark .pq-aboutFounder__quote,
body.dark .pq-aboutFounder__why{
  background: rgba(255,255,255,0.06);
}

.pq-aboutFounder__quote{
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brandB) 18%, transparent),
    color-mix(in srgb, var(--brandA) 18%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  font-style: italic;
  font-size: 1.05rem;
}

html[data-theme="dark"] .pq-aboutFounder__quote,
body.dark .pq-aboutFounder__quote{
  border-color: rgba(255,255,255,0.10);
}

.pq-aboutFounder__quote blockquote{
  margin: 0;
  line-height: 1.6;
  font-weight: 650;
}

.pq-aboutFounder__quoteLabel{
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 72%, var(--brandA));
  margin: 0 0 10px;
}

.pq-aboutFounder__why{
  padding-top: 18px;
}

.pq-aboutFounder__why .pq-aboutH3{
  margin-top: 0;
}

.pq-aboutTeamBlock{
  display: block;
  padding: 24px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
}

html[data-theme="dark"] .pq-aboutTeamBlock,
body.dark .pq-aboutTeamBlock{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255,255,255,0.10);
}

.pq-aboutTeamBlock .pq-aboutBody + .pq-aboutBody{
  margin-top: 14px;
}

.pq-aboutCard--big{
  grid-template-columns: 1fr;
}

.pq-aboutTeam{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 980px){
  .pq-aboutTeam{ grid-template-columns: repeat(2, 1fr); }
}

.pq-aboutFinal{
  padding: 46px 0 18px;
}

.pq-aboutFinal__inner{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  border-radius: calc(var(--radius) + 12px);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(82,194,171,0.18) 0%, transparent 62%),
    radial-gradient(900px 420px at 90% 20%, rgba(17,129,106,0.12) 0%, transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, rgba(2,54,104,0.04)) 0%, var(--bg) 78%);
  padding: 22px;
  box-shadow: var(--shadow);
  text-align: center;
}

.pq-aboutFinal__title{
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -0.6px;
  margin: 0 0 10px;
}

.pq-aboutFinal__desc{
  margin: 0 auto;
  color: var(--muted);
  max-width: 66ch;
  line-height: 1.6;
}

.pq-aboutFinal__cta{
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 16px;
}

.pq-aboutFinal__tagline{
  font-weight: 900;
  color: var(--brandA);
  letter-spacing: -0.2px;
}

.pq-aboutCopyright{
  padding: 0 0 36px;
}

.pq-aboutCopyright__inner{
  width: min(1140px, calc(100% - 48px - var(--pq-safe-left) - var(--pq-safe-right)));
  margin: 0 auto;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce){
  .pq-aboutHeader,
  .pq-aboutHeader__nav a,
  .pq-aboutHeader__theme{
    transition: none;
  }
}

/* =========================================================
   Final header sizing fix (phone + tablet)
   - Prevents the fixed header from bleeding into the hero
   - Overrides earlier responsive layers that set logo height:auto !important
   ========================================================= */

@media (max-width: 992px){
  .header-container_div{
    min-height: 58px !important;
    padding: 6px 0 !important;
  }

  .header-container_div__left{
    margin-left: 0 !important;
    padding-left: calc(12px + var(--pq-safe-left));
  }

  .header-container_div__left img{
    width: auto !important;
    height: 38px !important;
    aspect-ratio: auto;
  }

  /* Keep the hero offset consistent with the shorter header */
  .intro-container{
    margin-top: calc(66px + var(--pq-safe-top)) !important;
  }
}

@media (max-width: 700px){
  .header-container_div{
    min-height: 56px !important;
    padding: 6px 0 !important;
  }

  .header-container_div__left img{
    height: 34px !important;
  }

  .intro-container{
    margin-top: calc(64px + var(--pq-safe-top)) !important;
  }
}

/* =========================================================
   Modern mobile dropdown (popover)
   - Ensures all nav items are visible
   - Anchors under hamburger; avoids bottom-sheet look
   ========================================================= */

@media (max-width: 992px){
  .header-container,
  .header-container_div{
    overflow: visible !important;
  }

  /* Hero floating pills: shrink on phone/tablet to prevent overlap */
  .pq-hero__float{
    padding: 8px 10px;
    gap: 8px;
    border-radius: 14px;
  }

  .pq-hero__floatLabel{ font-size: 11px; }
  .pq-hero__floatValue{ font-size: 16px; }

  .pq-hero__float--match{
    top: 10px;
    left: 10px;
    min-width: 96px;
  }

  .pq-hero__float--verified{
    top: 10px;
    right: 10px;
    padding: 8px 10px;
  }

  .pq-hero__float--verified span{
    font-size: 12px;
    font-weight: 800;
  }

  .piq-mobile-nav{ position: relative; }

  .pq-premium .piq-mobile-nav-dropdown{
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: min(288px, calc(100vw - 24px - var(--pq-safe-left) - var(--pq-safe-right))) !important;
    padding: 8px !important;
    border-radius: 16px !important;
    border: 1px solid var(--stroke) !important;
    background: color-mix(in srgb, var(--bg) 94%, var(--card)) !important;
    box-shadow: var(--shadow2) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10060;
    max-height: calc(100vh - 96px - var(--pq-safe-top));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    animation: pq-menuPop 160ms ease-out both;
    transform-origin: top right;
  }

  @keyframes pq-menuPop{
    from{ opacity: 0; transform: translateY(-6px) scale(0.98); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }

  .pq-premium .piq-mobile-nav-item{
    display: flex !important;
    padding: 10px 12px !important;
    width: 100% !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    font-size: 15px;
    line-height: 1.15;
  }

  .pq-premium .piq-mobile-nav-item:hover{
    background: color-mix(in srgb, var(--brandB) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--brandB) 22%, var(--stroke)) !important;
  }

  .pq-premium .piq-mobile-nav-item--cta{
    margin-top: 4px;
    justify-content: center;
    font-weight: 800 !important;
    background: linear-gradient(90deg, var(--brandB), var(--brandA));
    color: var(--font-color);
    border-color: rgba(255,255,255,0.18);
  }

  .pq-premium .piq-mobile-nav-item--cta:hover{
    background: linear-gradient(90deg, var(--brandB), var(--brandA));
    border-color: rgba(255,255,255,0.24);
  }
}