.cf-head { padding: 72px 0 32px; text-align: center; }
.cf-head h1 { font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.cf-head p { font-size: 15px; color: var(--on-surface-variant); max-width: 62ch; margin: 0 auto; }

.cf-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 40px 0 100px; align-items: start; }
@media (max-width: 780px) { .cf-layout { grid-template-columns: 1fr; } .cf-sidebar { display: none; } }

.cf-sidebar { position: sticky; top: 100px; border-right: 1px solid var(--ghost-outline); padding-right: 16px; display: flex; flex-direction: column; gap: 2px; }
.cf-sidebar a { padding: 8px 10px; border-radius: 0.5rem; font-size: 13.5px; color: var(--on-surface-variant); text-decoration: none; transition: background 0.15s, color 0.15s; }
.cf-sidebar a:hover { background: var(--surface-low); color: var(--primary); }

.cf-content { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.cf-section { scroll-margin-top: 100px; }
.cf-section h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }
.cf-section h2 svg { width: 22px; height: 22px; stroke: var(--primary); flex-shrink: 0; }
.cf-section p { font-size: 14.5px; color: var(--on-surface); max-width: 72ch; }
.cf-section p + p { margin-top: 10px; }
.cf-section ul, .cf-section ol { margin: 10px 0 0 22px; font-size: 14px; color: var(--on-surface-variant); }
.cf-section li { margin-bottom: 7px; }
.cf-section a { color: var(--primary); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(0,82,36,0.25); }
.cf-section a:hover { border-bottom-color: var(--primary); }

.cf-callout { background: var(--surface-container-low); border-radius: 1rem; padding: 22px 24px; position: relative; overflow: hidden; }
.cf-callout::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary-container), var(--primary-bright)); }
.cf-callout p { font-size: 14.5px; margin-bottom: 8px; }

.cf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 560px) { .cf-two-col { grid-template-columns: 1fr; } }
.cf-two-col > div { border: 1px solid var(--ghost-outline); border-radius: 0.75rem; padding: 16px 18px; background: var(--surface); }
.cf-two-col h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.cf-two-col p { font-size: 13.5px; color: var(--on-surface-variant); }

.fill { background: #fff4d6; border-bottom: 1.5px dashed #d99a2b; border-radius: 3px; padding: 1px 6px; font-family: var(--font-data); font-size: 13px; color: #8a5a12; }