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

   Growth is NOT a copy of Launch: 7 pain items rather than 5, case cards
   164 tall rather than 212, help panel 12px lower, and no checklist block.
   Shared visual language only — geometry is measured separately.
   ========================================================================== */

/* ==========================================================================
   1. HERO — frame y:102, card x:472, text on x:513 (Launch uses 550)
   ========================================================================== */
.gr-hero__lead  { margin-top: var(--space-16); }
.gr-hero__lead + .gr-hero__lead { margin-top: var(--space-8); }

/* ==========================================================================
   2. REALITY — outline x:30 y:688 1378x494 | 7 items | callout x:323 w794
   ========================================================================== */
.gr-reality { position: relative; padding-block: var(--space-48); }
.gr-reality__outline { display: none; }
.gr-reality__title { text-align: center; }
.gr-reality__sub   { margin-top: var(--space-16); text-align: center; }
.gr-reality__rule  { height: 1px; background: var(--gold); }
.gr-reality__grid  { display: grid; gap: var(--space-24); margin-top: var(--space-32); }

.gr-reality__callout {
  margin-top: var(--space-32);
  border: var(--stroke-1) solid var(--black);
  padding: var(--space-24);
  text-align: center;
}
.gr-reality__callout .muted  { color: #666666; font-size: var(--fs-lead); }
.gr-reality__callout .strong { margin-top: var(--space-8); color: var(--grey-900); font-size: var(--fs-lead); font-weight: var(--fw-med); }

/* ==========================================================================
   3. CASE — bg y:1254 h474 | panel x:36 y:1309 1368x459 | cards 395x164
   ========================================================================== */
.gr-case { position: relative; overflow: hidden; }
.gr-case__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.gr-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);
}

.gr-case__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }
.gr-case__eyebrow-rule { height: 1px; background: #CD9926; margin-top: 8px; }
.gr-case__title { margin-top: var(--space-8); color: var(--white); font-weight: var(--fw-med); font-size: var(--fs-h2); text-transform: uppercase; }

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

/* ==========================================================================
   4. HOW WE HELPED — panel y:1844 1441x888 | strip y:2631 | steps y:2189/2468
   ========================================================================== */
.gr-help { position: relative; }
.gr-help__panel { position: relative; background: var(--bg); border: 8px solid var(--color-surface-dark); padding-block: var(--space-48); }
.gr-help__strip { display: none; }
.gr-help__eyebrow-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-dark); padding: 8px 0; }
.gr-help__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }
.gr-help__title { text-align: center; }
.gr-help__sub   { margin-top: var(--space-16); text-align: center; }
.gr-help__close { margin-top: var(--space-32); text-align: center; }
.gr-help__steps { display: grid; gap: 60px var(--space-64); margin-top: var(--space-48); padding-left: 40px; }
.gr-help__arrow { display: none; }

/* ==========================================================================
   5. FINAL CTA — bg y:2834 h577 | panel x:80 y:2906 1280x561
   ========================================================================== */
.gr-cta { position: relative; overflow: hidden; }
.gr-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.gr-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);
}

.gr-cta__eyebrow { color: var(--gold); font-size: 13px; text-align: center; }
.gr-cta__eyebrow-rule { height: 1px; background: #CD9926; margin: 8px auto 0; }
.gr-cta__title { margin-top: var(--space-8); color: var(--white); }
.gr-cta__lede  { margin-top: var(--space-24); font-weight: var(--fw-light); color: var(--white); }
.gr-cta__branch { display: none; }
.gr-cta__legs { display: grid; gap: var(--space-16); margin-top: var(--space-24); }
.gr-cta__leg { font-weight: var(--fw-light); font-size: var(--fs-body); color: var(--bg); text-align: center; }
.gr-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 "Growth  mob" #2129:4178 (390 x 4317).

   growth.html loads launch.css first and its body carries `page-launch`, so
   the launch mobile block already supplies the shared machinery (main box,
   section positioning, margin/padding resets, buttons, .lx-card / .lx-step /
   .lx-item internals). Only what genuinely differs is redefined here —
   per the note about shared values, nothing below is a value launch also
   needs.

   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 used per block are noted.

   Growth is NOT structurally identical to launch: five sections, not six
   (there is no checklist), seven reality bullets instead of five, and the
   three case boxes are all the same height.

   STROKE ALIGNMENT (node renders): hero plate #2129:4205 422x466 -> 438x482
   = OUTSIDE 8; case boxes #2129:4241 280x125 -> 288x133 = OUTSIDE 4; steps
   frame #2282:4542 748x996 unchanged = INSIDE. Same pattern as launch.
   ========================================================================== */
@media (max-width: 767px) {

  /* DEAD SPACE TRIMMED 2026-07-20 at the client's request. This page shares
     launch's main box, but the 390 frame leaves a huge empty tail here: the
     content ends at 3177 against a main of 4236, so 1059px - a quarter of the
     page - was blank before the footer. Trimmed to content + 48. */
  .page-growth main { height: 3225px; }

  /* ======================================================================
     1. HERO — #2129:4204. Plate outer top at Figma 105 -> main 24, but this
     hero is 482 tall against launch's 551 and its parts sit differently.
     Local coordinates are the Figma value minus 105.
     ====================================================================== */
  .page-growth .lx-hero { height: 482px; }

  .page-growth .lx-hero::before { width: 438px; height: 482px; }

  /* #2129:4206 — the dark band starts higher than launch's */
  .page-growth .lx-hero__card::before { top: 161px; height: 295px; }

  /* #2129:4210 — 2 lines here (h46) where launch has 3.
     top 36 -> 46: shifted 10px to clear the on-card tab row (see launch.css). */
  .page-growth .lx-hero__title { top: 46px; width: 365px; }

  /* #2129:4211 — a single 18px line. margin:0 because the 1440 rules leave
     a top margin on both leads, and it adds onto `top`. +10 with the title. */
  .page-growth .gr-hero__lead { top: 100px; width: 311px; margin: 0; }

  /* #2129:4212 — growth marks its second lead .gr-hero__lead--2, so the
     launch --2 rule does not reach it. Carries a manual <br>. */
  .page-growth .gr-hero__lead--2 {
    left: 14px;
    top: 302px;
    width: 306px;
    margin: 0;
    color: var(--white);
  }

  .page-growth .lx-hero__cta { top: 370px; }

  .page-growth .lx-hero__model { top: 124px; }

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

  .gr-reality__outline { display: none; }

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

  .gr-reality__rule--top { top: 0; }
  .gr-reality__rule--mid { top: 101px; }

  .gr-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;
  }

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

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

  /* seven bullets over three rows; DOM order is not the frame's reading
     order (#2129:4183 / 4198 / 4201 / 4189 / 4186 / 4192 / 4195) */
  .gr-reality__grid .gr-item--1 { left: 8px;   top: 123px; }
  .gr-reality__grid .gr-item--2 { left: 203px; top: 176px; }
  .gr-reality__grid .gr-item--3 { left: 272px; top: 123px; }
  .gr-reality__grid .gr-item--4 { left: 9px;   top: 176px; }
  .gr-reality__grid .gr-item--5 { left: 152px; top: 123px; }
  .gr-reality__grid .gr-item--6 { left: 8px;   top: 231px; }
  .gr-reality__grid .gr-item--7 { left: 186px; top: 229px; }

  .gr-reality__grid .gr-item--1 p { width: 114px; }
  .gr-reality__grid .gr-item--2 p { width: 117px; }
  .gr-reality__grid .gr-item--3 p { width: 92px;  }
  .gr-reality__grid .gr-item--4 p { width: 132px; }
  .gr-reality__grid .gr-item--5 p { width: 90px;  }
  .gr-reality__grid .gr-item--6 p { width: 124px; }
  .gr-reality__grid .gr-item--7 p { width: 154px; }

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

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

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

  .gr-reality__callout .muted {
    position: absolute;
    left: 36px;
    top: 18px;
    width: 300px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
    text-align: center;
  }

  .gr-reality__callout .strong {
    position: absolute;
    left: 76px;
    top: 58px;
    width: 221px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    text-align: center;
  }

  /* ======================================================================
     3. CASE STUDY — background #2129:4222 at Figma 1068 -> main 987.
     Local coordinates are the Figma value minus 1068.
     ====================================================================== */
  .gr-case { top: 987px; height: 628px; overflow: hidden; }

  .gr-case__bg {
    position: absolute;
    left: -68px;
    top: 0;
    width: 592px;
    height: 582px;
    max-width: none;
    object-fit: fill;
  }

  /* #2129:4224 — border reset for the same reason as launch's case panel */
  .gr-case__panel {
    position: absolute;
    left: -10px;
    top: 38px;
    width: 392px;
    height: 590px;
    background: var(--color-surface-dark);
    border: 0;
    padding: 0;
  }

  /* panel origin is (-10, 1106); children are the Figma value minus that */
  .gr-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;
  }

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

  /* Figma renders this on one line (h21) in its 333 box; the browser spills
     a second, doubling the block. Held to the file's single line. */
  .gr-case__title {
    position: absolute;
    left: 16px;
    top: 52px;
    width: 333px;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-transform: uppercase;
    white-space: nowrap;
  }

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

  /* all three boxes are the same height here, unlike launch */
  .page-growth .lx-card { left: 61px; width: 288px; height: 133px; }

  .page-growth .lx-card--found  { top: 101px; }
  .page-growth .lx-card--did    { top: 258px; }
  .page-growth .lx-card--result { top: 415px; }

  /* the body sits 47px into the card here against launch's 52 */
  .page-growth .lx-card__body { top: 47px; }

  .page-growth .lx-card--found .lx-card__body { width: 218px; }

  .page-growth .lx-card--did .lx-card__body li:nth-child(1) { top: 0;    width: 87px;  }
  .page-growth .lx-card--did .lx-card__body li:nth-child(2) { top: 20px; width: 232px; }
  .page-growth .lx-card--did .lx-card__body li:nth-child(3) { top: 40px; width: 246px; }

  /* result item 1 wraps to two lines in Figma (h24), so 2 and 3 step by 29 */
  .page-growth .lx-card--result .lx-card__body li:nth-child(1) { top: 0;    width: 242px; }
  .page-growth .lx-card--result .lx-card__body li:nth-child(2) { top: 29px; width: 118px; }
  .page-growth .lx-card--result .lx-card__body li:nth-child(3) { top: 49px; width: 243px; }

  /* ======================================================================
     4. HOW WE HELPED — panel #2282:4542 at Figma 1728 -> main 1647.
     Local coordinates are the Figma value minus 1728; panel children are
     relative to its padding box, which starts at (-292, 1736).
     ====================================================================== */
  .gr-help { top: 1647px; height: 1030px; overflow: hidden; }

  /* #2282:4541 runs under the panel; only its tail below 2724 is visible */
  .gr-help__strip {
    display: block;
    position: absolute;
    z-index: 1;
    left: -311px;
    top: 796px;
    width: 769px;
    height: 234px;
    background: var(--color-surface-dark);
  }

  .gr-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;
  }

  .gr-help__eyebrow-plate {
    position: absolute;
    left: 279px;
    top: 21px;
    width: 200px;
    height: 27px;
    background: var(--color-surface-dark);
  }

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

  .gr-help__title {
    position: absolute;
    left: 301px;
    top: 56px;
    width: 292px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
    text-align: left;
  }

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

  .gr-help__arrow { display: none; }

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

  .page-growth .lx-step { left: 298px; }

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

  .gr-step--1 .lx-step__desc { width: 278px; }
  .gr-step--2 .lx-step__desc { width: 243px; }
  .gr-step--3 .lx-step__desc { width: 253px; }
  .gr-step--4 .lx-step__desc { width: 262px; }
  /* #2282:4567 is garbled in the file — "We prepare your brand for a
     confident We create a clear plan for sustainable expansion. entry."
     merges two sentences. The 1440 copy ("We create a clear plan for
     sustainable expansion.") ships instead, so this box is sized to that
     rather than to Figma's 302x45. FLAGGED. */
  .gr-step--5 .lx-step__desc { width: 262px; }

  .gr-help__close {
    position: absolute;
    left: 377px;
    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:4223 at Figma 2782 -> main 2701.
     Local coordinates are the Figma value minus 2782; panel children are
     relative to the panel at (-10, 2795).

     NOT PORTED: #2129:4229 repeats "Give you clear, practical solutions"
     a second time at y:3156, below the button and outside the panel, with
     no connector — a stray duplicate of the third leg left in the frame.
     ====================================================================== */
  .gr-cta { top: 2701px; height: 476px; overflow: hidden; }

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

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

  .gr-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;
  }

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

  .gr-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;
  }

  .gr-cta__lede {
    position: absolute;
    left: 100px;
    top: 119px;
    width: 211px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    white-space: nowrap;
  }

  .gr-cta__branch { display: none; }

  .gr-cta__legs { position: static; }

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

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

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

  .gr-cta__leg--1 { left: 122px; top: 178px; width: 167px; }
  .gr-cta__leg--2 { left: 107px; top: 220px; width: 197px; }
  .gr-cta__leg--3 { left: 111px; top: 262px; width: 188px; }

  .gr-cta__leg--1::before { left: 80px; top: -28px; }
  .gr-cta__leg--2::before { left: 95px; top: -23px; }
  .gr-cta__leg--3::before { left: 91px; top: -25px; }

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

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

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

  /* single-line text nodes (see Launch for why these are pinned) */
  .gr-hero__lead,
  .gr-reality__sub,
  .gr-reality__callout .muted,
  .gr-reality__callout .strong,
  .gr-case__eyebrow,
  .gr-case__title,
  .lx-card__label,
  .gr-help__eyebrow,
  .gr-help__sub,
  .gr-help__close,
  .gr-cta__eyebrow,
  .gr-cta__lede,
  .gr-cta__leg { white-space: nowrap; }

  /* ---- 1. HERO : text on x:513 => card padding-left 26 (+15 border) ----
     No margin-top here on purpose: the shared y:190 comes from launch.css,
     and growth.css loads after it, so an override would desync this page. */
  .page-growth .lx-hero__card { padding: 28px 40px 0 26px; }
  .page-growth .lx-hero__model { left: -15px; top: -34px; width: 528px; height: 476px; }
  .gr-hero__title { width: 599px; color: var(--grey-900); }
  .gr-hero__lead  { width: 361px; line-height: 22px; }
  /* Figma breaks this explicitly (\n) into 2 lines, h44. Its box measures 350
     there but line 1 needs 370 in the browser, which added a 3rd line and
     pushed the CTA 22px past y:276. nowrap keeps the <br> as the only break. */
  .gr-hero__lead--2 { width: 372px; line-height: 22px; white-space: nowrap; }
  .page-growth .lx-hero__cta { margin-top: 26px; }

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

  .gr-reality__rule--top { position: absolute; left: 428px; top: 0;    width: 584px; }
  .gr-reality__rule--mid { position: absolute; left: 428px; top: 148px; width: 584px; }
  .gr-reality__title { position: absolute; left: 426px; top: 16px;  width: 589px; margin: 0; }
  .gr-reality__sub   { position: absolute; left: 411px; top: 110px; width: 618px; margin: 0; font-size: var(--fs-lead); }
  .gr-reality__grid  { display: block; margin: 0; }
  .gr-reality__grid .lx-item { position: absolute; }
  .gr-item--1 { left: 145px;  top: 198px; width: 275px; }
  .gr-item--2 { left: 576px;  top: 198px; width: 289px; }
  .gr-item--3 { left: 1052px; top: 198px; width: 253px; }
  .gr-item--4 { left: 216px;  top: 296px; width: 204px; }
  .gr-item--5 { left: 500px;  top: 296px; width: 146px; }
  .gr-item--6 { left: 726px;  top: 296px; width: 191px; }
  .gr-item--7 { left: 997px;  top: 296px; width: 228px; }
  .gr-reality__callout {
    position: absolute;
    left: 323px; top: 386px;
    width: 794px; height: 108px;
    margin: 0; padding: 0;
  }
  .gr-reality__callout .muted  { position: absolute; left: 38px;  top: 27px; width: 719px; }
  .gr-reality__callout .strong { position: absolute; left: 252px; top: 57px; width: 287px; margin: 0; }

  /* ---- 3. CASE : bg y:1254 h474, panel x:36 y:1309 1368x459 ---- */
  .gr-case { height: 514px; margin-top: 72px; }
  .gr-case__bg { height: 474px; top: 0; bottom: auto; }
  .gr-case__panel { position: absolute; left: 36px; top: 55px; width: 1368px; height: 459px; padding: 0; }
  .gr-case__eyebrow      { position: absolute; left: 44px; top: 72px;  width: 176px; }
  .gr-case__eyebrow-rule { position: absolute; left: 44px; top: 96px;  width: 226px; margin: 0; }
  .gr-case__title        { position: absolute; left: 44px; top: 104px; width: 530px; margin: 0; }
  .gr-case__cards { display: block; margin: 0; }
  /* Figma sits card 1 at y:1500 and cards 2-3 at y:1508, so the boxes sit 8px
     out of line with each other. All three are aligned to y:1500 here and
     given the same internal offsets, so boxes, labels, rules and body copy
     all line up across the row. */
  .gr-case__cards .lx-card { position: absolute; top: 191px; width: 395px; height: 164px; padding: 0; }
  .gr-card--before { left: 49px; }
  .gr-card--did    { left: 486px; }
  .gr-card--result { left: 924px; }
  .gr-case__cards .lx-card__label { position: absolute; left: 11px; top: 15px; }
  /* inset off the card border — see launch.css */
  .gr-case__cards .lx-card__rule { position: absolute; left: 15px; top: 40px; width: 362.5px; margin: 0; }
  .gr-case__cards .lx-card__body { position: absolute; left: 0; top: 56px; right: 0; margin: 0; }
  .gr-card--before .lx-card__body p { padding-left: 29px; width: 299px; line-height: 1.06; }

  /* ---- 4. HELP : panel y:1844 ---- */
  .gr-help { height: 936px; margin-top: 76px; }
  .gr-help__panel { position: absolute; left: -1px; top: 0; width: 1441px; height: 888px; padding: 0; z-index: 1; }
  .gr-help__strip {
    display: block;
    position: absolute;
    left: -1px; top: 787px;
    width: 1441px; height: 149px;
    background: var(--color-surface-dark);
    z-index: 0;
  }
  .gr-help__eyebrow-plate { position: absolute; left: 596px; top: 60px; width: 250px; height: 32px; padding: 0; }
  .gr-help__eyebrow { width: 100%; }
  .gr-help__title { position: absolute; left: 485px; top: 100px; width: 472px; margin: 0; }
  .gr-help__sub   { position: absolute; left: 427px; top: 194px; width: 589px; margin: 0; font-size: var(--fs-lead); }
  .gr-help__close { position: absolute; left: 480px; top: 814px; width: 504px; margin: 0; font-size: var(--fs-lead); z-index: 2; }
  .gr-help__steps { display: block; margin: 0; padding: 0; }
  .gr-help__steps .lx-step { position: absolute; width: 252px; height: 132px; padding: 29px 20px 0 20px; }
  .gr-step--1 { left: 449px; top: 345px; }   /* Figma y:2189 */
  .gr-step--2 { left: 779px; top: 345px; }
  .gr-step--3 { left: 287px; top: 624px; }   /* Figma y:2468 */
  .gr-step--4 { left: 615px; top: 624px; }
  .gr-step--5 { left: 946px; top: 624px; }
  .gr-help__arrow { display: block; position: absolute; width: 293px; z-index: 2; }
  .gr-help__arrow--1 { left: 459px; top: 268px; }
  .gr-help__arrow--2 { left: 300px; top: 547px; }
  .gr-help__arrow--3 { left: 631px; top: 547px; }

  /* ---- 5. FINAL CTA : bg y:2834 h577, panel x:80 y:2906 1280x561 ---- */
  .gr-cta { height: 633px; margin-top: 54px; margin-bottom: 88px; }
  .gr-cta__bg { height: 577px; top: 0; bottom: auto; }
  .gr-cta__panel { position: absolute; left: 80px; top: 72px; width: 1280px; height: 561px; padding: 0; text-align: left; }
  .gr-cta__eyebrow      { position: absolute; left: 533px; top: 57px; width: 185px; }
  .gr-cta__eyebrow-rule { position: absolute; left: 512px; top: 81px; width: 226px; margin: 0; }
  /* box widened from Figma's 586 so line 2 keeps its break; centre unchanged */
  .gr-cta__title { position: absolute; left: 317px; top: 89px; width: 616px; margin: 0; text-align: center; }
  .gr-cta__lede  { position: absolute; left: 506px; top: 199px; width: 268px; margin: 0; font-size: var(--fs-lead); text-align: left; }
  .gr-cta__branch { display: block; position: absolute; left: 354px; top: 228px; width: 572.5px; }
  .gr-cta__legs { display: block; margin: 0; }
  .gr-cta__leg { position: absolute; top: 315px; }
  .gr-cta__leg--1 { left: 227px; width: 223px; }
  .gr-cta__leg--2 { left: 509px; width: 262px; }
  .gr-cta__leg--3 { left: 830px; width: 250px; }
  .gr-cta__btn { position: absolute; left: 521px; top: 380px; margin: 0; }
}