/* ============================================================
   تبي؟ / Tapai — services.html
   Page-specific sections only. Tokens, buttons, header, footer,
   pattern-field, icons and reveal all come from core.css.

   Ground plan (ink dominant, deep secondary, paper as the breath):
     pagehead ............ --ink        + motif at full section strength
     01–03 band .......... --ink        + one --deep panel inside 02
     04 feature .......... --ink-900    (the page's darkest point)
     05–08 ledger ........ --paper      (a full --section pause)
     كيف نعمل ............ --ink
     من يستفيد ........... --deep
     CTA ................. --paper
   ============================================================ */

:root{
  /* body copy on light grounds — stronger than --on-light-soft so it
     still clears 4.5:1 on --paper, not only on white */
  --svc-body:color-mix(in srgb, var(--ink) 82%, transparent);
  --svc-quiet:color-mix(in srgb, var(--ink) 74%, transparent);
  /* teal that survives small type on a light ground (core --teal is 2.6:1) */
  --svc-accent:color-mix(in srgb, var(--teal) 52%, var(--ink));
  /* teal lifted toward paper so it clears 4.5:1 on --ink / --deep */
  --teal-lift:color-mix(in srgb, var(--teal) 58%, var(--paper));
  --subbar:78px;                       /* matches .site-header min-height */
}

/* band helper: lets a pattern-field sit behind content */
.band{position:relative;overflow:hidden}
.band > .container{position:relative;z-index:1}

/* --- three defensive patches, not redefinitions ------------------------
   (the local skip-link clip is gone — core.css clips it there now)
   1. the shared .nav-toggle glyph is referenced without class="icon", so it
      inherits fill:black / stroke:none and paints nothing. Give it strokes
      so the mobile menu button is actually visible.
   2. core .footer-col a has a 30.6px line box and no vertical padding —
      below the 44px tap-target floor of BRAND §12 at 375. Pad it and pull
      the padding back out with a matching negative margin so the footer
      rhythm is byte-identical to the other pages.
   3. this page opens on a display headline over an --ink ground. The gold
      header pill is the brightest object in that fold and steals first
      fixation from the h1, so on THIS page only it runs as a ghost and
      gold in the fold belongs to the brand mark and its ؟ alone.        */
.nav-toggle svg{fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.footer-col a{display:inline-flex;padding-block:.45rem;margin-block:-.45rem}
/* The header CTA is NOT restyled here any more. These rules set it to
   --on-dark (#F3F6F4) with a --line-dark border, which was right for the old
   dark header and renders white-on-white now that the header is light.
   core.css owns the light header CTA. */

/* ============================================================
   1. Page header — the h1, and nothing that repeats the index below.
   The old fold printed all eight service names here and again in the
   sticky row 40px later. The names now appear once, in the index,
   and this block is short enough that service 01 lands in the fold.
   ============================================================ */
.pagehead{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--on-dark);
  padding-block:clamp(2.25rem,3.4vw,3rem) clamp(2.5rem,4vw,3.75rem);
}
.pagehead > .container{position:relative;z-index:1}
/* finer grain than the 460px default so the motif stays texture and never
   competes with the display headline sitting on top of it. Base .10 — the
   page's other three fields run .06, this one is meant to be seen. */
.pagehead > .pattern-field{background-size:380px 380px}

.crumbs{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--fs-label);color:var(--on-dark-soft);
  margin-block-end:clamp(2rem,3.4vw,3rem);
}
/* negative margin keeps the row height while the tap target reaches 44px */
.crumbs a{
  padding-block:.65rem;margin-block:-.65rem;
  transition:color var(--t-fast) var(--e-soft);
}
.crumbs a:hover{color:var(--gold)}
.crumbs .icon{width:16px;height:16px;opacity:.45}
.crumbs [aria-current]{color:var(--on-dark)}

.pagehead-grid{
  display:grid;align-items:end;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3.5rem);
}
.pagehead-title{
  /* one notch under core's display so the index and service 01 clear the
     fold — the headline is still the loudest thing on the screen */
  font-size:clamp(2.5rem,5.5vw,4.6rem);
  line-height:var(--lh-display);
  color:var(--on-dark);
  max-width:15ch;
}
/* the second voice: body size, hung off a rule, bottom-aligned to the
   headline's last baseline so the fold reads as one composed block */
.pagehead-sub{
  padding-block:var(--s-4) .4rem;
  border-block-start:2px solid color-mix(in srgb,var(--paper) 32%,transparent);
  max-width:42ch;
  font-size:var(--fs-body);
  color:color-mix(in srgb,var(--paper) 70%,transparent);
}

/* ============================================================
   2. The index — a working anchor-nav, not a label row.
   It marks the block you are inside and fills a hairline as you
   travel the eight. The eight names live here and nowhere else.
   ============================================================ */
.svc-stack{position:relative}

.svc-index{
  --idx-pad:clamp(.55rem,1.15vw,.95rem);
  position:sticky;inset-block-start:var(--subbar);z-index:50;
  background:var(--ink-900);
  border-block:1px solid var(--line-dark);
}
/* travelled distance, filled from the RTL start edge */
.svc-progress{
  position:absolute;inset-block-start:0;inset-inline:0;
  block-size:2px;
  background:linear-gradient(to left,var(--teal),var(--teal-lift));
  transform:scaleX(var(--spy,0));
  transform-origin:100% 50%;
}
.svc-index .container{
  display:flex;align-items:stretch;flex-wrap:wrap;
}
.svc-index a{
  position:relative;
  display:inline-flex;align-items:center;
  min-block-size:58px;
  font-size:var(--fs-body);
  padding-inline:var(--idx-pad);
  color:var(--on-dark-soft);
  transition:color var(--t-fast) var(--e-soft);
}
.svc-index a:first-child{padding-inline-start:0}
/* a short centred hairline, not a full-height rule — this must read as a
   line of text links, not a row of table cells */
.svc-index a + a::before{
  content:"";position:absolute;
  inset-inline-start:0;inset-block-start:50%;
  inline-size:1px;block-size:17px;margin-block-start:-9px;
  background:var(--line-dark);
}
/* the row states the hierarchy on weight and colour only — every link
   stays at the 17px Arabic floor */
.svc-index .is-core{font-weight:500;color:var(--on-dark)}
.svc-index .is-support{font-weight:400;color:var(--on-dark-soft)}
.svc-index a:nth-child(5){margin-inline-start:var(--s-5)}
.svc-index a:hover{color:var(--gold)}

/* where you are: the name goes gold and takes the marker under it */
.svc-index a.is-active{color:var(--gold);font-weight:500}
.svc-index a.is-active::after{
  content:"";position:absolute;
  inset-block-end:0;
  inset-inline:var(--idx-pad);
  block-size:3px;
  border-start-start-radius:3px;border-start-end-radius:3px;
  background:var(--gold);
}
.svc-index a:first-child.is-active::after{inset-inline-end:var(--idx-pad);inset-inline-start:0}

/* ============================================================
   3. Service bands — three distinct rhythms, not one
   ============================================================ */
.svc-band{position:relative;overflow:hidden}
.svc-band > .container{position:relative;z-index:1}

.svc-band--core{
  background:var(--ink);color:var(--on-dark);
  padding-block:clamp(4rem,7.4vw,7rem);
  --svc-gap:clamp(3.5rem,7vw,7rem);
}
.svc-band--feature{
  background:var(--ink-900);color:var(--on-dark);
  padding-block:clamp(6rem,12vw,11rem);
}

/* ---- the block ----
   column spans are driven by custom properties so the breakpoints
   only have to restate four numbers instead of eight selectors      */
.svc{
  --head-start:1; --head-span:6;
  --cov-start:8;  --cov-span:5;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--s-6) clamp(1.5rem,2.6vw,2.5rem);
  align-items:start;
  scroll-margin-block-start:150px;
}
.svc--flip{--head-start:7;--cov-start:1}
.svc-head{grid-row:1;grid-column:var(--head-start) / span var(--head-span)}
.svc-covers,.svc-esc{grid-row:1;grid-column:var(--cov-start) / span var(--cov-span)}

.svc + .svc{
  margin-block-start:var(--svc-gap);
  padding-block-start:var(--svc-gap);
  border-block-start:1px solid var(--line-dark);
}

/* ---- shared head parts ---- */
.svc-top{display:flex;align-items:center;gap:var(--s-5);margin-block-end:var(--s-5)}

/* the wells carry the brand's eight icons at dignified size, so they have
   to be legible on their own ground: a teal disc with a 2.2:1 ring and a
   lifted-teal glyph that clears 4.5:1 on both --ink and --ink-900.
   (core's gold override only fires under .surface-ink, which these bands
   deliberately are not — they carry their own darker grounds.)          */
.svc-well{
  width:92px;height:92px;
  background:color-mix(in srgb,var(--teal) 18%,transparent);
  border:1.5px solid color-mix(in srgb,var(--teal) 55%,transparent);
  color:var(--teal-lift);
}
.svc-well .icon{width:44px;height:44px;stroke-width:1.5}
.svc-well--sm{width:64px;height:64px}
.svc-well--sm .icon{width:30px;height:30px}

/* the counting device — 3.4:1 on --ink at 56px, so it actually registers */
.svc-num{
  font-size:clamp(2.5rem,4.2vw,3.5rem);
  font-weight:700;line-height:1;
  color:color-mix(in srgb,var(--paper) 44%,transparent);
}
.svc-num--sm{font-size:clamp(1.5rem,2vw,1.8rem)}
.svc-kicker{
  display:block;font-size:var(--fs-label);font-weight:500;
  color:var(--teal-lift);margin-block-end:var(--s-2);
}
.svc-title{
  font-size:clamp(1.55rem,2.5vw,2.2rem);
  line-height:1.3;max-width:21ch;color:var(--on-dark);
}
.svc-lede{
  margin-block-start:var(--s-4);
  max-width:54ch;color:var(--on-dark-soft);
}

/* ---- 01 — head + narrow ruled column, then a full-width route rail.
        The rail is the day itself laid out end to end, and it is the only
        horizontal sequence on the page: 03 runs a vertical ladder, 04 a
        site plan, «كيف نعمل» a descending rail. No two repeat.        ---- */
.route{
  grid-row:2;grid-column:1 / -1;
  margin-block-start:clamp(2rem,3.4vw,3rem);
  padding-block-start:clamp(1.5rem,2.6vw,2.25rem);
  border-block-start:1px solid var(--line-dark);
}
.route-label{
  font-size:var(--fs-body);font-weight:500;line-height:1.6;
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  margin-block-end:clamp(1.75rem,2.8vw,2.5rem);
}
.route-line{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.route-line li{
  position:relative;
  padding-block-start:clamp(1.1rem,1.9vw,1.5rem);
  padding-inline-end:var(--s-5);
  border-block-start:2px dashed color-mix(in srgb,var(--teal) 48%,transparent);
}
/* the stop sits on the rule at the start edge of its own leg */
.route-line li::before{
  content:"";position:absolute;
  inset-block-start:-7px;inset-inline-start:0;
  inline-size:13px;block-size:13px;border-radius:var(--r-pill);
  background:var(--teal-lift);
}
/* the terminus is hollow, and the rail is capped so it ends rather than
   simply running out of page */
.route-line li.is-end::before{
  background:var(--ink);
  border:2.5px solid var(--teal-lift);
}
.route-line li.is-end::after{
  content:"";position:absolute;
  inset-block-start:-8px;inset-inline-end:0;
  inline-size:2px;block-size:15px;border-radius:2px;
  background:color-mix(in srgb,var(--teal) 48%,transparent);
}
.route-t{
  display:block;font-size:var(--fs-body);line-height:1.6;
  color:var(--on-dark);max-width:17ch;
}

/* ---- 03 — the ladder: three rungs that step inward and darken as the
        case escalates. Deliberately not a checklist, and not a mirror of
        01: this block's support column is a sequence, not an inventory. */
.esc{display:flex;flex-direction:column}
.esc li{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--s-4);row-gap:.1rem;
  padding:var(--s-4) clamp(1rem,1.7vw,1.35rem);
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--paper) 4%,transparent);
  border:1px solid var(--line-dark);
}
.esc li + li{
  margin-block-start:var(--s-3);
  margin-inline-start:clamp(.75rem,1.6vw,1.5rem);
}
.esc li:nth-child(2){background:color-mix(in srgb,var(--paper) 7%,transparent)}
.esc li:nth-child(3){
  background:color-mix(in srgb,var(--teal) 15%,transparent);
  border-color:color-mix(in srgb,var(--teal) 40%,transparent);
}
.esc-n{
  grid-row:1 / span 2;
  inline-size:30px;block-size:30px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--teal) 22%,transparent);
  color:var(--teal-lift);font-weight:500;font-size:var(--fs-body);line-height:1;
}
.esc li:nth-child(3) .esc-n{background:var(--gold);color:var(--ink)}
.esc-t{
  grid-column:2;font-weight:500;font-size:var(--fs-body);line-height:1.6;
  color:var(--on-dark);
}
.esc-d{
  grid-column:2;font-size:var(--fs-body);line-height:1.7;
  color:var(--on-dark-soft);
}

/* ---- 02 — the compressed form: small well, no checklist, one panel ---- */
.svc--inline{
  --head-start:1;--head-span:7;--cov-start:8;--cov-span:5;
  --svc-gap:clamp(2.25rem,3.6vw,3.25rem);
  border-block-start:0;
}
.svc--inline .svc-top{gap:var(--s-4);margin-block-end:var(--s-4)}
.svc--inline .svc-title{font-size:clamp(1.4rem,2.05vw,1.85rem);max-width:26ch}
.svc--inline .svc-lede--tight{
  grid-row:1;grid-column:var(--cov-start) / span var(--cov-span);
  align-self:end;margin-block-start:0;max-width:42ch;
}

/* the page's only --deep surface before «من يستفيد».
   Two zones: the strip runs the inline-start measure, and the quarter it
   used to leave bare is now a closed decorative end-cap. */
.svc-panel{
  --motif-min:clamp(112px,11vw,168px);
  --motif-gap:clamp(1.5rem,2.6vw,2.25rem);
  --panel-pad-i:clamp(1.35rem,2.4vw,2rem);
  --panel-pad-b:clamp(1.9rem,3.4vw,2.75rem);
  grid-row:2;grid-column:1 / -1;
  position:relative;overflow:hidden;
  margin-block-start:clamp(1.5rem,2.6vw,2.25rem);
  padding-block:var(--panel-pad-b);
  padding-inline:var(--panel-pad-i);
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--deep) 55%,transparent);
  /* the strip takes exactly its own measure; the end-cap takes the rest,
     so the two meet at one edge instead of drifting apart */
  display:grid;
  grid-template-columns:minmax(0,max-content) minmax(var(--motif-min),1fr);
  column-gap:var(--motif-gap);
  align-items:center;
}
/* BRAND §6 allows full strength only inside a small decorative panel, never
   behind body copy — so the motif is fenced into the end-cap, bled to the
   panel's edges, and a hairline states the join. Fewer, larger squircles,
   with the negative space §6 asks for. Nothing but the panel's own ground
   sits under a letterform. */
.svc-panel > .motif-panel{
  position:relative;inset:auto;
  align-self:stretch;
  margin-block:calc(-1 * var(--panel-pad-b));
  margin-inline-end:calc(-1 * var(--panel-pad-i));
  opacity:.32;
  background-size:190px 190px;
  background-position:center;
  border-inline-start:1px solid var(--line-dark);
}
.svc-strip{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.4rem clamp(1rem,2vw,1.75rem);
  color:var(--on-dark);
}
/* teal, not gold: the end-cap's motif already spends this block's gold, and
   teal keeps the separators quieter than the phrases they divide */
.strip-sep{color:var(--teal-lift);opacity:.7}

/* ---- 04 — the feature ---- */
.svc--feature{--head-start:1;--head-span:5;--fig-start:6;--fig-span:7}
.svc--feature .svc-title{font-size:clamp(1.85rem,3.2vw,2.8rem);max-width:15ch}
.svc--feature .svc-well{width:104px;height:104px}
.svc--feature .svc-well .icon{width:50px;height:50px}
.svc--feature .svc-kicker{color:var(--gold)}
.svc-fig{grid-row:1;grid-column:var(--fig-start) / span var(--fig-span);align-self:start}
.svc--feature .svc-covers{
  grid-row:2;grid-column:1 / -1;
  margin-block-start:clamp(2.25rem,3.8vw,3.5rem);
}

/* ============================================================
   4. “ما يشمله” — different form and different length each time
   ============================================================ */
.covers-label{
  /* 17px / 1.6 — 15px at 1.32 clipped Arabic ascenders, and 62% paper
     on --ink only reached 3.9:1 */
  font-size:var(--fs-body);font-weight:500;line-height:1.6;
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  margin-block-end:var(--s-4);
}
.covers li{display:flex;align-items:flex-start;gap:var(--s-4)}
.covers li .icon{
  width:20px;height:20px;flex:none;
  color:var(--teal-lift);margin-block-start:6px;
}
/* balance keeps short list items from dropping a single orphan word */
.covers li span{color:var(--on-dark);text-wrap:balance}

/* a. editorial rule — 01, four items in a narrow side column */
.covers--rule ul{border-block-start:2px solid color-mix(in srgb,var(--paper) 45%,transparent)}
.covers--rule li{padding-block:var(--s-4);border-block-end:1px solid var(--line-dark)}

/* b. ruled index — 04, a wide rack: one lead line at lead size across the
      full measure, then four supports in two ruled columns. No boxes: the
      rule is the structure, the same idea as 01 opened out to full width. */
.covers--index ul{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.75rem,3.4vw,3.5rem);
  border-block-start:2px solid color-mix(in srgb,var(--paper) 45%,transparent);
}
.covers--index li{
  padding-block:var(--s-4);
  border-block-end:1px solid var(--line-dark);
  align-items:baseline;
}
.covers--index li:first-child{
  grid-column:1 / -1;
  padding-block:var(--s-5);
}
.covers--index li:first-child span{
  font-size:var(--fs-lead);line-height:1.55;max-width:46ch;
}
.covers--index li:first-child .icon{
  width:24px;height:24px;color:var(--gold);margin-block-start:0;
  align-self:flex-start;
}

/* ============================================================
   5. The site plan — a built object, not a stock illustration
   ============================================================ */
.plan-fig{margin:0}
.plan{inline-size:100%;block-size:auto}

/* opaque floor: stops the band's pattern-field bleeding through the venue */
.plan-ground{fill:var(--ink)}
.plan-tint{fill:var(--teal);fill-opacity:.06}
.plan-wall{fill:none;stroke:var(--teal);stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
/* the copy promises three zones of responsibility — so they have to be
   visible: 2.9:1 for the dividers, 4.5:1 for the markers, 8:1 numerals */
.plan-zone{fill:none;stroke:var(--paper);stroke-opacity:.38;
  stroke-width:1.15;stroke-dasharray:3 7}
.plan-zdot{fill:none;stroke:var(--paper);stroke-opacity:.45;stroke-width:1.25}
.plan-znum{fill:var(--paper);fill-opacity:.85;font-size:17px;font-weight:500;
  font-family:inherit}
.plan-stage{fill:var(--teal);fill-opacity:.14;
  stroke:var(--teal);stroke-opacity:.45;stroke-width:1.25}
.plan-block{fill:var(--teal);fill-opacity:.05;
  stroke:var(--teal);stroke-opacity:.38;stroke-width:1.25}
.plan-queue{fill:none;stroke:var(--teal);stroke-width:1.75;
  stroke-dasharray:5 8;stroke-linecap:round}
.plan-gate{fill:none;stroke:var(--paper);stroke-opacity:.8;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan-post{fill:var(--paper);fill-opacity:.85}
.plan-jamb{fill:none;stroke:var(--paper);stroke-opacity:.55;
  stroke-width:2;stroke-linecap:round}
.plan-endpt{fill:var(--teal);fill-opacity:.85}
.plan-exit{fill:none;stroke:var(--paper);stroke-opacity:.6;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.plan-amb-ring{fill:none;stroke:var(--gold);stroke-opacity:.6;
  stroke-width:1.25;stroke-dasharray:4 5}
.plan-amb{fill:none;stroke:var(--gold);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round}

.plan-key{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-2) clamp(1rem,2vw,1.5rem);
  margin-block-start:clamp(1.25rem,2.2vw,1.75rem);
  padding-block-start:var(--s-4);
  border-block-start:1px solid var(--line-dark);
}
.plan-key li{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--fs-body);line-height:1.6;
  color:color-mix(in srgb,var(--paper) 72%,transparent);
}
/* the key is drawn, not approximated: each swatch is a small SVG carrying the
   plan's own classes, so a legend entry and the mark it names are the same
   object at the same stroke weight. A bar would have read as the wall — the
   only solid rule in the drawing. */
.key-mark{inline-size:32px;block-size:20px;flex:none}
/* the only concession to scale: over a 22-unit run the drawing's 5/8 dash
   lands twice and reads as two blobs, so the swatch keeps the colour, cap
   and weight and tightens the rhythm to three */
.key-mark .plan-queue{stroke-dasharray:5 6}

.fig-cap{
  margin-block-start:var(--s-4);
  font-size:var(--fs-body);line-height:1.6;
  color:color-mix(in srgb,var(--paper) 60%,transparent);
  max-width:44ch;
}

/* ============================================================
   6. 05–08 — the support ledger, beside the app itself
   ============================================================ */
.ledger-sec{
  background:var(--paper);color:var(--on-light);
  /* the page's single light band gets the full section measure — it is a
     deliberate pause between two dark slabs, not a gap between them */
  padding-block:var(--section);
  --ledger-gap:clamp(2.5rem,4.5vw,4.5rem);
}
.ledger-sec .eyebrow{color:var(--svc-accent)}
.ledger-grid{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:var(--ledger-gap);
}
.sec-head--tight{margin-block-end:clamp(1.5rem,2.6vw,2.25rem);max-width:26ch}
.sec-head--tight h2{color:var(--ink)}

.ledger{border-block-start:1px solid color-mix(in srgb,var(--ink) 26%,transparent)}
.ledger-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,9fr);
  gap:var(--s-2) clamp(1.25rem,2.6vw,2.25rem);
  padding-block:clamp(1.1rem,1.8vw,1.6rem);
  border-block-end:1px solid var(--line-light);
  scroll-margin-block-start:150px;
}
.ledger-row dt{
  font-size:clamp(1.2rem,1.55vw,1.45rem);
  font-weight:700;line-height:1.4;color:var(--ink);
}
.ledger-row dd{margin:0;color:var(--svc-body)}

/* the four rows are not four equal rows: 05 opens with more weight,
   07 is the one the phone illustrates, 08 breaks into its three pins */
.ledger-row.is-lead{padding-block:clamp(1.4rem,2.3vw,2rem)}
.ledger-row.is-lead dt{font-size:clamp(1.4rem,1.95vw,1.8rem)}
.ledger-row.is-lead dd{font-size:clamp(1.0625rem,1.2vw,1.2rem);line-height:1.7}

.pins{
  display:flex;flex-wrap:wrap;gap:var(--s-2) clamp(1rem,1.8vw,1.5rem);
  margin-block-start:var(--s-3);
}
.pins li{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-body);line-height:1.6;color:var(--svc-quiet);
}
.pins li::before{
  content:"";inline-size:8px;block-size:8px;flex:none;
  border-radius:var(--r-pill);
  border:2px solid var(--svc-accent);
}
/* the one row the phone illustrates — tinted, and physically tied to the
   figure by a rule that crosses the column gap and lands on the frame */
.ledger-row.is-tied{
  background:color-mix(in srgb,var(--teal) 8%,transparent);
  margin-inline:calc(var(--s-4) * -1);
  padding-inline:var(--s-4);
  border-radius:var(--r-sm);
}
.ledger-row.is-tied dt{color:var(--svc-accent)}
.ledger-row.is-tied::after{
  content:"";position:absolute;
  inset-block-start:50%;
  inset-inline-end:calc(-1 * (var(--ledger-gap) - var(--s-4)));
  inline-size:calc(var(--ledger-gap) - var(--s-4));block-size:1px;
  background:linear-gradient(to left,
    color-mix(in srgb,var(--teal) 65%,transparent),
    color-mix(in srgb,var(--teal) 20%,transparent));
}

/* ---- the phone: a built object with real Arabic in it ---- */
.phone-fig{margin:0}
.phone{
  inline-size:min(340px,100%);
  margin-inline:auto;
  /* 560, not 640 — at 640 the thread pinned four short items to the floor
     and left ~170px of dead screen that read as a failed component */
  aspect-ratio:340 / 560;
  position:relative;
  padding:9px;
  border-radius:46px;
  background:var(--ink);
  box-shadow:var(--sh-lg);
}
.phone-notch{
  position:absolute;inset-block-start:17px;inset-inline:0;
  margin-inline:auto;z-index:2;
  inline-size:92px;block-size:6px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 18%,transparent);
}
.phone-screen{
  block-size:100%;border-radius:38px;overflow:hidden;
  background:var(--ink-900);
  display:flex;flex-direction:column;
  padding-block:34px var(--s-4);
  padding-inline:var(--s-4);
}
.ph-top{padding-block-end:var(--s-3);border-block-end:1px solid var(--line-dark)}
.ph-title{font-size:var(--fs-body);font-weight:500;line-height:1.55;color:var(--on-dark)}
.ph-sub{font-size:var(--fs-label);line-height:1.6;
  color:color-mix(in srgb,var(--paper) 55%,transparent)}

.ph-thread{
  flex:1;min-block-size:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--s-3);padding-block-start:var(--s-4);
}
.ph-day{
  align-self:center;
  font-size:var(--fs-label);line-height:1.6;
  color:color-mix(in srgb,var(--paper) 62%,transparent);
}
.ph-msg{
  max-inline-size:88%;
  padding-block:.55rem .7rem;padding-inline:var(--s-4);
  border-radius:20px;
  font-size:var(--fs-body);line-height:1.6;color:var(--on-dark);
}
/* the two speakers have to separate at thumbnail size */
.ph-in{
  background:color-mix(in srgb,var(--paper) 8%,transparent);
  border-start-start-radius:7px;
}
.ph-out{
  background:var(--deep);
  margin-inline-start:auto;
  border-start-end-radius:7px;
}
.ph-file{
  display:flex;align-items:center;gap:var(--s-3);
  padding-block:.6rem;padding-inline:var(--s-4);
  border-radius:14px;
  border:1px solid var(--line-dark);
  background:color-mix(in srgb,var(--paper) 5%,transparent);
  font-size:var(--fs-label);line-height:1.6;
  color:color-mix(in srgb,var(--paper) 72%,transparent);
}
.ph-file .icon{width:19px;height:19px;color:var(--teal-lift)}
.ph-time{
  align-self:center;
  font-size:var(--fs-label);line-height:1.7;
  padding-block:.05rem .15rem;padding-inline:.75rem;
  border-radius:var(--r-pill);
  color:var(--teal-lift);
  background:color-mix(in srgb,var(--teal) 16%,transparent);
}
.ph-bar{margin-block-start:var(--s-4);display:flex;align-items:center;gap:var(--s-3)}
.ph-field{
  flex:1;block-size:38px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 7%,transparent);
  border:1px solid var(--line-dark);
}
/* the arrow already points left, which is “send” in RTL */
.ph-send{
  inline-size:38px;block-size:38px;flex:none;
  border-radius:var(--r-pill);background:var(--gold);
  display:grid;place-items:center;color:var(--ink);
}
.ph-send .icon{width:18px;height:18px}
.phone-fig .fig-cap{
  inline-size:min(340px,100%);margin-inline:auto;
  color:var(--svc-quiet);
}

/* ============================================================
   7. كيف نعمل — one long opening beat, then a descending rail
   The five steps are deliberately NOT five equal cells: 01 is a wide
   statement with its own 64px node, 02–04 are dots on a vertical line
   carrying a label and one short line each, 05 closes it in gold.
   ============================================================ */
.sec-head{max-width:60ch;margin-block-end:clamp(2.5rem,4.6vw,4rem)}
.sec-head .lead{margin-block-start:var(--s-4)}

.flow{
  --node:64px;
  --flow-col:clamp(2.5rem,5vw,5rem);
  --flow-row:clamp(1.75rem,3vw,2.5rem);
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:var(--flow-col);
  row-gap:var(--flow-row);
}
.flow-step{position:relative}
.flow-step--lead{grid-column:1;grid-row:1 / span 4}
.flow-step:not(.flow-step--lead){grid-column:2}

/* every step shares one node column, so all node centres sit on one axis */
.flow-step:not(.flow-step--lead){
  display:grid;
  grid-template-columns:var(--node) minmax(0,1fr);
  column-gap:var(--s-5);
  align-items:start;
}
.flow-step:not(.flow-step--lead) .flow-node{grid-column:1;grid-row:1 / span 2}
.flow-step:not(.flow-step--lead) h3{grid-column:2;grid-row:1}
.flow-step:not(.flow-step--lead) p{grid-column:2;grid-row:2}

.flow-node{
  position:relative;z-index:1;
  inline-size:var(--node);block-size:var(--node);
  display:grid;place-items:center;flex:none;
}
/* 02–04: a 12px dot sitting on the rail, not a fourth identical bead */
.flow-node::before{
  content:"";inline-size:12px;block-size:12px;
  border-radius:var(--r-pill);background:var(--teal);
}
/* 01 and 05: the bookends carry the full 64px well and the numeral */
.flow-node--big{
  border-radius:var(--r-pill);
  background:var(--ink-700);
  border:1.5px solid color-mix(in srgb,var(--teal) 55%,transparent);
  color:var(--on-dark);font-weight:500;font-size:1.25rem;line-height:1;
}
.flow-node--big::before{display:none}
.flow-step--end .flow-node--big{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
}

/* the beats: a 17px label with a hanging numeral, and one short line.
   flex gap, not a margin — the numeral span carries dir="ltr", so a logical
   margin on it would resolve against the wrong axis. */
.flow-step h3{
  display:flex;align-items:baseline;gap:var(--s-3);
  font-size:1.0625rem;font-weight:500;
  margin-block-end:var(--s-2);color:var(--on-dark);
}
.flow-n{color:var(--teal-lift);font-weight:500;flex:none}
.flow-step p{color:var(--on-dark-soft);text-wrap:balance;max-width:40ch}

/* the lead: a wide opening statement with a bigger voice */
.flow-step--lead .flow-node{margin-block-end:var(--s-5)}
.flow-step--lead h3{
  display:block;
  font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1.3;margin-block-end:var(--s-3);
}
.flow-step--lead p{max-width:38ch}
/* the terminus gets a slightly louder label so the rail closes rather than
   simply stopping — 01 opens loud, 02–04 are beats, 05 lands */
.flow-step--end h3{font-size:clamp(1.15rem,1.5vw,1.35rem)}

/* --- the rail. Two segments, one L:
   the lead's arm runs from its node centre across the column gap to the
   rail axis; each rail step's segment runs down to the next node centre.
   Both are exactly “100% + the matching gap”.                          */
.flow-step--lead::after,
.flow-step:not(.flow-step--lead):not(:last-child)::after{
  content:"";position:absolute;border-radius:2px;
  background:color-mix(in srgb,var(--teal) 55%,transparent);
}
.flow-step--lead::after{
  inset-block-start:calc(var(--node) / 2 - 1px);
  inset-inline-start:calc(var(--node) / 2);
  inline-size:calc(100% + var(--flow-col));block-size:2px;
}
.flow-step:not(.flow-step--lead):not(:last-child)::after{
  inset-block-start:calc(var(--node) / 2);
  inset-inline-start:calc(var(--node) / 2 - 1px);
  inline-size:2px;block-size:calc(100% + var(--flow-row));
}

/* ============================================================
   8. من يستفيد — four cases, four treatments.
   Not a 2×2 of equal cards wearing a column split as a disguise:
     1 منظمو الفعاليات — a heavy ink-900 slab, the biggest voice
     2 الجهات الحكومية — a paper sheet, the only light object here
     3 المنشآت        — no box at all, a ruled entry across the measure
     4 الأفراد        — a wide statement at display-adjacent size
   Different grounds, different type scales, different silhouettes.
   ============================================================ */
.aud{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(2rem,3.6vw,3.5rem) clamp(1.25rem,2vw,1.75rem);
}
/* the one line every case ends on, so the four still read as one set */
.aud-need{font-size:var(--fs-body);line-height:1.7}
.aud-need b{font-weight:500;color:var(--teal-lift)}
.aud-need b::after{content:" — "}

.aud-icon{
  width:32px;height:32px;fill:none;stroke:var(--teal-lift);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;
}

/* ---- 1. the slab ---- */
.aud-lead{
  grid-column:span 7;
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:clamp(1.9rem,3vw,2.9rem);
  border-radius:var(--r-lg);
  background:var(--ink-900);color:var(--on-dark);
  box-shadow:var(--sh-lg);
}
.aud-lead-top{
  display:flex;align-items:center;gap:var(--s-4);
  padding-block-end:var(--s-4);
  border-block-end:1px solid var(--line-dark);
}
.aud-glyph{
  width:46px;height:46px;fill:none;stroke:var(--gold);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.aud-tag{font-size:var(--fs-body);font-weight:500;color:var(--gold)}
.aud-lead h3{font-size:clamp(1.6rem,2.7vw,2.35rem);color:var(--on-dark)}
.aud-lead p{color:var(--on-dark-soft);max-width:52ch}
.aud-lead .aud-need{
  margin-block-start:auto;padding-block-start:var(--s-4);
  border-block-start:1px solid var(--line-dark);
}
.aud-lead .aud-need b{color:var(--gold)}

/* ---- 2. the sheet: their need is paper, so it is drawn as paper ---- */
.aud-doc{
  grid-column:span 5;
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:clamp(1.6rem,2.4vw,2.15rem);
  border-radius:var(--r-md);
  background:var(--paper);color:var(--ink);
  box-shadow:var(--sh-lg);
}
.doc-head{
  display:flex;align-items:center;gap:var(--s-3);
  padding-block-end:var(--s-3);
  border-block-end:2px solid var(--line-light);
  font-size:var(--fs-body);font-weight:500;line-height:1.6;
  color:var(--svc-accent);
}
.doc-head .icon{width:22px;height:22px;color:var(--svc-accent)}
.aud-doc h3{font-size:clamp(1.25rem,1.8vw,1.55rem);color:var(--ink)}
.doc-body{color:var(--svc-body)}
/* three ruled entries — the file the copy actually describes */
.doc-lines{margin-block-start:calc(var(--s-2) * -1)}
.doc-lines li{
  display:flex;align-items:center;gap:var(--s-3);
  padding-block:var(--s-3);
  border-block-end:1px solid var(--line-light);
  color:var(--svc-body);line-height:1.6;
}
.doc-lines li::before{
  content:"";inline-size:9px;block-size:9px;flex:none;
  border-radius:3px;background:var(--svc-accent);
}
.aud-doc .aud-need{margin-block-start:auto;color:var(--svc-body)}
.aud-doc .aud-need b{color:var(--svc-accent)}

/* ---- 3. the ruled entry: no ground, no border, no box ---- */
.aud-row{
  grid-column:span 12;
  display:grid;align-items:start;
  grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3.2fr);
  gap:var(--s-4) clamp(1.5rem,3vw,3rem);
  padding-block-start:clamp(1.25rem,2.2vw,1.85rem);
  border-block-start:2px solid color-mix(in srgb,var(--paper) 38%,transparent);
}
.aud-row-id{display:flex;align-items:center;gap:var(--s-4)}
.aud-row-id h3{font-size:clamp(1.3rem,1.9vw,1.6rem);color:var(--on-dark)}
.aud-row > p{color:var(--on-dark-soft)}

/* ---- 4. the statement: the widest voice, and the single gold word ---- */
.aud-say{
  grid-column:span 12;
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.75rem,3.4vw,4rem);
  padding-block-start:clamp(1.5rem,3vw,2.5rem);
}
.aud-say-t{
  font-size:clamp(1.4rem,2.5vw,2.1rem);
  line-height:1.5;font-weight:500;
  color:var(--on-dark);max-width:22ch;
}
.aud-hl{color:var(--gold)}
.aud-say-foot{display:flex;flex-direction:column;gap:var(--s-4)}
.aud-say-foot > p{color:var(--on-dark-soft);max-width:52ch}

/* ============================================================
   9. CTA — an ink card floating on paper
   ============================================================ */
.cta-sec{background:var(--paper);padding-block:var(--section)}
.cta-card{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  /* light originates top-right — the RTL reading entry */
  background:linear-gradient(to bottom left,var(--deep),var(--ink) 62%);
  color:var(--on-dark);
  padding:clamp(2.25rem,4.6vw,4rem);
  box-shadow:var(--sh-lg);
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:var(--s-6) clamp(2rem,5vw,5rem);
}
/* BRAND §6 allows full-strength pattern only in a small panel — at
   1200×390 it reads as polka, so: soft opacity and a halved blob scale */
.cta-card > .pattern-field{z-index:0;background-size:230px 230px}
.cta-card .eyebrow{color:var(--gold)}
.cta-card .muted{color:var(--on-dark-soft)}
/* .btn-ghost only flips to light inside .surface-ink / .surface-deep in core —
   this card carries its own gradient, so restate it here */
.cta-card .btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.cta-card .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
/* .reveal lives on the two children, never on the card: the conversion
   block's ground must paint even if the observer never fires */
.cta-text,.cta-actions{position:relative;z-index:1}
.cta-text h2{max-width:15ch;color:var(--on-dark)}
.cta-text .lead{margin-block-start:var(--s-4);color:var(--on-dark-soft)}
/* align-items:start makes the buttons hug their labels instead of
   stretching into 400px slabs — one alignment edge down the column */
.cta-actions{display:flex;flex-direction:column;align-items:start;gap:var(--s-4)}
.cta-mail{
  margin-block-start:var(--s-2);text-align:start;
  color:var(--on-dark-soft);font-size:var(--fs-body);
}
.cta-mail a{
  /* padding + matching negative margin: 44px tap target, unchanged rhythm */
  display:inline-block;padding-block:.4rem;margin-block:-.4rem;
  color:var(--gold);
  border-block-end:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  transition:border-color var(--t-fast) var(--e-soft);
}
.cta-mail a:hover{border-block-end-color:var(--gold)}

/* ============================================================
   10. Responsive
   ============================================================ */
@media (max-width:1180px){
  .ledger-grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  .ledger-row{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}
  .pagehead-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}

  /* below this the strip needs the whole measure, so there is no bare
     quarter left to decorate: the end-cap retires and the motif steps back
     to the 6–14% background strength BRAND §6 allows behind copy */
  .svc-panel{grid-template-columns:minmax(0,1fr);column-gap:0}
  .svc-panel > .motif-panel{
    position:absolute;inset:0;margin:0;
    opacity:.10;
    background-size:260px 260px;
    border-inline-start:0;
  }
}

@media (max-width:1080px){
  .svc{--head-start:1;--head-span:7;--cov-start:8;--cov-span:5}
  .svc--flip{--head-start:6;--cov-start:1}
  /* the feature stacks: head, then the plan, then the rack */
  .svc--feature{--head-start:1;--head-span:12}
  .svc-fig{grid-row:2;grid-column:1 / -1;max-width:720px}
  .svc--feature .svc-covers{grid-row:3}
  .svc--feature .svc-title{max-width:22ch}

  /* the slab and the sheet each take the full measure; the sheet turns
     its file column out to the side so it does not grow into a tall box */
  .aud-lead,.aud-doc{grid-column:span 12}
  .aud-doc{
    display:grid;align-items:start;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    column-gap:clamp(1.5rem,3vw,2.5rem);
    row-gap:var(--s-4);
  }
  .doc-head{grid-column:1 / -1}
  .doc-lines{grid-column:2;grid-row:2 / span 3;margin-block-start:0}
  .aud-doc h3,.doc-body,.aud-doc .aud-need{grid-column:1}
  .aud-doc .aud-need{margin-block-start:0}
}

@media (max-width:1000px){
  /* the rail folds to a single vertical line and the lead joins it */
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-step--lead{grid-column:1;grid-row:auto}
  .flow-step:not(.flow-step--lead){grid-column:1}
  .flow-step--lead{
    display:grid;
    grid-template-columns:var(--node) minmax(0,1fr);
    column-gap:var(--s-5);align-items:start;
  }
  .flow-step--lead .flow-node{grid-column:1;grid-row:1 / span 2;margin-block-end:0}
  .flow-step--lead h3{grid-column:2;grid-row:1}
  .flow-step--lead p{grid-column:2;grid-row:2;max-width:60ch}
  .flow-step p{max-width:60ch}
  /* the lead's arm turns vertical like the rest of the rail */
  .flow-step--lead::after{
    inset-block-start:calc(var(--node) / 2);
    inset-inline-start:calc(var(--node) / 2 - 1px);
    inline-size:2px;block-size:calc(100% + var(--flow-row));
  }
}

@media (max-width:920px){
  .pagehead-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .pagehead-title{max-width:22ch}
  .pagehead-sub{max-width:54ch}

  .svc{grid-template-columns:1fr;gap:var(--s-6)}
  .svc-head,.svc-covers,.svc-esc,.svc-fig,.route,
  .svc--inline .svc-lede--tight,.svc-panel{grid-row:auto;grid-column:1 / -1}
  .svc-title,.svc--feature .svc-title{max-width:30ch}
  .svc--inline .svc-lede--tight{align-self:start;margin-block-start:var(--s-4);max-width:54ch}
  .svc--feature .svc-covers{margin-block-start:0}
  .route{margin-block-start:var(--s-2)}

  .ledger-grid{grid-template-columns:1fr}
  .ledger-row.is-tied::after{display:none}
  .phone-fig{margin-block-start:var(--s-5)}

  .aud-row,.aud-say{grid-template-columns:minmax(0,1fr)}
  .aud-row > p,.aud-say-foot > p,.aud-lead p{max-width:none}
  .aud-say-t{max-width:26ch}
}

@media (max-width:760px){
  .svc-index .container{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    /* the row scrolls past the left edge — fade it so «رسائل» and «موقع»
       announce themselves instead of being invisible */
    -webkit-mask-image:linear-gradient(to left,#000 88%,transparent);
    mask-image:linear-gradient(to left,#000 88%,transparent);
  }
  .svc-index .container::-webkit-scrollbar{display:none}
  .svc-index a{white-space:nowrap}
  .svc-index a:nth-child(5){margin-inline-start:var(--s-4)}

  .covers--index ul{grid-template-columns:1fr}
  .covers--index li:first-child span{font-size:var(--fs-body)}
  .plan-key{grid-template-columns:1fr}
  .ledger-row{grid-template-columns:1fr;gap:var(--s-1)}

  /* the route folds to two legs per line — still a rail, not a card row */
  .route-line{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-5)}
  .route-line li.is-end::after{display:none}

  /* the sheet drops back to one column when the page is this narrow */
  .aud-doc{grid-template-columns:minmax(0,1fr)}
  .doc-lines{grid-column:1;grid-row:auto}

  .cta-card{grid-template-columns:1fr}
  .cta-text h2{max-width:none}
}

@media (max-width:560px){
  .svc-well,.svc--feature .svc-well{width:74px;height:74px}
  .svc-well .icon,.svc--feature .svc-well .icon{width:36px;height:36px}
  .svc-well--sm{width:58px;height:58px}
  .svc-well--sm .icon{width:27px;height:27px}
  .svc-top{gap:var(--s-4)}
  .svc--inline .svc-head{gap:var(--s-4)}
  /* at 390px the drawing renders ~342px wide, so 17px numerals fall to
     ~8px — drop the zone markers, their dividers and the seating blocks,
     and let the plan carry only what the legend actually names */
  .plan-zones,.plan-zone,.plan-block{display:none}
  /* the frame narrows to 300 but the bubbles gain a line each, so the
     ratio has to follow the width or the thread clips at the top */
  .phone{inline-size:min(300px,100%);aspect-ratio:300 / 560}
  .phone-fig .fig-cap{inline-size:min(300px,100%)}

  .route-line li{padding-inline-end:var(--s-4)}
  .esc li + li{margin-inline-start:var(--s-3)}
  .aud-lead,.aud-doc{padding:clamp(1.35rem,4.5vw,1.9rem)}
}

/* ============================================================
   11. Motion — transform / opacity only
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .svc-index a{transition:color var(--t-fast) var(--e-soft),
                          transform var(--t-fast) var(--e-out)}
  .svc-index a:hover{transform:translateY(-1px)}

  /* the rail draws itself: the lead's arm runs out from its node toward
     the rail axis, then each segment falls to the next dot */
  .flow-step--lead::after{
    transform:scaleX(0);transform-origin:100% 50%;
    transition:transform .75s var(--e-out) .14s;
  }
  .flow-step:not(.flow-step--lead)::after{
    transform:scaleY(0);transform-origin:50% 0;
    transition:transform .6s var(--e-out) .1s;
  }
  .flow-step--lead.is-in::after{transform:scaleX(1)}
  .flow-step:not(.flow-step--lead).is-in::after{transform:scaleY(1)}

  /* the two solid objects lift; the two bare ones have nothing to lift */
  .aud-lead,.aud-doc{transition:transform var(--t-mid) var(--e-out),
                                box-shadow var(--t-mid) var(--e-out)}
  .aud-lead:hover,.aud-doc:hover{transform:translateY(-4px)}

  /* the travelled hairline eases rather than jumping between blocks */
  .svc-progress{transition:transform var(--t-mid) var(--e-out)}

  @media (max-width:1000px){
    .flow-step--lead::after{transform:scaleY(0);transform-origin:50% 0}
    .flow-step--lead.is-in::after{transform:scaleY(1)}
  }
}