* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    /* THE WORKSHEET.
       This is an accounting product, so the page sits on a spreadsheet grid
       rather than a flag gradient - a faint green-tinted rule every 26px, the
       way a worksheet reads before anything is typed into it. It is kept very
       low contrast on purpose: it has to be felt rather than read, or it
       competes with the numbers in the tables sitting on top of it. */
    background-color: #f6f8f6;
    background-image: linear-gradient(to right, rgba(0, 80, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 80, 0, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    background-attachment: fixed;
    min-height: 100vh;
    /* see the phone override further down - fixed attachment janks on iOS */
    padding: 20px;
    color: #333;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

header {
    text-align: center;
    color: white;
    /* The header used to be white text floating on a dark body gradient. The
       body is now a light worksheet, so the band carries its own colour -
       otherwise every heading and nav pill on the site turns white-on-white.

       IT IS THE SAME BAND AS THE PORTAL RAIL AND THE TOPIC BANNERS: one green
       ramp plus the ledger ruling, no third colour. The flag gradient it
       replaced ran green -> black -> crimson, which went muddy at the join
       and matched nothing else on the site now that the portal exists. The
       flag still appears where it belongs - on the mark beside the name. */
    background-color: #00570a;
    background-image: repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 25px,
            rgba(255, 255, 255, 0.07) 25px,
            rgba(255, 255, 255, 0.07) 26px
        ),
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent 25px,
            rgba(255, 255, 255, 0.07) 25px,
            rgba(255, 255, 255, 0.07) 26px
        ),
        linear-gradient(135deg, #006400 0%, #00520a 55%, #003d06 100%);
    border-radius: 14px;
    padding: 26px 20px 22px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(0, 60, 0, 0.18);
}

header h1, header .site-brand {
    font-weight: 700;
    line-height: 1.2;
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Kenya Flag Icon */
.flag-icon {
    height: 40px;
    width: auto;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

.subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
}

/* Payslip Banner */
.payslip-banner {
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    color: #1a1a1a;
    padding: 12px 20px;
    border-radius: 25px;
    margin: 15px auto;
    max-width: 500px;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%,
    100% {
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(255, 215, 0, 0.6);
    }
}

/* Navigation */
.main-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.main-nav a {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.3s;
    font-weight: 500;
}

.main-nav a:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.main-nav a.active {
    background: white;
    color: #006400;
}

/* Navigation Request Button - Fixed Position */
.nav-request-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 15px 25px;
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
    z-index: 1000;
    animation: pulse-btn 2s ease-in-out infinite;
}

.nav-request-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6);
}

@keyframes pulse-btn {
    0%,
    100% {
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 4px 30px rgba(255, 215, 0, 0.8);
    }
}

/* Mobile: Fixed bottom bar */
@media (max-width: 768px) {
    .nav-request-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: 0;
        text-align: center;
        padding: 18px 20px;
        font-size: 1.1rem;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    }

    .nav-request-btn:hover {
        transform: none;
    }

    /* Add padding to body to prevent content being hidden behind fixed button.
       Scoped to the pages that actually carry .nav-request-btn - otherwise every
       other page (store, filing, admin) gets 70px of dead space on mobile. */
    body.has-cta-bar {
        padding-bottom: 70px;
    }
}

.card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card h2 {
    color: #667eea;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
}

.alert-error {
    background-color: #fee;
    border-left: 4px solid #e53e3e;
    color: #c53030;
}

.alert-success {
    background-color: #f0fff4;
    border-left: 4px solid #38a169;
    color: #276749;
}

/* Steps */
.steps {
    display: grid;
    gap: 20px;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.step-number {
    background: linear-gradient(135deg, #006400, #000000);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content h3 {
    color: #2d3748;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.step-content p {
    color: #4a5568;
    line-height: 1.6;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2d3748;
}

input[type='file'],
input[type='text'],
input[type='number'],
input[type='month'],
input[type='tel'],
input[type='email'],
input[type='password'] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s;
    background: white;
}

input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Currency Input Styling */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-prefix {
    position: absolute;
    left: 16px;
    color: #006400;
    font-weight: 600;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.currency-input {
    padding-left: 60px !important;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Smaller currency inputs for allowances */
.allowances-row {
    gap: 10px;
}

.allowances-row .form-group {
    flex: 1;
    min-width: 0;
}

.currency-prefix-small {
    position: absolute;
    left: 10px;
    color: #006400;
    font-weight: 600;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.currency-input-small {
    padding-left: 45px !important;
    font-size: 0.95rem;
    font-weight: 500;
}

.allowances-row label {
    font-size: 0.9rem;
}

input[type='file']:focus,
input[type='text']:focus,
input[type='number']:focus,
input[type='month']:focus,
input[type='tel']:focus,
input[type='email']:focus,
input[type='password']:focus {
    outline: none;
    border-color: #006400;
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1);
}

small {
    display: block;
    margin-top: 5px;
    color: #718096;
    font-size: 0.875rem;
}

/* Buttons */
.button-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 25px;
}

.btn {
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, #006400, #004d00);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 100, 0, 0.4);
}

.btn-secondary {
    background: #dc143c;
    color: white;
}

.btn-secondary:hover {
    background: #b8112a;
    transform: translateY(-2px);
}

.btn-outline {
    background: white;
    color: #006400;
    border: 2px solid #006400;
}

.btn-outline:hover {
    background: #006400;
    color: white;
}

.download-template {
    margin-top: 20px;
    text-align: center;
    padding-top: 20px;
    border-top: 2px dashed #e2e8f0;
}

/* Info Card */
.info-card {
    background: #f7fafc;
    border-left: 4px solid #006400;
}

.info-card ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 25px;
    margin: 10px 0;
    line-height: 2;
}

.info-card li {
    color: #4a5568;
    margin-bottom: 8px;
    padding-left: 5px;
}

.info-card p {
    color: #4a5568;
    line-height: 1.8;
}

/* Footer */
footer {
    text-align: center;
    /* Was white - left over from the payroll design's dark page. Every page
       is light now, and the footer's brand line could not be seen. */
    color: #2a332a;
    margin-top: 40px;
    padding: 20px;
}

footer p {
    margin-bottom: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    header h1, header .site-brand {
        font-size: 2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .button-group {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 20px;
    }

    .step {
        flex-direction: column;
    }
}

/* Service Benefits Section */
.service-intro {
    background: linear-gradient(135deg, #f0fff4, #e6f7ed);
    border-left: 4px solid #006400;
}

.service-description {
    font-size: 1.2rem;
    color: #2d3748;
    margin: 20px 0;
    text-align: center;
}

.service-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.benefit-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 100, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.benefit-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 100, 0, 0.2);
}

.benefit-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.benefit-content h3 {
    color: #006400;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.benefit-content p {
    color: #4a5568;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Calculator Page Styles */
.calculator-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
}

.calculator-layout.calculator-centered {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
}

.calculator-input {
    position: sticky;
    top: 20px;
}

.calculator-centered .calculator-input {
    position: static;
}

.full-width {
    width: 100%;
}

.calculator-results {
    background: #f7fafc;
}

.result-header {
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.results-section {
    margin-bottom: 25px;
}

.results-section h3 {
    color: #2d3748;
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.result-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.result-row.total {
    background: #edf2f7;
    padding: 15px;
    margin-top: 10px;
    border-radius: 8px;
    border: none;
}

.result-row.paye {
    background: #fff5f5;
    padding: 12px;
    margin-top: 8px;
    border-radius: 6px;
}

.result-row.net {
    background: #f0fff4;
    font-size: 1.2rem;
}

.amount {
    font-weight: 600;
    color: #2d3748;
}

.amount.green {
    color: #38a169;
    font-size: 1.3rem;
}

.deductions {
    background: #fff5f5;
    padding: 15px;
    border-radius: 8px;
}

.employer {
    background: #fffaf0;
    padding: 15px;
    border-radius: 8px;
}

.net-pay {
    background: #f0fff4;
    padding: 15px;
    border-radius: 8px;
}

.result-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.result-actions .btn {
    flex: 1;
}

/* Download Payslip Button at Top */
.result-actions-top {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #e2e8f0;
}

.result-actions-top .btn {
    font-size: 1.1rem;
    padding: 16px 24px;
}

/* Guide/Explanations Page Styles */
.guide-content {
    max-width: 900px;
    margin: 0 auto;
}

.tax-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.tax-table th,
.tax-table td {
    padding: 12px;
    text-align: left;
    border: 1px solid #e2e8f0;
}

.tax-table thead {
    background: linear-gradient(135deg, #006400, #004d00);
    color: white;
}

.tax-table tbody tr:nth-child(even) {
    background: #f7fafc;
}

.tax-table tbody tr:hover {
    background: #edf2f7;
}

.highlight-box {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 4px;
}

.info-box {
    background: #ebf8ff;
    border-left: 4px solid #4299e1;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 4px;
}

.warning-box {
    background: #fffaf0;
    border-left: 4px solid #ed8936;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 4px;
}

.example-box {
    background: #f7fafc;
    padding: 20px;
    margin: 15px 0;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.penalty-box {
    background: #fff5f5;
    padding: 20px;
    margin: 15px 0;
    border-radius: 8px;
    border: 2px solid #fc8181;
}

.calculation-steps .step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f7fafc;
    border-radius: 8px;
}

.calculation-steps .step-num {
    background: linear-gradient(135deg, #006400, #004d00);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

/* Notices Page Styles */
.notices-content {
    max-width: 900px;
    margin: 0 auto;
}

.notice-card {
    border-left: 4px solid #006400;
}

.notice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.notice-header h3 {
    color: #2d3748;
    margin: 0;
    flex: 1;
}

.notice-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.notice-badge.important {
    background: #e53e3e;
    color: white;
}

.notice-badge.new {
    background: #38a169;
    color: white;
}

.notice-badge.info {
    background: #4299e1;
    color: white;
}

.notice-badge.reminder {
    background: #ed8936;
    color: white;
}

.notice-badge.upcoming {
    background: #9f7aea;
    color: white;
}

.notice-date {
    color: #718096;
    font-size: 0.9rem;
}

.notice-content {
    line-height: 1.8;
}

.notice-content h4 {
    color: #2d3748;
    margin-top: 20px;
    margin-bottom: 10px;
}

.notice-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #e2e8f0;
    font-style: italic;
    color: #718096;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.resource-item {
    padding: 20px;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 4px solid #006400;
}

.resource-item h4 {
    color: #2d3748;
    margin-bottom: 10px;
}

.resource-item p {
    color: #4a5568;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.resource-item a {
    color: #006400;
    text-decoration: none;
    font-weight: 600;
}

.resource-item a:hover {
    text-decoration: underline;
}

.contact-info {
    background: #edf2f7;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.contact-info h4 {
    color: #2d3748;
    margin-bottom: 15px;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info li {
    padding: 8px 0;
    color: #4a5568;
}

.penalty-card {
    border-left: 4px solid #e53e3e;
}

.warning-card {
    border-left: 4px solid #ed8936;
    background: #fffaf0;
}

.positive {
    color: #38a169;
    font-weight: 600;
}

.negative {
    color: #e53e3e;
    font-weight: 600;
}

@media (max-width: 968px) {
    .calculator-layout {
        grid-template-columns: 1fr;
    }

    .calculator-layout.calculator-centered {
        max-width: 100%;
    }

    .calculator-input {
        position: static;
    }

    .main-nav {
        gap: 5px;
    }

    .main-nav a {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .service-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    header h1, header .site-brand {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .main-nav {
        flex-direction: column;
        width: 100%;
    }

    .main-nav a {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

    .card {
        padding: 15px;
    }

    .calculator-layout {
        gap: 15px;
    }

    .result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .amount {
        font-size: 1.1rem;
    }

    .result-actions {
        flex-direction: column;
    }

    .currency-prefix {
        left: 12px;
        font-size: 0.9rem;
    }

    .currency-input {
        padding-left: 50px !important;
        font-size: 1rem;
    }

    input[type='file'],
    input[type='text'],
    input[type='number'],
    input[type='month'],
    input[type='tel'],
    input[type='email'],
    input[type='password'] {
        padding: 12px 14px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .tax-table {
        font-size: 0.85rem;
    }

    .tax-table th,
    .tax-table td {
        padding: 8px 6px;
    }
}

/* Filing Guidelines Page Styles */
.filing-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.filing-type-card {
    display: block;
    padding: 25px;
    background: linear-gradient(135deg, #f7fafc, #edf2f7);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.filing-type-card:hover {
    border-color: #006400;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 100, 0, 0.15);
}

.filing-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.filing-type-card h3 {
    color: #006400;
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.filing-type-card p {
    color: #4a5568;
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.filing-link {
    color: #006400;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Video Links */
.video-links {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}

.video-link-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f7fafc;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}

.video-link-card:hover {
    border-color: #dc143c;
    background: #fff5f5;
}

.video-icon {
    font-size: 2.5rem;
    color: #dc143c;
}

.video-info h4 {
    color: #2d3748;
    margin: 0 0 5px 0;
}

.video-info p {
    color: #718096;
    margin: 0;
    font-size: 0.9rem;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 20px;
}

.breadcrumb a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    transition: all 0.3s;
}

.breadcrumb a:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Filing Steps */
.filing-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filing-step {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #f7fafc;
    border-radius: 10px;
    border-left: 4px solid #006400;
}

.filing-step .step-number {
    background: linear-gradient(135deg, #006400, #004d00);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.filing-step .step-content {
    flex: 1;
}

.filing-step .step-content h3 {
    color: #006400;
    margin: 0 0 10px 0;
    font-size: 1.15rem;
}

.filing-step .step-content p {
    color: #4a5568;
    margin: 0 0 10px 0;
    line-height: 1.7;
}

.filing-step .step-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.filing-step .step-content li {
    color: #4a5568;
    margin-bottom: 8px;
    line-height: 1.6;
}

.step-tip {
    background: #ebf8ff;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #2b6cb0;
    margin-top: 10px;
}

/* FAQ Items */
.faq-item {
    padding: 20px;
    background: #f7fafc;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #4299e1;
}

.faq-item h4 {
    color: #2d3748;
    margin: 0 0 10px 0;
}

.faq-item p {
    color: #4a5568;
    margin: 0;
    line-height: 1.6;
}

/* Error Items */
.error-item {
    padding: 15px 20px;
    background: #fff5f5;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #e53e3e;
}

.error-item h4 {
    color: #c53030;
    margin: 0 0 8px 0;
    font-size: 1rem;
}

.error-item p {
    color: #4a5568;
    margin: 0;
}

/* Template Section */
.template-section {
    padding: 20px;
    background: #f7fafc;
    border-radius: 8px;
    margin-bottom: 15px;
}

.template-section h3 {
    color: #006400;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.template-section ul {
    margin: 0;
    padding-left: 20px;
}

.template-section li {
    color: #4a5568;
    margin-bottom: 8px;
}

/* Comparison Box */
.comparison-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.comparison-item {
    padding: 20px;
    background: #f7fafc;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
}

.comparison-item h4 {
    color: #2d3748;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.comparison-item ul {
    margin: 0;
    padding-left: 20px;
}

.comparison-item li {
    color: #4a5568;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Outcome Grid */
.outcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.outcome-item {
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.outcome-item.positive {
    background: #f0fff4;
    border: 2px solid #38a169;
}

.outcome-item.negative {
    background: #fff5f5;
    border: 2px solid #e53e3e;
}

.outcome-item.neutral {
    background: #f7fafc;
    border: 2px solid #a0aec0;
}

.outcome-item h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.outcome-item p {
    margin: 0;
    color: #4a5568;
    font-size: 0.9rem;
}

/* Consideration Items */
.consideration-item {
    padding: 20px;
    background: #fffaf0;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #ed8936;
}

.consideration-item h4 {
    color: #c05621;
    margin: 0 0 10px 0;
}

.consideration-item p {
    color: #4a5568;
    margin: 0 0 10px 0;
    line-height: 1.6;
}

.consideration-item ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

/* Video Embed */
.video-embed {
    text-align: center;
    padding: 30px;
    background: #f7fafc;
    border-radius: 10px;
    margin: 20px 0;
}

/* Responsive for Filing Pages */
@media (max-width: 768px) {
    .filing-types-grid {
        grid-template-columns: 1fr;
    }

    .filing-step {
        flex-direction: column;
        gap: 15px;
    }

    .filing-step .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .comparison-box {
        grid-template-columns: 1fr;
    }

    .outcome-grid {
        grid-template-columns: 1fr;
    }

    .video-link-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Corporate Section Styles */
.corporate-section {
    background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
    border-left: 4px solid #1a56db;
}

.corporate-section h2 {
    color: #1a56db;
}

.filing-type-card.corporate-card {
    background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
    border: 2px solid #c3d9ff;
}

.filing-type-card.corporate-card:hover {
    border-color: #1a56db;
    box-shadow: 0 8px 25px rgba(26, 86, 219, 0.15);
}

.filing-type-card.corporate-card h3 {
    color: #1a56db;
}

.filing-type-card.corporate-card .filing-link {
    color: #1a56db;
}

/* Donation Modal Styles */
.donation-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.donation-modal-content {
    background: white;
    border-radius: 16px;
    padding: 30px;
    max-width: 420px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.donation-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #a0aec0;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.donation-close:hover {
    color: #e53e3e;
}

.donation-header {
    margin-bottom: 15px;
}

.donation-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.donation-header h3 {
    color: #006400;
    font-size: 1.5rem;
    margin: 0;
}

.donation-modal-content > p {
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 20px;
}

.mpesa-details {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.mpesa-logo {
    font-size: 2.5rem;
    background: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpesa-info {
    flex: 1;
}

.mpesa-info h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.till-number {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.mpesa-name {
    color: white;
    margin: 5px 0 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.donation-amounts {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.donation-badge {
    background: #f0fff4;
    color: #006400;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid #006400;
    cursor: pointer;
    transition: all 0.2s ease;
}

.donation-badge:hover {
    background: #006400;
    color: white;
    transform: scale(1.05);
}

.donation-badge.selected {
    background: #006400;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 100, 0, 0.3);
}

/* Payment Instructions */
.payment-instructions {
    background: linear-gradient(135deg, #f0fff4, #e6f7ed);
    border: 2px solid #38a169;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    text-align: left;
}

.payment-instructions h4 {
    color: #006400;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.payment-instructions ol {
    margin: 0;
    padding-left: 20px;
    line-height: 2;
}

.payment-instructions li {
    color: #2d3748;
    margin-bottom: 5px;
}

.payment-instructions strong {
    color: #006400;
}

.payment-confirm {
    background: #38a169;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: 600;
    text-align: center;
}

/* Phone Input Section for STK Push */
.phone-input-section {
    background: linear-gradient(135deg, #f0fff4, #e6f7ed);
    border: 2px solid #38a169;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.phone-input-section h4 {
    color: #006400;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.phone-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.phone-prefix {
    background: #006400;
    color: white;
    padding: 12px 15px;
    border-radius: 8px 0 0 8px;
    font-weight: 600;
    font-size: 1rem;
}

.phone-input-section input[type='tel'] {
    padding: 12px 15px;
    border: 2px solid #006400;
    border-radius: 0 8px 8px 0;
    font-size: 1.1rem;
    width: 150px;
    font-weight: 500;
    letter-spacing: 1px;
}

.phone-input-section input[type='tel']:focus {
    outline: none;
    border-color: #38a169;
    box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.2);
}

.phone-input-section small {
    display: block;
    color: #718096;
    margin-bottom: 15px;
}

.btn-mpesa {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}

.btn-mpesa:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(34, 197, 94, 0.4);
}

.btn-mpesa:disabled {
    background: #a0aec0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* STK Status Messages */
.stk-status {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.stk-success {
    color: #22543d;
    background: #c6f6d5;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}

.stk-error {
    color: #c53030;
    background: #fed7d7;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}

.stk-pending {
    color: #744210;
    background: #fefcbf;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}

.stk-info {
    color: #2b6cb0;
    background: #bee3f8;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 10px;
}

/* Manual Payment Section */
.manual-payment-section {
    background: #f7fafc;
    border: 2px dashed #a0aec0;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    text-align: left;
}

.manual-payment-section h4 {
    color: #2d3748;
    margin: 0 0 15px 0;
    text-align: center;
}

.manual-payment-section ol {
    margin: 0;
    padding-left: 25px;
    line-height: 2;
}

.manual-payment-section li {
    color: #4a5568;
}

.manual-payment-section strong {
    color: #006400;
}

@media (max-width: 480px) {
    .phone-input-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .phone-prefix {
        border-radius: 8px 8px 0 0;
        width: 100%;
        text-align: center;
    }

    .phone-input-section input[type='tel'] {
        border-radius: 0 0 8px 8px;
        width: 100%;
        text-align: center;
    }
}

.donation-note {
    color: #718096;
    font-size: 0.9rem;
    margin: 15px 0;
}

.donation-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.donation-actions .btn {
    width: 100%;
    padding: 14px 20px;
}

.donation-footer {
    color: #a0aec0;
    font-size: 0.8rem;
    margin-top: 20px;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .donation-modal-content {
        padding: 25px 20px;
    }

    .mpesa-details {
        flex-direction: column;
        text-align: center;
    }

    .till-number {
        font-size: 1.5rem;
    }

    .donation-amounts {
        gap: 8px;
    }

    .donation-badge {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* Filing Service Request Styles */
.filing-type-card-wrapper {
    display: flex;
    flex-direction: column;
}

.filing-type-card-wrapper .filing-type-card {
    flex: 1;
    margin-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.btn-request {
    background: linear-gradient(135deg, #006400, #004d00);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 0 0 12px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.btn-request:hover {
    background: linear-gradient(135deg, #004d00, #003300);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 100, 0, 0.3);
}

.btn-request.corporate {
    background: linear-gradient(135deg, #1a56db, #1e40af);
}

.btn-request.corporate:hover {
    background: linear-gradient(135deg, #1e40af, #1e3a8a);
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3);
}

/* Request Modal */
.request-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
}

.request-modal-content {
    background: white;
    border-radius: 16px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

.request-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #a0aec0;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.request-close:hover {
    color: #e53e3e;
}

.request-header {
    text-align: center;
    margin-bottom: 20px;
}

.request-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.request-header h3 {
    color: #006400;
    font-size: 1.5rem;
    margin: 0;
}

.service-summary {
    background: linear-gradient(135deg, #f0fff4, #e6f7ed);
    border: 2px solid #38a169;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.service-summary p {
    margin: 5px 0;
    color: #2d3748;
}

.upfront-note {
    background: #ffd700;
    color: #1a1a1a !important;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 10px !important;
    font-size: 1.05rem;
}

.request-modal .form-group {
    margin-bottom: 15px;
}

.request-modal label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.request-modal input[type='text'],
.request-modal input[type='email'],
.request-modal input[type='tel'],
.request-modal textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.request-modal input:focus,
.request-modal textarea:focus {
    outline: none;
    border-color: #006400;
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1);
}

.request-modal small {
    display: block;
    margin-top: 4px;
    color: #718096;
    font-size: 0.85rem;
}

.payment-section {
    background: #f7fafc;
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0;
}

.payment-section h4 {
    color: #2d3748;
    margin: 0 0 15px 0;
    text-align: center;
}

.mpesa-payment-box {
    background: white;
    border: 2px solid #22c55e;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.mpesa-details-small {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
    padding: 10px;
    border-radius: 6px;
    margin: 10px 0;
}

.mpesa-details-small p {
    margin: 3px 0;
}

.payment-steps {
    text-align: left;
    margin: 15px 0 0 0;
    padding-left: 20px;
    font-size: 0.9rem;
    line-height: 1.8;
}

.payment-steps li {
    color: #4a5568;
}

.checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal !important;
}

.checkbox-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
}

.request-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.request-actions .btn {
    width: 100%;
    padding: 14px 20px;
}

.request-success {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

.request-success h4 {
    color: #38a169;
    font-size: 1.4rem;
    margin: 0 0 15px 0;
}

.request-success p {
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 10px;
}

.success-note {
    color: #718096;
    font-size: 0.9rem;
    font-style: italic;
}

@media (max-width: 480px) {
    .request-modal-content {
        padding: 20px 15px;
    }

    .service-summary {
        padding: 12px;
    }

    .payment-section {
        padding: 12px;
    }
}

/* Request Service Banner */
.request-service-banner {
    background: linear-gradient(135deg, #006400, #004d00);
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0, 100, 0, 0.3);
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.banner-text {
    flex: 1;
    min-width: 250px;
}

.banner-text h3 {
    color: white;
    margin: 0 0 8px 0;
    font-size: 1.4rem;
}

.banner-text p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 1rem;
}

.btn-banner {
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    color: #1a1a1a;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
}

/* Cost Display in General Modal */
.cost-display {
    background: linear-gradient(135deg, #f0fff4, #e6f7ed);
    border: 2px solid #38a169;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.cost-display p {
    margin: 5px 0;
    color: #2d3748;
}

/* Select Dropdown Styling */
.request-modal select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.3s;
}

.request-modal select:focus {
    outline: none;
    border-color: #006400;
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1);
}

.request-modal optgroup {
    font-weight: 700;
    color: #2d3748;
}

.request-modal option {
    padding: 8px;
}

@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
        text-align: center;
    }

    .btn-banner {
        width: 100%;
    }
}

/* =========================================================================
   THE HUB (/) and the CPA-first navigation.

   The nav carried six pills at 10px/20px and 1rem, which measured wider than
   the 1000px container - so "CPA Notes & Tutorials", being last, wrapped to a
   line of its own and read as an afterthought. Tightened to 16px/0.92rem the
   whole set fits one line, and the CPA pill is moved FIRST and given a solid
   background, so if a narrow window ever does wrap the set, the pill that
   survives on line one is the one that matters.
   ========================================================================= */

.main-nav a {
    padding: 9px 16px;
    font-size: 0.92rem;
}

.main-nav a.nav-cpa {
    background: #ffffff;
    color: #006400;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.main-nav a.nav-cpa:hover {
    background: #f0fff4;
    color: #004d00;
}

/* ---- the two doors ---- */

.hub-door {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: white;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 20px;
    text-decoration: none;
    border: 2px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.hub-door:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
    border-color: #006400;
}

.hub-door-primary {
    border-color: #006400;
    box-shadow: 0 8px 26px rgba(0, 100, 0, 0.16);
    padding: 34px 28px;
}

.hub-door-secondary {
    background: #fbfdfb;
}

.hd-icon {
    font-size: 2.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.hub-door-primary .hd-icon {
    font-size: 3.4rem;
}

.hd-body {
    flex: 1 1 260px;
    min-width: 0;
}

.hd-kicker {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #718096;
    margin-bottom: 4px;
}

.hd-title {
    margin: 0 0 8px;
    color: #1a202c;
    font-size: 1.5rem;
    line-height: 1.25;
}

.hub-door-primary .hd-title {
    font-size: 1.95rem;
    color: #006400;
}

.hd-blurb {
    color: #4a5568;
    line-height: 1.7;
    margin: 0 0 14px;
    font-size: 0.95rem;
}

.hd-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: 16px;
    color: #718096;
    font-size: 0.88rem;
}

.hd-stats strong {
    color: #006400;
    font-size: 1.05rem;
}

.hd-links {
    display: block;
    color: #718096;
    font-size: 0.85rem;
    margin-bottom: 14px;
}

.hd-cta {
    display: inline-block;
    background: #006400;
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.hub-door-secondary .hd-cta {
    background: #edf2f7;
    color: #2d3748;
}

.hub-door:hover .hd-cta {
    filter: brightness(1.08);
}

/* ---- programme strip: one card per qualification that has material ---- */

.prog-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}

.prog-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 14px;
    text-decoration: none;
    transition: transform 0.2s, border-color 0.2s;
}

.prog-card:hover {
    transform: translateY(-2px);
    border-color: #006400;
}

.pc-icon {
    font-size: 1.6rem;
}

.pc-name {
    font-weight: 800;
    color: #006400;
    font-size: 1.05rem;
}

.pc-full {
    color: #2d3748;
    font-size: 0.82rem;
}

.pc-meta {
    color: #718096;
    font-size: 0.78rem;
    margin-top: 4px;
}

.prog-card-soon {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.6);
}

.prog-card-soon .pc-name {
    color: #718096;
}

.hub-foot {
    text-align: center;
    margin-bottom: 24px;
}

.hub-foot a {
    color: #006400;
    font-weight: 600;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .hub-door {
        flex-direction: column;
        gap: 12px;
        padding: 22px 18px;
    }

    .hub-door-primary {
        padding: 24px 18px;
    }

    .hub-door-primary .hd-title {
        font-size: 1.5rem;
    }

    .hd-cta {
        display: block;
        text-align: center;
    }
}

/* The brand is the way back to the hub, so "Home" needs no nav pill - which
   is what keeps the six pills (CPA first) on a single line. */
.brand-home {
    color: inherit;
    text-decoration: none;
}

.brand-home:hover {
    opacity: 0.9;
}

/* =========================================================================
   PREVIEW PLAYER
   The stage changes shape with the cut, because the whole point is that a
   portrait lesson is shown portrait. Height is capped in viewport units so a
   9x16 clip cannot push the buy button off the bottom of a phone screen -
   which would make the preview cost a sale rather than win one.
   ========================================================================= */

.pv {
    background: #0f1512;
    border-radius: 14px;
    padding: 14px;
    margin: 18px 0;
}

.pv-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pv-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pv-badge {
    background: #006400;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
}

.pv-topic {
    color: #cbd5e0;
    font-size: 0.86rem;
}

.pv-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px;
    border-radius: 10px;
}

.pv-toggle button {
    background: transparent;
    border: 0;
    color: #cbd5e0;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    /* 44px tall including padding - a thumb target, not a mouse target. */
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.pv-toggle button.is-on {
    background: #fff;
    color: #006400;
}

.pv-stage {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.pv-stage video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
}

.pv-stage[data-aspect='9x16'] video {
    width: auto;
    max-width: 100%;
    /* Portrait is tall by nature; cap it so the page stays navigable. */
    max-height: 68vh;
}

.pv-note {
    color: #a0aec0;
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 10px 2px 0;
}

@media (max-width: 600px) {
    .pv {
        padding: 10px;
    }

    .pv-head {
        justify-content: center;
    }

    .pv-stage video,
    .pv-stage[data-aspect='9x16'] video {
        max-height: 62vh;
    }
}


/* The worksheet grid must not cost a phone its scroll performance: a fixed
   background attachment janks on iOS Safari and is occasionally painted at
   the wrong scale. It is decoration, so it yields. */
@media (max-width: 700px) {
    body {
        background-attachment: scroll;
    }

    header {
        padding: 18px 14px 16px;
        margin-bottom: 20px;
    }
}

/* Playback speed, beside the format toggle.
   A 19-minute lesson is revised at 1.5x more often than at 1x, and the
   browser's own speed menu is buried in a context menu on desktop and simply
   absent on most mobile browsers - so it is offered explicitly. */
.pv-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pv-speed button {
    /* Five buttons is a wide group, so these are tighter than the format
       pair - but still 38px tall, which stays inside a thumb's reach. */
    padding: 9px 10px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .pv-controls {
        width: 100%;
        justify-content: center;
    }

    .pv-speed button {
        padding: 9px 8px;
        font-size: 0.76rem;
    }
}

/* ===========================================================================
   THE CPA HERO - the homepage's first screen.
   ===========================================================================
   CPA training is what this site is for, so it leads rather than sitting as
   one of two equal doors. The right-hand column states the ACCESS RULES,
   because the question every visitor arrives with is "what do I have to pay
   to get X", and the answer differs by asset: notes and podcast are a
   straight purchase, video needs an account and a subscription.

   Phone first - the two columns stack, and the access rules come SECOND so
   the pitch is read before the price. */

.cpa-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    background: linear-gradient(140deg, #006e00 0%, #00520a 55%, #003d06 100%);
    background-image: repeating-linear-gradient(
            to bottom, transparent 0, transparent 25px,
            rgba(255, 255, 255, 0.05) 25px, rgba(255, 255, 255, 0.05) 26px),
        linear-gradient(140deg, #006e00 0%, #00520a 55%, #003d06 100%);
    border-radius: 18px;
    padding: 28px 22px;
    margin-bottom: 22px;
    color: #fff;
    box-shadow: 0 10px 34px rgba(0, 60, 0, 0.22);
}

.ch-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a7e8a7;
    margin-bottom: 10px;
}
.ch-title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #fff;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.ch-blurb {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 18px;
}

.ch-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ch-stats span {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.92);
}
.ch-stats strong { color: #fff; font-weight: 700; }

.ch-cta-row { display: flex; flex-direction: column; gap: 10px; }
.ch-btn {
    display: block;
    padding: 15px 22px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ch-btn-primary {
    background: #ffd700;
    color: #3a2f00;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.3);
}
.ch-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 215, 0, 0.42); color: #3a2f00; }
.ch-btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.ch-btn-ghost:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* --- the access rules -------------------------------------------------- */

.ch-access {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ch-access-head {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7772;
    padding: 0 4px 2px;
}

.cha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 11px;
    background: #f6f9f7;
    border: 1px solid #e3ebe6;
    text-decoration: none;
    color: #1a231e;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.cha:hover { border-color: #006400; background: #fff; transform: translateX(3px); color: #1a231e; }

.cha-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 11px;
    background: #e8f3e8;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.cha-body { flex: 1; min-width: 0; }
.cha-body strong { display: block; font-size: 0.95rem; line-height: 1.25; }
.cha-body small { display: block; font-size: 0.78rem; color: #6b7772; margin-top: 2px; }

.cha-price {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 800;
    color: #006400;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.cha-price em { font-style: normal; font-size: 0.72rem; font-weight: 500; color: #6b7772; }

/* Video is the one that needs an account, so it reads differently. */
.cha-video { background: #fffdf2; border-color: #f0e0a8; }
.cha-video .cha-icon { background: #fff4cc; }
.cha-video:hover { border-color: #d4a800; }

@media (min-width: 860px) {
    .cpa-hero {
        grid-template-columns: 1.25fr 1fr;
        gap: 32px;
        padding: 38px 34px;
        align-items: center;
    }
    .ch-title { font-size: 2rem; }
    .ch-cta-row { flex-direction: row; }
    .ch-btn { display: inline-block; }
}