/* ================================================================
   JUSTGOODAPP · "PODIUM" THEME  (template D — modern / creative)
   Signature: medal podium for the top 3 + gradient orbit hero
   ================================================================ */
    :root {
        --p-bg: #f4f3fb;
        /* lavender-white page       */
        --p-card: #ffffff;
        --p-ink: #191632;
        --p-soft: #625f7e;
        --p-line: #e5e3f2;

        --p-indigo: #4f46e5;
        --p-violet: #8b5cf6;
        --p-fuchsia: #d946ef;
        --p-grad: linear-gradient(120deg, #4f46e5 0%, #8b5cf6 55%, #d946ef 110%);

        --p-mint: #10b981;
        /* checks / positive         */
        --p-coral: #ff4d5e;
        /* CTA                       */
        --p-coral-d: #e63a4b;
        --p-gold: #f5b301;
        --p-silver: #a8b3c5;
        --p-bronze: #d08a4e;

        --p-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
        --p-body: "Manrope", "Segoe UI", system-ui, sans-serif;
        --p-radius: 20px;
        --p-shadow: 0 2px 8px rgba(25, 22, 50, .06), 0 24px 60px -30px rgba(79, 70, 229, .35);
    }

    body {
        font-family: var(--p-body);
        background: var(--p-bg);
        color: var(--p-ink);
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    .disp {
        font-family: var(--p-display);
        letter-spacing: -.01em;
    }

    .text-soft {
        color: var(--p-soft);
    }

    .grad-text {
        background: var(--p-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ---------- buttons ---------- */
    .btn-go {
        background: var(--p-coral);
        color: #fff;
        font-weight: 800;
        border: none;
        border-radius: 999px;
        padding: .7rem 1.6rem;
        box-shadow: 0 10px 22px -10px rgba(255, 77, 94, .75);
        transition: transform .12s ease, background .12s ease;
    }

    .btn-go:hover {
        background: var(--p-coral-d);
        color: #fff;
        transform: translateY(-2px);
    }

    .btn-line {
        border: 2px solid var(--p-line);
        background: #fff;
        color: var(--p-ink);
        font-weight: 700;
        border-radius: 999px;
        padding: .6rem 1.4rem;
    }

    .btn-line:hover {
        border-color: var(--p-indigo);
        color: var(--p-indigo);
        background: #fff;
    }

    .btn:focus-visible {
        outline: 3px solid rgba(79, 70, 229, .4);
        outline-offset: 2px;
    }

    /* ---------- navbar ---------- */
    .nav-p{ background:rgba(25,22,50,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08); }
   .nav-p .navbar-brand{ font-family:var(--p-display); font-weight:800; font-size:1.05rem; color:#fff; display:flex; align-items:center; gap:.5rem; }
   .nav-p .navbar-brand:hover{ color:#fff; }
   .nav-p .navbar-brand span{ color:#ffd35c; }
   .nav-p .navbar-brand img{ height:70px; width:auto; display:block; }
   .nav-p .nav-link{ font-weight:700; color:rgba(255,255,255,.72); font-size:18px; border-radius:999px; padding:.45rem 1rem; }
   .nav-p .nav-link:hover{ color:#fff; }
   .nav-p .nav-link.active{ color:#fff; background:rgba(255,255,255,.12); }


   /* ---------- navbar search ---------- */
   .nav-search{ display:flex; align-items:center; gap:.5rem; }
   .nav-search .search-input{
   background:rgba(255,255,255,.06);
   border:1.5px solid rgba(255,255,255,.35);
   border-radius:999px;
   color:#fff;
   font-weight:600; font-size:.9rem;
   padding:.5rem 1.15rem;
   width:170px;
   transition:width .2s ease, border-color .15s ease, background .15s ease;
   }
   .nav-search .search-input::placeholder{ color:rgba(255,255,255,.55); font-weight:600; }
   .nav-search .search-input:focus{
   outline:none;
   border-color:#fff;
   background:rgba(255,255,255,.12);
   width:210px;                      /* gently expands on focus */
   }
   .nav-search .search-btn{
   flex:none;
   width:42px; height:42px;
   border:none; border-radius:13px;
   background:var(--p-grad);         /* your indigo→fuchsia gradient */
   color:#fff;
   display:grid; place-items:center;
   box-shadow:0 8px 16px -8px rgba(139,92,246,.8);
   transition:transform .12s ease, filter .12s ease;
   }
   .nav-search .search-btn:hover{ transform:translateY(-1px); filter:brightness(1.1); }
   .nav-search .search-btn:focus-visible{ outline:3px solid rgba(255,255,255,.5); outline-offset:2px; }

   @media (max-width: 991.98px){
   .nav-search{ margin-top:.75rem; }
   .nav-search .search-input{ width:100%; flex:1; }
   .nav-search .search-input:focus{ width:100%; }
   }


   /* ---------- end navbar ---------- */
    /* ---------- hero ---------- */
    .hero-p {
        background: var(--p-grad);
        color: #fff;
        position: relative;
        overflow: hidden;
        border-radius: 0 0 36px 36px;
    }

    .hero-p .container {
        position: relative;
        z-index: 2;
    }

    .hero-p h1 {
        font-weight: 800;
        font-size: clamp(1.7rem, 4.4vw, 3.1rem);
        line-height: 1.15;
    }

    .hero-p .lead-p {
        color: rgba(255, 255, 255, .85);
        max-width: 640px;
    }

    .hero-kicker {
        display: inline-block;
        font-weight: 800;
        font-size: .72rem;
        letter-spacing: .18em;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 999px;
        padding: .4rem 1rem;
        backdrop-filter: blur(4px);
    }

    .jump-chip {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        text-decoration: none;
        background: rgba(255, 255, 255, .14);
        border: 1px solid rgba(255, 255, 255, .28);
        color: #fff;
        font-weight: 700;
        font-size: .85rem;
        border-radius: 999px;
        padding: .5rem 1.1rem;
        transition: background .12s ease;
    }

    .jump-chip:hover {
        background: rgba(255, 255, 255, .26);
        color: #fff;
    }

    /* orbit rings */
    .orbits {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .orbits .ring {
        position: absolute;
        border: 1.5px solid rgba(255, 255, 255, .22);
        border-radius: 50%;
        top: 50%;
        left: 78%;
        transform: translate(-50%, -50%);
    }

    .orbits .r1 {
        width: 260px;
        height: 260px;
    }

    .orbits .r2 {
        width: 430px;
        height: 430px;
        border-style: dashed;
        animation: spin 40s linear infinite;
    }

    .orbits .r3 {
        width: 620px;
        height: 620px;
        opacity: .6;
        animation: spin 70s linear infinite reverse;
    }

    .orbits .core {
        position: absolute;
        top: 50%;
        left: 78%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        backdrop-filter: blur(6px);
        display: grid;
        place-items: center;
        font-size: 2.4rem;
    }

    .orbits .sat {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 18px rgba(255, 255, 255, .9);
    }

    @keyframes spin {
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .orbits .r2,
        .orbits .r3 {
            animation: none;
        }
    }

    @media (max-width: 991px) {
        .orbits {
            display: none;
        }
    }

    /* ---------- bento "at a glance" ---------- */
    .bento {
        border: 1px solid var(--p-line);
        border-radius: var(--p-radius);
        background: var(--p-card);
        padding: 1.4rem;
        height: 100%;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .bento:hover {
        transform: translateY(-3px);
        box-shadow: var(--p-shadow);
    }

    .bento .lbl {
        font-weight: 800;
        font-size: .72rem;
        letter-spacing: .14em;
        color: var(--p-soft);
    }

    .bento .who {
        font-family: var(--p-display);
        font-weight: 700;
        font-size: 1.15rem;
    }

    .bento .em {
        font-size: 1.6rem;
    }

    .bento.tint-a {
        background: #eef2ff;
        border-color: #dfe4ff;
    }

    .bento.tint-b {
        background: #ecfdf5;
        border-color: #d3f5e6;
    }

    .bento.tint-c {
        background: #fdf4ff;
        border-color: #f5dffc;
    }

    .bento.tint-d {
        background: #fff8e6;
        border-color: #f7e7b8;
    }

    /* ---------- podium ---------- */
    .podium-wrap {
        position: relative;
    }

    .podium-card {
        background: var(--p-card);
        border: 1px solid var(--p-line);
        border-radius: var(--p-radius);
        box-shadow: 0 1px 4px rgba(25, 22, 50, .05);
        text-align: center;
        position: relative;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .podium-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--p-shadow);
    }

    .podium-card .medal {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-family: var(--p-display);
        font-weight: 800;
        color: #fff;
        font-size: 1.05rem;
        margin: -28px auto 0;
        box-shadow: 0 8px 18px -8px rgba(25, 22, 50, .5);
        border: 3px solid #fff;
    }

    .podium-card.gold .medal {
        background: linear-gradient(160deg, #ffcf40, #e79b00);
    }

    .podium-card.silver .medal {
        background: linear-gradient(160deg, #c4cede, #8d9bb1);
    }

    .podium-card.bronze .medal {
        background: linear-gradient(160deg, #e2a366, #b06a2c);
    }

    .podium-card.gold {
        border: 2px solid var(--p-gold);
    }

    .podium-card.gold::before {
        position: absolute;
        top: -14px;
        right: 18px;
        background: var(--p-grad);
        color: #fff;
        font-weight: 800;
        font-size: .66rem;
        letter-spacing: .12em;
        border-radius: 999px;
        padding: .35rem .8rem;
    }

    .p-name {
        font-family: var(--p-display);
        font-weight: 700;
        font-size: 1.35rem;
    }

    .big-score {
        font-family: var(--p-display);
        font-weight: 800;
        font-size: 2.6rem;
        line-height: 1;
    }

    .big-score small {
        font-size: .85rem;
        font-weight: 700;
        color: var(--p-soft);
        display: block;
        letter-spacing: .14em;
        margin-top: .35rem;
    }

    .meter {
        height: 8px;
        border-radius: 999px;
        background: #edecf7;
        overflow: hidden;
    }

    .meter>span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--p-grad);
        width: 0;
        transition: width 1s cubic-bezier(.22, .9, .28, 1);
    }

    @media (prefers-reduced-motion: reduce) {
        .meter>span {
            transition: none;
        }
    }

    .mini-feat {
        font-size: .85rem;
        color: var(--p-soft);
        font-weight: 600;
    }

    .mini-feat b {
        color: var(--p-mint);
    }

    /* description list inside a podium card — green check bullets */
    .podium-card .p-feats,
    .podium-card .p-feats ul,
    .podium-card .p-feats ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .podium-card .p-feats li {
        position: relative;
        padding-left: 15px;
        margin-bottom: .35rem;
        font-size: .85rem;
        color: var(--p-soft);
        font-weight: 600;
    }

    .podium-card .p-feats li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--p-mint);
        font-weight: 700;
    }

    @media (min-width: 992px) {
        /* .lift-1 {
            margin-top: -34px;
        } */

        /* champion rises above the field */
        .lift-2 {
            margin-top: 14px;
        }

        .lift-3 {
            margin-top: 30px;
        }
    }

    /* ---------- runners-up rows ---------- */
    .run-row {
        background: var(--p-card);
        border: 1px solid var(--p-line);
        border-radius: var(--p-radius);
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .run-row:hover {
        transform: translateY(-2px);
        box-shadow: var(--p-shadow);
    }

    .run-pos {
        font-family: var(--p-display);
        font-weight: 800;
        color: var(--p-soft);
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: var(--p-bg);
        display: grid;
        place-items: center;
        flex: none;
    }

    .score-chip {
        font-family: var(--p-display);
        font-weight: 800;
        font-size: 1.05rem;
        background: #ecfdf5;
        color: #0b7a55;
        border-radius: 12px;
        padding: .45rem .8rem;
        min-width: 66px;
        text-align: center;
    }

    /* ---------- comparison table ---------- */
    .tbl-card {
        background: var(--p-card);
        border: 1px solid var(--p-line);
        border-radius: var(--p-radius);
        overflow: hidden;
    }

    .filter-pills .nav-link {
        font-weight: 800;
        color: var(--p-soft);
        border-radius: 999px;
        padding: .5rem 1.2rem;
        font-size: .88rem;
    }

    .filter-pills .nav-link.active {
        background: var(--p-grad);
        color: #fff;
    }

    .table-p {
        margin: 0;
        font-size: .9rem;
    }

    .table-p thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--p-ink);
        color: #fff;
        font-family: var(--p-display);
        font-weight: 700;
        font-size: .8rem;
        border: 0;
        padding: 1rem .75rem;
        white-space: nowrap;
    }

    .table-p thead th:first-child {
        text-align: left;
    }

    .table-p th,
    .table-p td {
        text-align: center;
        vertical-align: middle;
    }

    .table-p tbody th {
        text-align: left;
        font-weight: 600;
        white-space: nowrap;
    }

    .table-p .best-col {
        background: #f6f4ff;
        color: #625f7e;
        box-shadow: inset 2px 0 0 var(--p-violet), inset -2px 0 0 var(--p-violet);
    }

    .y {
        color: var(--p-mint);
        font-weight: 800;
    }

    .n {
        color: #c9c6dd;
        font-weight: 800;
    }

    .tbl-scroll {
        max-height: 560px;
        overflow: auto;
    }

    /* ---------- trust strip ---------- */
    .trust-strip {
        background: var(--p-ink);
        color: #fff;
        border-radius: var(--p-radius);
    }

    .trust-strip .num {
        font-family: var(--p-display);
        font-weight: 800;
        font-size: 2rem;
    }

    .trust-strip .lbl {
        color: #9d99c1;
        font-weight: 700;
        font-size: .75rem;
        letter-spacing: .12em;
    }

    /* ---------- faq ---------- */
    .accordion-p .accordion-item {
        border: 1px solid var(--p-line);
        border-radius: 16px !important;
        overflow: hidden;
        margin-bottom: .8rem;
        background: var(--p-card);
    }

    .accordion-p .accordion-button {
        font-weight: 800;
        background: var(--p-card);
        color: var(--p-ink);
    }

    .accordion-p .accordion-button:not(.collapsed) {
        background: #f6f4ff;
        color: var(--p-indigo);
        box-shadow: none;
    }

    .accordion-p .accordion-body {
        color: var(--p-soft);
    }

    /* ---------- footer ---------- */
    .footer-p {
        background: var(--p-ink);
        color: #b7b3d6;
        border-radius: 36px 36px 0 0;
    }

    .footer-p a {
        color: #b7b3d6;
        text-decoration: none;
    }

    .footer-p a:hover {
        color: #fff;
    }

    .footer-p .brand {
        font-family: var(--p-display);
        font-weight: 800;
        color: #fff;
    }

    .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .5s ease, transform .5s ease;
    }

    .reveal.in {
        opacity: 1;
        transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .reveal {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }