@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/*
TODO: Make actual dark mode support.
*/
:root {
	//Vars for general reference.
	--Palette_Text_Dark: #000000;
	--Palette_Text_Light: #ffffff;
	--Palette_Main_Dark: #010026ff;
	--Palette_Main_Light: #16003eff;
	
	--Palette_HeaderBG_G1: #a15904ff;
	--Palette_HeaderBG_G2: #16003eff;
	--Palette_MainBG_G1: var(--Palette_HeaderBG_G2);
	--Palette_MainBG_G2: #010026ff;
	
	background-color: var(--Palette_MainBG_G2);
	color: var(--Palette_Text_Light);
	border-color: var(--Palette_Main_Light);
}

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

/* Reset default appearance */
textarea,
select,
input,
progress {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Set the font globally */
html {
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body {
	margin: 0px;
	line-height: 1.25;
	position: relative;
	overflow-x: clip;
}
.invisBG-Button {
	background-color: transparent;
	border: solid 0px transparent;
}
.LightBG-Button {
	background-color: var(--Palette_Main_Light);
}
.roundButton {
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 1rem;
}
.TextLight {
	color: var(--Palette_Text_Light);
}
.TextDark {
	color: var(--Palette_Text_Dark);
}
.fixed-top {
	position: sticky;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
}
.fixed-bottom {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
}
/* Moon — wrapper clips to show only the top arc */
#MoonWrap {
	width: 100%;
	height: 18vw;
	overflow: hidden;
	pointer-events: none;
	position: relative;
	z-index: -1;
	pointer-events: none;
}
#MoonDecor {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90vw;
	pointer-events: none;
}
#MoonDecor img { width: 100%; display: block; }

#BGParallaxBack,
#BGParallaxFront {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 600%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1;
	pointer-events: none;
	will-change: transform;
}
#BGParallaxBack  { background-image: url(/assets/images/StarsBack.svg); }
#BGParallaxFront { background-image: url(/assets/images/StarsFront.svg); }

/*
 * Sun — absolute inside the header.
 * top: -38% pushes the centre above the page top (off-screen, not clipped).
 * The bottom arc sits fully within the header's min-height: 48vw.
 * overflow: visible on .SiteHeader means nothing gets cut off.
 */
#SunDecor {
	position: absolute;
	/* Larger sun to match the moon's scale */
	width: clamp(1200px, 200vh, 2400px);
	/* Push 65% above the top so only the lower arc is visible */
	top: calc(clamp(1200px, 200vh, 2400px) * -0.6);
	left: 50%;
	transform: translateX(calc(-50% + 2%));
	pointer-events: none;
	user-select: none;
	z-index: 0;
	/* Screen blend lets the amber gradient bleed through the sun's dark edges */
	mix-blend-mode: screen;
}
#SunDecor img { width: 100%; display: block; }

.SiteContent {
	background: transparent;
	min-height: 512px;
	margin: 8px;
}

.SiteHeader {
	position: relative;
	z-index: 10;
	overflow: visible;
	/* Tall enough to fit the visible bottom half of the big sun */
	height: clamp(420px, 65vh, 720px);
	/* Gradient fades to transparent at the bottom so the starry background
	   bleeds through naturally — no hard edge. */
	background: linear-gradient(
		180deg,
		rgba(161, 89, 4, 0.45) 0%,
		rgba(22, 0, 62, 0.35) 60%,
		rgba(22, 0, 62, 0.18) 80%,
		rgba(1, 0, 38, 0.06) 92%,
		transparent 100%
	);
	
	border: transparent 2px var(--Palette_Text_Dark);
	border-right-width: 0;
	border-left-width: 0;
	border-top-width: 0;
}
.SiteHeader > .SiteHeader-Buttons-Container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* z-index intentionally omitted. An explicit z-index on a positioned element
	   creates an implicit stacking context, which traps children's blend modes so
	   they composite against this container's own transparent background (= black)
	   rather than the sun behind it — making the difference blend useless.
	   Without z-index the element is z-index: auto, which does NOT create a
	   stacking context, so Logo/Lang/DisplayName's mix-blend-mode:difference
	   composites against the full SiteHeader backdrop (gradient + sun glow).
	   Painting order is still correct: both #SunDecor (z-index:0) and this
	   container (z-index:auto) are in the same stacking phase; source order
	   puts the container after the sun, so it renders on top without needing
	   an explicit z-index. */
	/* 3-column grid: logo | nav links | language — nav is truly centred */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 60px;
	padding: 0 1.5rem;
}
.SiteHeader-Logo {
	color: #ffffff;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	justify-self: start;
	/* Composites white text against the full backdrop (sun + sky).
	   Stays near-white over dark sky; darkens to a contrasting colour over the sun. */
	mix-blend-mode: difference;
}
.SiteHeader-Nav {
	display: flex;
	gap: 2rem;
	align-items: center;
}
.SiteHeader-Nav a {
	color: #000000;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	opacity: 0.9;
	transition: opacity 0.2s;
}
.SiteHeader-Nav a:hover { opacity: 1; }
.SiteHeader-Lang {
	color: #ffffff;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	opacity: 0.9;
	justify-self: end;
	transition: opacity 0.2s;
}
.SiteHeader-Lang:hover { opacity: 0.7; }
.SiteHeader-Lang {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 0;
}
.Lang-Text { display: none; }
.Lang-Flag { width: 22px; height: auto; border-radius: 2px; flex-shrink: 0; }
.SiteHeader-Right {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-self: end;
}
.SiteHeader-DisplayName {
	color: #ffffff;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	opacity: 0.9;
	letter-spacing: 0.04em;
	transition: opacity 0.2s;
	mix-blend-mode: difference;
}
.SiteHeader-DisplayName:hover { opacity: 1; }

footer { position: relative; }
.SiteFooter {
	background-color: transparent;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	/* No z-index here on purpose: z-index + position would create a stacking context
	   that isolates children's blend modes, making them composite against this
	   container's own transparent background (= black) rather than against the moon.
	   Without an explicit z-index the element stays above #MoonWrap (z-index:-1)
	   in normal paint order, but does NOT create an isolation barrier, so
	   mix-blend-mode: difference on the text children composites against the moon. */
	border: none;
	padding-bottom: 2rem;
}
.Footer-Brand { text-align: center; padding: 1rem 0 0.5rem; }
.Footer-Logo {
	font-size: clamp(2rem, 6vw, 56px);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #ffffff;
	/* white on white moon → inverts to black; white on dark sky → stays near-white */
	mix-blend-mode: difference;
}
.Footer-Dot {
	font-size: clamp(2rem, 6vw, 56px);
	font-weight: 700;
	color: #ffffff;
	mix-blend-mode: difference;
}
.Footer-Bottom {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem 3rem 0;
	gap: 2rem;
	flex-wrap: wrap;
}
.Footer-Socials { display: flex; flex-direction: column; gap: 0.7rem; }
.Footer-Socials-Label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; color: #ffffff; mix-blend-mode: difference; }
.Footer-Social-Icons { display: flex; gap: 0.6rem; align-items: center; }
.Social-Icon {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 8px;
	background: #ffffff;
	color: #16003e;
	text-decoration: none;
	transition: opacity 0.2s;
}
.Social-Icon:hover { opacity: 0.8; }
.Social-Icon svg { width: 18px; height: 18px; }
.Footer-Links { display: flex; gap: 3rem; flex-wrap: wrap; }
.Footer-Link-Col { display: flex; flex-direction: column; gap: 0.4rem; }
.Footer-Link-Col a {
	color: #ffffff;
	text-decoration: none;
	font-size: 0.85rem;
	opacity: 0.85;
	transition: opacity 0.2s;
	mix-blend-mode: difference;
}
.Footer-Link-Col a:hover { opacity: 1; }

/* ── Square glass-effect stack (Open to Anyone / Your Space / Streaming) ── */
.Sq-Stack {
	position: relative;
	width: 100%;
}
.Sq-Rect {
	position: absolute;
	width: 100%;
	z-index: 0;
}
.Sq-Offset-Right { right: 2%; top: -3%; }
.Sq-Offset-Left  { left: -8%; top: 8%; }
.Sq-BG { width: 100%; height: auto; display: block; }
.Sq-Border {
	position: absolute;
	left: 7.6%; top: 13.3%; width: 84.8%;
	height: auto; display: block; pointer-events: none;
}
.Sq-Img {
	position: relative;
	z-index: 2;
	width: 88%;
	height: auto;
	display: block;
	border-radius: 6px;
}
.Sq-Stream .Sq-Rect { top: -10%; }
.Sq-Stream .Sq-Border { left: 7.55%; top: 13.3%; width: 84.9%; }
.Sq-Yours .Sq-Img { transform: translateX(12%); }
.Sq-Yours .Sq-Border { left: 7.7%; top: 13.2%; width: 84.9%; }
.Sq-Yours .Sq-Rect { width: 104%; left: -2%; top: -12%; }

/* ── Hero ─────────────────────────────────────────────── */
.Hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 3rem;
	overflow: hidden;
}
.Hero-Animation {
	width: min(680px, 90%);
	pointer-events: none;
	user-select: none;
	margin-bottom: -30px; /* pull stage up under the animation */
}
.Hero-Animation img { width: 100%; display: block; }

/* Three-column stage: [left box] [title] [right boxes] */
.Hero-Stage {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	width: min(860px, 92%);
}
.Mockup {
	background-color: #245393; /* matches SVG fill */
	border-radius: 5px;
	flex-shrink: 0;
}
/* Left box: tall, ~23% of stage width */
.Mockup-Left {
	width: 180px;
	height: 240px;
	align-self: flex-start;
}
/* Right column holds the two staggered boxes */
.Hero-Right {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-self: flex-start;
	padding-top: 0;
}
/* Right-top: taller, sits higher */
.Mockup-RightTop {
	width: 115px;
	height: 200px;
}
/* Right-bot: shorter, pushed down via margin to stagger */
.Mockup-RightBot {
	width: 115px;
	height: 145px;
	margin-top: 20px;
}
/* Centre: title floats between the box groups */
.Hero-Center {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 240px; /* match left box height */
}
.Hero-Title {
	/* 40pt = 53.33px at 96dpi */
	font-size: clamp(1.8rem, 5vw, 53.33px);
	font-weight: 700;
	line-height: 1.15;
	text-align: left;
	letter-spacing: 0.18em;
	word-spacing: 0.25em;
}
.Hero-Title-L1,
.Hero-Title-L2 { display: block; }
.Hero-Title-L2 { padding-left: 1.2em; }
.Hero-Buttons {
	display: flex;
	gap: 1.2rem;
	margin-top: 2rem;
	flex-wrap: wrap;
	justify-content: center;
}
/* DOWNLOAD: solid light button (matches buttonplain.svg style) */
.Btn-Download {
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.8rem 2.8rem;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	background: #f0f1ef;
	color: #000;
	border: none;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Open in Browser */
.Btn-Browser {
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.8rem 2.8rem;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	background: #fffbfb;
	color: #000;
	border: none;
}

/* ── Multiple Windows stacked layout ─────────────────── */
.Feature-Windows-Wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}
.Feature-Windows-Title {
	text-align: center;
}
.Windows-Stack {
	position: relative;
	width: 100%;
	height: 360px;
	overflow: visible;
	margin-left: -30%;
}
/* Wrapper positions the rectangle — BG and border share the same box */
.Windows-Rect {
	position: absolute;
	width: 100%;
	top: 0%;
	left: 0%;
	z-index: 0;
}
.Windows-BG {
	width: 100%;
	height: auto;
	display: block;
}
/* Border is offset from BG by the difference in their Inkscape canvas origins:
   9.33 doc-units right and 9.34 down, at 3.78px/unit = ~35px.
   As % of BG natural size (251.87 x 405.24px): left=14%, top=8.7%, width=72% */
.Windows-Border {
	position: absolute;
	left: 14%;
	top: 8.7%;
	width: 72%;
	height: auto;
	display: block;
	pointer-events: none;
}
.Windows-Img {
	position: absolute;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
/* chat_main — left sidebar, sits at the back-left */
.Windows-Left {
	width: 75%;
	left: -30%;
	top: 32%;
	z-index: 2;
}
/* chat_gen — #General channel, front and centre */
.Windows-Center {
	width: 85%;
	left: 20%;
	top: 100%;
	z-index: 3;
}
/* chat_pets — #Pet Pics, right side */
.Windows-Right {
	width: 58%;
	right: -20%;
	top: 28%;
	z-index: 2;
}

/* Space Management rectangle — same layered SVG treatment as Windows-Rect */
.SM-Rect {
	position: relative;
	width: 100%;
	transform: translateX(30%);
}
.SM-Rect .Windows-BG {
	width: 100%;
	height: auto;
	display: block;
}
.SM-Rect .Windows-Border {
	position: absolute;
	left: 14%;
	top: 8.7%;
	width: 72%;
	height: auto;
	display: block;
	pointer-events: none;
}
.SM-Panel {
	position: absolute;
	width: 120%;
	left: -40%;
	top: 18%;
	z-index: 2;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

/* ── Features ─────────────────────────────────────────── */
.Features {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 4rem 4% 6rem;
	max-width: 1200px;
	margin: 0 auto;
}
/* Progressively increasing spacing between feature sections */
.Feature-Row:nth-child(1)  { margin-top: 6rem; }
.Feature-Card-Wrap         { margin-top: 32rem; }
.Feature-Row:nth-child(3)  { margin-top: 10rem; }
.Feature-Row:nth-child(4)  { margin-top: 12rem; }
.Feature-Row:nth-child(5)  { margin-top: 14rem; }
.Feature-Row:nth-child(6)  { margin-top: 16rem; }
.Feature-Row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 3rem;
}
/* Flip: swap column order */
.Feature-Row-Flip .Feature-Left { order: 2; }
.Feature-Row-Flip .Feature-Text  { order: 1; }

/* Left column: title stacked above the asset image */
.Feature-Left {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.Feature-Asset {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
/* Square assets keep 1:1 ratio */
.Feature-Asset-Square {
	max-width: 260px;
}
/* Panel asset — fills its column without overflowing into text */
.Feature-Asset-Panel {
	width: 100%;
	height: auto;
	border-radius: 6px;
}
/* Smaller variant for images that need to be toned down */
.Feature-Asset-Sm {
	width: 75%;
}
/* Larger variant — overflows column slightly for emphasis */
.Feature-Asset-Lg {
	width: 130%;
}
/* Blank white placeholder box */
.Feature-Placeholder {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #f0f1ef;
	border-radius: 6px;
}

.Feature-Title {
	/* 22pt = 29.33px | normal weight | 0.5mm stroke = 1.89px */
	font-size: clamp(1.1rem, 3vw, 29.33px);
	font-weight: 400;
	line-height: 1.25;
	margin-bottom: 0.4rem;
	-webkit-text-stroke: 1.89px currentColor;
}
.Feature-Text p,
.Feature-Text ul {
	/* 18pt = 24px | normal weight | 0.2mm stroke = 0.76px */
	font-size: clamp(0.9rem, 2.5vw, 24px);
	font-weight: 400;
	line-height: 1.25;
	-webkit-text-stroke: 0.76px currentColor;
}
.Feature-Text li { list-style: none; }

/* Stellar Customization centred white card */
.Feature-Card-Wrap {
	display: flex;
	justify-content: center;
}
.Feature-Card {
	background: transparent;
	color: #ffffff;
	border-radius: 0;
	padding: 1.4rem 1.8rem 1.6rem;
	max-width: 320px;
	text-align: center;
}
/* "Stellar Customization" — 22pt, no stroke */
.Feature-Title-Dark {
	font-size: clamp(1.1rem, 3vw, 29.33px);
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
	-webkit-text-stroke: 0;
}
/* "Upload your own emojis..." — 18pt, no stroke */
.Feature-Card p {
	font-size: clamp(0.9rem, 2.5vw, 24px);
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
	-webkit-text-stroke: 0;
}
.Feature-Card-Inner {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin: 0.8rem 0 1rem;
}
.Emoji-Img { width: 100%; max-width: 260px; height: auto; display: block; border-radius: 6px; }
/* Blue screenshot placeholder inside the card */
.Card-Screenshot {
	width: 110px;
	height: 100px;
	background: #245393;
	border-radius: 4px;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   SHARED FORM PAGE STYLES (login, signup, contact us)
───────────────────────────────────────────────────────── */
.account-login-container,
.account-signup-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3rem 1.5rem;
	max-width: 560px;
	margin: 0 auto;
	gap: 1.5rem;
}
/* Title */
.login-title,
.signup-title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	margin: 0 0 1rem;
}
/* Field groups — full width */
.login-field-header,  .signup-field-header  { font-size: 1rem; font-weight: 700; margin: 0 0 0.25rem; width: 100%; }
.login-field-info,    .signup-field-info    { font-size: 0.85rem; opacity: 0.7; margin: 0 0 0.4rem; width: 100%; }
.login-field,         .signup-field         {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08);
	color: inherit;
	font-family: inherit;
	font-size: 0.95rem;
}
.login-field-errors,  .signup-field-errors  { font-size: 0.8rem; color: #ff6b6b; margin-top: 0.25rem; width: 100%; }
/* Password reset notice */
.login-reset-notice {
	text-align: center;
	font-size: 0.85rem;
	opacity: 0.75;
	max-width: 320px;
	margin: 0 auto;
	line-height: 1.8;
}
/* Status messages */
.login-widget-status-message { font-size: 0.9rem; text-align: center; }
/* Submit buttons */
.login-button-login,
.signup-button-create-account {
	padding: 0.75rem 3rem;
	border-radius: 6px;
	border: none;
	background: #f0f1ef;
	color: #000;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.2s;
	margin-top: 0.5rem;
}
.login-button-login:hover,
.signup-button-create-account:hover { opacity: 0.85; }

/* ─────────────────────────────────────────────────────────
   CONTACT US PAGE
───────────────────────────────────────────────────────── */
.contactUsForm-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3rem 1.5rem;
}
.contactUsForm-PageHeader {
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 2rem;
	text-align: center;
}
.contactUsForm-FORMCONTAINER {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	max-width: 560px;
}
.contactUsForm-FORM-FIELD-HEADER {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.contactUsForm-FORM-FIELD-INFO {
	font-size: 0.85rem;
	opacity: 0.7;
	margin: 0 0 0.4rem;
}
.contactUsForm-FORM-FIELD-INPUT,
.contactUsForm-FORM-FIELD-INPUT textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08);
	color: inherit;
	font-family: inherit;
	font-size: 0.95rem;
	resize: vertical;
}
.contactUsForm-FORM-FIELD-ERRORS {
	font-size: 0.8rem;
	color: #ff6b6b;
	margin-top: 0.25rem;
}
.contactUsForm-FORM-STATUS {
	text-align: center;
	font-size: 0.9rem;
}
.contactUsForm-SUBMITBUTTON {
	align-self: center;
	padding: 0.75rem 3rem;
	border-radius: 6px;
	border: none;
	background: #f0f1ef;
	color: #000;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.2s;
}
.contactUsForm-SUBMITBUTTON:hover { opacity: 0.85; }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — tablet / narrow desktop  (≤ 700 px)
───────────────────────────────────────────────────────── */
@media (max-width: 700px) {

	/* ── Hero stage ── */
	.Hero-Stage { flex-direction: column; align-items: center; }
	.Hero-Right  { flex-direction: row; }
	.Hero-Center { height: auto; padding: 1rem 0; }
	.Mockup-Left    { width: 140px; height: 180px; }
	.Mockup-RightTop { width: 90px; height: 150px; }
	.Mockup-RightBot { width: 90px; height: 110px; margin-top: 0; }

	/* ── Feature grid → single column ── */
	.Feature-Row, .Feature-Row-Flip { grid-template-columns: 1fr; }

	/* Dissolve Feature-Left so its children (title, image) become direct grid
	   items. This lets us order title, description, and image independently
	   regardless of which container the title lives in. */
	.Feature-Row .Feature-Left,
	.Feature-Row-Flip .Feature-Left { display: contents; }

	/* title first → description second → image last */
	.Feature-Left > .Feature-Title { order: -2; }
	.Feature-Text                   { order: -1; }
	/* Image wrappers keep default order: 0 so they land after the text. */

	/* Override the inline transform on the Space Management text block —
	   it translates the div off-screen once the grid collapses to 1 column.
	   Also re-assert order: -1 at 0,2,0 specificity to beat the desktop
	   .Feature-Row-Flip .Feature-Text { order: 1 } rule. */
	.Feature-Row-Flip .Feature-Text { transform: none !important; order: -1; }

	/* ── Shrink the enormous vertical gaps between features ── */
	.Feature-Row:nth-child(1) { margin-top: 2rem; }
	.Feature-Card-Wrap        { margin-top: 5rem; }
	.Feature-Row:nth-child(3) { margin-top: 3rem; }
	.Feature-Row:nth-child(4) { margin-top: 3rem; }
	.Feature-Row:nth-child(5) { margin-top: 4rem; }
	.Feature-Row:nth-child(6) { margin-top: 4rem; }

	/* ── Windows stack: hide the overlapping windows; show only the
	      centre screenshot so nothing bleeds off-screen ── */
	.Windows-Stack {
		height: auto;
		margin-left: 0;
		overflow: visible;
	}
	.Windows-Rect  { display: none; }
	.Windows-Left,
	.Windows-Right { display: none; }
	.Windows-Center {
		position: relative;
		width: 100%;
		left: auto;
		top: auto;
		z-index: 1;
		box-shadow: none;
	}

	/* ── Space Management: remove the horizontal shift that causes overflow ── */
	.SM-Rect { transform: none; }
	.SM-Panel {
		width: 100%;
		left: 0;
		top: 8%;
	}

	/* ── Square glass stacks: neutralise offsets that would clip/overflow ── */
	.Sq-Offset-Right { right: 0; top: 0; }
	.Sq-Offset-Left  { left: 0;  top: 0; }
	.Sq-Yours .Sq-Img  { transform: none; }
	.Sq-Yours .Sq-Rect { width: 100%; left: 0; top: 0; }

	/* ── Footer: larger moon, footer overlays it like desktop ── */
	#MoonWrap  { height: 55vw; }
	#MoonDecor { width: 140vw; }
	.SiteFooter {
		position: absolute;
		bottom: 0;
	}
	.Footer-Bottom {
		flex-direction: column;
		align-items: flex-start;
		padding: 1rem 1.5rem 0;
		gap: 1.5rem;
	}
	.Footer-Links { gap: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — mobile  (≤ 480 px)
───────────────────────────────────────────────────────── */
@media (max-width: 480px) {

	/* ── Header: collapse from 3-col single row → 2-row layout
	      Row 1: Logo (left)  |  Lang / DisplayName (right)
	      Row 2: Nav links (full width, centred) ── */
	.SiteHeader {
		height: clamp(300px, 50vh, 420px);
	}
	/* Match base specificity (.SiteHeader > .SiteHeader-Buttons-Container = 0,2,0)
	   so grid-template-columns is actually overridden on mobile */
	.SiteHeader > .SiteHeader-Buttons-Container {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		height: auto;
		padding: 0.75rem 1rem;
		gap: 0.3rem 0.5rem;
		/* No backdrop — text goes black to read against the sun */
	}
	.SiteHeader-Logo        { grid-column: 1; grid-row: 1; color: #000000; mix-blend-mode: normal; }
	.SiteHeader-DisplayName { font-weight: 700; color: #000000; mix-blend-mode: normal; font-size: 0.8rem; }
	.SiteHeader-Right {
		grid-column: 2; grid-row: 1;
		justify-self: end;
	}
	/* unauthenticated: the lone Language link */
	.SiteHeader-Lang  {
		grid-column: 2; grid-row: 1;
		justify-self: end;
	}
	.SiteHeader-Nav {
		grid-column: 1 / -1;
		grid-row: 2;
		gap: 1rem;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom: 0.4rem;
	}
	/* Nav links: black text, no backdrop needed */
	.SiteHeader-Nav a { color: #000000; font-size: 0.8rem; }

	/* ── Language: hide text, show flag image in a small bubble ── */
	.Lang-Text { display: none; }
	.SiteHeader-Lang {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.25);
		justify-content: center;
		padding: 0;
	}
	.Lang-Flag { width: 22px; }

	/* ── Hero ── */
	.Hero-Animation { width: min(340px, 90%); }
	.Hero-Title { letter-spacing: 0.1em; }

	/* ── Features: more breathing room between sections ── */
	.Features { padding: 1.5rem 4% 3rem; }
	.Feature-Row, .Feature-Row-Flip { row-gap: 1.5rem; }
	.Feature-Row:nth-child(1) { margin-top: 3rem; }
	.Feature-Row:nth-child(3) { margin-top: 8rem; }
	.Feature-Row:nth-child(4) { margin-top: 8rem; }
	.Feature-Row:nth-child(5) { margin-top: 8rem; }
	.Feature-Row:nth-child(6) { margin-top: 8rem; }
	.Feature-Card-Wrap        { margin-top: 8rem; }

	/* ── Footer: 3-column links + centred brand ── */
	.Footer-Brand    { width: 100%; text-align: center; }
	.Footer-Links    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; width: 100%; }
	.Footer-Social-Icons { flex-wrap: wrap; }
	.Footer-Bottom   { padding: 0.75rem 1rem 0; }
}