/* ==========================================================================
   THE DESIGNERS HUB — Launch / Growth / Scale, TABLET (768) layer
   ==========================================================================
   This lives in its own file rather than at the end of launch.css because
   growth.html and scale.html BOTH carry `page-launch` and load launch.css to
   share its machinery. A width-only media query at the end of that file would
   therefore hand them launch's section coordinates and its six-section
   height, which is wrong for both (they have five sections and different
   content). Keeping the 768 layer in a separate sheet means a page opts in by
   linking it, the same one-page-at-a-time rule the rest of the project uses.

   Linked by: launch.html. When the 768 growth and scale bodies are built they
   should link this too and put only their genuine differences in
   growth.css / scale.css, exactly as the 390 block is arranged.
   ========================================================================== */

/* ==========================================================================
   TABLET — literal Figma geometry, 768 canvas
   Source of truth: frame "tablet launch" #2129:6188 (768 x 4539).

   The frame draws no header and no footer, so its y:0 is the top of the page.
   The tablet header is 81 tall, so `main` = 4539 - 81 = 4458 and EVERY
   COORDINATE BELOW IS THE FIGMA VALUE MINUS 81. Each section carries its own
   origin, noted at its block; children are written against that section so
   nothing compounds down the page.

   `<main>` ON THESE THREE PAGES HAS NO CLASS — everything is
   `.page-launch main`. growth.html and scale.html carry `page-launch` too, so
   this block is their shared machinery exactly as the 390 block is.

   STROKE ALIGNMENT, batched as node renders — NOT uniform on this frame:
     6196 hero plate      681x478  -> unchanged   INSIDE 15
     6192 help panel      748x1043 -> unchanged   INSIDE 8
     6190 dark strip      769x212  -> unchanged   INSIDE 8
     6189 check outline   748x633  -> unchanged   INSIDE 1
     6222 reality callout 536x92   -> unchanged   INSIDE 1
     6272 step card       252x132  -> unchanged   INSIDE 1
     6300 check cell      236x69   -> unchanged   INSIDE 1
     6226 case panel      689x763  -> unchanged   NO STROKE (base gives it 15)
     6328 cta panel       689x471  -> unchanged   NO STROKE (base gives it 15)
     2270:1595/1602/1625  case boxes 339x125 / x213 / x193
                          -> 347x133 / x221 / x201  **OUTSIDE 4**
     6218 reality outline 736x430  -> 738x433     **CENTER 3** (see the rule)
   box-sizing is border-box globally, so the OUTSIDE ones are written as their
   OUTER size and placed at their outer origin.

   NOT IN THIS FRAME: the Launch/Growth/Scale tab row, exactly as at 390 —
   the hero frame #2129:6193 has seven children and `.lx-tabs` is not among
   them. It is hidden here too, so the drawer's Brand-stage row stays the only
   route between the three stages in this band.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  .page-launch main{
    position: relative;
    width: var(--frame-tablet);
    max-width: none;
    /* dead space trimmed: content ends 4274, frame left 184px of tail */
    height: 4322px;              /* content 4274 + 48 (was 4458) */
    margin-inline: auto;
    padding: 0;
  }

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

  /* Wrappers that must not re-pad, re-centre or become an offset parent.

     `.lx-canvas` MUST be scoped to `main > section > .lx-canvas` here: the
     class is used BOTH as an inner wrapper (inside .lx-case and .lx-cta) AND
     as a modifier on three of the sections themselves
     (`<section class="lx-reality lx-canvas">`). A bare `.page-launch
     .lx-canvas` is (0,2,0) and beats `.page-launch main > section` at
     (0,1,2), so it forced those three sections back to `position: static` and
     every child measured section-relative — 45 nodes out by exactly the
     section top (589, 1905, 3024). */
  .page-launch main > section > .lx-canvas,
  .page-launch .lx-hero__canvas,
  .page-launch .lx-reality__grid,
  .page-launch .lx-case__cards,
  .page-launch .lx-card__body,
  .page-launch .lx-help__steps,
  .page-launch .lx-check__leads,
  .page-launch .lx-check__grid,
  .page-launch .lx-cta__legs{
    position: static;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    gap: 0;
  }

  /* every button on this frame is the 239x52 instance, Open Sans Bold 14 */
  .page-launch .lx-hero__cta,
  .page-launch .lx-check__panel-cta,
  .page-launch .lx-cta__btn{
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 239px;
    height: 52px;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-button);
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 19px;
    letter-spacing: normal;
    text-transform: uppercase;
  }

  /* ======================================================================
     1. HERO — frame #2129:6193 at Figma 106 -> main 25.
     Local coordinates are the Figma value minus 106.
     ====================================================================== */
  .lx-hero{ top: 25px; height: 478px; padding: 0; overflow: visible; }

  /* Stage switcher ON THE CARD at tablet (client request, 2026-07-22). The
     frame draws no tab row, so this is derived, not ported — the same
     treatment as 390. Sits at the top-left of the plate, above the H1, and
     replaces the drawer "Brand stage" list, hidden at tablet in chrome.css.
     Positioned to clear all three titles (growth/scale sit at 45, launch at
     45 after the nudge below); the pill ends at ~33, leaving ~12px. */
  .lx-tabs{
    display: flex;
    position: absolute;
    z-index: 4;
    left: 27px;
    top: 8px;
    gap: 16px;
    align-items: center;
  }

  .page-launch .lx-hero__band{
    position: absolute;
    left: 0;
    top: 0;
    width: 769px;
    height: 478px;
    padding: 0;
    background: var(--color-surface-dark);
  }

  /* #2129:6196 — 681x478 with a 15px INSIDE stroke. Note 681, not the home
     frame's 623: this hero's plate is wider and the photo sits further out. */
  .lx-hero__card{
    position: absolute;
    left: 0;
    top: 0;
    width: 681px;
    height: 478px;
    padding: 0;
    background: var(--bg);
    border: 15px solid var(--color-surface-dark);
  }

  /* offsets below are from the card's padding box, 15px inside its border */
  .lx-hero__title{
    position: absolute;
    left: 27px;
    /* 37 -> 45: dropped to clear the on-card tab row above it and to match
       growth/scale's tablet title top. Its lead stays at 155 (8px gap). */
    top: 45px;
    /* 576 against Figma's declared 573: the file's own second line,
       "BRAND — BUT DON'T KNOW WHERE", measures 574.36 and pulled WHERE down,
       re-breaking lines 2 and 3. The line COUNT stays 3 either way, so only a
       pixel diff catches it. Break is stable from 576 to 610. */
    width: 576px;
    max-width: none;
    margin: 0;
    font-size: 32px;
    font-weight: var(--fw-bold);
    line-height: 34px;           /* 32 * 1.06 = 33.92 -> 34; box 102 = 3 lines */
    text-transform: uppercase;
  }

  .lx-hero__lead{
    position: absolute;
    left: 27px;
    top: 155px;
    width: 518px;   /* Figma's own line 2 measures 517.31 in its 517 box */
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;           /* box 38 = 2 lines */
  }

  /* `.lx-hero__lead + .lx-hero__lead` is (0,2,0) in the base block and beats a
     bare `margin: 0`, and an absolutely positioned box still honours margin */
  .lx-hero__lead + .lx-hero__lead{ top: 201px; width: 440px; margin: 0; }

  /* MANUAL BREAK — Figma ends line 1 at "stuck." though "Wrong" would still
     fit (355.23 + 48 in a 517 box), so it is authored and the API returned it
     unescaped. Same node and same break as the home tablet hero. */
  .lx-hero__lead .lx-brk{ display: inline; }
  .lx-hero__lead .lx-brk::before{ content: "\A"; white-space: pre; }

  .lx-hero__cta{ left: 27px; top: 287px; }

  /* PAINT ORDER: Figma declares the photo #2129:6201 AFTER the plate, so it
     paints over it — same reversal as the home tablet hero, and the markup
     has the photo BEFORE the card, so it needs raising above `.lx-hero__card`
     (z-index 2 from the base). Measurement cannot catch this. The node is the
     same one the home frame uses, with the same crop, so it reuses that
     bitmap rather than exporting a second copy. */
  .lx-hero__model{
    display: block;
    position: absolute;
    left: 490px;
    top: 149px;
    width: 426px;
    height: 423px;
    max-width: none;
    object-fit: fill;
    z-index: 3;
  }

  /* ======================================================================
     2. REALITY — outline #2129:6218 at Figma 670 -> main 589.
     Local coordinates are the Figma value minus 670.
     ====================================================================== */
  .lx-reality{ top: 589px; height: 430px; padding: 0; }

  /* MEASURED, NOT READ. #2129:6218 declares 736x430 but its node render comes
     back 738x433, i.e. the 3px stroke is CENTER-aligned, not INSIDE like every
     other box on this frame. Written as the ink box: the outer edge sits 1.5px
     outside the declared rect on each side. */
  .lx-reality__outline{
    display: block;
    position: absolute;
    left: 14.5px;
    top: -1.5px;
    width: 739px;
    height: 433px;
    background: none;
    border: 3px solid var(--color-surface-dark);
  }

  .lx-reality__rule{ position: absolute; height: 1px; margin: 0; }
  .lx-reality__rule--top{ left: 113px; top: 0;     width: 541.5px; }
  .lx-reality__rule--mid{ left: 113px; top: 137px; width: 541.5px; }

  .lx-reality__title{
    position: absolute;
    left: 144px;
    top: 24px;
    width: 480px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: center;
    text-transform: uppercase;
  }

  .lx-reality__sub{
    position: absolute;
    left: 223px;
    top: 94px;
    width: 322px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 19px;
    text-align: center;
    white-space: nowrap;   /* Chrome needs 322.48 in Figma's 322 box */
  }

  /* Each bullet is a GROUP whose gold dot sits at the group origin and whose
     text carries its own offset. THE DOM ORDER IS NOT THE FRAME'S READING
     ORDER — items 3 and 4 are swapped against the file, so they are mapped by
     text, not by index. */
  .lx-item{
    position: absolute;
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .lx-item::before{
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    margin: 0;
  }

  .lx-item p{
    position: absolute;
    margin: 0;
    font-size: 15px;
    font-weight: var(--fw-light);
    line-height: 16px;           /* 15 * 1.04 = 15.6 -> 16 */
  }

  .lx-reality__grid .lx-item--1{ left: 42px;  top: 169px; }
  .lx-reality__grid .lx-item--2{ left: 273px; top: 169px; }
  .lx-reality__grid .lx-item--3{ left: 422px; top: 250px; }
  .lx-reality__grid .lx-item--4{ left: 120px; top: 250px; }
  .lx-reality__grid .lx-item--5{ left: 541px; top: 166px; }

  .lx-reality__grid .lx-item--1 p{ left: 20px; top: 4px; width: 171px; }
  .lx-reality__grid .lx-item--2 p{ left: 21px; top: 4px; width: 201px; }
  .lx-reality__grid .lx-item--3 p{ left: 17px; top: 8px; width: 209px; }
  .lx-reality__grid .lx-item--4 p{ left: 17px; top: 8px; width: 234px; }
  .lx-reality__grid .lx-item--5 p{ left: 15px; top: 8px; width: 165px; }

  .lx-reality__callout{
    position: absolute;
    left: 116px;
    top: 338px;
    width: 536px;
    height: 92px;
    margin: 0;
    padding: 0;
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  /* callout-relative, from its padding box 1px inside the border */
  .lx-reality__callout .muted,
  .lx-reality__callout .strong{
    position: absolute;
    margin: 0;
    font-size: 16px;
    line-height: 19px;
  }

  .lx-reality__callout .muted{ left: 109px; top: 18px; width: 316px; font-weight: var(--fw-reg); }
  .lx-reality__callout .strong{ left: 43px;  top: 46px; width: 449px; font-weight: var(--fw-med); }

  /* ======================================================================
     3. CASE STUDY — photo #2129:6225 at Figma 1148 -> main 1067.
     Local coordinates are the Figma value minus 1148. The dark panel runs to
     1960, past the photo's 1905, so the section is sized to the panel.
     ====================================================================== */
  .lx-case{ top: 1067px; height: 812px; padding: 0; overflow: hidden; }

  .lx-case__bg{
    position: absolute;
    inset: auto;
    left: -1px;
    top: 0;
    width: 769px;
    height: 757px;
    max-width: none;
    object-fit: fill;
  }

  /* #2129:6226 carries a fill and NO stroke — the base rule leaves a 15px
     border on it, which would shift every child by that much */
  .lx-case__panel{
    position: absolute;
    left: 44px;
    top: 49px;
    width: 689px;
    height: 763px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-surface-dark);
  }

  /* panel-relative from here — the Figma value minus the panel origin
     (44, 1197) */
  .lx-case__eyebrow{
    position: absolute;
    left: 20px;
    top: 21px;
    width: 176px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    text-transform: uppercase;
    /* "FROM IDEA TO FIRST SALES" measures 177 in its 176 box, so it wrapped to
       two lines and the eyebrow rule below cut through the second. One line in
       Figma; nowrap holds it (669px of clear panel to the right). */
    white-space: nowrap;
  }

  .lx-case__eyebrow-rule{
    position: absolute;
    left: -4px;
    top: 44px;
    width: 216.5px;
    height: 1px;
    margin: 0;
  }

  .lx-case__title{
    position: absolute;
    left: 20px;
    top: 52px;
    width: 409px;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-med);
    line-height: 31px;
    text-transform: uppercase;
  }

  /* The three case boxes are OUTSIDE 4, so each is written at its OUTER box:
     declared 339 wide at x:214 becomes 347 wide at x:210, and the children's
     offsets are then measured from the padding box, which lands back on the
     declared origin. */
  .lx-card{
    position: absolute;
    left: 166px;
    width: 347px;
    margin: 0;
    padding: 0;
    border: 4px solid var(--white);
  }

  .lx-card--found{ top: 109px; height: 133px; }
  .lx-card--did{ top: 266px; height: 221px; }
  .lx-card--result{ top: 511px; height: 201px; border-color: var(--gold); }

  .lx-card__label{
    position: absolute;
    left: 15px;
    top: 19px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 15px;           /* 14 * 1.04 = 14.56 -> 15 */
    text-transform: uppercase;
    white-space: nowrap;
  }

  .lx-card__rule{ position: absolute; left: 0; top: 44px; width: 320px; height: 1px; margin: 0; }

  .lx-card__body{ position: static; margin: 0; padding: 0; }

  .lx-card__body li,
  .lx-card__body p{
    position: absolute;
    left: 29px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;
  }

  /* found — one paragraph, 3 lines, with a grey dot at (16, 64) card-relative */
  .lx-card--found .lx-card__body p{ top: 60px; width: 291px; padding-left: 0; }
  .lx-card--found .lx-card__body p::before{ left: -13px; top: 4px; }

  /* did — five numbered rings. `.lx-card--did .lx-card__body li` is (0,2,1)
     and beats the bare `.lx-card__body li` above, so the padding reset has to
     be restated at that specificity. */
  .lx-card--did .lx-card__body li{ left: 29px; padding-left: 0; }
  .lx-card--did .lx-card__body li:nth-child(1){ top: 60px;  width: 392px; }
  .lx-card--did .lx-card__body li:nth-child(2){ top: 85px;  width: 291px; }
  .lx-card--did .lx-card__body li:nth-child(3){ top: 110px; width: 291px; }
  .lx-card--did .lx-card__body li:nth-child(4){ top: 135px; width: 199px; }
  .lx-card--did .lx-card__body li:nth-child(5){ top: 160px; width: 249px; }

  .lx-card--did .lx-card__body li::before{
    left: -16px;
    top: 2.42px;
    width: 12px;
    height: 12px;
    border-width: 0.857px;
    font-size: 7.3846px;
    line-height: 11px;
  }

  /* result — five gold dots */
  .lx-card--result .lx-card__body li{ left: 29px; width: 283px; padding-left: 0; }
  .lx-card--result .lx-card__body li:nth-child(1){ top: 60px;  }
  .lx-card--result .lx-card__body li:nth-child(2){ top: 85px;  }
  .lx-card--result .lx-card__body li:nth-child(3){ top: 110px; }
  .lx-card--result .lx-card__body li:nth-child(4){ top: 135px; }
  .lx-card--result .lx-card__body li:nth-child(5){ top: 160px; }
  .lx-card--result .lx-card__body li::before{ left: -13px; top: 4px; }

  /* ======================================================================
     4. HOW WE HELPED — panel #2129:6192 at Figma 1986 -> main 1905.
     Local coordinates are the Figma value minus 1986. The dark strip runs to
     3071, past the panel's 3029, so the section is sized to the strip.
     ====================================================================== */
  .lx-help{ top: 1905px; height: 1085px; padding: 0; }

  /* #2129:6192 — 748x1043 with an 8px INSIDE stroke */
  .lx-help__panel{
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 0;
    width: 748px;
    height: 1043px;
    margin: 0;
    padding: 0;
    background: var(--bg);
    border: 8px solid var(--color-surface-dark);
  }

  /* #2129:6190 — declared SECOND in the frame, i.e. behind the panel; only
     the 42px below the panel's bottom edge and the 10px each side show */
  .lx-help__strip{
    display: block;
    position: absolute;
    z-index: 0;
    left: -1px;
    top: 873px;
    width: 769px;
    height: 212px;
    background: var(--color-surface-dark);
  }

  /* offsets below are from the panel's padding box, 8px inside its border */
  .lx-help__eyebrow-plate{
    position: absolute;
    left: 240px;
    top: 42px;
    width: 250px;
    height: 32px;
    padding: 0;
  }

  .lx-help__eyebrow{
    position: absolute;
    left: 0;
    top: 8px;
    width: 250px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
  }

  .lx-help__title{
    position: absolute;
    left: 173px;
    top: 82px;
    width: 387px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: center;
    text-transform: uppercase;
  }

  .lx-help__sub{
    position: absolute;
    left: 215px;
    top: 152px;
    width: 302px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;           /* box 38 = 2 lines */
    text-align: center;
  }

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

  .lx-step{
    position: absolute;
    width: 252px;
    height: 132px;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .lx-step--1{ left: 244px; top: 266px; }
  .lx-step--2{ left: 94px;  top: 530px; }
  .lx-step--3{ left: 432px; top: 530px; }
  .lx-step--4{ left: 94px;  top: 794px; }
  .lx-step--5{ left: 432px; top: 794px; }

  /* the badge keeps the base rule's -40 / -26 overhang, which is what this
     frame draws on all five (#2129:6274 at 222,2234 against its card 262,2260) */
  .lx-step__badge{ width: 68px; height: 68px; font-size: 14px; line-height: 17px; }

  .lx-step__title{
    position: absolute;
    left: 27px;
    top: 28px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 17px;
    white-space: nowrap;
  }

  .lx-step__rule{ position: absolute; left: 0; top: 53px; width: 250px; margin: 0; }

  .lx-step__desc{
    position: absolute;
    left: 27px;
    top: 61px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 17px;
  }

  /* STEP 1 ALONE indents its title and description by 20 rather than 28 from
     the card's outer edge (#2129:6278 at x:282 against its card at x:262,
     where every other step is card + 28). Read per step, not from the first. */
  .lx-step--1 .lx-step__title,
  .lx-step--1 .lx-step__desc{ left: 19px; }

  .lx-step--1 .lx-step__desc{ width: 215px; }
  .lx-step--2 .lx-step__desc{ width: 199px; }
  .lx-step--3 .lx-step__desc{ width: 200px; }
  .lx-step--4 .lx-step__desc{ width: 222px; }
  .lx-step--5 .lx-step__desc{ width: 208px; }

  /* only TWO connectors on this frame, against three at 1440. Both are the
     same 293x43.29 the desktop SVG already draws, so the file is reused. */
  .lx-help__arrow{ display: block; position: absolute; max-width: none; }
  .lx-help__arrow--1{ left: 104px; top: 451px; width: 293px; height: 43.29px; }
  .lx-help__arrow--2{ left: 117px; top: 717px; width: 293px; height: 43.29px; }
  .lx-help__arrow--3{ display: none; }

  .lx-help__close{
    position: absolute;
    left: 152px;
    top: 971px;
    width: 448px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;
    text-align: center;
  }

  /* ======================================================================
     5. CHECKLIST — outline #2129:6189 at Figma 3105 -> main 3024.
     Local coordinates are the Figma value minus 3105. The dark panel runs to
     3802, past the outline's 3738, so the section is sized to the panel.
     ====================================================================== */
  .lx-check{ top: 3024px; height: 697px; padding: 0; }

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

  /* #2129:6264 bleeds off the left edge, as the file draws it */
  .lx-check__eyebrow-plate{
    position: absolute;
    left: -9px;
    top: 48px;
    width: 265px;
    height: 32px;
    padding: 0;
  }

  .lx-check__eyebrow{
    position: absolute;
    left: 49px;
    top: 8px;
    width: 132px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
  }

  .lx-check__title{
    position: absolute;
    left: 40px;
    top: 88px;
    /* 496 against Figma's declared 492: at 492 Chrome spills a third line.
       496 is the smallest width that gives the file's two, and the break is
       stable from there up (checked to 560). Figma's own second line renders
       494 wide, i.e. past its declared box. */
    width: 496px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: left;
    text-transform: uppercase;
  }

  .lx-check__lead{
    position: absolute;
    left: 40px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    line-height: 19px;
  }

  .lx-check__lead--1{ top: 158px; width: 302px; font-weight: var(--fw-med); }
  /* Chrome needs 464.7 in Figma's 464 box, and it is one line in the file */
  .lx-check__lead--2{ top: 181px; width: 464px; font-weight: var(--fw-reg); white-space: nowrap; }

  .lx-check__grid{ margin: 0; }

  /* the MIDDLE column is narrower than the outer two — 182 against 236 */
  .lx-check__cell{
    position: absolute;
    display: block;
    height: 69px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .lx-check__cell--1{ left: 40px;  top: 232px; width: 236px; }
  .lx-check__cell--2{ left: 293px; top: 232px; width: 182px; }
  .lx-check__cell--3{ left: 492px; top: 232px; width: 236px; }
  .lx-check__cell--4{ left: 40px;  top: 312px; width: 236px; }
  .lx-check__cell--5{ left: 293px; top: 312px; width: 182px; }
  .lx-check__cell--6{ left: 492px; top: 312px; width: 236px; }

  /* the group inside each cell, measured from the cell's padding box */
  .lx-check__cell--1 .lx-item{ left: 12px; top: 16px; }
  .lx-check__cell--2 .lx-item{ left: 19px; top: 15px; }
  .lx-check__cell--3 .lx-item{ left: 23px; top: 15px; }
  .lx-check__cell--4 .lx-item{ left: 12px; top: 14px; }
  .lx-check__cell--5 .lx-item{ left: 19px; top: 14px; }
  .lx-check__cell--6 .lx-item{ left: 23px; top: 14px; }

  /* cells 1 and 4 carry the wide text box; the other four share the narrow
     one and sit half a pixel lower */
  .lx-check__cell .lx-item p{
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 17px;           /* 16 * 1.04 = 16.64 -> 17; box 34 = 2 lines */
  }

  .lx-check__cell--1 .lx-item p,
  .lx-check__cell--4 .lx-item p{ left: 20px; top: 4px;   width: 179px; }
  .lx-check__cell--2 .lx-item p,
  .lx-check__cell--3 .lx-item p,
  .lx-check__cell--5 .lx-item p,
  .lx-check__cell--6 .lx-item p{ left: 20px; top: 4.5px; width: 122px; }

  /* 120 against Figma's declared 122: Chrome fits "Launch strategy" in 121.95
     and keeps it on one line, where the file wraps it to "Launch / strategy"
     and sizes the box 34 tall for two. Held just under the width at which it
     fits — window is 120 and below. */
  .lx-check__cell--6 .lx-item p{ width: 120px; }

  .lx-check__panel{
    position: absolute;
    left: 119px;
    top: 414px;
    width: 531px;
    height: 283px;
    margin: 0;
    padding: 0;
    background: var(--color-surface-dark);
  }

  .lx-check__panel-title{
    position: absolute;
    left: 154px;
    top: 68px;
    width: 223px;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-med);
    line-height: 24px;
    text-align: center;
  }

  .lx-check__panel-text{
    position: absolute;
    left: 85px;
    top: 100px;
    width: 360px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 19px;           /* box 38 = 2 lines */
    text-align: center;
  }

  .lx-check__panel-cta{ left: 146px; top: 162px; }

  /* ======================================================================
     6. FINAL CTA — photo #2129:6327 at Figma 3849 -> main 3768.
     Local coordinates are the Figma value minus 3849. The panel runs to 4355,
     past the photo's 4331, so the section is sized to the panel.
     ====================================================================== */
  .lx-cta{ top: 3768px; height: 506px; padding: 0; overflow: hidden; }

  .lx-cta__bg{
    position: absolute;
    inset: auto;
    left: 0;
    top: 0;
    width: 769px;
    height: 482px;
    max-width: none;
    object-fit: fill;
  }

  /* #2129:6328 carries a fill and NO stroke; the base rule leaves 15px on it */
  .lx-cta__panel{
    position: absolute;
    left: 39px;
    top: 35px;
    width: 689px;
    height: 471px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-surface-dark);
    text-align: left;
  }

  /* panel-relative: the Figma value minus the panel origin (39, 3884) */
  .lx-cta__eyebrow{
    position: absolute;
    left: 253px;
    top: 48px;
    width: 185px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    /* "NEED PERSONAL GUIDANCE?" is 185.5 in a 185 box, so it wrapped and the
       eyebrow rule cut the second line — one line in Figma; nowrap holds it
       (0.25px each side of the centred box, invisible). */
    white-space: nowrap;
  }

  .lx-cta__eyebrow-rule{
    position: absolute;
    left: 236px;
    top: 71px;
    width: 216.5px;
    height: 1px;
    margin: 0;
  }

  .lx-cta__title{
    position: absolute;
    left: 104px;
    top: 79px;
    width: 482px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-med);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: center;
    text-transform: uppercase;
  }

  .lx-cta__sub{
    position: absolute;
    left: 188px;
    top: 149px;
    width: 314px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 19px;
    text-align: center;
  }

  .lx-cta__lede{
    position: absolute;
    left: 260px;
    top: 206px;
    width: 171px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 19px;
    text-align: left;
    white-space: nowrap;   /* Chrome needs 171.76 in Figma's 171 box */
  }

  .lx-cta__branch{
    display: block;
    position: absolute;
    left: 109px;
    top: 233px;
    width: 472px;
    height: 57px;
    max-width: none;
  }

  .lx-cta__legs{ margin: 0; }

  .lx-cta__leg{
    position: absolute;
    top: 303px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;
    text-align: left;
    white-space: nowrap;
  }

  .lx-cta__leg--1{ left: 70px;  width: 116px; }
  .lx-cta__leg--2{ left: 270px; width: 148px; }
  .lx-cta__leg--3{ left: 473px; width: 166px; }

  .lx-cta__btn{ left: 226px; top: 366px; }
}