/* ==========================================================================
   Signal entrance pop-up, homepage only once the Signal page is live.
   Design: Fortis "SIGNAL Report Web Popup_Dark 4x3" (800x600 artboard,
   Oct 16/19). Built with live text so it reads on every screen size.

   Desktop/tablet: a 4:3 stage that keeps the artboard's proportions. Every
   position below is a share of the 800x600 artboard and every size is in
   container units (1cqw = 8px at full size), so the layout scales as a unit.
   Phones and short screens: stacked layout (art band, then text), scrolls
   inside the dialog if needed.

   Loaded on regular theme pages, so it is scoped to #sig-popup and answers
   the theme's !important rules (style.css sets body/button font-family and
   heading sizes with !important; the theme hides <br> on small screens, so
   intended line breaks are block spans).
   ========================================================================== */

@font-face {
	font-family: "Signal Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

#sig-popup {
	--sigp-navy: #011526;
	--sigp-text: #f5f7fb;
	--sigp-teal: #1f968b;
	/* Design purple is #7c1b93 (2.1:1 on this background, below WCAG AA).
	   This lighter tint keeps the hue and passes AA (4.8:1). */
	--sigp-purple: #b061d6;
	--sigp-gold: #fde725;
	--sigp-gold-hover: #f2db0c;
	--sigp-font: "Signal Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sigp-max-h: calc(100vh - 32px);

	position: fixed; inset: 0; margin: auto;
	width: min(800px, calc(100vw - 32px), calc(var(--sigp-max-h) * 4 / 3));
	height: fit-content; max-width: none; max-height: var(--sigp-max-h);
	padding: 0; border: 0; border-radius: 20px; overflow: hidden;
	background: linear-gradient(90deg, #440154 0%, #2f0745 20%, #150e34 50%, #061329 78%, #011526 100%);
	color: var(--sigp-text);
	box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.1);
	font-family: var(--sigp-font) !important;
	text-align: left;
	isolation: isolate;
	z-index: 2147483000;
}
@supports (height: 100dvh) {
	#sig-popup { --sigp-max-h: calc(100dvh - 32px); }
}
#sig-popup:not([open]) { display: none; }
#sig-popup::backdrop { background: rgba(1, 21, 38, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#sig-popup[open] { animation: sigp-in .3s ease both; }
@keyframes sigp-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #sig-popup[open] { animation: none; } }

#sig-popup *, #sig-popup *::before, #sig-popup *::after { box-sizing: border-box; }
#sig-popup p { margin: 0; padding: 0; }
#sig-popup img { max-width: none; height: auto; border: 0; }

/* ---- Stage (desktop/tablet): 4:3, positions in % of the artboard ---- */
#sig-popup .sigp__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; container-type: inline-size; overflow: hidden; outline: none; }
#sig-popup .sigp__art { position: absolute; inset: 0; pointer-events: none; }
#sig-popup .sigp__circles { position: absolute; left: 0; top: 0; width: 37.5%; height: 100%; display: block; }
#sig-popup .sigp__pill {
	position: absolute; right: 0; top: 12.5%; width: 14.97%; height: 17.96%;
	border-radius: 999px 0 0 999px;
	background: linear-gradient(90deg, #7c1b93 0%, #702a91 18%, #51538f 52%, #20948b 99%, #1f968b 100%);
}
#sig-popup .sigp__dots {
	position: absolute; left: 63.91%; top: 88.5%; right: 0; bottom: 0; pointer-events: none;
	/* Artboard dots: 3.42 units across on a 21.39 x 19.68 grid. */
	background-image: radial-gradient(circle at center, var(--sigp-gold) 0 0.2cqw, transparent 0.23cqw);
	background-size: 2.674cqw 2.46cqw;
	background-repeat: repeat;
}

/* Report cover: the artboard's image box (0,75 to 369.6,519.2). */
#sig-popup .sigp__cover { position: absolute; left: 0; top: 12.5%; width: 46.2%; height: 74.03%; }
#sig-popup .sigp__cover img { position: absolute; display: block; }
/* Fortis' own mockup PNG fills the box as is. */
#sig-popup .sigp__cover--mock img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Stand-in until that PNG arrives: page 1 of the report, tilted, on a fanned stack. */
#sig-popup .sigp__cover--stack img,
#sig-popup .sigp__cover--stack::before,
#sig-popup .sigp__cover--stack::after {
	left: 19%; top: 7%; width: 70%; aspect-ratio: 760 / 1077; height: auto;
	border-radius: 0.25cqw;
	transform: rotate(-9deg);
	transform-origin: 50% 60%;
}
#sig-popup .sigp__cover--stack::before,
#sig-popup .sigp__cover--stack::after { content: ""; position: absolute; }
#sig-popup .sigp__cover--stack::before {
	background: #0b1b30;
	box-shadow: -0.4cqw 0.3cqw 0 -0.05cqw #08172a, -0.8cqw 0.6cqw 0 -0.1cqw #061325, 0 1.6cqw 3.2cqw rgba(0, 0, 0, 0.45);
	transform: rotate(-13deg) translate(-2.5%, 1%);
}
#sig-popup .sigp__cover--stack::after {
	background: linear-gradient(200deg, rgba(124, 27, 147, 0.5), rgba(31, 150, 139, 0.18) 60%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transform: rotate(-5deg) translate(1.5%, -3%);
}
#sig-popup .sigp__cover--stack img { z-index: 1; box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.35); }

/* ---- Text column: left edge at x 416.6 of 800 ---- */
#sig-popup .sigp__content { position: absolute; left: 52.08%; top: 10.17%; width: 41%; }
#sig-popup .sigp__stat {
	display: block;
	font-family: var(--sigp-font) !important; font-weight: 700 !important;
	font-size: 17.44cqw !important; line-height: 1 !important; letter-spacing: -0.02em;
	color: var(--sigp-teal); white-space: nowrap;
	margin-left: -0.675cqw; /* optical: the 6's side bearing */
}
#sig-popup .sigp__pct { display: inline-block; font-size: 0.59em; line-height: 1; vertical-align: top; position: relative; top: 0.06em; margin-left: 0.04em; }
#sig-popup .sigp__text {
	margin-top: 3.575cqw;
	font-family: var(--sigp-font) !important; font-weight: 400 !important;
	font-size: 2.406cqw !important; line-height: 2.875cqw !important;
	color: var(--sigp-text);
}
#sig-popup .sigp__text + .sigp__text { margin-top: 2.875cqw; }
#sig-popup .sigp__l { display: block; }
#sig-popup .sigp__title { font-weight: 700 !important; color: var(--sigp-purple); }
#sig-popup .sigp__cta {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24.92cqw; height: 5.46cqw; margin-top: 3.33cqw; padding: 0 1cqw;
	background: var(--sigp-gold); color: var(--sigp-navy) !important; border: 0; border-radius: 999px;
	font-family: var(--sigp-font) !important; font-weight: 600 !important; font-size: 2.36cqw !important; line-height: 1 !important;
	letter-spacing: 0; text-align: center; text-decoration: none !important; white-space: nowrap;
	transition: background-color .18s ease, box-shadow .18s ease;
}
#sig-popup .sigp__cta:hover { background: var(--sigp-gold-hover); box-shadow: 0 10px 24px -10px rgba(253, 231, 37, .6); }
#sig-popup .sigp__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sigp-navy), 0 0 0 5px var(--sigp-gold); }

/* ---- Close ---- */
#sig-popup .sigp__close {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 999px;
	background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: transform .15s ease, box-shadow .15s ease;
}
#sig-popup .sigp__close img { display: block; width: 18px; height: 18px; }
#sig-popup .sigp__close:hover { transform: scale(1.06); }
#sig-popup .sigp__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sigp-navy), 0 0 0 5px var(--sigp-gold); }
html.sigp-open { overflow: hidden; }

/* ---- Phones (portrait): stacked, art band then text ---- */
@media (max-width: 639px) {
	#sig-popup { width: min(480px, calc(100vw - 32px)); border-radius: 16px; }
	#sig-popup .sigp__stage {
		aspect-ratio: auto; container-type: normal;
		max-height: var(--sigp-max-h); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	}
	#sig-popup .sigp__art {
		position: relative; inset: auto; height: 236px; overflow: hidden;
		-webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
	}
	#sig-popup .sigp__circles { width: 236px; height: 472px; top: -118px; }
	#sig-popup .sigp__pill { top: 64px; width: 64px; height: 58px; }
	#sig-popup .sigp__cover { left: 0; top: 10px; width: 210px; height: 252px; }
	#sig-popup .sigp__cover--stack img,
	#sig-popup .sigp__cover--stack::before,
	#sig-popup .sigp__cover--stack::after { border-radius: 2px; }
	#sig-popup .sigp__cover--stack::before { box-shadow: -3px 2px 0 0 #08172a, -6px 4px 0 -1px #061325, 0 12px 24px rgba(0, 0, 0, 0.45); }
	#sig-popup .sigp__cover--stack img { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
	#sig-popup .sigp__content { position: relative; left: auto; top: auto; width: auto; padding: 4px 24px 0; }
	#sig-popup .sigp__stat { font-size: 92px !important; }
	#sig-popup .sigp__text { margin-top: 16px; font-size: 16px !important; line-height: 23px !important; }
	#sig-popup .sigp__text + .sigp__text { margin-top: 16px; }
	#sig-popup .sigp__l { display: inline; }
	#sig-popup .sigp__title { display: block; }
	#sig-popup .sigp__cta { width: 100%; height: 50px; margin-top: 24px; font-size: 17px !important; padding: 0 20px; }
	#sig-popup .sigp__dots {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		display: block; width: 62%; height: 38px; margin: 18px 0 4px auto;
		background-size: 21.39px 19.68px; background-position: right top;
		background-image: radial-gradient(circle at center, var(--sigp-gold) 0 1.6px, transparent 1.9px);
	}
	#sig-popup .sigp__close { top: 12px; right: 12px; width: 36px; height: 36px; }
}
@media (max-width: 639px) and (max-height: 700px) {
	#sig-popup .sigp__art { height: 196px; }
	#sig-popup .sigp__circles { width: 196px; height: 392px; top: -98px; }
	#sig-popup .sigp__cover { top: 6px; width: 176px; height: 212px; }
	#sig-popup .sigp__stat { font-size: 80px !important; }
}

/* ---- Short, wide screens (phones in landscape): two columns, px sizes ---- */
@media (max-height: 539px) and (min-width: 640px) {
	#sig-popup { width: min(760px, calc(100vw - 32px)); border-radius: 16px; }
	#sig-popup .sigp__stage {
		aspect-ratio: auto; container-type: normal;
		display: grid; grid-template-columns: 40% 1fr; align-items: center;
		max-height: var(--sigp-max-h); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	}
	#sig-popup .sigp__art { position: static; }
	#sig-popup .sigp__circles { width: auto; height: 100%; }
	#sig-popup .sigp__cover { left: 2%; top: 6%; height: 88%; width: auto; aspect-ratio: 369.6 / 444.2; }
	#sig-popup .sigp__pill { display: none; }
	#sig-popup .sigp__content { position: relative; left: auto; top: auto; width: auto; grid-column: 2; padding: 24px 32px 28px 8px; }
	#sig-popup .sigp__stat { font-size: 64px !important; margin-left: -3px; }
	#sig-popup .sigp__text { margin-top: 12px; font-size: 15px !important; line-height: 21px !important; }
	#sig-popup .sigp__text + .sigp__text { margin-top: 12px; }
	#sig-popup .sigp__l { display: inline; }
	#sig-popup .sigp__title { display: block; }
	#sig-popup .sigp__cta { width: auto; height: 44px; margin-top: 18px; padding: 0 28px; font-size: 16px !important; }
	#sig-popup .sigp__dots {
		left: auto; top: auto; right: 0; bottom: 0; width: 40%; height: 22px;
		background-size: 21.39px 19.68px; background-position: right top;
		background-image: radial-gradient(circle at center, var(--sigp-gold) 0 1.6px, transparent 1.9px);
	}
	#sig-popup .sigp__close { top: 12px; right: 12px; width: 36px; height: 36px; }
}