/* Responsive overrides for the inline-styled design export.
   Desktop (>900px) renders entirely from the original inline styles — nothing
   here applies. Below the breakpoints, !important is required to override
   the style="" attributes from the export. */

/* ---------- Tablet and below (≤900px) ---------- */
@media (max-width: 900px) {
  /* Two-part sections (text + visual) stack vertically */
  .fs-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Card grids step down to two columns */
  .fs-cols-3,
  .fs-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Hero app screenshot: canvas on top, issue list below */
  .fs-shot {
    grid-template-columns: 1fr !important;
  }
  .fs-shot-side {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  .fs-canvas {
    min-height: 340px !important;
  }

  /* Header becomes two rows: lockup + CTA, then a scrollable nav row
     (the single-row desktop header only fits above ~900px) */
  .fs-header {
    flex-wrap: wrap !important;
    row-gap: 2px !important;
    padding: 14px 24px !important;
  }
  .fs-nav {
    order: 3 !important;
    width: 100% !important;
    gap: 22px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fs-nav::-webkit-scrollbar {
    display: none;
  }
  .fs-nav a {
    padding: 10px 0 !important;
    white-space: nowrap !important;
  }
}

/* ---------- Large phones (≤768px) ---------- */
@media (max-width: 768px) {
  .fs-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Phones (≤640px) ---------- */
@media (max-width: 640px) {
  .fs-header {
    padding: 12px 20px !important;
  }

  /* Tighter horizontal gutters and section rhythm */
  section[data-screen-label] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[data-screen-label="Hero"] {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }
  section[data-screen-label="Problem"],
  section[data-screen-label="How it works"],
  section[data-screen-label="Features"],
  section[data-screen-label="What it checks"],
  section[data-screen-label="Audience"],
  section[data-screen-label="Self-serve"],
  section[data-screen-label="Collaboration"] {
    padding-top: 72px !important;
  }
  section[data-screen-label="Brand moment"] {
    padding-top: 80px !important;
  }
  section[data-screen-label="Report preview"] {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }
  section[data-screen-label="Final CTA"] {
    padding-bottom: 80px !important;
  }
  section[data-screen-label="Final CTA"] > div:last-child {
    padding-top: 64px !important;
  }
  section[data-screen-label="Pricing hero"] {
    padding-top: 56px !important;
  }

  /* Hero headline sized for narrow screens */
  section[data-screen-label="Hero"] h1 {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.06 !important;
  }

  /* CTA button pairs stack full-width */
  .fs-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 340px;
  }
  .fs-cta-row a {
    display: block;
    width: 100%;
  }
  .fs-cta-row .btn {
    width: 100%;
    justify-content: center;
  }

  /* Remaining card grids to a single column */
  .fs-cols-3,
  .fs-cols-4 {
    grid-template-columns: 1fr !important;
  }
  .value-card {
    padding: 26px 24px 30px;
  }

  /* Hero screenshot chrome bar can wrap; keep canvas compact */
  .fs-shot-bar {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
  .fs-canvas {
    min-height: 280px !important;
  }

  /* Numbered how-it-works steps: smaller number column */
  .fs-step {
    grid-template-columns: 48px 1fr !important;
    gap: 16px !important;
  }
  .fs-step > span:first-child {
    font-size: 38px !important;
  }

  /* Example report table becomes a stacked card list */
  .fs-table-head {
    display: none !important;
  }
  .fs-table-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 20px !important;
  }

  /* Pricing plan cards */
  .fs-plan {
    padding: 26px 22px !important;
  }

  /* Footer stacks */
  .fs-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    padding: 32px 20px !important;
  }
  .fs-footer nav {
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
  /* Object labels inside the blueprint canvas get clipped at this width */
  .fs-canvas > span[style*="margin-left"] {
    display: none !important;
  }
}