/* Case-study hero (visual refresh V6: option C + strip metadata, from
   https://claude.ai/artifact/RjYUw2CJZTgHutnMGETbAY). The cover PNGs are untouched; this only
   changes how big the cover renders and how the title, TL;DR and metadata sit under it.
   Linked from every page's <head> (scripts/apply-case-hero.py) because Framer navigates
   client-side; every rule is scoped to one case study's page class. Each numbered block can be
   deleted on its own.
   Page classes: godaddy V3esn · lenovo 3pWYv · encore n0UUw · linkedin H1yvJ · physiovaping xWtL7 ·
   photos wrLkW · email-activation bNn11 · libra nrWUd · breadcrumbs 3a8ER · extra QrRzv */

/* 1. Fit to fold: the cover keeps its full width on tall windows, and on short ones shrinks in
   proportion (never cropped) so the TL;DR bubble clears the fold. 420px is what sits under the
   cover: nav, title block, a three-line TL;DR and a little air. 693px is the cover at 220px tall. */
@media (min-width: 810px) {
  .framer-V3esn .framer-1df6rj,
  .framer-3pWYv .framer-i35vrv,
  .framer-n0UUw .framer-18cvhk0,
  .framer-H1yvJ .framer-1uoi21s,
  .framer-xWtL7 .framer-zc4ddt,
  .framer-wrLkW .framer-w5s3as,
  .framer-bNn11 .framer-99wzgu,
  .framer-nrWUd .framer-bwdlnp,
  .framer-3a8ER .framer-1m6foye,
  .framer-QrRzv .framer-15n1qxa {
    width: min(100%, max(693px, calc((100svh - 420px) * 3.15))) !important;
    height: auto !important;
    align-self: center !important;
    flex: none !important;
  }
}

/* 2. Tags become one mono line above the title, instead of two pills below it. The "·" ends each
   tag that another tag follows, so a line that wraps never starts with one. Rules reach only the
   pills ([data-border]): site-fixes.js adds a "Jump to final design" link to this row (case-body.css). */
.framer-V3esn .framer-1f8shwn,
.framer-3pWYv .framer-m0r4e8,
.framer-n0UUw .framer-geprkn,
.framer-H1yvJ .framer-14tl6ko,
.framer-xWtL7 .framer-1grzj1m,
.framer-wrLkW .framer-imeuxr,
.framer-bNn11 .framer-c6qu48,
.framer-nrWUd .framer-ahpqn7,
.framer-3a8ER .framer-wgdq9v,
.framer-QrRzv .framer-13robl5 {
  order: -1;
  align-self: flex-start !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 0 0.5em !important;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
}
/* #main outranks Framer's own pill rules (white fill, centered content with a 10px gap). */
#main :is(
  .framer-V3esn .framer-1f8shwn, .framer-3pWYv .framer-m0r4e8, .framer-n0UUw .framer-geprkn,
  .framer-H1yvJ .framer-14tl6ko, .framer-xWtL7 .framer-1grzj1m, .framer-wrLkW .framer-imeuxr,
  .framer-bNn11 .framer-c6qu48, .framer-nrWUd .framer-ahpqn7, .framer-3a8ER .framer-wgdq9v,
  .framer-QrRzv .framer-13robl5
) > [data-border="true"] {
  background: none !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
:is(
  .framer-V3esn .framer-1f8shwn, .framer-3pWYv .framer-m0r4e8, .framer-n0UUw .framer-geprkn,
  .framer-H1yvJ .framer-14tl6ko, .framer-xWtL7 .framer-1grzj1m, .framer-wrLkW .framer-imeuxr,
  .framer-bNn11 .framer-c6qu48, .framer-nrWUd .framer-ahpqn7, .framer-3a8ER .framer-wgdq9v,
  .framer-QrRzv .framer-13robl5
) > [data-border="true"]::after { display: none !important; }
:is(
  .framer-V3esn .framer-1f8shwn, .framer-3pWYv .framer-m0r4e8, .framer-n0UUw .framer-geprkn,
  .framer-H1yvJ .framer-14tl6ko, .framer-xWtL7 .framer-1grzj1m, .framer-wrLkW .framer-imeuxr,
  .framer-bNn11 .framer-c6qu48, .framer-nrWUd .framer-ahpqn7, .framer-3a8ER .framer-wgdq9v,
  .framer-QrRzv .framer-13robl5
) > [data-border="true"]:has(~ [data-border="true"]) p::after {
  content: "·";
  margin-left: 0.5em;
}
:is(
  .framer-V3esn .framer-1f8shwn, .framer-3pWYv .framer-m0r4e8, .framer-n0UUw .framer-geprkn,
  .framer-H1yvJ .framer-14tl6ko, .framer-xWtL7 .framer-1grzj1m, .framer-wrLkW .framer-imeuxr,
  .framer-bNn11 .framer-c6qu48, .framer-nrWUd .framer-ahpqn7, .framer-3a8ER .framer-wgdq9v,
  .framer-QrRzv .framer-13robl5
) p {
  font-family: "Necto Mono", ui-monospace, monospace !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  color: #48605f !important;
}
/* The title block's gap was the space between the title and the pills. */
:has(> :is(
  .framer-V3esn .framer-1f8shwn, .framer-3pWYv .framer-m0r4e8, .framer-n0UUw .framer-geprkn,
  .framer-H1yvJ .framer-14tl6ko, .framer-xWtL7 .framer-1grzj1m, .framer-wrLkW .framer-imeuxr,
  .framer-bNn11 .framer-c6qu48, .framer-nrWUd .framer-ahpqn7, .framer-3a8ER .framer-wgdq9v,
  .framer-QrRzv .framer-13robl5
)) {
  gap: 8px !important;
  height: auto !important;
}

/* 3. A "TL;DR" label inside the bubble, in the same mono as the section labels.
   The bubble itself is styled in site-fixes.css. */
:is(
  .framer-3a8ER .framer-1mq2bw2, .framer-3a8ER .framer-1qr4bnj, .framer-3a8ER .framer-m0yja0,
  .framer-bNn11 .framer-idifov, .framer-n0UUw .framer-1lh9vdl, .framer-QrRzv .framer-ktrt6r,
  .framer-V3esn .framer-bf2oks, .framer-3pWYv .framer-1ezln7k, .framer-nrWUd .framer-vueigm,
  .framer-H1yvJ .framer-169sof9, .framer-wrLkW .framer-pa4684, .framer-xWtL7 .framer-3womze
)::before {
  content: "TL;DR";
  position: relative;
  z-index: 1;
  display: block;
  padding: 18px 28px 0;
  margin-bottom: -14px;
  font-family: "Necto Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #48605f;
}
@media (max-width: 809.98px) {
  :is(
    .framer-3a8ER .framer-1mq2bw2, .framer-3a8ER .framer-1qr4bnj, .framer-3a8ER .framer-m0yja0,
    .framer-bNn11 .framer-idifov, .framer-n0UUw .framer-1lh9vdl, .framer-QrRzv .framer-ktrt6r,
    .framer-V3esn .framer-bf2oks, .framer-3pWYv .framer-1ezln7k, .framer-nrWUd .framer-vueigm,
    .framer-H1yvJ .framer-169sof9, .framer-wrLkW .framer-pa4684, .framer-xWtL7 .framer-3womze
  )::before {
    padding: 14px 20px 0;
    margin-bottom: -12px;
    font-size: 11px;
  }
}

/* 4. The star divider under the TL;DR goes; the metadata strip's rules separate it instead. */
.framer-V3esn .framer-onl3uk,
.framer-3pWYv .framer-jpl1sq,
.framer-n0UUw .framer-t16fh7,
.framer-H1yvJ .framer-145x79g,
.framer-xWtL7 .framer-1lygfka,
.framer-wrLkW .framer-w05zwd,
.framer-bNn11 .framer-1obp3ml,
.framer-nrWUd .framer-18mxg6t,
.framer-3a8ER .framer-wo67e4,
.framer-QrRzv .framer-19ueo9x {
  display: none !important;
}

/* 5. Desktop spacing. The content column spaces every section 80–100px apart (50px on
   PhysioVaping); these pull the TL;DR to 24px under the title and the metadata to 36px under the
   TL;DR, without touching the column's gap. Spacing after the metadata is case-body.css's. */
@media (min-width: 1200px) {
  .framer-V3esn .framer-bf2oks,
  .framer-3pWYv .framer-1ezln7k,
  .framer-H1yvJ .framer-169sof9,
  .framer-wrLkW .framer-pa4684,
  .framer-bNn11 .framer-idifov,
  .framer-nrWUd .framer-vueigm { margin-top: -76px !important; }
  .framer-n0UUw .framer-fyjyyo, /* Encore!: the bubble and its Play on Steam button */
  .framer-3a8ER .framer-m0yja0,
  .framer-QrRzv .framer-ktrt6r { margin-top: -56px !important; }
  .framer-xWtL7 .framer-3womze { margin-top: -26px !important; }

  .framer-V3esn .framer-1s7laip,
  .framer-3pWYv .framer-1oeqwjv,
  .framer-H1yvJ .framer-tmsui6,
  .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm,
  .framer-nrWUd .framer-s9u1v { margin-top: -64px !important; }
  .framer-n0UUw .framer-113zxbu,
  .framer-xWtL7 .framer-xdzkz0,
  .framer-3a8ER .framer-obc3qv { margin-top: -44px !important; }
}
/* Tablet: most pages already sit 40–50px apart here; LinkedIn, Email Activation and Libra keep 100. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-V3esn .framer-bf2oks,
  .framer-3pWYv .framer-1ezln7k,
  .framer-wrLkW .framer-pa4684,
  .framer-n0UUw .framer-fyjyyo,
  .framer-QrRzv .framer-ktrt6r { margin-top: -16px !important; }
  .framer-xWtL7 .framer-3womze,
  .framer-3a8ER .framer-1mq2bw2,
  .framer-3a8ER .framer-1qr4bnj,
  .framer-3a8ER .framer-m0yja0 { margin-top: -26px !important; }
  .framer-H1yvJ .framer-169sof9,
  .framer-bNn11 .framer-idifov,
  .framer-nrWUd .framer-vueigm { margin-top: -76px !important; }
  .framer-H1yvJ .framer-tmsui6,
  .framer-bNn11 .framer-oekydm,
  .framer-nrWUd .framer-s9u1v { margin-top: -64px !important; }
}
/* Where the metadata opens a block of sections, case-body.css (via site-fixes.js) tops that
   block's margin up to --cs-section-gap, so measure from that instead of the native gap.
   This one applies at every width; on phones the other pages already sit 40px apart. */
html[data-cs-case-study] [data-cs-section] > :is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc, .framer-3a8ER .framer-obc3qv
) {
  margin-top: calc(36px - var(--cs-section-gap, 128px)) !important;
}

/* 6. Metadata strip: the tan five-column box becomes columns between two 1.5px ink rules (the
   site's one outline weight), with mono labels and each column's values joined by commas.
   (PlayStation Extra has no metadata box.)
   Every rule below starts from the same list of boxes, one per case study. */
.framer-V3esn .framer-1s7laip,
.framer-3pWYv .framer-1oeqwjv,
.framer-n0UUw .framer-113zxbu,
.framer-H1yvJ .framer-tmsui6,
.framer-xWtL7 .framer-xdzkz0,
.framer-wrLkW .framer-y7u5cc,
.framer-bNn11 .framer-oekydm,
.framer-nrWUd .framer-s9u1v,
.framer-3a8ER .framer-obc3qv {
  height: auto !important;
  padding: 14px 0 16px !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 14px !important;
  border-top: 1.5px solid #222;
  border-bottom: 1.5px solid #222;
}
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
)::after { display: none !important; }
/* The rows of columns: the main one, plus the phone-only copy of Tools and Skills. Their display
   is left alone so Framer's per-breakpoint hidden copies stay hidden; only the direction changes. */
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px 24px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
}
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * > * {
  flex: 1 1 130px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  gap: 4px !important;
}
@media (max-width: 809.98px) {
  :is(
    .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
    .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
    .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
  ) > * > * { flex: 0 0 calc(50% - 12px) !important; }
}
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * > * > :first-child p {
  font-family: "Necto Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #48605f !important;
}
/* Values: one run of text per column. Rich-text boxes are flex columns, so make them blocks
   (skipping Framer's per-breakpoint hidden copies), then set the paragraphs inline. */
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * > * > :not(:first-child) div:not([class*="hidden-"]):not(.ssr-variant),
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * > * > :not(:first-child):not([class*="hidden-"]):not(.ssr-variant) {
  display: block !important;
  height: auto !important;
}
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * > * > :not(:first-child) p {
  display: inline !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * > * > :not(:first-child) p + p::before { content: ", "; }
:is(
  .framer-V3esn .framer-1s7laip, .framer-3pWYv .framer-1oeqwjv, .framer-n0UUw .framer-113zxbu,
  .framer-H1yvJ .framer-tmsui6, .framer-xWtL7 .framer-xdzkz0, .framer-wrLkW .framer-y7u5cc,
  .framer-bNn11 .framer-oekydm, .framer-nrWUd .framer-s9u1v, .framer-3a8ER .framer-obc3qv
) > * > * > :not(:first-child) br { display: none; }
/* A paragraph can contain text on both sides of its only <br>. Hiding that
   paragraph would also hide GoDaddy's dates. The hidden breaks above already
   collapse truly blank lines without hiding their text. */

/* 7. Phones: on seven pages Framer's desktop "TOC Sticky Wrapper" stays in the stacked layout as an
   empty 100px box between the cover and the title. Collapse it when it's empty. */
@media (max-width: 809.98px) {
  html[data-cs-case-study] #main [data-framer-name="TOC Sticky Wrapper"]:not(:has(*)) {
    display: none !important;
  }
}