/* ==========================================================================
   Parallex · v3 "Pulse" · pages-dealbox.css  (Dealbox page)
   ========================================================================== */

.phone-screen.scr-dbx, .dbp-room-screen.scr-dbx { display: flex; flex-direction: column; }
/* ---------- hero: Sara's Dealbox + the playable feed ---------- */
.page-hero .dbp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; place-items: center stretch; min-height: 620px; padding: 28px 24px 24px 28px; }
/* Sara's Dealbox, as it opens in the browser: a private link, no app */
.dbp-room-wrap { position: relative; display: grid; justify-items: center; }
.dbp-room { width: 270px; container-type: inline-size; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--sh-panel); }
.dbp-url { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: #F3F5F9; color: var(--muted); font-size: 11.5px; }
.dbp-url .ic { width: 13px; height: 13px; color: var(--live-text); }
.dbp-url-tag { margin-inline-start: auto; padding: 2px 8px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 500; }
.dbp-room-screen { position: relative; display: flex; flex-direction: column; height: 430px; font-size: 4.8cqw; line-height: 1.35; color: var(--navy); overflow: hidden; transition: filter .4s; }
.dbx-plan { position: absolute; left: .5em; bottom: .5em; width: 4.6em; padding: .3em; border-radius: .5em; background: rgba(255,255,255,.95); color: var(--navy); opacity: 0; transform: scale(.7); transform-origin: left bottom; transition: opacity .3s, transform .45s var(--ease-snap); }
.dbx-plan svg { display: block; width: 100%; height: auto; }
.dbx-plan.is-on { opacity: 1; transform: none; }
.dbx-card { transition: box-shadow .4s, transform .5s var(--ease-snap); }
.dbx-card.is-pick { box-shadow: 0 0 0 2px var(--b1), 0 10px 22px -12px rgba(80,111,179,.8); transform: translateY(-2px); }
.dbx-card.is-view { box-shadow: 0 0 0 2px rgba(103,142,229,.55), 0 8px 18px -12px rgba(16,22,36,.3); }
.dbp .tap { position: absolute; z-index: 20; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(16,22,36,.3); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.dbp .tap.is-on { animation: dbTap .8s var(--ease-out) forwards; }
@keyframes dbTap { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.dbp-side { display: grid; gap: 12px; align-content: center; min-width: 0; min-height: 470px; }
.dbp-views { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(16,22,36,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.dbp-views button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 500; transition: background .3s, color .3s; white-space: nowrap; }
.dbp-views button[aria-checked="true"] { background: #fff; color: var(--navy); }
.dbp-feed { padding: 12px; font-size: 13.5px; }
.dbp-feed .feed-head { font-size: 13.5px; padding: 2px 4px 10px; }
.dbp-feed .feed-item { padding: 7px 6px; grid-template-columns: 30px 1fr auto; }
.dbp-feed .feed-item .fi { width: 30px; height: 30px; }
.dbp-feed .feed-item .fi svg { width: 16px; height: 16px; }
.dbp-feed .feed-list { list-style: none; padding: 0; display: grid; gap: 2px; }
.dbp-feed .feed-list.newest-first { justify-content: flex-end; } /* newest on top, list anchored to the top (no empty band) */
/* view switch: broker sees Sara; everyone else sees facts */
.dbp .v-d, .dbp .fx .v-d { display: none; }
.dbp[data-view="dev"] .v-b, .dbp[data-view="dev"] .fx .v-b { display: none; }
.dbp[data-view="dev"] .v-d { display: inline; }
.dbp[data-view="dev"] .fx .v-d { display: block; }
.dbp-feed .fx b, .dbp-feed .fx small { transition: opacity .3s; }
.dbp.is-swapping .dbp-feed .fx b, .dbp.is-swapping .dbp-feed .fx small { opacity: 0; }
.dbp-ctrl { display: flex; justify-content: space-between; align-items: center; }
.dbp-ctrl .btn { background: rgba(255,255,255,.95); }
.dbp[data-view="dev"] .dbp-room-wrap::after { content: "Buyer details stay with the broker"; position: absolute; left: 50%; top: 44%; translate: -50% 0; padding: 8px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--sh-float); }
.dbp[data-view="dev"] .dbp-room-screen { filter: blur(6px) saturate(.6); }
@media (max-width: 1360px) and (min-width: 1024px) { .dbp-room { width: 236px; } .dbp-room-screen { height: 400px; } .dbp-side { min-height: 440px; } .dbp-feed .feed-item .ft { display: none; } .dbp-feed .feed-item { grid-template-columns: 30px 1fr; } }
@media (max-width: 1180px) and (min-width: 1024px) { .page-hero .dbp { padding: 22px 18px; gap: 16px; } }
@media (max-width: 1023px) { .page-hero .dbp { justify-content: center; } }
@media (max-width: 699px) {
  .page-hero .dbp { grid-template-columns: 1fr; padding: 56px 14px 16px; gap: 18px; min-height: 0; }
  .dbp-room { width: min(300px, 100%); justify-self: center; }
  .dbp-feed { min-height: 0; }
}

/* ---------- problem: the forwarding chain ---------- */
.fwd-chain { position: relative; min-height: 420px; filter: grayscale(1); }
.fwd-chain > * { position: absolute; }
.fwd { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--sh-float); font-size: 13.5px; }
.fwd b { display: block; font-weight: 500; } .fwd small { color: var(--muted); font-size: 12px; }
.fwd:first-child { left: 0; top: 4%; }
.fwd.f2 { left: 22%; top: 30%; opacity: .8; }
.fwd.f3 { left: 44%; top: 55%; opacity: .55; }
.fwd-ar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #E9EAEE; font-size: 16px; }
.fwd-t { color: var(--faint); }
.fwd-q { right: 6%; top: 10%; font-family: var(--f-head); font-weight: 500; font-size: 160px; line-height: 1; color: #D9DCE2; }
.fwd-last { left: 6%; bottom: 2%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-size: 13px; }
.fwd-last .av-g { background: #C9CCD3; color: #fff; width: 34px; height: 34px; font-size: 13px; }
.fwd-last b { display: block; font-weight: 500; } .fwd-last small { color: var(--muted); }
@media (max-width: 599px) { .fwd-chain { min-height: 340px; } .fwd.f2 { left: 8%; } .fwd.f3 { left: 16%; top: 58%; } .fwd-q { font-size: 110px; top: 26%; } }

/* ---------- parts media ---------- */
.dbx-hero-sm { height: 30%; }
.dbx-hero-sm .dbx-hi { font-size: 1.9em; }
.dbx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.dg { position: relative; display: grid; gap: .1em; padding: .4em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .82em; }
.dg img { width: 100%; height: 4.2em; border-radius: .5em; object-fit: cover; }
.dg b { font-weight: 500; font-size: .95em; } .dg small { color: var(--muted); font-size: .8em; }
.dg-plan svg { height: 4.2em; width: 100%; color: var(--b1); background: var(--tint); border-radius: .5em; padding: .4em; }
.dg-vid .pl { position: absolute; left: 50%; top: 2.5em; width: 1.8em; height: 1.8em; margin-left: -.9em; margin-top: -.9em; border-radius: 50%; background: rgba(255,255,255,.95); }
.dg-vid .pl::after { content: ""; position: absolute; left: .7em; top: .5em; border: .4em solid transparent; border-left: .6em solid var(--navy); border-right: 0; }
.dg-pay .pay { height: 4.2em; border-radius: .5em; }
.dbx-share { gap: 20px; }
.url-pill { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.url-pill .ic { color: var(--live-text); }
.url-pill em { font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--b1); }
.seen-card { width: min(92%, 380px); display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: var(--wa-bg); box-shadow: var(--sh-float); font-size: 14.5px; }
.seen-card .msg { max-width: 92%; }
.seen-l { justify-self: center; font-size: 12px; color: var(--muted); padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.8); }
.seen-gap { justify-self: center; display: grid; gap: 6px; padding: 6px 0; }
.seen-gap i { width: 4px; height: 4px; border-radius: 50%; background: #B9BEC7; }
.buyer-card { width: min(94%, 440px); background: #fff; border-radius: 24px; padding: 18px; box-shadow: var(--sh-panel); display: grid; gap: 14px; font-size: 14px; }
.bc-h { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.bc-h .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--field); color: #fff; font-weight: 500; font-size: 17px; }
.bc-h b { display: block; font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.bc-h small { color: var(--muted); font-size: 12.5px; }
.bc-hot { background: #FFE9E1; color: #B4380D; gap: 4px; }
.bc-hot .ic { color: #E4572E; }
.bc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bc-stats span { padding: 10px 12px; border-radius: 14px; background: var(--mist); }
.bc-stats small, .bc-sec > small { display: block; color: var(--muted); font-size: 12px; }
.bc-sec > small { margin-bottom: 8px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; font-size: 11px; }
.bc-stats b { font-family: var(--f-head); font-weight: 500; font-size: 24px; letter-spacing: -.02em; }
.bc-bars { font-size: 13px; }
.bc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-tags span { padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--bdeep); font-size: 12.5px; font-weight: 500; }
.apps { position: relative; width: min(92%, 420px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.app { display: grid; justify-items: center; gap: 6px; padding: 16px 6px 12px; border-radius: 20px; background: #fff; box-shadow: var(--sh-float); font-size: 12px; font-weight: 500; color: var(--before-text); }
.login { position: absolute; left: 50%; top: 50%; translate: -50% -30%; width: 240px; display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: var(--sh-panel); font-size: 13px; }
.login b { font-weight: 500; } .login small { color: var(--muted); }
.pw { margin-top: 6px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #D6D9DF; letter-spacing: .2em; }
.part .media-panel [data-pm="with"] .phone:has(.chat) { margin-bottom: 30px; }
.pdf-offer { width: min(92%, 400px); display: grid; gap: 12px; }
.po-doc { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh-float); font-size: 14px; }
.po-doc b { display: block; font-weight: 500; } .po-doc small { color: var(--muted); }
.po-wait { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--sh-float); font-size: 14px; }
.po-wait b { margin-inline-start: auto; font-weight: 500; color: var(--red-text); }
.pdf-offer .msg.sys { justify-self: start; font-size: 13px; }
.convert { gap: 18px; }
.valid { display: flex; align-items: center; gap: .4em; font-size: .8em; color: var(--muted); padding: 0 .3em; }
.fee { display: flex; justify-content: space-between; padding: .7em .8em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .85em; }
.fee b { font-weight: 500; }
@media (max-width: 767px) {
  .convert { flex-direction: column; gap: 10px; }
  .offer-card { width: min(100%, 280px); }
  .apps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .apps .app:nth-child(7) { display: none; }
}
@media (max-width: 599px) {
  .part .media-panel .phone { --pw: 200px !important; }
  .url-pill { font-size: 12px; bottom: 50px; }
  .buyer-card { padding: 14px; gap: 10px; font-size: 13px; }
  .bc-stats b { font-size: 20px; }
}

/* ---------- self-serve field ---------- */
.selfserve { overflow: hidden; }
.ss-grid { display: grid; gap: 48px; justify-items: center; }
.selfserve .statement h2 { max-width: 20ch; }
.selfserve .chip { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.selfserve .chip .ic { color: #fff; }
.ss-trail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; }
/* flat steps: plain text on the band, joined by the dashed trail */
.ss-step { display: inline-flex; align-items: center; gap: 8px; height: 44px; color: #fff; font-weight: 500; font-size: 15px; }
.ss-step .ic { color: #fff; opacity: .85; }
.ss-step + .ss-step { margin-inline-start: 56px; position: relative; }
.ss-step + .ss-step::before { content: ""; position: absolute; right: calc(100% + 12px); top: 50%; width: 32px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 4px, transparent 4px 8px); }
.ss-win .ic { color: var(--wa); opacity: 1; }
.js .ss-trail .ss-step { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-snap); }
.js .ss-trail.is-in .ss-step { opacity: 1; transform: none; }
.js .ss-trail.is-in .ss-step:nth-child(2) { transition-delay: .242s; } .js .ss-trail.is-in .ss-step:nth-child(3) { transition-delay: .484s; } .js .ss-trail.is-in .ss-step:nth-child(4) { transition-delay: .726s; }
.reduced-motion .ss-trail .ss-step { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .ss-trail { flex-direction: column; gap: 22px; }
  .ss-step + .ss-step { margin-inline-start: 0; }
  .ss-step + .ss-step::before { right: auto; left: 50%; top: -22px; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.9) 0 4px, transparent 4px 8px); }
}

.dbp .dbx-brand small { white-space: nowrap; }
.dbp .dbx-by { white-space: nowrap; font-size: .9em; }
.reduced-motion .dbp-ctrl { display: none; }

/* ---------- part 01: the share sheet (pick, tap, one private link) ---------- */
.shr { width: min(100%, 320px); display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: #fff; color: var(--navy); box-shadow: var(--sh-panel); font-size: 13.5px; margin-bottom: 40px; }
.shr-h { display: flex; align-items: center; gap: 10px; }
.shr-h .ra { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: #fff; font-weight: 500; }
.shr-h b { display: block; font-weight: 500; font-size: 15px; } .shr-h small { color: var(--muted); font-size: 12px; }
.shr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.shr-list li { display: grid; grid-template-columns: 44px 1fr 22px; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 14px; background: var(--mist); }
.shr-list b { display: block; font-weight: 500; } .shr-list small { color: var(--muted); font-size: 12px; }
.shr-th { width: 44px; height: 36px; border-radius: 10px; background: center / cover var(--tint); display: grid; place-items: center; }
.shr-plan { color: var(--b1); } .shr-plan svg { width: 72%; }
.shr-vid { position: relative; } .shr-vid::after { content: ""; border: 6px solid transparent; border-left: 9px solid #fff; border-right: 0; margin-left: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.shr-pay { grid-auto-flow: column; gap: 2px; padding: 6px; align-items: end; } .shr-pay i { width: 6px; height: calc(var(--v) * 50px); border-radius: 2px; background: var(--b1); }
.shr-ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--border-2); color: #fff; transition: background .3s, box-shadow .3s; }
.shr-ck .ic { width: 13px; height: 13px; stroke-width: 2.6; transform: scale(0); transition: transform .3s var(--ease-snap); }
.shr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500; }
/* With: each item ticks on the beat, then the tap */
.media-panel[data-state="with"] .shr-ck { animation: shrTick .35s var(--ease-snap) forwards; animation-delay: calc(.5s + var(--i, 0) * .32s); }
.media-panel[data-state="with"] .shr-btn { animation: shrTap .5s var(--ease-snap) 2.1s both; }
@keyframes shrTick { to { background: var(--b1); box-shadow: none; } }
.media-panel[data-state="with"] .shr-list li .shr-ck .ic { transform: scale(1); transition-delay: calc(.55s + var(--i, 0) * .32s); }
@keyframes shrTap { 0%, 100% { transform: none; } 40% { transform: scale(.94); background: var(--b1); } }
.reduced-motion .media-panel .shr-ck { background: var(--b1); box-shadow: none; animation: none; } .reduced-motion .shr-ck .ic { transform: none; }

/* ---------- part 04: the offer, ready to reserve ---------- */
.offer-card { width: 290px; display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: #fff; color: var(--navy); box-shadow: var(--sh-panel); font-size: 13.5px; }
.oc-top { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.oc-img { height: 52px; border-radius: 12px; background: center / cover var(--tint); }
.oc-top small { display: block; color: var(--muted); font-size: 12px; }
.oc-top b { display: block; font-family: var(--f-head); font-weight: 500; font-size: 19px; letter-spacing: -.02em; line-height: 1.15; }
.oc-price { display: grid; justify-items: start; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--navy); color: #fff; }
.oc-price s { display: block; color: var(--on-dark-2); font-size: 12px; }
.oc-price b { display: block; white-space: nowrap; font-family: var(--f-head); font-weight: 500; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.oc-price .badge { font-size: 11.5px; }
.oc-rows { display: grid; gap: 6px; }
.oc-rows span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.oc-rows span:last-child { justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: var(--mist); color: var(--navy); }
.oc-rows b { font-weight: 500; }
.oc-btn { display: grid; place-items: center; height: 44px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500; }
.media-panel[data-state="with"] .oc-btn { animation: shrTap .5s var(--ease-snap) 1.2s both; }