/* ═══════════════════════════════════════════════════════════════════════
   Talk to us — three ways to ask, wired into the real page.
   Nothing here ships; it is a prototype layer over a copy of the site so the
   three can be judged in situ rather than as mock frames. Switch with the
   control bottom-left, or ?form=inline|overlay|steps.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fields, shared ────────────────────────────────────────────────── */
.fx-f{display:grid;gap:13px}
.fx-f label{display:block;font:500 10.5px/1 var(--sc-font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sc-ink-soft);margin-bottom:7px}
.fx-f input,.fx-f textarea{width:100%;background:rgba(255,255,255,.04);color:var(--sc-ink);
  border:1px solid var(--line);border-radius:9px;padding:13px 14px;
  font:400 15px/1.4 var(--sc-font-text);outline:none}
.fx-f input:focus,.fx-f textarea:focus{border-color:var(--gold-soft)}
.fx-f textarea{resize:none;min-height:86px}
.fx-f ::placeholder{color:#6d6a68}
.fx-f .fx-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fx-fine{color:#7d7570;font-size:12px;margin:0}
.fx-done{display:none}
.fx-done.on{display:block}
.fx-reset{background:none;border:0;color:var(--sc-ink-soft);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;font:inherit;font-size:13px;padding:0}

/* ── the overlay, and the sheet it becomes on a phone ───────────────── */
.fx-modal{position:fixed;inset:0;z-index:900;display:none}
.fx-modal.on{display:block}
.fx-scrim{position:absolute;inset:0;background:rgba(6,6,7,.78);opacity:0;transition:opacity .3s var(--sc-ease-out)}
.fx-modal.in .fx-scrim{opacity:1}
.fx-panel{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(560px,calc(100vw - 40px));
  background:var(--sc-surface);border:1px solid var(--line);border-radius:16px;padding:32px 34px 28px;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.9);opacity:0;scale:.97;
  transition:opacity .3s var(--sc-ease-out),scale .3s var(--sc-ease-out);
  max-height:calc(100svh - 40px);overflow:auto}
.fx-modal.in .fx-panel{opacity:1;scale:1}
@media (max-width:860px){
  .fx-panel{left:0;top:auto;bottom:0;translate:none;width:100%;max-width:none;
    border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:12px 20px calc(24px + env(safe-area-inset-bottom));
    scale:1;transform:translateY(16px);transition:opacity .3s var(--sc-ease-out),transform .3s var(--sc-ease-out)}
  .fx-modal.in .fx-panel{transform:none}
  .fx-grab{width:38px;height:4px;border-radius:99px;background:#4a4a50;margin:0 auto 16px}
  .fx-f .fx-row{grid-template-columns:1fr}
}
.fx-grab{display:none}
@media (max-width:860px){.fx-grab{display:block}}
.fx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.fx-x{background:none;border:0;color:var(--sc-ink-soft);font-size:24px;line-height:1;cursor:pointer;padding:0 2px}
.fx-x:hover{color:var(--sc-ink)}

/* ── the two pills ─────────────────────────────────────────────────── */
.fx-seg{display:flex;gap:6px;margin:0 0 20px}
.fx-seg button{flex:1;font:500 10.5px/1 var(--sc-font-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--sc-ink-soft);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:11px 8px;cursor:pointer}
.fx-seg button.on{border-color:var(--sc-accent);color:var(--sc-accent);background:rgba(228,178,74,.07)}

/* the ink it always was, with only the thanks itself in gold */
.fx-thanks{font-family:var(--sc-font-display);font-weight:500;font-size:1.5rem;margin:0 0 6px;
  color:var(--sc-ink)}
.fx-thanks span{color:var(--sc-accent)}

/* the single call to action, given the weight of being the only one */
.fx-cta{font-size:15.5px;padding:17px 34px}
@media (max-width:860px){.fx-cta{font-size:14px;padding:16px 26px}}

.fx-intro{color:var(--sc-ink-soft);margin:0 0 18px;font-size:14px}

/* the demo trigger sits beside the enquiry one */
#talk .ctas{gap:10px;flex-wrap:wrap}

/* ── the demo ask under each product clip ──────────────────────────────
   Live Expert already has a control row under its frame, right-aligned for
   the sound button; the demo goes in at the other end of it. Call Scenarios
   has no such row, so one is made and pushed right, mirroring it. */
.fx-ctrl{display:flex;align-items:center;gap:14px;justify-content:space-between}
.fx-ctrl--right{justify-content:flex-end;margin-top:14px;min-height:42px}
/* .btn sets no background — every button on the page that uses it is an <a>,
   so the UA's ButtonFace grey never came up. This is a real <button>. */
.fx-demo{white-space:nowrap;background:transparent;cursor:pointer}
@media (max-width:860px){
  .fx-ctrl--right{padding:0 var(--sc-gutter)}
  .fx-demo{font-size:12.5px;padding:12px 18px}
}