/* ============================================================================
   YOUR PREFERENCES, APPLIED — home page. After Zip's contract hero.

   Zip ships that hero as a Lottie: a JSON of vector keyframes (690x610, 30fps,
   10.4s) played by lottie-web. Its text layers give the storyline: a greeting,
   a request with an attached file, "Analyzing contract" over a document outline,
   a scan line and a highlighted line, "Assessing risks against playbooks", then
   the assistant's redlines as Option A / Option B with accept buttons.
   Rebuilt as HTML on the same 690x610 stage, so every word is editable text in
   Webflow rather than paths in a JSON. Motion is the PREFS block in motion.css.
   Resting state is the last frame: the two options on offer.
   ========================================================================== */

.zp-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:48px;align-items:center}
.zp-copy h2{margin:14px 0 16px}
.zp-copy .lead{max-width:40ch;margin:0}
.zp-col{min-width:0}
.zp{--s:.7;position:relative;max-width:100%;width:calc(690px * var(--s));height:calc(610px * var(--s));margin:0 auto}
.zp-stage{position:absolute;left:0;top:0;width:690px;height:610px;transform:scale(var(--s));transform-origin:0 0;
  border-radius:6px;overflow:hidden;contain:layout paint;font-family:var(--ui);color:var(--ink);
  /* a light wash: the Every department tint at the top, lifting to near-white at the foot */
  background:linear-gradient(180deg,#e4ecfb 0,#eaf0fc 40%,#f3f6fe 75%,#fafbff 100%);
  box-shadow:inset 0 0 0 1px var(--line)}   /* a hairline, so the pale top still reads as a frame on the grey band */

/* ---- the draft, beside the chat (kept clear of it: the doc ends at 248, the chat starts at 272) -- */
.zp-doc{position:absolute;left:32px;top:140px;width:216px;height:330px}
.zp-dh{position:absolute;left:0;font-size:17px;color:var(--navy)}
.zp-dh.zp-d1{top:0} .zp-dh.zp-d2{top:88px} .zp-dh.zp-d3{top:212px;color:var(--t4)}
.zp-l{position:absolute;left:2px;display:block;height:10px;border-radius:5px;background:rgba(74,104,210,.16)}
.zp-l.w1{width:214px} .zp-l.w2{width:196px} .zp-l.w3{width:172px} .zp-l.w4{width:150px} .zp-l.w5{width:118px}
.zp-doc .zp-l:nth-of-type(1){top:34px}  .zp-doc .zp-l:nth-of-type(2){top:52px}
.zp-doc .zp-l:nth-of-type(3){top:122px} .zp-doc .zp-l:nth-of-type(4){top:140px} .zp-doc .zp-l:nth-of-type(5){top:158px} .zp-doc .zp-l:nth-of-type(6){top:176px}
.zp-doc .zp-l:nth-of-type(7){top:246px} .zp-doc .zp-l:nth-of-type(8){top:264px} .zp-doc .zp-l:nth-of-type(9){top:282px} .zp-doc .zp-l:nth-of-type(10){top:300px}
/* the line the seat flags: a lifted, glowing copy of it */
.zp-hi{position:absolute;left:8px;top:132px;display:block;width:156px;height:26px;border-radius:6px;background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 18px rgba(41,70,182,.35)}
.zp-hi::after{content:"";position:absolute;left:12px;right:12px;top:9px;height:8px;border-radius:4px;background:#e8eef6}
.zp-scan{position:absolute;left:-8px;top:0;display:block;width:232px;height:60px;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.5) 50%,transparent)}

/* ---- the chat ------------------------------------------------------------ */
/* tall enough to hold the options, with the seat's name set underneath them */
.zp-card{position:absolute;left:272px;top:70px;width:386px;height:470px;border-radius:8px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.zp-b{display:block;padding:12px 16px;border-radius:8px;background:#fff;font-size:15px;line-height:1.4;color:var(--ink)}
.zp-p1>*,.zp-p2>*{position:absolute}
.zp-greet{left:56px;top:26px;width:280px}
.zp-me{right:22px;top:104px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.zp-ask{max-width:270px;background:var(--btn);color:#fff;border-radius:8px 8px 4px 8px}
.zp-file{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:6px;background:#fff;font-size:12.5px;font-weight:500;color:var(--navy)}
.zp-me small{font-size:11.5px;color:var(--mute)}
.zp-st{left:56px;top:262px;display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;color:var(--navy)}
.zp-spark{display:block;width:12px;height:12px;background:var(--navy);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
/* phase one rests hidden; the resting frame is the options */
.zp-greet,.zp-me,.zp-st,.zp-scan{opacity:0}
.zp-reply{left:56px;top:24px;width:300px}
.zp-opts{left:56px;top:106px;width:310px;padding:16px 18px;border-radius:8px;background:#fff}
.zp-opts b{display:block;margin-bottom:9px;font-size:14px;font-weight:600;color:var(--ink)}
.zp-oa,.zp-ob{display:block}
.zp-ob{margin-top:14px}
.zp-rw{display:flex;gap:5px;margin-top:5px}
.zp-rw i{display:block;height:11px;border-radius:3px}
/* redline convention: struck text red, inserted text green */
.zp-del{background:linear-gradient(180deg,transparent 45%,#e5484d 45%,#e5484d 58%,transparent 58%) 8px 0/calc(100% - 16px) 100% no-repeat,#fde4e4}
.zp-ins{background:#d9f1e2}
.zp-gr{background:#eef1f5}
.x16{width:16%} .x22{width:22%} .x30{width:30%} .x58{width:58%} .x62{width:62%} .x70{width:70%} .x72{width:72%} .x92{width:92%} .x100{width:100%}
.zp-acts{display:flex;gap:8px;margin-top:16px}
.zp-acc{position:relative;flex:1;padding:9px 10px 9px 32px;border-radius:6px;background:#f2f4f7;font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.zp-acc::before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:3px;
  background:#9aa7b8 url(../assets/icons/pt-check.svg) no-repeat center/12px 12px}
.zp-who{position:absolute;left:-14px;bottom:62px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.zp-av{display:block;width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky);
  box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 26px 8px rgba(74,104,210,.3)}
.zp-who small{position:absolute;left:96px;bottom:-44px;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--navy)}   /* navy, not the reference's white: it sits on the pale end of the gradient */

@media (max-width:991px){ .zp-grid{grid-template-columns:1fr;gap:32px} .zp{--s:1} }
@media (max-width:767px){ .zp{--s:.62} }
@media (max-width:479px){ .zp{--s:.41} }