/*
Theme Name: Shielded Landlord
Theme URI: https://shieldedlandlord.co.uk
Author: Shielded Landlord Ltd
Author URI: https://shieldedlandlord.co.uk
Description: Your Compliance Shield. A compliance-first Full-Site-Editing (block) theme for the ShieldedLandlord marketing site — built for the post-2025 UK rental market. Sapphire Blue + Navy + Silver Grey, Roboto type, and the traffic-light compliance metaphor. Edit everything visually in the Site Editor.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shielded-landlord
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, blog, business
*/

/* ═══════════════════════════════════════════════════════════════
   ShieldedLandlord — component classes
   theme.json supplies the global tokens (colour palette, type scale,
   spacing, layout). This file carries the brand component patterns
   that theme.json cannot express: the dark-section sapphire strip,
   feature-tile top border + hover lift, trust-badge pills, the
   urgency cards, pricing ribbon, sticky header scroll state, and the
   FAQ accordion. Classes are applied to blocks via the editor's
   "Additional CSS class(es)" field (see /patterns).
   ═══════════════════════════════════════════════════════════════ */

:root {
	--sl-sapphire: #004080;
	--sl-sapphire-light: #0D5A9E;
	--sl-sapphire-dark: #003366;
	--sl-navy-dark: #001F3D;
	--sl-silver-grey: #A9A9A9;
	--sl-silver-light: #F0F2F5;
	--sl-silver-border: #E0E4EA;
	--sl-text-body: #2C3345;
	--sl-text-muted: #5A6375;
	--sl-radius-sm: 6px;
	--sl-radius-lg: 12px;
	--sl-radius-pill: 100px;
	--sl-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
	--sl-shadow-md: 0 6px 24px rgba(0,0,0,0.12);
	--sl-shadow-lg: 0 12px 40px rgba(0,0,0,0.18);
	--sl-shadow-sapphire: 0 4px 16px rgba(0,64,128,0.30);
	--sl-transition: 0.2s ease;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:focus-visible {
	outline: 3px solid var(--sl-sapphire);
	outline-offset: 3px;
}

/* ── Tiny ALL-CAPS section label ──────────────────────────────── */
.sl-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-sapphire);
	margin-bottom: 1rem;
}
.sl-eyebrow.has-silver-grey-color,
.sl-section--dark .sl-eyebrow { color: var(--sl-silver-grey); }

/* ── Trust badge — the signature pill ─────────────────────────── */
.sl-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: var(--sl-radius-pill);
	line-height: 1.3;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.sl-trust-badge { white-space: normal; }
}
.sl-trust-badge--light {
	background: rgba(0,64,128,0.06);
	border-color: rgba(0,64,128,0.25);
	color: var(--sl-sapphire);
}
.sl-trust-badge .sl-icon { flex: 0 0 auto; }

/* ── Icon sizing ──────────────────────────────────────────────── */
.sl-icon { display: inline-block; vertical-align: middle; line-height: 0; }
/* Brand icons ship as PNGs (assets/images/icons/) — robust in the block
   editor, where inline SVG can be stripped from saved content. */
.sl-icon img,
.sl-icon-img { display: block; width: auto; height: auto; }

/* ═══════════════════════════════════════════════════════════════
   SECTIONS — dark sections get the sapphire underline strip + a
   subtle cool radial lighting pattern. Apply .sl-section--dark to
   any navy/sapphire-dark group.
   ═══════════════════════════════════════════════════════════════ */
.sl-section { position: relative; }

.sl-section--dark {
	position: relative;
	overflow: hidden;
}
.sl-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 60% 50% at 75% 25%, rgba(13,90,158,0.22) 0%, transparent 70%),
		radial-gradient(ellipse 50% 80% at 8% 85%, rgba(13,90,158,0.18) 0%, transparent 60%);
}
.sl-section--dark::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--sl-sapphire);
}
.sl-section--dark > * { position: relative; z-index: 1; }

/* ── Hero ─────────────────────────────────────────────────────── */
.sl-hero { position: relative; overflow: hidden; }
.sl-hero--home    { min-height: 88vh; display: flex; align-items: center; }
.sl-hero--feature { min-height: 52vh; display: flex; align-items: flex-end; }
.sl-hero--pricing { min-height: 42vh; display: flex; align-items: flex-end; }
.sl-hero__underline-link a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--sl-silver-grey);
	text-underline-offset: 8px;
	text-decoration-thickness: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE TILE — white card, sapphire top border, hover lift.
   Apply .sl-feature-tile to a core/group with a column of blocks.
   ═══════════════════════════════════════════════════════════════ */
.sl-feature-tile {
	background: #fff;
	border: 1px solid var(--sl-silver-border);
	border-top: 4px solid var(--sl-sapphire);
	border-radius: var(--sl-radius-lg);
	box-shadow: var(--sl-shadow-sm);
	padding: 2.5rem 2rem 2rem;
	transition: transform var(--sl-transition), box-shadow var(--sl-transition);
	height: 100%;
}
.sl-feature-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--sl-shadow-md);
}
.sl-feature-tile .sl-icon { color: var(--sl-sapphire); margin-bottom: 0.5rem; }
.sl-feature-tile .sl-eyebrow { margin-bottom: 0.25rem; }
.sl-feature-tile h3 { margin: 0 0 0.5rem; color: var(--sl-navy-dark); }
.sl-feature-tile .sl-learn-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	transition: gap var(--sl-transition);
}
.sl-feature-tile:hover .sl-learn-more a { gap: 0.625rem; }

/* ═══════════════════════════════════════════════════════════════
   URGENCY CARD — translucent glass card with silver-grey left bar.
   Used on dark sections for callouts / timeline items.
   ═══════════════════════════════════════════════════════════════ */
.sl-urgency-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-left: 4px solid var(--sl-silver-grey);
	border-radius: var(--sl-radius-lg);
	padding: 1.5rem 2rem;
	height: 100%;
}
.sl-urgency-card h3 { color: #fff; margin: 0 0 0.5rem; font-size: 1rem; }
.sl-urgency-card p { color: rgba(255,255,255,0.78); margin: 0; line-height: 1.65; }
.sl-urgency-card .sl-icon { color: var(--sl-silver-grey); margin-bottom: 0.5rem; }

/* ── Awaab's Law timer rows ───────────────────────────────────── */
.sl-timeline-row {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1rem 1.5rem;
	background: #fff;
	border-radius: var(--sl-radius-sm);
	border-left: 3px solid var(--sl-sapphire);
	box-shadow: var(--sl-shadow-sm);
}
.sl-timeline-row strong { color: var(--sl-navy-dark); min-width: 110px; display: inline-block; }
.sl-timeline-row span { color: var(--sl-text-body); }

/* ═══════════════════════════════════════════════════════════════
   PRICING CARD — featured variant gets a sapphire border + ribbon.
   ═══════════════════════════════════════════════════════════════ */
.sl-pricing-card {
	position: relative;
	background: #fff;
	border: 2px solid var(--sl-silver-border);
	border-radius: var(--sl-radius-lg);
	box-shadow: var(--sl-shadow-md);
	padding: 2.5rem 2rem 2rem;
	height: 100%;
}
.sl-pricing-card--featured { border-color: var(--sl-sapphire); }
.sl-pricing-ribbon {
	position: absolute;
	top: 0; left: 50%;
	transform: translate(-50%, -50%);
	background: var(--sl-sapphire);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 1rem;
	border-radius: var(--sl-radius-pill);
	white-space: nowrap;
}
.sl-price {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--sl-navy-dark);
	line-height: 1;
}
.sl-price sup { font-size: 1.25rem; vertical-align: top; }
.sl-price .sl-price-period { font-size: 1rem; font-weight: 400; color: var(--sl-text-muted); }
.sl-plan-name {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--sl-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.sl-plan-features { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; }
.sl-plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--sl-text-body);
	padding: 0.25rem 0;
}
.sl-plan-features li::before {
	content: "";
	flex: 0 0 auto;
	width: 18px; height: 18px;
	margin-top: 2px;
	background: no-repeat center / contain;
	background-image: url("assets/images/icons/check-fill-sapphire.png");
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — registered as block styles in functions.php.
   ═══════════════════════════════════════════════════════════════ */
.wp-block-button.is-style-sl-sapphire .wp-block-button__link,
.wp-block-button.is-style-sl-outline-sapphire .wp-block-button__link,
.wp-block-button.is-style-sl-outline-white .wp-block-button__link {
	border-radius: var(--sl-radius-sm);
	font-weight: 700;
	border: 2px solid transparent;
	padding: 0.875rem 2rem;
	transition: all var(--sl-transition);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.wp-block-button.is-style-sl-sapphire .wp-block-button__link {
	background: var(--sl-sapphire);
	color: #fff;
	border-color: var(--sl-sapphire);
}
.wp-block-button.is-style-sl-sapphire .wp-block-button__link:hover {
	background: var(--sl-sapphire-light);
	border-color: var(--sl-sapphire-light);
	transform: translateY(-1px);
	box-shadow: var(--sl-shadow-sapphire);
}
.wp-block-button.is-style-sl-outline-sapphire .wp-block-button__link {
	background: transparent;
	color: var(--sl-sapphire);
	border-color: var(--sl-sapphire);
}
.wp-block-button.is-style-sl-outline-sapphire .wp-block-button__link:hover {
	background: rgba(0,64,128,0.08);
	transform: translateY(-1px);
}
.wp-block-button.is-style-sl-outline-white .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: #fff;
}
.wp-block-button.is-style-sl-outline-white .wp-block-button__link:hover {
	background: rgba(255,255,255,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — sticky, transparent on load, navy-dark once scrolled.
   ═══════════════════════════════════════════════════════════════ */
.sl-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	background: transparent;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
/* Every template opens with a dark hero / title band, so the fixed
   transparent header always sits over a navy field at the top. */
.sl-header.is-scrolled {
	background: var(--sl-navy-dark);
	box-shadow: 0 2px 20px rgba(0,0,0,0.40);
}
.sl-header .wp-block-navigation a,
.sl-header .wp-block-navigation .wp-block-navigation-item__label {
	color: #fff;
	font-weight: 500;
}
.sl-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: var(--sl-radius-sm);
	transition: background var(--sl-transition);
}
.sl-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: rgba(255,255,255,0.1);
}
.sl-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--sl-silver-border);
	border-radius: var(--sl-radius-lg);
	box-shadow: var(--sl-shadow-lg);
	padding: 0.5rem;
	min-width: 240px;
}
.sl-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	color: var(--sl-navy-dark);
	border-radius: var(--sl-radius-sm);
}
.sl-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background: var(--sl-silver-light);
}

/* ── Footer ───────────────────────────────────────────────────── */
.sl-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.sl-footer a:hover { color: #fff; }
.sl-footer .sl-eyebrow { color: var(--sl-silver-grey); margin-bottom: 0.75rem; }
.sl-footer-legal a { color: rgba(255,255,255,0.45); font-size: 0.8rem; }

/* ── Quotes / trust blockquotes on dark ───────────────────────── */
.sl-quote {
	padding: 1.5rem;
	border: 1px solid rgba(169,169,169,0.30);
	border-radius: var(--sl-radius-lg);
	background: rgba(255,255,255,0.03);
	font-style: italic;
	color: rgba(255,255,255,0.82);
	line-height: 1.6;
	height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ — native <details>/<summary>, styled to the brand accordion.
   The core/details block outputs <details><summary>…</summary>…
   ═══════════════════════════════════════════════════════════════ */
.sl-faq .wp-block-details {
	border: 1px solid var(--sl-silver-border);
	border-radius: var(--sl-radius-lg);
	overflow: hidden;
	background: #fff;
	margin: 0 0 0.75rem;
}
.sl-faq .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	padding: 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sl-navy-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transition: background var(--sl-transition), color var(--sl-transition);
}
.sl-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.sl-faq .wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 24px; height: 24px;
	border: 2px solid currentColor;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	line-height: 1;
	transition: transform var(--sl-transition);
}
.sl-faq .wp-block-details[open] summary {
	background: var(--sl-navy-dark);
	color: #fff;
}
.sl-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.sl-faq .wp-block-details > :not(summary) {
	padding: 1rem 1.5rem 1.5rem;
	color: var(--sl-text-muted);
	line-height: 1.7;
	border-top: 1px solid var(--sl-silver-border);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL — progressive enhancement (theme.js adds .is-visible)
   ═══════════════════════════════════════════════════════════════ */
.sl-animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.sl-animate.is-visible { opacity: 1; transform: translateY(0); }
.sl-animate.sl-delay-1 { transition-delay: 0.1s; }
.sl-animate.sl-delay-2 { transition-delay: 0.2s; }
.sl-animate.sl-delay-3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
	.sl-animate { opacity: 1; transform: none; transition: none; }
}

/* ── Blog / post content niceties ─────────────────────────────── */
.sl-post-card {
	background: #fff;
	border: 1px solid var(--sl-silver-border);
	border-top: 4px solid var(--sl-sapphire);
	border-radius: var(--sl-radius-lg);
	box-shadow: var(--sl-shadow-sm);
	transition: transform var(--sl-transition), box-shadow var(--sl-transition);
	height: 100%;
	overflow: hidden;
}
.sl-post-card:hover { transform: translateY(-4px); box-shadow: var(--sl-shadow-md); }

/* ═══════════════════════════════════════════════════════════════
   FORM CARD — wraps a form-plugin shortcode (WPForms / Gravity /
   Contact Form 7) and re-skins its fields to the brand. The card is
   white with a sapphire top accent strip.
   ═══════════════════════════════════════════════════════════════ */
.sl-form-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--sl-silver-border);
	border-radius: var(--sl-radius-lg);
	box-shadow: var(--sl-shadow-md);
	overflow: hidden;
}
.sl-form-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--sl-sapphire);
}

/* Generic field skin — applies to native inputs and the markup that
   WPForms / Gravity Forms / Contact Form 7 output inside the card. */
.sl-form-card label,
.sl-form-card .wpforms-field-label,
.sl-form-card .gfield_label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-navy-dark);
	margin-bottom: 0.375rem;
	display: block;
}
.sl-form-card input[type="text"],
.sl-form-card input[type="email"],
.sl-form-card input[type="tel"],
.sl-form-card input[type="url"],
.sl-form-card input[type="number"],
.sl-form-card select,
.sl-form-card textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: var(--sl-radius-sm);
	border: 2px solid var(--sl-silver-border);
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	color: #0A1628;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sl-form-card input:focus,
.sl-form-card select:focus,
.sl-form-card textarea:focus {
	outline: none;
	border-color: var(--sl-sapphire);
	box-shadow: 0 0 0 3px rgba(0,64,128,0.15);
}
.sl-form-card button[type="submit"],
.sl-form-card input[type="submit"],
.sl-form-card .wpforms-submit,
.sl-form-card .gform_button {
	width: 100%;
	background: var(--sl-sapphire);
	color: #fff;
	border: 2px solid var(--sl-sapphire);
	border-radius: var(--sl-radius-sm);
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	padding: 0.875rem 2rem;
	cursor: pointer;
	transition: all var(--sl-transition);
}
.sl-form-card button[type="submit"]:hover,
.sl-form-card input[type="submit"]:hover,
.sl-form-card .wpforms-submit:hover,
.sl-form-card .gform_button:hover {
	background: var(--sl-sapphire-light);
	border-color: var(--sl-sapphire-light);
	transform: translateY(-1px);
	box-shadow: var(--sl-shadow-sapphire);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 781px) {
	.sl-hero--home { min-height: 80vh; }
	.sl-timeline-row { flex-direction: column; gap: 0.25rem; }
	.sl-timeline-row strong { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

/* Header — glassy translucent-white bar, dark nav text */
.sl-header {
	background: rgba(251,252,254,0.80);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(0,31,61,0.08);
	box-shadow: none;
}
.sl-header.is-scrolled {
	background: rgba(251,252,254,0.95);
	box-shadow: 0 6px 24px rgba(0,31,61,0.07);
	border-bottom-color: rgba(0,31,61,0.10);
}
.sl-header .wp-block-navigation a,
.sl-header .wp-block-navigation .wp-block-navigation-item__label {
	color: var(--sl-text-body);
}
.sl-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: rgba(0,64,128,0.07);
	color: var(--sl-sapphire);
}

/* Hero — light canvas with soft sapphire gradient mesh */
.sl-hero--home {
	min-height: 88vh;
	display: flex;
	align-items: center;
	background-color: #FBFCFE;
}
.sl-hero--home::before {
	background:
		radial-gradient(46% 55% at 12% 8%, rgba(0,64,128,0.10) 0%, transparent 62%),
		radial-gradient(44% 52% at 92% 16%, rgba(13,90,158,0.12) 0%, transparent 60%),
		linear-gradient(180deg, #EEF3FB 0%, #FBFCFE 60%);
}
.sl-hero__underline-link a {
	color: var(--sl-sapphire);
	text-decoration-color: rgba(0,64,128,0.32);
}

/* Stat strip — used in hero */
.sl-stat-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 2.5rem;
}
.sl-stat { text-align: left; }
.sl-stat b {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--sl-navy-dark);
	line-height: 1;
	letter-spacing: -0.02em;
}
.sl-stat span {
	font-size: 0.8rem;
	color: var(--sl-text-muted);
}

/* Urgency card — light white card */
.sl-urgency-card {
	background: #FFFFFF;
	border: 1px solid #E6EAF1;
	border-left: 4px solid var(--sl-sapphire);
	box-shadow: 0 4px 20px rgba(0,31,61,0.05);
}
.sl-urgency-card h3 { color: var(--sl-navy-dark); }
.sl-urgency-card p  { color: var(--sl-text-body); }

/* Quote card — light white card */
.sl-quote {
	background: #FFFFFF;
	border: 1px solid #E6EAF1;
	box-shadow: 0 4px 20px rgba(0,31,61,0.05);
	color: var(--sl-text-body);
	font-style: normal;
	padding: 1.75rem 1.875rem;
}
.sl-quote::before {
	content: "\201C";
	display: block;
	font-size: 2.5rem;
	line-height: 0.5;
	color: var(--sl-sapphire);
	margin-bottom: 0.75rem;
}

/* Footer — light silver */
.sl-footer {
	background: #F2F5FA !important;
	border-top: 1px solid #E6EAF1;
}
.sl-footer a { color: var(--sl-text-muted); }
.sl-footer a:hover { color: var(--sl-sapphire); }
.sl-footer .sl-eyebrow { color: var(--sl-sapphire); }
.sl-footer-legal a { color: #8A93A6; }
/* Override dark inline colours written into the footer template */
.sl-footer [style*="rgba(255,255,255"] { color: var(--sl-text-body) !important; }
.sl-footer .sl-footer-legal [style*="rgba(255,255,255"] { color: #8A93A6 !important; }

/* =============================================
   LIGHT THEME — additional components
   ============================================= */

/* Hero: position context for gradient mesh */
.sl-hero--home {
	position: relative;
	overflow: hidden;
	background-color: #FBFCFE;
	display: block;
	min-height: 0;
}
.sl-hero--home::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(46% 55% at 12% 8%, rgba(0,64,128,0.12) 0%, transparent 62%),
		radial-gradient(44% 52% at 92% 16%, rgba(13,90,158,0.14) 0%, transparent 60%),
		radial-gradient(60% 62% at 76% 108%, rgba(120,150,200,0.16) 0%, transparent 60%),
		linear-gradient(180deg, #EEF3FB 0%, #FBFCFE 60%);
}
.sl-hero--home > * { position: relative; z-index: 1; }

/* Stat strip */
.sl-stat-strip { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center !important; margin-top: 3.25rem; }
.sl-stat { text-align: center; }
.sl-stat b { display: block; font-size: 1.875rem; font-weight: 700; color: #001F3D; line-height: 1; letter-spacing: -0.02em; }
.sl-stat span { font-size: 0.8125rem; color: #5A6375; }

/* Phone frame */
.sl-phone { --w: 240px; width: var(--w); flex: 0 0 auto; background: #0B1220; border-radius: calc(var(--w) * 0.17); padding: calc(var(--w) * 0.03); box-shadow: 0 26px 60px rgba(0,31,61,0.20), 0 6px 16px rgba(0,31,61,0.10); border: 1px solid rgba(255,255,255,0.06); }
.sl-phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * 0.14); }

/* Hero phone cluster */
.sl-hero-cluster { display: flex; justify-content: center; align-items: flex-end; margin-top: 3.75rem; }
.sl-hero-cluster .is-main { --w: 286px; z-index: 3; }
.sl-hero-cluster .is-side { --w: 220px; z-index: 1; margin-bottom: 30px; }
.sl-hero-cluster .is-left { transform: rotate(-7deg); margin-right: -54px; }
.sl-hero-cluster .is-right { transform: rotate(7deg); margin-left: -54px; }

/* Spotlight rows */
.sl-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; max-width: 1040px; margin: 0 auto; }
.sl-spotlight + .sl-spotlight { margin-top: 4.5rem; }
.sl-spotlight__media { display: flex; justify-content: center; align-items: flex-end; position: relative; padding: 2rem 0; border-radius: 28px; background: radial-gradient(58% 58% at 50% 42%, rgba(0,64,128,0.08), transparent 72%); }
.sl-spotlight--reverse .sl-spotlight__media { order: 2; }
.sl-spotlight__media.is-duo { position: relative; }
.sl-spotlight__media.is-duo .is-back { --w: 198px; transform: rotate(-5deg); z-index: 1; }
.sl-spotlight__media.is-duo .is-front { --w: 226px; transform: rotate(4deg); margin-left: -66px; margin-bottom: 34px; z-index: 2; }
.sl-spotlight__text h3 { font-size: 1.625rem; margin: 0.25rem 0 0.75rem; }
.sl-learn-more a, .sl-learm-more a { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; font-size: 0.9375rem; color: var(--sl-sapphire); text-decoration: none; }

/* Outline sapphire button */
.is-style-sl-outline-sapphire .wp-block-button__link { background: transparent !important; color: var(--sl-sapphire) !important; border: 2px solid var(--sl-sapphire) !important; border-radius: 8px !important; font-weight: 700 !important; }
.is-style-sl-outline-sapphire .wp-block-button__link:hover { background: rgba(0,64,128,0.07) !important; }

/* Hero underline link extra properties */
.sl-hero__underline-link a { text-underline-offset: 8px; text-decoration-thickness: 4px; }

/* Responsive */
@media (max-width: 860px) {
	.sl-hero-cluster .is-side { display: none; }
	.sl-hero-cluster .is-main { --w: 260px; }
	.sl-spotlight { grid-template-columns: 1fr; gap: 2rem; }
	.sl-spotlight--reverse .sl-spotlight__media { order: 0; }
}