/* Reflct.me Mobile Styles */

/* Hamburger - fixed overlay button, always outside x-dc */
#r-ham-btn {
  display: none;
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 9999;
  background: rgba(12,12,18,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  backdrop-filter: blur(8px);
}
#r-ham-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #FBF7F1;
  border-radius: 2px;
}
#r-mob-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #0C0C12;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
#r-mob-nav.open { display: flex; }
#r-mob-nav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(237,231,222,0.8);
  text-decoration: none;
}
#r-mob-nav .rcta {
  margin-top: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  background: linear-gradient(90deg,#2FD9B4,#4C8DF6 50%,#A855F7);
  color: #0C0C12 !important;
  font-weight: 700;
}
#r-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #FBF7F1;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 8px;
}

/* ------------------------------------------------------------------
   Responsive layout (<= 768px)

   IMPORTANT — how the x-dc runtime serializes inline styles:
   support.js converts every `style="..."` string to an object and hands
   it to React, which writes it through the CSSOM. The browser then
   re-serializes the attribute in canonical form:

     source HTML:  style="grid-template-columns:minmax(0,1fr) auto; padding:0 72px"
     rendered DOM: style="grid-template-columns: minmax(0px, 1fr) auto; padding: 0px 72px"

   So attribute selectors MUST use the rendered form: a space after every
   colon, `0px` instead of `0`, and a space after commas inside functions.
   Selectors written against the source form never match.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  #r-ham-btn { display: flex !important; }

  /* Header: nav hidden, hamburger (above) takes over */
  header { padding: 18px 20px 0 !important; gap: 16px !important; }
  header nav { display: none !important; }

  /* Typography */
  h1 { font-size: 38px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; line-height: 1.15 !important; }
  /* Small mono section labels on the privacy page are h2s; keep them small */
  h2[style*="font-size: 12px"] { font-size: 12px !important; line-height: 1.4 !important; }
  p[style*="font-size: 19px"],
  p[style*="font-size: 18px"] { font-size: 17px !important; }
  /* Big display copy in the CTA block */
  div[style*="font-size: 64px"],
  div[style*="font-size: 58px"] { font-size: 34px !important; line-height: 1.1 !important; }
  /* Stat numbers (corporate data cards) */
  div[style*="font-size: 78px"] { font-size: 56px !important; }
  div[style*="font-size: 78px"] > span[style*="font-size: 42px"] { font-size: 30px !important; }
  /* Pull quote */
  blockquote { margin-top: 28px !important; padding: 28px 22px !important; }
  blockquote > p[style*="font-size: 40px"] { font-size: 26px !important; }
  /* Corporate/social "How it works" heading row */
  div[style*="align-items: baseline"] { gap: 10px !important; }

  /* Section padding: 20px horizontal, tighter vertical rhythm */
  section { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding: 0px 72px 130px"],
  section[style*="padding: 0px 72px 140px"] { padding-bottom: 64px !important; }
  section[style*="padding: 0px 72px 150px"] { padding-bottom: 72px !important; }
  section[style*="padding: 0px 72px 120px"] { padding-bottom: 64px !important; }

  /* Every inline CSS grid collapses to a single column.
     (Contact/privacy auto-fit grids are already 1 column at this width.) */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Hero (first section on every page) */
  section:nth-of-type(1) { padding-top: 40px !important; padding-bottom: 48px !important; gap: 0 !important; }
  section:nth-of-type(1) h1 { margin-top: 24px !important; }
  /* Hero CTA row: button + caption stack vertically */
  div[style*="flex-wrap: wrap; margin-top: 44px"],
  div[style*="flex-wrap: wrap; margin-top: 42px"] { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; margin-top: 32px !important; }
  a[style*="padding: 17px 32px"] { width: 100% !important; justify-content: center !important; padding: 16px 24px !important; text-align: center !important; }

  /* Home: two feature cards */
  section[style*="grid-template-columns: 1fr 1fr"] { gap: 16px !important; }
  article { padding: 24px 20px !important; }
  article > div[style*="justify-content: space-between"] { flex-wrap: wrap !important; }

  /* Corporate: 3 data cards / 4 steps; social: 4 steps */
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"] { gap: 14px !important; }
  div[style*="grid-template-columns: repeat(3"] > div { padding: 28px 22px !important; }
  div[style*="grid-template-columns: repeat(4"] > article { padding: 24px 20px !important; gap: 16px !important; }
  div[style*="grid-template-columns: repeat(4"] > article > span[style*="aspect-ratio"] { max-width: 240px !important; }

  /* Social: "Give your guests" feature box — image first, text below */
  div[style*="grid-template-columns: minmax(0px, 0.92fr) minmax(0px, 1.08fr)"] { gap: 24px !important; padding: 20px 20px 28px !important; border-radius: 20px !important; }

  /* FAQ: heading column above accordion */
  section[style*="grid-template-columns: minmax(0px, 0.42fr)"] { gap: 24px !important; }
  button[style*="padding: 24px 28px"] { padding: 18px 18px !important; font-size: 16px !important; gap: 14px !important; }
  p[style*="padding: 0px 28px 26px"] { padding: 0 18px 20px !important; }

  /* CTA block (#get-started): stack text and button */
  #get-started > div { padding: 44px 22px !important; border-radius: 20px !important; }
  #get-started > div > div[style*="grid-template-columns"] { gap: 28px !important; align-items: start !important; }
  #get-started > div > div > div[style*="flex-direction: column"] { align-items: stretch !important; padding-bottom: 0 !important; }
  a[style*="padding: 18px 34px"] { width: 100% !important; justify-content: center !important; white-space: normal !important; text-align: center !important; padding: 16px 24px !important; }

  /* Contact form card / privacy cookies card */
  div[style*="padding: 44px 40px"] { padding: 28px 20px !important; border-radius: 20px !important; }
  button[type="submit"] { width: 100% !important; justify-content: center !important; }

  /* Footer stacks vertically */
  footer { padding: 28px 20px 36px !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  footer > div { flex-wrap: wrap !important; }
}