/* Digital assets playbook popup.

   The panel reuses the playbook pieces that already live in treasurup.css -
   .pb-cover and its .pb-front stack, .pb-facts, .form-card - so the popup is
   the same object the campaign page shows, not a second design. Only the
   overlay, the dialog frame, the close button and the few size overrides the
   smaller box needs are new.

   Everything is prefixed .pbpop so turning the snippet off leaves nothing. */

.pbpop-back{position:fixed;inset:0;z-index:9000;background:rgba(29,31,32,.55);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.pbpop-back.is-on{opacity:1;pointer-events:auto}

.pbpop{position:fixed;z-index:9001;left:50%;top:50%;
  width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;
  transform:translate(-50%,calc(-50% + 12px));opacity:0;pointer-events:none;
  background:var(--paper);border-radius:14px;
  box-shadow:0 30px 80px rgba(29,31,32,.28),0 2px 8px rgba(29,31,32,.12);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pbpop.is-on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}

/* the grid pattern of the campaign hero, at a tenth of the contrast */
.pbpop::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;opacity:.5}

.pbpop-in{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;
  padding:34px 36px 36px}

.pbpop-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ink-62);transition:background .18s var(--ease),color .18s var(--ease)}
.pbpop-x:hover{background:rgba(29,31,32,.06);color:var(--ink)}
.pbpop-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.pbpop-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  padding:7px 14px;border-radius:999px;background:var(--deep);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pbpop-pill i{width:6px;height:6px;border-radius:50%;background:var(--t3)}

.pbpop-eyebrow{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t6)}
.pbpop-title{margin:0;font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;color:var(--ink)}
.pbpop-title .accent{color:var(--t6)}
.pbpop-lead{margin:14px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-76)}

/* grid children default to min-width:auto, and the form inside is wide enough to
   push the column past the dialog if it is allowed to */
.pbpop-main,.pbpop-side{min-width:0}

/* The 16 / 6 / 4 row. treasurup.css colours it for the dark playbook panel -
   the labels are --paper at 60%, which on this light card is nothing at all,
   and the numbers are --t3, far too pale. Restated here, with the separators
   the campaign stylesheet would otherwise have supplied. */
.pbpop .pb-facts{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;padding:0;list-style:none}
.pbpop .pb-facts li{display:flex;flex-direction:column;gap:5px;padding:0 26px}
.pbpop .pb-facts li:first-child{padding-left:0}
.pbpop .pb-facts li + li{border-left:1px solid var(--line)}
.pbpop .pb-facts b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--t6)}
.pbpop .pb-facts span{font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-62)}

/* the gate: the same dark card the campaign page uses */
.pbpop-gate{margin-top:24px;padding:22px 24px;border-radius:10px;background:var(--deep);color:#fff}
.pbpop-gate-h{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff}
.pbpop-gate-sub{margin:6px 0 16px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}

/* The gate's form. treasurup.css carries this block twice already, once for
   .pb and once for .tuupdate, keyed on .pb-formwrap - the popup deliberately
   does not use that class name, because the playbook-download snippet claims
   the first .pb-formwrap on the page and the two would fight. So it is a third
   copy, same values: label hidden, email and button on one row, white field,
   --t3 button. Without it the button falls back to Elementor's grey. */
/* stretch, not flex-start: tu2026-adjustments.css stretches every form row so a
   field and the button beside it stand the same height, and this stylesheet
   loads after it, so flex-start here would quietly undo that for the popup */
.pbpop .pbpop-wrap .elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;gap:10px;
  align-items:stretch;margin:0}
.pbpop .pbpop-wrap .elementor-field-group{padding:0;margin:0;width:auto}
.pbpop .pbpop-wrap .elementor-field-type-email{flex:1 1 210px}
.pbpop .pbpop-wrap .elementor-field-type-hidden{display:none}
.pbpop .pbpop-wrap .elementor-field-type-submit{flex:0 0 auto;width:auto}
.pbpop .pbpop-wrap .elementor-field-label{display:none}
.pbpop .pbpop-wrap .elementor-field-textual{background:#fff;border-color:rgba(255,255,255,.4);
  color:var(--ink);padding:13px 14px;font-size:15px}
.pbpop .pbpop-wrap .elementor-field-textual:focus{border-color:var(--t3);
  box-shadow:0 0 0 3px rgba(181,217,253,.3)}
.pbpop .pbpop-wrap .elementor-field-textual.elementor-error{border-color:#F0A08C}
.pbpop .pbpop-wrap .elementor-button{background:var(--t3);border-color:var(--t3);
  color:var(--deep)!important;padding:13px 22px;white-space:nowrap}
.pbpop .pbpop-wrap .elementor-button:hover{background:#fff;border-color:#fff;color:var(--deep)!important}
.pbpop .pbpop-wrap .elementor-message{width:100%;font-size:13px;margin:2px 0 0}
.pbpop .pbpop-wrap .elementor-message-danger,
.pbpop .pbpop-wrap .elementor-help-inline{color:#F3B7A8}
.pbpop .pbpop-wrap .elementor-message-success{display:none}

.pbpop-done{display:none;align-items:flex-start;gap:12px}
.pbpop-gate.is-done .pbpop-wrap{display:none}
.pbpop-gate.is-done .pbpop-done{display:flex}
.pbpop-done-ico{flex:none;width:26px;height:26px;border-radius:50%;background:var(--t3);
  display:grid;place-items:center}
.pbpop-done-ico svg{width:15px;height:15px;fill:none;stroke:var(--deep);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.pbpop-done-txt{font-size:14px;line-height:1.55;color:rgba(255,255,255,.86)}
.pbpop-done-txt b{color:#fff}
.pbpop-done-txt a{color:var(--t3);text-decoration:underline;text-underline-offset:2px}

.pbpop-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-62)}
.pbpop-note a{color:var(--t6);text-decoration:underline;text-underline-offset:2px}

/* the cover column */
.pbpop-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.pbpop-side .pb-cover{width:100%;max-width:230px}
.pbpop-side .pb-open{font-size:12.5px}

@media (max-width:860px){
  .pbpop-in{grid-template-columns:1fr;gap:0;padding:28px 22px 26px}
  /* the cover is decoration; on a phone the gate has to be the thing in view */
  .pbpop-side{display:none}
  .pbpop .pb-facts{margin-top:18px}
  .pbpop-gate{padding:18px 18px;margin-top:20px}
}

@media (max-width:600px){
  /* the button goes under the field rather than squeezing beside it */
  .pbpop .pbpop-wrap .elementor-field-type-submit{flex:1 1 100%}
  .pbpop .pbpop-wrap .elementor-button{width:100%;justify-content:center}
  .pbpop .pb-facts li{padding:0 16px}
}

@media (max-height:620px){
  .pbpop-side{display:none}
  .pbpop-in{grid-template-columns:1fr;padding:24px 24px 26px}
  .pbpop-lead{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pbpop-back,.pbpop{transition:none}
  .pbpop{transform:translate(-50%,-50%)}
}

/* the page behind must not scroll while the dialog is up */
body.pbpop-open{overflow:hidden}