/* Product Packages — Figma 1346:287 (section) / 1346:1808 (product-sheet popup).
   Video modals use the shared .rw-video-dialog (global-styles.css). */

.rw-block-product-packages {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--rw-color-bg-mist);
	color: var(--rw-color-primary-green);
}
.rw-block-product-packages[data-bg-color="f4f4f4"] { background: var(--rw-color-bg-gray); }
.rw-block-product-packages[data-bg-color="f2f2f2"] { background: #F2F2F2; } /* matches global data-bg-color value */
.rw-block-product-packages .bg-dots { left: -4%; top: 4%; }
.rw-block-product-packages .rw-container { position: relative; z-index: 1; }

/* Intro */
.rw-block-product-packages .intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rw-space-md);
	margin-bottom: 4.5rem; /* Figma-exact 73px intro → cards */
	text-align: center;
}
.rw-block-product-packages .intro h2 { max-width: 70.6875rem; color: var(--rw-color-primary-green); }

/* Cards */
.rw-block-product-packages .packages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--rw-pp-cols, 2), minmax(0, 1fr));
	gap: var(--rw-space-md);
}
.rw-block-product-packages .package {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-lg);
	padding: var(--rw-space-lg);
	border-radius: var(--rw-radius-lg);
	background: var(--rw-color-white);
}

.rw-block-product-packages .media {
	position: relative;
	overflow: hidden;
	border-radius: var(--rw-radius-xs);
	aspect-ratio: 3 / 2;
	background: var(--rw-color-bg-mist);
}
.rw-block-product-packages .media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.1); /* Figma-exact image scrim */
	pointer-events: none;
}
.rw-block-product-packages .media .img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rw-block-product-packages .play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	width: 3.5rem;
	height: 3.4375rem; /* Figma-exact 56×55 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--rw-radius-xs);
	background: var(--rw-color-glass-bg);
	backdrop-filter: blur(var(--rw-blur-glass));
	-webkit-backdrop-filter: blur(var(--rw-blur-glass));
	cursor: pointer;
	transition: background-color .2s ease;
}
.rw-block-product-packages .play:hover { background: var(--rw-color-glass-bg-hover); }
.rw-block-product-packages .play:focus-visible { outline: none; box-shadow: var(--rw-state-focus-ring); }
.rw-block-product-packages .play svg { width: 0.6875rem; height: 0.6875rem; }

.rw-block-product-packages .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-sm);
}
.rw-block-product-packages .label {
	margin: 0;
	font-family: var(--rw-font-mono);
	font-weight: 500;
	font-size: var(--rw-caption-size);
	line-height: 1;
	letter-spacing: var(--rw-caption-tracking);
	text-transform: uppercase;
	color: var(--rw-color-grey-01);
}
.rw-block-product-packages .name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rw-space-xs);
	font-size: clamp(1.75rem, 0.38vw + 1.65rem, 2rem); /* 28 → 32 (two-modes card h3) */
	line-height: clamp(2rem, 0.56vw + 1.85rem, 2.375rem);
	color: var(--rw-color-primary-green);
}
.rw-block-product-packages .badge {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	padding: 0 var(--rw-space-sm);
	border-radius: var(--rw-radius-xs);
	background: rgba(100, 105, 113, 0.1); /* Figma-exact pill fill */
	font-family: var(--rw-font-mono);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: var(--rw-caption-tracking);
	text-transform: uppercase;
}
.rw-block-product-packages .subtitle {
	margin: 0;
	font-weight: 600;
	font-size: var(--rw-p2-size);
	line-height: 1.75;
	letter-spacing: var(--rw-p2-tracking);
	color: var(--rw-color-grey-01);
}
.rw-block-product-packages .checklist {
	list-style: none;
	margin: calc(-1 * var(--rw-space-xs)) 0 var(--rw-space-xs); /* 8px subtitle → list, 24px list → specs */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-xs);
}
.rw-block-product-packages .checklist li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.43;
	letter-spacing: -0.012em;
	color: var(--rw-color-grey-01);
}
.rw-block-product-packages .checklist .icon { flex: none; display: inline-flex; color: var(--rw-color-grey-01); }
.rw-block-product-packages .checklist .icon svg { width: 1rem; height: 1rem; } /* Figma 16px icon */

.rw-block-product-packages .specs {
	margin: 0 0 var(--rw-space-xs);
	padding-top: var(--rw-space-sm);
	border-top: 1px solid rgba(0, 0, 0, 0.1); /* Figma Vector 84: black @ 10% */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rw-space-sm);
}
.rw-block-product-packages .spec { display: flex; flex-direction: column; gap: var(--rw-space-xs); }
.rw-block-product-packages .spec dt {
	font-family: var(--rw-font-mono);
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1.17;
	letter-spacing: var(--rw-caption-tracking);
	text-transform: uppercase;
	color: var(--rw-color-grey-01);
}
.rw-block-product-packages .spec dd {
	margin: 0;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.43;
	letter-spacing: -0.012em;
	color: var(--rw-color-primary-green);
}
.rw-block-product-packages .cta {
	margin-top: auto;
	width: 100%;
	min-height: 3.4375rem; /* Figma-exact 55px */
	justify-content: center;
	font-weight: 700;
}

/* Bundle banner — navy card, copy left / CTA right. */
.rw-block-product-packages .bundle {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-top: var(--rw-space-md);
	padding: var(--rw-space-xl) 7rem var(--rw-space-xl) var(--rw-space-xl); /* Figma 40 / 112 / 40 / 40 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rw-space-lg);
	border-radius: var(--rw-radius-lg);
	background: var(--rw-color-primary-blue);
	color: var(--rw-color-white);
}
.rw-block-product-packages .bundle-gradient {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	max-width: 100%;
	height: auto;
	pointer-events: none;
}
/* Line-art (Figma 1346:403): 671×1003 asset anchored at 50.9% / −464px of the 1320px box. */
.rw-block-product-packages .bundle-lines {
	position: absolute;
	left: 50.9%;
	top: -29rem;
	z-index: -1;
	width: 50.8%;
	height: auto;
	pointer-events: none;
}

.rw-block-product-packages .bundle-copy {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-md);
	max-width: 40.375rem; /* Figma-exact 646px */
}
.rw-block-product-packages .rw-eyebrow--on-dark { color: var(--rw-color-white); }
.rw-block-product-packages .bundle h3 {
	font-size: clamp(1.75rem, 0.38vw + 1.65rem, 2rem);
	line-height: clamp(2rem, 0.56vw + 1.85rem, 2.375rem);
	color: var(--rw-color-white);
}
.rw-block-product-packages .bundle-text { margin: calc(-1 * var(--rw-space-xs)) 0 0; opacity: 0.8; }
.rw-block-product-packages .bundle .rw-btn { flex: none; }

/* Product-sheet popup (dialog lives inside the section → scoped selectors work in the top layer). */
.rw-block-product-packages .rw-form-dialog {
	width: min(100% - 2rem, 33.75rem); /* Figma-exact 540px */
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--rw-radius-lg);
	background: var(--rw-color-white);
	color: var(--rw-color-primary-green);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
}
.rw-block-product-packages .rw-form-dialog::backdrop { background: rgba(11, 26, 73, 0.6); }
.rw-block-product-packages .dialog-inner { position: relative; padding: 3rem var(--rw-space-xl); }
.rw-block-product-packages .rw-form-dialog .dialog-close {
	position: absolute;
	top: var(--rw-space-md);
	right: var(--rw-space-md);
	display: inline-flex;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rw-color-grey-01);
	cursor: pointer;
}
.rw-block-product-packages .rw-form-dialog .dialog-close:focus-visible { outline: none; box-shadow: var(--rw-state-focus-ring); }
.rw-block-product-packages .rw-form-dialog .form { flex-direction: column; gap: var(--rw-space-lg); }
.rw-block-product-packages .rw-form-dialog .title {
	font-size: var(--rw-space-md); /* 24px — Figma form title */
	line-height: 1;
	letter-spacing: -0.012em;
}
.rw-block-product-packages .rw-form-dialog .actions { display: flex; flex-direction: column; gap: var(--rw-space-md); }
.rw-block-product-packages .rw-form-dialog .submit { width: 100%; min-height: 3.4375rem; justify-content: center; }
.rw-block-product-packages .rw-form-dialog .note {
	margin: 0;
	text-align: center;
	font-weight: 500;
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	color: var(--rw-color-grey-01);
}
.rw-block-product-packages .rw-form-dialog .note a { color: inherit; }
.rw-block-product-packages .rw-form-dialog .notice { margin-top: var(--rw-space-md); font-weight: 500; }
.rw-block-product-packages .rw-form-dialog .notice--success { color: var(--rw-color-success); }
.rw-block-product-packages .rw-form-dialog .notice--error { color: var(--rw-color-error); }

@media (max-width: 1023px) {
	.rw-block-product-packages .packages { grid-template-columns: 1fr; }
	.rw-block-product-packages .bundle { padding-right: var(--rw-space-xl); }
}

@media (max-width: 767px) {
	.rw-block-product-packages .intro { margin-bottom: var(--rw-space-xl); gap: var(--rw-space-sm); }
	.rw-block-product-packages .package { padding: var(--rw-space-md); gap: var(--rw-space-md); }
	.rw-block-product-packages .specs { grid-template-columns: 1fr; }
	.rw-block-product-packages .bundle {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--rw-space-md);
	}
	.rw-block-product-packages .dialog-inner { padding: var(--rw-space-xl) var(--rw-space-md) var(--rw-space-md); }
}