/* engagement.css — styling for the injected CTAs and the scroll popup.
   Inherits the host page's tokens where they exist, with its own fallbacks,
   so it drops onto any of the brand sites without a restyle. */

.fc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 34px 0;
  padding: 20px 22px;
  border: 1px solid var(--line, #e6e4ee);
  border-left: 3px solid var(--accent, #2dd4a7);
  border-radius: 12px;
  background: var(--card, var(--raised, #fff));
}

.fc-cta-btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--accent, #2dd4a7);
  color: var(--accent-fg, #06231a);
  font-weight: 650;
  font-size: 14.5px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.fc-cta-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.fc-cta-btn:focus-visible {
  outline: 2px solid var(--accent, #2dd4a7);
  outline-offset: 3px;
}

.fc-cta-sub {
  font-size: 12.5px;
  color: var(--dim, #5c5c6b);
}

/* ── popup ─────────────────────────────────────────────────────────────── */
.fc-pop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 5, 12, .55);
  opacity: 0;
  transition: opacity .2s ease;
}
.fc-pop.on { opacity: 1; }

/* The card takes BOTH its background and its text colour from the same token
 * set, or it renders one theme's text on the other theme's ground. It did:
 * drppc.ai defines --card as #0e0b1a (near-black) and does not define --ink at
 * all, so the background came out near-black and the text fell back to
 * #0b0912 — near-black on near-black. The heading and every spec value were
 * invisible, while the labels and lede stayed readable because they use --dim.
 * --fg is the companion of --card on every one of our sites; --ink was never
 * defined on any of them. */
.fc-pop-card {
  position: relative;
  max-width: 430px;
  width: 100%;
  padding: 30px 30px 26px;
  border-radius: 16px;
  background: var(--card, var(--raised, #fff));
  color: var(--fg, #0b0912);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
}
.fc-pop.on .fc-pop-card { transform: none; }

.fc-pop-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  text-wrap: balance;
}
.fc-pop-card p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dim, #5c5c6b);
}

.fc-pop-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dim, #5c5c6b);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
/* --soft is undefined on every brand, so this flashed a light-grey square
   on a dark card. Tint from the card's own foreground instead. */
.fc-pop-x:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.fc-pop-x:focus-visible {
  outline: 2px solid var(--accent, #2dd4a7);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fc-pop, .fc-pop-card, .fc-cta-btn { transition: none; }
  .fc-cta-btn:hover { transform: none; }
}

@media (max-width: 520px) {
  .fc-cta { flex-direction: column; align-items: flex-start; padding: 17px 18px; }
  .fc-pop-card { padding: 26px 22px 22px; }
}


/* ── popup ────────────────────────────────────────────────────────────────
   Rebuilt after review. What made the first version read as generated:
   coloured dot bullets, uniform spacing with no rhythm, a floating proof
   line, and a loud saturated button. This version uses a specification list
   with hairline rules, a real hierarchy of sizes, and a bordered credibility
   strip — the visual language of a product sheet rather than a promo card. */

.fc-pop-card{
  padding:0;                       /* sections own their own padding now */
  overflow:hidden;
  border:1px solid var(--line,#e6e4ee);
  box-shadow:0 20px 56px rgba(0,0,0,.30);
}
/* a single hairline of accent at the top edge, instead of colour everywhere */
/* a whisper of accent at the top edge — enough to belong, not enough to shout */
.fc-pop-card::before{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent,#2dd4a7) 70%,transparent),transparent 70%);
}

.fc-pop-eyebrow{
  margin:22px 30px 0;font-size:9.5px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--dim,#5c5c6b);
}
.fc-pop-card h3{
  margin:9px 30px 0;font-size:23px;line-height:1.18;letter-spacing:-.022em;
  text-wrap:balance;
}
.fc-pop-lede{
  margin:11px 30px 0!important;font-size:14px!important;line-height:1.62;
  color:var(--dim,#5c5c6b);
}

/* specification list — key on the left, value on the right, hairline between */
.fc-pop-spec{margin:20px 0 0;padding:0;border-top:1px solid var(--line,#e6e4ee)}
.fc-pop-spec>div{
  display:grid;grid-template-columns:96px 1fr;gap:14px;
  padding:10px 30px;border-bottom:1px solid var(--line,#e6e4ee);
}
.fc-pop-spec dt{
  margin:0;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim,#5c5c6b);padding-top:2px;
}
.fc-pop-spec dd{margin:0;font-size:13px;line-height:1.5}

.fc-pop-card .fc-cta-btn{
  display:block;margin:22px 30px 0;text-align:center;
  padding:13px 20px;font-size:14.5px;letter-spacing:-.005em;
  border-radius:9px;
}
.fc-pop-proof{
  margin:16px 0 0!important;padding:11px 30px;
  border-top:1px solid var(--line,#e6e4ee);
  background:color-mix(in srgb,var(--dim,#5c5c6b) 5%,transparent);
  font-size:11.5px!important;line-height:1.55;color:var(--dim,#5c5c6b);
  font-variant-numeric:tabular-nums;
}
.fc-pop-no{
  display:block;width:100%;margin:0;padding:11px 0 15px;
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:12px;color:var(--dim,#5c5c6b);
}
.fc-pop-no:hover{color:var(--fg,#0b0912);text-decoration:underline;text-underline-offset:3px}
.fc-pop-no:focus-visible{outline:2px solid var(--accent,#2dd4a7);outline-offset:-2px}

/* close: quiet until it is actually wanted */
.fc-pop-x{
  top:14px;right:14px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:7px;
  color:var(--dim,#5c5c6b);font-size:0;opacity:.65;transition:opacity .12s,background .12s;
}
.fc-pop-x:hover{opacity:1;background:color-mix(in srgb,var(--dim,#5c5c6b) 12%,transparent)}
.fc-pop-x:focus-visible{opacity:1;outline:1.5px solid var(--accent,#2dd4a7);outline-offset:1px}

@media (max-width:520px){
  .fc-pop-eyebrow,.fc-pop-card h3,.fc-pop-lede{margin-left:22px;margin-right:22px}
  .fc-pop-spec>div{padding-left:22px;padding-right:22px;grid-template-columns:84px 1fr;gap:11px}
  .fc-pop-card .fc-cta-btn{margin-left:22px;margin-right:22px}
  .fc-pop-proof{padding-left:22px;padding-right:22px}
  .fc-pop-card h3{font-size:20px}
}

/* The full-strength accent is fine inline, but at modal size on a dark ground it
   glares. Dial the fill back and let the border and weight carry it instead. */
.fc-pop-card .fc-cta-btn{
  background:color-mix(in srgb,var(--accent,#2dd4a7) 88%,#0b0912);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent,#2dd4a7) 40%,transparent) inset;
}
.fc-pop-card .fc-cta-btn:hover{
  background:var(--accent,#2dd4a7);filter:none;transform:none;
}
.fc-pop{background:rgba(6,5,12,.62);backdrop-filter:blur(2px)}