/* MyRecruiter "Why list on MyRecruiter.co.uk" explainer: [mr_why] (inc/mr-why.php). Ported from the approved mockup
   info/mockups/v3-c-glass/why-myrecruiter.html (myrecruiter.co.uk repo). Every class is prefixed wy- so the theme's CSS cannot reach in.
   NOTE (2026-10-20): edited by hand from here on; do not re-run scripts/sbox1/why/gen.py. */
.wy-why{--font:var(--mr-font-ui);font-family:var(--font);-webkit-font-smoothing:antialiased}
/* Apple pass 1.0 (2026-10-20): the band's chrome (heading, platter, captions, the two pills, the tab 2-6 interface cards) uses the
   site's Apple stack. The mirror (stills, videos and the call card timed to them) is the video composition and keeps Inter. */
.wy-why .wy-mirror{--font:var(--mr-font-inter);font-family:var(--font)}
.wy-why *{box-sizing:border-box}
.wy-why p,.wy-why h2,.wy-why h4{margin:0;font-family:inherit}
.wy-why button{font-family:inherit;text-transform:none;line-height:1.2}
.wy-why img,.wy-why video{max-width:none;display:block}
.wy-why a{text-decoration:none}
/* Stars: partial fill via --p (from glass.css) */
.wy-stars{--p:80%;display:inline-block;width:92px;height:17px;vertical-align:-2px;
  background:linear-gradient(90deg,#F0A13A var(--p),rgba(28,42,59,.18) var(--p));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.1 6.6.8-4.9 4.5 1.3 6.6L10 14.8 4.1 18l1.3-6.6L.5 6.9l6.6-.8z'/%3E%3C/svg%3E") 0 0/18.4px 17px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.1 6.6.8-4.9 4.5 1.3 6.6L10 14.8 4.1 18l1.3-6.6L.5 6.9l6.6-.8z'/%3E%3C/svg%3E") 0 0/18.4px 17px repeat-x}

/* ---- Band and stage (Apple: theme-dark, 6.25vw gutter, radius 28, 16:9) ---- */
.wy-why{--ease:cubic-bezier(.42,0,.58,1);--gut:6.25vw;--hdr:88px;
  margin:0;padding:80px var(--gut) 96px;background:#121B27;color:#fff}
.wy-why-head{margin:0 0 40px}
.wy-why-head h2{font-family:var(--mr-font-display);font-size:clamp(32px,2.8vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:700;color:#fff}
.wy-why-track{position:relative;height:250vh}
.wy-why-sticky{position:sticky;top:calc(var(--hdr) + 12px)}
.wy-cl-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:min(760px,calc(100vh - var(--hdr) - 32px));border-radius:28px;overflow:hidden;background:#0B1119;isolation:isolate}
.wy-cl-panel{position:absolute;inset:0}
.wy-cl-panel[hidden]{display:none}
.wy-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---- Pills inside the stage (Apple pill metrics) ---- */
.wy-cl-tabs{position:absolute;z-index:6;left:24px;right:24px;top:24px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.wy-cl-tabs::-webkit-scrollbar{display:none}
.wy-cl-tab{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:52px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  font:600 17px/1.2 var(--font);letter-spacing:-.02em;color:#fff;background:rgba(20,31,45,.55);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35);
  transition:background .25s linear,color .25s linear}
.wy-cl-tab:hover{background:rgba(20,31,45,.72)}
.wy-cl-tab[aria-selected="true"]{background:rgba(232,232,237,.92);color:#1C2A3B}
.wy-cl-tab:focus-visible{outline:2px solid #F0A13A;outline-offset:3px}
/* Platter (default, Hermon 10-08): one frosted bar, tabs sit inside, a light thumb slides to the chosen one */
.wy-cl-tabs.wy-platter{right:auto;max-width:calc(100% - 48px);gap:0;padding:5px;border-radius:999px;
  background:rgba(20,31,45,.5);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35)}
.wy-platter .wy-cl-tab{position:relative;z-index:1;min-height:46px;padding:0 20px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:color .35s var(--ease)}
.wy-platter .wy-cl-tab:hover{background:transparent;color:#F3D9A4}
.wy-platter .wy-cl-tab[aria-selected="true"]{background:transparent;color:#1C2A3B}
.wy-cl-thumb{display:none}
.wy-platter .wy-cl-thumb{display:block;position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:rgba(232,232,237,.94);
  transform:translateX(var(--tx,5px));width:var(--tw,0);transition:transform .45s var(--ease),width .45s var(--ease)}
.wy-cl-tab .wy-lg{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.wy-cl-tab .wy-lg svg{width:20px;height:20px}
.wy-cl-tab .wy-lg rect{fill:#F3F1EA}.wy-cl-tab .wy-lg path{stroke:#1C2A3B}
.wy-cl-tab[aria-selected="true"] .wy-lg rect{fill:#1C2A3B}.wy-cl-tab[aria-selected="true"] .wy-lg path{stroke:#F0A13A}

/* ---- Caption = the grown pill: one bold word, one sentence ---- */
.wy-cl-cap{position:absolute;z-index:5;left:24px;bottom:24px;width:min(423px,calc(100% - 48px));box-sizing:border-box;padding:28px;border-radius:28px;
  background:rgba(20,31,45,.62);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);
  font:400 17px/1.47 var(--font);color:rgba(255,255,255,.9);opacity:0;transform:translateY(28px)}
.wy-cl-cap strong{font-weight:600;color:#fff}
.wy-is-active .wy-cl-cap{opacity:1;transform:none;transition:opacity .6s var(--ease) .25s,transform .4s var(--ease) .25s}

/* ---- Tab 1: the mirror (scroll sets --x, --o1, --t1, --o2, --t2) ---- */
#cl-p1{--o1:0;--t1:0;--o2:0;--t2:0}
.wy-mirror{position:absolute;inset:0;--x:108%}
.wy-mirror img,.wy-mirror video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* eye line: both faces level across the mirror (site manager's eyes 35% down, recruiter's 28%; nudged to meet at ~30%) */
.wy-m-left>img,.wy-m-left>video{transform:translate(calc((var(--x) - 50%) * .06),-3.5%) scale(1.08)}
.wy-m-right>img,.wy-m-right>video{transform:translate(calc((50% - var(--x)) * .06),4%) scale(1.08)}
.wy-mirror video{opacity:0;transition:opacity .5s var(--ease);filter:contrast(1.06) saturate(.95)}
.wy-mirror video.wy-is-live{opacity:1}
.wy-m-right{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x));will-change:clip-path}
.wy-m-glass{position:absolute;top:0;bottom:0;left:var(--x);width:8%;transform:translateX(-50%);overflow:hidden;will-change:transform;
  -webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);
  border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.18)}
.wy-m-glass .wy-refr{position:absolute;top:0;bottom:0;left:calc(-1 * (var(--x) - 4%) * 12.5);width:1250%;height:100%;object-fit:cover;
  transform:scaleX(1.06) translateX(-3%);filter:blur(1.5px) saturate(120%);opacity:.55;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30% 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30% 70%,transparent)}
.wy-m-glass::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%)}
.wy-m-btn{position:absolute;bottom:11%;z-index:4;display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;text-decoration:none;
  font:600 clamp(17px,1.5vw,21px)/1 var(--font);color:#fff;
  background:rgba(20,31,45,calc(var(--o) * .5));box-shadow:inset 0 0 0 .5px rgba(255,255,255,calc(var(--o) * .45)),0 18px 40px -22px rgba(0,0,0,calc(var(--o) * .8));
  -webkit-backdrop-filter:blur(calc(var(--o) * 20px)) saturate(140%);backdrop-filter:blur(calc(var(--o) * 20px)) saturate(140%);
  opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 24px))}
.wy-m-btn span{opacity:var(--t);letter-spacing:calc((1 - var(--t)) * .08em - .01em)}
.wy-m-btn:focus-visible{outline:2px solid #F0A13A;outline-offset:3px}
.wy-m-btn.wy-niche{--o:var(--o1);--t:var(--t1);left:6%}
.wy-m-btn.wy-rec{--o:var(--o2);--t:var(--t2);right:6%}
.wy-m-call{position:absolute;z-index:4;top:calc(24px + 52px + 20px);right:calc(100% - var(--x) + 3%);display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:20px;
  background:rgba(20,31,45,.55);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;
  opacity:0;transform:translateY(-12px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.wy-m-call.wy-is-on{opacity:1;transform:none}
.wy-m-call svg{width:34px;height:34px;flex:none}
.wy-m-call b{display:block;font-size:15px;font-weight:600}.wy-m-call small{font-size:12.5px;color:rgba(255,255,255,.75)}
.wy-m-call .wy-st{display:inline-block;min-width:7ch}

/* ---- Tabs 2-6: our interface, animated (one curve, 24-28px travel, 120ms stagger) ---- */
.wy-ui{position:absolute;inset:0;display:grid;place-items:center;padding:96px 0 150px;background:radial-gradient(120% 90% at 20% 0%,#2E4157 0%,#1C2A3B 55%,#121B27 100%)}
.wy-ui-row{display:flex;gap:18px;align-items:center}
.wy-ui-card{background:rgba(255,255,255,.95);color:#1C2A3B;border-radius:20px;padding:20px 22px;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.wy-score{min-width:180px}
.wy-score small{display:block;font-size:13px;font-weight:600;color:#4F5F70}
.wy-score strong{display:block;font-size:48px;line-height:1;font-weight:700;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
.wy-score .wy-stars{margin-top:8px}
.wy-bubble{width:230px;font-size:14px;line-height:1.4;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.wy-bubble b{display:block;font-size:12px;font-weight:600;color:#F3D9A4;margin-bottom:4px}
.wy-rv{opacity:0;transform:translateY(24px)}
.wy-is-active .wy-rv{opacity:1;transform:none;transition:opacity .42s var(--ease),transform .42s var(--ease)}
.wy-is-active .wy-rv.wy-d1{transition-delay:.12s}.wy-is-active .wy-rv.wy-d2{transition-delay:.24s}.wy-is-active .wy-rv.wy-d3{transition-delay:.36s}.wy-is-active .wy-rv.wy-d4{transition-delay:1.6s}.wy-is-active .wy-rv.wy-d5{transition-delay:1.72s}.wy-is-active .wy-rv.wy-d6{transition-delay:1.84s}
.wy-bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.wy-bgvid-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,27,39,.15),rgba(18,27,39,.7))}
.wy-ui.wy-over{background:none;place-items:center end;padding-right:6%}
.wy-funnel{width:420px;position:relative}
.wy-funnel h4{font-size:15px;font-weight:600;margin-bottom:14px}
.wy-f-row{display:grid;grid-template-columns:120px 1fr 34px;gap:12px;align-items:center;font-size:15px;margin-top:10px}
.wy-f-row b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.wy-f-bar{height:14px;border-radius:99px;background:rgba(28,42,59,.1);overflow:hidden}
.wy-f-bar i{display:block;height:100%;border-radius:99px;background:#1C2A3B;width:0}
.wy-f-bar.wy-gold i{background:#F0A13A}
.wy-is-active .wy-f-bar i{width:var(--w);transition:width 1.1s var(--ease)}
.wy-find{width:min(640px,86%);display:grid;gap:14px}
.wy-chips{display:flex;flex-wrap:wrap;gap:8px}
.wy-chip{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35);transition:background .3s var(--ease),color .3s var(--ease)}
.wy-is-active .wy-chip.wy-pick{background:#F0A13A;color:#1C2A3B}
.wy-is-active .wy-chip.wy-p1{transition-delay:.4s}.wy-is-active .wy-chip.wy-p2{transition-delay:.9s}.wy-is-active .wy-chip.wy-p3{transition-delay:1.4s}
.wy-person{display:flex;gap:14px;align-items:center}
.wy-person .wy-mono{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#F0A13A;color:#1C2A3B;font-weight:700;font-size:18px;flex:none}
.wy-person b{display:block;font-size:16px;font-weight:600}.wy-person span{font-size:13.5px;color:#4F5F70}
.wy-agency{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px}
.wy-agency b{font-weight:600}
.wy-agency .wy-sc{display:flex;gap:6px}
.wy-agency .wy-sc span{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(28,42,59,.08);white-space:nowrap}
.wy-fair{width:min(560px,84%);display:grid;gap:12px}
.wy-fair .wy-ui-card p{font-size:15px;margin-top:8px}
.wy-tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wy-tag{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(240,161,58,.18);color:#7A4A0C}
.wy-tag.wy-ok{background:rgba(27,74,62,.12);color:#1B4A3E}
.wy-reply{margin-left:28px;font-size:14px;background:rgba(255,255,255,.88)}
.wy-reply b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
.wy-stamp{justify-self:end;font-size:13px;font-weight:600;color:#fff;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* ---- Phone ---- */
@media (max-width:640px){
  .wy-why{--gut:16px;margin-top:0;padding:56px 16px 64px}
  .wy-why-head{margin-bottom:24px}
  .wy-why-track{height:230vh}
  .wy-cl-stage{aspect-ratio:9/13;max-height:calc(100svh - var(--hdr) - 24px);border-radius:28px}
  .wy-cl-tabs{top:auto;bottom:12px;left:0;right:0;padding:0 16px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px calc(100% - 24px),transparent)}
  .wy-cl-tab{min-height:44px;padding:0 16px;font-size:14px}
  .wy-cl-tabs.wy-platter{left:12px;right:12px;max-width:none;padding:4px;-webkit-mask-image:none;mask-image:none}
  .wy-platter .wy-cl-tab{min-height:40px;padding:0 14px}
  .wy-platter .wy-cl-thumb{top:4px;bottom:4px}
  .wy-cl-tab .wy-lg svg{width:18px;height:18px}
  .wy-cl-cap{left:12px;right:12px;width:auto;bottom:68px;padding:18px 20px;border-radius:22px;font-size:14px}
  /* split runs top/bottom; the office rises under the glass with no gap */
  .wy-mirror .wy-m-left img,.wy-mirror .wy-m-left video{object-position:24% 30%}
  .wy-m-right{clip-path:inset(var(--x) 0 0 0)}
  .wy-mirror .wy-m-right img,.wy-mirror .wy-m-right video{top:var(--x);height:calc(100% - var(--x));object-position:70% 20%}
  .wy-m-glass{left:0;right:0;width:auto;top:var(--x);bottom:auto;height:8%;transform:translateY(-50%);border:0;border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.18)}
  .wy-m-glass .wy-refr{display:none}
  .wy-m-left>img,.wy-m-left>video,.wy-m-right>img,.wy-m-right>video{transform:none}
  .wy-m-glass::before{background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%)}
  .wy-m-btn{min-height:46px;padding:0 18px;font-size:17px}
  .wy-m-btn.wy-niche{left:auto;right:16px;bottom:auto;top:calc(50% - 64px)}
  .wy-m-btn.wy-rec{right:16px;bottom:72px}
  .wy-m-call{top:16px;right:auto;left:16px}
  .wy-ui{place-items:center;padding:24px 0 170px}
  .wy-ui-row{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;width:calc(100% - 32px)}
  .wy-score{min-width:0;width:calc(50% - 5px);padding:12px 14px}.wy-score strong{font-size:32px}
  .wy-bubble{width:calc(50% - 5px);font-size:13px;padding:12px 14px}
  .wy-ui.wy-over{place-items:center;padding:24px 0 170px}
  .wy-funnel{width:auto;margin:0 16px;justify-self:stretch}
  .wy-f-row{grid-template-columns:100px 1fr 30px;font-size:13.5px}
  .wy-agency{grid-template-columns:auto 1fr;padding:12px 14px}.wy-agency .wy-sc{grid-column:1/-1}
  .wy-reply{margin-left:12px}
}
@media (prefers-reduced-motion:reduce){
  .wy-why-track{height:auto}
  .wy-why-sticky{position:static}
  .wy-mirror{--x:50%}
  #cl-p1{--o1:1;--t1:1;--o2:1;--t2:1}
  .wy-rv,.wy-cl-cap{opacity:1;transform:none;transition:none}
  .wy-f-bar i{width:var(--w)}
  .wy-chip.wy-pick{background:#F0A13A;color:#1C2A3B}
}

@media (max-width:640px){
  .wy-cl-stage{aspect-ratio:9/15}
  .wy-ui,.wy-ui.wy-over{padding:20px 0 160px}
  .wy-chip{padding:7px 11px;font-size:13px}
  .wy-find{gap:12px}
  .wy-ui-card{padding:14px 16px}
  .wy-person .wy-mono{width:44px;height:44px;font-size:16px}
  .wy-person b{font-size:15px}.wy-person span{font-size:13px}
  .wy-agency{padding:10px 12px;gap:10px}
  .wy-agency .wy-mono{width:40px;height:40px;font-size:15px}
  .wy-agency b{font-size:15px}
  .wy-agency.wy-d6{display:none} /* third agency card: no room on a phone */
  .wy-fair .wy-ui-card p{font-size:14px}
  .wy-reply{font-size:13.5px}
  .wy-tag{font-size:12px}
}
/* Critique fixes 1.0 (2026-10-20): "Example" tag on every mock card, score and review (the explainer shows UI, not data) */
.wy-ex{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(28,42,59,.08);color:#4F5F70;font-size:11.5px;font-weight:600;line-height:1.5;letter-spacing:0;vertical-align:2px;white-space:nowrap}
.wy-bubble .wy-ex{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.wy-score small .wy-ex{margin-left:6px}
@media (max-width:640px){.wy-ex{margin-left:6px;padding:1px 6px;font-size:10.5px}}
/* Critique fixes 1.0 item 3 (2026-10-20): the empty dark block under the photo on phones. Elementor's frontend.min.css
   sets `.elementor img{height:auto}`, which tied on specificity with `.wy-mirror img{height:100%}` and won on load order,
   so each mirror still kept its natural 16:9 height (about 200px on a 358x597 phone stage) and the rest of the half stayed
   dark until the videos went live. On desktop the stage is 16:9 too, so it never showed there. */
.wy-why .wy-mirror .wy-m-still{height:100%}
@media (max-width:640px){.wy-why .wy-mirror .wy-m-right .wy-m-still{height:calc(100% - var(--x))}}