/* Wisppilot responsive fixes — public pages (WSPRESP, 4 Nov 2026). Loaded LAST, right before </head> (front.php → wsp_resp_filter).
   Targeted fixes only, found by the offline matrix (/root/tools/wsp-responsive): no redesign. Kill: option wsp_responsive_off=1 + purge. */

/* F1 · pricing at 320 px (ru, nl, pl, kk, uz …): the monthly / 6-month toggle and the «(e.g. 4 videos of 30 s)» line did not shrink →
   the whole page scrolled sideways (document 344 px wide in a 320 px window). Toggle may shrink and wrap its label; the example line wraps
   only when it cannot fit (≤ 420 px). Wider screens unchanged. */
.ptog{max-width:100%}
.ptog button{min-width:0}
@media (max-width:420px){
.ptog button{padding:10px 12px;line-height:1.15;flex-wrap:wrap;justify-content:center;row-gap:4px;text-align:center}
.ptog em{white-space:normal}
.ptog button[data-bill=monthly]{flex:none}
.ptog button[data-bill=yearly]{flex:1 1 auto}
.bal .bal-ex{white-space:normal}
}
@media (max-width:360px){
.plan{padding:26px 18px}
.bal{padding:12px 10px}
}

/* F2 · long single words in headings ran out of their card (de «Produkteinführungen» 1024–1920 px, nl «Contentstrategie» 1024 px, el/de at 320).
   Break only when a word cannot fit (no change for headings that fit; no hyphenation — QA: hyphens:auto also split headings that fit).
   The referral-teaser kicker (64 px icon beside it) spilled 27 px at 320 → kickers never exceed their box. */
main h1,main h2,main h3,.kicker{overflow-wrap:break-word}
.kicker{max-width:100%}
.rf-teaser .kicker{overflow-wrap:anywhere}
@media (max-width:374px){.kicker{letter-spacing:.02em}}

/* F3 · feature-page hero mockup at 641–980 px (tablets, landscape phones): the floating «Scheduled» / «Approved» cards and the post card keep
   their desktop negative offsets (−6 % / −4 % / −2 %) in the one-column layout → cut off by both screen edges. Same values as ≤ 640 px. */
@media (min-width:641px) and (max-width:980px){
.mock .f1{inset-inline-start:0}
.mock .f2,.mock .post{inset-inline-end:0}
}

/* F4 · wide tables (home comparison, article tables) on phones: they scroll sideways inside .tbl-w, but the cut falls on a column edge, so the
   table looks complete and two columns stay hidden. Fade the trailing edge while there is more to scroll (scroll-driven animation; when
   nothing overflows the timeline is inactive → no fade). Not motion → kept with prefers-reduced-motion. Browsers without support: as before. */
@supports (animation-timeline:scroll()){
.tbl-w{animation:wspTblHint linear both!important;animation-timeline:scroll(self inline)!important}
[dir=rtl] .tbl-w{animation-name:wspTblHintR!important}
}
@keyframes wspTblHint{0%,94%{-webkit-mask-image:linear-gradient(to left,transparent,#000 44px);mask-image:linear-gradient(to left,transparent,#000 44px)}100%{-webkit-mask-image:none;mask-image:none}}
@keyframes wspTblHintR{0%,94%{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px);mask-image:linear-gradient(to right,transparent,#000 44px)}100%{-webkit-mask-image:none;mask-image:none}}

/* F5 · text below 12 px on phones (kickers 11 px, plan balance label 11 px, reCAPTCHA notice 11.5 px) → 12 px. */
@media (max-width:640px){
.kicker{font-size:12px}
.bal small{font-size:12px}
.rc-note{font-size:12px}
}

/* >>> wsp-cmp-us */
/* wsp-cmp-us 5 Nov 2026 (CEO): highlight the Wisppilot column in the home comparison table */
.cmp thead th.us{background:var(--brand);color:var(--brand-ink);font-weight:800;box-shadow:inset 2px 0 var(--brand),inset -2px 0 var(--brand);position:relative}
.cmp td.us{background:color-mix(in srgb,var(--brand) 11%,var(--card));color:var(--head);font-weight:700;box-shadow:inset 2px 0 var(--brand),inset -2px 0 var(--brand);border-bottom-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.cmp tr:last-child td.us{box-shadow:inset 2px 0 var(--brand),inset -2px 0 var(--brand),inset 0 -2px var(--brand)}
:root[data-theme=dark] .cmp td.us{background:color-mix(in srgb,var(--brand) 14%,var(--card))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cmp td.us{background:color-mix(in srgb,var(--brand) 14%,var(--card))}}
/* <<< wsp-cmp-us */