/* PRZC Research — Commission page styles. Extracted from commission.html. */
        /* commission.html overrides */
        body { line-height: 1.6; }
        .btn { font-family: inherit; }
        .mobile-nav { padding: 1.5rem 2rem; }

        /* ── Hero ──
           box-shadow extends the hero's black background upward so it bleeds
           behind the fixed banner+header. Prevents a white strip from showing
           between the header and hero when the launch banner is hidden (test
           harness or session-closed pre-DOMContentLoaded). Shadow paints behind
           fixed banner (z:1001) and header (z:1000); overflow:hidden on the
           hero itself does not clip box-shadow. */
        .hero { background: #000; color: #fff; padding: 6rem 0 5rem; text-align: center; margin-top: 100px; position: relative; overflow: hidden; box-shadow: 0 -100px 0 0 #000; }
        body.banner-closed .hero { box-shadow: 0 -64px 0 0 #000; }
        .hero::before { content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px; border:1px solid rgba(255,255,255,0.06); border-radius:50%; pointer-events:none; }
        .hero::after { content:''; position:absolute; top:-30%; right:-10%; width:400px; height:400px; border:1px solid rgba(255,255,255,0.04); border-radius:50%; pointer-events:none; }
        .hero .container { position: relative; }
        .hero-label { font-size:0.7rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.82); margin-bottom:1rem; }
        .hero h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; letter-spacing: -0.5px; line-height:1.15; }
        .hero .hero-sub { font-size: 1.125rem; color:rgba(255,255,255,0.8); max-width: 640px; margin: 0 auto 2rem; line-height:1.7; }
        .hero-stats { display:flex; gap:2rem; justify-content:center; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); }
        .hero-stats div span:first-child { font-size:1.5rem; font-weight:700; color:#fff; display:block; }
        .hero-stats div span:last-child { font-size:0.7rem; color:rgba(255,255,255,0.82); text-transform:uppercase; letter-spacing:0.5px; }
        .hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

        /* ── Commission Form Section ── */
        .commission-section { padding: 4rem 0; }
        .commission-grid { display: grid; grid-template-columns: 1fr 400px; gap: 4rem; max-width: 1000px; margin: 0 auto; }
        .form-card { background: #fff; border: 1px solid #000; padding: 2.5rem; }
        .form-card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid #000; }
        .form-group { margin-bottom: 1.25rem; }
        .form-group label { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem; }
        .form-control { width: 100%; padding: 0.75rem 1rem; border: 1px solid #000; font-size: 0.9rem; font-family: inherit; background: #fff; }
        .form-control:focus { outline: none; box-shadow: 0 0 0 1px #000; }
        textarea.form-control { resize: vertical; min-height: 100px; }
        .radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
        .radio-group label { font-size: 0.9rem; font-weight: 400; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
        .radio-group input[type="radio"] { accent-color: #000; }
        .radio-fieldset { border: 0; padding: 0; margin: 0; }
        .radio-fieldset legend { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem; padding: 0; color: #000; }
        .form-prefilled { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .prefill-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #5e5e5e; margin-bottom: 0.25rem; }
        .prefill-field { padding: 0.5rem 0.75rem; background: #f5f5f5; border: 1px solid #e0e0e0; font-size: 0.9rem; color: #333; }
        .error-banner { display: none; background: #fff0f0; border: 1px solid #ffcccc; color: #cc0000; padding: 0.75rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; }
        .no-credits-notice { display: none; background: #fffaf0; border: 1px solid #ffe0b2; color: #8a6d3b; padding: 0.75rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; }
        .no-credits-notice button { background: none; border: none; color: #000; font-weight: 700; text-decoration: underline; cursor: pointer; font-family: inherit; font-size: inherit; }
        .credit-balance-box { background: #000; color: #fff; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
        .credit-balance-num { font-size: 1.75rem; font-weight: 700; margin-right: 0.5rem; }
        .credit-balance-lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
        .btn-ghost { padding: 0.5rem 1rem; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
        .btn-ghost:hover { background: #fff; color: #000; }

        /* ── Sidebar info ── */
        .sidebar-info h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
        .sidebar-info .info-block { margin-bottom: 1.5rem; }
        .sidebar-info .info-block h4 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem; color: #555; }
        .sidebar-info .info-block p { font-size: 0.9rem; color: #333; }
        .sidebar-info .info-block ul { list-style: none; font-size: 0.9rem; color: #333; }
        .sidebar-info .info-block ul li { padding: 0.25rem 0; }
        .sidebar-info .info-block ul li::before { content: '— '; opacity: 0.4; }

        /* ── Confirm / Success ── */
        .payment-card { background: #fff; border: 1px solid #000; padding: 2.5rem; }
        .payment-card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
        .order-summary { background: #f8f8f8; border: 1px solid #e0e0e0; padding: 1.5rem; margin-bottom: 1.5rem; }
        .order-summary h3 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; }
        .order-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.9rem; }
        .order-row .label { color: #555; }
        .order-row.order-total { font-weight: 700; border-top: 2px solid #000; padding-top: 0.6rem; margin-top: 0.4rem; }
        #payment-success { display: none; text-align: center; padding: 3rem 2rem; background: #fff; border: 1px solid #000; }
        .success-icon { width: 60px; height: 60px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1.5rem; }
        .success-details { background: #f8f8f8; border: 1px solid #e0e0e0; padding: 1.25rem; margin: 1.5rem auto; max-width: 400px; }
        .btn-secondary { display: inline-block; padding: 10px 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid #000; background: #fff; color: #000; text-decoration: none; transition: all 0.2s; font-family: inherit; }
        .btn-secondary:hover { background: #000; color: #fff; }

        /* ── Brief Examples ── */
        .brief-examples { display: none; background: #f8f8f8; border: 1px solid #e0e0e0; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
        .brief-examples p.label { font-weight: 700; margin-bottom: 0.75rem; font-size: 0.8rem; letter-spacing: 0.5px; text-transform: uppercase; color: #555; }
        .brief-example { margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid #e8e8e8; }
        .brief-example:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
        .brief-example h5 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
        .brief-example p { font-size: 0.85rem; color: #555; line-height: 1.5; }

        /* ── Auth gate ── */
        .auth-gate { text-align: center; padding: 4rem 2rem; max-width: 500px; margin: 0 auto; }
        .auth-gate h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 0.75rem; }
        .auth-gate p { color: #555; margin-bottom: 2rem; }

        /* ── Footer ── */
        footer { margin-top: 4rem; }

        /* ── Responsive ── */
        @media (max-width: 900px) {
            .commission-grid { grid-template-columns: 1fr; gap: 2rem; }
            .hero h1 { font-size: 1.75rem; }
            .form-prefilled { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .form-control,
            textarea.form-control,
            select.form-control { font-size: 16px; }
        }
        /* 600px: ease the vertical density — hero is tall on mobile, form
           card padding crams at 360px. */
        @media (max-width: 600px) {
            .hero { padding: 4rem 0 3rem; }
            .hero-sub { font-size: 1rem; }
            .hero-stats { flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 1.75rem; padding-top: 1rem; }
            .form-card,
            .payment-card { padding: 1.5rem; }
            .credit-balance-box { padding: 1rem 1.25rem; flex-wrap: wrap; gap: 0.5rem; }
        }
@media (max-width: 480px) { #scroll-cta { display: none !important; } }

/* ── Testimonials ── */
#commission-testimonials { background: #000; color: #fff; padding: 4rem 0; border-top: 1px solid #111; }
#commission-testimonials .kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.82); }
#commission-testimonials h2 { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 2rem; font-weight: 400; color: #fff; margin: 0.75rem 0 0.5rem; }
#commission-testimonials .rule { display: block; width: 48px; height: 2px; background: #fff; margin: 0 0 2rem; }
#commission-testimonials .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15); }
#commission-testimonials .testimonial-card { position: relative; background: #000; padding: 2.5rem 2.25rem 2.25rem; margin: 0; display: flex; flex-direction: column; min-height: 100%; transition: background 0.2s ease; }
#commission-testimonials .testimonial-card::before { content: "\201C"; position: absolute; top: 0.5rem; left: 1.5rem; font-family: Georgia, 'Times New Roman', serif; font-size: 5.5rem; line-height: 1; color: #c9a84c; opacity: 0.85; font-weight: 700; pointer-events: none; }
#commission-testimonials .testimonial-card:hover { background: #0a0a0a; }
#commission-testimonials .t-metric { display: inline-block; align-self: flex-start; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #c9a84c; border: 1px solid rgba(201, 168, 76, 0.42); padding: 0.35rem 0.7rem; margin: 0.4rem 0 1.5rem; position: relative; z-index: 1; }
#commission-testimonials .t-metric strong { font-weight: 800; color: #e5c770; letter-spacing: 1px; }
#commission-testimonials blockquote { font-family: 'Inter', 'Inter Fallback', sans-serif; font-style: italic; font-size: 1rem; line-height: 1.72; color: rgba(255,255,255,0.92); margin: 0 0 1.75rem; flex: 1; }
#commission-testimonials figcaption { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.14); }
#commission-testimonials figcaption .t-role { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 0.85rem; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
#commission-testimonials figcaption .t-firm { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 0.78rem; font-weight: 400; color: rgba(255,255,255,0.65); letter-spacing: 0.2px; }
#commission-testimonials figcaption .t-verified { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #c9a84c; }
#commission-testimonials figcaption .t-verified svg { flex-shrink: 0; }
#commission-testimonials .t-disclaimer { margin: 1.75rem 0 0; font-size: 0.78rem; line-height: 1.6; color: rgba(255,255,255,0.5); max-width: 680px; }
@media (max-width: 899.98px) and (min-width: 640px) { #commission-testimonials .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639.98px) { #commission-testimonials .testimonials-grid { grid-template-columns: 1fr; } #commission-testimonials .testimonial-card { padding: 2.25rem 1.75rem 2rem; } }