/* ==========================================================================
   THE DESIGNERS HUB — Launch
   Source of truth: Figma frame "launch" #2129:1890 (1440 x 4248).
   Section tops (frame y): hero 102 | reality 688 | case 1254 | help 1832 |
   checklist 3000 | cta 3527. Offsets inside each section are the literal
   Figma coordinate minus that section's top.
   Shares the template used by Growth #2129:2042 and Scale #2129:2165.
   ========================================================================== */

.page-launch main { position: relative; }

/* full-bleed helper: band spans the document, contents return to the canvas */
.lx-band { position: relative; width: 100%; }
.lx-canvas { position: relative; margin-inline: auto; }

/* ==========================================================================
   1. HERO — frame y:102, 1440x442. Mirrored from home: model left, card right
   ========================================================================== */
.lx-hero__band { background: var(--color-surface-dark); }

.lx-hero__canvas { overflow-x: clip; overflow-y: visible; }

.lx-hero__model { display: none; position: absolute; z-index: 1; object-fit: cover; }

.lx-hero__card {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border: var(--stroke-15) solid var(--color-surface-dark);
  padding: 35px 28px;
}

/* Stage tabs — same control as the home hero card (#2129:1482).
   Not present on Figma's Launch/Growth/Scale frames; added so the three
   stages swap in place instead of navigating. Sized so the H1 below still
   lands on its Figma y:84 (tabs at y:43 + 25 tall + 16 gap). */
.lx-tabs { display: flex; align-items: center; gap: var(--space-16); }

.lx-tab {
  font-size: var(--fs-meta);
  font-weight: var(--fw-reg);
  color: var(--grey-300);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
}

.lx-tab[aria-selected="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 5px 18px 5px 19px;
  background: var(--color-surface-dark);
  border: var(--stroke-1) solid var(--color-surface-dark);
  color: var(--white);
}

.lx-tab:not([aria-selected="true"]):hover { color: var(--ink); }

.lx-panel[hidden] { display: none; }

.lx-hero__title { margin-top: var(--space-16); }
.lx-hero__lead  { margin-top: var(--space-16); }
.lx-hero__lead + .lx-hero__lead { margin-top: var(--space-8); }
.lx-hero__cta   { margin-top: var(--space-32); }

/* ==========================================================================
   2. REALITY — outline x:30 y:688 1378x494 (4px ink)
   ========================================================================== */
.lx-reality { position: relative; padding-block: var(--space-48); }

.lx-reality__outline { display: none; }

.lx-reality__title { text-align: center; }
.lx-reality__sub   { margin-top: var(--space-16); text-align: center; font-weight: var(--fw-med); }

.lx-reality__rule { height: 1px; background: var(--gold); }

.lx-reality__grid { display: grid; gap: var(--space-24); margin-top: var(--space-32); }

.lx-item { display: flex; align-items: flex-start; gap: 9px; }

.lx-item::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.lx-item p { font-size: var(--fs-body); line-height: 1.3; }

.lx-reality__callout {
  margin-top: var(--space-32);
  border: var(--stroke-1) solid var(--black);
  padding: var(--space-24);
  text-align: center;
}

.lx-reality__callout .muted { color: #666666; font-size: var(--fs-lead); }
.lx-reality__callout .strong {
  margin-top: var(--space-8);
  color: var(--grey-900);
  font-size: var(--fs-lead);
  font-weight: var(--fw-med);
}

/* ==========================================================================
   3. CASE STUDY — bg y:1254 466 tall | dark panel x:36 y:1309 1368x475
   ========================================================================== */
.lx-case { position: relative; overflow: hidden; }

.lx-case__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.lx-case__panel {
  position: relative;
  z-index: 2;
  background: var(--color-surface-dark);
  border: var(--stroke-15) solid var(--color-surface-dark);
  color: var(--bg);
  padding: var(--space-32) var(--space-24);
}

.lx-case__eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: var(--fw-reg);
  text-align: center;
}

.lx-case__eyebrow-rule { height: 1px; background: #CD9926; margin-top: 8px; }

.lx-case__title {
  margin-top: var(--space-8);
  color: var(--white);
  font-weight: var(--fw-med);
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.lx-case__cards { display: grid; gap: var(--space-24); margin-top: var(--space-32); }

.lx-card { border: 4px solid var(--white); padding: 19px 15px; }
.lx-card--result { border-color: var(--gold); }

.lx-card__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-transform: uppercase;
  color: var(--bg);
}

.lx-card--result .lx-card__label { color: var(--gold); }

.lx-card__rule { height: 1px; background: var(--white); margin-top: 8px; }
.lx-card--did .lx-card__rule,
.lx-card--result .lx-card__rule { background: var(--gold); }

.lx-card__body { margin-top: var(--space-16); }

.lx-card__body li,
.lx-card__body p {
  position: relative;
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 25px;
  color: var(--bg);
}

/* plain bullet (discovered) */
.lx-card--found .lx-card__body p { padding-left: 29px; }
.lx-card--found .lx-card__body p::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-250);
}

/* numbered rings (what we did) */
.lx-card--did .lx-card__body li { padding-left: 33px; }
.lx-card--did .lx-card__body li::before {
  counter-increment: lxstep;
  content: counter(lxstep);
  position: absolute;
  left: 15px;
  top: 1px;
  width: 13px;
  height: 13px;
  border: 0.93px solid var(--gold);
  border-radius: 50%;
  color: var(--white);
  font-size: 8px;
  line-height: 12px;
  text-align: center;
}

.lx-card--did .lx-card__body { counter-reset: lxstep; }

/* gold dots (result) */
.lx-card--result .lx-card__body li { padding-left: 29px; }
.lx-card--result .lx-card__body li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* ==========================================================================
   4. HOW WE HELPED — light panel y:1832 1441x888, dark strip y:2619 1441x149
   ========================================================================== */
.lx-help { position: relative; }

.lx-help__panel {
  position: relative;
  background: var(--bg);
  border: 8px solid var(--color-surface-dark);
  padding-block: var(--space-48);
}

.lx-help__strip { display: none; }

.lx-help__eyebrow-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-dark);
  padding: 8px 0;
}

.lx-help__eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: var(--fw-reg);
  text-align: center;
}

.lx-help__title { text-align: center; }
.lx-help__sub   { margin-top: var(--space-16); text-align: center; }
.lx-help__close { margin-top: var(--space-32); text-align: center; }

.lx-help__steps { display: grid; gap: 60px var(--space-64); margin-top: var(--space-48); padding-left: 40px; }

.lx-step {
  position: relative;
  background: var(--color-surface-dark);
  border: var(--stroke-1) solid var(--black);
  border-radius: var(--radius-2);
  padding: 29px 20px 20px 20px;
  min-height: 132px;
}

.lx-step__badge {
  position: absolute;
  left: -40px;
  top: -26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg);
  border: 0.68px solid var(--color-surface-dark);
  color: var(--gold);
  font-weight: var(--fw-semi);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
}

.lx-step__title {
  color: var(--gold);
  font-weight: var(--fw-med);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
}

.lx-step__rule { border: 0; border-top: var(--stroke-1) solid var(--bg); margin: 8px -20px; }

.lx-step__desc {
  color: var(--bg);
  font-weight: var(--fw-light);
  font-size: 15px;
  line-height: 1.35;
}

.lx-help__arrow { display: none; }

/* ==========================================================================
   5. CHECKLIST — outline x:20 y:3000 1400x432 | dark panel x:792 y:3040
   ========================================================================== */
.lx-check { position: relative; padding-block: var(--space-48); }

.lx-check__outline { display: none; }

.lx-check__eyebrow-plate { display: inline-flex; background: var(--color-surface-dark); padding: 8px 16px; }
.lx-check__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }

.lx-check__title { margin-top: var(--space-16); }
.lx-check__lead  { margin-top: var(--space-16); }

.lx-check__grid { display: grid; gap: 0; margin-top: var(--space-24); }

.lx-check__cell {
  border: var(--stroke-1) solid var(--color-surface-dark);
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-height: 69px;
}

.lx-check__panel {
  position: relative;
  z-index: 2;
  background: var(--color-surface-dark);
  color: var(--white);
  text-align: center;
  padding: var(--space-32) var(--space-24);
  margin-top: var(--space-32);
}

.lx-check__panel-title { font-weight: var(--fw-med); font-size: 24px; color: var(--white); }
.lx-check__panel-text  { margin-top: var(--space-16); font-weight: var(--fw-light); font-size: var(--fs-body); color: var(--white); }
.lx-check__panel-cta   { margin-top: var(--space-24); }

/* ==========================================================================
   6. FINAL CTA — bg y:3527 577 tall | dark panel x:80 y:3599 1280x561
   ========================================================================== */
.lx-cta { position: relative; overflow: hidden; }

.lx-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.lx-cta__panel {
  position: relative;
  z-index: 2;
  background: var(--color-surface-dark);
  border: var(--stroke-15) solid var(--color-surface-dark);
  color: var(--white);
  text-align: center;
  padding: var(--space-48) var(--space-24);
}

.lx-cta__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }
.lx-cta__eyebrow-rule { height: 1px; background: #CD9926; margin: 8px auto 0; }

.lx-cta__title { margin-top: var(--space-8); color: var(--white); }
.lx-cta__sub   { margin-top: var(--space-16); font-weight: var(--fw-light); color: var(--white); }
.lx-cta__lede  { margin-top: var(--space-24); font-weight: var(--fw-light); color: var(--white); }

.lx-cta__branch { display: none; }

/* Tablet-only authored line break in the hero lead — inert at every other
   width, so 1440 and 390 keep the single flowing paragraph they verified. */
.lx-brk { display: none; }

.lx-cta__legs { display: grid; gap: var(--space-16); margin-top: var(--space-24); }

.lx-cta__leg {
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  color: var(--bg);
  text-align: center;
}

.lx-cta__btn { margin-top: var(--space-32); }

/* ==========================================================================
   Tablet reflow (not verified against the 768 frame)
   ========================================================================== */
/* ==========================================================================
   MOBILE — literal Figma geometry, 390 canvas
   Source of truth: frame "launch mob" #2129:4021 (390 x 4317).

   Same convention as home: the frame draws no header/footer, so its y:0 is
   the top of the page, the mobile header is 81 tall, and every coordinate
   below is THE FIGMA VALUE MINUS 81. Sections are absolutely positioned at
   their own main-space top; each section's children are then written
   relative to that section, and the offset used is noted per block.

   STROKE ALIGNMENT, read off the node renders (not uniform on this frame):
     hero plate  #2129:4061  422x535 -> 438x551 render = OUTSIDE 8px
     steps frame #2129:4025  748x1000 -> unchanged      = INSIDE
     check frame #2129:4022  748x633  -> unchanged      = INSIDE
     dark band   #2129:4023  769x234  -> unchanged      = INSIDE
     case boxes  #2270:1638  280x106  -> 288x114 render = OUTSIDE 4px
   box-sizing is border-box globally, so the OUTSIDE ones are written as
   their outer size.

   Several boxes are desktop-width rectangles hanging off the left edge
   (-297, -308, -352, -57 ...). Their real x is reproduced and the section
   clips, as on home.

   NOT IN THIS FRAME: the Launch/Growth/Scale tab row. The 390 hero goes
   straight to the H1, so `.lx-tabs` is hidden — see the note in the report,
   this leaves no way to switch stage from inside a stage page at mobile.
   ========================================================================== */
@media (max-width: 767px) {

  .page-launch main,
  .page-growth main,
  .page-scale main {
    position: relative;
    width: var(--frame-mobile);
    max-width: none;
    /* DEAD SPACE TRIMMED 2026-07-20 at the client's request. The frame is
       4317 (main 4236) but launch's content ends at 3876, so the file left a
       360px empty tail before the footer. Trimmed to content + 48. Growth and
       scale share this rule and have far larger tails still; each overrides
       it in its own sheet. */
    height: 3924px;              /* content 3876 + 48 (was 4236) */
    margin-inline: 0;
  }

  .page-launch main > section,
  .page-growth main > section,
  .page-scale main > section {
    position: absolute;
    left: 0;
    width: var(--frame-mobile);
    margin: 0;
    padding: 0;
  }

  .lx-band,
  .lx-canvas { position: static; width: auto; margin: 0; }

  /* Figma renders each of these eyebrows on one line in a box sized to the
     string; the browser measures them 0.25-1.16px wider and spills a second
     line, which doubles the plate height. Held to the one line the file draws. */
  .lx-case__eyebrow,
  .lx-help__eyebrow,
  .lx-check__eyebrow,
  .lx-cta__eyebrow { white-space: nowrap; }

  /* Absolutely positioned boxes still honour margins, and several of these
     carry one from the 1440 rules (the callout and checklist panel +32, the
     second hero lead +8) — it adds straight onto `top`. Zero them here so a
     coordinate written below is the coordinate that lands. */
  .lx-hero__lead--2,
  .lx-hero__lead + .lx-hero__lead,   /* (0,2,0) — the rule that sets the 8px */
  .lx-reality__callout,
  .lx-check__panel { margin: 0; }

  /* base.css clamps every image to max-width:100%; three of these are wider
     than the 390 canvas on purpose and bleed past both edges */
  .lx-hero__model,
  .lx-case__bg,
  .lx-cta__bg { max-width: none; }

  .lx-hero__band,
  .lx-hero__canvas { position: absolute; inset: 0; width: var(--frame-mobile); background: none; }

  /* buttons: 48 tall, mixed case, as on the home frame */
  .lx-hero__cta,
  .lx-check__panel-cta,
  .lx-cta__btn {
    display: flex;
    min-height: 0;
    height: 48px;
    width: 373px;
    max-width: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-button);
    font-size: 14px;
    font-weight: var(--fw-bold);
    letter-spacing: normal;
    text-transform: none;
  }

  /* ======================================================================
     1. HERO — plate outer top at Figma 105 -> main 24.
     Local coordinates are the Figma value minus 105.
     ====================================================================== */
  .lx-hero { top: 24px; height: 551px; overflow: hidden; }

  /* #2129:4061 — 422x535 + OUTSIDE 8px = 438x551 outer at x:-26 */
  .lx-hero::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 0;
    width: 438px;
    height: 551px;
    background: var(--bg);
    border: 8px solid var(--color-surface-dark);
  }

  .lx-hero__card { position: absolute; inset: 0; background: none; border: 0; padding: 0; }

  /* #2129:4062 — the dark lower band */
  .lx-hero__card::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 224px;
    width: 428px;
    height: 295px;
    background: var(--color-surface-dark);
  }

  /* Stage switcher ON THE CARD at mobile (client request, 2026-07-22). The
     390 frame draws no tab row, so this is derived, not ported: a compact
     row at the top of the plate, above the H1, which is shifted down 10px to
     make room. Replaces the drawer "Brand stage" list, which is hidden at
     mobile in chrome.css. The three tabs still swap in place via stages.js. */
  .lx-tabs {
    display: flex;
    position: absolute;
    z-index: 4;               /* above the plate; clear of the model at 187 */
    left: 9px;
    top: 12px;
    gap: 14px;
    align-items: center;
  }

  /* #2129:4066 — Inter Bold 22 / 1.06 / UPPER, 3 lines (h69).
     top 36 -> 46: shifted 10px down to clear the tab row above it. */
  .lx-hero__title {
    position: absolute;
    left: 9px;
    top: 46px;
    width: 365px;
    max-width: none;
    margin: 0;
    font-size: 22px;
    line-height: 1.06;
  }

  .lx-hero__lead {
    position: absolute;
    left: 9px;
    top: 127px;   /* +10 with the title, for the tab row above */
    width: 367px;
    max-width: none;
    margin: 0;
    font-size: 15px;
    font-weight: var(--fw-reg);
    line-height: 18px;
  }

  /* #2129:4068 sits on the dark band */
  .lx-hero__lead--2 {
    left: 14px;
    top: 365px;
    width: 306px;
    color: var(--white);
  }

  .lx-hero__cta { position: absolute; left: 9px; top: 433px; }

  /* #2129:4069 — paints last, over the dark band, and bleeds both edges */
  .lx-hero__model {
    display: block;
    z-index: 3;
    position: absolute;
    left: -34px;
    top: 187px;
    width: 458px;
    height: 162px;
    object-fit: fill;
  }

  /* ======================================================================
     2. REALITY — top rule #2129:4073 at Figma 680 -> main 599.
     Local coordinates are the Figma value minus 680.
     ====================================================================== */
  .lx-reality { top: 599px; height: 383px; overflow: hidden; }

  .lx-reality__outline { display: none; }   /* not drawn on the 390 frame */

  .lx-reality__rule {
    position: absolute;
    left: -76px;
    width: 452px;
    height: 1px;
    background: var(--gold);
  }

  .lx-reality__rule--top { top: 0; }
  .lx-reality__rule--mid { top: 92px; }

  .lx-reality__title {
    position: absolute;
    left: 9px;
    top: 14px;
    width: 363px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-align: left;
  }

  /* Figma renders this on one line in a 279 box; the browser measures the
     same string at 279.1 and spills a second line. Held to the one line the
     file draws. */
  .lx-reality__sub {
    position: absolute;
    left: 9px;
    top: 62px;
    width: 279px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    white-space: nowrap;
  }

  .lx-reality__grid { display: block; margin: 0; }

  .lx-item { position: absolute; display: block; margin: 0; }

  .lx-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 9.07px;
    height: 9.07px;
    margin: 0;
    border-radius: 50%;
    background: var(--gold);
  }

  .lx-item p {
    position: absolute;
    left: 14px;
    top: 5px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-light);
    line-height: 1.04;
  }

  /* DOM order is 1..5; the frame lays them out in two columns with the
     fifth centred beneath (#2129:4027 / 4054 / 4033 / 4042 / 4051) */
  .lx-reality__grid .lx-item--1 { left: 8px;   top: 124px; }
  .lx-reality__grid .lx-item--2 { left: 203px; top: 124px; }
  .lx-reality__grid .lx-item--3 { left: 203px; top: 177px; }
  .lx-reality__grid .lx-item--4 { left: 92px;  top: 230px; }
  .lx-reality__grid .lx-item--5 { left: 8px;   top: 177px; }

  .lx-reality__grid .lx-item--1 p { width: 137px; }
  .lx-reality__grid .lx-item--2 p { width: 159px; }
  .lx-reality__grid .lx-item--3 p { width: 165px; }
  .lx-reality__grid .lx-item--4 p { width: 192px; }
  .lx-reality__grid .lx-item--5 p { width: 137px; }

  /* #2129:4075 — the callout box has NO top border (Figma stroke
     "0px 1px 1px"); #2129:4077 and #2129:4076 put back 25px of it at each
     end, so the heading sits in the gap */
  .lx-reality__callout {
    position: absolute;
    left: 8px;
    top: 291px;
    width: 374px;
    height: 92px;
    padding: 0;
    border: var(--stroke-1) solid var(--color-surface-dark);
    border-top: 0;
    background: none;
  }

  .lx-reality__callout::before,
  .lx-reality__callout::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 25px;
    height: 1px;
    background: var(--color-surface-dark);
  }

  .lx-reality__callout::before { left: -1px; }
  .lx-reality__callout::after  { right: -1px; }

  /* offsets are from the callout's padding box, which starts 1px inside its
     left border — Figma measures them from the section */
  .lx-reality__callout .muted {
    position: absolute;
    left: 50px;
    top: 18px;
    width: 273px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
    text-align: center;
  }

  .lx-reality__callout .strong {
    position: absolute;
    left: 51px;
    top: 41px;
    width: 270px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    text-align: center;
  }

  /* ======================================================================
     3. CASE STUDY — background #2129:4078 at Figma 1113 -> main 1032.
     Local coordinates are the Figma value minus 1113.
     ====================================================================== */
  .lx-case { top: 1032px; height: 629px; overflow: hidden; }

  .lx-case__bg {
    position: absolute;
    left: -57px;
    top: 0;
    width: 569px;
    height: 599px;
    object-fit: fill;
  }

  /* #2129:4080 — the dark panel over the photo. The 1440 rule gives this a
     15px border; the 390 frame draws a plain rect, and leaving the border on
     shifts every child by its width (children measure from the padding box). */
  .lx-case__panel {
    position: absolute;
    left: -10px;
    top: 13px;
    width: 392px;
    height: 616px;
    background: var(--color-surface-dark);
    border: 0;
    padding: 0;
  }

  /* panel origin is (-10, 1126), so children are the Figma value minus that */
  .lx-case__eyebrow {
    position: absolute;
    left: 16px;
    top: 21px;
    width: 163px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    text-transform: uppercase;
  }

  .lx-case__eyebrow-rule {
    position: absolute;
    left: -8px;
    top: 41px;
    width: 204px;
    height: 1px;
    margin: 0;
  }

  .lx-case__title {
    position: absolute;
    left: 16px;
    top: 52px;
    width: 314px;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-transform: uppercase;
  }

  .lx-case__cards { display: block; margin: 0; }

  /* #2270:1638/1639/1640 — 280 wide with an OUTSIDE 4px stroke = 288 outer */
  .lx-card {
    position: absolute;
    left: 61px;
    width: 288px;
    padding: 0;
    background: none;
    border: 4px solid var(--white);
  }

  .lx-card--found  { top: 95px;  height: 114px; }
  .lx-card--did    { top: 225px; height: 181px; }
  .lx-card--result { top: 422px; height: 165px; border-color: var(--gold); }

  /* offsets below are from each card's padding box, 4px inside its border */
  .lx-card__label {
    position: absolute;
    left: 9px;
    top: 15px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 1.04;
    text-transform: uppercase;
    color: var(--bg);
  }

  .lx-card--result .lx-card__label { color: var(--gold); }

  .lx-card__rule {
    position: absolute;
    left: 0;
    top: 35px;
    width: 264px;
    height: 1px;
    margin: 0;
    background: var(--white);
  }

  .lx-card--did .lx-card__rule,
  .lx-card--result .lx-card__rule { background: var(--gold); top: 35px; }

  .lx-card__body {
    position: absolute;
    left: 22px;
    top: 52px;
    margin: 0;
    padding: 0;
  }

  /* padding:0 is load-bearing — the 1440 rules pad these left to clear their
     bullet, and with border-box that padding comes out of the Figma width,
     wrapping lines that otherwise fit. The mobile rings/dots are absolutely
     positioned outside the box instead. */
  .lx-card__body p,
  .lx-card__body li {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: var(--fw-light);
    line-height: 1.04;
    color: var(--bg);
  }

  .lx-card--found .lx-card__body { width: 251px; }

  /* a single grey dot beside the discovery paragraph (#2270:1646) */
  .lx-card--found .lx-card__body::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grey-250);
  }

  /* ...and the UNSCOPED base rule at the top of this file draws a SECOND dot
     on the paragraph itself (left:16, top:9) with a 29px indent to clear it.
     Both were rendering at 390, so the card showed two bullets 29px apart
     followed by text. The dot above is the one the 390 frame draws, so the
     base one is suppressed here and the indent it needed comes off with it,
     which also closes the gap between the bullet and the copy.
     Shared by launch, growth and scale — all three carry this card. */
  .lx-card--found .lx-card__body p {
    padding-left: 0;
  }
  .lx-card--found .lx-card__body p::before {
    content: none;
  }

  /* "What we did" is NUMBERED at 390 (#2270:1655-1659 rings + 1662-1666
     digits) where the 1440 frame uses plain bullets — a counter draws both
     so the numbering cannot drift from the list */
  .lx-card--did .lx-card__body { counter-reset: lx-did; width: 242px; }

  /* padding must be reset HERE, not on .lx-card__body li — the 1440 rule that
     indents these past their bullet is (0,2,1) and outranks the looser
     selector, leaving 33px of the Figma width eaten by padding */
  .lx-card--did .lx-card__body li {
    position: absolute;
    left: 0;
    padding: 0;
    counter-increment: lx-did;
  }

  .lx-card--did .lx-card__body li::before {
    content: counter(lx-did);
    position: absolute;
    left: -14px;
    top: 0;
    width: 10px;
    height: 10px;
    border: 0.714px solid var(--gold);
    border-radius: 50%;
    color: var(--white);
    font-size: 6.15px;
    line-height: 10px;
    text-align: center;
  }

  .lx-card--did .lx-card__body li:nth-child(1) { top: 0;      width: 144px; }
  .lx-card--did .lx-card__body li:nth-child(2) { top: 20px;   width: 110px; }
  .lx-card--did .lx-card__body li:nth-child(3) { top: 40px;   width: 207px; }
  .lx-card--did .lx-card__body li:nth-child(4) { top: 60px;   width: 171px; }
  .lx-card--did .lx-card__body li:nth-child(5) { top: 80px;   width: 225px; }

  .lx-card--result .lx-card__body { width: 242px; }

  .lx-card--result .lx-card__body li {
    position: absolute;
    left: 0;
    width: 242px;
    padding: 0;
  }

  .lx-card--result .lx-card__body li::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
  }

  .lx-card--result .lx-card__body li:nth-child(1) { top: 0;    }
  .lx-card--result .lx-card__body li:nth-child(2) { top: 20px; }
  .lx-card--result .lx-card__body li:nth-child(3) { top: 40px; }
  .lx-card--result .lx-card__body li:nth-child(4) { top: 60px; }
  .lx-card--result .lx-card__body li:nth-child(5) { top: 81px; }

  /* ======================================================================
     4. HOW WE HELPED — panel #2129:4025 at Figma 1784 -> main 1703.
     Local coordinates are the Figma value minus 1784.
     ====================================================================== */
  .lx-help { top: 1703px; height: 1034px; overflow: hidden; }

  /* #2129:4023 runs UNDER the panel; only its 2784-2818 tail is visible */
  .lx-help__strip {
    display: block;
    position: absolute;
    z-index: 1;
    left: -308px;
    top: 800px;
    width: 769px;
    height: 234px;
    background: var(--color-surface-dark);
  }

  .lx-help__panel {
    position: absolute;
    z-index: 2;
    left: -297px;
    top: 0;
    width: 748px;
    height: 1000px;
    background: var(--bg);
    border: 8px solid var(--color-surface-dark);
    padding: 0;
  }

  /* panel origin is x:-297 with an 8px INSIDE border, so its padding box
     starts at -289: every child below carries +289 against the frame */
  .lx-help__eyebrow-plate {
    position: absolute;
    left: 276px;
    top: 27px;
    width: 200px;
    height: 27px;
    background: var(--color-surface-dark);
  }

  /* this one nests INSIDE the plate, so it is plate-relative, not panel- */
  .lx-help__eyebrow {
    position: absolute;
    left: 22px;
    top: 6px;
    width: 101px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
  }

  /* Figma declares 290 and breaks after "advice"; the browser measures that
     line at 291.49 and spills a third. Widened to 292 — the break is stable
     up to 316, so this cannot change which words land where. */
  .lx-help__title {
    position: absolute;
    left: 298px;
    top: 62px;
    width: 292px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-align: left;
  }

  .lx-help__sub {
    position: absolute;
    left: 298px;
    top: 110px;
    width: 264px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
  }

  .lx-help__arrow { display: none; }   /* no connector arrows at 390 */

  .lx-help__steps { display: block; margin: 0; padding: 0; }

  .lx-step {
    position: absolute;
    left: 298px;
    width: 374px;
    height: 102px;
    min-height: 0;
    padding: 0;
    background: var(--color-surface-dark);
    border: var(--stroke-1) solid var(--black);
    border-radius: var(--radius-2);
  }

  .lx-step--1 { top: 200px; }
  .lx-step--2 { top: 352px; }
  .lx-step--3 { top: 504px; }
  .lx-step--4 { top: 656px; }
  .lx-step--5 { top: 808px; }

  /* #2129:4155-4158 — the white vertical divider inside each card */
  .lx-step::after {
    content: "";
    position: absolute;
    left: 52px;
    top: 0;
    width: 1px;
    height: 100px;
    background: var(--white);
  }

  /* offsets are from the card's padding box, 1px inside its border */
  .lx-step__badge {
    left: -1px;
    top: -27px;
    width: 53px;
    height: 53px;
    border-width: 0.53px;
    font-size: 12px;
  }

  .lx-step__title {
    position: absolute;
    left: 59px;
    top: 13px;
    font-size: 14px;
    line-height: 1.04;
  }

  .lx-step__rule {
    position: absolute;
    left: 52.5px;
    top: 38px;
    width: 320px;
    margin: 0;
  }

  .lx-step__desc {
    position: absolute;
    left: 59px;
    top: 46px;
    font-size: 14px;
    font-weight: 200;
    line-height: 1.04;
  }

  .lx-step--1 .lx-step__desc { width: 227px; }
  .lx-step--2 .lx-step__desc { width: 243px; }
  .lx-step--3 .lx-step__desc { width: 253px; }
  .lx-step--4 .lx-step__desc,
  .lx-step--5 .lx-step__desc { width: 211px; }

  .lx-help__close {
    position: absolute;
    left: 377px;
    top: 930px;
    width: 214px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    text-align: center;
  }

  /* ======================================================================
     5. CHECKLIST — frame #2129:4022 at Figma 2855 -> main 2774.
     Local coordinates are the Figma value minus 2855.
     ====================================================================== */
  .lx-check { top: 2774px; height: 633px; overflow: hidden; }

  .lx-check__outline {
    display: block;
    position: absolute;
    left: -352px;
    top: 0;
    width: 748px;
    height: 633px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .lx-check__eyebrow-plate {
    position: absolute;
    left: -13px;
    top: 38px;
    width: 200px;
    height: 27px;
    background: var(--color-surface-dark);
  }

  /* plate-relative, like the help eyebrow */
  .lx-check__eyebrow {
    position: absolute;
    left: 20px;
    top: 6px;
    width: 121px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
  }

  .lx-check__title {
    position: absolute;
    left: 9px;
    top: 73px;
    width: 276px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-align: left;
  }

  /* #2129:4164 is one text node at 390: Medium then Light, wrapping as a
     single 303-wide block. The two <p>s run inline inside the wrapper. */
  .lx-check__leads {
    position: absolute;
    left: 9px;
    top: 144px;
    width: 303px;
    font-size: 14px;
    line-height: 17px;
  }

  .lx-check__lead {
    display: inline;
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 17px;
  }

  .lx-check__lead--1 { font-weight: var(--fw-med); }
  .lx-check__lead--2 { font-weight: var(--fw-light); }
  .lx-check__lead--1::after { content: " "; }

  .lx-check__grid { display: block; margin: 0; }

  /* #2129:4166-4171 — six 187x52 boxes in two columns. The frame's reading
     order is NOT the DOM order: it runs 1,2 / 5,4 / 3,6 down the page. */
  /* the 1440 rule sets a min-height that beats a bare `height` here, so the
     selector is raised to match it and min-height is cleared */
  .lx-check__grid .lx-check__cell {
    position: absolute;
    width: 187px;
    height: 52px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .lx-check__cell--1 { left: 0;     top: 200px; }
  .lx-check__cell--2 { left: 203px; top: 200px; }
  .lx-check__cell--5 { left: 0;     top: 264px; }
  .lx-check__cell--4 { left: 203px; top: 264px; }
  .lx-check__cell--3 { left: 0;     top: 328px; }
  .lx-check__cell--6 { left: 203px; top: 328px; }

  /* the dot/text pair sits 8px in and 11px down from each box's outer edge,
     measured from the padding box (1px inside the border) */
  .lx-check__cell .lx-item { position: absolute; left: 7px; top: 10px; }

  .lx-check__cell--3 .lx-item,
  .lx-check__cell--6 .lx-item { top: 16px; }

  .lx-check__cell--1 .lx-item p { width: 137px; }
  .lx-check__cell--2 .lx-item p { width: 130px; }
  .lx-check__cell--3 .lx-item p { width: 137px; }
  .lx-check__cell--4 .lx-item p { width: 135px; }
  .lx-check__cell--5 .lx-item p { width: 98px;  }
  .lx-check__cell--6 .lx-item p { width: 91px;  }

  .lx-check__panel {
    position: absolute;
    left: 0;
    top: 412px;
    width: var(--frame-mobile);
    height: 196px;
    padding: 0;
    background: var(--color-surface-dark);
  }

  .lx-check__panel-title {
    position: absolute;
    left: 106px;
    top: 32px;
    width: 178px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 19px;
    text-align: center;
  }

  .lx-check__panel-text {
    position: absolute;
    left: 46px;
    top: 57px;
    width: 299px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
    text-align: center;
  }

  .lx-check__panel-cta { position: absolute; left: 9px; top: 115px; }

  /* ======================================================================
     6. FINAL CTA — background #2129:4079 at Figma 3520 -> main 3439.
     Local coordinates are the Figma value minus 3520.
     ====================================================================== */
  .lx-cta { top: 3439px; height: 437px; overflow: hidden; }

  .lx-cta__bg {
    position: absolute;
    left: -57px;
    top: 0;
    width: 569px;
    height: 437px;
    object-fit: fill;
  }

  /* #2129:4081 — the dark panel over the photo. Border reset for the same
     reason as the case panel: the 1440 rule puts a 15px stroke on it. */
  .lx-cta__panel {
    position: absolute;
    left: -10px;
    top: 13px;
    width: 407px;
    height: 408px;
    background: var(--color-surface-dark);
    border: 0;
    padding: 0;
    text-align: left;
  }

  /* panel origin x:-10, so children carry +10 against the frame */
  .lx-cta__eyebrow {
    position: absolute;
    left: 17px;
    top: 21px;
    width: 171px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    text-transform: uppercase;
  }

  .lx-cta__eyebrow-rule {
    position: absolute;
    left: -8px;
    top: 41px;
    width: 204px;
    height: 1px;
    margin: 0;
  }

  .lx-cta__title {
    position: absolute;
    left: 17px;
    top: 52px;
    width: 376px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-align: left;
  }

  .lx-cta__sub {
    position: absolute;
    left: 17px;
    top: 100px;
    width: 275px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
    text-align: left;
  }

  /* one line in Figma's 151 box; the browser needs 152.06 */
  .lx-cta__lede {
    position: absolute;
    left: 130px;
    top: 149px;
    width: 151px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    white-space: nowrap;
  }

  /* the 1440 branch diagram is horizontal; the 390 frame draws a vertical
     stem (#2129:4176) with three arrow connectors (#2129:4090-4092) */
  .lx-cta__branch { display: none; }

  .lx-cta__legs { position: static; }

  .lx-cta__legs::before {
    content: "";
    position: absolute;
    left: 121px;
    top: 173.5px;
    width: 167.5px;
    height: 1px;
    background: var(--gold);
  }

  .lx-cta__leg {
    position: absolute;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-light);
    line-height: 15px;
    text-align: center;
  }

  .lx-cta__leg::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 7px;
    height: 24px;
    background: url("../img/vec/m-lx-connector.svg") no-repeat center / contain;
  }

  .lx-cta__leg--1 { left: 155px; top: 208px; width: 100px; }
  .lx-cta__leg--2 { left: 142px; top: 250px; width: 127px; }
  .lx-cta__leg--3 { left: 134px; top: 292px; width: 143px; }

  .lx-cta__leg--1::before { left: 47px;  top: -28px; }
  .lx-cta__leg--2::before { left: 60px;  top: -23px; }
  .lx-cta__leg--3::before { left: 68px;  top: -25px; }

  /* inside the panel, so panel-relative like the rest of this block */
  .lx-cta__btn { position: absolute; left: 19px; top: 331px; }
}

@media (min-width: 768px) {
  .lx-reality__grid { grid-template-columns: repeat(2, 1fr); }
  .lx-case__cards   { grid-template-columns: repeat(3, 1fr); }
  .lx-help__steps   { grid-template-columns: repeat(2, 1fr); }
  .lx-check__grid   { grid-template-columns: repeat(3, 1fr); }
  .lx-cta__legs     { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   DESKTOP — literal Figma geometry on the 1440 canvas
   ========================================================================== */
@media (min-width: 1200px) {

  .page-launch main { width: 100%; }
  .lx-canvas { width: var(--frame-desktop); }

  /* Figma renders each of these on a single line (text node height 16-22px).
     The browser measures the same strings a hair wider, which wraps them and
     pushes them into whatever sits below. Hold them to one line. */
  .lx-hero__lead--2,
  .lx-reality__sub,
  .lx-reality__callout .muted,
  .lx-reality__callout .strong,
  .lx-case__eyebrow,
  .lx-card__label,
  .lx-help__eyebrow,
  .lx-help__sub,
  .lx-help__close,
  .lx-check__eyebrow,
  .lx-check__lead,
  .lx-cta__eyebrow,
  .lx-cta__sub,
  .lx-cta__lede,
  .lx-cta__leg { white-space: nowrap; }

  /* ---- 1. HERO : Figma y:102, but pulled to a shared y:190 so the card sits
     level with the home hero (which Figma puts at 279). 190 - 76px header. ---- */
  .lx-hero { margin-top: 114px; }
  .lx-hero__band { height: 442px; }
  .lx-hero__canvas { height: 442px; }
  /* Figma mirrors this node for the left-hand placement; the crop transform
     in the export does not carry the flip, so it is applied here. */
  .lx-hero__model { display: block; left: -55px; top: -34px; width: 608px; height: 548px; transform: scaleX(-1); }
  .lx-hero__card {
    position: absolute;
    left: 472px;
    top: 0;
    width: 888px;
    height: 442px;
    /* tabs at card y:43, then 25 tall + 16 gap -> H1 on its Figma y:84 */
    padding: 28px 40px 0 63px;
  }
  .lx-hero__title { width: 766px; }
  /* Figma gives the lead 22px per line (h44 over 2 lines). The base 1.35
     line-height renders 24.3 and pushed the CTA 7px past its y:298. */
  .lx-hero__lead  { width: 582px; margin-top: var(--space-16); line-height: 22px; }
  .lx-hero__lead--2 { width: 487px; margin-top: var(--space-8); }
  .lx-hero__cta   { margin-top: 48px; }

  /* ---- 2. REALITY : outline y:688 ---- */
  .lx-reality { height: 494px; margin-top: 144px; padding-block: 0; }
  .lx-reality__outline {
    display: block;
    position: absolute;
    left: 30px;
    top: 0;
    width: 1378px;
    height: 494px;
    border: 4px solid var(--color-surface-dark);
  }
  /* top border is cut either side of the gold rule: two symmetric 197px
     segments at the corners, gap between. Applies to every page using this
     outlined 'reality' card. */
  .lx-reality__outline { border-top: 0; }
  .lx-reality__outline::before,
  .lx-reality__outline::after {
    content: "";
    position: absolute;
    top: 0;
    width: 197px;
    height: 4px;
    background: var(--color-surface-dark);
  }
  .lx-reality__outline::before { left: -4px; }
  .lx-reality__outline::after  { right: -4px; }

  .lx-reality__rule--top { position: absolute; left: 428px; top: 0;   width: 584px; }
  .lx-reality__rule--mid { position: absolute; left: 428px; top: 148px; width: 584px; }
  .lx-reality__title { position: absolute; left: 428px; top: 16px;  width: 584px; margin: 0; }
  .lx-reality__sub   { position: absolute; left: 541px; top: 110px; width: 363px; margin: 0; font-size: var(--fs-lead); }
  .lx-reality__grid  { display: block; margin: 0; }
  .lx-item { position: absolute; }
  .lx-item--1 { left: 145px;  top: 198px; width: 199px; }
  .lx-item--2 { left: 603px;  top: 198px; width: 237px; }
  .lx-item--3 { left: 1052px; top: 198px; width: 253px; }
  .lx-item--4 { left: 388px;  top: 296px; width: 274px; }
  .lx-item--5 { left: 822px;  top: 296px; width: 202px; }
  .lx-reality__callout {
    position: absolute;
    left: 428px;
    top: 386px;
    width: 584px;
    height: 108px;
    margin: 0;
    padding: 0;
  }
  .lx-reality__callout .muted  { position: absolute; left: 115px; top: 27px; width: 355px; }
  .lx-reality__callout .strong { position: absolute; left: 40px;  top: 57px; width: 505px; margin: 0; }

  /* ---- 3. CASE : bg y:1254 h466, panel x:36 y:1309 1368x475 ---- */
  .lx-case { height: 530px; margin-top: 72px; }
  .lx-case__bg { height: 466px; top: 0; bottom: auto; }
  .lx-case__panel {
    position: absolute;
    left: 36px;
    top: 55px;
    width: 1368px;
    height: 475px;
    padding: 0;
  }
  .lx-case__eyebrow      { position: absolute; left: 44px; top: 72px;  width: 176px; }
  .lx-case__eyebrow-rule { position: absolute; left: 44px; top: 96px;  width: 226px; margin: 0; }
  .lx-case__title        { position: absolute; left: 44px; top: 104px; width: 496px; margin: 0; }
  .lx-case__cards { display: block; margin: 0; }
  .lx-card { position: absolute; top: 189px; width: 395px; height: 212px; padding: 0; }
  .lx-card--found  { left: 49px; }
  .lx-card--did    { left: 486px; }
  .lx-card--result { left: 924px; }
  .lx-card__label { position: absolute; left: 11px; top: 15px; }
  /* inset so the rule stops short of the card border instead of running into
     it (Figma starts it on the card edge, which reads as a joined line) */
  .lx-card__rule  { position: absolute; left: 15px; top: 40px; width: 362.5px; margin: 0; }
  .lx-card__body  { position: absolute; left: 0; top: 56px; right: 0; margin: 0; }
  .lx-card--found .lx-card__body p { padding-left: 29px; width: 371px; line-height: 1.06; }
  /* Figma's 25px is the step BETWEEN entries, not the line height: each line
     is 17px and a wrapped entry is 34 tall. Setting line-height:25 made a
     2-line entry 50px and pushed the last one out of the card. */
  .lx-card--did    .lx-card__body li,
  .lx-card--result .lx-card__body li { line-height: 17px; margin-bottom: 8px; }
  .lx-card--did    .lx-card__body li:last-child,
  .lx-card--result .lx-card__body li:last-child { margin-bottom: 0; }
  /* re-centre the markers against the 17px line */
  .lx-card--result .lx-card__body li::before { top: 4px; }

  /* ---- 4. HOW WE HELPED : panel y:1832 1441x888 ---- */
  .lx-help { height: 936px; margin-top: 48px; }
  .lx-help__panel {
    position: absolute;
    left: -1px;
    top: 0;
    width: 1441px;
    height: 888px;
    padding: 0;
  }
  /* In Figma the dark strip (#2129:1960) sits UNDER the light panel, so only
     the 48px below the panel shows. Placing it on top hid the closing line. */
  .lx-help__strip {
    display: block;
    position: absolute;
    left: -1px;
    top: 787px;
    width: 1441px;
    height: 149px;
    background: var(--color-surface-dark);
    z-index: 0;
  }
  .lx-help__panel { z-index: 1; background: var(--bg); }
  .lx-help__eyebrow-plate { position: absolute; left: 596px; top: 64px; width: 250px; height: 32px; padding: 0; }
  .lx-help__eyebrow { width: 100%; }
  .lx-help__title { position: absolute; left: 485px; top: 104px; width: 472px; margin: 0; }
  .lx-help__sub   { position: absolute; left: 427px; top: 198px; width: 589px; margin: 0; font-size: var(--fs-lead); }
  .lx-help__close { position: absolute; left: 480px; top: 814px; width: 504px; margin: 0; font-size: var(--fs-lead); z-index: 4; }
  .lx-help__steps { display: block; margin: 0; padding: 0; }
  .lx-step { position: absolute; width: 252px; height: 132px; padding: 29px 20px 0 20px; }
  .lx-step--1 { left: 449px; top: 345px; }
  .lx-step--2 { left: 779px; top: 345px; }
  .lx-step--3 { left: 287px; top: 624px; }
  .lx-step--4 { left: 615px; top: 624px; }
  .lx-step--5 { left: 946px; top: 624px; }
  .lx-step__rule { margin: 8px -20px; }
  .lx-help__arrow { display: block; position: absolute; width: 293px; z-index: 2; }
  .lx-help__arrow--1 { left: 459px; top: 268px; }
  .lx-help__arrow--2 { left: 300px; top: 547px; }
  .lx-help__arrow--3 { left: 631px; top: 547px; }

  /* ---- 5. CHECKLIST : outline x:20 y:3000 1400x432 ---- */
  .lx-check { height: 480px; margin-top: 232px; padding-block: 0; }
  .lx-check__outline {
    display: block;
    position: absolute;
    left: 20px;
    top: 0;
    width: 1400px;
    height: 432px;
    border: var(--stroke-1) solid var(--color-surface-dark);
  }
  .lx-check__eyebrow-plate { position: absolute; left: -7px; top: 40px; width: 249px; height: 32px; padding: 0; }
  .lx-check__eyebrow { width: 100%; padding-left: 87px; text-align: left; }
  .lx-check__title { position: absolute; left: 80px; top: 80px;  width: 608px; margin: 0; text-align: left; }
  .lx-check__lead--1 { position: absolute; left: 80px; top: 166px; width: 551px; margin: 0; }
  .lx-check__lead--2 { position: absolute; left: 80px; top: 192px; width: 551px; margin: 0; }
  .lx-check__grid { display: block; margin: 0; }
  .lx-check__cell { position: absolute; height: 69px; min-height: 0; padding: 0; }
  .lx-check__cell--1 { left: 20px;  top: 245px; width: 272px; }
  .lx-check__cell--2 { left: 296px; top: 245px; width: 182px; }
  .lx-check__cell--3 { left: 482px; top: 245px; width: 182px; }
  .lx-check__cell--4 { left: 20px;  top: 317px; width: 272px; }
  .lx-check__cell--5 { left: 296px; top: 317px; width: 182px; }
  .lx-check__cell--6 { left: 482px; top: 317px; width: 182px; }
  .lx-check__cell .lx-item { position: absolute; }
  .lx-check__cell--1 .lx-item { left: 60px; top: 17px; width: 199px; }
  .lx-check__cell--4 .lx-item { left: 60px; top: 15px; width: 199px; }
  .lx-check__cell--2 .lx-item { left: 24px; top: 16px; width: 142px; }
  .lx-check__cell--5 .lx-item { left: 24px; top: 15px; width: 142px; }
  .lx-check__cell--3 .lx-item { left: 24px; top: 16px; width: 142px; }
  .lx-check__cell--6 .lx-item { left: 24px; top: 15px; width: 142px; }
  .lx-check__panel {
    position: absolute;
    left: 792px;
    top: 40px;
    width: 604px;
    height: 440px;
    margin: 0;
    padding: 0;
  }
  .lx-check__panel-title { position: absolute; left: 169px; top: 141px; width: 267px; margin: 0; }
  .lx-check__panel-text  { position: absolute; left: 122px; top: 178px; width: 360px; margin: 0; }
  .lx-check__panel-cta   { position: absolute; left: 183px; top: 248px; margin: 0; }

  /* ---- 6. FINAL CTA : bg y:3527 h577, panel x:80 y:3599 1280x561 ---- */
  .lx-cta { height: 633px; margin-top: 47px; margin-bottom: 88px; }
  .lx-cta__bg { height: 577px; top: 0; bottom: auto; }
  .lx-cta__panel {
    position: absolute;
    left: 80px;
    top: 72px;
    width: 1280px;
    height: 561px;
    padding: 0;
  }
  .lx-cta__eyebrow      { position: absolute; left: 533px; top: 57px; width: 185px; }
  .lx-cta__eyebrow-rule { position: absolute; left: 512px; top: 81px; width: 226px; margin: 0; }
  /* Figma box is 586 wide, but its 2nd line ("what your next step should be?")
     measures 621 in the browser, forcing a 3rd line. Widened to 624 and the
     left nudged so the centre stays exactly on Figma's (x:332 + 586/2 = 625). */
  .lx-cta__title { position: absolute; left: 313px; top: 89px;  width: 624px; margin: 0; }
  .lx-cta__sub   { position: absolute; left: 449px; top: 174px; width: 353px; margin: 0; font-size: var(--fs-lead); }
  .lx-cta__lede  { position: absolute; left: 529px; top: 234px; width: 192px; margin: 0; font-size: var(--fs-lead); }
  .lx-cta__branch { display: block; position: absolute; left: 339px; top: 263px; width: 572.5px; }
  .lx-cta__legs { display: block; margin: 0; }
  .lx-cta__leg { position: absolute; top: 350px; }
  .lx-cta__leg--1 { left: 212px;  width: 133px; }
  .lx-cta__leg--2 { left: 539px;  width: 169px; }
  .lx-cta__leg--3 { left: 911px;  width: 190px; }
  .lx-cta__btn { position: absolute; left: 506px; top: 415px; margin: 0; }
}