/* =============================================================================
   For Buyers (rebuilt 2026-10-01, docs/marketing-design-system.md §28)
   -----------------------------------------------------------------------------
   Only what /buyers alone uses. The shared system is marketing/landing.css.
     .lx-mkt       where the market lives today, an Apple-style grid
     .lx-sl        the shortlist: the market on a staircase, the fits in a folder
     .lx-gal       the three kinds of buyer, a card gallery
   ============================================================================= */

/* ═══ WHERE THE MARKET LIVES TODAY ═════════════════════════════════════════ */
/* An Apple-style grid of six cards, after the owner's mock: a quiet label, a
   headline, the owner's words, then a render standing at the foot. Off-white
   cards on the white page; text left-aligned, as in the mock. The renders
   are cut from the mock on white, so they MULTIPLY onto the card: white
   becomes the card's own off-white and only the object and its shadow show. */
.lx-mkt__head { max-width: 760px; }
.lx-mkt__lead {
  margin: clamp(28px, 3vw, 40px) 0 0;
  font-size: var(--lx-fs-lede);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--lx-ink-3);
}
.lx-mkt__lead strong { font-weight: 600; color: var(--lx-ink); }
.lx-mkt {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.lx-mkt__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px) clamp(16px, 1.6vw, 24px);
  border-radius: var(--lx-r-card);
  background: var(--lx-surface);
}
.lx-mkt__eyebrow { margin: 0 0 10px; font-size: var(--lx-fs-sm); font-weight: 500; color: var(--lx-ink-3); }
.lx-mkt__title {
  margin: 0 0 12px;
  font-size: var(--lx-fs-h3);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.024em;
  color: var(--lx-ink);
  text-wrap: balance;
}
.lx-mkt__body { margin: 0; max-width: 34em; font-size: var(--lx-fs-sm); line-height: 1.55; color: var(--lx-ink-3); text-wrap: pretty; }
.lx-mkt__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(190px, 18vw, 250px);
  margin-top: auto;
  padding-top: clamp(20px, 2vw, 28px);
}
.lx-mkt__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  mix-blend-mode: multiply;
}

/* ═══ FROM VOLUME TO RELEVANCE: the shortlist ══════════════════════════════
   marketing/landing/_shortlist. The markup and these rules are the FINISHED
   state: copy and criteria on the left, a folder on the right whose front tab
   holds the four cards that fit and whose rear tab holds the rest. landing.js
   pins it on a wide screen and plays the way there (cards on a staircase, the
   criteria assembling, the folder arriving, the cards sorting into it).

   Stacking is deliberate and nothing in the folder creates a stacking context
   except the folder itself: the sheets and lists are positioned with no
   z-index, so in tree order the rear sheet, the market's cards, the front
   sheet and the shortlist paint in that order, and a card given a z-index on
   the staircase can rise above all of it. */
.lx-sl__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.lx-sl.is-pinned .lx-sl__stage { height: calc(100svh - var(--lx-pin-top, 90px) - 32px); }
/* "See How It Works" jumps here. Pinned, land where the pin starts (the
   stage 16px under the header), not at the section's top padding, which left
   the heading near the foot of the window. Negative on purpose: it skips the
   section's top padding (.lx-sec). */
.lx-sl.is-pinned[id] { scroll-margin-top: calc(var(--lx-head) + 16px - clamp(88px, 11vw, 168px)); }
/* Pinned, the criteria light by tweened colour (landing.js); a CSS transition
   on top would lag the scrub and stutter. */
.lx-sl.is-pinned .lx-sl__dot,
.lx-sl.is-pinned .lx-sl__chip-label { transition: none; }
/* The headline shares the width with the folder, so it takes the side-column
   size; at full size it broke into four short lines. */
.lx-sl__copy .lx-h2 { font-size: var(--lx-fs-h2-col); }

.lx-sl__criteria { margin-top: clamp(32px, 4vw, 52px); }
.lx-sl__zone { margin: 0 0 16px; font-size: var(--lx-fs-sm); font-weight: 600; color: var(--lx-ink-3); }
.lx-sl__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; }
.lx-sl__chip { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; }
.lx-sl__dot {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--lx-line-2);
  border-radius: 999px;
  background: var(--lx-card);
  color: var(--lx-ink-3);
  box-shadow: var(--lx-shadow-sm);
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.lx-sl__dot .lx-ico { width: 22px; height: 22px; }
.lx-sl__chip-label {
  font-size: var(--lx-fs-xs);
  font-weight: 600;
  line-height: 1.25;
  color: var(--lx-ink-3);
  text-align: center;
  transition: color 220ms ease;
}
.lx-sl__chip.is-on:not([data-on="false"]) .lx-sl__dot { border-color: var(--lx-accent); background: var(--lx-accent); color: var(--lx-on-dark); }
.lx-sl__chip.is-on:not([data-on="false"]) .lx-sl__chip-label { color: var(--lx-ink); }

.lx-sl__figure { margin: 0; min-width: 0; }
.lx-sl__figure .lx-caption { margin-top: 18px; }

/* The folder: a rear sheet whose tab and top edge show above a front sheet
   with a dark tab, as in the owner's reference. */
.lx-folder {
  --lx-folder-lip: 46px;     /* how much of the rear sheet shows */
  --lx-folder-head: 50px;    /* the front sheet's dark tab band */
  position: relative;
  padding-top: calc(var(--lx-folder-lip) + var(--lx-folder-head));
}
.lx-folder__back,
.lx-folder__front { position: absolute; left: 0; right: 0; }
.lx-folder__back {
  top: 0;
  left: 22px;
  right: 22px;
  height: 60%;
  border: 1px solid var(--lx-line);
  border-radius: 20px 20px 0 0;
  background: var(--lx-surface);
}
.lx-folder__front {
  top: var(--lx-folder-lip);
  bottom: 0;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-card);
  background:
    linear-gradient(var(--lx-ink), var(--lx-ink)) 0 0 / 100% var(--lx-folder-head) no-repeat,
    var(--lx-card);
  box-shadow: var(--lx-shadow);
  /* The dark band is a tab on the left that steps down to a thin rail: the
     reference's folder notch, cut from the sheet's own top edge. */
  clip-path: polygon(0 0, 58% 0, calc(58% + 30px) 24px, 100% 24px, 100% 100%, 0 100%);
}
.lx-folder__tab {
  position: absolute;
  top: 14px;
  left: 20px;
  font-size: var(--lx-fs-sm);
  font-weight: 600;
  color: var(--lx-ink-2);
  white-space: nowrap;
}
.lx-folder__tab--front { top: 15px; left: 22px; color: var(--lx-on-dark); }

/* The rest of the market: cards filed in the rear tab, so only their top
   edges show above the front sheet, like papers in a folder. They are a little
   narrower than the shortlist's; the staircase scales every card to one size,
   so there they all match. */
.lx-folder__market {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
}
.lx-pcard--rest {
  position: absolute;
  top: calc(10px + var(--k) * 2px);
  /* Filed to the right of the tab label, all within the rear sheet. */
  left: calc(28% + var(--k) * 6.4%);
  width: 34%;
  rotate: calc((var(--k) - 2.5) * 1.2deg);
}

.lx-folder__grid {
  list-style: none;
  margin: 0;
  padding: 14px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* A grid item: min-width 0, or a nowrap label sets a floor the track cannot
   shrink below (§10). */
.lx-pcard--fit { min-width: 0; }

/* A practice card in the shortlist; its face is the shared .lx-lface. */
.lx-pcard {
  padding: 6px 6px 0;
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  background: var(--lx-card);
  box-shadow: var(--lx-shadow-sm);
  backface-visibility: hidden;
}

/* ═══ WHO'S HERE: a card gallery ═════════════════════════════════════════
   After the Apple Store's "Why Apple" gallery. Off-white cards on the white
   page (the page's rule: off-white only inside containers), text at the top,
   a picture of the buyer's scale at the bottom, a + that raises the card's
   closing line over the picture. The track bleeds to the window's right edge
   and its first card lines up with the copy above (--lx-gal-edge), so the
   next card always peeks. Native horizontal scrolling with snap; the arrows
   step one card. */
.lx-gal { margin-top: clamp(40px, 5vw, 64px); }
.lx-gal__track {
  --lx-gal-edge: max(var(--lx-gutter), calc((100% - var(--lx-max)) / 2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lx-gal-edge);
  padding-inline: var(--lx-gal-edge);
  /* Room for the cards' shadow and the focus ring, which overflow clips. */
  padding-block: 8px 28px;
  scrollbar-width: none;
}
.lx-gal__track::-webkit-scrollbar { display: none; }
.lx-gal__track:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; border-radius: var(--lx-r-card); }
.lx-gal__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; width: max-content; }
.lx-gal__item { flex: 0 0 clamp(296px, 36vw, 500px); scroll-snap-align: start; }

.lx-gal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: clamp(560px, 46vw, 640px);
  overflow: hidden;
  border-radius: var(--lx-r-card);
  background: var(--lx-surface);
  box-shadow: var(--lx-shadow-sm);
}
.lx-gal__text { padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.4vw, 36px) 0; }
.lx-gal__eyebrow { margin: 0 0 10px; font-size: var(--lx-fs-sm); font-weight: 600; color: var(--lx-ink); }
.lx-gal__lead {
  margin: 0 0 14px;
  font-size: var(--lx-fs-h3);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--lx-ink);
  text-wrap: balance;
}
.lx-gal__body { margin: 0; font-size: var(--lx-fs-sm); line-height: 1.55; color: var(--lx-ink-2); text-wrap: pretty; }

/* The lower part: the picture, and the closing line that covers it. */
.lx-gal__stage { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 240px; }
.lx-gal__visual { position: relative; flex: 1 1 auto; min-height: 240px; }
.lx-gal__more { padding: 0 clamp(24px, 2.4vw, 36px) clamp(28px, 2.6vw, 40px); }
.lx-gal__aside {
  margin: 0;
  max-width: 22ch;
  font-size: var(--lx-fs-statement);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--lx-ink);
  text-wrap: balance;
}

/* Enhanced (landing.js adds .is-ready): the closing line is a sheet that
   rises over the picture from the bottom edge, where the + is, and goes back
   the way it came. Transitions, so a second press mid-way reverses it from
   where it is; the iOS drawer curve. */
.lx-gal.is-ready .lx-gal__more {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  padding-right: 84px;
  background: var(--lx-surface);
  translate: 0 101%;
  visibility: hidden;
  transition: translate 420ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 420ms;
}
.lx-gal.is-ready .lx-gal__card.is-open .lx-gal__more {
  translate: 0 0;
  visibility: visible;
  transition: translate 420ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

.lx-gal__plus,
.lx-gal__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--da-charcoal) 8%, transparent);
  color: var(--lx-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, opacity 160ms ease, scale 120ms var(--lx-ease-out);
}
.lx-gal__plus:active,
.lx-gal__arrow:active { scale: 0.94; }
.lx-gal__plus:focus-visible,
.lx-gal__arrow:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 3px; }
.lx-gal__plus .lx-ico,
.lx-gal__arrow .lx-ico { width: 18px; height: 18px; }
.lx-gal__plus { position: absolute; z-index: 3; right: 20px; bottom: 20px; }
.lx-gal__plus .lx-ico { transition: rotate 240ms var(--lx-ease-out); }
.lx-gal__card.is-open .lx-gal__plus .lx-ico { rotate: 45deg; }
.lx-gal__arrow:disabled { opacity: 0.38; cursor: default; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .lx-gal__plus:hover,
  .lx-gal__arrow:not(:disabled):hover { background: color-mix(in srgb, var(--da-charcoal) 14%, transparent); }
}
.lx-gal__nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .lx-gal.is-ready .lx-gal__more { translate: 0 0; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .lx-gal.is-ready .lx-gal__card.is-open .lx-gal__more { opacity: 1; transition: opacity 200ms ease, visibility 0s; }
}

/* The pictures: transparent renders of the buyer's scale (a chair, three
   practices, a hub and its locations), contained in the stage and standing
   on its floor. Fitted by height on a wide card, so they centre clear of the
   + at the bottom right; a phone-width card, where they would fit by width,
   lifts them above the +. */
.lx-who { position: absolute; inset: 36px 24px 20px; display: block; }
.lx-who__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .lx-mkt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-sl__stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .lx-gal__item { flex-basis: 84vw; }
  .lx-gal__card { min-height: 600px; }
  .lx-who { bottom: 76px; }
  .lx-folder { --lx-folder-head: 44px; }
  /* The front tab's label is wider than 58% of a phone-width folder; move the
     notch past it so "look" is not cut by the slope. */
  .lx-folder__front { clip-path: polygon(0 0, 78% 0, calc(78% + 24px) 24px, 100% 24px, 100% 100%, 0 100%); }
  .lx-folder__grid { padding: 10px; gap: 8px; }
  .lx-sl__chips { gap: 12px 10px; }
  .lx-sl__chip { width: 72px; }
  .lx-mkt { grid-template-columns: minmax(0, 1fr); }
}