@import url("styles.css");

.legal-head { border-bottom: 1px solid var(--line); }
.legal-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.legal-head .brand b { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.14em; text-transform: uppercase; }
.legal-head a.back { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--ink-2); }
.legal-head a.back:hover { color: var(--forest); }

.legal { max-width: 780px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 5rem; }
.legal h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; }
.legal h2 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem; margin: 2.4rem 0 0.7rem; }
.legal p, .legal li { color: var(--ink-2); margin-bottom: 0.7rem; }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.legal .lead { font-size: 1.05rem; color: var(--ink); margin-top: 1.2rem; }
.ph { background: #fff2cc; color: #6b5500; padding: 0 0.3em; border-radius: 2px; }
.demo-hint { background: var(--sage-tint); border: 1px solid var(--sage-line); padding: 1.2rem 1.4rem; margin: 2rem 0; font-size: 0.92rem; color: var(--ink-2); }
.demo-hint strong { color: var(--ink); }