/* The licence page's own rules, on top of site.css (its tokens, .form-card, .cform, .cfield). */

.licence-card { max-width: 640px; }
.licence-note { margin: 0; max-width: 640px; color: var(--muted); font-size: 15px; text-wrap: pretty; }
.licence .licence-note + .licence-card, .licence-card + .licence-note { margin-top: 20px; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; }
.check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }

.licence-mode { align-self: flex-start; max-width: 100%; }
.licence-mode .seg-opt { white-space: nowrap; }
@media (max-width: 359px) { .licence-mode .seg-opt { padding: 0 9px; font-size: 13px; } }
.licence-intro { margin: -4px 0 0; color: var(--muted); font-size: 15.5px; text-wrap: pretty; }
.licence-year { margin: 0; font-size: 16px; text-wrap: pretty; }

.licence-code { font-family: var(--font-mono); font-size: 18px; letter-spacing: .12em; text-transform: uppercase; max-width: 220px; }
.licence-sent { margin: 0; font-size: 15.5px; text-wrap: pretty; }

.licence-results { display: flex; flex-direction: column; gap: 20px; }
.licence-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.licence-item { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.licence-item h3 { margin: 0; font: 700 19px/1.25 var(--font-head); letter-spacing: -0.02em; }
.licence-facts { margin: 0; color: var(--muted); font-size: 15px; }
.licence-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.licence-line { display: flex; flex-direction: column; gap: 6px; }
.licence-line label { font-size: 14px; font-weight: 600; }
.licence-line input { font-family: var(--font-mono); font-size: 13px; }

/* Right under the hero, with the site's section space below. */
.licence { padding-bottom: var(--section); }