/*
  Reacher landing page: responsive layer
  --------------------------------------
  site/index.html is a desktop-only page whose styling lives in inline
  style="" attributes. This file makes it work on phones and tablets
  without touching the HTML.

  How the selectors work
  - The page has no classes, so every rule targets an inline-style
    fingerprint with an attribute selector, e.g.
    div[style*="grid-template-columns: 256px"] is the hero dashboard.
    Every hook was checked against the HTML and is unique to the
    element(s) it is meant for.
  - !important is required on nearly every declaration to beat the
    inline styles.

  Structure
  1. @media (max-width: 900px)  tablet and below: kill the 1280px
     minimum width, 20px side gutters, stack every multi-column grid
     and side-by-side flex row, scale headlines, reflow mockups.
  2. @media (max-width: 600px)  phones: one column everywhere,
     full-width CTA buttons, compact top bar, full-screen modal with
     stacked buttons, static hero "Demo booked" card.

  Nothing here hides copy: there is no display:none in this file. The
  hard <br> breaks inside the h2 headlines are left alone (hiding a <br>
  with CSS fuses the words around it because the HTML has no space
  there), so a few headlines wrap unevenly on phones.
*/

/* ============================================================
   1. TABLET AND BELOW
   ============================================================ */
@media (max-width: 900px) {

  /* ---- page frame ---------------------------------------- */
  body > div[style*="min-width: 1280px"] {
    min-width: 0 !important;
    overflow-x: hidden;
  }
  body {
    font-size: 17px;
    overflow-wrap: break-word;
  }
  img, svg { max-width: 100%; }

  /* Section wrappers: 20px gutters, tighter vertical rhythm,
     and clip anything that tries to poke out sideways. */
  div[style*="padding: 96px 48px"],
  div[style*="padding: 120px 48px"],
  div[style*="padding: 56px 48px"],
  div[style*="padding: 0 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: clip;
  }
  div[style*="padding: 96px 48px"]  { padding-top: 48px !important; }
  div[style*="padding: 120px 48px"] { padding-top: 72px !important; }
  div[style*="padding: 56px 48px 0"] { padding-top: 40px !important; }
  div[style*="margin-top: 120px"]    { margin-top: 72px !important; }
  div[style*="padding: 56px 48px;"]  { padding-top: 40px !important; padding-bottom: 40px !important; }
  #waitlist { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* ---- typography ---------------------------------------- */
  h1[style*="font-size: 58px"] { font-size: 34px !important; line-height: 1.12 !important; }
  h2[style*="font-size: 40px"] { font-size: 30px !important; line-height: 1.18 !important; }
  h2[style*="font-size: 32px"] { font-size: 26px !important; }
  h3[style*="font-size: 28px"] { font-size: 24px !important; }
  h3[style*="font-size: 26px"] { font-size: 23px !important; }
  h3[style*="font-size: 22px"] { font-size: 20px !important; }
  div[style*="font-size: 48px"] { font-size: 36px !important; }
  p[style*="font-size: 24px"]   { font-size: 20px !important; }
  p[style*="font-size: 22px"]   { font-size: 19px !important; }
  label[style*="font-size: 22px"] { font-size: 19px !important; }

  /* Every CTA is a comfortable tap target. */
  button[onclick] { min-height: 44px; }

  /* ---- grids and rows that stack --------------------------- */
  /* Hero dashboard: thread list | thread | prospect panel */
  div[style*="grid-template-columns: 256px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: 256px"] > div[style*="border-right"] {
    border-right: 0 !important;
    border-bottom: 1px solid #E3E1DC;
  }
  /* Hero scene padding around the dashboard */
  div[style*="padding: 56px 56px 84px"] {
    padding: 20px 20px 84px !important;
  }
  div[style*="width: 312px"] { right: 20px !important; }

  /* Dashboard top bars: let the nav wrap instead of overflowing */
  div[style*="height: 52px; padding: 0 20px"] {
    height: auto !important;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 16px !important;
  }
  div[style*="height: 52px; padding: 0 20px"] > div[style*="gap: 28px"] {
    flex-wrap: wrap;
    gap: 6px 16px !important;
  }
  /* Thread header: keep "Goal: Demo" on one line */
  div[style*="padding: 14px 24px; border-bottom"] > span {
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 12px;
  }

  /* Four steps: 2 columns on tablet */
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Six feature cards: 2 columns on tablet */
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 40px 24px !important;
  }
  /* Who it's for / not for, Old way vs Reacher */
  div[style*="grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px"],
  div[style*="grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  /* Follow-up scenarios: text then mockup, four times */
  div[style*="grid-template-columns: minmax(0, 1fr) 480px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  div[style*="grid-template-columns: minmax(0, 1fr) 480px"] > div:nth-child(2n+3) {
    margin-top: 32px;
  }
  /* Seven-step process: steps then the two mockups */
  div[style*="grid-template-columns: minmax(0, 1fr) 420px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }
  div[style*="grid-template-columns: minmax(0, 1fr) 420px"] > div[style*="max-width: 620px"] {
    max-width: none !important;
  }
  /* Campaign map rows: label above the email */
  div[style*="grid-template-columns: 250px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  div[style*="border-radius: 12px; padding: 48px"] { padding: 16px !important; }
  div[style*="padding: 8px 28px 28px"] { padding: 4px 16px 16px !important; }

  /* Mid-page CTA bands: text above the button */
  div[style*="max-width: 1120px"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* Cards with generous desktop padding */
  div[style*="padding: 36px"] { padding: 24px !important; }
  div[style*="padding: 40px; display: flex"] { padding: 24px !important; }

  /* ---- mockups ------------------------------------------- */
  /* Anything with a shadow is a mockup card: never wider than its
     column, and long strings (emails, URLs) may break. */
  div[style*="box-shadow"] {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* "Previous email" summary lines in the follow-up scenarios were
     ellipsised for a 480px column; let them wrap instead. */
  div[style*="opacity: 0.7"] > span[style*="nowrap"] {
    white-space: normal !important;
  }
  div[style*="opacity: 0.7"] { align-items: flex-start; }
  /* ...and keep the "Day 4" tag beside the status pill on one line */
  div[style*="opacity: 0.7"] + div > div:first-child {
    align-items: flex-start !important;
  }
  div[style*="opacity: 0.7"] + div > div:first-child > span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 10px;
  }
  table { display: block; max-width: 100%; overflow-x: auto; }

  /* ---- modal --------------------------------------------- */
  #modal > div { padding: 24px !important; }
  #modal > div > div { padding: 36px 28px 32px !important; }
}

/* ============================================================
   2. PHONES
   ============================================================ */
@media (max-width: 600px) {

  /* ---- top bar and footer -------------------------------- */
  div[style*="height: 76px"] {
    height: 64px !important;
  }
  div[style*="height: 76px"] > div[style*="font-size: 24px"] { font-size: 22px !important; }
  div[style*="height: 76px"] > button {
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }
  div[style*="height: 80px"] { height: 64px !important; }

  /* ---- typography ---------------------------------------- */
  h1[style*="font-size: 58px"] { font-size: 32px !important; }
  h2[style*="font-size: 40px"] { font-size: 28px !important; }
  div[style*="font-size: 48px"] { font-size: 32px !important; }

  /* ---- buttons ------------------------------------------- */
  button[onclick="openModal()"] {
    width: 100%;
    align-self: stretch !important;
  }
  div[style*="height: 76px"] > button[onclick="openModal()"] {
    width: auto;
    align-self: center !important;
  }
  /* Hero: button above its helper line */
  div[style*="display: flex; align-items: center; gap: 20px"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
  }
  /* CTA bands stretch the button too */
  div[style*="max-width: 1120px"][style*="justify-content: space-between"] {
    align-items: stretch !important;
  }

  /* ---- one column everywhere ----------------------------- */
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: repeat(3"] { gap: 36px !important; }
  div[style*="grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px"] { gap: 8px !important; }

  /* Campaign map: overview page + registration, webinar offer */
  div[style*="grid-template-columns: minmax(0, 1fr) 220px"],
  div[style*="grid-template-columns: 200px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: minmax(0, 1fr) 220px"] > div[style*="border-right"] {
    border-right: 0 !important;
    border-bottom: 1px solid #E3E1DC;
  }
  /* Feature card 6: goal list beside the calendar picks */
  div[style*="grid-template-columns: 140px"] {
    grid-template-columns: 130px minmax(0, 1fr) !important;
  }

  /* ---- hero scene ---------------------------------------- */
  div[style*="padding: 56px 56px 84px"] {
    padding: 12px 12px 12px !important;
  }
  /* The floating "Demo booked" card sits under the dashboard
     instead of over its corner. */
  div[style*="width: 312px"] {
    position: static !important;
    width: 100% !important;
    margin-top: 12px;
  }
  div[style*="height: 52px; padding: 0 20px"] { padding: 10px 14px !important; }
  div[style*="grid-template-columns: 256px"] > div > div[style*="padding: 14px 24px"],
  div[style*="grid-template-columns: 256px"] > div > div[style*="padding: 4px 24px 16px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Sections that keep a little more room */
  div[style*="padding: 120px 48px"] { padding-top: 64px !important; }
  #waitlist { padding-top: 64px !important; padding-bottom: 64px !important; }
  div[style*="border-radius: 12px; padding: 48px"] { padding: 12px !important; }
  div[style*="padding: 8px 28px 28px"] { padding: 4px 12px 12px !important; }
  /* Sample prospects: the URL drops under the description */
  div[style*="grid-template-columns: minmax(0, 1fr) 420px"] div[style*="align-items: center; gap: 12px; padding: 10px 14px"] {
    flex-wrap: wrap;
    gap: 4px 12px !important;
  }
  /* Start row: "Buying power passed" drops under the prospect name */
  div[style*="grid-template-columns: 250px"] > div[style*="align-items: center; gap: 16px"] {
    flex-wrap: wrap;
    gap: 8px 16px !important;
  }
  div[style*="border-radius: 10px; padding: 24px; position: relative"] { padding: 16px !important; }
  div[style*="margin: 0 0 0 28px"] { margin-left: 16px !important; }

  /* ---- modal: full screen -------------------------------- */
  #modal > div {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #modal > div > div {
    max-width: none !important;
    height: 100%;
    border-radius: 0 !important;
    padding: 24px 16px 24px !important;
    gap: 22px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #modal > div > div > button[aria-label="Close"] {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }
  #modal div[style*="padding-right: 32px"] { padding-right: 40px !important; }
  /* Stacked buttons: primary on top, Back underneath */
  #modal div[style*="padding-top: 4px"] {
    flex-direction: column-reverse;
    align-items: stretch !important;
    gap: 0 !important;
  }
  #modal div[style*="padding-top: 4px"] > div { width: 100%; }
  #modal div[style*="padding-top: 4px"] button {
    width: 100%;
    height: 52px !important;
    margin-top: 12px;
  }
  #modal input, #modal textarea { font-size: 16px !important; }
}

/* Headline line breaks: the design's <h2> breaks are for the 1440px layout. On phones the headline
   wraps on its own (site/index.html has a space before each <br> in <h2>, so words stay separate). */
@media (max-width: 900px) {
  h2 br { display: none !important; }
}