/* [ssr_listing_cta] — "Take the next step", design 1k: the charcoal closing band.
   Left: eyebrow, pitch, two paragraphs, five stars, one coral action beside a quiet phone
   button, the "Free · 20 minutes" note. Right: two staggered team portraits with name plates.
   Tablet (<=1023px) stacks the portraits under the copy; mobile (<=767px, the page-wide switch)
   tightens the gutters, stacks the buttons and scales the portrait pair to the viewport.

   Tokens are aliased locally with literal fallbacks, like every other section, so the band
   survives edits to the global token block. */

.ssr-cta {
  --cta-surface:    var(--surface-dark, #414042);
  --cta-ink:        var(--text-on-dark, #fff);
  --cta-muted:      var(--text-on-dark-muted, #b3b1b6);   /* charcoal-300: the paragraphs and the note */
  --cta-soft:       var(--charcoal-200, #d6d5d8);          /* the role line on the name plates */
  --cta-green:      var(--green-500, #d2e82e);             /* the one brand-green accent: the eyebrow */
  --cta-line:       var(--border-on-dark, rgba(255, 255, 255, .14));
  --cta-line-strong: var(--border-on-dark-strong, rgba(255, 255, 255, .24));
  --cta-coral:      var(--accent-cta, #ff5a5f);
  --cta-coral-hover: var(--accent-cta-hover, #ea3f45);
  --cta-coral-active: var(--accent-cta-active, #c92e34);
  --cta-star:       #f5b301;
  --cta-check:      var(--green-500, #d2e82e);  /* the ticks; the eyebrow is the only other green */
  --cta-scrim:      rgba(26, 26, 27, .88);                 /* charcoal-950 behind the name plate */
  --cta-display:    var(--font-display, Outfit, system-ui, sans-serif);
  --cta-body:       var(--font-body, 'Public Sans', system-ui, sans-serif);
  --cta-radius:     var(--radius-lg, 14px);
  --cta-pill:       var(--radius-pill, 999px);
  --cta-focus:      var(--state-focus-ring, #ff5a5f);
  --cta-max:        var(--wp--style--global--wide-size, 1240px); /* page width: Site Editor > Styles > Layout */

  /* Geometry of the portrait pair. The rail is 396 wide, each card 236, so they overlap by 76.
     The stagger is the vertical offset of the back card — it must clear the name plate's TEXT
     height, because the plate is anchored to the card's bottom and grows upward. One-line role:
     ~53px. Two-line role: ~69px. 76px clears both, so a longer role passed in as an attribute
     degrades to a tighter gap rather than hiding the name, which is the whole point of this
     layout. Measured at 1400px with the shipped one-line roles: 23px of clearance. */
  --cta-rail:    396px;
  --cta-card:    236px;
  --cta-stagger: 76px;
  --cta-gap:     52px;

  display: block;
  background: var(--cta-surface);
  padding: 52px 24px;
  font-family: var(--cta-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cta-ink);
}

.ssr-cta *, .ssr-cta *::before, .ssr-cta *::after { box-sizing: border-box; }

/* wpautop wraps runs of inline elements in <p>: the stars, the two buttons, the <img> inside
   each figure. Injected paragraphs carry no class and become transparent to layout; the
   section's own paragraphs (.ssr-cta__p) keep theirs, so no per-class restore is needed. */
.ssr-cta p:not([class]) { display: contents; margin: 0; padding: 0; }
.ssr-cta p:empty { display: none; }

.ssr-cta__inner { max-width: var(--cta-max); margin-inline: auto; }

.ssr-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cta-rail);
  gap: var(--cta-gap);
  align-items: center;
}
.ssr-cta__grid--solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- copy ---------- */

/* The canvas sets its copy in a 680px column; at the page width the column is 792, so the copy
   block is capped to keep the paragraph measure near the design's. */
.ssr-cta__copy { max-width: 720px; }

.ssr-cta__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cta-green);
}

.ssr-cta .ssr-cta__title {
  margin: 14px 0 0;
  font-family: var(--cta-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--cta-ink);
  text-wrap: pretty;
}

.ssr-cta .ssr-cta__p {
  display: block;
  margin: 16px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cta-muted);
  text-wrap: pretty;
}
.ssr-cta .ssr-cta__p + .ssr-cta__p { margin-top: 10px; }

/* What the call actually gives them. Brighter than the lead paragraph on purpose: the lead is
   framing, these three lines are the payload, so they sit one step up the contrast ladder
   (white headline -> charcoal-300 lead -> charcoal-200 bullets).

   `ul.ssr-cta__list` rather than a lone class: global styles 116474 prints after every mu-plugin
   stylesheet (see CLAUDE.md), so list resets are worth the extra type selector. */
.ssr-cta ul.ssr-cta__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ssr-cta li.ssr-cta__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cta-soft);
  text-wrap: pretty;
}
.ssr-cta .ssr-cta__check {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;  /* optical: the tick's ink sits low in its box against a 15px cap height */
  color: var(--cta-check);
}
.ssr-cta__itemtext { min-width: 0; }

.ssr-cta__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.ssr-cta__stars { display: flex; gap: 3px; color: var(--cta-star); }
.ssr-cta__star { display: block; width: 17px; height: 17px; flex: none; }
.ssr-cta__ratingtext { font-size: 13.5px; font-weight: 600; color: var(--cta-ink); }
.ssr-cta .ssr-cta__reviews { color: inherit; text-decoration: none; }
.ssr-cta .ssr-cta__reviews:hover { text-decoration: underline; text-underline-offset: 3px; }
.ssr-cta .ssr-cta__reviews:focus-visible { outline: 2px solid var(--cta-focus); outline-offset: 3px; }

/* Buttons: the design system's `lg` size (48px pill). One coral action; the phone button is the
   on-dark outline so the strategy call keeps its priority. */
.ssr-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.ssr-cta .ssr-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: var(--cta-pill);
  font-family: var(--cta-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms ease, color 200ms ease, transform 120ms ease;
}
.ssr-cta .ssr-cta__btn:focus-visible { outline: 2px solid var(--cta-focus); outline-offset: 3px; }
.ssr-cta .ssr-cta__btn--primary {
  background: var(--cta-coral);
  color: #fff;
  box-shadow: var(--shadow-cta, 0 8px 20px rgba(255, 90, 95, .35));
}
.ssr-cta .ssr-cta__btn--primary:hover,
.ssr-cta .ssr-cta__btn--primary:focus-visible { background: var(--cta-coral-hover); color: #fff; transform: translateY(-1px); }
.ssr-cta .ssr-cta__btn--primary:active { background: var(--cta-coral-active); transform: none; }
.ssr-cta .ssr-cta__btn--outline {
  background: transparent;
  color: var(--cta-ink);
  border-color: var(--cta-line-strong);
}
.ssr-cta .ssr-cta__btn--outline:hover,
.ssr-cta .ssr-cta__btn--outline:focus-visible { background: rgba(255, 255, 255, .08); color: var(--cta-ink); transform: translateY(-1px); }
.ssr-cta .ssr-cta__btn--outline:active { transform: none; }

.ssr-cta__note { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--cta-muted); }

/* Optional escape hatch (email=""), off by default: every lead is meant to go through the
   calendar. Kept quiet so it cannot compete with the one action. */
.ssr-cta__alt { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--cta-muted); }
.ssr-cta .ssr-cta__mail { color: var(--cta-soft); text-decoration: underline; text-underline-offset: 3px; }
.ssr-cta .ssr-cta__mail:hover { color: var(--cta-ink); }
.ssr-cta .ssr-cta__mail:focus-visible { outline: 2px solid var(--cta-focus); outline-offset: 3px; }

/* ---------- team portraits ----------
   A three-track grid instead of absolute positioning, so the block has a real height: the outer
   tracks are the parts of each card the other does not cover (rail − card), the middle track is
   the overlap (2·card − rail). The front card spans tracks 1–2, the back card 2–3 and drops by
   the stagger; the row is as tall as the back card plus its offset, and the mobile block can
   restate the three sizes in percentages. */
.ssr-cta__team {
  display: grid;
  grid-template-columns:
    calc(var(--cta-rail) - var(--cta-card))
    calc(2 * var(--cta-card) - var(--cta-rail))
    calc(var(--cta-rail) - var(--cta-card));
  align-items: start;
  width: var(--cta-rail);
  max-width: 100%;
}
.ssr-cta .ssr-cta__card {
  grid-row: 1;
  position: relative;
  margin: 0;
  padding: 0;
  aspect-ratio: 236 / 336;
  border-radius: var(--cta-radius);
  overflow: hidden;
  border: 1px solid var(--cta-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  background: var(--cta-scrim);
}
/* The higher card is the one in front — the canvas has it the other way round, which is what
   hid the tail of the back card's name plate under the front card's corner. */
.ssr-cta .ssr-cta__card--front { grid-column: 1 / 3; z-index: 2; }
.ssr-cta .ssr-cta__card--back  { grid-column: 2 / 4; z-index: 1; margin-top: var(--cta-stagger); }

.ssr-cta .ssr-cta__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.ssr-cta .ssr-cta__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 44px 16px 14px;
  background: linear-gradient(to top, var(--cta-scrim), rgba(26, 26, 27, 0));
}
.ssr-cta__name {
  font-family: var(--cta-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--cta-ink);
}
.ssr-cta__role { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--cta-soft); }

/* ---------- tablet: the copy needs the width more than the portraits do ---------- */

@media (max-width: 1023px) {
  .ssr-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ssr-cta__copy { max-width: none; }
}

/* ---------- mobile (767 is the page-wide switch) ---------- */

@media (max-width: 767px) {
  .ssr-cta { padding: 44px 16px; }
  .ssr-cta__grid { gap: 36px; }
  .ssr-cta .ssr-cta__title { font-size: 26px; }
  .ssr-cta ul.ssr-cta__list { margin-top: 20px; gap: 12px; }
  .ssr-cta li.ssr-cta__item { font-size: 14.5px; }
  .ssr-cta__actions { flex-direction: column; align-items: stretch; }
  .ssr-cta .ssr-cta__btn { width: 100%; white-space: normal; }

  /* The pair scales with the viewport: each card is 58% of the rail, so the overlap is 16%.
     Centred under the copy, capped so a wide phone in landscape does not blow the cards up. */
  .ssr-cta__team {
    --cta-rail: 100%;
    --cta-card: 58%;
    --cta-stagger: 72px;   /* the phone name plate is ~49px of text from the bottom edge, 64px when the role wraps (<=360px) */
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }
  .ssr-cta .ssr-cta__cap { padding: 36px 12px 12px; }
  .ssr-cta__name { font-size: 15px; }
  .ssr-cta__role { font-size: 11.5px; }
}