/* The sections (studio/sections.js, TS-81): Home, Videos, Results, Settings, the six stops, and the team's Inbox,
   Videos and Studios. Tokens and parts from studio/ds.css only (DESIGN.md). */

/* ---------- shell ---------- */
.top-r .avatar.sx-alert{position:relative;overflow:visible}
.top-r .avatar.sx-alert::after{content:"";position:absolute;top:1px;right:1px;width:11px;height:11px;border-radius:50%;background:var(--c-bad);box-shadow:0 0 0 2px var(--c-bg)}
/* the account menu hangs under the avatar (it was pinned to the window's right edge, so on screens wider than the
   1440 px header it opened far from the avatar) */
.top-r{position:relative}
.top-r>.menu{top:calc(100% + 10px);right:0}
.menu .sx-mhead{display:flex;flex-direction:column;gap:2px;padding:10px 14px 12px;border-bottom:1px solid var(--c-border);margin-bottom:6px}
.menu .sx-mhead b{color:var(--c-strong)}
.menu .count{position:static;margin-left:6px}

/* ---------- shared bits ---------- */
.sx-sec{margin-top:var(--sp-7)}
.sx-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.sx-h h2{font-size:var(--fs-xl);font-weight:750;color:var(--c-strong);letter-spacing:-.01em;margin:0}
.sx-h.sm{margin-bottom:var(--sp-2)}
.sx-h.sm h2{font-size:var(--fs-lg)}
.sx-sub{font-size:var(--fs-xs);color:var(--c-mute);line-height:1.45}
.sx-empty{font-size:var(--fs-sm);color:var(--c-mute);margin:var(--sp-2) 0 0}
.sx-tic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent)}
.sx-tic svg{width:18px;height:18px}
.sx-tic .so-pi{width:36px;height:36px;border-radius:50%;background:transparent}
.sx-cta{display:inline-flex;align-items:center;gap:2px;flex:none;font-weight:700;font-size:var(--fs-sm);color:var(--c-accent)}
.sx-cta svg{width:16px;height:16px}
.sx-bar{display:block;width:100%;height:6px;margin-top:6px}
.sx-bar .sx-track{fill:var(--c-sunk)}
.sx-bar .sx-fill{fill:var(--c-accent)}
.sx-bar.dark .sx-track{fill:var(--c-dark-line)}
.sx-bar.dark .sx-fill{fill:var(--c-mark)}
.sx-pl{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.sx-pl .so-pi{width:24px;height:24px;border-radius:var(--r-xs)}
.sx-pl .so-pi svg{width:14px;height:14px}
.sx-plv{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:700;color:var(--c-text-2);font-variant-numeric:tabular-nums}
.sx-plv .so-pi{width:20px;height:20px}
.sx-plv .so-pi svg{width:12px;height:12px}
.sx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.sx-card2{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:var(--sp-5)}
.sx-more{display:flex;justify-content:center;margin-top:var(--sp-6)}
.sx-foot{margin-top:var(--sp-3)}

/* page heads */
.sx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.sx-head>.ds-grow{flex:1 1 280px}
.sx-phead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.sx-h1{margin-top:14px}
.sx-lead{margin-top:12px;max-width:620px}
.sx-new{flex:none}

/* ---------- Home ---------- */
.sx-hero{margin-top:var(--sp-2)}
.sx-hero .sx-bigrow{align-items:flex-end;gap:var(--sp-4);margin-top:6px}
.sx-hero .sx-ctas{gap:10px;margin-top:var(--sp-5)}
.sx-hero.you{box-shadow:inset 0 0 0 2px var(--c-accent)}
.sx-now{display:flex;flex-direction:column;gap:2px;min-width:230px;padding-left:var(--sp-6);border-left:1px solid var(--c-dark-line)}
.sx-now .eyebrow{margin-bottom:var(--sp-2)}
.sx-nowr{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:8px 10px;margin:0 -10px;border:0;border-radius:var(--r-sm);background:none;font:inherit;color:var(--c-on-dark-2);cursor:pointer;text-align:left}
.sx-nowr:hover{background:var(--c-dark-2);color:var(--c-on-dark)}
.sx-nowr b{min-width:44px;font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:26px;color:var(--c-on-dark);line-height:1}
.sx-nowr span{flex:1}
.sx-nowr svg{width:16px;height:16px;opacity:.6}
.sx-todo .sx-ti{gap:var(--sp-4);padding:14px 18px}
.sx-todo .sx-ti .ds-item-tx b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sx-todo .t-bad .sx-tic{background:var(--c-bad-soft);color:var(--c-bad)}
.sx-todo .t-bad .sx-cta{color:var(--c-bad)}
.sx-cardlink{display:flex;flex-direction:column;gap:var(--sp-2);width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sx-big{font-size:var(--fs-sm);color:var(--c-mute)}
.sx-big b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--c-strong);margin-right:4px}
.sx-ch{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-xs);font-weight:700;vertical-align:middle}
.sx-ch svg{width:13px;height:13px}
.sx-ch.up{color:var(--c-ok)}.sx-ch.down{color:var(--c-bad)}
.sx-spark{display:block;width:100%;height:44px}
.sx-spark polyline{fill:none;stroke:var(--c-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sx-best{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3);border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface-2);font:inherit;color:inherit;text-align:left;cursor:pointer}
.sx-best:hover{border-color:var(--c-border-hover)}
.sx-best .eyebrow{display:flex;align-items:center;gap:4px;color:var(--c-mark-ink)}
.sx-best .eyebrow svg{width:12px;height:12px}
.sx-best b{display:block;color:var(--c-strong);margin-top:2px}
.sx-best>svg{width:18px;height:18px;color:var(--c-mute);flex:none}
.sx-mini{display:flex;flex-direction:column}
.sx-mrow{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:10px 0;border:0;border-top:1px solid var(--c-border);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.sx-mrow:first-child{border-top:0}
.sx-mrow:hover b{color:var(--c-accent)}
.sx-mrow b{display:block;color:var(--c-strong);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-mrow .sx-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-idea{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-5);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl)}
.sx-idea b{display:block;color:var(--c-strong)}
.sx-idea .sx-tic,.sx-ideas .sx-tic{background:var(--c-mark-soft);color:var(--c-mark-ink)}

/* ---------- Videos ---------- */
.sx-ideas{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6);padding:var(--sp-3) var(--sp-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg)}
.sx-ideal{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sx-ideal b{color:var(--c-strong);margin-right:var(--sp-1)}
.sx-ichip{display:inline-flex;align-items:center;gap:6px;max-width:320px;padding:4px 12px;border-radius:var(--r-pill);background:var(--c-surface-2);font-size:var(--fs-xs);font-weight:650;color:var(--c-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-ichip i{font-style:normal;font-weight:500;color:var(--c-mute)}
.sx-icount{display:none}
@media (max-width:640px){.sx-icount{display:block}}
.sx-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
.sx-chips{display:flex;gap:6px;flex-wrap:wrap}
.sx-ctl{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sx-ctl .ds-select,.sx-ctl .ds-input{width:auto;min-width:160px}
.sx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--sp-5) var(--sp-4);margin-top:var(--sp-5)}
.sx-vcard{display:flex;flex-direction:column;gap:10px;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sx-vcard .sx-th{width:100%;border-radius:var(--r-xl);transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid)}
.sx-vcard:hover .sx-th,.sx-vcard:focus-visible .sx-th{transform:translateY(-3px);box-shadow:var(--sh-2)}
.sx-vcard.k-you .sx-th{box-shadow:0 0 0 3px var(--c-accent)}
.sx-vcard.k-paused .sx-th>img{filter:grayscale(1);opacity:.6}
.sx-th::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,var(--c-scrim));pointer-events:none}
.sx-th .ds-thumb-bl{right:8px;bottom:10px;left:10px}
.sx-th .ds-thumb-tl{max-width:calc(100% - 60px)}
.sx-th .ds-thumb-tl .ds-pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sx-th .ds-thumb-tr .sx-pl{flex-direction:column}
.sx-views{display:flex;align-items:baseline;gap:6px;color:var(--c-on-dark-2);font-size:var(--fs-xs);font-weight:650}
.sx-views b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:26px;line-height:1;color:var(--c-on-dark);letter-spacing:-.02em}
.sx-prog{display:flex;align-items:center;gap:8px}
.sx-prog .sx-bar{margin:0;flex:1}
.sx-prog i{font-style:normal;font-size:var(--fs-2xs);font-weight:800;color:var(--c-on-dark)}
.sx-vb{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0 2px}
.sx-vt{color:var(--c-strong);font-size:var(--fs-sm);font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-mlife{display:flex;gap:3px}
.sx-mlife i{flex:1;height:4px;border-radius:var(--r-pill);background:var(--c-border-2)}
.sx-mlife i.done{background:var(--c-strong)}
.sx-mlife i.now{background:var(--c-accent)}

/* the Steps view: one row per video, six stops */
.sx-steps{padding:0;margin-top:var(--sp-5);overflow:hidden}
.sx-srow{display:grid;grid-template-columns:minmax(240px,2.4fr) repeat(6,minmax(0,1fr)) minmax(110px,1.1fr);align-items:center;gap:0;width:100%;padding:12px 18px;border:0;border-top:1px solid var(--c-border);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.sx-srow:hover{background:var(--c-surface-2)}
.sx-shead{cursor:default;border-top:0;background:var(--c-surface-2);font-size:var(--fs-2xs);font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--c-mute)}
.sx-shead span{text-align:center}
.sx-shead span:first-child{text-align:left}
.sx-shead span:last-child{text-align:right}
.sx-sv{display:flex;align-items:center;gap:var(--sp-3);min-width:0;padding-right:var(--sp-3)}
.sx-sv b{display:block;color:var(--c-strong);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-sv .sx-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-st{position:relative;height:24px;display:grid;place-items:center}
.sx-st::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--c-border-2)}
.sx-srow .sx-st:nth-child(2)::before{left:50%}
.sx-srow .sx-st:nth-child(7)::before{right:50%}
.sx-st.done::before{background:var(--c-strong)}
.sx-st.now::before,.sx-st.you::before,.sx-st.off::before{background:linear-gradient(90deg,var(--c-strong) 50%,var(--c-border-2) 50%)}
.sx-srow .sx-st:nth-child(2):is(.now,.you,.off)::before{background:var(--c-border-2)}
.sx-st i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-border-2)}
.sx-st.done i{background:var(--c-strong);border-color:var(--c-strong)}
.sx-st.now i{width:16px;height:16px;background:var(--c-accent);border-color:var(--c-accent);box-shadow:var(--ring)}
.sx-st.you i{width:16px;height:16px;background:var(--c-accent);border-color:var(--c-accent);animation:sxpulse 1.6s var(--ease) infinite}
.sx-st.off i{background:var(--c-sunk);border-color:var(--c-mute)}
.sx-nx{text-align:right;font-size:var(--fs-xs);font-weight:700;color:var(--c-text-2)}
.sx-srow.k-you .sx-nx{color:var(--c-accent)}
@keyframes sxpulse{0%{box-shadow:0 0 0 0 var(--c-accent-soft)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- the six stops (video room, post room, review room) ---------- */
.sx-life{display:flex;list-style:none;margin:var(--sp-3) 0 var(--sp-2);padding:0}
.sx-life li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.sx-life li::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:2px;background:var(--c-border-2)}
.sx-life li:first-child::before{display:none}
.sx-life li.done::before,.sx-life li.now::before,.sx-life li.you::before{background:var(--c-strong)}
.sx-dot{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);border:2px solid var(--c-border-2);color:var(--c-mark)}
.sx-dot svg{width:12px;height:12px}
.sx-lab{font-size:var(--fs-2xs);font-weight:700;color:var(--c-mute);text-align:center;white-space:nowrap}
.sx-life li.done .sx-dot{background:var(--c-strong);border-color:var(--c-strong)}
.sx-life li.now .sx-dot,.sx-life li.you .sx-dot{background:var(--c-accent);border-color:var(--c-accent);box-shadow:var(--ring)}
.sx-life li.you .sx-dot{animation:sxpulse 1.6s var(--ease) infinite}
.sx-life li.off .sx-dot{background:var(--c-sunk);border-color:var(--c-mute)}
.sx-life li.now .sx-lab,.sx-life li.you .sx-lab{color:var(--c-strong)}
.sx-life.dark li::before{background:var(--c-dark-line)}
.sx-life.dark li.done::before,.sx-life.dark li.now::before,.sx-life.dark li.you::before{background:var(--c-mark)}
.sx-life.dark .sx-dot{background:var(--c-strong);border-color:var(--c-dark-line)}
.sx-life.dark li.done .sx-dot{background:var(--c-mark);border-color:var(--c-mark);color:var(--c-strong)}
.sx-life.dark li.now .sx-dot,.sx-life.dark li.you .sx-dot{background:var(--c-accent);border-color:var(--c-accent)}
.sx-life.dark .sx-lab{color:var(--c-on-dark-2)}
.sx-life.dark li.now .sx-lab,.sx-life.dark li.you .sx-lab{color:var(--c-on-dark)}
.sx-rtop{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-xl);background:var(--c-dark-2)}
.sx-rtop .sx-life{margin:0}
.sx-racts{display:flex;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
.sx-script{flex:1;min-width:200px}
.sx-script summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-sm);cursor:pointer;font-weight:700;font-size:var(--fs-sm);color:var(--c-on-dark-2)}
.sx-script summary svg{width:16px;height:16px}
.sx-script p{margin:var(--sp-2) 0 0;white-space:pre-line;font-size:var(--fs-sm);line-height:1.55;color:var(--c-on-dark)}
.rmode .sx-life{margin:var(--sp-4) 0 var(--sp-2)}

/* ---------- Results ---------- */
.sx-rhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:center;margin-top:var(--sp-6);padding:var(--sp-7);border-radius:var(--r-2xl)}
.sx-rhero .drop{max-width:400px}
.sx-rbig{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:clamp(34px,4vw,48px);line-height:1;color:var(--c-on-dark);margin:var(--sp-2) 0}
.sx-rtxt{color:var(--c-on-dark-2);font-size:var(--fs-sm);line-height:1.5;margin:0}
.sx-rsplit{display:flex;flex-direction:column;gap:var(--sp-2)}
.sx-rrow{display:flex;align-items:center;gap:var(--sp-3);color:var(--c-on-dark)}
.sx-rrow .so-pi{background:var(--c-dark-2)}
.sx-rrow b{font-size:var(--fs-lg)}
.sx-kpis{margin-top:var(--sp-5)}
.sx-rank{flex:none;width:24px;text-align:center;font-weight:800;color:var(--c-mute)}
.sx-pv{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.sx-pv b{color:var(--c-strong)}
.sx-c .sx-ct{display:block;font-size:var(--fs-sm);font-weight:650;color:var(--c-strong);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-c .sx-sub{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-c .sx-sub .so-pi{width:18px;height:18px;background:transparent}
.sx-c .sx-sub .so-pi svg{width:12px;height:12px}
.sx-c.q .sx-ct{color:var(--c-accent-ink)}
.sx-note{display:flex;gap:6px;align-items:flex-start;margin-top:auto;padding-top:var(--sp-2)}
.sx-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.sx-city{display:flex;align-items:center;gap:var(--sp-5);margin-top:var(--sp-6);padding:var(--sp-5) var(--sp-6);border-radius:var(--r-2xl);flex-wrap:wrap}
.sx-cring{position:relative;width:72px;height:72px;flex:none;display:grid;place-items:center}
.sx-cring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sx-cring .sx-r0{fill:none;stroke:var(--c-dark-line);stroke-width:6}
.sx-cring .sx-r1{fill:none;stroke:var(--c-mark);stroke-width:6;stroke-linecap:round}
.sx-cring span{position:relative;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:22px;color:var(--c-on-dark)}
.sx-ctitle{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.05;margin:6px 0 4px;color:var(--c-on-dark)}
.sx-boardin .so-rank{border-radius:var(--r-xl)}

/* ---------- the Videos toolbar: the filters and the view switch, two segmented bars in one style and one height ---------- */
.sx-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
.sx-tabs,.sx-viewsw{display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--c-sunk);min-width:0}
.sx-tabs{overflow-x:auto;scrollbar-width:none;max-width:100%}
.sx-tabs::-webkit-scrollbar{display:none}
.sx-tabs button,.sx-viewsw button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:none;font:inherit;font-weight:700;font-size:var(--fs-sm);color:var(--c-text-2);white-space:nowrap;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.sx-tabs button:hover,.sx-viewsw button:hover{color:var(--c-strong)}
.sx-tabs button.on,.sx-viewsw button[aria-pressed="true"]{background:var(--c-surface);color:var(--c-strong);box-shadow:var(--sh-0)}
.sx-tc{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text-2);font-size:var(--fs-2xs);font-weight:800}
.sx-tabs button.on .sx-tc{background:var(--c-strong);color:var(--c-on-dark)}
.sx-tabs button.hot .sx-tc{background:var(--c-accent);color:var(--c-on-dark)}
.sx-tabs button.zero{color:var(--c-mute)}
.sx-tabs button.zero .sx-tc{background:transparent;color:var(--c-mute)}
.sx-viewsw{flex:none}
.sx-viewsw svg{width:16px;height:16px}
.sx-viewsw button[aria-pressed="true"] svg{color:var(--c-accent)}
.sx-tools .sx-ctl{margin-left:auto}

/* ---------- Your twin ---------- */
.sx-file{position:relative;overflow:hidden;cursor:pointer}
.sx-file .ds-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;border:0;opacity:0;cursor:pointer}
.sx-file:focus-within{box-shadow:var(--ring)}
.thero.sx-twhero{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-7);align-items:center;padding:var(--sp-7);border-radius:var(--r-2xl)}
.sx-twhero .ph{width:170px}
.sx-twsteps{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:var(--sp-3) 0 var(--sp-4);padding:0;font-size:var(--fs-xs);font-weight:700;color:var(--c-on-dark-2)}
.sx-twsteps li{display:flex;align-items:center;gap:8px}
.sx-twsteps .sx-dot{width:22px;height:22px;font-size:var(--fs-2xs);font-weight:800;background:transparent;border-color:var(--c-dark-line);color:var(--c-on-dark-2)}
.sx-twsteps li.done .sx-dot{background:var(--c-mark);border-color:var(--c-mark);color:var(--c-strong)}
.sx-twsteps li.now{color:var(--c-on-dark)}
.sx-twsteps li.now .sx-dot{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-dark)}
.sx-twt{font-family:var(--wide);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(28px,4vw,44px);line-height:1;color:var(--c-on-dark);margin:0}
.sx-twl{display:block;color:var(--c-on-dark-2);font-size:var(--fs-sm);line-height:1.5;margin:var(--sp-2) 0 0;max-width:560px}
.sx-twhero .sx-ctas{gap:10px;align-items:center;margin-top:var(--sp-5)}
.sx-twhero .sx-ctas .sx-twl{margin:0}
.sx-twhero .note{margin-top:var(--sp-3)}
.sx-need{display:flex;flex-direction:column;gap:var(--sp-2);list-style:none;margin:var(--sp-5) 0 0;padding:0;max-width:620px}
.sx-need li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--c-dark-2)}
.sx-need li b{display:block;color:var(--c-on-dark)}
.sx-need li .sx-twl{margin:2px 0 0;font-size:var(--fs-xs)}
.sx-need li.on{opacity:.75}
.sx-need .sx-or{background:none;padding:0 var(--sp-4);font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--c-on-dark-2)}
.sx-qdot{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--c-border-2);color:var(--c-mark)}
.sx-qdot svg{width:12px;height:12px}
.sx-need .sx-qdot{border-color:var(--c-dark-line)}
.sx-need li.on .sx-qdot,.sx-qrow.on .sx-qdot{background:var(--c-strong);border-color:var(--c-strong)}
.sx-need li.on .sx-qdot{background:var(--c-mark);border-color:var(--c-mark);color:var(--c-strong)}
.sx-teach{margin-top:var(--sp-6);padding:var(--sp-6)}
.sx-teachh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.sx-teachh>.ds-grow{flex:1 1 260px}
.sx-teachh h2{font-size:var(--fs-2xl);font-weight:800;color:var(--c-strong);letter-spacing:-.02em;margin:0 0 4px}
.sx-tmeter{display:flex;flex-direction:column;gap:6px;min-width:200px;font-size:var(--fs-sm);color:var(--c-mute)}
.sx-tmeter b{font-size:var(--fs-xl);color:var(--c-strong)}
.sx-tmeter .sx-bar{height:8px;margin:0}
.sx-tnext{margin-top:var(--sp-4)}
.sx-tnext svg{width:16px;height:16px}
.sx-tdone{display:flex;align-items:center;gap:8px;margin:var(--sp-4) 0 0;font-weight:700;color:var(--c-ok)}
.sx-tdone svg{width:16px;height:16px}
.sx-tgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-6)}
.sx-tg{display:flex;flex-direction:column;min-width:0}
.sx-tg .eyebrow{margin-bottom:var(--sp-2)}
.sx-qrow{display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;padding:12px 4px;border:0;border-top:1px solid var(--c-border);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.sx-qrow:hover b{color:var(--c-accent)}
.sx-qrow .sx-qdot{margin-top:1px}
.sx-qrow b{display:block;color:var(--c-strong);font-size:var(--fs-sm);line-height:1.35}
.sx-qa{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:var(--fs-xs);color:var(--c-text-2);line-height:1.45}
.sx-qadd{display:block;margin-top:3px;font-size:var(--fs-xs);font-weight:700;color:var(--c-accent)}
.sx-qrow>svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--c-mute)}
.adds.sx-files{display:flex;flex-direction:column;gap:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.add.sx-ftile{flex-direction:row;align-items:center;gap:var(--sp-4);padding:12px 16px;border:0;border-top:1px solid var(--c-border);border-radius:0;background:none;cursor:default}
.add.sx-ftile:first-child{border-top:0}
.add.sx-ftile b{font-size:var(--fs-md)}
.add.sx-ftile .sx-sub{display:block}
.sx-fic{flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--c-accent-soft);color:var(--c-accent);display:grid;place-items:center}
.sx-fic svg{width:20px;height:20px}
.sx-facts{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.adds.sx-files.lv-over .add{background:var(--c-accent-soft)}
.sx-ftip{margin-top:var(--sp-2)}

/* ---------- Settings ---------- */
.sx-jump{margin-top:var(--sp-5)}
.sx-set{margin-top:var(--sp-4)}
.sx-set .ds-item>svg{width:18px;height:18px;color:var(--c-mute)}
.sx-on-settings .sx-sec{scroll-margin-top:96px}
#sx-s-plan .btn{white-space:normal;max-width:100%;height:auto;text-align:center}

/* ---------- team bar and team pages ---------- */
body.live.team #demo button:is(.dk-q,.pd-q,.po-q),body.team #demo button:is(.dk-q,.pd-q,.po-q){display:none}
body.live.team #demo button.sx-tq,body.team #demo button.sx-tq{display:inline-flex;align-items:center;gap:6px}
#demo .sx-tq svg{width:14px;height:14px}
#demo .sx-tq .count{position:static}
body.sx-topen{overflow:hidden}
.sx-tpage{position:fixed;inset:0;z-index:var(--z-page);overflow-y:auto;background:var(--c-bg)}
.sx-twrap{max-width:1240px;margin:0 auto;padding:0 var(--sp-5) var(--sp-9)}
.sx-ttop{position:sticky;top:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-5) 0 var(--sp-3);background:var(--c-bg);border-bottom:1px solid var(--c-border)}
.sx-ttabs{display:flex;gap:4px;margin-top:var(--sp-2);background:var(--c-sunk);border-radius:var(--r-pill);padding:4px;width:max-content;max-width:100%;overflow-x:auto}
.sx-ttabs button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;border-radius:var(--r-pill);padding:8px 16px;font:inherit;font-weight:700;font-size:var(--fs-sm);color:var(--c-text-2);cursor:pointer;white-space:nowrap}
.sx-ttabs button.on{background:var(--c-surface);color:var(--c-strong);box-shadow:var(--sh-0)}
.sx-tn{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-on-dark);font-size:var(--fs-2xs);font-weight:800}
.sx-tacts{gap:var(--sp-2);align-items:center}
.sx-th1{margin:var(--sp-6) 0 var(--sp-2);font-size:clamp(26px,5vw,42px);line-height:1.02}
.sx-health{margin-bottom:var(--sp-2)}
.sx-igrp{margin-top:var(--sp-6)}
.sx-irow{flex-wrap:wrap}
.sx-irow .ds-item-tx b{white-space:normal}
.sx-irow .ds-item-tx span{white-space:normal}
.sx-is{color:var(--c-strong);font-weight:700}
.sx-irow.t-bad{box-shadow:inset 3px 0 0 var(--c-bad)}
.sx-irow.t-accent{box-shadow:inset 3px 0 0 var(--c-accent)}
.sx-irow.info .ds-item-tx b{color:var(--c-text-2)}
.sx-tv{margin-top:var(--sp-4)}
.sx-tvrow{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) auto;gap:var(--sp-4);padding:10px 16px}
.sx-tvmain{display:flex;align-items:center;gap:var(--sp-3);min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sx-tvmain:hover b{color:var(--c-accent)}
.sx-tvmain .sx-is{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em}
.sx-tvstate{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.sx-tvstate .sx-mlife{width:90px}
.sx-tvstate .sx-bar{max-width:160px;margin:0}
.sx-tvacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sx-tvacts .btn svg{width:14px;height:14px}
.sx-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
.sx-scard{display:flex;flex-direction:column;gap:var(--sp-4);width:100%;padding:var(--sp-5);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.sx-scard:hover{border-color:var(--c-border-hover);box-shadow:var(--sh-1)}
.sx-scard.hot{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.sx-sct{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.sx-sct b{display:block;color:var(--c-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-sfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--c-strong)}
.sx-sfacts span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sx-sfacts i{display:block;font-style:normal;font-size:var(--fs-2xs);font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--c-mute)}
.sx-sfacts .bad{grid-column:1/-1;color:var(--c-bad)}

/* ---------- small screens and motion ---------- */
@media (max-width:960px){
 .sx-head{align-items:flex-start}
 .sx-hero{grid-template-columns:minmax(0,1fr)}
 .sx-now{min-width:0;padding:var(--sp-4) 0 0;border-left:0;border-top:1px solid var(--c-dark-line)}
 .sx-two{grid-template-columns:minmax(0,1fr)}
 .sx-rhero{grid-template-columns:minmax(0,1fr);padding:var(--sp-5);gap:var(--sp-6)}
 .sx-rhero .drop{max-width:300px;margin:0 auto}
 .sx-srow{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:var(--sp-2);padding:12px 14px}
 .sx-srow .sx-sv{grid-column:1/-1;padding-right:0}
 .sx-srow .sx-nx{grid-column:1/-1;text-align:left}
 .sx-srow .sx-st:nth-child(2)::before{left:50%}
 .sx-shead{display:none}
 .sx-tvrow{grid-template-columns:minmax(0,1fr)}
 .thero.sx-twhero{grid-template-columns:minmax(0,1fr);padding:var(--sp-5);gap:var(--sp-5)}
 .sx-twhero .ph{width:110px}
 .sx-tgroups{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
 .sx-teach{padding:var(--sp-5)}
 .sx-tvacts{justify-content:flex-start}
 .sx-sfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
 .sx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-3)}
 .sx-idea{flex-wrap:wrap}
 .sx-idea>.ds-grow{flex-basis:calc(100% - 56px)}
 .sx-idea>.btn{width:100%}
 .sx-ideas{gap:var(--sp-3)}
 .sx-ideas .sx-ichip,.sx-ideas .sx-ideal>.sx-sub:not(.sx-icount){display:none}
 .sx-ideal{flex-direction:column;align-items:flex-start;gap:0}
 .sx-lab{font-size:9.5px}
 .sx-ctl{width:100%}
 .sx-ctl .ds-select,.sx-ctl .ds-input{flex:1;min-width:0}
 .sx-twrap{padding:0 var(--sp-4) var(--sp-9)}
 .sx-ttop{position:static}
 .sx-new{padding-left:14px;padding-right:14px}
 .sx-tmeter{flex:1 1 100%;min-width:0}
 .sx-tnext{width:100%;justify-content:center}
 .sx-tools{flex-direction:column;align-items:stretch}
 .sx-tabs{border-radius:var(--r-lg)}
 .sx-tools .sx-ctl{margin-left:0}
 .sx-viewsw{flex:1}
 .sx-viewsw button{flex:1}
 .sx-need li{flex-wrap:wrap}
 .sx-need li>.btn{margin-left:36px}
 .add.sx-ftile{flex-wrap:wrap}
 .add.sx-ftile .sx-facts{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
 .sx-st.you i,.sx-life li.you .sx-dot{animation:none}
 .sx-vcard .sx-th{transition:none}
 .sx-vcard:hover .sx-th{transform:none}
}