/* ==========================================================================
   A · RUN THE PROJECT · the stage rail and the four redrawn screens
   Lifted from nextyn-navy-sections.html. Only the tokens that file declared on
   :root are re-declared here, scoped to the block, because the homepage's own
   :root does not carry them.
   ========================================================================== */
#platform-ops{
  --w2:rgba(0,0,0,.62); --w3:rgba(0,0,0,.42); --ln2:rgba(0,0,0,.14); --cr:#c8102e;
  --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);
  position:relative}

/* the stage rail */
.ss-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ss-st{position:relative;text-align:left;padding:17px 18px 18px 0;
  font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ss-st+.ss-st{border-left:1px solid var(--line);padding-left:20px}
.ss-st .day{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w3);transition:color .4s var(--ease)}
.ss-st.on .day{color:var(--cr)}
.ss-st .verb{display:block;margin-top:7px;font-size:clamp(19px,1.85vw,25px);font-weight:500;
  letter-spacing:-.03em;line-height:1.1;color:rgba(0,0,0,.32);transition:color .4s var(--ease)}
.ss-st.on .verb,.ss-st:hover .verb{color:#000}
.ss-st .pg{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ember-ramp)}
.ss-line{margin-top:24px;max-width:74ch;font-size:15.5px;font-weight:300;line-height:1.6;
  color:var(--w2);min-height:3.2em}

/* the product, redrawn rather than screenshotted */
.ss-frame{margin-top:30px;border:1px solid var(--ln2);border-radius:14px;overflow:hidden;
  background:#f4f5f7;box-shadow:var(--shadow);display:grid;height:591px;
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ss.in .ss-frame{opacity:1;transform:none}
.ss-pane{grid-area:1/1;visibility:hidden;overflow:hidden;position:relative}
.ss-pane.on{visibility:visible;animation:ss-in .5s var(--ease)}
@keyframes ss-in{from{opacity:0}to{opacity:1}}

/* ---- the callouts: a ring on the control, a leader back to a label parked in
   the screen's own empty space, and nothing sitting on top of the interface. */
.px-lead{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.px-lead line{stroke:rgba(200,16,46,.55);stroke-width:1;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset .8s var(--ease) .12s}
.px-lead line.show{stroke-dashoffset:0}
.px-ring{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#fff;border:2px solid var(--crimson);box-shadow:0 0 0 3px rgba(200,16,46,.13);
  z-index:6;pointer-events:none;opacity:0;transform:scale(.35);
  transition:opacity .45s var(--ease),transform .5s cubic-bezier(.34,1.5,.64,1)}
.px-ring.show{opacity:1;transform:none}
.px-lab{position:absolute;z-index:5;pointer-events:none;font-family:var(--ui);font-size:11.5px;
  font-weight:450;line-height:1.3;letter-spacing:-.005em;color:#0a0a0a;background:#fff;
  border:1px solid rgba(0,0,0,.09);border-radius:7px;padding:5px 10px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(16,20,28,.06),0 9px 20px -10px rgba(16,20,28,.4);
  opacity:0;transform:translateY(6px);
  transition:opacity .8s var(--ease) .5s,transform .8s var(--ease) .5s}
.px-lab.show{opacity:1;transform:none}

.px{--bg:#f4f5f7;--card:#ffffff;--bd:#e5e7eb;--bd2:#eef0f3;
    --t1:#111827;--t2:#4b5563;--t3:#9ca3af;
    --blue:#2563eb;--blue-bg:#dbeafe;
    --ok-bg:#f6ffed;--ok-bd:#b7eb8f;--ok-tx:#389e0d;
    --lime-bg:#fcffe6;--lime-bd:#eaff8f;--lime-tx:#7cb305;
    --red:#cf1322;--red-bg:#fff1f0;--red-bd:#ffa39e;
    --grad:linear-gradient(90deg,#22d3ee 0%,#2563eb 100%);
    height:100%;background:var(--bg);color:var(--t1);font-size:12px;line-height:1.45;
    font-weight:400;letter-spacing:0}
.px *{box-sizing:border-box}

/* app chrome */
.px-top{display:flex;align-items:center;gap:24px;height:42px;padding:0 16px;
  background:var(--card);border-bottom:1px solid var(--bd)}
.px-back{color:var(--t2);font-size:11.5px}
.px-tabs{display:flex;gap:22px;margin:0 auto}
.px-tab{font-size:12.5px;color:var(--t2);position:relative;height:42px;display:flex;
  align-items:center}
.px-tab.on{color:var(--t1);font-weight:500}
.px-tab.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--blue)}
.px-avs{display:flex}
.px-av{width:22px;height:22px;border-radius:50%;background:var(--blue-bg);color:#1d4ed8;
  display:grid;place-items:center;font-size:8.5px;font-weight:600;border:1.5px solid #fff;
  margin-left:-6px;flex:none}
.px-av:first-child{margin-left:0}

.px-hd{display:flex;align-items:center;gap:9px;padding:11px 16px 0}
.px-hd h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
.px-chip{font-size:10px;padding:1px 8px;border-radius:10px;border:1px solid;line-height:1.6}
.px-chip.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx)}
.px-chip.lime{background:var(--lime-bg);border-color:var(--lime-bd);color:var(--lime-tx)}
.px-dot{font-size:10.5px;color:var(--t2);display:inline-flex;align-items:center;gap:5px}
.px-dot:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
.px-dot.g:before{background:var(--ok-tx)}

.px-body{padding:11px 16px 0}
.px-card{background:var(--card);border:1px solid var(--bd);border-radius:8px}

/* stats strip */
.px-stats{display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);
  border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.px-stat{padding:9px 4px;text-align:center}
.px-stat+.px-stat{border-left:1px solid var(--bd2)}
.px-stat b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.px-stat span{display:block;font-size:9.5px;color:var(--t3);margin-top:2px}

.px-grid{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:10px;margin-top:10px}
.px-lb{font-size:12px;font-weight:600;padding:9px 12px 8px}
.px-brief p{font-size:11.5px;color:var(--t2);padding:5px 12px;line-height:1.5}
.px-brief p:last-child{padding-bottom:11px}

/* tables */
.px-tbl{width:100%;border-collapse:collapse}
.px-tbl th{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);
  font-weight:500;text-align:left;padding:7px 10px;border-bottom:1px solid var(--bd)}
.px-tbl td{font-size:11.5px;color:var(--t2);padding:8px 10px;border-bottom:1px solid var(--bd2)}
.px-tbl tr:last-child td{border-bottom:0}
.px-tbl .ref{color:var(--t3);font-size:10.5px}
.px-tbl .nm{color:var(--t1)}
.px-tbl .rate{color:var(--blue)}
.px-tbl .alt td{background:#fafbfc}

.px-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.px-drop .dz{font-size:10px;color:var(--t3);border:1px dashed var(--bd);border-radius:6px;
  margin:0 12px 11px;padding:11px;text-align:center}
.px-rail-lb{font-size:11.5px;font-weight:600;padding:9px 12px 0}
.px-tl{padding:6px 12px 11px}
.px-tl .d{font-size:11px;color:var(--t2)}
.px-tl .bar{height:3px;border-radius:2px;background:var(--bd);margin:7px 0 5px;overflow:hidden}
.px-tl .bar i{display:block;height:100%;background:var(--ok-tx);width:0;
  transition:width 1.5s var(--ease) .3s}
.ss.in .px-tl .bar i{width:100%}
.px-tl .r{font-size:10px;color:var(--t3);text-align:right}
.px-mem{display:flex;align-items:center;gap:8px;padding:7px 12px}
.px-mem .px-av{width:24px;height:24px;font-size:9px;border:0;margin:0}
.px-mem b{font-size:11.5px;font-weight:500;color:var(--t1)}
.px-mem span{font-size:10px;color:var(--t3);margin-left:auto}

/* the profile drawer */
.px-drawer{display:grid;grid-template-columns:300px minmax(0,1fr);height:100%}
.px-behind{background:var(--bg);position:relative;overflow:hidden}
.px-behind:after{content:"";position:absolute;inset:0;background:rgba(17,24,39,.45)}
.px-dr{background:var(--card);border-left:1px solid var(--bd);display:flex;flex-direction:column}
.px-dr-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bd2)}
.px-dr-h b{font-size:14px;font-weight:600}
.px-dr-h .x{color:var(--t3);font-size:13px}
.px-btns{margin-left:auto;display:flex;gap:6px}
.px-btn{font-size:10.5px;padding:3px 11px;border-radius:5px;border:1px solid}
.px-btn.y{color:var(--ok-tx);border-color:var(--ok-bd);background:var(--ok-bg)}
.px-btn.n{color:var(--red);border-color:var(--red-bd);background:var(--red-bg)}
.px-btn.i{color:var(--blue);border-color:#bfdbfe;background:#eff6ff}
.px-dr-t{font-size:12.5px;color:var(--blue);padding:12px 16px 0;font-weight:500}
.px-rows{padding:6px 16px 0}
.px-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--bd2)}
.px-row .k{font-size:11px;color:var(--t3)}
.px-row .v{margin-left:auto;font-size:11.5px;color:var(--t1)}
.px-tag{display:inline-block;font-size:10px;color:#1d4ed8;background:#eff6ff;
  border:1px solid #bfdbfe;border-radius:4px;padding:1px 7px;margin-top:7px}
.px-h5{font-size:12.5px;font-weight:600;padding:13px 16px 0}
.px-para{font-size:11px;color:var(--t2);line-height:1.62;padding:6px 16px 0}
.px-exp{display:flex;padding:8px 16px 0}
.px-exp b{font-size:11.5px;font-weight:500}
.px-exp span{font-size:10.5px;color:var(--t3);display:block;margin-top:2px}
.px-exp .when{margin-left:auto;font-size:10.5px;color:var(--t3)}
.px-fine{font-size:8px;color:#c7cbd2;line-height:1.5;padding:14px 16px 0}

/* project dashboard */
.px-titlerow{display:flex;align-items:center;padding:13px 16px 0}
.px-titlerow h4{font-size:16px;font-weight:600;letter-spacing:-.01em}
.px-add{margin-left:auto;font-size:11px;border:1px solid var(--bd);border-radius:6px;
  padding:5px 11px;background:var(--card);color:var(--t2)}
.px-search{margin:11px 16px 0;height:31px;border:1px solid var(--bd);border-radius:6px;
  background:var(--card);display:flex;align-items:center;padding:0 11px;
  font-size:11px;color:var(--t3);gap:8px}
.px-prog{width:132px}
.px-prog .bar{height:4px;border-radius:3px;background:var(--bd);overflow:hidden}
.px-prog .bar i{display:block;height:100%;background:var(--grad);width:0;
  transition:width 1.3s var(--ease) .25s}
.ss.in .px-prog .bar i{width:var(--w,0)}
.px-prog .c{display:flex;gap:11px;margin-top:5px;font-size:9px;color:var(--t3)}

/* calls */
.px-subtabs{display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--bd);
  background:var(--card)}
.px-subtab{font-size:11.5px;color:var(--t3);padding:11px 0;position:relative}
.px-subtab.on{color:var(--blue);font-weight:500}
.px-subtab.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--blue)}
.px-call{margin:10px 16px 0;padding:11px 13px}
.px-call h6{font-size:12.5px;font-weight:600;color:#1e3a5f;letter-spacing:-.005em}
.px-call .who{font-size:10.5px;color:var(--t3);margin-top:3px}
.px-ai{margin-top:8px;background:#f7f8fa;border-radius:6px;padding:8px 11px}
.px-ai .lb{font-size:10px;color:var(--blue);font-weight:500;display:inline-flex;align-items:center;gap:5px}
.px-ai p{font-size:10.5px;color:var(--t2);line-height:1.55;margin-top:5px;padding-left:1px}
.px-call .ft{display:flex;align-items:center;gap:13px;margin-top:9px;font-size:9.5px;
  color:var(--t3)}
.px-call .ft .id{background:#eff6ff;color:#1d4ed8;border-radius:3px;padding:1px 6px;font-size:9px}
.px-call .ft .r{margin-left:auto;display:flex;gap:9px;align-items:center}
.px-imp{font-size:9px;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:3px;padding:1px 6px;margin-left:7px}

@media(max-width:900px){
  .ss-rail{grid-template-columns:1fr;border-bottom:0}
  .ss-st{padding:14px 0;display:flex;align-items:baseline;gap:14px}
  .ss-st+.ss-st{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .ss-st .day{width:66px;flex:none}
  .ss-st .verb{margin-top:0;font-size:21px}
  .ss-st .pg{bottom:0}
  .ss-line{min-height:0}
  /* the redrawn screens hold their proportions rather than reflowing, so below
     this width they pan instead of shrinking into illegibility */
  .ss-frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ss-pane{width:900px}
  .px-lead,.px-ring,.px-lab{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ss-frame{opacity:1;transform:none;transition:none}
  .ss-pane.on{animation:none}
  .ss-st .pg{display:none}
  .px-tl .bar i,.px-prog .bar i{transition:none}
  .px-lead line,.px-ring,.px-lab{transition:none}
}

/* ==========================================================================
   B · THE NAVY BAND
   #platform was the light `--slate` band. It now carries the platform's own
   navy, and the new block sits inside the same section so the two read as one
   stretch of Nextyn rather than two sections that happen to share a colour.
   Nothing else moves: the layout, the copy, the ember emphasis and the two
   light product surfaces are untouched. Only the type is inverted, and the
   hairlines with it.
   ========================================================================== */
#platform{
  --iq-navy:#0A1D33;
  --iq-line:rgba(255,255,255,.13);
  --iq-line-2:rgba(255,255,255,.26);
  --iq-txt:#ffffff;
  --iq-body:rgba(255,255,255,.72);
  --iq-faint:rgba(255,255,255,.55);
  background:var(--iq-navy);
  border-top:1px solid var(--iq-line)}
#platform .at-h2,#platform .at-h3{color:var(--iq-txt)}
#platform .at-kicker{color:var(--iq-txt)}
#platform .at-kicker:before{background:var(--iq-txt)}
#platform .at-lede,#platform .at-body{color:var(--iq-body)}
#platform .at-body strong{color:var(--iq-txt)}
#platform .at-reg{border-top-color:var(--iq-line-2)}
#platform .at-reg-row{border-bottom-color:var(--iq-line)}
#platform .at-reg-row .n,#platform .at-reg-row .t{color:var(--iq-txt)}
#platform .at-reg-row .d{color:var(--iq-faint)}
/* the stage rail, on navy */
#platform .ss-rail{border-top-color:var(--iq-line);border-bottom-color:var(--iq-line)}
#platform .ss-st+.ss-st{border-left-color:var(--iq-line)}
#platform .ss-st .day{color:rgba(255,255,255,.45)}
#platform .ss-st .verb{color:rgba(255,255,255,.34)}
#platform .ss-st.on .verb,#platform .ss-st:hover .verb{color:var(--iq-txt)}
#platform .ss-line{color:var(--iq-body)}
#platform .ss-st.on .day{color:var(--warm-hot)}

/* placement inside the flex column the IQ patch already set up. The child
   combinator matters: `#platform .at-head` also matches the head belonging to
   the new block, and only the IQ head should take the divider. */
#platform-ops{order:-1;margin:0;padding-bottom:104px;
  border-bottom:1px solid rgba(255,255,255,.13)}
#platform-ops .at-head{max-width:820px;margin-bottom:34px}
#platform > .at-wrap > .at-head{padding-top:96px}
@media(max-width:900px){
  #platform-ops{padding-bottom:64px}
  #platform > .at-wrap > .at-head{padding-top:60px}
}

/* ==========================================================================
   C · THE FINAL CTA · copy left, capture right
   The section was a centred stack ending in two buttons that both went to "#".
   The ask is answered in place instead: one form, eight fields, and the
   qualifying data that scores the lead taken as part of the ask rather than
   chased afterwards. The two buttons go, so the block has a single action.
   ========================================================================== */
.at-final{text-align:left;padding:132px 0}
.at-final .at-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,528px);
  gap:80px;align-items:start}
.at-final-in{max-width:none}
.at-final h2{max-width:15ch;margin:24px 0 22px}
.at-final .at-lede{max-width:44ch;margin:0}
.at-final .at-cta{display:none}

/* what happens next: the same register as the numbered lists elsewhere on the
   page, so the left column has weight against a tall form */
.lf-steps{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line-2)}
.lf-steps li{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:19px 0;
  border-bottom:1px solid var(--line)}
.lf-steps .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--txt);
  padding-top:4px}
.lf-steps b{display:block;font-size:16px;font-weight:400;letter-spacing:-.014em;color:var(--txt)}
.lf-steps p{font-size:14px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.55);margin-top:4px}

/* ---- the form ---------------------------------------------------------- */
.lf{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:34px 34px 30px;position:relative;z-index:2;
  box-shadow:0 0 0 1px rgba(16,20,28,.03),0 18px 40px -22px rgba(16,20,28,.28)}
.lf-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm);display:block}
.lf-hd h3{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.028em;
  line-height:1.15;margin:14px 0 8px;color:var(--txt)}
.lf-hd p{font-size:14px;font-weight:300;line-height:1.55;color:rgba(0,0,0,.58)}

.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;margin-top:26px}
.lf-f{display:block;min-width:0}
.lf-f--wide{grid-column:1 / -1}
.lf-f > span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(0,0,0,.5);margin-bottom:7px}
.lf-f > span i{font-style:normal;color:rgba(0,0,0,.3);letter-spacing:.1em}
.lf-f input,.lf-f select,.lf-f textarea{
  width:100%;font-family:var(--ui);font-size:14.5px;font-weight:350;color:var(--txt);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;line-height:1.4;-webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.lf-f textarea{resize:vertical;min-height:78px}
.lf-f input::placeholder,.lf-f textarea::placeholder{color:rgba(0,0,0,.28)}
.lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{
  outline:none;border-color:var(--warm);box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.lf-f select{background-image:
  linear-gradient(45deg,transparent 50%,rgba(0,0,0,.45) 50%),
  linear-gradient(135deg,rgba(0,0,0,.45) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;cursor:pointer}
.lf-f.err input,.lf-f.err select,.lf-f.err textarea{border-color:var(--warm)}
.lf-msg{display:none;font-size:12px;font-weight:350;color:var(--warm);margin-top:6px}
.lf-f.err .lf-msg{display:block}

.lf-btn{width:100%;justify-content:center;margin-top:24px;padding:16px 26px;cursor:pointer}
.lf-fine{font-size:12px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.45);margin-top:16px}
.lf-fine a{border-bottom:1px solid rgba(0,0,0,.22)}
.lf-fine a:hover{border-bottom-color:var(--warm);color:var(--warm)}

/* the confirmation that replaces the fields on submit */
.lf-done{display:none;text-align:left;padding:22px 0 8px}
.lf.is-done .lf-grid,.lf.is-done .lf-btn,.lf.is-done .lf-fine,.lf.is-done .lf-hd p{display:none}
.lf.is-done .lf-done{display:block}
.lf-done .tick{width:38px;height:38px;border-radius:50%;background:var(--ember-ramp);
  display:grid;place-items:center;color:#fff;font-size:17px;line-height:1}
.lf-done h4{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.024em;
  margin:18px 0 10px;color:var(--txt)}
.lf-done p{font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.6)}
.lf-done .ref{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(0,0,0,.4);margin-top:18px;display:block}

@media(max-width:1000px){
  .at-final .at-wrap{grid-template-columns:1fr;gap:52px}
  .at-final h2{max-width:20ch}
  .at-final .at-lede{max-width:56ch}
}
@media(max-width:620px){
  .lf{padding:26px 20px 24px}
  .lf-grid{grid-template-columns:1fr}
  .at-final{padding:88px 0}
}

/* ==========================================================================
   D · THE NAV STAYS WHITE
   The bar was rgba(255,255,255,.88) over saturate(160%) blur(20px). Against
   the light page that reads as white; against the new navy band the 12% it
   lets through is amplified by the saturation and the bar turns a dull
   blue-grey for the whole length of the platform section. Opaque white, and
   the blur goes with it because nothing shows through an opaque bar anyway.
   ========================================================================== */
.mn.mn--atlaslight{--bar-bg:#ffffff;--bar-blur:none}