:root{
	--bg:#f6faf7;
	--surface:#fff;
	--text:#163126;
	--muted:#607168;
	--brand:#007f43;
	--brand2:#087a46;
	--line:#dce8e0;
	--soft:#e9f8ef;
	--shadow:0 18px 50px rgba(22,74,47,.10);
	--radius:20px;
	--max:1120px
}
*{
	box-sizing:border-box
}
html{
	scroll-behavior:smooth
}
body{
	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	background:var(--bg);
	color:var(--text);
	line-height:1.6;
	font-family: 'metropolisregular';
}
a{
	color:var(--brand);
	text-decoration:none
}
a:hover{
	text-decoration:underline
}
.container{
	width:min(var(--max),calc(100% - 40px));
	margin:auto
}
.site-header{
	position:sticky;
	top:0;
	z-index:20;
	background:rgba(246,250,247,.9);
	backdrop-filter:blur(18px);
	border-bottom:1px solid rgba(220,232,224,.8)
}
.nav{
	min-height:72px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px
}
.brand{
	display:flex;
	align-items:center;
	gap:11px;
	color:var(--text);
	font-weight:800;
	font-size:1.1rem
}
.brand:hover{
	text-decoration:none
}
.nav-links{
	display:flex;
	align-items:center;
	gap:22px
}
.nav-links a{
	color:var(--text);
	font-weight:600;
	font-size:.95rem
}
.menu-button{
	display:none;
	border:1px solid var(--line);
	border-radius:12px;
	background:white;
	padding:9px 12px;
	font:inherit
}
.hero{
	padding:92px 0 70px;
	overflow:hidden
}
.hero-grid{
	display:grid;
	grid-template-columns:1.07fr .93fr;
	align-items:center;
	gap:62px
}
.eyebrow{
	display:inline-flex;
	padding:7px 11px;
	border-radius:999px;
	background:var(--soft);
	color:var(--brand);
	font-weight:750;
	font-size:.85rem
}
.hero h1{
	font-size:clamp(2.8rem,6vw,5.25rem);
	line-height:1.02;
	letter-spacing:-.055em;
	margin:20px 0;
	font-family: 'metropolisextra_bold';
}
.hero p{
	font-size:1.22rem;
	color:var(--muted);
	max-width:650px
}
.actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:30px
}
.button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:0;
	border-radius:14px;
	padding:13px 19px;
	font-weight:750;
	background:linear-gradient(135deg,var(--brand),var(--brand2));
	color:white;
	box-shadow:0 10px 24px rgba(0,127,67,.22)
}
.button:hover{
	text-decoration:none;
	transform:translateY(-1px)
}
.button.secondary{
	background:white;
	color:var(--text);
	border:1px solid var(--line);
	box-shadow:none
}
.section{
	padding:78px 0
}
.section.white{
	background:white
}
.section-head{
	max-width:720px;
	margin-bottom:38px
}
.section h2,.page-hero h1{
	font-size:clamp(2rem,4vw,3.5rem);
	letter-spacing:-.035em;
	line-height:1.1;
	margin:0 0 14px;
	font-family: 'metropolisextra_bold';
}
.section-head p,.page-hero p{
	color:var(--muted);
	font-size:1.1rem
}
.grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px
}
.card{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:26px;
	box-shadow:0 8px 30px rgba(22,74,47,.05)
}
.card h3{
	margin:13px 0 8px
}
.card p{
	color:var(--muted);
	margin:0
}
.card-icon{
	width:46px;
	height:46px;
	border-radius:14px;
	background:var(--soft);
	color:var(--brand);
	display:grid;
	place-items:center;
	font-size:1.3rem
}
.band{
	background:linear-gradient(135deg,#123b29,#07583a);
	color:white;
	border-radius:30px;
	padding:48px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:35px
}
.band p{
	color:#d9f2e4;
	max-width:680px
}
.page-hero{
	padding:72px 0 35px
}
.content-layout{
	display:grid;
	grid-template-columns:260px 1fr;
	gap:44px;
	padding-bottom:90px
}
.sidebar{
	position:sticky;
	top:100px;
	align-self:start;
	background:white;
	border:1px solid var(--line);
	border-radius:16px;
	padding:18px
}
.sidebar a{
	display:block;
	padding:8px 10px;
	color:var(--muted);
	border-radius:9px
}
.sidebar a:hover{
	background:var(--soft);
	color:var(--brand);
	text-decoration:none
}
.article{
	background:white;
	border:1px solid var(--line);
	border-radius:22px;
	padding:clamp(24px,5vw,56px)
}
.article h2{
	margin-top:2.3em;
	border-top:1px solid var(--line);
	padding-top:1.2em;
	font-family: 'metropolisextra_bold';
}
.article h2:first-child{
	border:0;
	margin-top:0;
	padding-top:0;
	font-family: 'metropolisextra_bold';
}
.article h3{
	margin-top:1.7em
}
.article p,.article li{
	color:#3f5148
}
.article li{
	margin:.45em 0
}
.note{
	background:#fff8df;
	border:1px solid #f1dda0;
	border-radius:14px;
	padding:16px 18px
}
.tip{
	background:var(--soft);
	border-radius:14px;
	padding:16px 18px
}
.steps{
	counter-reset:steps;
	list-style:none;
	padding:0
}
.steps li{
	position:relative;
	padding:0 0 24px 52px
}
.steps li:before{
	counter-increment:steps;
	content:counter(steps);
	position:absolute;
	left:0;
	top:-2px;
	width:34px;
	height:34px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:var(--brand);
	color:white;
	font-weight:800
}
.search{
	width:100%;
	padding:14px 16px;
	border:1px solid var(--line);
	border-radius:13px;
	font:inherit;
	margin:0 0 24px
}
.support-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px
}
.footer{
	border-top:1px solid var(--line);
	padding:38px 0;
	color:var(--muted)
}
.footer-grid{
	display:flex;
	justify-content:space-between;
	gap:30px;
	flex-wrap:wrap
}
.footer-links{
	display:flex;
	gap:18px;
	flex-wrap:wrap
}
.small{
	font-size:.9rem;
	color:var(--muted)
}
@media(max-width:820px){
	.hero-grid,.content-layout{
		grid-template-columns:1fr
	}
	.grid{
		grid-template-columns:1fr 1fr
	}
	.sidebar{
		position:static
	}
	.nav-links{
		display:none;
		position:absolute;
		left:20px;
		right:20px;
		top:66px;
		background:white;
		border:1px solid var(--line);
		border-radius:15px;
		padding:15px;
		box-shadow:var(--shadow);
		flex-direction:column;
		align-items:stretch
	}
	.nav-links.open{
		display:flex
	}
	.menu-button{
		display:block
	}
	.band{
		align-items:flex-start;
		flex-direction:column
	}
	.support-grid{
		grid-template-columns:1fr
	}
}
@media(max-width:560px){
	.container{
		width:min(var(--max),calc(100% - 28px))
	}
	.hero{
		padding-top:58px
	}
	.grid{
		grid-template-columns:1fr
	}
	.section{
		padding:58px 0
	}
	.article{
		padding:24px 20px
	}
	.support-grid{
		grid-template-columns:1fr
	}
}
.wordmark{
	height:40px
}
.grid,.support-grid{
	align-items:stretch
}
.card{
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:100%;
	overflow:hidden;
	padding:22px 22px 24px;
	background:linear-gradient(180deg,#fff 0%,#fbfefc 100%);
	border-color:#e1ebe4;
	box-shadow:0 8px 24px rgba(22,74,47,.055);
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.card:before{
	content:"";
	position:absolute;
	inset:0 0 auto;
	height:3px;
	background:linear-gradient(90deg,var(--brand),var(--brand2));
	opacity:0;
	transition:opacity .2s ease
}
.card:hover{
	transform:translateY(-4px);
	border-color:#bedaca;
	box-shadow:0 18px 42px rgba(22,74,47,.11);
	text-decoration:none
}
.card:hover:before{
	opacity:1
}
.card-icon{
	width:42px;
	height:42px;
	flex:0 0 42px;
	margin:0 0 14px;
	border-radius:12px;
	background:linear-gradient(135deg,#e9f8ef,#e8f5ed);
	font-size:1.05rem;
	box-shadow:inset 0 0 0 1px rgba(0,127,67,.08)
}
.card h3{
	margin:0 0 7px;
	font-size:1.08rem;
	line-height:1.3;
	letter-spacing:-.015em
}
.card p{
	line-height:1.55
}
.card p+p{
	margin-top:14px
}
.card ul{
	margin-bottom:0
}
a.card{
	color:var(--text)
}
a.card p{
	color:var(--muted)
}
.article .grid{
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr))
}
.article .card{
	margin:14px 0
}
.article .grid .card{
	margin:0
}
.support-grid .card p:last-child{
	margin-top:auto;
	padding-top:16px
}
.search-wrap{
	position:relative;
	margin:0 0 24px
}
.search-wrap .search{
	margin:0;
	padding-left:44px
}
.search-wrap>i{
	position:absolute;
	left:16px;
	top:50%;
	transform:translateY(-50%);
	color:var(--brand);
	z-index:1
}
.button i{
	font-size:.9em
}
.card-icon i{
	line-height:1
}
@media(max-width:560px){
	.card{
		padding:20px
	}
	.card:hover{
		transform:none
	}
}
.nav-links a[aria-current="page"]{
	color:var(--brand)
}
.page-hero{
	padding:76px 0 48px;
	background:linear-gradient(180deg,#f2faf5 0%,#fff 100%);
	text-align:center
}
.page-hero .narrow{
	max-width:790px
}
.page-hero h1{
	margin:10px 0 14px;
	font-size:clamp(2.4rem,7vw,4.5rem);
	letter-spacing:-.045em
}
.page-hero p{
	margin:0 auto;
	color:var(--muted);
	font-size:1.15rem;
	line-height:1.7
}
.examples-section{
	padding-top:32px
}
.examples-list{
	display:grid;
	gap:24px
}
.example-card{
	display:grid;
	grid-template-columns:180px 1fr;
	align-items:center;
	gap:32px;
	padding:22px;
	border:1px solid var(--border);
	border-radius:24px;
	color:var(--text);
	background:#fff;
	box-shadow:0 10px 30px rgba(22,74,47,.06);
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.example-card:hover{
	transform:translateY(-3px);
	border-color:#bedaca;
	box-shadow:0 18px 44px rgba(22,74,47,.11);
	text-decoration:none
}
.example-shot{
	aspect-ratio:9/16;
	border-radius:18px
}
.placeholder-shot{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:16px;
	text-align:center;
	color:#5d7166;
	background:linear-gradient(145deg,#e9f8ef,#edf8f1);
	border:1px dashed #afd2bd
}
.placeholder-shot>i{
	font-size:2rem;
	color:var(--brand)
}
.placeholder-shot span{
	font-size:.75rem;
	line-height:1.5
}
.placeholder-shot code{
	font-size:.68rem;
	overflow-wrap:anywhere
}
.example-copy h2{
	margin:8px 0 9px;
	font-size:1.55rem;
	font-family: 'metropolisextra_bold';
}
.example-copy p{
	margin:0 0 17px;
	color:var(--muted);
	line-height:1.65
}
.text-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-weight:800;
	color:var(--brand)
}
.tip{
	display:flex;
	gap:14px;
	margin-top:30px;
	padding:20px;
	border-radius:16px;
	background:#f0f9f3
}
.tip>i{
	color:var(--brand);
	margin-top:4px
}
.tip p{
	margin:0
}
@media(max-width:700px){
	.example-card{
		grid-template-columns:92px 1fr;
		gap:18px;
		padding:16px;
		border-radius:18px
	}
	.example-shot{
		border-radius:12px
	}
	.example-shot span{
		display:none
	}
	.example-copy h2{
		font-size:1.2rem
	}
	.example-copy p{
		font-size:.94rem
	}
	.page-hero{
		padding-top:56px
	}
}
body:has(.examples-list){
	background:#f6faf7
}
.page-hero{
	padding:72px 0 54px;
	background:linear-gradient(180deg,#e8f7ee 0%,#f6faf7 100%);
	border-bottom:1px solid var(--line)
}
.page-hero .narrow{
	width:min(760px,calc(100% - 40px));
	max-width:none
}
.page-hero h1{
	line-height:1.05
}
.examples-section{
	padding:48px 0 80px
}
.examples-list{
	width:min(960px,100%);
	margin:0 auto;
	gap:20px
}
.example-card{
	grid-template-columns:128px minmax(0,1fr);
	min-height:234px;
	gap:30px;
	padding:20px 30px 20px 20px;
	border:1px solid var(--line);
	border-radius:22px;
	background:var(--surface);
	box-shadow:0 8px 28px rgba(22,74,47,.07)
}
.example-card::before{
	content:none
}
.example-card .example-shot{
	width:128px;
	height:194px;
	aspect-ratio:auto;
	border-radius:15px
}
.example-card .example-copy{
	min-width:0
}
.example-card .eyebrow{
	padding:5px 9px;
	font-size:.76rem
}
.example-card .example-copy h2{
	margin:10px 0 7px;
	font-size:1.42rem;
	line-height:1.2;
	font-family: 'metropolisextra_bold';
}
.example-card .example-copy p{
	max-width:680px;
	margin:0 0 14px
}
.example-card .placeholder-shot span{
	font-size:.68rem
}
.example-card .placeholder-shot code{
	display:none
}
.example-card:hover{
	transform:translateY(-2px)
}
.example-detail-hero .narrow{
	width:min(960px,calc(100% - 40px))
}
.section:has(.example-article){
	padding:48px 0 80px
}
.article.example-article{
	width:min(960px,calc(100% - 40px));
	max-width:960px;
	margin:0 auto;
	padding:42px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:24px;
	box-shadow:0 12px 36px rgba(22,74,47,.07)
}
.example-article .tip{
	background:var(--soft);
	border:1px solid #d3eadc
}
.example-article .example-pagination:has(.button:only-child){
	justify-content:flex-end
}
@media(max-width:760px){
	.page-hero{
		padding:50px 0 38px
	}
	.page-hero p{
		font-size:1.03rem
	}
	.examples-section{
		padding:28px 0 58px
	}
	.example-card{
		grid-template-columns:88px minmax(0,1fr);
		min-height:160px;
		gap:18px;
		padding:14px 18px 14px 14px;
		border-radius:18px
	}
	.example-card .example-shot{
		width:88px;
		height:132px;
		border-radius:12px
	}
	.example-card .example-copy h2{
		font-size:1.14rem
	}
	.example-card .example-copy p{
		display:-webkit-box;
		overflow:hidden;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		margin-bottom:8px;
		font-size:.9rem;
		line-height:1.45
	}
	.example-card .text-link{
		font-size:.88rem
	}
	.article.example-article{
		padding:24px 20px;
		border-radius:18px
	}
	.example-pagination .button{
		flex:1;
		min-width:140px
	}
}
@media(max-width:420px){
	.example-card{
		grid-template-columns:72px minmax(0,1fr);
		gap:14px
	}
	.example-card .example-shot{
		width:72px;
		height:112px
	}
	.example-card .eyebrow{
		display:none
	}
	.example-card .example-copy h2{
		margin-top:0
	}
}
.example-preview-image{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover
}
.placeholder-shot{
	position:relative;
	overflow:hidden
}
.placeholder-shot.has-image>i,.placeholder-shot.has-image>span{
	display:none
}
 .wordmark{
	display:block;
	width:auto;
	height:40px;
	max-width:min(220px,52vw);
	object-fit:contain
}
 .menu-button{
	width:44px;
	height:44px;
	padding:0;
	align-items:center;
	justify-content:center;
	color:var(--text);
	font-size:1.15rem;
	cursor:pointer
}
 .menu-button:focus-visible,.nav-links a:focus-visible,.brand:focus-visible{
	outline:3px solid rgba(0,127,67,.3);
	outline-offset:3px
}
 @media(max-width:820px){
	.menu-button{
		display:flex
	}
	.nav{
		gap:16px
	}
	.wordmark{
		height:36px;
		max-width:min(200px,60vw)
	}
}
 @media(max-width:420px){
	.wordmark{
		height:32px;
		max-width:58vw
	}
	.nav{
		min-height:64px
	}
	.nav-links{
		top:60px
	}
}
 :root{
	--text:#172e23;
	--muted:#4d6356;
	--brand:#087342;
	--brand2:#075b36;
	--line:#d7e5db;
	--soft:#e9f6ed;
	--max:1160px
}
 html{
	scroll-padding-top:110px
}
body{
	overflow-wrap:break-word
}
img{
	max-width:100%;
	height:auto
}
.skip-link{
	position:fixed;
	left:12px;
	top:-120px;
	z-index:100;
	background:white;
	color:var(--text);
	padding:10px 16px;
	border:2px solid var(--brand);
	border-radius:8px
}
.skip-link:focus{
	top:12px
}
a:focus-visible,button:focus-visible,summary:focus-visible{
	outline:3px solid #2467d1;
	outline-offset:3px
}
.site-header{
	background:rgba(250,252,250,.98);
	z-index:50
}
.nav{
	position:relative;
	min-height:78px;
	gap:18px
}
.wordmark{
	height:38px;
	max-width:210px
}
.nav-links{
	display:flex;
	align-items:center;
	gap:clamp(11px,1.6vw,22px)
}
.nav-links>a,.topics-menu>summary{
	color:var(--text);
	font-size:.94rem;
	font-weight:650;
	white-space:nowrap
}
.nav-links>a[aria-current=page],.topics-links a[aria-current=page],.topics-menu:has(a[aria-current=page])>summary{
	color:var(--brand)
}
.menu-button{
	display:none
}
.topics-menu{
	position:relative
}
.topics-menu>summary{
	list-style:none;
	cursor:pointer;
	padding:10px 2px
}
.topics-menu>summary::-webkit-details-marker{
	display:none
}
.topics-menu>summary span{
	font-size:.7rem
}
.topics-links{
	position:absolute;
	right:0;
	top:calc(100% + 9px);
	width:200px;
	display:flex;
	flex-direction:column;
	padding:8px;
	background:white;
	border:1px solid var(--line);
	border-radius:14px;
	box-shadow:0 16px 40px rgba(15,59,32,.14);
	z-index:60
}
.topics-links a{
	padding:9px 12px;
	border-radius:8px;
	color:var(--text);
	font-weight:600
}
.topics-links a:hover{
	background:var(--soft);
	text-decoration:none
}
.hero-centered{
	padding:76px 0 68px;
	background:radial-gradient(circle at 80% 15%,#dff1e5 0,transparent 32%),linear-gradient(160deg,#f5faf6,#eaf4ee)
}
.hero-centered .hero-grid{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:36px;
	text-align:center
}
.hero-centered .hero-grid>div{
	width:min(100%,800px)
}
.hero-centered h1{
	font-size:clamp(3rem,6.5vw,5.8rem);
	line-height:1.05;
	letter-spacing:-.055em;
	margin:20px auto;
	max-width:820px;
	text-align:center
}
.hero-centered .hero-grid p{
	margin-left:auto;
	margin-right:auto
}
.hero-centered .actions{
	justify-content:center
}
.hero-centered .hero-grid>div:last-child{
	max-width:480px
}
.hero-centered .shot-placeholder{
	margin:0
}
.page-hero{
	text-align:center
}
.page-hero .container,.page-hero .narrow{
	width:min(850px,calc(100% - 36px));
	margin-inline:auto;
	max-width:850px
}
.page-hero h1{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	max-width:850px
}
.page-hero p{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	max-width:750px
}
.section-head h2{
	line-height:1.16;
	font-family: 'metropolisextra_bold';
}
.topic-section{
	padding:68px 0;
	background:#f1f8f3;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line)
}
.topic-section .section-head{
	max-width:760px
}
.topic-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:16px
}
.topic-card{
	display:block;
	min-width:0;
	background:white;
	border:1px solid var(--line);
	border-radius:20px;
	padding:25px;
	color:var(--text);
	box-shadow:0 8px 30px rgba(13,63,37,.05)
}
.topic-card:hover{
	border-color:#9fc9ae;
	text-decoration:none;
	transform:translateY(-2px)
}
.topic-card>span{
	font-size:.75rem;
	color:var(--brand);
	font-weight:800;
	letter-spacing:.1em
}
.topic-card h3{
	font-size:1.45rem;
	line-height:1.2;
	margin:16px 0 10px
}
.topic-card p{
	color:var(--muted);
	margin:0 0 22px;
	line-height:1.6
}
.topic-card strong{
	color:var(--brand)
}
.sidebar-topics{
	border-top:1px solid var(--line);
	margin-top:10px;
	padding-top:14px
}
.sidebar-topics strong{
	display:block;
	padding:6px 10px;
	font-size:.85rem
}
.article{
	min-width:0
}
.article section[id]{
	scroll-margin-top:110px
}
.article h2{
	line-height:1.2;
	font-family: 'metropolisextra_bold';
}
.article p,.article li{
	line-height:1.7
}
.article .shot-placeholder{
	margin:28px 0
}
.shot-placeholder{
	width:min(100%,640px);
	margin:24px auto;
	min-width:0
}
.shot-frame{
	min-height:255px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:10px;
	padding:24px;
	border:2px dashed #8fbaa0;
	border-radius:22px;
	background:linear-gradient(145deg,#e7f5eb,#f9fcf9);
	color:#28533b
}
.shot-frame:before{
	content:'▤';
	font-size:2rem;
	line-height:1;
	color:var(--brand)
}
.shot-tag{
	font-size:.75rem;
	letter-spacing:.12em;
	font-weight:800;
	color:var(--brand)
}
.shot-frame strong{
	font-size:1.15rem;
	color:var(--text)
}
.shot-frame>span:last-child{
	font-size:.9rem;
	max-width:350px
}
.shot-placeholder figcaption{
	padding:10px 3px;
	color:var(--muted);
	font-size:.8rem;
	line-height:1.5
}
.shot-placeholder code{
	overflow-wrap:anywhere
}
.hero-centered .shot-frame{
	min-height:360px;
	box-shadow:0 20px 55px rgba(10,65,37,.1)
}
.rules-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px;
	margin:22px 0
}
.rules-grid>div{
	border:1px solid var(--line);
	background:#f9fcfa;
	border-radius:14px;
	padding:18px
}
.rules-grid h3{
	margin:0 0 8px
}
.rules-grid p{
	margin:0
}
.store-note{
	font-size:.85rem;
	color:#e1f3e7
}
.footer-links a{
	color:#235b3e
}
 @media(max-width:980px){
	.nav{
		min-height:70px;
		flex-wrap:nowrap;
		padding:0
	}
	.menu-button{
		display:flex!important;
		flex:0 0 46px;
		width:46px;
		height:46px;
		padding:0;
		align-items:center;
		justify-content:center;
		background:white;
		border:1px solid var(--line);
		border-radius:11px;
		cursor:pointer
	}
	.menu-icon{
		display:flex;
		flex-direction:column;
		gap:5px
	}
	.menu-icon span{
		display:block;
		width:20px;
		height:2px;
		background:var(--text);
		border-radius:2px
	}
	.nav-links{
		display:none!important;
		position:absolute;
		top:calc(100% - 1px);
		left:0;
		right:0;
		width:100%;
		max-height:calc(100dvh - 85px);
		overflow:auto;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		padding:12px;
		background:white;
		border:1px solid var(--line);
		border-radius:0 0 16px 16px;
		box-shadow:0 18px 40px rgba(12,60,33,.14)
	}
	.nav-links.open{
		display:flex!important
	}
	.nav-links>a,.topics-menu>summary{
		display:block;
		padding:12px 14px;
		font-size:1rem;
		border-radius:9px
	}
	.nav-links>a:hover,.topics-menu>summary:hover{
		background:var(--soft);
		text-decoration:none
	}
	.topics-menu{
		width:100%;
		border-top:1px solid var(--line);
		margin-top:6px;
		padding-top:6px
	}
	.topics-menu>summary{
		cursor:pointer
	}
	.topics-links{
		position:static;
		width:auto;
		border:0;
		box-shadow:none;
		background:#f3f9f5;
		margin:2px 8px 8px;
		padding:5px 8px
	}
	.topics-links a{
		padding:11px 14px
	}
	.sidebar{
		position:static;
		max-height:none
	}
	.topic-grid{
		grid-template-columns:repeat(2,minmax(0,1fr))
	}
}
 @media(max-width:680px){
	.container{
		width:calc(100% - 32px)
	}
	.wordmark{
		height:34px;
		max-width:min(185px,56vw)
	}
	.hero-centered{
		padding:56px 0 60px
	}
	.hero-centered h1{
		font-size:clamp(2.75rem,11vw,4.5rem)
	}
	.hero-centered .hero-grid{
		gap:26px
	}
	.hero-centered .shot-frame{
		min-height:260px
	}
	.page-hero{
		padding:52px 0 34px
	}
	.page-hero h1{
		font-size:clamp(2.25rem,9vw,3.7rem)
	}
	.topic-section{
		padding:52px 0
	}
	.topic-grid,.rules-grid{
		grid-template-columns:1fr
	}
	.topic-card{
		padding:21px
	}
	.shot-frame{
		min-height:220px
	}
	.band{
		flex-direction:column;
		align-items:flex-start
	}
	.article{
		padding:24px 20px
	}
	.footer-links{
		gap:12px
	}
}
 @media(prefers-reduced-motion:reduce){
	html{
		scroll-behavior:auto
	}
	*,*:before,*:after{
		animation:none!important;
		transition:none!important
	}
}
 .docs-page .content-layout{
	padding-top:clamp(34px,4vw,56px)
}
 .docs-page .article > section:first-of-type > h2:first-child{
	border-top:0;
	margin-top:0;
	padding-top:0
}
 .guide-page .topic-section{
	border-top:0
}
 @media(max-width:680px){
	.docs-page .content-layout{
		padding-top:30px
	}
}
 #main .home-feature-cards > .card {
	 display: grid;
	 grid-template-columns: 46px minmax(0, 1fr);
	 grid-template-rows: auto 1fr;
	 column-gap: 16px;
	 align-content: start;
}
 #main .home-feature-cards > .card > .card-icon {
	 grid-column: 1;
	 grid-row: 1 / span 2;
	 align-self: start;
	 margin: 0;
}
 #main .home-feature-cards > .card > h3 {
	 grid-column: 2;
	 grid-row: 1;
	 margin: 0 0 6px;
	 min-width: 0;
}
 #main .home-feature-cards > .card > p {
	 grid-column: 2;
	 grid-row: 2;
	 margin: 0;
	 min-width: 0;
}
 #main .home-feature-cards > .card > p a {
	 font-weight: 700;
}
 .nav-links > a.nav-download, .nav-links > a.nav-download[aria-current="page"] {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 min-height: 42px;
	 padding: 9px 18px;
	 border: 1px solid #075b36;
	 border-radius: 11px;
	 background: #087342;
	 color: #fff;
	 font-weight: 750;
	 box-shadow: 0 6px 16px rgba(7,91,54,.2);
	 transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
 .nav-links > a.nav-download:hover {
	 background: #075b36;
	 color: #fff;
	 box-shadow: 0 9px 20px rgba(7,91,54,.27);
	 transform: translateY(-1px);
	 text-decoration: none;
}
 .footer {
	 border-top: 6px solid #16a365;
	 padding: 54px 0 24px;
	 background: #14271f;
	 color: #e9f3ec;
}
 .footer-grid {
	 display: grid;
	 grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
	 gap: 38px 56px;
	 align-items: start;
}
 .footer-identity {
	 display: inline-block;
	 color: #fff;
	 font-size: 1.25rem;
	 font-weight: 800;
	 line-height: 1.2;
}
 .footer-identity:hover {
	 color: #fff;
	 text-decoration: none;
}
 .footer-tagline {
	 margin: 13px 0 0;
	 color: #c6d9cc;
}
 .footer-navigation {
	 min-width: 0;
	 padding-top: 3px;
}
 .footer-links, .footer-legal {
	 display: flex;
	 justify-content: flex-end;
	 gap: 12px 22px;
	 flex-wrap: wrap;
}
 .footer-legal {
	 margin-top: 18px;
}
 .footer-links a, .footer-legal a {
	 color: #e9f3ec;
	 font-weight: 600;
}
 .footer-links a:hover, .footer-legal a:hover {
	 color: #a7e6be;
	 text-decoration: underline;
}
 .footer-bottom {
	 grid-column: 1 / -1;
	 border-top: 1px solid rgba(233,243,236,.22);
	 padding-top: 20px;
}
 .footer .small {
	 color: #c6d9cc;
}
 @media (max-width: 980px) {
	 .nav-links > a.nav-download {
		 margin-top: 8px;
		 width: 100%;
	}
}
 @media (max-width: 680px) {
	 .footer {
		 padding: 38px 0 22px;
	}
	 .footer-grid {
		 grid-template-columns: 1fr;
		 gap: 28px;
	}
	 .footer-links, .footer-legal {
		 justify-content: flex-start;
	}
	 .footer-bottom {
		 grid-column: 1;
	}
}
 @font-face {
	 font-family: 'metropolisextra_bold';
	 src: url('/assets/metropolis-extrabold-webfont.woff2') format('woff2'), url('/assets/metropolis-extrabold-webfont.woff') format('woff');
	 font-weight: normal;
	 font-style: normal;
}


@font-face {
    font-family: 'metropolisregular';
    src: url('/assets/metropolis-regular-webfont.woff2') format('woff2'),
         url('/assets/metropolis-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}