/* General Body and Font Styles 
  ---
  This section sets up the basic styles for the entire page,
  including custom properties (variables) for your brand colors
  and font families, making them easy to manage.
*/
:root {
    --brand-blue: #1a2c42;
    --brand-cream: #fbf8f0;
    --brand-gold: #d9a03f;
    --brand-dark: #2c2c2c;
    --brand-gray: #6b7280;
      --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-800: #166534;
    --red-100: #fee2e2;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --yellow-50: #fefce8;
    --yellow-600: #ca8a04;
    --orange-50: #fff7ed;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --soft-ocean-blue: #3a506b;
      --brand-gold-transparent: rgba(192, 154, 62, 0.2);
    --cool-slate-gray: #4a5568;
    --font-serif: "Playfair Display", serif;
    --font-sans: "Inter", sans-serif;
    --font-heading: "Poppins", sans-serif;
    --font-body: "Open Sans", sans-serif;

     --blue-100: #dbeafe;
    --gray-100: #f3f4f6;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
}

*{
    box-sizing: border-box;
}

body {
    background-color: var(--brand-cream);
    font-family: var(--font-sans);
    margin: 0;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* Utility Classes
  ---
  A few helper classes for common patterns like flexbox containers.
*/
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    max-width: 1500px;
}

@media (min-width: 768px) {
    .container {
        padding-left: 4rem; /* md:px-16 */
        padding-right: 4rem; /* md:px-16 */
    }
}


/* Page Structure
  ---
  Styles for the main layout components like the header, main content, and footer.
*/
#dashboard-page, #latest-issue-page, .landing-page-wrapper, .auth-page-wrapper, #account-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#header {
    background-color: var(--brand-blue);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    width: 100%;
}
.absulate-top-heading{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    background: transparent !important;
    box-shadow: none !important;
}
.absulate-top-heading .containers{
    max-width: 1500px;
    padding: 0 2rem;
    margin: auto;
}

#main-nav {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
        max-width: 1500px;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: auto;
}

#brand-logo {
    font-size: 1.875rem;
    /* Mirror the static templates' header: they don't load Poppins, so the
       header resolves to the system sans-serif — match that here. */
    font-family: sans-serif;
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
#brand-logo img{
    max-width: 40px;
}


#nav-links {
    display: flex;
    align-items: center;
    gap: 2rem; /* space-x-8 */
}
#nav-links .btn{
        background-color: var(--brand-gold);
    color: white;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
        padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    text-transform: capitalize;
}

/* Dashboard Nav Links */
#nav-links .flex {
    gap: 1rem; /* space-x-4 */
}

#nav-links img {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
}

#nav-links .user-name {
    color: white;
    font-size: 0.875rem;
}

#landing-page-wrapper{
    /* Same story as .auth-page-wrapper: 540KB external PNG, now a 12KB local WebP. */
    background-image: url('/images/backgrounds/landing-bg.jpg');
    background-image: -webkit-image-set(
        url('/images/backgrounds/landing-bg.webp') type('image/webp'),
        url('/images/backgrounds/landing-bg.jpg')  type('image/jpeg')
    );
    background-image: image-set(
        url('/images/backgrounds/landing-bg.webp') type('image/webp'),
        url('/images/backgrounds/landing-bg.jpg')  type('image/jpeg')
    );
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;
    background-color: #1a2c42;
    z-index: 1;
}
#landing-page-wrapper:after{
    content: '';
        position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 44, 66, 0.6);
    z-index: -1;
}

/* Latest Issue & Landing Page Nav Links */
#nav-links a {
    font-size: 20px;
    /* Match the templates' header font (sans-serif fallback — no Poppins). */
    font-family: sans-serif;
    font-weight: 500;
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

#nav-links a:hover {
    color: #d1d5db; /* gray-300 */
}

.landing-page-wrapper #nav-links a,
.auth-page-wrapper #nav-links a {
    color: var(--brand-cream);
}

.landing-page-wrapper #nav-links a:hover,
.auth-page-wrapper #nav-links a:hover {
    color: var(--brand-gold);
}

.auth-page-wrapper #nav-links a.active-link {
    color: var(--brand-gold);
    cursor: default;
}


#menu-toggle {
    color: white;
    transition: color 0.3s;
    background: none;
    border: none;
    cursor: pointer;
}

#menu-toggle:hover {
    color: #d1d5db; /* gray-300 */
}

#menu-toggle i {
    font-size: 1.25rem;
}

#main-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
    flex: 1;
}

@media (min-width: 768px) {
    #main-content {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

#account-page #main-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#footer {
    background-color: var(--brand-blue);
    margin-top: auto;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 2rem 0;
}

#footer .container > div {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* space-x-6 */
}

#footer span {
    cursor: pointer;
    transition: color 0.3s;
}

#footer span:hover {
    color: white;
}

/* Sidebar Styles
  ---
  Styling for the slide-out navigation menu.
*/

#sidebar-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
}

#sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 20rem; /* w-80 */
    background-color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

#sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

.sidebar-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-dark);
}

#close-sidebar {
    color: var(--brand-gray);
    transition: color 0.3s;
    background: none;
    border: none;
    cursor: pointer;
}

#close-sidebar:hover {
    color: var(--brand-dark);
}

#close-sidebar i {
    font-size: 1.25rem;
}

#sidebar nav {
    padding: 1.5rem;
}

#sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

#sidebar nav li a ,
#sidebar nav li span {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
    color: var(--brand-gray);
    transition: color 0.3s;
    cursor: pointer;
    text-decoration: unset;
}

#sidebar nav li span:hover {
    color: var(--brand-gold);
}

#sidebar nav li .icon {
    width: 1.25rem; /* w-5 */
}

#sidebar nav li .active-link {
    background-color: rgba(217, 160, 63, 0.1);
    color: var(--brand-gold);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 0 -1rem; /* -mx-4 */
}

#sidebar nav li .active-link:hover {
    background-color: rgba(217, 160, 63, 0.2);
}

#sidebar nav li .font-medium {
    font-weight: 500;
}

#sidebar nav li .active-link .font-medium,
#sidebar nav li .dashboard-link .font-medium {
    color: var(--brand-dark); /* This is a bit of an override based on visual inspection */
}

#sidebar nav li.menu-divider {
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

#sidebar nav li .logout-link {
    color: #ef4444; /* red-500 */
}

#sidebar nav li .logout-link:hover {
    color: #dc2626; /* red-600 */
}

/* Page Title Styles
  ---
  Shared styles for main page titles.
*/
#page-title {
    font-family: var(--font-serif);
    color: var(--brand-dark);
}

/* Dashboard Page Specific Styles */
#dashboard-section #page-title {
    font-size: 2.25rem; /* text-4xl */
}

@media (min-width: 768px) {
    #dashboard-section #page-title {
        font-size: 3rem; /* md:text-5xl */
    }
}

/* Latest Issue Page Specific Styles */
#latest-issue-section #page-title {
    font-size: 3rem; /* text-5xl */
    text-align: center;
    margin-bottom: 1rem; /* mb-16 */
    margin-top: 0;
}

@media (min-width: 768px) {
    #latest-issue-section #page-title {
        font-size: 3.75rem; /* md:text-6xl */
    }
}


/* Dashboard Content
  ---
  Styles for the main content area of the dashboard.
*/
#dashboard-section .section-header {
    margin-bottom: 3rem; /* mb-12 */
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
}

.filter-container {
    position: relative;
}

#filter-toggle {
    background-color: white;
    color: var(--brand-dark);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(217, 160, 63, 0.2);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
    cursor: pointer;
}

#filter-toggle:hover {
    background-color: #f9fafb; /* gray-50 */
}

#filter-toggle i {
    color: var(--brand-gold);
}

#filter-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 14rem; /* w-56 */
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    z-index: 30;
}

#filter-dropdown.hidden,
#sidebar-overlay.hidden {
    display: none;
}

.filter-content {
    padding: 1rem;
}

.filter-content h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}

.filter-options label {
    display: flex;
    align-items: center;
}

.filter-options input[type="checkbox"] {
    border-radius: 0.25rem;
    border-color: #d1d5db;
    color: var(--brand-gold);
}

.filter-options input[type="checkbox"]:focus {
    --tw-ring-color: var(--brand-gold);
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

.filter-options span {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--brand-dark);
}

.filter-empty-state {
    padding: 2rem 0;
    text-align: center;
    color: var(--brand-gray, #718096);
    font-size: 0.95rem;
}

.archive-form {
    display: inline;
}

.apply-filters-btn {
    width: 100%;
    margin-top: 1rem;
    background-color: var(--brand-gold);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
}

.apply-filters-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}


#submit-research-btn {
    background-color: var(--brand-gold);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
    text-decoration: none;
}

#submit-research-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}

#submit-research-btn i {
    margin-right: 0.5rem;
}

/* Paper List Styles
  ---
  Styling for the individual paper items in the dashboard.
*/
#papers-list {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* space-y-8 */
}

.paper-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 1.5rem;
}

.paper-card-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem; /* space-x-6 */
}

.paper-thumbnail {
    width: 6rem; /* w-24 */
    height: 6rem; /* h-24 */
    background-color: var(--brand-cream);
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.paper-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.paper-details {
    flex: 1;
}

.paper-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.paper-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0;
    cursor: pointer;
    /* Author-supplied text: never let one long word set the layout width. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.paper-actions button {
    color: var(--brand-gray);
    padding: 0.5rem;
    transition: color 0.3s;
    background: none;
    border: none;
    cursor: pointer;
}

.paper-actions button:hover {
    color: var(--brand-gold);
}

.paper-actions i {
    font-size: 1.125rem;
}

.paper-authors {
    font-size: 0.875rem;
    color: var(--brand-gray);
    margin-bottom: 1.5rem;
}

/* Progress Bar Styles
  ---
  Complex styling for the multi-step progress bars.
*/
.progress-bar {
    position: relative;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.progress-labels span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-gray);
}

.progress-labels .active-label {
    color: var(--brand-dark);
}

.progress-labels .published-label {
    color: #16a34a; /* green-600 */
}

.progress-track {
    position: relative;
    height: 0.5rem;
    background-color: #e5e7eb; /* gray-200 */
    border-radius: 9999px;
}

.progress-fill {
    position: absolute;
    height: 0.5rem;
    background-color: var(--brand-gold);
    border-radius: 9999px;
}

.progress-fill.published {
    background-color: #22c55e; /* green-500 */
    width: 100%;
}

.progress-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.progress-dot {
    width: 0.75rem;
    height: 0.75rem;
    background-color: #d1d5db; /* gray-300 */
    border-radius: 9999px;
    margin-top: -0.125rem; /* -mt-0.5 */
    border: 2px solid white;
}

.progress-dot.active {
    background-color: var(--brand-gold);
}

.progress-dot.published {
    background-color: #22c55e; /* green-500 */
}

.progress-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.progress-date-item {
    text-align: center;
}

.progress-date-item .date {
    font-size: 0.75rem;
    color: var(--brand-gray);
}

.progress-date-item .date.active {
    color: var(--brand-dark);
    font-weight: 500;
}

.progress-date-item .date.published {
    color: #16a34a; /* green-600 */
    font-weight: 500;
}

.progress-date-item .duration {
    font-size: 0.75rem;
    color: var(--brand-gray);
}

/* Latest Issue Page - Filters Section
  ---
  Styles for the filter controls on the articles grid page.
*/
#filters-section {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 1.5rem;
    margin-bottom: 3rem;
}

#filters-section .filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    #filters-section .filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #filters-section .filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}

.filter-group select,
.filter-group input[type="text"] {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-group select:focus,
.filter-group input[type="text"]:focus {
    outline: none;
    border-color: transparent;
    --tw-ring-color: var(--brand-gold);
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

.search-filter-group {
    position: relative;
}

.search-filter-group input[type="text"] {
    padding-left: 2.5rem;
    width: 100%;
    box-sizing: border-box;
}

.search-filter-group svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-gray);
    font-size: 0.875rem;
}

#filter-actions {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

#filter-actions .results-count {
    font-size: 0.875rem;
    color: var(--brand-gray);
}

#filter-actions .actions-buttons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Style by class, not element, so the "Clear Filters" anchor (a link, so it can
   navigate to the unfiltered /browse) matches the "Apply Filters" button. */
#filter-actions button,
#filter-actions .clear-btn,
#filter-actions .apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    /* Match the template: its buttons render in the system sans-serif (no Open
       Sans loaded); pin it so the anchor doesn't inherit a different body font. */
    font-family: sans-serif;
    border-radius: 0.5rem;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    line-height: 1.25rem;
}

#filter-actions .clear-btn {
    background: none;
    color: var(--brand-gray);
}

#filter-actions .clear-btn:hover {
    color: var(--brand-dark);
}

#filter-actions .apply-btn {
    background-color: var(--brand-gold);
    color: white;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

#filter-actions .apply-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}


/* Latest Issue Page - Articles Grid
  ---
  Styles for the grid of article cards.
*/
#articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Empty state — shown when no papers match the filters. Spans the full grid. */
.no-results {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
    background-color: var(--brand-cream);
    border: 1px dashed rgba(217, 160, 63, 0.5);
    border-radius: 0.75rem;
}

.no-results-icon {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(217, 160, 63, 0.12);
    margin-bottom: 1.25rem;
}

.no-results-icon i {
    font-size: 1.875rem;
    color: var(--brand-gold);
}

.no-results-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--brand-dark);
    margin: 0 0 0.5rem;
}

.no-results-text {
    color: var(--brand-gray);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 34rem;
    margin: 0 0 1.5rem;
}

.no-results-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background-color: var(--brand-gold);
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}

.no-results-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
    color: #fff;
}

@media (min-width: 640px) {
    #articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    #articles-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    #articles-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.article-card {
    background-color: var(--brand-cream);
    border-radius: 0.5rem;
    border: 1px solid rgba(217, 160, 63, 0.5);
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
}
.article-card a.read-more-btn{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: -999px;
    overflow: hidden;
    opacity: 0;
}

.article-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.article-card-image {
    width: 100%;
    height: 10rem;
    overflow: hidden;
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-content {
    padding: 1rem;
}

.article-card-title {
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--brand-dark);
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.article-card-authors {
    font-size: 0.75rem;
    color: var(--brand-gray);
    font-family: var(--font-sans);
}

/* Landing Page (index.html) Styles
  ---
  Styles specific to the main landing/hero page.
*/
body.landing {
    background-color: var(--brand-blue);
    color: var(--brand-cream);
    overflow-x: hidden;
}

.landing-page-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.background-image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.background-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.background-image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 44, 66, 0.6); /* brand-blue with 60% opacity */
}

.landing-page-wrapper #header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: transparent;
    box-shadow: none;
    padding: 2rem 2rem;
}

@media (min-width: 768px) {
    .landing-page-wrapper #header {
        padding: 2rem 4rem;
    }
}

.landing-page-wrapper #brand-logo {
    font-size: 1.5rem;
    color: var(--brand-cream);
}

#hero-section {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    height: 100%;
    min-height: 100vh;
}

#hero-content {
    max-width: 70rem; /* max-w-4xl */
    padding: 40px 0;
}

#main-headline {
    font-family: var(--font-serif);
    font-size: 3rem; /* text-5xl */
    font-weight: 700;
    color: var(--brand-cream);
    line-height: 1.2;
}

@media (min-width: 768px) {
    #main-headline {
        font-size: 4.5rem; /* md:text-7xl */
    }
}

#sub-headline {
    margin-top: 1.5rem;
    font-size: 1.125rem; /* text-lg */
    color: rgba(240, 234, 214, 0.8); /* brand-cream with 80% opacity */
    max-width: 100%; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    #sub-headline {
        font-size: 1.25rem; /* md:text-xl */
    }
}

#cta-buttons {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    #cta-buttons {
        flex-direction: row;
    }
}

.cta-btn {
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.cta-btn:hover {
    transform: scale(1.05);
}

.cta-btn.primary {
    background-color: var(--brand-gold);
    color: var(--brand-blue);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.cta-btn.primary:hover {
    background-color: #f59e0b; /* A slightly brighter yellow */
}

.cta-btn.secondary {
    border: 1px solid rgba(240, 234, 214, 0.5);
    color: var(--brand-cream);
}

.cta-btn.secondary:hover {
    background-color: rgba(240, 234, 214, 0.1);
    border-color: var(--brand-cream);
}

/* Auth Pages (Login & Signup) Styles
  ---
  Shared styles for the login and signup pages.
*/

body.auth-page {
    background-color: var(--brand-blue);
    color: var(--brand-cream);
    overflow-x: hidden;
}

.auth-page-wrapper {
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: center;
    /* padding: 5rem 0; */
}

.auth-page-wrapper{
    /* Was a 696KB PNG pulled from an external uxpilot bucket on every visit,
       which cost a DNS lookup and TLS handshake to a third-party host before a
       byte of it arrived. Now local: 22KB WebP, with a JPEG for browsers that
       do not understand image-set. */
    background-image: url('/images/backgrounds/auth-bg.jpg');
    background-image: -webkit-image-set(
        url('/images/backgrounds/auth-bg.webp') type('image/webp'),
        url('/images/backgrounds/auth-bg.jpg')  type('image/jpeg')
    );
    background-image: image-set(
        url('/images/backgrounds/auth-bg.webp') type('image/webp'),
        url('/images/backgrounds/auth-bg.jpg')  type('image/jpeg')
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Painted immediately so the panel is never a white flash while it loads. */
    background-color: #1a2c42;
    position: relative;
    z-index: 1
}
.auth-page-wrapper:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 44, 66, 0.6); /* brand-blue with 60% opacity */
    z-index: -1;
}

.auth-page-wrapper .background-image-container .overlay {
    background-color: rgba(26, 44, 66, 0.7); /* brand-blue with 70% opacity */
}

.auth-page-wrapper #header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: transparent;
    box-shadow: none;

}





.auth-page-wrapper #nav-links a.active-link {
    color: var(--brand-gold);
    cursor: default;
}

.auth-form-section {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:6rem 0;
}

.auth-card {
    width: 100%;
    max-width: 28rem; /* max-w-md */
    background-color: rgba(26, 44, 66, 0.5); /* brand-blue/50 */
    backdrop-filter: blur(4px);
    border-radius: 1rem; /* rounded-2xl */
    padding: 1rem;
    border: 1px solid rgba(240, 234, 214, 0.1); /* border-brand-cream/10 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
    .auth-card {
        padding: 1rem;
    }
}

.auth-card .text-center {
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-title {
    font-family: var(--font-serif);
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: var(--brand-cream);
}

@media (min-width: 768px) {
    .auth-title {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

.auth-subtitle {
    margin-top: 0.5rem;
    color: rgba(240, 234, 214, 0.7); /* brand-cream/70 */
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

.auth-submit-btn {
    width: 100%;
    background-color: var(--brand-gold);
    color: var(--brand-blue);
    font-family: var(--font-sans);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    transform-origin: center;
    cursor: pointer;
    border: none;
}

.auth-submit-btn:hover {
    background-color: #f59e0b;
    transform: scale(1.05);
}

.auth-redirect {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgba(240, 234, 214, 0.6);
}

.auth-redirect a {
    font-weight: 500;
    color: var(--brand-gold);
    cursor: pointer;
    text-decoration: none;
}

.auth-redirect a:hover {
    text-decoration: underline;
}

#forgot-password-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-gold);
    cursor: pointer;
    display: inline-block; /* Added for proper placement */
    margin-top: 0.5rem; /* Added spacing */
}

#forgot-password-link:hover {
    text-decoration: underline;
}

.input-field {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    color: #fff;
    outline: 0;
    background: rgb(26 44 66 / 0.5);
    box-sizing: border-box;
}

.form-group-float {
    position: relative;
    margin-top: 0;
}

.form-group-float label {
    position: absolute;
    top: 50%;
    left: 10px;
    color: #888;
    pointer-events: none;
    transition: all 0.2s ease-out;
    padding: 0 5px;
    transform: translateY(-50%);
    z-index: 1;
}

.form-group-float .input-field:focus + label,
.form-group-float .input-field:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.8rem;
    color: #fff;
    background: rgb(26 44 66 / 1);
    transform: translateY(-50%);
}

/* Browser-autofill fix (login/signup floating labels).
   During Chrome/Edge autofill "preview" the field's real value is still empty,
   so :placeholder-shown stays true and the label would rest on top of the
   autofilled text and look duplicated. Lift it for :-webkit-autofill too.
   Kept as its own rule so browsers that don't know :-webkit-autofill don't
   invalidate the whole selector list above. */
.form-group-float .input-field:-webkit-autofill + label {
    top: 0;
    font-size: 0.8rem;
    color: #fff;
    background: rgb(26 44 66 / 1);
    transform: translateY(-50%);
}

/* Stop Chrome/Edge repainting autofilled fields with their pale background +
   dark text (which clashed with the dark auth card and the lifted label).
   Repaint in the design's navy, force white text/caret, and freeze Chrome's
   background transition so it never flashes back. */
.form-group-float .input-field:-webkit-autofill,
.form-group-float .input-field:-webkit-autofill:hover,
.form-group-float .input-field:-webkit-autofill:focus,
.form-group-float .input-field:-webkit-autofill:active {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgb(26 44 66) inset;
    box-shadow: 0 0 0 1000px rgb(26 44 66) inset;
    caret-color: #fff;
    transition: background-color 9999s ease-out 0s;
}

/* Show/hide control inside a password field (login, sign-up, password reset).
   The field reserves room on the right so revealed text never runs under the
   button, and the icon pair is swapped by class rather than by rewriting it —
   Font Awesome replaces the <i> tags with <svg> at load, but keeps the
   .fa-eye / .fa-eye-slash classes these rules target. */
.form-group-float.has-password-toggle .input-field {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0.375rem;
    color: rgba(240, 234, 214, 0.55); /* brand-cream, muted */
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    z-index: 2; /* above the floating label, which spans the field */
}

.password-toggle:hover {
    color: var(--brand-gold);
    background-color: rgba(240, 234, 214, 0.08);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

.password-toggle .fa-eye-slash {
    display: none;
}

.password-toggle.is-visible .fa-eye {
    display: none;
}

.password-toggle.is-visible .fa-eye-slash {
    display: inline-block;
}

/* Account/Settings Page Styles
  ---
  Styles for the user account and settings page.
*/
#account-page .main-container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    #account-page .main-container {
        flex-direction: row;
        gap: 3rem;
    }
}

#account-nav-sidebar {
    width: 100%;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    #account-nav-sidebar {
        width: 25%;
        margin-bottom: 0;
    }
}

#account-nav-sidebar .sidebar-content {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 1.5rem;
}

#account-nav-sidebar h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--soft-ocean-blue);
    margin-bottom: 1.5rem;
}

#account-nav-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.account-nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: var(--cool-slate-gray);
    transition: all 0.2s;
    cursor: pointer;
    gap: 10px;
}

.account-nav-link i {
    width: 1.25rem;
    margin-right: 0.75rem;
}

.account-nav-link:hover {
    background-color: #f3f4f6;
    color: var(--brand-gold);
}

.account-nav-link.active {
    background-color: rgba(217, 160, 63, 0.1);
    color: var(--brand-gold);
    font-weight: 700;
}

#account-content {
    width: 100%;
}

@media (min-width: 1024px) {
    #account-content {
        width: 75%;
    }
}

#account-content .content-card {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.settings-section h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--soft-ocean-blue);
    margin: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
}

#profile-credentials .profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#profile-credentials .profile-header img {
    width: 6rem;
    height: 6rem;
    border-radius: 9999px;
    object-fit: cover;
}

#profile-credentials .profile-header h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cool-slate-gray);
}

#profile-credentials .profile-header p {
    color: var(--cool-slate-gray);
}

.profile-details, .account-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: var(--cool-slate-gray);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.detail-item strong {
    font-weight: 600;
}

.detail-item button {
    color: var(--brand-gold);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
}

.detail-item button:hover {
    text-decoration: underline;
}

/* The settings markup carries utility class names from the static prototype,
   which was built against Tailwind. Nothing defines them in this project, so
   the About Me row collapsed into a single run-on line. Defined here scoped to
   the page rather than claiming these very generic names globally. */
#account-page .block   { display: block; }
#account-page .mb-2    { margin-bottom: 0.5rem; }
#account-page .ml-4    { margin-left: 1rem; }
#account-page .flex-1  { flex: 1 1 0%; }

/* A long About Me must not push the Edit button off the row. min-width lets the
   text box shrink below its content, and overflow-wrap gives an unbroken run of
   characters — a pasted URL, or "updatedupdatedupdated…" — somewhere to break.
   Without both, one long word overflows the card and collides with the button. */
#account-page .detail-item > div {
    min-width: 0;
}

#account-page .detail-item p,
#account-page .detail-item strong,
#account-page .detail-item .current-value {
    overflow-wrap: anywhere;
}

/* The action never shrinks, however long the value beside it is. */
#account-page .detail-item button {
    flex-shrink: 0;
}

#account-security .linked-accounts-label {
    font-weight: 600;
    color: var(--cool-slate-gray);
    margin-bottom: 0.75rem;
    display: block;
}

#account-security .linked-accounts-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#account-security .linked-accounts-buttons button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: var(--cool-slate-gray);
    transition: background-color 0.2s;
    background: none;
    cursor: pointer;
}

#account-security .linked-accounts-buttons button:hover {
    background-color: #f9fafb;
}

#account-security .linked-accounts-buttons .orcid-btn {
    border-color: #22c55e;
    background-color: #f0fdf4;
    color: #166534;
}

#account-security .delete-account-section {
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 1.5rem;
}

#account-security .delete-account-btn {
    color: #dc2626;
    font-weight: 600;
    font-size: 0.875rem;
    background: none;
    border: none;
    cursor: pointer;
}

#account-security .delete-account-btn:hover {
    color: #991b1b;
}

#research-interests .interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

#research-interests .interest-tag {
    background-color: rgba(217, 160, 63, 0.2);
    color: var(--brand-gold);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

#research-interests input[type="text"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

#research-interests input[type="text"]:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px var(--brand-gold);
}

#research-interests .notification-frequency-btns {
    display: flex;
    gap: 1rem;
}

#research-interests .notification-frequency-btns button {
    background-color: #e5e7eb;
    color: var(--cool-slate-gray);
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

#research-interests .notification-frequency-btns button:hover {
     background-color: var(--brand-gold);
    color: white;
}

#research-interests .notification-frequency-btns .active-freq {
    background-color: var(--brand-gold);
    color: white;
}

#research-interests .notification-types {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#research-interests .notification-types label {
    display: flex;
    align-items: center;
}

#research-interests .notification-types input[type="checkbox"] {
    border-radius: 0.25rem;
    color: var(--brand-gold);
}

#research-interests .notification-types input[type="checkbox"]:focus {
    box-shadow: 0 0 0 2px var(--brand-gold);
}

#research-interests .notification-types span {
    margin-left: 0.5rem;
    color: var(--cool-slate-gray);
}

#billing-invoices .table-wrapper {
    overflow-x: auto;
}

#billing-invoices table {
    width: 100%;
    text-align: left;
    color: var(--cool-slate-gray);
}

#billing-invoices thead {
    border-bottom: 2px solid #e5e7eb;
}

#billing-invoices th, #billing-invoices td {
    padding: 0.75rem;
}

#billing-invoices tbody tr {
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

#billing-invoices .invoice-download-btn {
    background-color: var(--brand-gold);
    color: white;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

#billing-invoices .invoice-download-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}


/* --- NEW: Styles for "No Submissions" message --- */
#no-submissions-message {
  text-align: center;
  padding: 60px 40px;
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  margin-top: 20px;
  color: #777;
}

#no-submissions-message.hidden {
  display: none;
}

.no-submissions-icon {
  font-size: 3rem;
  color: #ccc;
  margin-bottom: 20px;
}

#no-submissions-message h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: #333;
  margin: 0 0 10px 0;
}

#no-submissions-message p {
  font-size: 1rem;
  margin: 0;
}

@media (max-width:700px){
    .paper-details{

        overflow: auto;
    }
    .progress-bar{
        overflow: auto;
        min-width: 700px;
    }
}

/* New styles for the comment modal */
#comment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

#comment-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 90%;
    max-width: 500px;
}

#comment-modal-content {
    padding: 20px 25px;
}

/* Make the form inside the modal look good */
#comment-modal .add-comment-form h4 {
    margin-top: 0;
    font-family: 'Poppins', sans-serif;
}

#comment-modal .add-comment-form textarea,
#comment-modal .add-comment-form select {
    width: 100%;
    margin-bottom: 15px;
}

#comment-modal .add-comment-form button {
    width: 100%;
    padding: 12px;
}

.hidden {
    display: none;
}
/* Add these new styles for inline commenting */

/* Style for the text that has a comment */
.comment-source {
    background-color: #FFF3CD; /* A light yellow highlight */
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 0;
}

/* Style for the inline comment text itself */
.inline-comment {
    display: inline-block; /* Allows for better spacing */
    background-color: #E2E8F0; /* A light gray background */
    border: 1px solid #CBD5E0;
    border-radius: 5px;
    padding: 2px 8px;
    margin-left: 8px; /* Space between source text and comment */
    font-size: 0.9em;
    font-style: italic;
    color: #4A5568;
}


/* Forgot Password Page Styles
  ---
  Styles specific to the forgot password page.
*/

body.forgot-password-page {
    background-image: linear-gradient(135deg, #1a2c42 0%, #2c3e50 50%, #34495e 100%);
    min-height: 100vh;
    position: relative;

}

.background-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}
.background-overlay-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#forgot-password-main {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Adjust based on header height */
    padding: 0 1.5rem;
    padding-top: 100px;
}

#forgot-password-container {
    width: 100%;
    max-width: 28rem;
}

#forgot-password-card {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.6s ease-out;
}

#forgot-password-header {
    text-align: center;
    margin-bottom: 2rem;
}

.value-card .icon-container {
    width: 4rem;
    height: 4rem;
    background-color: rgba(217, 160, 63, 0.1);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

#about-page .icon-container svg ,
#about-page .icon-container i {
    color: #fff;
    font-size: 1.5rem;
}
#about-page .hero-content .icon-container svg {
    color: var(--brand-gold);
}

#forgot-password-header h1 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}

#forgot-password-header p {
    color: var(--brand-gray);
    font-size: 0.875rem;
    line-height: 1.625;
}

#forgot-password-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#email-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#email-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-dark);
}

.input-with-icon {
    position: relative;
}

.input-with-icon .icon {
    position: absolute;
    top: 13px;
    bottom: 0;
    left: 0;
    padding-left: 0.75rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--brand-gray);
    font-size: 0.875rem;
}

.input-with-icon input {
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s;
    color: var(--brand-dark);
}
.input-with-icon input::placeholder {
    color: rgba(107, 114, 128, 0.6);
}

.input-with-icon input:focus {
    outline: none;
    --tw-ring-color: var(--brand-gold);
    box-shadow: 0 0 0 2px var(--tw-ring-color);
    border-color: transparent;
}

#reset-button {
    width: 100%;
    background-color: var(--brand-gold);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

#reset-button:hover {
    background-color: rgba(217, 160, 63, 0.9);
    transform: scale(1.02);
}

#reset-button:focus {
    outline: none;
    --tw-ring-color: var(--brand-gold);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--tw-ring-color);
}

#reset-button:disabled {
    opacity: 0.75;
}

#loading-icon {
    margin-left: 0.5rem;
}

#success-message {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
}

#success-message .content {
    display: flex;
    align-items: center;
}

#success-message .icon {
    color: #22c55e;
    margin-right: 0.75rem;
}

#success-message h3 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #166534;
}

#success-message p {
    font-size: 0.875rem;
    color: #15803d;
    margin-top: 0.25rem;
}

#forgot-password-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

#forgot-password-footer .text-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#forgot-password-footer p {
    font-size: 0.875rem;
    color: var(--brand-gray);
}

#forgot-password-footer a {
    color: var(--brand-gold);
    font-weight: 500;
    transition: color 0.2s;
    cursor: pointer;
    text-decoration: none;
}

#forgot-password-footer a:hover {
    color: rgba(217, 160, 63, 0.8);
}

#security-note {
    margin-top: 1.5rem;
    text-align: center;
}

#security-note p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

#security-note i {
    margin-right: 0.25rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#footer .container .flex.justify-between.items-center{
    justify-content: space-between;
}

/* admin access */
/* Admin Access Page Styles
  ---
  Styles specific to the admin login page.
*/

body.admin-page {
    background-image: linear-gradient(135deg, #1f2937 0%, #374151 50%, #4b5563 100%);
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.admin-page-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.admin-page-wrapper .background-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
    z-index: -1;
}

.admin-page-wrapper #header {
    position: relative;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-page-wrapper #header #brand-logo {
    font-size: 1.25rem;
}

.admin-page-wrapper #header .header-icon-container {
    width: 2rem;
    height: 2rem;
    background-color: var(--admin-red, #dc2626);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-page-wrapper #header .header-icon-container i {
    color: white;
    font-size: 0.875rem;
}

.admin-page-wrapper #nav-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}
.admin-page-wrapper #nav-links a:hover {
    color: white;
}

#admin-login-main {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 1.5rem;
    min-height: 100vh;
}

#admin-login-container {
    width: 100%;
    max-width: 32rem; /* max-w-lg */
}

#admin-login-card {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.6s ease-out;
}

#admin-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

#admin-login-header .icon-container {
    width: 5rem;
    height: 5rem;
    background-color: rgba(220, 38, 38, 0.1);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
#admin-login-header .icon-container i {
    color: var(--admin-red, #dc2626);
    font-size: 1.875rem;
}
#admin-login-header h1 {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}
#admin-login-header p {
    color: var(--brand-gray);
    font-size: 0.875rem;
    line-height: 1.625;
}

#security-banner {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
}
#security-banner .content {
    display: flex;
    align-items: center;
}
#security-banner .icon {
    color: #ef4444;
    margin-right: 0.75rem;
}
#security-banner h3 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #991b1b;
}
#security-banner p {
    font-size: 0.875rem;
    color: #b91c1c;
    margin-top: 0.25rem;
}

#admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-dark);
}

.input-with-icon {
    position: relative;
}


.input-with-icon input {
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s;
    color: var(--brand-dark);
}
.input-with-icon input::placeholder {
    color: rgba(107, 114, 128, 0.6);
}

.input-with-icon input:focus {
    outline: none;
    --tw-ring-color: var(--admin-red, #dc2626);
    box-shadow: 0 0 0 2px var(--tw-ring-color);
    border-color: transparent;
}

#toggle-password {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-right: 0.75rem;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}
#toggle-password i {
    color: var(--brand-gray);
    transition: color 0.2s;
}
#toggle-password:hover i {
    color: var(--brand-dark);
}

#two-factor-field input {
    text-align: center;
    font-size: 1.125rem;
    letter-spacing: 0.2em;
}

#remember-me input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
    color: var(--admin-red, #dc2626);
    border-color: #d1d5db;
    border-radius: 0.25rem;
}
#remember-me input[type="checkbox"]:focus {
    --tw-ring-color: var(--admin-red, #dc2626);
}
#remember-me label {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--brand-gray);
}
#remember-me .forgot-password-link {
    font-size: 0.875rem;
    color: var(--admin-red, #dc2626);
    transition: color 0.2s;
    cursor: pointer;
}
#remember-me .forgot-password-link:hover {
    color: rgba(220, 38, 38, 0.8);
}

#login-button {
    background-color: var(--admin-red, #dc2626);
    width: 100%;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}
#login-button:hover {
    background-color: rgba(220, 38, 38, 0.9);
    transform: scale(1.02);
}
#login-button:focus {
    outline: none;
    --tw-ring-color: var(--admin-red, #dc2626);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--tw-ring-color);
}
#login-button:disabled {
    opacity: 0.75;
}

#error-message {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
}

#admin-features {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}
#admin-features h4 {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
}
#admin-features .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--brand-gray);
}
#admin-features .feature-item {
    display: flex;
    align-items: center;
}
#admin-features .feature-item svg,
#admin-features .feature-item i {
    color: var(--brand-gold);
    margin-right: 0.5rem;
}

#security-footer {
    margin-top: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#security-footer p {
    font-size: 0.75rem;
}
#security-footer .security-priority {
    color: rgba(255, 255, 255, 0.7);
}
#security-footer .session-timeout {
    color: rgba(255, 255, 255, 0.5);
}

.admin-page-wrapper #footer {
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: auto;
}
.admin-page-wrapper #footer .container > div {
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*journal  page*/

/* Journal Guidelines Page Styles
  ---
  Styles specific to the journal guidelines page.
*/

#guidelines-main #page-header {
    text-align: center;
    margin-bottom: 3rem;
}

#guidelines-main{
    margin-bottom: 3rem;
}
#guidelines-main #page-header h1 {
    font-size: 2.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}

#guidelines-main #page-header p {
    font-size: 1.25rem;
    color: var(--brand-gray);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.625;
}

#content-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

#content-toggle .toggle-container {
    background-color: white;
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
}

#content-toggle button {
    padding: 0.5rem 1.5rem;
    border: none;
    background: none;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}

#content-toggle button.active {
    background-color: var(--brand-gold);
    color: white;
}

#content-toggle button:not(.active) {
    color: var(--brand-gray);
}

#content-toggle button:not(.active):hover {
    color: var(--brand-dark);
}

#video-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    #video-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

.video-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    overflow: hidden;
}

.video-thumbnail {
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    text-align: center;
}

.video-thumbnail .play-icon-container {
    width: 4rem;
    height: 4rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}
.video-thumbnail .play-icon-container i {
    font-size: 1.5rem;
}
.video-thumbnail h3 {
    font-size: 1.125rem;
    font-weight: 500;
}
.video-thumbnail p {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

.video-card-content {
    padding: 1.5rem;
}
.video-card-content h4 {
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
}
.video-card-content p {
    color: var(--brand-gray);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.video-card-content .watch-video-btn {
    width: 100%;
    background-color: var(--brand-gold);
    color: white;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}
.video-card-content .watch-video-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}

#text-content {
    display: none;
    flex-direction: column;
    gap: 2rem;
}

/*
 * Taking an uploaded file off again.
 *
 * Ten of the journal's eighteen upload points had no way back: a picture, an
 * ethics letter or a CV could be swapped for another one for ever, but never
 * removed. This is the control that undoes them, and it looks the same at all
 * of them so it reads as the same action.
 */
.file-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 3px 7px;
    border-radius: 5px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: #b91c1c;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

/* display:inline-flex above ties with .hidden on specificity and wins on source
   order, so a button told to hide stayed on screen. This settles it. */
.file-remove.hidden {
    display: none;
}

.file-remove:hover,
.file-remove:focus-visible {
    background: #fef2f2;
    color: #991b1b;
}

.file-remove:focus-visible {
    outline: 2px solid #b91c1c;
    outline-offset: 1px;
}

.file-remove[disabled] {
    opacity: .5;
    cursor: progress;
}

.file-remove svg {
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
}

/* The line a chosen file is named on, with its remove beside it. */
.file-chosen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/*
 * A sub-heading run into its own line.
 *
 * A structured abstract reads "Background: the tumour was...", with the label
 * part of the sentence. A heading is a block, so marking "Background:" as one
 * pushed the rest of the sentence onto the next line and split a paragraph that
 * was never two. This is what the editor writes instead, and it has to look the
 * same wherever a paper is shown — the wizard, the reader pages, the PDF.
 *
 * It is a <b> underneath, so it still reads as a heading on any page that has
 * not been told about this class.
 */
.wysiwyg-editor b.sub-heading,
.paper-content b.sub-heading,
.summary-editor-content b.sub-heading,
.paper-text b.sub-heading,
.selectable-text b.sub-heading,
.paper-section-paragraph b.sub-heading {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    color: var(--brand-dark, #1a202c);
}

.text-guideline-section {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    padding: 2rem;
}

/*
 * The box somebody was sent to by a link from another page — "how this works"
 * on the premium upload page — marked for a moment so it is obvious which one
 * was meant. Both kinds of box can be a destination, the video card and the
 * written section.
 *
 * They are given tabindex="-1" so the caret and a screen reader land on them
 * too, which draws a focus outline of its own; the ring below is the outline.
 */
.video-card,
.text-guideline-section {
    scroll-margin-top: 1.5rem;
}

.video-card:focus,
.text-guideline-section:focus {
    outline: none;
}

.video-card.guideline-arrival,
.text-guideline-section.guideline-arrival {
    /* Long enough to still be there once a slow page has settled and the
       smooth scroll has finished, then out of the way. */
    animation: guideline-arrival 4s ease-out 1;
}

@keyframes guideline-arrival {
    0%, 65% {
        box-shadow: 0 0 0 3px var(--brand-gold, #d4af37),
                    0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0),
                    0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-card.guideline-arrival,
    .text-guideline-section.guideline-arrival {
        animation: none;
        box-shadow: 0 0 0 3px var(--brand-gold, #d4af37),
                    0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }
}
.text-guideline-section h3 {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}
.text-guideline-section h3 svg ,
.text-guideline-section h3 i {
    color: var(--brand-gold);
    margin-right: 0.75rem;
}
.text-guideline-section .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .text-guideline-section .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
.text-guideline-section h4 {
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
}
.text-guideline-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--brand-gray);
}
.text-guideline-section .review-process p {
    margin: 0 0 1rem 0;
}

#quick-help {
    margin-top: 3rem;
    background-image: linear-gradient(to right, var(--brand-blue), var(--soft-ocean-blue));
    border-radius: 0.75rem;
    padding: 2rem;
    color: white;
    text-align: center;
}
#quick-help h3 {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    margin-bottom: 1rem;
}
#quick-help p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}
#quick-help .help-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
@media (min-width: 640px) {
    #quick-help .help-buttons {
        flex-direction: row;
    }
}
#quick-help .help-buttons a ,
#quick-help .help-buttons button {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    border: none;
    text-decoration: unset;
    cursor: pointer;
}
#quick-help .help-buttons .contact-btn {
    background-color: var(--brand-gold);
    color: white;
}
#quick-help .help-buttons .contact-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}
#quick-help .help-buttons .faq-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}
#quick-help .help-buttons .faq-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

#guidelines-main + #footer {
    margin-top: 4rem;
    background-color: var(--brand-dark);
}
#guidelines-main + #footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    #guidelines-main + #footer .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
#guidelines-main + #footer h4 {
    font-weight: 600;
    margin-bottom: 1rem;
}
#guidelines-main + #footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #d1d5db;
    font-size: 0.875rem;
}
#guidelines-main + #footer .social-links {
    display: flex;
    gap: 1rem;
    color: #d1d5db;
}
#guidelines-main + #footer .footer-bottom {
    border-top: 1px solid #4b5563;
    margin-top: 2rem;
    padding-top: 1.5rem;
    text-align: center;
    color: #d1d5db;
    font-size: 0.875rem;
}


/* Privacy Policy Page Styles
  ---
  Styles specific to the privacy policy page.
*/

#privacy-main #page-header {
    text-align: center;
    margin-bottom: 3rem;
}

#privacy-main #page-header .icon-container {
    width: 4rem;
    height: 4rem;
    background-color: var(--brand-gold);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

#privacy-main #page-header .icon-container i {
    color: white;
    font-size: 1.5rem;
}

#privacy-main #page-header h1 {
    font-size: 2.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}

#privacy-main #page-header p {
    font-size: 1.25rem;
    color: var(--brand-gray);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.625;
}

#privacy-main #page-header .last-updated {
    font-size: 0.875rem;
    color: var(--brand-gray);
    margin-top: 1rem;
}

#privacy-main #page-header .last-updated span {
    background-color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

#privacy-navigation {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    padding: 1rem;
    margin-bottom: 2rem;
    position: sticky;
    top: 0px;
    z-index: 2;
}

#privacy-navigation h3 {
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin: 0;
    margin-bottom: 1rem;
}

#privacy-navigation .nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

#privacy-main{
    padding-top: 20px;
}

@media (min-width: 768px) {
    #privacy-navigation .nav-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

#privacy-navigation .nav-btn {
    text-align: left;
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

#privacy-navigation .nav-btn:hover {
    background-color: var(--brand-cream);
}

#privacy-navigation .nav-btn svg,
#privacy-navigation .nav-btn i {
    color: var(--brand-gold);
    margin-right: 10px;
}

#privacy-navigation .nav-btn span {
    font-size: 0.875rem;
     color: var(--brand-gold);
}

#privacy-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.privacy-section {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    padding: 2rem;
}

.privacy-section .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.privacy-section .section-header .icon-container {
    width: 3rem;
    height: 3rem;
    background-color: rgba(217, 160, 63, 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    margin: 0;
}
.privacy-section .section-header .icon-container svg,
.privacy-section .section-header .icon-container i {
    color: var(--brand-gold);
    font-size: 1.25rem;
}

.privacy-section .section-header h2 {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin: 0;
    padding-left: 5px;
}

.privacy-section .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .privacy-section .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.privacy-section .info-card {
    border: 1px solid var(--brand-cream);
    border-radius: 0.5rem;
    padding: 1rem;
}

.privacy-section .info-card h4 {
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
.privacy-section .info-card h4 svg ,
.privacy-section .info-card h4 i {
    color: var(--brand-gold);
    margin-right: 0.5rem;
}

.privacy-section .info-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--brand-gray);
    font-size: 0.875rem;
}

.privacy-section .info-box {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
}
.privacy-section .info-box.blue {
    background-color: #eff6ff;
    border-left: 4px solid var(--brand-blue);
}
.privacy-section .info-box.yellow {
    background-color: #fefce8;
    border-left: 4px solid #f59e0b;
}

.privacy-section .info-box p {
    margin: 0;
    color: var(--brand-dark);
    font-size: 0.875rem;
}
.privacy-section .info-box svg ,
.privacy-section .info-box i {
    margin-right: 0.5rem;
}
.privacy-section .info-box.blue i { color: var(--brand-blue); }
.privacy-section .info-box.yellow i { color: #ca8a04; }

#data-usage .usage-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
#data-usage .usage-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
#data-usage .usage-item .icon-container {
    width: 2rem;
    height: 2rem;
    background-color: #dcfce7;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    margin-top: 0.25rem;
}
#data-usage .usage-item .icon-container i {
    color: #16a34a;
    font-size: 0.875rem;
}
#data-usage .usage-item h4 {
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
    margin-top: 0;
}
#data-usage .usage-item p {
    color: var(--brand-gray);
    margin-top: 0;
}

#data-sharing .sharing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    #data-sharing .sharing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
#data-sharing .sharing-card {
    border-radius: 0.5rem;
    padding: 1.5rem;
}
#data-sharing .sharing-card.do-share {
    border: 2px solid #bbf7d0;
}
#data-sharing .sharing-card.dont-share {
    border: 2px solid #fecaca;
}
#data-sharing .sharing-card h4 {
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
#data-sharing .sharing-card.do-share h4 { color: #166534; }
#data-sharing .sharing-card.dont-share h4 { color: #991b1b; }
#data-sharing .sharing-card h4 svg,
#data-sharing .sharing-card h4 i
 { margin-right: 0.5rem; }
#data-sharing .sharing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--brand-gray);
    font-size: 0.875rem;
}

#your-rights .rights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    #your-rights .rights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    #your-rights .rights-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
#your-rights .right-card {
    text-align: center;
    padding: 1rem;
    border: 1px solid var(--brand-cream);
    border-radius: 0.5rem;
}
#your-rights .right-card .icon-container {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}
#your-rights .right-card .icon-container.blue { background-color: #dbeafe; }
#your-rights .right-card .icon-container.green { background-color: #dcfce7; }
#your-rights .right-card .icon-container.purple { background-color: #e0e7ff; }
#your-rights .right-card .icon-container.red { background-color: #fee2e2; }
#your-rights .right-card .icon-container i {
    font-size: 1rem;
}
#your-rights .right-card .icon-container.blue i { color: #2563eb; }
#your-rights .right-card .icon-container.green i { color: #16a34a; }
#your-rights .right-card .icon-container.purple i { color: #4f46e5; }
#your-rights .right-card .icon-container.red i { color: #dc2626; }
#your-rights .right-card h4 {
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}
#your-rights .right-card p {
    color: var(--brand-gray);
    font-size: 0.875rem;
}
#your-rights .contact-box {
    margin-top: 2rem;
    background-image: linear-gradient(to right, var(--brand-blue), var(--soft-ocean-blue));
    border-radius: 0.5rem;
    padding: 1.5rem;
    color: white;
    text-align: center;
}
#your-rights .contact-box h4 {
    font-weight: 600;
    margin-bottom: 0.75rem;
}
#your-rights .contact-box p {
    margin-bottom: 1rem;
    opacity: 0.9;
}
#your-rights .contact-box button {
    background-color: var(--brand-gold);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}
#your-rights .contact-box button:hover {
    background-color: rgba(217, 160, 63, 0.9);
}

#security-measures .security-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    #security-measures .security-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
#security-measures .security-item {
    text-align: center;
}
#security-measures .security-item .icon-container {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
#security-measures .security-item .icon-container svg ,
#security-measures .security-item .icon-container i {
    font-size: 1.25rem;
}


/* Terms of Use Page Styles
  ---
  Styles specific to the terms of use page.
*/

#terms-main #hero-section-terms {
    background-image: linear-gradient(to bottom right, var(--brand-blue), var(--soft-ocean-blue), var(--brand-blue));
    height: 300px;
    position: relative;
    overflow: hidden;
}

#terms-main #hero-section-terms .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

#terms-main #hero-section-terms .hero-content {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

#terms-main #hero-section-terms .hero-content .max-width-container {
    max-width: 56rem;
}

#terms-main #hero-section-terms .hero-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

#terms-main #hero-section-terms .hero-header .icon-container {
    width: 4rem;
    height: 4rem;
    background-color: rgba(217, 160, 63, 0.2);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-right: 1rem;
}

#terms-main #hero-section-terms .hero-header svg ,
#terms-main #hero-section-terms .hero-header i {
    color: var(--brand-gold);
    font-size: 1.5rem;
}

#terms-main #hero-section-terms h1 {
    font-size: 3rem;
    line-height: 120%;
    font-family: var(--font-heading);
    color: white;
    margin: 0;
    margin-bottom: 0rem;
}

#terms-main #hero-section-terms .subtitle {
    margin: 0;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
}

#terms-main #hero-section-terms .hero-description-box {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#terms-main #hero-section-terms .hero-description-box p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    line-height: 1.625;
}

#terms-main #hero-section-terms .last-updated {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.7);
}
#terms-main #hero-section-terms .last-updated svg ,
#terms-main #hero-section-terms .last-updated i {
    margin-right: 0.5rem;
}
#terms-main #hero-section-terms .last-updated span {
    font-size: 0.875rem;
}

#terms-navigation {
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 2;
}

#terms-navigation .nav-container {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 1rem 0;
}

#terms-navigation .nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
}

#terms-navigation .nav-btn.active {
    background-color: var(--brand-cream);
    color: var(--brand-dark);
}

#terms-navigation .nav-btn:not(.active) {
    color: var(--brand-gray);
}

#terms-navigation .nav-btn:not(.active):hover {
    background-color: #f3f4f6;
}

#terms-navigation .nav-btn svg ,
#terms-navigation .nav-btn i {
    font-size: 0.875rem;
}

#terms-content {
    padding: 3rem 0;
    padding-top: 0;
}

#terms-content .content-container {
    max-width: 56rem;
    margin: 0 auto;
}

.terms-section {
    padding-top: 4rem;
}

.terms-section .section-card {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    padding: 2rem;
    border-left: 4px solid;
}
.terms-section .section-card.gold-border { border-color: var(--brand-gold); }
.terms-section .section-card.blue-border { border-color: #3b82f6; }
.terms-section .section-card.purple-border { border-color: #8b5cf6; }
.terms-section .section-card.red-border { border-color: #ef4444; }
.terms-section .section-card.indigo-border { border-color: #6366f1; }
.terms-section .section-card.orange-border { border-color: #f97316; }

.terms-section .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}
.terms-section .section-header .icon-container {
    margin: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}
.terms-section .section-header .icon-container i { font-size: 1.25rem; }

.terms-section .section-header .icon-container.gold { background-color: rgba(217, 160, 63, 0.1); }
.terms-section .section-header .icon-container.gold i { color: var(--brand-gold); }
.terms-section .section-header .icon-container.blue { background-color: rgba(59, 130, 246, 0.1); }
.terms-section .section-header .icon-container.blue i { color: #3b82f6; }
.terms-section .section-header .icon-container.purple { background-color: rgba(139, 92, 246, 0.1); }
.terms-section .section-header .icon-container.purple i { color: #8b5cf6; }
.terms-section .section-header .icon-container.red { background-color: rgba(239, 68, 68, 0.1); }
.terms-section .section-header .icon-container.red i { color: #ef4444; }
.terms-section .section-header .icon-container.indigo { background-color: rgba(99, 102, 241, 0.1); }
.terms-section .section-header .icon-container.indigo i { color: #6366f1; }
.terms-section .section-header .icon-container.orange { background-color: rgba(249, 115, 22, 0.1); }
.terms-section .section-header .icon-container.orange i { color: #f97316; }

.terms-section .section-header h2 {
    font-size: 1.875rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin: 0;
}

.terms-section .prose {
    line-height: 1.75;
}
.terms-section .prose p {
    margin: 0;
    color: var(--brand-gray);
    margin-bottom: 1rem;
}
.terms-section .prose .info-box {
    background-color: rgba(251, 248, 240, 0.5);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1.5rem 0;
}
.terms-section .prose .info-box h4 {
    margin: 0;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}
.terms-section .prose .info-box h4 svg ,
.terms-section .prose .info-box h4 i {
    color: var(--brand-gold);
    margin-right: 0.5rem;
}
.terms-section .prose .info-box p {
    font-size: 0.875rem;
    color: var(--brand-gray);
    margin-bottom: 0;
}

#services-section .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    #services-section .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
#services-section .service-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
}
#services-section .service-card.submission { background-image: linear-gradient(to bottom right, #eff6ff, #e0e7ff); }
#services-section .service-card.editorial { background-image: linear-gradient(to bottom right, #f0fdf4, #dcfce7); }
#services-section .service-card h4 {
    margin: 0;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
#services-section .service-card.submission h4 svg,
#services-section .service-card.submission h4 i
 { color: #3b82f6; }
#services-section .service-card.editorial h4 i,
#services-section .service-card.editorial h4 svg
 { color: #16a34a; }
#services-section .service-card h4 i,
#services-section .service-card h4 svg
 { margin-right: 0.5rem; }
#services-section .service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--brand-gray);
    font-size: 0.875rem;
}

#accounts-section .account-info-box {
    background-color: #f5f3ff;
    border-radius: 0.75rem;
    padding: 1.5rem;
}
#accounts-section .account-info-box h4 {
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 1rem;
}
#accounts-section .account-info-box p {
    margin: 0;
    color: var(--brand-gray);
    margin-bottom: 1rem;
}
#accounts-section .account-info-box .security-features {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#accounts-section .account-info-box .security-features .feature {
    display: flex;
    align-items: center;
    color: #16a34a;
}
#accounts-section .account-info-box .security-features .feature svg ,
#accounts-section .account-info-box .security-features .feature i {
    margin-right: 0.5rem;
}
#accounts-section .account-info-box .security-features .feature span {
    font-size: 0.875rem;
}

#content-section .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    #content-section .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
#content-section .content-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
}
#content-section .content-card.ethical { background-color: #fee2e2; }
#content-section .content-card.prohibited { background-color: #fef3c7; }
#content-section .content-card.quality { background-color: #dcfce7; }
#content-section .content-card h4 {
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
#content-section .content-card.ethical h4 i { color: #ef4444; }
#content-section .content-card.ethical h4 svg { color: #ef4444; }
#content-section .content-card.prohibited h4 i { color: #d97706; }
#content-section .content-card.prohibited h4 svg { color: #d97706; }
#content-section .content-card.quality h4 i { color: #16a34a; }
#content-section .content-card.quality h4 svg { color: #16a34a; }
#content-section .content-card h4 i { margin-right: 0.5rem; }
#content-section .content-card h4 svg { margin-right: 0.5rem; }
#content-section .content-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--brand-gray);
    font-size: 0.875rem;
}

#payment-section .payment-info-box {
    background-image: linear-gradient(to right, rgba(217, 160, 63, 0.1), #fef9c3);
    border-radius: 0.75rem;
    padding: 1.5rem;
}
#payment-section .payment-info-box p {
    margin: 0;
    color: var(--brand-gray);
    line-height: 1.625;
    margin-bottom: 1rem;
}
#payment-section .payment-info-box .payment-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
#payment-section .payment-info-box .payment-features .feature {
    display: flex;
    align-items: center;
    color: var(--brand-dark);
}
#payment-section .payment-info-box .payment-features .feature svg ,
#payment-section .payment-info-box .payment-features .feature i {
    color: var(--brand-gold);
    margin-right: 0.5rem;
}
#payment-section .payment-info-box .payment-features .feature span {
    font-size: 0.875rem;
    font-weight: 500;
}

#intellectual-section .ip-rights-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
#intellectual-section .ip-rights-list .ip-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
}
#intellectual-section .ip-rights-list .ip-card.author { background-color: #e0e7ff; }
#intellectual-section .ip-rights-list .ip-card.platform { background-color: #f3f4f6; }
#intellectual-section .ip-rights-list .ip-card h4 {
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
}
#intellectual-section .ip-rights-list .ip-card p {
    color: var(--brand-gray);
}

#limitation-section .limitation-info-box {
    background-color: #fff7ed;
    border-radius: 0.75rem;
    padding: 1.5rem;
}
#limitation-section .limitation-info-box p {
    color: var(--brand-gray);
    line-height: 1.625;
}


/* Universal Footer Styles
  ---
  These styles will apply to the main footer across all pages.
*/

#universal-footer {
    position: relative;
    z-index: 10;
    background-color: rgba(26, 44, 66, 0.9);
    backdrop-filter: blur(4px);
    /* border-top: 1px solid rgba(251, 248, 240, 0.2); */
}

#universal-footer-content {
    max-width: 1500px; /* max-w-6xl */
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 2rem;
}

@media (min-width: 768px) {
    #universal-footer-content {
        padding: 3rem 2rem;
    }
}

#universal-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    #universal-footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

#footer-brand .brand-name {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    color: var(--brand-cream);
    margin-bottom: 1rem;
    display: block;
}

#footer-brand .brand-tagline {
    color: rgba(251, 248, 240, 0.7);
    font-size: 0.875rem;
    line-height: 1.625;
}

.footer-column h4 {
    color: var(--brand-cream);
    font-family: var(--font-sans);
    font-weight: 500;
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-column ul li a ,
.footer-column ul li span {
    color: rgba(251, 248, 240, 0.7);
    transition: color 0.2s;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: unset;
}

.footer-column ul li a:hover ,
.footer-column ul li span:hover {
    color: var(--brand-gold);
}

#footer-bottom {
    border-top: 1px solid rgba(251, 248, 240, 0.2);
    margin-top: 2rem;
    padding-top: 1.5rem;
    text-align: center;
}

#footer-bottom p {
    color: rgba(251, 248, 240, 0.6);
    font-size: 0.875rem;
    margin: 0;
}


.not-frequency-settoing{
    display: inline-block;
    margin: 20px 0;
    width: 100%;
}
.not-frequency-settoing label{
    padding-bottom: 10px;
    display: inline-block;
}

.not-frequency-settoing .remove-tag {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #e1af5a;
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            line-height:14px;
            transition: background-color 0.2s;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translate(0, -50%);
            padding-top: 1px;
        }

    .not-frequency-settoing    .remove-tag:hover {
            background-color: #555;
        }
        #research-interests .interest-tag{
            position: relative;
            padding-right: 30px;
        }

/* About Us Page Styles
  ---
  Styles specific to the about us page.
*/

#about-page {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

#hero-about {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 2rem;
}

#hero-about .icon-container {
    width: 5rem;
    height: 5rem;
    background-color: rgba(217, 160, 63, 0.1);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

#hero-about .icon-container i {
    font-size: 1.875rem;
    color: var(--brand-gold);
}

#hero-about h1 {
    font-size: 3rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
}

#hero-about p {
    font-size: 1.25rem;
    color: var(--brand-gray);
    line-height: 1.625;
}

#mission-section {
    margin-bottom: 5rem;
}

#mission-section .mission-card {
    background-image: linear-gradient(to bottom right, white, var(--brand-cream), rgba(147, 197, 253, 0.1));
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 3rem;
    max-width: 900px;
    margin: auto;
}

@media (min-width: 768px) {
    #mission-section .mission-card {
        padding: 4rem;
    }
}

#mission-section .mission-card .content {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

#mission-section .mission-card h2 {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 2rem;
}

#mission-section .mission-card .mission-text {
    font-size: 1.125rem;
    color: var(--brand-gray);
    line-height: 1.625;
    margin-bottom: 2rem;
}
#mission-section .mission-card .mission-text strong{
    color: var(--brand-gold);
}

#mission-section .quote-box {
    background-image: linear-gradient(to right, rgba(217, 160, 63, 0.2), rgba(254, 215, 170, 0.3), rgba(147, 197, 253, 0.2));
    border-radius: 1rem;
    padding:1.5rem;
    border: 1px solid rgba(217, 160, 63, 0.3);
}

#mission-section .quote-box p {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-dark);
    font-style: italic;
}

#values-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 5rem;
}

@media (min-width: 768px) {
    #values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    #values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.value-card {
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transition: all 0.2s;
}
.value-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.value-card .icon-container {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.value-card .icon-container i {
    font-size: 1.5rem;
    color: white;
}
.value-card h3 {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}
.value-card p {
    color: var(--brand-gray);
    line-height: 1.625;
}

#team-section {
    margin-bottom: 5rem;
}
#team-section .section-header {
    text-align: center;
    margin-bottom: 4rem;
}
#team-section .section-header h2 {
    font-size: 2.25rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
}
#team-section .section-header p {
    font-size: 1.125rem;
    color: var(--brand-gray);
    max-width: 42rem;
    margin: 0 auto;
}

#team-section .design-elements-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    #team-section .design-elements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    #team-section .design-elements-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.design-element-card {
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transition: all 0.2s;
}
.design-element-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.design-element-card .icon-container {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.design-element-card .icon-container i {
    font-size: 1.875rem;
    color: white;
}
.design-element-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}
.design-element-card p {
    font-size: 0.875rem;
    color: var(--brand-gray);
}

#partnership-logos {
    margin-bottom: 5rem;
}
#partnership-logos .section-header {
    text-align: center;
    margin-bottom: 3rem;
}
#partnership-logos .section-header h2 {
    font-size: 1.875rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}
#partnership-logos .section-header p {
    font-size: 1.125rem;
    color: var(--brand-gray);
}
#partnership-logos .logos-container {
    background-image: linear-gradient(to bottom right, white, var(--brand-cream), rgba(147, 197, 253, 0.1));
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    border: 1px solid rgba(217, 160, 63, 0.3);
    padding: 3rem;
}
#partnership-logos .logos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    #partnership-logos .logos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border-radius: 1rem;
    transition: all 0.2s;
}
.logo-item:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.logo-item .icon-container {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.logo-item .icon-container i {
    font-size: 1.5rem;
    color: white;
}
.logo-item span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-dark);
}

#recognition-badges {
    margin-bottom: 5rem;
}
#recognition-badges .badges-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    #recognition-badges .badges-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.badge-card {
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    border-width: 2px;
    transition: all 0.2s;
}
.badge-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.badge-card .icon-container {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.badge-card .icon-container i {
    font-size: 1.875rem;
    color: white;
}
.badge-card h3 {
    font-size: 1.25rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}
.badge-card p {
    font-size: 0.875rem;
    color: var(--brand-gray);
}

#cta-section .cta-card {
    background-image: linear-gradient(to right, var(--brand-blue), var(--brand-gold));
    border-radius: 1.5rem;
    padding: 3rem;
    text-align: center;
    color: white;
}
@media (min-width: 768px) {
    #cta-section .cta-card {
        padding: 4rem;
    }
}
#cta-section .cta-card h2 {
    font-size: 2.25rem;
    font-family: var(--font-serif);
    margin-bottom: 1.5rem;
}
#cta-section .cta-card p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}
#cta-section .cta-card .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
@media (min-width: 640px) {
    #cta-section .cta-card .cta-buttons {
        flex-direction: row;
    }
}
#cta-section .cta-card .cta-buttons a {
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    text-decoration: unset;
}
#cta-section .cta-card .cta-buttons .submit-btn {
    background-color: white;
    color: var(--brand-blue);
}
#cta-section .cta-card .cta-buttons .submit-btn:hover {
    background-color: #f3f4f6;
}
#cta-section .cta-card .cta-buttons .browse-btn {
    border: 2px solid white;
    color: white;
    background: none;
}
#cta-section .cta-card .cta-buttons .browse-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}




.credibility-box {
    background:#fff;
    border-radius: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--brand-gold-transparent);
    padding: 1.5rem;
    margin-bottom: 4rem;
}

.credibility-text-center {
    text-align: center;
}

.credibility-heading {
    font-size: 1.875rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 2rem;
    margin-top: 0;
}

.credibility-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .credibility-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .credibility-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.credibility-item {
    padding: 1rem;
    text-align: center;
}

.credibility-number {
    font-size: 1.875rem;
    font-weight: bold;
    color: var(--brand-gold);
    margin-bottom: 0.5rem;
}

.credibility-description {
    font-size: 0.875rem;
    color: var(--brand-gray);
}


/* Statistics Page Styles
  ---
  Styles specific to the statistics page, scoped under .statistics-page
*/

.statistics-page #statistics-main {
    min-height: 100vh;
}

.statistics-page #hero-section {
    background-image: linear-gradient(to bottom right, var(--brand-blue), var(--soft-ocean-blue), var(--brand-blue));
    height: 500px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.statistics-page #hero-section .hero-content {
    text-align: center;
    max-width: 64rem;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.statistics-page #hero-section .hero-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(217, 160, 63, 0.2);
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}
.statistics-page #hero-section .hero-badge svg ,
.statistics-page #hero-section .hero-badge i {
    color: var(--brand-gold);
    margin-right: 0.75rem;
    font-size: 1.25rem;
}
.statistics-page #hero-section .hero-badge span {
    color: white;
    font-weight: 500;
}

.statistics-page #hero-section h1 {
    font-size: 3.75rem;
    font-family: var(--font-heading);
    color: white;
    margin-bottom: 1.5rem;
}

.statistics-page #hero-section p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.625;
    max-width: 48rem;
    margin: 0 auto;
}

.statistics-page #hero-section .stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .statistics-page #hero-section .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.statistics-page #hero-section .stat-item {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.statistics-page #hero-section .stat-item .stat-value {
    font-size: 2.25rem;
    font-family: var(--font-heading);
    color: var(--brand-gold);
    margin-bottom: 0.5rem;
}
.statistics-page #hero-section .stat-item .stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.statistics-page #speed-comparison {
    padding: 5rem 0;
    background-color: white;
}
.statistics-page .section-header {
    text-align: center;
    margin-bottom: 4rem;
}
.statistics-page .section-header h2 {
    font-size: 2.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}
.statistics-page #testimonials .section-header h2 {
    color: var(--brand-cream);
}
.statistics-page .section-header p {
    font-size: 1.25rem;
    color: var(--brand-gray);
    max-width: 48rem;
    margin: 0 auto;
}
.statistics-page #speed-comparison .comparison-grid {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .statistics-page #speed-comparison .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.statistics-page #speed-comparison .timelines {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.timeline-card {
    border-radius: 1rem;
    padding: 1.5rem;
}
.timeline-card.traditional {
    background-image: linear-gradient(to right, #fee2e2, #fecaca);
}
.timeline-card.medjournal {
    background-image: linear-gradient(to right, #f0fdf4, #dcfce7);
}
.timeline-card h3 {
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
.timeline-card h3 svg,
.timeline-card h3 i {
    margin-right: 0.75rem;
}
.timeline-card.traditional h3 i,
.timeline-card.traditional h3 svg
 { color: #ef4444; }
.timeline-card.medjournal h3 i,
.timeline-card.medjournal h3 svg
 { color: #22c55e; }
.timeline-card .timeline-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.timeline-card .timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.timeline-card .timeline-item .label {
    color: var(--brand-gray);
}
.timeline-card .timeline-item .value {
    font-weight: 600;
}
.timeline-card.traditional .timeline-item .value { color: #b91c1c; }
.timeline-card.medjournal .timeline-item .value { color: #15803d; }

.statistics-page #quality-metrics {
    padding: 5rem 0;
    background-image: linear-gradient(to bottom right, rgba(26, 44, 66, 0.05), rgba(58, 80, 107, 0.05));
}
.statistics-page #quality-metrics .metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}
@media (min-width: 768px) {
    .statistics-page #quality-metrics .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .statistics-page #quality-metrics .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.metric-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}
.metric-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.metric-card .icon-container {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.metric-card .icon-container i {
    font-size: 1.5rem;
}
.metric-card .value {
    font-size: 1.875rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}
.metric-card .label {
    color: var(--brand-gray);
}
.metric-card .sub-label {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.statistics-page #indexing-section {
    padding: 5rem 0;
    background-color: white;
}
.statistics-page #indexing-section .indexing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .statistics-page #indexing-section .indexing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .statistics-page #indexing-section .indexing-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
.indexing-item {
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}
.indexing-item .name {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}
.indexing-item .source {
    font-size: 0.875rem;
    color: var(--brand-gray);
}

.statistics-page #global-impact {
    padding: 5rem 0;
    background-image: linear-gradient(to bottom right, rgba(26, 44, 66, 0.05), rgba(58, 80, 107, 0.05));
}
.statistics-page #global-impact .impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .statistics-page #global-impact .impact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.statistics-page #global-impact .impact-chart-container {
    grid-column: span 1 / span 1;
}
@media (min-width: 1024px) {
    .statistics-page #global-impact .impact-chart-container {
        grid-column: span 2 / span 2;
    }
}
.statistics-page #global-impact .impact-chart-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    height: 100%;
}
.statistics-page #global-impact .impact-chart-card h3 {
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
}
.statistics-page #global-impact .impact-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 48rem;
    margin: 0 auto;
}
.impact-stat-item {
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.impact-stat-item .value {
    font-size: 1.875rem;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}
.impact-stat-item .label {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.statistics-page #global-impact .impact-kpis {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.kpi-card {
    background-color: white;
    border-radius: 1rem;
    padding:1rem 2rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kpi-card .kpi-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.kpi-card .kpi-header svg ,
.kpi-card .kpi-header i {
    font-size: 14px;
    margin-right: 1rem;
}
.kpi-card .kpi-header h4 {
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin: 0;
}
.kpi-card .kpi-value {
    font-size: 2.25rem;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}
.kpi-card .kpi-label {
    font-size: 1.125rem;
    color: var(--brand-gray);
}

.statistics-page #pricing-section {
    padding: 5rem 0;
    background-image: linear-gradient(to bottom right, rgba(26, 44, 66, 0.05), rgba(58, 80, 107, 0.05));
}
.statistics-page #pricing-section .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 80rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .statistics-page #pricing-section .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .statistics-page #pricing-section .pricing-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.pricing-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
    border: 1px solid #f3f4f6;
}
.pricing-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.pricing-card .card-header {
    text-align: center;
}
.pricing-card .card-header .icon-container {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.pricing-card .card-header .icon-container i {
    font-size: 1.5rem;
}
.pricing-card .card-header h3 {
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}
.pricing-card .card-header .price {
    font-size: 1.875rem;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}
.pricing-card .card-header .price-per {
    color: var(--brand-gray);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.pricing-card .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 0.875rem;
    color: var(--brand-gray);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pricing-card .features-list li {
    display: flex;
    align-items: center;
}
.pricing-card .features-list li svg ,
.pricing-card .features-list li i {
    color: #22c55e;
    margin-right: 0.5rem;
}

.statistics-page #testimonials {
    padding: 5rem 0;
    background-image: linear-gradient(to bottom right, var(--brand-blue), var(--soft-ocean-blue));
}
.statistics-page #testimonials .testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .statistics-page #testimonials .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.testimonial-card {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.testimonial-card .author-info {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.testimonial-card .author-info img {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    margin-right: 1rem;
}
.testimonial-card .author-info .name {
    color: white;
    font-weight: 600;
}
.testimonial-card .author-info .title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}
.testimonial-card .quote {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}
.testimonial-card .rating {
    display: flex;
    color: var(--brand-gold);
    margin-top: 1rem;
}

.statistics-page #cta-section {
    padding: 5rem 0;
    background-color: white;
}
.statistics-page #cta-section .cta-content {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}
.statistics-page #cta-section .cta-content h2 {
    font-size: 2.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
}
.statistics-page #cta-section .cta-content p {
    font-size: 1.25rem;
    color: var(--brand-gray);
    margin-bottom: 2rem;
    line-height: 1.625;
}
.statistics-page #cta-section .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
@media (min-width: 640px) {
    .statistics-page #cta-section .cta-buttons {
        flex-direction: row;
    }
}
.statistics-page #cta-section .cta-buttons button {
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.statistics-page #cta-section .cta-buttons .submit-btn {
    background-color: var(--brand-gold);
    color: white;
}
.statistics-page #cta-section .cta-buttons .submit-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}
.statistics-page #cta-section .cta-buttons .browse-btn {
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    background: none;
}
.statistics-page #cta-section .cta-buttons .browse-btn:hover {
    background-color: var(--brand-blue);
    color: white;
}



.review-distribution-card {
  background-color: #ffffff;
  border-radius: 1rem; /* 16px */
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  padding: 2rem; /* 32px */
}

.review-distribution-title {
  font-family: var(--font-heading);
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  color: var(--brand-dark);
  margin-bottom: 1.5rem; /* 24px */
  text-align: center;
}

.review-distribution-chart-area {
  height: 20rem; /* 320px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-distribution-content {
  width: 100%;
  max-width: 56rem; /* 896px */
}

.review-distribution-header {
  text-align: center;
  margin-bottom: 2rem; /* 32px */
}

.review-distribution-icon-wrapper {
  width: 4rem; /* 64px */
  height: 4rem; /* 64px */
  background-color: rgb(217 160 63 / 0.2);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem; /* 16px */
}

.review-distribution-icon {
  color: var(--brand-gold);
  font-size: 1.5rem; /* 24px */
}

.review-distribution-subtitle {
  font-family: var(--font-heading);
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
  color: var(--brand-dark);
  margin-bottom: 0.5rem; /* 8px */
}

.review-distribution-description {
  color: var(--brand-gray);
}

.review-distribution-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem; /* 16px */
}

.review-item {
  border-radius: 0.75rem; /* 12px */
  padding: 1.5rem; /* 24px */
  text-align: center;
  border-width: 1px;
  border-style: solid;
}

.review-item-percentage {
  font-family: var(--font-heading);
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  margin-bottom: 0.5rem; /* 8px */
}

.review-item-label {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  font-weight: 500;
}

/* Color Variants for Review Items */
.review-item--excellent {
  background-color: #f0fdf4;
  border-color: #dcfce7;
}
.review-item--excellent .review-item-percentage {
  color: #16a34a;
}
.review-item--excellent .review-item-label {
  color: #15803d;
}

.review-item--good {
  background-color: #eff6ff;
  border-color: #dbeafe;
}
.review-item--good .review-item-percentage {
  color: #2563eb;
}
.review-item--good .review-item-label {
  color: #1d4ed8;
}

.review-item--fair {
  background-color: #fefce8;
  border-color: #fef9c3;
}
.review-item--fair .review-item-percentage {
  color: #ca8a04;
}
.review-item--fair .review-item-label {
  color: #a16207;
}

.review-item--poor {
  background-color: #fef2f2;
  border-color: #fee2e2;
}
.review-item--poor .review-item-percentage {
  color: #dc2626;
}
.review-item--poor .review-item-label {
  color: #b91c1c;
}


.impact-chart-content {
  text-align: center;
  max-width: 56rem; /* 896px */
  width: 100%;
}

.impact-chart-icon-wrapper {
  width: 4rem; /* 64px */
  height: 4rem; /* 64px */
  background-color: var(--brand-gold-transparent);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem; /* 16px */
}

.impact-chart-icon {
  color: var(--brand-gold);
  font-size: 1.5rem; /* 24px */
}

.impact-chart-title {
  font-family: var(--font-heading);
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
  color: var(--brand-dark);
  margin-bottom: 0.5rem; /* 8px */
}

.impact-chart-description {
  color: var(--brand-gray);
  margin-bottom: 1.5rem; /* 24px */
}

.impact-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; /* 16px */
  max-width: 48rem; /* 768px */
  margin-left: auto;
  margin-right: auto;
}

.impact-stat-card {
  border-radius: 0.75rem; /* 12px */
  padding: 1.5rem; /* 24px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.impact-stat-card__value {
  font-family: var(--font-heading);
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  margin-bottom: 0.5rem; /* 8px */
}

.impact-stat-card__label {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  font-weight: 500;
  text-align: center;
}

/* Color Variants for Stat Cards */
.impact-stat-card--blue {
  background-color: #eff6ff;
}
.impact-stat-card--blue .impact-stat-card__value {
  color: #2563eb;
}
.impact-stat-card--blue .impact-stat-card__label {
  color: #1d4ed8;
}

.impact-stat-card--green {
  background-color: #f0fdf4;
}
.impact-stat-card--green .impact-stat-card__value {
  color: #16a34a;
}
.impact-stat-card--green .impact-stat-card__label {
  color: #15803d;
}

.impact-stat-card--purple {
  background-color: #faf5ff;
}
.impact-stat-card--purple .impact-stat-card__value {
  color: #9333ea;
}
.impact-stat-card--purple .impact-stat-card__label {
  color: #7e22ce;
}

.impact-stat-card--orange {
  background-color: #fff7ed;
}
.impact-stat-card--orange .impact-stat-card__value {
  color: #ea580c;
}
.impact-stat-card--orange .impact-stat-card__label {
  color: #c2410c;
}

.processing-fees-card {
  margin-top: 4rem; /* 64px */
  background-color: #ffffff;
  border-radius: 1rem; /* 16px */
  padding: 2rem; /* 32px */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  max-width: 56rem; /* 896px */
  margin-left: auto;
  margin-right: auto;
}

.processing-fees-header {
  text-align: center;
  margin-bottom: 2rem; /* 32px */
}

.processing-fees-title {
  font-family: var(--font-heading);
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  color: var(--brand-dark);
  margin-bottom: 1rem; /* 16px */
}

.processing-fees-description {
  color: var(--brand-gray);
  line-height: 1.625;
}

.fees-features-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem; /* 24px */
}

/* Responsive grid for medium screens and up */
@media (min-width: 768px) {
  .fees-features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fee-feature-item {
  text-align: center;
  padding: 1rem; /* 16px */
  background-color: var(--brand-cream);
  border-radius: 0.75rem; /* 12px */
}

.fee-feature-item__icon {
  color: var(--brand-gold);
  font-size: 1.5rem; /* 24px */
  margin-bottom: 0.75rem; /* 12px */
  display: inline-block; /* Helps with margin */
}

.fee-feature-item__title {
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 0.5rem; /* 8px */
}

.fee-feature-item__description {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  color: var(--brand-gray);
}

.timeline-chart-card {
  background-color: var(--brand-cream);
  border-radius: 1rem; /* 16px */
  padding: 2rem; /* 32px */
}

.timeline-chart-area {
  height: 20rem; /* 320px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-chart-content {
  text-align: center;
}

.timeline-chart-icon-wrapper {
  width: 4rem; /* 64px */
  height: 4rem; /* 64px */
  background-color: var(--brand-gold-transparent);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem; /* 16px */
}

.timeline-chart-icon {
  color: var(--brand-gold);
  font-size: 1.5rem; /* 24px */
}

.timeline-chart-title {
  font-family: var(--font-heading);
  font-size: 1.25rem; /* 20px */
  color: var(--brand-dark);
  margin-bottom: 0.5rem; /* 8px */
}

.timeline-chart-description {
  color: var(--brand-gray);
}

.timeline-comparison-wrapper {
  margin-top: 1.5rem; /* 24px */
}

/* Adds space between items, replicating 'space-y-3' */
.timeline-comparison-wrapper > * + * {
  margin-top: 0.75rem; /* 12px */
}

.timeline-comparison-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem; /* 8px */
  padding: 0.75rem; /* 12px */
}

.timeline-comparison-label {
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
}

.timeline-progress-track {
  width: 8rem; /* 128px */
  height: 0.5rem; /* 8px */
  border-radius: 9999px;
}

.timeline-progress-bar {
  height: 100%;
  border-radius: 9999px;
}

/* --- Color Variants --- */

.timeline-comparison-item--traditional {
  background-color: #fef2f2;
}
.timeline-comparison-item--traditional .timeline-comparison-label {
  color: #b91c1c;
}
.timeline-comparison-item--traditional .timeline-progress-track {
  background-color: #fee2e2;
}
.timeline-comparison-item--traditional .timeline-progress-bar {
  background-color: #ef4444;
  width: 100%;
}

.timeline-comparison-item--medjournal {
  background-color: #f0fdf4;
}
.timeline-comparison-item--medjournal .timeline-comparison-label {
  color: #15803d;
}
.timeline-comparison-item--medjournal .timeline-progress-track {
  background-color: #dcfce7;
}
.timeline-comparison-item--medjournal .timeline-progress-bar {
  background-color: #22c55e;
  /* width is set via inline style for this specific case */
}



/* final published paper styles */



.paper-page-wrapper {
    display: flex;
    flex-direction: column;
}

.paper-header-nav-container {
    padding-top: 1.25rem; /* py-5 is close to py-4 or py-6 in Tailwind */
    padding-bottom: 1.25rem;
}

.paper-nav-link {
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: 500;
    color: white;
    transition: color 0.3s;
    cursor: pointer;
    text-decoration: none;
}
.paper-nav-link:hover {
    color: #d1d5db; /* gray-300 */
}

.paper-main-content-area {
    padding-top: 2rem;
    padding-bottom: 2rem;
    flex: 1;
}

/* Breadcrumb */
.paper-page-breadcrumb {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
    margin-bottom: 2rem;
}

.paper-page-breadcrumb-link:hover {
    color: var(--brand-dark);
    cursor: pointer;
}

.paper-page-breadcrumb-separator {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.paper-page-breadcrumb-current {
    color: var(--brand-dark);
}

/* Main Grid Layout */
.paper-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .paper-main-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.paper-content-main-col {
    grid-column: span 1 / span 1;
}
@media (min-width: 1024px) {
    .paper-content-main-col {
        grid-column: span 3 / span 3;
    }
}

/* Paper Section Base Style */
.paper-detail-section-keywords ,
.paper-detail-section {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--brand-gold-transparent); /* rgba(217, 160, 63, 0.2) */
    padding: 2rem;
    margin-bottom: 2rem;
}

.paper-section-title {
    font-size: 1.5rem; /* text-2xl */
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}

.paper-section-subtitle {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.75rem;
}

.paper-section-paragraph {
    color: var(--brand-gray);
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 1rem;
}
.paper-section-paragraph:last-child {
    margin-bottom: 0;
}


/* Paper Header Content */
.paper-header-box {
    padding: 1.5rem;
}

.paper-header-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .paper-header-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.paper-header-info-col {
    grid-column: span 1 / span 1;
}
@media (min-width: 1024px) {
    .paper-header-info-col {
        grid-column: span 2 / span 2;
    }
}

.paper-tags-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.paper-tag-item {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 9999px;
}
.paper-tag-item.tag-research {
    background-color: var(--brand-gold-transparent);
    color: var(--brand-gold);
}
.paper-tag-item.tag-cardiology {
    background-color: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-700 */
}

.paper-main-title {
    font-size: 1.875rem; /* text-3xl */
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1rem;
    line-height: 1.25; /* leading-tight */
}
@media (min-width: 1024px) {
    .paper-main-title {
        font-size: 2.25rem; /* lg:text-4xl */
    }
}

/* Authors */
.paper-authors-section {
    margin-bottom: 1.5rem; /* mb-6 */
}
.paper-authors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem; /* gap-3 */
}
@media (min-width: 768px) {
    .paper-authors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.paper-author-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
}
.paper-author-avatar {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border-radius: 9999px;
    object-fit: cover;
}
.paper-author-name {
    font-weight: 500;
    color: var(--brand-dark);
    margin: 0;
    padding: 0;
}
.paper-author-affiliation {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
    margin:5px 0 0 0;
}

/* Publication Info */
.paper-pub-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem; /* gap-6 */
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 1.5rem; /* mb-6 */
}
@media (min-width: 768px) {
    .paper-pub-info-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.paper-info-label {
    font-weight: 500;
    color: var(--brand-dark);
}
.paper-info-value {
    color: var(--brand-gray);
}
.paper-info-doi {
    color: var(--brand-gold);
    cursor: pointer;
}
.paper-info-doi:hover {
    text-decoration: underline;
}

/* Action Buttons */
.paper-action-buttons-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
}
.paper-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
    padding: 0.625rem 1.25rem; /* px-5 py-2.5 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s;
    cursor: pointer;
    border: none;
    font-weight: 500;
    font-size: 0.875rem;
}
.paper-action-btn.download-btn {
    background-color: var(--brand-gold);
    color: white;
}
.paper-action-btn.download-btn:hover {
    background-color: rgba(217, 160, 63, 0.9); /* hover:bg-brand-gold/90 */
}
.paper-action-btn.share-btn,
.paper-action-btn.bookmark-btn {
    border: 1px solid #d1d5db; /* border-gray-300 */
    color: var(--brand-dark);
    background-color: white;
}
.paper-action-btn.share-btn:hover,
.paper-action-btn.bookmark-btn:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}
.paper-action-btn.copy-article-btn,
.paper-action-btn.copy-article-alt-btn {
    background-color: var(--brand-blue);
    color: white;
}
.paper-action-btn.copy-article-btn:hover,
.paper-action-btn.copy-article-alt-btn:hover {
    background-color: rgba(26, 44, 66, 0.9); /* hover:bg-brand-blue/90 */
}
.paper-action-btn i.fa-solid.text-brand-gold {
    color: var(--brand-gold);
}


/* Header Image */
.paper-image-col {
    grid-column: span 1 / span 1;
    display: flex;
    justify-content: center;
}
@media (min-width: 1024px) {
    .paper-image-col {
        justify-content: flex-end;
    }
}
.paper-header-image-container {
    width: 100%;
    max-width: 15rem; /* max-w-xs (15rem) */
    height: 12rem; /* h-48 (12rem) */
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.paper-header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Copy Article Button - Alternative position */
.paper-copy-article-box {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--brand-gold-transparent);
    padding: 1.5rem; /* p-6 */
    margin-bottom: 2rem; /* mb-8 */
}
.paper-action-btn.copy-article-alt-btn {
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
}
.paper-action-btn.bookmark-alt-btn {
    padding: 0.75rem 1.5rem;
    border: 1px solid #d1d5db;
    color: var(--brand-dark);
}
.paper-action-btn.bookmark-alt-btn:hover {
    background-color: #f9fafb;
}

/* Keywords */
.paper-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* gap-2 */
}
.paper-keyword-tag {
    padding: 0.25rem 0.75rem;
    background-color: #f3f4f6; /* bg-gray-100 */
    color: var(--brand-gray);
    font-size: 0.875rem; /* text-sm */
    border-radius: 9999px;
}

/* Sidebar */
.paper-sidebar-col {
    grid-column: span 1 / span 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}
.paper-sidebar-box {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--brand-gold-transparent);
    padding: 1.5rem;
}

/* Clipboard Box */
.clipboard-box {
    transition: all 0.3s;
}
.clipboard-box-expanded {
    position: fixed;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 90%;
    max-width: 600px;
    z-index: 50;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.paper-clipboard-toggle {
    padding: 0.5rem; /* p-2 */
    color: var(--brand-gray);
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}
.paper-clipboard-toggle:hover {
    color: var(--brand-dark);
}

.paper-clipboard-content-area {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #f9fafb; /* bg-gray-50 */
    margin-bottom: 1rem;
    transition: max-height 0.3s ease-in-out;
}
.paper-clipboard-content-area:focus {
    outline: none;
    border-color: var(--brand-gold);
}
.paper-clipboard-placeholder {
    font-size: 0.875rem;
    color: var(--brand-gray);
    font-style: italic;
}
.paper-clipboard-actions {
    display: flex;
    gap: 0.5rem;
}
.paper-clipboard-action-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.paper-clipboard-action-btn.clear-btn {
    border: 1px solid #d1d5db; /* border-gray-300 */
    color: var(--brand-dark);
    background-color: white;
}
.paper-clipboard-action-btn.clear-btn:hover {
    background-color: #f3f4f6; /* hover:bg-gray-50 */
}
.paper-clipboard-action-btn.copy-btn {
    background-color: var(--brand-gold);
    color: white;
    border: none;
}
.paper-clipboard-action-btn.copy-btn:hover {
    background-color: rgba(217, 160, 63, 0.9);
}

.paper-clipboard-entry {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-left: 4px solid var(--brand-gold);
    background-color: white;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.paper-clipboard-text {
    font-size: 0.875rem;
    color: var(--brand-gray);
    margin-bottom: 0.5rem;
}
.paper-clipboard-citation {
    font-size: 0.75rem;
    color: var(--brand-gray);
    font-style: italic;
}


.ai-services-box *{
    padding: 0;
    margin: 0;
}
.ai-services-box {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 1.5rem;
}

.ai-services-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 1rem;
}

.ai-services-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-services-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
    color: white;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    text-decoration: unset;
}

.ai-services-button-summary {
    background-color: var(--brand-gold);
}

.ai-services-button-summary:hover {
    background-color: rgba(217, 160, 63, 0.9);
}

.ai-services-button-content {
    background-color: var(--brand-blue);
}

.ai-services-button-content:hover {
    background-color: rgba(33, 41, 122, 0.9);
}

.ai-services-icon {
    font-size: 1.5rem;
}

.ai-services-info-box {
    background-color: #f9fafb; /* gray-50 */
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.ai-services-info-text {
    font-size: 0.75rem;
    color: var(--brand-gray);
    text-align: center;
    font-weight: 500;
}

.ai-services-price {
    font-size: 0.75rem;
    color: var(--brand-gold);
    text-align: center;
    font-weight: 600;
    margin-top: 0.25rem;
}



/* Citation Box */
.paper-citation-text {
    font-size: 0.875rem;
    color: var(--brand-gray);
    margin-bottom: 1rem;
}
.paper-citation-text p {
    margin-bottom: 0.5rem;
}
.paper-citation-copy-btn {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--brand-gold);
    color: var(--brand-gold);
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    background: none;
    cursor: pointer;
    display: flex
;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.paper-citation-copy-btn:hover {
    background-color: rgba(217, 160, 63, 0.1);
}

/* Related Articles */
.paper-related-articles-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}
.paper-related-article-item {
    border-bottom: 1px solid #f3f4f6; /* border-b border-gray-100 */
    padding-bottom: 0.75rem; /* pb-3 */
}
.paper-related-article-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.paper-related-article-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-dark);
    margin-bottom: 0.25rem;
    cursor: pointer;
}
.paper-related-article-title:hover {
    color: var(--brand-gold);
}
.paper-related-article-authors {
    font-size: 0.75rem; /* text-xs */
    color: var(--brand-gray);
}



     .add-to-notepad-icon {
            position: absolute;
            z-index: 1000;
            cursor: pointer;
            background-color: var(--brand-gold); /* A modern blue */
            color: white;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease;
        }

        .add-to-notepad-icon:hover {
            transform: scale(1.1);
            background-color: var(--brand-gold); /* A darker blue on hover */
        }
         .toast-notification {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background-color:  var(--brand-gold); /* A nice success green */
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .toast-notification.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-10px); /* Add a little upward movement */
        }

/* final published paper styles */


/* FAQ Page Styles
  ---
  Styles specific to the FAQ page.
*/

.faq-page #hero-section-faq {
    background-image: linear-gradient(to bottom right, var(--brand-blue), var(--soft-ocean-blue), var(--brand-blue));
    height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.faq-page #hero-section-faq .hero-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(217, 160, 63, 0.2);
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}
.faq-page #hero-section-faq .hero-badge svg,
.faq-page #hero-section-faq .hero-badge i {
    color: var(--brand-gold);
    margin-right: 0.75rem;
    font-size: 1.25rem;
}
.faq-page #hero-section-faq .hero-badge span {
    color: white;
    font-weight: 500;
}

.faq-page #hero-section-faq h1 {
    font-size: 3rem;
    font-family: var(--font-heading);
    color: white;
    margin-bottom: 1.5rem;
}

.faq-page #hero-section-faq p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.625;
    max-width: 48rem;
    margin: 0 auto;
}

.faq-page #faq-section {
    padding: 5rem 0;
    background-color: white;
}

.faq-page #faq-section .faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-page .faq-category {
    margin-bottom: 3rem;
}

.faq-page .faq-category h2 {
    font-size: 1.875rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}
.faq-page .faq-category h2 svg ,
.faq-page .faq-category h2 i {
    color: var(--brand-gold);
    margin-right: 1rem;
}

.faq-page .faq-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-page .faq-item {
    background-color: var(--brand-cream);
    border-radius: 0.75rem;
    overflow: hidden;
}

.faq-page .faq-item button {
    width: 100%;
    padding: 1rem 1.5rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}
.faq-page .faq-item button:hover {
    background-color: rgba(217, 160, 63, 0.1);
}
.faq-page .faq-item button span {
    font-weight: 600;
    color: var(--brand-dark);
}
.faq-page .faq-item button svg ,
.faq-page .faq-item button i {
    color: var(--brand-gold);
    transition: transform 0.2s;
}
.faq-page .faq-item button i.rotate-180 ,
.faq-page .faq-item button svg.rotate-180 {
    transform: rotate(180deg);
}

.faq-page .faq-content {
    padding: 0 1.5rem 1.5rem;
}
.faq-page .faq-content .grid.grid-cols-2.gap-4.text-brand-gray{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
;
    gap: 10px;
}
.faq-page .faq-content .content-box {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border-left: 4px solid var(--brand-gold);
    margin-top: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.faq-page .faq-content p {
    color: var(--brand-gray);
    line-height: 1.625;
}
.faq-page .faq-content .timeline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .faq-page .faq-content .timeline-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.faq-page .faq-content .timeline-item {
    background-color: rgba(251, 248, 240, 0.5);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}
.faq-page .faq-content .timeline-item .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-gold);
    margin-bottom: 0.25rem;
}
.faq-page .faq-content .timeline-item .label {
    font-size: 0.875rem;
    color: var(--brand-gray);
}
.faq-page .faq-content .disclaimer {
    font-size: 0.875rem;
    font-style: italic;
    color: rgba(107, 114, 128, 0.8);
}


/* email verification page styles */

/* Email Verification Page Styles
  ---
  Styles specific to the email verification page.
*/

.email-verify-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 0;
}

.email-verify-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.email-verify-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.email-verify-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 44, 66, 0.7); /* brand-blue/70 */
}

.email-verify-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: transparent;
    box-shadow: none;
    padding: 2rem 1.5rem;
}
@media (min-width: 768px) {
    .email-verify-header {
        padding: 2rem 4rem;
    }
}

.email-verify-brand-logo {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    color: var(--brand-cream);
    cursor: pointer;
    text-decoration: none;
}
/* Replicate original header nav-links structure for consistency, removing padding on auth/landing pages */
.email-verify-header #main-nav {
    padding-top: 0; 
    padding-bottom: 0; 
}


.email-verify-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.email-verify-login-link {
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--brand-cream);
    transition: color 0.3s;
    cursor: pointer;
    text-decoration: none;
}

.email-verify-login-link:hover {
    color: var(--brand-gold);
}


/* Main Verification Content */
.email-verify-main-section {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
    flex-grow: 1; /* Ensure it takes up available vertical space */
}

.email-verify-card {
    width: 100%;
    max-width: 28rem; /* max-w-lg from original html was converted to 28rem */
    background-color: rgba(26, 44, 66, 0.5); /* brand-blue/50 */
    backdrop-filter: blur(4px);
    border-radius: 1rem; /* rounded-2xl from original was converted to 1rem */
    padding: 2rem; /* p-8 */
    border: 1px solid rgba(240, 234, 214, 0.1); /* border-brand-cream/10 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    text-align: center;
}
@media (min-width: 768px) {
    .email-verify-card {
        padding: 3rem; /* md:p-12 */
    }
}

.email-verify-card-header {
    margin-bottom: 2rem; /* mb-8 */
}

.email-verify-icon-wrapper {
    width: 5rem; /* w-20 */
    height: 5rem; /* h-20 */
    background-color: rgba(217, 160, 63, 0.2); /* bg-brand-gold/20 */
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem; /* mx-auto mb-6 */
}

.email-verify-icon {
    font-size: 1.875rem; /* text-3xl */
    color: var(--brand-gold);
}

.email-verify-title {
    font-family: var(--font-serif);
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: var(--brand-cream);
    margin-bottom: 1rem; /* mb-4 */
}
@media (min-width: 768px) {
    .email-verify-title {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

.email-verify-subtitle {
    color: rgba(240, 234, 214, 0.7); /* text-brand-cream/70 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.625; /* leading-relaxed */
}

/* Timer Box */
.email-verify-timer-box {
    background-color: rgba(26, 44, 66, 0.4); /* bg-brand-blue/40 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
    margin-bottom: 2rem; /* mb-8 */
    border: 1px solid rgba(240, 234, 214, 0.1); /* border border-brand-cream/10 */
}

.email-verify-timer-label {
    color: rgba(240, 234, 214, 0.6); /* text-brand-cream/60 */
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.75rem; /* mb-3 */
}

.email-verify-countdown {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: var(--brand-gold);
    font-family: monospace; /* font-mono */
}

.email-verify-timer-unit {
    color: rgba(240, 234, 214, 0.5); /* text-brand-cream/50 */
    font-size: 0.75rem; /* text-xs */
    margin-top: 0.5rem; /* mt-2 */
}

.email-verify-timer-expired {
    color: #ef4444 !important; /* text-red-500 */
}


/* Actions and Footer Text */
.email-verify-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
    /* Matches the internal gap, so the secondary "Resend" is not flush against
       the primary submit button sitting directly above it. */
    margin-top: 1rem;
}

.email-verify-resend-btn {
    width: 100%;
    background-color: transparent;
    border: 2px solid var(--brand-gold);
    color: var(--brand-gold);
    font-family: var(--font-sans);
    font-weight: 600;
    padding: 0.75rem 2rem; /* px-8 py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.3s;
    cursor: pointer;
    transform-origin: center;
}

.email-verify-resend-btn:hover {
    background-color: var(--brand-gold);
    color: var(--brand-blue);
    transform: scale(1.05);
}

.email-verify-help-text {
    color: rgba(240, 234, 214, 0.6); /* text-brand-cream/60 */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.5;
}

.email-verify-link {
    color: var(--brand-gold);
    transition: color 0.2s;
    cursor: pointer;
}

.email-verify-link:hover {
    text-decoration: underline;
}

/* email verification page styles */

.paper-author-item {
    position: relative;
}

.paper-author-item a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: -9999px;
    overflow: hidden;
    opacity: 0;
}

.breadcrumb-wrapper {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 2rem;
}

.breadcrumb-item {
    cursor: pointer;
    color: #888;
}

.breadcrumb-item:hover {
    color: #333;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
}

.breadcrumb-item.active {
    color: #333;
    font-weight: 600;
}



.author-header-wrapper {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    padding: 2rem;
    margin-bottom: 2rem;
}

.author-header-content *{
    padding: 0;
    margin: 0;
}
.author-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.author-header-wrapper  .author-info {
    display: flex;
    gap: 1.5rem;
}

.author-header-wrapper  .author-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.author-header-wrapper  .author-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-header-wrapper  .author-name {
    font-size: 2rem;
    color: #333333;
    margin: 0;
    margin-bottom: 0.5rem;
}
.author-header-wrapper  .author-title {
    font-size: 1.25rem;
    color: #666666;
    margin-bottom: 0.5rem;
}
.author-header-wrapper  .author-affiliation {
    font-size: 1.125rem;
    color: var(--brand-gold);
    margin-bottom: 1rem;
}
.author-header-wrapper  .contact-info {
    display: flex;
    gap: 2rem;
}
.author-header-wrapper  .contact-item {
    font-size: 1rem;
    color: #666666;
    display: flex;
    align-items: center;
}
.author-header-wrapper  svg {
    margin-right: 0.5rem;
    font-size: 1rem;
    color: var(--brand-gold);
}
.author-header-wrapper  .author-stats {
    text-align: right;
}

.author-publications-count {
    font-size: 2rem;
    font-weight: bold;
    color: #333333;
}

.author-publications-label {
    font-size: 1rem;
    color: #666666;
}




.publications-wrapper {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    padding: 2rem;
}

.publications-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    align-items: center;
}

.publications-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.publications-filters {
    display: flex;
    gap: 1rem;
}

.filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #333;
}

.publications-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.publication-item {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.publication-header {
    display: flex;
    gap: 1rem;
}

.publication-image {
    width: 5rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.375rem;
}

.publication-details {
    flex-grow: 1;
}

.publication-tags {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.publication-tag {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 1.5rem;
}

.research {
    background-color: #FFD700;
    color: #333;
}

.research:hover {
    background-color: #e6b800;
}

.cardiology {
    background-color: #B0D0FF;
    color: #1E3A8A;
}

.cardiology:hover {
    background-color: #93bbff;
}

.case-study {
    background-color: #FFEDD5;
    color: #FB923C;
}

.case-study:hover {
    background-color: #fed7aa;
}

.interventional {
    background-color: #E9D5FF;
    color: #7C3AED;
}

.interventional:hover {
    background-color: #d8b3ff;
}

.publication-date {
    font-size: 0.875rem;
    color: #888;
}

.publication-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    cursor: pointer;
}

.publication-title:hover {
    color: var(--brand-gold);
}

.publication-authors {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
}

.publication-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: #888;
}

.publication-stats span {
    display: flex;
    align-items: center;
}

.publication-stats i {
    margin-right: 0.5rem;
}

.publication-title a{
    text-decoration: unset;
    color: unset;
}


/* peer reviewer registration page styles */
.hero-content-peer-reviewer  {
    margin-left: auto;
    margin-right: auto;
}

.hero-content-peer-reviewer .hero-text-center {
    text-align: center;
    margin-bottom: 3rem;
}

.hero-content-peer-reviewer .hero-heading {
    font-size: 2.25rem;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}

.hero-content-peer-reviewer .hero-description {
    font-size: 1.125rem;
    color: var(--brand-gray);
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75rem;
}

.hero-content-peer-reviewer .form-container {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 1200px;
    margin: 1rem auto 3rem;
}

.hero-content-peer-reviewer .form-header {
    background: linear-gradient(to right, var(--brand-blue), var(--soft-ocean-blue));
    padding: 2rem;
    color: white;
}

.hero-content-peer-reviewer .form-title {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    margin: 0;
    margin-bottom: 0.5rem;
}

.hero-content-peer-reviewer .form-subtitle {
    margin: 0;
    margin-top: 0.5rem;
    opacity: 0.8;
}

.hero-content-peer-reviewer .form-content {
    padding: 2rem;
}

.hero-content-peer-reviewer .section {
    margin-bottom: 2.5rem;
}

.hero-content-peer-reviewer .section-heading {
    font-size: 1.25rem;
    margin: 0;
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.hero-content-peer-reviewer .icon-user,
.hero-content-peer-reviewer .icon-stethoscope,
.hero-content-peer-reviewer .icon-file,
.hero-content-peer-reviewer .icon-upload,
.hero-content-peer-reviewer .icon-info {
    margin-right: 0.75rem;
    color: var(--brand-gold);
}

.hero-content-peer-reviewer .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .hero-content-peer-reviewer .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hero-content-peer-reviewer .form-group {
    margin-bottom: 1.5rem;
}

.hero-content-peer-reviewer .form-label {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.hero-content-peer-reviewer .form-input,
.hero-content-peer-reviewer .form-select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--brand-gray);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.hero-content-peer-reviewer .form-input:focus,
.hero-content-peer-reviewer .form-select:focus {
    border-color: var(--brand-gold);
    outline: none;
}

.hero-content-peer-reviewer .form-flex {
    display: flex;
    justify-content: space-between;
}

.hero-content-peer-reviewer .form-flex select.form-select {
    width: auto;
    background: #f5f5f5;
    border-top-right-radius: 0;
    border-right: 0;
    border-bottom-right-radius: 0;
}

.hero-content-peer-reviewer .form-flex .form-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.hero-content-peer-reviewer .file-upload {
    border: 2px dashed var(--brand-gray);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.hero-content-peer-reviewer .file-upload:hover {
    border-color: var(--brand-gold);
    background-color: rgba(217, 160, 63, 0.1);
}

.hero-content-peer-reviewer .file-upload.border-green-300.bg-green-50 {
    border-color: var(--brand-gold);
    background-color: rgba(217, 160, 63, 0.1);
}

.hero-content-peer-reviewer .upload-text {
    font-size: 1rem;
    color: var(--brand-gray);
    margin-bottom: 0.5rem;
}

.hero-content-peer-reviewer .upload-note {
    font-size: 0.75rem;
    color: var(--brand-gray);
}

.hero-content-peer-reviewer .submit-section {
    text-align: center;
    margin-top: 2rem;
}

.hero-content-peer-reviewer .submit-button {
    background-color: var(--brand-gold);
    color: white;
    padding: 1rem 3rem;
    border-radius: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    transition: all 0.3s ease;
    border: 0;
    cursor: pointer;
}

.hero-content-peer-reviewer .submit-button:hover {
    background-color: rgba(217, 160, 63, 0.8);
    transform: scale(1.05);
}

.hero-content-peer-reviewer .terms-text,
.hero-content-peer-reviewer .sign-in-text {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--brand-gray);
}

.hero-content-peer-reviewer .sign-in-link {
    color: var(--brand-gold);
    text-decoration: underline;
    cursor: pointer;
}

.hero-content-peer-reviewer .notice-section {
    margin-bottom: 2rem;
}

.hero-content-peer-reviewer .notice-box {
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); /* blue-50 */
    border: 1px solid #B3D6F0; /* blue-200 */
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.hero-content-peer-reviewer .notice-content {
    display: flex;
    align-items: start;
}

.hero-content-peer-reviewer .notice-icon {
    color: #3B82F6; /* blue-500 */
    font-size: 1.25rem;
    margin-right: 1rem;
    margin-top: 0.25rem;
}

.hero-content-peer-reviewer .notice-heading {
    font-family: var(--font-heading);
    color: var(--brand-dark);
    margin: 0;
    margin-bottom: 0.5rem;
}

.hero-content-peer-reviewer .notice-description {
    color: var(--brand-gray);
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin-bottom: 0.75rem;
}


/*paid paper styles*/

.paid-paper-wrap *{
    padding: 0;
    margin: 0;
}
.paid-paper-wrap.main-content {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.paid-paper-wrap .back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-gray);
    transition: color 0.3s ease;
    margin-bottom: 2rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    text-decoration: unset;
}

.paid-paper-wrap .back-button:hover {
    color: var(--brand-dark);
}

.paid-paper-wrap .back-icon {
    font-size: 1.25rem;
}

.paid-paper-wrap .content-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.paid-paper-wrap .header-section {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 2rem;
    margin-bottom: 2rem;
}

.paid-paper-wrap .header-content {
    text-align: center;
}

.paid-paper-wrap .header-icon {
    width: 4rem;
    height: 4rem;
    background-color: rgba(217, 160, 63, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.paid-paper-wrap .icon {
    font-size: 2rem;
    color: var(--brand-gold);
}

.paid-paper-wrap .header-title {
    font-size: 2rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1rem;
}

.paid-paper-wrap .header-description {
    color: var(--brand-gray);
    font-size: 1.125rem;
}

.paid-paper-wrap .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width:1100px){
    .paid-paper-wrap .grid-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

.paid-paper-wrap .service-details-container {
    grid-column: span 2;
}

.paid-paper-wrap .service-details {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 2rem;
    margin-bottom: 2rem;
}

.paid-paper-wrap .service-title {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
}

.paid-paper-wrap .service-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.paid-paper-wrap .service-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.paid-paper-wrap .service-icon-container {
    width: 3rem;
    height: 3rem;
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paid-paper-wrap .service-icon {
    font-size: 1.25rem;
    color: var(--brand-blue);
}

.paid-paper-wrap .service-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.5rem;
}

.paid-paper-wrap .service-description {
    color: var(--brand-gray);
    font-size: 1rem;
}

.paid-paper-wrap .delivery-time-section {
    background-color: rgba(217, 160, 63, 0.1);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 2rem;
}

.paid-paper-wrap .delivery-time-content {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.paid-paper-wrap .delivery-time-icon {
    font-size: 1.25rem;
    color: var(--brand-gold);
}

.paid-paper-wrap .delivery-time-title {
    font-weight: 600;
    color: var(--brand-dark);
}

.paid-paper-wrap .delivery-time-description {
    color: var(--brand-gray);
    font-size: 0.875rem;
}

.paid-paper-wrap .payment-section {
    grid-column: span 1;
}

.paid-paper-wrap .payment-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 2rem;
    position: sticky;
    top: 8rem;
}

.paid-paper-wrap .payment-header {
    text-align: center;
    margin-bottom: 2rem;
}

.paid-paper-wrap .payment-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--brand-dark);
}

.paid-paper-wrap .payment-subtitle {
    color: var(--brand-gray);
}

.paid-paper-wrap .payment-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.paid-paper-wrap .form-input {
    display: flex;
    flex-direction: column;
}

.paid-paper-wrap .input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.paid-paper-wrap .input-label {
    font-size: 0.875rem;
    color: var(--brand-dark);
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

.paid-paper-wrap .input-field {
    padding: 0.75rem 1rem;
    border: 1px solid var(--brand-gray);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: var(--brand-dark);
    transition: border 0.2s ease;
    background: transparent;
}

.paid-paper-wrap .input-field:focus {
    border-color: var(--brand-gold);
    outline: none;
}

.paid-paper-wrap .terms-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.paid-paper-wrap .terms-checkbox {
    width: 1.25rem;
    height: 1.25rem;
}

.paid-paper-wrap .terms-label {
    color: var(--brand-gray);
    font-size: 0.875rem;
}

.paid-paper-wrap .terms-link {
    color: var(--brand-gold);
    cursor: pointer;
    text-decoration: underline;
}

.paid-paper-wrap .payment-button {
    padding: 1rem;
    background-color: var(--brand-gold);
    color: white;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    border: 0;
    cursor: pointer;
}

.paid-paper-wrap .payment-button:hover {
    background-color: rgba(217, 160, 63, 0.9);
}

.paid-paper-wrap .secure-payment {
    text-align: center;
    margin-top: 1rem;
}

.paid-paper-wrap .secure-payment-content {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    color: var(--brand-gray);
    font-size: 0.875rem;
}

.paid-paper-wrap .secure-payment-icon {
    font-size: 1rem;
    color: var(--brand-gray);
}



.paid-paper-wrap .paper-reference {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 160, 63, 0.2);
    padding: 1.5rem;
}

.paid-paper-wrap .paper-reference-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 1rem;
}

.paper-reference-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.paid-paper-wrap .paper-thumbnail {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    object-fit: cover;
}
.paid-paper-wrap .paper-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paid-paper-wrap .paper-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 0.25rem;
}

.paid-paper-wrap .paper-authors {
    font-size: 0.875rem;
    color: var(--brand-gray);
}

.paper-publication {
    font-size: 0.75rem;
    color: var(--brand-gray);
}


/*new privacy policy page styles*/
/* --- Styles for Privacy Policy Accordion --- */

.privacy-accordion-section {
  /* Mapped from 'container mx-auto py-8' */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.privacy-accordion-section__inner-container {
  /* Mapped from 'max-w-4xl mx-auto' */
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.privacy-accordion-section__list > * + * {
  /* Mapped from 'space-y-3' */
  margin-top: 0.75rem;
}

.privacy-accordion-section__item {
  /* Mapped from 'bg-white rounded-xl shadow-lg border border-gray-100' */
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
}

.privacy-accordion-section__header {
  /* Mapped from 'w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors' */
  width: 100%;
  padding: 1rem 1.5rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit; /* Ensure button inherits page font */
}

.privacy-accordion-section__header:hover {
  background-color: #f9fafb; /* gray-50 */
}

.privacy-accordion-section__header-title-group {
  /* Mapped from 'flex items-center' */
  display: flex;
  align-items: center;
}

.privacy-accordion-section__icon {
  /* Mapped from 'text-brand-gold mr-3' */
  color: var(--brand-gold);
  margin-right: 0.75rem;
}

.privacy-accordion-section__title {
  /* Mapped from 'text-lg font-semibold text-brand-dark' */
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--brand-dark);
}

.privacy-accordion-section__chevron {
  /* Mapped from 'text-brand-gray transition-transform' */
  color: var(--brand-gray);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.privacy-accordion-section__item.active .privacy-accordion-section__chevron {
  transform: rotate(180deg);
}

.privacy-accordion-section__content {
  /* Mapped from 'hidden px-6 pb-4' */
  display: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1rem;
}

.privacy-accordion-section__content-body {
  /* Mapped from 'text-sm text-brand-gray' */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--brand-gray);
}

.privacy-accordion-section__content-body > * + * {
    /* Mapped from 'space-y-2' */
    margin-top: 0.5rem;
}

.privacy-accordion-section__link {
  /* Mapped from 'text-brand-gold hover:text-brand-gold/80' */
  color: var(--brand-gold);
}

.privacy-accordion-section__link:hover {
  /* Tailwind's opacity shorthand is not standard CSS, so we use rgba */
  color: rgba(217, 160, 63, 0.8);
}
div#accordion-container {
    width: 100%;
}

.privacy-accordion-section__inner-container {
    max-width: 1200px;
    width: 100%;
}

/* --- Styles for Contact Page Header --- */

.contact-page-header {
  /* Mapped from 'text-center mb-12' */
  text-align: center;
  margin-bottom: 3rem;
}

.contact-page-header__title {
  /* Mapped from 'text-4xl font-heading text-brand-dark mb-4' */
  font-size: 2.25rem;
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 1rem;
}

.contact-page-header__subtitle {
  /* Mapped from 'text-xl text-brand-gray max-w-3xl mx-auto leading-relaxed' */
  font-size: 1.25rem;
  color: var(--brand-gray);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.625;
}

/* --- Styles for Contact Info Section --- */

.contact-info-grid {
  /* Mapped from 'grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12' */
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.contact-content-grid-new,
.contact-info-grid-new{
    max-width: 900px;
    width: 100%;
    margin: auto;
    margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .contact-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-info-grid__about-section {
  /* Mapped from 'lg:col-span-2 bg-white rounded-xl shadow-lg p-8' */
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

@media (min-width: 1024px) {
  .contact-info-grid__about-section {
    grid-column: span 2 / span 2;
  }
}

.contact-info-grid__about-title {
  /* Mapped from 'text-2xl font-heading text-brand-dark mb-6' */
  font-size: 1.5rem;
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 1.5rem;
}

.contact-info-grid__about-paragraph {
  /* Mapped from 'text-brand-gray' */
  color: var(--brand-gray);
  margin-bottom: 1rem; /* Mapped from mb-4 */
}

.contact-info-grid__about-paragraph--last {
  margin-bottom: 1.5rem; /* Mapped from mb-6 */
}

.contact-info-grid__stats-grid {
  /* Mapped from 'grid grid-cols-2 gap-4 mb-6' */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-info-grid__stat-card {
  /* Mapped from 'bg-brand-cream p-4 rounded-lg text-center' */
  background-color: var(--brand-cream);
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

.contact-info-grid__stat-value {
  /* Mapped from 'text-2xl font-heading text-brand-gold mb-1' */
  font-size: 1.5rem;
  font-family: var(--font-heading);
  color: var(--brand-gold);
  margin-bottom: 0.25rem;
}

.contact-info-grid__stat-label {
  /* Mapped from 'text-sm text-brand-gray' */
  font-size: 0.875rem;
  color: var(--brand-gray);
}

.contact-info-grid__quick-contact-card {
  /* Mapped from 'bg-gradient-to-br from-brand-blue to-soft-ocean-blue text-white rounded-xl p-8' */
  background-image: linear-gradient(to bottom right, var(--brand-blue), var(--soft-ocean-blue));
  color: #ffffff;
  border-radius: 0.75rem;
  padding: 2rem;
}

.contact-info-grid__contact-title {
  /* Mapped from 'text-xl font-heading mb-6' */
  font-size: 1.25rem;
  font-family: var(--font-heading);
  margin-bottom: 1.5rem;
}

.contact-info-grid__contact-list > * + * {
  /* Mapped from 'space-y-4' */
  margin-top: 1rem;
}

.contact-info-grid__contact-item {
  /* Mapped from 'flex items-center space-x-3' */
  display: flex;
  align-items: center;
}

.contact-info-grid__contact-item > * + * {
    margin-left: 0.75rem;
}

.contact-info-grid__contact-icon {
  /* Mapped from 'text-brand-gold' */
  color: var(--brand-gold);
}

.contact-info-grid__contact-text {
  /* Mapped from 'text-sm' */
  font-size: 0.875rem;
}

/* --- Styles for Contact Page Content Grid --- */

.contact-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  .contact-content-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-content-grid__main-column,
.contact-content-grid__sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Replicates space-y-6 */
}

@media (min-width: 1024px) {
  .contact-content-grid__main-column {
    grid-column: span 2 / span 2;
  }
}

.contact-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.contact-card__title {
  font-size: 1.5rem;
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

.contact-card__title-icon {
  color: var(--brand-gold);
  margin-right: 0.75rem;
}

.contact-card__description {
  color: var(--brand-gray);
  margin-bottom: 1.5rem;
  line-height: 1.625;
}

.contact-card__email-block {
  background-color: var(--brand-cream);
  padding: 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
}

.contact-card__email-title {
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.contact-card__email-address {
  color: var(--brand-dark);
  font-weight: 500;
  font-size: 1.25rem;
}

.contact-card__services-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .contact-card__services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-card__service-item {
  padding: 0.75rem;
}

.contact-card__service-icon {
  color: var(--brand-gold);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.contact-card__service-label {
  font-size: 0.75rem;
  color: var(--brand-gray);
}

.contact-sidebar-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
}

.contact-sidebar-card__title {
  font-size: 1.25rem;
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.contact-sidebar-card__title-icon--danger {
  color: #ef4444; /* red-500 */
  margin-right: 0.75rem;
}

.contact-sidebar-card__title-icon--brand {
  color: var(--brand-gold);
  margin-right: 0.75rem;
}

.contact-sidebar-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--brand-gray);
  font-size: 0.875rem;
}

.contact-sidebar-card__list-item {
  display: flex;
  align-items: flex-start;
}

.contact-sidebar-card__list-icon--danger {
  color: #ef4444; /* red-500 */
  margin-right: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.contact-sidebar-card__description {
  color: var(--brand-gray);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.contact-sidebar-card__features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  text-align: center;
}

.contact-sidebar-card__feature-item {
  padding: 0.75rem;
  background-color: var(--brand-cream);
  border-radius: 0.5rem;
}

.contact-sidebar-card__feature-icon {
  color: var(--brand-gold);
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.contact-sidebar-card__feature-label {
  font-size: 0.75rem;
  color: var(--brand-gray);
}

/* --- Styles for Contact Form Section --- */

.contact-form-section {
  /* Mapped from 'bg-white rounded-xl shadow-lg p-8' */
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  margin-bottom: 5rem;
}

.contact-form-section__title {
  /* Mapped from 'text-2xl font-heading text-brand-dark mb-6 text-center' */
  font-size: 1.5rem;
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 1.5rem;
  text-align: center;
}

.contact-form-section__form {
  /* Mapped from 'max-w-2xl mx-auto' */
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-form-section__grid {
  /* Mapped from 'grid grid-cols-1 md:grid-cols-2 gap-6 mb-6' */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .contact-form-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-form-section__form-group {
  /* Mapped from 'mb-6' */
  margin-bottom: 1.5rem;
}

.contact-form-section__label {
  /* Mapped from 'block text-brand-dark font-medium mb-2 text-sm' */
  display: block;
  color: var(--brand-dark);
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.contact-form-section__input,
.contact-form-section__select,
.contact-form-section__textarea {
  /* Mapped from 'w-full px-4 py-3 border border-gray-200 rounded-lg...' */
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.contact-form-section__input:focus,
.contact-form-section__select:focus,
.contact-form-section__textarea:focus {
  /* Mapped from 'focus:outline-none focus:ring-2 focus:ring-brand-gold/20 focus:border-brand-gold' */
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 2px rgba(217, 160, 63, 0.2);
}

.contact-form-section__submit-btn {
  /* Mapped from 'w-full bg-brand-gold hover:bg-brand-gold/90 text-white py-3 rounded-lg font-medium transition-colors' */
  width: 100%;
  background-color: var(--brand-gold);
  color: #ffffff;
  padding: 0.75rem 0;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

.contact-form-section__submit-btn:hover {
  background-color: rgba(217, 160, 63, 0.9);
}

/*message editor*/
/* --- Styles for Editorial Hero Section --- */

.editorial-hero-section {
  /* Mapped from 'text-center mb-16 max-w-7xl mx-auto' */
  text-align: center;
  margin-bottom: 4rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.editorial-hero-section__main-title {
  /* Mapped from 'text-5xl font-heading text-brand-dark mb-6' */
  font-size: 3rem;
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 1.5rem;
}

.editorial-hero-section__subtitle-container {
  /* Mapped from 'max-w-4xl mx-auto' */
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.editorial-hero-section__journal-name {
  /* Mapped from 'text-2xl font-heading text-brand-blue mb-4' */
  font-size: 1.5rem;
  font-family: var(--font-heading);
  color: var(--brand-blue);
  margin-bottom: 1rem;
}

.editorial-hero-section__tagline {
  /* Mapped from 'text-xl text-brand-gold font-semibold tracking-wider' */
  font-size: 1.25rem;
  color: var(--brand-gold);
  font-weight: 600;
  letter-spacing: 0.05em;
}


/* --- Styles for Editorial Letter Page --- */

.editorial-letter-container {
  max-width: 1200px; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
}

.editorial-letter-container *{
    margin: 0;
}

.editorial-letter-container > * + * {
  margin-top: 3rem; /* space-y-12 */
}

.editorial-section {
  background-color: #ffffff;
  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 */
  padding: 2.5rem; /* p-10 */
}

.editorial-section__header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem; /* mb-8 */
}

.editorial-section__icon-wrapper {
  width: 3rem; /* w-12 */
  height: 3rem; /* h-12 */
  border-radius: 0.75rem; /* rounded-xl */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem; /* mr-4 */
}

.editorial-section__icon {
  color: #ffffff;
  font-size: 1.25rem; /* text-xl */
}

.editorial-section__title {
  font-size: 1.875rem; /* text-3xl */
  font-family: var(--font-heading);
  color: var(--brand-dark);
}

.editorial-section__body {
  color: var(--brand-gray);
  line-height: 1.625; /* leading-relaxed */
  font-size: 1.125rem; /* text-lg */
  margin: 0;
}

.editorial-section__body > * + * {
  margin-top: 1.5rem; /* space-y-6 */
}

.editorial-section__highlight-box {
  background-color: var(--brand-cream);
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  border-left: 4px solid var(--brand-gold);
}

.editorial-section__highlight-text {
  font-weight: 600;
  color: var(--brand-dark);
  font-size: 1.25rem; /* text-xl */
}

.editorial-section__belief-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
  margin-bottom: 2rem; /* mb-8 */
}

@media (min-width: 768px) {
  .editorial-section__belief-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.editorial-section__belief-item {
  display: flex;
  align-items: flex-start;
}

.editorial-section__belief-item > * + * {
    margin-left: 1rem; /* space-x-4 */
}

.editorial-section__bullet-point {
  width: 0.75rem; /* w-3 */
  height: 0.75rem; /* h-3 */
  background-color: var(--brand-gold);
  border-radius: 9999px; /* rounded-full */
  margin-top: 0.5rem; /* mt-2 */
  flex-shrink: 0;
}

.editorial-section__quote-box {
  background-image: linear-gradient(to right, var(--brand-blue), var(--soft-ocean-blue));
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  color: #ffffff;
  text-align: center;
}

.editorial-section__quote-text {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600;
}

.editorial-section__features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
  margin-bottom: 2rem; /* mb-8 */
}

@media (min-width: 768px) {
  .editorial-section__features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .editorial-section__features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.editorial-section__feature-card {
  text-align: center;
  padding: 1.5rem; /* p-6 */
  background-color: var(--brand-cream);
  border-radius: 0.75rem; /* rounded-xl */
}

.editorial-section__feature-icon-wrapper {
  width: 4rem; /* w-16 */
  height: 4rem; /* h-16 */
  background-color: var(--brand-blue);
  border-radius: 9999px; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem; /* mb-4 */
}

.editorial-section__feature-title {
  font-family: var(--font-heading);
  color: var(--brand-dark);
  font-size: 1.25rem; /* text-xl */
  margin-bottom: 0.5rem; /* mb-2 */
}

.editorial-section__feature-description {
  color: var(--brand-gray);
  font-size: 0.875rem; /* text-sm */
}

.editorial-section--gradient {
    background-image: linear-gradient(to bottom right, var(--brand-blue), var(--soft-ocean-blue));
    color: #ffffff;
}
.editorial-section--gradient .editorial-section__title{
    color: #ffffff;
}

.editorial-section--gradient .editorial-section__body {
  color: rgba(255, 255, 255, 0.9);
}

.editorial-section--gradient .editorial-section__highlight-box {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
}

.editorial-section--gradient .editorial-section__highlight-text {
    color: #ffffff;
}

.editorial-signature {
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.editorial-signature__card {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 2.5rem;
}

.editorial-signature__icon-wrapper {
  width: 5rem; /* w-20 */
  height: 5rem; /* h-20 */
  background-image: linear-gradient(to bottom right, var(--brand-gold), #f59e0b);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem; /* mb-6 */
}

.editorial-signature__icon {
    color: white;
    font-size: 1.5rem; /* text-2xl */
}

.editorial-signature__title {
  font-size: 1.5rem; /* text-2xl */
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 1rem; /* mb-4 */
}

.editorial-signature__journal-name {
  font-size: 1.25rem; /* text-xl */
  color: var(--brand-blue);
  font-weight: 600;
  margin-bottom: 0.5rem; /* mb-2 */
}

.editorial-signature__tagline {
  font-size: 1.125rem; /* text-lg */
  color: var(--brand-gold);
  font-weight: 500;
}

.disclosure-section {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .disclosure-toggle {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            text-align: left;
        }

        /* Reusing your existing subtitle class but removing default margins for the toggle */
        .disclosure-toggle .paper-section-subtitle {
            margin: 0;
        }

        .disclosure-content {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #eee;
            font-size: 0.9rem;
            color: #6b7280;
        }

        .disclosure-content.hidden {
            display: none;
        }

        .disclosure-item {
            margin-bottom: 0.75rem;
        }

        .disclosure-item strong {
            color: #2c2c2c;
        }


        /* Horizontal Sticky Nav Styles */
#sticky-nav-horizontal {
    position: sticky;
    top: 0;
    z-index: 999; /* Ensures it stays on top of other content */
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    backdrop-filter: blur(8px); /* Nice blur effect behind it */
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.horizontal-nav-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto; /* Allows scrolling on very small screens if needed */
    scrollbar-width: none; /* Hides scrollbar for cleaner look */
    justify-content: center;
}

/* Hide scrollbar for Webkit browsers */
.horizontal-nav-list::-webkit-scrollbar {
    display: none;
}

.horizontal-nav-list li {
    margin-right: 1.5rem;
}

.h-nav-link {
    display: inline-block;
    padding: 1rem 0.5rem;
    text-decoration: none;
    color: #6b7280; /* brand-gray */
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.h-nav-link:hover {
    color: #d9a03f; /* brand-gold */
}

/* Active state (will be triggered by JS) */
.h-nav-link.active {
    color: #2c2c2c; /* brand-dark */
    border-bottom-color: #d9a03f; /* brand-gold */
    font-weight: 700;
}


/* ===========research academy style===========*/
/* --- Styles for Research Academy Hero Section --- */

.research-hero-section.gradient-bg {
  background-image: linear-gradient(to bottom right, var(--brand-blue), var(--soft-ocean-blue), var(--brand-blue));
}

.research-hero-section {
  height: 600px; /* h-[600px] */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.research-hero-section__bg-overlay {
  /* Mapped from 'absolute inset-0 opacity-10' */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.1;
}

.research-hero-section__bg-image {
  /* Mapped from 'w-full h-full object-cover' */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.research-hero-section__container {
  max-width: 1500px; /* from your .container */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 10;
}

.research-hero-section__content {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--color-white, #ffffff);
}

.research-hero-section__main-title {
  font-size: 3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .research-hero-section__main-title {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

.research-hero-section__highlight {
  color: var(--brand-gold);
}

.research-hero-section__subtitle {
  font-size: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .research-hero-section__subtitle {
    font-size: 1.875rem; /* md:text-3xl */
  }
}

.research-hero-section__description {
  font-size: 1.25rem;
  color: #e5e7eb; /* gray-200 standard hex */
  margin-bottom: 2rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.research-hero-section__cta-container {
  /* Mapped from 'flex flex-col sm:flex-row gap-4 justify-center items-center' */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 640px) {
  .research-hero-section__cta-container {
    flex-direction: row;
  }
}

.research-hero-section__email-box {
  /* Mapped from 'px-8 py-4 bg-white/10 backdrop-blur-sm border border-white/20 text-white font-semibold rounded-lg text-xl' */
  padding: 1rem 2rem;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white, #ffffff);
  font-weight: 600;
  border-radius: 0.5rem;
  font-size: 1.25rem; /* text-xl */
  display: flex; /* Added to align icon and text */
  align-items: center;
}

.research-hero-section__email-icon {
  margin-right: 0.5rem;
}

.students-section {
  padding-top: 4rem; /* py-16 */
  padding-bottom: 4rem;
}

.students-section__header {
  text-align: center;
  margin-bottom: 3rem; /* mb-12 */
}

.students-section__title {
  font-size: 2.25rem; /* text-4xl */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem; /* mb-4 */
}

.students-section__description {
  font-size: 1.25rem; /* text-xl */
  color: var(--brand-gray);
  max-width: 56rem; /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem; /* mb-8 */
}

.students-section__solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
  max-width: 64rem; /* max-w-5xl */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 1024px) {
  .students-section__solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.students-section__solution-card {
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  border-left-width: 4px;
  border-left-style: solid;
}

.students-section__solution-card--university {
  background-color: #eff6ff; /* bg-blue-50 */
  border-left-color: #3b82f6; /* border-blue-500 */
}

.students-section__solution-card--healthcare {
  background-color: var(--color-gold-50, #fffbeb); 
  border-left-color: var(--brand-gold);
}

.students-section__solution-title {
  font-size: 1.25rem; /* text-xl */
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 0.75rem; /* mb-3 */
}

.students-section__solution-text {
  color: var(--brand-gray);
}

.sandbox-subsection__header {
  text-align: center;
  margin-bottom: 3rem; /* mb-12 */
}

.sandbox-subsection__title {
  font-size: 1.875rem; /* text-3xl */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem; /* mb-4 */
}

.sandbox-subsection__description {
  font-size: 1.125rem; /* text-lg */
  color: var(--brand-gray);
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.sandbox-subsection__features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .sandbox-subsection__features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sandbox-subsection__features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sandbox-subsection__feature-card {
  background-color: var(--color-gray-50, #f9fafb);
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sandbox-subsection__feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sandbox-subsection__icon-wrapper {
  width: 3rem; /* w-12 */
  height: 3rem; /* h-12 */
  border-radius: 0.5rem; /* rounded-lg */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem; /* mb-4 */
}

.sandbox-subsection__icon-wrapper--blue { background-color: #dbeafe; /* bg-blue-100 */ }
.sandbox-subsection__icon-wrapper--purple { background-color: #f3e8ff; /* bg-purple-100 */ }
.sandbox-subsection__icon-wrapper--green { background-color: #dcfce7; /* bg-green-100 */ }
.sandbox-subsection__icon-wrapper--gold { background-color: var(--color-gold-100, #fef3c7); }

.sandbox-subsection__icon--blue { color: #2563eb; /* text-blue-600 */ font-size: 1.25rem; }
.sandbox-subsection__icon--purple { color: #9333ea; /* text-purple-600 */ font-size: 1.25rem; }
.sandbox-subsection__icon--green { color: #16a34a; /* text-green-600 */ font-size: 1.25rem; }
.sandbox-subsection__icon--gold { color: var(--brand-gold); font-size: 1.25rem; }

.sandbox-subsection__feature-title {
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 0.75rem; /* mb-3 */
}

.sandbox-subsection__feature-text {
  color: var(--brand-gray);
  font-size: 0.875rem; /* text-sm */
}
/* --- Styles for Organizational Sponsorship Section --- */



/* We use your existing .container class here in the HTML, no new CSS needed for it */

.sponsorship-section__header {
  text-align: center;
  margin-bottom: 3rem; /* mb-12 */
}

.sponsorship-section__title {
  font-size: 2.25rem; /* text-4xl */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem; /* mb-4 */
}

.sponsorship-section__description {
  font-size: 1.25rem; /* text-xl */
  color: var(--brand-gray);
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.sponsorship-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem; /* gap-12 */
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 40px;
}

@media (min-width: 1024px) {
  .sponsorship-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sponsorship-section__card {
  background-color: var(--color-white, #ffffff);
  padding: 2rem; /* p-8 */
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.sponsorship-section__card-title {
  font-size: 1.5rem; /* text-2xl */
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1.5rem; /* mb-6 */
}

.sponsorship-section__list > * + * {
    margin-top: 1rem; /* space-y-4 */
}

.sponsorship-section__list-item {
  display: flex;
  align-items: flex-start;
}

.sponsorship-section__list-item > * + * {
  margin-left: 0.75rem; /* space-x-3 */
}

.sponsorship-section__icon-wrapper {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
  background-color: var(--brand-gold);
  border-radius: 9999px; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem; /* mt-1 */
  flex-shrink: 0;
}

.sponsorship-section__icon {
  color: var(--color-white, #ffffff);
  font-size: 0.75rem; /* text-xs */
}

.sponsorship-section__item-title {
  font-weight: 600;
  color: var(--brand-dark);
  margin: 0;
}

.sponsorship-section__item-text {
  color: var(--brand-gray);
  font-size: 0.875rem; /* text-sm */
}
.bg-white-body{
    background: #fff;
}

/* --- Styles for Testimonials & Impact Section --- */

.testimonials-section {
  padding-top: 4rem; /* py-16 */
  padding-bottom: 4rem;
  background-color: var(--color-gray-50, #f9fafb);
}

/* We use your existing .container class here in the HTML */

.testimonials-section__header {
  text-align: center;
  margin-bottom: 3rem; /* mb-12 */
}

.testimonials-section__title {
  font-size: 2.25rem; /* text-4xl */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem; /* mb-4 */
}

.testimonials-section__description {
  font-size: 1.25rem; /* text-xl */
  color: var(--brand-gray);
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.testimonials-section__stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
  margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 768px) {
  .testimonials-section__stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.testimonials-section__stat-item {
  text-align: center;
}

.testimonials-section__stat-value {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 700;
  color: var(--brand-gold);
  margin-bottom: 0.5rem; /* mb-2 */
}

.testimonials-section__stat-label {
  color: var(--brand-gray);
}

.testimonials-section__cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .testimonials-section__cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonials-section__card {
  background-color: var(--color-white, #ffffff);
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.testimonials-section__card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem; /* mb-4 */
}

.testimonials-section__avatar {
  width: 3rem; /* w-12 */
  height: 3rem; /* h-12 */
  border-radius: 9999px; /* rounded-full */
  margin-right: 1rem; /* mr-4 */
}

.testimonials-section__author-name {
  font-weight: 600;
  color: var(--brand-dark);
}

.testimonials-section__author-role {
  font-size: 0.875rem; /* text-sm */
  color: var(--brand-gray);
}

.testimonials-section__quote {
  color: var(--brand-gray);
  font-style: italic;
}

/* --- Styles for CTA Section --- */

.cta-section {
  padding-top: 4rem; /* py-16 */
  padding-bottom: 4rem;
  background-color: var(--brand-blue);
  text-align: center;
}

/* We use your existing .container class here in the HTML, no new CSS needed for it */

.cta-section__title {
  font-size: 2.25rem; /* text-4xl */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-white, #ffffff);
  margin-bottom: 1rem; /* mb-4 */
}

.cta-section__description {
  font-size: 1.25rem; /* text-xl */
  color: #e5e7eb; /* gray-200 standard hex */
  margin-bottom: 2rem; /* mb-8 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.cta-section__contact-block {
  max-width: 42rem; /* max-w-2xl */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem; /* mb-8 */
}

.cta-section__contact-title {
  font-size: 1.5rem; /* text-2xl */
  color: var(--color-white, #ffffff);
  font-weight: 600;
  margin-bottom: 1rem; /* mb-4 */
}

.cta-section__contact-text {
  font-size: 1.125rem; /* text-lg */
  color: #e5e7eb; /* gray-200 */
  margin-bottom: 1rem; /* mb-4 */
}

.cta-section__email-button {
  padding: 1rem 2rem; /* py-4 px-8 */
  background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  border: 1px solid rgba(255, 255, 255, 0.2); /* border-white/20 */
  color: var(--color-white, #ffffff);
  font-weight: 600;
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 1.25rem; /* text-xl */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
}

.cta-section__response-text {
  font-size: 1.125rem; /* text-lg */
  color: rgba(255, 255, 255, 0.8); /* text-white/80 */
  font-style: italic;
}

/* --- Styles for Promise Subsection --- */

.cta-section__promise-block {
  margin-top: 3rem; /* mt-12 */
  max-width: 56rem; /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
}

.cta-section__promise-card {
  background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 2rem; /* p-8 */
}

.cta-section__promise-title {
  font-size: 1.5rem; /* text-2xl */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-white, #ffffff);
  margin-bottom: 1.5rem; /* mb-6 */
}

.cta-section__promise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
  text-align: left;
}

@media (min-width: 768px) {
  .cta-section__promise-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cta-section__promise-item {
  text-align: center;
}

.cta-section__promise-icon {
  color: var(--brand-gold);
  font-size: 1.875rem; /* text-3xl */
  margin-bottom: 0.75rem; /* mb-3 */
}

.cta-section__promise-text {
  font-weight: 600;
  color: var(--color-white, #ffffff);
  margin-bottom: 0.5rem; /* mb-2 */
}


/* ========== frontend new dashboard ============== */
.paper-list-container {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 */
}

.paper-card {
  background-color: var(--color-white, #ffffff);
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
  padding: 1.5rem; /* p-6 */
  border: 1px solid;
}

.paper-card--green { border-color: var(--color-green-200, #bbf7d0); }
.paper-card--red { border-color: var(--color-red-200, #fecaca); }

.paper-card__header {
  display: flex;
  align-items: flex-start;
}

.paper-card__header > * + * {
    margin-left: 1.5rem; /* space-x-6 */
}

.paper-card__thumbnail {
  width: 6rem; /* w-24 */
  height: 6rem; /* h-24 */
  background-color: var(--brand-cream);
  border-radius: 0.5rem; /* rounded-lg */
  overflow: hidden;
  flex-shrink: 0;
}

.paper-card__thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paper-card__content {
  flex: 1;
}

.paper-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem; /* mb-2 */
}

.paper-card__title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  color: var(--brand-dark);
}

.paper-card__archive-btn {
  color: var(--brand-gray);
  transition: color 0.2s;
  padding: 0.5rem; /* p-2 */
  background: none;
  border: none;
  cursor: pointer;
}

.paper-card__archive-btn:hover {
  color: var(--brand-gold);
}

.paper-card__badge-row {
  display: flex;
  align-items: center;
}

.paper-card__badge-row > * + * {
    margin-left: 0.5rem; /* space-x-2 */
}

.paper-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  border-radius: 9999px; /* rounded-full */
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
}

.paper-card__badge--published {
  background-color: var(--color-green-100, #dcfce7);
  color: var(--color-green-800, #065f46);
}

.paper-card__badge--rejected {
  background-color: var(--color-red-100, #fee2e2);
  color: var(--color-red-800, #991b1b);
}

.paper-card__authors {
  font-size: 0.875rem; /* text-sm */
  color: var(--brand-gray);
  margin-bottom: 1rem; /* mb-4 */
}

.progress-bar-wrapper {
  position: relative;
  margin-bottom: 1.5rem; /* mb-6 */
}

.progress-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem; /* mb-2 */
}

.progress-bar-label {
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
}

.progress-bar-label--active-green { color: var(--color-green-600, #059669); }
.progress-bar-label--active-red { color: var(--color-red-600, #dc2626); }
.progress-bar-label--active-dark { color: var(--brand-dark); }
.progress-bar-label--active-gold { color: var(--brand-gold); }
.progress-bar-label--inactive { color: var(--brand-gray); }

.progress-track {
  position: relative;
  height: 0.5rem; /* h-2 */
  background-color: var(--color-gray-200, #e5e7eb);
  border-radius: 9999px; /* rounded-full */
}

.progress-fill {
  position: absolute;
  height: 0.5rem; /* h-2 */
  border-radius: 9999px; /* rounded-full */
}
.progress-fill--green-gradient { background-image: linear-gradient(to right, var(--color-green-500, #22c55e), var(--color-green-600, #16a34a)); }
.progress-fill--gold { background-color: var(--brand-gold); }
.progress-fill--red { background-color: var(--color-red-500, #ef4444); }
.progress-fill--green { background-color: var(--color-green-500, #22c55e); }


.progress-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.progress-dot {
  width: 0.75rem; /* w-3 */
  height: 0.75rem; /* h-3 */
  border-radius: 9999px; /* rounded-full */
  margin-top: -0.125rem; /* -mt-0.5 */
  border: 2px solid var(--color-white, #ffffff);
}
.progress-dot--green { background-color: var(--color-green-600, #059669); }
.progress-dot--gold { background-color: var(--brand-gold); }
.progress-dot--gray { background-color: var(--color-gray-300, #d1d5db); }
.progress-dot--red { background-color: var(--color-red-500, #ef4444); }


.progress-dates {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem; /* mt-2 */
}

.progress-date-item {
  text-align: center;
}

.progress-date-text {
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
}
.progress-date-text--green { color: var(--color-green-600, #059669); }
.progress-date-text--dark { color: var(--brand-dark); }
.progress-date-text--gold { color: var(--brand-gold); }
.progress-date-text--red { color: var(--color-red-600, #dc2626); }
.progress-date-text--gray { color: var(--brand-gray); }

.progress-duration-text {
  font-size: 0.75rem; /* text-xs */
  color: var(--brand-gray);
}

.payment-required-box {
  background-image: linear-gradient(to right, rgba(217, 160, 63, 0.1), rgba(217, 160, 63, 0.05)); /* brand-gold/10 to brand-gold/5 */
  border: 1px solid rgba(217, 160, 63, 0.3); /* brand-gold/30 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1rem; /* p-4 */
}

.payment-required-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem; /* mb-3 */
}

.payment-required-box__title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
}

.payment-required-box__amount {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  color: var(--brand-gold);
}

.payment-required-box__description {
  font-size: 0.875rem; /* text-sm */
  color: var(--brand-gray);
  margin-bottom: 1rem; /* mb-4 */
}

.payment-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* gap-4 */
}

@media (min-width: 768px) {
  .payment-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.payment-form-field {
  margin-bottom: 0;
}

.payment-form-label {
  display: block;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
  color: var(--brand-dark);
  margin-bottom: 0.25rem; /* mb-1 */
}

.payment-form-input {
  width: 100%;
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 0.875rem; /* text-sm */
  box-sizing: border-box;
}
.payment-form-input:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(217, 160, 63, 0.2);
}

.payment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem; /* mt-4 */
}

.payment-secure-badge {
  display: flex;
  align-items: center;
  font-size: 0.75rem; /* text-xs */
  color: var(--brand-gray);
}

.payment-pay-btn {
  background-color: var(--brand-gold);
  color: var(--color-white, #ffffff);
  padding: 0.5rem 1.5rem; /* px-6 py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 500;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  border: none;
  cursor: pointer;
}

.payment-pay-btn:hover {
  background-color: var(--brand-gold-80, rgba(217, 160, 63, 0.9));
}





.papers-list-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* space-y-8 */
}

/* General Utilities within this scope */
.papers-list-container .hidden {
    display: none !important;
}

/* Paper Card */
.papers-list-container .paper-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1.5rem; /* p-6 */
}

.papers-list-container .paper-card.border-green {
    border: 1px solid var(--green-200);
}

/* Header Section */
.papers-list-container .paper-header-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem; /* space-x-6 */
}

.papers-list-container .paper-thumb {
    width: 6rem; /* w-24 */
    height: 6rem; /* h-24 */
    background-color: var(--brand-cream);
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.papers-list-container .paper-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.papers-list-container .paper-details {
    flex: 1;
    /* Flex items default to min-width:auto and refuse to shrink below their
       content. Without this a title with no spaces in it stretches the card
       past the viewport instead of wrapping. */
    min-width: 0;
}

.papers-list-container .paper-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem; /* mb-2 */
}

.papers-list-container .paper-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: bold;
    color: var(--brand-dark);
    margin: 0;
    /* Titles are author-supplied and can carry long unbroken strings — gene
       sequences, chemical names, accession numbers. Break them rather than let
       one word decide the card's width. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.papers-list-container .paper-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
}

.papers-list-container .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 9999px;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500;
}
.papers-list-container .status-badge i{
    margin-right: 0.25rem; /* mr-1 */
}

.papers-list-container .status-published {
    background-color: var(--green-100);
    color: var(--green-800);
}

.papers-list-container .archive-btn {
    color: var(--brand-gray);
    padding: 0.5rem; /* p-2 */
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}

.papers-list-container .archive-btn:hover {
    color: var(--brand-gold);
}

.papers-list-container .archive-icon {
    font-size: 1.125rem; /* text-lg */
}

.papers-list-container .paper-authors {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
    margin-bottom: 1rem; /* mb-4 */
    margin-top: 0;
}

/* Progress Bar */
.papers-list-container .progress-section {
    position: relative;
    margin-bottom: 1.5rem; /* mb-6 */
}

/*
 * One column per step, shared by the three rows.
 *
 * All three were flex + space-between, which spreads items by their own width:
 * the dots are all 12px so theirs came out evenly, but "1st Decision" and
 * "Payment" are not the same length, so a label and a date landed wherever
 * their text happened to end up. The date under the decision step sat closer
 * to the submitted dot than to its own.
 *
 * A grid of equal columns gives every step the same slice of the width, and
 * the label, the dot and the date each sit in the middle of that slice — so
 * they line up by construction, whatever the words are.
 */
.papers-list-container .progress-labels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-bottom: 0.5rem; /* mb-2 */
}

.papers-list-container .progress-label {
    font-size: 0.75rem; /* text-xs */
    font-weight: 500;
    text-align: center;
    padding: 0 0.15rem;
}
.papers-list-container .progress-label.text-green { color: var(--green-600); }

.papers-list-container .progress-track-container {
    position: relative;
    height: 0.5rem; /* h-2 */
    background-color: var(--gray-200);
    border-radius: 9999px;
}

/* The part that has been done stands proud of the part that has not: a rounded
   bar a little taller than the track it runs along, so how far a paper has got
   is legible from the shape of the line and not only from its colour. */
.papers-list-container .progress-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 0.625rem; /* 10px, against the track's 8px */
    border-radius: 9999px;
}
.papers-list-container .progress-fill.fill-full { width: 100%; }
.papers-list-container .progress-fill.gradient-green { background: linear-gradient(to right, var(--green-500), var(--green-600)); }

.papers-list-container .progress-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-items: center;
}

.papers-list-container .progress-dot {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    border-radius: 50%;
    margin-top: -0.125rem; /* -mt-0.5 */
    border: 2px solid white;
}
.papers-list-container .progress-dot.bg-green { background-color: var(--green-600); }

.papers-list-container .progress-dates {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-top: 0.5rem; /* mt-2 */
}

.papers-list-container .date-group {
    text-align: center;
    padding: 0 0.15rem;
    min-width: 0;
}

.papers-list-container .date-main {
    font-size: 0.75rem; /* text-xs */
    font-weight: 500;
    margin: 0;
}
.papers-list-container .date-main.text-green { color: var(--green-600); }

.papers-list-container .date-sub {
    font-size: 0.75rem; /* text-xs */
    color: var(--brand-gray);
    margin: 0;
}

/* ---- Premium Submission Service ----------------------------------------
   A paper the editorial team is preparing for the author. Purple throughout,
   so the card is not read as a draft that has been left unfinished. */

.papers-list-container .paper-card.border-purple {
    border: 1px solid var(--purple-200);
}

.papers-list-container .status-premium {
    background-color: var(--purple-100);
    color: var(--purple-800);
}

.papers-list-container .premium-panel {
    background: linear-gradient(to right, var(--purple-50), rgba(250, 245, 255, 0.5));
    border: 1px solid var(--purple-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.papers-list-container .premium-panel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--purple-800);
    margin: 0 0 0.75rem;
}

.papers-list-container .premium-panel__title i {
    color: var(--purple-600);
}

.papers-list-container .premium-panel__text {
    font-size: 0.875rem;
    color: var(--purple-700);
    margin: 0 0 0.75rem;
}

.papers-list-container .premium-panel__eta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--purple-600);
}

.papers-list-container .progress-fill.gradient-purple {
    background: linear-gradient(to right, var(--purple-500), var(--purple-600));
}

.papers-list-container .progress-label.text-purple,
.papers-list-container .date-main.text-purple { color: var(--purple-600); }

.papers-list-container .progress-dot.bg-purple { background-color: var(--purple-600); }

/* The step being worked on, beating. Scaling a 12px dot would fight the 2px
   white ring it sits in, so only the opacity moves. */
/* The step being worked on keeps its filled dot and beats slowly. What says it
   is not finished is the bar: it stops halfway to this dot rather than running
   onto it. Drawing the dot as a hollow ring as well was tried and taken out —
   it read as a step that had been skipped rather than one in hand. */
.papers-list-container .progress-dot.is-working {
    animation: premium-dot-pulse 2s ease-in-out infinite;
}

@keyframes premium-dot-pulse {
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .papers-list-container .progress-dot.is-working { animation: none; }
}

/* Congrats Banner */
.papers-list-container .congrats-banner {
    /* Approximation of bg-gradient-to-br from-brand-gold/10 via-yellow-50 to-orange-50 */
    background: linear-gradient(to bottom right, rgba(217, 160, 63, 0.1), var(--yellow-50), var(--orange-50));
    border: 2px solid rgba(217, 160, 63, 0.3); /* border-brand-gold/30 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
    position: relative;
    overflow: hidden;
}

.papers-list-container .banner-blob {
    position: absolute;
    border-radius: 50%;
}

.papers-list-container .blob-top-right {
    top: 0;
    right: 0;
    width: 8rem; height: 8rem; /* w-32 h-32 */
    background: linear-gradient(to bottom right, rgba(217, 160, 63, 0.2), transparent);
    transform: translate(4rem, -4rem);
}

.papers-list-container .blob-bottom-left {
    bottom: 0;
    left: 0;
    width: 6rem; height: 6rem; /* w-24 h-24 */
    background: linear-gradient(to top right, rgba(253, 186, 116, 0.3), transparent); /* orange-200/30 approx */
    transform: translate(-3rem, 3rem);
}

.papers-list-container .banner-content {
    position: relative;
    z-index: 10;
}

.papers-list-container .banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem; /* mb-4 */
}

.papers-list-container .banner-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
}

.papers-list-container .congrats-icon-wrapper {
    width: 3rem; height: 3rem; /* w-12 h-12 */
    background: linear-gradient(to bottom right, var(--brand-gold), var(--yellow-600));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.papers-list-container .congrats-icon-wrapper svg{
    color: #fff;
}

.papers-list-container .congrats-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: bold;
    color: var(--brand-dark);
    margin: 0;
}

.papers-list-container .congrats-subtitle {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
    margin: 0;
}

.papers-list-container .limited-time-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 9999px;
    font-size: 0.75rem; /* text-xs */
    font-weight: bold;
    background-color: var(--red-100);
    color: var(--red-700);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    50% { opacity: .5; }
}

/* Timer */
.papers-list-container .timer-box {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 1rem; /* p-4 */
    margin-bottom: 1rem; /* mb-4 */
    border: 1px solid rgba(217, 160, 63, 0.2); /* border-brand-gold/20 */
}

.papers-list-container .timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* space-x-4 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.papers-list-container .timer-unit {
    text-align: center;
}

.papers-list-container .timer-val {
    font-size: 1.5rem; /* text-2xl */
    font-weight: bold;
    color: var(--red-600);
    line-height: 1;
}

.papers-list-container .timer-label {
    font-size: 0.75rem; /* text-xs */
    color: var(--brand-gray);
}

.papers-list-container .timer-separator {
    font-size: 1.5rem; /* text-2xl */
    color: var(--brand-gold);
}

.papers-list-container .timer-footer {
    text-align: center;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    color: var(--red-700);
    margin: 0;
}

/* Packages Section */
.papers-list-container .packages-section {
    margin-bottom: 1.5rem; /* mb-6 */
}

.papers-list-container .packages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem; /* mb-3 */
}

.papers-list-container .packages-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: bold;
    color: var(--brand-dark);
    margin: 0;
}

.papers-list-container .packages-pricing {
    text-align: right;
}

.papers-list-container .price-regular {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
    text-decoration: line-through;
}

.papers-list-container .price-total {
    font-size: 1.25rem; /* text-xl */
    font-weight: bold;
    color: var(--brand-gold);
}

.papers-list-container .packages-subtitle {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
    margin-bottom: 1rem; /* mb-4 */
    margin-top: 0;
}

.papers-list-container .packages-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem; /* mb-6 */
}

@media (min-width: 768px) {
    .papers-list-container .packages-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Package Card */
.papers-list-container .package-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    transition: all 0.3s;
    cursor: pointer;
}

.papers-list-container .package-card:hover {
    border-color: rgba(217, 160, 63, 0.4); /* hover:border-brand-gold/40 */
}

/* Selected state for package card */
.papers-list-container .package-card.is-selected {
    border-color: var(--brand-gold);
    background-color: rgba(217, 160, 63, 0.05); /* bg-brand-gold/5 */
}

.papers-list-container .package-label {
    cursor: pointer;
    display: block;
}

.papers-list-container .package-content {
    text-align: center;
}

.papers-list-container .package-icon {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem auto;
}
.papers-list-container .package-icon i{
    color: #fff;
}

.papers-list-container .icon-poster { background: linear-gradient(to bottom right, var(--blue-500), var(--blue-600)); }
.papers-list-container .icon-ppt { background: linear-gradient(to bottom right, var(--orange-500), var(--orange-600)); }
.papers-list-container .icon-video { background: linear-gradient(to bottom right, var(--purple-500), var(--purple-600)); }

.papers-list-container .package-name {
    font-weight: 600;
    color: var(--brand-dark);
    margin: 0 0 0.5rem 0;
    font-size: 14px;
}

.papers-list-container .package-desc {
    font-size: 14px; /* text-xs */
    color: var(--brand-gray);
    margin: 0 0 0.5rem 0;
}

.papers-list-container .package-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.papers-list-container .pkg-old-price {
    font-size: 0.75rem; /* text-xs */
    color: var(--brand-gray);
    text-decoration: line-through;
}

.papers-list-container .pkg-new-price {
    font-size: 0.875rem; /* text-sm */
    font-weight: bold;
}
.papers-list-container .price-blue { color: var(--blue-600); }
.papers-list-container .price-orange { color: var(--orange-600); }
.papers-list-container .price-purple { color: var(--purple-600); }

.papers-list-container .checkbox-indicator {
    margin-top: 0.5rem;
    width: 1.25rem; height: 1.25rem; /* w-5 h-5 */
    border: 2px solid var(--gray-300);
    border-radius: 0.25rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkbox indicator selected state */
.papers-list-container .package-card.is-selected .checkbox-indicator {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
}

.papers-list-container .check-icon {
    font-size: 0.75rem; /* text-xs */
    color: white;
    display: none; /* hidden by default */
}

.papers-list-container .package-card.is-selected .check-icon {
    display: block;
}

/* Payment Section */
.papers-list-container .payment-summary {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid rgba(217, 160, 63, 0.3); /* border-brand-gold/30 */
    margin-bottom: 1rem;
}

.papers-list-container .summary-title {
    font-weight: 600;
    color: var(--brand-dark);
    margin: 0 0 0.75rem 0;
}

.papers-list-container .summary-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.papers-list-container .summary-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem; /* text-sm */
}

.papers-list-container .summary-total-row {
    border-top: 1px solid var(--gray-200);
    padding-top: 0.75rem;
}

.papers-list-container .total-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.papers-list-container .total-label {
    font-weight: 600;
    color: var(--brand-dark);
}

.papers-list-container .total-value {
    font-size: 1.25rem; /* text-xl */
    font-weight: bold;
    color: var(--brand-gold);
}

.papers-list-container .payment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.papers-list-container .guarantee-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.papers-list-container .shield-icon {
    color: var(--green-600);
}

.papers-list-container .guarantee-text {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
}

.papers-list-container .pay-now-btn {
    background: linear-gradient(to right, var(--brand-gold), var(--yellow-600));
    color: white;
    padding: 0.75rem 2rem; /* px-8 py-3 */
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 1.125rem; /* text-lg */
    transition: all 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
}

.papers-list-container .pay-now-btn:hover {
    /* simplified hover gradient approximation or just standard opacity change */
    opacity: 0.95;
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* No Selection State */
.papers-list-container .no-selection-state {
    text-align: center;
    padding: 1rem 0;
}

.papers-list-container .no-selection-text {
    color: var(--brand-gray);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.papers-list-container .no-selection-btn {
    background-color: var(--gray-300);
    color: #6b7280; /* gray-500 approx */
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 1.125rem;
    cursor: not-allowed;
    border: none;
}
/* --- New Utilities for Paper 2 --- */
.papers-list-container .mb-6 { margin-bottom: 1.5rem; }
.papers-list-container .mr-1 { margin-right: 0.25rem; }
.papers-list-container .mr-2 { margin-right: 0.5rem; }

/* Paper Card variants */
.papers-list-container .paper-card.border-gold {
    border: 1px solid rgba(217, 160, 63, 0.2); /* border-brand-gold/20 */
}

/* Progress Bar variants for Paper 2 */
.papers-list-container .progress-label.text-dark { color: var(--brand-dark); }
.papers-list-container .progress-label.text-gold { color: var(--brand-gold); }
.papers-list-container .progress-label.text-gray { color: var(--brand-gray); }

.papers-list-container .progress-fill.fill-half { width: 50%; }
.papers-list-container .progress-fill.bg-gold { background-color: var(--brand-gold); }

.papers-list-container .progress-dot.bg-gold { background-color: var(--brand-gold); }
.papers-list-container .progress-dot.bg-gray { background-color: var(--gray-300); }

.papers-list-container .date-main.text-dark { color: var(--brand-dark); }
.papers-list-container .date-main.text-gold { color: var(--brand-gold); }
.papers-list-container .date-main.text-gray { color: var(--brand-gray); }

/* Payment Card Section */
.papers-list-container .payment-card-container {
    /* gradient from brand-gold/10 to brand-gold/5 */
    background: linear-gradient(to right, rgba(217, 160, 63, 0.1), rgba(217, 160, 63, 0.05));
    border: 1px solid rgba(217, 160, 63, 0.3); /* border-brand-gold/30 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
}

.papers-list-container .payment-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem; /* mb-3 */
}

.papers-list-container .payment-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    margin: 0;
}

.papers-list-container .payment-title-icon {
    color: var(--brand-gold);
    margin-right: 0.5rem; /* mr-2 */
}

.papers-list-container .payment-amount {
    font-size: 1.25rem; /* text-xl */
    font-weight: bold;
    color: var(--brand-gold);
}

.papers-list-container .payment-desc {
    font-size: 0.875rem; /* text-sm */
    color: var(--brand-gray);
    margin: 0 0 1rem 0; /* mb-4 */
}

.papers-list-container .payment-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* gap-4 */
}

@media (min-width: 768px) {
    .papers-list-container .payment-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.papers-list-container .form-group {
    display: flex;
    flex-direction: column;
}

.papers-list-container .form-label {
    display: block;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: var(--brand-dark);
    margin-bottom: 0.25rem; /* mb-1 */
}

.papers-list-container .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    outline: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.papers-list-container .form-input:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(217, 160, 63, 0.2); /* ring-brand-gold/20 */
}

.papers-list-container .payment-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem; /* mt-4 */
}

.papers-list-container .secure-badge {
    display: flex;
    align-items: center;
    font-size: 0.75rem; /* text-xs */
    color: var(--brand-gray);
}

.papers-list-container .pay-btn {
    background-color: var(--brand-gold);
    color: white;
    padding: 0.5rem 1.5rem; /* px-6 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.papers-list-container .pay-btn:hover {
    background-color: rgba(217, 160, 63, 0.9); /* hover:bg-brand-gold/90 */
}

/* --- New Utilities for Paper 3 --- */
.papers-list-container .mb-2 { margin-bottom: 0.5rem; }
.papers-list-container .mb-4 { margin-bottom: 1rem; }

/* Progress Bar variants for Paper 3 */
.papers-list-container .progress-fill.fill-37 { width: 37.5%; }
.papers-list-container .progress-fill.bg-green-solid { background-color: var(--green-500); }
/* Paper Card variants */
.papers-list-container .paper-card.border-red {
    border: 1px solid var(--red-100); /* approximated from border-red-200 but using var if available, else use hex #fecaca */
}

/* Status Badge variants */
.papers-list-container .status-rejected {
    background-color: var(--red-100);
    color: var(--red-800); /* approximated text-red-800 #991b1b */
}

/* Progress Bar variants for Paper 4 */
.papers-list-container .progress-label.text-red { color: var(--red-600); }
.papers-list-container .date-main.text-red { color: var(--red-600); }
.papers-list-container .progress-fill.bg-red-solid { background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); /* #ef4444 */ }
.papers-list-container .progress-dot.bg-red { background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); }


/* Rejection Card Section */
.papers-list-container .rejection-card-container {
    background-color: #fef2f2; /* bg-red-50 */
    border: 1px solid #fecaca; /* border-red-200 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
}

.papers-list-container .rejection-content-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* space-x-3 */
}

.papers-list-container .rejection-icon {
    color: var(--red-600);
    margin-top: 0.25rem; /* mt-1 */
}

.papers-list-container .rejection-details {
    flex: 1;
}

.papers-list-container .rejection-title {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #991b1b; /* text-red-800 */
    margin: 0 0 0.5rem 0; /* mb-2 */
}

.papers-list-container .rejection-text {
    font-size: 0.875rem; /* text-sm */
    color: #b91c1c; /* text-red-700 */
    margin-top: 0;
}

.papers-list-container .rejection-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.papers-list-container .next-steps-label {
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: var(--red-600);
}

.papers-list-container .resubmit-btn {
    background-color: var(--red-600);
    color: white;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.papers-list-container .resubmit-btn:hover {
    background-color: #b91c1c; /* hover:bg-red-700 */
}




/* New parent container for centering */
.confirmation-page-container {
    min-height:calc(100vh - 250px) ;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-50);
    padding: 1rem;
    font-family: var(--font-sans, sans-serif);
}

.confirmation-page-container .confirmation-card {
    max-width: 42rem; /* max-w-2xl */
    width: 100%;
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 2.5rem; /* p-10 */
    text-align: center;
    border: 1px solid var(--gray-200);
}

@media (min-width: 768px) {
    .confirmation-page-container .confirmation-card {
        padding: 3rem; /* md:p-12 */
    }
}

.confirmation-page-container .confirmation-icon-wrapper {
    margin-bottom: 1.5rem; /* mb-6 */
}

.confirmation-page-container .icon-circle {
    margin-left: auto;
    margin-right: auto;
    width: 5rem; /* w-20 */
    height: 5rem; /* h-20 */
    background-color: var(--green-100);
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation-page-container .icon-svg {
    font-size: 3rem; /* text-5xl */
    color: var(--green-500);
}

.confirmation-page-container .confirmation-title {
    font-size: 1.875rem; /* text-3xl */
    font-family: var(--font-heading, sans-serif);
    color: var(--brand-dark);
    margin-bottom: 1rem; /* mb-4 */
    margin-top: 0;
}

.confirmation-page-container .confirmation-message {
    color: var(--cool-slate-gray);
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1.5rem; /* mb-6 */
    line-height: 1.625; /* leading-relaxed */
}

.confirmation-page-container .review-process-info {
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    border: 1px solid rgb(239 246 255 / var(--tw-bg-opacity, 1));
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.5rem; /* p-6 */
    margin-bottom: 2rem; /* mb-8 */
    text-align: left;
}

.confirmation-page-container .review-info-flex {
    display: flex;
    align-items: flex-start;
}

.confirmation-page-container .review-info-icon {
    color: var(--soft-ocean-blue);
    font-size: 1.5rem; /* text-2xl */
    margin-right: 1rem; /* mr-4 */
    margin-top: 0.25rem; /* mt-1 */
    flex-shrink: 0;
}

.confirmation-page-container .review-info-text {
    flex: 1;
}

.confirmation-page-container .review-info-title {
    font-weight: bold;
    color: var(--soft-ocean-blue);
    margin-top: 0;
    margin-bottom: 0.5rem; /* mb-2 */
}

.confirmation-page-container .review-info-desc {
    color: var(--cool-slate-gray);
    margin: 0;
    line-height: 1.625;
}

.confirmation-page-container .review-info-desc .font-bold {
    font-weight: bold;
}

.confirmation-page-container .return-button-container {
    /* container for the button, no extra styles needed from tailwind */
}

.confirmation-page-container .return-home-btn {
    display: inline-block;
    padding: 0.75rem 2.5rem; /* px-10 py-3 */
    background-color: var(--brand-gold);
    color: white;
    font-weight: 600; /* font-semibold */
    border-radius: 0.5rem; /* rounded-lg */
    text-decoration: none;
    transition: background-color 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.confirmation-page-container .return-home-btn:hover {
    background-color: var(--yellow-600);
}



/* Outer container for centering */
.invitation-page-container {
    min-height: calc(100vh - 250px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-50);
    padding: 1rem;
    font-family: var(--font-sans, sans-serif);
}

.invitation-page-container .invitation-card {
    max-width: 32rem; /* max-w-lg */
    width: 100%;
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 2rem; /* p-8 */
    border: 1px solid var(--gray-200);
}

@media (min-width: 768px) {
    .invitation-page-container .invitation-card {
        padding: 2.5rem; /* md:p-10 */
    }
}

.invitation-page-container .invitation-icon-wrapper {
    margin-bottom: 1.5rem; /* mb-6 */
    text-align: center;
}

.invitation-page-container .icon-circle-blue {
    margin-left: auto;
    margin-right: auto;
    width: 5rem; /* w-20 */
    height: 5rem; /* h-20 */
    background-color: var(--blue-100);
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
}

.invitation-page-container .icon-svg-blue {
    font-size: 2.25rem; /* text-4xl approx */
    color: var(--soft-ocean-blue);
}

.invitation-page-container .invitation-title {
    font-size: 1.5rem; /* text-2xl */
    font-family: var(--font-heading, sans-serif);
    color: var(--brand-dark);
    margin-bottom: 1rem; /* mb-4 */
    text-align: center;
    font-weight: bold; /* font-heading usually implies bold, added for safety */
}

.invitation-page-container .invitation-message {
    color: var(--cool-slate-gray);
    text-align: center;
    margin-bottom: 2rem; /* mb-8 */
    line-height: 1.625; /* leading-relaxed */
}

.invitation-page-container .activation-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

.invitation-page-container .form-group {
    display: flex;
    flex-direction: column;
}

.invitation-page-container .form-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--brand-dark);
    margin-bottom: 0.5rem; /* mb-2 */
}

.invitation-page-container .form-input {
    width: 100%;
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem; /* rounded-lg */
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.invitation-page-container .form-input:focus {
    box-shadow: 0 0 0 2px var(--brand-gold); /* ring-2 ring-brand-gold */
    border-color: transparent;
}

.invitation-page-container .input-disabled {
    background-color: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.invitation-page-container .activate-btn {
    width: 100%;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    background-color: var(--brand-gold);
    color: white;
    font-weight: 600; /* font-semibold */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: none;
    cursor: pointer;
}

.invitation-page-container .activate-btn:hover {
    background-color: #ca8a04; /* hover:bg-yellow-600 approx */
}

.invitation-page-container .activation-info {
    margin-top: 1.5rem; /* mt-6 */
    padding: 1rem; /* p-4 */
    background-color: var(--blue-100);
    border: 1px solid var(--blue-200);
    border-radius: 0.5rem; /* rounded-lg */
}

.invitation-page-container .info-flex {
    display: flex;
    align-items: flex-start;
}

.invitation-page-container .info-icon {
    color: var(--soft-ocean-blue);
    margin-right: 0.75rem; /* mr-3 */
    margin-top: 0.25rem; /* mt-1 */
}

.invitation-page-container .info-text {
    font-size: 0.875rem; /* text-sm */
    color: var(--cool-slate-gray);
    margin: 0;
}



#profile-credentials .profile-header h4{
    margin-bottom: 5px;
    margin-top: 0;
}
#profile-credentials .profile-header p{
    margin: 0;
}


.settings-section .profile-header {
    display: flex;
    align-items: center;
    gap: 20px; /* Adds space between image and text */
    font-family: sans-serif;
}

.settings-section .profile-image-wrapper {
    position: relative;
    width: 100px; /* Set your desired size */
    height: 100px; /* Set your desired size */
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #eee; /* Optional: nice border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.settings-section #profileImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Removes any bottom spacing */
}

.settings-section .profile-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    color: white;
    font-size: 24px; /* Size for the icon */
    
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

.settings-section .profile-image-wrapper:hover .profile-upload-overlay {
    opacity: 1;
}

.edit-icon {
    /* You can style the icon text here */
}


.media-flex-fi .imgs {
    display: none;
}
.ai-services-box.mobile{
    display: none;
}
/* responsive for all*/
@media (max-width: 768px) {
    #brand-logo{
        font-size: 14px;
    }
    #brand-logo img{
        max-height: 30px;
    }
    #nav-links .user-name{
        display: none;
    }
    #nav-links{
        gap: 10px;
    }
    #main-nav{
        padding-left: 15px;
        padding-right: 15px;
    }

    #nav-links a{
        font-size: 14px;
    }
    #nav-links .btn{
        display: none;
    }

    #hero-about h1{
        margin-top: 0;
        font-size: 30px;
    }
    #admin-login-card,
    #mission-section .mission-card{
        padding: 20px;
    }
    #mission-section .mission-card .mission-text{
        font-size: 14px;
    }
    #mission-section .mission-card h2{
        margin-bottom: 10px;
        font-size: 18px;
    }
    #mission-section .quote-box p{
        margin: 0;
        font-size: 16px;
    }
    .credibility-heading,
    .value-card h3{
        font-size: 18px;
    }
    #security-banner p,
    #admin-login-header p,
    .value-card p{
        font-size: 14px;
    }
    .credibility-heading{
        margin: 0;
    }
    .credibility-number{
        font-size: 17px;
    }
    .credibility-grid{
        gap: 10px;
    }
    #cta-section .cta-card h2{
        font-size: 22px;
    }
    #cta-section .cta-card p{
        font-size: 16px;
    }
    #cta-section .cta-card .cta-buttons a{
        font-size: 16px;
    }

    #admin-login-header h1{
        font-size: 18px;
    }
    .admin-page-wrapper #header #brand-logo{
        font-size: 14px;
    }
    .admin-page-wrapper #header .header-icon-container{
        width: 25px;
        height: 25px;
    }
    .admin-page-wrapper #nav-links a span{
        display: none;
    }

    .contact-card,
    .contact-info-grid__quick-contact-card,
    .publications-wrapper,
    .author-header-wrapper{
        padding: 1rem;
    }
    .author-header-wrapper .author-avatar{
        width: 4rem;
        height: 4rem;
    }
    .publication-title,
    .publications-title,
    .author-header-wrapper .author-name{
        font-size: 1.2rem;
    }
    .publication-authors,
    .author-header-wrapper .author-affiliation,
    .author-header-wrapper .author-title{
        font-size: 0.9rem;
    }
    #dashboard-section .section-header,
    #filter-actions,
    .publication-stats,
    .publication-tags,
    .publications-header,
    .author-header-wrapper .contact-info{
        flex-wrap: wrap;
        gap: 5px;
    }
    .author-header-wrapper .author-stats{
        display: none;
    }
    .publications-title{
        margin: 0;
    }

    .publication-stats{
        gap: 5px;
    }
    .disclosure-toggle .paper-section-subtitle,
    .paper-section-title,
    #dashboard-section #page-title,
    .contact-page-header__title{
        font-size: 1.5rem;
    }
    .paper-author-name,
    .paper-section-subtitle,
    .contact-card__email-address,
    .contact-card__email-title,
    .contact-card__description,
    .contact-page-header__subtitle{
        font-size: 1rem;
        word-break: break-all;
    }
    .contact-page-header{
        margin-bottom: 2rem;
    }
    .contact-info-grid__contact-title{
        margin: 0;
        margin-bottom: 1rem;
    }
    .paper-thumbnail{
        width: 4rem;
        height: 4rem;
    }
    #filter-dropdown{
        right: auto;
        left: 0;
    }
    .faq-page #hero-section-faq h1{
        font-size: 2rem;
        line-height: 140%;
        margin: 0;
        margin-bottom: 10px;
    }
    
    .faq-page #hero-section-faq p{
        font-size: 1rem;
    }
    .paper-main-title,
    .faq-page .faq-category h2{
        font-size: 1.25rem;
    }
    .faq-page .faq-content .content-box{
        padding: 1rem;
    }
    .faq-page .faq-content .content-box p{
        margin: 0;
    }
    .faq-page #hero-section-faq{
        height: 350px;
    }
    #main-content,
        .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .paper-main-grid{
        display: inline-block;
        width: 100%;
    }
    .horizontal-nav-list{
        justify-content: flex-start;
    }
    #forgot-password-card,
    .paper-detail-section-keywords, .paper-detail-section,
    .paper-header-box{
        padding: 1rem;
    }
    .paper-pub-info-grid p{
        margin: 0;
    }
    .paper-copy-article-box .flex{
        flex-wrap: wrap;
        gap: 10px;
    }
    #guidelines-main #page-header h1,
    #main-headline{
        font-size: 2rem;
    }
    #guidelines-main #page-header p,
        #sub-headline {
        font-size: 1rem;
    }
    #cta-buttons{
        margin-top: 2rem;
    }
    .invitation-page-container{
        padding: 0;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    #guidelines-main #page-header h1{
        margin: 0;
    }
    #guidelines-main{margin-top: 2rem;}
    #guidelines-main #page-header{
        margin-bottom: 2re,;
    }
    #quick-help{
        padding: 1rem;
    }
    .auth-form-section{
        padding-left:  10px;
        padding-right:  10px;
    }
    .editorial-hero-section__main-title{
        font-size: 2rem;
        margin-bottom: 0;
        line-height: 140%;
    }
    .editorial-section__quote-text,
    .editorial-hero-section__tagline,
    .editorial-hero-section__journal-name{
        font-size: 1rem;
    }
    .editorial-hero-section{
        margin-bottom: 2rem;
    }
    .hero-content-peer-reviewer .hero-heading,
    .confirmation-page-container .confirmation-title,
    .editorial-section__title{
        font-size: 1.5rem;
    }
    .editorial-section__header{
        margin-bottom: 1rem;
    }
    .hero-content-peer-reviewer .section-heading,
    .hero-content-peer-reviewer .form-title,
    .hero-content-peer-reviewer .hero-description,
    .confirmation-page-container .confirmation-message,
    .editorial-section__highlight-text,
    .editorial-section__body{
        font-size: 1rem;
    }
    .hero-content-peer-reviewer .form-subtitle{
        font-size: 0.9rem;
    }
    .hero-content-peer-reviewer .form-header,
    .hero-content-peer-reviewer .form-content,
    .confirmation-page-container .confirmation-card,
    .editorial-section{
        padding: 1rem;
    }
    .hero-content-peer-reviewer .form-grid,
    .editorial-section__belief-grid{
        gap: 10px;
    }
    .editorial-signature{
        padding-top: 0;
    }
    .confirmation-page-container{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .hero-content-peer-reviewer .hero-text-center{
        margin-bottom: 1rem;
    }
    .hero-content-peer-reviewer{
        padding-top: 20px;
    }
    /* The eight-step timeline needs ~700px to keep each label on one line.
       A phone is narrower than that, so the row scrolls INSIDE the card
       rather than spilling out of it — the min-width goes on the three rows,
       and the section around them is the scroll viewport. Putting the
       min-width on the section itself (as it was) made the card the thing
       that overflowed. The three rows share one scroll box, so they stay in
       step with each other and with the fill. */
    .papers-list-container .progress-section {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;              /* Firefox */
    }
    .papers-list-container .progress-section::-webkit-scrollbar {
        display: none;                       /* WebKit — the dots already say where it scrolls */
    }
    .papers-list-container .progress-labels,
    .papers-list-container .progress-track-container,
    .papers-list-container .progress-dates {
        min-width: 640px;
    }

.papers-list-container .congrats-banner {
    /* Unlike the timeline, this banner has nothing that needs a fixed width —
       its header, timer and package cards all reflow. Forcing 600px only made
       it, too, spill out of a phone-width card. Let it fill the card. */
    min-width: 0;
}

.papers-list-container .paper-thumb {
    display: none;
}
.testimonials-section__title,
.cta-section__title,
.sponsorship-section__title,
.students-section__title,
.research-hero-section__main-title,
#terms-main #hero-section-terms h1{
    font-size: 2rem;
    line-height: 130%;
}
.sandbox-subsection__title,
.research-hero-section__subtitle{
    font-size: 1.5rem;
}
.cta-section__email-button,
.cta-section__contact-title,
.cta-section__description,
.students-section__description,
.research-hero-section__email-box,
.research-hero-section__description,
#terms-main #hero-section-terms .subtitle{
    font-size: 1rem;
}
.cta-section__email-button svg,
.research-hero-section__email-box svg{
    display: none;
}
.paid-paper-wrap .grid-container{
    gap: 0;
    width: 100%;
    display: inline-block;
}
.testimonials-section .container,
.students-section .container{
    padding: 0;
}
ul.sponsorship-section__list{
    margin:0;
    padding: 0;
}
.cta-section__promise-card,
.sponsorship-section__card{
    padding: 1rem;
}
.cta-section__email-button{
    word-break: break-all;
}

#profile-credentials .profile-header img{
    width: 4rem;
    height: 4rem;
}
#account-nav-sidebar .sidebar-content{
    padding: 1rem;
}

.statistics-page #hero-section h1{
    font-size: 2rem;
}
.statistics-page #statistics-main{
    min-height: 1px;
}
.statistics-page #hero-section .hero-content{
    padding-top: 10px;
}
.statistics-page #hero-section{
    height: auto;
}
.statistics-page #cta-section,
.statistics-page #pricing-section,
.statistics-page #speed-comparison{
    padding: 2rem 0 !important;
}
.statistics-page .section-header h2{
    font-size: 1.5rem;
    line-height: 140%;
}
.statistics-page .section-header p{
    font-size: 1rem;
}
.review-distribution-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.review-distribution-chart-area{
    height: auto;
}

.paper-actions{
    display: none;
}
#account-nav-sidebar{
    display: none;
}

.settings-section .profile-image-wrapper{
    width: 70px;
    min-width: 70px;
    height: 70px;
}
#profile-credentials .profile-header img{
    width: 100%;
    height: 100%;
}
#account-security .linked-accounts-buttons {
    flex-wrap: wrap;
    gap: 10px;
}

#account-security .linked-accounts-buttons button {
    width: 100%;
    text-align: center;
    justify-content: center;
}
#account-security .delete-account-section{
    padding-top: 20px;
    margin-top: 10px;
}
#research-interests .interest-tag{
    flex: auto;
}
#research-interests .notification-frequency-btns button {
    flex: unset;
    width: 100%;
    max-width: 47%;
}

#research-interests .notification-frequency-btns {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.paper-action-btn {
    flex: auto;
    width: 100%;
    max-width: 48%;
    justify-content: center;
}

.paper-action-buttons-group {
    justify-content: space-between;
    gap: 9px 0px;
}

.media-flex-fi .imgs {
    display: block;
}

.paper-image-col{
    display: none;
}
.media-flex-fi .imgs {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
} 
.media-flex-fi .imgs img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-flex-fi {
    display: flex;
    align-items: center;
    gap: 13px;
}

.media-flex-fi .imgs {
    flex-shrink: 0;
}

.media-flex-fi h1 {
    flex-grow: 1;
    margin: 0;
}
.clipboard-box{
    display: none;
}
.ai-services-box.desktop{
    display: none;
}
.ai-services-box.mobile{
    display: block;
    margin-bottom: 20px;
    margin-top: 0;
}
.ai-services-info-box{
    display: none;
}
.ai-services-box.mobile{
    padding: 15px;
}
.ai-services-icon{
    font-size: 15px;
}

.ai-services-buttons{
    gap: 10px;
}
.paid-paper-wrap .service-icon-container{
    background: transparent;
}
.paid-paper-wrap .service-description{
    display: none;
}
.paid-paper-wrap .service-icon-container {
    width: auto;
    height: auto;
}

.paid-paper-wrap .service-list {
    gap: 12px;
}

.paid-paper-wrap .delivery-time-section {
    margin-top: 11px;
}

.paid-paper-wrap .grid-container {
    display: flex;
    flex-direction: column;
}

.paid-paper-wrap .payment-section {
    order: 1;
}

.paid-paper-wrap .service-details-container {
    order: 2;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.paid-paper-wrap .service-details {
    order: 2;
    margin-top: 20px;
}

.paid-paper-wrap .paper-reference {
    order: 1;
}
}

@media (max-width:1200px){
        #main-content,
        .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
      #main-headline{
        font-size: 2rem;
    }
}


/* why choose us */
.differences-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.differences-section .differences-section__inner-container {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

.differences-section .differences-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: auto;
}

@media (min-width: 1024px) {
  .differences-section .differences-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.differences-section .differences-section__card {
  background-color: var(--color-white, #ffffff);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-gray-100, #f3f4f6);
  transition: all 0.3s;
}

.differences-section .differences-section__card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-0.25rem);
}

.differences-section .differences-section__card-content {
  display: flex;
  align-items: flex-start;
}

.differences-section .differences-section__card-content > * + * {
  margin-left: 1rem;
}

.differences-section .differences-section__icon-wrapper {
  width: 3rem;
  height: 3rem;
  background-color: var(--brand-gold-transparent, rgba(217, 160, 63, 0.1));
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.differences-section .differences-section__icon {
  color: var(--brand-gold);
  font-size: 1.25rem;
}

.differences-section .differences-section__card-title {
    margin: 0;
  font-size: 1.25rem;
  font-family: var(--font-heading);
  color: var(--brand-dark);
  margin-bottom: 0.75rem;
}

.differences-section .differences-section__card-description {
  color: var(--brand-gray);
  line-height: 1.625;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.differences-section .differences-section__card-highlight {
  font-size: 0.875rem;
  color: var(--brand-gold);
  margin: 0;
  font-weight: 500;
}

@media (max-width:767px){
    .differences-section{
        padding-top: 2rem;
    }
    .differences-section .differences-section__grid{
        gap: 15px;
    }
    .differences-section .differences-section__card{
        padding: 15px;
    }
    .differences-section .differences-section__icon-wrapper{
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .differences-section .differences-section__icon{
        font-size: 14px;
    }
    .differences-section .differences-section__card-title{
        font-size: 1rem;
        margin-bottom: 5px;
    }
    .differences-section .differences-section__card-highlight,
    .differences-section .differences-section__card-description{
        font-size: 0.8rem;
    }
    #cta-section .cta-card{
        padding: 1rem;
    }
}



/* --- Scope: Global Notification (gn) --- */
.gn-wrapper {
  position: relative;
  display: inline-block;
  /* Ensure fonts are consistent */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.gn-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px; /* Tighter padding for better alignment */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gn-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #e74c3c;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-weight: bold;
  border: 2px solid white; /* Thicker border makes it pop */
  display: none;
}

/* --- The Dropdown --- */
.gn-dropdown {
  display: none;
  position: absolute;
  top: 130%; /* Pushes it slightly down to make room for the arrow */
  right: 0; /* Aligns right edge with the bell */
  
  /* Desktop Width */
  width: 320px;
  
  background: white;
  border: 1px solid #e1e4e8;
  /* Premium Shadow */
  box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
  border-radius: 8px;
  z-index: 1000; /* High z-index */
  text-align: left;
}

.gn-dropdown.gn-active {
  display: block;
  /* Optional: Simple fade-in animation */
  animation: gnFadeIn 0.2s ease-out;
}

/* --- The Arrow (Triangle) --- */
.gn-dropdown::before {
  content: "";
  position: absolute;
  top: -6px; /* Moves it just above the box */
  right: 14px; /* Aligns with the center of the bell icon */
  width: 12px;
  height: 12px;
  background: #1a2c42; /* Matches your header color */
  transform: rotate(45deg);
  border-top: 1px solid #1a2c42;
  border-left: 1px solid #1a2c42;
}

/* --- Mobile Logic --- */
@media (max-width: 480px) {
  .gn-dropdown {
    /* On mobile, we change the right offset slightly to prevent edge-hugging */
    right: -10px; 
    
    /* Instead of fixed pixels, use Viewport Width */
    max-width: 320px;
        width: 55vw;
  }
  
  /* Move arrow slightly to match the new shift */
  .gn-dropdown::before {
    right: 24px; 
    display: none;
  }
}

/* --- Animations --- */
@keyframes gnFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Header & List Styles (Your Color #1a2c42) --- */
.gn-header {
  background-color: #1a2c42;
  padding: 15px;
  border-radius: 8px 8px 0 0; /* Rounds only top corners */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gn-header h4 {
  margin: 0;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.gn-link-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  cursor: pointer;
}
.gn-link-btn:hover { color: white; text-decoration: underline; }

.gn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 350px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Item Styling --- */
.gn-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
  transition: background 0.2s;
}

.gn-item:hover { background-color: #f9fbfc; }

.gn-item:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }

.gn-content strong {
  display: block;
  font-size: 13px;
  color: #1a2c42;
  margin-bottom: 4px;
}

.gn-content p {
  margin: 0;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* --- Unread Logic --- */
.gn-item.gn-unread {
  background-color: #f4f7fa; /* Very subtle tint */
}

.gn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1a2c42;
  margin-top: 6px;
  margin-right: 12px;
  flex-shrink: 0;
  opacity: 0; 
}

.gn-item.gn-unread .gn-dot { opacity: 1; }

/*
 * References, a line each.
 *
 * The section used to be one free-text box, so a bibliography pasted out of
 * Word became a wall of prose with hand-typed numbering. Each reference is a
 * row now: the number is drawn from the position, so removing or moving one
 * renumbers the rest.
 */
.reference-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reference-intro {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

/*
 * The box a whole bibliography goes into.
 *
 * Deliberately the largest thing in the section: splitting a paste has worked
 * for a while, but it only ever happened if the author found the narrow first
 * row and clicked into it, so most of them were pasting one reference at a
 * time. Big enough to look like it wants the lot, with a line saying so.
 */
.reference-paste-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/*
 * One box, and it says what it is for. There was a panel around this with an
 * icon, a heading and a line of explanation under it -- three pieces of
 * furniture to deliver one sentence that fits inside the box itself.
 */
.reference-paste {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
    padding: 0.75rem 0.9rem;
    border: 1px dashed #d8dee6;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #0f172a;
    text-align: left;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/*
 * Centred while it holds nothing but the invitation, and only then: on the
 * first keystroke the text goes back to the left, because a reference set
 * centre-aligned is unreadable and the box has stopped being a sign.
 */
.reference-paste:placeholder-shown {
    text-align: center;
    padding-top: 2.75rem;
}

.reference-paste::placeholder {
    color: #94a3b8;
}

.reference-paste:hover {
    border-color: #c2cbd6;
}

.reference-paste:focus {
    outline: none;
    border-style: solid;
    border-color: var(--brand-gold, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.reference-paste-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 1.25rem;
}

.reference-paste-said {
    font-size: 0.8125rem;
    color: #15803d;
}

/* Nothing was added — every line was already there. Not a success, not an
   error: the list is exactly as the author wanted it. */
.reference-paste-said.is-quiet {
    color: #64748b;
}

/* .btn sets a display, which outranks the hidden attribute on its own. */
.reference-paste-add[hidden] {
    display: none;
}

.reference-list-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reference-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.reference-row:focus-within {
    border-color: var(--brand-gold, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.reference-number {
    flex: 0 0 auto;
    min-width: 1.6rem;
    padding-top: 0.35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #64748b;
    text-align: right;
}

.reference-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    resize: none;
    overflow-y: auto;
    padding: 0.3rem 0;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #0f172a;
    background: transparent;
}

.reference-input::placeholder {
    color: #cbd5e1;
}

.reference-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
}

.reference-move {
    border: 0;
    background: none;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
}

.reference-move:hover:not([disabled]) {
    background: #f1f5f9;
    color: #475569;
}

.reference-move[disabled] {
    opacity: 0.3;
    cursor: default;
}

.reference-list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.reference-count {
    font-size: 0.8125rem;
    color: #64748b;
}

/* And how the finished list reads wherever a paper is shown. */
.paper-content .reference-list,
.summary-editor-content .reference-list,
.paper-text .reference-list,
.selectable-text .reference-list,
.paper-section-paragraph .reference-list {
    margin: 0;
    padding-left: 1.4rem;
}

.paper-content .reference-list li,
.summary-editor-content .reference-list li,
.paper-text .reference-list li,
.selectable-text .reference-list li,
.paper-section-paragraph .reference-list li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/*
 * A submitted deck, shown in the page.
 *
 * It used to be a download link, so reading one meant saving a .pptx and
 * opening PowerPoint. The frame below is the browser's own PDF viewer, which
 * scrolls, zooms and searches without anything of ours getting involved.
 */
.slide-viewer {
    margin: 0 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.slide-viewer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8125rem;
}

.slide-viewer__name {
    font-weight: 600;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slide-viewer__download {
    flex: 0 0 auto;
    color: #8a6a14;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.55);
}

.slide-viewer__download:hover {
    color: #6b5210;
}

.slide-viewer__frame {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 420px;
    border: 0;
    background: #525659;
}

@media (max-width: 640px) {
    .slide-viewer__frame {
        height: 60vh;
        min-height: 300px;
    }
}