/* ══════════════════════════════════════
       PRICING PAGE — merged-theme overrides
    ══════════════════════════════════════ */

 /* Hide radios without causing scroll-jump on focus */
 .term-radio {
     position: fixed;
     /* key: doesn't affect page scroll position */
     top: 0;
     left: 0;
     width: 1px;
     height: 1px;
     opacity: 0;
     pointer-events: none;
 }

 /* ── Pricing section — flat structure so ~ sibling selector works ── */
 .pricing {
     background: var(--bg, #07111f);
     padding: 72px 5% 80px;
     position: relative;
 }

 /* ── Header card ── */
 #pricing-header {
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .09);
     border-radius: 20px;
     padding: 40px 32px 32px;
     max-width: 680px;
     margin: 0 auto 48px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 #pricing-header h1 {
     font-family: 'Fraunces', serif;
     font-size: clamp(2rem, 3.5vw, 2.8rem);
     color: #fff;
     letter-spacing: -.3px;
     line-height: 1.1;
     margin: 0 0 10px;
 }

 #pricing-header h1 em {
     color: var(--gold, #fbbf24);
     font-style: italic;
 }

 #pricing-header p {
     color: rgba(255, 255, 255, .55);
     font-size: .95rem;
     line-height: 1.7;
     margin: 0 0 24px;
     max-width: 480px;
 }

 /* ── Term toggle ── */
 .term-toggle {
     display: inline-flex;
     gap: 4px;
     padding: 5px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .12);
 }

 .term-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 9px 22px;
     border-radius: 999px;
     cursor: pointer;
     user-select: none;
     font-weight: 700;
     font-size: .88rem;
     font-family: 'DM Sans', sans-serif;
     color: rgba(255, 255, 255, .45);
     transition: background .18s, color .18s, box-shadow .18s;
 }

 .term-btn:hover {
     color: rgba(255, 255, 255, .8);
     background: rgba(255, 255, 255, .08);
 }

 /* Active state — radios, #pricing-header, #pricing-grid are all direct children of .pricing */
 .pricing #term-3:checked~#pricing-header .term-toggle label[for="term-3"],
 .pricing #term-6:checked~#pricing-header .term-toggle label[for="term-6"],
 .pricing #term-12:checked~#pricing-header .term-toggle label[for="term-12"] {
     background: var(--sun, #f59e0b);
     color: #000;
     font-weight: 800;
     box-shadow: 0 4px 18px rgba(245, 158, 11, .35);
 }

 /* ── Pricing grid ── */
 #pricing-grid {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     overflow: visible;
 }

 /* ── Plan cards ── */
 .plan {
     position: relative;
     overflow: visible;
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .09);
     border-radius: 20px;
     padding: 32px 28px;
     display: flex;
     flex-direction: column;
     transition: transform .22s, box-shadow .22s, border-color .22s, background .22s;
 }

 .plan:hover {
     transform: translateY(-6px);
     background: rgba(255, 255, 255, .07);
     border-color: rgba(255, 255, 255, .18);
     box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
 }

 .plan h3 {
     font-family: 'Fraunces', serif;
     font-size: 1.25rem;
     color: #fff;
     margin: 0 0 6px;
 }

 .plan-sub {
     margin: 0;
     color: rgba(255, 255, 255, .45);
     font-size: .85rem;
     line-height: 1.55;
 }

 /* ── Price display ── */
 .plan-price {
     display: flex;
     justify-content: center;
     align-items: baseline;
     gap: 6px;
     margin: 24px 0 20px;
     text-align: center;
 }

 .price {
     display: none;
     font-family: 'Fraunces', serif;
     font-size: 3.2rem;
     font-weight: 900;
     line-height: 1;
     color: #fff;
     letter-spacing: -.04em;
 }

 .unit {
     font-size: .95rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .4);
 }

 /* CSS-only price switching */
 .pricing #term-3:checked~#pricing-grid .price-3 {
     display: inline;
 }

 .pricing #term-6:checked~#pricing-grid .price-6 {
     display: inline;
 }

 .pricing #term-12:checked~#pricing-grid .price-12 {
     display: inline;
 }

 /* ── Feature list ── */
 .plan-list {
     list-style: none;
     padding: 0;
     margin: 0 0 24px;
     display: grid;
     gap: 10px;
     flex: 1;
 }

 .plan-list li {
     position: relative;
     padding-left: 1.7rem;
     font-size: .88rem;
     color: rgba(255, 255, 255, .65);
     line-height: 1.55;
 }

 .plan-list li::before {
     content: "✓";
     position: absolute;
     left: 0;
     top: .1rem;
     font-weight: 900;
     color: #22c55e;
 }

 /* ── Plan CTA buttons ── */
 .plan .plan-btn {
     margin-top: auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 13px 16px;
     border-radius: 12px;
     font-family: 'DM Sans', sans-serif;
     font-size: .92rem;
     font-weight: 800;
     text-decoration: none;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, .18);
     background: rgba(255, 255, 255, .08);
     color: rgba(255, 255, 255, .85);
     transition: background .18s, color .18s, transform .15s, box-shadow .18s;
 }

 .plan .plan-btn::after {
     content: " →";
     transition: transform .15s;
 }

 .plan .plan-btn:hover {
     transform: translateY(-2px);
     background: rgba(255, 255, 255, .14);
     color: #fff;
 }

 .plan .plan-btn:hover::after {
     transform: translateX(3px);
 }

 /* ── Featured plan (Core — middle card) ── */
 #pricing-grid .plan:nth-child(2) {
     border-color: rgba(34, 197, 94, .45);
     box-shadow: 0 20px 70px rgba(16, 185, 129, .18);
     background: rgba(16, 185, 129, .06);
     z-index: 2;
 }

 #pricing-grid .plan:nth-child(2):hover {
     box-shadow: 0 28px 80px rgba(16, 185, 129, .28);
     border-color: rgba(34, 197, 94, .7);
 }

 #pricing-grid .plan:nth-child(2) .price {
     color: #6ee7b7;
 }

 #pricing-grid .plan:nth-child(2) .plan-btn {
     background: #10a159;
     color: #fff;
     border-color: transparent;
     box-shadow: 0 6px 24px rgba(16, 185, 129, .3);
 }

 #pricing-grid .plan:nth-child(2) .plan-btn:hover {
     background: #0d9149;
     box-shadow: 0 12px 40px rgba(16, 185, 129, .4);
 }

 /* ── Most Popular badge ── */
 .badge-wrap {
     position: absolute;
     top: -14px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     pointer-events: none;
 }

 .badge {
     display: inline-block;
     padding: 5px 16px;
     border-radius: 999px;
     font-size: .78rem;
     font-weight: 900;
     letter-spacing: .05em;
     font-family: 'DM Sans', sans-serif;
     background: #ecfdf5;
     border: 2px solid #6ee7b7;
     color: #047857;
     box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
     white-space: nowrap;
 }

 /* ══════════════════════════════════════
       FAQ SECTION
    ══════════════════════════════════════ */
 .faq-section {
     background:
         radial-gradient(1200px 700px at 50% -10%, rgba(34, 197, 94, .08), transparent 55%),
         radial-gradient(1000px 600px at 20% 10%, rgba(96, 165, 250, .08), transparent 55%),
         linear-gradient(180deg, #07111f 0%, #0b1a2e 55%, #07111f 100%);
     padding: 80px 5%;
 }

 .pricing-faq {
     max-width: 1000px;
     margin: 0 auto;
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .09);
     border-radius: 22px;
     padding: clamp(1.5rem, 3vw, 2.6rem);
     display: grid;
     grid-template-columns: 1fr;
     gap: 10px;
     align-items: start;
 }

 .pricing-faq h2 {
     font-family: 'Fraunces', serif;
     font-size: clamp(1.7rem, 2.5vw, 2.2rem);
     color: #fff;
     text-align: center;
     margin: 0 0 8px;
     grid-column: 1 / -1;
     letter-spacing: -.02em;
 }

 .pricing-faq h2 em {
     color: var(--gold, #fbbf24);
     font-style: italic;
 }

 .faq-sub {
     text-align: center;
     color: rgba(255, 255, 255, .45);
     font-size: .9rem;
     margin: 0 0 28px;
     grid-column: 1 / -1;
 }

 /* Accordion items */
 .pricing-faq details {
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 14px;
     overflow: hidden;
     transition: transform .18s, box-shadow .18s, border-color .18s;
     align-self: start;
 }

 .pricing-faq details:nth-of-type(even) {
     background: rgba(255, 255, 255, .02);
 }

 .pricing-faq details:hover {
     transform: translateY(-1px);
     border-color: rgba(34, 197, 94, .25);
     box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
 }

 .pricing-faq summary {
     cursor: pointer;
     list-style: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 16px 18px;
     font-weight: 600;
     font-size: .9rem;
     color: rgba(255, 255, 255, .82);
 }

 .pricing-faq summary::-webkit-details-marker {
     display: none;
 }

 .pricing-faq summary::after {
     content: "+";
     width: 28px;
     height: 28px;
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 999px;
     background: rgba(34, 197, 94, .1);
     color: rgba(34, 197, 94, .85);
     font-weight: 900;
     font-size: 1.05rem;
     transition: transform .18s, background .18s;
 }

 .pricing-faq details:hover summary::after {
     background: rgba(34, 197, 94, .18);
 }

 .pricing-faq details[open] summary {
     border-bottom: 1px solid rgba(255, 255, 255, .07);
     color: #fff;
 }

 .pricing-faq details[open] summary::after {
     transform: rotate(45deg);
     background: rgba(34, 197, 94, .2);
 }

 .pricing-faq p,
 .pricing-faq ul {
     margin: 0;
     padding: 14px 18px 16px;
     color: rgba(255, 255, 255, .5);
     line-height: 1.75;
     font-size: .88rem;
 }

 .pricing-faq p+p,
 .pricing-faq p+ul,
 .pricing-faq ul+p {
     margin-top: 8px;
 }

 .pricing-faq ul {
     padding-left: 36px;
     display: grid;
     gap: 6px;
 }

 .pricing-faq li::marker {
     color: rgba(34, 197, 94, .85);
 }

 .pricing-faq strong {
     color: rgba(255, 255, 255, .8);
 }

 /* 2-col FAQ on wider screens */
 @media (min-width: 900px) {
     .pricing-faq {
         grid-template-columns: 1fr 1fr;
         gap: 10px 14px;
     }

     .pricing-faq h2,
     .pricing-faq .faq-sub,
     .pricing-faq details:nth-child(3),
     .pricing-faq details:nth-child(6) {
         grid-column: 1 / -1;
     }
 }

 /* Mobile */
 @media (max-width: 768px) {
     #pricing-grid {
         grid-template-columns: 1fr;
     }

     .badge-wrap {
         top: 12px;
         right: 12px;
         left: auto;
         transform: none;
     }
 }

 @media (max-width: 500px) {
     .term-toggle {
         width: 100%;
         max-width: 360px;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
     }

     .term-btn {
         padding: 9px 8px;
         font-size: .82rem;
     }

     .price {
         font-size: 2.6rem;
     }
 }