/* Finnovator marketing site — mobile & tablet layout */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

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

/* ——— Navigation ——— */
.fn-nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #E6ECF2;
  border-radius: 10px;
  background: #fff;
  color: #0B2447;
  cursor: pointer;
  flex: none;
}

.fn-nav-toggle svg {
  display: block;
}

.fn-plan-nav .fn-nav-toggle {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ——— Tablet (≤1024px) ——— */
@media (max-width: 1024px) {
  .fn-hero-grid,
  .fn-split-grid,
  .fn-proof-grid,
  .fn-plan-layout,
  .fn-stack-1200 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .fn-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fn-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  .fn-plan-sidebar {
    position: static !important;
    top: auto !important;
  }

  .fn-readiness-panel {
    padding: 32px 28px !important;
  }
}

/* ——— Mobile (≤768px) ——— */
@media (max-width: 768px) {
  .fn-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .fn-hero {
    padding: 44px 16px 36px !important;
  }

  .fn-container-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .fn-grid-2,
  .fn-grid-3,
  .fn-grid-4 {
    grid-template-columns: 1fr !important;
  }

  .fn-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .fn-product-stats {
    grid-template-columns: 1fr !important;
  }

  /* Main nav */
  .fn-nav-inner {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  .fn-nav-toggle {
    display: inline-flex;
  }

  .fn-nav-links,
  .fn-nav-actions {
    display: none !important;
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-left: 0 !important;
    padding-top: 8px;
    border-top: 1px solid #E6ECF2;
  }

  .fn-plan-nav .fn-nav-links,
  .fn-plan-nav .fn-nav-actions {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  .fn-nav.fn-nav-open .fn-nav-links,
  .fn-nav.fn-nav-open .fn-nav-actions {
    display: flex !important;
  }

  .fn-nav-links a,
  .fn-nav-actions a {
    padding: 10px 4px;
  }

  .fn-nav-actions a[data-strategy-call],
  .fn-nav-actions a.fn-nav-cta {
    text-align: center;
    justify-content: center;
  }

  /* Plan pages */
  .fn-plan-hero {
    padding: 48px 16px 40px !important;
  }

  .fn-plan-nav-inner {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  .fn-plan-nav .fn-nav-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Assessment */
  .fn-assessment-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 80px !important;
  }

  .fn-assessment-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fn-assessment-card .fn-assessment-pad,
  .fn-assessment-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .fn-assessment-card .fn-assessment-pad-top {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

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

  .fn-book-call-name-grid {
    grid-template-columns: 1fr !important;
  }

  .fn-book-call-card {
    max-width: 100% !important;
  }

  .fn-assessment-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .fn-assessment-actions button {
    width: 100%;
    justify-content: center;
  }

  .fn-score-pad {
    padding: 24px 20px !important;
  }

  .fn-score-inset {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .fn-cta-btn {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .fn-summary-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .fn-summary-row span:last-child {
    text-align: left !important;
  }

  .fn-score-footer {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .fn-fab-home {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    justify-content: center;
    font-size: 12px !important;
  }

  .fn-tier-tagline {
    width: 100%;
  }

  .fn-proof-grid {
    padding: 28px 22px !important;
    gap: 28px !important;
  }

  .fn-readiness-panel > div {
    padding: 28px 22px !important;
  }

  .fn-plan-hero .fn-container-pad,
  .fn-plan-hero > div {
    max-width: 100%;
  }
}

/* ——— Small phones (≤480px) ——— */
@media (max-width: 480px) {
  .fn-hide-sm {
    display: none !important;
  }

  .fn-nav-brand span.fn-hide-sm {
    display: none !important;
  }

  .fn-assessment-title {
    font-size: 22px !important;
  }

  .fn-option-label {
    font-size: 14px !important;
  }
}