/* =========================================================
   WordPress Services - CRT / DOS chrome, readable body
   Shared by single-wordpress-services.php and
   archive-wordpress-services.php.
   Prefix: .svc-
   ========================================================= */

:root {
	--svc-bg:        #05020a;
	--svc-panel:     #0a0612;
	--svc-ink:       #d7ffd7;
	--svc-ink-dim:   #8fbe8f;
	--svc-lime:      #39ff14;
	--svc-acid:      #b6ff1a;
	--svc-magenta:   #ff00d4;
	--svc-cyan:      #00f0ff;
	--svc-yellow:    #ffee00;
	--svc-red:       #ff2b2b;
	--svc-win-gray:      #c0c0c0;
	--svc-win-gray-dark: #808080;
	--svc-win-blue:      #000080;
}

/* The main theme stylesheet forces `body { background-color: white !important }`,
   so these have to shout back. Scoped to .svc-body only. */
html:has(body.svc-body),
body.svc-body {
	margin: 0;
	padding: 0;
	background-color: var(--svc-bg) !important;
	background-image: none !important;
	color: var(--svc-ink) !important;
	font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Courier New', monospace !important;
	font-size: 16px;
	line-height: 1.75;
	opacity: 1 !important;
	-webkit-font-smoothing: antialiased;
}
body.svc-body * { box-sizing: border-box; }

/* Reset the main stylesheet's global heading and paragraph treatment,
   which adds a black underline pseudo element, clips overflow and
   drops body text to 13px. None of that is wanted in here. */
body.svc-body :where(h1, h2, h3, h4, h5, h6) {
	overflow: visible;
	padding-bottom: 0;
	border-bottom: none;
	margin-left: 0;
}
body.svc-body :where(h1, h2, h3, h4, h5, h6)::before {
	content: none;
	background: none;
	position: static;
	width: auto;
	height: auto;
}
body.svc-body :where(p, li, summary, blockquote, td, th) {
	font-size: inherit;
	font-family: inherit;
	color: inherit;
}
body.svc-body :where(img) { max-width: 100%; height: auto; }

/* Hide theme chrome that leaks in from header.php / footer.php */
.svc-body .menu-container,
.svc-body #masthead,
.svc-body .page-title-banner,
.svc-body #colophon,
.svc-body #loading-screen { display: none !important; }

.svc-body a { color: var(--svc-cyan); }
.svc-body a:hover,
.svc-body a:focus { color: var(--svc-yellow); }

::selection { background: var(--svc-magenta); color: #000; }

/* ---------- CRT overlays ---------- */
.svc-crt-scan,
.svc-crt-vignette,
.svc-crt-flicker {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9000;
}
.svc-crt-scan {
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.32) 0px,
		rgba(0, 0, 0, 0.32) 1px,
		rgba(0, 0, 0, 0) 1px,
		rgba(0, 0, 0, 0) 3px
	);
	mix-blend-mode: multiply;
	opacity: 0.55;
}
.svc-crt-vignette {
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%);
}
.svc-crt-flicker {
	background: rgba(120, 255, 160, 0.03);
	animation: svc-flicker 5s steps(2) infinite;
}
@keyframes svc-flicker {
	0%, 92%, 100% { opacity: 0.25; }
	93% { opacity: 0.9; }
	96% { opacity: 0.1; }
}

.svc-tear {
	position: fixed;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--svc-lime);
	opacity: 0.18;
	pointer-events: none;
	z-index: 9001;
	animation: svc-tear 9s linear infinite;
}
.svc-tear.t2 { background: var(--svc-magenta); height: 3px; animation-duration: 7.3s; animation-delay: -3s; }
.svc-tear.t3 { background: var(--svc-cyan);    animation-duration: 13.1s; animation-delay: -5s; }
@keyframes svc-tear {
	0%   { top: -2%;  opacity: 0; }
	4%   { opacity: 0.22; }
	96%  { opacity: 0.22; }
	100% { top: 102%; opacity: 0; }
}

/* ---------- Layout shell ---------- */
.svc-shell {
	position: relative;
	z-index: 1;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px 96px;
}

.svc-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--svc-lime);
	padding: 14px 0;
	border-bottom: 1px solid rgba(57, 255, 20, 0.25);
}
.svc-topbar a { color: var(--svc-lime); text-decoration: none; }
.svc-topbar a:hover { color: var(--svc-yellow); }
.svc-topbar .right { color: var(--svc-cyan); }
.svc-topbar .blink { animation: svc-blink 1.1s steps(2) infinite; }
@keyframes svc-blink { 50% { opacity: 0; } }

/* ---------- Breadcrumb ---------- */
.svc-crumbs {
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px;
	letter-spacing: 0.05em;
	color: var(--svc-ink-dim);
	padding: 14px 0 0;
}
.svc-crumbs a { color: var(--svc-lime); text-decoration: none; }
.svc-crumbs a:hover { color: var(--svc-yellow); text-decoration: underline; }
.svc-crumbs .sep { color: var(--svc-win-gray-dark); margin: 0 6px; }

/* ---------- Hero ---------- */
.svc-hero { padding: 34px 0 26px; }

.svc-eyebrow {
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 20px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--svc-acid);
	margin: 0 0 10px;
}

.svc-title {
	position: relative;
	margin: 0;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 6.4vw, 68px);
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: #fff;
	text-shadow:
		2px 0 0 rgba(255, 0, 212, 0.85),
		-2px 0 0 rgba(0, 240, 255, 0.85);
}
.svc-title[data-text]::before,
.svc-title[data-text]::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.svc-title[data-text]::before {
	color: var(--svc-cyan);
	clip-path: inset(0 0 62% 0);
	animation: svc-glitch-top 4.2s steps(2) infinite;
}
.svc-title[data-text]::after {
	color: var(--svc-magenta);
	clip-path: inset(64% 0 0 0);
	animation: svc-glitch-bot 5.7s steps(2) infinite;
}
@keyframes svc-glitch-top {
	0%, 88%, 100% { transform: translate(0, 0); opacity: 0; }
	89% { transform: translate(-4px, -2px); opacity: 0.85; }
	92% { transform: translate(3px, 1px);  opacity: 0.7; }
}
@keyframes svc-glitch-bot {
	0%, 90%, 100% { transform: translate(0, 0); opacity: 0; }
	91% { transform: translate(5px, 2px);  opacity: 0.8; }
	95% { transform: translate(-3px, -1px); opacity: 0.6; }
}

.svc-standfirst {
	max-width: 62ch;
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--svc-ink);
}

/* ---------- Terminal boot strip ---------- */
.svc-terminal {
	margin: 26px 0 0;
	border: 1px solid var(--svc-lime);
	background: rgba(0, 0, 0, 0.55);
	box-shadow: 0 0 22px rgba(57, 255, 20, 0.18) inset;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px;
	color: var(--svc-lime);
	max-width: 640px;
}
.svc-terminal .bar {
	display: flex;
	justify-content: space-between;
	padding: 2px 8px;
	background: var(--svc-lime);
	color: #04120a;
	letter-spacing: 0.08em;
}
.svc-terminal .log {
	padding: 10px 12px 12px;
	min-height: 7.2em;
}
.svc-terminal .log .line { opacity: 0; }
.svc-terminal .log .line.on { opacity: 1; }
.svc-terminal .log .line .ok { color: var(--svc-acid); }
.svc-terminal .prompt { padding: 0 12px 10px; }
.svc-terminal .prompt::after {
	content: '_';
	animation: svc-blink 1s steps(2) infinite;
}

/* ---------- Win95 window that wraps the body copy ---------- */
.svc-window {
	margin: 42px 0 0;
	background: var(--svc-panel);
	border: 2px solid var(--svc-win-gray);
	border-right-color: var(--svc-win-gray-dark);
	border-bottom-color: var(--svc-win-gray-dark);
	box-shadow: 0 0 0 1px #000, 6px 6px 0 rgba(0, 0, 0, 0.75);
}
.svc-window > .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 3px 4px 3px 8px;
	background: linear-gradient(90deg, var(--svc-win-blue), #1084d0);
	color: #fff;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	letter-spacing: 0.05em;
}
.svc-window > .title .btns { display: inline-flex; gap: 2px; }
.svc-window > .title .btn {
	width: 20px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--svc-win-gray);
	color: #000;
	border: 1px solid #fff;
	border-right-color: #000;
	border-bottom-color: #000;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.svc-window > .title .btn:active {
	border-color: #000 #fff #fff #000;
}
.svc-window > .inner { padding: 30px clamp(18px, 4vw, 44px) 40px; }

/* ---------- Body copy ---------- */
.svc-content { max-width: 68ch; }
.svc-content > *:first-child { margin-top: 0; }

.svc-content h2 {
	margin: 46px 0 14px;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(21px, 3vw, 30px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
}
.svc-content h2::before {
	content: '> ';
	color: var(--svc-lime);
	font-family: 'VT323', 'Courier New', monospace;
}
.svc-content h3 {
	margin: 30px 0 10px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--svc-acid);
}
.svc-content p { margin: 0 0 18px; }
.svc-content strong { color: #fff; }
.svc-content em { color: var(--svc-cyan); font-style: normal; }

.svc-content ul,
.svc-content ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.svc-content ul li,
.svc-content ol li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
}
.svc-content ul li::before {
	content: '[\2713]';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--svc-lime);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 17px;
	letter-spacing: -0.06em;
}
.svc-content ol { counter-reset: svc-ol; }
.svc-content ol li { counter-increment: svc-ol; }
.svc-content ol li::before {
	content: counter(svc-ol, decimal-leading-zero) '.';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--svc-cyan);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 17px;
}
.svc-content ul.svc-not li::before {
	content: '[\00d7]';
	color: var(--svc-red);
}

.svc-content hr {
	border: 0;
	border-top: 1px dashed rgba(57, 255, 20, 0.35);
	margin: 38px 0;
}

.svc-content blockquote {
	margin: 26px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--svc-magenta);
	background: rgba(255, 0, 212, 0.06);
	color: #fff;
}
.svc-content blockquote p:last-child { margin-bottom: 0; }

/* ---------- Pricing block ---------- */
.svc-pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 26px 0 30px;
	max-width: 68ch;
}
.svc-price {
	border: 1px solid var(--svc-lime);
	background: rgba(57, 255, 20, 0.05);
	padding: 20px;
	text-align: center;
}
.svc-price .label {
	display: block;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svc-acid);
}
.svc-price .amount {
	display: block;
	margin: 6px 0 2px;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(26px, 4.4vw, 40px);
	line-height: 1;
	color: #fff;
	text-shadow: 2px 0 0 rgba(255,0,212,0.7), -2px 0 0 rgba(0,240,255,0.7);
}
.svc-price .note {
	display: block;
	font-size: 14px;
	color: var(--svc-ink-dim);
}
.svc-price.is-best { border-color: var(--svc-magenta); background: rgba(255, 0, 212, 0.07); }
.svc-price.is-best .label { color: var(--svc-magenta); }

/* ---------- FAQ ---------- */
.svc-faq { margin: 26px 0 10px; max-width: 68ch; }
.svc-faq details {
	border: 1px solid rgba(57, 255, 20, 0.3);
	background: rgba(0, 0, 0, 0.35);
	margin-bottom: 10px;
}
.svc-faq details[open] { border-color: var(--svc-lime); }
.svc-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 16px;
	font-weight: 700;
	color: #fff;
	display: flex;
	gap: 10px;
	align-items: baseline;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::before {
	content: '[+]';
	font-family: 'VT323', 'Courier New', monospace;
	color: var(--svc-lime);
	flex: none;
}
.svc-faq details[open] summary::before { content: '[-]'; color: var(--svc-magenta); }
.svc-faq summary:hover { color: var(--svc-yellow); }
.svc-faq .answer { padding: 0 16px 14px 46px; color: var(--svc-ink); }
.svc-faq .answer p:last-child { margin-bottom: 0; }

/* ---------- CTA ---------- */
.svc-cta {
	margin: 46px 0 0;
	border: 2px solid var(--svc-win-gray);
	border-right-color: var(--svc-win-gray-dark);
	border-bottom-color: var(--svc-win-gray-dark);
	background: var(--svc-win-gray);
	color: #000;
	box-shadow: 0 0 0 1px #000, 6px 6px 0 rgba(0, 0, 0, 0.75);
}
.svc-cta .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3px 4px 3px 8px;
	background: linear-gradient(90deg, var(--svc-win-blue), #1084d0);
	color: #fff;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	letter-spacing: 0.05em;
}
.svc-cta .body {
	display: flex;
	gap: 16px;
	padding: 20px 18px;
	align-items: flex-start;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 21px;
	line-height: 1.35;
}
.svc-cta .icon {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--svc-win-blue);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
}
.svc-cta .msg strong { display: block; font-size: 23px; }
.svc-cta .actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0 18px 20px;
}
.svc-cta .actions a {
	display: inline-block;
	padding: 8px 22px;
	background: var(--svc-win-gray);
	color: #000;
	text-decoration: none;
	border: 2px solid #fff;
	border-right-color: #000;
	border-bottom-color: #000;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 21px;
	letter-spacing: 0.04em;
}
.svc-cta .actions a:hover { background: #d8d8d8; color: #000; }
.svc-cta .actions a:active { border-color: #000 #fff #fff #000; }

/* ---------- Related services ---------- */
.svc-related { margin: 56px 0 0; }
.svc-related h2 {
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 24px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--svc-acid);
	margin: 0 0 16px;
}
.svc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.svc-card {
	display: block;
	padding: 20px;
	border: 1px solid rgba(57, 255, 20, 0.35);
	background: rgba(0, 0, 0, 0.4);
	text-decoration: none;
	color: var(--svc-ink);
	transition: transform 0.12s steps(2), border-color 0.12s;
}
.svc-card:hover {
	border-color: var(--svc-magenta);
	transform: translate(-2px, -2px);
	color: var(--svc-ink);
}
.svc-card .k {
	display: block;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: var(--svc-lime);
	text-transform: uppercase;
}
.svc-card h3 {
	margin: 6px 0 8px;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 20px;
	text-transform: uppercase;
	color: #fff;
}
.svc-card p { margin: 0; font-size: 15px; color: var(--svc-ink-dim); }

/* ---------- Marquee ---------- */
.svc-marquee {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8000;
	overflow: hidden;
	background: #000;
	border-top: 1px solid var(--svc-magenta);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: var(--svc-magenta);
	white-space: nowrap;
	padding: 2px 0;
}
.svc-marquee-track {
	display: inline-block;
	padding-left: 100%;
	animation: svc-marquee 26s linear infinite;
}
.svc-marquee-track span::after { content: ' /// '; color: var(--svc-lime); }
@keyframes svc-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}
.svc-shell { padding-bottom: 120px; }

/* ---------- Footer strip ---------- */
.svc-footer {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 56px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(57, 255, 20, 0.25);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--svc-ink-dim);
}
.svc-footer a { color: var(--svc-lime); text-decoration: none; }
.svc-footer a:hover { color: var(--svc-yellow); }

/* ---------- Archive ---------- */
.svc-archive-intro { max-width: 62ch; margin: 18px 0 0; font-size: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	body.svc-body { font-size: 15px; }
	.svc-window > .inner { padding: 22px 16px 30px; }
	.svc-terminal { font-size: 17px; }
	.svc-topbar { font-size: 16px; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.svc-crt-flicker,
	.svc-tear,
	.svc-marquee-track,
	.svc-title[data-text]::before,
	.svc-title[data-text]::after,
	.svc-terminal .prompt::after,
	.svc-topbar .blink {
		animation: none !important;
	}
	.svc-title[data-text]::before,
	.svc-title[data-text]::after { opacity: 0; }
	.svc-terminal .log .line { opacity: 1 !important; }
}

/* ---------- Print / reader friendliness ---------- */
@media print {
	.svc-crt-scan, .svc-crt-vignette, .svc-crt-flicker,
	.svc-tear, .svc-marquee, .svc-terminal { display: none !important; }
	body.svc-body { background: #fff; color: #000; }
	.svc-window { border: 1px solid #000; background: #fff; }
	.svc-title, .svc-content h2, .svc-content strong { color: #000; text-shadow: none; }
}