/* ===== صاد ميم — shared full-bleed + responsive layer for all 7 comps =====
   The comps were built as a floating rounded "card" (.lp) centred on a grey
   backdrop, with huge px font-sizes hard-coded as INLINE styles on plain divs
   and no @media queries. This layer (loaded AFTER each design's <style>) strips
   the frame so each renders full-bleed, and adds tablet + mobile responsiveness.
   Font sizes are overridden by value because tag selectors (h1/h2) can't reach
   inline styles on <div>s. */

/* 1) Un-frame → real full-bleed website -------------------------------------- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  max-width: 100%;
  overflow-x: hidden;
}
body { display: block !important; }
.lp {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
img, svg, video, iframe, canvas { max-width: 100%; }
/* The comps never set border-box, so padding was ADDING to element widths and
   pushing sections wider than the screen (content then clipped off-centre).
   Both fixes below are the core of "fit the screen". */
*, *::before, *::after { box-sizing: border-box !important; min-width: 0; }

/* 2) Tablet ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  header { padding-inline: 32px !important; }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 3) Phone ------------------------------------------------------------------- */
@media (max-width: 680px) {
  header, section, footer, .lp { padding-left: 16px !important; padding-right: 16px !important; }
  header { flex-wrap: wrap !important; justify-content: center !important; gap: 12px 16px !important; text-align: center; }
  header nav, header ul { flex-wrap: wrap !important; justify-content: center !important; }

  /* collapse every multi-column layout to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:flex"] { flex-wrap: wrap !important; }

  /* scale down the hard-coded inline font-sizes (by value) so text fits */
  [style*="font-size:118px"], [style*="font-size:104px"], [style*="font-size:82px"],
  [style*="font-size:80px"],  [style*="font-size:76px"],  [style*="font-size:72px"],
  [style*="font-size:66px"] { font-size: 33px !important; line-height: 1.15 !important; }
  [style*="font-size:56px"], [style*="font-size:52px"], [style*="font-size:50px"],
  [style*="font-size:48px"], [style*="font-size:46px"] { font-size: 27px !important; line-height: 1.2 !important; }
  [style*="font-size:44px"], [style*="font-size:42px"], [style*="font-size:40px"] { font-size: 23px !important; line-height: 1.3 !important; }
  [style*="font-size:38px"], [style*="font-size:36px"], [style*="font-size:34px"],
  [style*="font-size:32px"], [style*="font-size:30px"] { font-size: 20px !important; line-height: 1.35 !important; }
  h1 { font-size: 33px !important; line-height: 1.15 !important; }
  h2 { font-size: 27px !important; }

  /* shrink big gaps that push content past the viewport edge */
  [style*="gap:72px"], [style*="gap:64px"], [style*="gap:56px"], [style*="gap:48px"], [style*="gap:40px"] { gap: 22px !important; }

  section { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* 4) Small phones ------------------------------------------------------------ */
@media (max-width: 400px) {
  header, section, footer, .lp { padding-left: 13px !important; padding-right: 13px !important; }
}