/* AUTO-GENERATED by admin/tools/bundle-css.php — do not hand-edit.
   Edit the individual source files listed below, then re-run that script.
   Bundle order (preserves original cascade order exactly): site-theme.css, site-header-footer.css, site-icons.css, site-ads.css, site-responsive.css */

/* ---- site-theme.css ---- */
:root {
  --wc-primary: #4361ee;
  --wc-primary-dark: #3a0ca3;
  --wc-accent: #f72585;
  --wc-ink: #172033;
  --wc-muted: #49566b;
  --wc-page: #f6f8ff;
  --wc-surface: rgba(255, 255, 255, 0.88);
  --wc-border: rgba(67, 97, 238, 0.18);
  --wc-focus: #ffb703;
  --wc-footer: #111827;
  --wc-shadow: 0 18px 50px rgba(35, 49, 110, 0.12);
  /* Page Width Rule, two tiers (CLAUDE.md, amended 2026-09-05): 5vw above
     768px (the original 5%/90%/5% split, unchanged), a fixed 16px at
     768px and under — a percentage margin on a narrow phone eats into
     already-scarce width right when the page needs to hand as much of it
     back to real content as possible, so small screens get a small,
     constant pixel gap instead of a shrinking-with-viewport percentage. */
  --wc-body-gutter: 5vw;
}
@media (max-width: 768px) {
  :root {
    --wc-body-gutter: 16px;
  }
}
* {
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: var(--wc-page);
}
html:has(body.dark-mode) {
  background: #0b1020;
}
body {
  /* No overflow-x here on purpose: the header and footer deliberately
     break out of this element's box via negative margins to reach full
     viewport width (see .wc-site-header/.wc-site-footer in
     site-header-footer.css). overflow-x on body would clip that
     breakout back to body's own edges even though it doesn't change
     what getBoundingClientRect() reports - confirmed live via
     elementFromPoint() hit-testing after this was found silently
     clipping the footer to a ~gutter-wide gap on the left. html's own
     overflow-x: hidden (above) still catches genuine page-level
     horizontal overflow at the true outermost boundary. */
  padding: 0;
  margin-left: var(--wc-body-gutter);
  margin-right: var(--wc-body-gutter);
  color: var(--wc-ink);
  background:
    radial-gradient(
      circle at 8% 0,
      rgba(76, 201, 240, 0.13),
      transparent 28rem
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(114, 9, 183, 0.1),
      transparent 26rem
    ),
    var(--wc-page);
}
body.dark-mode {
  --wc-ink: #f5f7ff;
  --wc-muted: #bdc7da;
  --wc-page: #0b1020;
  --wc-surface: rgba(24, 31, 53, 0.92);
  --wc-border: rgba(76, 201, 240, 0.26);
  --wc-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}
a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--wc-focus) !important;
  outline-offset: 3px;
}
canvas,
img,
svg {
  max-width: 100%;
}

body > .container,
body > .container-fluid,
body > main {
  max-width: 100%;
}
.blog-card,
.faq-item,
.feature-card,
.input-section,
.modal-content,
.results-section {
  border-color: var(--wc-border) !important;
  box-shadow: var(--wc-shadow);
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Visually-hidden utility: for headings/labels that must exist in the DOM
   for correct semantic heading structure (screen readers, SEO/AEO parsers)
   but have no visible on-page spot of their own — content stays announced
   and crawlable, nothing shifts visually. Standard clip-based technique. */
.wc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dark-mode toggle button — shared so every page looks identical.
   home.css (index.html only) already carried this exact rule; every other
   page loads only site-theme.css, never home.css, and had no equivalent
   rule of its own, so the button rendered with no shape/color at all on
   every page except the homepage. Fallback values in each var() keep this
   safe even if a future page's inline :root block omits a token. */
.dark-mode-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--btn-primary, #4361ee),
    var(--btn-primary-dark, #3a0ca3)
  );
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow, 0 10px 20px rgba(0, 0, 0, 0.15));
  z-index: 1150;
  transition: var(--transition, all 0.3s ease);
}
.dark-mode-toggle:hover {
  transform: rotate(15deg) scale(1.1);
}
.dark-mode-toggle:focus-visible {
  outline: 3px solid var(--wc-focus, #ffb703) !important;
  outline-offset: 3px;
}

/* ---- site-header-footer.css ---- */
/* The site's header and footer — structure/behavior comes from
   assets/js/site-shell.js, this file is everything that styles that
   markup (.wc-site-header, .wc-nav, .wc-brand, .wc-dropdown,
   .wc-site-footer, .wc-footer-*, .wc-menu-*).

   This file is the SINGLE, LITERAL source of these rules. It is loaded
   two ways, never copy-pasted:
     - Bundled into shared.css / index-bundle.css (via
       admin/tools/bundle-css.php) for every page that uses the shared
       CSS bundle.
     - Linked directly via <link rel="stylesheet"> on any standalone
       page that can't load the shared bundle (currently
       word-counter-usa.html).
   Both paths load this exact file, so there is no hand-copied duplicate
   left to drift out of sync — which is exactly what happened twice
   before this file existed (word-counter-usa.html's own copy of this
   CSS silently fell behind on font-family, then again on font-size/
   spacing, because keeping a second copy manually in sync depends on
   remembering to update it every time, which failed in practice).

   Depends on CSS custom properties it does not define itself
   (--wc-primary, --wc-ink, --wc-muted, --wc-surface, --wc-border,
   --wc-shadow, --wc-body-gutter, etc.) — every page that loads this
   file already defines a :root block with these (site-theme.css for
   bundle pages, word-counter-usa.html's own inline :root for itself),
   so this file intentionally does not redeclare them. */
.wc-site-header {
  /* Explicit on purpose, not inherited: without this, the header's font
     silently follows whatever font-family that page's own body happens
     to declare - confirmed as a real, live bug where the 5 error pages
     (Arial) and word-counter-usa.html (a system-font stack) rendered the
     header in a visibly different font than every other page. This is
     the site's one real font, matching home.css's body rule - it must
     never be page-dependent. */
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: sticky;
  top: 10px;
  z-index: 1200;
  width: calc(90vw - 32px);
  max-width: 1440px;
  /* Literal 16px, not calc(5vw + 16px - var(--wc-body-gutter)) (changed
     2026-09-05): that older form only produced the intended flat 16px
     because --wc-body-gutter always equalled 5vw everywhere it was used —
     the 5vw term and the -var(--wc-body-gutter) term were written
     specifically to cancel each other out. Since --wc-body-gutter now
     varies by breakpoint (see the Page Width Rule in CLAUDE.md — it's a
     fixed 16px on screens 768px and under, not 5vw there), that
     cancellation would have silently broken, shifting the header sideways
     on every phone-sized screen. Writing the real, always-intended 16px
     directly removes the dependency entirely — same exact position at
     every screen size as before this change, just no longer fragile
     against a body-margin rule that no longer holds a single value. */
  margin: 10px 16px 0;
  padding: 0.65rem clamp(0.85rem, 3vw, 2rem);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--wc-border);
  border-radius: 32px;
  box-shadow: 0 8px 30px rgba(20, 30, 75, 0.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.dark-mode .wc-site-header {
  background: rgba(11, 16, 32, 0.92);
}
.wc-nav {
  /* position: relative added 2026-09-05 alongside the mega-menu redesign:
     .wc-dropdown is positioned absolute and anchored right: 0 against
     its nearest positioned ancestor. Before this, that ancestor was
     .wc-nav-links > li (the Countries <li> itself, a narrow element sitting
     mid-header) - a wide 1180px dropdown anchored to a narrow, off-center
     <li> overflowed both left and upward past the header's own edges,
     rendering the panel overlapping/behind the header instead of cleanly
     below it. Anchoring to .wc-nav instead - the same element whose own
     width (min(1180px, 100%)) the dropdown is deliberately matching -
     means right: 0 lines up with the header's real right content edge. */
  position: relative;
  width: min(1180px, 100%);
  min-height: 52px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: var(--wc-primary);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
.wc-brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(67, 97, 238, 0.28);
}
.wc-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}
.wc-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-nav-links > li {
  position: relative;
}
/* Overrides the general rule above specifically for the Countries item:
   .wc-dropdown (absolute-positioned) must resolve against .wc-nav, not
   this narrow, off-center <li> - see the position: relative comment on
   .wc-nav for why. static removes this <li> as a positioning context so
   .wc-dropdown's absolute positioning skips past it to .wc-nav instead.
   Specificity note: written as .wc-nav-links > li.wc-has-dropdown (not
   just .wc-has-dropdown alone) so it's at least as specific as the
   ".wc-nav-links > li" rule above it - a bare .wc-has-dropdown selector
   is LESS specific than ".wc-nav-links > li" (one class vs one class +
   one type selector) and silently lost the cascade, which is exactly
   what happened the first time this was written this way: the dropdown
   kept resolving against the <li> instead of .wc-nav, still overlapping
   the header, until this was caught by live measurement. */
.wc-nav-links > li.wc-has-dropdown {
  position: static;
}
.wc-nav-links a {
  display: block;
  padding: 0.68rem 0.82rem;
  border-radius: 0.72rem;
  color: var(--wc-muted);
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.wc-nav-links button.wc-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.68rem 0.82rem;
  border: none;
  border-radius: 0.72rem;
  background: none;
  color: var(--wc-muted);
  font: inherit;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.wc-nav-links a:hover,
.wc-nav-links button.wc-nav-toggle:hover {
  color: var(--wc-primary);
  background: rgba(67, 97, 238, 0.1);
  transform: translateY(-1px);
}
/* The dropdown-open indicator is deliberately a lighter touch than the
   filled "current page" pill above — recolor only, no background — so an
   open Countries menu never reads as if it were the current page sitting
   right next to it (e.g. Home showing aria-current on the homepage). */
.wc-has-dropdown.wc-open button.wc-nav-toggle {
  color: var(--wc-primary);
}
.wc-caret {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-top: -2px;
}
.wc-nav-toggle[aria-expanded="true"] .wc-caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}
/* Mega-menu treatment (added 2026-09-05, at the site owner's explicit
   request to match a wide, icon-illustrated card-grid reference design):
   the panel itself now spans the same content width as the header's own
   nav bar (min(1180px, 100%), matching .wc-nav) instead of a narrow
   15.5rem column, and each Countries link renders as an icon + title
   card rather than a plain text row. Positioned so its right edge lines
   up with the header's own right edge (right: 0, not left: 0) since the
   Countries toggle sits near the left of the nav but the panel is far
   wider than before - anchoring left would push most of the panel past
   the header's right boundary. */
.wc-dropdown {
  position: absolute;
  /* calc(100% + 0.65rem [.wc-site-header's own top/bottom padding] +
     1px [its border] + 0.4rem [the original visual gap]) - not just
     "100% + 0.4rem": now that .wc-dropdown is positioned against .wc-nav
     (see the position: relative comment on .wc-nav above) rather than the
     Countries <li>, 100% means the bottom of .wc-nav's own box - which
     sits INSIDE .wc-site-header's padding, not at the header's actual
     visible bottom edge. Without adding the header's own padding+border
     back in here, the panel's top edge lands about 11px above where the
     header visually ends, overlapping it - confirmed by live measurement
     (ddTop was 80px against a real headerBottom of 85px before this). */
  top: calc(100% + 0.65rem + 1px + 0.4rem);
  right: 0;
  width: min(1180px, calc(100vw - 2rem));
  margin: 0;
  padding: 0.85rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.6rem;
  /* Solid #fff, not var(--wc-surface) (added 2026-09-05): --wc-surface is
     a semi-transparent white (rgba(255,255,255,0.88)) everywhere else on
     the site, which reads fine on a small dropdown sitting over mostly
     plain background - but this panel is now wide enough to sit directly
     over the page's own H1 heading text, and the site owner reported the
     heading visibly showing through the panel. A dedicated solid color
     here (with its own dark-mode override right below) fixes this
     specific panel without changing --wc-surface's transparency
     everywhere else it's used (cards, the header itself, etc.). */
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: 1.1rem;
  box-shadow: var(--wc-shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}
.dark-mode .wc-dropdown {
  /* Matching solid dark-mode counterpart to the light-mode #fff above -
     without this, dark mode would show a solid white panel (wrong) since
     .wc-dropdown no longer reads its background from --wc-surface, which
     is the variable that used to flip between light/dark automatically. */
  background: #181f35;
}
/* Same brand gradient already used on the logo mark and the tab/section
   underlines elsewhere on the site (var(--wc-primary) -> --wc-primary-dark)
   - reused here as a thin top accent instead of a new color. */
.wc-dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wc-primary), var(--wc-primary-dark));
}
/* Each item is now its own bordered card in a grid, not a row in a
   stacked list, so the divider-per-row rule from the old narrow layout
   no longer applies. */
.wc-dropdown li + li {
  border-top: none;
}
.wc-dropdown a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  color: var(--wc-ink);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.25;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.wc-dropdown-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  background: rgba(67, 97, 238, 0.1);
  color: var(--wc-primary);
}
.wc-dropdown-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}
.wc-dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.wc-dropdown-title {
  color: var(--wc-ink);
  font-weight: 650;
  font-size: 0.92rem;
}
.wc-dropdown-desc {
  color: var(--wc-muted);
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
}
/* Same rightward hover-shift already used on footer links (footer a:hover)
   elsewhere on the site - reused here so the two nav surfaces feel like
   one design language instead of two different hover styles. */
.wc-dropdown a:hover,
.wc-dropdown a:focus-visible {
  border-color: rgba(67, 97, 238, 0.35);
  background: rgba(67, 97, 238, 0.08);
  transform: translateY(-2px);
}
.wc-dropdown a:hover .wc-dropdown-title,
.wc-dropdown a:focus-visible .wc-dropdown-title {
  color: var(--wc-primary);
}
@media (min-width: 861px) {
  .wc-has-dropdown:hover > .wc-dropdown,
  .wc-has-dropdown.wc-open > .wc-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.wc-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--wc-border);
  border-radius: 0.8rem;
  color: var(--wc-ink);
  background: var(--wc-surface);
  box-shadow: 0 6px 16px rgba(33, 43, 91, 0.1);
  cursor: pointer;
}
.wc-menu-lines,
.wc-menu-lines::after,
.wc-menu-lines::before {
  width: 20px;
  height: 2px;
  display: block;
  border-radius: 99px;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.wc-menu-lines {
  position: relative;
}
.wc-menu-lines::after,
.wc-menu-lines::before {
  position: absolute;
  content: "";
  left: 0;
}
.wc-menu-lines::before {
  top: -6px;
}
.wc-menu-lines::after {
  top: 6px;
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines {
  background: 0 0;
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines::before {
  top: 0;
  transform: rotate(45deg);
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines::after {
  top: 0;
  transform: rotate(-45deg);
}
.wc-site-footer {
  /* Explicit on purpose - see the matching comment on .wc-site-header
     above: this must never silently follow whatever font a given page's
     own body declares. */
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 100vw;
  margin-left: calc(-1 * var(--wc-body-gutter));
  margin-top: clamp(3rem, 8vw, 6rem);
  color: #fff;
  background:
    radial-gradient(
      circle at 10% 0,
      rgba(76, 201, 240, 0.16),
      transparent 24rem
    ),
    linear-gradient(145deg, #111827, #17112f);
  border-top: 1px solid rgba(76, 201, 240, 0.22);
}
.wc-footer-grid {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem;
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}
.wc-site-footer h2 {
  margin: 0 0 1rem;
  color: #75dcfa;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#wc-footer-brand {
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: normal;
}
.wc-site-footer p {
  max-width: 34rem;
  color: #d6dceb;
  line-height: 1.7;
}
.wc-site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-site-footer li + li {
  margin-top: 0.6rem;
}
.wc-site-footer a {
  color: #e7ebf5;
  text-decoration: none;
}
.wc-site-footer a:hover {
  color: #75dcfa;
}
.wc-footer-social-label {
  margin: 1.35rem 0 0.8rem;
  color: #9aa5c0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wc-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
/* Rounded-square "tinted badge" shape (16px radius) is this site's own
   established icon-container language — the same shape/size .feature-icon
   and .wc-feature-overlay-icon already use elsewhere, not a generic round
   social-icon button borrowed from somewhere else. Background stays a soft
   near-white (not solid #fff, not the header's dark-surface glass) since
   these icons carry their own real brand color and need a light, neutral
   surface to read correctly against the dark footer.
   !important on the properties home.css's older "footer a" rule also sets
   (index.html only) so this button keeps its own look there instead of
   inheriting that rule's text-link slide-and-recolor hover. */
.wc-footer-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(8, 12, 30, 0.32);
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.wc-footer-social-link:hover,
.wc-footer-social-link:focus-visible {
  background: #ffffff;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(8, 12, 30, 0.4);
}
.wc-footer-social-link .wc-icon {
  width: 1.9rem;
  height: 1.9rem;
  filter: none;
}
@media (max-width: 480px) {
  .wc-footer-social-link {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
  }
  .wc-footer-social-link .wc-icon {
    width: 1.65rem;
    height: 1.65rem;
  }
}
.wc-footer-bottom {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #b7c0d4;
  text-align: center;
  font-size: 0.9rem;
}
.wc-footer-legal {
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.wc-footer-legal a {
  font-size: 0.82rem;
  color: #9aa5c0;
}
.wc-footer-legal a:hover {
  color: #75dcfa;
}

@media (max-width: 860px) {
  .wc-menu-button {
    display: grid;
  }
  .wc-nav-links {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    width: min(calc(100vw - 1.5rem), 34rem);
    max-height: min(72vh, 34rem);
    padding: 0.65rem;
    display: grid;
    gap: 0.18rem;
    overflow-y: auto;
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 1rem;
    box-shadow: var(--wc-shadow);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
  }
  .wc-nav-links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .wc-nav-links a {
    padding: 0.85rem 1rem;
    text-align: left;
  }
  .wc-nav-links button.wc-nav-toggle {
    width: 100%;
    justify-content: space-between;
  }
  .wc-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    max-width: none;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    background: rgba(67, 97, 238, 0.06);
    backdrop-filter: none;
    display: none;
    margin-top: 0.2rem;
  }
  .wc-has-dropdown.wc-open > .wc-dropdown {
    display: grid;
  }
}

@media (max-width: 640px) {
  .wc-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .wc-site-header {
    top: 10px;
    width: calc(90vw - 16px);
    margin-top: 10px;
    /* Literal 8px, not calc(5vw + 8px - var(--wc-body-gutter)) — same
       2026-09-05 fix and reasoning as the base .wc-site-header rule above:
       this only ever produced 8px because --wc-body-gutter was always 5vw
       everywhere; now that it's a fixed 16px at 768px and under (this
       360px rule is nested inside that same range), the old cancel-out
       form would have silently shifted the header. */
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 20px;
    padding-inline: 0.6rem;
  }
  .wc-brand {
    font-size: 1.03rem;
  }
  .wc-brand-mark {
    width: 2rem;
    height: 2rem;
  }
}

/* ---- site-icons.css ---- */
i[class*="fa-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
}
.wc-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  overflow: visible;
  fill: currentColor;
  filter: drop-shadow(0 2px 3px rgba(35, 49, 110, 0.22));
  transform: translateZ(0);
}
.btn .wc-icon,
.dark-mode-toggle .wc-icon,
.feature-icon .wc-icon,
.stat-icon .wc-icon {
  filter: drop-shadow(0 2px 3px rgba(255, 255, 255, 0.28))
    drop-shadow(0 4px 6px rgba(27, 36, 84, 0.2));
}
.dark-mode-toggle,
.feature-icon,
.stat-icon {
  position: relative;
  isolation: isolate;
}
.dark-mode-toggle::after,
.feature-icon::after,
.stat-icon::after {
  content: "";
  position: absolute;
  inset: 5% 12% auto;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
  z-index: -1;
}

/* ---- site-ads.css ---- */
.wc-ad-slot {
  width: min(1180px, calc(100% - 2rem));
  min-height: 100px;
  margin: clamp(1.25rem, 3vw, 2rem) auto;
  padding: 1.4rem;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wc-border, rgba(67, 97, 238, 0.18));
  border-radius: 1rem;
  color: var(--wc-muted, #49566b);
  background: linear-gradient(
    135deg,
    rgba(67, 97, 238, 0.045),
    rgba(76, 201, 240, 0.07)
  );
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 100px;
}
.wc-ad-slot > span {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  font:
    600 0.65rem/1 system-ui,
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.76;
}
.wc-ad-slot .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 70px;
}
.dark-mode .wc-ad-slot {
  background: linear-gradient(
    135deg,
    rgba(76, 201, 240, 0.06),
    rgba(114, 9, 183, 0.08)
  );
}
@media (max-width: 640px) {
  .wc-ad-slot {
    width: calc(100% - 1rem);
    min-height: 80px;
    margin: 1rem auto;
    padding: 1.1rem 0.5rem;
    contain-intrinsic-size: 80px;
  }
  .wc-ad-secondary {
    display: none;
  }
}
@media print {
  .wc-ad-slot {
    display: none !important;
  }
}

/* ---- site-responsive.css ---- */
/* Shared responsive safety layer — loaded last on every page. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
body {
  /* No overflow-x here on purpose - see the matching comment on body in
     site-theme.css: the header/footer break out of body via negative
     margins, and overflow-x on body would clip that breakout even
     though it doesn't change getBoundingClientRect()'s reported values.
     html's overflow-x: clip (above) is the real outer boundary. */
  width: auto;
  max-width: 100%;
}
body,
main,
main > *,
section,
article,
.container,
.container-fluid,
.tool-container,
.input-section,
.results-section,
.features-grid,
.tool-grid,
.comparison-container,
.blog-grid,
.faq-container {
  min-width: 0;
}
main,
.container,
.container-fluid {
  max-width: 100%;
}
img,
picture,
video,
iframe,
canvas,
svg {
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
p,
li,
a,
button,
label,
.stat-value {
  overflow-wrap: anywhere;
}
pre,
code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.wc-site-header {
  box-sizing: border-box;
}
.wc-nav {
  position: relative;
  min-width: 0;
}
.wc-brand {
  max-width: calc(100% - 58px);
}
.wc-site-footer,
.wc-footer-grid,
.wc-footer-bottom {
  box-sizing: border-box;
}
.dark-mode-toggle {
  position: fixed !important;
  left: auto !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  transform: none;
  z-index: 1150;
}
.modal-content {
  max-width: min(500px, calc(100vw - 1rem)) !important;
  max-height: 90dvh;
  overflow: auto;
}
table {
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
thead,
tbody,
tfoot {
  width: max-content;
  min-width: 100%;
  display: table;
}
/* Shared alignment system */
body {
  direction: ltr;
  text-align: start;
}
.wc-nav {
  align-items: center;
  justify-content: space-between;
}
.wc-brand {
  text-align: start;
}
.wc-nav-links {
  align-items: center;
  justify-content: flex-end;
  text-align: start;
}
.wc-menu-button {
  align-items: center;
  justify-content: center;
}
.wc-footer-grid {
  text-align: start;
}
.wc-footer-grid > section,
.wc-footer-grid > nav {
  justify-self: stretch;
}
.wc-footer-bottom {
  text-align: center;
}
.hero,
.page-hero,
.blog-header,
.error-container {
  text-align: center;
}
.hero > *,
.page-hero > *,
.blog-header > *,
.section-subtitle {
  margin-inline: auto;
}
.section-title,
.section-heading {
  text-align: center;
}
.input-section,
.results-section,
.modal-content,
.find-replace-box,
.goal-tracker,
.faq-answer,
.blog-content,
.article-content,
article {
  text-align: start;
}
.input-section h2,
.results-section h2,
.feature-block h3 {
  justify-content: flex-start;
  text-align: start;
}
label,
input,
textarea,
select,
.url-input {
  text-align: start;
}
.action-buttons,
.tool-grid {
  align-items: stretch;
}
.action-buttons .btn,
.tool-grid .btn {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.feature-card,
.stat-box,
.comparison-result {
  text-align: center;
}
#how-it-works {
  text-align: center;
}
#how-it-works > .section-title {
  width: 100%;
  margin-inline: auto;
  text-align: center !important;
}
#how-it-works .features-grid {
  width: min(1500px, calc(100% - 2rem));
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  justify-items: stretch;
}
#how-it-works .feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center !important;
}
#how-it-works .feature-card > p {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center !important;
}
.keyword-item,
.breakdown-row,
.social-platform-head {
  align-items: center;
  text-align: start;
}
table th,
table td {
  text-align: start;
  vertical-align: top;
}
@media (max-width: 1100px) {
  .wc-menu-button {
    display: grid !important;
  }
  .wc-nav-links {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 50%;
    width: min(calc(100vw - 1rem), 36rem);
    max-height: min(72dvh, 34rem);
    padding: 0.65rem;
    display: grid !important;
    gap: 0.18rem;
    overflow-y: auto;
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 1rem;
    box-shadow: var(--wc-shadow);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
    z-index: 10;
  }
  .wc-nav-links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .wc-nav-links {
    align-items: stretch;
    justify-content: start;
  }
  .wc-nav-links li {
    width: 100%;
  }
  .wc-nav-links a {
    width: 100%;
    padding: 0.85rem 1rem;
    text-align: start;
  }
}
@media (max-width: 900px) {
  .tool-container,
  .comparison-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  .input-section,
  .results-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(1rem, 4vw, 1.6rem) !important;
  }
  .features-grid,
  .tool-grid,
  .blog-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 16rem), 1fr)
    ) !important;
  }
  .action-buttons,
  .options,
  .find-replace-row,
  .goal-tracker-row {
    max-width: 100%;
  }
  .action-buttons .btn {
    min-width: 0;
    white-space: normal;
  }
  .wc-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .wc-footer-grid > section:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 640px) {
  /* Mobile-only base text size. Desktop and tablet keep the browser
     default (16px) — this raises every rem-sized heading, paragraph,
     and label just on phone-width screens, where small text is hardest
     to read, without touching anything above this breakpoint. */
  html {
    font-size: 18px;
  }
  body > main,
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: clamp(0.5rem, 3vw, 0.9rem) !important;
  }
  .search-box,
  .search-box input,
  .blog-filters input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .comparison-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .comparison-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row > * {
    min-width: 0;
    max-width: 100%;
  }
  .wc-site-header {
    padding: 0.55rem 0.65rem;
  }
  .wc-brand {
    font-size: clamp(0.98rem, 5vw, 1.2rem);
    gap: 0.45rem;
  }
  .wc-brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
  }
  .wc-menu-button {
    width: 42px;
    height: 42px;
  }
  .wc-footer-grid {
    width: calc(100% - 1.25rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    padding: 2.25rem 0 1.5rem;
  }
  .wc-footer-grid > section:first-child {
    grid-column: auto;
  }
  .wc-footer-grid,
  .wc-footer-grid > section,
  .wc-footer-grid > nav {
    text-align: center;
  }
  .wc-site-footer p {
    margin-inline: auto;
  }
  .wc-site-footer ul {
    display: grid;
    justify-items: center;
  }
  .wc-footer-bottom {
    width: calc(100% - 1.25rem);
    padding: 1rem 0 1.25rem;
  }
  .action-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .action-buttons .btn,
  .tool-grid .btn {
    width: 100% !important;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
  }
  .tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .tab-btn {
    flex: 0 0 auto;
  }
  .dark-mode-toggle {
    width: 48px !important;
    height: 48px !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  article p,
  .article-content p,
  .blog-content p {
    text-align: start !important;
  }
  .hero,
  .page-hero,
  .blog-header,
  .section-title,
  .section-subtitle {
    text-align: center !important;
  }
}
@media (max-width: 280px) {
  .wc-site-header {
    padding-inline: 0.4rem;
  }
  .wc-brand span:last-child {
    font-size: 0.9rem;
  }
  .wc-brand-mark {
    width: 1.8rem;
    height: 1.8rem;
  }
  .wc-menu-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .wc-nav-links {
    width: calc(100vw - 0.5rem);
  }
  .input-section,
  .results-section,
  .feature-card,
  .faq-item {
    padding: 0.75rem !important;
  }
}

@media (max-width: 900px) and (min-width: 641px) {
  #how-it-works .features-grid {
    width: min(760px, calc(100% - 1.25rem));
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #how-it-works .feature-card:last-child {
    grid-column: 1/-1;
    width: calc(50% - 0.75rem);
    justify-self: center;
  }
}
@media (max-width: 640px) {
  #how-it-works .features-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #how-it-works .feature-card:last-child {
    grid-column: auto;
    width: 100%;
  }
}