/* =========================================================================
   netex · pages/service.css · the four AI service pages (templates/service.php)
   Role tokens only (--bg, --fg, --fg-2, --rule, --sig, --leak, --link…) + palette tokens
   for the few fixed objects (Molten fills, N-bar). Mobile-first; 360 px floor.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- shared measures ------------------------------------------------------- */
.svc-sec { --svc-gap: clamp(var(--s-6), 4vw, var(--s-8)); }
.svc-body { max-width: var(--measure); color: var(--fg); }
.svc-body > p + p, .svc-body p + p { margin-top: .9em; }
.svc-k { display: block; margin-bottom: var(--s-1); font: 500 var(--t-micro)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.svc-after { margin-top: var(--s-6); }
.svc-srcline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.svc-src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); vertical-align: baseline; }
.svc-src .nx-tipwrap { max-width: 100%; }
.svc-src .nx-source { display: inline-flex; align-items: center; min-height: 24px; } /* WCAG 2.5.8 target size */
.svc-src .nx-label { white-space: normal; text-align: left; max-width: 100%; }
.svc-labels { display: inline-flex; }
.svc-mono-line { margin-top: var(--s-5); font: 500 .8125rem/1.6 var(--f-mono); color: var(--fg-2); max-width: var(--measure); }
.svc-code { margin: var(--s-2) 0 0; padding: var(--s-4); overflow-x: auto; background: var(--ink); color: var(--paper); border: var(--bw) solid var(--rule-dark); font: 400 .8125rem/1.55 var(--f-mono); white-space: pre; tab-size: 2; max-width: 100%; }
.svc-icon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.svc-nobr { white-space: nowrap; }
/* Text links read as links when they wrap (phones): left-aligned, the arrow right after the last word
   (the flex button centres a wrapped label and parks the arrow at the far edge). */
.svc-sec .nx-btn--text { display: inline-block; text-align: start; }
.svc-sec .nx-btn--text .nx-btn__arrow { display: inline-block; margin-left: .45em; vertical-align: -.18em; }

.svc-list { margin: var(--s-5) 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.svc-list--ruled > li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6); border-top: var(--bw) solid var(--rule); }
.svc-list--ruled > li:last-child { border-bottom: var(--bw) solid var(--rule); }
.svc-list--ruled > li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-3) + .62em); width: 12px; height: 1.5px; background: var(--fg); clip-path: polygon(0 0, 100% 0, calc(100% - 1.4px) 100%, 0 100%); }

.svc-formula {
	margin-top: var(--s-6);
	padding: var(--s-4) var(--s-5);
	border-block: var(--bw) solid var(--rule);
	font: 500 .875rem/1.6 var(--f-mono);
	color: var(--fg);
	max-width: none;
}
.svc-formula__k { color: var(--sig); font-weight: 700; margin-right: .3em; }

/* ---- 47° chamfers, alternating (bible §2.2): br on the outgoing, tl on the incoming ---------- */
.svc-ch-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch-v)), calc(100% - var(--ch)) 100%, 0 100%); z-index: 1; }
.svc-ch-tl { clip-path: polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch-v)); margin-top: calc(-1 * var(--ch-v)); padding-top: calc(var(--sec-y) + var(--ch-v)); }
.svc-ch-x { clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch-v)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch-v)); margin-top: calc(-1 * var(--ch-v)); padding-top: calc(var(--sec-y) + var(--ch-v)); z-index: 1; }
.svc-ch-br, .svc-ch-x { padding-bottom: calc(var(--sec-y) + var(--ch-v) * .5); }
:is(.svc-ch-br, .svc-ch-x) + .nx-section { margin-top: calc(-1 * var(--ch-v)); padding-top: calc(var(--sec-y) + var(--ch-v)); }
.svc-last { padding-bottom: calc(var(--sec-y) + var(--ch-v)); }

/* Slip-cut headlines with locked line breaks (service.js): the flared copy never re-wraps. */
.svc-cut-lb .cut__b { white-space: nowrap; }

/* ---- hero ------------------------------------------------------------------- */
.svc-hero { --bleed: calc((100vw - min(100vw - 2 * var(--margin), var(--max))) / 2); justify-content: flex-start; }
.svc-hero__grid { row-gap: var(--s-7); align-items: center; }
.svc-hero__text { position: relative; z-index: 2; }
.svc-hero__scene { margin: 0 0 var(--s-4); font-family: var(--f-serif); font-style: italic; font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.45; color: var(--fg-2); max-width: 44ch; }
.svc-hero__h1 { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; }
.svc-hero__display { display: block; font-size: min(var(--t-display), 4.4rem); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 15ch; text-wrap: balance; }
html[lang="el"] .svc-hero__display { font-size: min(var(--t-display), 4rem); max-width: 16ch; }
.svc-hero__kw { max-width: 34ch; margin-top: var(--s-3); font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); text-wrap: balance; }
.svc-hero__sub { margin-top: var(--s-5); max-width: 54ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.svc-hero__actions { margin-top: var(--s-5); }
/* Phones: the hero CTA keeps the Molten budget (≤ 5 % of the first screen) next to the header button. */
@media (max-width: 479px) { .svc-hero__actions .nx-btn--primary { min-height: 44px; padding-inline: 16px; font-size: .875rem; } }
.svc-hero__micro { margin-top: var(--s-4); max-width: 46ch; }
.svc-hero__media { position: relative; margin-right: calc(-1 * var(--margin)); }
.svc-hero__media .nx-media, .svc-hero__media .nx-video { clip-path: polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch-v)); }
@media (min-width: 1024px) {
	.svc-hero__text { grid-column: 1 / span 6; }
	.svc-hero__media { grid-column: 7 / -1; margin-right: calc(-1 * var(--bleed)); }
}
@media (min-width: 1024px) and (max-height: 820px) {
	.svc-hero__sub { font-size: 1.0625rem; }
}

/* the AI disclosure quote (front desk) */
.svc-disclose { margin: var(--s-6) 0 0; padding: var(--s-4) 0 0 var(--s-5); border-left: var(--bw-2) solid var(--sig); max-width: 46ch; }
.svc-disclose__q { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem); line-height: 1.4; color: var(--fg); }
.svc-disclose__cap { margin-top: var(--s-3); font: 500 var(--t-micro)/1.5 var(--f-mono); letter-spacing: .03em; color: var(--fg-2); }

/* ---- demo shell inside the hero -------------------------------------------------------------- */
.svc-demo {
	position: relative;
	margin-top: clamp(var(--s-8), 7vw, var(--s-10));
	padding: clamp(var(--s-4), 2.4vw, var(--s-6));
	background: var(--bg-2);
	border: var(--bw) solid var(--rule);
	clip-path: var(--clip-sheet);
	container-type: inline-size;
	scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.svc-demo__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: var(--bw) solid var(--rule); }
.svc-demo__title { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.1; letter-spacing: var(--tr-h3); max-width: none; margin-right: auto; }
.svc-demo__hint { flex-basis: 100%; font: 500 .75rem/1.5 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
.svc-demo__rm { margin-top: var(--s-4); }
html:not(.rm) .svc-demo__rm { display: none; }
/* No script, or app.js could not load the engine: the server-rendered end state stays, the failure line
   says so (copy demo_load_error) and the controls that need the engine step aside (never a dead button). */
.svc-demo__error { display: none; grid-column: 1 / -1; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1.5px solid var(--leak); background: var(--bg-2); font-size: var(--t-small); line-height: 1.5; color: var(--fg); }
html:not(.js) .svc-demo__error, [data-engine-state="error"] > .svc-demo__error { display: block; }
html:not(.js) [data-js-only], [data-engine-state="error"] [data-js-only] { display: none !important; }

.svc-decode { margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--bw) solid var(--rule); }
.svc-decode__title { margin-bottom: var(--s-3); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.svc-decode dl { display: grid; gap: var(--s-4) var(--gutter); margin: 0; }
.svc-decode__row dt { font: 500 var(--t-micro)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sig); }
.svc-decode__row dd { margin: var(--s-1) 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--fg); }
@container (min-width: 720px) { .svc-decode dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-decode__cta { margin-top: var(--s-5); }

/* ---- the document that reads itself (svc-doc) ------------------------------------------------ */
.svc-doc__stage { display: grid; gap: var(--s-5); align-items: start; }
.svc-doc__tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.svc-doc__pick {
	display: grid;
	gap: var(--s-2);
	justify-items: start;
	min-height: 44px;
	padding: var(--s-3);
	border: var(--bw) solid var(--rule);
	background: transparent;
	color: var(--fg);
	font: 500 .8125rem/1.25 var(--f-sans);
	text-align: left;
	cursor: grab;
	touch-action: none;
	transition: background-color var(--dur-ui) var(--ease-mech), border-color var(--dur-ui) var(--ease-mech);
}
.svc-doc__pick[aria-pressed="true"] { border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }
@media (hover: hover) { .svc-doc__pick:hover { background: var(--bg); border-color: var(--fg); } }
.svc-doc__pick.is-drag { opacity: .4; }
.svc-doc__thumb { display: grid; gap: 3px; width: 34px; padding: 5px 5px 7px; background: var(--paper); clip-path: polygon(0 0, 78% 0, 100% 18%, 100% 100%, 0 100%); }
.svc-doc__thumb i { display: block; height: 2px; background: var(--steel-dark); }
.svc-doc__thumb i:nth-child(1) { width: 60%; background: var(--ink); }
.svc-doc__thumb i:nth-child(4) { width: 45%; margin-left: auto; }
.svc-doc__ghost { position: fixed; z-index: var(--z-dialog); pointer-events: none; padding: var(--s-2) var(--s-3); background: var(--paper); color: var(--ink); font: 500 .8125rem/1.2 var(--f-sans); box-shadow: var(--shadow-print-ink); transform: translate(-50%, -50%) rotate(-3deg); }

.svc-doc__frame { position: relative; min-height: 340px; padding: var(--s-4); background: repeating-linear-gradient(0deg, transparent 0 23px, var(--rule) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--rule) 23px 24px); outline-offset: 3px; overflow: hidden; }
.svc-doc__frame.is-over { box-shadow: inset 0 0 0 2px var(--sig); }
.svc-doc__drop { position: absolute; inset: var(--s-4); display: none; place-items: center; border: 1.5px dashed var(--fg-3); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); text-align: center; padding: var(--s-4); }
.svc-doc.is-empty .svc-doc__drop { display: grid; }
.svc-doc.is-empty .svc-paper { display: none; }

.svc-paper {
	position: relative;
	padding: var(--s-5) var(--s-5) var(--s-6);
	background: var(--paper);
	color: var(--ink);
	--fg: var(--ink); --fg-2: var(--steel-dark); --rule: var(--rule-light); --sig: var(--cyan-deep); --leak: var(--molten-deep);
	font: 400 .875rem/1.45 var(--f-sans);
	box-shadow: 6px 6px 0 rgb(8 9 14 / .55);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
	overflow: hidden;
	isolation: isolate;
}
.svc-paper + .svc-paper { margin-top: var(--s-5); }
.js .svc-doc .is-off { display: none; }
.svc-paper__wm { position: absolute; left: 50%; top: 50%; z-index: -1; font: 800 4.5rem/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-3); transform: translate(-50%, -50%) rotate(-47deg); white-space: nowrap; pointer-events: none; }
.svc-paper__wm::before { content: attr(data-wm); }
.svc-paper__head { display: grid; gap: var(--s-1); padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--ink); }
.svc-paper__from { font-weight: 700; font-size: 1rem; }
.svc-paper__meta, .svc-paper__date { font: 500 .75rem/1.4 var(--f-mono); color: var(--steel-dark); }
.svc-paper__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-3); }
.svc-paper__title { font-weight: 640; }
.svc-paper__lines { margin: 0; padding: var(--s-2) 0; list-style: none; border-block: var(--bw) solid var(--rule-light); display: grid; gap: var(--s-2); font-size: .8125rem; }
.svc-paper__sums, .svc-paper__kv { display: grid; gap: var(--s-1); margin: var(--s-3) 0 0; }
.svc-paper__sums div, .svc-paper__kv div { display: flex; justify-content: space-between; gap: var(--s-4); }
.svc-paper__sums dt, .svc-paper__kv dt { font: 500 .6875rem/1.6 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--steel-dark); }
.svc-paper__sums dd, .svc-paper__kv dd { margin: 0; font-family: var(--f-mono); font-size: .8125rem; text-align: right; }
.svc-paper__kv dd { font-family: var(--f-sans); }
.svc-paper__sums .is-total dd { font-weight: 700; }
.svc-paper__box { position: relative; display: inline; padding: 0 1px; transition: box-shadow 90ms steps(2, jump-end); }
.svc-paper__box.is-boxed { box-shadow: 0 0 0 1.5px var(--cyan-deep); background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.svc-paper__box.is-low { box-shadow: 0 0 0 2px var(--molten-deep); background: color-mix(in srgb, var(--molten) 10%, transparent); }
.svc-doc.is-wrong [data-blur] .svc-paper__box > span { filter: blur(1.6px); }
.svc-doc__beam { position: absolute; top: -20%; bottom: -20%; left: 0; width: 28%; pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--cyan) 14%, transparent); border-left: 2px solid var(--cyan); transform: translateX(-140%) skewX(-43deg); }
.svc-doc.is-scanning .svc-doc__beam { opacity: 1; animation: svc-beam 1100ms linear forwards; }
@keyframes svc-beam { from { transform: translateX(-140%) skewX(-43deg); } to { transform: translateX(460%) skewX(-43deg); } }

.svc-doc__erp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; } /* the JSON <pre> scrolls; its long lines never widen the column (review rv2: the notes under it were clipped) */
.svc-doc__tabs { justify-self: start; }
.svc-doc__state { display: flex; align-items: center; gap: var(--s-2); font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--sig); }
.svc-doc__dot { width: 8px; height: 8px; background: currentColor; }
.svc-doc.is-busy .svc-doc__dot { animation: svc-blink 600ms steps(2, jump-none) infinite; }
@keyframes svc-blink { 50% { opacity: .2; } }
.svc-doc__formtitle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--rule); font: 500 var(--t-micro)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.svc-doc__form dl { margin: 0; }
.svc-doc__f { display: grid; grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr); gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--rule); }
.svc-doc__f.is-cont { border-top: 0; }
.svc-doc__f dt { font: 500 .6875rem/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.svc-doc__f dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); font-size: .875rem; line-height: 1.4; color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.svc-doc__conf, .svc-doc__spec { font: 500 .6875rem/1.3 var(--f-mono); color: var(--sig); white-space: nowrap; }
.svc-doc__spec::before { content: "✓ "; }
.svc-doc__f.is-low .svc-doc__conf { color: var(--leak); }
.svc-doc__f.is-low dd { box-shadow: inset 2px 0 0 var(--leak); padding-left: var(--s-2); }
.svc-doc__f.is-pending .svc-doc__v, .svc-doc__f.is-pending .svc-doc__conf, .svc-doc__f.is-pending .svc-doc__spec { visibility: hidden; }
.svc-doc__f.is-pending dd::before { content: "—"; color: var(--fg-3); }
.svc-doc__check { display: block; margin-top: var(--s-2); padding-left: 1.4em; text-indent: -1.4em; font: 500 .75rem/1.5 var(--f-mono); color: var(--sig); }
.svc-doc__check::before { content: "✓"; display: inline-block; width: 1.4em; text-indent: 0; font-weight: 700; }
.svc-doc__check .nx-tipwrap { margin-left: var(--s-1); text-indent: 0; vertical-align: middle; }
.svc-doc__check.is-bad { color: var(--leak); }
.svc-doc__check.is-bad::before { content: "!"; }
.svc-doc__check.is-pending { visibility: hidden; }
.svc-doc__json pre { max-height: 22rem; overflow: auto; margin: 0; padding: var(--s-4); background: var(--ink); color: var(--paper); border: var(--bw) solid var(--rule); font: 400 .75rem/1.55 var(--f-mono); }
.svc-doc__note { margin-top: var(--s-2); font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }
.svc-doc__timer { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); }
.svc-doc__timerv { font: 600 .9375rem/1.3 var(--f-mono); color: var(--fg); }
.svc-doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.svc-doc__msg { min-height: 1.4em; font: 500 .8125rem/1.45 var(--f-mono); color: var(--sig); }
.svc-doc__msg:empty { display: none; }
.svc-doc__explain { position: relative; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 1.4em); border-top: 1.5px solid var(--leak); background: var(--bg); font-size: var(--t-small); line-height: 1.5; }
.svc-doc__explain::before, .svc-pipe__explain::before, .svc-calc__warn::before { content: "!"; position: absolute; left: var(--s-4); top: var(--s-3); font: 700 .875rem/1.5 var(--f-mono); color: var(--leak); }
.svc-doc__upload { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: 1.5px dashed var(--fg-3); font-size: var(--t-small); }
/* Phones: three samples in a row leave ~90 px per button; «Πιστοποιητικό» must not touch the edge. */
@container (max-width: 440px) {
	.svc-doc__pick { padding: var(--s-2); font-size: .75rem; hyphens: manual; }
	.svc-doc__thumb { width: 28px; }
}
@container (min-width: 760px) {
	.svc-doc__stage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.svc-doc__tray { grid-column: 1 / -1; }
}
@container (min-width: 1080px) {
	.svc-doc__stage { grid-template-columns: 11rem minmax(0, 1.15fr) minmax(0, 1fr); }
	.svc-doc__tray { grid-column: auto; grid-template-columns: 1fr; }
	.svc-doc__tray, .svc-doc__frame { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
	/* No engine: the sample tray steps aside, so the document and the form share the row. */
	html:not(.js) .svc-doc__stage, [data-engine-state="error"] .svc-doc__stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ---- automation s2: the bar sliced thin ----------------------------------------------------- */
.svc-bar { margin: var(--svc-gap) 0 0; }
.svc-bar__track { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.svc-bar__slice { flex: var(--w) 1 0; min-width: 0; display: grid; gap: var(--s-3); }
.svc-bar__fill { display: block; height: clamp(56px, 6vw, 88px); border: 1.5px solid var(--fg); background: var(--hatch); color: color-mix(in srgb, var(--fg) 26%, transparent); transform-origin: left center; }
.svc-bar__label { font: 500 .6875rem/1.35 var(--f-mono); letter-spacing: .02em; color: var(--fg); padding-right: var(--s-2); }
.svc-bar.is-stepping .svc-bar__slice:not(.is-on) .svc-bar__fill { transform: scaleX(0); }
.svc-bar.is-stepping .svc-bar__slice:not(.is-on) .svc-bar__label { visibility: hidden; }
.svc-bar__fill { transition: transform 240ms steps(4, jump-end); }
.svc-bar__cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.svc-bar__total { font: 700 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--leak); }
.svc-bar__note { font-size: var(--t-small); color: var(--fg-2); }
@media (max-width: 767px) {
	.svc-bar__track { flex-direction: column; gap: var(--s-2); }
	.svc-bar__slice { display: grid; grid-template-columns: calc(var(--w) * 1%  * 2.6) minmax(0, 1fr); align-items: center; gap: var(--s-3); }
	.svc-bar__fill { height: 34px; }
}

/* ---- automation s3: e-invoicing date stamp --------------------------------------------------- */
.svc-hook__grid { row-gap: var(--s-7); align-items: center; }
.svc-hook__text h2 { margin-bottom: var(--s-6); }
/* Hand-built text columns (no .nx-sechead): the display keeps its distance from what follows. */
:is(.svc-channels__head, .svc-voice__text, .svc-handoffs__text, .svc-run__text) h2 { margin-bottom: var(--s-5); }
.svc-hook__erp { padding-left: var(--s-4); border-left: var(--bw-2) solid var(--sig); }
.svc-hook__stampwrap { display: flex; justify-content: center; }
.svc-datestamp { display: inline-grid; gap: var(--s-2); padding: var(--s-5) var(--s-6); border: 3px solid var(--fg); outline: 1px solid var(--fg); outline-offset: 5px; transform: rotate(-4deg); text-align: center; }
.svc-datestamp.is-stamping { animation-name: svc-stamp-rot; }
@keyframes svc-stamp-rot { from { opacity: 0; transform: rotate(-4deg) scale(1.12); } to { opacity: 1; transform: rotate(-4deg); } }
.svc-datestamp__k { font: 600 var(--t-label)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.svc-datestamp__v { font: 700 clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem)/1 var(--f-mono); letter-spacing: -.02em; color: var(--fg); }
/* Phones: the rotated stamp keeps its corners (and the 5 px outline) inside the 16 px gutter. */
@media (max-width: 599px) {
	.svc-hook__stampwrap { padding: var(--s-3) var(--s-2); }
	.svc-datestamp { max-width: calc(100% - var(--s-4)); padding: var(--s-4) var(--s-5); }
	.svc-datestamp__v { font-size: clamp(1.375rem, 1rem + 2.2vw, 1.75rem); }
}
@media (min-width: 1024px) {
	.svc-hook__text { grid-column: 1 / span 7; }
	.svc-hook__stampwrap { grid-column: 9 / -1; }
}

/* ---- automation s4: five automations (accordion index) ---------------------------------------- */
.svc-five { container-type: inline-size; border-bottom: var(--bw) solid var(--rule); }
.svc-five__cols { display: none; }
.svc-five__sum { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-5); align-items: center; min-height: 72px; padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); list-style: none; cursor: pointer; }
.svc-five__title { font: var(--w-h3) var(--t-h4)/1.25 var(--f-sans); }
.svc-five__gone { grid-column: 1; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }
.svc-five__measure { grid-column: 1; font: 500 .75rem/1.4 var(--f-mono); color: var(--sig); }
.svc-five__sum .nx-faq__sign { grid-column: 2; grid-row: 1 / span 3; }
.svc-five__body { display: grid; gap: var(--s-5); padding: 0 0 var(--s-6); }
.svc-five__body p { max-width: var(--measure); }
.svc-five__human { position: relative; padding-left: 52px; }
.svc-five__hand { position: absolute; left: 0; top: 0; width: 40px; height: 40px; color: var(--sig); }
.svc-five__see { margin-left: var(--s-2); font-size: var(--t-small); }
@container (min-width: 900px) {
	.svc-five__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) 18px; gap: var(--s-5); padding-bottom: var(--s-2); font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
	.svc-five__sum { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) 18px; }
	.svc-five__gone, .svc-five__measure { grid-column: auto; }
	.svc-five__sum .nx-faq__sign { grid-column: 4; grid-row: 1; }
	.svc-five__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-left: 0; }
}
@media (hover: hover) { .svc-five__sum:hover .svc-five__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.svc-five__row[open] .svc-five__sum { background: linear-gradient(var(--fg), var(--fg)) top left / 100% 2px no-repeat; }

/* ---- automation s5: the pipeline ------------------------------------------------------------- */
.svc-pipe__wrap { position: relative; container-type: inline-size; }
.svc-pipe__fly { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.svc-pipe__tok { position: absolute; left: 0; top: 0; padding: 3px 7px 4px; background: var(--paper); color: var(--ink); font: 600 .6875rem/1 var(--f-mono); font-variant-numeric: tabular-nums; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--cyan); will-change: transform; }
.svc-pipe__tok.is-low { background: var(--molten); color: var(--ink); box-shadow: none; }
.svc-pipe__rail { position: relative; display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.svc-pipe__st { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-content: start; }
.svc-pipe__node { grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; padding: 12px; border: var(--bw) solid var(--rule); background: var(--bg); color: var(--fg); }
.svc-pipe__st.is-human .svc-pipe__node { border: 2px solid var(--sig); color: var(--sig); }
.svc-pipe__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.2; }
.svc-pipe__detail { font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.svc-pipe__chip { justify-self: start; padding: 2px 8px; border: var(--bw) solid var(--sig); font: 500 .6875rem/1.4 var(--f-mono); color: var(--sig); }
.svc-pipe__st:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 60px; bottom: calc(-1 * var(--s-5)); width: 1.5px; background: var(--sig); }
@container (min-width: 900px) {
	.svc-pipe__rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
	.svc-pipe__st { grid-template-columns: 1fr; }
	.svc-pipe__node { grid-row: auto; margin-bottom: var(--s-3); }
	.svc-pipe__st:not(:last-child)::after { left: 64px; right: calc(-1 * var(--s-5) + 8px); top: 27px; bottom: auto; width: auto; height: 1.5px; clip-path: polygon(0 0, 100% 0, calc(100% - 1.4px) 100%, 0 100%); }
}
.svc-pipe__desk { display: grid; gap: var(--s-5); margin-top: var(--svc-gap); padding: var(--s-5); border: var(--bw) solid var(--rule); background: var(--bg-2); }
.svc-pipe__controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3) var(--s-6); padding-bottom: var(--s-4); border-bottom: var(--bw) solid var(--rule); }
.svc-pipe__thresh { display: grid; gap: var(--s-1); min-width: min(100%, 18rem); }
.svc-pipe__thresh output { color: var(--fg); margin-left: .4em; }
.svc-pipe__controls .nx-field__help { flex: 1 1 18rem; max-width: 40ch; }
.svc-pipe__qtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.svc-pipe__qn { color: var(--leak); }
.svc-pipe__items { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; min-height: 52px; }
.svc-pipe__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4) var(--s-3); border: var(--bw) solid var(--rule); background: var(--bg); font-size: var(--t-small); clip-path: var(--clip-ui); transition: box-shadow var(--dur-ui) var(--ease-mech); }
.svc-pipe__sup { font-weight: 600; }
.svc-pipe__amt { font-family: var(--f-mono); text-align: right; }
.svc-pipe__sug { color: var(--fg-2); }
.svc-pipe__cf { font: 500 .6875rem/1.4 var(--f-mono); color: var(--sig); text-align: right; }
.svc-pipe__queue .svc-pipe__cf { color: var(--leak); }
.svc-pipe__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.svc-pipe__item.is-hl { box-shadow: inset 0 0 0 2px var(--leak); }
.svc-pipe__item.is-done { opacity: 1; }
.svc-pipe__done { grid-column: 2; justify-self: end; padding: .25em .55em; border: 1.5px solid var(--sig); color: var(--sig); font: 700 .625rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg); }
.svc-pipe__done[hidden] { display: none; }
.svc-pipe__item.is-posted .svc-pipe__done { animation: nx-stamp var(--dur-stamp) var(--ease-stamp) both; }
.svc-pipe__explain { position: relative; margin-top: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 1.4em); border-top: 1.5px solid var(--leak); font-size: var(--t-small); line-height: 1.5; background: var(--bg); }
.svc-pipe__foot { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.svc-pipe__note { max-width: var(--measure); color: var(--fg-2); }
@media (min-width: 900px) {
	.svc-pipe__desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.svc-pipe__controls { grid-column: 1 / -1; }
}

/* ---- calculators (worked maths, missed calls): sheet + readout ---------------------------------- */
.svc-calc, .svc-mc { display: grid; gap: var(--gutter); align-items: stretch; margin-top: var(--s-4); }
.svc-calc__sheet, .svc-mc__sheet { display: grid; gap: var(--s-4); align-content: start; }
.svc-calc__in { align-content: start; }
.svc-calc__in .nx-field__unit > .nx-control { padding: 0; } /* the unit padding belongs to the unit, not the input (foundation request filed) */
.svc-calc__in .nx-field__help { font-size: .8125rem; }
.svc-calc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.svc-calc__range legend { margin-bottom: var(--s-2); }
.svc-calc__out, .svc-mc__out {
	position: relative;
	display: grid;
	gap: var(--s-5);
	align-content: start;
	padding: var(--s-6) var(--s-5);
	clip-path: var(--clip-sheet);
	container-type: inline-size;
}
.svc-calc__big .nx-readout__value, .svc-mc__rev .nx-readout__value { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); }
.svc-calc__rows, .svc-mc__rows { display: grid; gap: 0; margin: 0; }
.svc-calc__rows div, .svc-mc__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
.svc-calc__rows dt, .svc-mc__rows dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.svc-calc__rows dd, .svc-mc__rows dd { margin: 0; font: 600 1.375rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
.svc-calc__people { font-family: var(--f-serif); font-style: italic; color: var(--fg); }
.svc-calc__warn { position: relative; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 1.4em); border-top: 1.5px solid var(--leak); color: var(--fg); font-size: var(--t-small); }
.svc-calc__math { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.svc-calc__worked { font: 500 .8125rem/1.6 var(--f-mono); color: var(--fg-2); max-width: var(--measure-long); }
.svc-calc__pl { margin-top: var(--s-3); }
.svc-calc__note { font-size: var(--t-small); color: var(--fg-2); max-width: var(--measure); }
.svc-calc__input.is-bad, .svc-mc .nx-input.is-bad { border-bottom-color: var(--err, var(--molten-deep)); }
.is-stamped { animation: nx-stamp var(--dur-stamp) var(--ease-stamp) both; }
@media (min-width: 1024px) {
	.svc-calc, .svc-mc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	/* The readout follows the inputs down the sheet instead of leaving a tall empty panel. */
	.svc-calc__out, .svc-mc__out { align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
	.svc-calc__sheet { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
	.svc-calc__sheet > .nx-sheet__head, .svc-calc__range { grid-column: 1 / -1; }
}

/* ---- use cases: index + viewer --------------------------------------------------------------- */
.svc-uc__disclaimer { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); max-width: 52ch; }
.svc-cases { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.svc-case__row { margin: 0; font: inherit; max-width: none; }
.svc-case__btn {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20px;
	gap: var(--s-1) var(--s-4);
	width: 100%;
	min-height: 72px;
	padding: var(--s-4) var(--s-3) var(--s-4) 0;
	border-top: var(--bw) solid var(--rule);
	color: var(--fg);
	text-align: left;
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.svc-case__sector { font: 500 .6875rem/1.35 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.svc-case__scene { grid-column: 1; font: var(--w-ui) 1.0625rem/1.35 var(--f-sans); text-wrap: pretty; }
.svc-case__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; transition: transform var(--dur-ui) var(--ease-mech); }
.svc-case__btn[aria-expanded="true"] { background: var(--bg-2); padding-left: var(--s-4); box-shadow: inset 0 2px 0 var(--fg); }
.svc-case__btn[aria-expanded="true"] .svc-case__arrow { transform: rotate(90deg); }
@media (hover: hover) { .svc-case__btn:hover { background: var(--bg-2); padding-left: var(--s-4); } }
.svc-case { padding: var(--s-4) 0 var(--s-7); }
.js .svc-case[data-closed] { display: none; }
.svc-case__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.svc-case__count { font: 500 .75rem/1 var(--f-mono); color: var(--fg-2); }
.svc-case__nav { display: inline-flex; gap: var(--s-2); margin-left: auto; }
.svc-case__fig { margin: 0 0 var(--s-5); border: var(--bw) solid var(--rule); background: var(--paper); }
.svc-case__vis { margin: 0 0 var(--s-4); }
.svc-case__vis[aria-expanded="true"] .nx-btn__arrow { transform: rotate(180deg); }
@media (max-width: 767px) { .js .svc-case__fig:not(.is-open) { display: none; } }
@media (min-width: 768px) { .svc-sec .svc-case__vis { display: none; } } /* beats .svc-sec .nx-btn--text (line 28) */
.svc-case__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.svc-case__svg { display: block; width: 100%; height: auto; min-width: 640px; }
.svc-case__facts { display: grid; gap: 0; margin: 0; }
.svc-case__fact { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
.svc-case__fact dt { font: 500 .6875rem/1.5 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.svc-case__fact dd { margin: 0; line-height: 1.5; max-width: var(--measure); }
.svc-case__fact.is-human dt { color: var(--sig); }
.svc-case__fact.is-mono dd { font: 500 .8125rem/1.55 var(--f-mono); }
.svc-case__fact.is-maths dd > span { font-family: var(--f-mono); font-size: .875rem; }
.svc-case__note { margin-top: var(--s-4); padding-left: var(--s-4); border-left: var(--bw-2) solid var(--fg-3); font-size: var(--t-small); color: var(--fg-2); max-width: var(--measure); }
.svc-case__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-5); }
.svc-case__rel { font-size: var(--t-small); color: var(--fg-2); }
.svc-uc__note { margin-top: var(--s-5); }
@media (min-width: 768px) { .svc-case__fact { grid-template-columns: 9.5rem minmax(0, 1fr); } .svc-case__svg { min-width: 0; } }
.svc-cases.is-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(var(--s-6), 3vw, var(--s-8)); align-items: start; }
.svc-cases__list { position: sticky; top: calc(var(--header-h) + var(--s-5)); border-bottom: var(--bw) solid var(--rule); }
.svc-cases.is-split .svc-case { padding-top: 0; }

/* ---- evidence: stamped readouts ------------------------------------------------------------- */
.svc-stats { display: grid; gap: var(--s-6) var(--gutter); margin: 0; padding: 0; list-style: none; }
.svc-stat { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); border-top: 1.5px solid var(--fg); }
.svc-stat__value { font: 600 clamp(2rem, 1.4rem + 2.2vw, 3.5rem)/1 var(--f-mono); letter-spacing: -.03em; color: var(--fg); }
.svc-stat__label { font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); max-width: 36ch; }
@media (min-width: 768px) { .svc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three or more sourced figures read as a ledger (index rows: figure · meaning · source), never a stat wall. */
@media (min-width: 1024px) {
	.svc-stats:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: var(--bw) solid var(--rule); }
	.svc-stats:has(> :nth-child(3)) > .svc-stat { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); align-items: baseline; gap: var(--s-5); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); }
	.svc-stats:has(> :nth-child(3)) .svc-stat__value { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); }
}

.svc-honest { margin: var(--svc-gap) 0 0; padding-top: var(--s-6); max-width: 46ch; position: relative; }
.svc-honest::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 2px; background: var(--n-grad); clip-path: polygon(0 0, 100% 0, calc(100% - 1.9px) 100%, 0 100%); }
.svc-honest p { font-family: var(--f-serif); font-style: italic; font-size: var(--t-h3); line-height: 1.3; color: var(--fg); }
.svc-honest footer { margin-top: var(--s-4); }
.svc-honest--sm { max-width: 44ch; }
.svc-honest--sm p { font-size: var(--t-h4); }

.svc-first { display: grid; gap: var(--s-4); justify-items: start; margin-top: var(--svc-gap); padding: var(--s-6) 0 0; border-top: var(--bw) solid var(--rule); }
.svc-first__display { font: var(--w-h3) var(--t-h3)/1.15 var(--f-sans); letter-spacing: var(--tr-h3); max-width: 24ch; }
.svc-first__body { max-width: var(--measure); color: var(--fg-2); }

/* ---- automation s8: counting rules ------------------------------------------------------------ */
.svc-measure__grid { row-gap: var(--s-7); }
.svc-rules { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.svc-rule { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: var(--bg-2); border: var(--bw) solid var(--rule); }
.svc-rule p { font-size: var(--t-body); line-height: 1.45; }
.svc-rule__stamp { padding: .3em .6em; border: 2px solid var(--sig); color: var(--sig); font: 700 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg); white-space: nowrap; }
@media (min-width: 1024px) {
	.svc-measure__lead { grid-column: 1 / span 6; }
	.svc-rules { grid-column: 7 / -1; align-self: start; }
}

/* ---- automation s10: systems we speak --------------------------------------------------------- */
.svc-syslist { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-6); margin: 0; padding: 0; list-style: none; }
.svc-sys { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.svc-sys__name { font: var(--w-h2) clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1.05 var(--f-sans); letter-spacing: var(--tr-h3); }
.svc-sys__route { padding: 2px 8px; border: var(--bw) solid var(--rule); font: 500 .6875rem/1.4 var(--f-mono); color: var(--fg-2); }
.svc-systems__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }

/* ---- bundles: sheet + exploded kit drawing ---------------------------------------------------- */
.svc-bundle__grid { row-gap: var(--s-7); align-items: center; }
.svc-bundle__sheet { display: grid; gap: var(--s-4); align-content: start; }
.svc-bundle__name { font-size: var(--t-h2); font-weight: var(--w-h2); line-height: 1; letter-spacing: var(--tr-h2); max-width: none; }
.svc-bundle__sub { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.4; max-width: 40ch; }
.svc-bundle__items { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.svc-bundle__items li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6); border-top: var(--bw) solid var(--rule); line-height: 1.45; }
.svc-bundle__items li::before { content: ""; position: absolute; left: 2px; top: calc(var(--s-3) + .45em); width: 8px; height: 8px; background: var(--indigo); }
.svc-bundle__price { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1.5px solid var(--ink); }
.svc-bundle__priceline { font: 600 .9375rem/1.45 var(--f-sans); }
.svc-bundle__pilot { font: 500 .875rem/1.5 var(--f-mono); }
.svc-bundle__art { display: grid; place-items: center; color: var(--line-art); }
.svc-kit { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.svc-kit path, .svc-kit circle, .svc-kit rect { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.svc-kit .kit-join { stroke: var(--sig); }
.svc-kit .kit-guide { stroke-dasharray: 3 5; opacity: .5; }
.svc-kit .kit-rail path { stroke: var(--sig); stroke-width: 2; }
.svc-kit .kit-fillsig { fill: var(--sig); stroke: none; }
.svc-kit .kit-t { fill: currentColor; stroke: none; font: 500 13px var(--f-mono); letter-spacing: .04em; }
.svc-kit .kit-t--sig { fill: var(--sig); }
.svc-kit .kit-t--big { font: 700 26px var(--f-mono); }
.svc-kit .kit-part { transition: transform 360ms steps(5, jump-end), opacity 360ms steps(5, jump-end); transition-delay: calc(var(--i, 0) * 120ms); }
.svc-bundle.is-kit-pre .kit-part { transform: translate(-26px, 28px); opacity: 0; }
@media (min-width: 1024px) {
	.svc-bundle__sheet { grid-column: 1 / span 7; }
	.svc-bundle__art { grid-column: 8 / -1; }
}

/* ---- FAQ ------------------------------------------------------------------------------------ */
.svc-faq__head h2 { margin-bottom: var(--s-6); }
@media (min-width: 1024px) {
	.svc-faq__head { grid-column: 1 / span 4; }
	.svc-faq__list { grid-column: 5 / -1; }
}

/* ---- closing CTA ------------------------------------------------------------------------------ */
.svc-cta .nx-grid { position: relative; align-items: center; }
.svc-cta__copy { position: relative; z-index: 1; }
.svc-cta__copy .nx-micro + .nx-micro { margin-top: var(--s-2); }
@media (min-width: 1024px) {
	.svc-cta__copy { grid-column: 1 / span 9; }
}

/* =========================================================================
   FRONT DESK
   ========================================================================= */
/* A gutter between the two tabs: the second label never starts where the first one's underline ends, and
   the focus ring (offset 6 px) stays clear of the neighbouring label. */
.svc-call__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); border-bottom: var(--bw) solid var(--rule); }
.svc-call__tab { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-4) var(--s-4) 0; text-align: left; color: var(--fg-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.svc-call__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.svc-call__tabname { font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); }
.svc-call__tabmeta { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .03em; }
@media (hover: hover) { .svc-call__tab:hover { color: var(--fg); } }
.svc-call__labels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 var(--s-5); }
.svc-call__voices { font-size: var(--t-small); color: var(--fg-2); }
.svc-call__panel { outline-offset: 4px; }
/* Long label chip on phones: the replay grid keeps to the column, the chip wraps (foundation request filed). */
.svc-call__panel .nx-callr { grid-template-columns: minmax(0, 1fr); }
.svc-call__panel .nx-callr__labels .nx-label { white-space: normal; text-align: left; max-width: 100%; }
.svc-call__panel .nx-callr__time { white-space: nowrap; }
/* Before the call plays, the caption line is empty: keep its room (no shift when the words arrive) but
   don't draw an empty box under the player. */
.svc-call__panel .nx-callr__caption:empty { visibility: hidden; }
.svc-call__tab:focus-visible { outline-offset: 6px; }
.svc-call__min { margin-top: var(--s-5); max-width: var(--measure); font-size: var(--t-small); color: var(--fg-2); }
/* On Paper the replay's idle caption strip read as a grey slab: idle = an empty, ruled subtitle frame. */
.svc-call .nx-callr__caption:empty { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
/* The transcript scrolls once the engine runs: give the box a visible floor, not text cut mid-line. */
.svc-call .nx-callr.is-live .nx-callr__lines { border-bottom: var(--bw) solid var(--fg); scroll-padding-block: var(--s-6); }
/* Side by side (wide), the transcript box runs as tall as the «what it understood» sheet beside it,
   instead of stopping at 420 px over an empty stretch of paper. */
@container (min-width: 780px) {
	.svc-call .nx-callr.is-live .nx-callr__body { align-items: stretch; }
	.svc-call .nx-callr.is-live .nx-callr__tx { display: flex; flex-direction: column; min-height: 0; }
	.svc-call .nx-callr.is-live .nx-callr__lines { flex: 1 1 0; min-height: 360px; max-height: none; }
}
/* The sheet's document number is the audio file name (English): the tab above already names the call. */
.svc-call .nx-callr__panel > .nx-sheet__head > span + span { display: none; }
.svc-callfb audio { width: 100%; margin-bottom: var(--s-4); }
.svc-callfb__lines { display: grid; gap: var(--s-2); padding-left: 1.2em; }

/* channels on two axes */
.svc-channels__grid { row-gap: var(--s-7); align-items: center; }
.svc-axes { position: relative; }
.svc-axes__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.svc-axes__wires path { fill: none; stroke: var(--sig); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Four channels on two axes, one assistant where they cross (deck s4): quadrants of one drawing, not cards. */
.svc-axes__tiles { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s-9) var(--s-9); margin: 0; padding: 0; list-style: none; }
.svc-tile { position: relative; padding: 0; font-size: var(--t-small); line-height: 1.5; }
.svc-tile__icon { width: 36px; height: 36px; margin-bottom: var(--s-3); color: var(--sig); }
.svc-tile__title { margin-bottom: var(--s-2); font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); }
.svc-tile__src { margin-top: var(--s-2); }
.svc-axes__hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; padding: 12px; margin: -32px 0 0 -32px; background: var(--bg); border: 2px solid var(--sig); color: var(--sig); clip-path: var(--clip-ui); z-index: 1; }
@media (max-width: 599px) {
	/* Phones: no room for the hub drawing, so the four channels become index rows (icon · name · rule). */
	.svc-axes__tiles { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; border-bottom: var(--bw) solid var(--rule); }
	.svc-axes__wires, .svc-axes__hub { display: none; }
	.svc-tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 var(--s-4); padding: var(--s-4) 0; background: none; border: 0; border-top: var(--bw) solid var(--rule); }
	.svc-tile__icon { grid-row: 1 / span 3; width: 32px; height: 32px; margin: 2px 0 0; }
	.svc-tile > :not(.svc-tile__icon) { grid-column: 2; }
}
@media (min-width: 1024px) {
	.svc-channels__head { grid-column: 1 / span 5; }
	.svc-axes { grid-column: 7 / -1; }
}

/* the flow on one rail (front desk s5, data s3) */
.svc-flow { margin: var(--s-4) 0 0; container-type: inline-size; }
.svc-flow__steps { display: grid; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.svc-flow__step, .svc-flow__human { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-content: start; }
.svc-flow__node { grid-row: 1 / span 2; display: grid; place-items: center; width: 64px; height: 64px; padding: 14px; border: var(--bw) solid var(--fg); color: var(--fg); background: var(--bg); clip-path: var(--clip-ui); }
.svc-flow__node.is-human { border: 2px solid var(--sig); color: var(--sig); }
.svc-flow__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.2; }
.svc-flow__step p, .svc-flow__human p { font-size: var(--t-small); line-height: 1.55; color: var(--fg-2); max-width: 40ch; }
.svc-flow__step:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 68px; bottom: calc(-1 * var(--s-6) + 4px); width: 2px; background: var(--sig); }
.svc-flow__branch { position: relative; margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--bw) dashed var(--rule); }
.svc-flow__drop { display: none; }
@container (min-width: 880px) {
	.svc-flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
	.svc-flow__step { grid-template-columns: 1fr; }
	.svc-flow__node { grid-row: auto; margin-bottom: var(--s-3); }
	.svc-flow__step:not(:last-child)::after { left: 72px; top: 31px; bottom: auto; width: calc(100% - 72px + var(--s-6) - 8px); height: 2px; clip-path: polygon(0 0, 100% 0, calc(100% - 1.9px) 100%, 0 100%); }
	.svc-flow.has-branch .svc-flow__branch { width: calc((100% - 2 * var(--s-6)) / 3); margin: var(--s-7) 0 0 calc((100% - 2 * var(--s-6)) / 3 + var(--s-6)); padding-top: var(--s-6); border-top: 0; }
	/* The branch drops from under the assistant's text to the human's node (never through the text). */
	.svc-flow__drop { display: block; position: absolute; left: 31px; top: calc(-1 * var(--s-7) + var(--s-2)); height: calc(var(--s-7) - var(--s-2) + var(--s-6)); width: 2px; background: repeating-linear-gradient(180deg, var(--sig) 0 6px, transparent 6px 10px); }
	.svc-flow__human { grid-template-columns: 1fr; }
	.svc-flow__human .svc-flow__node { margin-bottom: var(--s-3); }
}

/* Greek voice: the test sheet */
.svc-voice__grid { row-gap: var(--s-7); align-items: start; }
.svc-testsheet__rows { margin: 0; padding: 0; list-style: none; }
.svc-testsheet__rows li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
.svc-testsheet__box { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ink); }
.svc-testsheet__box .nx-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.svc-testsheet__t { font-size: .9375rem; line-height: 1.4; }
.svc-testsheet__stamp { padding: .25em .55em; border: 1.5px solid var(--cyan-deep); color: var(--cyan-deep); font: 700 .625rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg); }
@media (min-width: 1024px) {
	.svc-voice__text { grid-column: 1 / span 6; }
	.svc-testsheet { grid-column: 8 / -1; }
}

/* monthly report template */
.svc-reportsheet { max-width: 980px; }
.svc-reportsheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.svc-reportsheet__cell { display: grid; gap: var(--s-3); align-content: space-between; min-height: 112px; padding: var(--s-4); border-bottom: var(--bw) solid var(--rule); }
.svc-reportsheet__cell:nth-child(odd) { border-right: var(--bw) solid var(--rule); }
.svc-reportsheet__k { font: 500 .6875rem/1.45 var(--f-mono); letter-spacing: .03em; color: var(--steel-dark); }
.svc-reportsheet__v { font: 600 2.25rem/1 var(--f-mono); color: var(--paper-3); }
/* The by-hour strip is an empty chart frame (the template has no values): faint ruled lines, a baseline,
   an hour tick per column and a taller one every six hours, so it never reads as missing bars. */
.svc-reportsheet__hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 0; height: 56px; align-items: end; margin-top: var(--s-5); border-bottom: 1.5px solid var(--steel-dark); background: repeating-linear-gradient(0deg, transparent 0 13px, var(--rule) 13px 14px); }
.svc-reportsheet__hours i { display: block; height: 5px; border-left: 1px solid var(--steel-dark); }
.svc-reportsheet__hours i:nth-child(6n + 1) { height: 10px; }
.svc-reportsheet__hours { position: relative; }
.svc-reportsheet__hours::after { content: ""; position: absolute; right: 0; bottom: 0; height: 10px; border-left: 1px solid var(--steel-dark); } /* 24:00 */
.svc-reportsheet__axis { display: flex; justify-content: space-between; margin-top: var(--s-2); font: 500 .625rem/1 var(--f-mono); color: var(--steel-dark); font-variant-numeric: tabular-nums; }
.svc-reportsheet__foot { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1.5px solid var(--ink); font: 700 .75rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-deep); }
@media (min-width: 768px) {
	.svc-reportsheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.svc-reportsheet__cell:nth-child(odd) { border-right: 0; }
	.svc-reportsheet__cell:not(:nth-child(3n)) { border-right: var(--bw) solid var(--rule); }
}

/* tiers: one ruled price sheet */
.svc-pricesheet { display: grid; gap: 0; border-top: 1.5px solid var(--fg); }
.svc-tier { position: relative; display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6) var(--s-5) var(--s-6) 0; border-bottom: var(--bw) solid var(--rule); }
.svc-tier__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-h3); font-weight: var(--w-h2); line-height: 1.1; max-width: none; }
.svc-tier__rec { padding: 3px 8px; background: var(--indigo); color: var(--paper); font: 600 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.svc-tier.is-rec { box-shadow: inset 0 0 0 2px var(--indigo); padding-left: var(--s-5); }
.svc-tier__price { font: 600 1.125rem/1.35 var(--f-mono); font-variant-numeric: tabular-nums; }
.svc-tier__for { font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.45; }
.svc-tier__inc { margin: 0; padding: 0; list-style: none; }
.svc-tier__inc li { position: relative; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-top: var(--bw) solid var(--rule); font-size: var(--t-small); line-height: 1.45; }
.svc-tier__inc li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-2) + .5em); width: 10px; height: 1.5px; background: var(--fg); }
.svc-tiers__notes { display: grid; gap: var(--s-3); justify-items: start; margin-top: var(--s-6); }
@media (min-width: 1024px) {
	.svc-pricesheet { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
	.svc-tier { grid-row: span 5; grid-template-rows: subgrid; padding: var(--s-6) var(--s-5); border-bottom: var(--bw) solid var(--rule); }
	.svc-tier + .svc-tier { border-left: var(--bw) solid var(--rule); }
}

/* compliance: the first twelve seconds */
.svc-tl { margin-top: var(--s-4); padding: var(--s-5); border: var(--bw) solid var(--rule); background: var(--bg-2); }
.svc-tl__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.svc-tl__title { margin-right: auto; font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); }
.svc-tl__audio { width: 100%; margin-bottom: var(--s-4); }
.svc-tl [data-tl-play] .nx-icon { width: 16px; height: 16px; }
.svc-tl [data-tl-play].is-playing [data-when="off"], .svc-tl [data-tl-play]:not(.is-playing) [data-when="on"] { display: none; }
.js .svc-tl.is-ready .svc-tl__audio { display: none; }
.svc-tl__track { position: relative; height: 34px; margin: 0 6px var(--s-3); border-bottom: 1.5px solid var(--fg); }
.svc-tl__fill { position: absolute; left: 0; bottom: -1.5px; height: 3px; width: 0; background: var(--n-grad); }
.svc-tl__tick { position: absolute; left: var(--x); bottom: 0; height: 8px; border-left: 1px solid var(--fg-2); }
.svc-tl__tick b { position: absolute; bottom: 12px; left: 0; transform: translateX(-50%); font: 500 .625rem/1 var(--f-mono); color: var(--fg-2); white-space: nowrap; }
.svc-tl__steps { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.svc-tl__step { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); }
.svc-tl__mark { display: block; text-align: left; color: var(--fg); }
.svc-tl__q { font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.4; }
.svc-tl__mark:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .svc-tl__mark:hover .svc-tl__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.svc-tl__ref { justify-self: start; padding: 2px 8px; border: var(--bw) solid var(--sig); font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .03em; color: var(--sig); }
.svc-tl__step.is-live .svc-tl__q { color: var(--sig); }
@media (min-width: 900px) {
	/* Columns sized by the measured line starts (--cols from PHP): each marker sits on its second. */
	.svc-tl__steps { position: relative; grid-template-columns: var(--cols, repeat(3, minmax(0, 1fr))); gap: 0; margin-inline: 6px; padding-left: var(--lead, 0); }
	.svc-tl__step { min-width: 0; border-top: 0; padding: var(--s-2) var(--s-5) 0 0; }
	.svc-tl__step::before { content: ""; display: block; width: 10px; height: 10px; margin-bottom: var(--s-2); background: var(--sig); clip-path: polygon(0 0, 100% 0, 100% 46%, 46% 100%, 0 100%); }
}
.svc-comp__grid { row-gap: var(--s-6); margin-top: var(--svc-gap); }
@media (min-width: 1024px) {
	.svc-comp__items { grid-column: 1 / span 6; margin-top: 0; }
	.svc-comp__law { grid-column: 8 / -1; }
}

/* proof */
.svc-proof__grid { row-gap: var(--s-7); }
.svc-proof__display { max-width: 22ch; }
html[lang="el"] .svc-proof__display { max-width: 24ch; }
.svc-proof__rule { display: block; width: 160px; height: 2px; margin: var(--s-6) 0; background: var(--n-grad); clip-path: polygon(0 0, 100% 0, calc(100% - 1.9px) 100%, 0 100%); }
.svc-proof__stats .svc-stats { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
	.svc-proof__text { grid-column: 1 / span 7; }
	.svc-proof__stats { grid-column: 9 / -1; }
}

/* =========================================================================
   DATA
   ========================================================================= */
/* five places snap into one grid */
.svc-snap { margin-top: var(--s-4); padding: var(--s-5); background: var(--ink); border: var(--bw) solid var(--ink); color: var(--paper); --fg: var(--paper); --fg-2: var(--paper-72); --sig: var(--cyan); transition: background-color 280ms steps(4, jump-end); }
.svc-snap__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.svc-snap__cell { display: grid; gap: var(--s-3); align-content: start; min-height: 132px; padding: var(--s-4); border: var(--bw) solid var(--rule-dark); margin: -0.5px; font: 500 .8125rem/1.4 var(--f-mono); transition: transform 320ms steps(5, jump-end), background-color 320ms steps(5, jump-end); }
.svc-snap__cell .svc-icon { width: 40px; height: 40px; color: var(--cyan); stroke-width: 2.5; }
.svc-snap.is-apart { background: transparent; border-color: transparent; }
.svc-snap.is-apart .svc-snap__cell { background: var(--paper); color: var(--ink); border-color: var(--ink); transform: translate(calc((var(--i) - 3) * 9px), calc(((var(--i) * 37) % 5 - 2) * 10px)) rotate(calc(((var(--i) * 13) % 5 - 2) * 1.5deg)); }
.svc-snap.is-apart .svc-snap__cell .svc-icon { color: var(--ink); }
.svc-snap__cell:nth-child(5) { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.svc-snap__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.svc-snap__cell:nth-child(5) { grid-column: auto; }
}

/* how foot */
.svc-how__foot { row-gap: var(--s-6); margin-top: var(--svc-gap); align-items: end; }
@media (min-width: 1024px) {
	.svc-how__foot .svc-honest { grid-column: 1 / span 7; }
	.svc-how__tools { grid-column: 9 / -1; }
}

/* cockpit */
.svc-ck__roles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
/* One board, not a card grid: the tiles share their rules like the cells of a split-flap panel. */
.svc-ck__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--fg); border-left: var(--bw) solid var(--rule); }
.svc-ck__tile { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border-right: var(--bw) solid var(--rule); border-bottom: var(--bw) solid var(--rule); background: var(--bg-2); transition: background-color 200ms steps(3, jump-end); }
.svc-ck__tile[data-off] { background: transparent; }
.svc-ck__tile[data-off] .svc-ck__name { color: var(--fg-2); font-weight: var(--w-ui); }
.svc-ck__tile[data-off] .svc-ck__val > span:first-child { color: var(--rule); }
.svc-ck__name { font-size: 1.0625rem; font-weight: var(--w-h3); line-height: 1.25; max-width: none; }
.svc-ck__val { display: grid; gap: var(--s-1); }
.svc-ck__val > span:first-child { font: 600 2.5rem/1 var(--f-mono); color: var(--fg-3); }
.svc-ck__ph { font-size: .8125rem; color: var(--fg-2); }
.svc-ck__how summary { display: flex; align-items: center; min-height: 40px; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--link); }
.svc-ck__formula { font: 500 .8125rem/1.55 var(--f-mono); }
@media (max-width: 639px) {
	/* Phones: the role's tiles stay full; the others fold to their name, so ten tiles do not become a long wall. */
	.svc-ck__val > span:first-child { font-size: 1.75rem; }
	.svc-ck__tile[data-off] { padding-block: var(--s-3); }
	.svc-ck__tile[data-off] .svc-ck__val, .svc-ck__tile[data-off] .svc-ck__how { display: none; }
	/* Four roles as a 2 × 2 block instead of a ragged wrap. */
	.svc-ck__roles .nx-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
	.svc-ck__roles .nx-seg > * { white-space: normal; text-align: left; line-height: 1.3; padding-block: var(--s-2); border-left: 0; }
	.svc-ck__roles .nx-seg > :nth-child(even) { border-left: var(--bw) solid var(--rule); }
	.svc-ck__roles .nx-seg > :nth-child(n + 3) { border-top: var(--bw) solid var(--rule); }
}

/* the Monday brief */
.svc-brief__grid { row-gap: var(--s-6); align-items: start; }
.svc-brief__sheet { --sheet-bg: var(--paper); padding: var(--s-6) clamp(var(--s-5), 3vw, var(--s-7)) calc(var(--s-7) + var(--ch-sheet) * .5); font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.svc-brief__stamp { font-family: var(--f-dot); font-size: 1.75rem; line-height: 1; letter-spacing: .02em; font-variation-settings: "ELSH" 2; text-transform: none; color: var(--indigo); }
.svc-brief__title { font-family: var(--f-sans); font-size: var(--t-h3); line-height: 1.15; max-width: 28ch; margin-bottom: var(--s-2); }
.svc-brief__h { margin: var(--s-6) 0 var(--s-2); font: 600 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-dark); }
.svc-brief__list { margin: 0; padding: 0; list-style: none; }
.svc-brief__list li { position: relative; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-top: var(--bw) solid var(--rule-light); }
.svc-brief__list li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-2) + .7em); width: 9px; height: 1.5px; background: var(--ink); }
.svc-brief__n { color: var(--cyan-deep); text-decoration: underline dotted 1.5px; text-underline-offset: .22em; font-variant-numeric: tabular-nums; }
.svc-brief__n.is-on { background: color-mix(in srgb, var(--cyan) 18%, transparent); text-decoration-style: solid; }
.svc-brief__foot { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1.5px solid var(--ink); font: 400 .8125rem/1.55 var(--f-sans); color: var(--steel-dark); }
.svc-brief__labels { margin-top: var(--s-3); }
.svc-brief__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; min-width: 0; }
.svc-brief__panel { padding: var(--s-4); border: var(--bw) solid var(--rule); background: var(--bg-2); }
.svc-brief__tip { font-size: var(--t-small); color: var(--fg-2); }
.svc-brief__panel .svc-code { max-height: 18rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* the side panel is narrow: wrap, don't scroll sideways */
.js .svc-brief__queries { display: none; }
.svc-brief__queries { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 1024px) {
	.svc-brief__sheet { grid-column: 1 / span 8; }
	.svc-brief__side { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* data s7: five dashes */
.svc-dashes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.svc-dash { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border-top: 1.5px solid var(--fg); }
.svc-dash__v { font: 600 3rem/1 var(--f-mono); color: var(--fg-3); }
.svc-dash__k { font-size: var(--t-small); line-height: 1.45; color: var(--fg); }
.svc-measure7__body { margin-top: var(--s-7); max-width: 46ch; }

/* =========================================================================
   CUSTOM SOFTWARE
   ========================================================================= */
/* the second headline + the Viber → ERP before/after */
.svc-erpai__grid { row-gap: var(--s-7); align-items: start; margin-bottom: var(--svc-gap); }
.svc-erpai__text h2 { margin-bottom: var(--s-6); }
.svc-erpai__claim { margin-top: var(--s-6); }
/* The 47° split puts "before" top-left and "after" bottom-right, so the message keeps to the upper-left
   column and the ERP draft to the lower-right corner: at rest both read whole; the handle trades them. */
.svc-ba { margin: 0; container-type: inline-size; }
.svc-ba__box { aspect-ratio: 1 / 1; border: var(--bw) solid var(--ink); background: var(--ink-2); color: var(--paper); }
.svc-ba__msg { display: grid; align-content: start; gap: var(--s-2); height: 100%; padding: calc(var(--s-4) + 30px) 49% var(--s-5) var(--s-5); background: var(--ink-2); font-size: .9375rem; }
.svc-ba__who { font: 500 .6875rem/1.3 var(--f-mono); color: var(--paper-72); }
.svc-ba__who.is-me { justify-self: end; }
@container (min-width: 480px) { .svc-ba__who.is-me { display: none; } } /* the reply's clock would push it across the diagonal */
.svc-ba__who time { margin-left: var(--s-2); }
.svc-ba__bubble { justify-self: start; max-width: 100%; padding: var(--s-3) var(--s-4); background: var(--ink-3); border: var(--bw) solid var(--rule-dark); line-height: 1.45; }
.svc-ba__bubble.is-me { justify-self: end; background: transparent; }
.svc-ba__erp { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: var(--s-5) var(--s-5) calc(var(--s-4) + 34px); background: var(--paper); color: var(--ink); }
.svc-ba__erp > * { width: min(48%, 21rem); }
.svc-ba__erpbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-2); margin-bottom: var(--s-1); border-bottom: 1.5px solid var(--ink); font: 700 .75rem/1.3 var(--f-mono); letter-spacing: .08em; }
.svc-ba__status { padding: 1px 6px; border: 1.5px solid var(--cyan-deep); color: var(--cyan-deep); font-weight: 600; letter-spacing: .04em; }
.svc-ba__fields { display: grid; gap: 0; margin: 0; }
.svc-ba__fields div { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: var(--s-3); padding: 6px 0; border-bottom: var(--bw) solid var(--rule-light); }
.svc-ba__fields dt { font: 500 .625rem/1.45 var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--steel-dark); }
.svc-ba__fields dd { margin: 0; font: 500 .75rem/1.4 var(--f-mono); }
.svc-ba__cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); font-size: var(--t-small); color: var(--fg-2); }
.svc-ba .nx-ba__label--before { top: var(--s-3); bottom: auto; }
.svc-ba .nx-ba__label--after { top: auto; bottom: var(--s-3); }
/* Narrow: a 47° split across a phone-wide box leaves no room for either side to read whole, so the two
   states stack (before, then after) with their labels; the slider handle steps aside. */
@container (max-width: 479px) {
	.svc-ba__box { display: flex; flex-direction: column; gap: var(--s-2); aspect-ratio: auto; padding: var(--s-3); background: var(--paper); }
	.svc-ba .nx-ba__label { position: static; align-self: flex-start; }
	.svc-ba .nx-ba__label--before { order: 0; }
	.svc-ba .nx-ba__before { order: 1; }
	.svc-ba .nx-ba__label--after { order: 2; margin-top: var(--s-3); }
	.svc-ba .nx-ba__after { order: 3; position: static; clip-path: none !important; } /* the lib sets the clip inline */
	.svc-ba .nx-ba__handle { display: none; }
	.svc-ba__msg { height: auto; padding: var(--s-4); }
	.svc-ba__erp { display: block; padding: 0; }
	.svc-ba__erp > * { width: auto; }
}
@media (min-width: 1024px) {
	.svc-erpai__text { grid-column: 1 / span 6; }
	.svc-erpai__side { grid-column: 8 / -1; }
}

/* systems table */
.svc-systable__t th[scope="row"] { font: var(--w-h3) 1rem/1.35 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
.svc-systable__route { font: 500 .8125rem/1.5 var(--f-mono); }
.svc-systable__t td > .svc-status { justify-self: start; white-space: normal; }
.svc-status { display: inline-block; padding: 1px 7px; border: var(--bw) solid var(--fg-3); font: 500 .6875rem/1.45 var(--f-mono); color: var(--fg-2); white-space: nowrap; }

/* AADE timeline */
.svc-aade__line { position: relative; display: grid; gap: var(--s-6); margin: 0; padding: 0 0 0 var(--s-6); list-style: none; border-left: 1.5px solid var(--fg); }
.svc-aade__item { position: relative; display: grid; gap: var(--s-3); align-content: start; }
.svc-aade__pin { position: absolute; left: calc(-1 * var(--s-6) - 6px); top: .35em; width: 11px; height: 11px; background: var(--fg); clip-path: polygon(0 0, 100% 0, 100% 46%, 46% 100%, 0 100%); }
.svc-aade__date { font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.1 var(--f-mono); letter-spacing: -.01em; }
.svc-aade__text { max-width: 46ch; line-height: 1.5; }
.svc-aade__notes { margin-top: var(--svc-gap); }
@media (min-width: 900px) {
	.svc-aade__line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding: var(--s-6) 0 0; border-left: 0; border-top: 1.5px solid var(--fg); }
	.svc-aade__pin { left: 0; top: calc(-1 * var(--s-6) - 6px); }
}

/* builds index */
.svc-builds__list { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.svc-build { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-2) var(--s-5); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); }
.svc-build__icon { grid-row: 1 / span 3; width: 48px; height: 48px; color: var(--sig); stroke-width: 2.5; }
.svc-build__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.2; }
.svc-build__text { color: var(--fg-2); line-height: 1.5; max-width: 52ch; }
.svc-build__gone s { font: 500 .8125rem/1.5 var(--f-mono); color: var(--fg-2); text-decoration-color: var(--leak); text-decoration-thickness: 1px; }
@container (min-width: 900px) {
	.svc-build { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
	.svc-build__icon { grid-row: auto; }
	.svc-build__gone .svc-k { margin-bottom: var(--s-1); }
}

/* mini map (s7) and monitor (s8) */
.svc-handoffs__grid, .svc-run__grid { row-gap: var(--s-7); align-items: center; }
.svc-mini { margin: 0; padding: var(--s-4); border: var(--bw) solid var(--rule); background: var(--ink); --fg: var(--paper); container-type: inline-size; }
.svc-mini .im-tall { display: none; }
@container (max-width: 520px) { .svc-mini .im-wide { display: none; } .svc-mini .im-tall { display: block; } }
.svc-mini__count { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); color: var(--paper); }
.svc-mini__n { font: 600 2.5rem/1 var(--f-mono); color: var(--molten); }
.svc-mini__n.is-zero { color: var(--cyan); }
.svc-mini figcaption { margin-top: var(--s-3); }
@media (min-width: 1024px) {
	.svc-handoffs__text, .svc-run__text { grid-column: 1 / span 6; }
	.svc-mini, .svc-run__art { grid-column: 8 / -1; }
}
.svc-mon { position: relative; margin: 0; padding: var(--s-5); border: var(--bw) solid var(--ink); background: var(--ink); color: var(--paper); }
.svc-mon__rows { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.svc-mon__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 12px; align-items: center; gap: var(--s-3); font: 600 .8125rem/1 var(--f-mono); }
.svc-mon__beat { width: 100%; height: 30px; }
.svc-mon__beat path { fill: none; stroke: var(--cyan); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.svc-mon__dot { width: 10px; height: 10px; background: var(--cyan); }
.svc-mon__row.is-down .svc-mon__beat path { stroke: var(--molten); }
.svc-mon__row.is-down .svc-mon__dot { background: var(--molten); }
.svc-mon__alert { margin-top: var(--s-4); padding: var(--s-3) var(--s-4) var(--s-4); background: var(--paper); color: var(--ink); font: 500 .8125rem/1.45 var(--f-mono); clip-path: var(--clip-ui); transition: clip-path 640ms var(--ease-cut); }
.svc-mon__alertk::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: var(--s-2); vertical-align: -1px; background: var(--molten); clip-path: polygon(0 0, 100% 0, 100% 46%, 46% 100%, 0 100%); }
.svc-mon__alertk { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.svc-mon.is-pre .svc-mon__alert { clip-path: polygon(0 0, 0 0, -60% 100%, -60% 100%, -60% 100%); } /* zero-area: the 5 points of --clip-ui, collapsed on one 47°-ish edge */
.svc-mon.is-pre .svc-mon__row.is-down .svc-mon__beat path { stroke: var(--cyan); }
.svc-mon.is-pre .svc-mon__row.is-down .svc-mon__dot { background: var(--cyan); }
.svc-mon__cap { margin-top: var(--s-3); }

/* ---- reduced motion: designed final states ---------------------------------------------------- */
html.rm .svc-snap.is-apart .svc-snap__cell { transform: none; }
html.rm .svc-bundle.is-kit-pre .kit-part { transform: none; opacity: 1; }
html.rm .svc-bar.is-stepping .svc-bar__slice .svc-bar__fill { transform: none; }
html.rm .svc-bar.is-stepping .svc-bar__slice .svc-bar__label { visibility: visible; }
html.rm .svc-mon.is-pre .svc-mon__alert { clip-path: var(--clip-ui); }

/* ---- print ------------------------------------------------------------------------------------ */
@media print {
	.svc-ch-br, .svc-ch-x, .svc-ch-tl { clip-path: none; margin-top: 0; }
	.svc-demo { clip-path: none; }
}

} /* end @layer pages */