/* ==========================================================================
   Temple.nz
   Clear glass over a Minecraft world. Panel proportions are the client's own
   design units: a window is 116 wide, header 20, rows 15, radius 9.
   ========================================================================== */

:root {
	--gold: #e9b949;
	--gold-light: #ffe3a1;
	--gold-deep: #a8792a;

	--ink: #070809;
	--text: #fff;
	--text-2: rgba(255, 255, 255, 0.62);
	--text-3: rgba(255, 255, 255, 0.34);
	--hair: rgba(255, 255, 255, 0.11);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--shell: min(1280px, 100% - 64px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.012em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
canvas {
	display: block;
	max-width: 100%;
}

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

button,
input {
	font: inherit;
	color: inherit;
}

::selection {
	background: rgba(233, 185, 73, 0.3);
}

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 5px;
}

.defs {
	position: absolute;
	width: 0;
	height: 0;
}

/* --------------------------------------------------------------------------
   The world. Kept legible — the glass needs something worth bending.
   -------------------------------------------------------------------------- */

.world {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: url('../img/backdrop.jpg') center / cover no-repeat;
	/* Only just enough blur to take the pixel edges off. The panels stand out
	   by bending it, not by it being hidden. */
	filter: blur(2.5px);
}

.scrim {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(94deg, rgba(7, 8, 9, 0.8) 0%, rgba(7, 8, 9, 0.42) 26%, transparent 52%);
}

.grain {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A canvas is a replaced element: inset alone leaves it at its intrinsic
   300x150, so the size has to be stated. */
#scene {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 60;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}

#scene.ready {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Liquid glass.
   Each panel carries its own copy of the world, locked to the viewport so it
   lines up with the real one behind it, then displaced by the refract filter.
   The world genuinely bends at the rim instead of just blurring.
   -------------------------------------------------------------------------- */

.g {
	position: relative;
	border-radius: var(--g-r, 14px);
	background: rgba(255, 255, 255, var(--g-fill, 0.045));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		inset 0 -16px 30px -20px rgba(0, 0, 0, 0.7),
		0 22px 60px rgba(0, 0, 0, var(--g-shadow, 0.34));
	isolation: isolate;
	overflow: hidden;
}

/* the bent world */
.g::after {
	content: '';
	position: absolute;
	inset: -14%;
	z-index: 0;
	pointer-events: none;
	background-image: url('../img/backdrop.jpg');
	background-size: var(--bw, 120vw) auto;
	background-position: var(--bx, 0) var(--by, 0);
	background-repeat: no-repeat;
	filter: url(#refract) blur(var(--g-blur, 3px)) brightness(1.18) saturate(1.25);
	opacity: var(--g-refract, 0.85);
	transform: scale(1.04);
}

/* the rim: the thickness of the glass */
.g::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(145deg,
			rgba(255, 255, 255, 0.78),
			rgba(255, 227, 161, 0.24) 24%,
			rgba(255, 255, 255, 0.03) 47%,
			rgba(255, 255, 255, 0.03) 58%,
			rgba(233, 185, 73, 0.3) 83%,
			rgba(255, 255, 255, 0.55));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.g > * {
	position: relative;
	z-index: 2;
}

/* No refraction layer available (or reduced motion): fall back to a blur. */
.no-refract .g::after {
	filter: blur(14px) brightness(1.12) saturate(1.2);
}

.lit::before {
	background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
			rgba(255, 244, 214, 0.55), transparent 60%);
	background-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.98;
}

em {
	font-style: normal;
	background: linear-gradient(180deg, #fff7e4, var(--gold-light) 36%, var(--gold) 74%, #b1842a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.micro {
	margin: 0 0 22px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
}

.say {
	margin: 24px 0 0;
	max-width: 34ch;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--text-2);
}

.foot-note {
	margin: 28px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-3);
	max-width: 46ch;
}

.foot-note.center {
	margin: 34px auto 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.mast {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: var(--shell);
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 34px;
	height: 68px;
	border-bottom: 1px solid var(--hair);
}

/* Once the page moves, a floating slab of frosted glass fades in behind the
   masthead, rounded at both ends, so content scrolling underneath never runs
   into the logo and links. The hairline makes way for it. */
.mast {
	transition: border-color 0.4s var(--ease);
}

.mast::before {
	content: '';
	position: absolute;
	inset: 8px -14px;
	z-index: -1;
	border-radius: 16px;
	background: rgba(10, 11, 13, 0.62);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 0 0 1px rgba(255, 255, 255, 0.07),
		0 14px 40px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	opacity: 0;
	transform: translateY(-6px) scale(0.985);
	transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}

.mast.scrolled {
	border-bottom-color: transparent;
}

.mast.scrolled::before {
	opacity: 1;
	transform: none;
}

.brand {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-right: auto;
	min-width: 0;
}

.mark {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.mark img {
	width: 34px;
	height: 34px;
	filter: drop-shadow(0 2px 10px rgba(233, 185, 73, 0.35));
	transition: transform 0.6s var(--ease), filter 0.4s;
}

.mark:hover img {
	transform: rotate(-6deg) scale(1.04);
	filter: drop-shadow(0 2px 14px rgba(233, 185, 73, 0.55));
}

/* The wordmark is one run of text: "Temple" and ".nz" must never be split
   apart by a flex gap, so they always sit together inside this span. */
.wm {
	white-space: nowrap;
}

.wm i {
	font-style: normal;
	color: var(--gold);
}

/* Discord, as an icon beside the logo */
.dc {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: var(--text-2);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--hair);
	transition: color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.35s var(--ease);
}

.dc svg {
	width: 17px;
	height: 17px;
}

.dc:hover {
	color: #fff;
	background: rgba(88, 101, 242, 0.85);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 6px 22px rgba(88, 101, 242, 0.45);
	transform: translateY(-1px);
}

.mast nav {
	display: flex;
	gap: 26px;
}

.mast nav a {
	font-size: 13px;
	color: var(--text-2);
	transition: color 0.25s;
}

.mast nav a:hover {
	color: var(--gold);
}

/* Phones get a menu button in place of the links (see the 720px block). */
.burger {
	display: none;
	position: relative;
	flex: none;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--hair);
	cursor: pointer;
}

.burger span {
	position: absolute;
	left: 11px;
	width: 16px;
	height: 1.6px;
	border-radius: 1px;
	background: #fff;
	transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}

.burger span:first-child {
	top: 15px;
}

.burger span:last-child {
	top: 21.4px;
}

.mast.menu-open .burger span:first-child {
	top: 18.2px;
	transform: rotate(45deg);
}

.mast.menu-open .burger span:last-child {
	top: 18.2px;
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 23px;
	border: 0;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	transition: transform 0.35s var(--ease), box-shadow 0.4s var(--ease), filter 0.3s;
}

.btn:active {
	transform: scale(0.97);
}

.btn-gold {
	color: #1c1402;
	background: linear-gradient(180deg, var(--gold-light), var(--gold) 54%, #c08f2b);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 8px 28px rgba(233, 185, 73, 0.22);
}

/* Hover: no sweep. The bar lifts a pixel, its lip catches more light, and a
   soft hot spot follows the pointer across the metal (--px/--py are set in
   main.js) — like tilting a gold ingot under a lamp. */
.btn-gold:hover {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -2px 0 rgba(120, 78, 12, 0.28),
		0 0 0 1px rgba(255, 227, 161, 0.4),
		0 12px 38px rgba(233, 185, 73, 0.42);
}

.btn-gold:active {
	transform: translateY(0) scale(0.97);
}

/* The hot spot below blends, and a blend that escapes the button changes what
   a neighbouring frosted button can see behind it — "Watch it run" went dark
   the moment this one was hovered. Isolating keeps the blend in here. */
.btn-gold {
	isolation: isolate;
}

.btn-gold::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(90px circle at var(--px, 50%) var(--py, 0%),
			rgba(255, 255, 255, 0.75), rgba(255, 244, 214, 0.25) 40%, transparent 72%);
	mix-blend-mode: overlay;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.btn-gold:hover::after {
	opacity: 1;
}

@media (hover: none) {
	.btn-gold:hover {
		transform: none;
	}
}

.btn-ghost {
	background: rgba(255, 255, 255, 0.055);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.11);
}

.btn-sm {
	padding: 9px 16px;
	font-size: 13px;
	border-radius: 9px;
}

.btn-block {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Acts
   -------------------------------------------------------------------------- */

.act {
	position: relative;
	z-index: 5;
	width: var(--shell);
	margin-inline: auto;
}

.act-mark {
	min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(0, 46%) 1fr;
	align-items: center;
	padding: 120px 0 90px;
}

.rail {
	position: relative;
	padding-left: 26px;
}

/* the single hairline everything hangs off */
.rail::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: linear-gradient(180deg, var(--gold), rgba(233, 185, 73, 0.16) 40%, transparent);
}

/* "Enter the" is the quiet line; "Temple" is the headline. */
.enter span {
	display: block;
	margin: 0 0 0.35em 0.06em;
	font-size: clamp(20px, 2.1vw, 30px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--text-2);
}

/* "Temple" is set heavy and tight, the same squared-off weight as the mark
   and the wordmark in the client, so the logo and the word read as one. The
   right padding keeps the gold fill from clipping the tightened last letter. */
.enter em {
	display: block;
	padding: 0 0.06em 0.06em 0;
	font-family: 'Inter Tight', Inter, sans-serif;
	font-size: clamp(64px, 9.8vw, 146px);
	font-weight: 800;
	letter-spacing: -0.055em;
	line-height: 0.9;
}

.acts {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 38px;
}


#mark-anchor {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 76svh;
	pointer-events: none;
}

.cue {
	position: absolute;
	left: 26px;
	bottom: 34px;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--text-3);
}

.cue::after {
	content: '';
	display: block;
	width: 1px;
	height: 30px;
	margin: 10px auto 0;
	background: linear-gradient(var(--gold), transparent);
	animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {

	0%,
	100% {
		opacity: 0.2;
		transform: scaleY(0.5);
		transform-origin: top;
	}

	45% {
		opacity: 1;
		transform: scaleY(1);
		transform-origin: top;
	}
}

/* --------------------------------------------------------------------------
   ii — showcase: the video, then the menu
   -------------------------------------------------------------------------- */

.act-show {
	padding: 150px 0 60px;
}

.show-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 48px;
}

.show-head .say {
	margin: 0;
	max-width: 36ch;
}

.act-show h2,
.act-find h2,
.buy-head h2 {
	font-size: clamp(32px, 3.9vw, 54px);
}

.shot-row h3 {
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.02;
}

/* Media sits inside a glass slab; the padding is the bezel. */
.reel,
.shot {
	margin: 0;
	padding: 10px;
	--g-r: 24px;
	--g-fill: 0.05;
	--g-blur: 6px;
}

.frame {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	aspect-ratio: 16 / 9;
	background: rgba(4, 5, 7, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.frame > video,
.frame > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.reel video {
	opacity: 0;
	transition: opacity 0.8s var(--ease);
}

.reel.ready video {
	opacity: 1;
}

/* Shown only while the media file is missing. */
.empty {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-size: 13px;
	color: var(--text-3);
	background:
		radial-gradient(60% 70% at 50% 45%, rgba(233, 185, 73, 0.1), transparent 70%),
		rgba(4, 5, 7, 0.4);
}

.empty img {
	opacity: 0.55;
}

.missing .empty {
	display: flex;
}

.missing .frame > video,
.missing .frame > img {
	visibility: hidden;
}

.reel-sound {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(7, 8, 9, 0.5);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
	transition: background 0.25s, transform 0.35s var(--ease);
}

.reel-sound[hidden] {
	display: none;
}

.reel-sound:hover {
	background: rgba(233, 185, 73, 0.85);
	color: #1c1402;
	transform: scale(1.06);
}

/* The two menus, split on a diagonal. Pointing at one side slides the line
   across until that menu fills the frame. --s is the line's sideways shift;
   registering it lets it animate, and the glass image's clip and the gold
   line both follow it. */
@property --s {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 0%;
}

.compare {
	--s: 0%;
	transition: --s 0.85s var(--ease);
}

.compare[data-side='glass'] {
	--s: 78%;
}

.compare[data-side='simple'] {
	--s: -70%;
}

.cmp-glass {
	position: absolute;
	inset: 0;
	clip-path: polygon(0 0, calc(66% + var(--s)) 0, calc(26% + var(--s)) 100%, 0 100%);
}

.cmp-glass img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cmp-line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	transform: translateX(var(--s));
	filter: drop-shadow(0 0 6px rgba(233, 185, 73, 0.7));
}

.cmp-line line {
	stroke: var(--gold-light);
	stroke-width: 1.5px;
}

.cmp-tag {
	position: absolute;
	padding: 6px 11px;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(7, 8, 9, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
	transition: opacity 0.5s var(--ease);
}

.tag-glass {
	left: 14px;
	bottom: 14px;
}

.tag-simple {
	right: 14px;
	bottom: 14px;
}

.compare[data-side='glass'] .tag-simple,
.compare[data-side='simple'] .tag-glass {
	opacity: 0;
}

.shot-row {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
	gap: 64px;
	align-items: center;
	margin-top: 120px;
}

/* --------------------------------------------------------------------------
   iii — finding things
   -------------------------------------------------------------------------- */

.act-find {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
	gap: 80px;
	align-items: center;
	padding: 150px 0;
}

.lines {
	list-style: none;
	counter-reset: l;
	margin: 44px 0 0;
	padding: 0;
}

.lines li {
	counter-increment: l;
	position: relative;
	padding: 20px 0 20px 40px;
	border-top: 1px solid var(--hair);
}

.lines li:last-child {
	border-bottom: 1px solid var(--hair);
}

.lines li::before {
	content: '0' counter(l);
	position: absolute;
	left: 0;
	top: 22px;
	font-size: 11px;
	font-weight: 600;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.lines b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}

.lines span {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-2);
}

.scan {
	padding: 28px;
	--g-r: 22px;
	--g-fill: 0.05;
	--g-blur: 4px;
}

.scan-top {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 600;
}

.scan-top span {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.scan-grid {
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	gap: 3px;
	aspect-ratio: 1;
	transform: perspective(1000px) rotateX(28deg) rotateZ(-3deg);
	transform-style: preserve-3d;
}

.scan-grid i {
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s;
}

.scan-grid i.seen {
	background: rgba(255, 255, 255, 0.11);
}

.scan-grid i.hit {
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
	box-shadow: 0 0 18px rgba(233, 185, 73, 0.6);
	transform: translateZ(14px);
}

.scan-read {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--hair);
}

.scan-read .num {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}

.scan-read .lab {
	font-size: 12px;
	color: var(--text-3);
}

.scan-read .last {
	margin-left: auto;
	font-size: 12px;
	color: var(--text-2);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   iv — price
   -------------------------------------------------------------------------- */

.act-buy {
	padding: 150px 0 140px;
}

.buy-head {
	position: relative;
	padding-left: 26px;
	margin-bottom: 70px;
}

.buy-head::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: linear-gradient(180deg, var(--gold), transparent);
}

.plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	/* Equal heights, so the buttons line up whatever each plan lists (the list grows to fill). */
	align-items: stretch;
}

.plan {
	position: relative;
	padding: 34px 28px 28px;
	--g-r: 20px;
	--g-fill: 0.05;
	--g-blur: 5px;
	display: flex;
	flex-direction: column;
	transition: transform 0.6s var(--ease);
}

.plan:hover {
	transform: translateY(-5px);
}

.plan.best {
	--g-fill: 0.08;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 0 0 1px rgba(233, 185, 73, 0.3),
		0 0 60px rgba(233, 185, 73, 0.12),
		0 24px 64px rgba(0, 0, 0, 0.42);
}

.plan .anchor {
	position: absolute;
	top: 28px;
	right: 28px;
	width: 34px;
	height: 34px;
	pointer-events: none;
}

.flag {
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	color: #201703;
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
	box-shadow: 0 4px 14px rgba(233, 185, 73, 0.3);
}

.plan .pn {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 20px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
}

.plan .price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 14px 0 8px;
}

.plan .price b {
	font-size: 42px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

.plan .price span {
	font-size: 13px;
	color: var(--text-3);
}

.plan .note {
	margin: 0 0 24px;
	min-height: 38px;
	font-size: 13px;
	color: var(--text-2);
}

.plan ul {
	flex: 1;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.plan li {
	display: flex;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--text-2);
}

.plan li svg {
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	color: var(--gold);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
	position: relative;
	z-index: 5;
	width: var(--shell);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding: 28px 0 40px;
	border-top: 1px solid var(--hair);
	font-size: 12px;
	color: var(--text-3);
}

.foot-mark {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.foot-dc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 9px;
	color: var(--text-2);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--hair);
	transition: color 0.25s, background 0.25s;
}

.foot-dc:hover {
	color: #fff;
	background: rgba(88, 101, 242, 0.8);
}

.foot p {
	margin: 0 auto 0 12px;
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.sheet {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s var(--ease);
}

.sheet.open {
	opacity: 1;
	pointer-events: auto;
}

.veil {
	position: absolute;
	inset: 0;
	background: rgba(4, 5, 7, 0.66);
	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
}

.sheet-body {
	position: relative;
	width: min(900px, 100%);
	max-height: calc(100svh - 48px);
	--g-r: 22px;
	--g-fill: 0.07;
	--g-blur: 16px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	transform: translateY(16px) scale(0.99);
	/* checkout.js sets the height to fit the content, so every change of step
	   or selection resizes the sheet on this curve. */
	transition: transform 0.5s var(--ease), height 0.45s var(--ease);
}

.sheet.open .sheet-body {
	transform: none;
}

/* Each column scrolls on its own. The cap has to sit on the columns: a grid
   row grows to fit its content, so a max-height on .sheet-body alone just
   clips whatever is below the fold. */
.sheet-main,
.sheet-side {
	padding: 32px;
	max-height: calc(100svh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Sized by its content, not stretched to the sheet: while the sheet grows
   into a taller step the overflow is clipped by the sheet rather than
   flashing a scrollbar for half a second. */
.sheet-main {
	align-self: start;
}

.sheet-side {
	border-left: 1px solid var(--hair);
	background: rgba(0, 0, 0, 0.26);
}

.sheet-x {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 6;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.09);
	cursor: pointer;
	transition: background 0.25s;
}

.sheet-x:hover {
	background: rgba(255, 255, 255, 0.18);
}

.sheet-x svg {
	width: 12px;
	height: 12px;
}

.steps {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
}

.steps .st {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text-3);
}

.steps .st b {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 10.5px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.09);
	transition: all 0.35s var(--ease);
}

.steps .st.on {
	color: #fff;
}

.steps .st.on b {
	color: #201703;
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

.steps .st.done b {
	color: var(--gold);
	background: rgba(233, 185, 73, 0.16);
}

.steps .bar {
	flex: 1;
	height: 1px;
	background: var(--hair);
}

.sheet h3 {
	font-size: 22px;
	margin-bottom: 7px;
}

.sheet .sub {
	margin: 0 0 24px;
	font-size: 13.5px;
	color: var(--text-2);
}

.step {
	display: none;
}

.step.on {
	display: block;
	animation: rise 0.45s var(--ease) both;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

#plan-options {
	position: relative;
}

/* The selection itself, which slides between the plans instead of jumping. */
.opt-mark {
	position: absolute;
	inset: 0 0 auto;
	z-index: 0;
	border-radius: 13px;
	opacity: 0;
	transform-origin: center;
	background: rgba(233, 185, 73, 0.11);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.5), 0 10px 30px rgba(233, 185, 73, 0.12);
	pointer-events: none;
}

/* A squash along the way, scaled to how far it travelled. */
.opt-mark.stretch {
	animation: mark-squash 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mark-squash {

	0%,
	100% {
		scale: 1 1;
	}

	40% {
		scale: calc(1 - var(--sq, 0.05)) calc(1 + var(--sq, 0.05) * 2.4);
	}
}

.opt {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	margin-bottom: 9px;
	padding: 15px 17px;
	text-align: left;
	border: 0;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--hair);
	cursor: pointer;
	transition: all 0.3s var(--ease);
}

.opt:hover {
	background: rgba(255, 255, 255, 0.09);
}

.opt[aria-checked='true'] {
	background: transparent;
	box-shadow: none;
}

.opt .tick {
	flex: none;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
	transition: all 0.3s;
}

.opt[aria-checked='true'] .tick {
	background: var(--gold);
	box-shadow: none;
}

.opt .tick svg {
	width: 10px;
	height: 10px;
	color: #201703;
	opacity: 0;
	transition: opacity 0.25s;
}

.opt[aria-checked='true'] .tick svg {
	opacity: 1;
}

.opt .on1 {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}

.opt .on2 {
	display: block;
	font-size: 12px;
	color: var(--text-3);
}

.opt .op {
	margin-left: auto;
	flex: none;
	text-align: right;
}

.opt .op b {
	font-size: 16.5px;
	font-weight: 600;
}

.opt .op span {
	display: block;
	font-size: 11px;
	color: var(--gold);
}

.field-in {
	margin-bottom: 15px;
}

.field-in label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-2);
}

.field-in input {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 11px;
	font-size: 14px;
	outline: none;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px var(--hair);
	transition: box-shadow 0.25s, background 0.25s;
}

.field-in input::placeholder {
	color: rgba(255, 255, 255, 0.28);
}

.field-in input:focus {
	background: rgba(255, 255, 255, 0.09);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.6);
}

.field-in .hint {
	margin: 6px 0 0;
	font-size: 11px;
	color: var(--text-3);
}

.field-in .err {
	display: none;
	margin: 6px 0 0;
	font-size: 11px;
	color: #ff8a80;
}

.field-in.bad input {
	box-shadow: inset 0 0 0 1px rgba(255, 90, 90, 0.7);
}

.field-in.bad .err {
	display: block;
}

.field-in label .opt-tag {
	margin-left: 6px;
	font-weight: 400;
	color: var(--text-3);
}

/* The live Discord check under the username. */
.dc-status {
	margin: 7px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-3);
	transition: color 0.25s;
}

.dc-status.wait {
	color: var(--text-2);
}

.dc-status.ok {
	color: #8fd6a0;
}

.dc-status.ok::before {
	content: '✓ ';
}

.dc-status.miss {
	color: var(--gold-light);
}

.dc-join {
	display: inline-block;
	margin-top: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-weight: 600;
	color: #1a1305;
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
	text-decoration: none;
}

.field-in.bad .dc-status {
	display: none;
}

.sheet-actions {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.sum-t {
	margin-bottom: 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
}

.sum-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 600;
}

.sum-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	font-size: 13.5px;
	color: var(--text-2);
}

.sum-row b {
	color: #fff;
	font-weight: 500;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sum-row.total {
	margin-top: 6px;
	padding-top: 15px;
	border-top: 1px solid var(--hair);
	font-size: 16.5px;
	font-weight: 600;
	color: #fff;
}

.includes {
	list-style: none;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--hair);
	display: grid;
	gap: 8px;
	font-size: 12px;
	color: var(--text-3);
}

.includes li {
	display: flex;
	gap: 9px;
}

.includes svg {
	flex: none;
	width: 12px;
	height: 12px;
	margin-top: 2px;
	color: var(--gold);
}

.then {
	margin: 4px 0 0;
	font-size: 11.5px;
	color: var(--text-3);
	text-align: right;
}

/* ---- accepted methods, in the order summary ---- */
.accepts {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--hair);
}

.accepts .sum-t {
	margin: 0 0 12px;
}

.ac-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.ac {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 28px;
	min-width: 38px;
	padding: 0 8px;
	border-radius: 7px;
	color: rgba(255, 255, 255, 0.72);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px var(--hair);
	transition: color 0.25s, background 0.25s, box-shadow 0.25s, opacity 0.25s;
}

.ac .bi {
	width: 17px;
	height: 17px;
}

.ac.on {
	color: var(--gold-light);
	background: rgba(233, 185, 73, 0.14);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.55);
}

.ac.off {
	opacity: 0.3;
}

.ac-txt {
	font-size: 11px;
	white-space: nowrap;
}

.ac-txt .bi {
	width: 14px;
	height: 14px;
}

.ac-cap {
	margin-left: 4px;
	font-size: 11px;
	color: var(--text-3);
}

.secure {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--text-3);
}

/* ---- review step ---- */
.rv-l {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
}

.rv-l:not(:first-child) {
	margin-top: 20px;
}

/* The chosen plan, folded. The window is exactly one row tall and the list
   inside is shifted so the chosen row shows; opening grows the window to the
   whole list and slides it home, on the same curve as the sheet. */
.pick {
	position: relative;
}

.pick-win {
	overflow: hidden;
	border-radius: 13px;
	transition: height 0.45s var(--ease);
}

.pick-list {
	position: relative;
	transition: transform 0.45s var(--ease);
}

.pick .opt {
	transition: opacity 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pick:not(.open) .opt[aria-checked='false'] {
	opacity: 0;
	pointer-events: none;
}

/* Folded, the dots stand in for the tick. */
.pick:not(.open) .opt[aria-checked='true'] .tick {
	opacity: 0;
}

.pick-dots {
	position: absolute;
	left: 8px;
	top: 50%;
	z-index: 3;
	width: 28px;
	height: 34px;
	margin-top: -17px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 8px;
	color: var(--gold-light);
	background: none;
	cursor: pointer;
	transition: opacity 0.25s, background 0.25s;
}

.pick-dots:hover {
	background: rgba(255, 255, 255, 0.1);
}

.pick.open .pick-dots {
	opacity: 0;
	pointer-events: none;
}

.pms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 6px;
}

.pm {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 10px 11px;
	border: 0;
	border-radius: 10px;
	text-align: left;
	font-size: 12.5px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--hair);
	cursor: pointer;
	transition: background 0.25s, box-shadow 0.25s, opacity 0.25s;
}

.pm span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm .bi {
	flex: none;
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, 0.85);
}

.pm:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.09);
}

.pm[aria-checked='true'] {
	background: rgba(233, 185, 73, 0.14);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.6);
}

.pm[aria-checked='true'] .bi {
	color: var(--gold-light);
}

.pm:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.coins {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.coins button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px;
	border: 0;
	border-radius: 999px;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--hair);
	cursor: pointer;
	transition: background 0.25s, box-shadow 0.25s;
}

.coins .bi {
	width: 14px;
	height: 14px;
}

.coins button[aria-checked='true'] {
	background: rgba(233, 185, 73, 0.14);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.6);
	color: var(--gold-light);
}

.pm-hint {
	margin: 10px 0 0;
	font-size: 11.5px;
	color: var(--text-3);
}

.rv-acct {
	position: relative;
	margin-top: 18px;
	padding-top: 6px;
	border-top: 1px solid var(--hair);
}

.rv-acct .sum-row {
	padding: 7px 0;
	padding-right: 52px;
}

.rv-acct .sum-row b {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.edit {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-40%);
	padding: 5px 10px;
	border: 0;
	border-radius: 8px;
	font-size: 11.5px;
	color: var(--gold);
	background: rgba(233, 185, 73, 0.1);
	cursor: pointer;
	transition: background 0.25s;
}

.edit:hover {
	background: rgba(233, 185, 73, 0.2);
}

.notice {
	margin: 0 0 18px;
	padding: 13px 15px;
	border-radius: 11px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-2);
	background: rgba(233, 185, 73, 0.09);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.22);
}

.notice b {
	display: block;
	margin-bottom: 3px;
	color: var(--gold-light);
}

.notice code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The payment page couldn't be opened. Sits under the total on the review step. */
.notice.bad {
	margin: 14px 0 0;
	background: rgba(255, 90, 90, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 90, 90, 0.3);
}

.notice.bad b {
	color: #ff8a80;
}

/* The license key on the thank-you step. */
.key-slot {
	margin: 14px 0 4px;
}

.key-wait {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text-2);
}

.spin {
	width: 13px;
	height: 13px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--gold);
	border-radius: 50%;
	animation: keyspin 0.7s linear infinite;
}

@keyframes keyspin {
	to {
		transform: rotate(360deg);
	}
}

.key-label {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
}

.key-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.key {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	white-space: nowrap;
	padding: 11px 13px;
	border-radius: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--gold-light);
	background: rgba(233, 185, 73, 0.09);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.3);
}

.key-copy {
	flex: none;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	background: var(--gold);
	cursor: pointer;
	transition: background 0.2s;
}

.key-copy:hover {
	background: var(--gold-light);
}

.key-note {
	margin: 9px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-3);
}

.promo {
	margin: 14px 0 4px;
}

.promo-row {
	display: flex;
	gap: 8px;
}

.promo-in {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--hair);
}

.promo-in::placeholder {
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-3);
}

.promo-in:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.5);
}

.promo-apply {
	flex: none;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px var(--hair);
	cursor: pointer;
	transition: background 0.2s;
}

.promo-apply:hover {
	background: rgba(255, 255, 255, 0.13);
}

.promo-on {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 12.5px;
	color: var(--gold-light);
	background: rgba(233, 185, 73, 0.12);
	box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.4);
}

.promo-x {
	flex: none;
	border: 0;
	background: none;
	font-size: 11.5px;
	color: var(--text-2);
	cursor: pointer;
}

.promo-x:hover {
	color: var(--text);
}

.promo-msg {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: #ff8a80;
}

.sum-row.total s {
	color: var(--text-3);
	font-weight: 500;
	margin-right: 6px;
}

.dl-loader {
	margin: 14px 0 2px;
}

.pay-terms {
	margin: 14px 0 0;
	font-size: 11px;
	line-height: 1.55;
	color: var(--text-3);
}

.pay-terms .inline {
	color: var(--text-2);
}

.foot-terms {
	color: var(--text-3);
	font-size: inherit;
	text-decoration: none;
}

.foot-terms:hover {
	color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
	.spin {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Reveal — drifts in like it's suspended in liquid
   -------------------------------------------------------------------------- */

.rv {
	opacity: 0;
	transform: translateY(30px) scale(0.985);
	transition: opacity 1s var(--ease), transform 1.2s cubic-bezier(0.16, 1.1, 0.3, 1);
}

.rv.in {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Big screens: let the layout breathe instead of sitting in a 1280 strip. */
@media (min-width: 1700px) {
	:root {
		--shell: min(1520px, 100% - 120px);
	}
}

@media (max-width: 1180px) {
	:root {
		--shell: min(1280px, 100% - 40px);
	}

	.act-find {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.scan {
		max-width: 520px;
	}

	.plan {
		padding: 30px 22px 22px;
	}

	.plan .price b {
		font-size: 36px;
	}
}

@media (max-width: 960px) {
	.act-mark {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-top: 96px;
	}

	#mark-anchor {
		order: -1;
		max-height: 34svh;
	}

	.cue {
		display: none;
	}

	.show-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.show-head .say {
		padding-left: 26px;
	}

	.shot-row {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-top: 90px;
	}

	.plans {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin-inline: auto;
		gap: 22px;
	}

	.sheet {
		padding: 16px;
	}

	.sheet-body {
		grid-template-columns: 1fr;
		overflow-y: auto;
		max-height: calc(100svh - 32px);
	}

	/* Stacked: the whole sheet scrolls as one instead. */
	.sheet-main,
	.sheet-side {
		max-height: none;
		overflow: visible;
	}

	.sheet-side {
		border-left: 0;
		border-top: 1px solid var(--hair);
	}
}

@media (max-width: 720px) {
	:root {
		--shell: calc(100% - 32px);
	}

	.mast {
		gap: 14px;
		height: 60px;
	}

	/* The links drop down from the menu button as a small glass panel. */
	.burger {
		display: block;
	}

	.mast nav {
		position: absolute;
		top: calc(100% - 2px);
		right: -8px;
		width: min(240px, calc(100vw - 32px));
		flex-direction: column;
		gap: 2px;
		padding: 8px;
		border-radius: 14px;
		background: rgba(10, 11, 13, 0.82);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.14),
			inset 0 0 0 1px rgba(255, 255, 255, 0.08),
			0 18px 44px rgba(0, 0, 0, 0.45);
		backdrop-filter: blur(22px) saturate(140%);
		-webkit-backdrop-filter: blur(22px) saturate(140%);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px) scale(0.98);
		transform-origin: top right;
		transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s;
	}

	.mast.menu-open nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
	}

	.mast nav a {
		padding: 12px 14px;
		border-radius: 9px;
		font-size: 15px;
		color: #fff;
	}

	.mast nav a:hover,
	.mast nav a[aria-current] {
		color: var(--gold);
		background: rgba(255, 255, 255, 0.05);
	}

	/* An open menu needs the bar's backing even at the top of the page. */
	.mast.menu-open::before {
		opacity: 1;
		transform: none;
	}

	.tag-glass,
	.tag-simple {
		bottom: 9px;
		padding: 5px 9px;
		font-size: 10.5px;
	}

	.tag-glass {
		left: 9px;
	}

	.tag-simple {
		right: 9px;
	}

	.act-show,
	.act-find,
	.act-buy {
		padding: 96px 0;
	}

	.buy-head {
		margin-bottom: 44px;
	}

	.mast::before {
		inset: 7px -8px;
		border-radius: 14px;
	}

	.reel,
	.shot {
		padding: 6px;
		--g-r: 16px;
	}

	.frame {
		border-radius: 11px;
	}

	.foot {
		gap: 14px;
	}

	.foot p {
		margin: 0;
		flex-basis: 100%;
		order: 3;
	}

	.sheet {
		padding: 0;
		place-items: end stretch;
	}

	/* A bottom sheet on phones: full width, rounded on top only. */
	.sheet-body {
		width: 100%;
		max-height: 92svh;
		--g-r: 22px 22px 0 0;
	}

	.sheet-main,
	.sheet-side {
		padding: 24px 18px;
	}

	.sheet-main {
		padding-top: 22px;
	}

	.steps {
		padding-right: 36px;
	}

	.steps .st {
		font-size: 11px;
		gap: 6px;
	}
}

@media (max-width: 440px) {
	.mark {
		font-size: 15px;
		gap: 8px;
	}

	.mark img {
		width: 28px;
		height: 28px;
	}

	.brand {
		gap: 10px;
	}

	.dc {
		width: 30px;
		height: 30px;
	}

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

/* Short, wide windows (laptops at 1366x768 and the like): the opening
   shouldn't need a scroll to reach its own buttons. */
@media (min-width: 961px) and (max-height: 820px) {
	.act-mark {
		padding: 96px 0 60px;
	}

	.enter em {
		font-size: clamp(56px, 7.8vw, 118px);
	}

	.cue {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.rv {
		opacity: 1;
		transform: none;
	}
}

.inline:hover {
	text-decoration-color: var(--gold);
}

.inline {
	color: var(--gold);
	text-decoration: underline;
	text-decoration-color: rgba(233, 185, 73, 0.4);
	text-underline-offset: 3px;
}