/* Terms of service: readable document with a section index ------------------ */

/* A reading column of about 70 to 75 characters per line with the section index beside it on the right,
   like /terms.html, the news and the CMS pages. In the markup the index comes first, so on smaller
   screens it sits above the text. */
.fy-tos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; max-width: 40rem; }
@media (min-width: 1000px) {
	.fy-tos { grid-template-columns: minmax(0, 40rem) 280px; gap: var(--sp-8); max-width: none; justify-content: start; }
	.fy-tos__doc { grid-column: 1; grid-row: 1; }
	.fy-tos__aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}
.fy-tos__aside { display: grid; gap: var(--sp-4); }

.fy-tos-toc, .fy-tos-related { --card-pad: var(--sp-5); }
.fy-page .fy-tos-toc__title { margin: 0 0 var(--sp-3); color: var(--text-3); font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-tos-toc ol, .fy-tos-related ul { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.fy-tos-toc li, .fy-tos-related li { margin: 0; }
.fy-tos-toc a, .fy-tos-related a {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 40px;
	padding: .35rem .5rem;
	border-radius: var(--r-sm);
	color: var(--text-2);
	font-weight: 700;
	text-decoration: none;
}
.fy-tos-toc a:hover, .fy-tos-related a:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.fy-tos-related a .fy-i { color: var(--violet-300); }
.fy-tos-toc__num {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: rgba(255, 196, 63, .13);
	color: var(--gold-300);
	font: 700 .8rem/1 var(--font-display);
}
@media (max-width: 999.98px) {
	/* On narrow screens the index is a compact list in columns above the text. */
	.fy-tos-toc ol { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); column-gap: var(--sp-3); }
	.fy-tos-related { display: none; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
	.fy-tos-toc ol { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

.fy-tos__doc { min-width: 0; }
.fy-tos__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.fy-tos__notice { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--text); font-weight: 800; }
.fy-tos__notice .fy-i { color: var(--sky-400); }
.fy-tos__intro { margin-bottom: var(--sp-6); }
.fy-tos__section { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.fy-tos__section + .fy-tos__section { margin-top: var(--sp-8); }
.fy-page .fy-tos__section h2 { display: flex; align-items: center; gap: .65rem; margin: 0 0 var(--sp-3); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
.fy-tos__num {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(255, 196, 63, .13);
	color: var(--gold-300);
	font: 700 .95rem/1 var(--font-display);
}
.fy-tos__section .fy-prose { max-width: none; font-size: 1rem; line-height: 1.7; }
@media (min-width: 720px) {
	.fy-tos__section .fy-prose { font-size: 1.0625rem; }
}
.fy-tos__section p + p { margin-top: .8em; }
.fy-tos-fallback { display: grid; gap: var(--sp-4); max-width: 720px; }