.comparison-scope {
--accent:          #c9a96e;
--accent-burg:     #800020;
--accent-light:    rgba(168,120,46,.07);
--accent-lighter:  rgba(168,120,46,.10);
--accent-lightest: rgba(168,120,46,.15);
--text-dark:       #ede4d8;
--text-muted:      rgba(237,228,216,.50);
--bg-white:        #fff;
--bg-blue-light:   #f8f9ff;
--bg-green-light:  #f0f8f0;
--border-light:    rgba(168,120,46,.08);
--shadow-base:     0 16px 48px rgba(0,0,0,.40), 0 4px 16px rgba(0,0,0,.25);
--shadow-card:     0 2px 8px rgba(0,0,0,.25);
--border-radius-sm: 7px;
--border-radius-md: 12px;
--spacing-xs:      0.625rem;
--spacing-sm:      1.125rem;
--spacing-md:      1.25rem;
--spacing-lg:      1.5rem;
--spacing-xl:      1.75rem;
--spacing-2xl:     1.875rem;
font-family: "Roboto Condensed", "Roboto", sans-serif;
}
.comparison-wrapper {
max-width: 1100px;
margin: 3rem auto;
padding: 2.5rem 2.25rem;
background: #0a0305;
border-radius: 12px;
border: 1px solid rgba(168,120,46,.10);
box-shadow:
0 0 0 1px rgba(168,120,46,.04),
0 16px 48px rgba(0,0,0,.40),
0 4px 16px rgba(0,0,0,.25);
position: relative;
overflow: hidden;
isolation: isolate;
} .comparison-wrapper::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
background-size: 128px 128px;
pointer-events: none;
z-index: 0;
} .comparison-wrapper::after {
content: "";
position: absolute;
top: -60px;
left: -60px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(128,0,32,.18) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.comparison-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #120508;
border-radius: var(--border-radius-sm);
overflow: hidden;
box-shadow: var(--shadow-card);
margin-bottom: 2rem;
font-size: 1.02rem;
line-height: 1.68;
border: 1px solid rgba(168,120,46,.10);
position: relative;
z-index: 1;
} .comparison-table thead {
position: relative;
}
.comparison-table thead::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #a8782e 30%, #c9a96e 50%, #a8782e 70%, transparent);
z-index: 2;
opacity: .70;
}
.comparison-table th {
background: #1a0710;
color: #ede4d8;
font-family: "Roboto Condensed", sans-serif;
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 1.1rem 1.375rem;
text-align: center;
border-bottom: 1px solid rgba(168,120,46,.10);
}
.comparison-table td {
padding: 1.2rem 1.5rem;
border-bottom: 1px solid rgba(168,120,46,.06);
vertical-align: top;
color: #ede4d8;
transition: background-color 0.20s cubic-bezier(.4,0,.2,1);
}
.comparison-table td:first-child {
font-weight: 700;
color: #ede4d8;
background: #1a0710;
width: 29%;
font-size: 1rem;
border-right: 1px solid rgba(168,120,46,.06);
}
.comparison-table tr:hover td {
background-color: var(--accent-lighter);
}
.comparison-table tr:hover td:first-child {
background-color: var(--accent-lightest);
}
.comparison-note {
text-align: center;
font-size: 1rem;
color: var(--text-muted);
font-style: italic;
padding: 0 1.25rem;
line-height: 1.65;
position: relative;
z-index: 1;
}
.comparison-note strong {
color: var(--accent);
}
.comparison-note a {
color: var(--accent);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: .08em;
text-underline-offset: .18em;
text-decoration-color: rgba(201, 169, 110, .62);
}
.comparison-note a:hover,
.comparison-note a:focus-visible {
text-decoration-color: currentColor;
} @media (max-width: 860px) { .comparison-wrapper {
padding: 1.75rem 1.125rem;
border-radius: 12px;
margin: 1.5rem auto;
overflow: visible;
background: transparent;
border-color: transparent;
box-shadow: none;
} .comparison-wrapper::before { display: none; }
.comparison-wrapper::after  { display: none; }
.comparison-table {
font-size: 1rem;
line-height: 1.65;
background: transparent;
box-shadow: none;
border: none;
}
.comparison-table thead {
display: none;
} .comparison-table tbody tr {
display: block;
margin: 1.5rem auto;
max-width: 500px;
border-radius: var(--border-radius-md);
background: rgba(255,255,255,.15);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.40);
box-shadow:
0 8px 32px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.50);
overflow: hidden;
-webkit-tap-highlight-color: transparent;
} .comparison-table td {
display: block;
padding: 1.125rem 1.5rem;
text-align: left;
border: none;
transition: none;
background: transparent;
color: #4a3f44;
} .comparison-table tbody tr > td:first-child,
.comparison-table td:first-child,
.comparison-table tr td:nth-of-type(1),
.comparison-table td:nth-child(1) {
background: rgba(128,0,32,.10) !important;
color: #1a1014;
-webkit-text-fill-color: #1a1014;
font-family: "Roboto Condensed", sans-serif;
font-weight: 700;
font-size: 1.02rem;
text-align: center;
padding: 1.35rem 1.25rem;
width: 100%;
box-sizing: border-box;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
margin: 0;
border-right: none;
border-bottom: 1px solid rgba(128,0,32,.08);
}
.comparison-table td:nth-child(2) {
background: transparent;
padding: 1.375rem 1.5rem 1.125rem;
position: relative;
color: #4a3f44;
}
.comparison-table td:nth-child(2)::before {
content: attr(data-label);
display: block;
font-weight: 700;
color: var(--accent-burg);
font-size: 0.68rem;
letter-spacing: 0.12em;
margin-bottom: var(--spacing-xs);
text-transform: uppercase;
}
.comparison-table td:nth-child(3) {
background: transparent;
padding: 1.375rem 1.5rem 1.125rem;
position: relative;
border-bottom: 1px solid rgba(168,120,46,.10);
color: #4a3f44;
}
.comparison-table td:nth-child(3)::before {
content: attr(data-label);
display: block;
font-weight: 700;
color: var(--accent-burg);
font-size: 0.68rem;
letter-spacing: 0.12em;
margin-bottom: var(--spacing-xs);
text-transform: uppercase;
}
.comparison-table td:nth-child(4) {
background: transparent;
padding: 1.375rem 1.5rem 1.625rem;
position: relative;
color: #4a3f44;
}
.comparison-table td:nth-child(4)::before {
content: attr(data-label);
display: block;
font-weight: 700;
color: var(--accent-burg);
font-size: 0.68rem;
letter-spacing: 0.12em;
margin-bottom: var(--spacing-xs);
text-transform: uppercase;
}
.comparison-table tr,
.comparison-table td {
background-color: initial;
transform: none;
}
.comparison-table th {
display: none;
} .comparison-note {
color: #4a3f44;
}
.comparison-note strong {
color: var(--accent-burg);
}
.comparison-note a {
color: var(--accent-burg);
text-decoration-color: rgba(128, 0, 32, .55);
}
}