/* ============================================
   DilutionWatch — Mobile & Tablet Responsive
   responsive.css v2.0 — 2026-02-18
   Include AFTER all other stylesheets on every page.
   ============================================ */

/* ─────────────────────────────────────────────
   1. NAV BAR — Logo sizing & hamburger
   ───────────────────────────────────────────── */

/* Tablet: shrink logo, tighten nav */
@media (max-width: 1024px) {
    .nav-inner .site-logo,
    .manage-nav-inner .site-logo {
        width: 280px !important;
    }
}

@media (max-width: 900px) {
    .nav-inner .site-logo,
    .manage-nav-inner .site-logo {
        width: 220px !important;
    }
    .nav-inner,
    .manage-nav-inner {
        height: 64px !important;
    }
    .nav, .manage-nav {
        padding: 0 1rem !important;
    }
    /* Tagline hidden on tablet */
    .manage-nav-inner .nav-tagline {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .nav-inner .site-logo,
    .manage-nav-inner .site-logo {
        width: 180px !important;
    }
    .nav-inner,
    .manage-nav-inner {
        height: 56px !important;
        justify-content: flex-start !important;
    }
    /* Push logo to left edge */
    .nav-inner .site-logo,
    .manage-nav-inner .site-logo {
        margin-right: auto;
    }
    /* Suppress ticker-tape pseudo-elements on tiny screens */
    .nav::before, .nav::after,
    .manage-nav::before, .manage-nav::after {
        display: none !important;
    }
}

@media (max-width: 400px) {
    .nav-inner .site-logo,
    .manage-nav-inner .site-logo {
        width: 150px !important;
    }
}


/* ─────────────────────────────────────────────
   2. HERO SECTION (index.html)
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .hero {
        padding-top: calc(56px + 1rem) !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .hero-title {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    }
    .hero-subtitle {
        font-size: 0.95rem !important;
    }
    .hero-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        text-align: center !important;
    }
    .hero-stat {
        text-align: center !important;
        padding: 0.5rem !important;
    }
    .hero-stat-value {
        font-size: 1.3rem !important;
    }
    .hero-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .hero-actions .btn {
        width: 100% !important;
        text-align: center !important;
    }
}


/* ─────────────────────────────────────────────
   3. PRICING TABLE → MOBILE CARD LAYOUT
   The big win: converting the wide comparison
   table into stacked cards on small screens.
   ───────────────────────────────────────────── */

/* Mobile tier summary cards — hidden on desktop */
.mobile-tier-cards {
    display: none;
}

@media (max-width: 900px) {
    .mobile-tier-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 1.5rem;
    }
    .mobile-tier-card {
        background: var(--bg-card, #0d0d12);
        border: 1px solid var(--border, rgba(255,255,255,0.08));
        border-radius: 14px;
        padding: 1.25rem 0.75rem;
        text-align: center;
        position: relative;
    }
    .mobile-tier-card h3 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 0.25rem;
        color: var(--text-primary, #f8fafc);
    }
    .mobile-tier-price {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.2;
    }
    .mobile-tier-card p {
        font-size: 0.75rem;
        color: var(--text-muted, #64748b);
        margin: 0.25rem 0 0.75rem;
    }
    .mobile-tier-card .tier-badge {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.6rem;
    }
    .mobile-tier-card .table-cta {
        font-size: 0.75rem;
        padding: 8px 16px;
    }
    .tier-pro {
        border-color: rgba(59,130,246,0.3);
        box-shadow: 0 0 20px rgba(59,130,246,0.08);
    }
}

@media (max-width: 400px) {
    .mobile-tier-cards {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .mobile-tier-card {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        text-align: left !important;
    }
    .mobile-tier-card h3 {
        margin: 0 !important;
        min-width: 40px;
    }
    .mobile-tier-price {
        font-size: 1.5rem !important;
    }
    .mobile-tier-card p {
        margin: 0 !important;
        flex: 1;
    }
    .mobile-tier-card .tier-badge {
        position: static !important;
        transform: none !important;
        order: -1;
    }
    .mobile-tier-card .table-cta {
        margin-left: auto;
    }
}

@media (max-width: 900px) {
    .pricing-table-wrapper {
        overflow-x: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .pricing-table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    .pricing-table thead {
        display: none !important;
    }
    .pricing-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    /* Hide feature-group headers */
    .pricing-table tbody tr.feature-group {
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 1rem 0 0.25rem !important;
    }
    .pricing-table tbody tr.feature-group td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        color: var(--primary) !important;
    }
    .pricing-table tbody tr.feature-group td[colspan] {
        width: 100% !important;
    }
    /* Hide the competitor and CTA rows for cleaner mobile */
    .pricing-table tbody tr.pricing-cta-row {
        display: none !important;
    }
    /* Each data row becomes a card */
    .pricing-table tbody tr:not(.feature-group):not(.pricing-cta-row) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        padding: 0.75rem 1rem !important;
        background: var(--bg-card) !important;
        gap: 0 !important;
    }
    .pricing-table tbody tr td {
        display: block !important;
        border: none !important;
        padding: 0.2rem 0 !important;
        text-align: left !important;
        font-size: 0.85rem !important;
        background: transparent !important;
    }
    /* First td = feature name (bold header) */
    .pricing-table tbody tr td:first-child {
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        font-size: 0.9rem !important;
        padding-bottom: 0.4rem !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 0.3rem !important;
    }
    /* Competitor column: hide on mobile */
    .pricing-table tbody tr td.col-competitor {
        display: none !important;
    }
    /* Label each remaining column */
    .pricing-table tbody tr td:not(:first-child):not(.col-competitor)::before {
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 0.5rem;
    }
    .pricing-table tbody tr td:nth-child(3)::before { content: 'Free: '; color: var(--success); }
    .pricing-table tbody tr td:nth-child(4)::before { content: 'Pro: '; color: var(--primary); }
    .pricing-table tbody tr td:nth-child(5)::before { content: 'Elite: '; color: var(--purple); }

    /* Column background overrides off */
    .pricing-table tbody tr td.col-pro,
    .pricing-table tbody tr td.col-elite,
    .pricing-table tbody tr td.col-free {
        background: transparent !important;
    }
}

/* Sticky mobile CTA for pricing */
@media (max-width: 900px) {
    #pricing .container::after {
        content: '';
        display: block;
        height: 0;
    }
}


/* ─────────────────────────────────────────────
   4. FEATURE / MONITOR / SECURITY / FAQ GRIDS
   Already 1-col at 900px but tighten padding
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .section {
        padding: 2rem 0 !important;
    }
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .section-header {
        margin-bottom: 1.5rem !important;
    }
    .section-title {
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
    }
    .feature-card, .monitor-card, .security-card, .faq-item {
        padding: 1.25rem !important;
    }
    .feature-icon, .monitor-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.4rem !important;
    }
    .subscribe-section {
        padding: 1.5rem !important;
    }
    .cta-banner {
        padding: 2rem 1.25rem !important;
    }
}


/* ─────────────────────────────────────────────
   5. FOOTER
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .footer {
        padding: 2rem 0 1.5rem !important;
    }
    .footer-inner {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .footer-brand {
        max-width: 100% !important;
    }
    .footer-links {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }
    .footer-legal {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
    }
}


/* ─────────────────────────────────────────────
   6. CONTACT FORM
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .contact-form input,
    .contact-form textarea {
        font-size: 16px !important; /* prevents iOS zoom */
    }
    .contact-toggle-title {
        font-size: 1rem !important;
    }
}


/* ─────────────────────────────────────────────
   7. MANAGE PAGE — DASHBOARD CONTAINER
   ───────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Less top padding since nav is shorter */
    .container {
        padding-top: 80px !important;
    }
}
@media (max-width: 640px) {
    .container {
        padding-top: 70px !important;
    }
}


/* ─────────────────────────────────────────────
   8. TAB NAVIGATION — Scrollable on mobile
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .tab-nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .tab-nav::-webkit-scrollbar {
        display: none;
    }
    .tab-button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        padding: 10px 14px !important;
        min-height: 44px;
    }
}


/* ─────────────────────────────────────────────
   9. TICKERS TAB — Add bar, summary, cards
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Add-ticker bar: stack on mobile */
    .add-ticker-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .add-ticker-container input {
        flex: 1 1 100px !important;
        max-width: none !important;
        min-width: 0 !important;
        font-size: 16px !important; /* prevents iOS zoom */
    }
    .add-ticker-container .btn-add {
        flex: 0 0 auto !important;
    }
    /* Sort inline wraps to second row */
    .sort-inline {
        flex: 1 0 100% !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        justify-content: flex-start !important;
    }
    .sort-inline select {
        flex: 1;
        min-width: 0;
    }

    /* Risk pill bar */
    .dw-risk-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    .dw-risk-pill {
        font-size: 0.75rem !important;
        padding: 5px 10px !important;
        min-height: 36px !important;
    }

    /* Ticker card adjustments */
    .ticker-card {
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }
    .ticker-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .ticker-symbol {
        font-size: 1.2rem !important;
    }
    .company-name {
        font-size: 0.75rem !important;
    }

    /* Metrics-score row: stack metrics in 2x2 grid */
    .metrics-score-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .ticker-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .ticker-metrics .metric {
        padding: 8px 10px !important;
    }
    .ticker-metrics .metric .metric-label {
        font-size: 0.65rem !important;
    }
    .ticker-metrics .metric .metric-value {
        font-size: 0.8rem !important;
    }

    /* Score badge: full width beneath metrics */
    .metrics-score-row .dilution-score-badge {
        min-width: 0 !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px 14px !important;
        height: auto !important;
    }
    .metrics-score-row .dilution-score-badge .score-value {
        font-size: 1.3rem !important;
    }
    .metrics-score-row .dilution-score-badge .score-label {
        font-size: 0.6rem !important;
    }

    /* Ticker actions: fill width */
    .ticker-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .ticker-actions button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        min-height: 44px !important; /* touch target */
    }
}


/* ─────────────────────────────────────────────
   10. ALERTS TAB — Radio cards, sliders, quiet hours
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .preference-group {
        padding: 1rem !important;
    }
    .preference-group-title {
        font-size: 1rem !important;
    }

    /* Radio cards stack */
    .radio-group {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .radio-card {
        flex: none !important;
        width: 100% !important;
    }
    .radio-content {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .radio-icon {
        font-size: 1.2rem !important;
        flex-shrink: 0;
    }

    /* Dilution slider */
    .dilution-slider-container {
        padding: 0 !important;
    }
    .slider-value-display {
        font-size: 2rem !important;
    }
    .dilution-slider {
        width: 100% !important;
    }
    .tick-marks {
        font-size: 0.65rem !important;
    }

    /* Quiet hours schedule: scrollable */
    .schedule-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .schedule-row {
        display: grid !important;
        grid-template-columns: 55px 44px 1fr 1fr !important;
        gap: 6px !important;
        align-items: center !important;
        padding: 6px 0 !important;
        min-width: 0 !important;
    }
    .day-label {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }
    .time-input {
        font-size: 0.8rem !important;
        padding: 6px 4px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .schedule-header {
        display: grid !important;
        grid-template-columns: 55px 44px 1fr 1fr !important;
        gap: 6px !important;
        font-size: 0.7rem !important;
    }

    /* Toggle switch horizontal */
    .toggle-switch-horizontal {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .toggle-label {
        font-size: 0.85rem !important;
        flex: 1 1 200px !important;
    }

    /* Threshold input groups */
    .threshold-options {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .threshold-input-group {
        flex: none !important;
        width: 100% !important;
    }
    .input-medium {
        font-size: 16px !important; /* prevents iOS zoom */
    }
}


/* ─────────────────────────────────────────────
   11. SEC SETTINGS TAB — Category cards, filing list
   ───────────────────────────────────────────── */

@media (max-width: 900px) {
    .category-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 640px) {
    .category-card {
        padding: 12px !important;
    }
    .category-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .category-info div {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .category-name {
        font-size: 0.9rem !important;
    }
    .category-badge {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
    }
    .category-description,
    .category-forms,
    .category-warning {
        font-size: 0.8rem !important;
    }

    /* Filing items in advanced section */
    .filing-item {
        display: grid !important;
        grid-template-columns: 4px 1fr auto !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 8px 6px !important;
    }
    .filing-color-bar {
        width: 4px !important;
        min-height: 100% !important;
        border-radius: 2px !important;
    }
    .filing-info {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 8px !important;
        min-width: 0 !important;
    }
    .filing-name {
        font-size: 0.8rem !important;
    }
    .filing-desc {
        display: none !important; /* hide desc to save space on mobile */
    }
    .filing-badge {
        font-size: 0.55rem !important;
        padding: 1px 5px !important;
    }
    .filing-filters {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    .filing-filters .filter-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }
}


/* ─────────────────────────────────────────────
   12. PULSE TAB — Summary banner, controls, feed
   ───────────────────────────────────────────── */

@media (max-width: 900px) {
    .pulse-summary-banner {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        padding: 10px !important;
    }
    .pulse-summary-sep {
        display: none !important;
    }
    .pulse-controls {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

@media (max-width: 640px) {
    /* Summary stats: compact grid */
    .pulse-summary-banner {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        padding: 8px !important;
    }
    .pulse-summary-stat {
        flex-direction: column !important;
        align-items: center !important;
        font-size: 0.75rem !important;
        padding: 4px !important;
    }
    .pulse-stat-count {
        font-size: 1.1rem !important;
    }
    .pulse-stat-label {
        font-size: 0.6rem !important;
    }
    .pulse-summary-meta {
        grid-column: 1 / -1 !important;
        justify-content: space-between !important;
        font-size: 0.7rem !important;
        padding-top: 6px !important;
        border-top: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    }

    /* Filter pills: horizontal scroll */
    .pulse-filter-group {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
        flex-wrap: nowrap !important;
    }
    .pulse-filter-group::-webkit-scrollbar {
        display: none;
    }
    .pulse-filter-pill {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
    }

    /* Controls right section: wrap */
    .pulse-controls-right {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .pulse-controls-right select {
        flex: 1 1 120px !important;
        min-width: 0 !important;
        font-size: 0.8rem !important;
    }
    .pulse-toggle,
    .pulse-mark-all-read {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
    }
    .pulse-toggle-label {
        display: none !important; /* Just show icon on mobile */
    }
    /* Show label for sound toggle */
    #pulseSoundToggle .pulse-toggle-label {
        display: inline !important;
    }

    /* Pulse feed items */
    .pulse-event-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    .pulse-event-header {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .pulse-event-ticker {
        font-size: 0.85rem !important;
    }
    .pulse-event-time {
        font-size: 0.65rem !important;
    }
    .pulse-event-title {
        font-size: 0.85rem !important;
    }
    .pulse-event-body {
        font-size: 0.8rem !important;
    }
}


/* ─────────────────────────────────────────────
   13. MODALS — Full-screen on mobile
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .modal-content,
    .ticker-modal-content,
    .modal-body {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 1rem !important;
    }
    .modal-overlay,
    .ticker-modal-overlay {
        padding: 0 !important;
        align-items: flex-start !important;
    }
    /* Detail metrics inside modal */
    .detail-metrics {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .detail-metric {
        padding: 10px !important;
    }
    .modal-close,
    .detail-close {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}


/* ─────────────────────────────────────────────
   14. LOGIN / LOOKUP SECTION
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .lookup-section {
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
    .lookup-section h2 {
        font-size: 1.4rem !important;
    }
    .form-group-inline {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .input-large,
    #emailInput {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* prevents iOS zoom */
        padding: 14px !important;
    }
    .btn-primary-large,
    #requestMagicLinkBtn {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 14px !important;
        min-height: 48px !important;
    }
}


/* ─────────────────────────────────────────────
   15. SUBSCRIBE FORM (index.html)
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .subscribe-form .form-input,
    #email,
    #tickers {
        font-size: 16px !important; /* prevents iOS zoom */
    }
    .subscribe-form .btn {
        padding: 14px 20px !important;
        min-height: 48px !important;
    }
}


/* ─────────────────────────────────────────────
   16. FORM ACTIONS (save buttons)
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .form-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .form-actions button,
    .btn-action-unified {
        width: 100% !important;
        font-size: 0.9rem !important;
        padding: 12px 16px !important;
        min-height: 48px !important;
    }
    .form-actions-top {
        flex-direction: column !important;
        gap: 8px !important;
    }
}


/* ─────────────────────────────────────────────
   17. ADMIN PAGE — Generic admin responsive
   If admin uses .admin-table, .admin-grid etc.
   ───────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Admin tables: horizontal scroll */
    .admin-table-wrapper,
    .table-responsive,
    table.admin-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .admin-grid {
        grid-template-columns: 1fr !important;
    }
    .admin-card {
        padding: 1rem !important;
    }
    .admin-stats {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .admin-stats {
        grid-template-columns: 1fr !important;
    }
    .admin-nav {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}


/* ─────────────────────────────────────────────
   18. UNIVERSAL TOUCH TARGETS & iOS FIXES
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Ensure all interactive elements are tappable */
    button, a.btn, .toggle-switch, select, .tab-button,
    .dw-risk-pill, .pulse-filter-pill, .filter-btn {
        min-height: 44px !important;
    }

    /* Prevent horizontal overflow globally */
    html, body {
        overflow-x: hidden !important;
    }

    /* Fix iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}


/* ─────────────────────────────────────────────
   19. STEP CARDS (How it Works)
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .steps {
        gap: 1rem !important;
    }
    .step {
        padding: 1.25rem !important;
    }
    .step-number {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
}


/* ─────────────────────────────────────────────
   20. SETTINGS TAB (manage page)
   Email change, preferences, presets etc.
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .preference-card,
    .settings-card {
        padding: 1rem !important;
    }
    .preset-btn {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
        min-height: 44px !important;
    }
    .preset-grid,
    .presets-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    /* Account info section */
    .account-info {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .account-detail {
        font-size: 0.85rem !important;
    }
}


/* ─────────────────────────────────────────────
   21. TABLET BREAKPOINT (641-900px)
   Mid-size optimizations
   ───────────────────────────────────────────── */

@media (min-width: 641px) and (max-width: 900px) {
    .ticker-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .metrics-score-row .dilution-score-badge {
        min-width: 80px !important;
    }
    .pricing-table-wrapper {
        overflow-x: visible !important;
    }
    /* Pulse controls: 2-row layout */
    .pulse-controls-right {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .schedule-row {
        gap: 8px !important;
    }
}


/* ─────────────────────────────────────────────
   22. MANAGE PAGE FOOTER (simpler footer)
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    footer {
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }
    footer p {
        font-size: 0.8rem !important;
    }
    .footer-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }
    .footer-links a {
        font-size: 0.8rem !important;
    }
    .disclaimer {
        font-size: 0.7rem !important;
    }
}


/* ─────────────────────────────────────────────
   23. HELP SECTION
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .help-section {
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }
    .help-section h2 {
        font-size: 1.2rem !important;
    }
}


/* ─────────────────────────────────────────────
   24. MARKET INTELLIGENCE / DATA LAKE CARDS
   (inside ticker detail modals)
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .mi-card, .intelligence-card, .data-lake-card {
        padding: 10px !important;
    }
    .mi-grid, .intelligence-grid {
        grid-template-columns: 1fr !important;
    }
    .bar-chart-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}


/* ─────────────────────────────────────────────
   25. VALIDATION RESULT MESSAGES
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .validation-result {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 4px !important;
        font-size: 0.8rem !important;
    }
}


/* ─────────────────────────────────────────────
   26. LANDSCAPE PHONE (short viewport)
   ───────────────────────────────────────────── */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto !important;
        padding-top: 70px !important;
        padding-bottom: 2rem !important;
    }
    .nav-inner, .manage-nav-inner {
        height: 48px !important;
    }
    .nav-inner .site-logo,
    .manage-nav-inner .site-logo {
        width: 160px !important;
    }
}


/* ─────────────────────────────────────────────
   27. SUBPAGE NAV — Logo sizing for reverse-splits, shelf-atm etc
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .nav-inner img.site-logo,
    .nav-logo img,
    a.nav-logo img {
        width: 280px !important;
    }
}

@media (max-width: 900px) {
    .nav-inner img.site-logo,
    .nav-logo img,
    a.nav-logo img {
        width: 220px !important;
    }
}

@media (max-width: 640px) {
    .nav-inner img.site-logo,
    .nav-logo img,
    a.nav-logo img {
        width: 180px !important;
    }
}

@media (max-width: 400px) {
    .nav-inner img.site-logo,
    .nav-logo img,
    a.nav-logo img {
        width: 150px !important;
    }
}


/* ─────────────────────────────────────────────
   28. SUBPAGE DATA TABLES — Card layout on mobile
   Covers reverse-splits.html and shelf-atm-monitor.html
   ───────────────────────────────────────────── */

/* Stat cards on subpages */
@media (max-width: 640px) {
    .stats-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .stat-card {
        padding: 10px 14px !important;
        min-width: 0 !important;
    }
    .stat-value {
        font-size: 1.2rem !important;
    }
    .stat-label {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 400px) {
    .stats-bar {
        grid-template-columns: 1fr !important;
    }
}

/* Education grid on shelf-atm page */
@media (max-width: 640px) {
    .edu-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .edu-card {
        padding: 16px !important;
    }
}


/* ─────────────────────────────────────────────
   29. FOOTER LOGO — tighter on mobile
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .footer-logo-tiny {
        height: 80px !important;
    }
}

@media (max-width: 400px) {
    .footer-logo-tiny {
        height: 60px !important;
    }
}


/* ─────────────────────────────────────────────
   30. INDEX GRID REFINEMENTS — 2-col intermediate
   ───────────────────────────────────────────── */

/* Monitor cards: keep 2-col on phone until 480px */
@media (min-width: 481px) and (max-width: 640px) {
    .monitor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .monitor-card {
        padding: 1rem !important;
    }
    .monitor-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
    .monitor-title {
        font-size: 1rem !important;
    }
    .monitor-desc {
        font-size: 0.8rem !important;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Step cards: keep 2-col for 6-step layout on phone */
@media (min-width: 481px) and (max-width: 640px) {
    .steps.steps-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .step-card {
        padding: 1rem !important;
    }
    .step-number {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
    }
}

/* CTA pricing cards: 3-col on tablet */
@media (min-width: 641px) and (max-width: 900px) {
    .cta-pricing-cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
}

/* Pricing header cards: keep 3-col on tablet in compact form */
@media (min-width: 481px) and (max-width: 640px) {
    .pricing-cards-header {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .pricing-cards-header .pricing-header-card {
        padding: 12px 8px !important;
    }
}