/* 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, home.css, site-ads.css, site-responsive.css, export-controls.css, gap-features.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;
  display: inline-block;
  transform: translateX(0);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.wc-site-footer a:hover,
.wc-site-footer a:focus-visible {
  color: #75dcfa;
  transform: translateX(4px);
}
.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;
}

/* ---- home.css ---- */
:root{--primary:#4361ee;--primary-light:#4895ef;--primary-dark:#3a0ca3;--secondary:#7209b7;--accent:#f72585;--success:#4cc9f0;--light:#f8f9fa;--dark:#212529;--dark-gray:#495057;--gray:#adb5bd;--light-gray:#e9ecef;--btn-primary:#4361ee;--btn-primary-dark:#3a0ca3;--surface-invert:#212529;--surface-invert-text:#ffffff;--surface-invert-muted:#adb5bd;--transition:all 0.3s ease;--shadow:0 10px 20px rgba(0, 0, 0, 0.1);--shadow-hover:0 15px 30px rgba(0, 0, 0, 0.15);--radius:12px;--card-padding:30px;--highlight-bg:#f0f2fe}.dark-mode{--primary:#4cc9f0;--primary-light:#4895ef;--primary-dark:#3a0ca3;--light:#121212;--dark:#f8f9fa;--dark-gray:#b4b4b4;--light-gray:#2d2d2d;--gray:#6c757d;--shadow:0 10px 20px rgba(0, 0, 0, 0.4);--shadow-hover:0 15px 30px rgba(0, 0, 0, 0.5);--highlight-bg:#303d41}*{margin:0;padding:0;box-sizing:border-box!important;transition:var(--transition)}body{font-family:Poppins,"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--dark);background-color:var(--light);background:linear-gradient(135deg,#f5f7fa 0,#e4e8f0 100%);min-height:100vh}.dark-mode body{background:linear-gradient(135deg,#0f0f0f 0,#232323 100%)}.container{width:100%!important;max-width:100%!important;margin:0 auto!important;padding:10px 10px!important}.hero h1{font-size:3rem;margin-bottom:20px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.2);text-align:center;color:#0a58ca}.hero p{font-size:1.2rem;max-width:940px;margin:0 auto 10px;opacity:.9}.hero p.hero-tagline{font-size:1.3rem;font-weight:700;color:var(--primary);margin:0 auto 8px;opacity:1}.tool-container{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;margin-bottom:50px}@media (max-width:992px){.tool-container{grid-template-columns:1fr}}.input-section,.results-section{background:#fff;border-radius:var(--radius);padding:var(--card-padding);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05)}.dark-mode .input-section,.dark-mode .results-section{background:var(--light-gray);border:1px solid rgba(255,255,255,.05)}.input-section h3,.results-section h3{margin-bottom:25px;color:var(--primary);display:flex;align-items:center;font-weight:600;font-size:1.5rem}.input-section h3 i,.results-section h3 i{margin-right:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));-webkit-background-clip:text!important;-webkit-text-fill-color:transparent}textarea{width:100%;min-height:300px;padding:20px;border:1px solid var(--gray);border-radius:var(--radius);font-family:inherit;font-size:1rem;margin-bottom:20px;resize:vertical;transition:var(--transition);background:var(--light);color:var(--dark)}.dark-mode textarea{background:var(--light-gray);color:var(--dark);border-color:var(--dark-gray)}textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,.2)}.action-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:25px}.btn{padding:12px 25px!important;border:none!important;border-radius:var(--radius)!important;cursor:pointer!important;font-weight:500!important;display:inline-flex!important;align-items:center!important;font-family:Poppins,sans-serif!important;transition:var(--transition)!important;box-shadow:var(--shadow)!important;font-size:14px!important}.btn i{margin-right:8px!important}.btn-primary{background:linear-gradient(135deg,var(--btn-primary),var(--btn-primary-dark))!important;color:#fff!important}.btn-secondary{background:var(--light-gray)!important;color:var(--dark)!important}.btn:hover:not(.btn-url){opacity:.95!important;transform:translateY(-3px)!important;box-shadow:var(--shadow-hover)!important}.options{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:25px;align-items:center}.option{display:flex;align-items:center;gap:8px}select{padding:10px 15px;border:1px solid var(--gray);border-radius:var(--radius);background:var(--light);color:var(--dark);font-family:Poppins,sans-serif;font-size:.9rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234361ee' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12L8 12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}.dark-mode select{background:var(--light-gray);color:var(--dark);border-color:var(--dark-gray);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234cc9f0' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12L8 12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,.2)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-bottom:30px}.stat-box{background:var(--light);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);transition:var(--transition)}.stat-box:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.dark-mode .stat-box{background:var(--light-gray);border:1px solid rgba(255,255,255,.05)}.stat-value{font-size:1.5rem;font-weight:700;color:var(--primary);margin-bottom:8px;overflow-wrap:anywhere}.stat-label{font-size:.9rem;color:var(--dark-gray);font-weight:500}.tabs{display:flex;flex-wrap:wrap;margin-bottom:25px;border-bottom:1px solid var(--light-gray)}.tab-btn{padding:12px 25px;background:0 0;border:none;cursor:pointer;font-weight:500;color:var(--dark-gray);position:relative;font-family:Poppins,sans-serif}.tab-btn.active{color:var(--primary)}.tab-btn.active::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-dark));border-radius:3px 3px 0 0}.tab-content{display:none;padding:25px 0;animation:fadeIn .5s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tab-content.active{display:block}.features{padding:80px 0;background:var(--light-gray);border-radius:var(--radius);margin-bottom:60px;box-shadow:var(--shadow)}.section-title{text-align:center;margin-bottom:50px;color:var(--primary);font-weight:700;font-size:2.2rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:30px}.feature-card{background:#fff;border-radius:var(--radius);padding:var(--card-padding);box-shadow:var(--shadow);text-align:center;transition:var(--transition);border:1px solid rgba(0,0,0,.05)}.feature-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-hover)}.dark-mode .feature-card{background:var(--light-gray);border:1px solid rgba(255,255,255,.05)}.feature-icon{font-size:3rem;color:var(--primary);margin-bottom:20px}.feature-card h3,.feature-card h4{margin-bottom:15px;color:var(--primary);font-weight:600;font-size:calc(1.3rem + .6vw)}.dark-mode-toggle{position:fixed;bottom:30px;right:30px;background:linear-gradient(135deg,var(--btn-primary),var(--btn-primary-dark));color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);z-index:100;transition:var(--transition)}.dark-mode-toggle:hover{transform:rotate(15deg) scale(1.1)}.progress-bar{height:12px!important;background:var(--light-gray)!important;border-radius:10px!important;margin:15px 0!important;overflow:hidden!important}.progress{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-dark));border-radius:10px;width:0%;transition:width .5s ease}.highlight{background-color:rgba(255,230,0,.3);padding:2px 4px;border-radius:4px}.text-tool{margin-bottom:20px}.tool-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:15px!important;margin-bottom:25px!important}.comparison-container{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:25px}@media (max-width:768px){.comparison-container{grid-template-columns:1fr}}.comparison-result{background:var(--light);padding:20px;border-radius:var(--radius);margin-top:25px;box-shadow:var(--shadow)}.dark-mode .comparison-result{background:var(--light-gray)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:2000;backdrop-filter:blur(5px);align-items:center;justify-content:center}.modal-content{background:#fff;padding:40px;border-radius:var(--radius);box-shadow:var(--shadow-hover);width:90%;max-width:500px;position:relative;animation:modalFadeIn .3s ease}.dark-mode .modal-content{background:var(--light-gray)}@keyframes modalFadeIn{from{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.close-modal{position:absolute;top:15px;right:15px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:var(--light);font-size:1.5rem;line-height:1;font-family:inherit;cursor:pointer;color:var(--dark-gray);transition:var(--transition)}.close-modal:hover,.close-modal:focus-visible{background:var(--primary);color:#fff}.url-input{width:100%;padding:15px;border:1px solid var(--gray);border-radius:var(--radius);margin:20px 0;font-family:inherit}.keyword-list{max-height:300px;overflow-y:auto;margin:15px 0;padding:10px;background:var(--light);border-radius:var(--radius);border:1px solid var(--light-gray)}.dark-mode .keyword-list{background:var(--light-gray);border-color:var(--dark-gray)}.keyword-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--light-gray)}.dark-mode .keyword-item{border-bottom-color:var(--dark-gray)}.keyword-item:last-child{border-bottom:none}.word-cloud{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0;justify-content:center}.word-cloud span{padding:5px 10px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:20px;display:inline-block}.language-result{padding:15px;background:var(--light);border-radius:var(--radius);margin:15px 0;text-align:center;font-weight:500}.dark-mode .language-result{background:var(--light-gray)}@media (max-width:768px){.hero h1{font-size:2.2rem}.hero p{font-size:1rem}.hero p.hero-tagline{font-size:1.1rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.feature-card{padding:20px}.tool-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}}@media (max-width:576px){.stats-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column}.btn{width:100%;justify-content:center}.options{flex-direction:column;align-items:flex-start}}.loader{display:none;width:50px;height:50px;border:5px solid var(--light-gray);border-radius:50%;border-top:5px solid var(--primary);animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.toast{position:fixed!important;bottom:30px!important;left:50%!important;transform:translateX(-50%) translateY(100px)!important;color:#fff!important;padding:16px 24px!important;border-radius:16px!important;box-shadow:0 20px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1),0 0 30px rgba(67,97,238,.4)!important;z-index:3000!important;display:flex!important;align-items:center!important;gap:12px!important;font-weight:500!important;font-size:15px!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,.2)!important;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.175, .885, .32, 1.275)!important;min-width:280px!important;max-width:90vw!important;text-align:center!important;justify-content:center!important}.toast.show{opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(0)!important}.toast::before{content:''!important;width:6px!important;height:6px!important;border-radius:50%!important;background:rgba(255,255,255,.8)!important;flex-shrink:0!important;animation:pulse 2s infinite!important}.toast.success{background:linear-gradient(135deg,#2e7d32 0,#1b5e20 25%,#2e7d32 50%,#1b5e20 75%,#2e7d32 100%)!important;background-size:200% 200%!important;animation:shimmer 3s ease-in-out infinite!important}.toast.success::after{content:'OK'!important;font-weight:700!important;font-size:18px!important;margin-left:8px!important;animation:bounceIn .6s ease!important}.toast.error{background:linear-gradient(135deg,#c62828 0,#b71c1c 25%,#c62828 50%,#b71c1c 75%,#c62828 100%)!important;background-size:200% 200%!important;animation:shimmer 3s ease-in-out infinite!important}.toast.error::after{content:'!'!important;font-weight:700!important;font-size:18px!important;margin-left:8px!important;animation:shake .6s ease!important}.toast:not(.success):not(.error){background:linear-gradient(135deg,var(--btn-primary) 0,var(--btn-primary-dark) 50%,var(--btn-primary) 100%)!important;background-size:200% 200%!important;animation:shimmer 4s ease-in-out infinite!important}.toast:not(.success):not(.error)::after{content:'i'!important;margin-left:8px!important;animation:float 3s ease-in-out infinite!important}@keyframes toastFadeIn{0%{opacity:0;transform:translate(-50%,30px) scale(.9)}70%{transform:translate(-50%,-5px) scale(1.02)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes shimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.2);opacity:1}}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}.dark-mode .toast{box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1),0 0 40px rgba(67,97,238,.6)!important}@media (max-width:768px){.toast{min-width:250px!important;padding:14px 20px!important;font-size:14px!important;bottom:20px!important;border-radius:14px!important}.tabs{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.tab-btn{flex-shrink:0}}@media (max-width:320px){.toast{min-width:220px!important;padding:12px 16px!important;font-size:13px!important;bottom:15px!important}}@media (max-width:320px){.container{padding:0 15px}.hero{padding:6px 15px;margin-bottom:30px}.hero h1{font-size:1.7rem;line-height:1.3}.hero p{font-size:.9rem}.hero p.hero-tagline{font-size:1rem}.ad-container{padding:10px;min-height:70px;margin:15px 0}.tool-container{display:flex;flex-direction:column;width:100%;margin:0 auto;padding:0}.input-section,.results-section{padding:20px}.input-section h3,.results-section h3{font-size:1.3rem;margin-bottom:15px}textarea{min-height:200px;padding:15px;margin-bottom:15px;font-size:.9rem}.action-buttons{gap:8px;margin-bottom:20px;flex-direction:column}.btn{padding:10px 15px;font-size:.9rem;width:100%;justify-content:center}.options{gap:10px;margin-bottom:20px;flex-direction:column;align-items:flex-start}.option{width:100%}input[type=number],select{width:100%;margin-top:5px}.stats-grid{grid-template-columns:1fr;gap:12px;margin-bottom:20px}.stat-box{padding:15px}.stat-value{font-size:1.3rem}.stat-label{font-size:.85rem}.tabs{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;margin-bottom:20px;padding-bottom:5px}.tab-btn{padding:8px 12px;font-size:.85rem}.tool-grid{grid-template-columns:1fr!important;gap:8px!important;margin-bottom:20px!important}.features{padding:40px 0;margin-bottom:30px}.section-title{font-size:1.6rem;margin-bottom:25px}.features-grid{grid-template-columns:1fr;gap:20px}.feature-card{padding:20px}.feature-icon{font-size:2.5rem;margin-bottom:15px}.dark-mode-toggle{bottom:15px;right:15px;width:50px;height:50px;font-size:1.2rem}.comparison-container{grid-template-columns:1fr;gap:15px;margin-bottom:20px}.keyword-list{max-height:150px;font-size:.9rem}.modal-content{padding:20px 15px;width:95%}.url-input{padding:12px}#wordLimit{width:100%}.progress-bar{height:10px}.toast{width:90%!important;padding:12px 20px!important;font-size:.9rem!important}}.container-fluid{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}h3{margin-top:0;margin-bottom:.5rem;font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}.feature-card h3,.feature-card h4{font-size:1.75rem}}p{margin-top:0;margin-bottom:1rem}.feature-block{margin-top:25px}.feature-block h3{font-size:1.1rem;margin-bottom:12px;color:var(--primary);display:flex;align-items:center;gap:8px}.reading-level-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-weight:600;font-size:.9rem;margin-top:10px}.reading-level-badge.very-easy{background:rgba(76,201,240,.15);color:#0f7a94}.dark-mode .reading-level-badge.very-easy{color:#4cc9f0}.reading-level-badge.easy{background:rgba(76,175,80,.15);color:#256629}.dark-mode .reading-level-badge.easy{color:#81c784}.reading-level-badge.standard{background:rgba(255,152,0,.15);color:#e65100}.dark-mode .reading-level-badge.standard{color:#ffb74d}.reading-level-badge.difficult{background:rgba(244,67,54,.15);color:#c62828}.dark-mode .reading-level-badge.difficult{color:#ef9a9a}.reading-level-badge.very-difficult{background:rgba(97,97,97,.15);color:#424242}.dark-mode .reading-level-badge.very-difficult{color:#e0e0e0}.sentiment-meter{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.sentiment-emoji{font-size:2.5rem;line-height:1}.sentiment-bar-track{flex:1;min-width:140px;height:12px;border-radius:10px;background:var(--light-gray);overflow:hidden}.sentiment-bar-fill{height:100%;border-radius:10px;transition:width .4s ease,background .4s ease}.sentiment-label{font-weight:600;min-width:90px}.word-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.word-tag{background:var(--light-gray);color:var(--dark-gray);padding:4px 10px;border-radius:14px;font-size:.85rem}.dark-mode .word-tag{background:var(--light-gray)}.social-platform-list{display:flex;flex-direction:column;gap:14px;margin-top:15px}.social-platform{background:var(--light);border-radius:var(--radius);padding:14px 18px;border:1px solid rgba(0,0,0,.05)}.dark-mode .social-platform{background:var(--light-gray);border:1px solid rgba(255,255,255,.05)}.social-platform-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600;flex-wrap:wrap;gap:6px}.social-platform-count{font-weight:500;font-size:.9rem;color:var(--dark-gray)}.social-progress-track{height:10px;border-radius:8px;background:var(--light-gray);overflow:hidden}.dark-mode .social-progress-track{background:rgba(255,255,255,.08)}.social-progress-fill{height:100%;border-radius:8px;transition:width .4s ease,background .4s ease;background:#2e7d32}.social-progress-fill.warn{background:#e65100}.social-progress-fill.over{background:#c62828}.find-replace-box{background:var(--light);border-radius:var(--radius);padding:18px;margin-top:20px;border:1px solid rgba(0,0,0,.05)}.dark-mode .find-replace-box{background:var(--light-gray);border:1px solid rgba(255,255,255,.05)}.find-replace-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.find-replace-row input[type=text]{flex:1;min-width:140px;padding:10px 12px;border:1px solid var(--gray);border-radius:var(--radius);background:var(--light);color:var(--dark);font-family:inherit}.dark-mode .find-replace-row input[type=text]{background:var(--light-gray);color:var(--dark);border-color:var(--dark-gray)}.find-replace-options{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:10px;font-size:.9rem}.find-replace-count{font-size:.9rem;color:var(--dark-gray);margin-top:8px}.goal-tracker{margin-top:20px;padding:16px;background:var(--light-gray);border-radius:var(--radius)}.dark-mode .goal-tracker{background:rgba(255,255,255,.05)}.goal-tracker-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.goal-tracker-row input[type=number]{width:110px;padding:8px 10px;border:1px solid var(--gray);border-radius:var(--radius);background:var(--light);color:var(--dark)}.dark-mode .goal-tracker-row input[type=number]{background:var(--light-gray);color:var(--dark);border-color:var(--dark-gray)}.goal-stats{display:flex;gap:20px;flex-wrap:wrap;font-size:.9rem;color:var(--dark-gray)}.goal-stats strong{color:var(--dark);font-size:1.1rem;display:block}.chart-container{position:relative;max-width:100%;margin-top:15px;height:300px}.breakdown-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:.95rem}.breakdown-row{display:flex;justify-content:space-between;padding:6px 10px;background:var(--light-gray);border-radius:8px}.dark-mode .breakdown-row{background:rgba(255,255,255,.05)}@media (max-width:480px){.sentiment-meter{flex-direction:column;align-items:flex-start}.sentiment-bar-track{width:100%}.social-platform-head{flex-direction:column;align-items:flex-start}.chart-container{height:240px}}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:-.14em;overflow:visible;fill:currentColor;filter:drop-shadow(0 2px 3px rgba(35,49,110,.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,.28)) drop-shadow(0 4px 6px rgba(27,36,84,.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,.58),rgba(255,255,255,0));pointer-events:none;z-index:-1}.speech-input-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-8px 0 12px}.speech-status{flex:1;min-width:180px;color:var(--dark-gray);font-size:.88rem;line-height:1.4}.speech-input-toolbar .btn[aria-pressed=true]{box-shadow:0 0 0 4px rgba(247,37,133,.16),var(--shadow)!important}.speech-input-toolbar .btn[aria-pressed=true] .wc-icon{animation:speechPulse 1.1s ease-in-out infinite}.speech-rate-control{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--gray);border-radius:var(--radius);color:var(--dark-gray);font-size:.88rem;font-weight:600;background:var(--light)}.speech-rate-control select{min-width:104px;padding:7px 34px 7px 10px;border:0;box-shadow:none}.action-buttons button:disabled{opacity:.52!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}@keyframes speechPulse{50%{filter:drop-shadow(0 0 7px var(--accent));transform:scale(1.12)}}@media(max-width:576px){.speech-input-toolbar{align-items:stretch}.speech-input-toolbar .btn,.speech-status,.speech-rate-control{width:100%}.speech-rate-control{justify-content:space-between}.speech-rate-control select{width:auto!important;margin:0!important}}
.speech-settings{display:flex;align-items:center;gap:10px;flex:1 1 100%;flex-wrap:wrap;padding:12px;border:1px solid var(--wc-border);border-radius:var(--radius);background:linear-gradient(135deg,rgba(67,97,238,.055),rgba(76,201,240,.07))}.speech-settings .speech-rate-control{flex:1 1 180px;min-width:0}.speech-settings .speech-rate-control:first-child{flex-basis:280px}.speech-settings select{max-width:100%}.speech-download-help{flex:1 1 260px;align-self:center;color:var(--dark-gray);font-size:.82rem;line-height:1.35}.dark-mode .speech-settings{background:rgba(255,255,255,.045)}@media(max-width:700px){.speech-settings{display:grid;grid-template-columns:minmax(0,1fr)}.speech-settings .speech-rate-control{width:100%;display:grid;grid-template-columns:58px minmax(0,1fr)}.speech-settings .speech-rate-control select{width:100%!important}.speech-download-help{width:100%;text-align:center}}
/* ---- Inline content links read as small buttons, not plain text (added 7 Aug 2026) ----
   Scoped to .wc-content prose only — primary nav and footer nav keep their
   own conventional link styling, which shouldn't look like discrete buttons. */
.wc-content p a,.wc-content li a,.wc-content .faq-block a,.wc-content .citation a{display:inline-flex;align-items:center;gap:4px;color:var(--primary-dark);font-weight:600;text-decoration:none;background:var(--highlight-bg);padding:2px 12px 2px 10px;border-radius:999px;border:1px solid transparent;white-space:normal}
.wc-content p a::after,.wc-content li a::after,.wc-content .faq-block a::after,.wc-content .citation a::after{content:"\203A";font-weight:700;font-size:1.05em}
.wc-content p a:hover,.wc-content li a:hover,.wc-content p a:focus-visible,.wc-content li a:focus-visible,.wc-content .faq-block a:hover,.wc-content .faq-block a:focus-visible,.wc-content .citation a:hover,.wc-content .citation a:focus-visible{background:var(--light-gray);border-color:var(--primary-dark)}
.dark-mode .wc-content p a,.dark-mode .wc-content li a,.dark-mode .wc-content .faq-block a,.dark-mode .wc-content .citation a{color:var(--primary)}
.dark-mode .wc-content p a:hover,.dark-mode .wc-content li a:hover,.dark-mode .wc-content p a:focus-visible,.dark-mode .wc-content li a:focus-visible,.dark-mode .wc-content .faq-block a:hover,.dark-mode .wc-content .faq-block a:focus-visible,.dark-mode .wc-content .citation a:hover,.dark-mode .wc-content .citation a:focus-visible{border-color:var(--primary)}
.wc-feedback-privacy a,.wc-feedback-intro a{display:inline-flex;align-items:center;gap:4px;color:var(--primary-dark);font-weight:600;text-decoration:none;background:var(--highlight-bg);padding:2px 12px 2px 10px;border-radius:999px;border:1px solid transparent}
.wc-feedback-privacy a::after,.wc-feedback-intro a::after{content:"\203A";font-weight:700;font-size:1.05em}
.wc-feedback-privacy a:hover,.wc-feedback-privacy a:focus-visible,.wc-feedback-intro a:hover,.wc-feedback-intro a:focus-visible{background:var(--light-gray);border-color:var(--primary-dark)}
.dark-mode .wc-feedback-privacy a,.dark-mode .wc-feedback-intro a{color:var(--primary)}
.dark-mode .wc-feedback-privacy a:hover,.dark-mode .wc-feedback-privacy a:focus-visible,.dark-mode .wc-feedback-intro a:hover,.dark-mode .wc-feedback-intro a:focus-visible{border-color:var(--primary)}

/* ---- Homepage feedback form (added 7 Aug 2026) ---- */
.wc-content .wc-feedback-card{background:var(--light);border-radius:var(--radius);padding:28px 30px;border:1px solid var(--light-gray);margin-top:20px}
.dark-mode .wc-content .wc-feedback-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.wc-content .wc-feedback-intro{margin-bottom:20px}
.wc-form-field{margin-bottom:1.1rem;min-width:0}
.wc-form-field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.4rem;color:var(--dark)}
.wc-form-field .wc-form-hint{display:block;font-weight:400;font-size:.82rem;color:var(--dark-gray);margin-top:.35rem}
.wc-form-field input[type="text"],.wc-form-field input[type="email"],.wc-form-field input[type="file"],.wc-form-field select,.wc-form-field textarea{width:100%;box-sizing:border-box;padding:.75rem .9rem;border-radius:.6rem;border:1px solid var(--gray);background:var(--light);color:var(--dark);font:inherit}
.dark-mode .wc-form-field input[type="text"],.dark-mode .wc-form-field input[type="email"],.dark-mode .wc-form-field input[type="file"],.dark-mode .wc-form-field select,.dark-mode .wc-form-field textarea{background:var(--light-gray);border-color:var(--dark-gray)}
.wc-form-field input[type="file"]{padding:.55rem .9rem;cursor:pointer}
.wc-form-field input[type="file"]::file-selector-button,.wc-form-field input[type="file"]::-webkit-file-upload-button{margin-right:.9rem;padding:.5rem 1rem;border:none;border-radius:.5rem;background:linear-gradient(135deg,var(--btn-primary),var(--btn-primary-dark));color:#fff;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:var(--transition)}
.wc-form-field input[type="file"]::file-selector-button:hover,.wc-form-field input[type="file"]::-webkit-file-upload-button:hover{opacity:.92}
.dark-mode .wc-form-field input[type="file"]::file-selector-button,.dark-mode .wc-form-field input[type="file"]::-webkit-file-upload-button{background:linear-gradient(135deg,var(--btn-primary),var(--btn-primary-dark));color:#fff}
.wc-form-field input:focus,.wc-form-field select:focus,.wc-form-field textarea:focus{outline:3px solid rgba(67,97,238,.35);outline-offset:1px;border-color:var(--primary)}
.wc-form-field input[type="file"]:focus-visible{outline:3px solid rgba(67,97,238,.35);outline-offset:1px;border-color:var(--primary)}
.wc-form-field textarea{resize:vertical;min-height:9rem}
.wc-form-field .wc-select{border:1px solid var(--gray);border-radius:.6rem;background:var(--light)}
.dark-mode .wc-form-field .wc-select{background:var(--light-gray);border-color:var(--dark-gray)}
.wc-form-field .wc-select-button{padding:.75rem 2.4rem .75rem .9rem;min-height:0}
.wc-form-field .wc-select:has(.wc-select-button:focus-visible){outline:3px solid rgba(67,97,238,.35);outline-offset:1px;border-color:var(--primary)}
.wc-form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wc-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:640px){.wc-form-row{grid-template-columns:1fr}}
.wc-form-submit{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.6rem;border:none;border-radius:.7rem;background:linear-gradient(135deg,var(--btn-primary),var(--btn-primary-dark));color:#fff;font:inherit;font-weight:600;font-size:1rem;cursor:pointer}
.wc-form-submit:disabled{opacity:.7;cursor:not-allowed}
.wc-form-submit.is-loading .wc-icon{animation:wc-spin .8s linear infinite}
@keyframes wc-spin{to{transform:rotate(360deg)}}
.wc-form-status{margin-top:1rem;padding:.8rem 1rem;border-radius:.6rem;font-size:.92rem;overflow-wrap:anywhere}
.wc-form-status--success{background:rgba(46,125,50,.12);color:#1b5e20;border:1px solid rgba(46,125,50,.3)}
.dark-mode .wc-form-status--success{color:#81c784}
.wc-form-status--error{background:rgba(198,40,40,.12);color:#b71c1c;border:1px solid rgba(198,40,40,.3)}
.dark-mode .wc-form-status--error{color:#ef9a9a}
.wc-feedback-privacy{font-size:.85rem;color:var(--dark-gray);margin-top:14px}

/* ==========================================================================
   Tool section only: the hero + interactive tool get a 74:22 tool-to-ad
   ratio (standing site-wide rule, amended 2026-09-13 — the "ultimate
   rule", final — the page's content zone, 4% margin fixed on each side by
   body's own gutter, above, is genuinely 92% of the full screen (100% -
   4% - 4%), and that 92%-wide zone splits in a 74:22 proportion between
   tool and ad space, real measured result approximately 70% tool / 21%
   ad of the FULL SCREEN, not a literal 74/22 of the full screen -- 74+22
   =96 cannot fit inside a 92%-wide container, which is a hard mathematical
   ceiling, not a bug; the 74:22 RATIO is what was requested and is what's
   implemented, exactly as the prior 70/20 rule also always measured
   somewhat below its own round numbers for the identical reason. See the
   Ad-to-tool Space Rule section of CLAUDE.md for the full arithmetic
   note.).
   The below-the-fold guide content (.wc-content) sits OUTSIDE this shell as
   a full-width sibling — the ad runs alongside the tool only, not alongside
   the article-style content below it. Ratio is exact (37fr 11fr = 48fr
   total, i.e. 74:22 reduced). Four prior layouts, all now retired: a
   20/60/20 three-rail layout (one ad rail each side of the tool, 40%
   combined ad space), a 70/30 single right-rail layout (the ratio itself
   was fine, but measured against a content zone narrowed by a real padding
   bug on .wc-page-shell — fixed further down), a 65/25 layout (25%
   ad space was reconsidered as tighter than needed for a real AdSense unit
   — AdSense's own ad units want roughly 300px minimum width to render
   reliably, and 20% still comfortably clears that on any screen this rail
   is shown on at all, since the rail only appears above the 1200px
   breakpoint below), then a 70/20 layout (the site owner's explicit,
   final decision, 2026-09-13, moved the ratio from 70:20 to 74:22 —
   stated as "the ultimate rule and nothing will now amend it"; treat
   74:22 as the settled, permanent ratio). The rail
   hides below 1200px (deliberately different from .tool-container's own
   992px collapse above, so the two breakpoints don't fire together and
   fight visually). Reuses the existing .wc-ad-slot component from
   site-ads.css unchanged — only the .wc-ad-rail wrapper adds
   sticky-sidebar positioning.
   ========================================================================== */
/* Page Width Rule, desktop/tablet tier only (CLAUDE.md, amended
   2026-09-13 — the "ultimate rule", final): --wc-body-gutter changes from
   5vw to 4vw above 768px (4% margin each side, content zone the
   arithmetically correct remaining 92%). This is
   redeclared HERE, in home.css, rather than in site-theme.css's own :root
   block — site-theme.css is shared by both index-bundle.css (index.html,
   a tool page, governed by this rule) AND shared.css (every non-tool
   page, explicitly NOT governed by this rule per CLAUDE.md's "tool pages
   only" scope). home.css loads after site-theme.css in both bundles'
   cascade order (see admin/tools/bundle-css.php's own BUNDLES array), so
   this :root redeclaration wins on index.html without touching the
   shared source or any non-tool page that never loads home.css at all.
   The phone tier (768px and under, 16px fixed) is completely unchanged
   and needs no override here — site-theme.css's own value already
   applies identically on every page, tool or not.
   Scoped to @media (min-width: 769px) specifically — NOT a bare :root
   block — because a bare :root override here would unconditionally beat
   site-theme.css's own @media (max-width: 768px) mobile override too
   (both are :root selectors of equal specificity, and this file loads
   later in the bundle's cascade order regardless of viewport width),
   which would have silently broken the phone-tier's fixed 16px margin
   on index.html specifically. Found and fixed via live verification
   before this task was reported done — a bare, unscoped override here
   read as 4vw even at a 375px test viewport where 16px was expected. */
@media (min-width: 769px) {
  :root {
    --wc-body-gutter: 4vw;
  }
}
/* Inside the tool column (real measured width approximately 70% of the
   FULL SCREEN — see the .wc-page-shell comment above for why this is not
   a literal 74%): input-section and results-section split EVENLY,
   approximately 33-34% of the FULL SCREEN width each at typical desktop
   widths (not an even split of the tool column's own percentage figure)
   — standing rule, corrected 2026-09-05, amended 2026-09-13 when the
   outer ratio changed from 70/20 to 74/22, so results are visible above
   the fold without scrolling and neither panel is favored over the
   other. Since the two panels split the tool column's own total share
   evenly, the ratio BETWEEN the two panels stays an even
   1:1 (`1fr 1fr` needs no numeric change — fr units resolve relative to
   their own container's actual rendered width, not an absolute screen
   percentage, so an even split stays even automatically regardless of the
   container's total width; verified live via getBoundingClientRect(),
   confirming approximately 33.1%-33.7% each at 1440px/1920px).
   .tool-container's own base rule (top of this file) already collapses
   this to one stacked column below 992px — unchanged, still applies here,
   since two large side-by-side panels have no room to sit side by side on a
   narrow viewport. */
.tool-container {
  grid-template-columns: 1fr 1fr;
}
.wc-page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* No padding here on purpose (removed 2026-09-05 — a real, confirmed bug:
     this rule used to carry its own padding: 0 clamp(10px, 3vw, 24px),
     stacking directly on top of body's own gutter margin, so real
     visible left/right whitespace measured 24px MORE than the intended
     margin on wide screens — confirmed live via getBoundingClientRect()
     before this fix. The page-width standing rule (see CLAUDE.md) is that
     body's own gutter margin IS the entire left/right gutter; nothing
     inside the page may add its own extra padding on top of it at the
     outermost content-wrapper level.) */
}
.wc-ad-rail {
  display: none;
}
@media (min-width: 1200px) {
  .wc-page-shell {
    /* 37fr 11fr = 74:22 reduced (amended 2026-09-13 from 7fr 2fr = 70:20 —
       CLAUDE.md, the "ultimate rule", final). fr units, not literal
       percentages — splits this grid's container (the real 92%-of-screen
       content zone) in the requested 74:22 proportion, which resolves to
       approximately 70%/21% of the full screen (74+22=96 cannot literally
       fit inside a 92%-wide container — see the Ad-to-tool Space Rule
       section of CLAUDE.md for the full arithmetic note; see also the
       site-wide literal-percentage bug note in word-counter-usa.html's
       own matching .wc-tool-grid comment for why fr units, not literal
       percentages, are used here regardless). */
    grid-template-columns: 37fr 11fr;
    gap: clamp(12px, 1.5vw, 24px);
    align-items: stretch;
  }
  /* .wc-ad-rail is the grid item — it stretches to the full height of
     .wc-page-shell-main (100%, top to bottom, until the content section
     begins). The ad box itself (.wc-ad-slot) is capped to one viewport
     and sticky-positioned inside that tall rail, so it travels with the
     scroll and stays visible the whole way down instead of being a single
     giant box you scroll past once. */
  .wc-ad-rail {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
  }
  .wc-ad-rail .wc-ad-slot {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 112px);
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 96px;
  }
  .wc-ad-rail .wc-ad-slot .adsbygoogle {
    flex: 1;
    width: 100%;
  }
}
.wc-page-shell-main {
  min-width: 0;
  width: 100%;
}
/* Horizontal ad banner marking the tool/content boundary — full width,
   sits between the 70/20 shell and the full-width article content. */
.wc-ad-horizontal {
  width: min(1180px, calc(100% - 2rem));
  min-height: 90px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
}

/* Responsive fix: on narrow screens the global overflow-wrap:anywhere lets
   a cramped .option (label + select, flex nowrap) shrink the label below
   its own word length, breaking words like "Speaking" mid-string. Keep
   labels on one line and let the row wrap to two lines instead. */
.option {
  flex-wrap: wrap;
}
.option label {
  white-space: nowrap;
}

/* ==========================================================================
   Below-the-fold guide content (replaces the old Features/Reference-Guides/
   How-It-Works sections). All colors below reuse tokens already defined at
   the top of this file — --dark-gray for body copy (never --gray, which is
   only ~2.1:1 contrast and reserved for decorative borders per this
   project's own documented contrast rule), --dark for headings, --light-gray
   for table-header/details backgrounds. No new hex values introduced.
   ========================================================================== */
/* Left/right margin scoped to the below-the-fold content ONLY — nowhere
   else on the page. 20px on narrow screens, scaling smoothly up to 30px
   as the viewport widens (never a percentage, so it can't balloon into a
   huge gutter on large screens). */
.wc-content {
  padding-top: 40px;
  padding-bottom: 60px;
  padding-left: clamp(20px, 2.5vw, 30px);
  padding-right: clamp(20px, 2.5vw, 30px);
}

/* Section headings: left-aligned editorial style (not the centered
   landing-page .section-title look) with a small gradient accent bar and a
   hairline divider, so each of the 9 top-level guide sections reads as a
   clear chapter break during a long scroll. Pure CSS — no markup changes.
   Selector is class-only (not tag-qualified): all 9 top-level guide
   sections use a real semantic <h2>, but the rule stays class-based so
   it renders identically regardless of tag, matching how it already
   behaved for the two sections (Reference Guides, FAQ) that were <h2>
   before the rest were promoted to match. */
.wc-content .section-title {
  text-align: left;
  margin: 0;
  margin-top: 68px;
  padding-top: 26px;
  border-top: 1px solid var(--light-gray);
  /* Explicit color needed: without it, the unrelated
     .wc-content h3{color:var(--dark)} subsection-heading rule (higher
     specificity than the old bare .section-title class alone) would win
     and silently turn these dark instead of primary. */
  color: var(--primary);
}
.dark-mode .wc-content .section-title {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.wc-content .section-title::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  border-radius: 4px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}
.wc-content .section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Subsection headings (h3 = still-h3 items like FAQ questions; h4 = items
   demoted from h3 in the same heading-level restructure) share one look
   so nothing visually changed when their tag level did. */
.wc-content h3,
.wc-content h4 {
  color: var(--dark);
  font-size: 1.25rem;
  margin: 28px 0 10px;
  font-weight: 700;
}
.wc-content p,
.wc-content li {
  color: var(--dark-gray);
  line-height: 1.75;
}
.wc-content .wc-lead {
  font-size: 1.12rem;
  color: var(--dark);
  line-height: 1.7;
}

/* Tables: rounded card wrapper, striped-free hairline rows, header
   treatment and a subtle hover — easier to scan than plain grid borders. */
.wc-content-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
}
.dark-mode .wc-content-table-wrap {
  border-color: rgba(255, 255, 255, 0.08);
}
.wc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.wc-content th,
.wc-content td {
  border-bottom: 1px solid var(--light-gray);
  padding: 12px 16px;
  text-align: left;
}
.dark-mode .wc-content th,
.dark-mode .wc-content td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.wc-content thead th {
  background: var(--light-gray);
  color: var(--dark);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dark-mode .wc-content thead th {
  background: rgba(255, 255, 255, 0.05);
}
.wc-content tbody tr:last-child td {
  border-bottom: none;
}
.wc-content tbody tr:hover {
  background: rgba(67, 97, 238, 0.045);
}
.dark-mode .wc-content tbody tr:hover {
  background: rgba(76, 201, 240, 0.06);
}

/* Reference-guide accordions: highlight the border when opened so the
   active entry is easy to relocate while scanning five stacked panels.
   Background is deliberately var(--light) — matching .wc-ref-accordion's
   own original rule in gap-features.css exactly — NOT var(--light-gray).
   This selector's specificity (.wc-content + details type) beats the
   plain .wc-ref-accordion class rule regardless of which stylesheet loads
   last, so getting this value right here is what actually renders; using
   --light-gray here previously dropped the --primary summary text below
   WCAG AA (4.32:1, failing) — --light restores the original 4.89:1 pass. */
.wc-content details {
  background: var(--light);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.wc-content details[open] {
  border-color: var(--primary);
}
.dark-mode .wc-content details {
  background: var(--light-gray);
}
.wc-content summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--dark);
}

/* Citations read as sourced evidence, not just italic asides — a left
   accent bar and tinted background set them apart from body copy. */
.wc-content .citation {
  color: var(--dark-gray);
  font-size: 0.88rem;
  font-style: italic;
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--primary-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(67, 97, 238, 0.045);
}
.dark-mode .wc-content .citation {
  background: rgba(76, 201, 240, 0.06);
}

/* FAQ entries get a bordered card instead of bare stacked text, so a long
   list of 17 questions is easy to scan without an accordion. */
.wc-content .faq-block {
  margin-bottom: 14px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--light);
  border: 1px solid var(--light-gray);
}
.dark-mode .wc-content .faq-block {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.wc-content .faq-block h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--primary);
}
.wc-content .faq-block p {
  margin: 0;
}

.wc-content .boundary-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wc-content .boundary-list li {
  background: var(--light-gray);
  border-radius: var(--radius);
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
}
.dark-mode .wc-content .boundary-list li {
  background: rgba(255, 255, 255, 0.05);
}
.wc-content .boundary-list strong {
  color: var(--dark);
}

/* Feature cards inside the guide section: H3 is the feature name (bold,
   primary), H4 is a short attractor line beneath it (lighter, muted) —
   deliberately NOT the same look, so a scanning reader can tell the
   headline from the hook at a glance. Selectors are more specific than
   both the older minified .feature-card h3,h4 rule and the generic
   .wc-content h3,h4 rule so this always wins regardless of which of
   those two the browser would otherwise prefer on a specificity tie. */
.wc-content .feature-card h3 {
  margin: 0 0 10px;
  color: var(--primary);
  font-weight: 700;
  font-size: calc(1.2rem + 0.4vw);
}
.wc-content .feature-card h4 {
  margin: 0 0 18px;
  color: var(--dark-gray);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
}
.dark-mode .wc-content .feature-card h4 {
  color: var(--gray);
}

/* "Read More" button: small outlined pill, sits below the hook text,
   pinned to the bottom of the card via flex so buttons line up evenly
   across a row even when hook text wraps to different heights. */
.wc-content .features-grid .feature-card {
  display: flex;
  flex-direction: column;
}
.feature-step-number {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}
.feature-readmore {
  margin-top: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.feature-readmore .wc-icon {
  width: 0.8em;
  height: 0.8em;
}
.feature-readmore:hover,
.feature-readmore:focus-visible {
  background: var(--primary);
  color: #fff;
}
.dark-mode .feature-readmore {
  color: var(--primary);
  border-color: var(--primary);
}
.dark-mode .feature-readmore:hover,
.dark-mode .feature-readmore:focus-visible {
  background: var(--primary);
  color: var(--dark);
}

/* Feature detail overlay: one shared shell, reused by every "Read More"
   button. The full passage lives in a real, always-in-the-DOM
   .feature-detail div per card (see index.html) so it's genuinely
   crawlable/indexable text, not something only JS materializes — this
   overlay just borrows that same markup and displays it full-screen.
   Visual language matches the existing #urlModal (.modal/.modal-content)
   on purpose, reusing the same modalFadeIn animation, but is a fully
   separate component with its own classes/IDs so it never interferes
   with the URL-fetch modal's own open/close logic. */
.wc-feature-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wc-feature-overlay.is-open {
  display: flex;
}
.wc-feature-overlay-content {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 44px 40px 40px;
  animation: modalFadeIn 0.3s ease;
}
.dark-mode .wc-feature-overlay-content {
  background: var(--light-gray);
}
.wc-feature-overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--light);
  border: none;
  border-radius: 50%;
  color: var(--dark-gray);
  cursor: pointer;
  transition: var(--transition);
}
.wc-feature-overlay-close:hover,
.wc-feature-overlay-close:focus-visible {
  background: var(--primary);
  color: #fff;
}
.dark-mode .wc-feature-overlay-close {
  background: rgba(255, 255, 255, 0.08);
}
.wc-feature-overlay-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(67, 97, 238, 0.1);
  color: var(--primary);
  margin-bottom: 18px;
}
.wc-feature-overlay-icon .wc-icon {
  width: 1.6em;
  height: 1.6em;
}
.dark-mode .wc-feature-overlay-icon {
  background: rgba(76, 201, 240, 0.12);
}
.wc-feature-overlay-content h3 {
  margin: 0 0 18px;
  color: var(--primary);
  font-size: 1.5rem;
}
.wc-feature-overlay-body {
  color: var(--dark-gray);
  line-height: 1.8;
  font-size: 1.02rem;
}
.wc-feature-overlay-body p {
  margin: 0 0 16px;
}
.wc-feature-overlay-body p:last-child {
  margin-bottom: 0;
}
.wc-feature-overlay-body strong {
  color: var(--dark);
}
.dark-mode .wc-feature-overlay-body strong {
  color: var(--light);
}

/* Feature-card icon badge — replaces the old bare-icon-plus-invisible-gloss
   treatment (a drop-shadow and a white-highlight ::after with no visible
   background behind it to show against) with a clean tinted badge, matching
   the already-established .wc-feature-overlay-icon look so the small card
   icon and the large "Read More" overlay icon read as one consistent
   design language. */
.feature-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: rgba(67, 97, 238, 0.1);
  color: var(--primary);
  font-size: 1.7rem;
}
.feature-icon .wc-icon {
  width: 30px;
  height: 30px;
  filter: none;
}
.feature-icon::after {
  content: none;
}
.dark-mode .feature-icon {
  background: rgba(76, 201, 240, 0.14);
}
.feature-card:hover .feature-icon {
  background: rgba(67, 97, 238, 0.16);
}
.dark-mode .feature-card:hover .feature-icon {
  background: rgba(76, 201, 240, 0.2);
}
@media (max-width: 320px) {
  .feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 1.4rem;
    margin-bottom: 15px;
  }
  .feature-icon .wc-icon {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 700px) {
  .wc-feature-overlay-content {
    padding: 36px 22px 28px;
    max-height: 90vh;
  }
  .wc-feature-overlay-content h3 {
    font-size: 1.3rem;
  }
  .feature-readmore {
    width: 100%;
    justify-content: center;
  }
}

/* Closing FAQ callout — reuses the same primary gradient as
   .dark-mode-toggle/.btn-primary and the same tinted-badge/pill-button
   shapes as .feature-icon/.feature-readmore, so it reads as native to the
   page rather than a bolted-on banner. */
.wc-faq-cta {
  margin: 50px 0 10px;
  padding: clamp(32px, 5vw, 48px);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-hover);
  text-align: center;
}
.wc-faq-cta-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.wc-faq-cta-icon .wc-icon {
  width: 30px;
  height: 30px;
  filter: none;
}
.wc-faq-cta h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 1.6rem;
}
.wc-faq-cta p {
  max-width: 640px;
  margin: 0 auto 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.03rem;
  line-height: 1.7;
}
.wc-faq-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.wc-faq-cta-link .wc-icon {
  width: 0.85em;
  height: 0.85em;
  filter: none;
}
.wc-faq-cta-link:hover,
.wc-faq-cta-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}
@media (max-width: 480px) {
  .wc-faq-cta {
    padding: 28px 20px;
  }
  .wc-faq-cta h3 {
    font-size: 1.35rem;
  }
}

/* ==========================================================================
   Below-the-fold visual variety pass (added 2026-09-13). Design lessons
   adapted from a successfully-analyzed reference SaaS landing page
   (structural/compositional patterns only — card containers, alternating
   section backgrounds, tinted callout boxes for key stats, accented
   section headers — never its literal colors, which belong to unrelated
   real-estate branding): every color below is one of this project's own
   existing tokens from docs-and-research/wordcount-colors-scheme.md.
   Nothing here is a new hex value.
   ========================================================================== */

/* Opening lead paragraph: previously plain text sitting directly on the
   page background immediately after the horizontal ad banner, with no
   visual container at all — the very first thing a below-the-fold reader
   saw was undifferentiated body copy. Wrapped in a card
   (background: var(--light), the same token already used correctly for
   .wc-ref-accordion/.wc-content details elsewhere on this page) so the
   page opens with a clear, contained "standfirst" read. */
.wc-content .wc-lead-card {
  background: var(--light);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.dark-mode .wc-content .wc-lead-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.wc-content .wc-lead-card .wc-lead {
  margin-bottom: 14px;
}
.wc-content .wc-lead-card p:last-child {
  margin-bottom: 0;
}

/* Alternating section backgrounds: every other top-level guide chapter
   (.wc-content > section, the same real <section> elements each already
   carrying one <h2 class="section-title">) sits on a distinct tinted
   surface instead of every chapter looking identical against the plain
   page background — the same "alternating background" rhythm used to
   break up long scrolling content on the reference SaaS page. Uses
   --light-gray, the site's own documented "alt section background"
   token (wordcount-colors-scheme.md), exactly as already used correctly
   for .features/.wc-ref-accordion elsewhere on this page. Negative
   margin + matching padding extends the tint to the page's own gutter
   edge without altering .wc-content's own left/right padding value
   (Page Width Rule scope is unaffected — this only adds a background
   fill and vertical rhythm, not a width or margin change). Selector
   targets only genuine top-level chapter sections (those containing a
   real h2.section-title), never the inner <section> wrappers used for
   sub-grouping (e.g. the lead-in section, "Who This Tool Is For") or the
   already-distinctly-styled .wc-faq-cta / feedback sections, which keep
   their own existing treatment untouched. */
.wc-content > .container-fluid > section.wc-chapter-alt {
  background: var(--light-gray);
  border-radius: var(--radius);
  margin-left: calc(-1 * clamp(20px, 2.5vw, 30px));
  margin-right: calc(-1 * clamp(20px, 2.5vw, 30px));
  padding-left: clamp(20px, 2.5vw, 30px);
  padding-right: clamp(20px, 2.5vw, 30px);
  padding-bottom: 44px;
}
.dark-mode .wc-content > .container-fluid > section.wc-chapter-alt {
  background: rgba(255, 255, 255, 0.025);
}
/* The chapter-opening heading already carries its own top border/accent
   bar (.section-title rule above) — inside a tinted chapter that divider
   would double up visually against the tint's own edge, so it's dropped
   only for chapters using this alternate background. */
.wc-content > .container-fluid > section.wc-chapter-alt > .section-title {
  border-top: none;
  padding-top: 44px;
}
.dark-mode
  .wc-content
  > .container-fluid
  > section.wc-chapter-alt
  > .section-title {
  border-top: none;
}

/* Key-stat callout: pulls a single already-written, already-verifiable
   figure out of surrounding paragraph text into its own visually distinct
   box, the way the reference page's "callout boxes" set stats apart from
   body copy. Two tint variants deliberately put this project's own
   documented-but-"rarely used (reserved)" accent tokens to real, sparing
   use for the first time (wordcount-colors-scheme.md explicitly flags
   --secondary/--accent as exactly this kind of underused-but-available
   color) — applied thoughtfully to only 4 genuinely standout figures
   (1 primary, 1 secondary, 2 accent) across the page's 10 top-level
   chapters, not to every paragraph, so real hierarchy survives rather
   than everything reading equally "colorful." Tint opacity (9%) and text
   color chosen and checked for contrast per-variant below. No text is
   invented here — each callout wraps a figure already present verbatim
   in this page's own existing prose. */
.wc-stat-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 22px 0;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.wc-stat-callout-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.wc-stat-callout-icon .wc-icon {
  width: 20px;
  height: 20px;
  filter: none;
}
.wc-stat-callout p {
  margin: 0;
  color: var(--dark);
  font-size: 0.98rem;
  line-height: 1.65;
}
.wc-stat-callout strong {
  color: inherit;
}
/* Primary variant (blue) — reuses the same --primary token already used
   everywhere else on the page, for callouts about the tool's own core
   mechanics (privacy/on-device processing facts). */
.wc-stat-callout.wc-stat-callout-primary {
  background: rgba(67, 97, 238, 0.08);
  border-color: rgba(67, 97, 238, 0.18);
}
.wc-stat-callout.wc-stat-callout-primary .wc-stat-callout-icon {
  background: rgba(67, 97, 238, 0.14);
  color: var(--primary);
}
.dark-mode .wc-stat-callout.wc-stat-callout-primary {
  background: rgba(76, 201, 240, 0.1);
  border-color: rgba(76, 201, 240, 0.2);
}
.dark-mode .wc-stat-callout.wc-stat-callout-primary .wc-stat-callout-icon {
  background: rgba(76, 201, 240, 0.16);
  color: var(--primary);
}
/* Secondary variant (purple, --secondary #7209b7) — first genuine,
   deliberate use of this token outside the brand-palette definition
   itself. Text color is --dark (not the raw token) against the tint,
   confirmed by contrast math below, because --secondary itself is a
   mid-tone purple that would not clear 4.5:1 as small text on a light
   tint. Used for research-citation/comparison-style figures. */
.wc-stat-callout.wc-stat-callout-secondary {
  background: rgba(114, 9, 183, 0.08);
  border-color: rgba(114, 9, 183, 0.2);
}
.wc-stat-callout.wc-stat-callout-secondary .wc-stat-callout-icon {
  background: rgba(114, 9, 183, 0.16);
  color: var(--secondary);
}
/* Dark mode: --secondary has no .dark-mode override in
   wordcount-colors-scheme.md (documented as "—", i.e. it keeps its
   light-mode hex, #7209b7, in both themes), so the tint RGB below is the
   same #7209b7 value, not a new invented color. The glyph uses
   var(--primary), which DOES flip to the audited dark-mode cyan
   (#4cc9f0) — reusing the one token already proven legible on dark
   surfaces everywhere else on this page, rather than inventing a
   lightened purple. Verified 8.99:1 against this exact tint. */
.dark-mode .wc-stat-callout.wc-stat-callout-secondary {
  background: rgba(114, 9, 183, 0.22);
  border-color: rgba(114, 9, 183, 0.4);
}
.dark-mode .wc-stat-callout.wc-stat-callout-secondary .wc-stat-callout-icon {
  background: rgba(114, 9, 183, 0.3);
  color: var(--primary);
}
/* Accent variant (pink, --accent #f72585) — second deliberate use of a
   previously "reserved" token, for platform/format-count comparison
   figures (a different color from --secondary so a reader can visually
   tell "this kind of fact" apart from "that kind of fact" across the
   page, not just decoration for its own sake). */
.wc-stat-callout.wc-stat-callout-accent {
  background: rgba(247, 37, 133, 0.07);
  border-color: rgba(247, 37, 133, 0.18);
}
.wc-stat-callout.wc-stat-callout-accent .wc-stat-callout-icon {
  background: rgba(247, 37, 133, 0.14);
  /* Glyph uses --primary-dark, not --accent itself: the raw --accent hue
     against this light tint measures only 2.94:1 (verified via a
     throwaway contrast script), which fails even the 3:1 non-text/UI
     threshold. --primary-dark (an existing fixed token, already used
     site-wide for on-tint dark foreground, e.g. .wc-content p a's link
     color against --highlight-bg) measures 9.27:1 against this same
     tint — the accent hue stays visible in the badge background/border,
     the glyph itself just uses a token that's actually legible on it. */
  color: var(--primary-dark);
}
/* Dark mode: --accent also has no .dark-mode override (stays #f72585 in
   both themes per wordcount-colors-scheme.md), so this tint is the same
   documented hex, not a new color. Glyph uses var(--primary) for the
   same reason as the secondary variant above — verified 8.02:1 against
   this exact tint, no invented hex. */
.dark-mode .wc-stat-callout.wc-stat-callout-accent {
  background: rgba(247, 37, 133, 0.2);
  border-color: rgba(247, 37, 133, 0.38);
}
.dark-mode .wc-stat-callout.wc-stat-callout-accent .wc-stat-callout-icon {
  background: rgba(247, 37, 133, 0.28);
  color: var(--primary);
}
@media (max-width: 480px) {
  .wc-stat-callout {
    padding: 14px 16px;
  }
}

/* Load-from-URL button: deliberate, unique treatment (CLAUDE.md,
   "The Load-from-URL button must be visually prominent on every tool
   page", added 2026-09-14, CORRECTED same day). This is a real, useful
   feature (fetch any public webpage's text with zero copy-paste) that
   was easy to miss sitting in a row of visually identical
   .btn-secondary utility buttons (Paste, Sample Text).

   CORRECTION (2026-09-14, same day as the original treatment): the
   original version used var(--secondary)/var(--accent) (#7209b7 purple
   / #f72585 pink) as the background/border. Per
   docs-and-research/wordcount-colors-scheme.md, --secondary and
   --accent are both explicitly documented as "rarely used accent
   (reserved)" — NOT this site's real brand-identity color. That was a
   genuine mistake: an off-brand color was used for a button meant to
   look like it belongs to this site. Corrected to the site's REAL
   primary brand gradient, --btn-primary/--btn-primary-dark (#4361ee ->
   #3a0ca3, fixed tokens, never redefined in .dark-mode — see
   wordcount-colors-scheme.md's "Buttons & solid-color chrome" table),
   using the exact same linear-gradient(135deg, ...) syntax already used
   elsewhere in this file (the dark-mode toggle, the file-upload button,
   the form-submit button — see site-theme.css's .dark-mode-toggle and
   this file's own .wc-form-field/.wc-form-submit rules). White text
   stays: contrast 5.0–11.9:1 across the gradient, clearing WCAG AA
   (4.5:1) comfortably, per the color-scheme doc's own pre-verified
   figures for this exact token pair, in both light and dark mode (the
   tokens are fixed, so the same hex and the same ratio apply in both
   themes).

   Border: kept, changed from the old purple/pink two-tone to a subtle
   var(--btn-primary-dark) ring one shade darker than the gradient's own
   dark stop — a defined edge rather than a second competing color.
   ~3.2:1 against this page's light backgrounds, clearing the 3:1
   non-text/decorative-UI threshold.

   Hover: darkens via a brightness filter instead of the old flat
   hardcoded hex swap, consistent with the standalone pages' own
   .wc-btn-primary:hover treatment of this same gradient.

   Glossy/shiny finish (added 2026-09-14): a ::before pseudo-element
   lays a soft white-to-transparent diagonal highlight band over the
   button's upper half for real depth — pointer-events: none so it
   never blocks clicks, border-radius matches the button's own pill
   shape.

   Shake/wiggle (added 2026-09-14): a small periodic animation
   (wc-url-shake, 4 degrees of rotation + 2px horizontal translation,
   oscillating) runs briefly once every 6 seconds (0.6s of motion,
   ~5.4s of rest) rather than looping constantly — "a little bit
   shaky", not constant/aggressive. Disabled entirely under
   prefers-reduced-motion: reduce (this file's own established
   accessibility pattern — see the @media (prefers-reduced-motion:
   reduce) block already present in this file). Identical keyframe
   values, trigger timing, and reduced-motion handling to
   word-counter-uk.html's and word-counter-usa.html's own copies of
   this component, per CLAUDE.md's "Shared UI components must match
   everywhere they appear" rule.

   Shape/placement unchanged (mechanics differ slightly here because
   this page uses Bootstrap-style .btn/.btn-secondary classes rather
   than the standalone pages' .wc-btn convention — the !important flags
   match this file's own existing .btn/.btn-secondary rules so this
   override actually wins the cascade). This page's own Font Awesome
   <i class="fas fa-link"> icon does not render (Font Awesome is not
   loaded on this site — a known, separate, not-yet-fixed site-wide
   gap) so it is left as inert markup and NOT relied on here; no new
   icon was added for this button on this page, unchanged from the
   original pass.

   Hover-collision hardening (2026-09-14, same day, bug fix ported from
   word-counter-usa.html/word-counter-uk.html): those two standalone
   pages had a real, confirmed bug where their own general utility-button
   hover rule (.wc-btn:hover) set `background`, and their own
   .wc-btn-url:hover rule did not re-declare it — so the general rule's
   near-white tint silently won that one property and painted over the
   real gradient on hover, making the button nearly invisible. This
   page's own general rule (.btn:hover, above) was checked and does NOT
   set `background` at all (only opacity/transform/box-shadow), so the
   live-measured hovered background on this page was already the correct
   gradient — confirmed via getComputedStyle() with :hover force-
   triggered before this change (backgroundImage stayed
   linear-gradient(...), never fell back to none). No visible bug existed
   here. The :not(.btn-url) exclusion added to .btn:hover above is
   therefore defense-in-depth only, not a visible fix — it forecloses
   this exact collision class from ever appearing on this page if a
   future edit to .btn:hover ever adds a `background` declaration,
   matching the same defensive pattern applied to the other two pages'
   .wc-btn:hover rule for this bug. See docs-and-research/WORK-AUDIT-
   LOG.md for the full record including the live before/after
   measurements on all three pages. */
.btn-url {
  order: -1;
  margin-right: 6px !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--btn-primary, #4361ee),
    var(--btn-primary-dark, #3a0ca3)
  ) !important;
  color: #fff !important;
  border: 2px solid var(--btn-primary-dark, #3a0ca3) !important;
  box-shadow:
    0 2px 10px rgba(67, 97, 238, 0.28),
    var(--shadow) !important;
  animation: wc-url-shake 6s ease-in-out infinite;
}
.btn-url::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 35%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}
.btn-url:hover {
  filter: brightness(0.92);
  color: #fff !important;
}
.btn-url i {
  display: none;
}
@keyframes wc-url-shake {
  0%,
  88%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  90% {
    transform: rotate(-4deg) translateX(-2px);
  }
  92% {
    transform: rotate(3deg) translateX(2px);
  }
  94% {
    transform: rotate(-3deg) translateX(-1px);
  }
  96% {
    transform: rotate(2deg) translateX(1px);
  }
  98% {
    transform: rotate(0deg) translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-url {
    animation: none;
  }
}

/* ---- 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%;
  }
}

/* ---- export-controls.css ---- */
/* Polished export and speech control panel */
.results-section .action-buttons{display:flex!important;flex-wrap:wrap;gap:14px;align-items:stretch;padding:18px;margin-top:24px;border:1px solid var(--wc-border);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(239,243,255,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 38px rgba(35,49,110,.1)}
.dark-mode .results-section .action-buttons{background:linear-gradient(145deg,rgba(28,36,61,.96),rgba(20,27,48,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.28)}
.results-section .action-buttons>.btn{min-height:52px;margin:0!important;border:1px solid rgba(67,97,238,.08)!important;border-radius:var(--radius)!important;box-shadow:0 9px 22px rgba(30,45,105,.1)!important;flex:1 1 130px;white-space:nowrap}
#copyResultsBtn{flex:1 1 150px} .export-format-control{flex:2 1 260px} #downloadBtn{flex:1 1 170px}
#readAloudBtn{flex:1 1 130px}#readPauseBtn{flex:1 1 110px}#readStopBtn{flex:1 1 100px}.speech-settings{flex:1 1 100%}.audio-format-control{flex:1 1 230px}#downloadAudioBtn{flex:1 1 220px;white-space:normal}#shareAudioBtn{flex:1 1 150px}.speech-download-help{flex:2 1 260px}#shareBtn{flex:1 1 110px}#saveDraftBtn{flex:1 1 140px}
.results-section .speech-rate-control{min-height:52px;padding:7px 10px 7px 16px;border:1px solid rgba(67,97,238,.22);border-radius:15px;background:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.95);color:var(--wc-muted)}
.dark-mode .results-section .speech-rate-control{background:rgba(9,15,31,.58);border-color:rgba(76,201,240,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.results-section .speech-rate-control>span,.results-section .speech-rate-control{font-weight:750}
.results-section .speech-rate-control select{flex:1;min-width:0;width:100%;height:40px;padding:7px 38px 7px 12px;margin:0;border:0;background-color:transparent;color:var(--wc-ink);font-weight:600;box-shadow:none!important}
.export-format-control{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px}.audio-format-control{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px}
.speech-settings{padding:14px;gap:12px;border-radius:17px;background:linear-gradient(135deg,rgba(67,97,238,.07),rgba(76,201,240,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.speech-settings .speech-rate-control{display:grid;grid-template-columns:max-content minmax(0,1fr);flex:1 1 190px}.speech-settings .voice-control{flex:2 1 330px}
#speechVoice:disabled{cursor:wait;opacity:.78}#speechVoice option{color:#172033;background:#fff}
.speech-download-help{display:flex;align-items:center;padding:10px 14px;border-left:3px solid var(--wc-primary);border-radius:10px;background:rgba(67,97,238,.065);color:var(--wc-muted);font-size:.8rem;line-height:1.45}
#urlModal .modal-content{max-width:620px!important;border-radius:22px!important;border:1px solid var(--wc-border)!important;background:var(--wc-surface)!important;backdrop-filter:blur(22px);padding:clamp(24px,5vw,40px)!important}#urlModal h3{color:var(--wc-primary);margin-bottom:10px}#urlModal .url-input{min-height:54px;border:1px solid var(--wc-border);box-shadow:inset 0 1px 2px rgba(31,45,99,.06)}#urlStatus{display:block;min-height:24px;padding-top:8px;font-weight:600;line-height:1.45}
@media(max-width:640px){.results-section .action-buttons{padding:12px}.results-section .action-buttons>*{flex:1 1 100%!important;width:100%!important}.export-format-control,.audio-format-control,.speech-settings .speech-rate-control{grid-template-columns:1fr;align-items:start}.results-section .speech-rate-control select{min-height:42px}.speech-settings{display:grid}.speech-download-help{text-align:left}.results-section .action-buttons>.btn{min-height:50px;white-space:normal}}

/* Themed dropdown component and overflow hardening */
.results-section,.results-section .action-buttons,.results-section .action-buttons>*,.speech-settings,.speech-settings>*{min-width:0;max-width:100%}
.results-section .action-buttons>.btn{width:auto;line-height:1.25}
.results-section .speech-rate-control{overflow:visible}.results-section .speech-rate-control>span{white-space:nowrap}
.wc-native-select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.wc-select{position:relative;width:100%;min-width:0;color:var(--wc-ink);font-weight:650;z-index:1}.wc-select:has(.wc-select-menu:focus-within),.wc-select[data-open=true]{z-index:80}
.wc-select-button{position:relative;width:100%;min-height:40px;padding:8px 40px 8px 12px;border:0;border-radius:10px;color:var(--wc-ink);background:transparent;font:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.wc-select-button::after{content:"";position:absolute;right:13px;top:50%;width:9px;height:9px;border-right:2px solid var(--wc-primary);border-bottom:2px solid var(--wc-primary);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.wc-select[data-open=true] .wc-select-button::after{transform:translateY(-25%) rotate(225deg)}.wc-select-button:disabled{cursor:wait;opacity:.75}
.wc-select-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;display:grid;max-height:260px;padding:7px;overflow:auto;border:1px solid rgba(67,97,238,.24);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 20px 48px rgba(29,40,92,.22),inset 0 1px 0 #fff;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:top;transition:opacity .16s ease,transform .16s ease,visibility .16s;backdrop-filter:blur(20px)}
.wc-select[data-open=true] .wc-select-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.wc-select-option{width:100%;padding:11px 12px;border:0;border-radius:9px;color:#172033;background:transparent;font:600 .9rem/1.35 Poppins,system-ui,sans-serif;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.wc-select-option:hover,.wc-select-option:focus-visible{color:#fff;background:linear-gradient(135deg,var(--wc-primary),var(--wc-primary-dark));outline:0}.wc-select-option[aria-selected=true]{color:var(--wc-primary);background:rgba(67,97,238,.1)}.wc-select-option[aria-selected=true]:hover,.wc-select-option[aria-selected=true]:focus-visible{color:#fff}.wc-select-option:disabled{opacity:.5;cursor:not-allowed}
.dark-mode .wc-select-menu{border-color:rgba(76,201,240,.28);background:rgba(17,24,43,.98);box-shadow:0 22px 52px rgba(0,0,0,.45)}.dark-mode .wc-select-option{color:#f5f7ff}.dark-mode .wc-select-option[aria-selected=true]{color:#75dcfa;background:rgba(76,201,240,.12)}
@media(max-width:1100px){.wc-nav{width:min(100%,1180px)!important;padding-inline:0!important}.wc-menu-button{flex:0 0 44px;margin-left:auto}.wc-nav-links{max-width:calc(100vw - 1rem)!important}.wc-brand{min-width:0;max-width:calc(100% - 58px);overflow:hidden;text-overflow:ellipsis}}
@media(max-width:640px){.results-section .speech-rate-control>span{white-space:normal}.wc-select-menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));max-height:min(55dvh,360px);z-index:2200}.wc-select-option{min-height:46px}.wc-select-button{min-height:44px}.wc-nav-links{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-8px)!important}.wc-nav-links[data-open=true]{transform:translateX(-50%) translateY(0)!important}}

#textInput[readonly]{cursor:progress;border-color:var(--wc-primary);box-shadow:0 0 0 3px rgba(67,97,238,.12);background-image:linear-gradient(135deg,rgba(67,97,238,.035),rgba(76,201,240,.05))}

/* ---- gap-features.css ---- */
/* Gap-analysis feature additions — additive only, does not modify existing files.
   Reuses the site's existing --primary/--gray/--light-gray/--radius/--shadow
   variables and .dark-mode overrides so new components match the current theme. */

/* Reference Guides accordions */
.wc-ref-guides {
  margin: 40px auto;
}

.wc-ref-accordion {
  background: var(--light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: 16px 20px;
  margin-bottom: 14px;
  transition: var(--transition);
}

.dark-mode .wc-ref-accordion {
  background: var(--light-gray);
  border: 1px solid rgba(255, 255, 255, .05);
}

.wc-ref-accordion summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wc-ref-accordion summary::-webkit-details-marker {
  display: none;
}

.wc-ref-accordion summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--dark-gray);
}

.wc-ref-accordion[open] summary::after {
  content: "\2212";
}

.wc-ref-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}

.wc-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.wc-ref-table th,
.wc-ref-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--light-gray);
}

.dark-mode .wc-ref-table th,
.dark-mode .wc-ref-table td {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.wc-ref-table th {
  color: var(--dark-gray);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .03em;
}

.wc-ref-table tr:last-child td {
  border-bottom: none;
}

/* Focus Mode toggle button — sibling of .dark-mode-toggle */
.focus-mode-toggle {
  position: fixed;
  bottom: 30px;
  right: 100px;
  background: var(--light-gray);
  color: var(--dark);
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 100;
  transition: var(--transition);
}

.focus-mode-toggle:hover {
  transform: rotate(-15deg) scale(1.1);
}

.focus-mode-toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--btn-primary), var(--btn-primary-dark));
  color: #fff;
}

@media (max-width: 640px) {
  .focus-mode-toggle {
    width: 48px;
    height: 48px;
    right: max(74px, calc(env(safe-area-inset-right) + 74px));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 1150;
  }
}

/* Focus Mode active state */
body.wc-focus-mode .wc-site-header,
body.wc-focus-mode .hero,
body.wc-focus-mode .features,
body.wc-focus-mode .wc-ref-guides,
body.wc-focus-mode #how-it-works,
body.wc-focus-mode .wc-site-footer,
body.wc-focus-mode .results-section,
body.wc-focus-mode .goal-tracker,
body.wc-focus-mode .tool-grid,
body.wc-focus-mode .find-replace-box,
body.wc-focus-mode .speech-input-toolbar,
body.wc-focus-mode .action-buttons,
body.wc-focus-mode .options,
body.wc-focus-mode .input-section h2,
body.wc-focus-mode .input-section h3,
body.wc-focus-mode #wordLimitProgress,
body.wc-focus-mode #readingProgress {
  display: none !important;
}

body.wc-focus-mode .tool-container {
  display: block !important;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

body.wc-focus-mode .input-section {
  padding: 0;
  box-shadow: none;
  background: transparent;
}

body.wc-focus-mode #textInput {
  min-height: 70vh;
  font-size: 1.1rem;
  line-height: 1.7;
}

.wc-focus-word-count {
  display: none;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--light);
  color: var(--dark-gray);
  padding: 8px 18px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  font-size: .85rem;
  z-index: 101;
}

.dark-mode .wc-focus-word-count {
  background: var(--light-gray);
}

body.wc-focus-mode .wc-focus-word-count {
  display: block;
}

/* Small row layout reused by the Words Per Page Calculator (mirrors .goal-tracker-row spacing) */
.wc-mini-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}