/* ==========================================================================
 * Cmsmart Stores landings (WS43, 46-SPEC §9; polish WS48): /products/cmsmart-<niche>-store.
 * Builds on productmodule/css/module.css (read-only), hub.css (.cm-st-browser frame) and luxury.css
 * .lx-*; this file only adds the store-specific blocks. One grey page background, white as card
 * surface only. Tokens only.
 *
 * Rhythm (WS48): one section scale (--st-sec-y), max 3 columns, one accent per section (brand
 * orange; neutrals otherwise), few borders and more whitespace, one eyebrow style, body line-height
 * 1.6 and headings 1.25, reveal on scroll via .lx-reveal (cm-luxury.js; 12px travel).
 * ========================================================================== */

/* ---- rhythm ---- */
.cm-st { --lx-reveal-shift: var(--st-reveal-shift); line-height: var(--st-lh-body); }
.cm-st p, .cm-st li, .cm-st dd, .cm-st summary { line-height: var(--st-lh-body); }
.cm-st h2, .cm-st h3, .cm-st .lx-head h2 { line-height: var(--st-lh-head); }
.cm-st .lx-section--tight { padding-block: var(--st-sec-y); }
.cm-st .lx-head { margin-bottom: var(--lx-head-gap); }

/* one eyebrow style: section eyebrow, group labels, plan tags, step captions */
.cm-st .lx-eyebrow, .cm-st .cm-st-label, .cm-st .cm-st-scope__sub, .cm-st .cm-st-scope__annual,
.cm-st .cm-st-fs__body p.cm-st-fs__tag, .cm-st .cm-st-flow__who b, .cm-st .cm-pm-note__label {
	display: block; margin: 0; padding: 0; background: none; border-radius: 0;
	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(--st-lh-body); color: var(--c-brand-600);
}
.cm-st .lx-eyebrow { display: inline-flex; margin-bottom: var(--sp-16); }

/* ---- hero: desktop browser + phone over a blurred photo, inset card ---- */
.cm-st .cm-pm-hero__meta { align-items: center; }
.cm-st .cm-st-licence { color: inherit; text-decoration: none; }
.cm-st .cm-st-licence:hover, .cm-st .cm-st-licence:focus-visible { text-decoration: underline; }
.cm-st .cm-st-contact { color: var(--c-brand-300); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: var(--sp-4); }
.cm-st .cm-st-contact:hover, .cm-st .cm-st-contact:focus-visible { color: var(--c-surface-0); }
.cm-st .cm-st-preview {
	margin: var(--sp-16) 0 0; padding: var(--sp-10) var(--sp-16);
	border-radius: var(--lx-radius-sm); background: var(--c-lx-scrim-soft); font-size: var(--fs-14);
}
.cm-st .cm-pm-hero__h1 { font-size: var(--text-h2); max-width: 28ch; }
.cm-st .cm-pm-hero__tagline { max-width: 60ch; }
.cm-st .cm-st-hero__capture { width: 100%; }
.cm-st .cm-st-hero__capture img { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: top center; }

.cm-st .cm-st-stage {
	position: relative; isolation: isolate;
	padding: var(--sp-32) var(--sp-32) var(--sp-64) var(--sp-24);
	border-radius: var(--lx-radius); box-shadow: var(--shadow-lx-3);
}
.cm-st .cm-st-stage__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: var(--c-navy-900); }
.cm-st .cm-st-stage__bg::before {
	content: ""; position: absolute; inset: 0; transform: scale(1.12);
	background: var(--st-stage-photo, none) center / cover no-repeat; filter: blur(var(--st-stage-blur));
}
.cm-st .cm-st-stage__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, var(--c-lx-scrim-soft) 0%, var(--c-lx-scrim-mid) 100%); }
.cm-st .cm-st-stage__desktop .cm-st-browser__view { aspect-ratio: 16 / 10; flex: 0 0 auto; }
.cm-st .cm-st-stage__phone { position: absolute; right: var(--sp-16); bottom: var(--sp-20); width: var(--st-phone-w); z-index: 2; }
.cm-st .cm-st-phone { display: block; padding: var(--st-phone-bezel); border-radius: var(--r-20); background: var(--c-navy-900); box-shadow: var(--shadow-lx-3); }
.cm-st .cm-st-phone__view { position: relative; display: block; aspect-ratio: 390 / 844; overflow: hidden; border-radius: var(--r-16); background: var(--c-surface-100); }
.cm-st .cm-st-phone__view img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0;
	transition: object-position var(--st-scroll-back) var(--lx-ease);
}
.cm-st .cm-st-stage:hover .cm-st-phone__view img { object-position: 50% 100%; transition: object-position var(--st-scroll-dur) ease-in-out; }

/* ---- what it solves: pains card + use-case photo cards ---- */
.cm-st .cm-st-solves { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: var(--lx-grid-gap); align-items: stretch; }
.cm-st .cm-st-pains { padding: var(--sp-32); background: var(--c-surface-0); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-st .cm-st-pains__list { margin: var(--sp-16) 0 0; padding: 0; list-style: none; }
.cm-st .cm-st-pains__list li { position: relative; padding: var(--sp-8) 0 var(--sp-8) var(--sp-24); font-size: var(--fs-15); color: var(--c-ink-700); }
.cm-st .cm-st-pains__list li::before {
	content: ""; position: absolute; left: 0; top: var(--sp-20);
	width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-circle); background: var(--c-brand-500);
}
.cm-st .cm-st-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-st .cm-st-cases--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-st .cm-st-cases .cm-pm-case { min-height: calc(var(--sp-96) * 2.6); }

/* ---- business flow: stepper (progress line, one capture + panel; accordion on mobile) ---- */
.cm-st .cm-st-flow__media { margin: 0; }
.cm-st .cm-st-flow__media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; width: 100%; }
.cm-st .cm-st-flow__media--phone img { object-fit: contain; object-position: center; }
.cm-st .cm-st-flow__body { display: flex; flex-direction: column; gap: var(--sp-16); align-self: center; }
.cm-st .cm-st-flow__body h3.cm-st-flow__n { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-st .cm-st-flow__body p.cm-st-flow__who { margin: 0; font-size: var(--fs-15); color: var(--c-ink-700); }
.cm-st .cm-st-flow__who b { margin-bottom: var(--sp-4); }
.cm-st .cm-st-flow__body p.cm-st-flow__f { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-ink-500); }
.cm-st .cm-st-flow__f a { color: var(--c-brand-700); text-decoration: none; }
.cm-st .cm-st-flow__f a:hover, .cm-st .cm-st-flow__f a:focus-visible { text-decoration: underline; }

/* without JS every panel is listed (SEO); the stepper chrome only exists once .is-on is set */
.cm-st .cm-st-stepper__item { margin-bottom: var(--lx-grid-gap); }
.cm-st .cm-st-stepper__tab { display: none; }
.cm-st .cm-st-stepper__panel { display: grid; grid-template-columns: minmax(0, var(--st-panel-media-w)) minmax(0, 1fr); gap: var(--lx-split-gap); padding: var(--sp-32); background: var(--c-surface-0); border-radius: var(--lx-radius); box-shadow: var(--shadow-lx-1); }

.cm-st .cm-st-stepper.is-on .cm-st-stepper__track { position: relative; display: grid; grid-template-columns: repeat(var(--st-steps), minmax(0, 1fr)); row-gap: var(--sp-32); }
.cm-st .cm-st-stepper.is-on .cm-st-stepper__item { display: contents; }
.cm-st .cm-st-stepper.is-on .cm-st-stepper__tab {
	display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); grid-row: 1; position: relative; z-index: 1;
	padding: 0 var(--sp-4); border: 0; background: none; cursor: pointer; font: inherit; color: var(--c-ink-500); text-align: center;
}
.cm-st .cm-st-stepper.is-on .cm-st-stepper__panel { grid-row: 2; grid-column: 1 / -1; transition: opacity var(--lx-dur-hover) var(--lx-ease); }
/* panels share one grid cell, so switching steps never moves the page */
.cm-st .cm-st-stepper.is-on .cm-st-stepper__panel[hidden] { display: grid; visibility: hidden; opacity: 0; pointer-events: none; }
.cm-st .cm-st-stepper.is-on .cm-st-stepper__track::before,
.cm-st .cm-st-stepper.is-on .cm-st-stepper__track::after {
	content: ""; position: absolute; top: calc((var(--st-step-n) - var(--st-line)) / 2); left: calc(50% / var(--st-steps));
	height: var(--st-line); border-radius: var(--r-pill);
}
.cm-st .cm-st-stepper.is-on .cm-st-stepper__track::before { right: calc(50% / var(--st-steps)); background: var(--c-surface-200); }
.cm-st .cm-st-stepper.is-on .cm-st-stepper__track::after {
	width: calc((100% - 100% / var(--st-steps)) * var(--st-prog, 0)); background: var(--c-brand-600);
	transition: width var(--lx-dur) var(--lx-ease);
}
.cm-st .cm-st-stepper__n {
	display: inline-flex; align-items: center; justify-content: center; width: var(--st-step-n); height: var(--st-step-n);
	border-radius: var(--r-circle); background: var(--c-surface-0); box-shadow: var(--shadow-lx-1);
	font-family: var(--font-heading); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-navy-900);
	transition: background-color var(--lx-dur-hover) var(--lx-ease), color var(--lx-dur-hover) var(--lx-ease), box-shadow var(--lx-dur-hover) var(--lx-ease);
}
.cm-st .cm-st-stepper__t { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--st-lh-head); }
.cm-st .cm-st-stepper__tab[aria-selected="true"] { color: var(--c-navy-900); }
.cm-st .cm-st-stepper__tab[aria-selected="true"] .cm-st-stepper__n { background: var(--c-brand-600); color: var(--c-surface-0); box-shadow: 0 0 0 var(--sp-4) var(--c-brand-100); }
.cm-st .cm-st-stepper__tab:hover .cm-st-stepper__n { box-shadow: var(--shadow-lx-2); }
.cm-st .cm-st-stepper__tab:focus { outline: none; }
.cm-st .cm-st-stepper__tab:focus-visible { outline: var(--sp-2) solid var(--c-brand-600); outline-offset: var(--sp-4); border-radius: var(--r-16); }

/* ---- What you get with Cmsmart Fullstore: photo cards (3 columns) ---- */
.cm-st .cm-st-fs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-st .cm-st-fs__item {
	display: flex; flex-direction: column; overflow: hidden; background: var(--c-surface-0);
	border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1);
	transition: transform var(--lx-dur-hover) var(--lx-ease), box-shadow var(--lx-dur-hover) var(--lx-ease);
}
.cm-st .cm-st-fs__item:hover { transform: translateY(var(--lx-lift)); box-shadow: var(--shadow-lx-2); }
.cm-st .cm-st-fs__media { position: relative; margin: 0; aspect-ratio: 16 / 7; overflow: hidden; background: var(--c-navy-900); }
.cm-st .cm-st-fs__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); padding: var(--sp-24); }
.cm-st .cm-st-fs__body h3 { margin: 0; font-size: var(--text-h4); color: var(--c-navy-900); }
.cm-st .cm-st-fs__body p:not(.cm-st-fs__tag) { margin: 0; font-size: var(--fs-15); color: var(--c-ink-700); }

/* ---- Fullstore price card: annual highlighted, monthly as the alternative ---- */
.cm-st .cm-st-price {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--lx-split-gap); align-items: center;
	max-width: calc(var(--sp-96) * 10); margin: var(--lx-head-gap) auto 0; padding: var(--sp-48);
	background: var(--c-surface-0); border-radius: var(--lx-radius); box-shadow: var(--shadow-lx-2);
}
.cm-st .cm-st-price__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.cm-st .cm-st-price__main p { margin: 0; }
.cm-st .cm-st-price__badge { padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); background: var(--c-brand-50); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; color: var(--c-brand-700); }
.cm-st .cm-st-price__main h3.cm-st-price__name { margin: var(--sp-8) 0 0; font-size: var(--text-h3); color: var(--c-navy-900); }
.cm-st .cm-st-price__amount { display: flex; align-items: baseline; gap: var(--sp-4); color: var(--c-navy-900); }
.cm-st .cm-st-price__amount b { font-family: var(--font-heading); font-size: var(--text-h1); line-height: var(--st-lh-head); }
.cm-st .cm-st-price__amount span { font-size: var(--fs-18); color: var(--c-ink-500); }
.cm-st .cm-st-price__billed { font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-st .cm-st-price__alt { font-size: var(--fs-15); color: var(--c-ink-700); }
.cm-st .cm-st-price__note { font-size: var(--fs-13); color: var(--c-ink-500); }
.cm-st .cm-st-price__cta { margin-top: var(--sp-16); }
.cm-st .cm-st-price__lists .cm-st-label { margin: 0 0 var(--sp-8); }
.cm-st .cm-st-price__lists .cm-st-check + .cm-st-label { margin-top: var(--sp-24); }
.cm-st .cm-st-check { margin: 0; padding: 0; list-style: none; }
.cm-st .cm-st-check li { position: relative; padding: var(--sp-4) 0 var(--sp-4) var(--sp-24); font-size: var(--fs-15); color: var(--c-ink-700); }
.cm-st .cm-st-check li::before {
	content: ""; position: absolute; left: 0; top: var(--sp-15);
	width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-circle); background: var(--c-ink-300);
}
.cm-st .cm-st-check--accent li { color: var(--c-navy-900); font-weight: var(--fw-semibold); }
.cm-st .cm-st-check--accent li::before { background: var(--c-brand-500); }

/* ---- scope: supported / not included / extra services, three inset cards (one accent) ---- */
.cm-st .cm-st-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-grid-gap); align-items: stretch; }
.cm-st .cm-st-scope__col { padding: var(--sp-32); background: var(--c-surface-0); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-st .cm-st-scope__sub { color: var(--c-ink-500); }
.cm-st .cm-st-scope__col h3 { margin: var(--sp-4) 0 var(--sp-16); font-size: var(--text-h4); color: var(--c-navy-900); }
.cm-st .cm-st-scope__list { margin: 0; padding: 0; list-style: none; }
.cm-st .cm-st-scope__list li { position: relative; padding: var(--sp-8) 0 var(--sp-8) var(--sp-24); font-size: var(--fs-15); color: var(--c-ink-700); }
.cm-st .cm-st-scope__list li::before {
	content: ""; position: absolute; left: 0; top: var(--sp-20);
	width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-circle); background: var(--c-ink-300);
}
.cm-st .cm-st-scope__col--yes .cm-st-scope__list li::before { background: var(--c-brand-500); }
.cm-st .cm-st-scope__list--links a { color: var(--c-navy-900); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: var(--sp-4); }
.cm-st .cm-st-scope__list--links a:hover, .cm-st .cm-st-scope__list--links a:focus-visible { color: var(--c-brand-600); }
.cm-st .cm-st-scope__note { display: inline-block; margin-left: var(--sp-4); font-size: var(--fs-13); color: var(--c-ink-500); font-weight: var(--fw-semibold); }
.cm-st .cm-st-scope__annual { margin-top: var(--sp-24); }
.cm-st .cm-st-scope__fine { text-align: center; margin: var(--sp-24) auto 0; }

/* ---- what's included: image-led cards (2 columns) + requirements ---- */
.cm-st .cm-st-included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-st .cm-st-included__item { display: flex; flex-direction: column; overflow: hidden; }
.cm-st .cm-st-included__media { margin: 0; border-radius: 0; }
.cm-st .cm-st-included__media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.cm-st .cm-st-included__media--phone img { object-position: center 20%; }
.cm-st .cm-st-req { margin: 0; padding: var(--sp-16) var(--sp-32); background: var(--c-surface-0); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-st .cm-st-req div { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--sp-16); padding: var(--sp-12) 0; }
.cm-st .cm-st-req dt { font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-st .cm-st-req dd { margin: 0; color: var(--c-ink-700); }
.cm-st .cm-st-note__line { font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-st .cm-st-reqsplit { margin-top: var(--lx-grid-gap); align-items: stretch; }

/* ---- related services: thumbnail + text link cards (3 columns) ---- */
.cm-st .cm-st-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-st .cm-st-svc__card {
	display: flex; align-items: stretch; height: 100%; overflow: hidden; text-decoration: none;
	background: var(--c-surface-0); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1);
	transition: transform var(--lx-dur-hover) var(--lx-ease), box-shadow var(--lx-dur-hover) var(--lx-ease);
}
.cm-st .cm-st-svc__card:hover, .cm-st .cm-st-svc__card:focus-visible { transform: translateY(var(--lx-lift)); box-shadow: var(--shadow-lx-2); }
.cm-st .cm-st-svc__media { position: relative; flex: 0 0 var(--sp-96); overflow: hidden; background: var(--c-navy-900); }
.cm-st .cm-st-svc__body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-16) var(--sp-20); }
.cm-st .cm-st-svc__body b { font-size: var(--fs-15); line-height: var(--st-lh-head); color: var(--c-navy-900); }
.cm-st .cm-st-svc__body span { font-size: var(--fs-13); color: var(--c-ink-500); }

/* ---- more stores: tall homepage cards in a browser frame (scroll on hover/focus) ---- */
.cm-st .cm-st-tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-grid-gap); margin: 0; padding: 0; list-style: none; }
.cm-st .cm-st-tall__card {
	display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none;
	background: var(--c-surface-0); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1);
	transition: transform var(--lx-dur-hover) var(--lx-ease), box-shadow var(--lx-dur-hover) var(--lx-ease);
}
.cm-st .cm-st-tall__card:hover, .cm-st .cm-st-tall__card:focus-visible { transform: translateY(var(--lx-lift)); box-shadow: var(--shadow-lx-2); }
.cm-st .cm-st-tall__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-100); }
.cm-st .cm-st-tall__media > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--lx-dur) var(--lx-ease); }
.cm-st .cm-st-tall__card:hover .cm-st-tall__media > img { transform: scale(var(--lx-zoom)); }
.cm-st .cm-st-tall__media .cm-st-browser { height: 100%; border-radius: 0; box-shadow: none; }
.cm-st .cm-st-tall__body { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-20) var(--sp-24) var(--sp-24); }
.cm-st .cm-st-tall__body b { font-family: var(--font-heading); font-size: var(--text-h4); color: var(--c-navy-900); }
.cm-st .cm-st-tall__more { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-brand-700); }

/* ---- closing band link + sticky CTA bar ---- */
.cm-st .cm-st-band__link { margin: var(--sp-16) 0 0; text-align: center; }
.cm-st .cm-st-band__link a { color: var(--c-brand-300); font-weight: var(--fw-semibold); }
.cm-st .cm-st-sticky {
	position: fixed; left: 50%; bottom: var(--sp-16); z-index: var(--z-sticky);
	display: flex; align-items: center; 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: translate(-50%, 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-st .cm-st-sticky.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform var(--lx-dur) var(--lx-ease), opacity var(--lx-dur) var(--lx-ease); }
.cm-st .cm-st-sticky__name { font-family: var(--font-heading); font-weight: var(--fw-semibold); white-space: nowrap; }
.cm-st .cm-st-sticky .cm-btn.cm-st-sticky__demo { color: var(--c-surface-0) !important; border: 1px solid var(--c-st-line-on-dark); background: transparent; }
.cm-st .cm-st-sticky .cm-btn.cm-st-sticky__demo:hover, .cm-st .cm-st-sticky .cm-btn.cm-st-sticky__demo:focus-visible { color: var(--c-surface-0) !important; border-color: var(--c-surface-0); background: var(--c-lx-line-dark); }

@media (max-width: 1100px) {
	.cm-st .cm-st-scope { grid-template-columns: minmax(0, 1fr); }
	.cm-st .cm-st-svc, .cm-st .cm-st-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-st .cm-st-solves { grid-template-columns: minmax(0, 1fr); }
	.cm-st .cm-st-price { padding: var(--sp-32); }
}
@media (max-width: 959px) {
	.cm-st .cm-st-fs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-st .cm-st-cases--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-st .cm-st-price { grid-template-columns: minmax(0, 1fr); }
	.cm-st .cm-st-stage { padding: var(--sp-24) var(--sp-20) var(--sp-48) var(--sp-16); }
}
/* mobile: the stepper becomes a vertical accordion (same buttons and panels) */
@media (max-width: 800px) {
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__track { display: block; }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__track::before, .cm-st .cm-st-stepper.is-on .cm-st-stepper__track::after { display: none; }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__item { display: block; margin-bottom: var(--sp-8); background: var(--c-surface-0); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); overflow: hidden; }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__tab { flex-direction: row; width: 100%; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); text-align: left; }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__t { flex: 1 1 auto; font-size: var(--fs-15); }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__tab::after { content: "+"; font-size: var(--fs-18); color: var(--c-ink-500); }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__tab[aria-selected="true"]::after { content: "\2212"; }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__panel { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); padding: var(--sp-8) var(--sp-16) var(--sp-24); box-shadow: none; background: none; }
	.cm-st .cm-st-stepper.is-on .cm-st-stepper__panel[hidden] { display: none; }
	.cm-st .cm-st-stepper__panel { padding: var(--sp-20); }
}
@media (max-width: 640px) {
	.cm-st .cm-st-included, .cm-st .cm-st-svc, .cm-st .cm-st-fs, .cm-st .cm-st-cases, .cm-st .cm-st-cases--3, .cm-st .cm-st-tall { grid-template-columns: minmax(0, 1fr); }
	.cm-st .cm-st-sticky { left: var(--sp-16); right: var(--sp-16); justify-content: center; transform: translateY(calc(100% + var(--sp-32))); }
	.cm-st .cm-st-sticky.is-on { transform: none; }
	.cm-st .cm-st-sticky__name { display: none; }
	.cm-st .cm-st-scope__col, .cm-st .cm-st-price { padding: var(--sp-24); }
	.cm-st .cm-st-req { padding: var(--sp-4) var(--sp-20); }
	.cm-st .cm-st-req div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
	.cm-st .cm-st-stage { padding: var(--sp-16) var(--sp-12) var(--sp-48) var(--sp-12); }
	.cm-st .cm-st-stage__phone { --st-phone-w: 30%; right: var(--sp-8); }
}
@media (prefers-reduced-motion: reduce) {
	.cm-st .cm-st-phone__view img { transition: none !important; object-position: 50% 0 !important; }
	.cm-st .cm-st-stepper__n, .cm-st .cm-st-stepper__panel, .cm-st .cm-st-stepper__track::after { transition: none; }
	.cm-st .cm-st-fs__item:hover, .cm-st .cm-st-svc__card:hover, .cm-st .cm-st-tall__card:hover { transform: none; }
}