/* Licence page (/license/): the modes page's layout (modes.css), with three numbered terms instead of the cards. */

.terms { display: grid; gap: 18px; padding-bottom: clamp(48px, 9vh, 96px); max-width: 860px; }
.term {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .02);
    padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 34px);
}
.term .num { position: static; display: inline-block; margin-bottom: 14px; }
.term h2 { font: 400 clamp(26px, 3.2vw, 34px)/1.1 var(--font-serif); margin: 0 0 12px; }
.term p { color: var(--muted); margin: 0 0 12px; max-width: 68ch; }
.term p:last-child { margin-bottom: 0; }
.term p a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.term p a:hover { text-decoration-color: var(--accent); }
.credit {
    display: inline-block;
    font: 400 13px/1.5 var(--font-mono);
    color: var(--text) !important;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    padding: 8px 12px;
}
.cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--accent);
    color: #0b0d0c;
    font-weight: 500;
}
.cta:hover { filter: brightness(1.08); }