/*
 * Service page kit (WS81, 74-PLAN section 3), used by helpers/service_kit.php on the Strapi service
 * view, the migration and integration views and the /services hub. Design tokens only (tokens.css,
 * luxury.css): same spacing scale, radius and shadow levels as the Cmsmart Stores landings. Inset
 * cards, no full-width bands. Light and dark through --color-* tokens. Loaded with ?v=filemtime.
 */

/* ---- section rhythm (lx-section--tight / lx-wrap / lx-head) ---- */
.cm-sk-sec { padding-block: var(--lx-section-y-tight); }
.cm-sk-wrap { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); box-sizing: border-box; }
.cm-sk-wrap--narrow { max-width: calc(var(--measure-block) + 2 * var(--container-pad)); }
.cm-sk-head { max-width: var(--lx-head-max); margin: 0 auto var(--lx-head-gap); text-align: center; }
.cm-sk-head h2 {
	margin: 0 auto; max-width: var(--lx-h2-measure);
	font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--fw-semibold);
	line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--c-navy-900); text-transform: none;
}
.cm-sk-eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-10); margin: 0 0 var(--sp-16);
	font-family: var(--font-heading); font-size: var(--lx-eyebrow-size); font-weight: var(--fw-semibold);
	letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; line-height: var(--lh-base); color: var(--c-brand-600);
}
.cm-sk-eyebrow::before { content: ""; width: var(--sp-24); height: var(--sp-2); border-radius: var(--r-pill); background: currentColor; opacity: .7; }
.cm-sk-lede { max-width: var(--lx-lede-measure); margin: var(--sp-16) auto 0; font-size: var(--text-lead); line-height: var(--lh-body); color: var(--color-text-muted); }
.cm-sk-h3 { margin: 0 0 var(--sp-16); font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-sk-fine { margin: var(--sp-16) 0 0; font-size: var(--fs-13); line-height: var(--lh-body); color: var(--color-text-muted); }
.cm-sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-sk a:focus-visible, .cm-sk summary:focus-visible, .cm-sk-sticky a:focus-visible,
.cm-sk-hub a:focus-visible, .cm-sk-hub button:focus-visible, .cm-sk-hub input:focus-visible {
	outline: var(--sp-2) solid var(--c-accent-500); outline-offset: var(--sp-2); box-shadow: var(--focus-ring); border-radius: var(--r-4);
}

/* ---- hero visual: browser frame + optional phone (fixed ratios: no layout shift) ---- */
.cm-sk-hero { position: relative; margin: 0; }
.cm-sk-hero--duo { padding: 0 var(--sp-24) var(--sp-24) 0; }
.cm-sk-browser { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--lx-radius-sm); background: var(--c-surface-0); box-shadow: var(--shadow-lx-3); }
.cm-sk-browser__bar { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; height: var(--st-bar-h); padding-inline: var(--sp-12); background: var(--c-surface-200); }
.cm-sk-browser__bar i { display: block; width: var(--st-dot); height: var(--st-dot); border-radius: var(--r-circle); background: var(--c-ink-300); }
.cm-sk-browser__view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-100); }
.cm-sk-browser__view img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.cm-sk-phone { position: absolute; right: 0; bottom: 0; z-index: 2; display: block; width: var(--st-phone-w); padding: var(--st-phone-bezel); border-radius: var(--r-20); background: var(--c-navy-900); box-shadow: var(--shadow-lx-3); }
.cm-sk-phone__view { position: relative; display: block; aspect-ratio: 390 / 844; overflow: hidden; border-radius: var(--r-16); background: var(--c-surface-100); }
.cm-sk-phone__view img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.cm-sk-hero__cap { margin: var(--sp-12) 0 0; font-size: var(--fs-13); line-height: var(--lh-body); color: inherit; opacity: .85; }
.cm-pm-hero .cm-sk-hero__cap { color: var(--c-lx-on-dark-muted); opacity: 1; }

/* ---- AIO answer box + key facts ---- */
.cm-sk-answer { padding: var(--sp-24) var(--sp-32); margin: 0 0 var(--sp-24); background: var(--color-surface); border: 1px solid var(--c-lx-line); border-left: var(--sp-4) solid var(--c-brand-500); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-sk-answer .cm-sk-eyebrow { margin-bottom: var(--sp-8); }
.cm-sk-answer__q { margin: 0 0 var(--sp-12); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--c-navy-900); }
.cm-sk-answer__text { margin: 0; font-size: var(--text-lead); line-height: var(--lh-body); color: var(--color-text); }
.cm-sk-tablewrap { overflow-x: auto; border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); background: var(--color-surface); }
.cm-sk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-15); color: var(--color-text); }
.cm-sk-table caption { padding: var(--sp-16) var(--sp-20) var(--sp-8); text-align: left; font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-sk-table th, .cm-sk-table td { padding: var(--sp-12) var(--sp-20); text-align: left; vertical-align: top; border-top: 1px solid var(--c-lx-line); }
.cm-sk-table tbody th { width: 28%; font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-sk-table thead th { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--c-navy-900); background: var(--color-surface-sunken); }

/* ---- diagram (CmsmartIntegrationDiagram markup, same rules as integration.css) ---- */
.cm-sk-dia .cm-ig { --ig-line: var(--c-navy-400); --ig-node-bg: var(--color-surface); --ig-node-line: var(--c-navy-300); --ig-ink: var(--color-text); margin: 0; padding: var(--sp-24); background: var(--color-surface); border: 1px solid var(--c-lx-line); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
[data-theme="dark"] .cm-sk-dia .cm-ig { --ig-line: var(--color-link); --ig-node-line: var(--color-link); }
.cm-sk-dia .ig-svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.cm-sk-dia .ig-svg--wide { max-width: calc(var(--sp-80) * 12); }
.cm-sk-dia .ig-svg--tall { display: none; max-width: calc(var(--sp-80) * 4); }
.cm-sk-dia .ig-node { fill: var(--ig-node-bg); stroke: var(--ig-node-line); stroke-width: 1.5; }
.cm-sk-dia .ig-node--key { fill: var(--c-navy-500); stroke: var(--c-navy-500); }
.cm-sk-dia .ig-node--cta { stroke: var(--c-brand-500); stroke-width: 2; }
.cm-sk-dia .ig-node--side { stroke-dasharray: 5 4; }
.cm-sk-dia .ig-t { fill: var(--ig-ink); font-family: var(--font-heading); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.cm-sk-dia .ig-t--key { fill: var(--c-surface-0); }
.cm-sk-dia .ig-t--small { font-size: var(--fs-12); font-weight: var(--fw-normal); }
.cm-sk-dia .ig-lbl { fill: var(--color-text-muted); font-family: var(--font-base); font-size: var(--fs-12); text-anchor: middle; }
.cm-sk-dia .ig-lbl--left { text-anchor: start; }
.cm-sk-dia .ig-lbl--right { text-anchor: end; }
.cm-sk-dia .ig-line { stroke: var(--ig-line); stroke-width: 2; fill: none; }
.cm-sk-dia .ig-line--dash { stroke-dasharray: 5 4; }
.cm-sk-dia .ig-ah { fill: var(--ig-line); }
.cm-sk-dia .ig-badge { fill: var(--c-brand-500); }
.cm-sk-dia .ig-badge-t { fill: var(--c-surface-0); font-family: var(--font-heading); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.cm-sk-dia .cm-ig__cap { margin: var(--sp-16) 0 0; font-size: var(--fs-14); color: var(--color-text-muted); }

/* ---- scope: included / not included / extra + what we need ---- */
.cm-sk-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-80) * 3)), 1fr)); gap: var(--lx-grid-gap); }
.cm-sk-scope__col, .cm-sk-need { padding: var(--sp-32); background: var(--color-surface); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-sk-scope__col h3, .cm-sk-need h3 { margin: 0 0 var(--sp-12); font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-sk-scope ul, .cm-sk-need ul { margin: 0; padding: 0; list-style: none; }
.cm-sk-scope li, .cm-sk-need li { position: relative; padding: var(--sp-8) 0 var(--sp-8) var(--sp-24); font-size: var(--fs-15); line-height: var(--lh-body); color: var(--color-text); }
.cm-sk-scope li::before, .cm-sk-need li::before { content: ""; position: absolute; left: 0; top: var(--sp-16); width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-circle); background: var(--c-ink-300); }
.cm-sk-scope__col--yes li::before { background: var(--c-brand-500); }
.cm-sk-scope__col--extra li::before { background: var(--c-navy-400); }
.cm-sk-need { margin-top: var(--lx-grid-gap); }
.cm-sk-need ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-80) * 4)), 1fr)); column-gap: var(--sp-32); }

/* ---- trust row: figures, expert card, projects, logos ---- */
.cm-sk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-80) * 2.5)), 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-sk-stat { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-24); text-align: center; background: var(--color-surface); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-sk-stat__n { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--c-navy-900); font-variant-numeric: tabular-nums; }
.cm-sk-stat__l { font-weight: var(--fw-semibold); color: var(--color-text); }
.cm-sk-stat__note { font-size: var(--fs-13); color: var(--color-text-muted); }
.cm-sk-sec--trust > .cm-sk-wrap > .cm-sk-fine { text-align: center; }
.cm-sk-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lx-grid-gap); margin-top: var(--sp-32); }
.cm-sk-trust--expert { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: start; }
.cm-sk-expert { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-32); background: var(--color-surface); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-2); }
.cm-sk-expert__photo { width: var(--sp-96); height: var(--sp-96); border-radius: var(--r-circle); object-fit: cover; }
.cm-sk-expert__body p { margin: 0; }
.cm-sk-expert__name { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-sk-expert__role { font-size: var(--fs-14); color: var(--color-text-muted); }
.cm-sk-expert__text { margin-top: var(--sp-12) !important; color: var(--color-text); }
.cm-sk-expert__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-20); margin-top: var(--sp-20) !important; }
.cm-sk-link { font-weight: var(--fw-semibold); color: var(--color-link); text-decoration: underline; text-underline-offset: var(--sp-4); }
.cm-sk-link:hover { color: var(--color-link-hover); }
.cm-sk-proj__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-sk-proj__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: inherit; background: var(--color-surface); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); transition: box-shadow var(--lx-dur-hover) var(--lx-ease), transform var(--lx-dur-hover) var(--lx-ease); }
.cm-sk-proj__card:hover { box-shadow: var(--shadow-lx-2); transform: translateY(calc(var(--sp-2) * -1)); }
.cm-sk-proj__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-sunken); }
.cm-sk-proj__media img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.cm-sk-proj__logo { position: absolute !important; left: var(--sp-12); bottom: var(--sp-12); width: auto !important; height: var(--sp-40) !important; max-width: 50%; padding: var(--sp-4) var(--sp-8); object-fit: contain; background: var(--c-surface-0); border-radius: var(--r-8); box-shadow: var(--shadow-lx-1); }
.cm-sk-proj__media .cm-sk-proj__logo:first-child { inset: auto; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); height: var(--sp-64) !important; }
.cm-sk-proj__body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-16) var(--sp-20) var(--sp-20); }
.cm-sk-proj__tag { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; color: var(--c-brand-600); overflow-wrap: anywhere; }
.cm-sk-proj__name { font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--c-navy-900); }
.cm-sk-proj__status { font-size: var(--fs-13); color: var(--color-text-muted); }
.cm-sk-logos { margin-top: var(--sp-32); text-align: center; }
.cm-sk-logos__label { margin: 0 0 var(--sp-16); font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; color: var(--color-text-muted); }
.cm-sk-logos__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--sp-80) * 1.5), 1fr)); gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-sk-logos__list a { display: flex; align-items: center; justify-content: center; height: var(--sp-80); padding: var(--sp-12); background: var(--c-surface-0); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-sk-logos__list img { max-width: 100%; max-height: var(--sp-48); width: auto; height: auto; object-fit: contain; }

/* ---- related tutorials ---- */
.cm-sk-tut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-sk-tut__card { display: flex; flex-direction: column; gap: var(--sp-8); height: 100%; padding: var(--sp-24); text-decoration: none; color: inherit; background: var(--color-surface); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); transition: box-shadow var(--lx-dur-hover) var(--lx-ease); }
.cm-sk-tut__card:hover { box-shadow: var(--shadow-lx-2); }
.cm-sk-tut__type { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; color: var(--c-brand-600); }
.cm-sk-tut__title { font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--c-navy-900); }
.cm-sk-tut__ex { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--color-text-muted); }
.cm-sk-more { margin: var(--sp-20) 0 0; text-align: center; }
.cm-sk-more a { font-weight: var(--fw-semibold); color: var(--color-link); }

/* ---- Extra sections on a service page (WS83: brand services merged as an anchored H2, data/group-services.json) ---- */
.cm-sk-sec--extra { scroll-margin-top: var(--sp-96); }
.cm-sk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-80) * 3)), 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-sk-card { padding: var(--sp-24); background: var(--color-surface); border: 1px solid var(--c-lx-line); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-sk-card h3 { margin: 0 0 var(--sp-8); font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-sk-card p { margin: 0; }
.cm-sk-links { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); margin: var(--sp-24) 0 0; padding: 0; list-style: none; }
.cm-sk-links a { font-weight: var(--fw-semibold); color: var(--color-link); }

/* ---- /services hub: cluster grid, filter chips + search, grouped tiles ---- */
.cm-sk-clusters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--sp-80) * 3.5)), 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-sk-cluster__card { display: flex; flex-direction: column; gap: var(--sp-8); height: 100%; padding: var(--sp-24); box-sizing: border-box; text-decoration: none; color: inherit; background: var(--color-surface); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); transition: box-shadow var(--lx-dur-hover) var(--lx-ease), transform var(--lx-dur-hover) var(--lx-ease); }
a.cm-sk-cluster__card:hover { box-shadow: var(--shadow-lx-2); transform: translateY(calc(var(--sp-2) * -1)); }
.cm-sk-cluster__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--sp-48); height: var(--sp-48); border-radius: var(--r-12); background: var(--color-surface-sunken); color: var(--c-navy-500); }
.cm-sk-cluster__name { margin: var(--sp-4) 0 0; font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--c-navy-900); }
.cm-sk-cluster__text { flex: 1 1 auto; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--color-text); }
.cm-sk-cluster__count { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-brand-700); }
.cm-sk-cluster--assess .cm-sk-cluster__card { border: 1px dashed var(--c-brand-500); box-shadow: none; }
.cm-sk-cluster--assess .cm-btn { align-self: flex-start; margin-top: var(--sp-8); }
.cm-sk-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16); margin: 0 0 var(--sp-16); }
.cm-sk-filter__chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.cm-sk-chip { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--btn-min-h); padding: var(--sp-8) var(--sp-16); border: 1px solid var(--c-lx-line); border-radius: var(--r-pill); background: var(--color-surface); color: var(--c-navy-900); font: inherit; font-size: var(--fs-14); font-weight: var(--fw-semibold); cursor: pointer; }
.cm-sk-chip span { color: var(--color-text-muted); font-weight: var(--fw-normal); }
.cm-sk-chip:hover { border-color: var(--c-navy-400); }
.cm-sk-chip.is-active { background: var(--c-navy-900); border-color: var(--c-navy-900); color: var(--c-surface-0); }
.cm-sk-chip.is-active span { color: var(--c-lx-on-dark-muted); }
.cm-sk-search input { min-height: var(--input-min-h); min-width: calc(var(--sp-80) * 3); padding: var(--sp-8) var(--sp-16); border: 1px solid var(--color-border-strong); border-radius: var(--r-pill); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--fs-15); }
.cm-sk-filter__status { margin: 0 0 var(--sp-16); font-size: var(--fs-13); color: var(--color-text-muted); min-height: var(--lh-body); }
.cm-sk-group { margin: 0 0 var(--sp-40); }
.cm-sk-group[hidden], .cm-sk-hub .svc-tile[hidden] { display: none !important; }
.cm-sk-group__h { margin: 0 0 var(--sp-16); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-sk-empty { text-align: center; color: var(--color-text-muted); }
.cm-sk-hub .svc-tile__media .svc-media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
@media (max-width: 767px) {
	.cm-sk-filter { flex-direction: column; align-items: stretch; }
	.cm-sk-filter__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-4); scrollbar-width: thin; }
	.cm-sk-chip { flex: 0 0 auto; }
	.cm-sk-search input { width: 100%; min-width: 0; box-sizing: border-box; }
}

/* ---- sticky quote bar: phones and small tablets only (<= 768px) ---- */
.cm-sk-sticky { display: none; }
@media (max-width: 768px) {
	.cm-sk-sticky {
		position: fixed; left: var(--sp-12); right: var(--sp-12); bottom: var(--sp-12); z-index: var(--z-sticky);
		display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
		padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-20);
		background: var(--c-navy-900); color: var(--c-surface-0); border-radius: var(--r-pill); box-shadow: var(--shadow-lx-3);
		transform: translateY(calc(100% + var(--sp-32))); opacity: 0; visibility: hidden;
		transition: transform var(--lx-dur) var(--lx-ease), opacity var(--lx-dur) var(--lx-ease), visibility 0s linear var(--lx-dur);
	}
	.cm-sk-sticky.is-on { transform: none; opacity: 1; visibility: visible; transition: transform var(--lx-dur) var(--lx-ease), opacity var(--lx-dur) var(--lx-ease); }
	.cm-sk-sticky__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
	.cm-sk-sticky__btn { flex: 0 0 auto; white-space: nowrap; }
	.cm-sk-sticky a:focus-visible { outline-color: var(--c-surface-0); }
	body:has(.cm-sk-sticky) { padding-bottom: calc(var(--sp-80) + var(--sp-8)); }
}

/* ---- responsive ---- */
@media (max-width: 1023px) {
	.cm-sk-trust--expert { grid-template-columns: minmax(0, 1fr); }
	.cm-sk-proj__list, .cm-sk-tut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.cm-sk-dia .cm-ig { padding: var(--sp-16); }
	.cm-sk-dia .ig-svg--wide { display: none; }
	.cm-sk-dia .ig-svg--tall { display: block; }
	.cm-sk-answer { padding: var(--sp-20); }
	.cm-sk-scope__col, .cm-sk-need, .cm-sk-expert { padding: var(--sp-24); }
	.cm-sk-proj__list, .cm-sk-tut { grid-template-columns: minmax(0, 1fr); }
	.cm-sk-table th, .cm-sk-table td { padding: var(--sp-10) var(--sp-12); }
	.cm-sk-facts tbody th { width: 34%; }
	.cm-sk-hero--duo { padding: 0 var(--sp-12) var(--sp-16) 0; }
	.cm-sk-phone { --st-phone-w: 30%; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-sk-proj__card, .cm-sk-tut__card, .cm-sk-sticky { transition: none !important; }
	.cm-sk-proj__card:hover { transform: none; }
}