/* Nov 2026 promo ($10 Takes it Home) — inner banner styles.
   Desktop: 1380×324 Figma frame, two content groups (headline left, offer+CTA right).
   Mobile: 390×355 frame, one column (the same two groups, restacked — structure-banner.json's note:
   4.3px / 1.103cqw bridges them). Wrapped in .container so it stops at the page margins (ticket). */

#nov-banner.nov-banner-stage {
	position: relative;
	display: grid;
	container-type: inline-size;
}

#nov-banner .nov-banner-back-pic {
	display: contents;
}
#nov-banner .nov-banner-back {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: auto;
}

#nov-banner .nov-bg1,
#nov-banner .nov-bg2 {
	grid-area: 1 / 1;
	justify-self: start;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#nov-banner .nov-bg1 { margin-top: 5.424cqw; margin-left: 20.181cqw; width: 37.029cqw; }
#nov-banner .nov-bg2 { margin-top: 5.797cqw; margin-left: 62.174cqw; width: 37.826cqw; }

#nov-banner .nb-l1,
#nov-banner .nb-l2,
#nov-banner .nb-l4 { white-space: nowrap; }
#nov-banner .nb-l1 { margin: 0; }
#nov-banner .nb-l2 { margin: -1.188cqw 0 0; }
/* 7:1129's own Figma box is 350px wide at the 1380px frame (facts-banner.json) — narrower than the
   group's column — so it wraps to "$10 PAYS YOUR / FIRST MONTH" there; nowrap (the old rule, shared
   with the other lines) forced it onto one line that ran past the banner's right edge. */
#nov-banner .nb-l3 { margin: 0; width: 25.362cqw; text-align: center; }
/* was 3.551cqw (1130.y − (1129.y + 1129.h), the old single-line box math); with 1129 wrapped to two
   lines its real render bounds run to y≈166.6 of the 324-tall frame, 1130 starts at y≈178.1 — an
   ~11.5px/0.833cqw gap (facts-banner.json renderBounds, not the stale single-line box height). */
#nov-banner .nb-l4 { margin: 0.833cqw 0 0; }
#nov-banner .nb-cta { margin-top: 1.087cqw; }

/* live text (figma-facts.mjs --text-css) */
#nov-banner [data-figma~="7:1126"] {
	font-family: "r41-etoile", cursive;
	font-size: max(14px, 4.308cqw);
	line-height: 1.12;
	color: #fdf7f1;
	text-transform: uppercase;
	-webkit-text-stroke: max(1px, 0.314cqw) #084f2b;
	paint-order: stroke fill;
	filter: drop-shadow(0.392cqw 0.549cqw 0 #084f2b);
}
#nov-banner [data-figma~="7:1127"] {
	font-family: "r41-etoile", cursive;
	font-size: max(20px, 8.764cqw);
	line-height: 1.12;
	color: #fdf7f1;
	text-transform: uppercase;
	-webkit-text-stroke: max(1px, 0.314cqw) #084f2b;
	paint-order: stroke fill;
	filter: drop-shadow(0.392cqw 0.549cqw 0 #084f2b);
}
#nov-banner [data-figma~="7:1129"] {
	font-family: "r41-etoile", cursive;
	font-size: max(14px, 3.188cqw);
	line-height: 1.02;
	color: #084f2b;
	-webkit-text-stroke: max(1px, 0.435cqw) #fdf7f1;
	paint-order: stroke fill;
}
#nov-banner [data-figma~="7:1130"] {
	font-family: "r41-etoile", cursive;
	font-size: max(9px, 1.594cqw);
	line-height: 1.318;
	color: #084f2b;
	-webkit-text-stroke: max(1px, 0.29cqw) #fdf7f1;
	paint-order: stroke fill;
}

/* CTA (get_design_context on the Figma CTA instance) */
#nov-banner .nb-cta {
	background: #fdf7f1;
	color: #084f2b;
	border-radius: max(20px, 3.623cqw);
	font-size: max(14px, 1.449cqw);
	/* design: 211x45 at the 1380-wide frame; the old 2.174cqw side padding rendered the
	   button ~20px (9%) too wide (231px measured) with the label staying centred on the
	   group's axis — narrower padding to match the frame's box. */
	padding: max(7px, 0.652cqw) max(14px, 1.443cqw);
	cursor: pointer;
}

/* --- mobile (390-wide frame): one column, its own measurements --- */
@media (max-width: 767px) {
	#nov-banner.nov-banner-stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* the back image is position:absolute below, so it no longer sets the stage's
		   height itself (0.36 bug: the stage collapsed to the text content's height,
		   284px rendered against the design's 328px at this width, cropping the
		   circle/coins art at the bottom). Pin it to the mobile frame's own ratio. */
		aspect-ratio: 390 / 355;
		margin-top: 40px;
	}
	#nov-banner .nov-banner-back {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}
	#nov-banner .nov-bg1,
	#nov-banner .nov-bg2 {
		position: relative;
		z-index: 1;
		margin-left: 0;
		width: 99.406cqw;
	}
	/* g1 ("Bag Your Deal for" / "10 Bucks!") is its own, narrower column on the mobile
	   frame too (structure-banner.json per.mobile: left 9.744cqw, width 80cqw) — it was
	   stretched to the full 99.406cqw width g2 uses, which g2's own frame box (0cqw/99.41cqw)
	   actually calls for. */
	#nov-banner .nov-bg1 { width: 80cqw; margin-top: 17.213cqw; }
	#nov-banner .nov-bg2 { margin-top: 1.103cqw; } /* the seam between the two desktop groups, restacked */

	#nov-banner .nb-l2 { margin-top: -2.615cqw; }
	/* 28:1100's own box (376.8px of the 390px frame, facts-banner-m.json) fits "$10 Pays Your First
	   Month" on one line at this breakpoint's font size — unlike the desktop frame's narrower box,
	   this one doesn't wrap, so undo the desktop width/wrap change above. */
	#nov-banner .nb-l3 { width: 99.406cqw; white-space: nowrap; }
	#nov-banner .nb-l4 { margin-top: 2.256cqw; }
	#nov-banner .nb-cta { margin-top: 5.513cqw; }

	#nov-banner [data-figma~="7:1126"] {
		font-size: max(14px, 9.298cqw);
		-webkit-text-stroke: max(1px, 0.677cqw) #084f2b;
		filter: drop-shadow(0.846cqw 1.185cqw 0 #084f2b);
	}
	#nov-banner [data-figma~="7:1127"] {
		font-size: max(20px, 18.916cqw);
		-webkit-text-stroke: max(1px, 0.677cqw) #084f2b;
		filter: drop-shadow(0.846cqw 1.185cqw 0 #084f2b);
	}
	#nov-banner [data-figma~="7:1129"] {
		font-size: max(14px, 6.813cqw);
		-webkit-text-stroke: max(1px, 0.929cqw) #fdf7f1;
	}
	#nov-banner [data-figma~="7:1130"] {
		font-size: max(9px, 4.159cqw);
		-webkit-text-stroke: max(1px, 0.756cqw) #fdf7f1;
	}

	#nov-banner .nb-cta {
		background: #084f2b;
		color: #ffffff;
		border-radius: max(20px, 12.821cqw);
		font-size: max(14px, 5.128cqw);
		padding: max(7px, 2.308cqw) max(17px, 7.692cqw);
	}
}

/* Mobile: the desktop rule's align-self: start pinned the headline group to the left edge;
   on the 390 frame both groups are centred (28:1061/28:1099 centre at x 194 of 390). */
@media (max-width: 767px) {
	#nov-banner .nov-bg1,
	#nov-banner .nov-bg2 { align-self: center; }
}