/* ==========================================================================
   AFTER HOURS: facebook-marketplace.html (prefix mp-)
   Its own shop (Jeff, October 8, 2026): this page is the listing and its SOLD tag.
   The hero is the Marketplace feed on a buyer's phone with the shop's lit case glowing
   behind it (the Jeff KEEP feed: listings sell, take the SOLD stamp, slide out, fresh
   ones slide in; a buyer's "Is this still available?" pops on each sale). Then two
   receipts and the straight-answer price tag, the time card, one listing card in four
   states and the buyer's message sliding over to the team's thread, the readout board
   waiting on real numbers, prints under the picture rail, the shop's point-of-sale
   terminal feeding the spec plate, a Marketplace listing for the call (its message
   button is Book Your Call) and the chain's listing tag taking the SOLD stamp.
   No lamp, no shop door, no OPEN sign (homepage only).
   Shared pieces come from theme.css; only this page's scenes live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page-wide
   -------------------------------------------------------------------------- */
.mp-line { display: block; margin-top: 0.08em; }
.mp-multi :focus-visible, .mp-spec :focus-visible, .mp-tc :focus-visible, .mp-lc :focus-visible, .mp-bk :focus-visible,
.mp-term__base :focus-visible, .mp-phone__screen :focus-visible { outline-color: var(--ah-ink); }
/* the dark "photo" every listing uses: an item in neon, shot inside the lit case */
.mp-item__photo, .mp-lc__photo, .mp-bk__photo {
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(47, 155, 255, 0.24), transparent 70%),
    radial-gradient(circle, rgba(173, 229, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 7px 7px,
    #0a1426;
}

/* --------------------------------------------------------------------------
   1. HERO: the headline across the wall, the feed on a buyer's phone
   -------------------------------------------------------------------------- */
.mp-hero { overflow-x: clip; }
.mp-hero .ah-phero__lead { max-width: 30em; }
.mp-hero__kicker > span:last-child { text-wrap: balance; }
@media (min-width: 1000px) {
  .mp-hero .mp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    grid-template-areas: "head head" "body obj";
    column-gap: clamp(36px, 5vw, 88px); row-gap: 0; align-items: start;
  }
  .mp-hero__copy { display: contents; }
  .mp-hero__head { grid-area: head; }
  .mp-hero__body { grid-area: body; padding-top: clamp(28px, 4vw, 64px); }
  .mp-hero__object { grid-area: obj; }
  .mp-hero .ah-phero__h { max-width: 24em; margin-bottom: 18px; }
}
/* phones and tablets: headline, one lead line, Apply, then the phone; the rest of the lead and the second step under it */
@media (max-width: 999px) {
  .mp-hero .mp-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .mp-hero__copy, .mp-hero__body, .mp-hero__cta { display: contents; }
  .mp-hero__head { order: 0; }
  .mp-hero .ah-phero__h { margin-bottom: 16px; }
  .mp-hero .ah-phero__lead.mp-hero__lead--1 { order: 1; margin: 0 0 22px; }
  .mp-hero__apply { order: 2; align-self: flex-start; }
  .mp-hero__object { order: 3; margin-top: 40px; }
  .mp-hero .ah-phero__lead.mp-hero__lead--2 { order: 4; margin: 34px 0 22px; }
  .mp-hero__ghost { order: 5; align-self: flex-start; }
}
@media (max-width: 440px) {
  .mp-hero .ah-kicker { gap: 8px; margin-bottom: 14px; font-size: 0.78rem; letter-spacing: 0.06em; }
  .mp-hero .ah-crumbs { margin-bottom: 16px; }
  .mp-hero__object { margin-top: 30px; }
}

/* the stage: the case's light glowing behind the phone (printed dots and the case tube, never a blur) */
.mp-shop { position: relative; width: min(100%, 480px); margin: 0 auto; padding-top: 6px; }
.mp-shop__glow {
  position: absolute; z-index: 0; left: -14%; right: -14%; top: 5%; bottom: 12%; pointer-events: none; border-radius: 22px;
  background:
    linear-gradient(transparent calc(38% - 1px), rgba(173, 229, 255, 0.4) calc(38% - 1px) calc(38% + 1px), transparent calc(38% + 1px) calc(70% - 1px), rgba(173, 229, 255, 0.4) calc(70% - 1px) calc(70% + 1px), transparent calc(70% + 1px)),
    radial-gradient(circle, rgba(173, 229, 255, 0.46) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(farthest-side at 50% 46%, #000 42%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
  mask-image: radial-gradient(farthest-side at 50% 46%, #000 42%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
}
.mp-shop__tube { position: absolute; z-index: 0; left: 6%; right: 6%; top: 6%; height: 7px; border-radius: 6px; background: #f3f9ff; box-shadow: 0 0 0 1.5px rgba(3, 6, 13, 0.7), 0 0 10px 2px rgba(143, 214, 255, 0.85); }
.mp-shop__tube::before, .mp-shop__tube::after { content: ""; position: absolute; top: -3px; width: 12px; height: 13px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, #4a5568, #1a202c); }
.mp-shop__tube::before { left: -10px; } .mp-shop__tube::after { right: -10px; }

/* the buyer's phone (kit frame; the screen sizes to the feed instead of a fixed ratio) */
.mp-phone { --phone-w: 310px; --tilt: -1deg; z-index: 2; }
.mp-phone .ah-phone__body { box-shadow: 8px 8px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.mp-phone .ah-phone__screen.mp-phone__screen {
  aspect-ratio: auto; padding: 46px 10px 14px; border-radius: 30px;
  background-color: #fbf7ec; background-image: var(--ah-fiber);
}
.mp-phone .ah-phone__island { top: 14px; height: 20px; }
.mp-phone > .ah-sample { top: -14px; right: 18px; }

/* the Marketplace app header: title, search, the seller strip with the Managed chip (from the real page) */
.mp-app__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 9px; }
.mp-app__title { color: var(--ah-ink); font: 900 1.45rem/1 var(--ah-display); letter-spacing: 0.02em; }
.mp-app__search { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #e7dcc1; fill: none; stroke: var(--ah-ink); stroke-width: 5; stroke-linecap: round; }
.mp-app__seller { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 7px 8px; border: 1.5px solid rgba(11, 20, 36, 0.22); border-radius: 10px; background: #fffdf7; }
.mp-app__av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.mp-app__av svg { width: 18px; height: 18px; fill: none; stroke: var(--ah-ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.mp-app__who { display: grid; min-width: 0; line-height: 1.15; }
.mp-app__who b { color: var(--ah-ink); font: 800 0.84rem/1.15 var(--ah-body); white-space: nowrap; }
.mp-app__who small { color: var(--ah-ink-2); font: 600 0.72rem/1.2 var(--ah-body); }
.mp-app__live {
  flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 7px 3px;
  border: 1.5px solid var(--ah-950); border-radius: 4px; background: var(--ah-blue); color: var(--ah-ink);
  font: 800 0.62rem/1.1 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 1.5px 1.5px 0 var(--ah-950);
}
.mp-app__led { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 1.5px var(--ah-950); }

/* the feed: four Marketplace tiles (square photo, price first, title, Listed today). The whole tile is the tap target. */
.mp-feed { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 9px; }
.mp-item {
  position: relative; display: block; width: 100%; min-width: 0; padding: 0 0 2px; margin: 0;
  border: 0; border-radius: 9px; background: none; color: inherit; text-align: left; overflow: hidden;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mp-item:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: -1px; }
.mp-item__in { position: relative; display: grid; transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out); }
.mp-item__photo {
  position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; overflow: hidden;
  border: 2px solid var(--ah-950); border-radius: 8px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5), inset 0 -9px 0 #12213d;
}
.mp-item__ic { position: absolute; left: 50%; top: 48%; height: 58%; width: auto; aspect-ratio: 1; translate: -50% -50%; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 63, 134, 0.85)); transition: filter 0.3s; }
.mp-item__ic.ah-neon--blue { filter: drop-shadow(0 0 5px rgba(47, 155, 255, 0.95)); }
.mp-item__price { color: var(--ah-ink); font: 900 1.22rem/1 var(--ah-display); letter-spacing: 0.02em; }
.mp-item__name { display: block; min-height: 2.5em; margin-top: 2px; color: var(--ah-ink); font: 700 0.8rem/1.25 var(--ah-body); overflow-wrap: anywhere; }
.mp-item__meta { margin-top: 1px; color: var(--ah-ink-2); font: 600 0.72rem/1.2 var(--ah-body); }
.mp-item:hover:not(.sold) .mp-item__photo { box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5), inset 0 -9px 0 #12213d, 0 0 0 2px var(--ah-blue); }

/* the buyer's question: a cream bubble that pops on the photo just before the sale */
.mp-item__ask {
  position: absolute; z-index: 3; left: 6px; right: 10px; top: 7px; padding: 5px 8px 5px;
  border: 2px solid var(--ah-950); border-radius: 12px 12px 12px 4px; background: var(--ah-cream); color: var(--ah-ink);
  font: 800 0.72rem/1.15 var(--ah-body); box-shadow: 2px 2px 0 var(--ah-blue); text-align: left;
  opacity: 0; transform: translateY(6px) scale(0.8); transform-origin: 0 100%; pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.4s var(--ease-back);
}
.mp-item.asked .mp-item__ask, html:not(.motion) .mp-item--rest .mp-item__ask { opacity: 1; transform: none; }
/* the SOLD stamp: a solid cream label, and only the red ink on it is speckled (so the dark photo never shows
   through as static); it thumps down on the photo */
.mp-item__stamp {
  position: absolute; z-index: 4; left: 50%; top: 64%; padding: 2px; translate: -50% -50%;
  border-radius: 8px; background: var(--ah-cream); box-shadow: 0 0 0 1.5px var(--ah-950), 3px 3px 0 rgba(0, 0, 0, 0.55);
  rotate: -12deg; opacity: 0; transform: scale(2.1); pointer-events: none;
  transition: opacity 0.12s, transform 0.38s var(--ease-back);
}
.mp-item__stamp > span {
  display: block; padding: 2px 8px 1px; border: 3px solid currentColor; border-radius: 6px; color: var(--ah-red-ink);
  font: 900 1.45rem/1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 3.5px currentColor;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.mp-item.sold .mp-item__stamp { opacity: 1; transform: none; }
.mp-item.sold .mp-item__ic { filter: brightness(0.55) saturate(0.7); }
/* off the screen, then the next one slides in from the other side */
.mp-item.out .mp-item__in { transform: translateX(112%) rotate(7deg); opacity: 0; transition: transform 0.42s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.3s 0.1s; }
.mp-item.is-enter .mp-item__in { transform: translateX(-112%) rotate(-7deg); opacity: 0; transition: none; }
@media (max-width: 360px) {
  .mp-phone { --phone-w: 280px; }
  .mp-phone .ah-phone__screen.mp-phone__screen { padding: 42px 8px 12px; }
  .mp-feed { gap: 10px 7px; }
  .mp-item__price { font-size: 1.08rem; }
  .mp-item__name { font-size: 0.74rem; }
  .mp-item__ask { font-size: 0.66rem; left: 4px; right: 4px; padding: 4px 6px; }
  .mp-item__stamp { font-size: 1.2rem; }
  .mp-app__live { display: none; }
}

/* the hand note (desktop: up by the phone; phones: under it, pointing up) and the caption strip */
.mp-shop__hand { position: relative; z-index: 6; display: flex; align-items: flex-end; width: max-content; max-width: 100%; margin: 14px auto 0; rotate: -3deg; }
.mp-shop__hand .ah-hand__arrow { width: 38px; height: 28px; transform: scaleY(-1); }
/* desktop: on the copy side of the phone, pointing at the tiles, so it never runs off the right edge of a laptop screen */
@media (min-width: 1000px) {
  .mp-shop__hand { position: absolute; right: calc(50% + 172px); top: 34%; width: 6.5em; margin: 0; flex-direction: column; align-items: center; text-align: center; rotate: -5deg; }
  .mp-shop__hand .ah-hand__arrow { margin: 6px 0 0 36px; transform: rotate(-12deg); }
}
@media (min-width: 1000px) and (max-width: 1239px) { .mp-shop__hand { display: none; } }
.mp-shop__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.mp-shop__cap { max-width: 30em; }

/* --------------------------------------------------------------------------
   2. THE REAL COST: two receipts and the straight-answer price tag
   -------------------------------------------------------------------------- */
.mp-math__head { max-width: none; }
.mp-math__head .ah-h2 { max-width: 13em; }
.mp-math__cols { display: grid; gap: 12px 56px; max-width: 1040px; }
@media (min-width: 860px) { .mp-math__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mp-math__col p { color: var(--ah-fog); font-size: 1.12rem; max-width: 30em; }
.mp-math__col p + p { margin-top: 10px; }
.mp-math__col strong { color: var(--ah-paper); }

.mp-bill { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; max-width: 900px; margin: 0 auto; }
.mp-rc { width: min(100%, 370px); }
.mp-rc__dot { padding: 0 0.15em; }
.mp-rc__lines { display: grid; }
.mp-rc__lines li { padding: 8px 0 9px; border-bottom: 2px dotted rgba(11, 20, 36, 0.32); font-size: 0.92rem; line-height: 1.4; }
.mp-rc__lines li b { display: block; margin-bottom: 1px; font: 900 1.4rem/1.05 var(--ah-display); letter-spacing: 0.02em; color: var(--ah-ink); }
.mp-rc--us .mp-rc__lines li { position: relative; padding-left: 30px; font-weight: 700; }
.mp-rc--us .mp-rc__lines li::before { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; background: var(--ah-blue-ink); -webkit-mask: var(--ah-check) center / contain no-repeat; mask: var(--ah-check) center / contain no-repeat; }
.mp-rc__total { margin-top: 14px; padding-top: 12px; border-top: 4px double var(--ah-ink); text-align: center; color: var(--ah-red-ink); font: 900 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1 var(--ah-display); letter-spacing: 0.01em; }
.mp-rc--us .mp-rc__total { color: var(--ah-blue-ink); font-size: clamp(2.6rem, 2rem + 1.8vw, 3.4rem); }
.mp-rc__foot { margin-top: 10px; }
.mp-vs { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border: 2px solid var(--ah-950); border-radius: 50%; background: #11151d; color: var(--ah-sky); font: 900 1.5rem/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ah-blue); rotate: -8deg; }
@media (min-width: 760px) {
  .mp-bill { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 22px; }
  .mp-vs { align-self: center; }
  .mp-rc--us { --tilt: -1deg; margin-top: 30px; }
}

.mp-math__end { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 980px) { .mp-math__end { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(36px, 5vw, 80px); } }
.mp-punch__a { color: var(--ah-paper); font: 900 clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem)/0.98 var(--ah-display); letter-spacing: 0.005em; text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
.mp-punch__b { max-width: 22em; margin-top: 14px; color: var(--ah-sky); font: 900 clamp(1.4rem, 1.05rem + 1.2vw, 2.05rem)/1.08 var(--ah-display); letter-spacing: 0.01em; text-wrap: balance; }
.mp-punch__b strong { font-weight: 900; }
.mp-plaque.ah-tags--1 { width: min(100%, 360px); }
.mp-plaque__body { text-align: center; }
.mp-plaque__eye { max-width: 19em; margin: 0 auto 12px; color: var(--ah-ink-2); font: 800 0.74rem/1.4 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; }
.mp-plaque .ah-ptag__num small { margin-left: 2px; font-size: 0.36em; letter-spacing: 0.02em; text-shadow: none; }
.mp-plaque .ah-ptag__body .mp-plaque__cap { margin-top: 12px; color: var(--ah-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. BUY BACK THE TIME: the time card (the decorative punch clock is gone)
   -------------------------------------------------------------------------- */
.mp-time { --deco-at: 0 100%; --deco-size: 44% 60%; }
.mp-time__head { max-width: 860px; }
.mp-tc {
  position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 40px clamp(16px, 3.2vw, 36px) 14px;
  border: 2px solid var(--ah-950); border-radius: 6px;
  background-color: #fbf7ec; background-image: var(--ah-guilloche), var(--ah-fiber); background-position: 0 8px, 0 0; background-repeat: repeat-x, repeat;
  color: var(--ah-ink); box-shadow: 7px 7px 0 var(--ah-blue); rotate: -0.5deg;
}
/* the slot hole at the top of a time card */
.mp-tc__punch { position: absolute; left: 50%; top: 14px; width: 54px; height: 12px; margin-left: -27px; border-radius: 6px; background: var(--ah-900); box-shadow: 0 0 0 2px var(--ah-950), inset 0 3px 0 rgba(0, 0, 0, 0.6); }
.mp-tc__h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 4px double var(--ah-ink); font: 900 clamp(1.4rem, 1.1rem + 1vw, 1.95rem)/1.04 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ah-ink); text-wrap: balance; }
.mp-tc__ic { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mp-tc__rows { display: grid; }
.mp-tc__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px 0; border-bottom: 1.5px dashed rgba(11, 20, 36, 0.26); background: linear-gradient(90deg, transparent 0 154px, rgba(180, 35, 24, 0.22) 154px 156px, transparent 156px) 0 0 / 100% 100% no-repeat; }
.mp-tc__row:last-child { border-bottom: 0; }
.mp-tc__who {
  justify-self: start; margin-top: 2px; padding: 5px 9px 4px; border: 2.5px solid currentColor; border-radius: 4px;
  color: var(--ah-red-ink); font: 800 0.76rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px; rotate: -3deg;
}
.mp-tc__row:nth-child(2) .mp-tc__who { rotate: 2deg; } .mp-tc__row:nth-child(3) .mp-tc__who { rotate: -1.5deg; }
.mp-tc__row--you .mp-tc__who { color: var(--ah-blue-ink); border-width: 3px; }
.mp-tc__body h4 { font: 800 clamp(1.08rem, 1rem + 0.35vw, 1.25rem)/1.25 var(--ah-body); color: var(--ah-ink); }
.mp-tc__body p { margin-top: 3px; color: var(--ah-ink-2); font-size: 1rem; line-height: 1.5; }
.mp-tc__row--you h4 { background: linear-gradient(transparent 60%, rgba(27, 141, 246, 0.32) 60%) 0 0 / 100% 100% no-repeat; width: fit-content; }
@media (max-width: 600px) {
  .mp-tc { padding-top: 36px; rotate: -0.3deg; }
  .mp-tc__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; background: none; }
  .mp-tc__ic { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .mp-tc:not(.is-play) .mp-tc__who { opacity: 0; transform: scale(1.7); }
  .mp-tc__who { transition: opacity 0.18s 0.3s, transform 0.4s var(--ease-back) 0.3s; }
  .mp-tc__row:nth-child(2) .mp-tc__who { transition-delay: 0.65s, 0.65s; }
  .mp-tc__row:nth-child(3) .mp-tc__who { transition-delay: 1s, 1s; }
  .mp-tc__row:nth-child(4) .mp-tc__who { transition-delay: 1.4s, 1.4s; }
}

/* --------------------------------------------------------------------------
   4. WHO DOES WHAT: one listing card in four states, the message slides over, the team's thread
   -------------------------------------------------------------------------- */
.mp-lane { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.mp-ours__h, .mp-theirs__h { margin: 12px 0 0; font: 900 clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ah-paper); }
.mp-ours__head { margin-bottom: 28px; }

/* the listing card: cream stock, the photo, the price, the title, a status chip that changes */
.mp-lcwrap { width: 100%; max-width: 440px; margin: 0 auto; }
.mp-lc {
  position: relative; margin: 0; padding-bottom: 18px;
  border: 2px solid var(--ah-950); border-radius: 12px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 7px 7px 0 var(--ah-blue); rotate: -0.6deg;
}
.mp-lc > .ah-sample { top: -18px; right: 16px; }
.mp-lc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 19px 14px 11px; border-bottom: 2px dashed rgba(11, 20, 36, 0.24); }
.mp-lc__kind { color: var(--ah-ink-2); font: 800 0.7rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.mp-lc__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 3px; border: 1.5px solid var(--ah-950); border-radius: 999px; background: #fffdf7; color: var(--ah-ink); font: 800 0.76rem/1.2 var(--ah-body); white-space: nowrap; }
.mp-lc__chip i { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 1.5px var(--ah-950); }
.mp-lc[data-state="2"] .mp-lc__chip i { background: var(--ah-red-ink); }
.mp-lc[data-state="3"] .mp-lc__chip i, .mp-lc[data-state="4"] .mp-lc__chip i { background: var(--ah-blue); }
.mp-lc__photo { position: relative; margin: 14px 14px 0; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 8px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5), inset 0 -10px 0 #12213d; }
.mp-lc__ic { position: absolute; left: 50%; top: 47%; height: 62%; width: auto; aspect-ratio: 1; translate: -50% -50%; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 63, 134, 0.85)); transition: filter 0.3s; }
.mp-lc__ic.ah-neon--blue { filter: drop-shadow(0 0 5px rgba(47, 155, 255, 0.95)); }
.mp-lc__sold {
  position: absolute; z-index: 2; left: 50%; top: 50%; padding: 3px; translate: -50% -50%;
  border-radius: 11px; background: var(--ah-cream); box-shadow: 0 0 0 1.5px var(--ah-950), 3px 3px 0 rgba(0, 0, 0, 0.55);
  rotate: -10deg; opacity: 0; transform: scale(2); transition: opacity 0.12s, transform 0.38s var(--ease-back);
}
.mp-lc__sold > span {
  display: block; padding: 3px 13px 2px; border: 4px solid currentColor; border-radius: 8px; color: var(--ah-red-ink);
  font: 900 2.2rem/1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 4px currentColor;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.mp-lc__body { display: grid; gap: 4px; padding: 14px 18px 0; }
.mp-lc__item { display: flex; flex-direction: column; gap: 2px; }
.mp-lc__item b { color: var(--ah-ink); font: 900 2rem/1 var(--ah-display); letter-spacing: 0.02em; }
.mp-lc__item span { color: var(--ah-ink); font: 800 1.08rem/1.25 var(--ah-body); }
.mp-lc__meta { color: var(--ah-ink-2); font: 600 0.92rem/1.35 var(--ah-body); }
.mp-lc__seller { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; padding-top: 10px; border-top: 1.5px solid rgba(11, 20, 36, 0.16); color: var(--ah-ink); font: 800 0.9rem/1.2 var(--ah-body); }
.mp-lc__seller svg { width: 22px; height: 22px; padding: 3px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); fill: none; stroke: var(--ah-ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.mp-lc__new { display: none; align-items: center; padding: 2px 8px 1px; border: 1.5px solid var(--ah-950); border-radius: 4px; background: var(--ah-sky); font: 800 0.66rem/1.3 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.mp-lc__stamp { position: relative; display: table; margin: 16px 18px 0 auto; rotate: -4deg; white-space: normal; text-align: center; }
/* the four states */
.mp-lc__s { display: none; }
.mp-lc[data-state="1"] .mp-lc__s--1, .mp-lc[data-state="2"] .mp-lc__s--2, .mp-lc[data-state="3"] .mp-lc__s--3, .mp-lc[data-state="4"] .mp-lc__s--4 { display: inline; }
.mp-lc__item--cam, .mp-lc__ic--cam { display: none; }
.mp-lc[data-state="3"] .mp-lc__item--chain, .mp-lc[data-state="3"] .mp-lc__ic--chain { display: none; }
.mp-lc[data-state="3"] .mp-lc__item--cam { display: flex; }
.mp-lc[data-state="3"] .mp-lc__ic--cam { display: block; }
.mp-lc[data-state="2"] .mp-lc__sold { opacity: 1; transform: none; }
.mp-lc[data-state="2"] .mp-lc__ic { filter: brightness(0.5) saturate(0.6); }
.mp-lc[data-state="2"] .mp-lc__item { opacity: 0.62; }
.mp-lc[data-state="2"] .mp-lc__item span { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ah-red-ink); }
.mp-lc[data-state="2"] .mp-lc__meta { color: var(--ah-red-ink); font-weight: 800; }
.mp-lc[data-state="4"] .mp-lc__new { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .mp-lc.is-flip .mp-lc__in { animation: mp-flip 0.42s var(--ease-out); }
  html.motion .mp-lc:not(.is-play) .mp-lc__stamp { opacity: 0; transform: scale(1.8); }
  .mp-lc__stamp { transition: opacity 0.15s 3.7s, transform 0.45s var(--ease-back) 3.7s; }
}
@keyframes mp-flip { 0% { transform: translateY(0); } 35% { transform: translateY(-5px); } 100% { transform: none; } }
.mp-lc__tabs { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.mp-lc__tab {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--ah-paper); border-radius: 50%; background: var(--ah-800); color: var(--ah-paper);
  font: 900 1.3rem/1 var(--ah-display); box-shadow: 3px 3px 0 var(--ah-blue); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: translate 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.15s;
}
.mp-lc__tab:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--ah-blue); }
.mp-lc__tab[aria-pressed="true"] { background: var(--ah-blue); border-color: var(--ah-950); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-paper); }

/* the four steps (the same headings and lines as the real page): the one on the card is lit */
.mp-steps { display: grid; gap: 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.mp-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 14px 13px 12px; border: 2px solid transparent; border-radius: 10px; transition: background-color 0.25s, border-color 0.25s; }
html.js .mp-step { cursor: pointer; }
.mp-step.is-on { border-color: var(--ah-line-2); background: rgba(173, 229, 255, 0.07); }
.mp-step__n { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ah-fog); border-radius: 50%; color: var(--ah-sky); font: 900 1.25rem/1 var(--ah-display); transition: background-color 0.25s, color 0.25s; }
.mp-step.is-on .mp-step__n { border-color: var(--ah-950); background: var(--ah-blue); color: var(--ah-ink); box-shadow: 2px 2px 0 var(--ah-paper); }
.mp-step h4 { color: var(--ah-paper); font: 800 clamp(1.08rem, 1rem + 0.3vw, 1.22rem)/1.25 var(--ah-body); }
.mp-step p { margin-top: 3px; color: var(--ah-fog); font-size: 1rem; line-height: 1.45; }

/* the hand-off: the buyer's message leaves the listing and slides over to the team */
.mp-ping { position: relative; display: grid; justify-items: center; padding: 40px 0 34px; }
.mp-ping__trail { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 0; border-left: 2px dashed rgba(173, 229, 255, 0.45); }
.mp-ping__card {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: min(100%, 340px); padding: 10px 14px 10px 10px;
  border: 2px solid var(--ah-950); border-radius: 14px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 4px 4px 0 var(--ah-blue); rotate: 1deg;
}
.mp-ping__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.mp-ping__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--ah-ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.mp-ping__txt { display: grid; gap: 2px; min-width: 0; }
.mp-ping__txt small { color: var(--ah-ink-2); font: 800 0.66rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.mp-ping__txt b { color: var(--ah-ink); font: 800 0.98rem/1.25 var(--ah-body); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .mp-ping:not(.is-play) .mp-ping__card { opacity: 0; transform: translateY(-34px) scale(0.92); }
  .mp-ping__card { transition: opacity 0.35s var(--ease-out) 0.25s, transform 0.75s var(--ease-back) 0.25s; }
}

.mp-theirs { width: 100%; }
.mp-theirs > p:not(.ah-label) { color: var(--ah-fog); font-size: 1.08rem; max-width: 32em; }
.mp-theirs__h { margin-bottom: 12px; }
.mp-theirs > p + p { margin-top: 8px; }
.mp-theirs strong { color: var(--ah-paper); }
.mp-thread {
  position: relative; width: 100%; max-width: 560px; margin: 26px auto 0; padding-bottom: 18px;
  border: 2px solid var(--ah-950); border-radius: 18px;
  background: radial-gradient(circle, rgba(173, 229, 255, 0.06) 1px, transparent 1.4px) 0 0 / 10px 10px, linear-gradient(180deg, #13213d, #0b1424);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.mp-thread__bar { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; padding: 10px 16px 9px; border-bottom: 2px solid var(--ah-950); border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #e3e9f0, #b9c3d0); color: var(--ah-ink); font: 800 0.8rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.mp-thread__ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ah-ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-thread__live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding-right: 54px; }
.mp-thread__dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 2px var(--ah-950); }
.mp-thread .ah-chat { width: 100%; padding: 16px 16px 0; }
.mp-thread .ah-chat__bubble { max-width: 86%; font-size: 1rem; }
.mp-thread__win { justify-self: center; margin-top: 10px; }
.mp-thread__walk { --tilt: -2deg; }
.mp-thread__walk svg { width: 1.3em; height: 1.3em; fill: none; stroke: var(--ah-ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-thread > .ah-sample { top: -14px; right: 16px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .mp-thread__msgs:not(.is-play) .mp-thread__win { opacity: 0; transform: translateY(10px) scale(0.86); }
  .mp-thread__win { transition: opacity 0.3s 1.6s, transform 0.55s var(--ease-back) 1.6s; }
}
/* desktop: a ladder. The card and our steps on top, the message crosses the middle, the team's words and thread below */
@media (min-width: 1000px) {
  .mp-lane {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "card ohead" "card steps" "ping ping" "theirs thread";
    grid-template-rows: auto 1fr auto auto;
    column-gap: clamp(48px, 6vw, 96px); align-items: start;
  }
  .mp-ours__head { grid-area: ohead; margin: 8px 0 0; }
  .mp-lcwrap { grid-area: card; margin: 0; max-width: 460px; }
  .mp-steps { grid-area: steps; margin-top: 22px; }
  .mp-ping { grid-area: ping; justify-items: stretch; padding: 30px 0 26px; }
  .mp-ping__trail { left: 22%; right: 24%; top: 50%; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(173, 229, 255, 0.45); }
  .mp-ping__trail::before, .mp-ping__trail::after { content: ""; position: absolute; top: -9px; height: 9px; border-left: 2px dashed rgba(173, 229, 255, 0.45); }
  .mp-ping__trail::before { left: 0; top: -40px; height: 40px; }
  .mp-ping__trail::after { right: 0; top: 0; height: 40px; }
  .mp-ping__card { justify-self: center; }
  .mp-theirs { grid-area: theirs; align-self: center; }
  .mp-thread { grid-area: thread; margin: 0; max-width: none; }
  html.motion .mp-ping:not(.is-play) .mp-ping__card { transform: translateX(-46%) rotate(-3deg); }
}
.mp-how__note { max-width: 600px; margin-top: clamp(48px, 6vw, 76px); }
.mp-how__note a { color: var(--ah-blue-ink); font-weight: 800; text-underline-offset: 3px; }
.mp-how__note .mp-how__lead { font-weight: 800; }
@media (max-width: 420px) { .mp-how__note { padding: 24px 16px 18px; } .mp-how__note p { font-size: 1rem; } }

/* --------------------------------------------------------------------------
   5. PROOF: the readout board, waiting on Jeff's real numbers
   -------------------------------------------------------------------------- */
.mp-proof__grid { align-items: center; }
.mp-proof .ah-h2 { max-width: 10em; }
.mp-board { display: grid; gap: 14px; width: 100%; max-width: 580px; margin: 0 auto; padding-top: 38px; rotate: 0.5deg; }
.mp-board__soon { position: absolute; z-index: 2; top: -14px; right: 22px; --tilt: 5deg; }
.mp-board__row { display: grid; grid-template-columns: 138px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border: 2px solid var(--ah-950); border-radius: 8px; background: var(--ah-cream); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-950); font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
.mp-board__row .ah-led { width: 100%; min-width: 0; font-size: clamp(1.9rem, 1.6rem + 1vw, 2.5rem); }
@media (max-width: 520px) {
  .mp-board { gap: 12px; padding: 34px 14px 16px; }
  .mp-board__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px 13px; }
  .mp-board__row .ah-led { justify-self: start; width: auto; min-width: 6ch; font-size: 1.9rem; }
}

/* --------------------------------------------------------------------------
   6. ACCOUNT TEAM: four prints under the picture rail
   -------------------------------------------------------------------------- */
.mp-crew .ah-crew__list { max-width: 980px; margin: 0 auto; }
.mp-crew .ah-print { width: 100%; max-width: 230px; justify-self: center; }
@media (min-width: 620px) and (max-width: 899px) { .mp-crew .ah-crew__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; max-width: 560px; } }
@media (min-width: 900px) {
  .mp-crew .ah-crew__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .mp-crew .ah-crew__cord { display: block; left: 4%; right: 4%; }
  .mp-crew .ah-print:nth-child(even) { margin-top: 26px; }
}
/* Alyssa and Marco: a smaller initial on a cream card until Jeff sends their photos */
.mp-print__card {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 1.5px solid rgba(11, 20, 36, 0.3);
  background-color: var(--ah-cream-2); background-image: radial-gradient(circle, rgba(11, 20, 36, 0.1) 1.1px, transparent 1.5px), var(--ah-fiber); background-size: 9px 9px, auto;
}
.mp-print__ini {
  display: grid; place-items: center; width: 46%; aspect-ratio: 1; margin-top: -8%;
  border: 2.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-sky); color: var(--ah-ink);
  font: 900 clamp(2.2rem, 9vw, 3.1rem)/1 var(--ah-display); box-shadow: 3px 3px 0 var(--ah-blue);
}
.mp-print__soon { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; padding: 3px 8px 2px; border: 1.5px dashed var(--ah-ink-2); border-radius: 3px; color: var(--ah-ink-2); font: 800 0.66rem/1.3 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; rotate: -2deg; }
@media (min-width: 900px) { .mp-print__ini { font-size: clamp(2.2rem, 3.4vw, 3.1rem); } }

/* --------------------------------------------------------------------------
   7. POS TIERS: the shop's point-of-sale terminal, its paper feed, the spec plate, the tape, the note
   -------------------------------------------------------------------------- */
.mp-plans { --feed: clamp(56px, 7vw, 84px); }
.mp-plans__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.mp-plans__copy { order: -1; max-width: 34em; margin: 0 auto; text-align: center; }
@media (min-width: 900px) {
  .mp-plans__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .mp-plans__copy { order: 0; margin: 0; text-align: left; }
}
.mp-plans__one { color: var(--ah-paper); font: 900 clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0.04em 0.04em 0 var(--ah-950); }
.mp-plans__sub { margin-top: 12px; color: var(--ah-fog); font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); line-height: 1.55; text-wrap: pretty; }
.mp-plans__sub strong { color: var(--ah-paper); }

/* the terminal: a screen on a stand, a steel base with two keys and a keypad, the receipt printer */
.mp-term { position: relative; width: min(100%, 410px); margin: 0 auto; padding-top: 10px; }
.mp-term__tag { position: absolute; z-index: 5; top: -6px; left: 2px; --tilt: -5deg; }
.mp-term__tag svg { fill: none; stroke: var(--ah-ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-term__head {
  position: relative; z-index: 2; width: 84%; margin: 0 auto; padding: 14px 14px 30px;
  border: 2px solid var(--ah-950); border-radius: 14px 14px 10px 10px;
  background: linear-gradient(160deg, #3a4456, #1a202c 45%, #11151d);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.mp-term__screen {
  display: grid; gap: 8px; padding: 14px 16px 14px; border: 2px solid var(--ah-950); border-radius: 8px;
  background: repeating-linear-gradient(180deg, rgba(120, 255, 170, 0.06) 0 2px, transparent 2px 4px), radial-gradient(120% 90% at 50% 35%, #0d2e1b, #04120a);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.7); color: #a9ffc6;
}
.mp-term__row { display: flex; justify-content: space-between; gap: 10px; color: #8ef0ae; font: 700 0.8rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.mp-term__row b { color: #c6ffd8; font-weight: 800; text-shadow: 0 0 4px rgba(90, 255, 150, 0.6); }
.mp-term__big { display: flex; align-items: baseline; gap: 10px; }
.mp-term__big b { color: #c6ffd8; font: 900 clamp(3rem, 2.4rem + 2vw, 3.8rem)/0.9 var(--ah-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(90, 255, 150, 0.65); }
.mp-term__big span { color: #8ef0ae; font: 700 0.8rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.mp-term__brand { position: absolute; left: 0; right: 0; bottom: 8px; color: var(--ah-mute); font: 800 0.6rem/1 var(--ah-mono); letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }
.mp-term__neck { position: relative; z-index: 1; display: block; width: 76px; height: 24px; margin: -2px auto 0; border-inline: 2px solid var(--ah-950); background: linear-gradient(90deg, #5d6a7d, #cfd7e1 45%, #8996a8); }
.mp-term__base {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px 26px;
  border: 2px solid var(--ah-950); border-radius: 12px 12px 8px 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #edf1f6, #c6cfdb 55%, #aab5c4);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.mp-term__keys { display: flex; gap: 10px; }
.mp-term__key {
  min-height: 48px; padding: 0 14px; border: 2px solid var(--ah-950); border-radius: 8px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  font: 900 1.06rem/1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 5px 0 var(--ah-950); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background-color 0.15s;
}
.mp-term__key:hover { background-color: #fffaf0; }
.mp-term__key[aria-pressed="true"] { background: var(--ah-blue); transform: translateY(3px); box-shadow: 0 2px 0 var(--ah-950); }
.mp-term__pad { display: grid; grid-template-columns: repeat(3, 15px); gap: 5px; margin-left: auto; }
.mp-term__pad i { height: 12px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: #f4f6f9; box-shadow: 0 2px 0 var(--ah-950); }
.mp-term__pad i:nth-child(3n) { background: #dfe5ec; }
.mp-term__printer { position: absolute; right: 12%; bottom: -12px; width: 112px; height: 22px; border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, #3a4456, #1a202c); }
.mp-term__slot { position: absolute; left: 8px; right: 8px; bottom: 5px; height: 4px; border-radius: 2px; background: var(--ah-950); }
/* the paper feed: it falls out of the printer and tucks behind the spec plate */
.mp-term__paper {
  position: absolute; z-index: 1; right: calc(12% + 12px); top: calc(100% - 4px); width: 88px; height: calc(var(--feed) + 42px);
  display: grid; align-content: start; gap: 9px; padding: 18px 12px 0;
  background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(11, 20, 36, 0.05) 13px 14px);
  border-inline: 2px solid var(--ah-950); rotate: 1.5deg; transform-origin: 50% 0;
}
.mp-term__paper i { display: block; height: 3px; border-radius: 2px; background: rgba(11, 20, 36, 0.32); }
.mp-term__paper i:nth-child(2) { width: 70%; } .mp-term__paper i:nth-child(3) { width: 84%; } .mp-term__paper i:nth-child(4) { width: 52%; }
@media (prefers-reduced-motion: no-preference) {
  .mp-term.is-flip .mp-term__screen { animation: ah-blinkon 0.4s steps(2); }
}

.mp-spec { position: relative; z-index: 2; max-width: 960px; margin: var(--feed) auto 0; padding: 16px; border: 2px solid var(--ah-950); border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #edf1f6, #c6cfdb 55%, #aab5c4); box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.75); }
.mp-spec__screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950); background: linear-gradient(35deg, transparent 43%, var(--ah-950) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.mp-spec__screw--a { left: 4px; top: 4px; } .mp-spec__screw--b { right: 4px; top: 4px; } .mp-spec__screw--c { left: 4px; bottom: 4px; } .mp-spec__screw--d { right: 4px; bottom: 4px; }
.mp-spec__plate { width: fit-content; max-width: 100%; margin: -34px auto 14px; padding: 6px 14px 5px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 800 0.76rem/1.3 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--ah-blue); rotate: -1deg; }
.mp-spec .ah-compare { max-width: none; box-shadow: 4px 4px 0 var(--ah-950); }
.mp-spec thead td { background: var(--ah-ink); border-bottom: 5px solid var(--ah-blue); }
.mp-spec thead th { width: 30%; transition: background-color 0.25s, color 0.25s; }
.mp-spec td { transition: background-color 0.25s; }
.mp-pos { display: inline-flex; align-items: center; gap: 8px; font: 900 1.35rem/1 var(--ah-display); letter-spacing: 0.06em; }
.mp-pos svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-pos__note { display: block; margin-top: 6px; font: 800 0.7rem/1.2 var(--ah-mono); letter-spacing: 0.14em; color: var(--ah-sky); }
.mp-spec thead th.is-us .mp-pos__note { color: var(--ah-ink); }
.mp-spec tbody th { width: 40%; }
.mp-spec tbody th small { display: block; margin-top: 3px; color: var(--ah-ink-2); font-size: 0.86rem; font-weight: 600; line-height: 1.35; }
.mp-spec td { vertical-align: middle; }
.mp-spec__n { min-width: 4ch; font-size: 1.75rem; }
.mp-bar { display: block; max-width: 220px; height: 14px; margin-top: 10px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 999px; background: #1a2232; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35); }
.mp-bar__fill { display: block; width: var(--fill, 100%); height: 100%; border-right: 2px solid var(--ah-950); background: repeating-linear-gradient(90deg, var(--ah-blue) 0 10px, var(--ah-blue-hi) 10px 12px); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .mp-spec:not(.is-play) .mp-bar__fill { transform: scaleX(0); }
  .mp-bar__fill { transition: transform 1.1s var(--ease-out) 0.3s; }
}
.mp-spec__em { display: block; margin-top: 3px; color: var(--ah-ink-2); font-size: 0.88rem; font-style: normal; line-height: 1.35; }
.mp-spec__tick { min-height: 22px; }
.mp-fine { display: inline-flex; align-items: flex-start; gap: 7px; color: var(--ah-ink); font-size: 0.9rem; font-weight: 700; line-height: 1.35; }
.mp-fine svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 680px) {
  .mp-spec { padding: 12px; }
  .mp-spec__plate { margin-top: -30px; }
  .mp-spec .mp-spec__corner, .mp-spec td:empty { display: none; }
  /* the two systems stay named at the top of the sheet on phones */
  .mp-spec .ah-compare thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .mp-spec .ah-compare thead tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .mp-spec .ah-compare thead th { padding: 12px 12px 10px; font-size: 1rem; }
  .mp-spec .mp-pos { font-size: 1.15rem; }
  .mp-spec tbody th, .mp-spec thead th { width: auto; }
  .mp-spec tfoot tr { padding-top: 8px; }
  .mp-spec .ah-compare tbody th small { font: 600 0.86rem/1.35 var(--ah-body); letter-spacing: 0; text-transform: none; }
}

.mp-plans__total { max-width: 720px; }
.mp-multi { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 22px; align-items: center; max-width: 760px; margin: clamp(48px, 6vw, 68px) auto 0; padding: 30px 28px 24px; box-shadow: 6px 6px 0 var(--ah-sky); rotate: -0.5deg; }
.mp-multi__shops { width: 116px; height: auto; overflow: visible; fill: none; stroke: var(--ah-ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.mp-multi__txt p { color: var(--ah-ink-2); font-size: 1.04rem; line-height: 1.5; }
.mp-multi__txt p + p { margin-top: 6px; }
.mp-multi__txt strong { color: var(--ah-ink); font-weight: 800; }
.mp-multi__txt .mp-multi__q { font-size: 1.12rem; }
@media (max-width: 560px) {
  .mp-multi { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 30px 18px 20px; }
  .mp-multi__shops { width: 92px; }
}

/* --------------------------------------------------------------------------
   8. BOOK: a Marketplace listing for the call; its message button is Book Your Call
   -------------------------------------------------------------------------- */
.mp-book__actions { margin-top: 26px; }
.mp-bk { position: relative; width: min(100%, 430px); margin-inline: auto; }
.mp-bk__card {
  position: relative; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 14px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 8px 8px 0 var(--ah-neon-pink); rotate: 1deg;
}
.mp-bk__photo { position: relative; aspect-ratio: 16 / 8; border-bottom: 2px solid var(--ah-950); box-shadow: inset 0 -10px 0 #12213d; }
.mp-bk__ic { position: absolute; left: 50%; top: 46%; height: 64%; width: auto; aspect-ratio: 1; translate: -50% -50%; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 63, 134, 0.85)); }
.mp-bk__body { display: grid; gap: 10px; padding: 18px clamp(16px, 5%, 24px) 22px; }
.mp-bk__seller { display: flex; align-items: center; gap: 8px; color: var(--ah-ink-2); font: 800 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.mp-bk__seller img { width: auto; height: 20px; }
.mp-bk__h { color: var(--ah-ink); font: 900 clamp(1.8rem, 1.4rem + 1.3vw, 2.3rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.mp-bk__p { color: var(--ah-ink-2); font-size: 1.04rem; font-weight: 600; line-height: 1.45; }
/* the message box with Marketplace's own first question already typed */
.mp-bk__field { margin-top: 6px; padding: 11px 16px 10px; overflow: hidden; border: 1.5px solid rgba(11, 20, 36, 0.4); border-radius: 999px; background: #fffdf7; box-shadow: inset 0 2px 0 rgba(11, 20, 36, 0.08); color: var(--ah-ink); font: 600 0.98rem/1.3 var(--ah-body); white-space: nowrap; }
.mp-bk__field span { display: inline-block; }
.mp-bk__btn { width: 100%; --btn-shadow: var(--ah-ink); }
.mp-bk__btn svg { width: 1.15em; height: 1.15em; fill: none; stroke: var(--ah-ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .mp-bk:not(.is-play) .mp-bk__field span { clip-path: inset(0 100% 0 0); }
  .mp-bk__field span { transition: clip-path 1s steps(24) 0.5s; }
}

/* --------------------------------------------------------------------------
   9. CLOSING: the chain's listing tag hangs from a nail and takes the SOLD stamp; a tap stamps it again
   -------------------------------------------------------------------------- */
.mp-soldtag { position: relative; display: block; width: min(100%, 320px); margin: -18px auto 50px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mp-soldtag:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 8px; border-radius: 10px; }
.mp-soldtag__nail { position: relative; z-index: 3; display: block; width: 16px; height: 16px; margin: 0 auto; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.mp-soldtag__string { position: relative; z-index: 2; display: block; width: 2.5px; height: 46px; margin: -6px auto 0; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.mp-soldtag__tag { position: relative; z-index: 1; display: block; width: min(100%, 290px); margin: -18px auto 0; filter: var(--ah-outline) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.6)); rotate: -3deg; transform-origin: 50% 0; transition: rotate 0.6s var(--ease-back); }
.mp-soldtag__card {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 60px 20px 92px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: center;
  clip-path: polygon(20% 0, 80% 0, 100% 42px, 100% 100%, 0 100%, 0 42px);
}
.mp-soldtag__card::before { content: ""; position: absolute; left: 50%; top: 14px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--ah-900); box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 6px var(--ah-brass), 0 0 0 8px var(--ah-950); }
.mp-soldtag__lbl { color: var(--ah-ink-2); font: 800 0.7rem/1.2 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.mp-soldtag__name { color: var(--ah-ink); font: 800 1.12rem/1.25 var(--ah-body); }
.mp-soldtag__price { color: var(--ah-ink); font: 900 3.4rem/0.9 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.05em 0.05em 0 var(--ah-blue); }
.mp-soldtag__stamp {
  position: absolute; z-index: 4; left: 50%; bottom: 22px; padding: 5px 18px 3px; translate: -50% 0;
  border: 5px solid currentColor; border-radius: 12px; color: var(--ah-red-ink); background: rgba(246, 239, 221, 0.9);
  font: 900 2.8rem/1 var(--ah-display); letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: inset 0 0 0 3px var(--ah-cream), inset 0 0 0 5.5px currentColor;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
  rotate: -14deg; pointer-events: none;
}
.mp-soldtag:hover .mp-soldtag__tag { rotate: 0deg; }
.mp-soldtag > .mp-soldtag__sample { top: 60px; right: max(0px, calc(50% - 160px)); --tilt: 7deg; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .mp-final:not(.is-play) .mp-soldtag__stamp { opacity: 0; transform: scale(2.4); }
  .mp-soldtag__stamp { transition: opacity 0.12s 0.55s, transform 0.42s var(--ease-back) 0.55s; }
  .mp-soldtag.is-thump .mp-soldtag__stamp { animation: mp-thump 0.5s var(--ease-back); }
  .mp-soldtag.is-thump .mp-soldtag__tag { animation: mp-jolt 0.5s var(--ease-out); }
}
@keyframes mp-thump { 0% { opacity: 0; transform: scale(2.3); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mp-jolt { 0% { rotate: -3deg; } 35% { rotate: 1.5deg; } 70% { rotate: -4deg; } 100% { rotate: -3deg; } }
@media (max-width: 420px) { .mp-soldtag__price { font-size: 3rem; } .mp-soldtag__stamp { font-size: 2.4rem; } }