/* =========================================================================
   Module · Unique / Loop Big Type — Figma 5495:35369 (page Global: Modules)
   variants 420 5508:37092 · 1024 5495:35165 · 1440 5495:34961 · 1920 5492:17573
   Home (Pages — Homepage 2.0 [09.30]): 7021:54686 · 7021:54675 · 7021:54664 · 7021:54621
   (layer names carry a hidden U+2028: get_design_context fails on the
   whole node, read its children)

   The section frame (.l-section), its children section-gap apart (Figma
   binds the 420 variant's gap to section-padding, 64): Section Header;
   "Visuals"; "By the Numbers". A Unique module: besides the Section
   Header, Eyebrows and Buttons / CTA, its drawing, its two text blocks and
   its two stat cards are its own (Figma draws them as plain frames).

   Visuals, 420: the drawing splits — the loop (357.7 of 372, flush left)
   over the Forge block, Mission Control (298.2, centred) over the
   Infrastructure block; 48 · 80 · 48 apart (raw). "Platform", "graphic"
   and the column step aside (display: contents) and the four pieces are
   ordered here.
   From 1024: "Platform" on the left, the blocks a column on the right,
   grid-gutter apart. 1024: both halves share the row; "graphic" is 357.7
   of 408, centred (the margins are shares of the box). 1440: the column is
   486 wide (raw) and Platform takes the rest; 1920: two halves again. From
   1440 "graphic" is 597.3 wide, 42 from Platform's left and 52 from its
   top and bottom (raw).
   The blocks: Eyebrow, heading (Heading/Item; Heading/Card Large from
   1440), body (Body/Default), stack-l apart; the column's two blocks
   section-gap apart. 1920: heading 655.6 wide, body 586 (raw).

   By the Numbers: Eyebrow over two cards (a column at 420, a row from
   1024, grid-gutter apart). A card: Black 5, radius/box, card-padding;
   the heading (Heading/Section) at the top and the figures and the button
   at the foot (space-between); figures stack-l apart
   (Heading/Item over Body/Small, stack-s apart), the button stack-l below.
   Figma fixes the cards' height: 374.24 (420), 424, 536, 640 (raw).

   ── Figma's tilt ──
   Every text layer of the blocks and of the cards (headings, bodies, each
   figure) is rotated −0.15°. Auto-layout stacks the rotated boxes, and a
   rotated box is taller than its content by width × sin 0.15° (0.2618% of
   the width). Each tilted layer gets that extra below it, so the module
   keeps Figma's height; the slant itself is not drawn. A margin in % is a
   share of the parent's width, which for a full-width layer is its own.
   Tilted text keeps base.css's whole-pixel rounding in the same margin.
   When the file is straightened, set --m-loop-tilt to 0.
   ========================================================================= */
.m-unique-loop-big-type {
  --m-loop-tilt: .002618;
  gap: var(--spacing-section-padding);         /* Figma 420: section-padding (64) */
  background: linear-gradient(var(--module-background), var(--module-background)), var(--color-white);
}
.m-unique-loop-big-type > .b-section-header { align-self: stretch; }

/* ── Visuals ───────────────────────────────────────────────────────── */
.m-unique-loop-big-type__visuals {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.m-unique-loop-big-type__platform,
.m-unique-loop-big-type__graphic,
.m-unique-loop-big-type__blocks { display: contents; }
.m-unique-loop-big-type__piece--loop { order: 1; width: min(96.16%, 597.3px); }                                 /* 357.7 of 372 */
.m-unique-loop-big-type__block:nth-child(1) { order: 2; margin-top: var(--space-48); }
.m-unique-loop-big-type__piece--mc { order: 3; align-self: center; width: min(80.16%, 497.8px); margin-top: var(--space-80); }   /* 298.2 of 372 */
.m-unique-loop-big-type__block:nth-child(2) { order: 4; margin-top: var(--space-48); }

.m-unique-loop-big-type__block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
}
.m-unique-loop-big-type__heading,
.m-unique-loop-big-type__body { align-self: stretch; }
.m-unique-loop-big-type__heading { text-wrap: balance; }
:is(.m-unique-loop-big-type__heading, .m-unique-loop-big-type__body) {
  margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap + min(100%, var(--m-loop-w, 100%)) * var(--m-loop-tilt));
}

/* ── the drawing: two windows onto one Rive artboard ──
   The artboard is 900 × 788. In it the loop (with its labels) spans x 29 –
   870.5, y 36 – 364, and Mission Control x 98 – 801.5, y 355.5 – 763.5.
   Each window has Figma's box for its half ("Loop" 597.3 × 250.7, "Mission
   Control Diagram" 497.8 × 290.3, the same shapes at every breakpoint);
   the artboard is scaled so the half is exactly as wide as Figma's and
   centred in the box's height. The two halves overlap by a few pixels at
   Mission Control's top point, so each window is clipped to its own half:
   the loop's has a notch where that point would poke in, Mission
   Control's is its rhombus. */
.m-unique-loop-big-type__piece { position: relative; }
.m-unique-loop-big-type__piece--loop { aspect-ratio: 597.3 / 250.7; }
.m-unique-loop-big-type__piece--mc { aspect-ratio: 497.8 / 290.3; }
/* the clip is on an inner box: the reveal (data-fade-up) writes an inline
   clip-path on the piece itself */
.m-unique-loop-big-type__clip { position: absolute; inset: 0; }
.m-unique-loop-big-type__piece--loop .m-unique-loop-big-type__clip {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 57% 100%, 50.09% 90%, 43.2% 100%, 0 100%);
}
.m-unique-loop-big-type__piece--mc .m-unique-loop-big-type__clip {
  clip-path: polygon(50% -2%, 102% 50%, 50% 102%, -2% 50%);
}
.m-unique-loop-big-type__art {
  position: absolute;
  top: 0;
  aspect-ratio: 900 / 788;
}
.m-unique-loop-big-type__piece--loop .m-unique-loop-big-type__art {
  left: -3.446%;                               /* 29 / 841.5 */
  width: 106.952%;                             /* 900 / 841.5 */
  margin-top: -2.781%;                         /* centre y 200 of the artboard on the box's middle */
}
.m-unique-loop-big-type__piece--mc .m-unique-loop-big-type__art {
  left: -13.930%;                              /* 98 / 703.5 */
  width: 127.932%;                             /* 900 / 703.5 */
  margin-top: -50.372%;                        /* centre y 559.5 of the artboard on the box's middle */
}
.m-unique-loop-big-type__still,
.m-unique-loop-big-type__rive {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;                             /* styles.css caps img at 100% */
  height: 100%;
}
/* the script has taken over: the finished picture goes, the canvas draws */
.m-unique-loop-big-type__piece.is-rive .m-unique-loop-big-type__still { visibility: hidden; }
.m-unique-loop-big-type__piece:not(.is-rive) .m-unique-loop-big-type__rive { display: none; }

/* ── By the Numbers ────────────────────────────────────────────────── */
.m-unique-loop-big-type__numbers {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
}
.m-unique-loop-big-type__cards {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-grid-gutter);
}
.m-unique-loop-big-type__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-stack-m);                 /* Figma: space-between (its 48 is not used); stack-m keeps them apart if the words grow */
  min-height: 374.24px;                        /* Figma 420: the cards' fixed height */
  padding: var(--spacing-card-padding);
  border-radius: var(--radius-box);
  background: var(--color-black-5);
  color: var(--color-black);
}
.m-unique-loop-big-type__card-heading {
  white-space: nowrap;                         /* broken by hand, after "CoreWeave" */
  margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap + 100% * var(--m-loop-tilt));
}
.m-unique-loop-big-type__card-foot,
.m-unique-loop-big-type__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
}
.m-unique-loop-big-type__stats {
  align-self: stretch;
  /* 420: Figma lets the Infrastructure figures run into the card's right
     padding (345 of 324), so they keep one line */
  margin-right: calc(-1 * var(--spacing-card-padding));
}
.m-unique-loop-big-type__stat {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-s);
  margin-bottom: calc(100% * var(--m-loop-tilt));
}
.m-unique-loop-big-type__buttons { display: flex; gap: var(--spacing-stack-s); }

/* ── 1024 up: the drawing's box on the left, the blocks on the right ── */
@media (min-width: 1024px) {
  .m-unique-loop-big-type { gap: var(--spacing-section-gap); }

  .m-unique-loop-big-type__visuals {
    flex-direction: row;
    gap: var(--spacing-grid-gutter);
  }
  .m-unique-loop-big-type__platform { display: block; flex: 1 1 0; min-width: 0; }
  /* 357.7 × 347.45 in 408 × 409.74, centred: margins as shares of the box */
  .m-unique-loop-big-type__graphic { display: block; margin: 7.623% 6.176%; }
  .m-unique-loop-big-type__piece--loop { width: 100%; }
  .m-unique-loop-big-type__piece--mc { align-self: auto; width: 83.366%; margin: 6.566% 0 0 8.079%; }   /* 298.2 at 28.9, top at 173.6 of 357.7 */
  .m-unique-loop-big-type__block:nth-child(n) { margin-top: 0; }

  .m-unique-loop-big-type__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-gap);
    flex: 1 1 0;
    min-width: 0;
  }

  .m-unique-loop-big-type__cards { flex-direction: row; }
  .m-unique-loop-big-type__card { flex: 1 1 0; min-width: 0; min-height: 424px; }   /* Figma: fixed 424 */
  .m-unique-loop-big-type__card-heading { white-space: normal; }
  .m-unique-loop-big-type__stats { margin-right: 0; }
  /* one line each from 1024 (Figma's copy boxes hug their line) */
  .m-unique-loop-big-type__copy { white-space: nowrap; }
}

/* ── 1392 up (the 1440 frame) ──────────────────────────────────────── */
@media (min-width: 1392px) {
  .m-unique-loop-big-type__graphic { width: 597.3px; margin: 52px 42px; }   /* Figma: raw */
  .m-unique-loop-big-type__piece--mc { margin: 39.2px 0 0 48.2px; width: 497.8px; }
  .m-unique-loop-big-type__blocks { flex: 0 0 486px; }                     /* Figma: fixed 486 */
  /* the block heads are Heading/Card Large from here */
  .m-unique-loop-big-type__heading {
    font-size: var(--heading-card-large-font-size);
    line-height: var(--heading-card-large-line-height);
  }
  .m-unique-loop-big-type__card { min-height: 536px; }                     /* Figma: fixed 536 */
}

/* ── 1920 up ───────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .m-unique-loop-big-type__blocks { flex: 1 1 0; }
  .m-unique-loop-big-type__block:first-child .m-unique-loop-big-type__heading { max-width: 655.6px; --m-loop-w: 655.6px; }
  .m-unique-loop-big-type__body { max-width: 586px; --m-loop-w: 586px; }
  .m-unique-loop-big-type__card { min-height: 640px; }                     /* Figma: fixed 640 */
}