/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES — All Pages
   Comprehensive fixes for every device size
   ═══════════════════════════════════════════════════════════════ */

/* ─── Global Overflow Guard — applies at ALL viewport sizes ─── */
/* Prevents text/content escaping containers in desktop mode on mobile */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  min-width: 0;
}

.app-layout {
  overflow-x: hidden;
}

/* All grid/flex children must not overflow their parent */
.main-content,
.glass-card,
.card,
.kpi-card,
.ops-card,
.sku-summary-card,
.sku-metric,
.owner-step,
.formula-box,
.setup-step,
.guide-card,
.stmt-section,
.modal,
.lt-options-card,
.lt-summary-card,
.blog-card,
.calc-card,
.ln-feature-card,
.ln-price-card,
.ln-testimonial,
.ln-pain-card {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Tables always scroll horizontally, never push layout */
.table-wrap,
.table-container,
.sku-table-wrap,
.lt-breakdown-wrap,
.calc-table-wrap,
.blog-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Large number values never overflow their card */
.kpi-value,
.ops-value,
.owner-profit,
.profit-val,
.sku-summary-card strong,
.sku-metric strong,
.owner-step strong,
.formula-box strong,
.fm-value,
.mini-value,
.lt-summary-value,
.c-value {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* ─── Base Reset ─── */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* ─── Touch Target Minimum Size ─── */
button, a, input[type="button"], input[type="submit"] {
  min-height: 44px;
}

/* ─── Prevent iOS input zoom ─── */
input, select, textarea {
  font-size: 16px !important;
}

/* ─── Sidebar & Layout ─── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 200;
    width: 280px !important;
    max-width: 85vw;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar-overlay.show {
    display: block;
    z-index: 199;
  }
  .mobile-header {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 100;
    padding: 0 16px;
  }
  .main-content {
    margin-left: 0 !important;
    padding: 72px 16px 24px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ─── KPI Grid ─── */
@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .kpi-card {
    padding: 14px !important;
  }
  .kpi-value {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .kpi-value {
    font-size: 16px !important;
  }
}

/* ─── Cards ─── */
@media (max-width: 768px) {
  .card {
    border-radius: 14px !important;
  }
  .card-header {
    padding: 14px 16px !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  .card-body {
    padding: 16px !important;
  }
  .card-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ─── Tables ─── */
@media (max-width: 768px) {
  .table-container,
  .table-wrap,
  .sku-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  .table {
    min-width: 600px;
    font-size: 12px !important;
  }
  .table th,
  .table td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
}

/* ─── Buttons ─── */
@media (max-width: 768px) {
  .btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-height: 44px;
  }
  .btn-sm {
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
  .btn-group {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ─── Forms ─── */
@media (max-width: 768px) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ─── Modals ─── */
@media (max-width: 768px) {
  .modal-backdrop {
    padding: 12px !important;
    align-items: flex-end !important;
  }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .modal-header {
    padding: 16px 18px !important;
  }
  .modal-body {
    padding: 16px 18px !important;
  }
  .modal-footer {
    padding: 12px 18px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ─── Tabs ─── */
@media (max-width: 768px) {
  .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 4px !important;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ─── Page Header ─── */
@media (max-width: 768px) {
  .page-header {
    margin-bottom: 16px !important;
  }
  .page-title {
    font-size: 20px !important;
  }
  .page-subtitle {
    font-size: 13px !important;
  }
}

/* ─── Auth Pages ─── */
@media (max-width: 768px) {
  .auth-split-layout {
    flex-direction: column !important;
    min-height: 100vh;
  }
  .auth-brand-side {
    padding: 24px 20px 20px !important;
    flex: none !important;
    min-height: auto !important;
  }
  .auth-brand-title {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }
  .auth-brand-subtitle {
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }
  .auth-features {
    display: none !important;
  }
  .auth-form-side {
    flex: 1;
    box-shadow: none !important;
  }
  .auth-form-wrapper {
    padding: 24px 20px !important;
    align-items: flex-start !important;
  }
  .auth-card {
    max-width: 100% !important;
  }
  .auth-controls {
    padding: 12px 16px !important;
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    z-index: 10;
  }
}

/* ─── Dashboard Page ─── */
@media (max-width: 768px) {
  .dash-hero {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .dash-hero-head {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .dash-hero-title {
    font-size: 22px !important;
  }
  .dash-hero-copy {
    font-size: 13px !important;
  }
  .dash-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding-bottom: 4px;
  }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab {
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .dash-filter-box {
    width: 100% !important;
  }
  .dash-filter-select {
    width: 100% !important;
  }
  .ops-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .glass-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .chart-h200 { height: 180px !important; }
  .chart-h300 { height: 220px !important; }
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Dashboard grid layouts */
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 300px"] {
    display: block !important;
  }
  [style*="grid-template-columns: repeat(auto-fit, minmax(400px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fit, minmax(400px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fit,minmax(400px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(auto-fit, minmax(220px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .main-container {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .ops-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .dash-hero-title {
    font-size: 18px !important;
  }
}

/* ─── Payments Page ─── */
@media (max-width: 768px) {
  .payments-hero {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .payments-head {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  .payments-title {
    font-size: 22px !important;
  }
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi-wallet {
    padding: 14px !important;
  }
  .kpi-value {
    font-size: 20px !important;
  }
  .pay-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pay-tabs::-webkit-scrollbar { display: none; }
  .pay-tabs .tab-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }
  .payment-grid,
  .payment-grid-asym {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .filter-box {
    width: 100% !important;
  }
  .filter-box select {
    width: 100% !important;
    min-width: unset !important;
  }
  .pay-guide-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .kpi-row {
    grid-template-columns: 1fr !important;
  }
}

/* ─── SKU Costing Page ─── */
@media (max-width: 768px) {
  .sku-hero {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .sku-hero-content {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .sku-hero-title {
    font-size: 20px !important;
  }
  .sku-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .sku-actions .btn {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }
  .sku-workflow {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .sku-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .sku-search {
    width: 100% !important;
  }
  .sku-group-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .sku-group-stats {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .sku-quickbar {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .sku-quickbar .form-group {
    width: 100% !important;
  }
  .sku-quickbar .form-input {
    width: 100% !important;
    text-align: left !important;
  }
  .sku-save-tray {
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }
  .sku-save-card {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .sku-guide-grid {
    grid-template-columns: 1fr !important;
  }
  .sku-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .sku-table {
    min-width: 900px !important;
  }
  .sku-table .form-input {
    width: 70px !important;
  }
  .sku-table .form-select {
    width: 130px !important;
  }
}

/* ─── Inventory Page ─── */
@media (max-width: 768px) {
  .inventory-hero {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .inventory-head {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .inventory-title {
    font-size: 22px !important;
  }
  .inventory-head > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  .inventory-head .btn {
    flex: 1;
    min-width: 100px;
    justify-content: center;
  }
  .inv-guide {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .mini-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .mini-value {
    font-size: 18px !important;
  }
  .inv-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inv-tabs::-webkit-scrollbar { display: none; }
  .inv-tabs .tab-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-width: 100px !important;
  }
  .inv-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .trending-list {
    gap: 6px !important;
  }
  .trending-item {
    padding: 6px 10px !important;
  }
}

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

/* ─── Claims Page ─── */
@media (max-width: 768px) {
  .claims-hero {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .claims-head {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  .claims-title {
    font-size: 22px !important;
  }
  .claims-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .claims-card {
    padding: 14px !important;
  }
  .c-value {
    font-size: 22px !important;
  }
  .claims-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 6px !important;
  }
  .claims-tabs::-webkit-scrollbar { display: none; }
  .claims-tabs .tab-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }
  .claims-filter-box {
    width: 100% !important;
  }
  .claims-filter-box select {
    width: 100% !important;
    min-width: unset !important;
  }
  .action-guide {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .main-container {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .claims-kpis {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Reports Page ─── */
@media (max-width: 768px) {
  .reports-hero {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .reports-head {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .reports-title {
    font-size: 20px !important;
  }
  .report-controls {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .report-controls .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .report-controls select {
    width: 100% !important;
  }
  .report-search {
    min-width: unset !important;
    width: 100% !important;
  }
  .report-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .raw-toggle {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .report-summary {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Settings Page ─── */
@media (max-width: 768px) {
  .premium-settings-hero {
    flex-direction: column !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  .premium-settings-title {
    font-size: 24px !important;
  }
  .premium-settings-grid {
    grid-template-columns: 1fr !important;
    padding: 0 20px 20px !important;
  }
  .premium-value-grid {
    grid-template-columns: 1fr !important;
  }
  .premium-settings-pill {
    min-width: unset !important;
    width: 100% !important;
  }
}

/* ─── Premium Page ─── */
@media (max-width: 768px) {
  .premium-page-hero {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
  .premium-page-hero-inner {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .premium-page-title {
    font-size: 24px !important;
  }
  .premium-page-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .premium-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .premium-page-status {
    min-width: unset !important;
    width: 100% !important;
  }
  .premium-page-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .premium-page-actions .btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
  }
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .premium-history-table {
    min-width: 500px;
  }
}

/* ─── Upload Page ─── */
@media (max-width: 768px) {
  .setup-shell {
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }
  .setup-shell-head {
    padding: 20px 16px 16px !important;
  }
  .setup-shell-title {
    font-size: 22px !important;
  }
  .setup-shell-copy {
    font-size: 13px !important;
  }
  .setup-shell-path {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .setup-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 16px 16px !important;
  }
  .setup-return-note {
    margin: 0 16px 16px !important;
  }
  .guide-body {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
  }
  .upload-account-top {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .upload-account-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .upload-account-actions .btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
  }
  .upload-account-inline-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .guided-upload-banner {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .guided-upload-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .guided-upload-actions .btn {
    flex: 1;
    justify-content: center;
  }
  .grid.grid-3.mb-24 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ─── Label Tool Page ─── */
@media (max-width: 768px) {
  .lt-page-header {
    padding: 16px !important;
  }
  .lt-page-header h1 {
    font-size: 20px !important;
  }
  .lt-main-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .lt-sticky-col {
    position: static !important;
  }
  .lt-options-card {
    padding: 16px !important;
  }
  .lt-upload-zone {
    padding: 32px 16px !important;
  }
  .lt-summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .lt-results-header {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .lt-download-section {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .lt-download-section .btn,
  .lt-download-btn,
  .lt-reset-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ─── Admin Panel ─── */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 60px !important;
    overflow: hidden;
  }
  .admin-sidebar .brand-text,
  .admin-sidebar .brand-sub,
  .admin-sidebar .admin-nav-label,
  .admin-sidebar .admin-nav-link span,
  .admin-sidebar .admin-nav-footer span {
    display: none !important;
  }
  .admin-sidebar .admin-nav-link {
    justify-content: center !important;
    padding: 12px !important;
  }
  .admin-main {
    margin-left: 60px !important;
    padding: 16px !important;
  }
  .admin-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .admin-form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .admin-header {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .admin-header-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ─── Premium Modal ─── */
@media (max-width: 768px) {
  .premium-modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .premium-modal-shell {
    border-radius: 24px 24px 0 0 !important;
    max-height: 92vh !important;
    max-width: 100% !important;
  }
  .premium-hero {
    padding: 24px 16px 18px !important;
  }
  .premium-hero-content {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .premium-hero-copy h2 {
    font-size: 22px !important;
  }
  .premium-plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 14px 16px 6px !important;
    gap: 10px !important;
  }
  .premium-benefit-row {
    grid-template-columns: 1fr !important;
    padding: 14px 16px 6px !important;
    gap: 10px !important;
  }
  .premium-bottom {
    flex-direction: column !important;
    padding: 12px 16px 20px !important;
    gap: 12px !important;
  }
  .premium-bottom > div:last-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .premium-bottom .btn {
    flex: 1;
    justify-content: center;
  }
  .premium-status-pill {
    min-width: unset !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .premium-plan-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Account Selector Dropdown ─── */
@media (max-width: 768px) {
  .account-dropdown {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 300 !important;
  }
  .account-dropdown-inner {
    max-height: 50vh !important;
  }
}

/* ─── Sidebar Footer on Mobile ─── */
@media (max-width: 768px) {
  .sidebar-footer {
    padding: 12px !important;
  }
  .user-email {
    max-width: 120px !important;
  }
  .premium-status-card {
    padding: 10px !important;
  }
  .premium-status-copy {
    font-size: 11px !important;
  }
}

/* ─── Tooltip Adjustments ─── */
@media (max-width: 768px) {
  [data-tooltip]:hover::after,
  [data-tooltip]:focus::after {
    max-width: min(280px, 80vw) !important;
    left: 0 !important;
    transform: none !important;
    font-size: 11px !important;
  }
  [data-tooltip]:hover::before,
  [data-tooltip]:focus::before {
    display: none !important;
  }
}

/* ─── Calculator Page ─── */
@media (max-width: 768px) {
  .calc-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sticky-results {
    position: static !important;
    top: auto !important;
  }
  .calc-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  .calc-inputs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .calc-hero {
    padding: 20px 16px 28px !important;
  }
  .calc-hero h1 {
    font-size: clamp(22px, 5vw, 32px) !important;
  }
  .calc-hero-sub {
    font-size: 14px !important;
  }
  .calc-breadcrumb {
    padding: 12px 16px !important;
    margin-top: 70px !important;
  }
  .calc-container {
    padding: 0 16px !important;
  }
  .sim-funnel {
    gap: 6px !important;
  }
  .sim-funnel-item strong {
    font-size: 18px !important;
  }
  .final-metrics {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .fm-value {
    font-size: 22px !important;
  }
  .pnl-row span {
    font-size: 12px !important;
  }
  .pnl-row strong {
    font-size: 13px !important;
  }
  .pnl-row.total-margin strong {
    font-size: 20px !important;
  }
  .calc-content-section {
    padding: 40px 16px !important;
  }
  .calc-faq {
    padding: 40px 16px !important;
  }
  .calc-cta-section {
    padding: 48px 16px !important;
  }
  .calc-related-links {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .calc-inputs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Landing Page Extra Fixes ─── */
@media (max-width: 768px) {
  .ln-hero {
    padding: 80px 16px 48px !important;
  }
  .ln-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
  }
  .ln-hero h1 {
    font-size: clamp(26px, 6vw, 38px) !important;
  }
  .ln-hero-sub {
    font-size: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ln-hero-actions {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .ln-hero-actions .ln-btn {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
  }
  .ln-hero-trust {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .ln-hero-visual {
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  .ln-stats-row {
    gap: 20px !important;
  }
  .ln-stat-value {
    font-size: 26px !important;
  }
  .ln-features-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ln-steps {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ln-testimonial-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ln-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ln-pain-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ln-cta-inner {
    padding: 32px 16px !important;
    border-radius: 20px !important;
  }
  .ln-cta h2 {
    font-size: clamp(22px, 5vw, 30px) !important;
  }
  .ln-footer-inner {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .ln-footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .ln-section-title {
    font-size: clamp(22px, 5vw, 32px) !important;
  }
}

/* ─── Flex-between on mobile ─── */
@media (max-width: 480px) {
  .flex-between {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
}

/* ─── Pagination ─── */
@media (max-width: 480px) {
  .pagination {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .page-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* ─── Info Tips on Mobile ─── */
@media (max-width: 768px) {
  .info-tip {
    display: none !important;
  }
}

/* ─── Upload Zone ─── */
@media (max-width: 768px) {
  .upload-zone {
    padding: 32px 16px !important;
  }
  .upload-zone-icon {
    font-size: 32px !important;
  }
  .upload-zone-text {
    font-size: 14px !important;
  }
}