/* ================================
   Review page part 3
   Detailed ratings, pros/cons, specs, reviews
   ================================ */

/* ---------- Detailed ratings ---------- */
.detailed-ratings {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px;
}
.dr-row {
    display: grid;
    grid-template-columns: 160px 1fr 60px;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.dr-row:last-child { border-bottom: none; }
.dr-label { font-weight: 500; font-size: 14px; }
.dr-bar {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 999px;
    overflow: hidden;
}
.dr-fill {
    height: 100%;
    background: var(--accent-grad);
    border-radius: 999px;
    transition: width .6s;
}
.dr-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-align: right;
    color: var(--accent-2);
}

/* ---------- Pros/Cons lists ---------- */
.test-content .pros,
.test-content .cons {
    padding: 24px 28px;
    border-radius: 16px;
}
.test-content .pros ul,
.test-content .cons ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.test-content .pros li,
.test-content .cons li {
    padding: 8px 0 8px 28px;
    position: relative;
    border: none;
}
.test-content .pros li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
}
.test-content .cons li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: var(--danger);
    font-weight: 700;
}

/* ---------- Target audience ---------- */
.target-audience {
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.target-audience h2 { margin-top: 0 !important; }

/* ---------- Mid CTA ---------- */
.mid-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    margin: 48px 0;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.12), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.12), transparent 50%);
    flex-wrap: wrap;
}
.mid-cta strong {
    display: block;
    font-size: 20px;
    margin-bottom: 4px;
}
.mid-cta span { color: var(--text-muted); font-size: 14px; }
.mid-cta .cta-box { margin: 0; padding: 0; background: none; border: none; }

/* ---------- Specs table ---------- */
.specs-table {
    display: grid;
    gap: 20px;
}
.specs-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}
.specs-group-title {
    padding: 16px 24px;
    background: var(--bg-hover);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-2);
    margin: 0;
    border-bottom: 1px solid var(--border);
}
.specs-list {
    margin: 0;
    padding: 8px 0;
}
.specs-list dt,
.specs-list dd {
    padding: 12px 24px;
    font-size: 14px;
}
.specs-list dt {
    color: var(--text-muted);
    font-weight: 500;
    text-transform: capitalize;
    grid-column: 1;
}
.specs-list dd {
    color: var(--text);
    font-weight: 500;
    grid-column: 2;
    margin: 0;
    text-align: right;
}
.specs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.specs-list dt,
.specs-list dd {
    border-bottom: 1px solid var(--border);
}
.specs-list dt:last-of-type,
.specs-list dd:last-of-type { border-bottom: none; }

/* ---------- Methodology ---------- */
.methodology-box {
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(6, 182, 212, 0.08));
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    margin: 48px 0;
}
.methodology-box h3 {
    font-size: 20px;
    margin-bottom: 16px;
}
.methodology-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.methodology-box li {
    padding: 8px 0 8px 28px;
    position: relative;
    color: var(--text-muted);
    font-size: 15px;
}
.methodology-box li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-2);
    font-weight: 700;
}
.methodology-box li strong { color: var(--text); }