/* ==========================================================================
   PUBHIGH — RESPONSIVE DESIGN & MOBILE OPTIMIZATIONS
   ========================================================================== */

/* Prevent page-level horizontal scroll on every viewport */
html {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* 100vw includes the scrollbar and often causes a 1-axis overflow on mobile */
#ambient-canvas,
.cursor-glow {
  max-width: 100%;
}

#ambient-canvas {
  width: 100% !important;
}

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

.container,
.app-view,
.section,
.glass-card,
.glass-card-dark,
.yield-engine-wrapper,
.hero-dashboard-card,
.calculator-card,
.application-modal-card {
  max-width: 100%;
}

.yield-engine-wrapper,
.footer-premium-wrapper {
  overflow-x: hidden;
}

/* Utility: force nested / inline grids to stack */
.stack-on-mobile {
  min-width: 0;
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .nav-menu,
  .main-nav {
    display: none;
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    position: static;
    transform: none;
    background: #090D16 !important;
    border-radius: 10px;
  }

  .mobile-toggle svg {
    display: block !important;
    width: 22px;
    height: 22px;
    max-width: none;
    stroke: #FFFFFF;
  }

  .mobile-toggle::before {
    display: none;
  }

  .header-container {
    gap: 10px;
    justify-content: space-between;
    position: relative;
  }

  .header-cta {
    display: none !important;
  }

  .dashboard-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .hero-floating-item {
    display: none;
  }

  .value-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .auction-demo-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .calculator-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .footer-top-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .adtech-media-card {
    border-radius: 18px;
  }

  .blog-featured-hero {
    grid-template-columns: 1fr;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .section-header {
    margin-bottom: 1.75rem;
  }

  .section-header p {
    font-size: 1rem;
  }

  /* ── Header: logo + menu only. Apply CTA lives in the drawer. ── */
  .site-header {
    height: var(--header-height);
    padding-top: env(safe-area-inset-top);
    background: rgba(255, 255, 255, 0.96);
  }

  .header-container {
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-logo-link {
    min-width: 0;
    flex: 0 1 auto;
  }

  .brand-logo-img {
    height: 28px;
    max-width: 120px;
  }

  .header-cta {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    margin-right: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    background: #090D16 !important;
    border-radius: 10px;
  }

  .mobile-toggle svg {
    display: block !important;
    width: 22px;
    height: 22px;
    max-width: none;
    stroke: #FFFFFF;
  }

  /* ── Buttons: never overflow the viewport ── */
  .btn {
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
  }

  .btn-lg {
    padding: 14px 18px;
    font-size: 0.95rem;
  }

  /* ── Hero ── */
  .hero-section {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 1.25rem);
    padding-bottom: 2.5rem;
    overflow-x: hidden;
  }

  .hero-content {
    margin-bottom: 1.75rem;
  }

  .hero-headline {
    font-size: clamp(1.85rem, 8vw, 2.5rem);
  }

  .hero-subheadline {
    font-size: 1.02rem;
    margin-bottom: 1.5rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-trust-micro {
    display: block !important;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 0 8px;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .hero-social-proof-bar {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 12px 14px;
  }

  .hero-social-proof-text {
    text-align: center;
    min-width: 0;
    width: 100%;
  }

  .hero-trust-caption,
  .hero-stars-row {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .eyebrow {
    white-space: normal;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    line-height: 1.35;
    height: auto;
  }

  .trust-title {
    white-space: normal !important;
    max-width: 100%;
    overflow-wrap: break-word;
    line-height: 1.5;
    padding: 0 4px;
  }

  #view-404 [style*="display: flex"][style*="justify-content: center"] {
    flex-direction: column;
    align-items: stretch;
  }

  #view-404 .btn,
  #view-404 a.btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  [style*="minmax(160px"] {
    grid-template-columns: 1fr !important;
  }

  .hero-dashboard-card {
    padding: 16px 14px;
    border-radius: 18px;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .dashboard-header-left {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  .dashboard-header-meta {
    font-size: 0.75rem;
    width: 100%;
  }

  .dashboard-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-bottom: 16px;
  }

  .metric-value {
    font-size: 1.45rem;
  }

  .dashboard-chart-area {
    padding: 12px;
  }

  .chart-svg-container {
    height: 160px;
  }

  /* ── Auction / yield engine ── */
  .yield-engine-wrapper {
    padding: 1.15rem 0.85rem !important;
    border-radius: 18px;
  }

  .yield-pipeline-flow {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
  }

  .yield-pipeline-flow .pipeline-node {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
  }

  .yield-pipeline-flow .pipeline-arrow {
    transform: rotate(90deg);
    align-self: center;
  }

  .yield-sim-controls {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .sim-control-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .sim-control-actions .btn,
  .btn-live-toggle {
    flex: 1 1 auto;
    justify-content: center;
  }

  .auction-demo-grid {
    grid-template-columns: 1fr !important;
    min-width: 0;
    width: 100%;
  }

  .auction-demo-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  .bid-card {
    padding: 12px;
  }

  .bid-card:hover {
    transform: none;
  }

  .bid-card-top {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
  }

  .bid-partner-name {
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
  }

  .bid-protocol-meta {
    display: block;
    width: 100%;
    margin-left: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .bid-value {
    flex-shrink: 0;
  }

  .winner-showcase {
    padding: 18px 14px;
    width: 100%;
    max-width: 100%;
  }

  .winner-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .winner-badge,
  .yield-upside-badge {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .winning-amount {
    font-size: 2.4rem;
  }

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

  .auction-demo-grid div[style*="justify-content: space-between"],
  .stack-on-mobile [style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 8px;
  }

  .stack-on-mobile [style*="justify-content: space-between"] strong {
    text-align: right;
  }

  /* ── Comparison matrix: stack into cards ── */
  .comparison-table-wrapper {
    overflow: visible !important;
    max-width: 100%;
  }

  .comparison-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
  }

  .comparison-table thead {
    display: none !important;
  }

  .comparison-table,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table th,
  .comparison-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .comparison-table tbody tr {
    padding: 16px 14px 18px;
    border-bottom: 10px solid #F1F5F9;
  }

  .comparison-table tbody tr:last-child {
    border-bottom: none;
  }

  .comparison-table td {
    padding: 10px 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  .comparison-table td.col-pubhigh {
    background: rgba(252, 135, 78, 0.06);
    border: 1px solid rgba(252, 135, 78, 0.22);
    border-radius: 12px;
    padding: 12px;
    margin-top: 6px;
  }

  .comparison-table td:nth-child(2)::before,
  .comparison-table td:nth-child(3)::before {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 8px;
  }

  .comparison-table td:nth-child(2)::before {
    content: "Traditional setup";
  }

  .comparison-table td:nth-child(3)::before {
    content: "PubHigh";
    color: #C2410C;
  }

  .comp-table-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 16px;
  }

  .comp-footer-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .comp-stat-val {
    font-size: 1.35rem;
  }

  .comp-table-footer .btn {
    width: 100%;
    white-space: normal;
  }

  /* ── Calculator ── */
  .calculator-card {
    padding: 1.1rem 0.9rem !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .calc-output-panel {
    padding: 18px 14px !important;
    min-width: 0;
  }

  .calc-stat-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .calc-stat-label {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
  }

  .calc-stat-value,
  .calc-stat-value.highlight {
    font-size: 1.2rem !important;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex-shrink: 1;
    min-width: 0;
    width: 100%;
  }

  .calc-stat-value.highlight {
    font-size: 1.4rem !important;
  }

  .calc-output-panel .btn {
    white-space: normal !important;
    line-height: 1.3;
    width: 100%;
  }

  /* ── Forms & application modal ── */
  .form-grid,
  .form-grid.full-width,
  .comm-input-row {
    grid-template-columns: 1fr !important;
  }

  .form-grid > *,
  .form-field.full-width,
  .form-field[style*="grid-column"] {
    grid-column: 1 / -1 !important;
    min-width: 0;
  }

  .wizard-meta-row {
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 40px;
  }

  .wizard-meta-label {
    font-size: 0.7rem !important;
  }

  .modal-backdrop {
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
  }

  .application-modal-card {
    max-width: 100%;
    width: 100%;
    max-height: 100dvh;
    height: 100%;
    border-radius: 0;
    padding: 56px 16px 24px;
    transform: none;
  }

  .modal-backdrop.is-active .application-modal-card {
    transform: none;
  }

  .modal-close-btn {
    top: 12px;
    right: 12px;
  }

  .wizard-step-title {
    font-size: 1.25rem;
    padding-right: 36px;
  }

  .wizard-actions {
    flex-wrap: wrap;
    gap: 10px;
  }

  .wizard-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .faq-question {
    padding: 18px 16px;
    font-size: 0.98rem;
    gap: 12px;
  }

  .faq-answer,
  .faq-item.is-open .faq-answer {
    padding-left: 16px;
    padding-right: 16px;
  }

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

  .footer-grid,
  .footer-nav-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .value-card {
    min-height: 0;
    padding: 24px;
  }

  .editorial-split-heading {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .editorial-split-img {
    height: 260px;
  }

  .editorial-split-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .editorial-split-actions .btn {
    width: 100%;
  }

  .pipeline-flow-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .case-header-row,
  .case-metric-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .live-inspector-panel {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px 16px;
  }

  .demand-logo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .pub-cat-grid,
  .case-study-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .blog-featured-hero-body {
    padding: 22px 18px;
  }

  .stack-on-mobile,
  .stack-on-mobile[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .pub-overlay-metrics,
  .pub-overlay-metrics[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .about-stats-strip,
  .about-stats-strip[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Catch leftover inline two-column layouts */
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Micro-Screens (max-width: 420px) */
@media (max-width: 420px) {
  h1 {
    font-size: 2rem;
  }

  .metric-value {
    font-size: 1.35rem;
  }

  .winning-amount {
    font-size: 2.15rem;
  }

  .brand-logo-img {
    height: 24px;
  }

  #headerApplyBtn {
    padding: 7px 10px;
    font-size: 0.7rem;
  }

  .demand-logo-grid {
    grid-template-columns: 1fr !important;
  }

  .live-inspector-panel {
    grid-template-columns: 1fr;
  }

  .demand-brand-badge {
    min-width: 155px;
    height: 56px;
    padding: 10px 18px;
  }

  .demand-brand-svg {
    max-height: 26px;
  }

  .pub-overlay-metrics,
  .pub-overlay-metrics[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ADMIN PANEL RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1280px) {
  .admin-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .admin-detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .admin-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
  }

  .admin-topbar-right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .admin-search-wrap {
    flex: 1;
    width: 100%;
  }

  .admin-filter-tabs {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
}

@media (max-width: 640px) {
  .admin-panel {
    padding: 0 12px 60px 12px;
  }

  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .admin-stat-card {
    padding: 16px 12px;
  }

  .admin-stat-value {
    font-size: 1.75rem;
  }

  .admin-detail-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .admin-detail-panel {
    padding: 16px 12px;
  }

  .admin-detail-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .admin-detail-actions .btn,
  .admin-detail-actions .admin-status-action,
  .admin-detail-actions .admin-delete-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .admin-login-card {
    padding: 28px 20px;
  }

  .admin-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    min-width: 750px;
  }
}

/* Component Level Responsive Rules */
@media (max-width: 1100px) {
  .demand-logo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .pub-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .case-study-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

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

  .live-inspector-panel {
    grid-template-columns: 1fr;
  }

  .demand-brand-badge {
    min-width: 155px;
    height: 56px;
    padding: 10px 18px;
  }

  .demand-brand-svg {
    max-height: 26px;
  }
}

/* ==========================================================================
   MOBILE HARDENING — contain overflow, wrap inline grids, shrink type
   ========================================================================== */

@media (max-width: 768px) {
  .app-view,
  .hero-visual-wrapper,
  .hero-dashboard-card,
  .yield-engine-wrapper,
  .bids-list,
  .bid-card,
  .winner-showcase,
  .glass-card,
  .glass-card-dark,
  .ad-showcase-wrapper,
  .ad-format-lab-wrapper,
  .ad-format-workbench-grid,
  .blog-featured-hero,
  .blog-card,
  .comm-form-card,
  .case-study-card,
  .value-card,
  .step-card {
    min-width: 0;
    max-width: 100%;
  }

  .glass-card,
  .glass-card-dark {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-dashboard-card {
    padding: 14px 12px !important;
  }

  .metric-box {
    padding: 12px 12px;
  }

  .metric-value-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .chart-svg-container svg,
  .dashboard-chart-area svg {
    max-width: 100%;
    height: auto;
  }

  .winner-partner-row,
  .winner-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .yield-upside-badge {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .winning-ecpm-label {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sim-control-group,
  .sim-pill-group {
    width: 100%;
  }

  .sim-pill {
    white-space: normal;
    line-height: 1.3;
  }

  .pipeline-node {
    min-width: 0;
    width: 100%;
  }

  .comp-cell-content,
  .comp-feature-name {
    flex-wrap: wrap;
    min-width: 0;
  }

  .comp-cell-content span,
  .comp-cell-content div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .comp-table-footer .btn,
  .btn-lg {
    white-space: normal !important;
    width: 100%;
    justify-content: center;
  }

  .wizard-actions .btn {
    white-space: normal !important;
  }

  .application-modal-card,
  .application-modal-card[style*="max-width"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  .form-input,
  .form-select,
  .form-textarea,
  .form-control {
    max-width: 100%;
    width: 100%;
  }

  .blog-search-box {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100%;
  }

  details.faq-item summary,
  .faq-question {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }

  details.faq-item summary span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .blog-controls-bar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .ad-format-workbench-grid {
    grid-template-columns: 1fr !important;
  }

  .mock-article-content-grid {
    grid-template-columns: 1fr !important;
  }

  .ad-showcase-topbar,
  .sandbox-actions {
    flex-wrap: wrap;
  }

  .case-metric-row,
  .case-header-row,
  .case-uplift-banner {
    flex-wrap: wrap;
    gap: 6px;
  }

  .case-uplift-banner {
    justify-content: space-between;
  }

  .editorial-feature-pills {
    flex-wrap: wrap;
  }

  .value-card-visual [style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Catch remaining two-column inline grids */
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  .pub-overlay-metrics,
  .pub-overlay-metrics[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .site-header svg,
  .mobile-toggle svg,
  .btn svg,
  .icon {
    max-width: none;
  }

  .mobile-nav-drawer {
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }

  .btn {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .cursor-glow {
    display: none !important;
  }

  .article-reader-container {
    padding: 0 4px;
  }

  .article-hero-banner {
    height: 200px;
    border-radius: 14px;
  }

  .article-content {
    font-size: 1.02rem;
    overflow-wrap: anywhere;
  }

  .article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .related-blogs-grid {
    grid-template-columns: 1fr !important;
  }

  .article-title {
    font-size: clamp(1.55rem, 8vw, 2.1rem);
  }

  .comm-cat-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .comm-cat-email-link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .comm-center-wrapper {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .comm-form-card {
    padding: 20px 16px;
  }

  .footer-nav-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-brand-col {
    grid-column: span 1 !important;
  }

  .editor-grid-2 {
    grid-template-columns: 1fr !important;
  }

  .revenue-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-header [style*="display: flex"] {
    flex-wrap: wrap;
    min-width: 0;
    gap: 8px;
  }

  .app-view [style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }

  .app-view [style*="justify-content: space-between"] strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .google-unit-leaderboard,
  .google-adsense-card {
    max-width: 100% !important;
    min-width: 0;
  }

  .ad-publisher-layout,
  .ad-slot-wrapper {
    max-width: 100%;
    overflow: hidden;
  }

  .steps-grid {
    grid-template-columns: 1fr !important;
  }

  .value-grid {
    grid-template-columns: 1fr !important;
  }

  .pub-cat-grid,
  .case-study-grid {
    grid-template-columns: 1fr !important;
  }

  h1, h2, p {
    overflow-wrap: break-word;
  }
}

@media (max-width: 420px) {
  .header-cta {
    display: none !important;
  }

  .brand-logo-img {
    height: 24px;
    max-width: 108px;
  }

  .pub-overlay-metrics,
  .pub-overlay-metrics[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}