:root {
	--bg: #07111f;
	--bg-deep: #040914;
	--surface: rgba(9, 24, 44, 0.82);
	--surface-strong: rgba(12, 30, 54, 0.94);
	--stroke: rgba(145, 198, 255, 0.18);
	--text: #f5f7fb;
	--muted: #a5b7cf;
	--accent: #b79044;
	--accent-soft: #e3c375;
	--teal: #78c8f5;
	--gold: #f3d890;
	--shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	--radius-xl: 28px;
	--radius-lg: 22px;
	--radius-md: 16px;
	--max-width: 1200px;
	--font-title: "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--font-body: "Trebuchet MS", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(183, 144, 68, 0.22), transparent 28%),
		radial-gradient(circle at 88% 14%, rgba(120, 200, 245, 0.16), transparent 22%),
		linear-gradient(180deg, #081321 0%, #040b16 56%, #02060d 100%);
	min-height: 100vh;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
	opacity: 0.35;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), transparent 90%);
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select {
	font: inherit;
}

.page-shell {
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 28px 20px 40px;
	overflow: hidden;
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 34px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.brand-mark {
	display: grid;
	place-items: center;
	min-width: 52px;
	height: 52px;
	padding: 0 10px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--accent), #ff9a3d);
	color: #fff7f0;
	font-weight: 800;
	font-size: 14px;
	text-transform: lowercase;
	letter-spacing: 0.08em;
	box-shadow: 0 10px 35px rgba(255, 91, 61, 0.35);
}

.brand-kicker,
.eyebrow,
.section-heading p,
.cta-copy p,
.feature-strip p,
.mini-tag,
.spotlight p,
.signal-title,
.page-footer p {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 12px;
	color: var(--teal);
}

.brand h1,
.hero h2,
.section-heading h2,
.cta-copy h2 {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.brand h1 {
	font-size: 24px;
	margin-top: 4px;
}

.topnav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 22px;
	padding: 12px 18px;
	border: 1px solid var(--stroke);
	border-radius: 999px;
	background: rgba(7, 17, 31, 0.55);
	backdrop-filter: blur(12px);
}

.topnav a {
	font-size: 14px;
	color: var(--muted);
	transition: color 0.2s ease;
}

.topnav a:hover {
	color: var(--text);
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
	gap: 28px;
	align-items: stretch;
	margin-bottom: 28px;
}

.hero-copy,
.hero-panel,
.match-card,
.info-card,
.steps-grid article,
.cta-section,
.feature-strip article {
	position: relative;
	border: 1px solid var(--stroke);
	border-radius: var(--radius-xl);
	background: var(--surface);
	backdrop-filter: blur(16px);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.hero-copy {
	padding: 42px;
	background:
		radial-gradient(circle at top left, rgba(255, 91, 61, 0.18), transparent 28%),
		linear-gradient(180deg, rgba(11, 23, 48, 0.94), rgba(8, 19, 35, 0.86));
}

.hero-copy::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 118px;
	background:
		linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.24)),
		repeating-linear-gradient(
			90deg,
			rgba(255, 209, 102, 0.2) 0,
			rgba(255, 209, 102, 0.2) 18px,
			transparent 18px,
			transparent 48px
		);
	clip-path: polygon(0 100%, 0 60%, 8% 54%, 13% 68%, 19% 58%, 25% 73%, 32% 45%, 37% 64%, 43% 49%, 50% 70%, 57% 44%, 64% 66%, 71% 52%, 78% 75%, 85% 50%, 91% 63%, 100% 42%, 100% 100%);
	opacity: 0.55;
}

.hero h2 {
	margin-top: 14px;
	font-size: clamp(42px, 6vw, 76px);
}

.hero h2 span,
.cta-copy h2 span {
	display: block;
	color: var(--gold);
}

.hero-text {
	position: relative;
	max-width: 640px;
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.8;
	color: var(--muted);
	z-index: 1;
}

.hero-actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	z-index: 1;
}

.btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 700;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	cursor: pointer;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn-primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-soft));
	color: #fff;
	box-shadow: 0 12px 30px rgba(255, 91, 61, 0.3);
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--text);
}

.btn-block {
	width: 100%;
}

.hero-metrics {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
	z-index: 1;
}

.hero-metrics li {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.04);
}

.hero-metrics strong {
	display: block;
	font-size: 28px;
	font-weight: 800;
	color: var(--text);
}

.hero-metrics span,
.feature-strip span,
.match-copy,
.info-card p,
.steps-grid p,
.form-note,
.signup-form span,
.signal-legend,
.probability-row span,
.spotlight strong,
.zone,
.match-time,
.match-stage {
	color: var(--muted);
}

.hero-panel {
	padding: 28px;
	background: linear-gradient(180deg, rgba(7, 17, 31, 0.92), rgba(7, 15, 30, 0.78));
}

.hero-visual,
.top-kv-image,
.banner-image,
.media-thumb,
.favorites-image,
.photo-panel,
.story-media {
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, rgba(7, 16, 30, 0.94), rgba(10, 26, 48, 0.9));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: 10px;
}

.hero-visual {
	margin-bottom: 20px;
	aspect-ratio: 1120 / 970;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.top-kv {
	margin-bottom: 28px;
}

.top-kv-image {
	aspect-ratio: 1920 / 650;
	padding: 12px;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
}

.hero-visual img,
.top-kv-image img,
.banner-image img,
.media-thumb img,
.favorites-image img,
.photo-panel img,
.story-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: calc(var(--radius-lg) - 8px);
}

.panel-glow {
	position: absolute;
	inset: -24% auto auto 62%;
	width: 240px;
	height: 240px;
	background: radial-gradient(circle, rgba(41, 211, 192, 0.22), transparent 62%);
	pointer-events: none;
}

.match-showcase {
	position: relative;
	z-index: 1;
}

.mini-tag {
	display: inline-flex;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(41, 211, 192, 0.1);
	border: 1px solid rgba(41, 211, 192, 0.18);
	margin-bottom: 18px;
}

.score-strip {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 22px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, rgba(255, 91, 61, 0.16), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.score-strip div:first-child,
.score-strip div:last-child {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.score-strip div:last-child {
	text-align: right;
}

.score-strip p {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.score-strip strong {
	font-size: 34px;
	font-weight: 800;
}

.score-strip span {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--gold);
}

.team-flag {
	font-size: 22px;
	line-height: 1;
}

.signal-card,
.spotlight {
	margin-top: 18px;
	padding: 18px 20px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.signal-bar,
.probability-bar {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.signal-bar span,
.home-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--teal), #6ee7d7);
}

.signal-legend,
.probability-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	font-size: 14px;
}

.spotlight strong {
	display: block;
	margin-top: 12px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--text);
}

.harbour-line {
	margin-top: 20px;
	height: 84px;
	border-radius: 20px;
	background:
		radial-gradient(circle at 22% 24%, rgba(255, 209, 102, 0.75) 0 4px, transparent 5px),
		radial-gradient(circle at 52% 16%, rgba(255, 91, 61, 0.75) 0 5px, transparent 6px),
		radial-gradient(circle at 78% 28%, rgba(41, 211, 192, 0.85) 0 4px, transparent 5px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.05) 0,
			rgba(255, 255, 255, 0.05) 12px,
			transparent 12px,
			transparent 36px
		);
	border: 1px solid rgba(255, 255, 255, 0.08);
	clip-path: polygon(0 100%, 0 80%, 8% 78%, 14% 56%, 21% 73%, 28% 44%, 34% 66%, 41% 52%, 50% 80%, 57% 45%, 65% 70%, 73% 51%, 80% 75%, 87% 50%, 94% 64%, 100% 42%, 100% 100%);
	opacity: 0.95;
}

.feature-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 28px;
}

.hero-banner-strip {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
	gap: 20px;
	margin-bottom: 34px;
}

.banner-card,
.favorites-banner,
.story-panel {
	position: relative;
	border: 1px solid var(--stroke);
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, rgba(8, 18, 34, 0.92), rgba(6, 13, 24, 0.84));
	box-shadow: var(--shadow);
	overflow: hidden;
	padding: 22px;
}

.banner-card.banner-wide {
	display: grid;
	gap: 18px;
}

.banner-image {
	aspect-ratio: 16 / 9;
}

.banner-image.portrait {
	height: 100%;
	min-height: 100%;
	aspect-ratio: 7 / 10;
}

.banner-copy h3,
.favorites-copy h3,
.story-copy h3 {
	margin: 10px 0 0;
	font-size: 26px;
	line-height: 1.3;
}

.banner-copy p,
.favorites-copy p,
.story-copy p {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--teal);
}

.banner-card.banner-tall {
	padding: 16px;
}

.feature-strip article,
.steps-grid article {
	padding: 24px;
}

.feature-strip h3,
.match-card h3,
.info-card h3,
.steps-grid h3 {
	margin: 12px 0 10px;
	font-size: 22px;
	line-height: 1.2;
}

.predict-board,
.fan-zones,
.steps-section,
.schedule-section,
.insight-section {
	margin-top: 40px;
}

.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 20px;
	margin-bottom: 22px;
}

.section-heading h2,
.cta-copy h2 {
	font-size: clamp(28px, 4vw, 50px);
}

.media-grid {
	display: grid;
	gap: 20px;
}

.media-grid-five {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-grid-four {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-card {
	display: grid;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--stroke);
	border-radius: var(--radius-xl);
	background: rgba(9, 24, 44, 0.72);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.media-card-feature {
	background: linear-gradient(180deg, rgba(10, 24, 44, 0.82), rgba(6, 14, 26, 0.88));
}

.media-copy p {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--teal);
}

.media-copy h3 {
	margin: 10px 0 10px;
	font-size: 24px;
	line-height: 1.25;
}

.media-copy span,
.favorites-copy p:last-child,
.story-copy span {
	display: block;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
}

.favorites-banner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
	gap: 22px;
	align-items: center;
}

.favorites-image {
	aspect-ratio: 1140 / 430;
}

.favorites-copy {
	display: grid;
	gap: 14px;
}

.match-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.match-card {
	padding: 24px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.match-card.active,
.match-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 209, 102, 0.36);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
}

.match-head,
.signup-form,
.zone-copy {
	display: grid;
	gap: 16px;
}

.match-head {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.match-copy {
	margin: 0 0 18px;
	line-height: 1.7;
}

.flag-line,
.match-pill-row,
.match-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.flag-line {
	margin: 12px 0 6px;
	font-size: 26px;
}

.match-pill-row {
	margin-bottom: 16px;
}

.meta-pill,
.match-notes span {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	font-size: 13px;
	color: #d8e4f4;
}

.match-notes {
	margin-top: 16px;
}

.probability-row {
	margin-top: 0;
	margin-bottom: 12px;
}

.probability-row div {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.probability-row div:last-child {
	text-align: right;
}

.probability-row strong {
	font-size: 28px;
	color: var(--text);
}

.pick-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.pick-btn {
	min-height: 46px;
	padding: 0 12px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pick-btn:hover,
.pick-btn.is-selected {
	background: rgba(255, 91, 61, 0.14);
	border-color: rgba(255, 91, 61, 0.38);
	transform: translateY(-1px);
}

.zone-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
	gap: 22px;
}

.zone-visual-stack {
	display: grid;
	gap: 18px;
}

.schedule-list,
.insight-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.schedule-item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 96px;
	gap: 16px;
	align-items: center;
	padding: 22px;
	border: 1px solid var(--stroke);
	border-radius: var(--radius-lg);
	background: rgba(9, 24, 44, 0.72);
	box-shadow: var(--shadow);
}

.schedule-date,
.schedule-time {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--teal);
}

.schedule-teams {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
}

.schedule-teams strong {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.schedule-note {
	grid-column: 2 / 4;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}

.zone-map,
.cta-section {
	border: 1px solid var(--stroke);
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, rgba(10, 23, 43, 0.88), rgba(4, 9, 20, 0.9));
	box-shadow: var(--shadow);
}

.zone-map {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	background-image:
		radial-gradient(circle at 20% 18%, rgba(255, 209, 102, 0.2), transparent 16%),
		radial-gradient(circle at 85% 20%, rgba(41, 211, 192, 0.18), transparent 18%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}

.photo-panel {
	aspect-ratio: 800 / 533;
}

.zone-map::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 42%;
	background:
		linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.32)),
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.07) 0,
			rgba(255, 255, 255, 0.07) 16px,
			transparent 16px,
			transparent 42px
		);
	clip-path: polygon(0 100%, 0 62%, 10% 58%, 16% 40%, 22% 68%, 29% 52%, 37% 78%, 45% 44%, 55% 73%, 63% 35%, 72% 66%, 80% 48%, 88% 69%, 95% 42%, 100% 54%, 100% 100%);
	opacity: 0.65;
}

.zone {
	position: absolute;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	backdrop-filter: blur(10px);
}

.zone.skyline {
	left: 20px;
	top: 22px;
	background: rgba(255, 91, 61, 0.12);
	border-color: rgba(255, 91, 61, 0.22);
}

.zone.mk {
	left: 14%;
	top: 28%;
}

.zone.cwb {
	right: 14%;
	top: 36%;
}

.zone.kt {
	right: 20%;
	bottom: 22%;
}

.zone.st {
	left: 34%;
	bottom: 18%;
}

.info-card {
	padding: 22px;
	background: rgba(255, 255, 255, 0.05);
}

.info-card p,
.steps-grid p,
.form-note {
	margin: 0;
	line-height: 1.75;
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.story-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
	gap: 24px;
	align-items: center;
}

.story-media {
	aspect-ratio: 800 / 533;
}

.story-copy {
	display: grid;
	gap: 14px;
}

.steps-grid span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(41, 211, 192, 0.12);
	border: 1px solid rgba(41, 211, 192, 0.24);
	font-size: 20px;
	font-weight: 800;
	color: var(--teal);
}

.cta-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
	gap: 24px;
	align-items: center;
	padding: 30px;
	margin-top: 42px;
}

.cta-copy {
	padding: 8px 8px 8px 0;
}

.signup-form label {
	display: grid;
	gap: 10px;
}

.signup-form span {
	font-size: 14px;
	color: #d8e4f4;
}

.signup-form input,
.signup-form select {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	outline: none;
}

.signup-form input::placeholder {
	color: rgba(214, 224, 239, 0.55);
}

.signup-form input:focus,
.signup-form select:focus {
	border-color: rgba(41, 211, 192, 0.5);
	box-shadow: 0 0 0 4px rgba(41, 211, 192, 0.12);
}

.page-footer {
	padding-top: 24px;
	text-align: center;
}

.page-footer p {
	letter-spacing: 0.08em;
	color: rgba(214, 224, 239, 0.55);
}

@media (max-width: 1080px) {
	.hero,
	.hero-banner-strip,
	.zone-layout,
	.cta-section,
	.match-grid,
	.steps-grid,
	.feature-strip,
	.schedule-list,
	.insight-grid,
	.media-grid-five,
	.media-grid-four,
	.favorites-banner,
	.story-panel {
		grid-template-columns: 1fr;
	}

	.hero {
		gap: 22px;
	}

	.hero-panel {
		min-height: 0;
	}

	.banner-image.portrait {
		aspect-ratio: 7 / 10;
	}

	.section-heading {
		align-items: start;
		flex-direction: column;
	}
}

@media (max-width: 760px) {
	.page-shell {
		padding: 16px 14px 28px;
	}

	.topbar,
	.topnav,
	.hero-actions,
	.hero-metrics,
	.pick-actions,
	.match-head {
		grid-template-columns: 1fr;
		flex-direction: column;
	}

	.topbar {
		align-items: stretch;
	}

	.topnav {
		border-radius: 20px;
		gap: 12px;
	}

	.topnav a {
		width: 100%;
		text-align: center;
	}

	.hero-copy,
	.hero-panel,
	.match-card,
	.feature-strip article,
	.steps-grid article,
	.cta-section,
	.banner-card,
	.media-card,
	.favorites-banner,
	.story-panel {
		padding: 22px;
		border-radius: 22px;
	}

	.schedule-item {
		grid-template-columns: 1fr;
	}

	.schedule-note {
		grid-column: auto;
	}

	.hero h2 {
		font-size: 38px;
	}

	.hero-text {
		font-size: 15px;
	}

	.hero-metrics {
		display: grid;
	}

	.hero-metrics li,
	.pick-btn,
	.btn,
	.signup-form input,
	.signup-form select {
		width: 100%;
	}

	.hero-visual,
	.top-kv-image,
	.banner-image,
	.media-thumb,
	.favorites-image,
	.photo-panel,
	.story-media {
		padding: 8px;
	}

	.match-pill-row,
	.match-notes,
	.schedule-teams {
		gap: 8px;
	}

	.score-strip {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.score-strip div:last-child {
		text-align: center;
	}

	.zone-map {
		min-height: 300px;
	}

	.cta-copy h2,
	.section-heading h2 {
		font-size: 32px;
	}
}

@media (max-width: 520px) {
	.hero h2 {
		font-size: 32px;
	}

	.brand h1 {
		font-size: 20px;
	}

	.score-strip strong,
	.probability-row strong {
		font-size: 26px;
	}
}