/* =========================
   HERO – layout + background image
   ========================= */
.hero {
  position: relative;
  padding: 21px 16px 21px;
  overflow: hidden;
}

/* Keep hero content above the background */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.hero-copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;

  /* readability on image */
  backdrop-filter: bleur(2px) saturate(0.9);
  background: rgba(0,0,0,0.35);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.hero-copy .tag {
  display: inline-block;
  margin-bottom: 12px;
}

.hero-copy h1 {
  margin: 0 0 16px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65);
}

.hero-copy p {
  margin: 0 auto 24px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* Centre the two calculator buttons */
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero .cta-row .btn {
  min-width: 230px;
  text-align: center;
}

/* =========================
   REDDIT REVIEWS – CENTER + EDGE-WEIGHTED GRADIENT
   ========================= */
#reviews.section{
  color:#fff;
  padding: 0.25rem 0;

  /* Stronger on screen edges (left/right), lighter center */
  background:
    radial-gradient(
      160% 110% at 50% 45%,
      rgba(0, 109, 111, 0.70) 0%,
      rgba(0, 60, 61, 0.92) 45%,
      rgba(0, 20, 21, 1) 82%
    ),
    linear-gradient(
      180deg,
      #002b2c 0%,
      #004c4d 50%,
      #002b2c 100%
    );
}

/* Center the whole reviews section content */
#reviews .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Center the main review card and tighten width */
#reviews .review-main-card {
  max-width: 420px;
  width: 100%;
  margin: 0 auto 16px;

  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

/* Avatar row (target the explicit row class, not last-of-type) */
#reviews .review-avatar-row{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}

/* Avatar buttons: no padding, no background, no border */
#reviews .review-avatar-btn {
  all: unset;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#reviews .review-avatar-btn:hover{
  opacity: 0.8;
  transform: translateY(-1px);
}

#reviews .review-avatar-btn.is-active {
  opacity: 1;
  outline: 2px solid #00b2b5;
  outline-offset: 3px;
  border-radius: 999px;
}

/* Just the Reddit image visible */
#reviews .review-avatar-btn img,
#reviews .review-avatar {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}

/* =========================
   TOOLS – EDGE-WEIGHTED TEAL GRADIENT
   ========================= */
#features.section{
  /* Darker on edges, brighter center */
  background:
    radial-gradient(
      170% 120% at 50% 45%,
      rgba(0, 149, 149, 0.40) 0%,
      rgba(0, 109, 111, 0.78) 45%,
      rgba(0, 35, 36, 1) 84%
    ),
    linear-gradient(
      180deg,
      #003637 0%,
      #006d6f 55%,
      #003637 100%
    );

  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(0,0,0,0.35);
}

#features h3,
#features .subhead{
  color: #ffffff;
}

#features .subhead{
  opacity: 0.85;
}
/* =========================================
   NAV DROPDOWN – STAY OPEN (HOVER + FOCUS)
   Paste at bottom of style.css
   ========================================= */

/* Ensure the dropdown is anchored to the whole item */
.ib-has-dropdown { position: relative; }

/* Remove the "hover buffer" gap if it exists (it causes flicker) */
.ib-has-dropdown::after { display: none !important; }

/* Make the dropdown easier to hit */
.ib-dropdown{
  margin-top: 0 !important;          /* kills hover gap */
  padding-top: 8px;                  /* keeps visual spacing inside */
}

/* Keep open while hovering the parent OR the dropdown itself */
@media (min-width: 821px){
  .ib-has-dropdown:hover > .ib-dropdown,
  .ib-has-dropdown:focus-within > .ib-dropdown,
  .ib-dropdown:hover{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Stop "pointer-events:none" from breaking hover-to-dropdown */
  .ib-dropdown{
    pointer-events: auto !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
  }

  /* When active via hover/focus, make it visible */
  .ib-has-dropdown:hover > .ib-dropdown,
  .ib-has-dropdown:focus-within > .ib-dropdown{
    opacity: 1;
    visibility: visible;
  }
}

/* Optional: bigger hitbox on the Tools button */
.ib-dropdown-toggle{
  padding: 8px 10px !important;
}
/* =========================================
   TOOLS – bigger images + equal spacing
   Paste at VERY BOTTOM of index-page.css
   ========================================= */

:root{
  --tool-gap: 0.5rem;
}

/* Equal spacing everywhere */
#features .tools-grid{
  gap: var(--tool-gap) !important;
}

#features .tool-cta{
  margin-top: var(--tool-gap) !important;
}

/* Bigger images */
#features .tool-media{
  width: 260px !important;
}
#features .tool-media img{
  height: 260px !important;
}

/* Stagger 2 & 4 lower */
#features .tool-item.is-lower{
  margin-top: calc(var(--tool-gap) * 3) !important;
}

/* Mobile */
@media (max-width: 768px){
  #features .tool-media{ width: 170px !important; }
  #features .tool-media img{ height: 170px !important; }
  #features .tool-cta{ width: 170px !important; }
  #features .tool-item.is-lower{ margin-top: calc(var(--tool-gap) * 2) !important; }
}
@media (max-width: 480px){
  #features .tool-media{ width: 150px !important; }
  #features .tool-media img{ height: 150px !important; }
  #features .tool-cta{ width: 150px !important; }
}
#reviews.section{
  padding-top: 2rem; /* was 3rem */
}

#reviews h3{
  margin-top: 0;
}
/* =========================================
   REDDIT QUOTE TICKER – LOCKED & FLUSH TO HERO
   ========================================= */

/* Remove any gap between hero and teal section */
.hero{
  margin-bottom: 0 !important;
}

/* Make the ticker the very first thing in the teal section */
#reviews.section{
  padding-top: 0 !important;
  margin-top: -1px; /* kills hairline gap */
}

/* Ticker container */
#reviews .quote-ticker{
  margin: 0;
  padding: 0;
}

/* Thin white divider lines */
#reviews .quote-ticker .qt-line{
  height: 1px;
  background: rgba(255,255,255,0.9);
  width: 100%;
}

/* Tight vertical spacing */
#reviews .quote-ticker .qt-gap{
  height: 6px;
}

/* Lock horizontal scrolling */
#reviews .quote-ticker .qt-viewport{
  overflow: hidden;
  width: 100%;
  touch-action: none;
  overscroll-behavior: none;
  pointer-events: none;
}

/* Auto-scrolling track */
#reviews .quote-ticker .qt-track{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
  animation: qt-scroll 44s linear infinite;
  will-change: transform;
}

/* Quote text */
#reviews .quote-ticker .qt-item{
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}

/* Separator */
#reviews .quote-ticker .qt-sep{
  opacity: 0.6;
}

/* Animation */
@keyframes qt-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  #reviews .quote-ticker .qt-track{
    animation: none;
  }
}

/* Mobile tuning */
@media (max-width: 768px){
  #reviews .quote-ticker .qt-item{
    font-size: 0.86rem;
  }
  #reviews .quote-ticker .qt-gap{
    height: 5px;
  }
}
/* =========================================
   REDDIT QUOTE TICKER – TRUE INFINITE LOOP
   ========================================= */

/* Hard lock section to hero */
.hero{ margin-bottom:0 !important; }
#reviews.section{ padding-top:0 !important; margin-top:-1px; }

/* Structure */
#reviews .quote-ticker{
  width:100%;
  overflow:hidden;
  position:relative;
}

/* Divider lines */
#reviews .quote-ticker .qt-line{
  height:1px;
  background:rgba(255,255,255,0.9);
}
#reviews .quote-ticker .qt-gap{
  height:6px;
}

/* Viewport */
#reviews .quote-ticker .qt-viewport{
  width:100%;
  overflow:hidden;
  pointer-events:none;
}

/* Track — duplicated content REQUIRED */
#reviews .quote-ticker .qt-track{
  display:flex;
  width:max-content;
  animation: qt-scroll 40s linear infinite;
}

/* Each group of quotes */
#reviews .quote-ticker .qt-group{
  display:flex;
  align-items:center;
  gap:22px;
  white-space:nowrap;
  padding-right:22px;
}

/* Text */
#reviews .quote-ticker .qt-item{
  font-size:0.95rem;
  color:rgba(255,255,255,0.92);
  letter-spacing:0.01em;
}
#reviews .quote-ticker .qt-sep{ opacity:0.6; }

/* KEY FIX: translate only half (because content is doubled) */
@keyframes qt-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #reviews .quote-ticker .qt-track{ animation:none; }
}

/* Mobile */
@media (max-width:768px){
  #reviews .quote-ticker .qt-item{ font-size:0.86rem; }
  #reviews .quote-ticker .qt-gap{ height:5px; }
}
/* =========================================
   REDDIT QUOTE TICKER – TRUE INFINITE LOOP
   ========================================= */

/* Hard lock section to hero */
.hero{ margin-bottom:0 !important; }
#reviews.section{ padding-top:0 !important; margin-top:-1px; }

/* Structure */
#reviews .quote-ticker{
  width:100%;
  overflow:hidden;
  position:relative;
}

/* Divider lines */
#reviews .quote-ticker .qt-line{
  height:1px;
  background:rgba(255,255,255,0.9);
}
#reviews .quote-ticker .qt-gap{
  height:6px;
}

/* Viewport */
#reviews .quote-ticker .qt-viewport{
  width:100%;
  overflow:hidden;
  pointer-events:none;
}

/* Track — duplicated content REQUIRED */
#reviews .quote-ticker .qt-track{
  display:flex;
  width:max-content;
  animation: qt-scroll 40s linear infinite;
}

/* Each group of quotes */
#reviews .quote-ticker .qt-group{
  display:flex;
  align-items:center;
  gap:22px;
  white-space:nowrap;
  padding-right:22px;
}

/* Text */
#reviews .quote-ticker .qt-item{
  font-size:0.95rem;
  color:rgba(255,255,255,0.92);
  letter-spacing:0.01em;
}
#reviews .quote-ticker .qt-sep{ opacity:0.6; }

/* KEY FIX: translate only half (because content is doubled) */
@keyframes qt-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #reviews .quote-ticker .qt-track{ animation:none; }
}

/* Mobile */
@media (max-width:768px){
  #reviews .quote-ticker .qt-item{ font-size:0.86rem; }
  #reviews .quote-ticker .qt-gap{ height:5px; }
}

/* =========================================
   FULL-BLEED TICKER (STRETCHES TO SCREEN EDGE)
   Works even if ticker is inside .container
   ========================================= */

#reviews .quote-ticker{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Make sure the lines/ticker truly reach the edges */
#reviews .quote-ticker .qt-line,
#reviews .quote-ticker .qt-viewport{
  width: 100%;
}

/* Prevent any accidental horizontal overflow from creating a right-side “wide” feel */
html, body{
  overflow-x: hidden;
}