/* 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-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);
}
* {
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  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%;
}
.wc-site-header {
  position: sticky;
  top: 16px;
  z-index: 1200;
  width: calc(90% - 32px);
  max-width: 1440px;
  margin: 16px auto 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 {
  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 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 a:hover,
.wc-nav-links a[aria-current="page"] {
  color: var(--wc-primary);
  background: rgba(67, 97, 238, 0.1);
  transform: translateY(-1px);
}
.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 {
  width: 100%;
  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,
.wc-site-footer h3 {
  margin: 0 0 1rem;
  color: #75dcfa;
}
.wc-site-footer h2 {
  font-size: 1.5rem;
}
.wc-site-footer h3 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wc-site-footer p {
  max-width: 34rem;
  color: #d6dceb;
  line-height: 1.7;
}
.wc-site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-site-footer li + li {
  margin-top: 0.6rem;
}
.wc-site-footer a {
  color: #e7ebf5;
  text-decoration: none;
}
.wc-site-footer a:hover {
  color: #75dcfa;
}
.wc-footer-social-label {
  margin: 1.35rem 0 0.8rem;
  color: #9aa5c0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wc-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
/* Rounded-square "tinted badge" shape (16px radius) is this site's own
   established icon-container language — the same shape/size .feature-icon
   and .wc-feature-overlay-icon already use elsewhere, not a generic round
   social-icon button borrowed from somewhere else. Background stays a soft
   near-white (not solid #fff, not the header's dark-surface glass) since
   these icons carry their own real brand color and need a light, neutral
   surface to read correctly against the dark footer.
   !important on the properties home.css's older "footer a" rule also sets
   (index.html only) so this button keeps its own look there instead of
   inheriting that rule's text-link slide-and-recolor hover. */
.wc-footer-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(8, 12, 30, 0.32);
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.wc-footer-social-link:hover,
.wc-footer-social-link:focus-visible {
  background: #ffffff;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(8, 12, 30, 0.4);
}
.wc-footer-social-link .wc-icon {
  width: 1.9rem;
  height: 1.9rem;
  filter: none;
}
@media (max-width: 480px) {
  .wc-footer-social-link {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
  }
  .wc-footer-social-link .wc-icon {
    width: 1.65rem;
    height: 1.65rem;
  }
}
.wc-footer-bottom {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #b7c0d4;
  text-align: center;
  font-size: 0.9rem;
}
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 (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;
  }
}
@media (max-width: 640px) {
  .wc-footer-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 360px) {
  .wc-site-header {
    top: 8px;
    width: calc(90% - 16px);
    margin-top: 8px;
    border-radius: 20px;
    padding-inline: 0.6rem;
  }
  .wc-brand {
    font-size: 1.03rem;
  }
  .wc-brand-mark {
    width: 2rem;
    height: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 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: scale(1.08);
}
.dark-mode-toggle:focus-visible {
  outline: 3px solid var(--wc-focus, #ffb703) !important;
  outline-offset: 3px;
}

/* ---- 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:1200px!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 20px!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{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;font-size:1.5rem;cursor:pointer;color:var(--dark-gray)}.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}footer a{position:relative!important;display:inline-block!important;transition:all .3s ease!important;padding:2px 0}footer a:hover{transform:translateX(10px)!important;color:var(--primary-light)!important;text-decoration:none!important}.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}}: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, .88);--wc-border:rgba(67, 97, 238, .18);--wc-focus:#ffb703;--wc-footer:#111827;--wc-shadow:0 18px 50px rgba(35, 49, 110, .12)}*{box-sizing:border-box}html{overflow-x:hidden;scroll-behavior:smooth}body{overflow-x:hidden;color:var(--wc-ink);background:radial-gradient(circle at 8% 0,rgba(76,201,240,.13),transparent 28rem),radial-gradient(circle at 92% 8%,rgba(114,9,183,.1),transparent 26rem),var(--wc-page)}body.dark-mode{--wc-ink:#f5f7ff;--wc-muted:#bdc7da;--wc-page:#0b1020;--wc-surface:rgba(24, 31, 53, .92);--wc-border:rgba(76, 201, 240, .26);--wc-shadow:0 18px 55px rgba(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%}.wc-site-header{position:sticky;top:16px;z-index:1200;width:calc(90% - 32px);max-width:1440px;margin:16px auto 0;padding:.65rem clamp(.85rem,3vw,2rem);background:rgba(255,255,255,.92);border:1px solid var(--wc-border);border-radius:32px;box-shadow:0 8px 30px rgba(20,30,75,.08);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}.dark-mode .wc-site-header{background:rgba(11,16,32,.92)}.wc-nav{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:.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:-.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:.8rem;overflow:hidden;box-shadow:0 8px 18px rgba(67,97,238,.28)}.wc-brand-mark img{width:100%;height:100%;display:block}.wc-nav-links{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;margin:0;padding:0;list-style:none}.wc-nav-links a{display:block;padding:.68rem .82rem;border-radius:.72rem;color:var(--wc-muted);font-weight:650;line-height:1.1;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}.wc-nav-links a:hover,.wc-nav-links a[aria-current=page]{color:var(--wc-primary);background:rgba(67,97,238,.1);transform:translateY(-1px)}.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:.8rem;color:var(--wc-ink);background:var(--wc-surface);box-shadow:0 6px 16px rgba(33,43,91,.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 .2s ease,opacity .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{width:100%;margin-top:clamp(3rem,8vw,6rem);color:#fff;background:radial-gradient(circle at 10% 0,rgba(76,201,240,.16),transparent 24rem),linear-gradient(145deg,#111827,#17112f);border-top:1px solid rgba(76,201,240,.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,.wc-site-footer h3{margin:0 0 1rem;color:#75dcfa}.wc-site-footer h2{font-size:1.5rem}#wc-footer-brand{font-size:1.5rem;text-transform:none;letter-spacing:normal}.wc-site-footer h3{font-size:1rem;letter-spacing:.06em;text-transform:uppercase}.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:.6rem}.wc-site-footer a{color:#e7ebf5;text-decoration:none}.wc-site-footer a:hover{color:#75dcfa}.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,.14);color:#b7c0d4;text-align:center;font-size:.9rem}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 (max-width:860px){.wc-menu-button{display:grid}.wc-nav-links{position:absolute;top:calc(100% + .55rem);left:50%;width:min(calc(100vw - 1.5rem),34rem);max-height:min(72vh,34rem);padding:.65rem;display:grid;gap:.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 .2s ease,transform .2s ease,visibility .2s}.wc-nav-links[data-open=true]{opacity:1;visibility:visible;transform:translate(-50%,0)}.wc-nav-links a{padding:.85rem 1rem;text-align:left}}@media (max-width:640px){.wc-footer-grid{grid-template-columns:1fr}}@media (max-width:360px){.wc-site-header{top:8px;width:calc(90% - 16px);margin-top:8px;border-radius:20px;padding-inline:.6rem}.wc-brand{font-size:1.03rem}.wc-brand-mark{width:2rem;height:2rem}}@media (prefers-reduced-motion:reduce){*,::after,::before{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}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: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 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 20% / 60% / 20%
   ad-rail layout. The below-the-fold guide content (.wc-content) sits
   OUTSIDE this shell as a full-width sibling — ads run alongside the tool
   only, not alongside the article-style content below it. Ratio is exact
   (1fr 3fr 1fr = 5fr total). Rails hide 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.
   ========================================================================== */
.tool-container {
  grid-template-columns: 1fr;
}
.wc-page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 clamp(10px, 3vw, 24px);
}
.wc-ad-rail {
  display: none;
}
@media (min-width: 1200px) {
  .wc-page-shell {
    grid-template-columns: 1fr 3fr 1fr;
    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 20/60/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;
  }
}

/* ---- 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,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
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:15px!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:14px;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;
}