/* ---------------- platform dashboard ---------------- */
/* ===== NEXTYN IQ DASHBOARD =====
   Dark instrument on the light band section. Colours are the Atlas file's own
   dark-theme tokens, so this reads as the same brand rather than a bolt-on.
   Laid out at native size: no transform, nothing shrunk, everything legible. */
/* The frame must keep overflow:hidden for its rounded inner panels, so the
   callouts cannot live inside it or they get clipped. They sit in the stage
   instead, and these gutters are the room they overhang into. */
.iqd-stage{position:relative;padding:58px 74px 78px}
.iqd{
  --bg:#ffffff; --panel:#fafbfc; --panel-2:#f2f4f6;
  --ln:rgba(0,0,0,.09); --ln-2:rgba(0,0,0,.14);
  --w1:#0a0a0a; --w2:rgba(0,0,0,.62); --w3:rgba(0,0,0,.42);
  --cr:#c8102e; --amber:#cf7420; --amber-t:#8a4a0c; --green:#14663f; --cold:#2e4aa4;
  position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);
  background:var(--bg);border:1px solid var(--ln-2);border-radius:14px;overflow:hidden;
  color:var(--w1);font-family:var(--ui);letter-spacing:-.003em;
  box-shadow:0 0 0 1px rgba(16,20,28,.055),0 0 28px -4px rgba(16,20,28,.13),0 12px 26px -8px rgba(16,20,28,.18),0 34px 56px -26px rgba(16,20,28,.26);
  opacity:0;transform:translateY(26px) scale(.99);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.iqd.in{opacity:1;transform:none}
.iqd *{box-sizing:border-box}

/* icon rail */
.iqd-rail{border-right:1px solid var(--ln);background:#f5f6f8;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:9px}
.iqd-logo{width:26px;height:26px;border-radius:7px;background:var(--ember-ramp);display:grid;place-items:center;margin-bottom:8px;flex:none}
.iqd-logo:after{content:"";width:9px;height:9px;border-radius:2px;background:#fff}
.iqd-ico{width:30px;height:30px;border-radius:8px;border:1px solid transparent;display:grid;place-items:center;color:var(--w3);flex:none}
.iqd-ico.on{background:rgba(0,0,0,.055);border-color:var(--ln-2);color:var(--w1)}
.iqd-ico svg{width:15px;height:15px}

/* top bar + tabs */
.iqd-top{display:flex;align-items:center;gap:22px;padding:0 20px;height:50px;border-bottom:1px solid var(--ln);background:var(--panel)}
.iqd-tab{font-size:13px;color:var(--w3);position:relative;height:50px;display:flex;align-items:center}
.iqd-tab.on{color:var(--w1);font-weight:450}
.iqd-tab.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--ember-ramp)}
.iqd-avs{margin-left:auto;display:flex}
.iqd-av{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:600;
  color:#fff;border:1.5px solid #fff;margin-left:-7px;flex:none}
.iqd-av:first-child{margin-left:0}

.iqd-hd{display:flex;align-items:center;gap:12px;padding:16px 20px 0}
.iqd-hd h4{font-size:19px;font-weight:500;letter-spacing:-.015em}
.iqd-liv{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--green);border:1px solid rgba(20,102,63,.3);background:rgba(20,102,63,.07);border-radius:20px;padding:3px 9px}
.iqd-liv i{width:5px;height:5px;border-radius:50%;background:var(--green);animation:iqd-pulse 2.1s var(--ease) infinite}
@keyframes iqd-pulse{0%{box-shadow:0 0 0 0 rgba(20,102,63,.45)}70%{box-shadow:0 0 0 6px rgba(20,102,63,0)}100%{box-shadow:0 0 0 0 rgba(20,102,63,0)}}
.iqd-upd{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--w3)}

.iqd-sub{display:flex;align-items:center;gap:20px;padding:0 20px;margin-top:13px;border-bottom:1px solid var(--ln)}
.iqd-st{font-size:12.5px;color:var(--w3);padding-bottom:10px;position:relative}
.iqd-st.on{color:var(--w1)}
.iqd-st.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--w1)}

/* body */
.iqd-body{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:0}
.iqd-main{padding:18px 20px 20px;min-width:0}
.iqd-side{border-left:1px solid var(--ln);background:#fafbfc;padding:18px 18px 20px}

.iqd-thesis{border:1px solid var(--ln);border-radius:10px;background:var(--panel);padding:15px 17px 16px}
.iqd-tl{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--w3)}
.iqd-tl b{color:var(--amber-t);font-weight:400}
.iqd-tl .r{margin-left:auto;text-transform:none;letter-spacing:.04em}
.iqd-tt{font-size:15px;line-height:1.58;color:rgba(0,0,0,.80);margin:11px 0 15px;font-weight:300}
.iqd-tt em{font-style:normal;color:#000;font-weight:400}
.iqd-cf{display:flex;align-items:flex-end;gap:14px}
.iqd-cf .lab{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--w3);flex:none;padding-bottom:5px}
.iqd-cf .num{margin-left:auto;font-family:var(--display);font-size:34px;line-height:.85;letter-spacing:-.02em;flex:none}
.iqd-cf .num s{text-decoration:none;font-size:15px;color:var(--w3)}
.iqd-track{flex:1;height:6px;border-radius:4px;background:rgba(0,0,0,.08);overflow:hidden;margin-bottom:6px}
.iqd-track i{display:block;height:100%;border-radius:4px;background:var(--ember-ramp);width:0;transition:width 1.5s var(--ease)}

.iqd-ch{display:flex;align-items:baseline;gap:10px;margin:19px 0 9px}
.iqd-ch b{font-size:13px;font-weight:500}
.iqd-ch span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--w3)}

.iqd-claim{display:flex;align-items:center;gap:13px;padding:11px 14px;border:1px solid var(--ln);border-left-width:3px;
  border-radius:8px;background:var(--panel);margin-bottom:7px;
  opacity:0;transform:translateY(9px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.iqd-claim.on{opacity:1;transform:none}
.iqd-claim.fresh{animation:iqd-flash 2s var(--ease)}
@keyframes iqd-flash{0%{background:rgba(207,116,32,.13)}100%{background:var(--panel)}}
.iqd-claim.cons{border-left-color:var(--green)}
.iqd-claim.contra{border-left-color:var(--amber)}
.iqd-claim.uniq{border-left-color:var(--cold)}
/* 10px floor on anything that has to be read; avatar initials stay smaller
   because they are marks, not reading text */
.iqd-bdg{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px;flex:none;white-space:nowrap}
.cons .iqd-bdg{color:var(--green);background:rgba(20,102,63,.09)}
.contra .iqd-bdg{color:var(--amber-t);background:rgba(207,116,32,.13)}
.uniq .iqd-bdg{color:var(--cold);background:rgba(46,74,164,.09)}
.iqd-claim p{font-size:13.5px;line-height:1.45;color:rgba(0,0,0,.78);font-weight:300;min-width:0}
.iqd-exp{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--w3);flex:none}

/* right rail */
.iqd-sl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--w3);margin-bottom:11px}
.iqd-gap{border:1px dashed rgba(200,16,46,.42);border-radius:8px;background:rgba(200,16,46,.05);padding:11px 13px;margin-bottom:8px;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.iqd-gap.on{opacity:1;transform:none}
.iqd-gap b{display:block;font-size:12.5px;font-weight:450}
.iqd-gap span{display:block;font-size:11.5px;color:var(--w2);margin-top:4px;font-weight:300;line-height:1.4}
.iqd-mtx{margin-top:22px}
.iqd-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.iqd-cell{aspect-ratio:1;border-radius:3px;background:rgba(0,0,0,.06);opacity:0;transform:scale(.6);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.iqd-cell.on{opacity:1;transform:none}
.iqd-cell.a{background:rgba(20,102,63,.55)}
.iqd-cell.b{background:rgba(207,116,32,.5)}
.iqd-cell.c{background:rgba(46,74,164,.4)}
.iqd-key{display:flex;gap:14px;margin-top:11px;flex-wrap:wrap}
.iqd-key span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--w3)}
.iqd-key i{width:8px;height:8px;border-radius:2px;display:block}

/* floating callouts */
.iqd-float{position:absolute;z-index:20;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:12px;
  padding:12px 15px;max-width:266px;
  box-shadow:0 0 0 1px rgba(16,20,28,.055),0 0 28px -4px rgba(16,20,28,.13),0 12px 26px -8px rgba(16,20,28,.18),0 34px 56px -26px rgba(16,20,28,.26);
  opacity:0;transform:translateY(14px) scale(.95);
  transition:opacity .6s var(--ease),transform .6s cubic-bezier(.34,1.4,.64,1)}
.iqd-float.on{opacity:1;transform:none}
.iqd-float b{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:#0a0a0a}
.iqd-float b:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber-t);flex:none}
.iqd-float p{font-size:12px;color:rgba(0,0,0,.6);margin-top:5px;font-weight:300;line-height:1.45}
/* Positioned to overhang the frame's edges while landing on its lowest
   density zones: the rail top, the matrix grid, and the area under the last
   claim. Verified against the text elements, not just the panel boxes. */
.iqd-float{max-width:236px}
.iqd-f1{left:0;top:-18px}
.iqd-f2{right:0;top:63%}
.iqd-f3{left:40px;bottom:-40px;display:flex;align-items:center;gap:12px;max-width:none}
.iqd-f3 .dot{width:34px;height:34px;border-radius:10px;background:var(--ember-ramp);display:grid;place-items:center;flex:none}
.iqd-f3 .dot i{width:11px;height:11px;border-radius:50%;background:#fff;animation:iqd-breathe 1.8s var(--ease) infinite alternate}
@keyframes iqd-breathe{to{transform:scale(.6)}}
.iqd-f3 b:before{display:none}
.iqd-f3 p{font-family:var(--mono);font-size:11px;color:var(--amber-t);margin-top:3px;white-space:nowrap}
.iqd-f3 b{white-space:nowrap}
.iqd-stage.in .iqd-f1{animation:iqd-drift 5.2s ease-in-out 2.2s infinite alternate}
.iqd-stage.in .iqd-f2{animation:iqd-drift 4.6s ease-in-out 2.5s infinite alternate}
.iqd-stage.in .iqd-f3{animation:iqd-drift 5.6s ease-in-out 2.8s infinite alternate}
@keyframes iqd-drift{from{transform:translateY(0)}to{transform:translateY(-6px)}}

@media(max-width:1080px){
  .iqd-body{grid-template-columns:minmax(0,1fr)}
  .iqd-side{border-left:0;border-top:1px solid var(--ln)}
  .iqd-stage{padding:24px 0 30px}
  .iqd-f1,.iqd-f2{position:static;max-width:none;margin:10px 0 0}
  .iqd-f3{position:static;margin-top:10px}
  .iqd-stage.in .iqd-f1,.iqd-stage.in .iqd-f2,.iqd-stage.in .iqd-f3{animation:none}
}
@media(max-width:700px){ .iqd{grid-template-columns:1fr} .iqd-rail{display:none} }
html.iqd-on #platform .at-conv{display:none}
html.iqd-on #platform .at-wrap{display:flex;flex-direction:column}
html.iqd-on #platform .at-head{order:1}
html.iqd-on #platform .iqd-stage{order:2}
html.iqd-on #platform .at-split{order:3}
html:not(.iqd-on) #platform .iqd-stage{display:none}

/* ---------------------------------------------------------------------------
   Sourcing graphic — expert carousel
   Replaces .nx-src. Same hairline / mono-label / ember-accent language as the
   rest of the page; the message cards become banners attached to one person.
--------------------------------------------------------------------------- */
.xp{position:relative;width:100%;padding:8px 0;z-index:0;isolation:isolate}

/* the wave field, kept from the old graphic, at +40% and with the pins removed */
.xp-field{position:absolute;inset:-8% -6%;width:112%;height:116%;pointer-events:none;
  background:url("/delivered/2ecb30222aace72d.svg") center/cover no-repeat;
  opacity:0;transition:opacity 1.6s var(--ease);
  animation:xp-drift 26s ease-in-out infinite;
  /* falls away over the rail so the labels underneath sit on clean ground */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,.22) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,.22) 92%,transparent 100%)}
.xp.in .xp-field{opacity:1}
@keyframes xp-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-1.2%,1%,0) scale(1.035)}
}
/* the band colour, feathered back in behind the figures so the masked bottom
   edge doesn't dissolve into the field. Deliberately weak, so the +40% reads */
.xp-veil{position:absolute;inset:-8% -6%;width:112%;height:116%;pointer-events:none;opacity:.72;
  background:radial-gradient(44% 36% at 50% 64%,var(--slate) 0%,var(--slate) 34%,transparent 76%)}

.xp-stage{position:relative;aspect-ratio:100/83.3;z-index:2}

/* --- the three figures ---------------------------------------------------
   All three mattes are pre-built onto one 652x900 frame: same body height,
   bottoms aligned, and each head centred on the same anchor. That is what lets
   one person replace another in the front slot without the head jumping.
------------------------------------------------------------------------- */
.xp-fig{position:absolute;left:50%;bottom:0;height:96%;width:auto;aspect-ratio:652/900;
  transform-origin:50% 100%;transform:translateX(-50%);
  transition:transform .92s var(--ease),opacity .92s var(--ease),filter .92s var(--ease);
  will-change:transform,opacity,filter}
.xp-fig img{width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,rgba(0,0,0,.42) 93%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 78%,rgba(0,0,0,.42) 93%,transparent 100%)}

.xp-fig.is-center{transform:translateX(-50%) scale(1);opacity:1;filter:none;z-index:3}
/* The two behind sit far enough out to read as separate people, close enough in
   that they still tuck behind the one in front rather than floating loose.
   On a light ground they recede by washing out toward the band colour, not by
   going dark: grayscale, contrast dropped, then blended back. */
.xp-fig.is-left{transform:translateX(-100%) translateY(-3%) scale(.72);opacity:.34;
  filter:grayscale(1) contrast(.62) brightness(1.14) blur(1.6px);z-index:1}
.xp-fig.is-right{transform:translateX(0%) translateY(-3%) scale(.72);opacity:.34;
  filter:grayscale(1) contrast(.62) brightness(1.14) blur(1.6px);z-index:1}
.xp-fig.nt{transition:none}
.xp.in .xp-fig.is-center{animation:xp-breathe 8.8s ease-in-out 1.3s infinite}
@keyframes xp-breathe{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* soft ground under whoever is in front, so they stand on something */
.xp-glow{position:absolute;left:50%;bottom:-1%;width:54%;height:15%;transform:translateX(-50%);
  z-index:2;pointer-events:none;filter:blur(16px);opacity:0;transition:opacity 1.1s var(--ease);
  background:radial-gradient(ellipse at 50% 62%,rgba(16,22,38,.20),rgba(16,22,38,.07) 46%,transparent 72%)}
.xp.in .xp-glow{opacity:1}

/* --- the banners -------------------------------------------------------- */
.xp-b{position:absolute;z-index:6;background:var(--void);border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;
  box-shadow:0 0 0 1px rgba(16,20,28,.04),0 10px 24px -8px rgba(16,20,28,.16),
             0 28px 48px -22px rgba(16,20,28,.24);
  opacity:0;transform:translateY(15px) scale(.975);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  will-change:opacity,transform}
.xp-b.on{opacity:1;transform:none}
.xp-b:after{content:"";position:absolute;top:-3.5px;width:6px;height:6px;border-radius:50%;
  background:var(--warm);opacity:0;transition:opacity .5s var(--ease) .18s}
.xp-b.on:after{opacity:1}
/* widths and offsets are deliberately unequal, and each one stops short of the
   face of whoever is in front */
.xp-b1{left:-7%;top:5%;width:42%}
.xp-b1:after{right:16px}
.xp-b2{right:-8%;top:39%;width:50%}
.xp-b2:after{left:16px}
.xp-b3{left:1%;bottom:8%;width:57%}
.xp-b3:after{right:16px}

.xp-k{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-family:var(--mono);font-size:8.5px;line-height:1;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);opacity:.55}
.xp-k b{font-weight:400;color:var(--warm);opacity:.95}
.xp-k s{width:12px;height:1px;background:var(--line-2);text-decoration:none;flex:none}
.xp-t{margin:0;font-size:12.5px;font-weight:350;line-height:1.42;color:var(--txt);
  letter-spacing:-.005em}
.xp-t b{font-weight:500;color:var(--warm)}

/* --- the rail ----------------------------------------------------------- */
.xp-rail{position:relative;z-index:4;display:flex;margin-top:22px;
  border-top:1px solid var(--line)}
/* crimson, not muted ink: these sit straight on the wave field with no card
   behind them, and grey-on-dots loses the label */
.xp-tick{flex:1;position:relative;text-align:left;background:none;border:0;cursor:pointer;
  padding:11px 0 0;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);opacity:.62;
  transition:opacity .5s var(--ease)}
.xp-tick:hover{opacity:.85}
.xp-tick.on{opacity:1;font-weight:500}
.xp-tick i{position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--warm)}
.xp-tick.on i{animation:xp-fill var(--dwell) linear forwards}
@keyframes xp-fill{from{width:0}to{width:100%}}

.xp-cap{position:relative;z-index:4;margin-top:12px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);opacity:.6}

@media(max-width:1000px){
  .xp-stage{aspect-ratio:100/95.2;max-width:520px;margin:0 auto}
  .xp-b1{left:-2%;width:56%}
  .xp-b2{right:-2%;width:56%}
  .xp-b3{left:0;width:62%}
}
@media(max-width:640px){
  .xp-fig{height:90%}
  .xp-fig.is-left{transform:translateX(-92%) translateY(-3%) scale(.7)}
  .xp-fig.is-right{transform:translateX(-8%) translateY(-3%) scale(.7)}
  .xp-b{padding:9px 11px;border-radius:9px}
  .xp-b1,.xp-b2,.xp-b3{width:70%}
  .xp-b1{left:-4%;top:2%}
  .xp-b2{right:-4%;top:36%}
  .xp-b3{left:-2%;bottom:4%}
  .xp-t{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .xp-field,.xp-fig,.xp-tick i{animation:none!important}
  .xp-fig,.xp-b,.xp-field,.xp-glow{transition:none}
  .xp-b{opacity:1;transform:none}
  .xp-b:after{opacity:1}
}/* ================== THE CLEARANCE PASS ==================
   The graphic is the moment a transcript is cleared: a real
   passage gets redacted in front of you, and the rules that
   did it float out of the page as annotations. */
/* left gutter holds the portrait, right gutter holds the floating notes,
   so the notes annotate the document edge instead of covering the text */
/* padding-top (NOT margin-top on the panel) creates the vertical offset.
   A margin on .cl-doc collapses out through this container and moves the
   whole block instead. Absolutely-positioned children resolve against the
   padding box, so the portrait still pins to the true top at top:0. */
.cl{position:relative;padding:64px 104px 0 132px}
@media(max-width:1040px){.cl{padding:0}}

/* the human — a narrow standing portrait the document overlaps */
.cl-photo{position:absolute;left:0;top:-26px;bottom:90px;width:262px;border-radius:16px;
  overflow:hidden;background:var(--slate);z-index:1;
  box-shadow:0 2px 4px rgba(16,20,28,.05),0 24px 46px -26px rgba(16,20,28,.30)}
.cl-photo img{width:100%;height:100%;object-fit:cover;object-position:56% 32%;display:block}
.cl-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;line-height:1.5}
.cl-photo figcaption b{display:block;font-family:var(--ui);font-size:12px;font-weight:500;
  letter-spacing:-.01em;text-transform:none;margin-bottom:2px}
@media(max-width:1040px){
  .cl-photo{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:190px;margin-bottom:18px}
  .cl-photo img{object-position:52% 30%}
}

/* the transcript itself */
/* GLASS: translucent + heavily blurred so the portrait reads through
   where the document overlaps it. The strong blur is what keeps the
   transcript type legible at this low an opacity. */
.cl-doc{position:relative;z-index:2;border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(16,20,28,.07),
             0 2px 4px rgba(16,20,28,.04),
             0 26px 50px -28px rgba(16,20,28,.30)}
.cl-doc-h{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#00000073}
.cl-doc-h .r{margin-left:auto;color:var(--warm);display:inline-flex;align-items:center;gap:6px}
.cl-doc-h .r i{width:5px;height:5px;border-radius:50%;background:var(--warm);display:block}
/* generous right margin: the annotations live here, so transcript
   text never runs underneath a floating note */
.cl-body{padding:17px 62px 15px 18px;position:relative}
.cl-scan{position:absolute;left:0;right:0;height:44%;pointer-events:none;opacity:0;z-index:4;
  background:linear-gradient(180deg,transparent,rgba(200,16,46,.10) 50%,transparent)}
.cl-ln{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline;padding:5px 0}
.cl-ln .t{font-family:var(--mono);font-size:8.5px;color:#00000059;letter-spacing:.02em}
.cl-ln .s{font-size:13px;font-weight:300;line-height:1.55;color:#000000cc}
.cl-ln .s b{font-weight:400;color:#000}
/* the redaction — a crimson bar wipes across the restricted words */
.cl-red{position:relative;display:inline-block;border-radius:2px;padding:0 3px;margin:0 -3px}
.cl-red span{position:relative;z-index:1}
/* the bar is driven by --x (0 → 1) so it wipes left to right */
.cl-red:after{content:"";position:absolute;inset:0;background:var(--warm);border-radius:2px;
  transform:scaleX(var(--x,0));transform-origin:left;z-index:2}
.cl-red span{transition:opacity .18s linear}
.cl-red.done span{opacity:0}
.cl-foot{display:flex;align-items:center;gap:14px;padding:11px 62px 11px 16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:#00000073;flex-wrap:wrap}
.cl-foot b{font-size:12.5px;font-weight:400;color:var(--txt);letter-spacing:.02em}
.cl-foot .ok{margin-left:auto;color:var(--ok);display:inline-flex;align-items:center;gap:7px}
.cl-foot .ok i{width:14px;height:14px;border-radius:50%;background:var(--ok);display:inline-flex;
  align-items:center;justify-content:center}
.cl-foot .ok svg{width:8px;height:8px;color:#fff}

/* the floating rule annotations — they sit OUTSIDE the document edge */
.cl-note{position:absolute;z-index:6;border-radius:10px;padding:10px 12px;width:186px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 1px rgba(16,20,28,.07),0 0 22px -6px rgba(16,20,28,.12),
             0 12px 26px -10px rgba(16,20,28,.20),0 30px 50px -28px rgba(16,20,28,.26)}
.cl-note .id{font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--warm);display:block;margin-bottom:4px}
.cl-note p{font-size:11.5px;font-weight:300;line-height:1.4;color:#000000b3}
.cl-note--a{right:-52px;top:20%}
.cl-note--b{right:-52px;top:55%}
.cl-note--c{right:-52px;top:88%;display:flex;align-items:center;gap:10px;width:172px}
.cl-note--c b{font-family:var(--display);font-size:24px;letter-spacing:-.02em;line-height:1}
.cl-note--c span{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#00000073;line-height:1.4}
@media(max-width:1040px){
  .cl-note{position:relative;right:auto;top:auto;width:auto;margin-top:9px}
  .cl-note--a,.cl-note--b,.cl-note--c{right:auto;top:auto}
}#services .bx{--ember:var(--ember-ramp)}/* ================= SOFT BENTO =================
   12-col grid (Vercel's span technique) rendered in the
   existing Atlas hairline language: 1px gaps that read as
   rules, no radius, no drop shadows. A broadsheet modular
   grid rather than rounded SaaS cards. */
.bx{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bx-c{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px 22px 22px;display:flex;flex-direction:column;min-width:0;
  box-shadow:0 1px 2px rgba(16,20,28,.03),0 10px 26px -18px rgba(16,20,28,.16);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.bx-c:hover{box-shadow:0 1px 2px rgba(16,20,28,.04),0 16px 34px -18px rgba(16,20,28,.22)}
/* Alternating rhythm — no two rows share a proportion, and no two
   cells in a row are the same width. Each span is chosen for what the
   vignette needs: the chart and the candidate list get the wide cells. */
.bx-c--a{grid-column:span 8}   /* 01 expert calls      — candidate list */
.bx-c--b{grid-column:span 4}   /* 02 AI-moderated      — live panel     */
.bx-c--c{grid-column:span 4}   /* 03 transcripts       — search + lines */
.bx-c--d{grid-column:span 8}   /* 04 opinion surveys   — wide chart     */
.bx-c--e{grid-column:span 5}   /* 05 custom recruitment — funnel        */
.bx-c--f{grid-column:span 7}   /* 06 advisors          — timeline       */
@media(max-width:1000px){
  .bx-c--a,.bx-c--b,.bx-c--d{grid-column:span 12}
  .bx-c--c,.bx-c--e,.bx-c--f{grid-column:span 6}
}
@media(max-width:640px){ .bx-c{grid-column:span 12 !important} }

.bx-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:#00000073;margin-bottom:18px}
.bx-t{font-family:var(--display);font-size:26px;line-height:1.14;letter-spacing:-.02em;margin-bottom:9px}
.bx-c--c .bx-t{font-size:22px}
.bx-d{font-size:14px;font-weight:300;line-height:1.6;color:#000000b3;max-width:42ch}

/* the vignette sits at the bottom of each cell */
.bx-v{margin-top:auto;padding-top:22px}

/* ---------- vignette 1 · expert calls ---------- */
.v-cand{border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}
.v-scan{position:absolute;left:0;right:0;height:34%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(200,16,46,.07) 45%,transparent);z-index:2}
.v-cand-h{display:flex;gap:9px;align-items:baseline;padding:8px 11px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#00000073}
.v-cand-h .r{margin-left:auto;color:var(--warm)}
.v-row{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:10px;align-items:center;padding:8px 11px;border-bottom:1px solid var(--line)}
.v-row:last-child{border-bottom:0}
.v-row .s{font-size:11.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-row .s i{display:block;font-style:normal;font-size:10px;font-weight:300;color:#00000073;margin-top:1px}
.v-row .id{font-family:var(--mono);font-size:9px;color:#00000099}
.v-tick{width:15px;height:15px;border-radius:50%;background:var(--warm);display:flex;align-items:center;justify-content:center}
.v-tick svg{width:9px;height:9px;color:#fff}

/* ---------- vignette 2 · AI-moderated ---------- */
.v-live{border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.v-live-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#00000073;margin-bottom:10px}
.v-live-h i{width:5px;height:5px;border-radius:50%;background:var(--warm);display:block}
.v-wave{display:flex;align-items:flex-end;gap:2.5px;height:26px;margin-bottom:10px}
.v-wave i{flex:1;background:var(--ink-2);border-radius:1px;display:block;height:20%}
.v-quote{font-size:11.5px;font-weight:300;line-height:1.45;color:#000000b3}
.v-follow{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--mono);font-size:8px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--warm);border:1px solid rgba(200,16,46,.35);border-radius:100px;padding:3px 9px}

/* ---------- vignette 3 · transcripts ---------- */
.v-tr{border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.v-search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:100px;padding:5px 10px;margin-bottom:10px}
.v-search svg{width:10px;height:10px;color:#00000073;flex:none}
.v-search span{font-family:var(--mono);font-size:9px;color:#00000099}
.v-line{height:5px;background:var(--ink-2);border-radius:2px;margin-bottom:6px}
.v-line.hit{background:rgba(200,16,46,.22)}
.v-line.w1{width:100%} .v-line.w2{width:82%} .v-line.w3{width:64%} .v-line.w4{width:91%}

/* ---------- vignette 4 · opinion surveys ---------- */
.v-chart{border:1px solid var(--line);border-radius:10px;padding:12px 14px 10px}
.v-chart-h{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:#00000073;margin-bottom:12px}
.v-chart-h .r{margin-left:auto;color:var(--warm)}
/* taller so the bars actually fill the cell */
.v-bars{display:flex;align-items:flex-end;gap:10px;height:132px}
.v-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.v-bar em{font-family:var(--mono);font-size:9px;font-style:normal;color:#00000099}
.v-bar i{width:100%;background:#111;border-radius:2px 2px 0 0;display:block;height:0;min-height:2px}
.v-bar i.hot{background:var(--ember)}
.v-bar span{font-family:var(--mono);font-size:8px;color:#00000073;white-space:nowrap}
.v-axis{font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#00000059;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);text-align:center}

/* ---------- vignette 5 · custom recruitment ---------- */
.v-fun{display:flex;align-items:center;gap:9px}
.v-step{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;padding:9px 4px}
.v-step b{display:block;font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:-.01em}
.v-step span{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:#00000073;margin-top:3px}
.v-step--end{border-color:rgba(200,16,46,.4)}
.v-step--end b{color:var(--warm)}
.v-arr{color:#00000059;font-size:11px;flex:none}

/* ---------- vignette 6 · advisors (wide) ----------
   The timeline STRETCHES to the full height of the copy column.
   Without this the cells sat at 73px against a 238px column and
   left ~165px of dead space underneath. */
.bx-c--f .bx-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:44px;align-items:center}
@media(max-width:1000px){.bx-c--f .bx-body{grid-template-columns:1fr;gap:24px}}
.bx-c--f .bx-v{margin-top:0;padding-top:0;height:100%}

/* 4 STACKED ROWS, not 4 columns. As columns each cell was ~60px of
   content in a 238px box, so every cell had a void in the middle.
   As rows they divide the height evenly and fill it completely. */
.v-tl{display:grid;grid-template-rows:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;height:100%}
.v-stage{background:#fff;padding:11px 14px;display:grid;
  grid-template-columns:26px 84px minmax(0,1fr);gap:14px;align-items:center;min-width:0;position:relative}
.v-stage-n{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#00000059}
.v-stage b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm);white-space:nowrap}
.v-stage .d{font-size:12px;font-weight:300;color:#000000b3;line-height:1.4}
/* the rail runs along the bottom edge of each row and fills left to right */
.v-rail{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:transparent;overflow:hidden}
.v-stage:last-child .v-rail{bottom:0}
.v-rail i{display:block;height:100%;width:0;background:var(--ember)}
@media(max-width:560px){
  .v-stage{grid-template-columns:22px minmax(0,1fr);gap:10px;padding:10px 12px}
  .v-stage b{grid-column:2}
  .v-stage .d{grid-column:2}
}