/* ============================================================
   Together Migration — Global Stylesheet
   ============================================================ */


/* --- Universal Base Styles --- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #191c1d;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: #47607e;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

a:hover {
    color: #051125;
}


/* --- Material Symbols --- */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* --- Utility: Editorial Shadow --- */

.editorial-shadow {
    box-shadow: 0 20px 40px rgba(27, 38, 59, 0.06);
}


/* --- Utility: Glass Nav --- */

.glass-nav {
    backdrop-filter: blur(12px);
}


/* --- Assessment Page: Asymmetric Gradient Background --- */

.asymmetric-gradient {
    background:
        radial-gradient(circle at 10% 20%, rgba(27, 38, 59, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(224, 225, 221, 0.4) 0%, transparent 40%);
}


/* ============================================================
   Prose — scoped styles for long-form content areas
   (blog posts, articles, legal content pages)
   Wrap content in <article class="prose"> or <div class="prose">
   ============================================================ */

.prose h1 {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    color: #051125;
    font-size: 2.5rem;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.prose h2 {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    color: #051125;
    font-size: 1.875rem;
    line-height: 1.25;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

.prose h3 {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    color: #051125;
    font-size: 1.375rem;
    line-height: 1.35;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #051125;
    font-size: 1.125rem;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose p {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #45474d;
    margin-bottom: 1.5rem;
}

.prose strong {
    font-weight: 600;
    color: #051125;
}

.prose em {
    font-style: italic;
    color: inherit;
}

.prose a {
    color: #47607e;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.prose a:hover {
    color: #051125;
}

.prose blockquote {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #051125;
    border-left: 4px solid #e2e3df;
    padding-left: 1.5rem;
    margin: 2rem 0;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.75rem;
    margin-bottom: 1.5rem;
}

.prose ol li {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #45474d;
    padding-left: 0.5rem;
    margin-bottom: 0.5rem;
}

.prose ul {
    list-style: none;
    padding-left: 1.75rem;
    margin-bottom: 1.5rem;
}

.prose ul li {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #45474d;
    padding-left: 0.75rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.55em;
    width: 0.45rem;
    height: 0.45rem;
    background-color: #47607e;
    border-radius: 0;
}