/* ============================================================
   Webify — Lead Engine page PROTOTYPE layer
   ------------------------------------------------------------
   Loaded last, only by /lead-engine/ and /ar/lead-engine/, AFTER
   css/prototype.css AND css/prototype-trade.css.

   It inherits everything the Trade Presence page established —
   .frame, .screen-crop, .msite, .priceband, .ba, .aud, .inc,
   .tier — so the two product pages cannot drift apart. What is
   new here is only the UPGRADE: the same invented company,
   Marsa Marble & Granite, on a Lead Engine-tier site.

   .msite--pro is that upgraded site. Same brand, same palette,
   same drawn chrome; more of it, and four systems the Trade
   Presence site does not have:

       .qw   quote-request wizard
       .cat  PDF catalogue / download centre
       .fin  distributor & branch finder
       .rt   CRM + WhatsApp lead routing

   Logical properties throughout — no physical left/right.
   ============================================================ */


/* ============================================================
   0. WADI — the demo brand
   ------------------------------------------------------------
   Wadi Equipment, an invented industrial and agricultural
   equipment distributor. The Trade Presence page's demo brand
   (Marsa) sets these custom properties on .msite; this class
   overrides them for every drawn site on THIS page — including
   the plain .msite in the before/after panel, which is the same
   company's older site and has to wear the same colours.

   The property names are inherited from that page. --m-deep is
   "the brand's dark", --m-stone "the brand's accent"; here they
   are steel navy and equipment amber rather than navy and
   quarried sand. Renaming them would mean touching every rule in
   the shared layer for no gain.
   ============================================================ */

.msite--wadi {
  --m-ink:    #1f2933;
  --m-body:   #59636e;
  --m-line:   #e3e5e4;
  --m-cream:  #f4f5f3;
  --m-deep:   #1b3a4b;   /* steel navy */
  --m-stone:  #c07a22;   /* equipment amber */
}

/* ============================================================
   1. MSITE--PRO — the grown-up Wadi site
   ------------------------------------------------------------
   A Lead Engine site is denser than a Trade Presence one, so the
   root em runs slightly smaller: more fits in the same frame,
   which is the honest visual difference between the tiers.
   ============================================================ */

/* A Lead Engine site carries more per screen than a Trade Presence one, so
   the root em runs smaller: the same frame, more in it, which is the honest
   visual difference between the two tiers. Measured — at the 765px hero frame
   the home screen has to come in under 478px of drawn height. */
.msite--pro { font-size: clamp(0.44rem, 1.78cqw, 0.84rem); }

/* The Trade layer sizes only the WhatsApp icon, because that was the only
   button that had one. Every button here can carry one. */
.msite--pro .msite__btn { display: inline-flex; align-items: center; gap: 0.45em; }
.msite--pro .msite__btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }

/* The bar earns a real CTA once the site has something to ask for. */
.msite--pro .msite__nav { gap: 0.85em; font-size: 0.68em; }
.msite__navcta {
  flex: none;
  padding: 0.42em 0.85em;
  border-radius: 0.35em;
  background: var(--m-deep);
  color: #fff;
  font-size: 0.62em;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.msite__navcta svg { inline-size: 1.05em; block-size: 1.05em; }
.msite--pro .msite__lang { margin-inline-start: 0; }

/* The drawn site's root em on a phone is set in the shared layer, and
   .msite--pro inherits it — a Lead Engine screen needs no more zoom than
   a Trade Presence one. */

/* Every drawn system fills the frame it is given: the body row takes the
   slack, so no screen ends in a band of empty white. */
.msite--pro .msite__page { grid-template-rows: auto 1fr; }
/* Narrow panels drop the nav (inherited) and the bar CTA with it —
   a real responsive site keeps only the language switch up there. */
@container screen (max-width: 24rem) {
  .msite__navcta { display: none; }
}
.msite--phone .msite__navcta { display: none; }

/* A tighter hero, split in two. The Trade Presence home page fills its
   second half with the range; this one fills it with the ask, because a
   conversion-led home page puts the first step of the quote above the
   fold rather than behind a Contact link. */
.msite--pro .msite__hero {
  padding: 1.3em 1.3em 1.1em;
  gap: 1.1em;
  grid-template-columns: 1.15fr 1fr;
  align-content: center;
  align-items: center;
}
.msite--pro .msite__h1 { font-size: 1.4em; max-inline-size: 15ch; }
.msite--pro .msite__cta { margin-block-start: 0.9em; }

/* ---- The inline quote card ---- */
.msite__qq {
  display: grid;
  gap: 0.5em;
  padding: 0.9em;
  border-radius: 0.45em;
  background: var(--surface);
  border: 1px solid var(--m-line);
  box-shadow: 0 0.6em 1.4em -0.7em rgba(31, 52, 70, 0.35);
}
.msite__qq-title {
  font-family: var(--font-heading);
  font-size: 0.85em;
  color: var(--m-deep);
  line-height: 1.15;
}
[dir="rtl"] .msite__qq-title { font-family: var(--font-arabic); }
.msite__qq-note {
  font-size: 0.56em;
  color: var(--m-body);
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.msite__qq-note svg { inline-size: 1.1em; block-size: 1.1em; color: var(--m-stone); flex: none; }

/* Below this the hero stacks, and a form stacked under the headline would
   push the footer out of the frame. A real build moves it below the fold;
   the drawing does the same. */
@container screen (max-width: 26rem) {
  .msite--pro .msite__hero { grid-template-columns: 1fr; }
  .msite__qq { display: none; }
}

/* ---- The home page's "pick your way in" strip: three routes, which
   is the shape of a site built backwards from the enquiry. ---- */
.msite__routes-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em;
  padding: 0.85em 1.3em;
  border-block-start: 1px solid var(--m-line);
  background: var(--surface);
}
@container screen (max-width: 22rem) {
  .msite__routes-strip { grid-template-columns: 1fr; gap: 0.45em; }
}
.msite__route {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55em;
  align-items: center;
  padding: 0.7em 0.75em;
  border: 1px solid var(--m-line);
  border-radius: 0.4em;
  background: var(--m-cream);
}
.msite__route svg {
  inline-size: 1.5em;
  block-size: 1.5em;
  color: var(--m-stone);
  grid-row: span 2;
}
.msite__route b { font-size: 0.66em; font-weight: 600; color: var(--m-ink); }
.msite__route span { font-size: 0.58em; color: var(--m-body); display: block; }

/* A thin credibility rail under the hero — the sort of line a buyer
   scans for before they will fill anything in. */
.msite__rail {
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 0.6em 1.3em;
  background: var(--m-deep);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.6em;
}
.msite__rail b { color: #fff; font-weight: 600; }
.msite__rail span { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.msite__rail svg { inline-size: 1.05em; block-size: 1.05em; color: var(--m-stone); }
@container screen (max-width: 22rem) {
  .msite__rail span:nth-child(n + 3) { display: none; }
}


/* ============================================================
   2. QW — the quote-request wizard
   ------------------------------------------------------------
   Drawn mid-flow, on step 2 of 3, because a multi-step form is
   only distinguishable from a contact box while it is being
   filled in. The running summary on the side is the part that
   makes it a QUALIFYING form rather than a longer one.
   ============================================================ */

.qw { display: grid; gap: 0.9em; grid-template-rows: auto 1fr auto; }

.qw__steps { display: flex; align-items: center; gap: 0.45em; }
.qw__step {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.6em;
  color: var(--m-body);
  white-space: nowrap;
}
.qw__step i {
  inline-size: 1.5em;
  block-size: 1.5em;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 700;
  font-size: 0.85em;
  color: var(--m-body);
  box-shadow: inset 0 0 0 1px var(--m-line);
}
.qw__step--done i { background: var(--m-stone); color: #fff; box-shadow: none; }
.qw__step--on { color: var(--m-deep); font-weight: 600; }
.qw__step--on i { background: var(--m-deep); color: #fff; box-shadow: none; }
.qw__steps hr {
  flex: 1;
  border: 0;
  block-size: 1px;
  background: var(--m-line);
  margin: 0;
  min-inline-size: 0.5em;
}
@container screen (max-width: 22rem) {
  .qw__step span { display: none; }
}

.qw__split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0.9em; align-items: stretch; }
@container screen (max-width: 17rem) { .qw__split { grid-template-columns: 1fr; } }

.qw__body { display: grid; gap: 0.7em; }
.qw__label {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--m-ink);
  display: block;
  margin-block-end: 0.35em;
}
.qw__label em {
  font-style: normal;
  font-weight: 400;
  color: var(--m-body);
  margin-inline-start: 0.4em;
}
.qw__chips { display: flex; gap: 0.35em; flex-wrap: wrap; }
/* Reuses .msite__chip / .msite__chip--on from the Trade Presence layer. */

.qw__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }

/* The conditional row: it appears BECAUSE "cut-to-size" was chosen
   above. Marked so the caption can point at it. */
.qw__cond {
  padding: 0.65em 0.7em;
  border-radius: 0.4em;
  background: rgba(168, 130, 91, 0.09);
  border: 1px dashed rgba(168, 130, 91, 0.5);
  display: grid;
  gap: 0.45em;
}
.qw__cond-tag {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-stone);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.qw__cond-tag svg { inline-size: 1em; block-size: 1em; }

/* The running summary — what the sales desk will actually receive. */
.qw__sum {
  padding: 0.8em;
  border-radius: 0.4em;
  background: var(--m-cream);
  border: 1px solid var(--m-line);
  display: grid;
  gap: 0.5em;
  align-content: start;
}
.qw__sum-title {
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-body);
}
.qw__sum-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  font-size: 0.62em;
  color: var(--m-body);
  padding-block-end: 0.4em;
  border-block-end: 1px solid var(--m-line);
}
.qw__sum-row:last-of-type { border-block-end: 0; padding-block-end: 0; }
.qw__sum-row b { color: var(--m-ink); font-weight: 600; text-align: end; }

.qw__what {
  margin-block-start: auto;
  padding-block-start: 0.6em;
  border-block-start: 1px solid var(--m-line);
  display: grid;
  gap: 0.3em;
}
.qw__what b {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-body);
}
.qw__what span {
  font-size: 0.58em;
  color: var(--m-body);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4em;
}
.qw__what i {
  font-style: normal;
  font-weight: 700;
  color: var(--m-stone);
}

.qw__foot { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.qw__note { font-size: 0.58em; color: var(--m-body); }


/* ============================================================
   3. CAT — the PDF catalogue / download centre
   ------------------------------------------------------------
   Cover, format, size, revision date, language. A buyer forwards
   a PDF internally; a web page they have to describe. That is the
   whole argument for this screen, so the metadata is the point
   and is drawn at full strength.
   ============================================================ */

.cat { display: grid; gap: 0.7em; align-content: space-between; }

/* A download centre is a list, not a gallery: the cover only has to identify
   the file, while the format, size, languages and revision date are the whole
   reason a buyer trusts it enough to forward it. Rows give those the width,
   and they fit a 90px phone and a 765px hero frame without changing shape. */
.cat__grid { display: grid; gap: 0.45em; }

.cat__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6em;
  align-items: center;
  padding: 0.5em 0.6em;
  border: 1px solid var(--m-line);
  border-radius: 0.4em;
  background: var(--surface);
}
/* The cover: a stone plate with the file name on it, drawn the way the
   swatches are, so a catalogue looks like it came from this company. */
.cat__cover {
  position: relative;
  inline-size: 3.1em;
  aspect-ratio: 3 / 4;
  border-radius: 0.25em;
  background-color: var(--tone, #e9dfd1);
  background-image:
    linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.5) 40%, transparent 43%),
    linear-gradient(112deg, transparent 20%, rgba(0, 0, 0, 0.08) 22%, transparent 25%),
    radial-gradient(70% 90% at 20% 15%, rgba(255, 255, 255, 0.45), transparent 70%);
  border: 1px solid rgba(35, 48, 63, 0.1);
  display: grid;
  align-content: end;
  padding: 0.3em;
}
.cat__cover b {
  font-family: var(--font-heading);
  font-size: 0.42em;
  line-height: 1.1;
  color: var(--m-deep);
}
[dir="rtl"] .cat__cover b { font-family: var(--font-arabic); }
.cat__badge {
  position: absolute;
  inset-block-start: 0.25em;
  inset-inline-end: 0.25em;
  padding: 0.1em 0.3em;
  border-radius: 0.15em;
  background: #b23b32;
  color: #fff;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cat__name { font-size: 0.66em; font-weight: 600; color: var(--m-ink); display: block; }
.cat__meta {
  display: block;
  font-size: 0.55em;
  color: var(--m-body);
  margin-block-start: 0.15em;
}
.cat__dl {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0.6em;
  border-radius: 0.3em;
  font-size: 0.6em;
  font-weight: 600;
  color: var(--m-deep);
  box-shadow: inset 0 0 0 1px rgba(31, 52, 70, 0.28);
  white-space: nowrap;
}
.cat__dl svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }
/* On the narrowest frames the label goes and the arrow carries it. */
@container screen (max-width: 14rem) { .cat__dl span { display: none; } }

/* The gate: one email before the download. One line, because that is the
   only size of ask a buyer actually completes. */
.cat__gate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5em;
  align-items: center;
  padding: 0.6em 0.7em;
  border-radius: 0.4em;
  background: var(--m-cream);
  border: 1px solid var(--m-line);
}
@container screen (max-width: 20rem) { .cat__gate { grid-template-columns: 1fr; } }
.cat__gate p { margin: 0; font-size: 0.6em; color: var(--m-body); }
.cat__gate p b { color: var(--m-ink); font-weight: 600; display: block; font-size: 1.05em; }
.cat__gate-form { display: flex; gap: 0.4em; align-items: center; }
.cat__gate-form .msite__field { min-inline-size: 6em; }


/* ============================================================
   4. FIN — the branch & distributor finder
   ------------------------------------------------------------
   A real Google Maps embed beside a filtered list, which is what
   the Pricing Scheme means by "distributor / branch finder (map
   + filtered list)". The map is the one piece on these pages
   that is NOT drawn — everything else is HTML/CSS so it
   translates and mirrors for free, and the trade-off is noted in
   the demo credit under the hero.

   The pins stay drawn, so they are ours: pointing Google at a
   search query would drop pins on real companies and present
   them as this invented brand's branches.
   ============================================================ */

.fin { display: grid; gap: 0.7em; grid-template-rows: auto 1fr; }
.fin__split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.7em; align-items: stretch; }
@container screen (max-width: 24rem) { .fin__split { grid-template-columns: 1fr; } }

.fin__map {
  position: relative;
  min-block-size: 9em;
  border-radius: 0.4em;
  border: 1px solid var(--m-line);
  overflow: hidden;
  /* Drawn terrain, kept as the backdrop: if the embed is blocked, offline
     or still loading, the panel still reads as a map rather than a hole. */
  background:
    linear-gradient(transparent 96%, rgba(27, 58, 75, 0.07) 96%) 0 0 / 100% 1.6em,
    linear-gradient(90deg, transparent 96%, rgba(27, 58, 75, 0.07) 96%) 0 0 / 1.6em 100%,
    radial-gradient(120% 90% at 12% 8%, rgba(192, 122, 34, 0.14), transparent 60%),
    #eef1ee;
}

.fin__map-frame {
  /* A static capture of the Google Maps embed this used to be (audit F13:
     the live iframe pulled ~1.8 MB of Maps JS into a decorative mockup).
     The image is 560x420 CSS px centred on the same point the embed was,
     and is shown at 1:1 rather than scaled to fit, exactly as the embed
     rendered its tiles, so the --x/--y pin offsets still land where they
     did. Physical left/top on purpose: this centring must not flip in RTL. */
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 560px;
  block-size: 420px;
  max-inline-size: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: saturate(0.92);
}
.fin__map-credit {
  /* Google's attribution travels with the static capture and must stay
     readable. The mockup's em is 4-8px depending on viewport, so the size
     has a 10px floor; z-index lifts it over the pins and map overlays;
     solid ink on near-opaque white keeps it well above 4.5:1. The drawn
     phone overlaps the map at the page's inline-START (left in English,
     right in Arabic), so the credit sits at the other side, set physically
     per page direction rather than trusting logical insets on a dir="ltr"
     span inside an RTL page. */
  position: absolute;
  z-index: 3;
  inset-block-end: 0.25em;
  right: 0.4em;
  font-size: max(0.55em, 10px);
  font-weight: 500;
  line-height: 1;
  color: #1b3a4b;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.2em 0.35em;
  border-radius: 0.2em;
  pointer-events: none;
}
html[dir="rtl"] .fin__map-credit { right: auto; left: 0.4em; }

/* Pins are positioned in PIXELS FROM THE MAP CENTRE, and in PHYSICAL
   left/top — the one place on these pages where logical properties would be
   wrong. Google keeps the `ll` coordinate centred whatever size the iframe
   is, so centre-relative offsets stay locked to their city at every
   breakpoint where percentages would drift. And geography does not mirror:
   at hl=ar the labels turn Arabic but Cairo stays exactly where it was, so
   an inset-inline-start pin would fly to the wrong governorate in RTL. */
.fin__pin {
  position: absolute;
  left: calc(50% + var(--x, 0px));
  top: calc(50% + var(--y, 0px));
  inline-size: 1.35em;
  block-size: 1.35em;
  margin-left: -0.675em;
  margin-top: -1.35em;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--m-stone);
  box-shadow: 0 0.15em 0.35em rgba(27, 58, 75, 0.45);
}
.fin__pin::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: #fff;
}
.fin__pin--on {
  background: var(--m-deep);
  inline-size: 1.7em;
  block-size: 1.7em;
  margin-left: -0.85em;
  margin-top: -1.7em;
  z-index: 1;
}

@container screen (max-width: 24rem) { .fin__split { grid-template-columns: 1fr; } }

.fin__list { display: grid; gap: 0.4em; align-content: start; }
.fin__loc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5em;
  align-items: center;
  padding: 0.55em 0.6em;
  border: 1px solid var(--m-line);
  border-radius: 0.35em;
  background: var(--surface);
}
.fin__loc--on { border-color: var(--m-deep); background: var(--m-cream); }
.fin__kind {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25em 0.45em;
  border-radius: 0.2em;
  background: rgba(168, 130, 91, 0.16);
  color: #7d5f3c;
  white-space: nowrap;
}
.fin__loc b { font-size: 0.64em; font-weight: 600; color: var(--m-ink); display: block; }
.fin__loc span { font-size: 0.55em; color: var(--m-body); display: block; }
.fin__go {
  inline-size: 1.9em;
  block-size: 1.9em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1faa54;
  color: #fff;
  flex: none;
}
.fin__go svg { inline-size: 1.15em; block-size: 1.15em; }


/* ============================================================
   5. RT — CRM + WhatsApp lead routing
   ------------------------------------------------------------
   The one screen that is NOT a page of the client's website. It
   is where the enquiry lands, which is the whole difference
   between a form that sends mail and a system that routes leads.
   Two lanes out of one submission, drawn side by side.
   ============================================================ */

.rt { display: grid; gap: 0.7em; grid-template-rows: auto 1fr; }
.rt__lane { align-content: start; }

/* The source: one submitted quote request, fanning into two lanes. */
.rt__source {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55em;
  align-items: center;
  padding: 0.6em 0.75em;
  border-radius: 0.4em;
  background: var(--m-deep);
  color: #fff;
}
.rt__source svg { inline-size: 1.3em; block-size: 1.3em; color: var(--m-stone); }
.rt__source b { font-size: 0.66em; font-weight: 600; display: block; }
.rt__source span { font-size: 0.56em; color: rgba(255, 255, 255, 0.72); display: block; }
.rt__stamp {
  font-size: 0.55em;
  padding: 0.25em 0.5em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

.rt__fan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7em;
}
@container screen (max-width: 22rem) { .rt__fan { grid-template-columns: 1fr; } }

.rt__lane {
  display: grid;
  gap: 0.45em;
  align-content: start;
  padding: 0.6em;
  border: 1px solid var(--m-line);
  border-radius: 0.4em;
  background: var(--surface);
}
.rt__lane-head {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-body);
}
.rt__lane-head svg { inline-size: 1.15em; block-size: 1.15em; }
.rt__lane--wa .rt__lane-head svg { color: #1faa54; }
.rt__lane--crm .rt__lane-head svg { color: var(--m-deep); }

/* WhatsApp lane: two bubbles, the second one already answered. */
.rt__chat { display: grid; gap: 0.35em; }
.rt__bubble {
  font-size: 0.58em;
  line-height: 1.45;
  padding: 0.45em 0.6em;
  border-radius: 0.5em;
  max-inline-size: 88%;
  color: var(--m-ink);
}
.rt__bubble--in {
  background: #f0f2f5;
  border-start-start-radius: 0.15em;
  justify-self: start;
}
.rt__bubble--out {
  background: #d9fdd3;
  border-start-end-radius: 0.15em;
  justify-self: end;
}
.rt__bubble i {
  display: block;
  font-style: normal;
  font-size: 0.85em;
  color: var(--m-body);
  margin-block-start: 0.2em;
}

/* CRM lane: a record with the fields a sales desk sorts on. */
.rt__record { display: grid; gap: 0.3em; }
.rt__field {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.57em;
  color: var(--m-body);
  padding-block: 0.28em;
  border-block-end: 1px solid var(--m-line);
}
.rt__field:last-child { border-block-end: 0; }
.rt__field b { color: var(--m-ink); font-weight: 600; text-align: end; }
.rt__tag {
  padding: 0.15em 0.45em;
  border-radius: 0.2em;
  font-size: 0.95em;
  font-weight: 700;
  background: rgba(31, 170, 84, 0.16);
  color: #16733a;
}
.rt__tag--warm { background: rgba(168, 130, 91, 0.18); color: #7d5f3c; }


/* ============================================================
   6. Page-level: nothing new
   ------------------------------------------------------------
   The hero, price band and before/after use the Trade Presence
   layer as-is. Sections 3-5 of this page (audience, feature
   groups, tier progression) are not rebuilt yet; when they are,
   the progression will need a rule for a CURRENT tier that sits
   in the middle rather than first.
   ============================================================ */


/* ============================================================
   7. Phone renderings
   ------------------------------------------------------------
   The same markup at ~90px wide. These are the adaptations a
   real responsive build makes at that width, not a trimmed-down
   copy of the site: tighter gutters, and a running summary that
   collapses to a disclosure row instead of a panel.
   ============================================================ */

.msite--pro.msite--phone .msite__page { padding: 0.9em 0.85em; gap: 0.6em; }

.msite--phone .qw__two { grid-template-columns: 1fr; }
.msite--phone .msite__chip { font-size: 0.6em; padding: 0.32em 0.62em; }
.msite--pro.msite--phone .msite__ph { font-size: 0.95em; }

/* The quote summary collapses. On a phone it is a thing you tap open,
   which is why the rows go and the title grows a caret. */
.msite--phone .qw__sum { padding: 0.5em 0.6em; gap: 0; }
.msite--phone .qw__sum-row { display: none; }
.msite--phone .qw__sum-title { display: flex; align-items: center; gap: 0.4em; }
.msite--phone .qw__sum-title::after {
  content: "";
  inline-size: 0.4em;
  block-size: 0.4em;
  margin-inline-start: auto;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg;
}
.msite--phone .qw { gap: 0.6em; }
.msite--phone .qw__body { gap: 0.5em; }

/* The finder's map is the one element that can afford to lose height
   when the list beneath it is the thing being scanned. */
.msite--phone .fin__map { min-block-size: 6em; }
.msite--phone .fin { gap: 0.5em; }

/* Routing: the two lanes stack (inherited from the 22rem container rule);
   the chat only needs to show that a reply already went out. */
.msite--phone .rt { gap: 0.5em; }
.msite--phone .rt__fan { gap: 0.5em; }




/* ============================================================
   7. SNIPPETS — a scrap of real interface per feature group
   ------------------------------------------------------------
   Extends the Trade Presence layer's .snip vocabulary with the
   four systems this package is named for. Drawn the same way and
   at the same weight, so the includes grid reads as one set.
   Unlike the finder's map, these pins sit over a drawn
   abstraction rather than real geography — so they mirror.
   ============================================================ */

/* Lead capture: a multi-step form mid-flow — progress, choices, fields. */
.snip__wizard { display: grid; gap: 0.4rem; }
.snip__steps { display: flex; gap: 0.25rem; }
.snip__steps i {
  flex: 1;
  block-size: 0.28rem;
  border-radius: 1px;
  background: var(--border);
}
.snip__steps i.on { background: var(--brand-accent); }
.snip__chips { display: flex; gap: 0.25rem; }
.snip__chips span {
  block-size: 0.85rem;
  flex: 1;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
}
.snip__chips .on { background: var(--brand-primary); border-color: var(--brand-primary); }
.snip__fields { display: grid; gap: 0.25rem; }
.snip__fields i {
  block-size: 0.95rem;
  border-radius: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Catalogue: a file with its metadata and a download affordance. */
.snip__pdf { display: flex; align-items: center; gap: 0.45rem; }
.snip__pdf-file {
  inline-size: 1.5rem;
  block-size: 2rem;
  border-radius: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex: none;
}
.snip__pdf-file b { font-size: 0.5rem; font-weight: 700; color: #b23b32; }
.snip__pdf-meta { flex: 1; display: grid; gap: 0.25rem; }
.snip__pdf-meta i { block-size: 0.3rem; border-radius: 1px; background: var(--border); }
.snip__pdf-meta i:last-child { inline-size: 55%; }
.snip__pdf-dl {
  inline-size: 1.6rem;
  block-size: 1rem;
  border-radius: 0.2rem;
  background: var(--brand-primary);
  flex: none;
}

/* Branch finder: a drawn map with pins — the miniature of the real one. */
.snip__map {
  position: relative;
  block-size: 2.9rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  overflow: hidden;
  background:
    linear-gradient(transparent 92%, rgba(2, 7, 37, 0.07) 92%) 0 0 / 100% 0.7rem,
    linear-gradient(90deg, transparent 92%, rgba(2, 7, 37, 0.07) 92%) 0 0 / 0.7rem 100%,
    var(--surface);
}
.snip__map-pin {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-start: -0.25rem;
  margin-block-start: -0.5rem;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--brand-accent);
}
.snip__map-pin--on { background: var(--brand-primary); inline-size: 0.62rem; block-size: 0.62rem; }

/* Routing: one enquiry, two lanes out. */
.snip__lanes { display: grid; gap: 0.3rem; }
.snip__lane {
  block-size: 1.15rem;
  border-radius: 0.2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}
.snip__lane::before {
  content: "";
  position: absolute;
  inset-block: 0.3rem;
  inset-inline-start: 0.3rem;
  inline-size: 0.28rem;
  border-radius: 1px;
}
.snip__lane--wa::before { background: #1faa54; }
.snip__lane--crm::before { background: var(--brand-primary); }