/* 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 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
itself, a narrow element sitting
mid-header) - a wide 1180px dropdown anchored to a narrow, off-center
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
- see the position: relative comment on
.wc-nav for why. static removes this
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
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
, 100% means the bottom of .wc-nav's own box - which
sits INSIDE .wc-site-header's padding, not at the header's actual
visible bottom edge. Without adding the header's own padding+border
back in here, the panel's top edge lands about 11px above where the
header visually ends, overlapping it - confirmed by live measurement
(ddTop was 80px against a real headerBottom of 85px before this). */
top: calc(100% + 0.65rem + 1px + 0.4rem);
right: 0;
width: min(1180px, calc(100vw - 2rem));
margin: 0;
padding: 0.85rem;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
gap: 0.6rem;
/* Solid #fff, not var(--wc-surface) (added 2026-09-05): --wc-surface is
a semi-transparent white (rgba(255,255,255,0.88)) everywhere else on
the site, which reads fine on a small dropdown sitting over mostly
plain background - but this panel is now wide enough to sit directly
over the page's own H1 heading text, and the site owner reported the
heading visibly showing through the panel. A dedicated solid color
here (with its own dark-mode override right below) fixes this
specific panel without changing --wc-surface's transparency
everywhere else it's used (cards, the header itself, etc.). */
background: #fff;
border: 1px solid var(--wc-border);
border-radius: 1.1rem;
box-shadow: var(--wc-shadow);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity 0.16s ease,
transform 0.16s ease,
visibility 0.16s;
}
.dark-mode .wc-dropdown {
/* Matching solid dark-mode counterpart to the light-mode #fff above -
without this, dark mode would show a solid white panel (wrong) since
.wc-dropdown no longer reads its background from --wc-surface, which
is the variable that used to flip between light/dark automatically. */
background: #181f35;
}
/* Same brand gradient already used on the logo mark and the tab/section
underlines elsewhere on the site (var(--wc-primary) -> --wc-primary-dark)
- reused here as a thin top accent instead of a new color. */
.wc-dropdown::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--wc-primary), var(--wc-primary-dark));
}
/* Each item is now its own bordered card in a grid, not a row in a
stacked list, so the divider-per-row rule from the old narrow layout
no longer applies. */
.wc-dropdown li + li {
border-top: none;
}
.wc-dropdown a {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.75rem;
height: 100%;
padding: 0.85rem 0.9rem;
border: 1px solid transparent;
border-radius: 0.85rem;
color: var(--wc-ink);
font-weight: 500;
font-size: 0.88rem;
line-height: 1.25;
text-decoration: none;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
transform 0.15s ease;
}
.wc-dropdown-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.65rem;
background: rgba(67, 97, 238, 0.1);
color: var(--wc-primary);
}
.wc-dropdown-icon svg {
width: 1.3rem;
height: 1.3rem;
}
.wc-dropdown-text {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.wc-dropdown-title {
color: var(--wc-ink);
font-weight: 650;
font-size: 0.92rem;
}
.wc-dropdown-desc {
color: var(--wc-muted);
font-weight: 400;
font-size: 0.78rem;
line-height: 1.4;
}
/* Same rightward hover-shift already used on footer links (footer a:hover)
elsewhere on the site - reused here so the two nav surfaces feel like
one design language instead of two different hover styles. */
.wc-dropdown a:hover,
.wc-dropdown a:focus-visible {
border-color: rgba(67, 97, 238, 0.35);
background: rgba(67, 97, 238, 0.08);
transform: translateY(-2px);
}
.wc-dropdown a:hover .wc-dropdown-title,
.wc-dropdown a:focus-visible .wc-dropdown-title {
color: var(--wc-primary);
}
@media (min-width: 861px) {
.wc-has-dropdown:hover > .wc-dropdown,
.wc-has-dropdown.wc-open > .wc-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.wc-menu-button {
display: none;
width: 44px;
height: 44px;
padding: 0;
place-items: center;
flex: 0 0 auto;
border: 1px solid var(--wc-border);
border-radius: 0.8rem;
color: var(--wc-ink);
background: var(--wc-surface);
box-shadow: 0 6px 16px rgba(33, 43, 91, 0.1);
cursor: pointer;
}
.wc-menu-lines,
.wc-menu-lines::after,
.wc-menu-lines::before {
width: 20px;
height: 2px;
display: block;
border-radius: 99px;
background: currentColor;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.wc-menu-lines {
position: relative;
}
.wc-menu-lines::after,
.wc-menu-lines::before {
position: absolute;
content: "";
left: 0;
}
.wc-menu-lines::before {
top: -6px;
}
.wc-menu-lines::after {
top: 6px;
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines {
background: 0 0;
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines::before {
top: 0;
transform: rotate(45deg);
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines::after {
top: 0;
transform: rotate(-45deg);
}
.wc-site-footer {
/* Explicit on purpose - see the matching comment on .wc-site-header
above: this must never silently follow whatever font a given page's
own body declares. */
font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 100vw;
margin-left: calc(-1 * var(--wc-body-gutter));
margin-top: clamp(3rem, 8vw, 6rem);
color: #fff;
background:
radial-gradient(
circle at 10% 0,
rgba(76, 201, 240, 0.16),
transparent 24rem
),
linear-gradient(145deg, #111827, #17112f);
border-top: 1px solid rgba(76, 201, 240, 0.22);
}
.wc-footer-grid {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem;
display: grid;
grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 1fr));
gap: clamp(2rem, 5vw, 5rem);
}
.wc-site-footer h2 {
margin: 0 0 1rem;
color: #75dcfa;
font-size: 1rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#wc-footer-brand {
font-size: 1.5rem;
text-transform: none;
letter-spacing: normal;
}
.wc-site-footer p {
max-width: 34rem;
color: #d6dceb;
line-height: 1.7;
}
.wc-site-footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.wc-site-footer li + li {
margin-top: 0.6rem;
}
.wc-site-footer a {
color: #e7ebf5;
text-decoration: none;
}
.wc-site-footer a:hover {
color: #75dcfa;
}
.wc-footer-social-label {
margin: 1.35rem 0 0.8rem;
color: #9aa5c0;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.wc-footer-social {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
/* Rounded-square "tinted badge" shape (16px radius) is this site's own
established icon-container language — the same shape/size .feature-icon
and .wc-feature-overlay-icon already use elsewhere, not a generic round
social-icon button borrowed from somewhere else. Background stays a soft
near-white (not solid #fff, not the header's dark-surface glass) since
these icons carry their own real brand color and need a light, neutral
surface to read correctly against the dark footer.
!important on the properties home.css's older "footer a" rule also sets
(index.html only) so this button keeps its own look there instead of
inheriting that rule's text-link slide-and-recolor hover. */
.wc-footer-social-link {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 3.1rem;
height: 3.1rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 20px rgba(8, 12, 30, 0.32);
text-decoration: none !important;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.wc-footer-social-link:hover,
.wc-footer-social-link:focus-visible {
background: #ffffff;
transform: translateY(-4px) !important;
box-shadow: 0 12px 26px rgba(8, 12, 30, 0.4);
}
.wc-footer-social-link .wc-icon {
width: 1.9rem;
height: 1.9rem;
filter: none;
}
@media (max-width: 480px) {
.wc-footer-social-link {
width: 2.75rem;
height: 2.75rem;
border-radius: 14px;
}
.wc-footer-social-link .wc-icon {
width: 1.65rem;
height: 1.65rem;
}
}
.wc-footer-bottom {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
padding: 1.25rem 0 1.6rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
color: #b7c0d4;
text-align: center;
font-size: 0.9rem;
}
.wc-footer-legal {
margin-top: 0.6rem;
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.wc-footer-legal a {
font-size: 0.82rem;
color: #9aa5c0;
}
.wc-footer-legal a:hover {
color: #75dcfa;
}
@media (max-width: 860px) {
.wc-menu-button {
display: grid;
}
.wc-nav-links {
position: absolute;
top: calc(100% + 0.55rem);
left: 50%;
width: min(calc(100vw - 1.5rem), 34rem);
max-height: min(72vh, 34rem);
padding: 0.65rem;
display: grid;
gap: 0.18rem;
overflow-y: auto;
background: var(--wc-surface);
border: 1px solid var(--wc-border);
border-radius: 1rem;
box-shadow: var(--wc-shadow);
backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -8px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s;
}
.wc-nav-links[data-open="true"] {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.wc-nav-links a {
padding: 0.85rem 1rem;
text-align: left;
}
.wc-nav-links button.wc-nav-toggle {
width: 100%;
justify-content: space-between;
}
.wc-dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
width: auto;
max-width: none;
grid-template-columns: 1fr;
box-shadow: none;
border: none;
background: rgba(67, 97, 238, 0.06);
backdrop-filter: none;
display: none;
margin-top: 0.2rem;
}
.wc-has-dropdown.wc-open > .wc-dropdown {
display: grid;
}
}
@media (max-width: 640px) {
.wc-footer-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 360px) {
.wc-site-header {
top: 10px;
width: calc(90vw - 16px);
margin-top: 10px;
/* Literal 8px, not calc(5vw + 8px - var(--wc-body-gutter)) — same
2026-09-05 fix and reasoning as the base .wc-site-header rule above:
this only ever produced 8px because --wc-body-gutter was always 5vw
everywhere; now that it's a fixed 16px at 768px and under (this
360px rule is nested inside that same range), the old cancel-out
form would have silently shifted the header. */
margin-left: 8px;
margin-right: 8px;
border-radius: 20px;
padding-inline: 0.6rem;
}
.wc-brand {
font-size: 1.03rem;
}
.wc-brand-mark {
width: 2rem;
height: 2rem;
}
}
/* ---- site-icons.css ---- */
i[class*="fa-"] {
display: inline-flex;
align-items: center;
justify-content: center;
font-style: normal;
line-height: 1;
}
.wc-icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.14em;
overflow: visible;
fill: currentColor;
filter: drop-shadow(0 2px 3px rgba(35, 49, 110, 0.22));
transform: translateZ(0);
}
.btn .wc-icon,
.dark-mode-toggle .wc-icon,
.feature-icon .wc-icon,
.stat-icon .wc-icon {
filter: drop-shadow(0 2px 3px rgba(255, 255, 255, 0.28))
drop-shadow(0 4px 6px rgba(27, 36, 84, 0.2));
}
.dark-mode-toggle,
.feature-icon,
.stat-icon {
position: relative;
isolation: isolate;
}
.dark-mode-toggle::after,
.feature-icon::after,
.stat-icon::after {
content: "";
position: absolute;
inset: 5% 12% auto;
height: 42%;
border-radius: 50%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.58),
rgba(255, 255, 255, 0)
);
pointer-events: none;
z-index: -1;
}
/* ---- 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{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: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 70% / 20% tool-to-ad
layout (standing site-wide rule, corrected again 2026-09-05 — the page's
90%-wide content zone, 5% margin fixed on each side by body's own
gutter, above, splits into 70% tool + 20% ad = 90%, leaving that extra
10% as real breathing room around/inside the two areas rather than
forcing every last percentage point into one or the other).
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 (7fr 2fr = 9fr
total, i.e. 70:20 reduced). Three 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), then 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). 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.
========================================================================== */
/* Inside the 70%-wide tool column: input-section and results-section split
EVENLY, 35% / 35% of the FULL SCREEN width each (not 35%/35% of the tool
column itself) — standing rule, corrected 2026-09-05, so results are
visible above the fold without scrolling and neither panel is favored
over the other. Since 35 + 35 = 70 (the tool column's own total share),
the ratio BETWEEN the two panels is an even 1:1. .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
35%-of-screen 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 5vw gutter margin, so real
visible left/right whitespace measured 24px MORE than the intended
5% on wide screens — confirmed live via getBoundingClientRect() before
this fix. The page-width standing rule (see CLAUDE.md) is that body's
own 5vw 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 {
grid-template-columns: 7fr 2fr;
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
, 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