/* CFL homepage workbench treatment.
   Promoted from the visual experiment to index.html; visual-lab.html remains
   as a compatibility preview. The stylesheet changes presentation, not copy. */

.visual-lab{
  --lab-ink:#102038;
  --lab-muted:#56657a;
  --lab-canvas:#f3f6fb;
  --lab-panel:#ffffff;
  --lab-blue:#2f6fed;
  --lab-shadow:0 18px 55px rgba(20,38,68,.12);
  background:
    radial-gradient(circle at 8% 22%,rgba(47,111,237,.08),transparent 28rem),
    var(--lab-canvas);
  color:var(--lab-ink);
}

.visual-lab .site-header{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(16,32,56,.08);
  backdrop-filter:blur(18px);
}

.visual-lab main{overflow:hidden}

/* Outcome-led hero followed by tools grouped around the cleaner's goals. */
.visual-lab .desk-first{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(38px,6vw,68px) var(--gutter) clamp(48px,7vw,78px);
  background:
    radial-gradient(circle at 93% 5%,rgba(111,168,255,.28),transparent 23rem),
    radial-gradient(circle at 4% 90%,rgba(250,186,85,.12),transparent 28rem),
    #0f1f38;
}
.visual-lab .desk-first::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -8rem -13rem auto;
  width:30rem;
  height:30rem;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:0 0 0 4rem rgba(255,255,255,.025),0 0 0 8rem rgba(255,255,255,.018);
}
.visual-lab .desk-first .desk-kicker,
.visual-lab .desk-first h1,
.visual-lab .desk-first .desk-lead,
.visual-lab .desk-first .desk-tools-intro,
.visual-lab .desk-first .desk-first-foot{grid-column:1}
.visual-lab .desk-first h1{
  max-width:22ch;
  font-size:clamp(2.35rem,6vw,4.15rem);
  line-height:1.03;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.visual-lab .desk-first .desk-lead{
  max-width:52ch;
  font-size:clamp(1.02rem,2vw,1.2rem);
  line-height:1.6;
}
.visual-lab .desk-tools-intro{margin-top:clamp(42px,7vw,72px);padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.visual-lab .desk-tools-eyebrow{margin:0;color:#fff;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.65rem,4vw,2.3rem);font-weight:750}
.visual-lab .desk-first-foot{max-width:68ch;margin:24px 0 0;color:rgba(255,255,255,.7)}

.visual-lab .desk-situations{
  grid-column:1;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-self:center;
  margin-top:22px;
}
.visual-lab .situation-group{min-width:0}
.visual-lab .situation-group-head{margin-bottom:12px}
.visual-lab .situation-group-head h2{margin:0 0 4px;color:#fff;font-size:1.15rem}
.visual-lab .situation-group-head p{margin:0;color:rgba(255,255,255,.66);font-size:.88rem}
.visual-lab .situation-group-grid{display:grid;grid-template-columns:1fr;gap:12px}
.visual-lab .situation{
  --tool:#7db2ff;
  --tool-soft:rgba(125,178,255,.14);
  position:relative;
  grid-template-columns:56px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:14px;
  min-height:174px;
  padding:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.045));
  box-shadow:0 14px 34px rgba(2,10,25,.18);
}
.visual-lab .situation::after{
  content:"";
  position:absolute;
  right:-46px;
  bottom:-58px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,var(--tool-soft),transparent 68%);
}
.visual-lab .situation-group-clients .situation:first-child{--tool:#b795ff;--tool-soft:rgba(183,149,255,.18)}
.visual-lab .situation-group-earn .situation:last-child{--tool:#5fd0a5;--tool-soft:rgba(95,208,165,.17)}
.visual-lab .situation-group-clients .situation:last-child{--tool:#78a8e8;--tool-soft:rgba(120,168,232,.17)}
.visual-lab .situation-group-protect .situation:first-child{--tool:#f5b75c;--tool-soft:rgba(245,183,92,.18)}
.visual-lab .situation-group-protect .situation:nth-child(2){--tool:#ff897f;--tool-soft:rgba(255,137,127,.17)}
.visual-lab .situation:hover,
.visual-lab .situation:focus-visible{
  border-color:var(--tool);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  transform:translateY(-4px);
  box-shadow:0 20px 45px rgba(2,10,25,.28);
}
.visual-lab .situation-mark{
  width:56px;
  height:56px;
  border:1px solid color-mix(in srgb,var(--tool) 42%,transparent);
  border-radius:18px;
  background:var(--tool-soft);
}
.visual-lab .desk-glyph{width:29px;height:29px;stroke:var(--tool);stroke-width:1.7}
.visual-lab .situation-body{grid-column:1 / -1;grid-row:2;gap:7px;align-self:end}
.visual-lab .situation-title{font-size:clamp(1.15rem,2vw,1.35rem);max-width:18ch}
.visual-lab .situation-cue{font-size:.88rem;line-height:1.45;max-width:30ch}
.visual-lab .situation-outcome{color:var(--tool);font-size:.69rem}
.visual-lab .situation-go{
  z-index:1;
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.visual-lab .situation-arrow{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--tool);
  color:#102038;
}
.visual-lab .situation-min{color:rgba(255,255,255,.62)}

/* Below the hero, use broad visual bands instead of document sections. */
.visual-lab .desk-band{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(48px,8vw,90px) var(--gutter);
  border:0;
}
.visual-lab .desk-band h2{font-size:clamp(1.85rem,5vw,3.1rem);letter-spacing:-.035em;max-width:18ch}
.visual-lab .desk-band .band-lead{font-size:1.02rem;line-height:1.65}
.visual-lab #desk-continue:not([hidden]){padding-top:32px;padding-bottom:0}
.visual-lab .continue-box{border-radius:20px;box-shadow:var(--lab-shadow)}
.visual-lab .home-community{max-width:none;margin:0;padding-left:max(var(--gutter),calc((100vw - 1180px)/2 + var(--gutter)));padding-right:max(var(--gutter),calc((100vw - 1180px)/2 + var(--gutter)));background:#fff}
.visual-lab .home-community h2{max-width:20ch}
.visual-lab .home-community .band-lead{max-width:66ch}

.visual-lab .desk-how{
  position:relative;
  margin-top:34px;
  gap:16px;
  counter-reset:steps;
}
.visual-lab .how-item{
  position:relative;
  min-height:210px;
  padding:82px 24px 24px;
  overflow:hidden;
  border:1px solid rgba(16,32,56,.09);
  border-radius:22px;
  background:var(--lab-panel);
  box-shadow:0 10px 35px rgba(20,38,68,.07);
}
.visual-lab .how-item::after{
  content:"";
  position:absolute;
  top:25px;
  left:26px;
  width:34px;
  height:34px;
  border-radius:12px;
  background:linear-gradient(145deg,#dce8ff,#f5f8ff);
  box-shadow:22px 11px 0 -8px #8fb3f5,42px -3px 0 -12px #f4b95f;
  transform:rotate(-8deg);
}
.visual-lab .how-item:nth-child(2)::after{border-radius:50%;box-shadow:22px 0 0 -10px #65c9a7,10px 22px 0 -9px #b59af2}
.visual-lab .how-item:nth-child(3)::after{border-radius:8px 8px 16px 16px;box-shadow:22px 5px 0 -10px #f4b95f,37px 17px 0 -12px #ff8b82}
.visual-lab .how-n{
  position:absolute;
  top:20px;
  right:22px;
  font-family:"Fraunces",Georgia,serif;
  font-size:3.5rem;
  line-height:1;
  color:#d9e4f4;
}
.visual-lab .how-item h3{font-size:1.25rem}
.visual-lab .how-item p:last-child{line-height:1.6}

.visual-lab .desk-band[aria-labelledby="desk-evidence-title"]{
  max-width:none;
  margin:0;
  padding-left:max(var(--gutter),calc((100vw - 1180px)/2 + var(--gutter)));
  padding-right:max(var(--gutter),calc((100vw - 1180px)/2 + var(--gutter)));
  background:#e9eef7;
}
.visual-lab .article-card-grid{grid-template-columns:1fr!important;gap:14px}
.visual-lab .article-card-grid .card{
  position:relative;
  min-height:0;
  padding:20px 56px 20px 22px;
  border:0;
  border-left:5px solid var(--lab-blue);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(20,38,68,.06);
}
.visual-lab .article-card-grid .card::after{
  content:"↗";
  position:absolute;
  top:22px;
  right:22px;
  color:var(--lab-blue);
  font-size:1.25rem;
}
.visual-lab .article-card-grid .card:nth-child(2){border-left-color:#7653c9}
.visual-lab .article-card-grid .card:nth-child(3){border-left-color:#198667}
.visual-lab .article-card-grid .card:nth-child(4){border-left-color:#d18017}
.visual-lab .article-card-grid .card:nth-child(5){border-left-color:#cc554c}
.visual-lab .article-card-grid .card:nth-child(6){border-left-color:#0f7490}
.visual-lab .article-card-grid .card:nth-child(7){border-left-color:#8a6d1f}

@media(min-width:760px){
  .visual-lab .desk-how{grid-template-columns:repeat(3,minmax(0,1fr))}
  .visual-lab .article-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(min-width:1040px){
  .visual-lab .desk-first{
    grid-template-columns:minmax(0,1fr);
    max-width:none;
  }
  .visual-lab .desk-first .desk-kicker,
  .visual-lab .desk-first h1,
  .visual-lab .desk-first .desk-lead,
  .visual-lab .desk-first .desk-tools-intro,
  .visual-lab .desk-first .desk-first-foot{grid-column:1}
  .visual-lab .desk-situations{grid-column:1;grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:560px){
  .visual-lab .desk-first{padding-top:28px}
  .visual-lab .desk-situations{grid-template-columns:1fr}
  .visual-lab .situation-group-grid{grid-template-columns:1fr}
  .visual-lab .situation{min-height:152px;grid-template-columns:52px minmax(0,1fr) auto}
  .visual-lab .situation-mark{width:52px;height:52px}
  .visual-lab .situation-body{grid-column:1 / -1}
  .visual-lab .situation-go{grid-column:3}
  .visual-lab .desk-band{padding-top:48px;padding-bottom:48px}
}

@media(prefers-reduced-motion:reduce){
  .visual-lab .situation{transition:none}
}