/* /recruiters only. Everything else comes from site.css. */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
[id]{scroll-margin-top:86px}
.rec-hero .wrap{align-items:start}
.rec-hero .copy{padding-top:20px}

/* the fee card */
.fee{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:20px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;box-shadow:0 0 0 1px rgba(255,212,0,.35),0 24px 50px -22px rgba(255,212,0,.55);animation:rise .9s cubic-bezier(.2,.9,.3,1) .35s both}
.fee::before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;background:radial-gradient(closest-side,rgba(255,212,0,.2),transparent 70%);pointer-events:none}
.fee>*{position:relative}
.fee h2{color:#fff;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;line-height:1.15}
.fee-in{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.fee label{font-size:14px;font-weight:600;color:#cfd6e6}
.fee .field{display:flex;align-items:center;gap:6px;background:#fff;border-radius:12px;padding:0 16px;min-height:58px;transition:box-shadow .15s}
.fee .field:focus-within{box-shadow:0 0 0 3px var(--bolt)}
.fee .field span{font-family:var(--h);font-weight:800;font-size:24px;color:var(--ink)}
.fee input{flex:1;min-width:0;width:100%;height:56px;border:0;outline:0;background:transparent;padding:0;font-family:var(--h);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.presets{display:flex;gap:8px}
.presets button{flex:1;min-height:44px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--b);font-weight:600;font-size:15px;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s,color .15s}
.presets button:hover{border-color:rgba(255,212,0,.6)}
.presets button[aria-pressed=true]{background:var(--bolt);border-color:var(--bolt);color:var(--ink)}
.fee :focus-visible{outline-color:var(--bolt)}
.fee .res{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:grid;gap:8px}
.fee .big{font-family:var(--h);font-weight:800;font-size:clamp(64px,7vw,84px);letter-spacing:-.04em;line-height:1;color:var(--bolt);font-variant-numeric:tabular-nums}
.fee .big small{font-size:.34em;letter-spacing:-.02em;color:#fff;font-weight:700}
.fee .big span{display:inline-block}
.fee .big .pop{animation:pop .3s cubic-bezier(.2,1.4,.3,1)}
.fee .say{font-size:16px;line-height:1.45;color:#e4e8f2}
.fee .honest{font-size:13.5px;line-height:1.5;color:#b9c2d8}

/* calmer than the homepage: nothing loops here */
.ic3 img{animation:none}
.agit .bridge span{animation:none}
.plan.dark .chip{animation:none}

/* contrast: the shared "faint" grey is too light for text people need to read */
.src,.samp .cap,footer .legal{color:var(--muted)}
.proof>.wrap>.cap{font-size:12.5px;color:var(--muted);margin-top:10px}
.samp h3{margin:36px 0 14px}
.compare .src{margin-top:14px}
.faq-h{margin-top:14px}
.faq-s{margin-top:14px}

/* promises and price */
.prom .grid{grid-template-columns:repeat(2,1fr)}
.price-strip{margin-top:20px;padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.price-strip .price{margin-top:6px}
.price-strip .per{margin-top:6px}
.ps-a{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:981px){.prom .grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.prom .grid{grid-template-columns:1fr}.ps-a,.ps-a .btn{width:100%}.fee{padding:22px}}
@media (prefers-reduced-motion:reduce){.fee{animation:none}.fee .big .pop{animation:none}}

/* email card */
.email .hd>div{display:grid;grid-template-columns:64px minmax(0,1fr)}
.email .hd b{width:auto}
.email .exm{font-size:12.5px;color:var(--muted);padding:12px 22px;border-top:1px solid var(--line);background:var(--soft)}

/* form: labels read as one line, placeholders stay light */
.form label{display:block}
.form label input,.form label textarea{display:block;margin-top:6px}
.form input,.form textarea{font-weight:400}

/* comfortable targets */
.logo{min-height:44px}
.ctab .x{width:44px;height:44px}

/* phones: drop the decorative glows, make the tables fit */
@media(max-width:900px){.rec-hero::after{display:none}.pain::before{display:none}}
@media(max-width:560px){
  .compare .cmp table{min-width:0}
  .compare .cmp th:nth-child(4),.compare .cmp td:nth-child(4){display:none}
  .compare .cmp th,.compare .cmp td{padding:12px;font-size:14px}
  .compare .cmp th:first-child,.compare .cmp td:first-child{padding-right:6px}
  .samp .cmp table{min-width:0;display:block}
  .samp thead{display:none}
  .samp tbody,.samp tr{display:block}
  .samp tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .samp tr:last-child{border-bottom:0}
  .samp td{display:inline;padding:0;border:0;font-size:14.5px;color:var(--text)}
  .samp td:first-child{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
  .samp td:nth-child(2)::after,.samp td:nth-child(3)::after{content:" · "}
  .samp td:last-child{display:block;margin-top:4px}
  .samp .ok::after{content:" at Companies House";font-weight:500}
}