body[data-project="support"] {
    --accent: #007aff;
    --accent-strong: #0060df;
}

html.dark body[data-project="support"] {
    --accent: #0a84ff;
    --accent-strong: #0a84ff;
}

.support-section {
    padding-top: calc(var(--nav-h) + var(--space-12));
    padding-bottom: var(--space-16);
}

.support-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

/* Page title, consistent with the Documentation and Merchandise headers. */
.support-head__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    color: var(--text-strong);
}

.support-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

.support-status .status-dot__ping,
.support-status .status-dot__core {
    background: var(--accent);
}

.support-status--sent .status-dot__ping,
.support-status--sent .status-dot__core {
    background: var(--success);
}

.support-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-8);
}

.support-card > * {
    position: relative;
    z-index: 1;
}

.support-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--text-strong);
}

.support-lede {
    margin-top: var(--space-2);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.support-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.support-form .field {
    position: relative;
}

.support-form .char-count {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-4);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.support-actions {
    display: flex;
    justify-content: flex-end;
}

.support-actions .btn {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.thankyou-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-16) var(--space-8) var(--space-20);
    overflow: hidden;
}

.thankyou-check {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--space-6);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

.thankyou-check svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.thankyou-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--text-strong);
}

.thankyou-lede {
    margin-top: var(--space-3);
    margin-bottom: var(--space-8);
    max-width: 26rem;
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
}

.thankyou-note {
    margin-top: var(--space-8);
    max-width: 26rem;
    font-size: var(--text-xs);
    line-height: var(--lh-relaxed);
    color: var(--text-faint);
}