/* ============================================================
   TXU Events - Sponsorship landing page
   Markup: public/partials/sponsorships/landing.php (<main class="txsp-page">).

   Built after Figma TC3-2, frame "Founding Sponsorship", designed at a
   1600px viewport with a centred 1222px content column. Comments quote
   Figma coordinates (x,y in the 1600 frame) where a number is not obvious.

   Scaling: every design measurement is written as calc(var(--txsp-u) * N)
   where N is the Figma pixel value. --txsp-u is exactly 1px from 1254px up
   (1222 column + two 16px gutters), so 1600 renders the Figma frame 1:1;
   below that it shrinks with the viewport, so the whole composition scales
   down proportionally to the 992px tablet breakpoint. Text sizes that would
   become too small get a max() floor. Under 992px the layout stacks.

   Theme isolation: the txccc theme loads Bootstrap 5.3 and sets Raleway,
   sizes and colours directly on h1-h3 and p (h1 is white, p is 18/29), so
   every text element here is re-set through .txsp-page-scoped class
   selectors (specificity 0,2,0 beats the theme's element rules whatever
   the stylesheet order). Every class is txsp- prefixed.
   ============================================================ */

@font-face {
	font-family: 'MADE TOMMY';
	src: url('../fonts/made-tommy/MADETOMMY.woff2') format('woff2'),
	     url('../fonts/made-tommy/MADETOMMY.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'MADE TOMMY';
	src: url('../fonts/made-tommy/MADETOMMY-Bold.woff2') format('woff2'),
	     url('../fonts/made-tommy/MADETOMMY-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.txsp-page {
	--txsp-gold:        #bd8b3d; /* bars, rules, photo frame */
	--txsp-gold-text:   #f6b550; /* eyebrow, subheadline, taglines, bullets, bold text */
	--txsp-gold-title:  #f1b04c; /* package names */
	--txsp-navy:        #002835; /* page background */
	--txsp-panel:       #033344; /* package header panel */
	--txsp-glow:        #003c4f; /* closing band glow */
	--txsp-badge:       #9e7d3f; /* closing badge circle */
	--txsp-hairline:    linear-gradient(90deg, rgba(189, 139, 61, 0) 0%, #bd8b3d 50%, rgba(189, 139, 61, 0) 100%);

	/* Figma "Medium" maps to the Regular (400) file until a Medium cut exists. */
	--txsp-font-tommy:  'MADE TOMMY', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* Tinos is metric-compatible with Times New Roman (for systems without it). */
	--txsp-font-serif:  'Times New Roman', 'Tinos', Times, serif;
	--txsp-font-inter:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* One Figma pixel. See the header comment. */
	--txsp-u: min(1px, calc((100vw - 32px) / 1222));

	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	background: var(--txsp-navy);
	color: #fff;
	font-family: var(--txsp-font-inter);
	font-size: 18px;
	line-height: 1.4;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden; /* fallback; clip keeps position: sticky working where supported */
	overflow-x: clip;
}

/* Reboot neutralisers, scoped to this page only. */
.txsp-page *,
.txsp-page *::before,
.txsp-page *::after {
	box-sizing: border-box;
}
.txsp-page h1,
.txsp-page h2,
.txsp-page h3,
.txsp-page p,
.txsp-page ul,
.txsp-page ol,
.txsp-page li,
.txsp-page figure {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	text-transform: none;
}
.txsp-page img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

.txsp-page .txsp-wrap {
	width: 100%;
	max-width: 1254px; /* 1222px column + 16px gutters */
	margin: 0 auto;
	padding: 0 16px;
}

/* ------------------------------------------------------------
   HERO (Figma y 300-966)
   20px gold bar on top; the background image starts 10px under
   the bar's top edge (y 310) and is covered by the bar there.
   ------------------------------------------------------------ */
.txsp-page .txsp-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: 20px;
	background: var(--txsp-navy);
}
.txsp-page .txsp-hero::before {
	content: "";
	position: absolute;
	z-index: 6;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	background: var(--txsp-gold);
}

.txsp-page .txsp-hero__media {
	position: absolute;
	z-index: 0;
	top: 10px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}
.txsp-page .txsp-hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}
/* Gold line art (Figma 114,320 1451x646). Sized by height, always from the
   bar's bottom edge (y 320) to the hero's bottom: the image carries faint
   light shafts that are cut off along its top edge, so that edge must never
   show inside the hero (a taller hero on tablets or with longer copy). At
   1600 this is exactly 1451x646; its centre sits 39.5px right of the page
   centre (x 839.5), and its transparent sides need no such care. */
.txsp-page .txsp-hero__rays {
	position: absolute;
	top: 10px;
	left: 50%;
	width: auto;
	height: calc(100% - 10px);
	max-width: none;
	transform: translateX(calc(-50% + var(--txsp-u) * 39.5));
}
/* Top shade under the gold bar: #050505 -> transparent, 65px (y 320). */
.txsp-page .txsp-hero__shade {
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	height: calc(var(--txsp-u) * 65);
	background: linear-gradient(180deg, #050505 0%, rgba(0, 0, 0, 0) 100%);
}
/* Bottom fade into the page colour: 177px (y 789-966). */
.txsp-page .txsp-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--txsp-u) * 177);
	background: linear-gradient(180deg, rgba(0, 40, 53, 0) 0%, #002835 100%);
}

.txsp-page .txsp-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1254px;
	min-height: calc(var(--txsp-u) * 646); /* y 320-966 */
	margin: 0 auto;
	padding: calc(var(--txsp-u) * 93) 16px 0; /* eyebrow at y 413 */
}
.txsp-page .txsp-hero__text {
	position: relative;
	z-index: 3; /* above the portrait: the headline overlaps it */
	padding: 0 0 calc(var(--txsp-u) * 69) calc(var(--txsp-u) * 32); /* text at x 221 */
}

/* "TEXAS UNITED" + 164x1 rule (Figma 221,413 and 393,431): the text is
   156px wide in MADE TOMMY 24, so a 16px gap puts the rule at x 393. */
.txsp-page .txsp-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: calc(var(--txsp-u) * 16);
	font-family: var(--txsp-font-tommy);
	font-weight: 400;
	font-style: normal;
	font-size: calc(var(--txsp-u) * 24);
	line-height: calc(var(--txsp-u) * 34);
	color: var(--txsp-gold-text);
	text-transform: uppercase;
}
.txsp-page .txsp-hero__eyebrow-text {
	flex: 0 1 auto;
	min-width: 0;
}
.txsp-page .txsp-hero__eyebrow-rule {
	flex: 0 0 auto;
	display: block;
	width: calc(var(--txsp-u) * 164);
	height: 1px;
	margin-top: 2px;
	background: var(--txsp-gold-text);
}

/* Times New Roman Bold 97/88, -1px tracking, 4px 4px 11px black shadow (221,463). */
.txsp-page .txsp-hero__title {
	max-width: calc(var(--txsp-u) * 760);
	margin-top: calc(var(--txsp-u) * 16);
	font-family: var(--txsp-font-serif);
	font-weight: 700;
	font-style: normal;
	font-size: calc(var(--txsp-u) * 97);
	line-height: calc(var(--txsp-u) * 88);
	letter-spacing: -1px;
	color: #fff;
	text-shadow: 4px 4px 11px #000;
	overflow-wrap: break-word;
}

/* MADE TOMMY 42, gold. Figma sets each line 34px tall with 9px between
   (y 664 and 707): a 43px line box keeps that pitch, and the margin
   (639 -> 659.5) puts the first line where Figma has it. */
.txsp-page .txsp-hero__sub {
	max-width: calc(var(--txsp-u) * 760);
	margin-top: calc(var(--txsp-u) * 20.5);
	font-family: var(--txsp-font-tommy);
	font-weight: 400;
	font-style: normal;
	font-size: calc(var(--txsp-u) * 42);
	line-height: calc(var(--txsp-u) * 43);
	color: var(--txsp-gold-text);
}

/* MADE TOMMY 32/33 white, 542px wide: four lines (y 765). */
.txsp-page .txsp-hero__intro {
	/* Figma's box is 542 wide but set in MADE TOMMY Medium, which is wider
	   than the Regular weight we have. 515 reproduces Figma's four line
	   breaks with Regular; switch back to 542 if a Medium file is added. */
	max-width: calc(var(--txsp-u) * 515);
	margin-top: calc(var(--txsp-u) * 19.5);
	font-family: var(--txsp-font-tommy);
	font-weight: 400;
	font-style: normal;
	font-size: calc(var(--txsp-u) * 32);
	line-height: calc(var(--txsp-u) * 33);
	color: #fff;
}

/* Cutout 678x617, right edge on the column edge, bottom on the hero edge (733,349). */
.txsp-page .txsp-hero__portrait {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 0;
	width: calc(var(--txsp-u) * 678);
	max-width: none;
	height: auto;
}

/* ------------------------------------------------------------
   PACKAGES (Figma y 966 on, background #002835)
   ------------------------------------------------------------ */
.txsp-page .txsp-packages {
	position: relative;
	padding: calc(var(--txsp-u) * 73) 0 calc(var(--txsp-u) * 83); /* first panel at y 1039 */
	background: var(--txsp-navy);
}
.txsp-page .txsp-packages:last-child {
	padding-bottom: calc(var(--txsp-u) * 200); /* no closing band below */
}
/* Gold hairline under the hero: 1222x4, fading out at both ends (189,966). */
.txsp-page .txsp-packages::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(1222px, calc(100% - 32px));
	height: 4px;
	transform: translateX(-50%);
	background: var(--txsp-hairline);
	pointer-events: none;
}

.txsp-page .txsp-admin-note {
	margin-bottom: calc(var(--txsp-u) * 40);
	padding: 12px 16px;
	border-left: 4px solid var(--txsp-gold);
	background: rgba(255, 255, 255, 0.06);
	font-family: var(--txsp-font-inter);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
	color: #e3eaec;
}
.txsp-page .txsp-empty {
	padding: 40px 0;
	font-family: var(--txsp-font-inter);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}

/* Card grid: | 21 | photo 398 | 81 | text 681 (flexible) | 41 | = 1222.
   Row 1 is the header panel (its height follows the name/price/tagline,
   203px in Figma); the photo spans both rows and sits above the panel. */
.txsp-page .txsp-card {
	position: relative;
	display: grid;
	grid-template-columns:
		calc(var(--txsp-u) * 21)
		calc(var(--txsp-u) * 398)
		calc(var(--txsp-u) * 81)
		minmax(0, 1fr)
		calc(var(--txsp-u) * 41);
	grid-template-rows: auto 1fr;
	align-items: start;
}
.txsp-page .txsp-card + .txsp-card {
	margin-top: calc(var(--txsp-u) * 135); /* button bottom (y 1812) to next panel (y 1947) */
}

/* Header panel #033344 behind the photo (189,1039 1222x203). */
.txsp-page .txsp-card__panel {
	grid-column: 1 / -1;
	grid-row: 1;
	align-self: stretch;
	background: var(--txsp-panel);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.55);
}

/* Photo 398x529, 21px inside the panel's top-left corner (210,1060). */
.txsp-page .txsp-card__media {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-top: calc(var(--txsp-u) * 21);
	margin-bottom: calc(var(--txsp-u) * 17); /* room for the gold frame below */
}
.txsp-page .txsp-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 398 / 529;
	object-fit: cover;
}
/* White 2px L inside the photo: 25px from the left, 19px from the top,
   292 wide and 431 tall (235,1079). Percentages of the 398x529 photo. */
.txsp-page .txsp-card__inset {
	position: absolute;
	top: 3.5917%;
	left: 6.2814%;
	width: 73.3668%;
	height: 81.4745%;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	pointer-events: none;
}
/* Gold 6px L outside the photo: right bar 10px off the photo's right edge
   from its top to 11px below its bottom, bottom bar 198px long
   (x 618-624 y 1060-1606, x 426-624 y 1600-1606). */
.txsp-page .txsp-card__frame {
	position: absolute;
	top: 0;
	right: calc(var(--txsp-u) * -16);
	bottom: calc(var(--txsp-u) * -17);
	width: calc(var(--txsp-u) * 198);
	border-right: max(4px, calc(var(--txsp-u) * 6)) solid var(--txsp-gold);
	border-bottom: max(4px, calc(var(--txsp-u) * 6)) solid var(--txsp-gold);
	pointer-events: none;
}

/* Name / price / tagline inside the panel (text column x 689). */
.txsp-page .txsp-card__head {
	position: relative;
	z-index: 1;
	grid-column: 4;
	grid-row: 1;
	min-width: 0;
	padding: calc(var(--txsp-u) * 35) 0 calc(var(--txsp-u) * 32);
}
.txsp-page .txsp-card__name {
	font-family: var(--txsp-font-serif);
	font-weight: 700;
	font-style: normal;
	font-size: calc(var(--txsp-u) * 46);
	line-height: calc(var(--txsp-u) * 40);
	color: var(--txsp-gold-title);
	text-transform: uppercase;
	overflow-wrap: break-word;
}
.txsp-page .txsp-card__name--long {
	font-size: calc(var(--txsp-u) * 44);
}
.txsp-page .txsp-card__price {
	margin-top: calc(var(--txsp-u) * 17);
	font-family: var(--txsp-font-tommy);
	font-weight: 700;
	font-style: normal;
	font-size: calc(var(--txsp-u) * 48);
	line-height: calc(var(--txsp-u) * 34);
	color: #fff;
	font-variant-numeric: lining-nums;
}
.txsp-page .txsp-card__tagline {
	margin-top: calc(var(--txsp-u) * 20);
	font-family: var(--txsp-font-tommy);
	font-weight: 700;
	font-style: normal;
	font-size: max(16px, calc(var(--txsp-u) * 24));
	line-height: max(17px, calc(var(--txsp-u) * 25));
	color: var(--txsp-gold-text);
	text-transform: uppercase;
}

/* Rule, summary, list and button under the panel. */
.txsp-page .txsp-card__body {
	grid-column: 4;
	grid-row: 2;
	min-width: 0;
	padding-top: calc(var(--txsp-u) * 30); /* rule at y 1272 */
}
.txsp-page .txsp-card__rule {
	display: block;
	width: calc(var(--txsp-u) * 359);
	max-width: 100%;
	height: 3px;
	background: var(--txsp-gold);
}
/* Inter Bold 24/25 (689,1292). */
.txsp-page .txsp-card__summary {
	margin-top: calc(var(--txsp-u) * 17);
	font-family: var(--txsp-font-inter);
	font-weight: 700;
	font-style: normal;
	font-size: max(18px, calc(var(--txsp-u) * 24));
	line-height: max(20px, calc(var(--txsp-u) * 25));
	color: #fff;
}
/* Inter ExtraBold Italic 26/25 (689,1391). */
.txsp-page .txsp-card__includes {
	margin-top: calc(var(--txsp-u) * 24);
	font-family: var(--txsp-font-inter);
	font-weight: 800;
	font-style: italic;
	font-size: max(20px, calc(var(--txsp-u) * 26));
	line-height: max(20px, calc(var(--txsp-u) * 25));
	color: var(--txsp-gold-text);
}

/* Benefits (admin rich text). Inter Bold 18 at Figma's "auto" line height
   (Inter: 1.21), one empty line between top-level items, gold 13px dots
   13px into the column with the text 36px in (dots x 702, text x 725).
   Sizes are in em so the bullets follow the text size. */
.txsp-page .txsp-card__benefits {
	margin-top: calc(var(--txsp-u) * 16); /* list at y 1432 */
	font-family: var(--txsp-font-inter);
	font-weight: 700;
	font-style: normal;
	font-size: max(16px, calc(var(--txsp-u) * 18));
	line-height: 1.21;
	color: #fff;
}
.txsp-page .txsp-card__benefits p,
.txsp-page .txsp-card__benefits li {
	font: inherit;
	color: inherit;
}
.txsp-page .txsp-card__benefits > p + p,
.txsp-page .txsp-card__benefits > p + ul,
.txsp-page .txsp-card__benefits > p + ol,
.txsp-page .txsp-card__benefits > ul + p,
.txsp-page .txsp-card__benefits > ol + p,
.txsp-page .txsp-card__benefits > ul + ul,
.txsp-page .txsp-card__benefits > ol + ol {
	margin-top: 1.21em;
}
.txsp-page .txsp-card__benefits > ul {
	list-style: none;
}
.txsp-page .txsp-card__benefits > ul > li {
	position: relative;
	padding-left: 2em;
}
.txsp-page .txsp-card__benefits > ul > li + li,
.txsp-page .txsp-card__benefits > ol > li + li {
	margin-top: 1.21em;
}
.txsp-page .txsp-card__benefits > ul > li::before {
	content: "";
	position: absolute;
	top: 0.3333em;
	left: 0.7222em;
	width: 0.7222em;
	height: 0.7222em;
	border-radius: 50%;
	background: var(--txsp-gold-text);
}
.txsp-page .txsp-card__benefits > ol {
	padding-left: 2em;
	list-style: decimal outside;
}
.txsp-page .txsp-card__benefits > ol > li::marker {
	color: var(--txsp-gold-text);
}
/* Nested lists: small white discs, no gap between their items. */
.txsp-page .txsp-card__benefits li ul,
.txsp-page .txsp-card__benefits li ol {
	margin: 0;
	padding-left: 1.25em;
	list-style: disc outside;
}
.txsp-page .txsp-card__benefits li ol {
	list-style-type: decimal;
}
.txsp-page .txsp-card__benefits li li {
	padding-left: 0;
}
.txsp-page .txsp-card__benefits li li::marker {
	color: #fff;
}
/* A paragraph inside an item (the gold "... Includes:" line) follows an
   empty line, like Figma. */
.txsp-page .txsp-card__benefits li p {
	margin-top: 1.21em;
}
.txsp-page .txsp-card__benefits li > p:first-child {
	margin-top: 0;
}
.txsp-page .txsp-card__benefits strong,
.txsp-page .txsp-card__benefits b {
	font-weight: inherit;
	color: var(--txsp-gold-text);
}
.txsp-page .txsp-card__benefits em,
.txsp-page .txsp-card__benefits i {
	font-style: italic;
}
.txsp-page .txsp-card__benefits a {
	color: var(--txsp-gold-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.txsp-page .txsp-card__benefits a:hover,
.txsp-page .txsp-card__benefits a:focus {
	color: #fff;
}

/* Button 326x55 (702,1757): 13px into the column, aligned with the dots. */
.txsp-page .txsp-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: calc(var(--txsp-u) * 42);
	padding-left: calc(var(--txsp-u) * 13);
}
.txsp-page .txsp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--txsp-u) * 326);
	min-height: max(44px, calc(var(--txsp-u) * 55));
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(180deg, #ffbd57 0%, #aa6f15 100%);
	color: #fff;
	font-family: var(--txsp-font-tommy);
	font-weight: 700;
	font-style: normal;
	font-size: max(16px, calc(var(--txsp-u) * 20));
	line-height: 1.1;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}
.txsp-page a.txsp-btn:hover,
.txsp-page a.txsp-btn:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.08);
}
.txsp-page a.txsp-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.txsp-page a.txsp-btn:active {
	transform: translateY(1px);
	filter: brightness(0.97);
}
/* Not on sale (sold out, coming soon, closed, ...): muted, label only. */
.txsp-page .txsp-btn--disabled {
	background: linear-gradient(180deg, #6f6553 0%, #4b4433 100%);
	color: rgba(255, 255, 255, 0.72);
	cursor: not-allowed;
	user-select: none;
}
.txsp-page .txsp-card__spots {
	font-family: var(--txsp-font-inter);
	font-weight: 600;
	font-style: normal;
	font-size: 16px;
	line-height: 1.3;
	color: var(--txsp-gold-text);
}

/* Card without a photo: the text uses the photo's columns too. */
.txsp-page .txsp-card--no-photo .txsp-card__head,
.txsp-page .txsp-card--no-photo .txsp-card__body {
	grid-column: 2 / 5;
	padding-left: calc(var(--txsp-u) * 20);
}

/* ------------------------------------------------------------
   CLOSING NOTE (Figma y 3086-3340, then 291px to the frame end)
   Badge circle 130px (#9e7d3f) holding the 112px star icon, centred and
   overlapping the band's top by 40px; band 1222 wide with a teal glow
   and gold hairlines top and bottom.
   ------------------------------------------------------------ */
.txsp-page .txsp-closing {
	position: relative;
	padding-bottom: calc(var(--txsp-u) * 291);
	background: var(--txsp-navy);
}
.txsp-page .txsp-closing__badge {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--txsp-u) * 130);
	height: calc(var(--txsp-u) * 130);
	margin: 0 auto;
	border-radius: 50%;
	background: var(--txsp-badge);
}
.txsp-page .txsp-closing__badge img {
	width: 86.1538%; /* 112 / 130 */
	height: auto;
}
.txsp-page .txsp-closing__band {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--txsp-u) * -40);
	padding: calc(var(--txsp-u) * 51) calc(var(--txsp-u) * 10) calc(var(--txsp-u) * 41);
	background: linear-gradient(90deg, rgba(0, 40, 53, 0) 0%, var(--txsp-glow) 50%, rgba(0, 40, 53, 0) 100%);
}
.txsp-page .txsp-closing--no-badge .txsp-closing__band {
	margin-top: 0;
}
.txsp-page .txsp-closing__band::before,
.txsp-page .txsp-closing__band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--txsp-hairline);
	pointer-events: none;
}
.txsp-page .txsp-closing__band::before {
	top: 0;
}
.txsp-page .txsp-closing__band::after {
	bottom: 0;
}
/* Inter Bold 28/36 white, centred (198,3227). */
.txsp-page .txsp-closing__note {
	font-family: var(--txsp-font-inter);
	font-weight: 700;
	font-style: normal;
	font-size: max(18px, calc(var(--txsp-u) * 28));
	line-height: max(24px, calc(var(--txsp-u) * 36));
	color: #fff;
	text-align: center;
}

/* ------------------------------------------------------------
   TABLET AND PHONE (< 992px): stacked layout
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

	/* Hero: text first, portrait below it, standing on the hero's bottom edge. */
	.txsp-page .txsp-hero__inner {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 52px 16px 0;
	}
	.txsp-page .txsp-hero__text {
		max-width: 640px;
		padding: 0 0 8px;
	}
	.txsp-page .txsp-hero__eyebrow {
		gap: 16px;
		font-size: 18px;
		line-height: 26px;
	}
	.txsp-page .txsp-hero__eyebrow-rule {
		width: 96px;
	}
	.txsp-page .txsp-hero__title {
		max-width: none;
		margin-top: 12px;
		font-size: clamp(36px, 11.8vw, 80px);
		line-height: 0.907; /* 88 / 97 */
		text-shadow: 3px 3px 9px #000;
	}
	.txsp-page .txsp-hero__sub {
		max-width: none;
		margin-top: 16px;
		font-size: clamp(22px, 6.2vw, 34px);
		line-height: 1.08;
	}
	.txsp-page .txsp-hero__intro {
		max-width: 34em;
		margin-top: 16px;
		font-size: clamp(17px, 4.6vw, 24px);
		line-height: 1.15;
	}
	.txsp-page .txsp-hero__portrait {
		position: relative;
		right: auto;
		bottom: auto;
		align-self: flex-end;
		width: min(560px, 92%);
		margin-top: 12px;
	}
	.txsp-page .txsp-hero__shade {
		height: 48px;
	}
	.txsp-page .txsp-hero__fade {
		height: 140px;
	}

	.txsp-page .txsp-packages {
		padding: 48px 0 56px;
	}
	.txsp-page .txsp-packages:last-child {
		padding-bottom: 96px;
	}

	/* Cards: photo (with its frame) above, then the panel, then the details. */
	.txsp-page .txsp-card {
		display: flex;
		flex-direction: column;
	}
	.txsp-page .txsp-card + .txsp-card {
		margin-top: 72px;
	}
	.txsp-page .txsp-card__panel {
		display: none;
	}
	.txsp-page .txsp-card__media {
		align-self: center;
		width: min(398px, calc(100% - 16px));
		margin: 0 16px 0 0; /* centres photo + frame together */
	}
	.txsp-page .txsp-card__frame {
		right: -14px;
		bottom: -15px;
		width: 49.75%;
		border-right-width: 5px;
		border-bottom-width: 5px;
	}
	.txsp-page .txsp-card__head {
		margin-top: 40px;
		padding: 24px 20px 22px;
		background: var(--txsp-panel);
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.55);
	}
	.txsp-page .txsp-card--no-photo .txsp-card__head {
		margin-top: 0;
	}
	.txsp-page .txsp-card--no-photo .txsp-card__head,
	.txsp-page .txsp-card--no-photo .txsp-card__body {
		padding-left: 20px;
	}
	.txsp-page .txsp-card__name,
	.txsp-page .txsp-card__name--long {
		font-size: clamp(28px, 7vw, 42px);
		line-height: 1;
	}
	.txsp-page .txsp-card__price {
		margin-top: 12px;
		font-size: clamp(34px, 8.5vw, 46px);
		line-height: 1;
	}
	.txsp-page .txsp-card__tagline {
		margin-top: 12px;
		font-size: clamp(16px, 4.4vw, 22px);
		line-height: 1.15;
	}
	.txsp-page .txsp-card__body {
		padding: 24px 0 0;
	}
	.txsp-page .txsp-card--no-photo .txsp-card__body {
		padding-right: 0;
	}
	.txsp-page .txsp-card__rule {
		width: min(359px, 70%);
	}
	.txsp-page .txsp-card__summary {
		margin-top: 16px;
		font-size: clamp(18px, 4.6vw, 22px);
		line-height: 1.17;
	}
	.txsp-page .txsp-card__includes {
		margin-top: 20px;
		font-size: clamp(19px, 5vw, 24px);
		line-height: 1.1;
	}
	.txsp-page .txsp-card__benefits {
		margin-top: 14px;
		font-size: clamp(16px, 4.2vw, 18px);
	}
	.txsp-page .txsp-card__actions {
		margin-top: 32px;
		padding-left: 0;
	}
	.txsp-page .txsp-btn {
		width: min(326px, 100%);
		min-height: 52px;
		font-size: 18px;
	}

	.txsp-page .txsp-closing {
		padding-bottom: 96px;
	}
	.txsp-page .txsp-closing__badge {
		width: 104px;
		height: 104px;
	}
	.txsp-page .txsp-closing__band {
		margin-top: -32px;
		padding: 48px 8px 36px;
	}
	.txsp-page .txsp-closing__note {
		font-size: clamp(18px, 4.8vw, 24px);
		line-height: 1.33;
	}
}

/* Phones */
@media (max-width: 575.98px) {
	.txsp-page .txsp-hero__inner {
		padding-top: 40px;
	}
	.txsp-page .txsp-hero__eyebrow {
		font-size: 16px;
		line-height: 24px;
	}
	.txsp-page .txsp-hero__eyebrow-rule {
		width: 72px;
	}
	.txsp-page .txsp-hero__portrait {
		align-self: center;
		width: min(420px, 100%);
		margin-top: 20px;
	}
	.txsp-page .txsp-card__head {
		padding: 20px 16px 18px;
	}
	.txsp-page .txsp-card__benefits > ul > li {
		padding-left: 1.6em;
	}
	.txsp-page .txsp-card__benefits > ul > li::before {
		left: 0.2em;
	}
	.txsp-page .txsp-btn {
		width: 100%;
		max-width: 326px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.txsp-page .txsp-btn {
		transition: none;
	}
}