/* Sneaker Helpers Redline Vault Edition. Hero artwork remains filter-free and full resolution. */
:root {
  --black: #020306;
  --panel: #070b11;
  --panel-2: #0b111b;
  --blue: #dca821;
  --blue-bright: #ffc51a;
  --red: #ed282d;
  --red-dark: #7a0c11;
  --yellow: #ffc51a;
  --gold: #dca821;
  --purple: #5865f2;
  --white: #fff;
  --muted: #b9c0cb;
  --shell: 1420px;
}

body {
  background-color: #010205;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(237,40,45,.12), transparent 38rem),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
body::before { display: none; }

/* Wider brand lockup and quieter chrome. */
.site-header {
  border-bottom-color: rgba(237,40,45,.72);
  background: rgba(2,3,6,.97);
  box-shadow: 0 10px 34px rgba(0,0,0,.72), 0 1px 0 rgba(255,197,26,.16) inset;
}
.header-inner { grid-template-columns: 450px minmax(340px, 1fr) auto auto; gap: 18px; }
.brand { width: 450px; height: 100%; }
.custom-logo-link { width: 325px; }
.brand img, .custom-logo-link img { width: 310px; }
.brand .brand-face {
  border-color: rgba(255,197,26,.82);
  box-shadow: 0 0 0 3px rgba(101,11,15,.8), 0 0 16px rgba(237,40,45,.32);
}
.brand-copy {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  gap: 9px;
  white-space: nowrap;
}
.brand-copy b,
.brand-copy em,
.brand-copy small {
  display: inline-block;
  margin: 0;
  font-size: 37px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .018em;
  line-height: 1;
}
.brand-copy b, .brand-copy small { color: #fff; }
.brand-copy em { color: var(--yellow); }
.primary-nav ul { gap: clamp(14px, 1.5vw, 24px); }
.primary-nav a { font-size: 14px; }
.primary-nav a::after { background: linear-gradient(90deg, var(--red), var(--yellow)); }

.social-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}
.social-link {
	display: grid;
	place-items: center;
	width: 35px;
	height: 35px;
	border: 1px solid rgba(255,197,26,.62);
	border-radius: 50%;
	color: #fff;
	background: rgba(255,255,255,.045);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
	transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.social-link svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; }
.social-link--facebook svg, .social-link--x svg { stroke: none; }
.social-link:hover, .social-link:focus-visible {
	border-color: var(--yellow);
	color: #050505;
	background: var(--yellow);
	transform: translateY(-2px);
}
.social-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.social-links--footer { margin-top: 2px; }

.main-hero-title {
	display: flex;
	align-items: center;
	gap: 14px;
}
.main-hero-title .unlock-title-key {
	display: grid;
	flex: 0 0 clamp(44px, 5vw, 68px);
	place-items: center;
	width: clamp(44px, 5vw, 68px);
	height: clamp(44px, 5vw, 68px);
	border: 2px solid rgba(255,197,26,.88);
	border-radius: 50%;
	color: var(--yellow);
	background: radial-gradient(circle at 31% 27%, rgba(255,255,255,.34), transparent 24%), rgba(0,0,0,.42);
	box-shadow: 0 0 0 3px rgba(139,16,20,.82), inset 0 0 0 2px rgba(255,255,255,.46), 0 0 20px rgba(255,255,255,.28), 0 0 18px rgba(255,197,26,.36);
	text-shadow: none;
}
.unlock-title-key svg { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; filter: drop-shadow(-1px -1px 0 rgba(255,255,255,.95)); }

/* Bright, sharp hero with a protected copy panel. */
.hero-slider {
  height: clamp(650px, 55vw, 800px);
  border-bottom: 3px solid var(--red);
  background: #030407;
  box-shadow: 0 15px 42px rgba(0,0,0,.8);
}
.hero-background {
	object-position: center;
	filter: none !important;
	image-rendering: auto;
	opacity: 1;
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(1,2,5,.5) 0, rgba(1,2,5,.15) 45%, rgba(1,2,5,.01) 72%, rgba(1,2,5,.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,.03), transparent 68%, rgba(0,0,0,.34));
}
.hero-copy {
  width: min(47%, 610px);
  border: 1px solid rgba(255,255,255,.25);
  border-left: 5px solid var(--red);
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(3,4,7,.97), rgba(3,4,7,.82));
  box-shadow: 0 22px 60px rgba(0,0,0,.68), inset 0 0 0 1px rgba(255,197,26,.08);
}
.hero-kicker { color: var(--yellow) !important; }
.hero-copy h1 { text-shadow: 4px 4px 0 #050505, -1px -1px 0 rgba(255,255,255,.18); }
.hero-copy h1 span { color: var(--yellow); text-shadow: 4px 4px 0 #8b1014, -1px -1px 0 rgba(255,255,255,.15); }
.hero-copy > p:not(.hero-kicker) { color: #f0f2f5; }
.hero-mascot {
	right: max(-30px, calc((100vw - var(--shell)) / 2 - 88px));
	bottom: -4%;
	height: 92%;
}
.hero-mascot > img {
	filter: saturate(1.05) contrast(1.02);
}
.hero-arrow, .carousel-arrow {
  border-color: rgba(255,197,26,.55);
  color: #fff;
  background: rgba(5,6,9,.9);
  box-shadow: 0 0 0 1px rgba(237,40,45,.45), 0 8px 22px rgba(0,0,0,.45);
}
.hero-arrow:hover, .hero-arrow:focus-visible,
.carousel-arrow:hover, .carousel-arrow:focus-visible { color: var(--yellow); border-color: var(--yellow); }
.hero-dot.is-active, .carousel-dot.is-active {
  background: var(--yellow);
  box-shadow: 0 0 0 2px var(--red), 0 0 11px rgba(255,197,26,.6);
}

/* Red and warm-gold mechanical energy from the supplied artwork. */
.web-section, .steps-section {
  border-bottom-color: rgba(255,255,255,.16);
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(237,40,45,.12) 18.5%, transparent 20%),
    linear-gradient(65deg, transparent 0 78%, rgba(220,168,33,.1) 78.5%, transparent 80%),
    radial-gradient(ellipse at 50% 0, rgba(122,12,17,.22), transparent 58%),
    #030509;
}
.section-beams { opacity: .45; }
.comic-heading { color: #fff; text-shadow: 4px 4px 0 #111, 0 0 1px #fff; }
.comic-heading span {
  color: var(--yellow);
  text-shadow: 4px 4px 0 #9d1217, -1px -1px 0 rgba(255,255,255,.25);
}

/* Same-width panel cards with labeled headers like the reference. */
.vault-track { grid-auto-columns: minmax(250px, 23%); gap: 14px; padding-top: 10px; }
.feature-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #657081;
  border-top: 2px solid rgba(255,255,255,.52);
  border-radius: 5px;
  background: linear-gradient(180deg, #0b1018, #030507);
  box-shadow: 0 12px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.035);
}
.feature-card:nth-child(1) { --card-accent: var(--red); }
.feature-card:nth-child(2) { --card-accent: var(--blue); }
.feature-card:nth-child(3) { --card-accent: var(--gold); }
.feature-card:nth-child(4) { --card-accent: #765dff; }
.feature-card:nth-child(5) { --card-accent: var(--gold); }
.ribbon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: calc(100% - 28px);
  min-height: 62px;
  margin: 0 14px;
  padding: 15px 5px 12px 42px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.26);
  color: #fff;
  background: none;
  box-shadow: none;
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: .025em;
  text-align: left;
  clip-path: none;
}
.feature-card .ribbon::before,
.help-card .ribbon::before {
  position: absolute;
  left: 7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--card-accent, var(--red));
  content: "●";
  font: normal 24px/1 Arial, sans-serif;
  text-shadow: 0 0 10px currentColor;
}
.feature-card:nth-child(1) .ribbon::before {
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  content: "!";
  font-size: 18px;
  font-weight: 900;
}
.feature-card:nth-child(2) .ribbon::before { content: "◖◗"; font-size: 15px; }
.feature-card:nth-child(3) .ribbon::before { content: "◆"; }
.feature-card:nth-child(4) .ribbon::before { content: "●●●"; font-size: 10px; letter-spacing: -1px; }
.feature-card:nth-child(5) .ribbon::before { content: "♛"; }
.feature-visual {
  width: calc(100% - 28px);
  height: 380px;
  margin: 0 14px 14px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #090f18, #030507);
}
.vault-image-visual {
	height: auto !important;
	aspect-ratio: 4 / 5;
	padding: 5px;
	border: 1px solid rgba(220, 168, 33, .5);
	border-radius: 5px;
	overflow: hidden;
	background: #020202;
	box-shadow: inset 0 0 0 1px rgba(255, 197, 26, .08);
}
.vault-image-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	filter: none !important;
	transform: none !important;
	transition: filter .24s ease, opacity .24s ease;
}
.feature-card:hover .vault-image-visual img,
.feature-card:focus-visible .vault-image-visual img {
	filter: blur(2.5px) brightness(.5) saturate(.92) !important;
	opacity: .86;
}
.feature-card:hover .vault-image-visual,
.feature-card:focus-visible .vault-image-visual {
	border-color: var(--card-accent, var(--yellow));
	box-shadow: inset 0 0 0 1px var(--card-accent, var(--yellow)), 0 0 18px rgba(220, 168, 33, .18);
}
.phone-visual {
  width: calc(100% - 28px) !important;
  max-width: none !important;
  margin: 0 14px 14px !important;
  border: 6px solid #101318;
  border-radius: 26px;
}
.interactive-card .feature-visual,
.interactive-card .coverage-visual,
.interactive-card .help-visual { filter: none !important; }
.interactive-card:hover .feature-visual,
.interactive-card:focus-visible .feature-visual,
.interactive-card:hover .coverage-visual,
.interactive-card:focus-visible .coverage-visual,
.interactive-card:hover .help-visual,
.interactive-card:focus-visible .help-visual {
  border-color: var(--card-accent, var(--yellow));
  box-shadow: inset 0 0 0 1px var(--card-accent, var(--yellow));
}
.hover-info {
	padding-inline: 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: 0 2px 8px #000, 0 0 14px #000;
}
.hover-info b { color: var(--card-accent, var(--yellow)); }

/* Coverage, help, and results share the new precise panel construction. */
.coverage-section { background: #020407; }
.help-section { background: #020407; }
.coverage-card, .help-card, .result-card-static {
  border-color: #596474;
  border-top-color: rgba(255,255,255,.5);
  border-radius: 5px;
  background: linear-gradient(180deg, #0a1018, #030507);
  box-shadow: 0 12px 28px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.025);
}
.coverage-card {
	border-color: rgba(220, 168, 33, .58);
	background: #030303;
	box-shadow: 0 12px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,197,26,.045);
}
@media (min-width: 701px) {
	.coverage-carousel { padding-inline: 76px !important; }
	.coverage-carousel .coverage-track {
		width: 100%;
		padding: 8px 0 18px !important;
	}
	.coverage-carousel .carousel-arrow.prev { left: 10px; }
	.coverage-carousel .carousel-arrow.next { right: 10px; }
}
.coverage-visual {
	height: auto;
	aspect-ratio: 1 / 1;
	border-bottom-color: rgba(220, 168, 33, .42);
	background: #020202;
}
.coverage-visual img {
	object-fit: contain;
	transition: filter .24s ease, transform .24s ease;
}
@media (hover: hover) {
	.coverage-card:hover .coverage-visual img,
	.coverage-card:focus-visible .coverage-visual img {
		filter: blur(4px) brightness(.42) !important;
		transform: scale(1.04);
	}
}
.coverage-card > strong { border-top: 1px solid rgba(255,255,255,.22); }
.help-card { --card-accent: var(--gold); }
.help-card:nth-child(2) { --card-accent: var(--gold); }
.help-card {
	display: grid;
	grid-template-columns: minmax(190px, .78fr) minmax(0, 1.22fr);
	grid-template-areas: "copy visual";
	align-items: center;
	overflow: hidden;
	border-color: rgba(220, 168, 33, .68);
	background: #030303;
}
.help-copy {
	grid-area: copy;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3vw, 42px);
}
.help-title {
	display: block;
	color: #f4f4f4;
	font-family: Impact, "Arial Narrow", Arial, sans-serif;
	font-size: clamp(30px, 3vw, 46px);
	font-style: normal;
	font-weight: 400;
	letter-spacing: .025em;
	line-height: .98;
	text-transform: uppercase;
}
.help-title span { display: block; color: var(--gold); }
.help-title-rule {
	display: block;
	width: 52px;
	height: 2px;
	margin: 22px 0 16px;
	background: var(--gold);
}
.help-visual {
	grid-area: visual;
	width: 100%;
	margin: 0;
	border: 0;
	border-left: 1px solid rgba(220, 168, 33, .32);
	border-radius: 0;
	background: #020202;
}
.help-visual img { object-fit: contain; }
.help-card .hover-label { top: 56%; left: 68%; }
.help-summary {
	min-height: 0;
	margin: 0;
	padding: 0;
	color: #e4e7ec;
	font-size: clamp(14px, 1.25vw, 18px);
	line-height: 1.65;
	text-align: left;
}

/* Compact full-width premium Waffles addition beneath the two Help cards. */
.premium-waffles-panel {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(280px, 1.3fr) minmax(320px, 1fr);
	align-items: center;
	gap: clamp(18px, 2.6vw, 38px);
	min-height: 158px;
	margin-top: 26px;
	padding: 24px clamp(24px, 3vw, 44px);
	border: 1px solid rgba(220,168,33,.75);
	border-left: 5px solid var(--red);
	border-radius: 5px;
	overflow: hidden;
	color: #f4f4f4;
	background:
		radial-gradient(circle at 9% 50%, rgba(220,168,33,.16), transparent 25%),
		linear-gradient(105deg, #090705, #030303 52%, #070503);
	box-shadow: 0 14px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,197,26,.045);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.premium-waffles-panel::after {
	position: absolute;
	right: -26px;
	bottom: -52px;
	width: 190px;
	height: 120px;
	border: 1px solid rgba(220,168,33,.14);
	border-radius: 50%;
	content: "";
}
.premium-waffles-panel:hover,
.premium-waffles-panel:focus-visible {
	border-color: var(--yellow);
	box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 20px rgba(220,168,33,.16);
	transform: translateY(-2px);
}
.premium-waffles-panel:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.premium-waffles-mark {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 76px;
	height: 76px;
	border: 2px solid var(--gold);
	border-radius: 10px;
	color: #080603;
	background: linear-gradient(145deg, #ffd65d, #b47a12);
	box-shadow: 0 0 20px rgba(220,168,33,.22);
	transform: rotate(-4deg);
}
.premium-waffles-mark::before,
.premium-waffles-mark::after,
.premium-waffles-mark i::before,
.premium-waffles-mark i::after {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: rgba(34,20,2,.42);
	content: "";
}
.premium-waffles-mark::before { top: 13px; left: 13px; }
.premium-waffles-mark::after { top: 13px; right: 13px; }
.premium-waffles-mark i::before { bottom: 13px; left: 13px; }
.premium-waffles-mark i::after { right: 13px; bottom: 13px; }
.premium-waffles-mark b { font: italic 900 31px/1 Impact, "Arial Narrow", Arial, sans-serif; }
.premium-waffles-copy { display: block; min-width: 0; }
.premium-waffles-copy strong {
	display: block;
	margin-bottom: 8px;
	color: var(--gold);
	font-family: Impact, "Arial Narrow", Arial, sans-serif;
	font-size: clamp(24px, 2.5vw, 38px);
	font-style: normal;
	font-weight: 400;
	letter-spacing: .025em;
	line-height: 1;
	text-transform: uppercase;
}
.premium-waffles-copy > span { color: #dfe3e9; font-size: 14px; line-height: 1.55; }
.premium-waffles-categories {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: 7px;
}
.premium-waffles-categories i {
	padding: 6px 9px;
	border: 1px solid rgba(220,168,33,.45);
	border-radius: 3px;
	color: #f4f4f4;
	background: rgba(255,255,255,.025);
	font-size: 10px;
	font-style: normal;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.premium-waffles-pop {
	position: absolute;
	right: 24px;
	bottom: 10px;
	color: var(--yellow);
	font-family: Impact, "Arial Narrow", Arial, sans-serif;
	font-size: 13px;
	font-style: italic;
	letter-spacing: .055em;
	text-transform: uppercase;
}
.result-status { color: #45df75; }

/* Professional results-only hover: copy stays sharp while the result image softens. */
.result-card-static { position: relative; overflow: hidden; }
.result-card-static img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: filter .24s ease, transform .24s ease;
}
.result-hover-label {
  position: absolute;
  z-index: 3;
  top: 66%;
  left: 50%;
  width: calc(100% - 34px);
  padding: 9px 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 2px solid #45df75;
  border-radius: 4px;
  opacity: 0;
	color: #45df75;
  background: rgba(3,4,7,.9);
	box-shadow: 0 7px 20px rgba(0,0,0,.45), 0 0 15px rgba(69,223,117,.18);
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: .055em;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -42%);
  transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.result-hover-label > i {
	display: grid;
	flex: 0 0 24px;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #041208;
	background: #45df75;
	box-shadow: 0 0 13px rgba(69,223,117,.75);
	font: 900 16px/1 Arial, sans-serif;
	font-style: normal;
}
.result-hover-label > span { display: inline-block; }
.result-card-static:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (hover: hover) {
  .result-card-static:hover img,
  .result-card-static:focus-visible img { filter: blur(3px) brightness(.52); transform: scale(1.04); }
  .result-card-static:hover .result-hover-label,
  .result-card-static:focus-visible .result-hover-label { opacity: 1; transform: translate(-50%, -50%); }
}

/* Crisp CSS Discord mark for Join Step 1. */
.discord-step-logo {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #5865f2;
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), 0 0 15px rgba(88,101,242,.52);
}
.discord-step-logo::before {
  position: absolute;
  top: 15px;
  left: 10px;
  width: 34px;
  height: 24px;
  border-radius: 13px 13px 9px 9px;
  content: "";
  background: #fff;
}
.discord-step-logo::after {
  position: absolute;
  top: 34px;
  left: 14px;
  width: 26px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: #fff;
}
.discord-step-logo i {
  position: absolute;
  z-index: 2;
  top: 24px;
  width: 5px;
  height: 6px;
  border-radius: 50%;
  background: #5865f2;
}
.discord-step-logo i:first-child { left: 19px; }
.discord-step-logo i:nth-child(2) { right: 19px; }
.discord-step-logo b {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 21px;
  width: 12px;
  height: 6px;
  border-bottom: 2px solid #5865f2;
  border-radius: 50%;
}

.trial-button, .discord-button, .mobile-discord-cta {
  border-color: #a9aeff;
  background: linear-gradient(180deg, #7068ff, #4335dc);
}

/* Unified premium Discord CTA system. */
.discord-button,
.discord-trial-button,
.mobile-discord-cta {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	border: 1px solid rgba(190,196,255,.92);
	border-radius: 11px;
	overflow: hidden;
	color: #fff;
	background:
		linear-gradient(180deg, rgba(255,255,255,.16), transparent 38%),
		linear-gradient(135deg, #737cff 0%, #5865f2 48%, #3740bd 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.28),
		inset 0 -2px 0 rgba(20,24,105,.48),
		0 8px 20px rgba(0,0,0,.38),
		0 0 20px rgba(88,101,242,.3);
	clip-path: none;
	text-shadow: 0 2px 5px rgba(17,18,70,.55);
	transform: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.discord-button::after,
.discord-trial-button::after,
.mobile-discord-cta::after {
	position: absolute;
	z-index: -1;
	top: -70%;
	left: -24%;
	width: 38%;
	height: 240%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
	content: "";
	transform: rotate(18deg);
	transition: left .35s ease;
}
.discord-button > *,
.discord-trial-button > *,
.mobile-discord-cta > * { position: relative; z-index: 1; transform: none; }
.discord-button:hover,
.discord-button:focus-visible,
.discord-trial-button:hover,
.discord-trial-button:focus-visible,
.mobile-discord-cta:hover,
.mobile-discord-cta:focus-visible {
	border-color: #fff;
	background:
		linear-gradient(180deg, rgba(255,255,255,.2), transparent 38%),
		linear-gradient(135deg, #838aff 0%, #6370ff 48%, #424bd0 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.34),
		inset 0 -2px 0 rgba(20,24,105,.42),
		0 12px 25px rgba(0,0,0,.42),
		0 0 28px rgba(88,101,242,.58);
	filter: saturate(1.08);
	transform: translateY(-2px);
}
.discord-button:hover::after,
.discord-button:focus-visible::after,
.discord-trial-button:hover::after,
.discord-trial-button:focus-visible::after,
.mobile-discord-cta:hover::after,
.mobile-discord-cta:focus-visible::after { left: 110%; }
.discord-button:focus-visible,
.discord-trial-button:focus-visible,
.mobile-discord-cta:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.discord-button--header {
	min-height: 50px;
	padding: 10px 20px;
}
.discord-trial-button {
	min-width: 0;
	padding: 13px 24px;
	border-width: 1px;
	outline: 0;
}
.discord-cta-mark {
	position: relative;
	display: inline-block;
	flex: 0 0 38px;
	width: 38px;
	height: 28px;
	border-radius: 13px 13px 9px 9px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(18,20,84,.32);
}
.discord-cta-mark::before,
.discord-cta-mark::after {
	position: absolute;
	bottom: -3px;
	width: 10px;
	height: 8px;
	background: #fff;
	content: "";
}
.discord-cta-mark::before { left: 4px; transform: rotate(30deg); }
.discord-cta-mark::after { right: 4px; transform: rotate(-30deg); }
.discord-cta-mark i {
	position: absolute;
	z-index: 2;
	top: 10px;
	width: 5px;
	height: 7px;
	border-radius: 50%;
	background: #5865f2;
}
.discord-cta-mark i:first-child { left: 10px; }
.discord-cta-mark i:last-child { right: 10px; }
.discord-button--header .discord-cta-mark,
.mobile-discord-cta .discord-cta-mark {
	flex-basis: 30px;
	width: 30px;
	height: 22px;
	border-radius: 10px 10px 7px 7px;
}
.discord-button--header .discord-cta-mark::before,
.discord-button--header .discord-cta-mark::after,
.mobile-discord-cta .discord-cta-mark::before,
.mobile-discord-cta .discord-cta-mark::after { width: 8px; height: 6px; bottom: -2px; }
.discord-button--header .discord-cta-mark i,
.mobile-discord-cta .discord-cta-mark i { top: 8px; width: 4px; height: 6px; }
.discord-button--header .discord-cta-mark i:first-child,
.mobile-discord-cta .discord-cta-mark i:first-child { left: 8px; }
.discord-button--header .discord-cta-mark i:last-child,
.mobile-discord-cta .discord-cta-mark i:last-child { right: 8px; }
.mobile-discord-cta {
	display: none;
	gap: 10px;
	border-width: 1px 0 0;
	border-radius: 0;
}
.steps-section {
  background:
    radial-gradient(circle at 50% 0, rgba(65,69,216,.5), transparent 58%),
    linear-gradient(180deg, #171ba4, #07083a);
}
.step-card-static > div { border-color: var(--yellow); background: #080e2d; }
.site-footer { border-top-color: rgba(255,197,26,.4); background: #020305; }

/* Contact page: a focused, editable route that matches the Vault chrome. */
.contact-page { min-height: calc(100vh - var(--header-height)); background: #030509; }
.contact-hero {
	min-height: calc(100vh - var(--header-height));
	padding: clamp(54px, 7vw, 96px) 0;
	background:
		radial-gradient(circle at 78% 18%, rgba(220,168,33,.15), transparent 30rem),
		linear-gradient(120deg, rgba(237,40,45,.08), transparent 34%),
		#030509;
}
.contact-shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(430px, 1fr); align-items: center; gap: clamp(34px, 7vw, 90px); }
.contact-intro h1 { margin: 0 0 22px; font: italic 400 clamp(58px, 8vw, 112px)/.85 Impact, "Arial Narrow", Arial, sans-serif; text-transform: uppercase; text-shadow: 4px 4px 0 #151515; }
.contact-intro h1 span { color: var(--yellow); text-shadow: 4px 4px 0 #8b1014; }
.contact-intro > p:not(.hero-kicker) { max-width: 520px; color: #e6e9ee; font-size: 18px; line-height: 1.65; }
.contact-intro > a { display: inline-block; margin-top: 12px; color: var(--yellow); font-weight: 700; text-decoration: none; }
.contact-card { padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(220,168,33,.68); border-radius: 12px; background: linear-gradient(145deg, rgba(13,15,19,.98), rgba(3,4,7,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04); }
.contact-form { display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; padding: 13px 14px; color: #fff; background: #07090d; font: 16px/1.4 Arial, Helvetica, sans-serif; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--yellow); outline: 2px solid rgba(255,197,26,.26); outline-offset: 1px; }
.contact-submit { min-height: 52px; border: 1px solid #fff0a6; border-radius: 8px; color: #090909; background: linear-gradient(180deg, #ffd84e, #dca821); font: italic 400 22px/1 Impact, "Arial Narrow", Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.38); }
.contact-submit:hover, .contact-submit:focus-visible { filter: brightness(1.12); transform: translateY(-1px); }
.contact-notice { margin: 0 0 18px; padding: 13px 15px; border-radius: 6px; font-weight: 700; }
.contact-notice.is-success { border: 1px solid #55ef68; color: #8eff9b; background: rgba(30,150,48,.12); }
.contact-notice.is-error { border: 1px solid #ff6268; color: #ff9a9e; background: rgba(180,25,32,.14); }

@media (max-width: 1200px) {
	.header-inner { grid-template-columns: 320px 1fr auto; gap: 16px; }
	.social-links--header { display: none; }
	.brand { width: 320px; }
  .custom-logo-link { width: 260px; }
  .brand img, .custom-logo-link img { width: 250px; }
  .brand-copy { gap: 5px; padding-block: 12px; }
  .brand-copy b, .brand-copy em, .brand-copy small { font-size: 28px; }
  .hero-mascot { right: -2%; bottom: 10px; height: 80%; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .hero-slider { height: 720px; }
  .hero-copy { width: 58%; }
  .hero-mascot { right: 0; bottom: 22px; height: 62%; }
}
@media (max-width: 820px) {
  .header-inner { grid-template-columns: 250px 1fr auto; }
  .brand { width: 250px; }
  .custom-logo-link { width: 240px; }
  .brand img, .custom-logo-link img { width: 232px; }
  .brand-copy { gap: 4px; padding-block: 10px; }
  .brand-copy b, .brand-copy em, .brand-copy small { font-size: 21px; }
	.discord-button--header { padding-inline: 13px; }
}
@media (max-width: 700px) {
  .header-inner { grid-template-columns: minmax(205px,238px) 1fr; }
	.brand { width: 100%; }
  .hero-slider { height: clamp(610px, calc(100svh - var(--header-height) - 58px), 675px); }
  .hero-background { object-position: 55% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(1,2,5,.32), rgba(1,2,5,.04) 52%, rgba(1,2,5,.38)); }
  .hero-copy { width: 94%; padding: 17px; background: rgba(3,4,7,.93); }
  .hero-mascot { right: -2%; bottom: 42px; height: 38%; }
  .vault-track { grid-auto-columns: 84vw; padding-inline: 8vw; }
	.mobile-discord-cta { display: flex; z-index: 9999; }
	body { padding-bottom: 64px; }
	.feature-visual { height: 390px; }
	.ribbon { font-size: 18px; }
	.help-card {
		grid-template-columns: 1fr;
		grid-template-areas: "copy" "visual";
	}
	.help-copy { padding: 26px 24px 20px; text-align: center; }
	.help-title { font-size: clamp(32px, 10vw, 44px); }
	.help-title-rule { margin-inline: auto; }
	.help-visual { width: 100%; max-width: 420px; margin-inline: auto; border-left: 0; border-top: 1px solid rgba(220, 168, 33, .32); }
	.help-summary { text-align: center; }
	.help-card .hover-label { top: 48%; left: 50%; }
	.premium-waffles-panel {
		grid-template-columns: auto 1fr;
		gap: 18px;
		padding: 22px 22px 46px;
	}
	.premium-waffles-categories { grid-column: 1 / -1; }
	.premium-waffles-pop { right: 22px; bottom: 14px; }
	.contact-shell { grid-template-columns: 1fr; }
	.contact-intro { text-align: center; }
	.contact-intro > p:not(.hero-kicker) { margin-inline: auto; }
}
@media (max-width: 420px) {
  .header-inner { grid-template-columns: 194px 1fr; }
  .brand, .custom-logo-link { width: 190px; }
  .brand img, .custom-logo-link img { width: 184px; }
  .brand-copy { gap: 3px; padding-block: 9px; }
  .brand-copy b, .brand-copy em, .brand-copy small { font-size: 16px; letter-spacing: 0; }
  .hero-slider { height: clamp(600px, calc(100svh - var(--header-height) - 58px), 650px); }
  .hero-mascot { right: -3%; bottom: 42px; height: 35%; }
  .feature-visual { height: 382px; }
	.premium-waffles-panel { grid-template-columns: 1fr; padding: 22px 18px 48px; text-align: center; }
	.premium-waffles-mark { margin-inline: auto; }
	.premium-waffles-categories { justify-content: center; }
	.premium-waffles-pop { right: 12px; left: 12px; text-align: center; }
}