/*
 * Header sits at top: 32px, height: 36px → ends at 68px.
 * 80px body padding-top gives 12px breathing room below it.
 * The logo height is fixed at 36px on all screens — brand logos should
 * remain at their designed size. Only the horizontal indent scales.
 */
body {
	padding-top: 80px;
}

.div1 {
	top: 0; left: 0;
	width: 4px; height: 128px;
}

/*
 * Header banner: render the SVG at its natural 1152×36 width so the
 * GlobalBlock logo is always exactly 160px wide (its designed size).
 * Anything beyond the viewport edge is silently clipped by overflow: hidden.
 * The wrapper width only limits how far the divider line is visible —
 * it does not affect the logo, which sits at the left edge.
 */
.header-wrapper {
	position: absolute;
	top: 32px;
	left: 104px;
	width: calc(100% - 104px);
	max-width: 1152px;
	height: 36px;
	overflow: hidden;
}

.header {
	height: 100%;
	width: auto;      /* natural SVG width: 1152px */
	display: block;
	pointer-events: none;
}

/*
 * Fixed 160px width — always covers exactly the logo portion of the SVG,
 * regardless of how wide the wrapper is on any given screen.
 */
.header-logo-link {
	position: absolute;
	top: 0; left: 0;
	width: 160px;
	height: 100%;
}

/*
 * main fills all available height between header area and footer.
 * justify-content: center keeps the card vertically centred in that space.
 */
.main {
	flex-grow: 1;
	justify-content: center;
	line-height: 1.625;
	letter-spacing: -0.44px;
	padding-top: 32px;
	padding-bottom: 32px;
}

/*
 * Card: shadow order and spread match Figma exactly.
 * Top padding corrected to 48px (Figma spec).
 */
.main-div {
	position: relative;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
	margin-left: 1px;
	width: 100%;
	max-width: 768px;
	background-color: #fff;
	border: 1px solid #e5e7eb;
	padding: 48px 64px 48px 64px;
}

/* container is now in flow — card height is determined by content */
.container1 {
	position: static;
	width: 100%;
	max-width: 638px;
}

/* decorative top-right corner bracket */
.main-container {
	position: absolute; top: 0; right: 0;
	width: 64px; height: 64px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
}

/* footer logo anchor */
.footer-logo-link {
	display: flex;
	flex-shrink: 0;
}

/* ─── Responsive: tablet (≤ 1024px) ─────────────────────────────────────── */
@media screen and (max-width: 1024px) {
	.header-wrapper {
		left: 48px;
		width: calc(100% - 48px);
	}
}

/* ─── Responsive: mobile (≤ 768px) ──────────────────────────────────────── */
@media screen and (max-width: 768px) {
	.header-wrapper {
		left: 20px;
		width: calc(100% - 20px);
	}

	.main-div {
		margin-left: 0;
		padding: 32px 24px;
	}

	.container1 {
		max-width: 100%;
	}

	.main-container {
		display: none;
	}
}

/* ─── Responsive: small mobile (≤ 480px) ────────────────────────────────── */
@media screen and (max-width: 480px) {
	body {
		padding-top: 72px;   /* header still ends at 68px; 4px extra gap */
	}

	.header-wrapper {
		left: 16px;
		width: calc(100% - 16px);
	}

	.main {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.main-div {
		padding: 24px 20px;
	}
}