/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   LegalHubEndToEndSection — Figma Z4nd44TYu5d8ttn7Y73Djs, node 865:6081.
   Spec: LegalHubEndToEndSection.figma.md.

   Every vertical gap in this section is 64px, which is already what
   `.hp-section` puts between containers and what the `__content` stack puts
   between the header and its content — so nothing new is introduced here.
   ============================================================ */

.legal-hub-end-to-end {
  background: var(--background);
}

/* The section-header + sticky-badge convention: this stack owns the
   header → content gap. See docs/conventions.md. */
.legal-hub-end-to-end__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px */
  width:          100%;
}

/* Third child of `.section-header__text`, so it inherits that block's 36px
   gap — exactly Figma's spacing under the body copy. */
.legal-hub-end-to-end__formula {
  margin:      0;
  font-size:   var(--font-size-2xl);     /* 24px */
  line-height: var(--line-height-2xl);   /* 32px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}


/* ============================================================
   Problem / solution stat trio (865:6092)
   ============================================================ */

.legal-hub-end-to-end__trio {
  display:         flex;
  gap:             4rem;   /* 64px */
  align-items:     stretch;
  justify-content: flex-start;
  width:           100%;
}

/* The two solution stats travel together — see the markup note. On desktop this
   wrapper is invisible: a flex row with the same 64px gap the trio itself uses,
   so problem | rule | 100% | +80% still measure exactly as before. */
.legal-hub-end-to-end__solution {
  display:     flex;
  gap:         4rem;   /* 64px */
  align-items: stretch;
  min-width:   0;
}

/* Figma's one hairline separates problem from solution; it is not a divider
   between every column. */
.legal-hub-end-to-end__trio-rule {
  align-self:  stretch;
  width:       0;
  border-left: 0.75px solid var(--opacity-neutral-20);
}

/* Measured off the 1:1 Figma render, using the hairline under each column:
   problem 244→462, rule 528, answer 592→811, booking 876→1134 inside the 1024
   container (which starts at x=244 at 1512). That is 220 | 220 | 259 with a
   flat 64px gap either side of the zero-width rule, left-aligned with the
   ~134px of slack falling on the right — not stretched to fill.
   `justify-content: flex-end` bottom-aligns the three columns, which is what
   keeps the third one (no badge above its chart) on the same baseline as the
   other two. */
.legal-hub-end-to-end__stat {
  display:         flex;
  flex-direction:  column;
  gap:             var(--spacing-6);   /* 24px */
  align-items:     flex-start;
  justify-content: flex-end;
  padding-bottom:  var(--spacing-2);   /* 8px */
  min-width:       0;
}

.legal-hub-end-to-end__stat[data-stat="problem"] { flex: 0 1 220px; }
.legal-hub-end-to-end__stat[data-stat="answer"]  { flex: 0 1 220px; }
.legal-hub-end-to-end__stat[data-stat="booking"] { flex: 0 1 259px; }

.legal-hub-end-to-end__stat-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--spacing-1-5) var(--spacing-3);   /* 6px 12px */
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);     /* 12px */
  line-height:     var(--line-height-xs);   /* 16px */
  font-weight:     var(--font-weight-medium);
}

/* Both badges are a tint over white in Figma, so the tint is layered rather
   than flattened to a single opaque hex. */
.legal-hub-end-to-end__stat-badge[data-tone="neutral"] {
  background: linear-gradient(var(--muted), var(--muted)), var(--card);
  color:      var(--muted-foreground);
}

.legal-hub-end-to-end__stat-badge[data-tone="brand"] {
  background: linear-gradient(var(--opacity-info-30), var(--opacity-info-30)), var(--card);
  /* Figma uses rgba(40,40,37,.6); the opacity scale stops at 50, and inventing
     an `--opacity-neutral-60` for one badge isn't worth a new global token. */
  color:      var(--opacity-neutral-50);
}

/* `aspect-ratio`, not a fixed height: with `height: 220px` the width was the
   only thing `max-width: 100%` could take away, so in any column narrower than
   220 the pie and the dial rendered as ellipses. */
.legal-hub-end-to-end__stat-visual {
  width:          220px;
  max-width:      100%;
  aspect-ratio:   1;
  /* A size container so the bar chart can be written in `cqw` and scale with
     the box instead of holding Figma's pixels. The pie and the dial are already
     100%/100% of it; the bars were the one visual drawn at fixed px, which put
     151px of bars in a 110px box on mobile. */
  container-type: inline-size;
}

.legal-hub-end-to-end__stat-copy {
  display:        flex;
  flex-direction: column;
  padding-top:    var(--spacing-3);   /* 12px */
  border-top:     0.75px solid var(--opacity-neutral-20);
  width:          100%;
}

.legal-hub-end-to-end__stat-copy[data-tone="neutral"] { color: var(--brand-neutral-700); }
.legal-hub-end-to-end__stat-copy[data-tone="brand"]   { color: var(--color-brand-blue-700); }

.legal-hub-end-to-end__stat-value {
  margin:      0;
  font-size:   3rem;   /* 48px — above the repo scale's 3xl (30px); see spec */
  line-height: 1;
  font-weight: var(--font-weight-light);
  color:       inherit;
}

.legal-hub-end-to-end__stat-label {
  margin:      0;
  font-size:   var(--font-size-lg);     /* 18px */
  line-height: var(--line-height-lg);   /* 28px */
  font-weight: var(--font-weight-regular);
  color:       inherit;
}

/* ---- Trio visual 1: the 67% pie ---- */
.legal-hub-end-to-end__pie {
  width:         100%;
  height:        100%;
  border-radius: var(--radius-full);
  /* Figma runs the 67% share CLOCKWISE from 12 o'clock, leaving the 33% share
     in the upper-left quadrant — the previous order mirrored the chart. Colours
     sampled off the 1:1 render: light (233,226,218) ≈ beige-200, dark
     (187,180,164) ≈ beige-400. The old light stop was beige-300, only 19 levels
     off the dark one, which is why the two shares barely read apart. */
  background:    conic-gradient(
                   var(--color-brand-beige-400) 0deg 241.2deg,   /* 67% */
                   var(--color-brand-beige-200) 241.2deg 360deg  /* 33% */
                 );
}

/* ---- Trio visual 2: the 24/7 answer-rate dial ---- */
.legal-hub-end-to-end__dial-24-7 {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  border-radius:   var(--radius-full);
  background:      var(--color-brand-blue-700);
}

/* Twelve ticks at 30° — a repeating conic gradient masked to a ring, which
   avoids twelve absolutely-positioned elements for a decorative detail. */
.legal-hub-end-to-end__dial-ticks {
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  background:    repeating-conic-gradient(
                   from -1.5deg,
                   rgb(255 255 255 / 0.4) 0deg 3deg,
                   transparent 3deg 30deg
                 );
  mask:          radial-gradient(closest-side, transparent 0 83%, #000 83% 91%, transparent 91%);
}

.legal-hub-end-to-end__dial-label {
  position:    relative;
  font-size:   var(--font-size-xs);     /* 12px */
  line-height: var(--line-height-xs);   /* 16px */
  font-weight: var(--font-weight-bold);
  color:       var(--color-brand-blue-200);
  text-align:  center;
}

/* ---- Trio visual 3: the +80% bar chart ---- */
.legal-hub-end-to-end__bars {
  position:        relative;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  gap:             11.364cqw;            /* Figma: bars at x=34 and x=122, 63 wide */
  width:           100%;
  height:          100%;
  padding-bottom:  1px;
}

.legal-hub-end-to-end__bars-arrow {
  position: absolute;
  left:     15.5%;   /* Figma x=34 of 220 */
  top:      0;
  width:    68.6%;   /* Figma 150.98 of 220 */
  height:   25%;     /* Figma 54.72 of 220 */
}

/* All four numbers are Figma's, held as a share of the 220px visual so they
   survive the box shrinking: 63 / 220 = 28.636%, 9.212 / 220 = 4.187%,
   100 / 220 = 45.455%, 180 / 220 = 81.818%. At 220 they compute back to the
   exact pixels. */
.legal-hub-end-to-end__bar {
  position:      relative;
  width:         28.636cqw;
  border-radius: 4.187cqw;
}

.legal-hub-end-to-end__bar--before {
  height:     45.455cqw;
  background: var(--color-brand-blue-200);
}

.legal-hub-end-to-end__bar--after {
  height:          81.818cqw;
  background:      var(--color-brand-blue-700);
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding-top:     var(--spacing-3);
}

.legal-hub-end-to-end__bar-label {
  font-size:   var(--font-size-xs);     /* 12px */
  line-height: var(--line-height-xs);   /* 16px */
  font-weight: var(--font-weight-bold);
  color:       var(--color-brand-blue-200);
  text-align:  center;
}


/* ============================================================
   Flow card (865:6165) — 467px copy | 875px illustration
   ============================================================ */

.legal-hub-end-to-end__flow {
  display:               grid;
  grid-template-columns: minmax(0, 467fr) minmax(0, 875fr);
  gap:                   10px;
  align-items:           stretch;
  padding:               1rem;   /* 16px */
  background:            var(--card);
  border-radius:         var(--radius-lg);   /* 24px */
  box-sizing:            border-box;
}

.legal-hub-end-to-end__steps {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  min-width:       0;
}

/* No shadow: sampling the 1:1 render 4px outside a copy card's left edge gives
   pure #FFF, identical to a point far from any card, so the cyan bloom this
   rule used to carry was not in the design. */
.legal-hub-end-to-end__flow-title,
.legal-hub-end-to-end__step {
  padding:       var(--spacing-6);   /* 24px */
  border-radius: 12px;
  box-sizing:    border-box;
}

.legal-hub-end-to-end__flow-title {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  min-height:      137px;
}

.legal-hub-end-to-end__flow-title-text {
  margin:      0;
  font-size:   var(--font-size-3xl);     /* 30px */
  line-height: var(--line-height-3xl);   /* 36px */
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}

.legal-hub-end-to-end__step {
  display:         flex;
  flex-direction:  column;
  gap:             var(--spacing-8);   /* 32px */
  justify-content: center;
  flex:            1 1 0;
}

/* Desktop frame `865:6180`: the head is 48 tall and the rows start at 80 — a
   32px gap inside this block. The step's own gap is the illustration-to-copy
   distance, which is a different measurement (and only exists once the phase
   panels are showing). */
.legal-hub-end-to-end__step-copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-8);   /* 32px */
}

.legal-hub-end-to-end__step-head {
  display:     flex;
  gap:         var(--spacing-4);   /* 16px */
  align-items: center;
}

.legal-hub-end-to-end__step-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 48px;
  width:           48px;
  height:          48px;
  border-radius:   var(--radius-full);
  background:      var(--opacity-info-30);
  font-size:       var(--font-size-xl);     /* 20px */
  line-height:     var(--line-height-xl);   /* 28px */
  font-weight:     var(--font-weight-regular);
  color:           var(--foreground);
}

.legal-hub-end-to-end__step-title {
  margin:      0;
  font-size:   var(--font-size-3xl);     /* 30px */
  line-height: var(--line-height-3xl);   /* 36px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

.legal-hub-end-to-end__rows {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);   /* 16px */
}

.legal-hub-end-to-end__row {
  display:       flex;
  gap:           var(--spacing-3);   /* 12px */
  align-items:   center;
  padding:       var(--spacing-4) var(--spacing-4) var(--spacing-5) var(--spacing-6);
  background:    var(--accent);
  border-top:    0.75px solid var(--secondary);
  border-radius: var(--radius-md);   /* 16px */
  box-sizing:    border-box;
}

.legal-hub-end-to-end__row-copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);   /* 12px */
  align-items:    flex-start;
  flex:           1 1 0;
  min-width:      0;
}

/* Figma right-aligns the "Always" / "Case-by-case" pill above the title. */
.legal-hub-end-to-end__row-tag {
  align-self:    flex-end;
  padding:       var(--spacing-2) var(--spacing-6);   /* 8px 24px */
  background:    var(--card);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-base);     /* 16px */
  line-height:   var(--line-height-base);   /* 24px */
  font-weight:   var(--font-weight-regular);
  color:         var(--foreground);
}

.legal-hub-end-to-end__row-title,
.legal-hub-end-to-end__row-body,
.legal-hub-end-to-end__row-emphasis {
  margin:      0;
  font-size:   var(--font-size-xl);     /* 20px */
  line-height: var(--line-height-xl);   /* 28px */
}

.legal-hub-end-to-end__row-title {
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

.legal-hub-end-to-end__row-body {
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}

/* An inline row leads with a bold clause — `Callers are qualified …` — and Figma
   writes that lead in `--foreground` with only the rest muted. Inheriting the
   paragraph's muted colour flattened the two into one grey sentence. */
.legal-hub-end-to-end__row-body .fw-bold {
  color: var(--foreground);
}

.legal-hub-end-to-end__row-emphasis {
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}

/* Where a row has a tag pill, Figma tightens the title→body gap to 8px. */
.legal-hub-end-to-end__row-copy:has(.legal-hub-end-to-end__row-tag) {
  gap: var(--spacing-2);
}

/* ---- 96px row dials ---- */
.legal-hub-end-to-end__row-dial {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 96px;
  width:           96px;
  height:          96px;
  border-radius:   var(--radius-full);
}

.legal-hub-end-to-end__row-dial[data-dial="clock"] {
  background: var(--color-brand-beige-400);
}

.legal-hub-end-to-end__row-dial[data-dial="donut"] {
  background: conic-gradient(
                var(--color-brand-beige-400) 0deg 277.2deg,   /* 77% */
                var(--color-brand-beige-300) 277.2deg 360deg
              );
}

.legal-hub-end-to-end__row-dial-ticks {
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  background:    repeating-conic-gradient(
                   from -1.5deg,
                   var(--accent) 0deg 3deg,
                   transparent 3deg 30deg
                 );
  mask:          radial-gradient(closest-side, transparent 0 83%, #000 83% 91%, transparent 91%);
}

.legal-hub-end-to-end__row-dial-label {
  position:    relative;
  font-size:   var(--font-size-xl);     /* 20px */
  line-height: var(--line-height-xl);   /* 28px */
  font-weight: var(--font-weight-bold);
  color:       var(--accent);
}


/* ============================================================
   Flow illustration (865:6307) — 875×2401

   `FlowDiagram` renders here and owns its own 875:2401 aspect ratio, which is
   what makes the three phases line up with the three numbered steps in the copy
   column. It is the only thing that renders here — there is no flat-export
   fallback any more.
   ============================================================ */

/* The stage keeps Figma's 875/2401 ratio, so on a narrower desktop it gets
   SHORTER while the steps column beside it does not — the card used to end on a
   band of white under the illustration. The blue now fills the row and the stage
   is centred in it, which reads as breathing room instead of a gap. */
.legal-hub-end-to-end__visual {
  position:      relative;
  display:       flex;
  align-items:   center;
  height:        100%;
  min-width:     0;
  border-radius: var(--radius-md);
  overflow:      hidden;
}

/* The diagram fills the row and centres its own stage — `align-items` on the
   wrapper only centred the diagram, which was already full height, leaving the
   stage pinned to the top of it. */
.legal-hub-end-to-end__visual .flow-diagram {
  display:     flex;
  align-items: center;
  height:      100%;
}


/* ============================================================
   Responsive
   ============================================================ */

/* Below the card's own 1384px the two columns get too narrow to hold both the
   30px step titles and the illustration, so the visual moves under the copy. */
/* Mobile/tablet phase strips (see LegalHubEndToEndSection.tsx). Off by default
   so the desktop layout keeps rendering the single tall FlowDiagram beside the
   steps. */
.legal-hub-end-to-end__step-phase {
  display: none;
}

@media (max-width: 1199px) {
  .legal-hub-end-to-end__flow {
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--spacing-4);
    /* Stacked, the step and phase blocks carry their own inline padding, so the
       card adds none — only a closing 24px, since the last step ends on copy
       rather than on an illustration. */
    padding:               var(--spacing-4) 0 var(--spacing-8);   /* 32px closing */
  }

  /* 137px keeps the title level with the desktop stage beside it; once the card
     is one column it is just air. */
  .legal-hub-end-to-end__flow-title {
    min-height: 0;
  }

  /* Tablet follows the mobile storytelling order: each step carries its own
     re-laid-out phase illustration directly above its heading. The 875×2401
     desktop stage is removed so it cannot appear as a detached visual after
     all three steps. */
  .legal-hub-end-to-end__visual {
    display: none;
  }

  /* Full-width box, artwork at its own size. Stretching a 346x330 panel to the
     column width blew it up to ~760px tall on a tablet; it is capped at 1:1 and
     centred instead, and the box keeps the fill and the hairline (which is why
     the exports carry neither). */
  /* Mobile frame `952:10596` stacks an `Img area` (12px padding) against a
     `Text area` (16px) with no gap between them — 28px from artwork to heading.
     That is the step's own gap now, so the panel carries no margin. */
  /* Stacked, the step is not a card in a column any more — its block padding
     just doubles the gap between the illustration and the copy above/below it.

     The spacing here is the mobile rhythm scaled up by a third — same feel, a
     size larger: head→rows 24 against 20,
     step→step 48 against 36, title→step 24 against 16. Artwork→copy is the
     exception at 32, just under mobile's 36 — the panel is far wider here. */
  .legal-hub-end-to-end__step {
    gap:           var(--spacing-8);   /* 32px — artwork → heading */
    padding-block: 0;
  }

  .legal-hub-end-to-end__step-copy {
    gap: var(--spacing-6);   /* 24px */
  }

  /* The 36px is the gap BETWEEN steps. The flow title is not one of them, so it
     is pulled out of that rhythm and keeps its own distance to step 1 — the
     mobile frame stacks its `Text area` straight onto the first `Img area`. */
  .legal-hub-end-to-end__steps {
    justify-content: flex-start;
    gap:             3rem;   /* 48px between steps */
  }

  .legal-hub-end-to-end__flow-title {
    margin-bottom: calc(-3rem + var(--spacing-6));   /* nets 24px to step 1 */
  }

  .legal-hub-end-to-end__step-phase {
    display:         flex;
    align-items:     center;
    justify-content: center;
    /* Much softer than the shared 0.45 default: once the flow splits into
       three narrow panels the artwork renders far smaller, and the grain's
       blobs stop reading as texture and start reading as pixelation. One
       value for the whole stacked range — tablet and phone both need 0.15. */
    --noise-opacity: 0.15;
    max-height:      330px;
    /* 4px proud of the step's copy on each side, so the illustration panel
       reads as its own band rather than as another card in the column. */
    margin-inline:   -4px;
    overflow:        hidden;
    border:          0.5px solid rgb(40 40 37 / 0.2);
    border-radius:   12px;
    background:      #c0e2eb;
  }

  .legal-hub-end-to-end__step-phase-img {
    display:   block;
    width:     auto;
    max-width: 100%;
    height:    auto;
  }
}

/* Small desktop only: the phase panels stand alone in a wide column, so they get
   a taller band than the tablet/phone stack gives them. */
@media (min-width: 992px) and (max-width: 1199px) {
  .legal-hub-end-to-end__step-phase {
    min-height: 420px;
    max-height: 420px;
  }

  /* Fill that taller band: the artwork grows from the height, not the width. */
  .legal-hub-end-to-end__step-phase-img {
    width:  auto;
    height: 100%;
  }
}


@media (max-width: 991px) {
  /* Stood down flat, the hairline becomes the separator the mobile frame draws
     between problem and solution — and, being a 100% flex basis, it also forces
     the break, so the wrap can only ever land problem / rule / solution pair.
     It used to be hidden here, which left the two groups to wrap on their own. */
  .legal-hub-end-to-end__trio-rule {
    flex:        0 0 100%;
    align-self:  auto;
    width:       auto;
    height:      0;
    border-left: 0;
    border-top:  0.75px solid var(--opacity-neutral-20);
  }

  /* Tablet runs the mobile frame's LAYOUT at tablet sizes: every stat is a row —
     badge on its own line, copy left, visual right — and the solution pair
     stacks. Only the visual size differs (160px here, 110 on a phone). */
  .legal-hub-end-to-end__trio {
    flex-direction: column;
    gap:            var(--spacing-8);   /* 32px */
  }

  .legal-hub-end-to-end__solution {
    flex-direction: column;
    gap:            var(--spacing-8);   /* 32px */
  }

  .legal-hub-end-to-end__stat {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) var(--stat-visual, 160px);
    grid-template-areas:   'badge  badge'
                           'copy   visual';
    align-items:           center;
    column-gap:            28px;
    row-gap:               var(--spacing-6);   /* 24px, badge → row */
    flex:                  1 1 100%;
    padding-bottom:        0;
  }

  .legal-hub-end-to-end__stat[data-stat] {
    flex: 0 0 auto;
  }

  .legal-hub-end-to-end__stat:not(:has(.legal-hub-end-to-end__stat-badge)) {
    grid-template-areas: 'copy visual';
  }

  .legal-hub-end-to-end__stat-badge  { grid-area: badge; justify-self: start; }
  .legal-hub-end-to-end__stat-visual { grid-area: visual; width: var(--stat-visual, 160px); }

  .legal-hub-end-to-end__stat-copy {
    grid-area:   copy;
    padding-top: 0;
    border-top:  0;
  }

  .legal-hub-end-to-end__dial-label,
  .legal-hub-end-to-end__bar-label {
    display: none;
  }


  /* Tablet type sits between the two frames: 28px against desktop's 30 and
     mobile's 24, 18px body against 20 and 16. Desktop sizes read oversized once
     the card is one column. */
  .legal-hub-end-to-end__flow-title-text,
  .legal-hub-end-to-end__step-title {
    font-size:   1.75rem;   /* 28px — between `2xl` 24 and `3xl` 30 */
    line-height: 2.25rem;   /* 36px */
  }

  .legal-hub-end-to-end__row-title,
  .legal-hub-end-to-end__row-body,
  .legal-hub-end-to-end__row-emphasis {
    font-size:   var(--font-size-lg);     /* 18px */
    line-height: var(--line-height-lg);   /* 28px */
  }
}

/* Mobile frame `938:8257` (370 wide, 338 of content): every stat becomes a ROW
   — badge on its own line, then the copy left and a 110px visual right, 28px
   apart — and the solution pair stacks, 32px between the two rows. The per-stat
   hairline above each value goes: the frame draws only the one separator
   between problem and solution. */
@media (max-width: 767px) {
  /* Phone sizes for the same row layout the tablet block sets up: a 110px
     visual instead of 160, per the mobile frame. */
  .legal-hub-end-to-end__stat {
    --stat-visual: 110px;
  }

  .legal-hub-end-to-end__stat-label {
    font-size:   var(--font-size-base);     /* 16px */
    line-height: var(--line-height-base);   /* 24px */
  }

  /* The mobile frame draws both visuals bare — the dial is ticks only and the
     tall bar carries no caption. At 110px neither piece of 12px type fits
     anyway. */
  .legal-hub-end-to-end__dial-label,
  .legal-hub-end-to-end__bar-label {
    display: none;
  }

  .legal-hub-end-to-end__flow {
    padding: var(--spacing-2) 0 var(--spacing-6);   /* 24px closing */
  }

  .legal-hub-end-to-end__flow-title {
    padding: var(--spacing-4);
  }

  /* Inline only — the block padding is off from 1199 down. */
  .legal-hub-end-to-end__step {
    padding-inline: var(--spacing-4);
  }

  .legal-hub-end-to-end__flow-title-text,
  .legal-hub-end-to-end__step-title {
    font-size:   var(--font-size-2xl);     /* 24px */
    line-height: var(--line-height-2xl);   /* 32px */
  }

  .legal-hub-end-to-end__row {
    padding: var(--spacing-4);
  }

  /* Mobile frames `1007:11807` / `1008:12579` / `1008:12911` (338 wide): the step
     badge is 32px, the row copy 16/24 and the dials 72px. The copy was still
     carrying the tablet's 18/28. */
  .legal-hub-end-to-end__row-title,
  .legal-hub-end-to-end__row-body,
  .legal-hub-end-to-end__row-emphasis {
    font-size:   var(--font-size-base);     /* 16px */
    line-height: var(--line-height-base);   /* 24px */
  }

  /* Artwork → heading opens up on a phone; the frame stacks at 28. Owner's call.
     Everything below is the tablet block's rhythm one step down. */
  .legal-hub-end-to-end__step {
    gap: var(--spacing-9);   /* 36px */
  }

  .legal-hub-end-to-end__steps {
    gap: var(--spacing-9);   /* 36px */
  }

  .legal-hub-end-to-end__flow-title {
    margin-bottom: calc(-1 * var(--spacing-9) + var(--spacing-4));   /* nets 16px */
  }

  /* Tighter than desktop's 32 — the frame measures 10, owner's call is 20. */
  .legal-hub-end-to-end__step-copy {
    gap: var(--spacing-5);   /* 20px */
  }

  .legal-hub-end-to-end__step-num {
    flex:        0 0 32px;
    width:       32px;
    height:      32px;
    font-size:   var(--font-size-base);     /* 16px */
    line-height: var(--line-height-base);
  }

  .legal-hub-end-to-end__row-dial {
    flex:   0 0 72px;
    width:  72px;
    height: 72px;
  }

  .legal-hub-end-to-end__row-dial-label {
    font-size:   var(--font-size-base);     /* 16px */
    line-height: var(--line-height-base);
  }
}

/* ============================================================
   FlowDiagram — Figma N6oJX6O9cUvOOEVBwsf57w, node 865:6307.
   Component notes live in FlowDiagram.tsx.

   Every length here is `calc(N * var(--u))`, where N is the raw
   Figma pixel value and `--u` is one Figma pixel in container
   units. Nothing in this file may use a bare `px` length for
   geometry — that would stop scaling with the rest of the stage
   and break the alignment between the three phases and the three
   numbered steps in the copy column.
   ============================================================ */

.flow-diagram {
  container-type: inline-size;
  position:       relative;
  width:          100%;
  /* Figma 865:6307: 12px radius and a non-layout-affecting 0.5px border. The
     inset stroke preserves the stage's exact 875×2401 coordinate system. */
  border-radius:  0.75rem;
  box-shadow:     inset 0 0 0 0.03125rem var(--opacity-neutral-20);
  overflow:       hidden;
  /* Figma's Bg (865:6308) is a flat cyan wash carrying ONE grain
     sheet, under the content (865:6309) — hence `noise-grain-under`
     alone on this element, not `noise-grain` as well.

     Measured off Figma's render: the open wash reads sd 5.30 about
     a median of (191,225,235), which is the base #c0e2eb itself —
     the grain is mean-NEUTRAL, it does not darken. A card interior
     reads sd 0.92, i.e. no grain over the content at all, so the
     frame's second "Noise" child (865:6476) has no measurable
     effect and is not reproduced. Painting it cost 10 levels off
     every card, token and logo plate, and 15 off the wash.

     Two things had to be right, and neither is the shared utility's
     default. Both were measured against the R-channel distribution of
     an open patch of Figma's wash:

       figma  min 172  p10 185  med 192  p90 200  max 210  sd 5.73
       ours   min 158  p10 184  med 191  p90 196  max 211  sd 5.14

     1. It is a LUMINANCE grain. `the-noise.svg` is feTurbulence with
        independent RGB channels, so painting it raw varies each
        channel on its own — sd R 5.4 / G 6.4 / B 7.3, sd(R−G) 8.5,
        which reads as coloured speckle. Figma moves the channels
        together (sd(R−G) 3.3). Hence `grayscale(1)` on both sheets.

     2. The stronger contrast is what gives the red channel Figma's
        measured spread without introducing chromatic speckle. Opacity
        then scales that luminance grain without repainting any content. */
  --noise-opacity: 0.8;
  --noise-filter:  grayscale(1) contrast(3.4);

  /* Figma's Bg (865:6308) is a radial ellipse, NOT the flat wash this used to
     paint. Measured off the composite with the content masked out: the field is
     (192,225,234) along every edge — which is the old flat value, so the edges
     were right and the whole middle of the panel was ~22 levels too dark — and
     rises to (214,234,238) across a broad core centred just below the middle.
     `background-color` carries the edge value so the corners stay exact.

     The intermediate stops are not decoration: Figma's falloff holds its value
     near the centre and drops away later, so a straight two-stop ramp read ~6
     levels dark through the whole middle band. Sampled against the normalised
     radius d, Figma runs 214 at d=0, 212 at 0.34, 210 at 0.40, 203 at 0.71,
     201 at 0.79 and 192-194 at the edge; these five stops track that to ~1
     level. G and B move with R at 0.37 : 0.15, the ratio the Bg's own ramp
     uses.

     The ellipse is much taller than it is wide relative to the frame: Figma's
     field is still elevated at y=420 and y=2040 and only reaches the edge value
     near the very top and bottom, which puts the centre at 51% and the vertical
     radius at 44% of a 2401px panel. */
  background-color: #C0E2EB;
  background-image: radial-gradient(ellipse 46% 44% at 50% 51%,
                      #D7EAEE   0%,
                      #D4E9EE  35%,
                      #CFE8ED  55%,
                      #C8E5EC  80%,
                      #C0E2EB 100%);
}

.flow-diagram__stage {
  --u: calc(100cqw / 875);

  /* Above the background grain, leaving cards and tokens clean as in Figma. */
  position:     relative;
  z-index:      1;
  width:        100%;
  aspect-ratio: 875 / 2401;
  font-family:  var(--font-family-default);
}

/* Everything the phases render is placed in stage coordinates. */
.flow-diagram__stage > *:not(.flow-diagram__wiring) {
  position: absolute;
  margin:   0;
}


/* ============================================================
   Wiring — connectors
   ============================================================ */

.flow-diagram__wiring {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}

/* Shared geometry only. `stroke` is deliberately NOT set here: a CSS
   declaration outranks a presentation attribute, so putting the colour on
   the shared class would silently repaint the gradient connector too. */
.flow-diagram__wire {
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: bevel;
}

.flow-diagram__wire--muted {
  stroke:         var(--foreground);
  stroke-opacity: 0.3;
}

.flow-diagram__wire--dashed {
  stroke-dasharray: 6 9;
}

/* ============================================================
   Round tokens and unified Figma assets
   ============================================================ */

.flow-diagram__token {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           calc(96 * var(--u));
  height:          calc(96 * var(--u));
  padding:         calc(12 * var(--u));
  background:      var(--secondary);
  border:          calc(0.535 * var(--u)) solid var(--opacity-neutral-20);
  border-radius:   var(--radius-full);
  box-sizing:      border-box;
}

/* The hero phone token. Figma stacks three cream/cyan halo pairs
   at 24/48/72px spread; reproduced verbatim. */
.flow-diagram__token[data-glow] {
  box-shadow:
    0 0 calc(24 * var(--u)) calc(24 * var(--u)) rgba(250, 246, 240, 0.4),
    0 0 calc( 4 * var(--u)) calc(24 * var(--u)) rgba( 89, 183, 217, 0.5),
    0 0 calc(48 * var(--u)) calc(48 * var(--u)) rgba(250, 246, 240, 0.2),
    0 0 calc( 6 * var(--u)) calc(48 * var(--u)) rgba( 89, 183, 217, 0.2),
    0 0 calc(72 * var(--u)) calc(72 * var(--u)) rgba(250, 246, 240, 0.1),
    0 0 calc(10 * var(--u)) calc(72 * var(--u)) rgba( 89, 183, 217, 0.15);
}

.flow-diagram__token-glyph {
  display: block;
  width:   calc(40 * var(--u));
  height:  calc(40 * var(--u));
  color:   var(--color-brand-blue-600);
}

.flow-diagram__token-glyph svg {
  display: block;
  width:   100%;
  height:  100%;
}

.flow-diagram__figma-asset {
  display:        block;
  max-width:      none;
  pointer-events: none;
  user-select:    none;
}


/* ============================================================
   Markers, pills, choices
   ============================================================ */

.flow-diagram__marker {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  width:           calc(20 * var(--u));
  height:          calc(20 * var(--u));
  border-radius:   var(--radius-full);
  background:      var(--info);
  color:           var(--card);
}

.flow-diagram__marker[data-tone="x"]     { background: var(--primary); }
.flow-diagram__marker[data-tone="blank"] { background: var(--card); color: var(--extra-muted-foreground); }

.flow-diagram__marker svg {
  display: block;
  width:   calc(12 * var(--u));
  height:  calc(12 * var(--u));
}

.flow-diagram__pill {
  display:       inline-flex;
  align-items:   center;
  gap:           calc(8 * var(--u));
  padding:       calc(12 * var(--u)) calc(14.893 * var(--u));
  background:    var(--background);
  border-radius: var(--radius-full);
  /* Figma gives every floating chip the same cyan bloom. */
  box-shadow:    0 0 calc(75 * var(--u)) 0 var(--color-brand-blue-300);
  white-space:   nowrap;
}

.flow-diagram__pill-label {
  font-size:   calc(20 * var(--u));
  line-height: calc(28 * var(--u));
  color:       var(--muted-foreground);
}


/* ============================================================
   Cards
   ============================================================ */

.flow-diagram__card {
  display:       flex;
  padding:       calc(12 * var(--u)) calc(14.893 * var(--u));
  background:    var(--background);
  border-radius: calc(11.914 * var(--u));
  box-shadow:    0 0 calc(93.082 * var(--u)) 0 var(--color-brand-blue-300);
  box-sizing:    border-box;
}

/* The caller-type card is square-cornered padding all round and a
   softer bloom (898:10361). */
.flow-diagram__card--tight {
  flex-direction: column;
  gap:            calc(10 * var(--u));
  padding:        calc(12 * var(--u));
  border-radius:  calc(12 * var(--u));
  box-shadow:     0 0 calc(46.54 * var(--u)) 0 var(--color-brand-blue-300);
}

.flow-diagram__card-body {
  --card-gap: 16;

  display:        flex;
  flex-direction: column;
  gap:            calc(var(--card-gap) * var(--u));
  align-items:    flex-start;
}

.flow-diagram__card-header-row {
  display:         flex;
  justify-content: flex-end;
  width:           100%;
}

.flow-diagram__card-header {
  display:       inline-flex;
  align-items:   center;
  gap:           calc(8 * var(--u));
  padding:       calc(4 * var(--u)) calc(10 * var(--u));
  /* 40% #59B7D9 over white — `--opacity-info-40` is that colour
     exactly, so the two layers reproduce Figma's fill. */
  background:    linear-gradient(var(--opacity-info-40), var(--opacity-info-40)), var(--card);
  border-radius: var(--radius-full);
  font-size:     calc(16 * var(--u));
  line-height:   calc(24 * var(--u));
  color:         var(--color-brand-blue-800);
  white-space:   nowrap;
}

.flow-diagram__card-header-icon {
  display: block;
  width:   calc(16 * var(--u));
  height:  calc(16 * var(--u));
  color:   var(--color-brand-blue-800);
}

.flow-diagram__card-header-icon svg {
  display: block;
  width:   100%;
  height:  100%;
}

.flow-diagram__choice,
.flow-diagram__check-row {
  display:     flex;
  align-items: center;
  gap:         calc(10 * var(--u));
  font-size:   calc(18 * var(--u));
  line-height: calc(28 * var(--u));
  color:       var(--muted-foreground);
  white-space: nowrap;
}

.flow-diagram__choice[data-picked] {
  font-weight: var(--font-weight-medium);
  color:       var(--secondary-foreground);
}

.flow-diagram__check-row {
  gap: calc(8 * var(--u));
}

.flow-diagram__check-row .flow-diagram__marker {
  width:  calc(16 * var(--u));
  height: calc(16 * var(--u));
}


/* ---- Form fields ---- */

.flow-diagram__field {
  display:        flex;
  flex-direction: column;
  gap:            calc(4 * var(--u));
  align-items:    flex-start;
  width:          100%;
}

.flow-diagram__field-label {
  display:     flex;
  align-items: center;
  gap:         calc(10 * var(--u));
  font-size:   calc(18 * var(--u));
  line-height: calc(28 * var(--u));
  /* #918976 is off the beige scale (beige-600 is #907F60); kept as
     a scoped raw value rather than inventing a global token. */
  color:       #918976;
  white-space: nowrap;
}

.flow-diagram__field-icon {
  display: block;
  width:   calc(20 * var(--u));
  height:  calc(20 * var(--u));
  color:   var(--muted-foreground);
}

.flow-diagram__field-icon svg {
  display: block;
  width:   100%;
  height:  100%;
}

.flow-diagram__chip {
  display:       inline-flex;
  align-items:   center;
  gap:           calc(3.723 * var(--u));
  padding:       calc(5.957 * var(--u)) calc(16 * var(--u));
  background:    var(--muted);
  border-radius: var(--radius-full);
  font-size:     calc(18 * var(--u));
  line-height:   calc(28 * var(--u));
  color:         var(--secondary-foreground);
  white-space:   nowrap;
}

.flow-diagram__select {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             calc(10 * var(--u));
  width:           100%;
  padding:         calc(5.957 * var(--u)) calc(8.936 * var(--u));
  background:      var(--card);
  border-radius:   calc(4.468 * var(--u));
  font-size:       calc(18 * var(--u));
  line-height:     calc(28 * var(--u));
  color:           var(--muted-foreground);
  box-sizing:      border-box;
  white-space:     nowrap;
}


/* ---- Brand logo plates ---- */

.flow-diagram__logo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--background);
  border-radius:   calc(11.914 * var(--u));
  box-shadow:      0 0 calc(75 * var(--u)) 0 var(--color-brand-blue-300);
  box-sizing:      border-box;
}

.flow-diagram__logo img {
  display:    block;
  object-fit: contain;
}


/* ---- Step captions ---- */

.flow-diagram__step {
  font-size:   calc(24 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: var(--font-weight-bold);
  color:       var(--color-brand-blue-600);
  text-align:  center;
}


/* ============================================================
   Small screens

   The stage scales as one unit, so its type shrinks with it: at
   ~735px (the <=767 container) it renders at 0.84x and 18px copy
   is still ~15px, but by 375px it is 0.39x and ~7px.

   Below 768px the section therefore stops rendering this stage
   and shows Figma's three mobile phase panels instead, one above
   each numbered step — see LegalHubEndToEndSection.css. The
   diagram is NOT hidden outright at any width; it is replaced.
   ============================================================ */