/* Post-export fixes for the Framer build.
   Loaded after Framer's own styles on every page. Kept in one file so a re-export
   only needs this <link> re-added, not the individual patches re-found.

   Framer's hashed class names (.framer-xxxxxx) change on every re-export, so these
   rules lean on [data-framer-name] and structural position instead wherever possible.
   The two :nth-child rules are the exception and are called out below. */

/* ---------------------------------------------------------------------------
   1. Playground / "Receipts" is retired. Hide every link to it, at all widths.
   The wordmark beside it is absolutely centred, so removing this from the flow
   does not knock the nav off centre.
   --------------------------------------------------------------------------- */
a[href$="/playground"],
a[href="./playground"],
a[href="playground"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   2. Phone layout fixes (Framer's phone breakpoint is max-width: 809px).
   --------------------------------------------------------------------------- */
@media (max-width: 809px) {

  /* 2a. The hero headline and standfirst were laid out edge to edge - text ran
     into both screen bezels. Give the hero column a real gutter. */
  [data-framer-name="Hero Content"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 2b. "This is Michelle" is an SVG arc positioned for the desktop headline.
     On a phone the headline wraps to two lines and grows upward into it, so the
     arc printed straight through the words. Lift the arc clear. */
  [data-framer-name="Arc text"] {
    transform: translateY(-58px) !important;
  }

  /* 2c. The two upper collage photos overlapped the first line of the headline
     at phone widths (they clear it on desktop). Nudge them up.
     `translate` is used rather than `transform` on purpose: these elements carry
     a rotation matrix in `transform`, and the shorthand would wipe the rotation.
     Children 2 and 5 of the hero are the upper-left and upper-right photos;
     3 and 4 are the lower pair, which already sit clear. */
  section[data-framer-name="Hero"] > :nth-child(2),
  section[data-framer-name="Hero"] > :nth-child(5) {
    translate: 0 -38px !important;
  }
}

/* ---------------------------------------------------------------------------
   3. Case-study body grids: stack on narrow screens.

   The case-study rich text ships its own stylesheet, which already intends to
   stack these at <=860px:
       @media(max-width:860px){ .strip,.four,.chan,.chan.two,.nums{grid-template-columns:1fr} }
   ...but the .chan elements also carry an INLINE style="grid-template-columns:repeat(3,1fr)",
   and an inline declaration outranks any stylesheet rule. So the three-up card
   rows stayed three-up on a phone.

   Two visible symptoms, one cause: the cards were squeezed into ~110px columns
   AND, because the grid's min-content floor (375px) exceeded the viewport, the
   whole .wrap was pushed wider than the screen - which is why headings and body
   copy on those pages looked off-centre and clipped on the right.

   !important is what actually beats the inline style here.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .chan, .strip, .four, .nums,
  .pair, .two, .cols2, .smallpair {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   4. Phone-only layout, part two.
   --------------------------------------------------------------------------- */
@media (max-width: 809px) {

  /* 4a. Centre the opening frame. The hero is a fixed 333px composition pinned
     208px down the page, so on a tall phone it sat high with a large dead gap
     beneath it. Push it down by whatever it takes to centre the visible
     composition (which starts at the photos, ~136px, and ends at the CTA,
     ~513px - midpoint 324px) in the viewport. max() keeps it at 0 on short
     screens so it can never be pushed off the top.
     The vh line is a fallback for browsers without svh. */
  section[data-framer-name="Hero"] { margin-top: max(0px, calc(50vh - 324px)) !important; }
  section[data-framer-name="Hero"] { margin-top: max(0px, calc(50svh - 324px)) !important; }

  /* 4b. Testimonials were laid out as fixed 536px cards inside a 1048px ticker
     window, both wider than the screen, so every quote was cut off at both
     edges. Size the card, its wrapper, the track and the ticker window to the
     viewport so one testimonial reads full width with a comfortable margin. */
  [data-framer-name="Testimonial Card"],
  div:has(> [data-framer-name="Testimonial Card"]) {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
  li:has([data-framer-name="Testimonial Card"]),
  li:has([data-framer-name="Testimonial Card"]) > div,
  li:has([data-framer-name="Testimonial Card"]) > div > div {
    width: max-content !important;
  }
  section[data-framer-name="Sneak peak"] { overflow: hidden !important; }
  section[data-framer-name="Sneak peak"] > div,
  section[data-framer-name="Sneak peak"] > div > section,
  section[data-framer-name="Sneak peak"] ul:has([data-framer-name="Testimonial Card"]) {
    width: 100% !important;
  }
}