/* =====================================================================
   MMCall Design System  —  design-core.css (base primitives + tokens)
   Standalone design layer. No Bootstrap / jQuery / Stack dependency.

   HOW IT WORKS
   - Structural component classes are prefixed `ds-` and are driven
     entirely by CSS custom properties (design tokens).
   - The industrial direction is the committed default: its color/font
     token block lives in :root (see design-system.css §1, which loads
     second). Rules apply globally to any page that loads this
     stylesheet — no [data-dir] wrapper scope is needed anymore.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SHARED PRIMITIVES  (type scale, spacing, radii, motion)
   --------------------------------------------------------------------- */
:root {
	/* Fluid type scale (major-third-ish, clamped for responsiveness) */
	--fs-eyebrow: 0.78rem;
	--fs-small:   0.875rem;
	--fs-body:    1.0625rem;
	--fs-lead:    clamp(1.125rem, 0.9rem + 0.9vw, 1.375rem);
	--fs-h4:      1.25rem;
	--fs-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	--fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 2.85rem);
	--fs-h1:      clamp(2.5rem, 1.7rem + 3.8vw, 4.25rem);
	--fs-display: clamp(3rem, 2.6rem + 5vw, 5.5rem);

	/* Spacing scale (8pt-ish) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	/* Section vertical rhythm */
	--section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

	/* Layout */
	--container: 1180px;
	--container-narrow: 820px;

	/* Radii */
	--radius-sm: 8px;
	--radius:    14px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.28s;

	/* Monospace for specs / model numbers (technical, hardware feel) */
	--font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------------
   2. THEME TOKENS
   The committed industrial palette/fonts live in :root — defined in
   design-system.css §1 (loaded second). No per-direction [data-dir]
   scopes remain; the design applies globally wherever this loads.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   3. BASE  (design CSS only loads on design-system pages, so these
   apply globally — no wrapper scope needed)
   --------------------------------------------------------------------- */
body {
	margin: 0;
	/* Explicit, so the body keeps the viewport width if a script ever makes it
	   position: fixed. Calendly's popup does exactly that on iOS to lock scroll;
	   without a width the body turns shrink-to-fit, the page silently re-lays
	   out at the 1180px container width behind the overlay, and the demo iframes
	   reload at that width and hand back a wrong height when it closes. */
	width: 100%;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	letter-spacing: var(--head-tracking);
	line-height: 1.1;
	color: inherit;
	margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

/* Card, step and feature titles inside these components sit directly under a
   section h2, so they are h3 in the outline, but they were designed at h4 size
   and must stay there. Declared here, before the components' own rules, so a
   component that wants a different size can still override it. */
:is(.ds-card, .ds-device, .ds-kit__item, .ds-step, .dx-tl, .dx-statcard,
    .dx-flow__step, .dx-topcard, .dx-topcard__hd, .dx-kit__item, .dx-fp__body,
    .sc-modal-description, .dx-cfg-base, .dx-cfg-row__info, .dx-ac-row__info,
    .dx-promise, .px-par__hd, .cs-card, .storyboard-conclusion,
    .accordion-title, .conclusion-cta, .process__item) h3 {
	font-size: var(--fs-h4);
	line-height: 1.3;
}

/* Size utilities. The legal pages run ~60 numbered clauses deep, so their
   headings need to hold a designed size while the heading level follows the
   document outline. */
.ds-h1 { font-size: var(--fs-h1); line-height: 1.1; }
.ds-h2 { font-size: var(--fs-h2); line-height: 1.1; }
.ds-h3 { font-size: var(--fs-h3); line-height: 1.2; }
.ds-h4 { font-size: var(--fs-h4); line-height: 1.3; }

/* Available to assistive tech and to crawlers, absent from the visual layout.
   For pages whose design carries no headline but still need one in the
   outline. */
.ds-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

p  { margin: 0 0 var(--sp-4); }
a:not(.ds-btn)  { color: var(--accent); text-decoration: none; }
a:not(.ds-btn):hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------------
   4. LAYOUT HELPERS
   --------------------------------------------------------------------- */
.ds-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.ds-section--tight { padding-top: calc(var(--section-y) * 0.6); padding-bottom: calc(var(--section-y) * 0.6); }
/* Thin logo/trust ribbon — just a support strip under the hero, minimal
   vertical padding. Keep it compact. */
.ds-section--ribbon { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

.ds-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--sp-5);
	padding-right: var(--sp-5);
}
.ds-container--narrow { max-width: var(--container-narrow); }

.ds-bg-subtle { background: var(--bg-subtle); }

.ds-grid { display: grid; gap: var(--sp-5); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
	/* minmax(0,1fr), not 1fr: a 1fr track cannot go below its content's
	   min-content width, so a card holding an unbreakable run — a nowrap unit
	   label, a long word — held the single column wider than the phone and
	   pushed the whole page sideways. Identical wherever the content does fit. */
	.ds-grid--3, .ds-grid--4, .ds-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

.ds-center { text-align: center; }
.ds-measure { max-width: 46ch; }
.ds-center .ds-measure { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   5. TYPOGRAPHIC ELEMENTS
   --------------------------------------------------------------------- */
.ds-eyebrow {
	display: inline-block;
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-4);
}
.ds-lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------- */
.ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Both are needed. justify-content centers the label as a flex item, which is
	   all a one-line button needs; once the label wraps (see --lg under 480px, and
	   the price cards) that item fills the button and its lines are placed by
	   text-align, which would otherwise inherit start and read as left-aligned. */
	text-align: center;
	gap: var(--sp-2);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 0.95em 1.6em;
	border-radius: var(--radius-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease),
	            background var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            color var(--dur) var(--ease);
	text-decoration: none;
	white-space: nowrap;
}
.ds-btn:hover { text-decoration: none; transform: translateY(-2px); }

.ds-btn--primary {
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: var(--shadow-sm);
}
.ds-btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow); }

.ds-btn--secondary {
	background: transparent;
	color: var(--ink);
	border-color: var(--border-strong);
}
.ds-btn--secondary:hover { border-color: var(--ink); background: var(--bg-subtle); }

.ds-btn--ghost {
	background: transparent;
	color: var(--accent);
	padding-left: 0.4em;
	padding-right: 0.4em;
}
.ds-btn--ghost:hover { transform: none; text-decoration: underline; }

.ds-btn--lg { font-size: var(--fs-body); padding: 1.05em 2em; }
.ds-btn--block { display: flex; width: 100%; }

/* Buttons never wrap, so on a small phone a long call-to-action label pushed the
   whole page sideways. Here a large button may wrap instead. The looser
   line-height is paid for out of the vertical padding (2*1.05 + 1 = 2*0.925 +
   1.25), so a label that still fits on one line renders at exactly its old size. */
@media (max-width: 480px) {
	.ds-btn--lg {
		max-width: 100%;
		white-space: normal;
		line-height: 1.25;
		padding: 0.925em 2em;
	}
}

/* Two-tone ring rather than a single outline: buttons sit on white, on the
   subtle band and on the dark hero, and no one colour is visible on all three.
   The white halo reads against dark bands, the dark ring against light ones.
   Declared after the variants because they set their own box-shadow at equal
   specificity and would otherwise win. :focus-visible only, so pointer users
   never see it. */
.ds-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--ink);
}

/* On dark backgrounds (hero/band), invert the secondary button */
.ds-hero--dark .ds-btn--secondary,
.ds-band .ds-btn--secondary {
	color: var(--band-ink);
	border-color: rgba(255,255,255,.28);
}
.ds-hero--dark .ds-btn--secondary:hover,
.ds-band .ds-btn--secondary:hover {
	border-color: var(--band-ink);
	background: rgba(255,255,255,.06);
}

/* ---------------------------------------------------------------------
   7. BADGES / PILLS / TRUST LINE
   --------------------------------------------------------------------- */
.ds-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-small);
	font-weight: 600;
	padding: 0.4em 0.9em;
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent);
}
/* Items are plain spans; the middot is generated between them, never before the
   first, and stays quieter than the text it separates. */
.ds-trustline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
	align-items: center;
	font-size: var(--fs-small);
	color: var(--ink-faint);
}
.ds-trustline > * { display: inline-flex; align-items: center; }
.ds-trustline > * + *::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .8;
	margin-right: var(--sp-3);
}
/* Narrow screens wrap the line, and a leading separator on the second row reads
   as a stray bullet — space the claims out instead. */
@media (max-width: 720px) {
	.ds-trustline { gap: var(--sp-2) var(--sp-5); }
	.ds-trustline > * + *::before { display: none; }
}

/* ---------------------------------------------------------------------
   8. CARDS
   --------------------------------------------------------------------- */
.ds-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
	height: 100%;
}
.ds-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.ds-card :is(h3, h4) { margin-bottom: var(--sp-3); }
.ds-card p:last-child { margin-bottom: 0; color: var(--ink-soft); }

.ds-card__icon {
	width: 54px; height: 54px;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--radius);
	background: var(--accent-soft);
	color: var(--accent);
	margin-bottom: var(--sp-5);
}
.ds-card__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------
   9. HERO
   --------------------------------------------------------------------- */
.ds-hero {
	background: var(--hero-bg);
	color: var(--hero-ink);
	padding: clamp(4rem, 3rem + 6vw, 8rem) 0;
	position: relative;
	overflow: hidden;
}
.ds-hero--dark { color: var(--hero-ink); }
.ds-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--sp-8);
	align-items: center;
}
@media (max-width: 900px) { .ds-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.ds-hero h1 { color: var(--hero-ink); margin-bottom: var(--sp-5); }
.ds-hero .ds-lead { color: var(--hero-ink-soft); margin-bottom: var(--sp-6); }
.ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ds-hero__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--surface);
	aspect-ratio: 4 / 3;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border);
}
.ds-hero--dark .ds-hero__media { border-color: rgba(255,255,255,.12); }
.ds-hero__media-placeholder {
	color: var(--ink-faint);
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   10. STAT BAND
   --------------------------------------------------------------------- */
.ds-band {
	background: var(--band-bg);
	color: var(--band-ink);
	padding: var(--section-y) 0;
}
.ds-band .ds-eyebrow { color: var(--band-accent); }
.ds-band h2 { color: var(--band-ink); }
.ds-stat { text-align: center; }
.ds-stat__num {
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	font-size: var(--fs-display);
	line-height: 1;
	color: var(--band-accent);
	letter-spacing: -0.03em;
}
.ds-stat__label { color: var(--band-ink-soft); font-size: var(--fs-small); margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------
   11. TESTIMONIAL
   --------------------------------------------------------------------- */
.ds-quote {
	max-width: var(--container-narrow);
	margin: 0 auto;
	text-align: center;
}
.ds-quote__body {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--fs-h3);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: var(--sp-5);
}
.ds-quote__mark { color: var(--accent); font-size: 3rem; line-height: 0; display: block; margin-bottom: var(--sp-4); font-family: Georgia, serif; }
.ds-quote__name { font-weight: 700; }
.ds-quote__title { color: var(--ink-faint); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------
   12. CTA BAND
   ---------------------------------------------------------------------
   A bar rather than a filled rectangle: the ask sits on the left and the
   button on the right, on the line the eye is already travelling, instead
   of centred under a heading with a block of empty red on either side.
   The diagonal hatch is the same one the dark proof band carries, so the
   band reads as a designed surface at any width.
   Every page closes on this, always through includes/components/cta.php,
   which sits it inside a tinted .ds-bg-subtle section: on bare white the
   bar reads as an orphan floating above the dark footer. */
.ds-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5) var(--sp-7);
	background: linear-gradient(100deg, var(--accent-hover) 0%, var(--accent) 58%);
	color: var(--accent-ink);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 1.4rem + 2.2vw, 3.25rem) clamp(1.75rem, 1rem + 3vw, 3.5rem);
	text-align: left;
}
.ds-cta::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px);
}
.ds-cta > * { position: relative; z-index: 1; }
.ds-cta h2 { color: var(--accent-ink); margin: 0; max-width: 32ch; }
/* No page passes a lead today; if one does it takes its own line under the
   heading rather than squeezing into the bar. */
.ds-cta .ds-lead { flex: 0 0 100%; color: var(--accent-ink); opacity: 0.9; margin: 0; }
.ds-cta .ds-btn--primary { background: #fff; color: var(--accent); }
.ds-cta .ds-btn--primary:hover { background: #fff; box-shadow: var(--shadow-lg); }
@media (max-width: 720px) {
	.ds-cta { flex-direction: column; text-align: center; gap: var(--sp-5); }
	.ds-cta h2 { max-width: none; }
}

/* =====================================================================
   13. HARDWARE COMPONENTS
   The pieces that make a page read "physical product," not "app":
   real product photography, spec tables, kit contents, labeled parts,
   functional signal colors, certification marks.
   ===================================================================== */

/* --- 13a. Product photo placeholder (marks where real photos go) --- */
.ds-photo {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background:
		repeating-linear-gradient(-45deg, transparent 0 22px, rgba(128,128,128,.045) 22px 44px),
		var(--bg-subtle);
	border: 1.5px dashed var(--border-strong);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--sp-2);
	min-height: 280px;
	padding: var(--sp-6);
	color: var(--ink-faint);
}
.ds-photo--wide  { aspect-ratio: 16 / 10; min-height: 0; }
.ds-photo--square{ aspect-ratio: 1 / 1;  min-height: 0; }
.ds-photo--tall  { aspect-ratio: 3 / 4;  min-height: 0; }
.ds-photo svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: .7; }
.ds-photo__tag {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 600;
}
.ds-photo__cap { font-size: var(--fs-small); max-width: 30ch; }
/* Real photo state: a .ds-photo holding an <img> drops the placeholder
   chrome and shows the image within the same aspect-ratio box. */
.ds-photo:has(img) { border: 0; background: #fff; }
.ds-photo > img { width: 100%; height: 100%; object-fit: contain; }

/* --- 13b. Labeled part callouts overlaid on a product photo --------- */
.ds-callout {
	position: absolute;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	z-index: 2;
}
.ds-callout__dot {
	width: 28px; height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.8rem;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ds-callout__label {
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0.3em 0.8em;
	font-size: var(--fs-small);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
}

/* --- 13c. Device strip (a row of hardware products) ---------------- */
.ds-device { text-align: center; }
.ds-device .ds-photo { min-height: 0; aspect-ratio: 1 / 1; margin-bottom: var(--sp-4); }
.ds-device :is(h3, h4) { margin-bottom: var(--sp-1); }
.ds-device__model {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--ink-faint);
	text-transform: uppercase;
}
.ds-device p { color: var(--ink-soft); font-size: var(--fs-small); margin: var(--sp-2) 0 0; }

/* --- 13d. Spec table (the tell-tale hardware element) -------------- */
.ds-spec {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body);
}
.ds-spec caption {
	text-align: left;
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	font-size: var(--fs-h4);
	color: var(--ink);
	padding-bottom: var(--sp-4);
}
.ds-spec th, .ds-spec td { text-align: left; padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.ds-spec th { color: var(--ink-soft); font-weight: 500; width: 45%; }
.ds-spec td { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.ds-spec tr:last-child th, .ds-spec tr:last-child td { border-bottom: 0; }

/* --- 13e. "What's in the box" kit grid ----------------------------- */
.ds-kit__item { text-align: center; }
.ds-kit__item .ds-photo { aspect-ratio: 1 / 1; min-height: 0; margin-bottom: var(--sp-3); }
.ds-kit__qty {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius-pill);
	padding: 0.15em 0.6em;
	margin-bottom: var(--sp-2);
}
.ds-kit__item :is(h3, h4) { font-size: 1rem; margin: 0; }

/* --- 13f. Functional signal-status row (the andon story) ----------- */
.ds-signal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.ds-signal__item {
	display: flex; align-items: center; gap: var(--sp-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--sp-4) var(--sp-5);
	flex: 1 1 180px;
}
.ds-signal__led {
	width: 14px; height: 14px; border-radius: 50%;
	flex: 0 0 14px;
	box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent), 0 0 12px currentColor;
}
.ds-signal__led--green { color: #22c55e; background: #22c55e; }
.ds-signal__led--amber { color: #f5a524; background: #f5a524; }
.ds-signal__led--red   { color: #ef4444; background: #ef4444; }
.ds-signal__txt strong { display: block; font-family: var(--font-head); }
.ds-signal__txt span { font-size: var(--fs-small); color: var(--ink-soft); }

/* --- 13g. Certification / trust marks ------------------------------ */
.ds-certs { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: stretch; }
.ds-cert {
	display: flex; flex-direction: column; justify-content: center;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-5);
	background: var(--surface);
	min-width: 120px;
}
.ds-cert strong { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.04em; }
.ds-cert span { font-size: var(--fs-small); color: var(--ink-faint); }

/* Hardware bits sitting on a dark band invert their surfaces */
.ds-band .ds-signal__item,
.ds-band .ds-cert { background: color-mix(in srgb, var(--band-ink) 6%, transparent); border-color: color-mix(in srgb, var(--band-ink) 14%, transparent); }
.ds-band .ds-signal__txt span,
.ds-band .ds-cert span { color: var(--band-ink-soft); }
.ds-band .ds-spec th { color: var(--band-ink-soft); }
.ds-band .ds-spec td, .ds-band .ds-spec caption { color: var(--band-ink); }
.ds-band .ds-spec th, .ds-band .ds-spec td { border-color: color-mix(in srgb, var(--band-ink) 14%, transparent); }

/* =====================================================================
   14. FORMS, CARDS & SECTION PATTERNS
   ===================================================================== */

/* --- 15a. Form controls (instant-quote style) --------------------- */
.ds-field { margin-bottom: var(--sp-4); }
.ds-label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.ds-input, .ds-select, .ds-textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 0.8em 1em;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds-textarea { min-height: 120px; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ink-faint); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}
.ds-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359617a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 18px;
	cursor: pointer;
}
.ds-form-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	box-shadow: var(--shadow);
}

/* --- 15b. Pricing / quote card ------------------------------------ */
.ds-price {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	box-shadow: var(--shadow-sm);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.ds-price--featured { border-color: var(--accent); box-shadow: var(--shadow-lg); position: relative; }
.ds-price__amount { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.02em; }
.ds-price__amount small { font-size: var(--fs-small); font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.ds-price__list { list-style: none; margin: var(--sp-5) 0; padding: 0; flex: 1; }
.ds-price__list li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; color: var(--ink-soft); }
.ds-price__list svg { flex: 0 0 20px; width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }

/* --- 15c. Case-study card ----------------------------------------- */
.ds-case {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds-case:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ds-case .ds-photo { border: 0; border-radius: 0; min-height: 0; aspect-ratio: 16 / 9; }
.ds-case__body { padding: var(--sp-6); }
.ds-case__metric { font-family: var(--font-head); font-weight: var(--head-weight); font-size: var(--fs-h2); color: var(--accent); line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.ds-case__src { font-size: var(--fs-small); color: var(--ink-faint); margin-top: var(--sp-4); }

/* --- 15d. Logo wall — full-colour logos (no boxes), matching the
   original "trusted ribbon" (65px, 90% opacity, barely-there grayscale).
   Base size suits a subtle validation strip (Field-tested since 2009). */
.ds-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-6) var(--sp-8); }
.ds-logo { display: inline-flex; align-items: center; justify-content: center; }
.ds-logo img { max-height: 52px; max-width: 168px; width: auto; object-fit: contain; opacity: 0.9; mix-blend-mode: multiply; transition: opacity 0.15s ease; }
.ds-logo:hover img { opacity: 1; }
/* Prominent customer wall (used when there are only a few logos to show,
   e.g. "A Trusted Partner to the Best") — bigger and more spread out. */
.ds-logos--wall { gap: var(--sp-7) var(--sp-9); }
.ds-logos--wall .ds-logo img { max-height: 64px; max-width: 180px; }

/* --- 15e. How-it-works steps -------------------------------------- */
.ds-steps { counter-reset: step; }
.ds-step { position: relative; padding-top: var(--sp-6); }
.ds-step__n {
	counter-increment: step;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-family: var(--font-head);
	font-weight: 700;
	margin-bottom: var(--sp-4);
}
.ds-step__n::before { content: counter(step); }
.ds-step :is(h3, h4) { margin-bottom: var(--sp-2); }
.ds-step p { color: var(--ink-soft); margin: 0; }

/* --- 15f. Comparison table ---------------------------------------- */
.ds-compare { width: 100%; border-collapse: collapse; }
.ds-compare th, .ds-compare td { padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); }
.ds-compare thead th { font-family: var(--font-head); font-weight: var(--head-weight); }
.ds-compare thead th:not(:first-child) { text-align: center; }
.ds-compare td:not(:first-child) { text-align: center; }
.ds-compare th:first-child { color: var(--ink-soft); font-weight: 500; }
.ds-compare .col-us { background: var(--accent-soft); border-radius: var(--radius-sm); }
.ds-compare .yes { color: #16a34a; font-weight: 700; }
.ds-compare .no  { color: var(--ink-faint); }

/* --- 15g. FAQ accordion (native details/summary) ------------------ */
.ds-faq details { border-bottom: 1px solid var(--border); }
.ds-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-5) 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-h4);
	color: var(--ink);
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
	content: "";
	flex: 0 0 12px;
	width: 12px; height: 12px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
	transition: transform var(--dur) var(--ease);
}
.ds-faq details[open] summary::after { transform: rotate(-135deg); }
.ds-faq__a { padding: 0 0 var(--sp-5); color: var(--ink-soft); max-width: 70ch; }

/* --- 15h. Footer -------------------------------------------------- */
.ds-footer { background: var(--band-bg); color: var(--band-ink); padding: var(--sp-8) 0 var(--sp-6); }
.ds-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 720px) { .ds-footer__grid { grid-template-columns: 1fr 1fr; } }
.ds-footer h5 { font-family: var(--font-head); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--band-ink-soft); margin: 0 0 var(--sp-4); }
.ds-footer ul { list-style: none; margin: 0; padding: 0; }
.ds-footer li { margin-bottom: var(--sp-3); }
.ds-footer a:not(.ds-btn) { color: var(--band-ink); opacity: 0.8; }
.ds-footer a:not(.ds-btn):hover { opacity: 1; }
.ds-footer__brand p { color: var(--band-ink-soft); max-width: 34ch; }
.ds-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--band-ink) 14%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); color: var(--band-ink-soft); font-size: var(--fs-small); }