/* ==========================================================================
   Legal pages – page.php (design coordinates: 1rem = 10px at 1728px)
   Hero = shared .hero-box (sm). Body = sticky contents box + numbered article.
   ========================================================================== */

@media (min-width: 1024px) {
	.tpl-legal .hero-box__copy { top: 16.85rem; }
}

/* ---------- 02 Legal body ---------- */
.legal { position: relative; padding: 12rem 0 15rem; background: radial-gradient(60.48rem 36.6rem at 17.28rem 0, rgba(110, 194, 227, .14), transparent), #fff; }
.legal__grid { width: var(--container); max-width: calc(100% - 4rem); margin-inline: auto; display: grid; grid-template-columns: 32rem 76rem; column-gap: 12rem; align-items: stretch; }
.legal__article { grid-column: 2; min-width: 0; }

/* Sticky contents box */
.legal__aside { grid-column: 1; }
.toc { position: sticky; top: 12rem; padding: 2.8rem 2.4rem; color: #fff; background: radial-gradient(22.4rem 23.7rem at 32rem 0, rgba(249, 112, 20, .25), transparent), var(--canvas); }
.toc__label { font-weight: 600; font-size: var(--t-small); line-height: 2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.toc__wrap { position: relative; margin-top: 1.8rem; }
.toc__list { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.toc__link { position: relative; display: block; padding: 1rem 1.2rem; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); transition: color .4s, padding .6s var(--ease-out); }
.toc__link:hover { color: #fff; padding-left: 1.8rem; }
.toc__link.is-active { color: #fff; padding-left: 2.7rem; }
/* The highlight + orange bar glides between links (positioned by legal.js) */
.toc__marker { position: absolute; left: 0; right: 0; top: 0; height: 4.4rem; background: rgba(255, 255, 255, .08); pointer-events: none; transition: transform .7s var(--ease-out), height .7s var(--ease-out); }
.toc__marker::before { content: ""; position: absolute; left: 1.2rem; top: 50%; width: 3px; height: 1.8rem; margin-top: -.9rem; background: var(--orange); transition: transform .5s var(--ease-out); }
.toc.is-moving .toc__marker::before { transform: scaleY(1.6); }

/* Article */
.legal .prose { font-size: var(--t-body-lg); line-height: 3.2rem; color: rgba(31, 41, 55, .8); }
.legal__section + .legal__section, .legal__intro + .legal__section { margin-top: 5.6rem; }
.legal__intro { margin-bottom: 0; }
.legal .prose h2 { display: flex; align-items: center; gap: 1.6rem; margin: 0 0 1.6rem; font-size: 3.2rem; line-height: 3.5rem; letter-spacing: -.02em; color: var(--text-strong); scroll-margin-top: 12rem; }
.legal__num { flex: none; font-size: max(2rem, 15px); line-height: 2.6rem; letter-spacing: -.01em; color: var(--orange); transition: transform .6s var(--ease-out); }
.legal__section.is-current .legal__num { transform: translateX(-.4rem) scale(1.1); }
.legal .prose p:last-child, .legal .prose ul:last-child, .legal .prose ol:last-child { margin-bottom: 0; }
.legal .prose h3 { color: var(--text-strong); }
.legal .prose a { color: var(--orange); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-out); }
.legal .prose a:hover { background-size: 0 1px; background-position: 100% 100%; }
.legal__note { margin-top: 5.6rem; padding: 2.4rem 2.8rem 2.4rem 2.4rem; background: rgba(249, 112, 20, .08); border-left: 3px solid var(--orange); font-size: var(--t-body); line-height: 2.4rem; color: var(--text-strong); }
.legal__note p { margin: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 1023px) {
	.legal { padding: 4rem 0 8rem; }
	.legal__grid { grid-template-columns: minmax(0, 1fr); row-gap: 4rem; }
	.legal__aside, .legal__article { grid-column: 1; }
	.toc { position: relative; top: auto; padding: 2.4rem 2rem; }
	.legal .prose h2 { font-size: 26px; line-height: 1.2; gap: 1.2rem; }
	.legal .prose { font-size: 16px; line-height: 1.75; }
	.legal__section + .legal__section, .legal__intro + .legal__section, .legal__note { margin-top: 4rem; }
}