/* Website Experience AI (redesign): the journey replay. Track, phone and reading side by side; the phone stands on its
   own framed ribbon stage, the one vivid place on the page. */
.wx-hero{padding-bottom:var(--s9)}
.wx-main{margin-top:var(--s8);display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,4.6fr) minmax(0,4fr);gap:var(--s6);align-items:start}
.wx-track{display:grid;gap:12px}
.wx-tabs{display:grid;gap:10px;counter-reset:s}
.wx-tabs [role=tab]{counter-increment:s;position:relative;display:grid;gap:6px;justify-items:start;text-align:left;padding:16px 18px 16px 58px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .25s ease,background-color .25s ease}
.wx-tabs [role=tab]::before{content:counter(s);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;background:#F2F5FA;color:var(--muted);transition:background-color .25s ease,color .25s ease}
.wx-tabs [role=tab] b{font-size:17px;color:var(--ink)}
.wx-tabs .wx-cat{font-size:13.5px;font-weight:700;color:var(--text);background:#F2F5FA;border-radius:6px;padding:3px 10px}
.wx-tabs [aria-selected=true]{background:#fff;box-shadow:inset 0 0 0 2px var(--cobalt),var(--sh-ui)}
.wx-tabs [aria-selected=true]::before{background:var(--cobalt);color:#fff}
.wx-stage{display:grid;justify-items:center;gap:16px;padding:20px 16px 26px}
.wx-ba{position:relative;z-index:1;display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:#fff;box-shadow:var(--sh-ui)}
.wx-ba button{height:42px;padding:0 14px;border-radius:9px;font-size:15px;font-weight:700;color:var(--ink);transition:background-color .25s ease,color .25s ease}
.wx-ba [aria-pressed=true]{background:var(--cobalt);color:#fff}
.wx-phone{display:grid;justify-items:center;position:relative;z-index:1}
.wx-ph-in{position:relative;width:360px;max-width:100%;height:700px;border-radius:40px;padding:14px;background:#fff;box-shadow:0 0 0 1px #D5E3F6,0 30px 60px -36px rgba(11,42,102,.55);display:grid}
.m-screen{grid-area:1/1;overflow:hidden;border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1px #EEF3FA;padding:16px;display:flex;flex-direction:column;gap:12px}
.m-screen>*{flex-shrink:0}
.m-bar{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--ink)}
.m-burger,.m-x{width:28px;height:20px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);position:relative}
.m-burger::after{content:"";position:absolute;left:0;right:0;top:5.5px;height:3px;background:var(--ink)}
.m-x{border:0}.m-x::before,.m-x::after{content:"";position:absolute;left:0;right:0;top:9px;height:3px;background:var(--ink);transform:rotate(45deg)}.m-x::after{transform:rotate(-45deg)}
.m-screen img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.m-h{font-size:24px;line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.m-p{font-size:15px;line-height:1.5;color:var(--text)}
.m-btn{align-self:stretch;text-align:center;padding:14px;border-radius:12px;background:#0870E6;color:#fff;font-size:15.5px;font-weight:700}.m-btn.big{padding:18px;font-size:17px}
.m-menu{display:grid}.m-menu li{padding:11px 4px;border-bottom:1px solid #EEF3FA;font-size:15px;color:var(--ink)}
.m-menu.short li{padding:14px 4px;font-weight:600}
.m-fh{font-size:18px;font-weight:800;color:var(--ink)}
.m-f{display:grid;gap:5px}.m-f small{font-size:13.5px;font-weight:700;color:var(--ink)}.m-f i{height:44px;border-radius:10px;box-shadow:inset 0 0 0 1.5px #C9D6EA}
.m-f.tiny{gap:2px}.m-f.tiny small{font-size:11px;font-weight:500;color:var(--text)}.m-f.tiny i{height:22px;border-radius:4px}
.m-f i.ok{box-shadow:inset 0 0 0 2px #19BCA9}.m-f.bad i{box-shadow:inset 0 0 0 2px #C3364A}.m-f em{font-style:normal;font-size:13.5px;line-height:1.4;font-weight:700;color:#C3364A}
.m-err{padding:8px 10px;border-radius:8px;background:#FFF0F2;color:#C3364A;font-size:13px;font-weight:700}
.wx-read{display:grid;gap:10px;align-content:start;padding-top:8px}
.wx-read .x-k:not(:first-child){margin-top:12px}
.wx-exp{font-size:clamp(20px,1.7vw,23px);line-height:1.4;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.wx-issue{display:grid;gap:8px;justify-items:start;font-size:17px;line-height:1.55;color:var(--ink)}
.wx-fix{font-size:17px;line-height:1.55;color:var(--ink)}
.wx-note{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--cloud);font-size:15px;line-height:1.5;color:var(--text)}

/* what it looks at */
.wx-looks-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5) var(--s9);align-items:end}
.wx-areas{margin-top:var(--s7);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s7)}
.wx-areas li{display:grid;gap:8px;padding:22px 0;border-top:1px solid var(--line)}
.wx-areas b{font-size:20px;letter-spacing:-.012em;color:var(--ink)}.wx-areas span{font-size:16.5px;line-height:1.55;color:var(--text)}
.wx-src{margin-top:var(--s5);font-size:15px;color:var(--text)}.wx-src a{color:var(--deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){.wx-main{grid-template-columns:1fr 1fr}.wx-track{grid-column:1/-1}.wx-tabs{grid-template-columns:1fr 1fr}.wx-looks-head{grid-template-columns:1fr}.wx-areas{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.wx-main{grid-template-columns:1fr}.wx-tabs{grid-template-columns:1fr}.wx-ph-in{width:300px;height:620px}.wx-areas{grid-template-columns:1fr}}