/* /identity-positioning: MCG's page on its methodology and technology hub.
   The IP green marks what belongs to Identity Positioning. */
:root{--ipx-green:#3DF5A0;}
.ipx-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;}
.ipx-hero-copy{min-width:0;}
.ipx-hero h1 em{color:var(--ipx-green);}
.ipx-hero-art{min-width:0;display:flex;justify-content:center;}
/* the hero: a sample reading (no pentagon: that diagram belongs to identitypositioning.com) */
.ipx-meter{width:100%;max-width:460px;border:1px solid var(--rule-dark);background:rgba(255,255,255,.02);padding:22px 24px 20px;}
.ipx-meter-h{display:flex;justify-content:space-between;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);padding-bottom:14px;border-bottom:1px solid var(--rule-dark);margin-bottom:6px;}
.ipx-mrow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule-dark);}
.ipx-mrow-t{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font-size:13.5px;}
.ipx-mrow-t b{font-weight:500;color:var(--white);}
.ipx-mrow-t span{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--steel);}
.ipx-mtrack{height:6px;background:var(--rule-dark);position:relative;overflow:hidden;}
.ipx-mtrack i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ipx-green);transition:width 1.3s var(--ease);}
.ipx-meter.is-on .ipx-mtrack i{width:var(--v);}
.ipx-mrow:nth-of-type(2) i{transition-delay:.14s}.ipx-mrow:nth-of-type(3) i{transition-delay:.28s}.ipx-mrow:nth-of-type(4) i{transition-delay:.42s}.ipx-mrow:nth-of-type(5) i{transition-delay:.56s}
.ipx-mval{font-family:var(--display);font-weight:700;font-size:15px;text-align:right;color:var(--ipx-green);}
.ipx-mtotal{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;}
.ipx-mtotal > span{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--platinum);}
.ipx-mtotal b{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;color:var(--white);}
.ipx-mtotal small{font-size:15px;color:var(--steel);font-weight:600;margin-left:4px;}
html:not(.js) .ipx-mtrack i{width:var(--v);}
/* the pillar weights: one bar, split 25, 25, 20, 15, 15 */
.ipx-pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;}
.ipx-wbar{display:grid;grid-template-columns:25fr 25fr 20fr 15fr 15fr;gap:4px;min-width:0;}
.ipx-pbtn{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:170px;min-width:0;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--rule-dark);color:var(--steel);padding:14px 12px;cursor:pointer;overflow:hidden;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.ipx-pbtn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rule-dark);transition:background .3s var(--ease),height .3s var(--ease);}
.ipx-pbtn:hover{color:var(--white);border-color:var(--steel);}
.ipx-pbtn[aria-selected="true"]{color:var(--ink);background:var(--ipx-green);border-color:var(--ipx-green);}
.ipx-pbtn[aria-selected="true"]::after{background:var(--ink);height:0;}
.ipx-pbtn-n{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.2em;}
.ipx-pbtn-t{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;}
.ipx-pbtn-w{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,30px);line-height:1;}
.ipx-ppanel{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 40px;align-items:end;min-height:170px;border-top:1px solid var(--rule-dark);padding-top:28px;}
.ipx-ppanel .ipx-pp{grid-column:1;grid-row:1;}
.ipx-ppanel .ipx-plink{grid-column:2;grid-row:1;margin:0 0 8px;}
.ipx-pp{animation:ipx-in .45s var(--ease) both;}
@keyframes ipx-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.ipx-pp-n{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ipx-green);margin-bottom:12px;}
.ipx-pp h3{font-size:clamp(26px,3vw,36px);margin-bottom:14px;}
.ipx-pp p{color:var(--platinum);font-size:17px;line-height:1.7;max-width:62ch;margin:0;}
.ipx-plink{display:inline-block;}
/* the platforms */
.ipx-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;}
.ipx-f{background:none;border:1px solid var(--rule-light);color:var(--ink-label);font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:11px 16px;cursor:pointer;transition:all .3s var(--ease);}
.ipx-f:hover{border-color:var(--ink);color:var(--ink);}
.ipx-f[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white);}
.ipx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));border-top:1px solid var(--rule-light);border-left:1px solid var(--rule-light);}
.ipx-card{background:var(--white);border-right:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light);padding:28px 26px 26px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:opacity .45s var(--ease),filter .45s var(--ease),background .3s var(--ease);}
a.ipx-card:hover{background:#FAF8F4;}
.ipx-card h3{font-size:21px;margin:14px 0 10px;}
.ipx-card p{color:var(--ink-body);font-size:15px;line-height:1.65;margin:0 0 18px;}
.ipx-card .more{margin-top:auto;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.ipx-card .more.is-muted{color:var(--ink-label);}
.ipx-card.is-dim{opacity:.22;filter:grayscale(1);}
.ipx-st{align-self:flex-start;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--rule-light);color:var(--ink-label);}
.ipx-st.is-live{border-color:#1FA96B;color:#127A4B;}
.ipx-st.is-dev{border-style:dashed;}
/* the path */
.ipx-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;}
.ipx-steps::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--rule-dark);}
.ipx-steps::after{content:"";position:absolute;left:0;top:15px;height:1px;width:0;background:var(--ipx-green);transition:width 2.4s var(--ease);}
.ipx-steps.is-lit::after{width:100%;}
.ipx-step{position:relative;padding:44px 22px 0 0;opacity:.35;transition:opacity .6s var(--ease);}
.ipx-step::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;border-radius:50%;background:var(--ink);border:2px solid var(--rule-dark);transition:border-color .5s var(--ease),background .5s var(--ease);}
.ipx-steps.is-lit .ipx-step{opacity:1;}
.ipx-steps.is-lit .ipx-step::before{border-color:var(--ipx-green);background:var(--ipx-green);}
.ipx-steps.is-lit .ipx-step:nth-child(2),.ipx-steps.is-lit .ipx-step:nth-child(2)::before{transition-delay:.45s;}
.ipx-steps.is-lit .ipx-step:nth-child(3),.ipx-steps.is-lit .ipx-step:nth-child(3)::before{transition-delay:.9s;}
.ipx-steps.is-lit .ipx-step:nth-child(4),.ipx-steps.is-lit .ipx-step:nth-child(4)::before{transition-delay:1.35s;}
.ipx-steps.is-lit .ipx-step:nth-child(5),.ipx-steps.is-lit .ipx-step:nth-child(5)::before{transition-delay:1.8s;}
.ipx-step-n{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ipx-green);}
.ipx-step h3{font-size:19px;margin:8px 0 8px;}
.ipx-step p{color:var(--steel);font-size:14.5px;line-height:1.65;margin:0;}
.js .ipx-steps:not(.is-lit) .ipx-step{opacity:.35;}
html:not(.js) .ipx-step{opacity:1;}
@media (max-width:980px){
  .ipx-hero-in,.ipx-pgrid{grid-template-columns:1fr;gap:28px;}
  .ipx-hero-art{order:0;}
  .ipx-ppanel{display:block;min-height:0;padding-top:24px;}
  .ipx-ppanel .ipx-plink{margin-top:18px;}
  .ipx-steps{grid-template-columns:1fr;gap:26px;}
  .ipx-steps::before,.ipx-steps::after{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;}
  .ipx-steps::after{height:0;transition:height 2.4s var(--ease);}
  .ipx-steps.is-lit::after{height:100%;width:1px;}
  .ipx-step{padding:0 0 0 34px;}
  .ipx-step::before{top:4px;}
}
@media (max-width:640px){
  .ipx-wbar{grid-template-columns:1fr;gap:4px;}
  .ipx-pbtn{min-height:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;padding:12px 14px 15px;}
  .ipx-pbtn::after{right:auto;width:calc(var(--w) * 4%);}
  .ipx-pbtn-w{font-size:18px;}
}
@media (prefers-reduced-motion:reduce){ .ipx-mtrack i,.ipx-steps::after,.ipx-step{transition:none;} }