/* ============================================================
   تبي؟ / Tapai — hero B
   Everything below is CSS + inline SVG. No image files.
   Logical properties only. letter-spacing stays 0 everywhere.
   ============================================================ */

/* Paint-only repair, carried by every page in this site: the shared
   .nav-toggle <svg> is referenced without class="icon", so the stroke-only
   #i-menu / #i-close symbols inherit fill:black / stroke:none and paint
   nothing — the mobile menu button is invisible below 900px. Colour only;
   no layout, no geometry, core.css untouched. */
.nav-toggle svg{fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------
   0. Brand lockup — size and inset, from this page's stylesheet only.
   core.css sets .brand-logo to 40px and the header container to a 1200px
   measure, which parks the mark 200px (12.5%) inside the viewport edge.
   Measured off hero-ref.png normalised to 1600px: the wordmark's inked box is
   102 x 50 with its outer edge 93px (5.8%) from the edge — 1.28x this build's
   80 x 39 at 201px. The mark's own artwork fills 98.4% of the svg box across
   and 96.3% down, so a 51.3px svg box lands the 50px ink height, and a 5.66vw
   inset lands the 93px ink inset.
   The negative inline-start margin is absorbed by .nav-list's `margin-inline-
   start:auto`, so the nav and the header CTA do not move. ------------------ */
.site-header .brand-logo{height:clamp(34px, 3.21vw, 54px)}
.site-header .brand{
  --hdr-gutter:max(1.5rem, (100vw - var(--container)) / 2);
  margin-inline-start:calc(-1 * max(0px, var(--hdr-gutter) - 5.66vw));
}

/* ------------------------------------------------------------
   0b. The rest of the header, page-local. core.css is not touched.
   ------------------------------------------------------------ */
/* The reference draws NO rule under the header. Its last two rows fade
   white → rgb(247,247,247) → rgb(241,241,243) and the warm ground begins
   clean at y=87. core's 1px --line-light border renders rgb(225,231,231):
   a hard green hairline the artwork does not have. An INSET shadow puts the
   fade inside the header's own last rows, which is where the reference
   carries it — an outset one would tint the ground instead. */
.site-header{
  border-block-end:0;
  box-shadow:inset 0 -2px 3px -1px rgba(18,24,28,.07);
}

@media (min-width:901px){
  /* HEIGHT. The reference's ground starts at y=87 with the logo ink at
     y18-68; core's 78px container starts it at 79 with the ink at y13-63 —
     8px short, 5px high. 87px of container centres the 53.7px lockup at
     y16.7, which lands its ink on y17.6-67.6. Nothing else in the header
     needs a block offset once the measure is right. */
  .site-header .container{min-height:87px}

  /* PITCH + POSITION. Reference nav label centres at a 1672 frame:
     853.5 / 745 / 630 / 508 — pitch 108.5 / 115 / 122, against this build's
     92.5 / 92.5 / 103.5, with the whole run sitting ~106px too far
     inline-end (left). Pitch is (w(i) + w(i+1))/2 + gap, so a single gap
     value moves all three at once: 8px → 27px predicts 111 / 110 / 122.5
     off the measured item widths 86.9 / 82.2 / 86.5 / 105.9.
     The run does not need its own translation: core packs the list against
     the CTA with margin-inline-start:auto, so the CTA's own inline offset
     below carries the nav back toward the logo with it. The 8px here is the
     residual that lands the rightmost ink on x880 (reference x880). */
  .site-header .nav-list{gap:27px;margin-inline-end:8px}

  /* THE ACTIVE TICK. The reference marks the current page with a short
     centred tick — x841-869, i.e. 29px wide, ONE row, at y=69, a clear 19
     rows under the label ink. core draws 54px at 2px only 12 rows down,
     which reads as a full underline of the word. inset-inline:0 with a fixed
     width and auto inline margins centres an absolutely positioned box
     without naming left or right. */
  .site-header .nav-list a[aria-current="page"]::after{
    inset-inline:0;
    inline-size:29px;
    margin-inline:auto;
    block-size:1px;
    border-radius:0;
    inset-block-end:-3px;
  }

  /* THE CTA PILL. Reference box x271-422 y19-64 = 152 x 46. This build
     renders 143 x 55 hard against the container's inline-end edge: core's
     .btn contributes 12px of block padding on top of the 1.8 body leading,
     which is what makes 55 out of a 44px minimum, so the height is stated
     outright and the block padding zeroed. The 35px inline-end margin is the
     reference's own inset from the container edge (271 against 236) — and
     because the nav list is packed against this pill, it moves the whole nav
     run inline-start with it. */
  .site-header .nav-cta{
    min-height:0;
    block-size:46px;
    inline-size:152px;
    padding-block:0;
    padding-inline:31px 19px;
    margin-inline-end:35px;
    /* the reference does not centre the pill in the header band: its box runs
       y19-64 where the band's own centre would put it at y20.5-66.5 */
    position:relative;
    inset-block-start:-2px;
  }
}

.hb-hero{
  /* warm off-white ground — the paper grey is too cold for this composition */
  --ground:#FAF9F6;

  /* distance from the container edge to the viewport edge, so the
     illustration can bleed off the inline-end (left in RTL) side */
  --bleed:max(1.5rem, (100vw - var(--container)) / 2);

  --copy-w:500px;
  --col-gap:clamp(2rem, 4vw, 4.25rem);

  /* the amber the reference uses for offset rules — a shade of --gold, not
     --gold itself, which reads pale at any weight against the warm ground.
     Re-sampled off the reference's rule at y=870: rgb(223,176,104). The old
     srgb 90/10 mix rendered rgb(222,181,103) — the "lighter, yellower" gold
     the blind comparison caught: 5 units of surplus green and 3 of surplus
     luminance. Interpolating the same two brand hexes in oklab instead, at
     89%, lands rgb(219,179,104): green surplus down to 3, luminance to 1.
     Closer is not reachable without leaving the palette — every brand hue
     except --gold carries more green than red, so no srgb or oklab mix can
     pull green down past this. The residual is under one JND on a 14px rule. */
  --rule-gold:color-mix(in oklab, var(--gold) 89%, var(--ink));

  /* Badge-pill ink. A blind comparison flagged this, and the sample confirms
     it: the reference's «منصة ذكية لتنسيق الفعاليات» is a dark bronze, not
     --ink. Sampled from the unresampled reference, the glyph cores bottom out
     at rgb(158,101,11) and cluster at rgb(169,123,53). No srgb mix of the five
     brand hexes reaches that hue — every one of them carries more blue than a
     bronze can — so, like the three petrol values above, this is carried as a
     documented literal. It is set two steps darker than the sampled value so
     it clears 4.5:1 on the pill ground rgb(249,239,221), which the reference's
     own value does not (4.13:1). */
  --badge-ink:#956213;   /* 4.55:1 on the pill */

  /* --- the dark fills, re-anchored to the reference -------------------
     Every large dark mass in hero-ref.png is a PETROL teal: blue sits a few
     points ABOVE green (band 7,66,71 · button 8,68,73 · icon well 7,97,101).
     No mix of the five brand hexes can reach B>G — --ink is the bluest and it
     only manages B=G+1 — so these three are carried as literal sampled values
     and everything else dark is mixed out of them. This is a deliberate,
     isolated departure from the BRAND.md palette, made to match the approved
     artwork; reverting is one line per token. */
  --ink-band:#074247;    /* stats band          — ref rgb(7,66,71)   */
  --ink-cta:#084449;     /* primary button fill — ref rgb(8,68,73)   */
  --well-teal:#076165;   /* provider icon well  — ref rgb(7,97,101)  */

  /* card ink, tints only */
  --card-sub:color-mix(in srgb, var(--ink) 74%, #fff);
  --card-line:color-mix(in srgb, var(--ink) 11%, transparent);

  /* Success accent. Sampled from the approved mockup, where every "done"
     mark reads distinctly greener than --teal: provider checks rgb(17,119,98),
     tracker markers rgb(31,135,107). --teal renders cyan beside them, so this
     one hue is carried as its own token rather than mixed out of --teal. */
  --ok:#1F875F;
  --tick:var(--ok);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ground);

  /* the hero owns the fold: the stats band overruns the bottom and is clipped
     here, so the warm ground is the last thing in frame — never a bottom edge.
     87px is the header's own height now that the hairline is gone. */
  min-height:calc(100svh - 87px);
}

/* ------------------------------------------------------------
   1. Pale motif shapes drifting behind the copy column
   ------------------------------------------------------------ */
.hb-motifs{position:absolute;inset:0;pointer-events:none;z-index:0}
.hb-motif{
  position:absolute;display:block;
  border-radius:34%;
  background:var(--ink);
  /* barely perceptible, as in the reference — at .04 they read as legible
     grey blocks beside the headline */
  opacity:.022;
}
.hb-motif--a{inset-inline-start:1.5%;inset-block-start:7%;width:5.6vw;height:5.6vw;border-radius:30%}
.hb-motif--b{inset-inline-start:-0.6%;inset-block-start:18%;width:4.4vw;height:4.4vw;border-radius:38%;background:var(--gold);opacity:.035}
.hb-motif--c{inset-inline-start:4.2%;inset-block-start:27%;width:3.4vw;height:3.4vw;border-radius:36%}
.hb-motif--d{inset-inline-start:41%;inset-block-start:39%;width:4.6vw;height:4.6vw;border-radius:32%}
.hb-motif--e{inset-inline-start:38.4%;inset-block-start:49%;width:3.4vw;height:3.4vw;border-radius:34%;background:var(--gold);opacity:.035}
.hb-motif--f{inset-inline-start:43.6%;inset-block-start:57%;width:3.9vw;height:3.9vw;border-radius:32%}
.hb-motif--g{inset-inline-start:39.6%;inset-block-start:68%;width:3vw;height:3vw;border-radius:36%}

/* ------------------------------------------------------------
   2. Two-column shell
   ------------------------------------------------------------ */
.hb-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,var(--copy-w)) minmax(0,1fr);
  gap:var(--col-gap);
  align-items:center;
}

/* ------------------------------------------------------------
   3. Copy column
   ------------------------------------------------------------ */
.hb-copy{
  position:relative;z-index:2;
  /* the reference sits the copy block low, opposite the order card — but not so
     low that the column, not the illustration, sets the hero's height */
  padding-block-start:clamp(0rem, 3.6vw, 4rem);

  /* the container gutter (--bleed) parks the column ~200px off the viewport
     edge; the reference leaves ~7%. Equal-and-opposite margins translate the
     column toward the edge without changing its measure.
     Re-measured: at 7vw the column's inline-start (right) edge lands on 1555
     and every right-aligned run in it — headline 1550, lead 1554, solid CTA
     1554, accent rule 1549 — sits 8-13px outboard of the reference's 1542 /
     1542 / 1542 / 1538. --pull has to come DOWN, not up: 7.72vw leaves
     236 - 129.1 = 106.9px of pull and puts the edge on 1542.9. */
  --pull:max(0px, var(--bleed) - 7.72vw);
  margin-inline:calc(-1 * var(--pull)) var(--pull);

  /* Same trick on the block axis. The column is centred against the
     illustration, and centring alone cannot reach the reference: its copy sits
     ~31px lower than a centred column lands (eyebrow y=190, headline ink y=239,
     feature labels y=707 against 153 / 210 / 687 here), while the illustration
     is already on the money — the order card tops at y=269 in both. Padding
     cannot buy that, because past ~16px the column overtakes the stage as the
     tallest grid item and starts dragging the illustration down with it.
     Equal-and-opposite block margins leave the item's outer height untouched,
     so the copy drops and nothing else moves.
     Re-fitted twice. Most of the original 31px deficit was never a centring
     problem at all — it was the oversized lead→CTA gap and the oversized
     CTA→feature gap inflating the column and lifting its top. With both of
     those measured back onto the reference the column is 594.7px against the
     row's 634.0px, and centring alone lands the eyebrow within ~2px of the
     reference. What is left is this hairline.
     The -8px is the header's growth from 79px to 87px. Measured in FRAME
     coordinates this column already registers exactly — eyebrow y184,
     headline y239-399, lead y420-517, CTA y555-609, feature strip y665 in the
     reference and in this build alike — so when the header takes 8px the
     column has to give them straight back or every one of those rows lands
     8px low. The illustration is a different case: it is anchored to the
     hero's own top edge, which is where the reference anchors it too, and its
     internal offsets absorb the shift instead (see --lift on .hb-stage). */
  --drop:calc(clamp(0px, 0.449vw, 34px) - 8px);
  margin-block:var(--drop) calc(-1 * var(--drop));
}

.hb-eyebrow{
  display:inline-block;
  /* the reference badge is wider and shallower than a stock pill. Its box
     measures 208 x 34 around 176px of text — 16px of side padding, not 22. */
  padding:.24rem 1rem;
  border-radius:var(--r-pill);
  /* pale ivory, not wheat */
  background:color-mix(in srgb, var(--gold) 18%, var(--ground));
  color:var(--badge-ink);
  font-size:1.0625rem;font-weight:500;line-height:1.5;
  /* the reference insets the badge from the headline's outer edge —
     inline-start, because that is the right-hand edge under dir="rtl".
     Measured from the column's own inline-start edge to the pill's: 80px in
     the reference against 85 here, i.e. 16% of the 500px measure, not 17. */
  margin-inline-start:16%;
  /* the pair of block margins below is height-neutral: it moves the badge and
     the headline down onto the reference's rows without dragging the lead,
     the CTA row or the feature strip — all three already register exactly */
  margin-block-start:clamp(0px, 0.63vw, 14px);
  margin-block-end:clamp(1rem,1.7vw,1.6rem);
}

.hb-title{
  /* Re-measured ink band by ink band at 1672x941. The reference sets TWO
     separated rows — ink 239..310 and 318..388 — i.e. 71–72px of glyph, 8 clear
     rows between them, 79px top-to-top. 0.99 of a 78.4px type reproduced the
     79px top-to-top exactly but left ONE clear row, because this font's ascender
     and its ي descender are both deeper than the drawn reference letterforms:
     the build's own glyph band measured 78px against the reference's 71.
     So the fix is BOTH halves, not the leading alone. 75.2px of type brings the
     glyph band to ~75 (and holds the headline's measured width at ~393 against
     the reference's 398 — a 9% cut would have matched the height and thrown the
     width away), and 1.075 opens the top-to-top to ~81 so ~6 rows of ground
     survive between «نسّق فعاليتك» and «باحترافية». */
  font-size:clamp(2.6rem, 4.5vw, 4.7rem);
  line-height:1.035;
  font-weight:700;
  color:var(--ink);
  /* the reference leaves 98px between the second headline row and the lead's
     first row; 2vw of margin made it 108 */
  margin-block-end:clamp(.9rem,1.656vw,2.6rem);
}
.hb-title-accent{
  position:relative;display:inline-block;
  color:var(--teal);
}
/* the gold rule sits under the word's inline-start (right) edge, short and thin */
.hb-title-accent::after{
  content:"";position:absolute;
  inset-block-end:-.1em;inset-inline-start:2%;
  width:26%;height:3px;border-radius:1px;
  background:var(--gold);
}

.hb-lead{
  font-size:clamp(1.0625rem, 1.36vw, 1.35rem);
  /* NOT --lh-body (1.8). The hero lead is display-adjacent: the reference sets
     three lines in ~101px where 1.8 needs 117, and the extra 16px pushes the
     CTA row and the feature strip out of register with the illustration. */
  line-height:1.57;
  color:color-mix(in srgb, var(--ink) 90%, var(--ground));
  /* measure in em, so the rag holds its shape as the type scales: the first
     sentence sets exactly two lines, «من الفكرة» opens the third.
     19.5em set the block 404px wide against the reference's 424 (x1119-1542
     against x1151-1554); 20.4em restores the missing 20px of measure without
     changing where either sentence breaks. */
  max-width:20.4em;
  /* Measured ink-to-ink. Reference ink bands in the copy column: lead line 3
     ends at y=517 and the CTA pill starts at y=555 — 38px raw, 36.4px
     normalised to 1600. The margin is not that number: the lead's last line
     carries ~5px of half-leading below its ink, so the ink gap runs 5px wider
     than whatever is set here. 1.96vw = 31.4px of margin -> 36.4px of ink. */
  margin-block-end:clamp(1.1rem, 2.11vw, 2.9rem);
}
/* the lead is two sentences; the reference starts the second one on its own
   line, so the break is set at the sentence, not left to the measure */
.hb-lead-2{display:block}

/* Re-measured ink-to-ink: the reference's CTA pill ends at y=609 and its
   feature icons start at y=665 — 56px raw, 53.6px normalised. The pill's bottom
   edge IS its ink, but the icon row's box starts ~2.4px above the drawn glyph,
   so 3.2vw = 51.2px of margin lands the 53.6px of ink gap. */
.hb-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-block-end:clamp(1.8rem,3.32vw,3.6rem)}
/* core's .btn is 52px of min-height plus 12px of block padding and renders 57
   tall. The reference's hero pair measures 50px (228 x 50 solid, 204 x 50
   outline) — a fixed height is the only way to take the padding out of the
   equation without touching core.css. */
.hb-actions .btn{
  /* Re-measured against the reference's own ink boxes at 1672x941:
     solid  x1308..1540 y556..608 = 233 x 53   (build was 223 x 50)
     outline x1078..1289 y555..608 = 212 x 54  (build was 206 x 50)
     so the pair is 3px short in the block axis and 6–10px short across. */
  --cta-h:53px;
  min-height:0;height:var(--cta-h);
  /* 3rem (--s-7) rendered the outline 206 wide; 3.19rem lands 212. */
  padding-block:0;padding-inline:3.19rem;
}
/* the reference's CTA is not flat --ink — it is the same petrol dark as the
   stats band, one step lighter: rgb(8,68,73) against --ink's rgb(15,61,62).
   Width: a plain colour bbox over this area reads ~258px because it also picks
   up the OUTLINE button's stroke, which is dark enough to pass a petrol test at
   some rows. Restricting to contiguous petrol runs of 100px or more isolates the
   pill: x 1307..1540, i.e. 234px raw = 223.9px normalised to 1600 — and the
   outline button beside it measures 211 raw = 201.9. 3.9rem rendered 227.9;
   3.84rem takes ~1px off each side and lands 224.1. */
/* 3.84rem rendered 223 wide against the reference's measured 233; 4.15rem
   adds the missing 5px per side. */
.hb-actions .btn-solid{padding-inline:4.15rem;background:var(--ink-cta)}
.hb-actions .btn-solid:hover{background:color-mix(in srgb, var(--ink-cta) 82%, var(--well-teal))}
.hb-btn-outline{border-color:color-mix(in srgb, var(--ink) 55%, transparent)}

/* The strip is WIDER than the copy measure in the reference — it is the one
   thing in the column that hangs past the text block on both sides. Measured
   icon/label centres at 1672x941:
     reference 1102.5 · 1238.5 · 1376.0 · 1518.2   span 415.7, pitch 136–142
     build     1113.8 · 1240.8 · 1368.0 · 1494.8   span 381.0, pitch 127
   A 4-column grid puts the outer centres half a column inside its own box, so
   span = 3(col+gap) and the box has to reach 546px, not the column's 500. The
   two overhangs differ because the reference hangs ~29px past the column's
   inline-start edge and ~17px past its inline-end edge, not evenly; both are
   tied to (100vw - 1240px) so they unwind to zero before the ≤1240px layout
   takes over and the strip can never overrun the gutter. */
/* Re-measured after the copy column moved 13px inline-start: the strip's SPAN
   is exact — icon/label centres 1090.5 / 1229.0 / 1368.0 / 1506.0 against the
   reference's 1102.5 / 1238.0 / 1376.0 / 1518.0, i.e. 415.5 in both — but the
   whole run travelled with the column and the reference's did not. Twelve
   pixels off one overhang and onto the other translates it back without
   touching the pitch. */
.hb-feats{
  --feat-out:clamp(0px, (100vw - 1240px) * 0.0949, 41px);
  --feat-in:clamp(0px, (100vw - 1240px) * 0.0116, 5px);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:.5rem;
  margin-inline:calc(-1 * var(--feat-out)) calc(-1 * var(--feat-in));
}
.hb-feats li{
  /* icon ink bottom → label ink top is 17px in the reference and was 14 here */
  display:flex;flex-direction:column;align-items:center;gap:.68rem;
  text-align:center;
  font-size:.9rem;line-height:1.5;
  color:color-mix(in srgb, var(--ink) 80%, var(--ground));
}
.hb-feat-icon{width:30px;height:30px;stroke-width:1.5;color:var(--ink)}

/* ------------------------------------------------------------
   4. The stage.
   Internal geometry is authored against a 890 x 675 design box;
   --u is one design pixel, so the whole illustration scales as one.
   ------------------------------------------------------------ */
.hb-stage{
  position:relative;
  container-type:inline-size;
  /* One design pixel. 0.115cqw drew the whole cluster 4.5% large: the
     reference's provider cards measure 221–237 wide against this build's
     237–262, and the run from the النقل card's top to the المنظّمين card's
     top is 486px in the reference against 508 here. 0.110cqw lands both —
     and, because every internal gap in the order card is also authored in --u,
     it takes that card from 466 x 350 to 455 x 335 against the reference's
     455 x 333 without touching a single padding value. */
  --u:0.110cqw;

  /* THE HEADER'S 8px, absorbed. The stage's top edge is the hero's top edge
     and has to stay there — the dark mass starts on it, and the header is
     translucent, so anything pulled above it would smear through the blur.
     The cards and the wires are a different matter: they are absolutely
     positioned off that same edge, and measured against the reference they
     were already 4px low before the header grew (النقل 133 against 137 with
     the hero starting 8px higher). One negative block margin, shared by the
     wires and every card, takes the surplus back off all of them at once and
     leaves each card's own inset expressing only its position in the
     composition. It scales with --u, so it survives every viewport. */
  --lift:calc(4.2 * var(--u));

  aspect-ratio:890 / 675;
  margin-inline-end:calc(-1 * var(--bleed));
  align-self:center;
}

/* --- the dark mass bleeding off the inline-end edge ---
   The reference's silhouette is not a rounded rectangle: its right edge leaves
   the hero top at x=228, swells to x=360 at y=254 — widest in the upper third,
   65px further out than the border-radius version reached — then tapers back
   through x=314 at y=694 and closes on the frame edge at y=862. That profile
   is carried as #hb-mass-shape, a normalised clipPath, so the box below is a
   plain rectangle and the curve scales with it. */
.hb-mass{
  position:absolute;
  inset-block-start:0;
  inset-inline-end:calc(-298 * var(--u));
  width:calc(689 * var(--u));
  /* 854, not 852. The silhouette's bottom-left run was exiting the frame at
     y=892/891/885/866 at x = 0/60/120/180 against the reference's
     902/902/896/876, leaving a 52px strip of warm ground under it at the
     frame's inline-end edge where the reference leaves 38. The header's 8px
     covers most of that; these last two design units close it. */
  height:calc(854 * var(--u));
  /* one step LIGHTER than the stats band it sits beside, as in the reference,
     and mixed out of the same two petrol anchors so the whole dark family
     agrees. Reference samples: rgb(8,80,87) high, rgb(13,77,83) low — a real
     gradient, shallow but present, so it is set on both axes. */
  background:
    radial-gradient(120% 78% at 88% 4%,
      color-mix(in srgb, var(--well-teal) 62%, var(--ink-band)) 0%,
      transparent 62%),
    linear-gradient(198deg,
      color-mix(in srgb, var(--well-teal) 50%, var(--ink-band)) 0%,
      color-mix(in srgb, var(--well-teal) 40%, var(--ink-band)) 46%,
      color-mix(in srgb, var(--well-teal) 26%, var(--ink-band)) 100%);
  clip-path:url(#hb-mass-shape);
  z-index:0;
}
.hb-mass .pattern-field{
  opacity:.028;
  background-size:calc(250 * var(--u)) calc(250 * var(--u));
}
/* streaks + arcs share one box; the mass's own clip-path contains them */
.hb-mass-arcs{position:absolute;inset:0;pointer-events:none}
.hb-mass-arcs svg{display:block;width:100%;height:100%}
.hb-mass-arcs path{
  fill:none;
  stroke:var(--paper);
  vector-effect:non-scaling-stroke;
}
.hb-arc path{stroke-width:1.6;opacity:.11}
.hb-arc path:nth-child(3){opacity:.07}
/* the faint diagonal light the reference lays across the mass */
.hb-streak path{stroke-width:26;opacity:.022;stroke-linecap:round}
.hb-streak path:nth-child(2){stroke-width:15;opacity:.017}
.hb-streak path:nth-child(3){stroke-width:34;opacity:.014}

/* The gold arc hugging the mass's top corner. It sits OUTSIDE .hb-mass, whose
   clip-path would otherwise eat it, and fades out where the reference's does —
   under the النقل card, around y=140. */
.hb-mass-rule{
  position:absolute;pointer-events:none;
  inset-block-start:0;
  inset-inline-end:calc(-298 * var(--u));
  width:calc(689 * var(--u));
  height:calc(854 * var(--u));   /* locked to .hb-mass, above */
  max-width:none;
  overflow:visible;
  z-index:0;
}
/* The arc is a filled wedge now, not a stroked rule — see the path in the
   markup for why. fill comes from the element's own presentation attribute so
   the gradient reference stays with the geometry; only the stroke is cleared. */
.hb-mass-rule path{stroke:none}
.hb-mass-rule stop{stop-color:var(--rule-gold)}

/* --- dashed connectors --- */
/* Sized so ONE viewBox unit is exactly one --u and anchored on the same
   inline-end origin the cards use. max-width:none is load-bearing: core.css
   caps every svg at 100% of its container, which was squeezing this 890u box
   into the 869u stage and rescaling every wire by 0.977 — that alone put the
   junctions ~13px off the cards they are supposed to touch. */
.hb-wires{
  position:absolute;
  inset-block-start:0;
  margin-block-start:calc(-1 * var(--lift));   /* travels with the cards */
  inset-inline-end:0;
  width:calc(890 * var(--u));
  height:calc(675 * var(--u));
  max-width:none;
  z-index:1;overflow:visible;
}
.hb-wire{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.hb-wire path,.hb-wire rect{vector-effect:non-scaling-stroke}
/* the reference's dash cycle measures ~7px with the mark longer than the gap;
   5-on/6-off read as a dotted line */
.hb-wire--gold{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 3;opacity:.9}
.hb-wire--teal{stroke:var(--teal);stroke-width:1.5;stroke-dasharray:4 3;opacity:.85}

.hb-nodes{stroke-linecap:round;stroke-linejoin:round}
.hb-node--dot{fill:var(--teal);stroke:none}
/* the reference's junction markers are deep petrol discs — sampled rgb(0,58,70)
   at the core, far darker than the teal-lifted mix this build was using */
.hb-node--solid circle{fill:color-mix(in srgb, var(--ink-band) 88%, #000);stroke:none}
.hb-node--solid path{fill:none;stroke:#fff;stroke-width:1.7}
/* white pins with a very pale tick and a soft shadow — not hard teal rings */
.hb-node--open{filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}
.hb-node--open circle{
  fill:#fff;
  stroke:color-mix(in srgb, var(--teal) 30%, #fff);
  stroke-width:1.6;
}
.hb-node--open path{
  fill:none;
  stroke:color-mix(in srgb, var(--teal) 45%, #fff);
  stroke-width:1.7;
}

/* --- provider cards --- */
.hb-pcard{
  position:absolute;z-index:2;
  margin-block-start:calc(-1 * var(--lift));
  display:flex;flex-direction:row-reverse;align-items:center;
  gap:calc(14 * var(--u));
  /* Re-measured by flood-filling each card's white body at 1672x941 instead of
     column-scanning it, which had been clipping the corner radii off the top
     and bottom rows and reading every card ~5px short:
       reference  98 · 102 · 95 · 95 · 93     build  91 · 91 · 91 · 91 · 90
     The reference's spread is artwork noise — five identical card structures
     cannot render five different heights — so the target is its middle, 96–97,
     not any one card. The block axis is now separated from the inline one:
     14.6u still sets the side padding (widths already measure 229–247 against
     the reference's 233–248), and 17.2u opens the block padding so the card
     clears its 66.5u well by the reference's margin instead of hugging it. */
  padding:calc(17.2 * var(--u)) calc(14.6 * var(--u));
  background:#fff;
  border-radius:max(14px, calc(19 * var(--u)));
  /* THE SHADOW HUE. Mixing --ink into the shadow was the mistake: --ink is
     rgb(15,61,62), so every card sat on a green halo — sampled 4px under the
     النقل card the ground read rgb(205,212,209), green 7 above red, where the
     reference reads rgb(232,230,227), a neutral warm grey with r > g > b. And
     it was far too heavy: the same cut measured a peak of 57 and 951 summed
     over 40 rows against the reference's 30 and 488. A neutral near-black at
     ~10% reproduces both the weight and the hue. */
  box-shadow:
    0 calc(15 * var(--u)) calc(32 * var(--u)) calc(-12 * var(--u)) rgba(20,24,24,.13),
    0 calc(3 * var(--u)) calc(8 * var(--u)) calc(-4 * var(--u)) rgba(20,24,24,.05);
}
/* Card boxes, re-derived from hero-ref.png at 1600px. Reference page-x of each
   card's outer (left) edge and its width, divided by --u:
     النقل 251/221 · الطبية 614/237 · الإسعاف 66/223 · الحشود 113/235 ·
     المنظّمين 581/223 — and hero-relative tops 49 · 51 · 275 · 508 · 535. */
.hb-pcard--1{inset-inline-end:calc(273 * var(--u));inset-block-start:calc(57  * var(--u));width:calc(240 * var(--u))}
.hb-pcard--2{inset-inline-end:calc(668 * var(--u));inset-block-start:calc(59  * var(--u));width:calc(258 * var(--u))}
.hb-pcard--3{inset-inline-end:calc(72  * var(--u));inset-block-start:calc(304 * var(--u));width:calc(242 * var(--u))}
.hb-pcard--4{inset-inline-end:calc(123 * var(--u));inset-block-start:calc(558 * var(--u));width:calc(255 * var(--u))}
/* المنظّمين is the one card whose step is its own, not --lift's: it sits 28px
   below تنظيم الحشود in the reference and was sitting 22 below here. */
.hb-pcard--5{inset-inline-end:calc(632 * var(--u));inset-block-start:calc(587.8 * var(--u));width:calc(242 * var(--u))}

.hb-well{
  flex:none;
  width:calc(66.5 * var(--u));height:calc(66.5 * var(--u));
  border-radius:var(--r-pill);
  display:grid;place-items:center;
  /* a saturated petrol disc that lets the white glyph breathe. Straddles the
     reference's sampled centre rgb(7,97,101): the two stops land rgb(10,110,112)
     and rgb(6,85,89), the same swing the reference well carries. */
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--well-teal) 78%, var(--teal)),
    color-mix(in srgb, var(--well-teal) 93%, #000));
  color:#fff;
}
.hb-well--gold{
  background:linear-gradient(150deg, var(--gold), color-mix(in srgb, var(--gold) 76%, var(--ink)) 105%);
}
/* The reference's glyphs are much bigger inside the well than a stock icon —
   but 42u overshot: it drew the bus 39.6px wide against the reference's 35.9px
   normalised to 1600. 38u lands 35.9. The stroke has to stay down with it —
   1.9 across a box this wide would render 3.2px against the reference's ~2.5;
   1.5 holds it at 2.4. */
.hb-well .icon{width:calc(39.8 * var(--u));height:calc(39.8 * var(--u));stroke-width:1.5}

.hb-pbody{min-width:0;flex:1}
.hb-ptitle{
  display:flex;align-items:center;gap:calc(7 * var(--u));
  font-size:max(13px, calc(19 * var(--u)));
  font-weight:700;line-height:1.45;color:var(--ink);
}
.hb-psub{
  font-size:max(11px, calc(15 * var(--u)));
  line-height:1.55;color:var(--card-sub);
  margin-block-start:calc(1 * var(--u));
  white-space:nowrap;
}
.hb-tick{
  flex:none;order:-1;
  width:calc(18 * var(--u));height:calc(18 * var(--u));
  border-radius:var(--r-pill);
  background:var(--tick);
  display:grid;place-items:center;
}
.hb-tick svg{
  width:calc(11 * var(--u));height:calc(11 * var(--u));
  fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}

/* ------------------------------------------------------------
   5. The order-status card — the focal object
   ------------------------------------------------------------ */
.hb-order{
  position:absolute;z-index:3;
  margin-block-start:calc(-1 * var(--lift));
  inset-inline-end:calc(355 * var(--u));
  inset-block-start:calc(195 * var(--u));
  width:calc(495 * var(--u));
  padding:calc(20 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u));
  background:#fff;
  border-radius:max(16px, calc(26 * var(--u)));
  /* Same correction as .hb-pcard, one step stronger because the card is one
     step larger. The old pair peaked at 52 units of darkening and summed 1104
     over the 40 rows below the card at x=600, against the reference's 27 and
     546, and it tinted the ground rgb(182,194,192) — 12 units of surplus
     green — where the reference reads rgb(228,225,223). */
  box-shadow:
    0 calc(30 * var(--u)) calc(62 * var(--u)) calc(-20 * var(--u)) rgba(20,24,24,.19),
    0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-5 * var(--u)) rgba(20,24,24,.05);
}

.hb-order-head{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u))}
.hb-order-title{
  display:flex;align-items:center;justify-content:flex-start;
  gap:calc(9 * var(--u));
  font-size:max(15px, calc(22 * var(--u)));
  font-weight:700;line-height:1.4;color:var(--ink);
}
.hb-order-icon{width:calc(23 * var(--u));height:calc(23 * var(--u));stroke-width:1.6;color:var(--ink)}
.hb-order-ref{
  font-size:max(11px, calc(15 * var(--u)));
  line-height:1.6;color:var(--card-sub);
  margin-block-start:calc(2 * var(--u));
}
/* Measured chip to chip, not text to text: the reference's «قيد التنفيذ» box
   is x364-452 y319-344 — 89 x 26 — against 80 x 30 sitting at y307 here, i.e.
   9px narrow, 4px deep and 12px high. The offset is carried by inset, not by
   a block margin: with align-self:center a margin only moves the chip by half
   its own value and, past ~35 design units, makes the chip the tallest thing
   in the head and grows the whole card. A relative inset moves it exactly and
   costs the layout nothing. */
.hb-order-pill{
  flex:none;align-self:center;
  padding:calc(2.6 * var(--u)) calc(17.7 * var(--u));
  border-radius:max(8px, calc(10 * var(--u)));
  background:color-mix(in srgb, var(--teal) 15%, #fff);
  color:color-mix(in srgb, var(--teal) 74%, var(--ink));
  font-size:max(11px, calc(14.5 * var(--u)));
  font-weight:500;line-height:1.5;
  position:relative;
  inset-block-start:calc(17.5 * var(--u));
}

/* --- five-step tracker --- */
/* NOT an equal five-column grid. The reference's marker centres are 94 / 99.5 /
   79 / 86 apart (normalised to 1600) — an uneven pitch set by the label widths,
   spanning 359px. An equal grid renders a dead-flat 82px pitch spanning 330,
   and parks the outer markers 62.6px inside the card instead of ~52px. Laying
   the steps out with space-between and letting each one be as wide as its own
   label reproduces both the span and the uneven rhythm for free. */
.hb-track{
  position:relative;
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-block:calc(30 * var(--u)) calc(26 * var(--u));
}
/* The rail is 2px in the reference — one solid row plus its antialiased row —
   and it runs the FULL width of the track, past the outer markers to the card's
   inner padding on both sides. At 1px, stopping at the first and last dot, the
   five steps read as five separate chips instead of one continuous track. */
.hb-track::before,
.hb-track::after{
  content:"";position:absolute;
  inset-block-start:calc(12 * var(--u));
  /* square ends: the reference's rails are solid and even edge to edge, and a
     2px radius on a 2px bar rounds the run away at both terminals */
  height:2px;border-radius:0;
}
.hb-track::before{inset-inline:0;background:color-mix(in srgb, var(--ink) 12%, #fff)}
/* The completed run starts at the card's inner edge and dies HALFWAY between
   the last two markers, not just past the fourth: scanned across the reference's
   rail, teal ends at x=442 raw against marker centres of 395.5 and 492.5. That
   is 79.8 raw inside a 432.6-raw content box, i.e. the run covers 81.5%. */
.hb-track::after{inset-inline-start:0;width:81.5%;background:color-mix(in srgb, var(--ok) 40%, #fff)}

.hb-step{
  position:relative;z-index:1;
  /* the label's own width sets the pitch — but «التنفيذ» is only 25px wide, and
     unfloored it lets space-between shove the last marker to within 13px of the
     card's content edge. The reference's two outer markers sit 52.2px and 44.0px
     inside the card, i.e. ~27px inside the content box; a 60u floor puts both of
     them there and lands the marker span on the reference's 358.4px. */
  flex:0 1 auto;min-width:calc(60 * var(--u));
  display:flex;flex-direction:column;align-items:center;
  gap:calc(9 * var(--u));
  text-align:center;
}
/* rounded SQUARES, as in the reference — never circles, and never a halo */
.hb-dot{
  width:calc(24 * var(--u));height:calc(24 * var(--u));
  border-radius:max(8px, calc(9 * var(--u)));
  display:grid;place-items:center;
  font-size:max(10px, calc(12.5 * var(--u)));font-weight:500;
  background:var(--ok);
  color:#fff;
  /* The white collar knocks the rail out behind the marker; the second layer is
     the reference's soft drop shadow. 4u (3.7px) opened a 3.3–4.4px white gap
     on both sides of every marker and the rail read as five broken segments —
     the reference leaves 0.6–1.3px, i.e. the rail visually touches the marker.
     1.2u is ~1.1px, which is that gap. */
  box-shadow:
    0 0 0 calc(1.2 * var(--u)) #fff,
    0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.14);
}
.hb-dot svg{
  width:calc(12 * var(--u));height:calc(12 * var(--u));
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
/* first step reads as the outlined origin of the run */
.hb-step.is-first .hb-dot{
  background:#fff;
  color:var(--ok);
  border:2px solid var(--ok);
}
/* "current" is expressed by darkening the marker that carries the glyph */
.hb-step.is-now .hb-dot{
  background:color-mix(in srgb, var(--ok) 70%, var(--ink));
}
/* The trailing step is the one exception to the rounded squares: at 12x the
   reference's «5» marker has a flat-free outline — a true circle, 20px across.
   The three solid green markers beside it are squared, so only this one is
   re-radiused. */
.hb-step.is-next .hb-dot{
  background:#fff;
  color:var(--card-sub);
  border:2px solid color-mix(in srgb, var(--ink) 20%, #fff);
  border-radius:var(--r-pill);
}
.hb-step-label{
  width:100%;                        /* wrap inside the column, never across it */
  font-size:max(9px, calc(11.8 * var(--u)));
  line-height:1.45;color:var(--card-sub);
}

/* --- order summary panel --- */
.hb-sum{
  border:1px solid var(--card-line);
  border-radius:max(10px, calc(15 * var(--u)));
  padding:calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
  background:#FAFAF9;                  /* tinted a shade below the card */
}
.hb-sum-title{
  font-size:max(12px, calc(17 * var(--u)));
  font-weight:700;color:var(--ink);line-height:1.5;
  margin-block-end:calc(9 * var(--u));
}
.hb-sum-grid{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:calc(14 * var(--u));row-gap:calc(8 * var(--u));
}
.hb-sum-key{
  display:flex;align-items:center;justify-content:flex-start;
  gap:calc(8 * var(--u));
  font-size:max(11px, calc(16 * var(--u)));
  font-weight:700;color:var(--ink);line-height:1.55;
}
/* The date row is the summary panel's inline-END column, and the reference
   pushes it hard against that edge rather than right-aligning it inside the
   column: «25 مايو 2024» + calendar sits at x381..468, and «الرياض – المملكة
   العربية السعودية» starts at x380 directly beneath it — the two are flush.
   flex-start left the group stranded at x465, 85px inboard, and 16u of type
   drew it 102 wide against the reference's 88. */
.hb-sum-key--alt{
  font-weight:400;color:var(--card-sub);
  justify-content:flex-end;
  gap:calc(5 * var(--u));
  font-size:max(10px, calc(13.7 * var(--u)));
}
/* the meta under it belongs to the same column and shares its edge */
.hb-sum-meta + .hb-sum-meta{text-align:end}
.hb-sum-icon{width:calc(18 * var(--u));height:calc(18 * var(--u));stroke-width:1.7;color:var(--ok);flex:none}
.hb-sum-key--alt .hb-sum-icon{color:var(--teal)}
.hb-sum-meta{
  font-size:max(10px, calc(14.5 * var(--u)));
  line-height:1.55;color:var(--card-sub);
}
.hb-sum-link{
  display:flex;align-items:center;justify-content:flex-end;
  gap:calc(8 * var(--u));
  margin-block-start:calc(15 * var(--u));
  font-size:max(11px, calc(16 * var(--u)));
  font-weight:500;color:var(--ink);   /* the quietest thing in the panel, not the loudest */
}
.hb-sum-link .icon{width:calc(17 * var(--u));height:calc(17 * var(--u));stroke-width:1.9;color:currentColor}

/* ------------------------------------------------------------
   6. Stats band
   ------------------------------------------------------------ */
.hb-stats{
  /* THE CORNER.
     Traced off hero-ref.png at 1600px, the band's edge is not one long elliptic
     sweep — it is a tight CIRCULAR corner that hands straight over to a flat
     chamfer. The top edge sits at y=755 and runs between x=419 and x=1174;
     from each of those points a 165px-radius arc turns the edge through 59°,
     and from the tangent points (278,835) and (1315,835) both sides run dead
     straight at dx/dy = 0.6 — 59° off horizontal — to the fold. Fitted
     residual under 2px anywhere on the edge: predicted 306 / 331 / 289 against
     measured 306 / 331 / 289 at y = 800 / 780 / 818.
     border-radius cannot express "arc, then straight line", so the silhouette
     is a clip-path. The arc is eight chords across 59°, whose worst deviation
     from the true circle is 0.34px. Every coordinate is a percentage of the
     full-bleed box or a vw, so the whole shape scales with the viewport.  */
  --band-shape:polygon(
      26.20% 0,     73.36% 0,
      74.69% 0.088vw, 75.99% 0.338vw, 77.25% 0.763vw, 78.45% 1.338vw,
      79.56% 2.069vw, 80.56% 2.931vw, 81.45% 3.919vw, 82.21% 5.013vw,
      100% 34.69vw,   100% 100%,
      0 100%,         0 33.94vw,
      17.36% 5.013vw, 18.11% 3.919vw, 19.00% 2.931vw, 20.01% 2.069vw,
      21.12% 1.338vw, 22.31% 0.763vw, 23.58% 0.338vw, 24.88% 0.088vw);

  /* how far the panel overruns the hero's bottom edge, so overflow:hidden on
     the hero clips it instead of the panel terminating inside the frame */
  --band-bleed:clamp(2rem, 5vw, 5rem);
  /* Dead height carried below the fold so the two chamfers have box to run out
     into and the panel always reaches the fold. It is added to the padding and
     taken straight back out of the margin below, so the hero's height is
     unchanged — nothing moves, the box is just tall enough. */
  --band-tail:clamp(0rem, 30vw, 46rem);
  /* The gold is the same silhouette translated, not a stroke. Solving the
     reference's horizontal gold width against the local edge slope — 21px at
     y=780 where dx/dy is 2.0, 14px at y=840 where it is 0.6 — gives a
     translation of 13px out and 4px up. */
  --rule-x:clamp(5px, 0.547vw, 11px);
  --rule-y:clamp(3px, 0.547vw, 11px);

  position:relative;z-index:1;
  /* Where the band starts. Measured at 1672x941: the reference's flat top edge
     is at y=790 (84.0% of the frame) and its gold at y≈788; this build had them
     at 823 and 820 — 33px of surplus warm ground, which read as a 106px void
     under the feature labels against the reference's 64px. 5.25vw rendered
     84px; 3.05vw lands 51 and takes the whole 33 out. The band still bleeds off
     the fold, so nothing below it moves.
     Re-trimmed by 7px when the header grew from 79 to 87: the band is measured
     off the frame, not off the hero, and 3.05vw would have carried its edge
     from y=789 to y=797 against the reference's 790. */
  margin-block-start:clamp(1.9rem, 2.632vw, 3.5rem);
  /* full bleed: the silhouette is entirely the clip-path's business now, and
     both chamfers have to keep running outward until they leave the frame */
  margin-inline:0;
  /* the extra 1.5rem is slack: it guarantees the hero's min-height, not the
     band's own box, is what decides where the hero ends */
  margin-block-end:calc(-1 * var(--band-bleed) - 1.5rem - var(--band-tail));
  padding-block:clamp(1.5rem, 2.4vw, 2.4rem)
                calc(clamp(2.4rem, 3.6vw, 3.6rem) + var(--band-bleed) + var(--band-tail));
  /* the reference centres its three stats on x=817, not on the frame's 800 */
  padding-inline:0 2.13vw;
  color:var(--on-dark);
}

/* The band is painted by two stacked layers rather than by its own background,
   because the gold has to sit BEHIND the dark panel and a negative z-index
   child paints above its parent's background, not below it. ::before is the
   gold, ::after is the panel; both are negative, so the stats sit above them
   with no z-index of their own. */
.hb-stats::before,
.hb-stats::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  clip-path:var(--band-shape);
}
/* the gold rule is NOT a drawn border. It is the panel's own silhouette moved
   out and up and painted behind it, so the two fuse with zero background
   between them — fat where the panel's edge slants away from it, a hairline
   along the top, and hidden entirely on the far side. */
.hb-stats::before{
  background:var(--rule-gold);
  transform:translate(calc(-1 * var(--rule-x)), calc(-1 * var(--rule-y)));
  z-index:-2;
  /* THE TAPER. Counting gold above the band edge column by column, the
     reference does not run an even rule — it bleeds out along the flat top:
        x=449 ~4.9px · 520 ~4.2 · 570 ~3.2 · 627 ~1.8 · 700 ~1.6
        x=836 through 1264: a single pale blend row, never a solid one
     This build painted a flat, fully saturated 2px at every one of those x, and
     a 14px-wide slab where the edge turns the right corner. A `to bottom` cap
     cannot express any of it: its cut-off is the same height at every x.

     Four layers, composited  H ∩ (WEDGE ∪ (REACH ∩ HAIRLINE)):

       H         overall fade across the frame — full along the flat top,
                 stepped down through the right corner, gone at the far edge.
       WEDGE     the taper. The cap is TILTED: 180.848deg drops the cut line
                 0.0148px per px of x, so the rule stands 4.9px proud at x=449
                 and has closed by x≈780. Angle and offset are both ratios of
                 the frame, so the taper keeps its shape at any width (1.299vw
                 is measured from the gradient's start corner, which for an
                 angle just past 180deg is the box's top inline-start corner).
       REACH     how far past the flat top the hairline may run, so it dies
                 before the corner instead of fattening it.
       HAIRLINE  the ~0.95px blend row the reference carries the whole way out.

     The LEFT chamfer is deliberately untouched by all of this — its gold
     measures 34/30/24/21/17/16/15/15 at y=795…920 against the reference's
     38/31/25/23/19/16/15/15, and that is what --rule-x / --rule-y are fitted
     to. The wedge's cut line has passed below it by x<438, and H holds 1. */
  mask-image:
    linear-gradient(to right, #000 0 73%, rgba(0,0,0,.55) 75.5%,
                    rgba(0,0,0,.14) 78%, rgba(0,0,0,.10) 92%, transparent 99%),
    linear-gradient(180.848deg, transparent 0 1.299vw, #000 1.370vw),
    linear-gradient(to right, #000 0 75%, transparent 78%),
    linear-gradient(to bottom, transparent 0 0.463vw, #000 0.511vw);
  mask-composite:intersect, add, intersect;
  mask-repeat:no-repeat;
}
/* the panel itself — flat petrol dark, as in the reference, which varies by
   barely two units across its whole width */
.hb-stats::after{
  z-index:-1;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--ink-band) 94%, var(--well-teal)) 0 14%,
    var(--ink-band) 34%);
}

.hb-stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  /* Re-measured off the stat groups' own bounding boxes rather than off the
     dividers: the reference's number+star centres sit at 605.5 / 856.5 /
     1099.5 — a 251 / 243 pitch spanning 494 — where a 700px row renders
     618 / 853.5 / 1087.5, a flat 234 spanning 469.5. The row's own centre is
     already right (852.5 against 852.75), so only the measure is wrong:
     740px scales the span to 496 and the pitch to ~248. */
  max-width:min(64%, 740px);margin-inline:auto;
}
.hb-stat{text-align:center;padding-inline:1rem}
.hb-stat + .hb-stat{border-inline-start:1px solid color-mix(in srgb, var(--paper) 24%, transparent)}
.hb-stat-n{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  /* «+500» measures 48px wide in the reference against 61px here — the numeral
     is 23px, not 29. Shrinking it also lifts the label back into register:
     the reference's number ink starts 44px below the band's top edge, and at
     23px this build's starts 44px below its own. */
  font-size:clamp(1.3rem, 1.44vw, 1.7rem);
  font-weight:500;line-height:1.3;
  color:var(--teal);
}
/* order:-1 puts the star first in the RTL row, i.e. on the inline-start (right)
   side of the numeral, as in the reference */
.hb-star{width:1em;height:1em;color:var(--gold);order:-1}
/* Left at the 17px Arabic floor deliberately. The finish note asked for ~14.4px
   here, but the reference does not support it: «فعالية تم تنسيقها» measures 107px
   in the reference against 110px in this build and «منظم وخدمة موثوق» measures
   124px against 124px — the same size, within the 1672→1600 normalisation.
   Shrinking it 18% would have moved AWAY from the reference and below the
   BRAND.md floor at the same time. */
.hb-stat-l{
  margin-block-start:.35rem;
  font-size:1.0625rem;line-height:1.6;
  color:color-mix(in srgb, var(--on-dark) 86%, transparent);
}

/* ------------------------------------------------------------
   7. Motion — transform / opacity only
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .hb-copy > *{animation:hb-rise .72s var(--e-out) both}
  .hb-copy > *:nth-child(2){animation-delay:.06s}
  .hb-copy > *:nth-child(3){animation-delay:.12s}
  .hb-copy > *:nth-child(4){animation-delay:.18s}
  .hb-copy > *:nth-child(5){animation-delay:.24s}

  .hb-mass{animation:hb-fade .9s var(--e-out) both}
  .hb-wires{animation:hb-fade 1s var(--e-out) .35s both}
  .hb-order{animation:hb-lift .85s var(--e-out) .12s both}
  .hb-pcard{animation:hb-lift .8s var(--e-out) both}
  .hb-pcard--1{animation-delay:.28s}
  .hb-pcard--2{animation-delay:.36s}
  .hb-pcard--3{animation-delay:.44s}
  .hb-pcard--4{animation-delay:.52s}
  .hb-pcard--5{animation-delay:.60s}
  .hb-stats{animation:hb-rise .8s var(--e-out) .3s both}
}
@keyframes hb-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes hb-fade{from{opacity:0}}
@keyframes hb-lift{from{opacity:0;transform:translateY(20px) scale(.985)}}

/* ------------------------------------------------------------
   8. Responsive
   ------------------------------------------------------------ */
@media (max-width:1240px){
  .hb-hero{--copy-w:450px}
  .hb-feats li{font-size:.9rem}
  .hb-feat-icon{width:27px;height:27px}
  /* The hero CTA padding above is measured at the 1672 reference frame, where
     the column is 500px wide and the pair renders 461. Here the column drops to
     450 and that pair no longer fits one row, so the padding drops back rather
     than letting the two pills wrap onto separate lines. */
  .hb-actions .btn{padding-inline:var(--s-7)}
  .hb-actions .btn-solid{padding-inline:3.84rem}
}

/* tablet — copy stacks above a full-bleed illustration */
@media (max-width:1000px){
  .hb-hero{padding-block-start:clamp(2rem,5vw,3.5rem);min-height:0}
  .hb-inner{grid-template-columns:1fr;gap:clamp(2.5rem,6vw,4rem)}
  /* stacked, there is no illustration beside the copy to be centred against,
     so the block drop has nothing to correct for */
  .hb-copy{max-width:640px;padding-block-start:0;margin-inline:0;--drop:0px}
  .hb-eyebrow{margin-inline-start:0}
  .hb-lead{max-width:44ch}
  .hb-stage{
    margin-inline-start:calc(-1 * var(--bleed));
    width:calc(100% + 2 * var(--bleed));
    /* stacked, the stage has no column gap to overhang into, so the design box
       has to sit inside it */
    --u:0.1055cqw;
  }
  .hb-feats{max-width:620px}
  .hb-stats-row{max-width:100%}
  /* below the desktop layout the hero has no min-height to defend, so the band
     keeps its full bottom padding and simply bleeds off by --band-bleed —
     plus the tail, which must always be pulled straight back out. Stacked, the
     band is a tall column rather than a wide wedge, so the traced corner is
     dropped for a plain rounded one and the shape goes back to border-radius. */
  .hb-stats{
    --band-shape:none;
    margin-inline:6vw 6vw;
    padding-inline:clamp(1.5rem, 4vw, 4rem);
    margin-block-end:calc(-1 * var(--band-bleed) - var(--band-tail));
    border-start-start-radius:2.5rem;
    border-start-end-radius:2.5rem;
  }
  .hb-stats::before,
  .hb-stats::after{
    border-start-start-radius:inherit;
    border-start-end-radius:inherit;
  }
  .hb-stats::before{
    -webkit-mask-image:linear-gradient(to right, #000 0 88%, transparent 100%);
            mask-image:linear-gradient(to right, #000 0 88%, transparent 100%);
    mask-composite:intersect;
  }
}

/* phone — the illustration reorganises: order card + two provider cards */
@media (max-width:720px){
  .hb-hero{overflow:hidden}

  .hb-title{font-size:clamp(2.35rem, 11vw, 3.2rem)}
  .hb-lead{max-width:38ch}
  /* 50px is the reference's desktop CTA; on a phone the pair is full-width and
     thumb-sized, so core's 52px minimum comes back */
  .hb-actions .btn{--cta-h:52px;flex:1 1 100%;padding-inline:var(--s-5)}
  .hb-actions .btn-solid{padding-inline:var(--s-5)}
  .hb-feats{grid-template-columns:repeat(2,1fr);gap:1.35rem .5rem;max-width:420px}
  .hb-feats li{font-size:.97rem}

  .hb-stage{
    --u:1px;
    /* the cards are in normal flow down here, so the shared block offset that
       positions them against the desktop frame has nothing to correct */
    --lift:0px;
    aspect-ratio:auto;
    display:flex;flex-direction:column;
    gap:1.1rem;
    margin-inline:calc(-1 * var(--bleed));
    padding:2.25rem var(--bleed) 1rem;
    width:auto;
  }

  .hb-wires,
  .hb-mass-rule,
  .hb-pcard--2,
  .hb-pcard--3,
  .hb-pcard--4{display:none}

  /* a reduced dark mass anchors the phone composition instead of the
     full-height desktop form; the traced silhouette is a landscape shape and
     does not survive being squeezed into it, so it reverts to radii here */
  .hb-mass{
    inset-block-start:0;
    inset-inline-end:-34%;
    width:88%;height:56%;
    clip-path:none;
    border-start-start-radius:44% 34%;
    border-end-start-radius:52% 44%;
  }
  .hb-mass .pattern-field,
  .hb-mass-arcs{border-radius:inherit;overflow:hidden}

  .hb-order,
  .hb-pcard{position:static;width:auto;inset:auto}
  .hb-order{order:-1;padding:1.1rem 1.05rem 1.15rem;border-radius:20px}
  .hb-pcard{padding:.7rem .85rem;border-radius:16px;gap:.8rem;align-self:stretch}
  .hb-pcard--1{margin-inline-start:1.6rem}
  .hb-pcard--5{margin-inline-end:1.6rem}

  .hb-well{width:52px;height:52px}
  .hb-well .icon{width:29px;height:29px}
  .hb-ptitle{font-size:1.0625rem}
  .hb-psub{font-size:.95rem}
  .hb-tick{width:17px;height:17px}
  .hb-tick svg{width:10px;height:10px}

  .hb-order-title{font-size:1.125rem}
  .hb-order-icon{width:21px;height:21px}
  .hb-order-ref{font-size:.9rem}
  /* the desktop chip rides on a relative inset measured against the order
     card's own head; stacked, the head is a plain row and it goes back flat */
  .hb-order-pill{font-size:.85rem;padding:.3rem .7rem;inset-block-start:0}
  /* the label-width pitch is a desktop device: on a 390px card the five labels
     overflow, so the phone keeps the equal five-column grid and lets them wrap */
  .hb-track{display:grid;grid-template-columns:repeat(5,1fr);margin-block:1.35rem 1.2rem}
  /* the 60u floor is a desktop device for the space-between pitch; on an equal
     grid it does nothing but threaten to overflow the card below ~380px */
  .hb-step{min-width:0}
  .hb-track::before,.hb-track::after{inset-block-start:12px}
  .hb-dot{width:25px;height:25px;font-size:.8rem;border-radius:9px;box-shadow:0 0 0 1.5px #fff}
  .hb-step.is-next .hb-dot{border-radius:var(--r-pill)}
  .hb-dot svg{width:13px;height:13px}
  .hb-step{gap:.45rem;padding-inline:3px}
  /* .6rem is ~9.6px — under any legibility floor, and the Arabic diacritics
     stop resolving at that size. .75rem wraps «دراسة المتطلبات» onto two lines
     inside a ~62px column, which is why the label reserves two lines' height:
     without it the markers stay level but the labels rag and the row tilts. */
  .hb-step-label{font-size:.75rem;line-height:1.3;min-height:2.6em}
  .hb-sum{padding:.85rem .9rem .8rem;border-radius:14px}
  .hb-sum-title{font-size:1rem;margin-block-end:.6rem}
  .hb-sum-grid{grid-template-columns:1fr;row-gap:.15rem}
  .hb-sum-key{font-size:.97rem}
  /* one column on the phone: the date row's flush-inline-end treatment is a
     two-column device and would strand it on the far side of the panel */
  .hb-sum-key--alt{margin-block-start:.5rem;justify-content:flex-start;
                   gap:.5rem;font-size:.97rem}
  .hb-sum-meta + .hb-sum-meta{text-align:start}
  .hb-sum-icon{width:17px;height:17px}
  .hb-sum-meta{font-size:.9rem}
  .hb-sum-link{font-size:.95rem;margin-block-start:.75rem}
  .hb-sum-link .icon{width:17px;height:17px}

  /* on the phone the band is a stacked column, not a wide horizontal wedge, so
     the traced corner would swallow it — modest circular top corners and no
     tail. The offset gold shape scales itself through --rule-x. */
  .hb-stats{
    --band-shape:none;
    --band-bleed:2rem;
    --band-tail:0rem;
    --rule-x:8px;
    --rule-y:2px;
    margin-inline:1.25rem 1.25rem;
    margin-block-start:clamp(2rem,7vw,2.75rem);
    padding-block:1.6rem calc(2.2rem + var(--band-bleed));padding-inline:1.5rem;
    border-start-start-radius:1.75rem;
    border-start-end-radius:1.75rem;
  }
  .hb-stats-row{grid-template-columns:1fr;gap:0}
  .hb-stat{padding-block:.9rem;padding-inline:0}
  .hb-stat + .hb-stat{
    border-inline-start:0;
    border-block-start:1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  }
  .hb-stat-n{font-size:1.7rem}

  .hb-motif--d,.hb-motif--e,.hb-motif--f,.hb-motif--g{display:none}
  .hb-motif--a{width:20vw;height:20vw;inset-block-start:3%}
  .hb-motif--b{width:15vw;height:15vw;inset-block-start:10%}
  .hb-motif--c{width:12vw;height:12vw;inset-block-start:16%}
}