/* Custom styles for better typography and layout */
body {
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f9fafb; /* bg-gray-50 */
    color: #374151; /* text-gray-700 */
}

/* Navigation Bar */
.navbar {
    background-color: #ffffff; /* bg-white */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.navbar-container {
    max-width: 80rem; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

@media (min-width: 640px) {
    .navbar-container {
        padding-left: 1.5rem; /* sm:px-6 */
        padding-right: 1.5rem; /* sm:px-6 */
    }
}

@media (min-width: 1024px) {
    .navbar-container {
        padding-left: 2rem; /* lg:px-8 */
    }
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem; /* py-4 */
    padding-bottom: 1rem; /* py-4 */
}

.navbar-brand {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #111827; /* text-gray-900 */
    text-decoration: none;
}

.navbar-menu {
    display: none; /* hidden on small screens */
}

@media (min-width: 768px) {
    .navbar-menu {
        display: flex;
        gap: 2rem; /* space-x-8 */
    }
}

.navbar-menu a {
    color: #6b7280; /* text-gray-500 */
    text-decoration: none;
}

.navbar-menu a:hover {
    color: #111827; /* hover:text-gray-900 */
}

.navbar-toggle {
    display: block; /* block on small screens */
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}

.mobile-menu {
    display: none; /* hidden by default */
}

.mobile-menu.active {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
}

.mobile-menu a:hover {
    background-color: #f3f4f6;
}


/* Main Container */
.main-container {
    max-width: 56rem; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    padding-top: 3rem; /* py-12 */
    padding-bottom: 3rem; /* py-12 */
}

@media (min-width: 640px) {
    .main-container {
        padding-top: 4rem; /* sm:py-16 */
        padding-bottom: 4rem; /* sm:py-16 */
    }
}

/* Header Section */
.header {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}

.header h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #111827; /* text-gray-900 */
    letter-spacing: -0.025em; /* tracking-tight */
}

@media (min-width: 640px) {
    .header h1 {
        font-size: 3rem; /* sm:text-5xl */
    }
}

.header p {
    margin-top: 1rem; /* mt-4 */
    font-size: 1.125rem; /* text-lg */
    color: #6b7280; /* text-gray-500 */
}

/* Main Content Wrapper */
.content-wrapper {
    background-color: #ffffff; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

@media (min-width: 640px) {
    .content-wrapper {
        padding: 2.5rem; /* sm:p-10 */
    }
}

/* Policy Section */
.policy-section h2 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    margin-top: 2.5rem; /* 40px */
    margin-bottom: 1rem; /* 16px */
    padding-bottom: 0.5rem; /* 8px */
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.policy-section h3 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    margin-top: 2rem; /* 32px */
    margin-bottom: 0.75rem; /* 12px */
}

.policy-section p,
.policy-section ul {
    margin-bottom: 1rem; /* 16px */
    line-height: 1.6;
}

.policy-section ul {
    list-style-type: disc;
    padding-left: 1.5rem; /* 24px */
}

.policy-section li {
    margin-bottom: 0.5rem; /* 8px */
}

.policy-section strong {
    font-weight: 600;
    color: #111827; /* gray-900 */
}

/* Content Section */
.content-section h2 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    margin-top: 2.5rem; /* 40px */
    margin-bottom: 1rem; /* 16px */
    padding-bottom: 0.5rem; /* 8px */
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.content-section p,
.content-section ul {
    margin-bottom: 1rem; /* 16px */
    line-height: 1.6;
}

.content-section ul {
    list-style-type: decimal;
    padding-left: 1.5rem; /* 24px */
}

.content-section li {
    margin-bottom: 0.75rem; /* 12px */
    padding-left: 0.5rem; /* 8px */
}

.content-section strong {
    font-weight: 600;
    color: #111827; /* gray-900 */
}

/* Warning Box */
.warning-box {
    background-color: #fef2f2; /* red-50 */
    border-left: 4px solid #ef4444; /* red-500 */
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0.5rem;
}

.warning-box p {
    color: #b91c1c; /* red-800 */
    font-weight: 500;
    margin: 0;
}

/* Note Box */
.note {
    background-color: #f3f4f6; /* gray-100 */
    border-left: 4px solid #4f46e5; /* indigo-600 */
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0.5rem;
}

/* Footer */
.footer {
    text-align: center;
    margin-top: 3rem; /* mt-12 */
    padding-top: 1.5rem; /* py-6 */
    padding-bottom: 1.5rem; /* py-6 */
    border-top: 1px solid #e5e7eb; /* border-gray-200 */
}

.footer p {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
}