:root {
	color-scheme: light;
	--canvas: #f3f3f5;
	--surface: #ffffff;
	--ink: #1b1b21;
	--muted: #5d5d67;
	--border: #dedee3;
	--accent: #059669;
	--accent-soft: #ecfdf5;
	--shadow: 0 20px 60px rgb(27 27 33 / 8%);
	font-family: "Google Sans Flex", "Google Sans", "Helvetica Neue", Roboto, system-ui,
		-apple-system, "Segoe UI", Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	background: var(--canvas);
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	margin: 0;
	color: var(--ink);
	background:
		radial-gradient(circle at 10% 0%, rgb(5 150 105 / 9%), transparent 32rem),
		var(--canvas);
	font-size: 16px;
	line-height: 1.65;
}

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 2px;
}

a:focus-visible {
	outline: 3px solid rgb(5 150 105 / 25%);
	outline-offset: 4px;
	border-radius: 4px;
}

.site-shell {
	width: min(100% - 32px, 960px);
	margin: 0 auto;
	padding: 32px 0 56px;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.brand-link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--ink);
	text-decoration: none;
}

.brand-link img {
	display: block;
	width: 190px;
	height: auto;
}

.brand-divider {
	width: 1px;
	height: 32px;
	background: var(--border);
}

.brand-product {
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-nav a {
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--ink);
	background: var(--surface);
}

.document {
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.document-header {
	padding: clamp(32px, 7vw, 64px);
	border-bottom: 1px solid var(--border);
	background: linear-gradient(140deg, #ffffff 30%, var(--accent-soft));
}

.eyebrow {
	margin: 0 0 14px;
	color: var(--accent);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

h1,
h2 {
	letter-spacing: -0.035em;
	line-height: 1.18;
}

h1 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(36px, 7vw, 58px);
	font-weight: 680;
}

.lede {
	max-width: 680px;
	margin: 20px 0 0;
	color: var(--muted);
	font-size: clamp(17px, 2.3vw, 20px);
}

.effective-date {
	margin: 24px 0 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
}

.document-body {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(32px, 7vw, 64px);
}

.document-body section + section {
	margin-top: 42px;
	padding-top: 42px;
	border-top: 1px solid var(--border);
}

h2 {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 680;
}

p,
ul {
	margin: 0;
}

p + p,
p + ul,
ul + p {
	margin-top: 14px;
}

ul {
	padding-left: 22px;
}

li + li {
	margin-top: 8px;
}

.plain-language-note {
	margin-top: 20px;
	padding: 18px 20px;
	border-left: 4px solid var(--accent);
	border-radius: 8px;
	background: var(--accent-soft);
}

.plain-language-note strong {
	display: block;
	margin-bottom: 4px;
}

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

.notice-card {
	display: flex;
	min-height: 180px;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: 14px;
	color: var(--ink);
	background: rgb(255 255 255 / 82%);
	text-decoration: none;
	transition:
		transform 150ms ease,
		box-shadow 150ms ease;
}

.notice-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgb(27 27 33 / 9%);
}

.notice-card h2 {
	margin-bottom: 8px;
}

.notice-card p {
	color: var(--muted);
}

.notice-card span {
	margin-top: 24px;
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
}

.site-footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 4px 0;
	color: var(--muted);
	font-size: 13px;
}

.site-footer p {
	max-width: 620px;
}

.site-footer a {
	white-space: nowrap;
}

@media (max-width: 700px) {
	.site-shell {
		width: min(100% - 20px, 960px);
		padding-top: 18px;
	}

	.site-header,
	.site-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.brand-link img {
		width: 155px;
	}

	.brand-divider {
		height: 28px;
	}

	.site-nav {
		width: 100%;
	}

	.site-nav a {
		flex: 1;
		text-align: center;
	}

	.notice-grid {
		grid-template-columns: 1fr;
	}

	.document {
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.notice-card {
		transition: none;
	}
}