/* ==========================================================================
   Section: benefits
   Figma band y 1870..2800 in a 1440 frame (930 tall).

   Measured anchors, all reproduced exactly at 1440:
     h2 text box        x = 116, y = 2053, w = 762, 56/56, #1b1d36
     gradient run       "staunen lassen", gradient spans the WHOLE 762px box
     checklist cards    x = 122, w = 579, h = 110, y = 2294 / 2430 / 2566
     check badge        37 x 37 at x = 137, radius 30, brand gradient
     item title         x = 184, 17/19 regular      body x = 184, w = 486, 17/19 light
     quote card         x = 773, y = 1941, 667 x 574, radius 15 on the LEFT only
     quote text         w = 498, centred, y = 2088, 34/36 white
     gradient rule      x = 994, y = 2228, 225 x 3
     attribution        x = 994, y = 2267, w = 254, 17/19 light white
     rating card        x = 1155, y = 2392, 285 x 208, radius 15 on the LEFT only
     "5,00"             box x = 1237, y = 2419, w = 121, 34/36, gradient text
     stars              5 x 28px from x = 1218, pitch 33 (= 28 + 5), y = 2476
     rating label       box x = 1203, y = 2526, w = 190, 17/19, gradient text
     shape (image 55)   x = 689, y = 2097, 725.428 x 747.695, inner frame
                        523.278 x 573.553 rotated 26.75deg

   Two things worth knowing before editing:

   1. The quote card and the rating card run off the right edge of the frame.
      That is why both carry left-only radii in Figma. The section therefore has
      NO right padding and both cards are anchored to the section's right edge,
      so the bleed survives viewports wider than 1440.

   2. The h2 gradient is painted on the h2, not on the run. In Figma the
      gradient is mapped across the full 762px text box, so "staunen" (line 2,
      x 470..710) is violet while "lassen" (line 3, x 116..296) is cyan. Putting
      .u-gradient-text on the run instead would map the gradient across the
      run's own two fragments and invert those colours.
   ========================================================================== */


  .benefits {
    position: relative;
    isolation: isolate;
    /* No background on purpose.

       This is the page's own white, so painting it here changes nothing
       visually — but it DOES occlude the previous section's decorative
       overhang. Each of these sections is isolated, so it paints atomically
       over whatever came before it, and a 3D shape that is drawn bleeding
       across the boundary gets a hard horizontal cut instead.

       Confirmed against the Figma render: the hero's disc overhangs 40px onto
       the white below it, and the process ring overhangs 103px. Both were
       being sliced off. See CONVENTIONS section 3. */
    /* Band 1870..2800. h2 line box at 2053 => 183 above it; the last checklist
       card ends at 2676 => 124 below it. Held fixed down to the breakpoint
       because the absolutely positioned rating card is measured from the
       section's top edge. */
    padding-block: 183px 124px;
    /* 116/1440 = 8.056vw. Right side is 0: the cards bleed off the edge. */
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 8.056vw, 116px))
      calc(var(--stage-x) + 0px);
  }

  .benefits__inner {
    display: grid;
    /* Left column is fluid, the quote card keeps the drawn 667px and stays
       flush to the right edge. 701 -> 773 is the measured 72px gap. */
    grid-template-columns: minmax(0, 1fr) 667px;
    /* Explicit rows, because the quote card spans both of them and `-1` only
       resolves against the explicit grid. */
    grid-template-rows: auto auto;
    column-gap: 72px;
    /* h2 ends at 2221, first card starts at 2294. */
    row-gap: 73px;
  }

  /* ---------------------------------------------------------------- heading */

  .benefits__title {
    grid-column: 1 / -1;
    grid-row: 1;
    /* The drawn text box, and the box the gradient is mapped across.

       It does NOT reliably produce the drawn line breaks on its own:
       "Mitbewerber staunen lassen" measures 747px in the browser against a
       762px box, so it stays on one line where Figma wrapped it, costing the
       section a whole 56px line and shifting every section below it up by
       that much. 15px of metric slack is far too little to depend on, so the
       break before "lassen" is set explicitly in the markup. */
    inline-size: 762px;
    max-inline-size: 100%;
    color: var(--color-heading-alt);
    background-image: var(--gradient-brand);
  }

  /* Fallback for browsers without background-clip: text — the run keeps the
     gradient's end colour rather than disappearing. */
  .benefits__title-run {
    color: var(--color-brand-to);
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .benefits__title {
      -webkit-background-clip: text;
      background-clip: text;
    }

    /* Transparent glyphs reveal the h2's own gradient, positioned across the
       whole heading. The solid runs paint over it. */
    .benefits__title-run {
      color: transparent;
    }
  }

  /* -------------------------------------------------------------- checklist */

  .benefits__list {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    /* 2294 -> 2430 is a 136 pitch on 110-tall cards. */
    gap: 26px;
    inline-size: 579px;
    max-inline-size: 100%;
    /* The cards sit at x=122, the h2 text box at x=116. Reproduced, not
       averaged away. */
    margin-inline-start: 6px;
  }

  .benefits__item {
    display: flex;
    /* Badge ends at 174, text starts at 184. */
    gap: 10px;
    /* Badge top 13 below the card top, left 15 in; text column is 486 wide,
       which puts the right padding at 31. Bottom 20 completes the 110. */
    padding: 13px 31px 20px 15px;
    min-block-size: 110px;
    border-radius: var(--radius-md);
    background-color: var(--color-glass-light);
    box-shadow: var(--shadow-card);
  }

  .benefits__check {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 37px;
    block-size: 37px;
    /* Figma says radius/xl on a 37px square; the browser clamps it to a
       circle, which is what the design renders. */
    border-radius: var(--radius-xl);
    background-image: var(--gradient-brand);
    color: var(--color-on-dark);
  }

  .benefits__item-body {
    /* Badge starts 13 below the card top, the title line box 24. */
    padding-block-start: 11px;
  }

  .benefits__item-title {
    color: var(--color-heading);
    /* Title node is 28 tall on a 19px line box; the body follows at +28. */
    margin-block-end: 9px;
  }

  .benefits__item-text {
    color: var(--color-heading);
  }

  /* ------------------------------------------------------------- quote card */

  .benefits__quote {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    /* The card starts at 1941, 112 above the h2's line box at 2053. */
    margin: -112px 0 0;
    padding-block-start: 147px;
    min-block-size: 574px;
    /* Left-only radii: the card runs off the right edge of the frame. */
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    color: var(--color-on-dark);
    /* The fill is a mesh/image fill. Figma's codegen exports no colour for it
       at all, so it arrived as a bare div. This is the real fill, exported
       from the node at 2x (667 x 574 -> 1334 x 1148).

       It replaces four hand-fitted gradient layers that got to ~5.6% RMSE
       against the render. That was the ceiling: a mesh gradient has no
       faithful CSS expression, so the remaining error was structural rather
       than a matter of better-fitted stops.

       background-color is the paint-time fallback before the image decodes,
       sampled from the card's top-left. */
    background-color: #1c1e36;
    background-image: url("../img/quote-card-fill.png");
    /* Pinned to the drawn 667 x 574, anchored top-left, NOT `cover`. The card
       is a min-height box that grows with its content, and `cover` rescales
       the whole mesh whenever it does, sliding the warm corner off-position.
       At the drawn size the fill lands exactly and simply stops if the card
       grows; the background-color underneath carries the overflow. */
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
  }

  .benefits__quote-text {
    /* 498 wide, centred in the 667 card: 84.5 either side (Figma 85 / 84). */
    inline-size: 498px;
    max-inline-size: 100%;
    margin: 0 auto;
    text-align: center;
  }

  /* The 225 x 3 gradient rule under the quote. Decorative, so it is a
     pseudo-element rather than an empty span. Centring it inside the 498 text
     column lands it at x=994, exactly as drawn. */
  .benefits__quote-text::after {
    content: "";
    display: block;
    inline-size: 225px;
    max-inline-size: 100%;
    block-size: 3px;
    /* Quote text ends at 2196, rule at 2228. */
    margin: 32px auto 0;
    background-image: var(--gradient-brand);
  }

  .benefits__quote-author {
    /* Left-aligned in a 254 box that starts at the rule's left edge (x=994).
       It reads as centred but is not, so it is reproduced as drawn. */
    inline-size: 254px;
    max-inline-size: 100%;
    /* Rule ends at 2231, attribution line box at 2267. */
    margin: 36px 0 0 calc((100% - 225px) / 2);
  }

  /* ------------------------------------------------------------ rating card */

  .benefits__rating {
    position: absolute;
    z-index: 1;                       /* above the 3D shape, which it covers */
    /* 2392 - 1870 = 522 from the section's top edge; flush right, like the
       quote card it overlaps. */
    inset-block-start: 522px;
    inset-inline-end: 0;
    inline-size: 285px;
    /* Score line box at 27, label ends at 172, card is 208. */
    padding-block: 27px 36px;
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    text-align: center;
  }

  .benefits__rating-score {
    /* The drawn text box. The gradient is mapped across it, not across the
       glyphs, so the width matters. */
    inline-size: 121px;
    margin-inline: auto;
  }

  .benefits__rating-stars {
    display: flex;
    justify-content: center;
    /* 1218 -> 1251 is a 33 pitch on 28px stars. */
    gap: 5px;
    /* Score line box ends at 2455, stars at 2476. */
    margin-block-start: 21px;
  }

  .benefits__rating-label {
    inline-size: 190px;
    /* Stars end at 2504, label line box at 2526. */
    margin: 22px auto 0;
  }

  /* ------------------------------------------------------------- 3D shape */

  .benefits__shape {
    position: absolute;
    /* 1440 - (689 + 725.428) = 25.572. Anchored right so it keeps its place
       against the quote card on viewports wider than the frame. */
    inset-block-start: 227px;
    inset-inline-end: 25.572px;
    inline-size: 725.428px;
    aspect-ratio: 725.428 / 747.695;
    pointer-events: none;
  }

  /* The rotated frame: Figma rotates a 523.278 x 573.553 box by 26.75deg
     inside the bounding box above, and the image overhangs it. */
  .benefits__shape-frame {
    position: absolute;
    inset-block-start: 11.645%;
    inset-inline-start: 13.934%;
    inline-size: 72.134%;
    block-size: 76.71%;
    overflow: hidden;
    transform: rotate(26.75deg);
  }

  .benefits__shape-frame img {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 129.3%;
    block-size: 117.96%;
    max-inline-size: none;
  }

  /* ------------------------------------------------------------------
     Below 1280 there is no comp. Decisions made here, logged in the
     handover notes:
       - the two columns stack. 116 + 430 + 72 + 667 = 1285 is the narrowest
         width at which the checklist still has a readable measure next to the
         fixed 667px card, so that is the breakpoint.
       - the quote card keeps its right bleed and its left-only radii, loses
         its negative top margin and its 574 minimum height (nothing overlaps
         its lower half any more, so the empty space has no purpose).
       - the rating card stops overlapping and follows the quote, still flush
         right so the bleed reads as deliberate.
       - the 3D shape is dropped: it is decorative and its whole placement is a
         function of the 1440 composition.
     ------------------------------------------------------------------ */

  @media (width < 1280px) {
    .benefits {
      padding-block: clamp(4rem, 12.708vw, 183px) clamp(3rem, 8.611vw, 124px);
    }

    .benefits__inner {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      row-gap: 48px;
    }

    .benefits__list {
      grid-row: auto;
      /* The 6px offset against the h2 is a quirk of the drawn frame. Dropped
         here, where it would only push the cards past the right edge. */
      margin-inline-start: 0;
    }

    .benefits__quote {
      grid-column: 1;
      grid-row: auto;
      margin-block-start: 0;
      padding-block: clamp(3rem, 10vw, 147px) clamp(3rem, 10vw, 147px);
      min-block-size: 0;
    }

    .benefits__rating {
      position: static;
      inline-size: 285px;
      max-inline-size: 100%;
      margin: 24px 0 0 auto;
    }

    .benefits__shape {
      display: none;
    }
  }

  @media (width < 640px) {
    .benefits__item {
      /* The drawn 31px right inset is dead space once the card is this
         narrow, so it falls back to a symmetric one. */
      padding-inline: 15px;
    }

    .benefits__quote-author {
      /* The 254px box positioned off the rule's left edge stops making sense
         once the card is narrower than the drawn one. */
      inline-size: auto;
      margin-inline: 0;
      text-align: center;
    }
  }