:root {
    --color-primary: #0F172A;
    --color-primary-hover: #1E293B;
    --color-secondary: #2563EB;
    --color-secondary-hover: #1D4ED8;
    --color-diff-added: #059669;
    --color-diff-removed: #DC2626;
    --color-diff-modified: #D97706;
    --color-diff-info: #0284C7;
    --color-bg-primary: #F8FAFC;
    --color-bg-secondary: #FFFFFF;
    --color-bg-tertiary: #F1F5F9;
    --color-card-bg: #FFFFFF;
    --color-card-bg-highlight: #F8FAFC;
    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-muted: #94A3B8;
    --color-border-primary: #E2E8F0;
    --color-border-secondary: #CBD5E1;
    --color-border-focus: #2563EB;
    --color-diff-added-bg: #ECFDF5;
    --color-diff-added-border: #A7F3D0;
    --color-diff-removed-bg: #FEF2F2;
    --color-diff-removed-border: #FECACA;
    --color-diff-modified-bg: #FFFBEB;
    --color-diff-modified-border: #FDE68A;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'JetBrains Mono', monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.55;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-muted {
    color: #94A3B8 !important;
}

.font-mono-code {
    font-family: var(--font-code);
}

/* ===== header ===== */
.site-header {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.site-header .js-mobile-menu.is-open {
    display: block;
}

/* ===== understand_what_changed_between_storage_reviews ===== */
.storage-hero .js-filter-tab {
    transition: background-color 0.15s ease, color 0.15s ease;
    border: 1px solid #CBD5E1;
}

.storage-hero .js-filter-tab.active-tab {
    background-color: #0F172A;
    color: #F8FAFC;
    border-color: #0F172A;
}

.storage-hero .js-diff-item {
    min-height: 56px;
}

/* ===== case_types ===== */
.case-types-section .js-case-filter-btn.active-filter {
    background-color: #0F172A;
    color: #F8FAFC;
    border-color: #0F172A;
}

.case-types-section .js-case-card {
    will-change: display;
}

/* ===== featured_comparison_cases ===== */
.featured-comparison-cases .js-case-card {
    will-change: transform;
}

.featured-comparison-cases .js-case-card.is-hidden {
    display: none !important;
}

/* ===== analysis_methodology ===== */
.methodology-teaser-section .methodology-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.methodology-teaser-section .methodology-card:hover {
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
}

/* ===== request_a_storage_review ===== */
.storage-review-cta .form-input,
.storage-review-cta .form-textarea {
    font-family: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.storage-review-cta .form-input::placeholder,
.storage-review-cta .form-textarea::placeholder {
    color: #94A3B8;
    opacity: 1;
}

.storage-review-cta .form-input:focus,
.storage-review-cta .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ===== footer ===== */
.storage-footer a {
    text-decoration: none;
}

.storage-footer a:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== PAGE: brand-support ===== */
.brand-support-page input::placeholder, .brand-support-page textarea::placeholder { color: #94A3B8; opacity: 1; } .brand-support-page .js-tier-btn.active { background-color: #0F172A; color: #F8FAFC; border-color: #0F172A; } .brand-support-page .service-item { transition: none; }

/* ===== PAGE: comparison-cases ===== */
.storage-cases-page input::placeholder { color: #94A3B8; opacity: 1; } .storage-cases-page .js-filter-author.active-filter { background-color: #0F172A; color: #FFFFFF; border-color: #0F172A; } .storage-cases-page .js-case-card { transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .storage-cases-page .js-case-card:hover { border-color: #2563EB; box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04); }

/* ===== PAGE: analysis-methodology ===== */
.methodology-page { font-family: 'Plus Jakarta Sans', sans-serif; } .methodology-page .category-header { background-color: #FFFFFF; } .methodology-page .js-article-card { transition: border-color 0.15s ease-in-out; } .methodology-page .js-article-card:hover { border-color: #2563EB; } .methodology-page .js-filter-btn.active { background-color: #0F172A; color: #F8FAFC; border-color: #0F172A; }

/* ===== PAGE: contacts ===== */
.contact-info-section input::placeholder, .contact-info-section textarea::placeholder { color: #94A3B8; opacity: 1; } .contact-info-section input:focus, .contact-info-section textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 1px #2563EB; }

/* ===== PAGE: privacy ===== */
.legal-policy-section { font-family: 'Plus Jakarta Sans', sans-serif; }
.legal-policy-section .js-nav-btn.active { color: #2563EB; background-color: #FFFFFF; border-color: #2563EB; font-weight: 600; }
.legal-policy-section table { border-collapse: collapse; }
.legal-policy-section tr:hover td { background-color: #F8FAFC; }

/* ===== PAGE: terms ===== */
.terms-legal-section { font-family: 'Plus Jakarta Sans', sans-serif; }
.terms-legal-section code, .terms-legal-section pre { font-family: 'JetBrains Mono', monospace; }
.terms-legal-section .js-nav-link.active { background-color: #F1F5F9; color: #2563EB; border-color: #CBD5E1; font-weight: 600; }

/* ===== PAGE: disclaimer ===== */
.disclaimer-section .js-filter-btn {
  transition: none;
}
.disclaimer-section .js-clause-card {
  word-break: break-word;
}
.disclaimer-section input::placeholder {
  color: #94A3B8;
  opacity: 1;
}

.main-comment-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    transition: border-color 0s;
}

.main-comment-card:hover {
    border-color: #CBD5E1;
}

.avatar-initials {
    width: 44px;
    height: 44px;
    min-width: 44px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    background-color: #0F172A;
    color: #F8FAFC;
    border-radius: 9999px;
}

.comment-body {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.55;
}

.comment-body code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.comment-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
}

.comment-action-btn:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

.reply-comment-card {
    background-color: #F8FAFC;
    border-left: 2px solid #2563EB;
    border-top: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.reply-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    background-color: #2563EB;
    color: #FFFFFF;
    border-radius: 9999px;
}

.reply-comment-card .comment-body {
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.5;
}

.reply-comment-card .comment-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
}

.reply-comment-card .comment-action-btn:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}


/* ===== PAGE TEMPLATE: comparison-cases-list ===== */
.site-header {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.site-header .js-mobile-menu.is-open {
    display: block;
}

.storage-footer a {
    text-decoration: none;
}

.storage-footer a:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 4px;
}

.case-detail-page .case-content-body h1,
.case-detail-page .case-content-body h2,
.case-detail-page .case-content-body h3,
.case-detail-page .case-content-body h4 {
    color: #0F172A;
    font-weight: 700;
    line-height: 1.3;
}

.case-detail-page .case-content-body p {
    color: #475569;
    line-height: 1.6;
}

.case-detail-page .case-content-body ul,
.case-detail-page .case-content-body ol {
    margin-left: 1.25rem;
    color: #475569;
}

.case-detail-page .js-case-tab-btn.active {
    border-bottom-color: #2563EB;
    color: #2563EB;
    font-weight: 700;
}

.case-detail-page .comment-action-btn:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

.case-detail-page input::placeholder,
.case-detail-page textarea::placeholder {
    color: #94A3B8;
    opacity: 1;
}

/* ===== PAGE TEMPLATE: analysis-methodology-list ===== */
.site-header {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.site-header .js-mobile-menu.is-open {
    display: block;
}

.storage-footer a {
    text-decoration: none;
}

.storage-footer a:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 4px;
}

.methodology-text-body p {
    line-height: 1.6;
    color: #475569;
}

.methodology-text-body ul,
.methodology-text-body ol {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.comment-item .comment-body p {
    line-height: 1.55;
}