/* Layout fixes on top of the Framer export (responsiveness at tablet / small-desktop widths).
   Selectors use Framer's layer names / class hashes; if a republish renames them, re-check the two sections noted below. */

/* 1. "Primary Cards" (Server-Side GTM Hosting / Secure & GDPR / Lightning Fast Performance):
      the third card used to sit alone in the left half. Centre it under the other two, same width. */
@media (min-width: 810px) {
  [data-framer-name="Primary Cards"] [class*="framer-1sk6e5c-container"] {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}

/* 2. Tablet (810-1199px): pricing as 2 cards per row (third centred), comparison as 2 columns. Phone (<810px) stays 1 per row. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-1r3g3go { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; }
  .framer-1r3g3go > .ssr-variant:last-of-type { display: contents; }
  .framer-1r3g3go > .ssr-variant:last-of-type > * { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .framer-2k8ved { flex-direction: row !important; }
  .framer-2k8ved > * { flex: 1 1 0; min-width: 0; }
}

/* 3. Phone (<810px): nothing may be wider than the screen. */
@media (max-width: 809.98px) {
  /* OCT illustration was a fixed 528px wide frame inside a 330px column */
  .framer-1qwmqn4 { width: 100% !important; max-width: 100%; }
  .framer-1raztff, .framer-12zjcz5 { max-width: 100%; }
}

/* 4. Phone: call-to-action card caption (a fixed 586px wide box with absolutely placed lines was centred on a 330px card and cut off).
      Turn it into a normal bottom-aligned text block. */
@media (max-width: 809.98px) {
  .framer-173txjs { width: 100% !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; height: auto !important;
    display: flex !important; flex-direction: column; gap: 6px; padding: 28px 20px 16px; box-sizing: border-box; }
  .framer-173txjs > * { position: static !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; white-space: normal !important; transform: none !important; }
  .framer-173txjs > * * { white-space: normal !important; }
}
@media (max-width: 809.98px) {
  .framer-1ygb6ye { min-height: 440px; }
  .framer-vylere { min-height: 440px; }
}