/* ==========================================================================
   THE DESIGNERS HUB — Scale, TABLET (768) layer
   Source of truth: frame "tablet Scale" #2129:6461 (768 x 4539).
   ==========================================================================
   Loaded AFTER launch-tablet.css, which supplies the shared machinery — the
   `main` box (768 x 4458, the same artboard height as launch and growth),
   `main > section`, and all of `.lx-item` / `.lx-card` / `.lx-step`.

   THIS PAGE'S SECTIONS ARE `sc-*` PREFIXED, so none of launch-tablet.css's
   per-section rules reach them, exactly as on growth.

   **AND ITS HERO LEADS CARRY ONLY `.sc-hero__lead`, NOT `.lx-hero__lead`** —
   so launch-tablet.css's hero-lead rules do not reach them either and the
   whole treatment is restated here. The title does carry `.lx-hero__title`.
   Check the class list, not the pattern; the 390 build hit this same trap.

   Every coordinate is THE FIGMA VALUE MINUS 81, with each section carrying
   its own origin.

   STROKE ALIGNMENT, batched — the same split as launch and growth:
     6505 / 6516 / 6527 case boxes 339x125 / x240 / x144
                        -> 347x133 / x248 / x152   OUTSIDE 4
     6493 reality outline 736x415 -> 738x418        CENTER 3
     6468 hero plate, 6497 callout, 4618 help panel, step cards  INSIDE
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

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

  .page-scale .sc-reality__grid,
  .page-scale .sc-case__cards,
  .page-scale .sc-help__steps,
  .page-scale .sc-cta__legs {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    gap: 0;
  }

  .page-scale .sc-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:6465 at Figma 106 -> main 25. 409 tall, like
     growth's. Local coordinates are the Figma value minus 106.
     ====================================================================== */
  .page-scale .lx-hero { height: 409px; }
  .page-scale .lx-hero__band { height: 409px; }
  .page-scale .lx-hero__card { height: 409px; }

  /* card-relative, from the padding box 15px inside the border */
  .page-scale .sc-hero__title { top: 45px; width: 460px; }

  /* RESTATED IN FULL — these carry only `.sc-hero__lead`, so none of
     launch-tablet.css's `.lx-hero__lead` rules reach them. */
  .page-scale .sc-hero__lead {
    position: absolute;
    left: 27px;
    top: 123px;
    width: 460px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;           /* box 38 = 2 lines */
  }

  .page-scale .sc-hero__lead--2 { top: 167px; width: 443px; }

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

  /* #2129:6473 — its own crop, and the same paint-order reversal as the
     other two stage heroes: declared after the plate, so it must sit above
     `.lx-hero__card`'s z-index 2. */
  .page-scale .lx-hero__model {
    left: 440.02px;
    top: 71px;
    width: 348.96px;
    height: 346.52px;
    z-index: 3;
  }

  /* ======================================================================
     2. REALITY — outline #2129:6493 at Figma 563 -> main 482.
     SIX bullets, and the DOM order is not the frame's reading order.
     ====================================================================== */
  .sc-reality { top: 482px; height: 415px; padding: 0; }

  .sc-reality__outline {
    display: block;
    position: absolute;
    left: 14.5px;
    top: -1.5px;
    width: 739px;
    height: 418px;
    background: none;
    border: 3px solid var(--color-surface-dark);
  }

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

  .sc-reality__title {
    position: absolute;
    left: 141px;
    top: 22px;
    width: 487px;
    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;
  }

  /* #2129:6496 is LEFT aligned here, where launch's and growth's equivalents
     are centred */
  .sc-reality__sub {
    position: absolute;
    left: 184px;
    top: 104px;
    width: 400px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 19px;
    text-align: left;
    white-space: nowrap;
  }

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

  /* NOTE: items 1 and 2 carry IDENTICAL copy — "No clear strategy for
     entering new markets" (#2129:6475 and #2129:6478). The 390 frame and the
     1440 build both draw the same duplicate, so it ships as the file has it
     and is flagged rather than silently deduplicated. */
  .sc-item--1 { left: 42px;  top: 174px; }
  .sc-item--2 { left: 277px; top: 174px; }
  .sc-item--3 { left: 551px; top: 171px; }
  .sc-item--4 { left: 40px;  top: 238px; }
  .sc-item--5 { left: 277px; top: 238px; }
  .sc-item--6 { left: 551px; top: 238px; }

  .sc-reality__grid .lx-item p { left: 17px; top: 8px; }

  .sc-item--1 p { width: 156px; }
  .sc-item--2 p { width: 156px; }
  .sc-item--3 p { width: 160px; }
  .sc-item--4 p { width: 153px; }
  .sc-item--5 p { width: 197px; }
  .sc-item--6 p { width: 143px; }

  /* the callout holds ONE centred paragraph here, not the muted/strong pair */
  .sc-reality__callout {
    position: absolute;
    left: 116px;
    top: 310px;
    width: 536px;
    height: 105px;
    margin: 0;
    padding: 0;
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .sc-reality__callout p {
    position: absolute;
    left: 76px;
    top: 21px;
    width: 382px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;           /* box 57 = 3 lines */
    text-align: center;
    color: #666666;
  }

  /* ======================================================================
     3. CASE STUDY — photo #2129:6499 at Figma 1041 -> main 960.
     SEVEN items in the middle card, ONE in the result card.
     ====================================================================== */
  .sc-case { top: 960px; height: 798px; padding: 0; overflow: hidden; }

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

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

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

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

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

  .sc-case__cards .lx-card { left: 166px; width: 347px; }

  .sc-card--before { top: 117px; height: 133px; }
  .sc-card--did    { top: 274px; height: 248px; }
  .sc-card--result { top: 546px; height: 152px; }

  .sc-card--before .lx-card__body p { top: 60px; width: 291px; }

  /* seven numbered rings — note the step drops from 25 to 24 on the last two
     rows (1528 -> 1552 -> 1576), which is reproduced rather than averaged */
  .sc-card--did .lx-card__body li:nth-child(1) { top: 60px;  width: 254px; }
  .sc-card--did .lx-card__body li:nth-child(2) { top: 85px;  width: 291px; }
  .sc-card--did .lx-card__body li:nth-child(3) { top: 110px; width: 291px; }
  .sc-card--did .lx-card__body li:nth-child(4) { top: 135px; width: 171px; }
  .sc-card--did .lx-card__body li:nth-child(5) { top: 160px; width: 104px; }
  .sc-card--did .lx-card__body li:nth-child(6) { top: 184px; width: 109px; }
  .sc-card--did .lx-card__body li:nth-child(7) { top: 208px; width: 187px; }

  /* the result card holds ONE four-line paragraph, not a list — its body is a
     <div> in the markup, so it takes the `--found` paragraph treatment */
  .sc-card--result .lx-card__body p {
    position: absolute;
    left: 29px;
    top: 60px;
    width: 283px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;           /* box 60 = 4 lines */
  }

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

  /* ======================================================================
     4. THE APPROACH — panel #2283:4618 at Figma 1867 -> main 1786.

     The steps, arrows and strip are at launch's exact panel-relative values
     again (244,266 / 94,530 / 432,530 / 94,794 / 432,794; 104,451 and
     117,717; strip -1,873). What differs: a 295-wide eyebrow plate against
     250, a TWO-PART heading, and the closing note 10px further left.
     ====================================================================== */
  .sc-help { top: 1786px; height: 1085px; padding: 0; }

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

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

  /* #2129:6537 is 295 wide here, against the 250 launch and growth use */
  .sc-help__eyebrow-plate {
    position: absolute;
    left: 219px;
    top: 56px;
    width: 295px;
    height: 32px;
    padding: 0;
  }

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

  /* TWO-PART heading — #2129:6535 is one line, #2129:6536 is two, and they
     are separate nodes rather than one wrapped block */
  .sc-help__title {
    position: absolute;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;
    text-align: center;
    text-transform: uppercase;
  }

  /* nowrap: Chrome needs 490.86 in Figma's 489 box, and it is one line */
  .sc-help__title--1 { left: 122px; top: 96px;  width: 489px; white-space: nowrap; }
  .sc-help__title--2 { left: 117px; top: 131px; width: 498px; }

  .sc-help__sub {
    position: absolute;
    left: 164px;
    top: 201px;
    width: 405px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;
    text-align: center;
    white-space: nowrap;   /* Chrome needs 408.31 in Figma's 405 box */
  }

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

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

  /* the same step-1 indent quirk launch and growth have */
  .sc-step--1 .lx-step__title,
  .sc-step--1 .lx-step__desc { left: 19px; }

  /* every description is three lines on this frame */
  /* 210 against Figma's declared 215: at 215 Chrome fits this in TWO lines
     where the file draws three (its box is 51 tall). Window is 210 and below. */
  .sc-step--1 .lx-step__desc { width: 210px; }
  .sc-step--2 .lx-step__desc { width: 213px; }
  .sc-step--3 .lx-step__desc { width: 200px; }
  .sc-step--4 .lx-step__desc { width: 213px; }
  .sc-step--5 .lx-step__desc { width: 208px; }

  .sc-help__arrow { display: block; position: absolute; max-width: none; }
  .sc-help__arrow--1 { left: 104px; top: 451px; width: 293px; height: 43.29px; }
  .sc-help__arrow--2 { left: 117px; top: 717px; width: 293px; height: 43.29px; }
  .sc-help__arrow--3 { display: none; }

  .sc-help__close {
    position: absolute;
    left: 142px;
    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:6568 at Figma 2985 -> main 2904.
     The panel is 481 tall here against 471, the title runs to THREE lines,
     and there is a closing note under the button that the other two stage
     pages do not have.
     ====================================================================== */
  .sc-cta { top: 2904px; height: 516px; padding: 0; overflow: hidden; }

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

  .sc-cta__panel {
    position: absolute;
    left: 39px;
    top: 35px;
    width: 689px;
    height: 481px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-surface-dark);
    text-align: left;
  }

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

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

  .sc-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 93 = 3 lines */
    text-align: center;
    text-transform: uppercase;
  }

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

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

  .sc-cta__leg {
    position: absolute;
    top: 301px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;           /* box 30 = 2 lines */
    text-align: center;
  }

  /* 140 against Figma's declared 135, and left pulled back 2.5 to keep the
     centred text on Figma's own centre (75 + 135/2 = 142.5). At 135 Chrome
     spills a THIRD line where the file draws two. */
  .sc-cta__leg--1 { left: 33.5px; width: 140px; }
  .sc-cta__leg--2 { left: 262px; width: 166px; }
  .sc-cta__leg--3 { left: 492px; width: 177px; }

  .sc-cta__btn { left: 226px; top: 364px; }

  /* #2129:6576 — the closing note below the button, scale only */
  .sc-cta__note {
    position: absolute;
    left: 205px;
    top: 429px;
    width: 281px;
    max-width: none;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;
    text-align: center;
  }
}