/* ══════════════════════════════════════════════════════════════════════════
   LEAD MODAL — the free record check and the callback form
   ══════════════════════════════════════════════════════════════════════════
   Lifted out of template-homepage.php's inline <style> so pages other than the
   homepage can use the component. Nothing here changed in the move; the only
   edit was deleting it from there.

   WHAT THIS FILE DOES NOT OWN: .btn, .wk-jfield, .wk-formrow and .wk-jmicro are
   the theme's own controls and typography, defined in the design system. The
   modal borrows them rather than restating them, which is why it looks like the
   rest of the site — and it is also the thing to check first if the modal ever
   renders unstyled on a template that does not load them.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── lead modal ── */
.wk-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.wk-modal[hidden]{display:none}
.wk-modal__scrim{position:absolute;inset:0;background:rgba(16,26,74,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:wkfade .24s var(--ease-out)}
.wk-modal__dialog{position:relative;width:100%;max-width:940px;max-height:92vh;overflow:auto;background:var(--white);border-radius:var(--r-panel);box-shadow:0 40px 90px -30px rgba(16,26,74,.5);animation:wkpop .3s var(--ease-out)}
@keyframes wkfade{from{opacity:0}to{opacity:1}}
@keyframes wkpop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wk-modal__scrim,.wk-modal__dialog{animation:none}}
.wk-modal__x{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:rgba(255,255,255,.9);cursor:pointer;transition:background .2s var(--ease-ui),color .2s var(--ease-ui)}
.wk-modal__x:hover{background:var(--b-050);color:var(--b-700)}
.wk-modal__x svg{width:18px;height:18px}
.wk-modal__grid{display:grid;grid-template-columns:1.05fr .95fr}
.wk-modal__form{padding:clamp(26px,3.4vw,44px)}
.wk-modal__badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--b-700);background:var(--b-050);border:1px solid var(--b-100);border-radius:100px;padding:6px 13px}
.wk-modal__badge i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.wk-modal__form h2{font-size:clamp(23px,2.6vw,30px);line-height:1.2;color:var(--b-900);margin:16px 0 10px;letter-spacing:-.02em}
.wk-modal__lede{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 20px}
.wk-modal__form .wk-jfield{margin-bottom:12px}
.wk-modal__submit{width:100%;justify-content:center;margin-top:4px}
/* resize:both is the browser default, and in a fixed two-column dialog it lets
   the visitor drag the box out past the column and break the layout. Vertical
   only: growing it is useful, widening it is not. */
.wk-modal__form textarea{resize:vertical;line-height:1.5}
.wk-modal__err{font-size:13px;color:#C0392B;margin:0 0 10px}
/* ── the done state ───────────────────────────────────────────────────────
   Everything else in the LEFT column goes. Leaving the eyebrow, the heading
   "Find out if shares are still held in your name", the lede and "we never ask
   for payment" standing above the tick means the panel is still asking for
   something that has already been given — and the one line that matters has to
   compete with the pitch it just replaced.

   :not([data-wkm-done]) rather than four elements hidden by name. Nothing to
   enumerate, and a fifth element added to this column later cannot escape it.

   The right-hand panel is deliberately untouched: it is the evidence behind the
   claim and it reads the same before and after. Only the asking stops. */
.wk-modal__form.is-done{display:flex;align-items:center;justify-content:center}
/* The attribute here MUST match the markup, and for one deploy it did not: the
   rule said [data-done] while template-parts/lead-modal.php had renamed it to
   [data-wkm-done]. The confirmation was therefore hidden along with everything
   else and the left column went blank white — the submit had worked, the lead
   was stored, and the visitor saw nothing. A selector that silently matches
   nothing is the quietest kind of bug there is; the only reason this was caught
   is that the swap was screenshotted rather than assumed. */
.wk-modal__form.is-done > :not([data-wkm-done]){display:none}
.wk-modal__done{text-align:center;padding:14px 0 4px;width:100%}
/* The panel takes focus on success so a keyboard or screen-reader user is not
   dumped on <body> when the submit button disappears under them. It is not a
   control, though, and nobody ever tabs to it — so Chrome's ring around the
   whole confirmation is noise, and it was drawing a box around the tick and
   the message. Removed here and nowhere else: every real control in this
   dialog keeps its ring. */
.wk-modal__done:focus,.wk-modal__done:focus-visible{outline:none}
.wk-modal__done h3{font-size:19px;color:var(--b-900);margin-bottom:6px}
.wk-modal__done p{font-size:14.5px;color:var(--ink-2);max-width:34ch;margin-inline:auto}

/* The same mark as the guided check's done screen, at the size this column
   wants: 76/38 holds the 94/46 proportion the one on the device uses.

   A filled disc with a halo, not an outlined ring around an outlined tick. The
   old version was an icon sitting in a paragraph; this one is a stamp, which is
   what a confirmation is.

   Three one-shot animations, all gated on .is-done rather than running free —
   the panel is in the DOM from page load, so an ungated animation would play
   behind [hidden] and be over before anyone submitted anything:
     · the check DRAWS itself. A mark being made reads as something happening
       now; a mark already there reads as a picture.
     · a ring expands out of the disc once and fades — a stamp landing.
     · a soft static halo stays behind, so the mark keeps its weight after the
       motion has finished. */
.wk-modal__tick{position:relative;display:flex;align-items:center;justify-content:center;
  width:76px;height:76px;margin:0 auto 16px;border-radius:50%;background:var(--ok-soft);
  box-shadow:0 0 0 9px rgba(30,122,76,.07)}
.wk-modal__tick svg{width:38px;height:38px;color:var(--ok)}
.wk-modal__tick::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--ok);opacity:0}
.is-done .wk-modal__tick::after{animation:wkseal .95s var(--ease-out) forwards}
@keyframes wkseal{0%{transform:scale(.8);opacity:.85}100%{transform:scale(1.55);opacity:0}}
.wk-modal__tick svg path{stroke-dasharray:20;stroke-dashoffset:20}
.is-done .wk-modal__tick svg path{animation:wkdraw .6s var(--ease-out) .15s forwards}
@keyframes wkdraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .wk-modal__tick::after{display:none}
  .wk-modal__tick svg path{stroke-dashoffset:0;animation:none!important}
}
.wk-modal__proof{padding:clamp(26px,3.4vw,44px);background:linear-gradient(160deg,var(--b-050) 0%,var(--wash) 60%,var(--white) 100%);border-left:1px solid var(--line)}
/* ── the right column after a successful submit ──────────────────────────────
   Same swap the left column does, same rule shape. The proof content has made
   its case by now, and the space is better spent asking the two things that
   make the callback better prepared — asked here, AFTER the enquiry is safe, so
   a shrug costs the visitor nothing and costs us nothing either. */
.wk-modal__proof.is-done > :not([data-extra]){display:none}
.wk-modal__extra{display:flex;flex-direction:column;gap:12px}
.wk-modal__extralede{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:-6px 0 0}

.wk-tickset{border:0;padding:0;margin:0;min-width:0}
.wk-tickset legend{font-family:var(--f-m);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--b-700);padding:0;margin-bottom:7px}
/* TWO COLUMNS, not a wrapping row. Left to wrap, the six longer labels each took
   a line of their own and the dialog grew 166px taller on submit — the opposite
   of the thing that was just fixed. A fixed pair of columns lets the long labels
   wrap inside their own cell instead of pushing the next chip down, which is
   what keeps the panel inside the height the form had. */
.wk-tickset__opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* The input covers the chip and is invisible; the span IS the control. Keeping a
   real checkbox rather than a div with a click handler gives this its keyboard
   behaviour, its group semantics and its screen-reader announcement for free —
   and multi-select is the point, so a radio's "one of these" reading would have
   been wrong. */
.wk-tick{position:relative;display:block}
.wk-tick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wk-tick span{display:flex;align-items:flex-start;gap:7px;height:100%;padding:7px 9px;border-radius:9px;
  background:var(--white);border:1.5px solid var(--line-2);font-size:12px;font-weight:600;
  color:var(--ink-2);line-height:1.3;
  transition:background .18s var(--ease-ui),border-color .18s var(--ease-ui),color .18s var(--ease-ui)}
.wk-tick span::before{content:"";width:14px;height:14px;flex:none;margin-top:.5px;border-radius:4px;
  border:1.5px solid var(--line-2);background:var(--white) no-repeat center/10px;transition:inherit}
.wk-tick input:hover + span{border-color:var(--b-300)}
/* Chosen: the whole chip fills, so a glance across the group reads as a set
   rather than as twelve things to inspect one at a time. */
.wk-tick input:checked + span{background:var(--b-600);border-color:var(--b-600);color:#fff}
.wk-tick input:checked + span::before{border-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3l3.2 3.2 6.4-6.9' fill='none' stroke='%233A56E8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.wk-tick input:focus-visible + span{outline:2px solid var(--b-700);outline-offset:2px}

.wk-modal__extra .wk-modal__submit{margin-top:2px;padding-top:11px;padding-bottom:11px}
.wk-modal__extradone{display:flex;align-items:flex-start;gap:9px;margin:0;
  font-size:14px;font-weight:600;line-height:1.45;color:var(--ok)}
.wk-modal__extradone svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--ok)}

@media(prefers-reduced-motion:reduce){ .wk-tick span{transition:none} }
.wk-modal__prooflabel{font-family:var(--f-m);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--b-700);margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wk-modal__sampleflag{font-family:var(--f-d);font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-3);background:var(--white);border:1px solid var(--line);border-radius:100px;padding:3px 8px}
.wk-modal__sources{display:flex;flex-direction:column;gap:9px}
.wk-modal__src{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-2)}
.wk-modal__src i{width:8px;height:8px;border-radius:50%;background:var(--b-500);flex:none}
.wk-modal__tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.wk-modal__table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:320px}
.wk-modal__table th{text-align:left;font-family:var(--f-m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700}
.wk-modal__table td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.wk-modal__table tr:last-child td{border-bottom:0}
.wk-modal__table .st{display:inline-flex;font-size:10.5px;font-weight:700;border-radius:100px;padding:3px 9px;white-space:nowrap}
.st--iepf{color:var(--b-700);background:var(--b-050)}
.st--rta{color:#1E7A4C;background:#E6F5EC}
.wk-modal__note{font-size:11.5px;color:var(--ink-3);margin:10px 0 0;line-height:1.5}
@media(max-width:1024px){
  .wk-modal__grid{grid-template-columns:1fr}
  .wk-modal__proof{border-left:0;border-top:1px solid var(--line)}
}

/* ── the eyebrow, and the callback panel's numbered steps ───────────────────
   These live further down the homepage's own stylesheet, away from the block
   above, and were nearly left behind. Without them the callback form's steps
   are an unstyled <ol> and the eyebrow is plain text — exactly the failure a
   component that has only ever run on one page invites.

   COPIED, not moved: the homepage keeps its copies. Identical declarations, and
   this file loads first, so the homepage renders from its own and every other
   page renders from this one. Two copies of a rule is a real cost — if you
   change one, change both — and it is accepted here only because the
   alternative was slicing rules out of a stylesheet that also feeds a dozen
   unrelated selectors. */
.wk-modal__kind{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-d);font-size:13px;
  font-weight:700;letter-spacing:.01em;color:var(--b-700);background:var(--b-050);border:1px solid var(--b-100);
  border-radius:100px;padding:7px 14px}
.wk-modal__kind svg{width:14px;height:14px;flex:none}

.wk-modal__steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wk-modal__steps li{counter-increment:s;position:relative;padding:12px 0 12px 44px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.wk-modal__steps li + li{border-top:1px solid var(--line)}
.wk-modal__steps li::before{
  content:"0" counter(s);position:absolute;left:0;top:12px;width:30px;height:24px;
  display:flex;align-items:center;justify-content:center;border-radius:7px;
  background:var(--white);border:1px solid var(--b-100);color:var(--b-700);
  font-family:var(--f-m);font-size:11px;font-weight:700}
.wk-modal__steps b{display:block;color:var(--b-900);font-weight:600;font-size:14.5px;margin-bottom:2px}

/* ── type the component owns, rather than borrows ───────────────────────────
   The homepage sets these through a shared type-scale rule that lists a dozen
   unrelated selectors, and that rule is inline on the homepage only. Restated
   here from the same tokens, so the modal reads identically on a service page
   or a post. Equal specificity and the stylesheet loads first, so on the
   homepage its own rule still wins and nothing there moves by a pixel. */
.wk-modal__form h2{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.015em}
.wk-modal__lede{font-size:var(--fs-body);line-height:1.65}
.wk-modal__table{font-size:var(--fs-label)}
.wk-modal__table .st,.wk-modal__note{font-size:var(--fs-label)}