/*
Theme Name: Quantum Sentinel
Template: astra
Description: Brand child theme for the Quantum Sentinel dev site. Global colors, typography, buttons, and section spacing live here so pages don't hardcode brand values.
Author: Quantum Sentinel
Version: 1.1.0
*/

:root {
	/* Brand palette — Quantum Sentinel Brand Identity Guide v1.0 */
	--qs-cobalt: #2563EB;    /* Primary Brand */
	--qs-purple: #7C3AED;    /* Secondary Brand — accent only, never dominant */
	--qs-navy: #0B132B;      /* Primary Text / Dark Background */
	--qs-slate: #64748B;     /* Secondary Text */
	--qs-electric: #06B6D4;  /* Accent / Highlights */
	--qs-white: #FFFFFF;     /* Background */

	--qs-cobalt-hover: #1D4ED8;

	/* Darker slate for secondary TEXT on white — the brand slate (#64748B) only clears
	   WCAG AA by a hair (4.76:1); this passes comfortably (7.5:1). Keep --qs-slate for
	   borders/icons/non-text uses. */
	--qs-slate-text: #475569;

	--qs-font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

	--qs-section-py: clamp(2.75rem, 4.5vw, 4rem);
	--qs-radius: 8px;
}

body {
	font-family: var(--qs-font);
	color: var(--qs-navy);
	background-color: var(--qs-white);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--qs-font);
	color: var(--qs-navy);
}

/* Hero headings */
h1 {
	font-weight: 700;
}

/* Section headings */
h2, h3 {
	font-weight: 600;
}

/* Body copy */
p, li, td, th {
	font-weight: 400;
}

a {
	color: var(--qs-cobalt);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--qs-purple);
}

.qs-text-secondary {
	color: var(--qs-slate-text);
}

/* Vertical rhythm: each paragraph lives in its own Elementor widget, so the theme's paragraph
   margin stacked on top of the container flex gap double-spaced all body copy. Let the flex gap
   be the spacing between widgets; keep only a modest margin between paragraphs inside one widget.
   (!important: Astra's inline dynamic CSS wins cascade ties against this sheet.) */
.elementor-widget-text-editor p {
	margin-bottom: 0.8em !important;
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0 !important;
}

/* Reusable section spacing — apply .qs-section to any container instead of hardcoding padding per page.
   The .e-con variant needs !important: Elementor's frontend CSS loads after this sheet and its own
   `.e-con { padding: var(--padding, 10px) }` rule was silently flattening every section to 10px. */
.qs-section {
	padding-top: var(--qs-section-py);
	padding-bottom: var(--qs-section-py);
}

.e-con.qs-section {
	padding-top: var(--qs-section-py) !important;
	padding-bottom: var(--qs-section-py) !important;
}

/* Dark background variant */
.qs-bg-dark {
	background-color: var(--qs-navy);
	color: var(--qs-white);
}

.qs-bg-dark h1,
.qs-bg-dark h2,
.qs-bg-dark h3,
.qs-bg-dark h4,
.qs-bg-dark h5,
.qs-bg-dark h6 {
	color: var(--qs-white);
}

.qs-bg-dark a {
	color: var(--qs-electric);
}

/* Reusable buttons — add class "qs-btn qs-btn-primary" or "qs-btn qs-btn-secondary"
   to any Elementor/Gutenberg button widget's Additional CSS Class field */
.qs-btn,
.wp-block-button__link,
.ast-button,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--qs-font);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	padding: 0.875rem 1.75rem;
	border-radius: var(--qs-radius);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qs-btn-primary,
.wp-block-button__link,
.ast-button,
button[type="submit"],
input[type="submit"] {
	background-color: var(--qs-cobalt);
	color: var(--qs-white);
}

.qs-btn-primary:hover,
.wp-block-button__link:hover,
.ast-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--qs-cobalt-hover);
	color: var(--qs-white);
}

.qs-btn-secondary {
	background-color: transparent;
	color: var(--qs-cobalt);
	border: 2px solid var(--qs-cobalt);
	padding: 0.75rem 1.625rem;
}

.qs-btn-secondary:hover {
	background-color: var(--qs-cobalt);
	color: var(--qs-white);
}

/* Gutenberg wraps the link in a div.wp-block-button — target the inner link when the
   qs-btn-secondary class lands on that wrapper (block "Additional CSS class" field) */
.wp-block-button.qs-btn-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--qs-cobalt);
	border: 2px solid var(--qs-cobalt);
	padding: 0.75rem 1.625rem;
}

.wp-block-button.qs-btn-secondary .wp-block-button__link:hover {
	background-color: var(--qs-cobalt);
	color: var(--qs-white);
}

.wp-block-group.qs-bg-dark .wp-block-button .wp-block-button__link {
	box-shadow: none;
}

.wp-block-group.qs-bg-dark .qs-btn-secondary .wp-block-button__link {
	color: var(--qs-electric);
	border-color: var(--qs-electric);
}

.wp-block-group.qs-bg-dark .qs-btn-secondary .wp-block-button__link:hover {
	background-color: var(--qs-electric);
	color: var(--qs-navy);
}

/* Layout helpers for page content */
.qs-container {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Elementor containers zero out margins via their own later-loading `.e-con` rule, which left
   every narrow .qs-container LEFT-ALIGNED inside the page — the "content in the left half,
   blank right half" problem on desktop. Force the centering back on. */
.e-con.qs-container,
.e-con.qs-prose {
	margin-left: auto !important;
	margin-right: auto !important;
}

.qs-text-center {
	text-align: center;
}

.qs-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--qs-cobalt);
	margin-bottom: 0.5rem;
}

/* Electric Blue fails WCAG AA contrast as text on white (~2.4:1) — only safe on the
   dark navy background, where it passes comfortably (~7.6:1) */
.qs-bg-dark .qs-eyebrow {
	color: var(--qs-electric);
}

.qs-checklist {
	font-size: 0.95rem;
	color: var(--qs-slate-text);
}

.qs-bg-dark .qs-checklist,
.qs-bg-dark .qs-text-secondary {
	color: var(--qs-white);
	opacity: 0.85;
}

.qs-card {
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: var(--qs-radius);
	padding: 1.75rem;
	height: 100%;
}

/* Hero two-column layout: text + illustration, vertically centered */
.qs-hero-columns.wp-block-columns {
	align-items: center;
	gap: 2.5rem;
}

.qs-hero-columns img {
	max-width: 100%;
	height: auto;
}

/* Hero section gets a wider container than the site-wide 800px reading width,
   so the dashboard screenshot has room to render at a legible, non-cramped size */
.qs-hero-section .qs-container {
	max-width: 1300px;
}

.qs-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--qs-slate);
	background-color: #F1F5F9;
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	margin-top: 0.75rem;
}

.qs-founder-columns.wp-block-columns {
	align-items: flex-start;
	gap: 2rem;
}

.qs-founder-photo img {
	border-radius: var(--qs-radius);
	border: 1px solid var(--qs-border, #E2E8F0);
}

.qs-quote {
	border-left: 4px solid var(--qs-cobalt);
	padding: 1.5rem 1.75rem;
	background-color: var(--qs-white, #F8FAFC);
	border-radius: 0 var(--qs-radius) var(--qs-radius) 0;
}

.qs-quote p {
	font-style: italic;
}

.qs-bg-dark .qs-quote {
	background-color: rgba(255, 255, 255, 0.05);
	border-left-color: var(--qs-electric);
}

/* Table styling for the Yesterday/Today/Tomorrow lifecycle table */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid #E2E8F0;
	padding: 0.75rem 1rem;
	text-align: left;
}

.wp-block-table th {
	background-color: #F8FAFC;
	font-weight: 600;
}

/* Navigation */
.main-header-menu .menu-item > a {
	font-family: var(--qs-font);
	font-weight: 500;
}

/* The horizontal logo already contains the "Quantum Sentinel" wordmark — Astra's separate
   site-title text is redundant and word-wraps badly on narrow viewports */
.ast-site-title-wrap {
	display: none;
}

/* Site header logo container */
.site-branding .site-logo-img,
.ast-site-identity img {
	height: auto;
}

.qs-hero-image img {
	border-radius: var(--qs-radius);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

/* Wider container variant for image/grid-heavy sections (reuses the hero's pattern) */
.qs-wide.qs-container {
	max-width: 1100px;
}

.qs-bg-light {
	background-color: var(--qs-light, #F8FAFC);
}

/* ECEM section only — lighter tinted shade, distinct from but harmonious with qs-bg-light */
.qs-ecem-bg {
	background-color: #F1F4F8;
}

/* Compact icon-box modifier — kept for potential dense multi-item rows elsewhere, no longer
   used on ECEM's 5-item row (see .qs-ecem-icon-row below — that one needs to read as big/full
   width, not compact). */
.qs-icon-box-sm {
	padding: 0.85rem 0.5rem;
	min-width: 140px;
}

.qs-icon-box-sm .elementor-icon-box-title {
	font-size: 0.95rem;
}

/* ECEM's 5-item Discover/Build CBOM/Measure/Prioritise/Accelerate row — bigger cards that still
   fit 5-across (qs-wide container is 1100px) and grow via flex:1 1 0 to fill the full row width,
   rather than the default qs-discovery-box min-width (220px) which would force a wrap to 4+1. */
.qs-ecem-icon-row .qs-discovery-box {
	min-width: 190px;
	padding: 1.75rem 1.25rem;
}

.qs-ecem-icon-row .qs-discovery-box .elementor-icon-box-title {
	font-size: 1.1rem;
}

.qs-ecem-icon-row .qs-discovery-box .elementor-icon-box-description {
	font-size: 0.85rem;
	line-height: 1.45;
}

/* Modern gradient section transitions — used between sections that would otherwise meet at a
   flat, abrupt color boundary (or, worse, two adjacent flat sections of the identical shade with
   no visible seam at all). */
.qs-bg-fade-to-light {
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

.qs-bg-fade-tint {
	background: linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 100%);
}

/* Distinct solid section tints — used where two adjacent sections need a genuinely visible
   color break (not just a subtle gradient) between them, e.g. Discovery Method vs. Enterprise
   Cryptography Intelligence, which previously both used the same flat qs-bg-light gray with no
   perceptible seam. */
.qs-bg-tint-cobalt {
	background-color: #EEF2FF;
}

.qs-bg-tint-purple {
	background-color: #F5F0FF;
}



/* Professional prose column: centered, constrained width, left-aligned body text — used for
   long-form paragraph content instead of full-width centered text, which reads poorly at length. */
.qs-prose {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.qs-centered-image img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/* Elementor icon-list items need breathing room when used for long, multi-line copy */
.qs-icon-list-spaced .elementor-icon-list-item {
	margin-bottom: 0.85rem;
	align-items: flex-start;
}

.qs-icon-list-spaced .elementor-icon-list-icon {
	margin-top: 0.2rem;
}

.qs-checklist-icons.elementor-icon-list-items {
	font-size: 0.9rem;
	opacity: 0.9;
}

/* Elementor Icon Box cards used for the discovery-method grid */
.qs-discovery-box {
	background-color: var(--qs-white);
	border: 1px solid #E2E8F0;
	border-radius: var(--qs-radius);
	padding: 1.25rem;
	flex: 1 1 0;
	min-width: 220px;
	height: 100%;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.qs-discovery-box:hover {
	box-shadow: 0 8px 24px rgba(11, 19, 43, 0.08);
	transform: translateY(-2px);
	border-color: var(--qs-cobalt);
	background-color: #F8FAFC;
}

/* Shared card primitive — gets a subtle shadow + hover lift for a more modern feel */
.qs-card {
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: var(--qs-radius);
	padding: 1.75rem;
	height: 100%;
	background-color: var(--qs-white);
	box-shadow: 0 1px 3px rgba(11, 19, 43, 0.06);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.qs-card:hover {
	box-shadow: 0 12px 32px rgba(11, 19, 43, 0.1);
	transform: translateY(-4px);
}

/* Comparison table (Yesterday / Today / Tomorrow) */
.qs-compare-table {
	border-radius: var(--qs-radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: 0 1px 3px rgba(11, 19, 43, 0.06);
	border: 1px solid #E2E8F0;
}

.qs-compare-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 560px;
}

.qs-compare-table th,
.qs-compare-table td {
	padding: 0.9rem 1.25rem;
	text-align: left;
	border-bottom: 1px solid #E2E8F0;
}

.qs-compare-table thead th {
	background-color: var(--qs-navy);
	color: var(--qs-white);
	font-weight: 600;
}

.qs-compare-table tbody tr:nth-child(even) {
	background-color: #F8FAFC;
}

/* Body cells in the highlighted "Tomorrow" column: navy text, not cobalt — cobalt text on the
   blue-tinted fill read as (broken) links and sat below AA contrast. Header stays white-on-cobalt. */
.qs-compare-table td.qs-compare-highlight,
.qs-compare-table th.qs-compare-highlight {
	background-color: rgba(37, 99, 235, 0.08);
	font-weight: 600;
	color: var(--qs-navy);
}

.qs-compare-table thead th.qs-compare-highlight {
	background-color: var(--qs-cobalt);
	color: var(--qs-white);
}

.qs-compare-table tbody tr:last-child td {
	border-bottom: none;
}

/* Closing CTA band */
.qs-cta-band {
	background: linear-gradient(135deg, var(--qs-cobalt) 0%, #1E40AF 100%);
	text-align: center;
}

.qs-cta-band h2, .qs-cta-band p {
	color: var(--qs-white);
}

/* Footer bar */
#footer-widget-area, .ast-small-footer {
	background-color: var(--qs-navy);
	color: var(--qs-white);
}

.ast-small-footer a {
	color: var(--qs-electric);
}

/* Company registration line — sits below the copyright text as a second <p> (added via
   footer-copyright-editor, which wpautop splits on the blank line). Styled as muted
   fine-print rather than matching the copyright line's weight. */
.ast-footer-copyright p:nth-of-type(2) {
	font-size: 0.8rem;
	color: var(--qs-slate-text);
	margin-top: 0.25rem;
}

/* Above-footer row: brand blurb / quick links / contact, 3 columns on a navy band.
   Astra emits its own `[data-section="section-above-footer-builder"]` background rule at
   higher specificity than a plain class selector, so this must match that selector to win. */
.site-above-footer-wrap,
.site-above-footer-wrap[data-section="section-above-footer-builder"] {
	background-color: var(--qs-navy);
	color: var(--qs-white);
	padding-top: 3.5rem;
	padding-bottom: 3rem;
}

.site-above-footer-wrap .ast-builder-footer-grid-columns {
	gap: 2.5rem;
}

/* Astra's free footer builder ties multi-column grid arrangement to a responsive-object
   option shape that its own "update footer builder" ability doesn't write (it writes a
   plain full/content string instead), so the 4 columns render stacked without this override. */
.site-above-footer-wrap .ast-builder-grid-row {
	grid-template-columns: repeat(4, 1fr) !important;
	text-align: left;
}

.qs-footer-sublist-heading {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.6;
	margin: 0.9rem 0 0.4rem;
}

.qs-footer-sublist-heading:first-of-type {
	margin-top: 0;
}

.site-above-footer-wrap .qs-footer-brand {
	text-align: left;
}

@media (max-width: 921px) {
	.site-above-footer-wrap .ast-builder-grid-row {
		grid-template-columns: 1fr !important;
	}
	.site-above-footer-wrap {
		text-align: center;
	}
}

.qs-footer-col {
	opacity: 0.9;
}

.qs-footer-brand {
	opacity: 1;
}

.qs-footer-heading {
	font-weight: 700;
	color: var(--qs-white);
	opacity: 1;
	margin-bottom: 0.75rem;
	font-size: 1.05rem;
}

/* Legal fine-print (company registration number) — smaller and more muted than the
   brand blurb above it, reads as a footnote rather than body copy. */
.qs-footer-legal {
	font-size: 0.8rem;
	opacity: 0.7;
	margin-top: 0.75rem;
}

.qs-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qs-footer-list li {
	margin-bottom: 0.5rem;
}

.site-above-footer-wrap a {
	color: var(--qs-white);
	opacity: 0.85;
	text-decoration: none;
}

.site-above-footer-wrap a:hover {
	color: var(--qs-electric);
	opacity: 1;
}

/* CookieYes consent: slim full-width bottom BAR (banner type is set in the plugin's DB config),
   not a floating box over page content. Text left, buttons right, short height, no CTA overlap.
   !important throughout — CookieYes injects its own styles client-side after this sheet loads. */
.cky-consent-container.cky-banner-bottom,
.cky-consent-container {
	width: 100% !important;
	max-width: 100% !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

.cky-consent-bar {
	padding: 10px 32px !important;
	border-top: 1px solid #E2E8F0 !important;
	box-shadow: 0 -4px 16px rgba(11, 19, 43, 0.08) !important;
}

.cky-notice {
	display: flex !important;
	align-items: center !important;
	gap: 24px !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
}

.cky-notice-group {
	display: flex !important;
	align-items: center !important;
	gap: 24px !important;
	flex: 1 !important;
}

.cky-consent-bar .cky-title {
	display: none !important;
}

.cky-consent-bar .cky-notice-des,
.cky-consent-bar .cky-notice-des p {
	font-size: 0.78rem !important;
	line-height: 1.45 !important;
	margin-bottom: 0 !important;
}

.cky-consent-bar .cky-notice-btn-wrapper {
	display: flex !important;
	gap: 8px !important;
	margin-top: 0 !important;
	flex-shrink: 0 !important;
	flex-wrap: nowrap !important;
}

.cky-consent-bar .cky-notice-btn-wrapper button {
	padding: 8px 16px !important;
	font-size: 0.78rem !important;
	white-space: nowrap !important;
}

@media (max-width: 767px) {
	.cky-notice,
	.cky-notice-group {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.cky-consent-bar {
		padding: 12px 16px !important;
	}
}

/* Contact Form 7 honeypot field — visually hidden from real users, still present in the DOM
   for naive spam bots to fill in (server-side check lives in functions.php's wpcf7_spam filter). */
.qs-honeypot-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
}

/* Contact Form 7 field styling — match the site's input treatment */
.wpcf7-form label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 0.6rem;
	margin-top: 0.3rem;
	border: 1px solid #E2E8F0;
	border-radius: var(--qs-radius);
	font-family: var(--qs-font);
	font-size: 1rem;
}

.wpcf7-form p {
	margin-bottom: 1rem;
}

.wpcf7-list-item {
	display: block;
	margin: 0 0 0.4rem 0;
}

.wpcf7-form .wpcf7-submit {
	margin-top: 0.5rem;
}

.wpcf7-not-valid-tip {
	color: #DC2626;
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

.wpcf7-response-output {
	border-radius: var(--qs-radius);
	padding: 0.85rem 1rem;
	margin-top: 1.5rem;
	font-size: 0.95rem;
}

form.sent .wpcf7-response-output {
	border-color: var(--qs-cobalt);
	background-color: #EFF6FF;
	color: var(--qs-navy);
}

form.failed .wpcf7-response-output,
form.spam .wpcf7-response-output {
	border-color: #DC2626;
	background-color: #FEF2F2;
	color: #7F1D1D;
}

/* Floating LinkedIn tab (Fuse Social sidebar): at mobile widths the full-width single column
   means the tab always sits on top of body text — hide it there; the footer/Contact links carry
   the same URL. */
@media (max-width: 768px) {
	#icon_wrapper {
		display: none !important;
	}
}

/* Compact "never collects" strip (Product) — replaces four hero-sized identical padlock cards.
   An inline Elementor icon-list styled as neutral pills; the intro line carries the "never". */
.qs-never-strip .elementor-icon-list-items.elementor-inline-items {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.qs-never-strip .elementor-icon-list-item.elementor-inline-item {
	background-color: #F1F5F9;
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	margin: 0 !important;
}

.qs-never-strip .elementor-icon-list-icon {
	color: var(--qs-slate-text);
}

.qs-never-strip .elementor-icon-list-text {
	color: var(--qs-navy);
	font-weight: 600;
	font-size: 0.9rem;
}

/* Blog post header image — Astra's own "behind" featured-image position is an Astra Pro
   feature and doesn't render on the free tier, so the image is embedded directly in the
   post content instead (see add_images_to_blog_content.php). Styled to read as a proper
   header image: full content width, rounded corners, no caption chrome. */
.qs-blog-hero-image {
	margin: 0 0 1.5rem 0 !important;
}

.qs-blog-hero-image img {
	width: 100%;
	height: auto;
	border-radius: var(--qs-radius);
	display: block;
}

/* Print stylesheet — used to generate clean whitepaper PDFs (Chrome headless
   Page.printToPDF against the live page). Hides site chrome that has no place in a
   downloadable document; keeps the actual whitepaper content and brand colors intact. */
@media print {
	.site-header,
	#masthead,
	.ast-mobile-header-wrap,
	.menu-toggle,
	#icon_wrapper,
	.cky-consent-container,
	.cky-overlay,
	.ast-scroll-top,
	#footer-widget-area,
	.ast-small-footer,
	.site-above-footer-wrap {
		display: none !important;
	}

	.qs-hero-section {
		padding-top: 2rem !important;
	}

	.qs-section {
		padding-top: 1.75rem !important;
		padding-bottom: 1.75rem !important;
	}

	h2, .qs-card, .qs-discovery-box, .qs-quote {
		break-inside: avoid;
	}

	.qs-cta-band {
		display: none !important;
	}

	body {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* NOT RELIABLE ON CONTAINERS — DO NOT APPLY VIA css_classes. Kept only as a documented reference
   of the exact glow-card values (used correctly as inline per-element container settings instead —
   see fix_hero_glow_inline.php / build_solutions_hubs.php's hub_hero() for the working pattern).
   Investigated at length (2026-07-12): confirmed via curl/XHR/hexdump that this exact rule is
   served correctly and byte-identical to what's in this file, confirmed the DOM class attribute on
   the target container is correct with no encoding issues, confirmed the identical rule renders
   correctly in a totally isolated bare-HTML file, confirmed a sibling test class with the same
   !important properties on the SAME container DOES apply — yet CSS.getMatchedStylesForNode never
   lists this rule as matched for that container, on Elementor 4.1.4's container ("e-con")/atomic
   architecture, even after moving this rule to load after the working test rule. Root cause not
   found; the practical fix is to skip the class and set padding/border/border-radius/box-shadow/
   background/min-height directly as the container's own Elementor settings, exactly as Home's hero
   (built before this class existed) already does — that approach is proven reliable. */
.qs-hero-glow {
	background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(11, 19, 43, 0) 70%) !important;
	padding: 48px !important;
	border-radius: 24px !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 20px 60px -10px rgba(37, 99, 235, 0.35) !important;
	min-height: 444px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.qs-hero-glow {
		min-height: 0 !important;
	}
}

/* "iMac-style" reflection effect for a product screenshot. The reflection image itself is a
   pre-baked asset (product-hero-reflection.png, generated via PIL: bottom ~32% of the source
   screenshot only, flipped, rounded top corners matching the real image's radius, alpha-channel
   fade to transparent) — not a CSS transform/mask trick, so it reads as a genuine partial
   reflection rather than the whole screenshot mirrored. This class just handles layout/mobile. */
.qs-img-reflection img {
	pointer-events: none;
	user-select: none;
}

@media (max-width: 767px) {
	.qs-img-reflection {
		display: none;
	}
}