/* ==========================================================================
   THE DESIGNERS HUB — Scale
   Source of truth: Figma frame "Scale" #2129:2165 (1440 wide).
   Section tops (frame y): hero 102 | reality 688 | case 1254 | help 1868 |
   cta 2842. Offsets inside a section are the Figma coordinate minus its top.

   Differs from both Launch and Growth: 6 pain items, case cards 245 tall
   holding 7 numbered entries, a section heading split across two text nodes,
   centred CTA legs, and an extra closing line under them.
   ========================================================================== */

.sc-reality { position: relative; padding-block: var(--space-48); }
.sc-reality__outline { display: none; }
.sc-reality__title { text-align: center; }
.sc-reality__sub   { margin-top: var(--space-16); text-align: center; }
.sc-reality__rule  { height: 1px; background: var(--gold); }
.sc-reality__grid  { display: grid; gap: var(--space-24); margin-top: var(--space-32); }

.sc-reality__callout {
  margin-top: var(--space-32);
  border: var(--stroke-1) solid var(--black);
  padding: var(--space-24);
  text-align: center;
}
.sc-reality__callout p { color: #666666; font-size: var(--fs-lead); }

.sc-case { position: relative; overflow: hidden; }
.sc-case__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-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);
}
.sc-case__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }
.sc-case__eyebrow-rule { height: 1px; background: #CD9926; margin-top: 8px; }
.sc-case__title { margin-top: var(--space-8); color: var(--white); font-weight: var(--fw-med); font-size: var(--fs-h2); text-transform: uppercase; }
.sc-case__cards { display: grid; gap: var(--space-24); margin-top: var(--space-32); }

.sc-help { position: relative; }
.sc-help__panel { position: relative; background: var(--bg); border: 8px solid var(--color-surface-dark); padding-block: var(--space-48); }
.sc-help__strip { display: none; }
.sc-help__eyebrow-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-dark); padding: 8px 16px; }
.sc-help__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }
.sc-help__title { text-align: center; }
.sc-help__title--2 { margin-top: var(--space-8); }
.sc-help__sub   { margin-top: var(--space-16); text-align: center; }
.sc-help__close { margin-top: var(--space-32); text-align: center; }
.sc-help__steps { display: grid; gap: 60px var(--space-64); margin-top: var(--space-48); padding-left: 40px; }
.sc-help__arrow { display: none; }

.sc-cta { position: relative; overflow: hidden; }
.sc-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-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);
}
.sc-cta__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }
.sc-cta__eyebrow-rule { height: 1px; background: #CD9926; margin: 8px auto 0; }
.sc-cta__title { margin-top: var(--space-8); color: var(--white); }
.sc-cta__lede  { margin-top: var(--space-24); font-weight: var(--fw-light); color: var(--white); }
.sc-cta__branch { display: none; }
.sc-cta__legs { display: grid; gap: var(--space-16); margin-top: var(--space-24); }
.sc-cta__leg { font-weight: var(--fw-light); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--bg); text-align: center; }
.sc-cta__note { margin-top: var(--space-16); font-weight: var(--fw-light); font-size: var(--fs-body); color: var(--bg); text-align: center; }
.sc-cta__btn { margin-top: var(--space-32); }

/* ==========================================================================
   MOBILE — literal Figma geometry, 390 canvas
   Source of truth: frame "Scale mob" #2129:4308 (390 x 4317).

   scale.html loads launch.css first and its body carries `page-launch`, so
   the launch mobile block supplies the shared machinery (main box, section
   positioning, margin/padding resets, buttons, .lx-card / .lx-step /
   .lx-item internals). Only what differs is redefined here.

   Same origin convention: the frame draws no header/footer, its y:0 is the
   page top, the header is 81, so every coordinate is the FIGMA VALUE MINUS
   81. Offsets are noted per block.

   Scale differs from both siblings again: six reality bullets, SEVEN "what
   we did" items, a two-part help heading, a 277-wide eyebrow plate, a
   three-line CTA title and a closing note under the button.

   STROKE ALIGNMENT (node renders): hero plate #2129:4332 422x481 -> 438x497
   = OUTSIDE 8; case boxes #2129:4368 280x205 -> 288x213 = OUTSIDE 4; steps
   frame #2283:4654 748x996 unchanged = INSIDE. Same pattern as the others.
   ========================================================================== */
@media (max-width: 767px) {

  /* DEAD SPACE TRIMMED 2026-07-20 at the client's request: content ends at
     3209 against a shared main of 4236, so 1027px was blank before the
     footer. Trimmed to content + 48. */
  .page-scale main { height: 3257px; }

  /* ======================================================================
     1. HERO — #2129:4331. Plate outer top at Figma 105 -> main 24.
     Local coordinates are the Figma value minus 105.
     ====================================================================== */
  .page-scale .lx-hero { height: 497px; }

  .page-scale .lx-hero::before { width: 438px; height: 497px; }

  .page-scale .lx-hero__card::before { top: 189px; height: 285px; }

  .page-scale .lx-hero__title { top: 36px; width: 300px; }

  /* scale's leads carry ONLY .sc-hero__lead — not .lx-hero__lead like the
     other two — so none of launch's hero-lead rules reach them and the whole
     treatment has to be restated here */
  .page-scale .sc-hero__lead {
    position: absolute;
    left: 9px;
    top: 90px;
    width: 346px;
    max-width: none;
    margin: 0;
    font-size: 15px;
    font-weight: var(--fw-reg);
    line-height: 18px;
  }

  .page-scale .sc-hero__lead--2 {
    left: 14px;
    top: 330px;
    width: 306px;
    color: var(--white);
  }

  .page-scale .lx-hero__cta { top: 390px; }

  /* #2129:4340 is the one hero photo across the three stage frames that does
     NOT bleed — it sits flush at x:0 and is exactly the canvas width */
  .page-scale .lx-hero__model { left: 0; top: 152px; width: 390px; height: 162px; }

  /* ======================================================================
     2. REALITY — top rule #2129:4343 at Figma 641 -> main 560.
     Local coordinates are the Figma value minus 641.
     ====================================================================== */
  .sc-reality { top: 560px; height: 384px; overflow: hidden; }

  .sc-reality__outline { display: none; }

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

  .sc-reality__rule--top { top: 0; }
  .sc-reality__rule--mid { top: 103px; }

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

  .sc-reality__sub {
    position: absolute;
    left: 9px;
    top: 72px;
    width: 346px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    white-space: nowrap;
  }

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

  /* six bullets; DOM order is not the frame's reading order
     (#2129:4313 / 4316 / 4328 / 4319 / 4325 / 4322) */
  .sc-reality__grid .sc-item--1 { left: 8px;   top: 125px; }
  .sc-reality__grid .sc-item--2 { left: 204px; top: 125px; }
  .sc-reality__grid .sc-item--3 { left: 8px;   top: 178px; }
  .sc-reality__grid .sc-item--4 { left: 204px; top: 231px; }
  .sc-reality__grid .sc-item--5 { left: 203px; top: 183px; }
  .sc-reality__grid .sc-item--6 { left: 8px;   top: 231px; }

  .sc-reality__grid .sc-item--1 p { width: 124px; }
  .sc-reality__grid .sc-item--2 p { width: 122px; }
  .sc-reality__grid .sc-item--3 p { width: 130px; }
  .sc-reality__grid .sc-item--4 p { width: 132px; }
  .sc-reality__grid .sc-item--5 p { width: 159px; }
  .sc-reality__grid .sc-item--6 p { width: 124px; }

  /* #2129:4345 — no top border; #2129:4347/4346 restore 25px at each end */
  .sc-reality__callout {
    position: absolute;
    left: 8px;
    top: 292px;
    width: 374px;
    height: 92px;
    margin: 0;
    padding: 0;
    border: var(--stroke-1) solid var(--color-surface-dark);
    border-top: 0;
    background: none;
  }

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

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

  /* a single 3-line paragraph here, where launch/growth split muted+strong */
  .sc-reality__callout p {
    position: absolute;
    left: 29px;
    top: 18px;
    width: 315px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
    text-align: center;
  }

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

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

  .sc-case__panel {
    position: absolute;
    left: -10px;
    top: 13px;
    width: 392px;
    height: 618px;
    background: var(--color-surface-dark);
    border: 0;
    padding: 0;
  }

  /* panel origin is (-10, 1126); children are the Figma value minus that */
  .sc-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;
    white-space: nowrap;
  }

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

  .sc-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;
    white-space: nowrap;
  }

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

  .page-scale .lx-card { left: 61px; width: 288px; }

  .page-scale .lx-card--found  { top: 95px;  height: 114px; }
  .page-scale .lx-card--did    { top: 225px; height: 213px; }
  .page-scale .lx-card--result { top: 454px; height: 133px; }

  .page-scale .lx-card--found .lx-card__body  { width: 246px; }
  .page-scale .lx-card--result .lx-card__body { width: 242px; }

  /* seven numbered items on a flat 20px pitch */
  .page-scale .lx-card--did .lx-card__body li:nth-child(1) { top: 0;     width: 217px; }
  .page-scale .lx-card--did .lx-card__body li:nth-child(2) { top: 20px;  width: 106px; }
  .page-scale .lx-card--did .lx-card__body li:nth-child(3) { top: 40px;  width: 87px;  }
  .page-scale .lx-card--did .lx-card__body li:nth-child(4) { top: 60px;  width: 147px; }
  .page-scale .lx-card--did .lx-card__body li:nth-child(5) { top: 80px;  width: 93px;  }
  .page-scale .lx-card--did .lx-card__body li:nth-child(6) { top: 100px; width: 93px;  }
  .page-scale .lx-card--did .lx-card__body li:nth-child(7) { top: 120px; width: 160px; }

  /* the result is one paragraph here, not a list — it keeps the single grey
     dot treatment the "found" card uses, but in gold (#2129:4394) */
  .page-scale .lx-card--result .lx-card__body::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
  }

  /* ======================================================================
     4. APPROACH TO SCALING — panel #2283:4654 at Figma 1760 -> main 1679.
     Local coordinates are the Figma value minus 1760; panel children are
     relative to its padding box, which starts at (-292, 1768).
     ====================================================================== */
  .sc-help { top: 1679px; height: 1030px; overflow: hidden; }

  .sc-help__strip {
    display: block;
    position: absolute;
    z-index: 1;
    left: -311px;
    top: 796px;
    width: 769px;
    height: 234px;
    background: var(--color-surface-dark);
  }

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

  /* 277 wide here, against 200 on launch and growth */
  .sc-help__eyebrow-plate {
    position: absolute;
    left: 279px;
    top: 28px;
    width: 277px;
    height: 27px;
    background: var(--color-surface-dark);
  }

  .sc-help__eyebrow {
    position: absolute;
    left: 22px;
    top: 6px;
    width: 230px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* the heading is TWO nodes here (#2129:4399 / #2129:4400) at 19px, where
     launch and growth use a single 20px block */
  .sc-help__title {
    position: absolute;
    left: 300px;
    max-width: none;
    margin: 0;
    font-size: 19px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-align: left;
    text-transform: uppercase;
  }

  /* line 1 is one line in a 358 box; the browser measures it at 358.71 */
  .sc-help__title--1 { top: 63px; width: 358px; white-space: nowrap; }

  /* line 2 is two lines in Figma's 360; the browser needs 363 to break as
     "It's about building a system that / can grow without breaking." */
  .sc-help__title--2 { top: 87px; width: 363px; }

  .sc-help__sub {
    position: absolute;
    left: 301px;
    top: 135px;
    width: 355px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    white-space: nowrap;
  }

  .sc-help__arrow { display: none; }

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

  /* the cards sit at Figma x:8 here against 9 / 6 on the siblings */
  .page-scale .lx-step { left: 300px; }

  .sc-step--1 { top: 196px; }
  .sc-step--2 { top: 348px; }
  .sc-step--3 { top: 500px; }
  .sc-step--4 { top: 652px; }
  .sc-step--5 { top: 804px; }

  .sc-step--1 .lx-step__desc { width: 278px; }
  .sc-step--2 .lx-step__desc { width: 243px; }
  .sc-step--3 .lx-step__desc { width: 253px; }
  .sc-step--4 .lx-step__desc { width: 262px; }
  .sc-step--5 .lx-step__desc { width: 302px; }

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

  /* ======================================================================
     5. FINAL CTA — background #2129:4349 at Figma 2814 -> main 2733.
     Local coordinates are the Figma value minus 2814; panel children are
     relative to the panel at (-10, 2827).
     ====================================================================== */
  .sc-cta { top: 2733px; height: 476px; overflow: hidden; }

  .sc-cta__bg {
    position: absolute;
    left: -57px;
    top: 0;
    width: 569px;
    height: 476px;
    max-width: none;
    object-fit: fill;
  }

  .sc-cta__panel {
    position: absolute;
    left: -10px;
    top: 13px;
    width: 407px;
    height: 430px;
    background: var(--color-surface-dark);
    border: 0;
    padding: 0;
    text-align: left;
  }

  .sc-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;
    white-space: nowrap;
  }

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

  /* three lines here (h63), against two on launch and growth */
  .sc-cta__title {
    position: absolute;
    left: 17px;
    top: 52px;
    width: 376px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-med);
    line-height: 1.06;
    text-align: left;
  }

  .sc-cta__lede {
    position: absolute;
    left: 96px;
    top: 139px;
    width: 218px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    white-space: nowrap;
  }

  .sc-cta__branch { display: none; }

  .sc-cta__legs { position: static; }

  /* #2129:4433 — the vertical stem */
  .sc-cta__legs::before {
    content: "";
    position: absolute;
    left: 121px;
    top: 163.5px;
    width: 167.5px;
    height: 1px;
    background: var(--gold);
  }

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

  /* #2129:4360-4362 — arrow connectors between the legs */
  .sc-cta__leg::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 24px;
    background: url("../img/vec/m-lx-connector.svg") no-repeat center / contain;
  }

  .sc-cta__leg--1 { left: 105px; top: 198px; width: 200px; }
  .sc-cta__leg--2 { left: 95px;  top: 240px; width: 220px; }
  .sc-cta__leg--3 { left: 77px;  top: 282px; width: 256px; }

  .sc-cta__leg--1::before { left: 97px;  top: -28px; }
  .sc-cta__leg--2::before { left: 107px; top: -23px; }
  .sc-cta__leg--3::before { left: 125px; top: -25px; }

  .sc-cta__btn {
    position: absolute;
    left: 19px;
    top: 321px;
    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;
  }

  /* #2129:4355 — a closing line under the button, unique to this frame */
  .sc-cta__note {
    position: absolute;
    left: 65px;
    top: 381px;
    width: 281px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
    text-align: left;
    white-space: nowrap;
  }
}

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

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

  /* single-line nodes (see Launch for why these are pinned) */
  .sc-hero__lead--2,
  .sc-reality__sub,
  .sc-case__eyebrow,
  .sc-case__title,
  .sc-help__eyebrow,
  .sc-help__title,
  .sc-help__sub,
  .sc-help__close,
  .sc-cta__eyebrow,
  .sc-cta__lede,
  .sc-cta__note { white-space: nowrap; }

  /* ---- 1. HERO : H1 is a SINGLE line here (h38), text on x:513 ---- */
  .page-scale .lx-hero__card { padding: 28px 40px 0 26px; }
  .page-scale .lx-hero__model { left: -15px; top: -34px; width: 528px; height: 476px; }
  .sc-hero__title { width: 742px; color: var(--grey-900); white-space: nowrap; }
  .sc-hero__lead  { width: 510px; margin-top: 16px; line-height: 22px; }
  .sc-hero__lead--2 { width: 498px; margin-top: 8px; line-height: 22px; }
  .page-scale .lx-hero__cta { margin-top: 48px; }

  /* ---- 2. REALITY : outline y:688 ---- */
  .sc-reality { height: 494px; margin-top: 144px; padding-block: 0; }
  .sc-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. */
  .sc-reality__outline { border-top: 0; }
  .sc-reality__outline::before,
  .sc-reality__outline::after {
    content: "";
    position: absolute;
    top: 0;
    width: 197px;
    height: 4px;
    background: var(--color-surface-dark);
  }
  .sc-reality__outline::before { left: -4px; }
  .sc-reality__outline::after  { right: -4px; }

  .sc-reality__rule--top { position: absolute; left: 428px; top: 0;    width: 584px; }
  .sc-reality__rule--mid { position: absolute; left: 428px; top: 148px; width: 584px; }
  .sc-reality__title { position: absolute; left: 429px; top: 16px;  width: 582px; margin: 0; }
  .sc-reality__sub   { position: absolute; left: 498px; top: 110px; width: 445px; margin: 0; font-size: var(--fs-lead); }
  .sc-reality__grid  { display: block; margin: 0; }
  .sc-reality__grid .lx-item { position: absolute; }
  .sc-item--1 { left: 288px; top: 198px; width: 207px; }
  .sc-item--2 { left: 624px; top: 198px; width: 192px; }
  .sc-item--3 { left: 945px; top: 198px; width: 189px; }
  .sc-item--4 { left: 288px; top: 296px; width: 188px; }
  .sc-item--5 { left: 624px; top: 296px; width: 228px; }
  .sc-item--6 { left: 945px; top: 296px; width: 191px; }
  .sc-reality__callout {
    position: absolute; left: 323px; top: 386px;
    width: 794px; height: 108px; margin: 0; padding: 0;
  }
  .sc-reality__callout p { position: absolute; left: 90px; top: 27px; width: 615px; line-height: 22px; }

  /* ---- 3. CASE : bg y:1254 h474 | panel x:36 y:1309 1368x491 | cards 395x245 ---- */
  .sc-case { height: 546px; margin-top: 72px; }
  .sc-case__bg { height: 474px; top: 0; bottom: auto; }
  .sc-case__panel { position: absolute; left: 36px; top: 55px; width: 1368px; height: 491px; padding: 0; }
  .sc-case__eyebrow      { position: absolute; left: 44px; top: 72px;  width: 176px; }
  .sc-case__eyebrow-rule { position: absolute; left: 44px; top: 96px;  width: 226px; margin: 0; }
  .sc-case__title        { position: absolute; left: 44px; top: 104px; width: 496px; margin: 0; }
  .sc-case__cards { display: block; margin: 0; }
  .sc-case__cards .lx-card { position: absolute; top: 190px; width: 395px; height: 245px; padding: 0; }
  .sc-card--before { left: 49px; }
  .sc-card--did    { left: 486px; }
  .sc-card--result { left: 924px; }
  .sc-case__cards .lx-card__label { position: absolute; left: 11px; top: 15px; }
  /* inset off the card border — see launch.css */
  .sc-case__cards .lx-card__rule  { position: absolute; left: 15px; top: 40px; width: 362.5px; margin: 0; }
  .sc-case__cards .lx-card__body  { position: absolute; left: 0; top: 56px; right: 0; margin: 0; }
  .sc-card--before .lx-card__body p { padding-left: 29px; width: 362px; line-height: 1.06; }
  .sc-card--result .lx-card__body p { padding-left: 29px; width: 376px; line-height: 1.06; }

  /* ---- 4. HELP : panel y:1868, heading is two separate nodes ---- */
  .sc-help { height: 936px; margin-top: 68px; }
  .sc-help__panel { position: absolute; left: -1px; top: 0; width: 1441px; height: 888px; padding: 0; z-index: 1; }
  .sc-help__strip {
    display: block; position: absolute;
    left: -1px; top: 787px; width: 1441px; height: 149px;
    background: var(--color-surface-dark); z-index: 0;
  }
  .sc-help__eyebrow-plate { position: absolute; left: 575px; top: 55px; width: 293px; height: 32px; padding: 0; }
  .sc-help__eyebrow { width: 100%; }
  .sc-help__title--1 { position: absolute; left: 420px; top: 95px;  width: 602px; margin: 0; }
  .sc-help__title--2 { position: absolute; left: 153px; top: 142px; width: 1137px; margin: 0; }
  .sc-help__sub   { position: absolute; left: 493px; top: 197px; width: 456px; margin: 0; font-size: var(--fs-lead); }
  .sc-help__close { position: absolute; left: 482px; top: 814px; width: 479px; margin: 0; font-size: var(--fs-lead); z-index: 2; }
  .sc-help__steps { display: block; margin: 0; padding: 0; }
  .sc-help__steps .lx-step { position: absolute; width: 252px; height: 132px; padding: 29px 20px 0 20px; }
  .sc-step--1 { left: 449px; top: 345px; }   /* Figma y:2213 */
  .sc-step--2 { left: 779px; top: 345px; }
  .sc-step--3 { left: 287px; top: 624px; }   /* Figma y:2492 */
  .sc-step--4 { left: 615px; top: 624px; }
  .sc-step--5 { left: 946px; top: 624px; }
  .sc-help__arrow { display: block; position: absolute; width: 293px; z-index: 2; }
  .sc-help__arrow--1 { left: 459px; top: 268px; }
  .sc-help__arrow--2 { left: 300px; top: 547px; }
  .sc-help__arrow--3 { left: 631px; top: 547px; }

  /* ---- 5. FINAL CTA : bg y:2842 h577 | panel x:80 y:2914 1280x561 ---- */
  .sc-cta { height: 633px; margin-top: 38px; margin-bottom: 88px; }
  .sc-cta__bg { height: 577px; top: 0; bottom: auto; }
  .sc-cta__panel { position: absolute; left: 80px; top: 72px; width: 1280px; height: 561px; padding: 0; text-align: left; }
  .sc-cta__eyebrow      { position: absolute; left: 533px; top: 57px; width: 185px; }
  .sc-cta__eyebrow-rule { position: absolute; left: 512px; top: 81px; width: 226px; margin: 0; }
  .sc-cta__title { position: absolute; left: 219px; top: 89px; width: 843px; margin: 0; text-align: center; }
  .sc-cta__lede  { position: absolute; left: 487px; top: 199px; width: 277px; margin: 0; font-size: var(--fs-lead); text-align: left; }
  .sc-cta__branch { display: block; position: absolute; left: 354px; top: 228px; width: 572.5px; }
  .sc-cta__legs { display: block; margin: 0; }
  .sc-cta__leg { position: absolute; top: 315px; text-align: center; }
  .sc-cta__leg--1 { left: 227px; width: 165px; }
  .sc-cta__leg--2 { left: 559px; width: 163px; }
  .sc-cta__leg--3 { left: 830px; width: 226px; }
  .sc-cta__note { position: absolute; left: 480px; top: 448px; width: 321px; margin: 0; }
  .sc-cta__btn { position: absolute; left: 521px; top: 380px; margin: 0; }
}