/**
 * Assure marketing theme — mirrors the plugin design system
 * (docs/design-system.md / assets/src/admin/style.css).
 * Load after /css/field-notes-product.css so product tokens win.
 */

.field-product.assure-product {
	--assure-navy: #0b1830;
	--assure-navy-deep: #071123;
	--assure-blue: #0878f9;
	--assure-blue-dark: #0563d3;
	--assure-cyan: #21a4f3;
	--assure-teal: #168a6b;
	--assure-canvas: #f6f8fb;
	--assure-surface: #ffffff;
	--assure-surface-alt: #f0f3f7;
	--assure-border: #dde3ea;
	--assure-text: #172033;
	--assure-text-secondary: #667085;
	--assure-text-muted: #98a2b3;
	--assure-warning: #b76a08;
	--assure-danger: #d64545;
	--assure-radius: 10px;
	--assure-maxw: 1040px;

	/* Compat aliases used by older page rules */
	--navy: var(--assure-navy);
	--primary: var(--assure-blue);
	--highlight: var(--assure-cyan);
	--success: var(--assure-teal);
	--canvas: var(--assure-canvas);
	--surface: var(--assure-surface);
	--alt: var(--assure-surface-alt);
	--border: var(--assure-border);
	--text: var(--assure-text);
	--muted: var(--assure-text-secondary);
	--muted-light: var(--assure-text-muted);
	--warning: var(--assure-warning);
	--radius: var(--assure-radius);
	--maxw: var(--assure-maxw);
	--line: var(--assure-border);
	--bg: var(--assure-canvas);
	--card: var(--assure-surface);
	--green: var(--assure-teal);
	--link: var(--assure-blue-dark);
	--accent: var(--assure-blue);
	--accent-2: var(--assure-cyan);

	background:
		radial-gradient(900px 480px at 92% -10%, rgba(33, 164, 243, 0.14), transparent 55%),
		radial-gradient(720px 420px at -8% 12%, rgba(8, 120, 249, 0.08), transparent 50%),
		var(--assure-canvas);
	color: var(--assure-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

.field-product.assure-product .field-brand-bar {
	background: var(--assure-navy-deep);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: Inter, system-ui, sans-serif;
}

.field-product.assure-product .field-brand-bar .field-back {
	color: rgba(232, 240, 249, 0.78);
}

.field-product.assure-product .field-brand-bar .field-back:hover {
	color: #fff;
	text-decoration: none;
}

.field-product.assure-product header {
	background: linear-gradient(180deg, var(--assure-navy-deep), var(--assure-navy));
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: none;
	padding-top: env(safe-area-inset-top, 0);
	position: sticky;
	top: 0;
	z-index: 20;
}

.field-product.assure-product header .brand-mark,
.field-product.assure-product header .brand,
.field-product.assure-product header .brand-stack,
.field-product.assure-product header nav a,
.field-product.assure-product header .nav-links a {
	color: rgba(232, 240, 249, 0.76);
	font-family: Inter, system-ui, sans-serif;
}

.field-product.assure-product header .brand-mark,
.field-product.assure-product header .brand,
.field-product.assure-product header .brand-stack {
	color: #fff;
	text-decoration: none;
}

.field-product.assure-product header .brand-mark__by,
.field-product.assure-product header .brand-stack .brand-by {
	color: rgba(143, 208, 255, 0.72);
	opacity: 1;
}

.field-product.assure-product header nav a:hover,
.field-product.assure-product header .nav-links a:hover {
	color: #fff;
}

.field-product.assure-product h1,
.field-product.assure-product h2,
.field-product.assure-product h3,
.field-product.assure-product .hero-brand,
.field-product.assure-product .section-title {
	font-family: Inter, system-ui, sans-serif;
	color: var(--assure-text);
	font-weight: 650;
	letter-spacing: -0.025em;
	background: none;
	-webkit-text-fill-color: unset;
}

.field-product.assure-product .btn {
	border-radius: 8px;
	min-height: 40px;
	font-weight: 600;
	box-shadow: none;
}

.field-product.assure-product .btn-primary {
	background: var(--assure-blue);
	border-color: var(--assure-blue);
	color: #fff;
}

.field-product.assure-product .btn-primary:hover {
	background: var(--assure-blue-dark);
	border-color: var(--assure-blue-dark);
	color: #fff;
	filter: none;
}

.field-product.assure-product .btn-secondary {
	background: var(--assure-surface);
	color: var(--assure-text);
	border: 1px solid var(--assure-border);
}

.field-product.assure-product .btn-secondary:hover {
	border-color: #b8c2cf;
	color: var(--assure-navy);
}

.field-product.assure-product :is(.hero-card, .feature-card, .pricing-card, .card, .pack-card, .shot-card, .stat-card, .early-access-modal, .form-panel) {
	background: var(--assure-surface);
	border: 1px solid var(--assure-border);
	border-radius: var(--assure-radius);
	box-shadow: none;
}

.field-product.assure-product :is(.feature-card strong, .pricing-card h3, .pricing-card .price, .hero-card .wordmark__name) {
	color: var(--assure-navy);
}

.field-product.assure-product :is(.feature-card p, .pricing-card p, .price-note, .hero-lead, .section-lead) {
	color: var(--assure-text-secondary);
}

.field-product.assure-product :is(.lifecycle, .note, .disclaimer, .free-note) {
	background: var(--assure-surface);
	border-color: var(--assure-border);
}

.field-product.assure-product :is(.eyebrow, .hero-eyebrow, .tag, .tier-price) {
	color: var(--assure-blue-dark);
}

.field-product.assure-product .tag {
	background: rgba(22, 138, 107, 0.1);
	color: var(--assure-teal);
}

.field-product.assure-product input:not([type="checkbox"]):not([type="radio"]),
.field-product.assure-product select,
.field-product.assure-product textarea {
	background: var(--assure-surface);
	color: var(--assure-text);
	border: 1px solid #cbd3dd;
	border-radius: 8px;
	min-height: 40px;
}

.field-product.assure-product input:focus,
.field-product.assure-product select:focus,
.field-product.assure-product textarea:focus {
	border-color: var(--assure-blue);
	box-shadow: 0 0 0 2px rgba(8, 120, 249, 0.15);
	outline: none;
}

.field-product.assure-product a:focus-visible,
.field-product.assure-product button:focus-visible {
	outline: 2px solid var(--assure-cyan);
	outline-offset: 3px;
}

.field-product.assure-product :is(.cta-panel, .final-cta) {
	background: linear-gradient(180deg, var(--assure-navy-deep), var(--assure-navy));
	color: #fff;
	border-radius: var(--assure-radius);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.field-product.assure-product :is(.cta-panel, .final-cta) :is(h1, h2, h3) {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.field-product.assure-product :is(.cta-panel, .final-cta) p {
	color: rgba(232, 240, 249, 0.72);
}

.field-product.assure-product :is(.cta-panel, .final-cta) .btn-primary {
	background: var(--assure-cyan);
	border-color: var(--assure-cyan);
	color: var(--assure-navy-deep);
}

.field-product.assure-product :is(.cta-panel, .final-cta) .btn-primary:hover {
	background: #1b8fd4;
	border-color: #1b8fd4;
	color: #fff;
}

/* Shared brand mark with shield */
.assure-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: #fff;
	line-height: 1.1;
}

.assure-brand__mark {
	width: 29px;
	height: 29px;
	flex: 0 0 29px;
}

.assure-brand__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.assure-brand__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.assure-brand__by {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(143, 208, 255, 0.72);
}

/* Status vocabulary (product StatusBadge) */
.assure-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.02em;
	color: var(--assure-text-secondary);
}

.assure-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--assure-text-muted);
	flex: 0 0 8px;
}

.assure-status--ok::before { background: var(--assure-teal); }
.assure-status--ok { color: var(--assure-teal); }
.assure-status--info::before { background: var(--assure-cyan); }
.assure-status--info { color: var(--assure-blue-dark); }
.assure-status--warn::before { background: var(--assure-warning); }
.assure-status--warn { color: var(--assure-warning); }

/* Inline SVG icons tinted like dashicons */
.assure-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--assure-blue);
	flex: 0 0 20px;
}

.assure-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}