/* SmartSites — "What we do" · unified panel, embedded in the live site.
   The sector sidebar and the live tool sit inside ONE bordered panel, so
   the columns read as a single product UI (equal height — no empty void
   under a short list). The calculator/quiz toggle sits clean at the top of
   the main pane; the redundant tool header is gone. Accent via --ac. */

.wlx{width:100%;}
.wlx-panel{display:grid;grid-template-columns:minmax(220px,.82fr) 1.18fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:stretch;
  max-width:none;background:transparent;border:none;border-radius:0;
  box-shadow:none;overflow:visible;}

/* ── sidebar ── grid makes it the full height of the tool column ── */
/* the rail is ONE recessed inset field — sectors, tools and the
   footnote read as a single contained control surface. Grid stretch
   makes it the full height of the live tool beside it. */
.wlx-side{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:1.05rem 1rem;box-shadow:inset 0 1px 2px rgba(12,19,34,.04);
  display:flex;flex-direction:column;}
.wlx-group + .wlx-group{margin-top:1.4rem;}
.wlx-side__h{display:flex;align-items:center;gap:.55rem;font-family:var(--font-title);font-weight:600;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:.1rem .3rem .7rem;}
.wlx-side__h i{flex:0 0 auto;width:1.25rem;height:1.25rem;border-radius:6px;display:grid;place-items:center;
  font-style:normal;font-size:.7rem;letter-spacing:0;color:var(--ac,var(--cobalt));
  background:color-mix(in srgb,var(--ac,var(--cobalt)) 12%,#fff);}

/* every row — sector AND tool — shares one icon-tile anatomy + one
   active treatment, so the whole rail is one consistent set of choices */
.wlx-list{display:flex;flex-direction:column;gap:.18rem;}
.wlx-item,.wlx-type{position:relative;display:flex;align-items:center;gap:.7rem;text-align:left;width:100%;
  padding:.5rem .55rem;border:none;border-radius:10px;background:transparent;color:var(--ink-2);
  transition:.16s var(--ease);}
.wlx-item__ic,.wlx-type__ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:#fff;color:var(--ink-3);box-shadow:0 1px 2px rgba(12,19,34,.07);transition:.16s var(--ease);}
.wlx-item__ic svg,.wlx-type__ic svg{width:17px;height:17px;}
.wlx-item__t,.wlx-type__t{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.wlx-item__t b,.wlx-type__t b{font-family:var(--font-title);font-weight:500;font-size:.97rem;letter-spacing:-.01em;
  color:var(--ink);line-height:1.2;white-space:nowrap;}
.wlx-item__t small,.wlx-type__t small{font-size:.72rem;color:var(--ink-3);line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.wlx-item:hover,.wlx-type:hover{background:rgba(255,255,255,.55);}
.wlx-item.on,.wlx-type.on{background:#fff;box-shadow:0 5px 14px rgba(0,40,150,.11);}
.wlx-item.on .wlx-item__t b,.wlx-type.on .wlx-type__t b{color:var(--ac,var(--cobalt));font-weight:600;}
.wlx-item.on .wlx-item__ic,.wlx-type.on .wlx-type__ic{background:var(--ac,var(--cobalt));color:#fff;
  box-shadow:0 4px 11px color-mix(in srgb,var(--ac,var(--cobalt)) 30%,transparent);}

.wlx-side__foot{margin-top:auto;padding-top:1rem;display:flex;gap:.6rem;align-items:flex-start;
  border-top:1px solid var(--line);color:var(--ink-3);font-size:.82rem;line-height:1.5;}
.wlx-side__foot .spark{flex:0 0 auto;margin-top:.1rem;}

/* ② tool-type selector — two stacked option rows (same row anatomy) */
.wlx-types{display:flex;flex-direction:column;gap:.18rem;}

/* ── main pane ── a pure live preview of what the visitor gets ── */
.wlx-main{padding:0;display:flex;flex-direction:column;gap:1.1rem;background:transparent;}
.wlx-cap{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-title);font-size:.88rem;color:var(--ink-3);}
.wlx-cap__ey{font-weight:600;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac,var(--cobalt));background:color-mix(in srgb,var(--ac,var(--cobalt)) 11%,#fff);
  padding:.28rem .6rem;border-radius:100px;}

/* the tool itself is the blue box now (see INBOX-STYLE block at the foot of this file) */
.wlx-main .wd-cta{white-space:nowrap;}
.wlx-toolwrap{display:flex;flex-direction:column;gap:1.4rem;}

@media(max-width:820px){
  .wlx-panel{grid-template-columns:1fr;gap:1.6rem;}
  .wlx-side__foot{display:none;}
}

/* =========================================================
   ATTENTION TREATMENTS — make the lead magnet pop.
   The emphasis class lives on the <section>; each draws the eye
   a different way. All respect the accent (--ac) tweak.
   ========================================================= */

/* 1 · DARK PREVIEW · superseded. The tool itself is now the blue box on
   white (see INBOX-STYLE block at the foot of this file), so neutralise the
   old dark-stage pane and let only .wd-tool carry the cobalt. */
.emph-darkmain .wlx-main{background:transparent;}
.emph-darkmain .wlx-cap{color:var(--ink-3);}
.emph-darkmain .wlx-panel{box-shadow:none;}

/* 2 · FLOATING CARD — panel lifts off a soft tinted stage */
.emph-float .wlx{padding:clamp(1.5rem,3vw,2.8rem);border-radius:28px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ac,var(--cobalt)) 11%,#fff), #fff);
  border:1px solid var(--line);}
.emph-float .wlx-panel{box-shadow:0 46px 96px rgba(3,18,70,.22);}

/* 3 · ACCENT FRAME — bold accent border + coloured glow */
.emph-frame .wlx-panel{border:2px solid var(--ac,var(--cobalt));
  box-shadow:0 30px 72px color-mix(in srgb, var(--ac,var(--cobalt)) 30%, transparent);}

/* 4 · SPOTLIGHT — a glow pools behind the panel */
.emph-spotlight{background:radial-gradient(130% 80% at 50% -12%,
  color-mix(in srgb,var(--ac,var(--cobalt)) 13%,#fff), #fff 60%);}
.emph-spotlight .wlx{position:relative;}
.emph-spotlight .wlx::before{content:"";position:absolute;z-index:0;
  left:50%;top:46%;transform:translate(-50%,-50%);width:80%;height:90%;border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--ac,var(--cobalt)) 24%,transparent), transparent);
  filter:blur(46px);}
.emph-spotlight .wlx-panel{position:relative;z-index:1;box-shadow:0 42px 92px rgba(3,18,70,.2);}

/* 5 · COBALT SECTION — invert the whole band; white panel pops on top */
.emph-invert{background:linear-gradient(165deg, var(--ac,var(--cobalt)),
  color-mix(in srgb, var(--ac,var(--cobalt)) 52%, #000));}
.dC .emph-invert .head .ey{color:#fff;}
.dC .emph-invert .head h2{color:#fff;}
.dC .emph-invert .head h2 em{color:color-mix(in srgb, var(--ac,var(--cobalt)) 28%, #fff);}
.dC .emph-invert .head p{color:rgba(255,255,255,.82);}
.emph-invert .wlx-panel{border-color:transparent;box-shadow:0 44px 96px rgba(0,0,0,.34);}

/* =========================================================
   WHAT WE DO · INBOX-STYLE BLUE BOX
   The live calc/quiz tool itself becomes the cobalt product
   surface (white on blue), mirroring the .inbox section, and
   floats on the white body. Everything here is scoped to
   .wlx-main so the dormant white tool variants stay white.
   ========================================================= */

/* the box · exact Inbox tokens (see .inbox in rb-c.css) */
.wlx-main .wd-tool{background:linear-gradient(165deg,#0a3bb0,#06245f);
  border:none;border-radius:20px;max-width:none;color:#fff;
  box-shadow:0 36px 80px rgba(3,18,70,.34);}

/* chrome bar */
.wlx-main .wd-tool__chrome{background:rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.12);}
.wlx-main .wd-tool__chrome i{background:rgba(255,255,255,.3);}
.wlx-main .wd-tool__chrome span{color:rgba(255,255,255,.6);}

/* header row */
.wlx-main .wd-tag{color:#fff;background:rgba(255,255,255,.16);}
.wlx-main .wd-step{color:rgba(255,255,255,.6);}
.wlx-main .wd-q{color:#fff;}

/* calculator controls */
.wlx-main .wd-lab{color:rgba(255,255,255,.65);}
.wlx-main .wd-lab b{color:#fff;}
.wlx-main .wd-seg button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.85);}
.wlx-main .wd-seg button:hover{border-color:rgba(255,255,255,.45);}
.wlx-main .wd-seg button.on{background:#fff;border-color:#fff;color:var(--cobalt);}
.wlx-main .wd-range{color:#fff;background:rgba(255,255,255,.2);}

/* calculator result */
.wlx-main .wd-result{background:rgba(255,255,255,.1);}
.wlx-main .wd-result__l{color:#fff;}
.wlx-main .wd-num{color:#fff;}
.wlx-main .wd-num em{color:rgba(255,255,255,.6);}
.wlx-main .wd-conf span{color:rgba(255,255,255,.8);}
.wlx-main .wd-conf__bar{background:rgba(255,255,255,.2);}
.wlx-main .wd-conf__bar i{background:#fff;}

/* CTA · link · capture fields */
.wlx-main .wd-cta{background:#fff;color:var(--cobalt);}
.wlx-main .wd-cta:hover{background:rgba(255,255,255,.9);}
.wlx-main .wd-link{color:rgba(255,255,255,.7);}
.wlx-main .wd-link:hover{color:#fff;}
.wlx-main .wd-field span{color:rgba(255,255,255,.6);}
.wlx-main .wd-field input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;}
.wlx-main .wd-field input::placeholder{color:rgba(255,255,255,.5);}
.wlx-main .wd-field input:focus{border-color:#fff;}

/* quiz */
.wlx-main .wd-prog{background:rgba(255,255,255,.2);}
.wlx-main .wd-prog i{background:#fff;}
.wlx-main .wd-opt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff;}
.wlx-main .wd-opt span{color:rgba(255,255,255,.6);}
.wlx-main .wd-opt:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;}
.wlx-main .wd-opt:hover span{color:#fff;}

/* quiz result + score ring (ring SVG colours are inline · override here) */
.wlx-main .wd-qres__p{color:rgba(255,255,255,.8);}
.wlx-main .wd-qres__p b{color:#fff;}
.wlx-main .wd-score b{color:#fff;}
.wlx-main .wd-score span{color:rgba(255,255,255,.6);}
.wlx-main .wd-score svg text{fill:#fff;}
.wlx-main .wd-score svg circle:first-of-type{stroke:rgba(255,255,255,.22);}
.wlx-main .wd-score svg circle:last-of-type{stroke:#fff;}

/* done state (the green check keeps its colour) */
.wlx-main .wd-done h4{color:#fff;}
.wlx-main .wd-done p{color:rgba(255,255,255,.8);}

/* payoff footnote (base rule lives in wwd3.css) */
.wlx-main .wd-tool__foot{color:rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.14);}
.wlx-main .wd-tool__foot b{color:#fff;}

/* =========================================================
   WHAT WE DO · LANDING-HERO (intro state · branded glow)
   The tool opens as a punchy mini landing page (hook · sub ·
   start); Start reveals the live widget. A Spark glow + faint
   grid carry the eye. Scoped to .wlx-main so it stays cobalt.
   ========================================================= */
.wlx-main .wd-tool--hero{position:relative;}
.wd-hero{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:460px;padding:clamp(1.9rem,3.6vw,2.7rem);overflow:hidden;}
.wlx-main .wd-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 80% at 78% 12%, rgba(91,139,255,.55), rgba(91,139,255,0) 55%);}
.wlx-main .wd-hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 20%,#000,transparent);
          mask-image:radial-gradient(80% 70% at 70% 20%,#000,transparent);}
.wd-hero__spark{position:absolute;z-index:0;right:-26px;top:-26px;width:185px;height:185px;opacity:.16;}
.wd-hero__in{position:relative;z-index:1;display:flex;flex-direction:column;gap:1rem;}
.wd-hero__pill{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  font-family:var(--font-title);font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.16);padding:.34rem .7rem;border-radius:100px;}
.wd-hero__pill svg{width:13px;height:13px;flex:0 0 auto;opacity:.9;}
.wlx-main .wd-hero__hook{font-family:var(--font-title);font-weight:600;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(2rem,3.8vw,2.6rem);color:#fff;}
.wlx-main .wd-hero__sub{font-size:1rem;line-height:1.5;color:rgba(255,255,255,.8);max-width:42ch;}
.wlx-main .wd-hero__cta{width:auto;align-self:flex-start;}

/* =========================================================
   FIXED-SIZE PREVIEW BOX
   The cobalt box matches the selection rail's height and never
   resizes between states (hero · calc · quiz · result). Only the
   content inside changes; it scrolls within the box if it ever
   exceeds. The redundant "Live preview" caption is dropped so the
   box aligns exactly with the rail (the hero carries its own pill).
   ========================================================= */
.wlx-main .wlx-cap{display:none;}
.wlx-main{min-height:0;}
.wlx-main .wd-tool{position:relative;flex:1 1 auto;min-height:0;height:auto;overflow:hidden;}
.wlx-main .wd-tool > .wd-hero,
.wlx-main .wd-tool > .wd-tool__body{position:absolute;inset:0;overflow-y:auto;}
/* light spacing so every state fits the fixed box */
.wlx-main .wd-tool__body{padding:clamp(1.2rem,2.4vw,1.7rem);}
.wlx-main .wd-q{font-size:1.32rem;}
.wlx-main .wd-lab{margin:.85rem 0 .45rem;}
.wlx-main .wd-result{margin:.9rem 0;}
.wlx-main .wd-field{margin-bottom:.7rem;}

/* capture · the result sits blurred behind a lock (the unlock tease) */
.wlx-main .wd-tease{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:.85rem 1rem;margin:.1rem 0 1rem;}
.wlx-main .wd-tease__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.wlx-main .wd-tease__l{font-family:var(--font-title);font-weight:600;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.72);}
.wlx-main .wd-tease__v{font-family:var(--font-title);font-weight:700;font-size:1.7rem;letter-spacing:-.02em;
  color:#fff;filter:blur(8px);user-select:none;-webkit-user-select:none;}
.wlx-main .wd-tease__hint{display:flex;align-items:center;gap:.45rem;margin-top:.55rem;
  font-size:.76rem;line-height:1.4;color:rgba(255,255,255,.72);}
.wlx-main .wd-tease__hint svg{flex:0 0 auto;width:15px;height:15px;}

/* done · the unblurred reveal of the figure they just unlocked */
.wlx-main .wd-done__l{display:block;font-family:var(--font-title);font-weight:600;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.25rem;}
.wlx-main .wd-done__v{font-family:var(--font-title);font-weight:700;font-size:2.9rem;letter-spacing:-.03em;
  color:#fff;line-height:1;margin-bottom:.75rem;}
.wlx-main .wd-done__v em{font-style:normal;font-size:.3em;font-weight:600;color:rgba(255,255,255,.6);margin-left:.25rem;}
/* attractive result: centred, soft spark glow, input chips, inbox confirmation */
.wlx-main .wd-done{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:1.2rem .4rem;}
.wlx-main .wd-done::before{content:"";position:absolute;left:50%;top:16%;transform:translateX(-50%);
  width:74%;height:48%;background:radial-gradient(closest-side, rgba(91,139,255,.45), transparent);
  filter:blur(34px);z-index:0;pointer-events:none;}
.wlx-main .wd-done > *{position:relative;z-index:1;}
.wlx-main .wd-done__chk{box-shadow:0 0 0 6px rgba(34,197,94,.16);margin-bottom:.9rem;}
.wlx-main .wd-done__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:.15rem 0 1.1rem;}
.wlx-main .wd-done__tags span{font-family:var(--font-title);font-weight:500;font-size:.72rem;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:.32rem .62rem;border-radius:100px;}
.wlx-main .wd-done__inbox{display:inline-flex;align-items:center;gap:.6rem;text-align:left;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:.6rem .8rem;font-size:.82rem;color:rgba(255,255,255,.82);line-height:1.3;}
.wlx-main .wd-done__inbox b{color:#fff;font-weight:600;}
.wlx-main .wd-done__inbox-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.14);color:#fff;flex:0 0 auto;}
.wlx-main .wd-done__inbox-ic svg{width:16px;height:16px;}
/* quiz result: centre it and give it the same soft glow */
.wlx-main .wd-qres{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.wlx-main .wd-qres::before{content:"";position:absolute;left:50%;top:14%;transform:translateX(-50%);
  width:70%;height:46%;background:radial-gradient(closest-side, rgba(91,139,255,.42), transparent);
  filter:blur(34px);z-index:0;pointer-events:none;}
.wlx-main .wd-qres > *{position:relative;z-index:1;}
.wlx-main .wd-qres .wd-done__inbox{margin-top:.2rem;}

/* =========================================================
   FIRM PAYOFF · "new lead" toast
   Pops at the box corner the instant a visitor finishes, as a
   white CRM/inbox card over the cobalt box. Rendered in .wlx-main
   (outside the box's clip) so it can sit on the corner.
   ========================================================= */
.wlx-main{position:relative;}
.wd-toast{position:absolute;right:16px;top:16px;z-index:6;display:flex;align-items:center;gap:.65rem;
  background:#fff;border-radius:13px;padding:.7rem .85rem;max-width:290px;
  box-shadow:0 18px 44px rgba(3,18,70,.4);animation:wdToastIn .55s var(--ease) both;}
@keyframes wdToastIn{from{opacity:0;transform:translateY(-18px) scale(.96);}to{opacity:1;transform:none;}}
.wd-toast__av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--cobalt);color:#fff;
  display:grid;place-items:center;font-family:var(--font-title);font-weight:600;font-size:.82rem;}
.wd-toast__txt{display:flex;flex-direction:column;gap:.05rem;min-width:0;}
.wd-toast__top{display:flex;align-items:center;gap:.4rem;}
.wd-toast__top b{display:inline-flex;align-items:center;gap:.34rem;font-family:var(--font-title);font-weight:600;
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#16a34a;}
.wd-toast__top b::before{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a;
  box-shadow:0 0 0 3px rgba(34,197,94,.22);}
.wd-toast__top i{font-style:normal;font-size:.66rem;color:var(--ink-3);}
.wd-toast__name{font-family:var(--font-title);font-weight:600;font-size:.92rem;color:var(--ink);line-height:1.15;}
.wd-toast__meta{font-size:.74rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media(max-width:820px){
  .wd-toast{right:12px;top:12px;max-width:260px;}
}

@media(max-width:820px){
  /* stacked: no side-by-side to match, so let the box use natural height */
  .wlx-main .wd-tool{flex:none;height:auto;min-height:0;overflow:visible;}
  .wlx-main .wd-tool > .wd-hero,
  .wlx-main .wd-tool > .wd-tool__body{position:static;overflow:visible;}
  .wd-hero{min-height:420px;}
}