/* =============================================================
   Nexus Coastal Child — responsive-devices.css
   Comprehensive responsive system for all tablet/device sizes.

   KEY PRINCIPLE:
   The outer container (max-width:72rem) and inner glass panel
   padding together eat ~7rem of horizontal space on tablets.
   We expand to full-width with small gutters so grids have
   real room, then set grid columns per breakpoint tier.

   TIER MAP:
   ── xs phone ────────── ≤ 380px
   ── sm phone ──────────  381–480px
   ── phablet ───────────  481–599px
   ── sm tablet ─────────  600–767px   (iPad mini portrait, Galaxy Tab)
   ── md tablet ─────────  768–900px   (iPad Air portrait, Kindle Fire HD)
   ── lg tablet ─────────  901–1024px  (iPad Pro 11″ portrait, iPad Air landscape)
   ── xl tablet / laptop ─ 1025–1180px (Surface Pro 7 portrait, iPad Pro 12.9″)
   ── desktop ───────────  1181px+
   ============================================================= */

/* ═══════════════════════════════════════════════════════════════
   1. FULL-WIDTH CONTAINER EXPANSION (600px – 1180px)
      Expand outer wrappers to viewport width with 1rem gutters.
      This is the core fix — wider container means grids have room.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1024px) {
  body.devbytes-page { overflow-x: hidden; }

  /* All section outer wrappers */
  body.devbytes-page section > div[style*="max-width:72rem"],
  body.devbytes-page section > div[style*="max-width: 72rem"] {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero, footer, stats — each has its own inline max-width:72rem div */
  #hero > div,
  #devbytes-stats > div[style*="z-index:2"],
  #site-footer > div[style*="z-index:3"] {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Header inner */
  #site-header > div {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Glass panels — tighten inner horizontal padding */
  body.devbytes-page section [style*="backdrop-filter:blur"],
  body.devbytes-page section [style*="backdrop-filter: blur"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   2. HEADER
   ═══════════════════════════════════════════════════════════════ */

/* md + lg tablet (768–1024px): hide phone number, keep icon pill */
@media (min-width: 768px) and (max-width: 1024px) {
  #site-header > div { height: 72px !important; gap: .75rem !important; }
  .devbytes-nav-menu { gap: 1.25rem !important; }
  .devbytes-nav-menu a { font-size: .875rem !important; }
  /* Phone: icon-only pill */
  #header-phone {
    font-size: 0 !important;
    padding: .6rem .85rem !important;
    gap: 0 !important;
    min-width: 44px !important;
    justify-content: center !important;
  }
  #header-cta { padding: .65rem 1.25rem !important; font-size: .9rem !important; }
}

/* xl tablet (1025–1180px): show phone number, full size */
@media (min-width: 1025px) and (max-width: 1180px) and (pointer: coarse) {
  #header-phone { font-size: .95rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   3. HERO
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet portrait (600–767px): stacked column layout */
@media (min-width: 600px) and (max-width: 767px) {
  #hero { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #devbytes-hero-overlay {
    width: 100% !important;
    background: linear-gradient(to bottom, rgba(4,20,12,0.75) 0%, rgba(4,20,12,0.60) 50%, rgba(4,20,12,0.25) 100%) !important;
  }
  #devbytes-hero-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }
  #devbytes-hero-flex > div:first-child {
    order: 1 !important;
    flex: none !important;
  }
  #devbytes-hero-flex h1 { font-size: 2rem !important; }
  #devbytes-hero-icons { display: flex !important; }
  #devbytes-hero-body  { display: block !important; font-size: .95rem !important; }
  #devbytes-hero-flex aside {
    order: 2 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 1.25rem !important;
  }
  #hero > div { padding: 2rem 1rem 2rem !important; }
}

/* md tablet portrait (768–900px): stacked, slightly larger type */
@media (min-width: 768px) and (max-width: 900px) {
  #hero { height: auto !important; min-height: 560px !important; max-height: none !important; }
  #devbytes-hero-overlay {
    width: 100% !important;
    background: linear-gradient(to bottom, rgba(4,20,12,0.72) 0%, rgba(4,20,12,0.55) 60%, rgba(4,20,12,0.20) 100%) !important;
  }
  #devbytes-hero-flex {
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    align-items: flex-start !important;
  }
  #devbytes-hero-flex > div:first-child {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  #devbytes-hero-flex h1 { font-size: 2.5rem !important; }
  #devbytes-hero-icons { display: flex !important; }
  #devbytes-hero-body  { display: block !important; }
  #devbytes-hero-flex aside {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
    align-self: flex-start !important;
  }
  #hero > div { padding: 2.5rem 1rem 2rem !important; }
}

/* lg + xl tablet landscape (901–1180px): side-by-side, compact form */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #hero {
    height: calc(100vh - 72px) !important;
    min-height: 580px !important;
    max-height: 860px !important;
  }
  #devbytes-hero-flex { gap: 1.5rem !important; align-items: center !important; }
  #devbytes-hero-flex h1 { font-size: clamp(2rem, 3vw, 2.8rem) !important; }
  #devbytes-hero-flex aside {
    flex: 0 0 290px !important;
    width: 290px !important;
    padding: 1.25rem !important;
    align-self: center !important;
  }
  /* Compact form fields to fit smaller card */
  #devbytes-hero-flex aside input,
  #devbytes-hero-flex aside select {
    padding: .5rem .75rem !important;
    margin-bottom: .45rem !important;
    font-size: .875rem !important;
    min-height: 42px !important;
  }
  #devbytes-hero-flex aside button[type="submit"] {
    min-height: 46px !important;
    font-size: .95rem !important;
  }
  /* Trust logos wrap neatly in compact card */
  #hero-form-title > div:last-child {
    flex-wrap: wrap !important;
    gap: .5rem .75rem !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4. PAIN POINTS
   Breakpoint rules live in pain-points.php <style> block
   to win the specificity fight against the inline grid style.
   Only the lg/xl range is repeated here for the wider container.
   ═══════════════════════════════════════════════════════════════ */

/* lg + xl tablet (901–1180px): all 5 in one row, slightly tighter */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #devbytes-pain-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: .75rem !important;
  }
  #devbytes-pain-grid > div { padding: 1.25rem .625rem !important; }
  #devbytes-pain-grid h3 { font-size: .875rem !important; white-space: normal !important; }
  #devbytes-pain-grid p  { font-size: .75rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   5. SELLING POINTS (Legal Cancellation 4-card grid)
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): 2×2 */
@media (min-width: 600px) and (max-width: 900px) {
  #devbytes-selling-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
}

/* lg + xl tablet (901–1180px): 4-col, tighter card padding */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #devbytes-selling-grid { grid-template-columns: repeat(4, 1fr) !important; }
  #devbytes-selling-grid > div { padding: 1.25rem .875rem !important; }
  /* Label text slightly smaller */
  #devbytes-selling-grid > div > p:first-of-type { font-size: .62rem !important; }
}

/* Bottom CTA strip: stack text + button on narrow tablets */
@media (min-width: 600px) and (max-width: 860px) {
  #devbytes-selling-grid + div,
  #devbytes-selling-grid ~ div[style*="border-top"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .875rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   6. WHY US (3-col value props)
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet (600–767px): single col */
@media (min-width: 600px) and (max-width: 767px) {
  #devbytes-why-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  #devbytes-why-grid > div:nth-child(2) { margin-top: 0 !important; }
}

/* md+ tablet (768–1180px): 3-col fits, tighten padding */
@media (min-width: 768px) and (max-width: 1180px) and (pointer: coarse) {
  #devbytes-why-grid { gap: 1.25rem !important; }
  #devbytes-why-grid > div { padding: 0 .5rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   7. STATS BAND
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): 2-col */
@media (min-width: 600px) and (max-width: 900px) {
  #devbytes-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
  #devbytes-stats > div[style*="z-index:2"] { padding: 5rem 1rem !important; }
}

/* lg + xl tablet (901–1180px): 4-col, reduce number size */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #devbytes-stats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1.5rem !important; }
  #devbytes-stats > div[style*="z-index:2"] { padding: 6rem 1rem !important; }
  /* Slightly smaller stat numbers to fit */
  #devbytes-stats-grid > div > div:nth-child(2) { font-size: 2.75rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   8. PROCESS (steps 2×2 + image)
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet (600–767px): single-col steps, image below */
@media (min-width: 600px) and (max-width: 767px) {
  #devbytes-process-section [style*="flex:1 1 480px"] { padding: 1.75rem 1rem 1.5rem !important; }
  .devbytes-process-2col { grid-template-columns: 1fr !important; gap: 1rem !important; }
  #devbytes-process-img-col {
    flex: 0 0 100% !important;
    min-height: 280px !important;
    padding: 0 1rem 1.25rem !important;
  }
  #devbytes-process-img-col img {
    height: 280px !important;
    object-fit: cover !important;
    object-position: center 15% !important;
  }
}

/* md tablet (768–900px): 2-col steps, image below — better crop */
@media (min-width: 768px) and (max-width: 900px) {
  #devbytes-process-section [style*="flex:1 1 480px"] { padding: 2rem 1.25rem 1.5rem !important; min-width: 100% !important; }
  .devbytes-process-2col { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  #devbytes-process-img-col {
    flex: 0 0 100% !important;
    min-height: 320px !important;
    padding: 0 1rem 1.25rem !important;
  }
  #devbytes-process-img-col img {
    height: 320px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }
}

/* lg + xl tablet (901–1180px): side-by-side, image column narrower */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #devbytes-process-section > div > div { min-height: auto !important; }
  #devbytes-process-section [style*="flex:1 1 480px"] { padding: 2rem 1.25rem 1.5rem !important; }
  #devbytes-process-img-col {
    flex: 0 0 280px !important;
    padding: 1.25rem !important;
  }
  #devbytes-process-img-col img {
    height: 100% !important;
    min-height: 360px !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    border-radius: .875rem !important;
  }
  .devbytes-process-2col { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
}

/* Process bottom CTA strip: stack on narrow tablets */
@media (min-width: 600px) and (max-width: 860px) {
  #devbytes-process-section [style*="border-top:1px solid"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .875rem !important;
  }
  #devbytes-process-section [style*="border-top:1px solid"] > a {
    align-self: stretch !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   9. TESTIMONIALS
   On tablets: full-width horizontal card layout (photo left,
   quote right) — eliminates the floating orphan card problem.
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): single-col, horizontal card layout */
@media (min-width: 600px) and (max-width: 900px) {
  /* Single column, full width */
  #devbytes-testi-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  /* Each card: flex row — photo left, quote right */
  #devbytes-testi-grid > div {
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  /* Photo half — fixed portrait column */
  #devbytes-testi-grid > div > div:first-child {
    flex: 0 0 200px !important;
    width: 200px !important;
    height: auto !important;   /* let it stretch to card height */
    min-height: 220px !important;
    overflow: hidden !important;
  }
  #devbytes-testi-grid > div > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }
  /* Quote half — fills remaining width */
  #devbytes-testi-grid > div > div:last-child {
    flex: 1 1 0 !important;
    padding: 1.5rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  /* Quote mark slightly smaller */
  #devbytes-testi-grid > div > div:last-child > div:first-child {
    font-size: 2rem !important;
    margin-bottom: .3rem !important;
  }
  /* Trust + CTA bar: stack logos then button */
  #devbytes-testi-trust-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  #devbytes-trust-logos { flex-wrap: wrap !important; gap: .75rem 1.25rem !important; }
  #devbytes-trust-logos > div[style*="width:1px"] { display: none !important; }
  #devbytes-testi-trust-row > a {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* lg + xl tablet (901–1180px): 2×2 grid */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #devbytes-testi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  #devbytes-testi-grid > div > div:first-child { height: 200px !important; }
  /* Trust logos: hide dividers, tighten */
  #devbytes-trust-logos > div[style*="width:1px"] { display: none !important; }
  #devbytes-trust-logos { gap: 1rem !important; }
  #devbytes-testi-trust-row { flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; }
  #devbytes-testi-trust-row > a { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
}

/* Testimonial header pill — prevent overflow on all tablets */
@media (min-width: 600px) and (max-width: 1180px) and (pointer: coarse) {
  #devbytes-testimonials > div > div:first-child > div {
    padding: 1.5rem 1.25rem !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #devbytes-testimonials > div > div:first-child {
    text-align: center !important;
    width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   10. FAQ (3-col: accordion | beach CTA | warning+nexus)
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet (600–767px): single column, all stacked */
@media (min-width: 600px) and (max-width: 767px) {
  #devbytes-faq-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  #devbytes-faq > div > div { padding: 1.75rem 1rem !important; }
}

/* md tablet (768–900px): 2-col — accordion + beach CTA side by side,
   warning card full-width underneath split into 2 cols */
@media (min-width: 768px) and (max-width: 900px) {
  #devbytes-faq-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  /* Beach CTA card: col 2, row 1 */
  #devbytes-faq-grid > div:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  /* Right column (warning + nexus diff): spans full width below */
  #devbytes-faq-grid > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  #devbytes-faq > div > div { padding: 1.75rem 1.25rem !important; }
}

/* lg + xl tablet (901–1180px): full 3-col */
@media (min-width: 901px) and (max-width: 1180px) {
  #devbytes-faq-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 1.25rem !important; }
  #devbytes-faq > div > div { padding: 2rem 1.25rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): 2-col, logo spans full width */
@media (min-width: 600px) and (max-width: 900px) {
  #devbytes-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1.5rem !important;
  }
  #devbytes-footer-grid > div:first-child { grid-column: 1 / -1 !important; }
  #site-footer > div[style*="z-index:3"] { padding: 5rem 1rem 2.5rem !important; }
}

/* lg + xl tablet (901–1180px): 3-col stays, tighten */
@media (min-width: 901px) and (max-width: 1180px) {
  #devbytes-footer-grid { gap: 2rem !important; }
  #site-footer > div[style*="z-index:3"] { padding: 6rem 1rem 2.5rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   12. SECTION VERTICAL SPACING — tablet comfort
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1180px) {
  #devbytes-process-section { padding: 1rem 0 2.5rem !important; }
  #devbytes-faq             { padding: 1.5rem 0 4rem !important; }
  #devbytes-testimonials    { padding: 2rem 0 3rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   13. PHONE (≤ 599px) — tighten / fix remaining issues
   ═══════════════════════════════════════════════════════════════ */

/* phone (≤599px, incl. the common 381–480 range): single-column stack */
@media (max-width: 599px) {
  #hero { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #devbytes-hero-flex { flex-direction: column !important; flex-wrap: wrap !important; gap: 1.25rem !important; align-items: stretch !important; }
  #devbytes-hero-flex h1 { font-size: 2rem !important; }
  #devbytes-hero-icons { display: flex !important; }
  #devbytes-hero-body  { display: block !important; }
  #devbytes-hero-flex aside { width: 100% !important; flex: none !important; max-width: 420px !important; margin: 0 auto !important; padding: 1.25rem !important; }
  #hero > div { padding: 1.75rem 1rem 1.75rem !important; }
  /* Pain: 2-col (all 5 cards, last one centered) */
  #devbytes-pain-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Selling: 2-col */
  #devbytes-selling-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Stats: 2-col */
  #devbytes-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; }
}

/* small phone (≤ 380px) */
@media (max-width: 380px) {
  #hero > div { padding: .875rem .75rem 1.25rem !important; }
  #devbytes-hero-flex h1 { font-size: 1.65rem !important; }
  #hero-form-title h2 { font-size: 1.05rem !important; }
  #hero-form-title { padding: 1rem !important; }
  #devbytes-pain-grid { grid-template-columns: 1fr !important; }
  #devbytes-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
  #devbytes-stats-grid > div > div:nth-child(2) { font-size: 2.4rem !important; }
  #site-header span img { height: 36px !important; }
  #header-cta { font-size: .78rem !important; padding: .4rem .875rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   13b. PHONE — global overflow guard + element fixes (≤599px)
        Prevents horizontal scroll / text clipping at ALL phone
        widths (covers 381–480 dead zone too).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* Never allow horizontal scroll on phones */
  html, body.devbytes-page { overflow-x: hidden !important; max-width: 100% !important; }

  /* Headline: fluid size + allow long words ("Timeshare") to wrap */
  #devbytes-hero-flex h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.15rem) !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
  #devbytes-hero-body { overflow-wrap: break-word !important; }

  /* Hero form: always full-width, never wider than viewport */
  #hero-form-title, #devbytes-hero-flex aside {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header: keep logo + CTA on one line without clipping */
  #site-header > div { gap: .5rem !important; padding-left: .9rem !important; padding-right: .9rem !important; }
  #header-cta {
    font-size: .8rem !important;
    padding: .5rem 1rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #site-header span img { height: 40px !important; }

  /* Alert bar: hide the secondary promo line, keep lead text + button */
  #site-alert-bar { font-size: .8rem !important; padding: .5rem 2rem .5rem .75rem !important; }
  #site-alert-bar .alert-extra { display: none !important; }
  #site-alert-bar .alert-cta { font-size: .72rem !important; padding: .2rem .65rem !important; }

  /* Safety: nothing inside sections may force the page wider than the screen */
  body.devbytes-page section,
  body.devbytes-page section > div { max-width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════
   14. PHONE LANDSCAPE (short: ≤ 500px tall)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #hero { height: auto !important; min-height: 0 !important; }
  #devbytes-hero-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  #devbytes-hero-flex h1 { font-size: 1.6rem !important; margin-bottom: .3rem !important; }
  #devbytes-hero-flex > div:first-child p,
  #devbytes-hero-icons { display: none !important; }
  #devbytes-hero-flex > div:first-child { flex: 1 1 0 !important; }
  #devbytes-hero-flex aside {
    flex: 0 0 255px !important;
    width: 255px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: .875rem !important;
  }
  #hero > div { padding: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   15. MOBILE STICKY BAR — visible only on phones
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  #devbytes-mobile-cta { display: none !important; }
}