/* ==========================================================================
   components.css — buttons, header, mega menu, footer, cards, accordion
   Depends on: variables.css, base.css
   ========================================================================== */

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--color-primary-600); color: #fff; box-shadow: var(--shadow-lg); }
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-bg-alt); color: var(--color-primary); }

/* ==========================================================================
   Site header + navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* Frosted glass bar; deepens on scroll (.is-scrolled toggled by main.js) */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 72px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled .site-header__inner {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header__logo img, .site-header__logo svg { height: 32px; width: auto; }

/* ---- Primary nav ---------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav__list { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  color: var(--color-text);
  font-weight: var(--fw-medium);
  position: relative;
}
.nav__link:hover { color: var(--color-primary); }
.nav__link[aria-expanded] .nav__caret {
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Log in link (sits next to the Start-for-Free CTA) */
.nav__login {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.nav__login:hover { color: var(--color-accent); }

/* ---- Mega menu ------------------------------------------------------------ */
.mega {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%) translateY(-8px);
  width: min(880px, calc(100vw - 2rem));
  padding: var(--space-6);
  z-index: var(--z-mega);
  /* Near-solid so content behind the dropdown doesn't bleed through.
     (was rgba(255,255,255,0.85) — too transparent on hover) */
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.has-mega { position: relative; }
/* Invisible bridge across the 12px gap so the dropdown stays open while the
   cursor travels from the trigger down to the menu items. */
.mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px; height: 18px;
  background: transparent;
}
.has-mega.is-open .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.mega__col-title {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.mega__item {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.mega__item:hover { background: var(--color-bg-alt); transform: translateX(4px); color: var(--color-primary); }
.mega__item strong { display: block; font-weight: var(--fw-semibold); }
.mega__item span { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---- Header actions (mobile CTA + burger) --------------------------------
   On desktop this wrapper dissolves (display:contents) so the header layout is
   unchanged and both its children stay hidden. On mobile it becomes a flex group
   that keeps the compact CTA snug against the burger. */
.header-actions { display: contents; }
.nav-cta-mobile { display: none; }

/* ---- Mobile nav toggle ---------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--color-primary); border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__title { margin-bottom: var(--space-2); }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: transparent;
  border: none;
  text-align: left;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  cursor: pointer;
}
.accordion__icon {
  flex: none; width: 24px; height: 24px; position: relative;
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; background: var(--color-primary);
  transform: translate(-50%, -50%);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-base) var(--ease-out);
}
.accordion__panel-inner { padding-bottom: var(--space-5); color: var(--color-text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--space-10) var(--space-6);
}
.site-footer a { color: rgba(255, 255, 255, 0.82); }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.site-footer__col-title {
  color: #fff; font-size: var(--fs-small); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--space-4);
}
.site-footer__links { display: grid; gap: var(--space-3); }
.site-footer__links a { display: inline-block; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.site-footer__links a:hover { transform: translateX(4px); }
.site-footer__all { color: #fff !important; font-weight: var(--fw-semibold); margin-top: var(--space-2); }
.site-footer__logo img, .site-footer__logo svg { height: 30px; filter: brightness(0) invert(1); }

/* ---- CTA band — lp-close variant ------------------------------------------
   Opt-in modifier for the bottom CTA (the last section before the footer) on the
   free-tools and compare/alternatives pages. It borrows the primary->accent
   diagonal from .lp-close (lp.css), which reads with more contrast than the base
   .cta-band primary->primary-700. Defined here in components.css because that is
   the one stylesheet loaded on both page families, and at .cta-band.cta-band--lp
   specificity so it wins over the base .cta-band in home.css whatever the order. */
.cta-band.cta-band--lp {
  background: linear-gradient(160deg, var(--color-primary), var(--color-accent));
}
.cta-band.cta-band--lp p { color: rgba(255, 255, 255, 0.88); }
.cta-band.cta-band--lp .btn--primary { background: #fff; color: var(--color-primary); border-color: #fff; }
.cta-band.cta-band--lp .btn--primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--color-primary); }
.cta-band.cta-band--lp .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.cta-band.cta-band--lp .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Subscribe form (redesigned — high contrast on the navy footer) ------- */
/* OLD:
.subscribe-form { display: flex; gap: var(--space-2); margin-top: var(--space-4); max-width: 360px; }
.subscribe-form input[type="email"] { flex: 1; padding: 0.7rem 1rem; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; }
.subscribe-form input::placeholder { color: rgba(255,255,255,0.6); } */
.footer-subscribe { margin-top: var(--space-5); }
.footer-subscribe__title { color: #fff; font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.subscribe-form {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 400px;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 5px 5px 5px 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.subscribe-form input[type="email"] {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.9rem;
  border: none; background: transparent;
  color: var(--color-text); font-size: 0.95rem;
  border-radius: var(--radius-pill);
}
.subscribe-form input[type="email"]::placeholder { color: #8b86ab; }
.subscribe-form input[type="email"]:focus { outline: none; }
.subscribe-form__btn {
  flex: none;
  padding: 0.6rem 1.3rem;
  border: none; cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--color-accent); color: #fff;
  font-weight: var(--fw-semibold); font-size: 0.95rem;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.subscribe-form__btn:hover { background: var(--color-primary-600); transform: translateY(-1px); }

/* ---- Footer payment icons (bottom-right) ---------------------------------- */
.footer-payments { display: flex; gap: 8px; align-items: center; }
.footer-payments .pay { height: 26px; width: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }

/* ---- Scroll-to-top button (fixed, injected by main.js) -------------------- */
.scroll-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--color-accent); transform: translateY(-3px); }
.scroll-top svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .scroll-top { bottom: 16px; right: 16px; width: 44px; height: 44px; } }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-top: var(--space-6); font-size: var(--fs-small);
}
.site-footer__legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* ==========================================================================
   Responsive — tablet & mobile
   ========================================================================== */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* Tighter min-gap so the logo, CTA and burger all fit on a small phone. */
  .site-header__inner { gap: var(--space-3); }
  /* Group the compact CTA with the burger, hard against the right edge. */
  .header-actions { display: flex; align-items: center; gap: var(--space-3); }
  /* Compact "Start Free" — height matched to the 32px logo so the bar reads clean. */
  .btn.nav-cta-mobile {
    display: inline-flex; align-items: center;
    height: 32px; padding: 0 var(--space-4);
    font-size: var(--fs-small); line-height: 1; white-space: nowrap;
  }
  /* The header bar itself must be solid on mobile — the glassy rgba(...,0.6/0.85)
     let the page show through behind the logo/burger and (with the panel open)
     read as a transparent menu. The panel background is set solid below too. */
  .site-header__inner,
  .site-header.is-scrolled .site-header__inner { background: #ffffff; }
  .nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--container-pad) var(--space-6);
    /* Solid (was rgba(255,255,255,0.97)) — the open mobile menu must fully hide the
       page behind it; at 0.97 with blur, content still bled through faintly. */
    background: #ffffff;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-120%);
    transition: transform var(--dur-base) var(--ease-out);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
  .mega {
    position: static; width: 100%; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; box-shadow: none; background: transparent; border: none;
    padding: var(--space-3) 0 var(--space-5); -webkit-backdrop-filter: none; backdrop-filter: none;
    max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out);
  }
  .has-mega.is-open .mega { max-height: 1200px; }
  .mega__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .nav__cta { margin-top: var(--space-4); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive fixes — from the headless-Chrome layout audit (mobile/tablet).
   Each block records what it overrides and why; the original rules above are
   left intact.
   ========================================================================== */

/* ---- 1. Mega menu overflowed the viewport on tablet landscape -------------
   The dropdown is 880px wide and was centred on its TRIGGER (.has-mega was the
   positioning context). At ~1024px the Company trigger sits far enough right
   that the centred panel ran ~69px past the viewport edge — and because a
   visibility:hidden element still occupies layout, every page had a phantom
   horizontal scrollbar even with the menu closed.
   Fix: centre the panel on the HEADER instead of the trigger. It can then never
   exceed min(880px, 100vw - 2rem), whichever trigger is open.               */
@media (min-width: 901px) {
  .site-header__inner { position: relative; }
  .has-mega { position: static; }     /* overrides `.has-mega { position: relative; }` */
  .mega { top: calc(100% - 6px); }    /* now measured from the header bar, not the link */

  /* Open the dropdown on HOVER, in pure CSS. main.js also toggles .is-open on
     mouseenter, but relying on JS alone meant a slow/failed script left the menu
     click-only on desktop. This makes hover the source of truth on web; the
     mobile tap-to-expand (max-width:900px, .is-open + max-height) is untouched. */
  .has-mega:hover .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
}

/* ---- 2. Grid children could not shrink below their min-content ------------
   Grid/flex items default to min-width:auto, so a wide child (the subscribe
   form; the nowrap formula block) forced its column wider than the viewport.
   This was the +23px overflow on 360px phones and the +245px overflow on the
   tool pages.                                                                */
.site-footer__grid > * { min-width: 0; }

/* The subscribe form must stay on ONE line: it is a pill with the button tucked
   inside it, so wrapping breaks the shape.
   First attempt used `flex-wrap: wrap` + `flex: 1 1 160px` on the input — that
   fixed the 360px phone but pushed the button onto its own line on desktop.
   The actual cause was that the input could not shrink below its intrinsic
   size, so let it shrink to nothing and give the button a fixed floor instead.
   Now the pill holds its shape at every width. */
.subscribe-form { flex-wrap: nowrap; }
.subscribe-form input[type="email"] { flex: 1 1 0; min-width: 0; }
.subscribe-form__btn { flex: 0 0 auto; white-space: nowrap; }

/* ---- 3. Footer alignment across breakpoints -------------------------------
   5 equal-ish columns are too narrow to sit straight on tablet. Give the brand
   column the full row and let the link columns divide the space evenly.      */
@media (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
  .site-footer__grid > :first-child { grid-column: 1 / -1; margin-bottom: var(--space-4); }
}
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .site-footer__bottom { justify-content: center; text-align: center; }
  .footer-payments { justify-content: center; width: 100%; }

  /* ---- Footer accordion (mobile) --------------------------------------------
     Each link group collapses under its title so the footer isn't a giant scroll.
     The brand column (first child, no col-title) is untouched. JS in the footer
     partial toggles .is-open on the title; everything else is CSS. */
  .site-footer__grid > div:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .site-footer__col-title {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: var(--space-4) 0; cursor: pointer; user-select: none;
  }
  .site-footer__col-title::after {
    content: ""; width: 9px; height: 9px; margin-right: 4px; opacity: 0.7;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 200ms var(--ease-out);
  }
  .site-footer__col-title.is-open::after { transform: rotate(-135deg); }
  .site-footer__links {
    max-height: 0; overflow: hidden;
    transition: max-height 280ms var(--ease-out), padding 280ms var(--ease-out);
  }
  .site-footer__col-title.is-open + .site-footer__links {
    max-height: 640px; padding-bottom: var(--space-4);
  }
}

/* ---- 4. Tap targets ------------------------------------------------------
   Footer/nav links were 28–30px tall. Pad them out to a comfortable 44px on
   touch-sized viewports without changing the desktop rhythm.                 */
@media (max-width: 900px) {
  .site-footer__links a { padding-block: 0.55rem; }
  .site-footer__links { gap: var(--space-1); }
  .nav__login { display: inline-flex; align-items: center; min-height: 44px; }
  .nav__cta { min-height: 44px; }
  .mega__item { padding-block: var(--space-4); }
}

/* ---- 5. The last two undersized tap targets ------------------------------
   The footer logo is an image-only link at exactly the logo's 30px height, and
   the pricing billing switch is a 30px pill. Both are comfortably tappable on a
   mouse and awkward on a thumb. Grow the hit area, not the artwork.          */
@media (max-width: 900px) {
  .site-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
  /* The switch is a 52x30 pill with a ::after knob positioned against it, so
     growing the element would stretch the track. Extend the HIT AREA instead
     with a transparent overlay — the artwork is untouched. */
  .billing-switch::before {
    content: "";
    position: absolute;
    inset: -7px -4px;   /* 30px + 14px = 44px tall */
  }
}

/* ---- 6. Footer gained a 6th column (Compare) ------------------------------
   The base grid above is `1.5fr repeat(4, 1fr)`. With the Compare column added
   that is five link columns, so widen the track list. The tablet/mobile
   collapses in block 3 still apply.                                          */
@media (min-width: 1101px) {
  .site-footer__grid { grid-template-columns: 1.6fr repeat(5, 1fr); gap: var(--space-5); }
}

/* ==========================================================================
   Mega menu v2 — per-item icons + a properly structured mobile menu.
   Supersedes the plain-text .mega__item rules further up (those still apply to
   the type; these add the icon rail and fix the mobile layout).
   ========================================================================== */

/* ---- 7. Item = icon + text ------------------------------------------------ */
.mega__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.mega__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.mega__icon svg { width: 20px; height: 20px; }
.mega__item:hover .mega__icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  transform: scale(1.06);
}
.mega__txt { min-width: 0; }
/* The type rules above target `.mega__item span`, which now also matches the
   .mega__icon and .mega__txt wrappers. Re-scope them to the inner line only. */
.mega__item > .mega__icon,
.mega__item > .mega__txt { font-size: inherit; color: inherit; }
.mega__txt strong { display: block; font-weight: var(--fw-semibold); color: var(--color-text); }
.mega__txt span { display: block; font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.4; }
.mega__item:hover .mega__txt strong { color: var(--color-primary); }
.mega__item--sm .mega__icon { flex-basis: 30px; width: 30px; height: 30px; }
.mega__item--sm .mega__icon svg { width: 16px; height: 16px; }
.mega__item--sm { padding-block: var(--space-2); }

/* Keep the hover slide from fighting the icon scale. */
.mega__item:hover { transform: none; }

/* ---- 8. Mobile mega: a real nested accordion -------------------------------
   Previously the panel just unhid a 3-column grid inside the slide-down nav, so
   the columns stacked with no indent, no separation, and a 1200px max-height
   that clipped the (now longer) Company menu. Rebuilt as an indented sub-list
   that reads as a child of its parent link.                                   */
@media (max-width: 900px) {
  .has-mega { position: relative; }

  /* THE BUG behind the misaligned mobile menu.
     The desktop open-state rule `.has-mega.is-open .mega` sets
     `transform: translateX(-50%)` to centre the dropdown. It has higher
     specificity (0,3,0) than the mobile reset `.mega { transform: none }`
     (0,1,0), so on mobile it still won the cascade the moment the menu opened —
     dragging the whole panel half its own width off the left edge. Undo it at
     matching specificity here. */
  .has-mega.is-open .mega,
  .has-mega:focus-within .mega {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav__link[aria-expanded] { justify-content: space-between; }
  .nav__link[aria-expanded="true"] { color: var(--color-primary); }

  .mega {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height var(--dur-base) var(--ease-out);
  }
  /* Generous ceiling: the Company panel is now 13 items across 3 groups. A
     value that is too small silently clips the last links — which is exactly
     what went wrong before. */
  .has-mega.is-open .mega { max-height: 1800px; }

  .mega__grid {
    display: block;
    padding: var(--space-2) 0 var(--space-4);
  }
  .mega__col {
    padding: var(--space-3) 0 var(--space-2) var(--space-4);
    border-left: 2px solid var(--color-border);
    margin-bottom: var(--space-2);
  }
  .mega__col:last-child { margin-bottom: 0; }
  .mega__col-title {
    margin-bottom: var(--space-2);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--color-accent);
  }
  .mega__item {
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    align-items: center;
    min-height: 44px;               /* thumb-sized, like the rest of the mobile nav */
  }
  .mega__item:hover { background: var(--color-bg-alt); }
  .mega__item--sm { padding-block: var(--space-3); }
}

/* ---- 9. Footer social links ------------------------------------------------
   Sits above the newsletter form in the footer's brand column.
   To hide the whole row, comment out the .social block in partials/footer.html
   and re-run `php scripts/inline_partials.php` — do NOT just hide it here, or
   the links stay in the HTML and search engines still follow them.           */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.social__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.social__link svg { width: 18px; height: 18px; }
.social__link:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-primary);
  transform: translateY(-3px);
}
.social__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 900px) {
  /* Thumb-sized on touch. */
  .social__link { width: 44px; height: 44px; }
}

/* ---- 10. Products mega now has 11 items across 4 columns -------------------
   The base .mega__grid is a fixed 3-column grid. The Products panel gained a
   fourth column when Reviews and SEO&Chatbot were split into four products, so
   let the grid size itself to the number of columns it actually has instead of
   hard-coding three. The panel width is still capped at 100vw - 2rem, so this
   cannot reintroduce the tablet overflow. */
@media (min-width: 901px) {
  .mega__grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .mega { width: min(1040px, calc(100vw - 2rem)); }
}


/* ---- 11. Social hover -------------------------------------------------------
   On hover the tile turns white, and the icon shows the Govarova accent purple.
   (An earlier version used each network's own brand colour here; the brand accent
   is what should show, so the row reads as one Govarova component.) */
.social__link:hover,
.social__link:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--color-accent);
  transform: translateY(-3px);
}

/* ==========================================================================
   Cookie consent banner — bottom-left, with slide-in / slide-out.
   ========================================================================== */
.gv-consent {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2000;
  width: min(400px, calc(100vw - 40px));
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 320ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.gv-consent.is-in  { opacity: 1; transform: none; pointer-events: auto; }
.gv-consent.is-out { opacity: 0; transform: translateY(24px) scale(0.97); pointer-events: none; }

.gv-consent__panel {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 48px rgba(20, 16, 58, 0.22);
}
.gv-consent__title { font-size: 1rem; color: var(--color-primary); margin-bottom: 0.4rem; }
.gv-consent__body { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; }

.gv-consent__detail { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.gv-consent__detail label { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; cursor: pointer; }
.gv-consent__detail input { margin-top: 0.2rem; flex: none; }
.gv-consent__detail span { color: var(--color-text-muted); line-height: 1.5; }
.gv-consent__detail strong { color: var(--color-text); }

.gv-consent__actions { display: flex; gap: 0.45rem; margin-top: 1rem; flex-wrap: wrap; }
.gv-consent__btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.gv-consent__btn:hover { transform: translateY(-1px); }
/* Reject is styled exactly as prominently as Accept — a banner that buries the
   reject button is the most commonly enforced GDPR breach there is. */
.gv-consent__btn--ghost   { background: #fff; color: var(--color-primary); }
.gv-consent__btn--ghost:hover { border-color: var(--color-accent); }
.gv-consent__btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.gv-consent__btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); }

.gv-consent__link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-decoration: underline;
}
.gv-consent__link:hover { color: var(--color-accent); }

@media (max-width: 520px) {
  .gv-consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-consent { transition: opacity 120ms linear; transform: none; }
  .gv-consent.is-in, .gv-consent.is-out { transform: none; }
}

/* ==========================================================================
   Email-capture popup (assets/js/consent.js) — centred modal over a dimmed
   backdrop. Configured on the admin "Email popup" page.
   ========================================================================== */
.gv-pop {
  position: fixed;
  inset: 0;
  z-index: 2100;                 /* above the consent banner */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 16, 58, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.gv-pop.is-in  { opacity: 1; pointer-events: auto; }
.gv-pop.is-out { opacity: 0; pointer-events: none; }

.gv-pop__panel {
  position: relative;
  width: min(440px, 100%);
  padding: 2.25rem 2rem 2rem;
  border-radius: var(--radius-xl, 20px);
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 70px rgba(20, 16, 58, 0.32);
  transform: translateY(16px) scale(0.97);
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.gv-pop.is-in .gv-pop__panel { transform: none; }

.gv-pop__close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background 140ms ease, color 140ms ease;
}
.gv-pop__close:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.gv-pop__title { font-size: 1.35rem; color: var(--color-primary); margin-bottom: 0.5rem; text-wrap: balance; }
.gv-pop__text  { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 1.25rem; }

.gv-pop__form { display: flex; flex-direction: column; gap: 0.6rem; }
.gv-pop__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gv-pop__input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: #fff;
}
.gv-pop__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(91,52,240,.15); }
.gv-pop__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }  /* honeypot */
.gv-pop__btn {
  min-height: 46px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.gv-pop__btn:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-1px); }
.gv-pop__btn:disabled { opacity: 0.6; cursor: default; }

.gv-pop__note { min-height: 1em; margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.gv-pop__note.is-err { color: #c0392b; }
.gv-pop__success { margin: 0; padding: 0.5rem 0; font-size: 1rem; color: var(--color-primary); font-weight: var(--fw-semibold); text-align: center; }

@media (max-width: 520px) {
  .gv-pop { padding: 14px; align-items: flex-end; }
  .gv-pop__panel { padding: 1.75rem 1.35rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-pop, .gv-pop__panel { transition: opacity 120ms linear; }
  .gv-pop__panel { transform: none; }
}

/* ==========================================================================
   Language switcher (assets/js/lang.js)
   ========================================================================== */
.lang-switch { position: relative; }
.lang-switch[hidden] { display: none; }

.lang-switch__btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.lang-switch__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.lang-switch__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 160px;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  z-index: 60;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }

.lang-switch__item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--color-text);
  text-decoration: none;
}
.lang-switch__item:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.lang-switch__item.is-active { font-weight: var(--fw-bold); color: var(--color-accent); }

/* ==========================================================================
   Comparison / explainer table (.p-table)
   Moved here from product.css on 2026-08-14. It lives in components.css and
   not in product.css because pricing.html uses it as well and does not load
   product.css — which is why its "What a limit actually does" table rendered
   as unformatted text. Both pages load this file.
   ========================================================================== */
/* ---- 4. Before / after table ---------------------------------------------- */
.p-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.p-table { width: 100%; border-collapse: collapse; min-width: 540px; }
.p-table thead th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.p-table thead th.is-us {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  text-align: center;
}
.p-table tbody th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-border);
}
.p-table tbody td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.p-table tbody td.is-us {
  text-align: center;
  background: rgba(91, 52, 240, 0.045);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}
.p-table tbody tr:last-child th, .p-table tbody tr:last-child td { border-bottom: 0; }
.p-table tbody tr:hover { background: #faf9ff; }
.p-tick, .p-cross {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
}
.p-tick { background: #e6f6ee; color: #1f7a4d; }
.p-cross { background: #f2f4f8; color: #98a1b8; }