/* unrivaled.css: the interactive parts of /unrivaledmcg (unrivaled.js).
   Without the script every screen of A Look Inside shows in a column and
   the profile preview shows its sample card. */

/* hero: at a glance */
.ux-facts{list-style:none; padding:0; margin:34px 0 0; display:flex; flex-wrap:wrap; gap:10px 28px;}
.ux-facts li{font-size:14px; color:var(--steel);}
.ux-facts b{font-family:var(--display); font-weight:700; color:var(--ip-green); margin-right:4px;}

/* who it is for: a way in on each */
.ways .cell{display:flex; flex-direction:column; transition:background .25s var(--ease);}
.ways .cell > p{flex:1;}
.way{margin-top:26px; padding-top:20px; border-top:1px solid var(--rule-light);}
.way-k{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ip-green-deep);}
.way p{margin:8px 0 14px; font-size:14.5px;}
.way-go{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--ip-green); padding-bottom:3px; transition:border-color .2s var(--ease), color .2s var(--ease);}
.way-go:hover,.way-go:focus-visible{color:var(--ip-green-deep); border-color:var(--ip-green-deep);}
.ways .cell:hover{background:#F5F5F5;}

/* a look inside */
.ux-wrap{display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr); gap:clamp(24px,3vw,44px); align-items:start;}
.ux-tabs{display:none;}
.js .ux-tabs{display:flex; flex-direction:column; gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark);}
.ux-tab{position:relative; display:grid; grid-template-columns:34px 1fr; gap:4px 12px; text-align:left; background:var(--ink); color:var(--white); border:0; padding:18px 20px 18px 18px; font:inherit; cursor:pointer; transition:background .25s var(--ease);}
.ux-tab:hover{background:var(--panel);}
.ux-tab[aria-selected="true"]{background:var(--panel);}
.ux-tab[aria-selected="true"]::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ip-green);}
.ux-n{grid-row:span 2; font-family:var(--display); font-size:12px; font-weight:700; color:var(--steel); padding-top:2px;}
.ux-tab[aria-selected="true"] .ux-n{color:var(--ip-green);}
.ux-tab b{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;}
.ux-d{font-size:13px; color:var(--steel); line-height:1.5;}
.ux-tab:not([aria-selected="true"]) .ux-d{display:none;}
.ux-timer{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(var(--ip-glow),.75); transform:scaleX(0); transform-origin:left;}
.ux-wrap.playing .ux-tab[aria-selected="true"] .ux-timer{animation:ux-time var(--ux-dur,6500ms) linear forwards;}
@keyframes ux-time{to{transform:scaleX(1);}}
.ux-tab:focus-visible{outline:2px solid var(--ip-green); outline-offset:-2px;}

.ux-window{border:1px solid var(--rule-dark); background:var(--panel-deep); box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--ip-glow),.06); overflow:hidden;}
.ux-bar{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--rule-dark); background:var(--panel);}
.ux-bar i{width:9px; height:9px; border-radius:50%; background:#2E2E33;}
.ux-url{margin-left:12px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--steel); background:var(--ink); border:1px solid var(--rule-dark); padding:5px 10px;}
.ux-path{font-weight:500; color:var(--platinum);}
.ux-screen{padding:clamp(18px,2.4vw,28px);}
.js .ux-screen{min-height:430px;}
.ux-pane{display:block;}
.ux-pane + .ux-pane{margin-top:34px; padding-top:28px; border-top:1px solid var(--rule-dark);}
.js .ux-pane{display:none;}
.js .ux-pane.on{display:block; margin-top:0; padding-top:0; border-top:0; animation:ux-in .45s var(--ease);}
@keyframes ux-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.ux-h{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--white); margin:0 0 16px;}
.ux-k{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin:20px 0 10px;}
.ux-h + .ux-k{margin-top:0;}
.ux-card{background:var(--ink); border:1px solid var(--rule-dark); padding:14px 16px; display:flex; flex-direction:column; gap:3px; transition:border-color .25s var(--ease), transform .25s var(--ease);}
.ux-card:hover{border-color:rgba(var(--ip-glow),.5); transform:translateY(-2px);}
.ux-card b{font-family:var(--display); font-size:14.5px; font-weight:700; color:var(--white);}
.ux-card span{font-size:12.5px; color:var(--steel);}
.ux-card .ux-tag{font-family:var(--display); font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ip-green); margin-bottom:4px;}
.ux-continue{display:grid; grid-template-columns:minmax(0,1fr) minmax(90px,.8fr) auto; gap:16px; align-items:center;}
.ux-continue > div:first-child{display:flex; flex-direction:column; gap:3px;}
.ux-prog{height:6px; background:var(--rule-dark); overflow:hidden;}
.ux-prog i{display:block; height:100%; background:var(--ip-green); transform-origin:left; transform:scaleX(var(--p,.4)); transition:transform 1.1s var(--ease);}
.js .ux-pane:not(.on) .ux-prog i{transform:scaleX(0);}
.ux-pct{font-family:var(--display); font-weight:700; font-size:14px; color:var(--white) !important;}
.ux-grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.ux-split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px;}
.ux-video{position:relative; aspect-ratio:16/10; background:radial-gradient(120% 90% at 30% 20%, rgba(var(--ip-glow),.16), transparent 60%), #111114; border:1px solid var(--rule-dark); display:flex; align-items:center; justify-content:center;}
.ux-play{width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); position:relative;}
.ux-play::after{content:""; position:absolute; left:21px; top:16px; border-left:16px solid var(--white); border-top:11px solid transparent; border-bottom:11px solid transparent;}
.ux-vt{position:absolute; left:12px; bottom:16px; font-size:11px; color:var(--platinum);}
.ux-vbar{position:absolute; left:12px; right:12px; bottom:8px; height:3px; background:rgba(255,255,255,.15);}
.ux-vbar i{display:block; height:100%; width:36%; background:var(--ip-green);}
.ux-outline{list-style:none; padding:0; margin:0; border:1px solid var(--rule-dark);}
.ux-outline li{font-size:13px; color:var(--platinum); padding:10px 12px 10px 34px; position:relative; border-bottom:1px solid var(--rule-dark);}
.ux-outline li:last-child{border-bottom:0;}
.ux-outline li::before{content:""; position:absolute; left:12px; top:14px; width:10px; height:10px; border:1px solid var(--steel); border-radius:50%;}
.ux-outline li.done::before{background:var(--ip-green); border-color:var(--ip-green);}
.ux-outline li.here{background:rgba(var(--ip-glow),.07); color:var(--white);}
.ux-outline li.here::before{border-color:var(--ip-green); box-shadow:inset 0 0 0 2px var(--ink), inset 0 0 0 6px var(--ip-green);}
.ux-outline li.lock{color:var(--slate);}
.ux-files{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.ux-files span{font-size:12px; color:var(--platinum); border:1px solid var(--rule-dark); background:var(--ink); padding:6px 10px;}
.ux-files .ux-quiz{border-color:rgba(var(--ip-glow),.5); color:var(--ip-green);}
.ux-post{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:16px; background:var(--ink); border:1px solid var(--rule-dark);}
.ux-post + .ux-post{margin-top:10px;}
.ux-post.reply{margin-left:28px; border-left:2px solid var(--ip-green);}
.ux-post p{margin:0; font-size:13.5px; color:var(--platinum); line-height:1.6;}
.ux-who{margin-bottom:6px !important; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline;}
.ux-who b{font-family:var(--display); font-size:13.5px; color:var(--white);}
.ux-who span{font-size:12px; color:var(--steel);}
.ux-who .ux-badge{font-family:var(--display); font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--ink); background:var(--ip-green); padding:2px 6px;}
.ux-av{width:40px; height:40px; border-radius:50%; background:#24242A; color:var(--platinum); font-family:var(--display); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none;}
.ux-av.c{background:rgba(var(--ip-glow),.16); color:var(--ip-green);}
.ux-av.xl{width:92px; height:92px; font-size:26px;}
.ux-compose{margin-top:12px; border:1px dashed var(--rule-dark); padding:12px 14px; font-size:13px; color:var(--slate);}
.ux-pf{display:grid; grid-template-columns:92px minmax(0,1fr); gap:22px; align-items:start;}
.ux-pf-name{font-family:var(--display); font-size:22px; font-weight:700; color:var(--white); display:block;}
.ux-pf-line{margin:6px 0 10px; color:var(--white); font-size:15px;}
.ux-pf-about{margin:0 0 14px; color:var(--steel); font-size:13.5px;}
.ux-links,.pf-links{display:flex; flex-wrap:wrap; gap:6px;}
.ux-links span{font-size:12px; color:var(--platinum); border:1px solid var(--rule-dark); padding:5px 10px;}
.ux-pf-vis{margin:16px 0 0; font-size:12.5px; color:var(--steel); display:flex; align-items:center; gap:8px;}
.ux-dot{width:8px; height:8px; border-radius:50%; background:var(--ip-green);}
.ux-check{list-style:none; padding:0; margin:0;}
.ux-check li{font-size:13px; color:var(--platinum); padding:8px 0 8px 26px; position:relative; border-bottom:1px solid var(--rule-dark);}
.ux-check li::before{content:""; position:absolute; left:0; top:11px; width:14px; height:14px; border:1px solid var(--steel);}
.ux-check li.done::before{background:var(--ip-green); border-color:var(--ip-green);}
.ux-check li.done::after{content:""; position:absolute; left:4px; top:13px; width:5px; height:8px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg);}
.ux-consultant{flex-direction:row; gap:12px; align-items:center;}
.ux-consultant > div{display:flex; flex-direction:column; gap:2px;}
.ux-msg{margin-top:14px; border:1px solid var(--rule-dark); padding:11px 14px; font-size:13px; color:var(--steel); display:flex; justify-content:space-between;}
.ux-msg::after{content:"\2192"; color:var(--ip-green);}
.ux .btn-row{margin-top:34px;}
@media (max-width:900px){
  .ux-wrap{grid-template-columns:1fr;}
  .js .ux-tabs{flex-direction:row; overflow-x:auto; scrollbar-width:none; gap:0;}
  .js .ux-tabs::-webkit-scrollbar{display:none;}
  .ux-tab{flex:0 0 auto; grid-template-columns:auto; padding:12px 16px;}
  .ux-n{grid-row:auto;}
  .ux-d{display:none;}
  .ux-tab[aria-selected="true"]::before{left:0; right:0; top:auto; bottom:0; width:auto; height:3px;}
  .js .ux-screen{min-height:0;}
}
@media (max-width:600px){
  .ux-grid3,.ux-split{grid-template-columns:1fr;}
  .ux-continue{grid-template-columns:1fr auto;}
  .ux-continue .ux-prog{grid-column:1 / -1; grid-row:2;}
  .ux-pf{grid-template-columns:1fr;}
  .ux-post.reply{margin-left:12px;}
}

/* profiles */
#profiles h2 + p{margin-top:22px;}
.pf-list{list-style:none; padding:0; margin:30px 0 0;}
.pf-list li{padding:14px 0 14px 26px; border-top:1px solid var(--rule-light); position:relative; font-size:15px; line-height:1.65; color:var(--ink-body);}
.pf-list li::before{content:""; position:absolute; left:0; top:23px; width:10px; height:10px; background:var(--ip-green);}
.pf-try{position:sticky; top:110px;}
.pf-card{background:var(--ink); color:var(--white); padding:28px; box-shadow:0 24px 60px rgba(10,10,10,.22);}
.pf-top{display:grid; grid-template-columns:72px minmax(0,1fr); gap:18px; align-items:center;}
.pf-av{width:72px; height:72px; border-radius:50%; background:rgba(var(--ip-glow),.16); color:var(--ip-green); font-family:var(--display); font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center;}
.pf-card .pf-name{font-family:var(--display); font-size:22px; font-weight:700; color:var(--white); display:block; overflow-wrap:anywhere;}
.s-white .pf-card p{color:var(--platinum);}
.pf-line{margin:4px 0 0; font-size:15px; overflow-wrap:anywhere;}
.pf-addr{margin:22px 0 14px; font-size:13px; color:var(--steel) !important; overflow-wrap:anywhere;}
.pf-addr b{color:var(--ip-green); font-weight:600;}
.pf-links span{font-size:12px; color:var(--platinum); border:1px solid var(--rule-dark); padding:5px 10px;}
.pf-vis{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--rule-dark); font-size:13px; display:flex; align-items:center; gap:9px;}
.pf-dot{width:9px; height:9px; border-radius:50%; background:var(--steel); flex:none; transition:background .25s var(--ease), box-shadow .25s var(--ease);}
.pf-vis[data-vis="public"] .pf-dot{background:var(--ip-green); box-shadow:0 0 0 4px rgba(var(--ip-glow),.18);}
.pf-form{margin-top:22px; display:grid; gap:6px;}
.pf-form label{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-label); margin-top:8px;}
.pf-form input[type="text"]{width:100%; font:inherit; font-size:15px; padding:12px 13px; border:1px solid var(--rule-light); background:var(--white); color:var(--ink); border-radius:0;}
.pf-form input[type="text"]:focus{outline:2px solid var(--ip-green-deep); outline-offset:1px;}
.pf-seg{border:0; padding:0; margin:12px 0 0; display:flex; gap:8px; flex-wrap:wrap;}
.pf-seg legend{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-label); margin-bottom:8px; padding:0;}
.pf-seg label{margin:0; position:relative; cursor:pointer;}
.pf-seg input{position:absolute; opacity:0; width:1px; height:1px;}
.pf-seg span{display:inline-block; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--rule-light); color:var(--ink-body); transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);}
.pf-seg input:checked + span{background:var(--ink); color:var(--white); border-color:var(--ink);}
.pf-seg input:focus-visible + span{outline:2px solid var(--ip-green-deep); outline-offset:2px;}
.pf-note{margin-top:14px;}
@media (max-width:900px){.pf-try{position:static;}}

/* how it works: the steps light in order */
.js .steps.flow .step{position:relative;}
.js .steps.flow .step::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--ip-green-deep); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease); transition-delay:calc(var(--i,0) * .28s + .2s);}
.js .steps.flow.in .step::before{transform:scaleX(1);}

/* the way in, kept in reach */
.ux-dock{position:fixed; right:20px; bottom:20px; z-index:30; display:inline-flex; align-items:center; gap:10px; background:var(--ip-green); color:var(--ink); font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:11px 16px; box-shadow:0 12px 30px rgba(0,0,0,.35); transform:translateY(16px); opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);}
.ux-dock.show{opacity:1; transform:none;}
.ux-dock:hover,.ux-dock:focus-visible{background:var(--white); color:var(--ink);}
.ux-dock-k{font-size:10px; letter-spacing:.2em; opacity:.7;}
@media (max-width:600px){.ux-dock{left:16px; right:16px; justify-content:center;}.ux-dock-k{display:none;}}
@media print{.ux-dock{display:none !important;}}

@media (prefers-reduced-motion:reduce){
  .js .ux-pane.on{animation:none;}
  .ux-prog i,.ux-card,.js .steps.flow .step::before,.ux-dock{transition:none;}
}