/* ============================================================
   TERMS OF USE PAGE STYLES
   Page: resources/views/main/legal/terms-use.blade.php
   Depends on global variables defined in style.css:
   - Colors: --gradient-primary, --primary-green, --text-muted
   - Spacing: --spacing-*
   - Typography: --font-size-*, --font-weight-*
   - Radius: --radius-xs
   ============================================================ */

/* ============================================================
   TITLE – main heading with gradient text
   ============================================================ */

   .terms-title {
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-sm);
    display: inline-block;
    position: relative;
}

/* ============================================================
   GRADIENT TEXT – reusable gradient class
   ============================================================ */

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   TITLE UNDERLINE – decorative green bar
   ============================================================ */

.terms-underline {
    width: var(--underline-width);
    height: var(--underline-height);
    background: var(--primary-green);
    margin: var(--spacing-sm) auto 0;
    border-radius: var(--radius-xs);
}

/* ============================================================
   SUBTITLE – secondary text below title
   ============================================================ */

.terms-subtitle {
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

/* ============================================================
   RESPONSIVE: MOBILE (≤480px)
   ============================================================ */

@media (max-width: 480px) {
    .terms-title {
        font-size: var(--font-size-2xl);
    }
}