/*
 * July-4 "1776" promo page — LAYOUT ONLY (Phase B).
 * All rules scoped under .rj4-promo. No visual design yet (Phase D handles the
 * hero-down styling in this same file). Goal: correct, functional structure —
 * offers full-width on top, then a 2-column billing area (left = form fields,
 * right = sticky order summary with the relocated Place Order button).
 *
 * !important is used deliberately to override Gravity Forms' own .gform_fields
 * CSS grid (per-field `grid-column: span N`).
 */

/* ---- Design tokens (from Figma variables) ---- */
.rj4-promo {
	--rj4-navy-top: #213582;
	--rj4-navy-bottom: #0f1b48;
	--rj4-navy: #15235b;
	--rj4-red: #b22235;
	--rj4-cream: #f7f3e8;
	--rj4-ink: #1a1a1a;
	--rj4-grey: #757575;
	--rj4-grey-light: #c6c5c7;
	--rj4-page-bg: #f3f2ef;
	--rj4-card-bg: #fefefe;
	--rj4-radius: 8px;
	--rj4-font: "franklin-gothic-urw", "FranklinGothic URW", Arial, sans-serif;

	max-width: 1120px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* The theme's .page-container adds 10px top padding, leaving a white gap
   between the site nav and the hero's striped top border. Remove it on the
   promo page so the hero sits flush against the nav. (Asana: hero/header gap) */
.page-container:has(#rj4-promo) { padding-top: 0 !important; }

/* ---- Hero (full-bleed, from Figma node 1:670) ---- */
.rj4-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw); /* break out of the centered container */
	/* No bottom margin: the grey form section (.rj4-form-wrap) should abut the
	   navy hero directly — its own top padding spaces the content. (Asana) */
	margin-bottom: 0;
	background: linear-gradient(180deg, var(--rj4-navy-top), var(--rj4-navy-bottom));
	color: var(--rj4-cream);
	overflow: hidden;
	font-family: var(--rj4-font);
}
.rj4-hero__border {
	height: 8px;
	background: repeating-linear-gradient( to right,
		var(--rj4-red) 0 240px,
		var(--rj4-cream) 240px 480px,
		var(--rj4-navy) 480px 720px );
}
.rj4-hero__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	min-height: 420px;
	padding: 60px 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}
.rj4-hero__eagle {
	position: absolute;
	top: 8px; /* just below the 8px striped border (Figma node 1:679 y≈8) */
	/* Anchor to the hero's LEFT EDGE, but cap the reference at a centered
	   1440px frame so on screens wider than 1440 the statue tracks that frame's
	   left edge — keeping a constant gap to the (centered) content instead of
	   drifting to the viewport edge. Matches Figma: statue at x=0 of the 1440
	   design frame. (Asana: statue absolute top-left) */
	left: max(0px, calc((100vw - 1440px) / 2));
	width: 350px;
	height: 285px;
	max-width: 38%;
	background: url(../images/july4/eagle.svg) no-repeat left top / contain;
	opacity: 0.9;
	pointer-events: none;
	z-index: 0;
}
.rj4-hero__content {
	position: relative;
	z-index: 1;
	max-width: 550px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}
.rj4-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--rj4-red);
	color: var(--rj4-cream);
	padding: 8px;
	border-radius: var(--rj4-radius);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	line-height: 1;
}
.rj4-hero__eyebrow::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	background: url(../images/july4/star.svg) no-repeat center / contain;
}
.rj4-hero__title {
	margin: 0;
	font-weight: 600;
	font-size: 48px;
	line-height: 55px;
	letter-spacing: -1.92px;
	color: var(--rj4-cream);
}
/* Italicize the magazine name "Reason" in the headline (inherit weight/color). */
.rj4-hero__title em { font-style: italic; font-weight: inherit; color: inherit; }
/* Red hand-drawn underline graphic under "250th" and "$17.76" (Figma node
   1:716/1:717). The SVG (preserveAspectRatio:none) stretches to the word width
   and sits just below the text via the padding-bottom. */
.rj4-hero__title .rj4-ul {
	background: url(../images/july4/underline.svg) no-repeat left bottom / 100% 0.18em;
	padding-bottom: 0.04em; /* hug the text — sit just below the glyphs, per Figma */
}
.rj4-hero__subtitle {
	/* -8px pulls the subcopy up to a 16px gap below the headline (the content
	   column's flex gap is 24px); matches Figma (subcopy 16px under headline). */
	margin: -8px 0 0;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	color: var(--rj4-grey-light);
}
.rj4-hero__subtitle em { font-style: italic; font-weight: 500; color: inherit; }

/* Magazine cover stack (right) */
.rj4-hero__media {
	position: relative;
	flex: 0 0 auto;
	width: 372px;
	height: 364px;
	transform: rotate(-7.23deg);
}
.rj4-hero__cover {
	position: absolute;
	width: 238px;
	height: 313px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 6px 13px 4px rgba(0, 0, 0, 0.25);
}
.rj4-hero__cover--back  { left: 0;    top: 6px; transform: rotate(-3deg);   z-index: 1; background-image: url(../images/july4/cover1.jpg); }
.rj4-hero__cover--mid   { left: 50px; top: 5px;                             z-index: 2; background-image: url(../images/july4/cover2.jpg); }
.rj4-hero__cover--front { left: 86px; top: 1px; transform: rotate(1.72deg); z-index: 3; background-image: url(../images/july4/cover3.jpg); }

@media (max-width: 900px) {
	.rj4-hero__inner { flex-direction: column; align-items: flex-start; min-height: 0; padding: 40px 20px; }
	.rj4-hero__eagle { display: none; }
	.rj4-hero__title { font-size: 34px; line-height: 1.12; letter-spacing: -1px; }
	.rj4-hero__media { transform: none; width: 238px; height: 313px; margin: 1.5rem auto 0; }
	.rj4-hero__cover--back, .rj4-hero__cover--mid { display: none; }
	.rj4-hero__cover--front { position: relative; left: 0; top: 0; transform: none; }
}

/* ---- Two-column form layout ---- */
.rj4-promo .gform_fields {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 340px !important;
	grid-auto-rows: min-content; /* empty/extra rows collapse to 0 */
	gap: 0 2.5rem;
	align-items: start;
}

/* Default: every field sits in the left column. */
.rj4-promo .gform_fields > .gfield { grid-column: 1 !important; }

/* Stray GA/admin helper fields tagged in prepare_form. */
#rj4-promo .gform_fields .rj4-hide { display: none !important; }

/* Full-width band: the header/copy above the offers + the offers cards. */
.rj4-promo .gform_fields > .gfield.rj4-full,
.rj4-promo .gform_fields > .gfield.rj4-offers { grid-column: 1 / -1 !important; }

/* Order summary: right column, sticky. Pinned to an explicit start row (after
   the full-width band: the header row + the offers row = 2 rows, so billing
   begins at row 3) and spanning down, so the billing fields fill the left
   column beside it. The full-width band must be exactly those two fields
   (enforced in prepare_form, which only tags the pre-offers header + offers as
   rj4-full). */
.rj4-promo .gform_fields > .gfield.rj4-summary {
	grid-column: 2 !important;
	/* Share the billing row with the form card (both pinned to row 6) so the
	   summary's grid area is as tall as the form card — giving the sticky card
	   room to travel — and so no extra implicit rows are created below it. (The
	   old `span 40` distributed the summary's height across empty tracks, which
	   left a large gap under the form.) Row 6 = the full-width band above it
	   (§1 intro, offers, gift toggle, §2 intro) + 1; keep in sync with the field
	   order set in July4PromoLayout::prepare_form. */
	grid-row: 6 / 7 !important;
	align-self: start;
	/* Float the summary as the form scrolls. top clears the 42px fixed site nav.
	   The theme's `.wrap` is a sticky-breaking ancestor (overflow:hidden) —
	   neutralized with `overflow: clip` below. */
	position: sticky !important;
	top: 60px !important;
}

/* Pin the JS-built billing card to the same row as the summary (see above) so
   their tops align and the summary has a full-height area to stick within. */
.rj4-promo .gform_fields > .rj4-form-card { grid-column: 1 !important; grid-row: 6 / 7 !important; }

/* Neutralize the sticky-breaking ancestor: the theme's `.wrap` has
   overflow:hidden, which creates a scroll container and disables position:sticky
   for descendants. `overflow: clip` still clips overflow but does NOT create a
   scroll container, so sticky works. Scoped via :has so only the promo page's
   wrap is affected (and this stylesheet only loads on pages with the shortcode). */
.wrap:has(#rj4-promo) { overflow: clip !important; }

/* Keep the order-summary card visible on load (darwin-offers.js otherwise hides
   it until a plan is selected); the line items populate on selection. */
.rj4-promo #dwp-order-summary { display: block !important; }

/* The relocated submit button (moved into the right column by JS, as a sibling
   of #dwp-order-summary) — full width + spaced away from the summary card. */
.rj4-promo .gfield.rj4-summary .rj4-place-order { display: block; width: 100%; margin-top: 1.25rem; }
/* Hide the now-empty native footer once the button has been relocated. */
.rj4-promo .gform-footer.rj4-footer-moved,
.rj4-promo .gform_footer.rj4-footer-moved { display: none !important; }

/* ---- Feature checklist inside each offer card (feature-cards template) ---- */
.rj4-promo .dwp-bundle-features { list-style: none; margin: 1rem 0 0; padding: 0; text-align: left; }
.rj4-promo .dwp-bundle-feature { margin: 0 0 .5rem; padding: 0; display: flex; gap: .5rem; align-items: flex-start; }
.rj4-promo .dwp-bundle-feature__check { flex: 0 0 auto; }

/* ---- Light cleanup styling (pre-staging; not the full Phase D design) ---- */

/* Top-align each card's content (price + features sit at the top, matching the
   taller card) and pin the Choose button to the bottom of every card. The base
   card is a flex column with justify-content: space-between. */
.rj4-promo .gchoice_darwin_offer_compare:not(#darwin_compare_plan_toggle) {
	justify-content: flex-start;
}
.rj4-promo .darwin_offer_compare_select_button {
	margin: auto 20px 0 !important; /* margin-top:auto pins the button to the card bottom */
}

/* Subtitle: a little breathing room beneath the title. */
.rj4-promo .bundle-subtitle {
	display: block;
	margin-top: 8px;
}

/* Bigger price; smaller feature list (closer to the new design). The base
   .bundle-price is nested under a wrapper in dwp-form-custom-styles.css, so
   !important is needed to win. */
.rj4-promo .bundle-price { font-size: 28px !important; }
.rj4-promo .dwp-bundle-features { font-size: 14px; line-height: 1.35; }

/* Separate the Subscribe button from the order-summary card. */
.rj4-promo .gfield.rj4-summary .rj4-place-order { margin-top: 1.25rem; }

/* Disclaimer: much smaller. Target the inner <p> too — the theme styles
   .entry-content p, which otherwise overrides the container font-size. */
.rj4-promo .dwp-renewal-disclaimer,
.rj4-promo .dwp-renewal-disclaimer p { font-size: 12px !important; line-height: 1.45 !important; }

/* Renewal disclaimer relocated (by JS) to the bottom of the left column. */
.rj4-promo .gform_fields > .rj4-left-disclaimer { grid-column: 1 !important; margin-top: 1rem; }

/* ---- Offer cards design (Phase D, from Figma node 1:726) ---- */
/* the offers field's own containers are white by default — clear them so the
   grey page shows around the cards */
#rj4-promo #sticky-container,
#rj4-promo .gfield_radio_darwin_offer_compare_nav,
#rj4-promo #darwin_offer_compare_radio_container { background: transparent !important; }
/* the radio container has a 1px bottom border that used to separate the cards
   from the (now-suppressed) comparison table — remove the orphaned line */
#rj4-promo #darwin_offer_compare_radio_container { border: 0 !important; }
/* two equal cards, 32px gap, equal height */
.rj4-promo #darwin_offer_compare_radio_container { gap: 32px; align-items: stretch; }
.rj4-promo .gchoice_darwin_offer_compare:not(#darwin_compare_plan_toggle) {
	flex: 1 1 0;
	background: var(--rj4-card-bg);
	border: 2px solid #bababa;
	border-top: 9px solid #bababa;
	border-radius: var(--rj4-radius);
	padding: 40px 30px 30px;
	font-family: var(--rj4-font);
}
#rj4-promo .gchoice_darwin_offer_compare.selected { border-color: #b22235 !important; box-shadow: none !important; } /* red border only; drop the base orange 2px ring (Asana) */

/* Badge ribbon — a full-width bar across the very top of a badged card. When a
   badge is present, the card's thick grey top accent drops to a normal border
   so the ribbon itself reads as the thick top band (per design feedback). */
#rj4-promo .gchoice_darwin_offer_compare:has(.dwp-bundle-badge) {
	border-top-width: 2px;
	overflow: hidden; /* clip the ribbon's top corners to the card radius */
}
#rj4-promo .darwin_template_feature_cards .dwp-bundle-badge {
	display: block;
	margin: -40px -30px 24px; /* bleed over the card's top + side padding */
	padding: 11px 16px;
	background: #15235b;
	color: #fff;
	font-family: var(--rj4-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}

/* hide only the OFFER-CARD radio inputs (not other choice inputs like the gift checkbox) */
.rj4-promo .gchoice_darwin_offer_compare .gfield-choice-input { display: none; }

/* subtitle → red eyebrow line ABOVE the title */
.rj4-promo .bundle-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 12px;
	margin: 0;
	color: inherit;
}
#rj4-promo .bundle-title h2 {
	margin: 0;
	font-weight: 600;
	font-size: 24px !important; /* theme forces .entry-content h2 larger */
	line-height: 1.1 !important;
	letter-spacing: -0.96px;
	color: #000;
}
.rj4-promo .bundle-subtitle {
	order: -1;
	margin: 0;
	font-weight: 600;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 1.21px;
	text-transform: uppercase;
	text-align: left;
	color: var(--rj4-red);
}

/* price */
#rj4-promo .bundle-price {
	margin: 24px 0 0 !important;
	font-weight: 600;
	font-size: 36px !important;
	line-height: 1;
	letter-spacing: -1.44px;
	color: #000;
	text-align: left !important;
}

/* feature list */
.rj4-promo .dwp-bundle-features { margin: 24px 0 32px; }
.rj4-promo .dwp-bundle-feature {
	gap: 8px;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.56px;
	color: #757575;
}
.rj4-promo .dwp-bundle-feature:last-child { margin-bottom: 0; }
.rj4-promo .dwp-bundle-feature__check {
	width: 12px;
	height: 9px;
	margin-top: 5px;
	background: url(../images/july4/check.svg) no-repeat center / contain;
	font-size: 0; /* hide the unicode ✓ fallback */
}

/* select button: full-width, pinned to card bottom; outline by default, filled red
   when selected. Uses the wrapper ID for specificity over the base orange rules. */
#rj4-promo .darwin_offer_compare_select_button {
	width: 100%;
	margin: auto 0 0 !important; /* pin to card bottom; aligns both cards' buttons */
	padding: 16px 40px !important;
	border-radius: 8px !important;
	font-size: 20px !important;
	font-weight: 500;
	border: 1px solid #757575 !important;
	background: #fff !important;
	color: #757575 !important;
}
#rj4-promo .gchoice.selected .darwin_offer_compare_select_button,
#rj4-promo .gchoice_darwin_offer_compare:not(#darwin_compare_plan_toggle):hover .darwin_offer_compare_select_button {
	background: #b22235 !important;
	border-color: #b22235 !important;
	color: #fff !important;
}

/* ---- Form fields design (Phase D, from Figma node 1:814) ---- */
/* text inputs / selects / textarea */
#rj4-promo .gform_fields input[type="text"],
#rj4-promo .gform_fields input[type="email"],
#rj4-promo .gform_fields input[type="tel"],
#rj4-promo .gform_fields input[type="number"],
#rj4-promo .gform_fields input[type="password"],
#rj4-promo .gform_fields select,
#rj4-promo .gform_fields textarea {
	height: 48px;
	border: 1px solid #757575 !important;
	border-radius: 8px !important;
	padding: 0 14px !important;
	font-size: 16px !important;
	background: #fff !important;
	color: #000 !important;
	box-shadow: none !important;
}
#rj4-promo .gform_fields textarea {
	height: auto;
	min-height: 96px;
	padding: 12px 14px !important;
}

/* field labels: uppercase, medium, black; required marker red */
#rj4-promo .gfield .gfield_label {
	font-family: var(--rj4-font);
	font-weight: 500;
	font-size: 16px;
	text-transform: uppercase;
	color: #000;
}
#rj4-promo .gfield_required { color: #b22235 !important; }

/* sub-labels for composite name/address parts: sentence case, grey */
#rj4-promo .ginput_complex label,
#rj4-promo .gform-field-label--type-sub,
#rj4-promo .gfield .gform-field-label--type-sub {
	font-weight: 500;
	font-size: 16px;
	text-transform: none;
	color: #757575;
}

/* billing sub-group headers (Account Details / Billing Details) → uppercase grey
   + divider. Scoped to left-column HTML fields so the main offers header is unaffected. */
#rj4-promo .gform_fields .gfield--type-html:not(.rj4-full):not(.rj4-summary) :is(h2, h3, h4) {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #d8d8d8;
	font-family: var(--rj4-font);
	font-weight: 500;
	font-size: 16px !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #757575;
}

/* ---- Order summary card (Phase D, from Figma node 1:968) ---- */
#rj4-promo #dwp-order-summary {
	border-radius: 12px;
	font-family: var(--rj4-font);
	color: #000;
	/* strip the base order-summary box styling (it adds a #f8f8f8 panel + grey
	   border + padding around the new header/body card) */
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
#rj4-promo .rj4-os__header {
	background: var(--rj4-navy);
	color: #fff;
	padding: 16px;
	border-radius: 12px 12px 0 0;
	font-weight: 500;
	font-size: 16px;
	text-transform: uppercase;
	line-height: 1.2;
}
#rj4-promo .rj4-os__body {
	background: var(--rj4-card-bg);
	border: 2px solid #bababa;
	border-top: none;
	border-radius: 0 0 12px 12px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
#rj4-promo .rj4-os__items { display: flex; flex-direction: column; gap: 16px; }
#rj4-promo .rj4-os__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#rj4-promo .rj4-os__lineitem-text { display: flex; flex-direction: column; gap: 4px; }
#rj4-promo .rj4-os__lineitem .dwp-order-summary-name { font-size: 18px; }
#rj4-promo .rj4-os__lineitem .dwp-order-summary-subtitle { font-size: 14px; color: #4d4d4d; line-height: 1.3; }
#rj4-promo .rj4-os__lineitem .dwp-order-summary-price { font-weight: 500; font-size: 16px; }
#rj4-promo .rj4-os__subrows { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
#rj4-promo .rj4-os__muted { color: #4d4d4d; }
#rj4-promo .rj4-os__val { font-weight: 500; color: #000; }
#rj4-promo .rj4-os__divider { border: none; border-top: 1px solid #d8d8d8; margin: 0; width: 100%; height: 0; }
#rj4-promo .rj4-os__total-block { display: flex; flex-direction: column; gap: 24px; }
#rj4-promo .rj4-os__total { font-weight: 600; }
#rj4-promo .rj4-os__total > span:first-child { font-size: 18px; }
#rj4-promo .rj4-os__total-price { font-size: 16px; color: var(--rj4-red); text-transform: uppercase; }
#rj4-promo .rj4-os__secure {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: 14px;
	color: #4d4d4d;
}
#rj4-promo .rj4-os__secure::before {
	content: "";
	width: 10px;
	height: 12px;
	flex: 0 0 auto;
	background: url(../images/july4/lock.svg) no-repeat center / contain;
}
/* Place Order button (relocated into the card slot) */
#rj4-promo .rj4-os__button-slot { display: flex; }
#rj4-promo .rj4-place-order {
	width: 100%;
	margin: 0 !important;
	padding: 16px 40px !important;
	border: none !important;
	border-radius: 8px !important;
	background: #b22235 !important;
	color: #fff !important;
	font-size: 20px !important;
	font-weight: 500;
	cursor: pointer;
}

/* ---- Section intros (Phase D, from Figma node 1:720) ---- */
#rj4-promo .rj4-section-intro { display: flex; gap: 13px; align-items: flex-start; font-family: var(--rj4-font); }
#rj4-promo .rj4-section-intro__num {
	flex: 0 0 auto;
	/* Drop the badge so its bottom sits flush with the bottom of the heading
	   text beside it (both section numbers), per Figma. (Asana) */
	margin-top: 6px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--rj4-red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
}
#rj4-promo .rj4-section-intro__body { padding-top: 4px; }
#rj4-promo .rj4-section-intro__heading {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -1.28px;
	color: #000;
}
#rj4-promo .rj4-section-intro__desc {
	margin: 0;
	max-width: 550px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: -0.4px;
	color: #757575;
}

/* ---- Page background (below the hero) ---- */
.rj4-promo .rj4-form-wrap {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw); /* full-bleed grey band */
	background: var(--rj4-page-bg);
	padding: 48px 20px 64px;
}
.rj4-promo .rj4-form-wrap > * { max-width: 1160px; margin-left: auto; margin-right: auto; }

/* ---- Billing form card (Figma "Form Block": white card on the grey page) ---- */
#rj4-promo .gform_fields > .rj4-form-card {
	grid-column: 1 !important;
	align-self: start;
	background: var(--rj4-card-bg);
	border: 2px solid #bababa;
	border-radius: 12px;
	padding: 40px;
}
#rj4-promo .rj4-form-card > .gfield { margin: 0 0 24px; }
#rj4-promo .rj4-form-card > .gfield:last-child { margin-bottom: 0; }

/* ---- Terms box: grey box inside the white form card (keep current copy) ---- */
#rj4-promo .rj4-left-disclaimer {
	margin-top: 24px;
	padding: 20px;
	background: var(--rj4-page-bg);
	border: 1px solid #d8d8d8;
	border-radius: 8px;
}

/* ---- Gift toggle (Figma 1:794) — centered "🎁 This is a gift" ---- */
/* Separator line between the offer cards and the gift toggle (Figma node 1:793). */
#rj4-promo .gform_fields > .gfield.dwp-gift-toggle {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid #bababa;
}
#rj4-promo .dwp-gift-toggle .ginput_container_checkbox,
#rj4-promo .dwp-gift-toggle .gfield_checkbox { display: flex; justify-content: center; margin: 0; }
#rj4-promo .dwp-gift-toggle .gchoice { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; }
#rj4-promo .dwp-gift-toggle .gchoice input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0;
	border: 1px solid #bababa;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}
#rj4-promo .dwp-gift-toggle .gchoice input[type="checkbox"]:checked {
	/* Red outline + red checkmark on white (no red fill) so the check is clearly
	   visible. (Asana: red fill made the checkmark hard to see) */
	border-color: var(--rj4-red) !important; /* beat the GF/Orbital checked border */
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23b22235' stroke-width='2' d='M3 7l3 3 5-6'/%3E%3C/svg%3E") center / 12px no-repeat;
}
#rj4-promo .dwp-gift-toggle .gchoice label {
	margin: 0;
	cursor: pointer;
	font-family: var(--rj4-font);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -0.64px;
	color: #4d4d4d;
}
#rj4-promo .dwp-gift-toggle .gchoice label::before { content: "🎁 "; }

/* "Edit your account information" link (logged-in users; HTML field in the
   Account Details section). Match the brand red used elsewhere on the page and
   sit flush-left with the surrounding fields — the default HTML-field/anchor
   spacing was indenting it and the theme was coloring it orange. */
#rj4-promo .dwp-form-profile-link {
	display: inline-block;
	margin: 0;
	padding: 0;
	color: var(--rj4-red);
	text-decoration: underline;
}
#rj4-promo .dwp-form-profile-link:hover,
#rj4-promo .dwp-form-profile-link:focus {
	color: var(--rj4-red);
	text-decoration: none;
}
#rj4-promo .gfield:has(.dwp-form-profile-link) {
	padding-inline: 0;
	margin-inline: 0;
}

/* Mobile: the base offers template stacks the cards in a column at <=767px.
   Our desktop `flex: 1 1 0` (equal-height side-by-side columns) then collapses
   the second stacked card to its min-content height. Restore per-content
   sizing so each stacked card is full height. (Asana: 2nd card shrunken on
   mobile) */
@media (max-width: 767px) {
	.rj4-promo .gchoice_darwin_offer_compare:not(#darwin_compare_plan_toggle) {
		flex: 0 0 auto;
	}
}

/* ---- Mobile: single column stack ---- */
@media (max-width: 781px) {
	.rj4-promo .gform_fields { grid-template-columns: 1fr !important; gap: 0; }
	.rj4-promo .gform_fields > .gfield,
	.rj4-promo .gform_fields > .gfield.rj4-full,
	.rj4-promo .gform_fields > .gfield.rj4-offers,
	.rj4-promo .gform_fields > .rj4-form-card,
	.rj4-promo .gform_fields > .gfield.rj4-summary {
		grid-column: 1 !important;
		grid-row: auto !important;
		position: static !important;
	}
	/* The order-summary box contains the "Place Order" submit button. In source
	   order it sits above the billing form, so on mobile users would fill the
	   form and then have to scroll back up to submit. Reorder it below the form
	   card. (Asana: summary/place-order should sit below the form on mobile) */
	.rj4-promo .gform_fields > .rj4-form-card { order: 1; }
	.rj4-promo .gform_fields > .gfield.rj4-summary { order: 2; }
}