/* Wisppilot — «Who it's for» page only (loaded by wisppilot/whofor.php after wsp.css). Design model: animators.az/kimler-ucundur
   «marker»: oversized question + role index with portraits, editorial role rows (no cards), the part Wisppilot does in a brand-yellow
   marker that draws in once. Tokens from wsp.css; logical properties → RTL-safe; no JS → everything visible, marker drawn. */
.wf{--wf-ink:#1d1d1f;overflow-x:clip}
.wf :where(h1,h2,p,ul){margin:0}
/* hero */
.wf{--wf-glow:color-mix(in srgb,var(--brand2) 24%,transparent)}
:root[data-theme=dark] .wf{--wf-glow:color-mix(in srgb,var(--brand2) 11%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .wf{--wf-glow:color-mix(in srgb,var(--brand2) 11%,transparent)}}
.wf-hero{position:relative;padding:56px 0 40px}
/* soft glow behind the role index — an ellipse that fades out inside the hero box (no clipped edges) */
.wf-hero::before{content:"";position:absolute;inset:0 0 0 auto;width:62%;background:radial-gradient(closest-side at 62% 50%,var(--wf-glow),transparent);z-index:-1;pointer-events:none}
[dir=rtl] .wf-hero::before{inset:0 auto 0 0;background:radial-gradient(closest-side at 38% 50%,var(--wf-glow),transparent)}
.wf[dir=ltr] .wf-hero::before{inset:0 0 0 auto;background:radial-gradient(closest-side at 62% 50%,var(--wf-glow),transparent)}
.wf-hero-g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:end}
.wf-hero h1{font-size:clamp(40px,6vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.wf-lede{margin-top:24px!important;max-width:34em;font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--muted);text-wrap:pretty}
.wf-index ul{list-style:none;padding:0;display:grid;gap:2px}
.wf-index a{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:14px;color:var(--head);font-weight:600;font-size:16px;line-height:1.3;transition:background .15s}
.wf-index a:hover{background:var(--bg3)}
.wf-index span{flex:1;min-width:0}
.wf-index .wf-go{width:18px;height:18px;flex:0 0 18px;color:var(--accent-text);opacity:0;transition:opacity .15s}
.wf-index a:hover .wf-go,.wf-index a:focus-visible .wf-go{opacity:1}
[dir=rtl] .wf-index .wf-go{transform:scaleX(-1)}
/* roles: no cards — rows; the solution line carries the marker */
.wf-roles{padding-top:8px;padding-bottom:16px}
.wf-role{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding:52px 0;border-top:1px solid var(--line);scroll-margin-top:92px}
.wf-role:first-child{border-top:0}
.wf-role-head{display:flex;align-items:center;gap:24px;align-self:start}
.wf-role-head>div{min-width:0}
.wf-role h2{font-size:clamp(24px,2.5vw,32px);line-height:1.15;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:break-word}
.wf-who{margin-top:8px!important;color:var(--muted);font-size:15px;line-height:1.45}
.wf-sit{max-width:36em;font-size:18px;line-height:1.7}
.wf-sol{max-width:34em;margin-top:14px!important;font-weight:600;font-size:20px;line-height:1.6;color:var(--head)}
.wf-sol mark{color:var(--wf-ink);padding:.06em .28em;margin:0 -.1em;border-radius:.35em .8em .5em .9em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(100deg,rgba(255,200,61,.35) 0%,rgba(255,200,61,.95) 3%,rgba(255,200,61,.82) 55%,rgba(255,200,61,.96) 97%,rgba(255,200,61,.4) 100%) no-repeat 0 100%/100% 82%}
[dir=rtl] .wf-sol mark{background-position:100% 100%}
.wf[dir=ltr] .wf-sol mark{background-position:0 100%}
.wf-ticks{margin:22px 0 0!important;gap:9px}
.wf-ticks li{font-weight:500;color:var(--text);font-size:16px;line-height:1.5}
.wf-role .card-link{margin-top:18px;padding-top:0}
/* an English fallback block inside an RTL page reads left to right — undo wsp.css's RTL arrow flip there */
.wf[dir=ltr] .card-link .ic,.wf[dir=ltr] .btn .ic,.wf[dir=ltr] .wf-index .wf-go{transform:none}
/* portraits (same characters as animators.az) */
.wf-av{display:block;flex:none;border-radius:50%;background:#fde7a8;object-fit:cover}
.wf-av-s{width:44px;height:44px}
.wf-av-l{width:120px;height:120px;box-shadow:0 0 0 6px var(--bg),0 0 0 8px rgba(245,178,0,.55)}
.wf-role:target .wf-av-l{box-shadow:0 0 0 6px var(--bg),0 0 0 10px var(--brand)}
/* end: how-it-works link + call to action, quiet and start-aligned */
.wf-end{padding:24px 0 96px}
.wf-end .wrap::before{content:"";display:block;width:92px;height:14px;border-radius:9px 4px 8px 5px;background:var(--brand2);transform:rotate(-2.5deg);margin-bottom:36px}
[dir=rtl] .wf-end .wrap::before{transform:rotate(2.5deg)}
.wf-how{margin-bottom:22px!important;font-size:16px}
.wf-how a{color:var(--head);font-weight:600;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px;text-underline-offset:6px}
.wf-how a:hover{text-decoration-color:var(--head)}
.wf-end-t{font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;max-width:15em;text-wrap:balance}
.wf-end-p{max-width:38em;margin:16px 0 28px!important;font-size:17px;line-height:1.65;color:var(--muted)}
/* the one motion (JS adds .wf-js only without reduced motion): marker sweeps over the solution line, ink follows */
@media (prefers-reduced-motion:no-preference){
  .wf-js .wf-sol mark{background-size:0% 82%;color:var(--head);transition:background-size 1s cubic-bezier(.3,.7,.2,1) .12s,color .3s .45s}
  .wf-js .wf-sol.in mark{background-size:100% 82%;color:var(--wf-ink)}
}
/* scripts that do not like tight tracking / huge display sizes */
:lang(ar) .wf-hero h1,:lang(he) .wf-hero h1,:lang(el) .wf-hero h1,:lang(ar) .wf h2,:lang(he) .wf h2,:lang(el) .wf h2{letter-spacing:0;line-height:1.25}
:lang(ja) .wf-hero h1,:lang(zh-Hant) .wf-hero h1{font-size:clamp(30px,4.6vw,54px);letter-spacing:0;line-height:1.3;line-break:strict}
:lang(ja) .wf-end-t,:lang(zh-Hant) .wf-end-t{letter-spacing:0;line-height:1.35}
@media (max-width:980px){.wf-hero-g{grid-template-columns:1fr;gap:32px}.wf-role{grid-template-columns:1fr;gap:20px;padding:38px 0}}
@media (max-width:640px){.wf-hero{padding:28px 0 20px}.wf-av-l{width:84px;height:84px}.wf-role-head{gap:18px}.wf-sit{font-size:17px}.wf-sol{font-size:18px}
  .wf-index a{font-size:15px;padding:7px 8px}.wf-end{padding:8px 0 64px}.wf-end .wrap::before{margin-bottom:28px}}