/* A Marketplace product page, laid out like the owner's reference image of 2026-10-24 (a monochrome commercial real
   estate landing page) in the site's studio skin: a breadcrumb; a large rounded hero picture in black and white with the
   name, line and two buttons in white over a dark wash; "About" with four big facts in a 2 x 2 grid; a row of marks (the
   group's other products); a carousel of tall picture cards (the mechanics are site.css .carousel and js/carousel.js);
   "How we work" with a tall black-and-white picture, a round Slate badge over its corner and a list of steps with dark
   round icons and hairlines between; support cards. Every class is pd- prefixed. Pictures here are decorative. */

.pd-top { padding-top: calc(var(--hdr) + clamp(16px, 2vw, 28px)); }
/* the reference's sections sit closer together than the site's default (--sec reaches 168px) */
/* owner, 2026-10-24: "the inner pages have a lot of padding between the sections": about half of the old
   clamp(56px, 6.4vw, 104px) */
.pd-about, .pd-cat, .pd-how, .pd-support { padding-block: clamp(32px, 3.6vw, 56px); }
.pd-h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.025em; }

/* ---------- breadcrumb ---------- */
.pd-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-small); color: var(--ink-2); }
.pd-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.pd-crumbs li + li::before { content: "/"; color: var(--ink-3); }
.pd-crumbs a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pd-crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.pd-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- hero: the picture fills a rounded panel, the words sit on its left over a dark wash ---------- */
.pd-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(420px, 58vh, 600px); margin-top: 16px; border-radius: var(--r-xl); background: var(--dark);
}
.pd-hero__media { position: absolute; inset: 0; z-index: -2; }
/* the reference's light grey photograph: black and white, lifted (the product photos are dark) */
.pd-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%;
  filter: grayscale(1) brightness(1.75) contrast(0.92);
}
/* a soft wash under the words only, so the white text keeps 4.5:1 or more against the brightest pixel behind it
   (measured at 1440, 1024 and 390 wide, 2026-10-24) while the rest of the picture stays light */
.pd-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 15, 20, 0.7) 0%, rgba(11, 15, 20, 0.52) 45%, rgba(11, 15, 20, 0) 82%);
}
.pd-hero__body { max-width: 640px; padding: clamp(32px, 5vw, 80px); color: #fff; }
/* the owner's emblem and logo name in the name's place, under the kicker (2026-10-24): white and gold on the dark
   photo, as drawn */
.pd-hero__logo { margin-top: clamp(14px, 1.6vw, 22px); }
.pd-hero__logo img { display: block; width: auto; height: clamp(46px, 5.4vw, 84px); max-width: 100%; }
/* the emblem with the name written beside it (owner, 2026-10-26: names the drawn lockups do not carry), and a hero
   heading of several lines (Yalla Reactor) */
.pd-hero__logo--text { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); }
.pd-hero__logo--text img { flex: none; }
.pd-hero__logo--text > span:not(.pd-wm) { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.pd-hero__line { display: block; }

/* a name set as the owner's drawn lockups set theirs (2026-10-26: Yalla Reactor, Yalla Voice AI (V1.0), PropertyMarket.ae),
   at the drawn lockups' size and in their colours, beside the emblem: these heroes look like every other product's
   (owner: "keep the same font size and style and color that you used on the other pages") */
.pd-hero__logo--text { gap: clamp(6px, 0.7vw, 12px); }
.pd-wm { font-size: clamp(22px, 2.5vw, 36px); line-height: 1; letter-spacing: -0.01em; color: #fff; white-space: nowrap; }
.pd-wm__lead { font-family: var(--font); font-weight: 400; }
.pd-wm__accent { font-family: var(--font-head); font-weight: 700; color: var(--gold-mark); }
.pd-wm__tail { font-family: var(--font); font-weight: 600; }
.pd-hero__kicker { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.pd-hero__title {
  margin-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-display); line-height: 1.02;
  letter-spacing: -0.035em;
}
.pd-hero__lead { margin-top: 18px; max-width: 34ch; font-size: var(--t-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.pd-hero__actions { margin-top: clamp(24px, 3vw, 36px); }
.pd-hero :focus-visible { outline-color: #fff; }

/* ---------- about: text left, four facts right ---------- */
.pd-about__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.pd-about__text { grid-column: 1 / 7; }
.pd-about__text p { margin-top: 18px; max-width: 52ch; color: var(--ink-2); line-height: 1.6; }
.pd-facts { grid-column: 8 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.4vw, 40px); }
/* the big value above its label, as the reference draws them, in that order in the page too (it reads as one phrase);
   one size for every value, so the two rows line up */
.pd-fact__value {
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-h3); line-height: 1.05; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pd-fact__label { margin-top: 8px; font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); max-width: 26ch; }

/* ---------- the group's other products, as the reference's logo row ---------- */
.pd-family { padding-block: 0 clamp(8px, 1.6vw, 24px); }
.pd-family__title { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-num); }
.pd-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; margin-top: 20px; padding-block: 24px; border-block: 1px solid var(--line); }
/* a group with more other products than fit one row (tools/build.py STRIP_ROW_MAX): even columns, so a second row lines up */
.pd-strip--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
@media (max-width: 767px) { .pd-strip--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }   /* two across on a phone, not ten rows */
.pd-strip__item { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.pd-strip__name { font-family: var(--font-head); font-weight: 700; font-size: var(--t-h6); letter-spacing: -0.01em; }
.pd-strip__item:hover .pd-strip__name { text-decoration: underline; text-underline-offset: 4px; }

.pd-mono {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--dark); color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: var(--t-small);
}
.pd-mono::after { content: ""; position: absolute; top: 6px; right: 6px; width: 4px; height: 4px; background: var(--gold); }
/* a product with the owner's emblem (2026-10-24): the emblem fills the tile, no corner square */
.pd-mono--logo img { width: 78%; height: 78%; object-fit: contain; }
.pd-mono--logo::after { content: none; }

/* ---------- inside the product: a title column, then the carousel of tall picture cards ---------- */
.pd-cat__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; }
.pd-cat__head { grid-column: 1 / 4; }
.pd-cat__head p { margin-top: 16px; color: var(--ink-2); line-height: 1.5; max-width: 30ch; }
.pd-cat__rail { grid-column: 4 / 13; min-width: 0; }
.pd-cardx__img { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--panel-2); }
.pd-cardx__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pd-cardx:hover .pd-cardx__img img { transform: scale(1.03); }
.pd-cardx h3 { margin-top: 16px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h5); letter-spacing: -0.01em; }
.pd-cardx p { margin-top: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* ---------- how we work: picture with the badge on the left, the steps on the right ---------- */
.pd-how__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; align-items: start; }
.pd-how__head { grid-column: 1 / 7; }
.pd-how__head p { margin-top: 16px; color: var(--ink-2); line-height: 1.5; max-width: 36ch; }
.pd-how__media { grid-column: 1 / 6; grid-row: 2; position: relative; padding: clamp(36px, 4vw, 56px) clamp(36px, 4vw, 56px) 0 0; }
.pd-how__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-xl);
  filter: grayscale(1) contrast(1.05);
}
.pd-badge {
  position: absolute; top: 0; right: 0; display: grid; place-items: center; width: clamp(108px, 9.5vw, 132px);
  aspect-ratio: 1; padding: 12px; border-radius: 50%; background: var(--slate); color: #fff; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-body); line-height: 1.2;   /* white on Slate: 4.7:1 */
  box-shadow: 0 18px 40px -20px rgba(11, 15, 20, 0.6); transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pd-badge:hover { background: var(--dark); transform: rotate(-6deg); }
.pd-how__steps { grid-column: 7 / 13; grid-row: 2; padding-top: clamp(36px, 4vw, 56px); }
.pd-how__step { display: flex; gap: 20px; align-items: flex-start; padding-block: clamp(20px, 2.2vw, 28px); border-bottom: 1px solid var(--line-2); }
.pd-how__step:first-child { padding-top: 0; }
.pd-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; }
.pd-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pd-how__step h3 { font-family: var(--font-head); font-weight: 700; font-size: var(--t-h6); letter-spacing: -0.01em; }
.pd-how__step p { margin-top: 6px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* ---------- support ---------- */
.pd-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 3vw, 40px); }
.pd-help__item {
  display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: #fff;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.pd-help__item:hover { border-color: var(--line-3); box-shadow: 0 20px 50px -30px rgba(11, 15, 20, 0.35); transform: translateY(-2px); }
.pd-help__label { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-num); }
.pd-help__item h3 { flex: 1; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h6); line-height: 1.3; overflow-wrap: anywhere; }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .pd-about__text, .pd-facts, .pd-cat__head, .pd-cat__rail, .pd-how__head { grid-column: 1 / -1; }
  .pd-how__media { grid-column: 1 / -1; grid-row: 2; }
  .pd-how__media img { aspect-ratio: 16 / 10; }   /* full width on a tablet: a wide crop, not a tall one */
  .pd-how__steps { grid-column: 1 / -1; grid-row: 3; padding-top: 0; }
  .pd-help { grid-template-columns: 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .pd-hero { border-radius: var(--r-lg); align-items: flex-end; min-height: 480px; }
  .pd-hero::before { background: linear-gradient(0deg, rgba(11, 15, 20, 0.88) 0%, rgba(11, 15, 20, 0.62) 55%, rgba(11, 15, 20, 0.2) 100%); }
  .pd-hero__body { padding: 28px 22px; }
  .pd-wm { font-size: clamp(17px, 5.3vw, 22px); }   /* the name on one line beside the emblem */
  /* "(v1.0)" after every name (owner, 2026-10-27): a name too long for one line beside the emblem (PropertyMarket.ae
     at 390px and narrower) puts the version on a second line instead of running into the hero's edge; the first word
     and the gold word never part */
  .pd-wm { white-space: normal; line-height: 1.15; }
  .pd-wm__lead, .pd-wm__accent { white-space: nowrap; }
  .pd-how__media { grid-column: 1 / -1; padding: 32px 32px 0 0; }
  .pd-how__media img { aspect-ratio: 4 / 5; }
  .pd-strip { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-cardx__img img, .pd-help__item, .pd-badge { transition: none; }
  .pd-cardx:hover .pd-cardx__img img, .pd-help__item:hover, .pd-badge:hover { transform: none; }
}

/* owner, 2026-10-24: "How we work" as a short section: the head, then the five steps side by side, no tall photo */
.pd-how__inner { display: block; }
.pd-how__media { display: none; }
.pd-how__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(18px, 2vw, 28px); padding-top: 0; }
.pd-how__step { flex-direction: column; gap: 12px; padding-block: 0; border-bottom: 0; }
.pd-how__step p { max-width: none; }
@media (max-width: 1023px) { .pd-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }
@media (max-width: 479px) { .pd-how__steps { grid-template-columns: minmax(0, 1fr); } }