/* ================================================================
   PSU Results Page — Complete Redesign
   Namespace: .pr  (psu-results)
   ================================================================ */

/* ── Reset & container ── */
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }

.pr {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    color: #1d2d3f;
    line-height: 1.6;
}

/* ── Top bar ── */
.pr-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8eff6;
}

.pr-breadcrumb {
    display: flex;
    gap: 6px;
    font-size: 13px;
    color: #7b8fa3;
}

.pr-breadcrumb a { color: #3b82c8; text-decoration: none; }
.pr-breadcrumb a:hover { text-decoration: underline; }

.pr-topbar-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pr-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    background: #f0f6fc;
    color: #364e66;
    white-space: nowrap;
}

.pr-chip strong { font-weight: 600; }

.pr-chip-plus {
    color: #a0b4c8;
    font-weight: 600;
    font-size: 14px;
}

.pr-chip-accent {
    background: linear-gradient(135deg, #eaf5ff, #dceeff);
    color: #1a6bb5;
    font-weight: 600;
}

/* ── Hero ── */
.pr-hero {
    text-align: center;
    padding: 36px 0 32px;
}

.pr-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    color: #0e2a43;
}

.pr-hero-lead {
    max-width: 640px;
    margin: 0 auto 24px;
    font-size: 16px;
    color: #4d6880;
    line-height: 1.7;
}

.pr-hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pr-btn:hover { transform: translateY(-1px); }

.pr-btn-primary {
    background: linear-gradient(135deg, #2b8ad6, #5db8ff);
    color: #fff;
    box-shadow: 0 6px 24px rgba(43, 138, 214, .22);
}

.pr-btn-ghost {
    background: #fff;
    color: #3b82c8;
    border: 1px solid #d4e4f4;
}

.pr-btn-ghost:hover { background: #f5f9ff; }

.pr-btn-amazon {
    background: linear-gradient(135deg, #ff9900 0%, #e68a00 100%);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(255, 153, 0, .3);
    border-radius: 50px;
    padding: 12px 28px;
    white-space: nowrap;
}

.pr-btn-amazon:hover {
    background: linear-gradient(135deg, #e68a00 0%, #cc7a00 100%);
    box-shadow: 0 6px 22px rgba(255, 153, 0, .45);
    transform: translateY(-2px);
    color: #fff;
}

.pr-btn-amazon:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 153, 0, .25);
}

/* ── Numbers strip ── */
.pr-numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 36px;
}

.pr-num-card {
    text-align: center;
    padding: 18px 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e8f0f8;
}

.pr-num-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7b8fa3;
    margin-bottom: 6px;
}

.pr-num-value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #0e2a43;
}

.pr-num-tier { font-size: 18px; }

/* ── Section container ── */
.pr-section {
    padding: 32px 28px;
    margin-bottom: 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e8f0f8;
}

.pr-section-muted {
    background: #f8fbff;
    border-color: #e0ecf6;
}

.pr-section-head {
    margin-bottom: 24px;
}

.pr-section-head h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #0e2a43;
}

.pr-section-head p {
    margin: 0;
    color: #5a7690;
    font-size: 15px;
}

/* ================================================================
   ④ PRODUCT CARDS — the hero module
   ================================================================ */
.pr-product-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pr-product {
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2ecf4;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.pr-product:hover {
    border-color: #bdd5f0;
    box-shadow: 0 8px 36px rgba(30, 100, 180, .09);
}

.pr-product-featured {
    border: 2px solid #2b8ad6;
    box-shadow: 0 8px 32px rgba(43, 138, 214, .12);
}

/* Rank ribbon */
.pr-product-rank {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pr-badge-gold   { background: linear-gradient(90deg, #fff8e1, #fff3cd); color: #856404; }
.pr-badge-silver  { background: linear-gradient(90deg, #f4f6f9, #e8ecf1); color: #495668; }
.pr-badge-bronze  { background: linear-gradient(90deg, #fef1ec, #fde3d6); color: #8a4524; }
.pr-badge-upgrade { background: linear-gradient(90deg, #e8f5e9, #c8e6c9); color: #2e7d32; }

/* ── Upgrade divider ── */
.pr-upgrade-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 16px;
    padding: 0;
}
.pr-upgrade-divider::before,
.pr-upgrade-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a5d6a7, transparent);
}
.pr-upgrade-divider span {
    font-size: 13px;
    font-weight: 600;
    color: #2e7d32;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* ── Upgrade product card ── */
.pr-product-upgrade {
    border: 2px dashed #a5d6a7;
    background: linear-gradient(135deg, #f1f8e9 0%, #ffffff 100%);
    position: relative;
}
.pr-product-upgrade::after {
    content: 'FUTURE-PROOF';
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #43a047;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.8px;
}

/* ── Comparison table: upgrade row ── */
.pr-table-upgrade-row {
    background: #f1f8e9 !important;
    border-top: 2px dashed #a5d6a7;
}
.pr-table-upgrade-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #43a047;
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}

/* Inner layout: image | info | cta */
.pr-product-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
}

/* Product image */
.pr-product-img {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(180deg, #f6faff, #eef5ff);
    overflow: hidden;
}

.pr-product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pr-product-img-placeholder {
    font-size: 42px;
    opacity: .45;
}

/* Product info */
.pr-product-info {
    flex: 1;
    min-width: 0;
}

.pr-product-info h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #0e2a43;
    line-height: 1.3;
}

.pr-product-comment {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #5a7690;
    line-height: 1.6;
}

.pr-product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pr-spec {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 8px;
    background: #f2f7fc;
    font-size: 12.5px;
    color: #2c4a66;
    white-space: nowrap;
}

.pr-spec em {
    font-style: normal;
    color: #8da4b8;
    font-weight: 500;
}

.pr-spec-price {
    background: #fef9ec;
    color: #92690d;
}

.pr-spec-price em { color: #c4a24a; }

/* Product CTA column */
.pr-product-cta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

.pr-product-price {
    font-size: 26px;
    font-weight: 800;
    color: #0e2a43;
}

/* ── Amazon compliance: pricing note & disclaimer (§i) ── */
.pr-amazon-pricing-note {
    margin-top: 16px;
    padding: 10px 16px;
    background: #fef9e7;
    border: 1px solid #f5e6b8;
    border-radius: 8px;
    font-size: 12.5px;
    color: #6b5b3a;
    text-align: center;
    line-height: 1.5;
}

.pr-disclaimer-link {
    color: #b8860b;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.pr-disclaimer-link:hover {
    color: #8b6508;
}

.pr-amazon-disclaimer {
    margin-top: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    font-size: 11.5px;
    color: #6c757d;
    line-height: 1.6;
    text-align: center;
}

/* ── Comparison table ── */
.pr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
    font-size: 14px;
}

.pr-table th, .pr-table td {
    padding: 12px 16px;
    text-align: left;
}

.pr-table thead th {
    background: #edf4fb;
    color: #1e3a56;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.pr-table tbody tr:nth-child(odd) td { background: #fff; }
.pr-table tbody tr:nth-child(even) td { background: #f9fcff; }

.pr-table tbody td {
    color: #3d5a74;
    border-top: 1px solid #edf2f8;
}

/* ── Power meter ── */
.pr-meter { margin-bottom: 18px; }

.pr-meter-bar {
    height: 28px;
    background: #edf3fa;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.pr-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3fa0f5, #67d0ff);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    min-width: 60px;
    transition: width .6s ease;
}

.pr-meter-fill span {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.pr-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #7b8fa3;
    margin-top: 6px;
}

.pr-meter-legend {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.pr-meter-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4d6880;
}

.pr-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.pr-dot-system { background: #3fa0f5; }
.pr-dot-headroom { background: #edf3fa; }

/* ── Why grid ── */
.pr-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pr-why-card {
    padding: 22px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e8f0f8;
}

.pr-why-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.pr-why-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #0e2a43;
}

.pr-why-card p {
    margin: 0;
    font-size: 14px;
    color: #5a7690;
    line-height: 1.65;
}

/* ── Tips ── */
.pr-tips {
    display: grid;
    gap: 10px;
}

.pr-tip {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    background: #f6faff;
    border: 1px solid #e8f0f8;
}

.pr-tip-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b8ad6, #5db8ff);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-tip p { margin: 0; font-size: 14px; color: #3d5a74; }

/* ── Scenarios ── */
.pr-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pr-scenario-card {
    padding: 22px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2ecf4;
    text-align: center;
}

.pr-scenario-icon { font-size: 32px; margin-bottom: 8px; }

.pr-scenario-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #0e2a43;
}

.pr-scenario-card p {
    margin: 0;
    font-size: 14px;
    color: #5a7690;
    line-height: 1.6;
}

/* ── Install grid ── */
.pr-install-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pr-install-card {
    padding: 22px;
    border-radius: 16px;
    background: #f6faff;
    border: 1px solid #e8f0f8;
}

.pr-install-card h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #0e2a43;
}

.pr-install-card ul {
    margin: 0;
    padding-left: 18px;
}

.pr-install-card li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #4d6880;
    line-height: 1.65;
}

.pr-install-card p {
    margin: 0;
    font-size: 14px;
    color: #4d6880;
    line-height: 1.65;
}

.pr-install-note {
    background: #fffbf0;
    border-color: #f5e6c4;
}

/* ── Explore more (reuse existing recent-pages styles) ── */
.psu-recent-pages-results {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ── Footer CTA ── */
.pr-footer {
    text-align: center;
    padding: 32px 0 0;
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 900px) {
    .pr-numbers {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-why-grid,
    .pr-scenario-grid {
        grid-template-columns: 1fr;
    }

    .pr-install-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pr {
        padding: 16px 14px 40px;
    }

    /* Topbar */
    .pr-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .pr-topbar-stats {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Hero */
    .pr-hero { padding: 24px 0; }
    .pr-hero h1 { font-size: 22px; }

    .pr-hero-actions {
        flex-direction: column;
    }

    .pr-hero-actions .pr-btn { width: 100%; }

    /* Numbers */
    .pr-numbers {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pr-num-value { font-size: 22px; }

    /* Sections */
    .pr-section {
        padding: 22px 18px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .pr-section-head h2 { font-size: 19px; }

    /* Product cards: stack vertically */
    .pr-product-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px;
    }

    .pr-product-img {
        width: 100%;
        height: 150px;
    }

    .pr-product-info h3 {
        font-size: 16px;
        word-break: break-word;
    }

    .pr-product-cta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: 0;
        width: 100%;
    }

    .pr-product-price { font-size: 22px; }

    .pr-btn-amazon {
        flex: 1;
        text-align: center;
    }

    /* Table */
    .pr-table-wrap {
        margin: 0 -18px;
        padding: 0 18px;
    }

    .pr-table th, .pr-table td {
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Meter */
    .pr-meter-legend {
        flex-direction: column;
        gap: 8px;
    }

    /* Recent pages */
    .psu-recent-pages-grid {
        grid-template-columns: 1fr !important;
    }
}