/* ============================================================
   Facebook Marketplace page — page-scoped tweaks & redesigns.
   Loaded AFTER fbads.css, only on facebook-marketplace.html, so
   overrides here never touch other pages.
   ============================================================ */

/* deleted eyebrows leave the h2 as the first child; kill the gap its
   top margin opens under the section padding */
.prose h2:first-child{margin-top:0;}

/* Jeff: trim the extra vertical space across this page */
.edu, .machine, .density{padding-top:5rem;padding-bottom:5rem;}

/* ---------- account team: big photos, this is a highlight section ---------- */
.acct-team{grid-template-columns:repeat(4,1fr);max-width:1080px;gap:1.6rem;}
.at-card{padding:2.2rem 1.2rem 1.8rem;}
.at-card .at-ph{
  width:148px;height:148px;margin-bottom:1.1rem;border-width:3px;font-size:2.6rem;
}
.at-card h3{font-size:1.2rem;}
.at-card span{font-size:.82rem;}
@media(max-width:820px){
  .acct-team{grid-template-columns:repeat(2,1fr);max-width:520px;}
  .at-card .at-ph{width:128px;height:128px;}
}

/* ===== HAND-OFF LANE: "What we run / what stays with your team" (.wdw-) ===== */
/* Add to css/marketplace.css (page-scoped). Then delete the old block CSS from  */
/* css/fbads.css: .edu-buckets/.edu-bucket (~lines 221-225 + the                 */
/* .edu-buckets rule in the ~308 media query) and .avail-chat/.ac-* (~1519-1539).*/
.wdw-lane{
  --wdw-accent:var(--accent,#1b8df6);
  --wdw-lite:#7fc1ff;
  --wdw-dim:var(--text-dim,#9db8d6);
  --wdw-line:rgba(127,166,204,.2);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:0;
  margin:2.6rem 0 0;
}

/* --- shared side scaffolding --- */
.wdw-side{
  position:relative;
  border:1px solid var(--wdw-line);
  background:linear-gradient(180deg,var(--ink-3,#152741),var(--ink-2,#0e182c) 78%);
  padding:1.5rem 1.5rem 1.6rem;
  min-width:0;
}
.wdw-ours{border-radius:18px 0 0 18px;border-right:none;}
.wdw-theirs{border-radius:0 18px 18px 0;border-left:none;}

.wdw-cap{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;}
.wdw-cap .wdw-badge{
  flex:0 0 auto;display:inline-flex;width:34px;height:34px;
  align-items:center;justify-content:center;border-radius:10px;
  font-size:1.1rem;
}
.wdw-ours .wdw-badge{background:rgba(27,141,246,.14);border:1px solid rgba(27,141,246,.4);color:var(--wdw-lite);}
.wdw-theirs .wdw-badge{background:rgba(53,208,127,.12);border:1px solid rgba(53,208,127,.3);color:#7fe0a8;}
.wdw-kicker{display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--wdw-dim);line-height:1;}
.wdw-cap h3{font-size:1.12rem;font-weight:800;letter-spacing:-.01em;margin:.28rem 0 0;line-height:1.15;}

/* --- LEFT: the automated conveyor of listing tasks --- */
.wdw-belt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.wdw-task{
  position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.7rem .85rem;border-radius:12px;
  background:rgba(11,20,36,.55);border:1px solid var(--wdw-line);
  overflow:hidden;
}
.wdw-task::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--wdw-accent);opacity:.55;
}
.wdw-tick{
  flex:0 0 auto;display:inline-flex;width:22px;height:22px;
  align-items:center;justify-content:center;border-radius:50%;
  background:rgba(27,141,246,.16);border:1px solid rgba(27,141,246,.45);
  color:var(--wdw-lite);font-size:.82rem;
  animation:wdw-pop 5.6s ease-in-out infinite;
}
.wdw-task:nth-child(1) .wdw-tick{animation-delay:0s;}
.wdw-task:nth-child(2) .wdw-tick{animation-delay:.35s;}
.wdw-task:nth-child(3) .wdw-tick{animation-delay:.7s;}
.wdw-task:nth-child(4) .wdw-tick{animation-delay:1.05s;}
.wdw-tick i{transform:translateZ(0);}
.wdw-tbody{min-width:0;}
.wdw-tbody b{display:block;font-size:.9rem;font-weight:700;line-height:1.2;}
.wdw-tbody span{display:block;font-size:.78rem;color:var(--wdw-dim);line-height:1.3;margin-top:.12rem;}
.wdw-tico{flex:0 0 auto;margin-left:auto;color:#5f7a9c;font-size:1rem;}

.wdw-auto{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.05rem;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wdw-dim);
}
.wdw-auto i{color:var(--wdw-lite);animation:wdw-spin 4s linear infinite;transform-origin:50% 50%;}

/* --- MIDDLE: the hand-off --- */
.wdw-handoff{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.55rem;padding:0 .2rem;position:relative;z-index:2;
}
.wdw-handoff::before{
  content:"";position:absolute;top:14%;bottom:14%;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--wdw-line) 20%,var(--wdw-line) 80%,transparent);
  transform:translateX(-50%);
}
.wdw-node{
  position:relative;display:inline-flex;width:46px;height:46px;
  align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(27,141,246,.32),rgba(11,20,36,.9) 72%);
  border:1px solid rgba(27,141,246,.55);color:#fff;font-size:1.2rem;
  box-shadow:0 0 0 5px rgba(27,141,246,.06);
}
.wdw-node i{position:relative;z-index:2;}
.wdw-pulse{
  position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(27,141,246,.5);
  animation:wdw-ring 2.8s ease-out infinite;
}
.wdw-node small{
  position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%);
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wdw-dim);white-space:nowrap;
}

/* --- RIGHT: the live thread (the payoff) --- */
.wdw-theirs > p{color:var(--wdw-dim);font-size:.88rem;line-height:1.5;margin:0 0 1rem;}
.wdw-theirs > p b{color:var(--text);font-weight:700;}
.wdw-thread{
  border-radius:14px;overflow:hidden;border:1px solid var(--wdw-line);
  background:linear-gradient(180deg,rgba(15,31,54,.75),rgba(11,20,36,.92));
}
.wdw-thbar{
  display:flex;align-items:center;gap:.45rem;padding:.55rem .85rem;
  background:rgba(10,19,34,.9);border-bottom:1px solid rgba(127,166,204,.14);
  font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--wdw-dim);
}
.wdw-thbar i{color:var(--wdw-lite);font-size:.9rem;}
.wdw-thbar .wdw-live{margin-left:auto;display:inline-flex;align-items:center;gap:.32rem;color:#7fe0a8;text-transform:uppercase;letter-spacing:.08em;font-size:.6rem;}
.wdw-live .wdw-dot{width:6px;height:6px;border-radius:50%;background:#4fd08a;box-shadow:0 0 0 0 rgba(79,208,138,.6);animation:wdw-live 2.4s ease-out infinite;}
.wdw-msgs{padding:.9rem;display:flex;flex-direction:column;gap:.5rem;}
.wdw-b{max-width:86%;padding:.6rem .85rem;font-size:.85rem;line-height:1.4;font-weight:600;border-radius:14px;}
.wdw-b.buyer{align-self:flex-start;background:rgba(21,39,65,.85);color:#cfe3f7;border:1px solid rgba(127,166,204,.25);border-bottom-left-radius:5px;}
.wdw-b.you{align-self:flex-end;color:#fff;background:linear-gradient(135deg,#1b8df6,#0a6fd4);border-bottom-right-radius:5px;}
.wdw-win{
  align-self:center;margin-top:.15rem;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7fe0a8;
  padding:.32rem .7rem;border-radius:999px;
  background:rgba(53,208,127,.1);border:1px solid rgba(53,208,127,.3);
}

/* ===== animations ===== */
@keyframes wdw-pop{
  0%,72%,100%{transform:scale(1);}
  6%{transform:scale(.55);}
  16%{transform:scale(1.12);}
  24%{transform:scale(1);}
}
@keyframes wdw-spin{to{transform:rotate(360deg);}}
@keyframes wdw-ring{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.55);opacity:0;}}
@keyframes wdw-live{0%{box-shadow:0 0 0 0 rgba(79,208,138,.55);}70%,100%{box-shadow:0 0 0 6px rgba(79,208,138,0);}}

/* ===== responsive: stack the lane on mobile ===== */
@media (max-width:760px){
  .wdw-lane{grid-template-columns:1fr;}
  .wdw-ours{border-radius:18px 18px 0 0;border-right:1px solid var(--wdw-line);border-bottom:none;}
  .wdw-theirs{border-radius:0 0 18px 18px;border-left:1px solid var(--wdw-line);border-top:none;}
  .wdw-handoff{flex-direction:row;padding:.55rem 0;gap:.6rem;}
  .wdw-handoff::before{top:50%;bottom:auto;left:10%;right:10%;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--wdw-line) 20%,var(--wdw-line) 80%,transparent);}
  .wdw-node{width:40px;height:40px;font-size:1.05rem;transform:rotate(90deg);}
  .wdw-node i{transform:rotate(-90deg);}
  .wdw-node small{
    top:auto;bottom:auto;left:calc(100% + .55rem);right:auto;
    transform:rotate(-90deg);transform-origin:left center;
  }
}
@media (max-width:400px){
  .wdw-side{padding:1.25rem 1.15rem 1.35rem;}
  .wdw-cap h3{font-size:1.04rem;}
  .wdw-tbody b{font-size:.86rem;}
}

@media (prefers-reduced-motion:reduce){
  .wdw-tick,.wdw-auto i,.wdw-pulse,.wdw-live .wdw-dot{animation:none;}
  .wdw-tick{transform:none;}
}
/* ============ POS PRICING REDESIGN — "The Spec Dial" — scoped .pos- ============ */
.pos-block{
  --pos-gold:#e6c878;
  max-width:940px;margin:2.6rem auto 0;
  border:1px solid var(--line);border-radius:22px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(27,141,246,.14), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);
}

/* --- hero price --- */
.pos-hero{padding:2.4rem 2rem 2rem;text-align:center;position:relative;border-bottom:1px solid var(--line);}
.pos-hero::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:min(280px,60%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,200,120,.5),transparent);}
.pos-hero-tag{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pos-gold);border:1px solid rgba(230,200,120,.3);border-radius:999px;
  padding:.34rem .8rem;margin-bottom:1.1rem;}
.pos-hero-tag i{font-size:.9rem;}
.pos-price{display:inline-flex;align-items:flex-start;justify-content:center;line-height:1;color:var(--text);}
.pos-cur{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:var(--text-dim);margin-top:.5rem;}
.pos-amt{font-size:clamp(4.4rem,12vw,6.6rem);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(160deg,#ffffff 20%,#cfe4ff 60%,#7fc1ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;}
.pos-per{display:flex;flex-direction:column;text-align:left;margin:.7rem 0 0 .5rem;font-size:1.15rem;font-weight:700;color:var(--text-dim);}
.pos-per em{font-style:normal;font-size:.82rem;font-weight:600;color:var(--text-dim);opacity:.8;letter-spacing:.02em;margin-top:.15rem;}
.pos-hero-sub{max-width:52ch;margin:1.2rem auto 0;font-size:1rem;line-height:1.55;color:var(--text-dim);}
.pos-hero-sub b{color:var(--text);font-weight:700;}

/* --- comparison grid --- */
.pos-compare{padding:.4rem 0;position:relative;overflow:hidden;}
.pos-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;
  padding:.95rem 2rem;border-top:1px solid rgba(173,229,255,.07);}
.pos-row:first-child{border-top:0;}
.pos-spec-label{font-size:.95rem;font-weight:600;color:var(--text);display:flex;flex-direction:column;gap:.2rem;padding-right:1rem;}
.pos-spec-label i{color:var(--accent);font-size:1rem;margin-right:.4rem;vertical-align:-1px;}
.pos-spec-label small{color:var(--text-dim);font-weight:500;font-size:.8rem;line-height:1.3;opacity:.85;padding-left:1.4rem;}
.pos-col{text-align:center;position:relative;}

/* column header row */
.pos-row--head{padding-top:1.3rem;padding-bottom:.6rem;}
.pos-pos-name{display:inline-flex;align-items:center;gap:.4rem;font-size:1.05rem;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.pos-pos-name i{font-size:1.05rem;}
.pos-col--a .pos-pos-name i{color:#7fc1ff;}
.pos-col--b .pos-pos-name i{color:var(--text-dim);}
.pos-pos-note{display:block;margin-top:.2rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text-dim);opacity:.75;}
.pos-col--a .pos-pos-note{color:var(--pos-gold);opacity:.9;}

/* faint spotlight behind the featured (PawnMate) column; clipped to .pos-compare */
.pos-col--a::before{content:"";position:absolute;inset:-9999px 0;
  background:linear-gradient(180deg,rgba(27,141,246,.09),rgba(27,141,246,.02));
  z-index:0;pointer-events:none;}
.pos-col--a > *{position:relative;z-index:1;}

/* slots row */
.pos-row--slots{padding-top:1.2rem;padding-bottom:1.3rem;}
.pos-slotnum{font-size:clamp(2.4rem,5vw,3.1rem);font-weight:800;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.pos-col--a .pos-slotnum{color:#dcecff;}
.pos-bar{margin:.7rem auto 0;width:min(160px,80%);height:6px;border-radius:999px;background:rgba(173,229,255,.1);overflow:hidden;}
.pos-bar-fill{display:block;height:100%;width:var(--fill);border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#7fc1ff);
  transform-origin:left;transform:scaleX(1);transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.pos-col--b .pos-bar-fill{background:linear-gradient(90deg,#3a6da0,#8fb4d8);}
/* HARDENED: bars default to filled (transform:scaleX(1) above) so they can never
   sit empty if the reveal observer is absent. When .reveal is present-and-idle
   (not yet .in) they collapse, then animate open on .in. */
.reveal:not(.in) .pos-bar-fill{transform:scaleX(0);}
.pos-block.in .pos-bar-fill,.reveal.in .pos-bar-fill{transform:scaleX(1);}

/* flags (check / x) */
.pos-flag{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:700;}
.pos-flag i{font-size:1.05rem;}
.pos-flag--yes{color:#8fe3b0;}
.pos-flag--yes i{color:#3ecf8e;}
.pos-flag--no{flex-direction:column;gap:.15rem;color:var(--text-dim);}
.pos-flag--no i{color:#e8836f;font-size:1.05rem;}
.pos-flag--no em{font-style:normal;font-weight:500;font-size:.72rem;opacity:.8;}

/* the price-tracking row gets a subtle gold emphasis */
.pos-row--track{background:linear-gradient(90deg,transparent,rgba(230,200,120,.045),transparent);}
.pos-row--track .pos-spec-label i{color:var(--pos-gold);}

/* portal footnote row */
.pos-row--foot{padding-top:.3rem;padding-bottom:1.2rem;border-top:0;}
.pos-fine{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--text-dim);opacity:.75;}
.pos-fine i{color:var(--accent);font-size:.9rem;}

/* one-price line + multi-location callout */
.pos-oneprice{text-align:center;max-width:700px;margin:1.6rem auto 0;color:var(--text-dim);font-size:.96rem;}
.pos-multi{display:flex;gap:1rem;align-items:flex-start;max-width:820px;margin:1.6rem auto 0;
  padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(20,39,65,.5),transparent);}
.pos-multi i{font-size:1.4rem;color:var(--pos-gold);flex:0 0 auto;margin-top:.1rem;}
.pos-multi p{margin:0;font-size:.94rem;color:var(--text-dim);line-height:1.55;max-width:none;}
.pos-multi b{color:var(--text);}

/* --- tablet / mobile --- */
@media (max-width:720px){
  .pos-hero{padding:2rem 1.3rem 1.7rem;}
  .pos-row{grid-template-columns:1fr 1fr;gap:.5rem 1rem;padding:1rem 1.2rem;}
  /* spec label spans full width, becomes a section heading */
  .pos-spec-label{grid-column:1 / -1;padding-right:0;margin-bottom:.2rem;}
  .pos-spec-label small{padding-left:1.4rem;}
  /* give each data column a mini POS label on mobile */
  .pos-col{text-align:left;padding:.2rem 0;}
  .pos-col::after{content:attr(data-pos);display:block;order:-1;font-size:.68rem;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.3rem;}
  .pos-col--a::after{content:"PawnMate";color:var(--pos-gold);}
  .pos-col--b::after{content:"Bravo";}
  .pos-row--head{display:none;} /* headers now inline per-cell */
  .pos-bar{margin-left:0;}
  .pos-flag--no{align-items:flex-start;}
  /* PawnMate spotlight softens to a rounded card, only on the two meaningful rows */
  .pos-col--a::before{inset:0;background:none;}
  .pos-row--slots .pos-col--a::before,
  .pos-row--track .pos-col--a::before{inset:-.6rem -.8rem;border-radius:12px;background:rgba(27,141,246,.06);}
  /* plain check rows: drop per-cell POS labels, just show the checks */
  .pos-row--both .pos-col::after{display:none;}
  .pos-row--both .pos-flag{gap:0;}
  .pos-row--both .pos-col{padding-top:0;}
  /* footnote row: no spec label, no empty second cell, no POS labels */
  .pos-row--foot{padding-top:0;grid-template-columns:1fr;}
  .pos-row--foot .pos-spec-label,
  .pos-row--foot .pos-col--b{display:none;}
  .pos-row--foot .pos-col::after{display:none;}
  .pos-row--foot .pos-col{padding-top:0;}
}
@media (max-width:360px){
  .pos-per{margin-left:.35rem;}
  .pos-hero-sub{font-size:.94rem;}
  .pos-row{padding:.9rem 1rem;}
}
@media (prefers-reduced-motion: reduce){
  .pos-bar-fill,.reveal:not(.in) .pos-bar-fill{transition:none;transform:scaleX(1);}
}