/* ==========================================================================
   THE DESIGNERS HUB — Growth, TABLET (768) layer
   Source of truth: frame "Growth  tablet" #2129:6339 (768 x 4539).
   ==========================================================================
   Loaded AFTER launch-tablet.css, which supplies the shared machinery:
   `main` (768 x 4458 — the same box, this frame is the same artboard height
   as launch's), `main > section`, the wrapper pass-throughs that are shared,
   and the whole of `.lx-item` / `.lx-card` / `.lx-step` / `.lx-hero__*`.
   Only genuine differences live here, exactly as the 390 block is arranged.

   THIS PAGE'S SECTIONS ARE `gr-*` PREFIXED, NOT `lx-*` — `.gr-reality`,
   `.gr-case`, `.gr-help`, `.gr-cta`. So none of launch-tablet.css's
   per-section rules reach them and each is positioned here. The hero is the
   one section that IS shared (`.lx-hero`), and only its height and the three
   text boxes inside it differ.

   Every coordinate is THE FIGMA VALUE MINUS 81 (the tablet header height),
   with each section carrying its own origin.

   STROKE ALIGNMENT, batched as node renders — identical split to launch:
     6346 hero plate     681x409 -> unchanged   INSIDE 15
     6378 callout        536x105 -> unchanged   INSIDE 1
     6374 reality outline 736x403 -> 738x406    CENTER 3
     6387 / 6398 / 6409 case boxes 339x152 -> 347x160  OUTSIDE 4
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  /* DEAD SPACE TRIMMED 2026-07-20: content ends at 3382 against the shared
     main of 4458, so 1076px was blank before the footer. Content + 48. */
  .page-growth main { height: 3430px; }

  /* wrappers this page adds — the `gr-*` equivalents of launch's */
  .page-growth .gr-reality__grid,
  .page-growth .gr-case__cards,
  .page-growth .gr-help__steps,
  .page-growth .gr-cta__legs {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    gap: 0;
  }

  .page-growth .gr-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:6343 at Figma 106 -> main 25.
     409 tall here against launch's 478, so the band, the plate and all three
     text boxes are restated. The tab row stays hidden (launch-tablet.css).
     ====================================================================== */
  .page-growth .lx-hero { height: 409px; }
  .page-growth .lx-hero__band { height: 409px; }
  .page-growth .lx-hero__card { height: 409px; }

  /* card-relative, from the padding box 15px inside the border */
  .page-growth .gr-hero__title {
    top: 45px;
    width: 573px;
    /* box 68 = 2 lines at 34 */
  }

  .page-growth .gr-hero__lead {
    top: 123px;
    width: 321px;
  }

  /* #2129:6350 carries a real "\n" — the markup already has the <br> */
  .page-growth .gr-hero__lead--2 {
    top: 148px;
    width: 440px;
  }

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

  /* #2129:6351 is a DIFFERENT photo from launch's (imageRef d3dccb27…) and a
     different box. Same paint-order reversal: declared after the plate, so it
     must sit above `.lx-hero__card`'s z-index 2. */
  .page-growth .lx-hero__model {
    left: 437px;
    top: 65px;
    width: 355px;
    height: 352.52px;
    z-index: 3;
  }

  /* ======================================================================
     2. REALITY — outline #2129:6374 at Figma 563 -> main 482.
     SEVEN bullets here against launch's five, and the DOM order is not the
     frame's reading order, so all seven are mapped by text.
     ====================================================================== */
  .gr-reality { top: 482px; height: 403px; padding: 0; }

  /* CENTER-aligned 3px stroke, like launch's: declared 736x403, render
     738x406, so the outer edge sits 1.5px outside the declared rect */
  .gr-reality__outline {
    display: block;
    position: absolute;
    left: 14.5px;
    top: -1.5px;
    width: 739px;
    height: 406px;
    background: none;
    border: 3px solid var(--color-surface-dark);
  }

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

  .gr-reality__title {
    position: absolute;
    left: 142px;
    top: 16px;
    width: 485px;
    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;
  }

  /* THE 768 FRAME CARRIES THE GENERIC LINE, not the growth-specific one:
     #2129:6377 reads "Most designers face the same challenges:", word for
     word the launch frame's line, exactly as the 390 frame does. The
     `.lbl-wide` / `.lbl-narrow` pair already ships both, so the narrow
     (frame-accurate) half is shown here and the growth-specific 1440 copy is
     hidden. FLAGGED — this looks like a copy-paste left in both small frames,
     and the box is sized to the generic line either way. */
  .gr-reality__sub .lbl-wide   { display: none; }
  .gr-reality__sub .lbl-narrow { display: inline; }

  .gr-reality__sub {
    position: absolute;
    left: 223px;
    top: 92px;
    width: 322px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 19px;
    text-align: center;
    white-space: nowrap;
  }

  .gr-reality__grid .lx-item { position: absolute; }

  .gr-item--1 { left: 42px;  top: 162px; }
  .gr-item--2 { left: 238px; top: 162px; }
  .gr-item--3 { left: 447px; top: 159px; }
  .gr-item--4 { left: 52px;  top: 222px; }
  .gr-item--5 { left: 605px; top: 159px; }
  .gr-item--6 { left: 281px; top: 222px; }
  .gr-item--7 { left: 502px; top: 222px; }

  .gr-item--1 p { left: 20px; top: 4px; width: 144px; }
  .gr-item--2 p { left: 21px; top: 4px; width: 156px; }
  .gr-item--3 p { left: 15px; top: 8px; width: 111px; }
  .gr-item--4 p { left: 17px; top: 8px; width: 174px; }
  .gr-item--5 p { left: 17px; top: 8px; width: 104px; }
  .gr-item--6 p { left: 17px; top: 8px; width: 166px; }
  .gr-item--7 p { left: 17px; top: 8px; width: 197px; }

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

  .gr-reality__callout .muted,
  .gr-reality__callout .strong {
    position: absolute;
    margin: 0;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
  }

  /* the muted line is TWO lines here, against one on launch */
  .gr-reality__callout .muted  { left: 101px; top: 21px; width: 333px; font-weight: var(--fw-reg); }

  /* Chrome needs 255.68 in Figma's 255 box, and it is one line in the file */
  .gr-reality__callout .strong {
    left: 140px; top: 63px; width: 255px;
    font-weight: var(--fw-med);
    white-space: nowrap;
  }

  /* ======================================================================
     3. CASE STUDY — photo #2129:6381 at Figma 1013 -> main 932.
     Three items per card here, against launch's five.
     ====================================================================== */
  .gr-case { top: 932px; height: 782px; padding: 0; overflow: hidden; }

  .gr-case__bg {
    position: absolute;
    inset: auto;
    left: -14px;
    top: 0;
    width: 795px;
    height: 710px;
    max-width: none;
    object-fit: fill;
  }

  .gr-case__panel {
    position: absolute;
    left: 44px;
    top: 77px;
    width: 689px;
    height: 705px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-surface-dark);
  }

  .gr-case__eyebrow {
    position: absolute;
    left: 20px;
    top: 21px;
    width: 176px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    text-transform: uppercase;
    /* one line in Figma; 177 in a 176 box wrapped it and the rule cut the
       second line — nowrap, ample room to the right */
    white-space: nowrap;
  }

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

  .gr-case__title {
    position: absolute;
    left: 20px;
    top: 52px;
    width: 431px;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-med);
    line-height: 31px;
    text-transform: uppercase;
    white-space: nowrap;   /* Chrome needs 432.49 in Figma's 431 box */
  }

  /* all three boxes are the SAME height here (152 declared -> 160 outer),
     unlike launch's 125 / 213 / 193 */
  .gr-case__cards .lx-card { left: 166px; width: 347px; height: 160px; }

  .gr-card--before { top: 125px; }
  .gr-card--did    { top: 301px; }
  .gr-card--result { top: 477px; }

  /* found — one paragraph, 3 lines */
  .gr-card--before .lx-card__body p { top: 60px; width: 255px; }

  /* did — three numbered rings */
  .gr-card--did .lx-card__body li:nth-child(1) { top: 60px;  width: 101px; }
  .gr-card--did .lx-card__body li:nth-child(2) { top: 85px;  width: 294px; }
  .gr-card--did .lx-card__body li:nth-child(3) { top: 110px; width: 210px; }

  /* result — three gold dots, and the FIRST item is two lines (30 tall), so
     the second sits at +35 rather than the +25 step the others use */
  .gr-card--result .lx-card__body li:nth-child(1) { top: 60px;  width: 294px; }
  .gr-card--result .lx-card__body li:nth-child(2) { top: 95px;  width: 137px; }
  .gr-card--result .lx-card__body li:nth-child(3) { top: 120px; width: 157px; }

  /* ======================================================================
     4. HOW WE HELPED — panel #2282:4506 at Figma 1843 -> main 1762.

     Every panel-relative coordinate in this section is IDENTICAL to launch's
     (steps at 244,266 / 94,530 / 432,530 / 94,794 / 432,794; arrows at
     104,451 and 117,717; close at 152,971; strip at -1,873). Only the section
     origin differs, so the values are restated against the `gr-*` selectors
     rather than shared.
     ====================================================================== */
  .gr-help { top: 1762px; height: 1085px; padding: 0; }

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

  .gr-help__strip {
    display: block;
    position: absolute;
    z-index: 0;
    left: -1px;
    top: 873px;
    width: 769px;
    height: 212px;
    background: var(--color-surface-dark);
  }

  .gr-help__eyebrow-plate {
    position: absolute;
    left: 240px;
    top: 42px;
    width: 250px;
    height: 32px;
    padding: 0;
  }

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

  .gr-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;
    text-align: center;
    text-transform: uppercase;
  }

  .gr-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;
    text-align: center;
  }

  .gr-help__steps .lx-step { position: absolute; }

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

  /* step 1 alone indents its title and description by 20 from the card's
     outer edge where the others use 28 — the same quirk launch has */
  .gr-step--1 .lx-step__title,
  .gr-step--1 .lx-step__desc { left: 19px; }

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

  /* two connectors, as on launch; the third is not drawn on this frame */
  .gr-help__arrow { display: block; position: absolute; max-width: none; }
  .gr-help__arrow--1 { left: 104px; top: 451px; width: 293px; height: 43.29px; }
  .gr-help__arrow--2 { left: 117px; top: 717px; width: 293px; height: 43.29px; }
  .gr-help__arrow--3 { display: none; }

  .gr-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. FINAL CTA — photo #2129:6449 at Figma 2957 -> main 2876.
     The panel and its eyebrow / rule / title are at launch's exact
     panel-relative coordinates; below the title this frame differs — there is
     NO sub line, and the lede sits 33px lower.
     ====================================================================== */
  .gr-cta { top: 2876px; height: 506px; padding: 0; overflow: hidden; }

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

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

  .gr-cta__eyebrow {
    position: absolute;
    left: 253px;
    top: 48px;
    width: 185px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    /* 185.5 in a 185 box wrapped it and the rule cut the second line */
    white-space: nowrap;
  }

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

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

  .gr-cta__lede {
    position: absolute;
    left: 226px;
    top: 173px;
    width: 238px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 19px;
    text-align: left;
  }

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

  /* all three legs are CENTRED and two lines here, unlike launch's
     left-aligned single lines */
  .gr-cta__leg {
    position: absolute;
    top: 270px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;           /* box 30 = 2 lines */
    text-align: center;
  }

  .gr-cta__leg--1 { left: 43px;  width: 108px; }
  .gr-cta__leg--2 { left: 262px; width: 166px; }
  .gr-cta__leg--3 { left: 539px; width: 124px; }

  .gr-cta__btn { left: 226px; top: 333px; }

  /* NOT PORTED — #2129:6457 at (275, 3390) repeats leg 3's copy, "Give you
     clear, practical solutions", a second time below the button with no
     connector. The 390 frame carries the same stray duplicate (#2129:4229)
     and it was left out there too. */
}