/* =============================================================================
   LANDING — the rebuilt /buyers and /brokers pages (docs/marketing-design-system.md §28)
   -----------------------------------------------------------------------------
   A new system, written from scratch. It shares nothing with .da-* (pages.css,
   da_system.css) except the brand: the six brand colours, Satoshi, the nav and
   the footer. Shared parts live here; what only one page uses lives in
   pages/buyers.css or pages/brokers.css.

   THE RULES THIS FILE KEEPS
   - One light theme for the whole page. The single dark plane is the closing
     CTA, which runs straight into the charcoal footer.
   - One accent: deep teal. The second headline line is a quieter TONE of the
     ink, not a second colour.
   - One shape scale: pill for anything you press, 14px for small surfaces,
     22-28px for cards and panels.
   - Every hidden "before" state is behind .lx-armed (set by
     marketing/landing/_head before first paint, removed if landing.js never
     arrives), so a failed script means a static page, never a blank one.
   - .lx-quiet (Reduce Motion) keeps every fade and drops every movement.
   - Colour literals: none. Everything resolves to colors_and_type.css.
   ============================================================================= */

.lx {
  /* Surfaces. The PAGE is pure white; the brand's off-white (bone) is kept
     for what sits on it: the hero stage, cards, panels, containers. An inner
     fill inside one of those flips back to white, so every nesting step still
     reads. */
  --lx-bg:       var(--white);
  --lx-surface:  var(--da-bone);
  --lx-card:     var(--white);   /* a card that sits ON an off-white container */
  --lx-inset:    clamp(8px, 1.4vw, 20px);   /* the hero and closing containers' gap to the window */
  --lx-r-stage:  clamp(22px, 2.6vw, 38px);
  --lx-wash:     color-mix(in srgb, var(--da-teal) 9%, var(--da-paper));
  /* Ink, three steps */
  --lx-ink:      var(--da-charcoal);
  --lx-ink-2:    color-mix(in srgb, var(--da-charcoal) 80%, var(--da-bone));
  --lx-ink-3:    var(--da-slate);
  /* The quieter second line of a headline. 64% clears 4.5:1 on bone (4.8)
     and on white (5.2): AA as body text, not only as large text. At 55% it
     passed only the large-text bar and read as disabled at a glance. */
  --lx-tone:     color-mix(in srgb, var(--da-charcoal) 64%, var(--da-bone));
  --lx-accent:   var(--da-deep-teal);
  --lx-accent-2: var(--da-teal);
  --lx-on-dark:  var(--da-paper);
  /* Lines */
  --lx-line:     color-mix(in srgb, var(--da-charcoal) 10%, transparent);
  --lx-line-2:   color-mix(in srgb, var(--da-charcoal) 20%, transparent);
  /* The edge of something you press (ghost button, FAQ toggle): 3.2:1 on
     white and bone, the non-text contrast bar. line-2 was 1.5:1. */
  --lx-line-3:   color-mix(in srgb, var(--da-charcoal) 50%, transparent);
  /* A kinetic word before it lights: 3.2:1 on white, so the line is readable
     at a glance before the scroll reaches it (an opacity dim was 2:1). */
  --lx-unlit:    color-mix(in srgb, var(--da-charcoal) 50%, var(--white));
  /* Elevation, tinted to the ink rather than black */
  --lx-shadow:   0 1px 2px color-mix(in srgb, var(--da-charcoal) 6%, transparent),
                 0 28px 56px -28px color-mix(in srgb, var(--da-charcoal) 26%, transparent);
  --lx-shadow-sm: 0 1px 2px color-mix(in srgb, var(--da-charcoal) 8%, transparent),
                  0 8px 20px -12px color-mix(in srgb, var(--da-charcoal) 22%, transparent);
  /* Shape */
  --lx-r-card:   26px;
  --lx-r-panel:  20px;
  --lx-r-sm:     14px;
  /* Motion. --lx-ease is the same curve as the site's --ease-reveal. */
  --lx-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --lx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Layout */
  --lx-max:      1280px;
  --lx-gutter:   clamp(20px, 4vw, 48px);
  --lx-head:     var(--nav-h, 90px);

  background: var(--lx-bg);
  color: var(--lx-ink);
  font-family: var(--font-brand);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* These two pages only (landing.css loads nowhere else): the white reaches
   the window edges and the nav, so no off-white band frames the page. */
body {
  --nav-bg: var(--white);
  background: var(--white);
}

.lx-wrap {
  max-width: calc(var(--lx-max) + 2 * var(--lx-gutter));
  margin-inline: auto;
  padding-inline: var(--lx-gutter);
}

.lx-sec { padding-block: clamp(88px, 11vw, 168px); }
/* An in-page link (See How It Works, the closers' next-section links) must land
   with its heading clear of the sticky header, whichever route got it there. */
.lx [id] { scroll-margin-top: calc(var(--lx-head) + 24px); }
.lx-sec + .lx-sec,
.lx-map + .lx-sec { border-top: 1px solid var(--lx-line); }

.lx-ico { width: 20px; height: 20px; flex: none; }

/* ═══ TYPE ═════════════════════════════════════════════════════════════════ */
.lx-kicker {
  margin: 0;
  font-size: var(--lx-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--lx-accent);
}

.lx-h1 {
  margin: 20px 0 0;
  font-family: var(--font-brand);
  font-size: var(--lx-fs-h1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--lx-ink);
}
.lx-h2 {
  margin: 16px 0 0;
  font-family: var(--font-brand);
  font-size: var(--lx-fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.036em;
  color: var(--lx-ink);
}
.lx-h3 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--lx-fs-h3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.026em;
  color: var(--lx-ink);
  text-wrap: balance;
}
.lx-line { display: block; text-wrap: balance; }
.lx-tone { color: var(--lx-tone); }

.lx-lede {
  margin: 24px 0 0;
  max-width: 40em;
  font-size: var(--lx-fs-lede);
  line-height: 1.55;
  color: var(--lx-ink-2);
  text-wrap: pretty;
}
.lx-p {
  margin: 0;
  max-width: 38em;
  font-size: var(--lx-fs-body);
  line-height: 1.7;
  color: var(--lx-ink-2);
  text-wrap: pretty;
}
.lx-p + .lx-p { margin-top: 1em; }
.lx-lede + .lx-p { margin-top: 20px; }
.lx-prose { margin-top: 36px; }
.lx-note {
  margin: 24px 0 0;
  font-size: var(--lx-fs-sm);
  line-height: 1.5;
  color: var(--lx-ink-3);
}
.lx-caption {
  margin: 20px 0 0;
  font-size: var(--lx-fs-sm);
  line-height: 1.5;
  color: var(--lx-ink-3);
}

/* ═══ BUTTONS AND LINKS ════════════════════════════════════════════════════ */
.lx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}
.lx-actions--center { justify-content: center; }

/* A button is two layers of the same label (MarketingLandingHelper#lx_button):
   the face, and a fill in the hover colours that wipes in from the left with a
   clip-path, so the label changes colour exactly at the fill's leading edge
   (Emil Kowalski's clip-path colour transition) instead of the whole button
   cross-fading. Each variant names its rest colours and its fill colours.

   The label colour is set on the LAYERS, never left to inherit from the <a>:
   colors_and_type.css has a global `a:hover { color: var(--brand-600) }` that
   outranks .lx-btn, and it turned the primary label teal on its own teal
   hover. */
.lx-btn {
  --lx-btn-bg: var(--lx-ink);
  --lx-btn-fg: var(--lx-on-dark);
  --lx-btn-line: transparent;
  --lx-btn-fill: var(--lx-accent);
  --lx-btn-fill-fg: var(--lx-on-dark);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--lx-btn-line);
  border-radius: 999px;
  background: var(--lx-btn-bg);
  color: var(--lx-btn-fg);
  font: 600 var(--lx-fs-sm)/1 var(--font-brand);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 160ms var(--lx-ease-out),
              background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.lx-btn:active { transform: scale(0.97); }
.lx-btn:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 3px; border-radius: 999px; }
.lx-btn__face,
.lx-btn__fill { display: inline-flex; align-items: center; gap: 10px; }
.lx-btn__face { color: var(--lx-btn-fg); }
.lx-btn__fill {
  position: absolute;
  z-index: 1;
  inset: -1px;            /* over the border too, so a ghost's outline is covered */
  justify-content: center;
  border-radius: inherit;
  background: var(--lx-btn-fill);
  color: var(--lx-btn-fill-fg);
  pointer-events: none;
  /* At rest: a zero-width sliver at the left edge. Leaving, it retracts fast
     (200ms); arriving, it takes 300ms (below). */
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 200ms var(--lx-ease-out);
}
.lx-btn__ico { width: 16px; height: 16px; flex: none; transition: transform 280ms var(--lx-ease-out); }

/* Rest colours, then the fill each one wipes to (every pair 5:1 or better). */
.lx-btn--ghost {
  --lx-btn-bg: transparent; --lx-btn-fg: var(--lx-ink); --lx-btn-line: var(--lx-line-3);
  --lx-btn-fill: var(--lx-ink); --lx-btn-fill-fg: var(--lx-on-dark);
}
.lx-btn--light {
  --lx-btn-bg: var(--da-paper); --lx-btn-fg: var(--lx-ink);
  --lx-btn-fill: var(--lx-accent-2); --lx-btn-fill-fg: var(--lx-ink);
}
.lx-btn--ghost-light {
  --lx-btn-bg: transparent;
  --lx-btn-fg: var(--da-paper);
  --lx-btn-line: color-mix(in srgb, var(--da-paper) 45%, transparent);   /* 4.3:1 on charcoal */
  --lx-btn-fill: var(--da-paper); --lx-btn-fill-fg: var(--lx-ink);
}
/* Keyboard focus shows the same filled state as a hover. */
.lx-btn:focus-visible .lx-btn__fill { clip-path: inset(0 0 0 0 round 999px); transition-duration: 300ms; }

/* With a mouse, landing.js (initButtons) adds .is-radial and the fill is a
   circle that grows from the exact point the cursor came in at and drains
   out through the point it left by (after GSAP's own site). --lx-fill-r/x/y
   are written by a GSAP tween, so the CSS transition is off; the label
   still changes colour exactly at the circle's edge, because the fill
   carries its own copy of it. */
.lx-btn.is-radial .lx-btn__fill,
.lx-btn.is-radial:hover .lx-btn__fill {
  clip-path: circle(var(--lx-fill-r, 0px) at var(--lx-fill-x, 50%) var(--lx-fill-y, 50%));
  transition: none;
}
.lx-btn.is-radial:focus-visible .lx-btn__fill { clip-path: inset(0 0 0 0 round 999px); }

.lx-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: var(--lx-fs-sm);
  font-weight: 600;
  color: var(--lx-ink);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, opacity 120ms ease;
}
.lx-link:active { opacity: 0.72; }
.lx-link span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
}
.lx-link__ico { width: 16px; height: 16px; flex: none; transition: transform 280ms var(--lx-ease-out); }
.lx-link:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 4px; border-radius: 4px; }

/* Hover only where there is a real pointer: a tap must not leave a button
   stuck in its hover state. */
@media (hover: hover) and (pointer: fine) {
  .lx-btn:hover .lx-btn__fill { clip-path: inset(0 0 0 0 round 999px); transition-duration: 300ms; }
  .lx-btn:hover .lx-btn__ico,
  .lx-link:hover .lx-link__ico { transform: translateX(4px); }
  .lx-link:hover { color: var(--lx-accent); }
}

.lx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--lx-wash);
  color: var(--lx-accent);
  font-size: var(--lx-fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.lx-chip .lx-ico { width: 14px; height: 14px; }
.lx-chip--on-dark {
  background: color-mix(in srgb, var(--da-teal) 16%, transparent);   /* 5:1; 22% was 4.47:1 */
  color: var(--lx-accent-2);
}

/* ═══ HERO ═════════════════════════════════════════════════════════════════
   A rounded off-white stage, inset from the window, after the reference's
   hero container: copy on top, the deck of practice cards below
   (marketing/landing/_hero). The deck is driven by custom properties on ONE
   element, so landing.js tweens a handful of numbers and every card follows:
     --spread  0 = one stacked card, 1 = fanned
     --tx/--ty the deck's lean;  --px/--py the pointer's extra lean (unitless
               deg), scaled by --lean so the scroll can switch it off
   The static values below are the finished fan, which is what renders with
   no script, on a phone and under Reduce Motion.

   PINNED (.lx-hero.is-pinned, set by landing.js on a wide screen with motion
   allowed): the stage takes the viewport's height under the nav, the deck
   fills the space under the copy, and .lx-morph turns the deck into the
   product. The static .lx-screen figure is then visually hidden, not removed,
   because it carries the screenshot's alt text. */
.lx-hero { position: relative; }
.lx-hero__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: 0 var(--lx-inset);
  padding: clamp(40px, 5vw, 76px) var(--lx-gutter) clamp(32px, 4vw, 56px);
  overflow: hidden;
  border-radius: var(--lx-r-stage);
  background:
    radial-gradient(60% 55% at 50% 100%, color-mix(in srgb, var(--da-teal) 12%, transparent), transparent),
    var(--lx-surface);
  text-align: center;
}
.lx-hero__head,
.lx-hero__foot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.lx-hero__title { max-width: 20em; text-wrap: balance; }
/* Break between sentences, never inside one. A phone is too narrow for that
   promise, so there the words wrap normally. */
@media (min-width: 768px) { .lx-hero__title > span { white-space: nowrap; } }
/* Inline-block so each sentence can rise on its own (a transform does nothing
   on a plain inline span). */
.lx-hero__title > span { display: inline-block; }
.lx-hero__lede { margin: 0 auto; max-width: 58em; }
.lx-hero .lx-actions { margin-top: 30px; }

.lx-deck {
  --spread: 1;
  --tx: 12deg;
  --ty: 0deg;
  --px: 0;
  --py: 0;
  --lean: 1;
  --cw: clamp(136px, 16.5vw, 236px);
  --gap: clamp(58px, 11.5vw, 172px);
  position: relative;
  z-index: 1;
  height: clamp(210px, 32vh, 330px);
  margin-block: clamp(24px, 3vw, 44px);
  perspective: 1500px;
  perspective-origin: 50% 30%;
  pointer-events: none;
}
.lx-deck__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--tx) + var(--py) * var(--lean) * 1deg))
    rotateY(calc(var(--ty) + var(--px) * var(--lean) * 1deg));
}
.lx-deck__cards { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.lx-deck__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  translate: 0 -50%;
  padding: 7px 7px 0;
  border: 1px solid var(--lx-line);
  border-radius: clamp(12px, 1.3vw, 18px);
  background: var(--lx-card);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--da-charcoal) 8%, transparent),
    0 30px 50px -24px color-mix(in srgb, var(--da-charcoal) 38%, transparent);
  /* Each card's place in the fan is its index (--i, -2..2) and its distance
     from the centre (--d), multiplied by --spread. The 1px-per-step base depth
     keeps a collapsed stack from z-fighting. */
  transform:
    translateX(calc(var(--i) * var(--gap) * var(--spread)))
    translateY(calc(var(--d) * 14px * var(--spread)))
    translateZ(calc((2 - var(--d)) * (30px * var(--spread) + 1px)))
    rotateY(calc(var(--i) * -11deg * var(--spread)))
    rotateZ(calc(var(--i) * 4deg * var(--spread)));
  backface-visibility: hidden;
}

/* A practice as the product's listing card in miniature (_listing_face): the
   cover, the asking price, specialty and place, and on the deck the two
   figures every Browse card leads with. A card in a marketplace, not a print
   in an album: the cover is a short 2:1 inset, the figure leads, and the
   words are the product's own (asking, Collections, EBITDA). The face is a
   size container so its type scales with whatever card holds it. */
.lx-lface { container-type: inline-size; text-align: left; }
.lx-lface__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: clamp(8px, 0.9vw, 12px);
  background: var(--lx-surface);
}
.lx-lface__media picture { display: block; height: 100%; }
.lx-lface__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-lface__media.is-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--lx-ink-3);
  font-size: var(--lx-fs-card-meta);
  font-weight: 500;
}
.lx-lface__media.is-empty .lx-ico { width: 18px; height: 18px; }
.lx-lface__body { display: grid; gap: 2px; padding: 9px 3px 10px; }
.lx-lface__price { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.lx-lface__amount {
  font-size: var(--lx-fs-card-figure);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
  font-variant-numeric: tabular-nums;
}
/* Small text tracks slightly open (+0.01em): at 10 to 13px the letters read
   too tight at the face's default spacing. */
.lx-lface__cap { font-size: var(--lx-fs-card-micro); font-weight: 500; letter-spacing: 0.01em; color: var(--lx-ink-3); }
.lx-lface__fit {
  display: grid;
  place-items: center;
  align-self: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex: none;
  border-radius: 999px;
  background: var(--lx-accent);
}
.lx-lface__fit .lx-ico { width: 11px; height: 11px; color: var(--lx-on-dark); }
.lx-lface__meta {
  display: flex;
  gap: 0.4em;
  min-width: 0;
  font-size: var(--lx-fs-card-meta);
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lx-lface__spec { flex: none; font-weight: 600; color: var(--lx-ink-2); }
.lx-lface__place { overflow: hidden; text-overflow: ellipsis; color: var(--lx-ink-3); }
.lx-lface__place::before { content: "\00B7"; margin-right: 0.4em; }
/* One line of figures under a hairline. A figure that does not fit wraps to a
   second line, which is clipped, so a narrow card shows Collections alone
   rather than a squeezed pair. */
.lx-lface__stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  height: calc(1.4 * var(--lx-fs-card-meta));
  overflow: hidden;
  margin-top: 6px;
  padding-top: 6px;
  box-sizing: content-box;
  border-top: 1px solid var(--lx-line);
  line-height: 1.4;
  white-space: nowrap;
}
.lx-lface__stat { display: flex; align-items: baseline; gap: 4px; }
.lx-lface__k { font-size: var(--lx-fs-card-micro); font-weight: 500; letter-spacing: 0.01em; color: var(--lx-ink-3); }
.lx-lface__v {
  font-size: var(--lx-fs-card-meta);
  font-weight: 600;
  color: var(--lx-ink);
  font-variant-numeric: tabular-nums;
}

/* The container the deck becomes: white, rounded, the product inside it.
   Only the pinned sequence shows it. landing.js lays it out ONCE, over the
   largest box it will show, and draws every in-between box without layout:
   the edge and the sheet are clip-paths, the shadow and the contents are
   transforms. Resizing a box with a 100px shadow on every scroll frame was
   the hero's remaining paint cost. Hidden until the sequence fades it in.
   pointer-events: none, always: it is laid out over the whole stage from the
   first paint, above the lede and CTAs, and while invisible it swallowed
   every click on "Register Your Criteria" and "See How It Works". It is a
   picture; nothing in it is pressable. */
.lx-morph {
  --lx-morph-pad: clamp(6px, 0.7vw, 10px);
  position: absolute;
  z-index: 3;
  display: none;
  opacity: 0;
  pointer-events: none;
  contain: layout;
}
.lx-morph__shadow,
.lx-morph__edge,
.lx-morph__sheet { position: absolute; inset: 0; }
/* Drawn at full size and scaled down: a blurred shadow survives scaling. */
.lx-morph__shadow {
  border-radius: 22px;
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--da-charcoal) 6%, transparent),
    0 50px 100px -40px color-mix(in srgb, var(--da-charcoal) 40%, transparent);
  transform-origin: 0 0;
  will-change: transform;
}
/* The 1px edge is a ring: this layer, clipped to the box, under the sheet
   clipped 1px inside it. A real border would sit on the layout box. */
.lx-morph__edge { background: linear-gradient(var(--lx-line), var(--lx-line)), var(--lx-card); }
.lx-morph__sheet { overflow: hidden; background: var(--lx-card); }
/* Held at the top card's width (--lx-face-w), placed by landing.js, so it
   does not stretch as the container opens; it fades instead. */
.lx-morph__face {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--lx-face-w, 224px) - 14px);
}
/* Fixed at the OPEN width and scaled with the container, so the 1800px
   screenshot is laid out and rastered once. */
.lx-morph__shot {
  position: absolute;
  top: var(--lx-morph-pad);
  left: var(--lx-morph-pad);
  will-change: transform;
}
.lx-morph__shot picture { display: block; }
.lx-morph__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--lx-r-stage) * 0.5);
}

/* :is(...) adds html.lx-pin, which the head script sets before first paint
   when the pinned sequence will run, so the hero is laid out pinned from the
   first frame instead of changing shape when landing.js takes over. */
:is(.lx-hero.is-pinned, .lx-armed.lx-pin .lx-hero) .lx-hero__stage {
  height: calc(100svh - var(--lx-pin-top, 90px) - var(--lx-inset));
  justify-content: center;
}
/* The deck takes whatever height the copy leaves, so the CTAs always sit
   inside the stage at rest, however short the window. */
:is(.lx-hero.is-pinned, .lx-armed.lx-pin .lx-hero) .lx-deck { flex: 1 1 auto; height: auto; min-height: 170px; max-height: 360px; }
:is(.lx-hero.is-pinned, .lx-armed.lx-pin .lx-hero) .lx-morph { display: block; }
:is(.lx-hero.is-pinned, .lx-armed.lx-pin .lx-hero) .lx-screen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The product, outside the pinned sequence: a rounded off-white container
   with the white screen inside it, as in the reference. */
.lx-screen { margin: clamp(32px, 4vw, 56px) auto 0; perspective: 1800px; }
.lx-screen__panel {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(6px, 0.8vw, 12px);
  border-radius: var(--lx-r-stage);
  background: var(--lx-surface);
  box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--da-charcoal) 40%, transparent);
  transform-origin: 50% 0;
}
.lx-screen picture { display: block; }
.lx-screen__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lx-line);
  border-radius: calc(var(--lx-r-stage) * 0.6);
  background: var(--white);
}

/* ═══ INTRO BAND ═══════════════════════════════════════════════════════════ */
.lx-intro {
  padding-block: clamp(56px, 7vw, 104px) clamp(80px, 9vw, 136px);
  border-top: 1px solid var(--lx-line);
}
.lx-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: start;
}
.lx-intro__grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lx-intro__statement {
  margin: 0;
  font-size: var(--lx-fs-statement);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--lx-ink);
  text-wrap: pretty;
}

.lx-roles { margin: 0; border-top: 1px solid var(--lx-line); }
.lx-roles__row { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--lx-line); }
.lx-roles__row dt { font-size: var(--lx-fs-sm); font-weight: 600; color: var(--lx-ink-3); }
.lx-roles__row dd {
  margin: 0;
  font-size: var(--lx-fs-lede);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--lx-ink);
}
.lx-roles__row--you dt { color: var(--lx-accent); }

.lx-values {
  list-style: none;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--lx-line);
}
.lx-values__item { min-width: 0; padding: 32px 28px 0 0; }
.lx-values__item + .lx-values__item { padding-left: 28px; border-left: 1px solid var(--lx-line); }
.lx-values--grid {
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 0;
}
.lx-values--grid .lx-values__item,
.lx-values--grid .lx-values__item + .lx-values__item {
  padding: 24px;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-panel);
  background: var(--lx-surface);
}
.lx-values__ico {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--lx-wash);
  color: var(--lx-accent);
}
.lx-values__title {
  margin: 18px 0 0;
  font-family: var(--font-brand);
  font-size: var(--lx-fs-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--lx-ink);
}
.lx-values__body {
  margin: 6px 0 0;
  font-size: var(--lx-fs-sm);
  line-height: 1.55;
  color: var(--lx-ink-2);
}

/* ═══ SECTION CLOSER ═══════════════════════════════════════════════════════ */
.lx-closer {
  margin-top: clamp(72px, 9vw, 128px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--lx-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px;
  align-items: end;
}
.lx-closer__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--lx-fs-h3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.026em;
  color: var(--lx-ink);
}
.lx-closer__body {
  margin: 16px 0 0;
  max-width: 40em;
  font-size: var(--lx-fs-body);
  line-height: 1.6;
  color: var(--lx-ink-2);
}

/* ═══ MAP ══════════════════════════════════════════════════════════════════
   The shared figure (marketing/_listings_map_figure) reads the --da-sec-*
   role tokens a .da-sec band would normally set, so this section sets them
   itself. Nothing inside the map is restyled beyond its frame. */
.lx-map {
  --da-sec-bg: var(--lx-bg);
  --da-sec-ink: var(--lx-ink);
  --da-sec-body: var(--lx-ink-2);
  --da-sec-muted: var(--lx-ink-3);
  --da-sec-accent: var(--lx-accent);
  border-top: 1px solid var(--lx-line);
}
.lx-map__head { max-width: 820px; }
.lx-map__frame { margin-top: clamp(40px, 5vw, 64px); }
.lx-map .dmap { margin: 0; max-width: none; }   /* the shared figure caps itself at 70%, centred */
.lx-map .dmap__stage { border-radius: var(--lx-r-card); box-shadow: var(--lx-shadow); }
.lx-map__cta { margin: 32px 0 0; }

/* ═══ PARTICIPANTS BENTO ═══════════════════════════════════════════════════
   Seven people, seven cells: the page's subject large and dark, the four
   transaction professionals and the other principals around it. */
.lx-eco__cols {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 48px;
  max-width: 1040px;
}
.lx-eco__cols .lx-p + .lx-p { margin-top: 0; }
.lx-eco__figure { margin: clamp(48px, 6vw, 80px) 0 0; }

.lx-bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lx-bento__cell {
  position: relative;
  min-width: 0;
  min-height: 228px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 28px;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-panel);
  background: var(--lx-surface);
}
.lx-bento__cell--wide { grid-column: span 2; }
.lx-bento__cell--subject {
  grid-column: span 2;
  grid-row: span 2;
  overflow: hidden;
  border-color: var(--lx-ink);
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--da-teal) 26%, transparent), transparent),
    var(--lx-ink);
  color: var(--lx-on-dark);
}
.lx-bento__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--lx-r-sm);
  background: var(--lx-wash);
  color: var(--lx-accent);
}
.lx-bento__cell--subject .lx-bento__ico {
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--da-teal) 20%, transparent);
  color: var(--lx-accent-2);
}
.lx-bento__name {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-brand);
  font-size: var(--lx-fs-lede);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--lx-ink);
}
.lx-bento__body {
  margin: 8px 0 0;
  max-width: 34em;
  font-size: var(--lx-fs-sm);
  line-height: 1.55;
  color: var(--lx-ink-2);
}
.lx-bento__cell--subject .lx-bento__name {
  font-size: var(--lx-fs-h2);
  font-weight: 500;
  letter-spacing: -0.036em;
  line-height: 1.05;
  color: var(--lx-on-dark);
}
.lx-bento__cell--subject .lx-bento__body {
  margin-top: 14px;
  font-size: var(--lx-fs-lede);
  color: color-mix(in srgb, var(--da-paper) 74%, transparent);
}
/* No hover: the cells are not links, and a lift promised a click. (It also
   never moved: GSAP's reveal leaves an inline transform that beat it.) */

/* ═══ PRODUCT STACK ════════════════════════════════════════════════════════
   Sticky, so the cards stack with no JavaScript at all. landing.js recedes the
   card underneath (scale on motion, a faint veil on Reduce Motion). */
.lx-stack {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  gap: 24px;
}
.lx-card {
  position: sticky;
  top: calc(var(--lx-head) + 24px + var(--i, 0) * 18px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  min-height: min(560px, calc(100dvh - var(--lx-head) - 120px));
  padding: clamp(28px, 4vw, 64px);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-card);
  background: var(--lx-surface);
  box-shadow: var(--lx-shadow);
  overflow: hidden;
  transform-origin: 50% 0;
}
.lx-card--deal_team { background: var(--lx-wash); }
.lx-card__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: var(--lx-ink);
  opacity: 0;
  pointer-events: none;
}
.lx-card__text { min-width: 0; }
.lx-card .lx-h3 { font-size: var(--lx-fs-h2); line-height: 1.06; letter-spacing: -0.034em; }
.lx-card .lx-h3 + .lx-p { margin-top: 24px; }
.lx-card__visual { min-width: 0; }
.lx-lockup {
  margin: 0 0 22px;
  font-size: var(--lx-fs-sm);
  font-weight: 500;
  color: var(--lx-ink-3);
}
.lx-lockup strong { font-weight: 700; color: var(--lx-ink); }

/* The previews. Small, honest pictures of each part, built from real labels. */
.lx-pv {
  padding: 20px;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-panel);
  background: var(--lx-bg);
  box-shadow: var(--lx-shadow-sm);
}
.lx-card--deal_team .lx-pv { background: var(--lx-surface); }
.lx-pv__title {
  margin: 0 0 14px;
  font-size: var(--lx-fs-xs);
  font-weight: 600;
  color: var(--lx-ink-3);
}
.lx-pv__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lx-pv__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-sm);
  background: var(--lx-surface);
}
.lx-card--deal_team .lx-pv__row { background: var(--lx-bg); }
.lx-pv__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--lx-wash);
  color: var(--lx-accent);
}
.lx-pv__main { min-width: 0; }
.lx-pv__name,
.lx-pv__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-pv__name { font-size: var(--lx-fs-sm); font-weight: 600; color: var(--lx-ink); }
.lx-pv__meta { margin-top: 2px; font-size: var(--lx-fs-xs); color: var(--lx-ink-3); }
.lx-pv__value {
  font-size: var(--lx-fs-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}
.lx-pv__state {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--lx-line-2);
  border-radius: 999px;
  color: var(--lx-ink-3);
}
.lx-pv__state .lx-ico { width: 15px; height: 15px; }
.lx-pv__state.is-yours { border-color: var(--lx-accent); background: var(--lx-accent); color: var(--lx-on-dark); }

.lx-pv--room { display: grid; gap: 12px; }
.lx-pv__hub {
  padding: 22px;
  border-radius: var(--lx-r-sm);
  background:
    radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--da-teal) 24%, transparent), transparent),
    var(--lx-ink);
  color: var(--lx-on-dark);
}
.lx-pv__pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--da-teal) 22%, transparent);
  color: var(--lx-on-dark);   /* 7:1; teal on its own tint was 3 to 3.7:1 */
  font-size: var(--lx-fs-xs);
  font-weight: 600;
}
.lx-pv__people { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lx-pv__people li {
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--da-paper) 10%, transparent);
  font-size: var(--lx-fs-xs);
  font-weight: 500;
}
.lx-pv__rooms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lx-pv__rooms li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--lx-line);
  border-radius: 12px;
  background: var(--lx-surface);
  font-size: var(--lx-fs-sm);
  font-weight: 500;
  color: var(--lx-ink);
}
.lx-pv__rooms .lx-ico { width: 17px; height: 17px; color: var(--lx-accent); }

/* ═══ KINETIC SUMMARY ══════════════════════════════════════════════════════ */
.lx-kinetic { margin-top: clamp(104px, 13vw, 192px); display: grid; gap: 6px; }
.lx-kinetic__line {
  margin: 0;
  font-size: var(--lx-fs-kinetic);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.042em;
  color: var(--lx-ink);
  text-wrap: balance;
}
.lx-kinetic__line .lx-tone { color: var(--lx-accent); }

.lx-parts__foot {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--lx-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.lx-parts__foot .lx-note { margin: 0; max-width: 34em; }
.lx-parts__foot .lx-actions { margin: 0; gap: 12px 28px; }

/* ═══ FAQ ══════════════════════════════════════════════════════════════════ */
.lx-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: start;
}
.lx-faq__head { position: sticky; top: calc(var(--lx-head) + 48px); }
.lx-faq__list { border-top: 1px solid var(--lx-line); }
.lx-faq__item { border-bottom: 1px solid var(--lx-line); }
.lx-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--lx-fs-lede);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--lx-ink);
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}
.lx-faq__q::-webkit-details-marker { display: none; }
.lx-faq__q:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 4px; border-radius: 6px; }
.lx-faq__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--lx-line-3);
  border-radius: 999px;
  color: var(--lx-ink);
  transition: transform 240ms var(--lx-ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.lx-faq__toggle .lx-ico { width: 16px; height: 16px; }
/* .is-closing is set the moment a close is clicked, so the cross turns back
   with the answer instead of after it ([open] only clears when the close
   animation ends). */
.lx-faq__item[open]:not(.is-closing) .lx-faq__toggle {
  transform: rotate(45deg);
  border-color: var(--lx-ink);
  background: var(--lx-ink);
  color: var(--lx-on-dark);
}
.lx-faq__a { overflow: hidden; }
.lx-faq__a p {
  margin: 0;
  max-width: 40em;
  padding: 0 56px 30px 0;
  font-size: var(--lx-fs-body);
  line-height: 1.7;
  color: var(--lx-ink-2);
}
@media (hover: hover) and (pointer: fine) {
  .lx-faq__q:hover { color: var(--lx-accent); }
  .lx-faq__q:hover .lx-faq__toggle { border-color: var(--lx-ink); }
}

/* ═══ CLOSING CTA ══════════════════════════════════════════════════════════ */
.lx-final {
  --lx-tone: color-mix(in srgb, var(--da-paper) 50%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* An inset rounded container, like the hero stage: the white page shows
     round it, and the charcoal footer follows after a gap. */
  margin: clamp(48px, 6vw, 88px) var(--lx-inset) var(--lx-inset);
  border-radius: var(--lx-r-stage);
  padding-block: clamp(112px, 14vw, 208px) clamp(72px, 9vw, 120px);
  background: var(--da-charcoal);
  color: var(--lx-on-dark);
  text-align: center;
}
.lx-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -40%;
  width: min(120vw, 1400px);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--da-teal) 20%, transparent), transparent);
  pointer-events: none;
}
.lx-final__inner { display: flex; flex-direction: column; align-items: center; }
.lx-final__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--lx-fs-kinetic);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.042em;
  color: var(--lx-on-dark);
}
.lx-final__body {
  margin: 28px auto 0;
  max-width: 36em;
  font-size: var(--lx-fs-lede);
  line-height: 1.55;
  color: color-mix(in srgb, var(--da-paper) 74%, transparent);
}
.lx-final .lx-actions { margin-top: 40px; }
.lx-final__note {
  margin: 24px 0 0;
  font-size: var(--lx-fs-sm);
  color: color-mix(in srgb, var(--da-paper) 62%, transparent);
}
.lx-final__tagline {
  margin: clamp(80px, 10vw, 136px) 0 0;
  padding-top: 32px;
  width: 100%;
  border-top: 1px solid color-mix(in srgb, var(--da-paper) 12%, transparent);
  font-size: var(--lx-fs-sm);
  font-weight: 500;
  color: color-mix(in srgb, var(--da-paper) 62%, transparent);
}
.lx-final .lx-btn:focus-visible { outline-color: var(--lx-accent-2); }

/* The nav as a material: translucent white with a blur, so the page scrolls
   visibly beneath it instead of vanishing at an opaque edge (these two pages
   only; landing.css loads nowhere else). Open as a drawer it turns solid:
   one translucent surface on another loses legibility. */
.marketing-chrome .site-nav:not(.is-open) {
  background: color-mix(in srgb, var(--white) 76%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
@media (prefers-reduced-transparency: reduce) {
  .marketing-chrome .site-nav:not(.is-open) { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Increase Contrast: every hairline and every quieter grey steps up. The
   nav goes solid and takes a defined edge. */
@media (prefers-contrast: more) {
  .lx {
    --lx-line:   color-mix(in srgb, var(--da-charcoal) 30%, transparent);
    --lx-line-2: color-mix(in srgb, var(--da-charcoal) 45%, transparent);
    --lx-line-3: var(--lx-ink);
    --lx-ink-3:  color-mix(in srgb, var(--da-charcoal) 82%, var(--da-slate));
    --lx-tone:   color-mix(in srgb, var(--da-charcoal) 82%, var(--da-bone));
    --lx-unlit:  color-mix(in srgb, var(--da-charcoal) 66%, var(--white));
  }
  .marketing-chrome .site-nav:not(.is-open) {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--da-charcoal) 30%, transparent);
  }
}

/* The map's own focus ring (teal 45%) is 1.5:1 on this page's white; the
   page's ring is the solid accent. Scoped here so home keeps its map as is. */
.lx-map :is(.dmap__panel-close, .dmap__reset, .dmap__btn):focus-visible { box-shadow: 0 0 0 2px var(--lx-accent); }

/* Reduce Motion, for what CSS moves on its own (landing.js handles the rest
   through .lx-quiet): presses, arrow nudges and the FAQ cross change state
   without travelling. Colour and opacity transitions stay. */
@media (prefers-reduced-motion: reduce) {
  .lx-btn:active { transform: none; }
  /* The fill fades in place instead of wiping across. */
  .lx-btn__fill { clip-path: inset(0 0 0 0 round 999px); opacity: 0; transition: opacity 200ms ease; }
  .lx-btn:hover .lx-btn__fill,
  .lx-btn:focus-visible .lx-btn__fill { opacity: 1; }
  .lx-btn__ico,
  .lx-link__ico { transition: none; }
  .lx-faq__toggle { transition-property: background-color, border-color, color; }
}

/* ═══ MOTION: hidden "before" states ═══════════════════════════════════════
   Behind .lx-armed only. landing.js animates each to its rest state; if it
   never arrives, the gate drops the class and these never applied. */
.lx-armed .lx [data-lx-in],
.lx-armed .lx [data-lx-stagger] > *,
.lx-armed .lx [data-lx-intro],
.lx-armed .lx [data-lx-deck] { opacity: 0; }
/* The hero's lede and CTAs are also out of reach until they are visible: an
   invisible button must not take a click. landing.js brings them in with
   autoAlpha. */
.lx-armed .lx .lx-hero__foot [data-lx-intro] { visibility: hidden; }

.lx-armed:not(.lx-quiet) .lx [data-lx-in],
.lx-armed:not(.lx-quiet) .lx [data-lx-stagger] > *,
.lx-armed:not(.lx-quiet) .lx [data-lx-intro] { transform: translateY(18px); }
/* The deck arrives as one card, leaning hard, and fans out from there. */
.lx-armed:not(.lx-quiet) .lx [data-lx-deck] { --spread: 0; --tx: 28deg; --ty: -26deg; }

/* Headings fade and rise line by line (landing.js#riseText); until then they
   are held back. */
.lx-armed .lx [data-lx-words],
.lx-armed .lx .lx-h2:not([data-lx-kinetic]),
.lx-armed .lx .lx-closer__title,
.lx-armed .lx .lx-final__title { opacity: 0; }

/* Unlit, but readable at a glance: a lighter ink, never an opacity dim (0.32
   gave 2:1, and 1.6:1 on the teal words). landing.js tweens each word's
   colour to its parent's. */
.lx-armed .lx [data-lx-kinetic] .lx-word { color: var(--lx-unlit); }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   Below 1024 every two-column layout stacks; below 900 the sticky devices
   (product stack, FAQ head) let go; below 560 grids become one column. */
@media (max-width: 1023px) {
  .lx-intro__grid,
  .lx-intro__grid--split { grid-template-columns: minmax(0, 1fr); }
  .lx-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-values__item,
  .lx-values__item + .lx-values__item { padding: 28px 24px 28px 0; border-left: 0; border-bottom: 1px solid var(--lx-line); }
  .lx-values__item:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--lx-line); }
  .lx-values--grid .lx-values__item:nth-child(even) { padding-left: 24px; }
  .lx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-bento__cell--subject { grid-row: auto; min-height: 300px; }
}
@media (max-width: 899px) {
  .lx-card {
    position: relative;
    top: auto;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .lx-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .lx-faq__head { position: static; }
  .lx-eco__cols { grid-template-columns: minmax(0, 1fr); }
  .lx-eco__cols .lx-p + .lx-p { margin-top: 1em; }
}
@media (max-width: 767px) {
  .lx-closer { grid-template-columns: minmax(0, 1fr); }
  .lx-closer .lx-link { justify-self: start; }
  .lx-faq__a p { padding-right: 0; }
}
/* A phone shows three cards, not five. */
@media (max-width: 559px) {
  .lx-deck { --gap: 21vw; --cw: 34vw; height: 46vw; }
  .lx-deck__card[style*="--d: 2"] { display: none; }
  .lx-hero__lede .lx-line { display: inline; }
}
@media (max-width: 559px) {
  .lx-values,
  .lx-values--grid,
  .lx-bento { grid-template-columns: minmax(0, 1fr); }
  .lx-values__item,
  .lx-values__item + .lx-values__item,
  .lx-values__item:nth-child(even) { padding: 24px 0; border-left: 0; }
  .lx-values--grid .lx-values__item,
  .lx-values--grid .lx-values__item + .lx-values__item,
  .lx-values--grid .lx-values__item:nth-child(even) { padding: 22px; border: 1px solid var(--lx-line); }
  .lx-bento__cell--wide,
  .lx-bento__cell--subject { grid-column: auto; }
  .lx-bento__cell { min-height: 0; }
  .lx-pv__rooms { grid-template-columns: minmax(0, 1fr); }
  .lx-actions .lx-btn { flex: 1 1 100%; }
}