/* ==========================================================================
   LIVE PROOF WALKTHROUGH — see gads-clients/proof.js
   1. the two-level CTA inside the selected-client panel (both heroes)
   2. the popup: the Contact page's enquiry form (px-f) in a <dialog>
   ========================================================================== */

/* ---- 1 · the CTA -------------------------------------------------------
   The link keeps its own class (q7-story) and so its own look on each page;
   the supporting line sits tight on top of it, quieter and smaller. */
#q7 .pw-cta{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
#q7 .pw-sup{ margin:0; font-size:12.5px; line-height:1.3; font-weight:500; color:var(--ink-3, #5F6B7A); }
/* #q7#q7 + .pw-go: the Google Ads page sets .q7-story to inline-flex through
   `.k5 #q7.cc .q7-story`, which would split the words and the arrow apart */
#q7#q7 .pw-cta .q7-story.pw-go{ display:inline-block; min-height:0; padding:3px 0 4px; white-space:normal; text-align:left; }
/* the homepage's band forces every .q7-story to inline-flex / 44px with
   !important through an eight-id :has(#lane…) chain; the same chain plus the
   CTA's own classes is the only thing that outranks it. Same result as above. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .pw-cta .q7-story.pw-go{
  display:inline-block !important; min-height:0 !important;
}
#q7 .pw-cta .pw-end{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
@media (max-width:480px){
  #q7 .pw-sup{ font-size:12px; }
}

/* ---- 1b · the client's website, under the trade in the panel header ----
   Printed by gads-clients/rz.js only where proof.js is loaded. Plain text,
   not a link: the trade's size and grey, a heavier weight to stand apart. */
#q7 .mp-who .mp-site{
  display:block; width:fit-content; max-width:100%; margin-top:2px;
  font-size:14px; line-height:1.35; font-weight:600; color:#505C6C;
  text-decoration:none; overflow-wrap:break-word;
}

/* ---- 2 · the popup ------------------------------------------------------ */
html.pw-lock{ overflow:hidden; }
.pw-dlg{
  width:min(480px, calc(100vw - 32px)); max-height:calc(100dvh - 32px);
  padding:0; border:0; border-radius:16px; background:#fff; color:var(--ink, #0B1220);
  box-shadow:0 24px 64px rgba(11,18,32,.22); overflow:auto;
  font-family:var(--sans, inherit);
}
.pw-dlg::backdrop{ background:rgba(11,18,32,.46); }
.pw-dlg[open]{ animation:pw-in .22s ease-out; }
@keyframes pw-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pw-dlg[open]{ animation:none; } }
.pw-dlg *{ box-sizing:border-box; }

.pw-box{ position:relative; padding:26px 26px 24px; }
.pw-x{
  position:absolute; top:12px; right:12px; width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:10px; background:transparent; color:var(--ink-3, #5F6B7A); cursor:pointer;
}
.pw-x:hover{ background:#F1F4F9; }
.pw-x svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.pw-eye{ margin:0 44px 6px 0; font-size:12.5px; font-weight:600; color:var(--ink-3, #5F6B7A); }
.pw-t{ margin:0 44px 0 0; font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.025em; color:var(--ink, #0B1220); }
.pw-lede{ margin:8px 0 18px; font-size:14.5px; line-height:1.5; color:var(--ink-2, #3C4757); }

/* the Contact page's field component, as it is there (contact-us.html + site/edges.css) */
.pw-dlg .px-fs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pw-dlg .px-f{ display:block; margin:0; }
.pw-dlg .px-f-full{ grid-column:1/-1; }
.pw-dlg .px-f > span:first-child{ display:flex; align-items:baseline; gap:7px; font-size:12.4px; font-weight:700; color:var(--ink-2, #3C4757); }
.pw-dlg .px-f i{ font-style:normal; font-size:9.6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--g-red, #D93025); }
.pw-dlg .px-f i.px-opt{ color:var(--ink-4, #8A94A3); }
.pw-dlg .px-f input{
  margin-top:7px; width:100%; border:1px solid var(--eg-edge-control, #DCE3EE); border-radius:var(--eg-r-control, 10px);
  background:#F6F8FC; padding:12px 14px; font:inherit; font-size:15px; color:inherit;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pw-dlg .px-f input::placeholder{ color:var(--ink-4, #8A94A3); }
.pw-dlg .px-f input:hover{ border-color:var(--eg-edge-hover, #C5D1E3); }
.pw-dlg .px-f input:focus{ outline:0; background:#fff; border-color:var(--accent, #1A73E8); box-shadow:0 0 0 3px rgba(26,115,232,.13); }
.pw-dlg .px-f input.cf-bad{ border-color:#D93025; }
.pw-dlg .px-err{ display:none; margin:14px 0 0; padding:12px 14px; border-radius:10px; background:#FCE8E6; color:#A50E0E; font-size:13.4px; line-height:1.5; }
.pw-dlg .px-err.on{ display:block; }

.pw-send, .pw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 22px;
  border:1px solid transparent; border-radius:12px; font:inherit; font-size:14.8px; font-weight:680;
  text-decoration:none; cursor:pointer; transition:background .18s ease;
}
.pw-send{ margin-top:18px; width:100%; background:var(--g-blue, #1A73E8); color:#fff; }
.pw-send:hover, .pw-btn-p:hover{ background:#1663CE; }
.pw-send svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pw-send:focus-visible, .pw-btn:focus-visible, .pw-x:focus-visible{ outline:2px solid var(--accent, #1A73E8); outline-offset:3px; }

.pw-acts{ display:flex; flex-wrap:wrap; gap:10px; }
.pw-btn{ flex:1 1 140px; }
.pw-btn-p{ background:var(--g-blue, #1A73E8); color:#fff; }
.pw-btn-o{ background:#fff; color:var(--ink, #0B1220); border-color:#DCE3EE; }
.pw-btn-o:hover{ background:#F6F8FC; }
.pw-note{ margin:14px 0 0; font-size:12.8px; line-height:1.5; color:var(--ink-3, #5F6B7A); }

@media (max-width:480px){
  .pw-box{ padding:22px 18px 20px; }
  .pw-t{ font-size:20px; }
  .pw-dlg .px-fs{ grid-template-columns:minmax(0,1fr); gap:12px; }
}