/* Backentra website — responsive layer.
   The site is authored desktop-first with inline styles, so this sheet overrides
   structure at tablet and phone widths only. Nothing here applies above 1024px, and
   the desktop presentation is untouched.

   Inline styles beat stylesheets, so these rules carry !important by necessity.
   Scoped to #root so the pre-launch banner and nothing outside the app is caught. */

/* ---------------- tablet: 1024px and below ---------------- */
@media (max-width: 1024px) {
  /* Three- and four-up card grids drop to two across. */
  #root [style*="repeat(4,"],
  #root [style*="repeat(4 ,"],
  #root [style*="repeat(3,"],
  #root [style*="repeat(6,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Two-column page splits stack, since neither half is readable at half a tablet. */
  #root [style*="1.05fr 0.95fr"],
  #root [style*="1.35fr 1fr"],
  #root [style*="1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* The split rule above substring-matches the footer's four-column track list, so the
     footer states its own tablet layout at higher specificity. */
  #root footer div[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Container gutters tighten. */
  #root section > div { padding-left: 24px !important; padding-right: 24px !important; }

  /* Display type steps down so headlines stop running four lines. */
  #root h1 { font-size: 38px !important; line-height: 1.08 !important; }
  #root h2 { font-size: 27px !important; }

  /* Header: the six links plus a CTA will not hold one line on a tablet, and the
     default wrap strands the CTA on an empty second row. Put logo and CTA on row one
     and the nav deliberately beneath. */
  #root header > div { grid-template-columns: auto 1fr !important; row-gap: 8px !important; column-gap: 14px !important; padding: 10px 24px !important; min-height: 0 !important; }
  #root header nav { grid-column: 1 / -1 !important; grid-row: 2 !important; margin-left: 0 !important; gap: 4px 18px !important; }
  #root header > div > span:last-child { grid-column: 2 !important; grid-row: 1 !important; }
  #root header nav a { font-size: 14px !important; }
}



/* ---------------- phone: 720px and below ---------------- */
@media (max-width: 720px) {
  /* Everything is one column. No exceptions: side-by-side fails below this width. */
  #root [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Sections lose roughly a third of their vertical padding. */
  #root section { padding-top: 44px !important; padding-bottom: 44px !important; }
  #root section > div { padding-left: 18px !important; padding-right: 18px !important; }

  /* Type scale for a phone. */
  #root h1 { font-size: 30px !important; line-height: 1.12 !important; }
  #root h2 { font-size: 23px !important; line-height: 1.2 !important; }
  #root h3 { font-size: 17px !important; }
  #root p { font-size: 15px !important; }

  /* Header: logo left, nav wraps beneath, CTA full width under it. */
  #root header > div { grid-template-columns: auto 1fr !important; row-gap: 10px !important; padding: 10px 18px !important; min-height: 0 !important; }
  #root header nav { grid-column: 1 / -1 !important; grid-row: 2 !important; gap: 4px 16px !important; margin-left: 0 !important; }
  #root header nav a { font-size: 14px !important; }
  #root header > div > span:last-child { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }

  /* CTA buttons stack full width. Pill-shaped controls are excluded: the filter chips
     and the Monthly/Annual toggle only read as a set when they sit side by side. */
  #root section button:not([style*="radius-pill"]):not([style*="border-radius: 99"]):not([role="tab"]) {
    width: 100% !important; justify-content: center !important;
  }
  #root [style*="display: flex"][style*="gap: 12px"] > button:not([style*="radius-pill"]) { flex: 1 1 100% !important; }

  /* Chip rows scroll or wrap at their natural size rather than becoming a wall. */
  #root section button[style*="radius-pill"] { width: auto !important; flex: none !important; }

  /* The Preview rail. The blanket button rule above is what broke it: a tile stretched to
     100% inside the desktop rail's `width: max-content` flex track is a circular constraint,
     so every tile resolved to the full track width — 1133px at a 390px viewport — and they
     piled up as one enormous cropped screenshot. The fix is structural rather than a
     counter-override: preview.jsx renders a different rail below 720px, where each tile sits
     in a wrapper of a known width, so `width: 100%` is exactly what it should be. The wrapper
     widths live in preview.jsx beside the tiles they size; nothing is needed here, because
     the blanket rule only matches `button` and cannot reach a div. */

  /* The rail is deliberately full-bleed — it is the one element allowed past the 18px
     gutter, because a strip that stops short reads as a broken carousel. The scroller
     carries its own inner padding so the first tile still starts on the margin. */
  #root .pv-phone-rail { padding-left: 18px !important; padding-right: 18px !important; }
  #root .pv-phone-rail::-webkit-scrollbar { display: none; }

  /* Grouped controls stay grouped. A segmented control only reads as a toggle while its
     options sit side by side, and the DS component marks the group with role="tablist". */
  #root section [role="tablist"] button,
  #root [role="tablist"] button[role="tab"] { width: auto !important; flex: none !important; }

  /* Anything wide enough to break the viewport scrolls instead. */
  #root table { min-width: 640px !important; }
  #root [style*="overflow-x"] { -webkit-overflow-scrolling: touch; }

  /* Tab and filter strips scroll sideways rather than wrapping into a block. */
  #root [style*="border-radius: var(--radius-pill)"][style*="height: 34px"] { flex: none !important; }

  /* The big orange CTA blocks lose their side padding. */
  #root [style*="var(--radius-2xl)"] { padding: 32px 24px !important; text-align: left !important; }

  /* Pre-launch banner reads as two lines on a phone, so it needs room. */
  .bk-prelaunch { padding: 10px 16px !important; }
}

/* ---------------- small phone: 400px and below ---------------- */
@media (max-width: 400px) {
  #root h1 { font-size: 26px !important; }
  #root section > div { padding-left: 14px !important; padding-right: 14px !important; }
  #root header nav a { font-size: 13px !important; }
}