/* Screenshot framing for the mirrored go.kayako.com pages.
   Injected by factory/mirror-go-kayako.mjs after the upstream stylesheet so these
   rules win at equal specificity. Not present on go.kayako.com.

   Composition follows the fin.ai grammar: a section is a left-aligned column of
   copy — headline, then a short stack of well-spaced paragraphs on a readable
   measure — with the product screenshot below it at the full width of the grid.
   The page surface itself stays plain; the only tinted surface is the stage
   directly behind each screenshot, which is what makes the product frame read as
   an object sitting on something rather than an image pasted onto the page.
   The hero is the deliberate exception: its compact Support health panel is
   framed directly against the page so the metrics stay legible at hero size. */

:root {
  /* Flat, not a gradient. The wash is a surface for the frame to sit on; a
     gradient here competes with the screenshot's own UI for attention. */
  --kay-stage-bg: #F2ECFB;
  --kay-stage-line: #E7DDF6;
  --kay-stage-radius: 24px;
  --kay-stage-pad: 44px;
  --kay-shot-radius: 12px;
  --kay-shot-shadow: 0 1px 3px rgba(22, 24, 29, .06), 0 24px 54px -14px rgba(22, 24, 29, .22);
  /* Comfortable measure for the section ledes: ~60 characters at 19px serif. */
  --kay-measure: 62ch;
}

/* ---- Section layout -------------------------------------------------------------- */
/* The two wide 16:9 app frames need the full grid width, so their sections stack:
   copy on its own measure, screenshot below. The two 3:2 cropped panels keep
   upstream's side-by-side row — they are small enough to read beside the copy, and
   the alternating rhythm is what stops four identical stacks in a row. */
.problem__grid,
.deploy3__grid {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 60px;
}

.problem__copy,
.deploy3__copy {
  max-width: var(--kay-measure);
}

/* Upstream floats the queue-economics panel to the left of its copy; the strategy
   panel sits right. Both go right so the two rows read the same way. */
.lead-magnet__visual {
  order: 0;
}

/* The mirror splits the "Expert-led Deployment" block out of the green
   `.platform-section` into its own white `.section` (see DEPLOY_SPLIT in
   factory/mirror-go-kayako.mjs). Both blocks are now the last child of their section,
   so their trailing margins would stack on top of the section's own 88px padding. */
.platform-grid,
.deploy-section .deploy3 {
  margin-bottom: 0;
}

/* ---- Text spacing --------------------------------------------------------------- */
/* Headline to lede, and paragraph to paragraph, both open up: at 19px/165% an 18px
   gap is barely wider than the line gap, so the paragraphs read as one slab. */
.problem__copy .section__title,
.strategy__copy .section__title,
.lead-magnet__copy .section__title,
.deploy3__title {
  margin-bottom: 24px;
}

.problem__copy p,
.strategy__copy p,
.lead-magnet__copy p {
  margin-bottom: 22px;
}

.problem__copy p:last-child,
.strategy__copy p:last-child,
.lead-magnet__copy p:last-child {
  margin-bottom: 0;
}

.lead-magnet__list {
  margin-top: 24px;
}

.lead-magnet__list li {
  margin-bottom: 14px;
}

/* ---- The stage behind the screenshot -------------------------------------------- */
.kay-shot {
  margin: 0;
  background: var(--kay-stage-bg);
  border: 1px solid var(--kay-stage-line);
  border-radius: var(--kay-stage-radius);
  padding: var(--kay-stage-pad);
}

.kay-shot img {
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  mix-blend-mode: normal;
  background: var(--color-bg-card);
  border: 1px solid rgba(22, 24, 29, .10);
  border-radius: var(--kay-shot-radius);
  box-shadow: var(--kay-shot-shadow);
}

/* The 3:2 panels sit in a ~460px column beside their copy, so the stage tightens: at
   the full 44px the wash would eat more of the column than the frame it frames. */
.strategy__visual.kay-shot,
.lead-magnet__visual.kay-shot {
  padding: 22px;
  border-radius: 20px;
}

@media (max-width: 880px) {
  :root {
    --kay-stage-pad: 24px;
    --kay-stage-radius: 18px;
  }

  .problem__grid,
  .deploy3__grid,
  .strategy__grid,
  .lead-magnet__grid {
    gap: 40px;
  }
}

@media (max-width: 720px) {
  :root {
    --kay-stage-pad: 16px;
    --kay-stage-radius: 14px;
    --kay-shot-radius: 8px;
  }

  /* The two-class selector above outranks the var, so it needs restating here. */
  .strategy__visual.kay-shot,
  .lead-magnet__visual.kay-shot {
    padding: 16px;
    border-radius: 14px;
  }
}

/* Homepage hero. The hero panel is framed against the page, not staged: at hero size
   a tinted surround would push the metrics smaller than they can be read. The
   two-class selectors outweigh the .kay-shot rules above at every width. */
.hero__visual.kay-shot {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.hero__visual.kay-shot img {
  border-radius: 14px;
}