/*
 * Trainer Marketplace (18 Oct 2026): the launch page, the Demo Mode ribbon, "Your desk today" on the dashboard, the
 * profile's connection status and the review desk's "Marketplace launch" panel.
 * Scoped to body.stp (Trainer Pro pages only) and loaded after tp.css and the Train look (train.css,
 * train-trainers.css), whose tokens it reuses with fallbacks so it still reads without them. Motion runs only when
 * reduced motion is not requested; the base sheets already switch every animation off otherwise.
 */
body.stp {
	--stp-l-deep: var(--tr-deep, #0c2236);
	--stp-l-deep-2: var(--tr-deep-2, #113452);
	--stp-l-sky: var(--tr-sky, #8fd0ff);
	--stp-l-blue: var(--tr-blue, #2b8fd6);
	--stp-l-ink: var(--tr-ink, #1b6fae);
	--stp-l-chalk: var(--tr-chalk, #f5f8fb);
	--stp-l-rule: var(--tr-rule, #d9e6f0);
	--stp-l-copy-d: var(--tr-copy-d, #c9dbea);
	--stp-l-muted-d: var(--tr-muted-d, #9fbad0);
	--stp-l-radius: var(--tr-radius, 18px);
	--stp-l-ease: var(--tr-ease, cubic-bezier(.2, .7, .2, 1));
	--stp-l-grad: linear-gradient(90deg, #3fb39d, #6ec4e8 40%, #4ea6ec 70%, #ec6a98);
}

/* ------------------------------------------------------------------ Demo Mode ribbon */
body.stp .stp-ribbon--demo { background: linear-gradient(90deg, var(--stp-l-deep), var(--stp-l-deep-2)); border-bottom: 1px solid rgba(143, 208, 255, .28); color: #dbe8f3; }
body.stp .stp-ribbon--demo .sl-wrap { flex-wrap: wrap; align-items: center; gap: 6px 14px; }
body.stp .stp-ribbon--demo .sl-i { color: var(--stp-l-sky); }
body.stp .stp-ribbon--demo p { flex: 1 1 300px; min-width: 0; }
body.stp .stp-ribbon--demo strong { color: #fff; }
body.stp .stp-ribbon--demo .stp-ribbon-acts { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 4px 18px; }
body.stp .stp-ribbon-acts a { display: inline-flex; align-items: center; min-height: 32px; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(143, 208, 255, .75); text-underline-offset: 3px; }
body.stp .stp-ribbon-acts a:hover { text-decoration-color: #fff; }
body.stp .stp-ribbon-acts a:focus-visible { outline: 3px solid var(--stp-l-sky); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ launch page: hero */
body.stp .stp-launch .stp-l-mast .sl-h1 { max-width: 13ch; }
body.stp .stp-l-status { display: flex; gap: 10px; align-items: center; margin: 0; font: 600 15px/1.45 var(--sl-text); color: var(--stp-l-copy-d); }
body.stp:not(.sh-tr) .stp-l-status { color: var(--sl-copy); }
body.stp .stp-l-status strong { color: #fff; }
body.stp:not(.sh-tr) .stp-l-status strong { color: var(--sl-ink); }
body.stp .stp-l-dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ffcf5c; box-shadow: 0 0 0 3px rgba(255, 207, 92, .2); }
body.stp .stp-l-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ffcf5c; opacity: 0; }
body.stp .stp-l-ctas .sl-btn { white-space: normal; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 520px) {
	body.stp .stp-l-ctas { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
	body.stp .stp-l-ctas .sl-btn { justify-content: center; width: 100%; }
}

/* the stage: five parts of Sneaky running in lanes to the finish (decorative; the same facts are in section 03) */
body.stp .stp-l-stage { position: relative; display: grid; gap: 14px; padding: 4px 0 6px; }
body.stp .stp-l-stage-h { margin: 0; font: 800 12px/1 var(--sl-text); letter-spacing: .16em; text-transform: uppercase; color: var(--stp-l-sky); }
body.stp .stp-l-lanes { position: relative; display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(143, 208, 255, .24); }
body.stp .stp-l-lanes::after { content: ""; position: absolute; right: 0; top: -10px; bottom: -10px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #2b8fd6, #6ec4e8 60%, #3fb39d); }
body.stp .stp-l-lanes li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 0 14px 0 calc(10px + var(--d, 0) * 6%); border-bottom: 1px solid rgba(143, 208, 255, .24); }
body.stp .stp-l-lanes .sl-node { --sl-ns: 40px; flex: none; box-shadow: 0 0 0 4px rgba(12, 34, 54, .92), 0 10px 22px -12px rgba(0, 0, 0, .8); }
body.stp .stp-l-lane-t { display: grid; gap: 2px; min-width: 0; }
body.stp .stp-l-lane-t b { font: 800 15.5px/1.1 var(--sl-display); letter-spacing: -.01em; color: #fff; }
body.stp .stp-l-lane-t small { font: 600 12.5px/1.25 var(--sl-text); color: var(--stp-l-copy-d); }
body.stp .stp-l-lane-run { flex: 1 1 auto; min-width: 24px; height: 2px; background: repeating-linear-gradient(90deg, rgba(143, 208, 255, .72) 0 8px, transparent 8px 14px); transform-origin: 0 50%; }
body.stp .stp-l-finish { display: flex; gap: 12px; align-items: center; justify-self: end; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(11, 31, 50, .9); box-shadow: inset 0 0 0 1px rgba(143, 208, 255, .34), 0 18px 30px -22px rgba(0, 0, 0, .95); }
body.stp .stp-l-finish-node { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3fb39d, #2b8fd6); color: #fff; }
body.stp .stp-l-finish-node .sl-i { width: 20px; height: 20px; }
body.stp:not(.sh-tr) .stp-l-stage { padding: 18px; border-radius: var(--stp-l-radius); background: var(--stp-l-deep); }
@media (max-width: 760px) {
	body.stp .stp-l-stage { gap: 16px; }
	body.stp .stp-l-stage-h { display: none; }
	body.stp .stp-l-lanes { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 0; }
	body.stp .stp-l-lanes::after { display: none; }
	body.stp .stp-l-lanes::before { content: ""; position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; background: var(--stp-l-grad); opacity: .8; }
	body.stp .stp-l-lanes li { flex-direction: column; gap: 8px; min-height: 0; padding: 0; border: 0; text-align: center; }
	body.stp .stp-l-lane-run, body.stp .stp-l-lanes .stp-l-lane-t small { display: none; }
	body.stp .stp-l-lanes .stp-l-lane-t b { font-size: 12.5px; }
	body.stp .stp-l-finish { justify-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
	body.stp .stp-l-lanes li { animation: stp-l-in .55s var(--stp-l-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }
	body.stp .stp-l-lane-run { animation: stp-l-run .9s var(--stp-l-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 700ms); }
	body.stp .stp-l-finish { animation: stp-l-rise .6s var(--stp-l-ease) 1.55s both; }
	body.stp .stp-l-dot::after { animation: stp-l-pulse 1.8s ease-out 1s 3; }
}
@keyframes stp-l-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes stp-l-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stp-l-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes stp-l-pulse { from { opacity: .75; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }

body.stp .stp-l-closed { padding-top: 22px; }

/* ------------------------------------------------------------------ launch page: the rules strip */
body.stp .stp-l-rules { background: #fff; border-bottom: 1px solid var(--stp-l-rule); }
body.stp .stp-l-rules .sl-wrap { display: grid; gap: 16px; }
body.stp .stp-l-rules-h { margin: 0; font: 800 12px/1.2 var(--sl-text); letter-spacing: .14em; text-transform: uppercase; color: var(--stp-l-ink); }
body.stp .stp-l-rules-list { display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
body.stp .stp-l-rules-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.5; color: var(--sl-copy); }
body.stp .stp-l-rules-list strong { display: block; color: var(--sl-ink); font: 800 16px/1.3 var(--sl-display); letter-spacing: -.005em; }
body.stp .stp-l-rules-list .sl-i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #eaf4fd; color: var(--stp-l-ink); }

/* ------------------------------------------------------------------ launch page: 01 how members find a trainer */
body.stp .stp-l-members .sl-wrap, body.stp .stp-l-one .sl-wrap, body.stp .stp-l-trainers .sl-wrap { display: grid; gap: clamp(22px, 3vw, 36px); }
body.stp .stp-l-steps { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
body.stp .stp-l-steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; align-content: start; }
body.stp .stp-l-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--stp-l-ink); color: #fff; font: 800 18px/1 var(--sl-display); box-shadow: 0 0 0 6px #fff, 0 14px 24px -16px rgba(27, 111, 174, .9); }
body.stp .stp-l-steps h3 { display: flex; gap: 8px; align-items: center; margin: 4px 0 6px; }
body.stp .stp-l-steps h3 .sl-i { width: 20px; height: 20px; color: var(--stp-l-ink); }
body.stp .stp-l-steps p { margin: 0; color: var(--sl-copy); line-height: 1.55; }
/* the steps sit on one line: down the left on phones (from each number to the next), across on wide screens */
body.stp .stp-l-steps li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: -18px; width: 2px; background: linear-gradient(180deg, #2b8fd6, #3fb39d); }
@media (min-width: 960px) {
	body.stp .stp-l-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
	body.stp .stp-l-steps li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	body.stp .stp-l-steps li:not(:last-child)::before { display: none; }
	body.stp .stp-l-steps::before { content: ""; position: absolute; left: 24px; right: calc(25% - 4px); top: 23px; height: 2px; background: var(--stp-l-grad); }
}

/* ------------------------------------------------------------------ launch page: 02 for trainers */
body.stp .stp-l-split { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
	body.stp .stp-l-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
	body.stp .stp-l-split--form { grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); align-items: start; }
}
body.stp .stp-l-offer-col { display: grid; gap: 22px; }
body.stp .stp-l-offer { gap: 16px; }
body.stp .stp-l-offer li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; color: var(--sl-copy); line-height: 1.5; }
body.stp .stp-l-offer li strong { display: block; margin-bottom: 2px; color: var(--sl-ink); font: 800 17px/1.25 var(--sl-display); }
body.stp .stp-l-offer .sl-i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fff; color: var(--stp-l-ink); box-shadow: 0 0 0 1px var(--stp-l-rule); }
body.stp .stp-l-planned { display: grid; gap: 10px; padding: 16px 18px; border: 1.5px dashed #b9cfdf; border-radius: 14px; background: rgba(255, 255, 255, .7); }
body.stp .stp-l-planned-h { display: flex; gap: 8px; align-items: center; margin: 0; font: 800 12px/1.2 var(--sl-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); }
body.stp .stp-l-planned-h .sl-i { width: 16px; height: 16px; }
body.stp .stp-l-planned .sl-can li { color: var(--sl-copy); }
body.stp .stp-l-planned .sl-can .sl-i { color: var(--sl-muted); }

/* the desk illustration: shapes only, no names or numbers */
body.stp .stp-l-desk { display: grid; gap: 10px; margin: 0; justify-items: center; }
body.stp .stp-l-desk-card { width: min(100%, 470px); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--stp-l-rule), 0 40px 60px -40px rgba(12, 34, 54, .55); }
@media (min-width: 960px) { body.stp .stp-l-desk-card { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); } }
body.stp .stp-l-desk-top { display: flex; gap: 12px; align-items: center; padding: 18px 20px; background: linear-gradient(120deg, var(--stp-l-deep), var(--stp-l-deep-2)); }
body.stp .stp-l-desk-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2b8fd6, #3fb39d); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); }
body.stp .stp-l-desk-hi { display: grid; gap: 7px; flex: 1 1 auto; }
body.stp .stp-l-desk-hi b { font: 800 16px/1 var(--sl-display); color: #fff; }
body.stp .stp-l-desk-hi .stp-l-bar { background: rgba(143, 208, 255, .45); }
body.stp .stp-l-desk-tabs { display: flex; gap: 14px; padding: 0 20px; overflow: hidden; border-bottom: 1px solid var(--stp-l-rule); font: 700 12.5px/1 var(--sl-text); color: var(--sl-muted); white-space: nowrap; }
body.stp .stp-l-desk-tabs span { padding: 13px 0 11px; border-bottom: 3px solid transparent; }
body.stp .stp-l-desk-tabs .is-on { color: var(--sl-ink); border-bottom-color: var(--stp-l-blue); }
body.stp .stp-l-desk-h { margin: 14px 20px 6px; font: 800 11px/1 var(--sl-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); }
body.stp .stp-l-desk-row { display: flex; gap: 12px; align-items: center; margin: 0 14px 8px; padding: 10px 12px; border-radius: 12px; background: var(--stp-l-chalk); }
body.stp .stp-l-desk-row > span:not([class]) , body.stp .stp-l-desk-row > span:nth-child(2) { display: grid; gap: 7px; flex: 1 1 auto; min-width: 0; }
body.stp .stp-l-desk-row--next { margin-top: 14px; background: #eaf4fd; }
body.stp .stp-l-desk-row--next > .sl-i { width: 20px; height: 20px; color: var(--stp-l-ink); }
body.stp .stp-l-desk-row--next b { font: 800 13px/1 var(--sl-display); color: var(--sl-ink); }
body.stp .stp-l-desk-btn { flex: none; width: 70px; height: 26px; border-radius: 999px; background: var(--sl-teal, #246b5f); }
body.stp .stp-l-desk-dot { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #c7d7e4; }
body.stp .stp-l-desk-dot.is-b { background: #bcdcc8; }
body.stp .stp-l-desk-dot.is-c { background: #e7c9d7; }
body.stp .stp-l-desk-pill { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--sl-teal, #246b5f); color: #fff; font: 800 11.5px/1 var(--sl-text); }
body.stp .stp-l-desk-shares { display: flex; gap: 6px; align-items: center; }
body.stp .stp-l-desk-shares .sl-i { width: 14px; height: 14px; color: var(--sl-teal, #246b5f); }
body.stp .stp-l-desk-shares .stp-l-bar { flex: 0 0 var(--w); }
body.stp .stp-l-bar { display: block; width: var(--w, 50%); height: 8px; border-radius: 8px; background: #d5e2ec; }
body.stp .stp-l-bar.is-soft { height: 6px; background: #e3ecf3; }
body.stp .stp-l-desk figcaption { font: 600 13px/1.4 var(--sl-text); color: var(--sl-muted); }

/* ------------------------------------------------------------------ launch page: 03 one Sneaky */
body.stp .stp-l-pillars { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0; padding: 0; list-style: none; }
body.stp .stp-l-pillar { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 18px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--stp-l-rule), 0 22px 36px -32px rgba(12, 34, 54, .6); }
body.stp .stp-l-pillar::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--sl-node, var(--stp-l-blue)); }
body.stp .stp-l-pillar--assess::before { background: #246b5f; }
body.stp .stp-l-pillar--train::before { background: #2b8fd6; }
body.stp .stp-l-pillar--eat::before { background: #3d9442; }
body.stp .stp-l-pillar--sky::before { background: #1d6f97; }
body.stp .stp-l-pillar--learn::before { background: #b8740a; }
body.stp .stp-l-pillar .sl-node { --sl-ns: 42px; }
body.stp .stp-l-pillar h3 { margin: 4px 0 0; }
body.stp .stp-l-pillar p { margin: 0; color: var(--sl-copy); line-height: 1.5; font-size: 15px; }
body.stp .stp-l-share { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin-top: 6px !important; padding-top: 10px; border-top: 1px solid var(--stp-l-rule); font-size: 14.5px !important; }
body.stp .stp-l-share .sl-i { width: 18px; height: 18px; margin-top: 2px; }
body.stp .stp-l-share.is-yes .sl-i { color: var(--sl-teal, #246b5f); }
body.stp .stp-l-share.is-yes span { color: var(--sl-ink); }
body.stp .stp-l-share.is-later .sl-i { color: var(--sl-muted); }
body.stp .stp-l-share.is-later span { color: var(--sl-muted); }
body.stp .stp-l-never { display: flex; gap: 10px; align-items: flex-start; justify-self: center; max-width: 70ch; margin: 0; padding: 12px 18px; border-radius: 12px; background: var(--stp-l-chalk); color: var(--sl-copy); font-size: 15px; line-height: 1.5; }
body.stp .stp-l-never .sl-i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--sl-plum, #7b244b); }

/* ------------------------------------------------------------------ launch page: 04 preregistration */
body.stp .stp-l-prereg { background: var(--stp-l-chalk); border-top: 1px solid var(--stp-l-rule); }
body.stp .stp-l-prereg > .sl-wrap { display: grid; gap: clamp(22px, 3vw, 34px); }
body.stp .stp-l-formcol { display: grid; gap: 16px; padding: clamp(20px, 3vw, 34px); border-radius: var(--stp-l-radius); background: #fff; box-shadow: 0 0 0 1px var(--stp-l-rule), 0 30px 50px -44px rgba(12, 34, 54, .6); }
body.stp .stp-l-form { display: grid; gap: 18px; }
body.stp .stp-l-form .stp-chip-row { gap: 8px; }
body.stp .stp-l-send { margin-top: 4px; }
body.stp .stp-l-send .sl-btn { white-space: normal; text-align: center; }
@media (max-width: 520px) { body.stp .stp-l-send .sl-btn { width: 100%; justify-content: center; } }
body.stp .stp-l-side { position: sticky; top: 96px; }
@media (max-width: 959px) { body.stp .stp-l-side { position: static; } }
body.stp .stp-l-consent { padding: 14px 16px; border-radius: 12px; background: var(--stp-l-chalk); }
body.stp .stp-l-consent label { font-weight: 600; font-size: 15.5px; }
body.stp .stp-l-consent .stp-help { margin-top: 4px; }
body.stp .stp-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* problems and the sent state */
body.stp .stp-l-problem { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #fff4f2; box-shadow: inset 4px 0 0 #b42318; color: #5e1d14; }
body.stp .stp-l-problem > .sl-i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #b42318; }
body.stp .stp-l-problem p { margin: 0; }
body.stp .stp-l-problem ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; }
body.stp .stp-l-problem a { color: #7a1a10; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.stp .stp-l-problem:focus { outline: 3px solid #b42318; outline-offset: 3px; }
body.stp .stp-l-done { display: flex; gap: 14px; align-items: flex-start; padding: clamp(18px, 2.4vw, 26px); border-radius: 16px; background: #eef8f4; box-shadow: inset 0 0 0 1px #bfe0d3; }
body.stp .stp-l-done > .sl-i { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--sl-teal, #246b5f); color: #fff; }
body.stp .stp-l-done h3 { margin: 4px 0 6px; }
body.stp .stp-l-done p { margin: 0 0 6px; color: var(--sl-copy); line-height: 1.55; }
body.stp .stp-l-done:focus { outline: 3px solid var(--sl-teal, #246b5f); outline-offset: 3px; }

/* ------------------------------------------------------------------ launch page: launch notice (night band) */
body.stp .stp-l-notify .sl-split { align-items: center; }
body.stp .stp-l-notify-card { display: grid; gap: 14px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--stp-l-radius); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(143, 208, 255, .28); }
body.stp .stp-l-notify .stp-field > label, body.stp .stp-l-notify .stp-toggle label { color: #eef5fa; }
body.stp .stp-l-notify .stp-help, body.stp .stp-l-notify .stp-opt { color: #b9cddb; }
body.stp .stp-l-notify .stp-help a { color: #fff; text-decoration-color: var(--stp-l-sky); }
body.stp .stp-l-notify .stp-l-consent { background: rgba(255, 255, 255, .06); }
body.stp .stp-l-notify .stp-err { color: #ffb4a8; }
body.stp .stp-l-notify .stp-l-send .stp-btn-night,
body.stp .stp-l-notify .stp-l-send .stp-btn-night:is(:hover, :focus, :visited, :active) { --sl-btn-bg: #1b6fae; --sl-btn-fg: #fff; --sl-btn-bd: transparent; --sl-btn-bg-on: #2b8fd6; --sl-btn-fg-on: #fff; --sl-btn-bd-on: transparent; --sl-btn-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
body.stp .stp-l-notify .stp-l-send .stp-btn-night .sl-i { color: #fff; }
body.stp .stp-l-notify .stp-l-problem { background: #fff4f2; }
body.stp .stp-l-done--night { background: rgba(63, 179, 157, .14); box-shadow: inset 0 0 0 1px rgba(143, 208, 255, .35); }
body.stp .stp-l-done--night h3 { color: #fff; }
body.stp .stp-l-done--night p { color: #d4e3ee; }
body.stp .stp-l-done--night:focus { outline-color: var(--stp-l-sky); }
body.stp .stp-l-notify :is(a, input, button):focus-visible { outline: 3px solid var(--stp-l-sky); outline-offset: 3px; }

/* ------------------------------------------------------------------ launch page: 05 questions */
body.stp .stp-l-faq .sl-wrap { display: grid; gap: clamp(20px, 3vw, 30px); }
body.stp .stp-l-qs { display: grid; border-top: 1px solid var(--stp-l-rule); }
body.stp .stp-l-q { border-bottom: 1px solid var(--stp-l-rule); }
body.stp .stp-l-q summary { position: relative; display: block; padding: 18px 44px 18px 2px; cursor: pointer; list-style: none; font: 800 17px/1.35 var(--sl-display); letter-spacing: -.005em; color: var(--sl-ink); }
body.stp .stp-l-q summary::-webkit-details-marker { display: none; }
body.stp .stp-l-q summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2.5px solid var(--stp-l-ink); border-bottom: 2.5px solid var(--stp-l-ink); transform: rotate(45deg); transition: transform .2s var(--stp-l-ease); }
body.stp .stp-l-q[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
body.stp .stp-l-q summary:focus-visible { outline: 3px solid var(--stp-l-ink); outline-offset: 2px; border-radius: 6px; }
body.stp .stp-l-q p { margin: 0 0 18px; max-width: 68ch; color: var(--sl-copy); line-height: 1.6; }

/* ------------------------------------------------------------------ profile: the connection status line */
body.stp .stp-connect-now { display: flex; gap: 10px; align-items: center; margin: 0; font: 700 14.5px/1.3 var(--sl-text); color: #eef5fa; }
body.stp .stp-connect-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #9fbad0; box-shadow: 0 0 0 3px rgba(159, 186, 208, .22); }
body.stp .stp-connect-dot.is-ok { background: #5fd3b0; box-shadow: 0 0 0 3px rgba(95, 211, 176, .22); }
body.stp .stp-connect-dot.is-wait { background: #ffcf5c; box-shadow: 0 0 0 3px rgba(255, 207, 92, .22); }
body.stp .stp-connect-dot.is-off { background: #f2a3a3; box-shadow: 0 0 0 3px rgba(242, 163, 163, .22); }
/* the same state in the profile hero (light background: deeper dots) */
body.stp .stp-hero-state { display: flex; gap: 10px; align-items: center; margin: 2px 0 0; font: 600 15px/1.45 var(--sl-text); color: var(--sl-copy); }
body.stp .stp-hero-state .stp-connect-dot.is-ok { background: #2f9e7a; box-shadow: 0 0 0 3px rgba(47, 158, 122, .18); }
body.stp .stp-hero-state .stp-connect-dot.is-wait { background: #d39a00; box-shadow: 0 0 0 3px rgba(211, 154, 0, .18); }
body.stp .stp-hero-state .stp-connect-dot.is-off { background: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .16); }

/* ------------------------------------------------------------------ dashboard: your desk today */
body.stp .stp-desk { display: grid; gap: 16px; margin: 0 0 22px; }
body.stp .stp-desk-head { display: grid; gap: 4px; }
body.stp .stp-desk-head .sl-h3 { margin: 0; }
body.stp .stp-desk-head .sl-note { margin: 0; }
body.stp .stp-desk-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { body.stp .stp-desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.stp .stp-desk-tile { display: grid; gap: 12px; align-content: start; min-width: 0; padding: clamp(16px, 2vw, 22px); border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--stp-l-rule), 0 22px 40px -36px rgba(12, 34, 54, .55); }
body.stp .stp-desk-h { display: flex; gap: 10px; align-items: center; margin: 0; font: 800 17px/1.25 var(--sl-display); letter-spacing: -.01em; color: var(--sl-ink); }
body.stp .stp-desk-h .sl-i { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #eaf4fd; color: var(--stp-l-ink); }
body.stp .stp-desk-tile--need .stp-desk-h .sl-i { background: #fff3d6; color: #8a5a06; }
body.stp .stp-desk-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.stp .stp-desk-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--sl-copy); }
body.stp .stp-desk-list li .sl-i { width: 20px; height: 20px; margin-top: 1px; color: var(--stp-l-ink); }
body.stp .stp-desk-list li.is-act { color: var(--sl-ink); }
body.stp .stp-desk-list li.is-act .sl-i { color: #8a5a06; }
body.stp .stp-desk-list li.is-calm .sl-i { color: var(--sl-teal, #246b5f); }
body.stp .stp-desk-list li.is-later { color: var(--sl-muted); }
body.stp .stp-desk-list li.is-later .sl-i { color: var(--sl-muted); }
body.stp .stp-desk-list strong { color: var(--sl-ink); }
body.stp .stp-desk-clients { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.stp .stp-desk-clients li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--stp-l-rule); }
body.stp .stp-desk-clients li:last-child { border-bottom: 0; }
body.stp .stp-desk-clients li > span { display: grid; gap: 2px; min-width: 0; }
body.stp .stp-desk-clients strong { color: var(--sl-ink); overflow-wrap: anywhere; }
body.stp .stp-desk-clients small { font-size: 13.5px; line-height: 1.4; color: var(--sl-muted); }
body.stp .stp-desk-clients .stp-avatar--client { --stp-av: 36px; }
body.stp .stp-desk-open { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--stp-l-ink); box-shadow: inset 0 0 0 1px var(--stp-l-rule); }
body.stp .stp-desk-open:hover { background: #eaf4fd; }
body.stp .stp-desk-open:focus-visible { outline: 3px solid var(--stp-l-ink); outline-offset: 2px; }
body.stp .stp-desk-open .sl-i { width: 18px; height: 18px; }
body.stp .stp-desk-more { margin: 0; }
body.stp .stp-desk-empty { margin: 0; color: var(--sl-muted); line-height: 1.5; }
body.stp .stp-desk-feed { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.stp .stp-desk-feed li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--sl-ink); }
body.stp .stp-desk-feed .sl-i { width: 20px; height: 20px; margin-top: 1px; color: var(--stp-l-ink); }
body.stp .stp-desk-feed time { font: 700 13px/1.6 var(--sl-text); color: var(--sl-muted); white-space: nowrap; }

/* ------------------------------------------------------------------ review desk: marketplace launch */
body.stp .stp-market { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--stp-l-radius); background: #fff; box-shadow: 0 0 0 1px var(--stp-l-rule), 0 26px 44px -40px rgba(12, 34, 54, .6); }
body.stp .stp-market-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
body.stp .stp-market-head .sl-h3 { margin: 0; }
body.stp .stp-market-now { margin: 0; max-width: 72ch; color: var(--sl-copy); line-height: 1.55; }
body.stp .stp-market-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { body.stp .stp-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.stp .stp-market-grid .stp-panel { display: grid; gap: 12px; align-content: start; margin: 0; }
body.stp .stp-market-grid .stp-panel > .sl-h3 { margin: 0; }
/* 1.3: "Ready to open", the launch checks the marketplace must pass before it can open to everyone (market.php) */
body.stp .stp-ready { margin: 0 0 16px; }
body.stp .stp-ready-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
body.stp .stp-ready-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--stp-l-chalk); }
body.stp .stp-ready-list li .sl-i { flex: none; width: 20px; height: 20px; margin-top: 2px; }
body.stp .stp-ready-list strong { color: var(--sl-ink); }
body.stp .stp-ready-ok .sl-i { color: var(--sl-teal-deep, #0f6b5c); }
body.stp .stp-ready-stop { background: #fff4f2; }
body.stp .stp-ready-stop .sl-i { color: var(--sl-plum-deep, #7a2848); }
body.stp .stp-ready-warn { background: #fff8e6; }
body.stp .stp-ready-detail { display: block; margin-top: 2px; color: var(--sl-copy); font-size: 14px; }
body.stp .stp-ready-owner { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #eaf4fd; color: var(--stp-l-ink); font: 700 12px/1.6 var(--sl-text); vertical-align: middle; }
body.stp .stp-market-choice.is-off { opacity: .6; }
body.stp .stp-market-choice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 8px; padding: 12px 14px; border-radius: 12px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--stp-l-rule); }
body.stp .stp-market-choice:has(input:checked) { background: #eaf4fd; box-shadow: inset 0 0 0 2px var(--stp-l-ink); }
body.stp .stp-market-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--stp-l-ink); }
body.stp .stp-field > .stp-market-choice, body.stp .stp-market-choice span { font: 400 15px/1.45 var(--sl-text); }
body.stp .stp-market-choice span { display: grid; gap: 2px; color: var(--sl-copy); }
body.stp .stp-market-choice strong { color: var(--sl-ink); font: 800 16px/1.3 var(--sl-display); }
body.stp .stp-market-people { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.stp .stp-market-people li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--stp-l-rule); }
body.stp .stp-market-add .stp-field input { width: 100%; }
/* closure sprint (18 Oct 2026): the Emails panel */
body.stp .stp-market-emails { display: grid; gap: 12px; margin: 0; }
body.stp .stp-market-emails > .sl-h3 { margin: 0; }
body.stp .stp-market-sub { margin: 4px 0 0; font: 800 12px/1.2 var(--sl-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); }
body.stp .stp-market-previews { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; list-style: none; }
body.stp .stp-market-previews a { display: inline-flex; min-height: 32px; align-items: center; }
body.stp .stp-market-emails .stp-note, body.stp .stp-market-emails .sl-fine { margin: 0; }
body.stp .stp-market-signups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.stp :is(.stp-market, .stp-market-signups, .stp-market-grid, .stp-desk, .stp-desk-grid) > * { min-width: 0; }
body.stp .stp-market-signups > .sl-h3, body.stp .stp-market-signups > p { margin: 0; }
body.stp .stp-market-list { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--stp-l-rule); }
body.stp .stp-market-list > summary { padding: 14px 16px; cursor: pointer; font: 800 15.5px/1.3 var(--sl-display); color: var(--sl-ink); }
body.stp .stp-market-list > summary:focus-visible { outline: 3px solid var(--stp-l-ink); outline-offset: 2px; border-radius: 12px; }
body.stp .stp-market-list > :not(summary) { margin: 0 16px 16px; }
body.stp .stp-market-intro { min-width: 220px; max-width: 360px; white-space: normal; }
/* the screen-reader labels in a scrolled table are absolutely positioned: keep them inside the scrolling box */
body.stp .stp-market .stp-table-wrap { position: relative; }

/* ------------------------------------------------------------------ a sign-up's own page (closure sprint) */
body.stp .stp-l-manage-band { background: var(--stp-l-chalk); }
body.stp .stp-l-manage { display: grid; gap: 16px; max-width: 640px; margin: 0 auto; padding: clamp(22px, 3.4vw, 40px); border-radius: var(--stp-l-radius); background: #fff; box-shadow: 0 0 0 1px var(--stp-l-rule), 0 30px 50px -44px rgba(12, 34, 54, .6); }
body.stp .stp-l-manage > .sl-eyebrow { margin: 0; color: var(--stp-l-ink); }
body.stp .stp-l-manage-h { display: flex; gap: 12px; align-items: center; margin: 0; }
body.stp .stp-l-manage-h .sl-i { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #eaf4fd; color: var(--stp-l-ink); }
body.stp .stp-l-manage .sl-lead { margin: 0; }
body.stp .stp-l-manage .sl-note { margin: 0; }
body.stp .stp-l-manage-facts { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--stp-l-rule); }
body.stp .stp-l-manage-facts li { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--stp-l-rule); font-size: 15px; line-height: 1.45; }
body.stp .stp-l-manage-facts span { color: var(--sl-muted); font-weight: 600; }
body.stp .stp-l-manage-facts strong { color: var(--sl-ink); overflow-wrap: anywhere; }
body.stp .stp-l-manage .sl-actions .sl-btn { white-space: normal; text-align: center; }

@media print {
	body.stp :is(.stp-ribbon--demo, .stp-l-stage, .stp-l-desk, .stp-l-notify) { display: none; }
}