/* =========================================================================
   اشترك · the marketing site
   ---------------------------------------------------------------------
   Geometry, depth and motion come from the internal design system
   (eshtarek-design-system/03-design-tokens/tokens.css). The radius scale,
   the shadow scale and the motion curves below are that file's, not new
   inventions, because the product and the site should feel like one company.
   Arabic is the design; the English mirror is derived from it.
   ========================================================================= */

:root {
  /* brand, fixed */
  --c-primary:       #5120CB;
  --c-primary-dark:  #4318B0;
  --c-primary-light: #7B4DE8;   /* 5.16:1 on white; only 3.36:1 on --c-deep, so display sizes only there */
  --c-deep:          #1D0458;
  --c-accent:        #F2EEFC;

  /* grounds */
  --c-white:  #FFFFFF;
  --c-wash:   #F7F5FE;

  /* ink */
  --c-ink:      #1D0458;
  --c-ink-soft: #574C79;   /* 7.0:1 on white */
  --c-ink-mute: #6B6188;   /* 5.2:1 on white */
  --c-line:     #E7E2F4;
  --c-line-2:   #D5CCEB;
  --c-control:  #8B7FB5;   /* 3.6:1 on white: the boundary of an outline control */

  /* on deep */
  --c-on-deep-soft: #CFC4F0;   /* 10.6:1 on --c-deep */
  --c-on-deep-line: #3B2A78;

  /* semantic */
  --c-ok-bg:    #D1FAE5;
  --c-ok-ink:   #065F46;
  --c-err:      #991B1B;
  --c-err-bg:   #FEE2E2;

  /* radius, from the design system */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;

  /* shadow, from the design system */
  --sh-sm: 0 1px 2px 0 rgb(29 4 88 / 0.05);
  --sh-md: 0 4px 6px -1px rgb(29 4 88 / 0.08), 0 2px 4px -2px rgb(29 4 88 / 0.06);
  --sh-lg: 0 10px 15px -3px rgb(29 4 88 / 0.10), 0 4px 6px -4px rgb(29 4 88 / 0.08);
  --sh-xl: 0 20px 25px -5px rgb(29 4 88 / 0.12), 0 8px 10px -6px rgb(29 4 88 / 0.08);
  --sh-2xl: 0 32px 64px -12px rgb(29 4 88 / 0.26);
  --sh-primary: 0 4px 14px 0 rgb(81 32 203 / 0.28);
  --sh-primary-lg: 0 10px 28px 0 rgb(81 32 203 / 0.34);

  /* motion, from the design system */
  --d-fast: 150ms; --d-base: 200ms; --d-slow: 300ms; --d-slower: 500ms;
  --e-out: cubic-bezier(0, 0, 0.2, 1);
  --e-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* layout */
  --wide: 1200px;
  --measure: 52ch;   /* ~75 Arabic characters; ch is calibrated on "0" */
  --pad-x: clamp(1.125rem, 4vw, 3rem);
  --band-y: clamp(3.5rem, 8vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  /* The keyframe animations are already gated behind the .js class. These are
     the transitions, which are not, and every one of them moves something.
     Colour and shadow still transition: those do not move. */
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow, outline-color !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.85;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
:where(a) { color: var(--c-primary); text-underline-offset: 0.25em; }
:where(a:hover) { color: var(--c-primary-dark); }

.eq-lat { font-family: Axiforma, "IBM Plex Sans Arabic", system-ui, sans-serif; direction: ltr; unicode-bidi: isolate; }
.eq-num { font-family: Axiforma, system-ui, sans-serif; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums lining-nums; }
.eq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: var(--r-sm); }
.eq-band--ink :focus-visible, .eq-foot :focus-visible, .eq-tier--mid :focus-visible { outline-color: #fff; }
/* Moved out of view by transform, not by a 9999px offset: an off-screen
   offset creates a real overflow box, and in RTL it does so on the side the
   page scrolls from. */
.eq-skip {
  position: absolute; inset-inline-start: 1rem; top: 0; z-index: 200;
  background: var(--c-deep); color: #fff; padding: 0.85rem 1.35rem;
  font-weight: 700; border-radius: 0 0 var(--r-lg) var(--r-lg);
  transform: translateY(-130%);
  transition: transform var(--d-base) var(--e-out);
}
.eq-skip:focus { transform: translateY(0); }

/* =========================================================================
   1. Sections
   ========================================================================= */

.eq-band { position: relative; padding: var(--band-y) var(--pad-x); }
.eq-band__in { max-width: var(--wide); margin-inline: auto; position: relative; z-index: 1; }
/* Rhythm, not metronome: a dense proof section sits tighter than a statement,
   so a section boundary is not the same distance everywhere. */
.eq-band--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.eq-band--dense { padding-block: clamp(2.5rem, 5vw, 4rem); }
.eq-band--open  { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.eq-band--wash  { background: var(--c-wash); }

/* The deep panel. Punctuation, not decoration: it marks the two moments a
   page changes register, the capability set and the close. */
.eq-band--ink {
  background:
    radial-gradient(120% 90% at 85% 0%, #3A1090 0%, transparent 60%),
    radial-gradient(90% 80% at 10% 100%, #2A0A72 0%, transparent 55%),
    var(--c-deep);
  color: #fff;
}
/* The close is the last thing anyone sees, and it is one statement rather than
   a column of content. Left in the reading rail it hugs one edge and leaves
   most of a full-bleed deep band empty, which is an expensive place to spend
   the final impression. Centred, with its own measure. */
.eq-cta { text-align: center; }
.eq-cta > * { margin-inline: auto; }
.eq-cta .eq-h1 { max-width: 20ch; }
.eq-cta .eq-lead { max-width: 48ch; }
.eq-cta .eq-actions { justify-content: center; }

.eq-band--ink :where(h1,h2,h3,h4) { color: #fff; }
.eq-band--ink :where(a) { color: #fff; }
.eq-band--ink .eq-lead { color: var(--c-on-deep-soft); }


/* One soft field of brand colour behind the opening of a page, so the first
   screen is never a white rectangle. */
.eq-aurora { position: relative; isolation: isolate; }
.eq-aurora::before {
  content: "";
  position: absolute; inset: -25% 0 auto 0; height: 140%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(45% 55% at 78% 16%, rgb(123 77 232 / 0.22) 0%, transparent 70%),
    radial-gradient(40% 50% at 20% 6%,  rgb(81 32 203 / 0.14) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 0%,  rgb(242 238 252 / 0.95) 0%, transparent 78%);
}

/* =========================================================================
   2. Type
   ========================================================================= */

/* Arabic is never letter-spaced; tracking breaks the cursive joins. */
.eq-display, .eq-h1, .eq-h2, .eq-h3 { margin: 0; letter-spacing: 0; text-wrap: balance; }
.eq-display { font-size: clamp(2.375rem, 1.2rem + 4.4vw, 4.25rem); font-weight: 700; line-height: 1.3; color: var(--c-ink); }
.eq-h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 700; line-height: 1.32; }
.eq-h2 { font-size: clamp(1.625rem, 1.15rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.36; }
.eq-h3 { font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4rem); font-weight: 700; line-height: 1.45; }

/* The one word the sentence turns on. */
.eq-hl { color: var(--c-primary); }
.eq-band--ink .eq-hl { color: var(--c-primary-light); }

.eq-lead { font-size: clamp(1.125rem, 1.03rem + 0.5vw, 1.3125rem); line-height: 1.8; color: var(--c-ink-soft); max-width: var(--measure); margin: 0; }
.eq-label { display: block; font-size: 0.875rem; font-weight: 700; color: var(--c-primary); margin: 0 0 0.4rem; line-height: 1.6; }
.eq-band--ink .eq-label { color: var(--c-on-deep-soft); }
/* The wrapper holds Arabic, so it stays RTL and untracked. Only the numeral
   run inside it is isolated LTR, via .eq-num. */
.eq-serial { font-size: 0.8125rem; font-weight: 500; color: var(--c-ink-mute); }
.eq-serial--row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; }
.eq-serial--row > * { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.eq-serial--row .wp-block-post-date, .eq-serial--row time { font-size: inherit; line-height: inherit; color: inherit; }

.eq-prose { max-width: var(--measure); }
.eq-prose > * + * { margin-top: 1.2em; }
.eq-prose > p:first-child { margin-top: 0; }
.eq-prose p { margin-bottom: 0; }
.eq-prose :where(h2) { margin-top: 2.2em; }
.eq-prose :where(h3) { margin-top: 1.8em; }
.eq-prose :where(ul, ol) { padding-inline-start: 1.4rem; }
.eq-prose :where(li) + :where(li) { margin-top: 0.45rem; }
.eq-prose :where(blockquote) { margin: 2em 0; padding: 1.25rem 1.5rem; background: var(--c-wash); border-radius: var(--r-xl); font-size: 1.125rem; font-weight: 500; }
.eq-prose :where(blockquote) p { margin: 0; }
.eq-prose :where(img) { border-radius: var(--r-xl); box-shadow: var(--sh-md); }
.eq-prose :where(figcaption) { font-size: 0.875rem; color: var(--c-ink-mute); margin-top: 0.7rem; }

.eq-head-2col { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60rem) { .eq-head-2col { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 2.5rem; } }
.eq-head-2col > * { margin: 0 !important; }

/* =========================================================================
   3. Buttons
   ========================================================================= */

.eq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.4;
  padding: 0.85rem 1.65rem; border: 0; border-radius: var(--r-lg);
  background: var(--c-primary); color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: var(--sh-primary);
  transition: background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out), transform var(--d-fast) var(--e-out);
}
.eq-btn:hover { background: var(--c-primary-dark); color: #fff; box-shadow: var(--sh-primary-lg); transform: translateY(-2px); }
.eq-btn:active { transform: translateY(0); }
.eq-btn .eq-i { transition: transform var(--d-base) var(--e-out); }
.eq-btn:hover .eq-i { transform: translateX(-3px); }
[dir="ltr"] .eq-btn:hover .eq-i { transform: translateX(3px); }

.eq-btn--ghost { background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-control), var(--sh-sm); }
.eq-btn--ghost:hover { background: #fff; color: var(--c-primary); box-shadow: inset 0 0 0 1.5px var(--c-primary), var(--sh-md); }
.eq-btn--sm { font-size: 0.9375rem; padding: 0.6rem 1.15rem; border-radius: var(--r-md); }
/* The WhatsApp mark inside a button. A brand glyph, so it is filled with
   currentColor and never given the icon set's stroke. */
.eq-btn--wa .eq-i { width: 1.2rem; height: 1.2rem; }
.eq-btn[aria-disabled="true"], .eq-btn:disabled { background: var(--c-line); color: var(--c-ink-mute); box-shadow: none; cursor: not-allowed; transform: none; }
.eq-band--ink .eq-btn { background: #fff; color: var(--c-primary); box-shadow: var(--sh-lg); }
.eq-band--ink .eq-btn:hover { background: var(--c-accent); color: var(--c-primary-dark); }
/* The secondary action on a dark ground is an outline, never a second solid.
   These two selectors were malformed and matched nothing, so the closing band
   on 38 pages rendered its two buttons identically. */
.eq-band--ink .eq-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45); }
.eq-band--ink .eq-btn--ghost:hover { background: rgb(255 255 255 / 0.10); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

.eq-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.eq-actions--center { justify-content: center; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); }
.eq-textlink { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; }
.eq-textlink:hover { text-decoration: underline; }
.eq-textlink .eq-i { width: 1.25em; height: 1.25em; transition: transform var(--d-base) var(--e-out); }
.eq-textlink:hover .eq-i { transform: translateX(-3px); }
[dir="ltr"] .eq-textlink:hover .eq-i { transform: translateX(3px); }

/* =========================================================================
   4. Product imagery
   ========================================================================= */

/* A screenshot sits in a browser, because that is where a merchant sees it.
   The chrome is drawn, so no pixels are spent on it. */
.eq-frame { border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-2xl); overflow: hidden; border: 1px solid var(--c-line); }
.eq-frame__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; background: linear-gradient(#FBFAFE, #F4F1FB); border-bottom: 1px solid var(--c-line); }
.eq-frame__dots { display: flex; gap: 0.35rem; }
.eq-frame__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line-2); display: block; }
.eq-frame__url {
  flex: 1; font-family: Axiforma, sans-serif; direction: ltr; unicode-bidi: isolate;
  font-size: 0.75rem; color: var(--c-ink-mute); text-align: center;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-full);
  padding: 0.2rem 0.75rem; max-width: 22rem; margin-inline: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-frame img { width: 100%; }

.eq-shot { border-radius: var(--r-lg); border: 1px solid var(--c-line); box-shadow: var(--sh-lg); overflow: hidden; background: #fff; }
/* A portrait crop in a landscape column scales up until it dwarfs the copy
   beside it and the landscape crops in the sections around it. Capped and
   centred, it reads as one object among equals. */
.eq-shot--tall, .eq-frame--tall { max-width: 22rem; margin-inline: auto; }
.eq-shot--mid, .eq-frame--mid { max-width: 27rem; margin-inline: auto; }
/* The chapter artifacts sit beside three short lines of copy, so they are
   capped tighter than a showcase that owns its whole band. */
.eq-shot--sm, .eq-frame--sm { max-width: 20rem; margin-inline: auto; }
.eq-shot img { width: 100%; }

.eq-float { position: absolute; z-index: 2; }
/* The illustrative-figures caption is a disclosure, so nothing overlaps it.
   z-index alone only wins the paint order: the float overhangs the frame by
   1.75rem and still lands on the caption's first line. The caption has to be
   given that overhang back as space, or the one string that must always be
   readable is the one struck through. */
/* The stage is the float's containing block, so the overhang is measured from
   the frame and not from a column that also holds the caption. */
.eq-hero__stage { position: relative; }
.eq-hero__media { overflow: visible; }
@media (max-width: 65.99rem) {
  .eq-float { position: static; margin-top: 1rem; }
  /* Full-bleed rather than a third-scale thumbnail nobody can read. */
  .eq-hero__media .eq-frame { margin-inline: calc(var(--pad-x) * -1); border-radius: 0; border-inline: 0; }
  .eq-hero__media .eq-float { margin-inline: 0; }
}


/* The Riyal mark. Never U+FDFC: it renders as broken text. */
.eq-amt { display: inline-flex; align-items: baseline; gap: 0.2em; direction: ltr; unicode-bidi: isolate; font-family: Axiforma, sans-serif; font-variant-numeric: tabular-nums; }
.eq-amt::after {
  content: ""; display: inline-block; width: 0.6em; height: 0.6em;
  background-color: currentColor;
  -webkit-mask: var(--eq-riyal) center/contain no-repeat;
          mask: var(--eq-riyal) center/contain no-repeat;
  translate: 0 0.02em;
}

/* =========================================================================
   5. Cards
   ========================================================================= */

.eq-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 44rem) { .eq-grid--2 { grid-template-columns: repeat(2, 1fr); } .eq-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .eq-grid--3 { grid-template-columns: repeat(3, 1fr); } .eq-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.eq-grid > * { margin-block: 0 !important; }
/* Cards whose rows differ in count but which read as one set. */
.eq-grid--even { align-items: stretch; }

.eq-card {
  position: relative; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-xl);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  transition: box-shadow var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out), border-color var(--d-slow) var(--e-out);
}
.eq-card > * { margin-block: 0; }
.eq-card > * + * { margin-block-start: 0.6rem; }
.eq-card :where(h2,h3,h4) { font-size: 1.1875rem; font-weight: 700; line-height: 1.45; }
.eq-card :where(p) { color: var(--c-ink-soft); font-size: 1rem; line-height: 1.8; }
.eq-card--link:hover, .eq-card--link:focus-within { border-color: var(--c-primary); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.eq-band--wash .eq-card { background: #fff; }
.eq-band--ink .eq-card { background: rgb(255 255 255 / 0.06); border-color: var(--c-on-deep-line); box-shadow: none; color: #fff; }
.eq-band--ink .eq-card :where(p) { color: var(--c-on-deep-soft); }
.eq-card__t a { color: inherit; text-decoration: none; }
.eq-card__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.eq-card--link:hover .eq-card__t { color: var(--c-primary); }

.eq-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r-lg);
  background: var(--c-accent); color: var(--c-primary); margin-bottom: 0.35rem;
}
.eq-chip .eq-i { width: 1.35rem; height: 1.35rem; }
.eq-band--ink .eq-chip { background: rgb(255 255 255 / 0.13); color: #fff; }

/* =========================================================================
   6. Capability lists
   ========================================================================= */

.eq-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.eq-caps > li { position: relative; padding-inline-start: 2rem; font-size: 1rem; line-height: 1.75; }
.eq-caps > li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.4em;
  width: 1.15rem; height: 1.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23065F46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.6l4 4 8-9'/%3E%3C/svg%3E");
  background-size: 1.05rem; background-position: center; background-repeat: no-repeat;
}
.eq-band--ink .eq-caps > li::before, .eq-tier--mid .eq-caps > li::before {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236EE7B7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.6l4 4 8-9'/%3E%3C/svg%3E");
}
/* An index or a set of routes is not a set of promises. */
.eq-caps--plain > li { padding-inline-start: 0; }
.eq-caps--plain > li::before { content: none; }

/* =========================================================================
   7. Chapters
   The capability set as the three verbs the whole site is built on: بيع,
   إدارة, تنمية. Each chapter is a showcase, so this section owns almost no
   CSS of its own, only the rhythm between the three.

   What stood here before is recorded because it was replaced twice for the
   same reason. First a ruled ledger, which read as a spec sheet. Then a bento
   of tiles, two carrying real crops and three carrying devices drawn in CSS:
   a subscriber's plan card, a recovery run, a webhook stream. Those drawings
   depicted screens the product has never rendered, which is the one thing
   this site may not do, and no caption fixes it. Every chapter here shows a
   real crop, and a capability with no crop lives as a line inside a chapter
   that has one.
   ========================================================================= */

/* A dense passage earns a quiet one: chapters sit further apart than anything
   else on the page, because each is a full change of subject. */
.eq-chs { display: grid; gap: clamp(3rem, 6vw, 5rem); }

/* =========================================================================
   8. Use-case switcher
   The use-case index as one composition rather than a row of boxes: the
   filter pills already in section 20 carry the choice, and the showcase in
   section 24 carries the answer. Nothing new is invented here except the
   plumbing that connects them, which is a hidden radio per pane and an
   id-scoped :checked rule. No script: the section works with JavaScript off,
   and the first pane is the one that ships checked.

   Three earlier versions are recorded because each failed for its own reason.
   Identical white cards with a tinted icon showed nothing about any business.
   Drawn mockups per business invented plans, amounts and dates the product
   had never rendered. Full-width doors in each merchant's own hue read as
   three foreign brands dropped into a purple page. This one shows a real
   customer's live page, the real SDK widget, and the real dashboard.
   ========================================================================= */

.eq-sw > input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* The panes stack in one grid cell so the band keeps the height of the
   tallest pane and the page does not jump when the visitor switches. */
.eq-sw__stage { display: grid; }
/* Two class names, not one. `.eq-showcase` sets display:grid in section 24,
   which is later in this file, so a single-class rule here lost the cascade
   and every pane painted on top of every other one. */
.eq-sw .eq-sw__stage > .eq-showcase { grid-column: 1; grid-row: 1; display: none; }

/* The way out of the set. A link, not another tab, so it never takes the
   current fill and never looks like a fourth state of the same control. */
.eq-pill--go {
  color: var(--c-primary); border-style: dashed; border-color: var(--c-line-2);
  align-items: center; gap: 0.4rem; font-weight: 700;
}
.eq-pill--go .eq-i { width: 1.2rem; height: 1.2rem; transition: transform var(--d-base) var(--e-out); }
.eq-pill--go:hover { border-style: solid; border-color: var(--c-primary); background: var(--c-accent); color: var(--c-primary); }
.eq-pill--go:hover .eq-i { transform: translateX(-3px); }
[dir="ltr"] .eq-pill--go:hover .eq-i { transform: translateX(3px); }

/* A label styled as a pill is still a control, so it needs the pointer and
   the focus ring its radio would have had. */
label.eq-pill { cursor: pointer; }

/* `.eq-pills` ships with `margin: 0`, which is right where it is a filter row
   above a list that owns its own top spacing. Here the pane's artifact starts
   immediately under it, so the row has to carry the interval itself. */
.eq-sw .eq-pills { margin-block-end: clamp(2rem, 4vw, 3rem); }

/* Positional rather than id-scoped, so a second switcher on another page needs
   no new CSS. The exit is an <a>, a different element type, so it never enters
   this count. Five panes is the ceiling; a sixth needs one more block. */
.eq-sw > input:nth-of-type(1):checked ~ .eq-sw__body .eq-pills label:nth-of-type(1) {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-primary);
}
.eq-sw > input:nth-of-type(1):checked ~ .eq-sw__body .eq-sw__stage > *:nth-child(1) { display: grid; }
.eq-sw > input:nth-of-type(1):focus-visible ~ .eq-sw__body .eq-pills label:nth-of-type(1) {
  outline: 3px solid var(--c-primary); outline-offset: 3px;
}
.eq-sw > input:nth-of-type(2):checked ~ .eq-sw__body .eq-pills label:nth-of-type(2) {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-primary);
}
.eq-sw > input:nth-of-type(2):checked ~ .eq-sw__body .eq-sw__stage > *:nth-child(2) { display: grid; }
.eq-sw > input:nth-of-type(2):focus-visible ~ .eq-sw__body .eq-pills label:nth-of-type(2) {
  outline: 3px solid var(--c-primary); outline-offset: 3px;
}
.eq-sw > input:nth-of-type(3):checked ~ .eq-sw__body .eq-pills label:nth-of-type(3) {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-primary);
}
.eq-sw > input:nth-of-type(3):checked ~ .eq-sw__body .eq-sw__stage > *:nth-child(3) { display: grid; }
.eq-sw > input:nth-of-type(3):focus-visible ~ .eq-sw__body .eq-pills label:nth-of-type(3) {
  outline: 3px solid var(--c-primary); outline-offset: 3px;
}
.eq-sw > input:nth-of-type(4):checked ~ .eq-sw__body .eq-pills label:nth-of-type(4) {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-primary);
}
.eq-sw > input:nth-of-type(4):checked ~ .eq-sw__body .eq-sw__stage > *:nth-child(4) { display: grid; }
.eq-sw > input:nth-of-type(4):focus-visible ~ .eq-sw__body .eq-pills label:nth-of-type(4) {
  outline: 3px solid var(--c-primary); outline-offset: 3px;
}
.eq-sw > input:nth-of-type(5):checked ~ .eq-sw__body .eq-pills label:nth-of-type(5) {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-primary);
}
.eq-sw > input:nth-of-type(5):checked ~ .eq-sw__body .eq-sw__stage > *:nth-child(5) { display: grid; }
.eq-sw > input:nth-of-type(5):focus-visible ~ .eq-sw__body .eq-pills label:nth-of-type(5) {
  outline: 3px solid var(--c-primary); outline-offset: 3px;
}

/* =========================================================================
   9. Partner marks
   A bare row. No tiles, no rules, no labels: just the marks, sized so they
   read as one set. Every one is an official press-kit file, self-hosted,
   copied unchanged from the product repository. Nothing is approximated.
   ========================================================================= */

.eq-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.6vw, 2.25rem);
}
/* Eight marks fit the rail on one line above the split, so they spread to both
   its edges and read as one set. Below it they wrap and pack from the start,
   because space-between on a short last row strands the items at the margins. */
@media (min-width: 62rem) { .eq-logos { justify-content: space-between; } }
.eq-logo { flex: 0 0 auto; display: flex; align-items: center; min-height: 3.5rem; }
/* The height is set per mark from the page source, as a definite value rather
   than a maximum: these SVGs carry no usable intrinsic size, and with
   `max-height` plus auto width they computed to 0x0 in a flex row and vanished.
   Heights differ per mark because the assets carry very different internal
   padding. */
.eq-logo__i { width: auto; max-width: 12rem; }
.eq-logo__n { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--c-ink); }
.eq-band--ink .eq-logo__n { color: #fff; }

/* =========================================================================
   10. Boundary callouts
   Where the site says what Eshtarek is not. Given more weight than a
   feature, not less, because the limit is the credibility.
   ========================================================================= */

/* The glossary's «مع اشترك» note. This is the only surviving use: on a page
   defining "payment gateway", where Eshtarek sits is the reader's own question.
   It is not a marketing section. See brief/05-honesty-rules.md rule 3b. */
.eq-bound {
  position: relative; border-radius: var(--r-2xl);
  background: linear-gradient(180deg, #fff, var(--c-wash));
  border: 1px solid var(--c-line); box-shadow: var(--sh-md);
  padding: clamp(1.9rem, 3.5vw, 2.5rem); max-width: 46rem;
}
.eq-bound p { margin: 0; color: var(--c-ink-soft); max-width: 56ch; }
.eq-bound p + p { margin-top: 0.8rem; }
.eq-bound > .eq-chip { position: absolute; inset-inline-start: clamp(1.9rem, 3.5vw, 2.5rem); top: 0; translate: 0 -50%; background: var(--c-primary); color: #fff; box-shadow: var(--sh-primary); }

/* =========================================================================
   11. Steps
   ========================================================================= */

.eq-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .eq-steps { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.eq-steps > * { margin-block: 0 !important; }
.eq-step { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 1.5rem 1.4rem 1.6rem; }
.eq-step::before {
  counter-increment: s; content: counter(s);
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-full);
  background: var(--c-primary); color: #fff;
  font-family: Axiforma, sans-serif; direction: ltr;
  font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.9rem;
  box-shadow: var(--sh-primary);
}
.eq-step h3 { margin: 0 0 0.4rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.eq-step p { margin: 0; font-size: 1rem; color: var(--c-ink-soft); line-height: 1.78; }
@media (min-width: 56rem) {
  .eq-step:not(:first-child)::after { content: ""; position: absolute; top: 2.6rem; inset-inline-start: -1.25rem; width: 1.25rem; height: 2px; background: var(--c-line-2); }
}

/* =========================================================================
   12. Figures
   ========================================================================= */

.eq-figs { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .eq-figs--3 { grid-template-columns: repeat(3, 1fr); } .eq-figs--4 { grid-template-columns: repeat(4, 1fr); } }
.eq-figs > * { margin-block: 0 !important; }
.eq-fig { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 1.25rem 1.3rem 1.4rem; }
.eq-band--ink .eq-fig { background: rgb(255 255 255 / 0.07); border-color: var(--c-on-deep-line); box-shadow: none; }
.eq-fig__v {
  font-family: Axiforma, sans-serif; direction: ltr; unicode-bidi: isolate;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700;
  line-height: 1.15; color: var(--c-primary); margin: 0.35rem 0 0.2rem;
  display: flex; align-items: baseline; gap: 0.2em;
}
.eq-band--ink .eq-fig__v { color: #fff; }
.eq-fig__k { font-size: 0.9375rem; color: var(--c-ink-mute); margin: 0; line-height: 1.6; }
.eq-band--ink .eq-fig__k { color: var(--c-on-deep-soft); }

/* Disclosure for a figure grid whose numbers are drawn rather than measured.
   Quiet by design: it must be readable, and must not compete with the figures
   it qualifies. Always rendered with figs(), never on its own. */
.eq-illus { font-size: 0.875rem; color: var(--c-ink-mute); margin: 1rem 0 0; line-height: 1.6; }
.eq-band--ink .eq-illus { color: var(--c-on-deep-soft); }

/* =========================================================================
   13. Cycles
   ========================================================================= */

.eq-cycles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 46rem) { .eq-cycles { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.eq-cycles > * { margin-block: 0 !important; }
.eq-cycle {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 1rem 1.1rem 1.15rem;
  transition: box-shadow var(--d-slow) var(--e-out), border-color var(--d-slow) var(--e-out);
}
.eq-cycle__n { font-size: 0.8125rem; color: var(--c-ink-mute); margin: 0 0 0.35rem; }
.eq-cycle__d { font-weight: 700; margin: 0 0 0.7rem; font-size: 1.0625rem; }
.eq-cycle--done { background: var(--c-wash); }
.eq-cycle--now { border-color: var(--c-primary); box-shadow: var(--sh-md), 0 0 0 3px rgb(81 32 203 / 0.10); }

.eq-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; padding: 0.2rem 0.7rem; border-radius: var(--r-full); }
.eq-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eq-status--done { color: var(--c-ok-ink); background: var(--c-ok-bg); }
.eq-status--now  { color: var(--c-primary-dark); background: var(--c-accent); }
.eq-status--next { color: var(--c-ink-mute); background: #F3F1F8; }

/* =========================================================================
   14. Channels
   ========================================================================= */

.eq-conn { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 56rem) { .eq-conn { grid-template-columns: minmax(0,1fr) 3.25rem minmax(0,1fr); gap: 0; } }
.eq-conn > * { margin-block: 0 !important; }
.eq-conn__ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.eq-conn__ch li {
  display: flex; align-items: center; gap: 0.9rem;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
}
/* The icon carries its own tile, so the channel reads as a thing rather than a
   bullet. Same tile as the capability cards, one stroke weight throughout. */
.eq-conn__ic {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
  background: var(--c-accent);
}
.eq-conn__ch .eq-i { color: var(--c-primary); width: 1.25rem; height: 1.25rem; flex: none; }
.eq-conn__b { display: grid; gap: 0.15rem; min-width: 0; }
.eq-conn__b strong { font-weight: 600; }
.eq-conn__b span { font-size: 0.875rem; color: var(--c-ink-mute); line-height: 1.6; }

/* The brace. Open toward the channels, closed on the far side, with one wire
   leaving its middle for the record. Logical properties throughout, so it
   mirrors with the document instead of being flipped by a transform. */
.eq-conn__j { position: relative; height: 1.75rem; }
.eq-conn__j::before {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block: 0;
  width: 1px; background: var(--c-line-2);
}
@media (min-width: 56rem) {
  .eq-conn__j { align-self: stretch; height: auto; }
  .eq-conn__j::before {
    inset-inline: 0.75rem auto; inset-block: 0.5rem; width: 0.85rem;
    border: 1px solid var(--c-line-2); border-inline-start: 0;
    border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md);
    background: none;
  }
  .eq-conn__j::after {
    content: ""; position: absolute; top: 50%;
    inset-inline: 1.6rem 0; height: 1px; background: var(--c-line-2);
  }
}
.eq-conn__out { border-radius: var(--r-xl); padding: 1.6rem 1.7rem; background: radial-gradient(120% 100% at 80% 0%, #3A1090 0%, transparent 60%), var(--c-deep); color: #fff; box-shadow: var(--sh-lg); }
.eq-conn__out strong { display: block; font-size: 1.3125rem; margin-bottom: 0.4rem; }
.eq-conn__out p { margin: 0; font-size: 0.9375rem; color: var(--c-on-deep-soft); line-height: 1.7; }

/* =========================================================================
   15. A generic merchant's storefront
   Rendered in that merchant's own identity, never in Eshtarek purple: the
   whole point of the page is that the store belongs to them.
   ========================================================================= */

.eq-store { border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid var(--c-line); box-shadow: var(--sh-lg); transition: transform var(--d-slow) var(--e-out), box-shadow var(--d-slow) var(--e-out); }
.eq-store:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }
.eq-store__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; background: #F6F5F8; border-bottom: 1px solid var(--c-line); }
.eq-store__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-2); flex: none; }
.eq-store__url { font-family: Axiforma, sans-serif; direction: ltr; unicode-bidi: isolate; font-size: 0.6875rem; color: var(--c-ink-mute); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-full); padding: 0.15rem 0.65rem; flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-store__head { padding: 0.95rem 1.1rem; color: #fff; background: var(--m-brand, #16513F); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eq-store__name { font-weight: 700; font-size: 1.0625rem; }
.eq-store__nav { display: flex; gap: 0.85rem; font-size: 0.8125rem; opacity: 0.9; }
.eq-store__body { padding: 1.1rem; display: grid; gap: 0.85rem; min-width: 0; grid-template-columns: minmax(0, 1fr); background: var(--m-wash, #F3F7F5); }
/* min-width:0 throughout. A grid item defaults to min-width:auto, so without
   these the plan row sizes the card to its own min-content and .eq-store
   (overflow:hidden) silently eats the difference instead of overflowing,
   which is why a page-level overflow sweep cannot see it. */
.eq-store__plans { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr)); }
/* auto-fit rather than a fixed 3: the widest plan in the set prices a yearly
   contract at 24,000, and three of those do not fit a third of a card at
   992px. The row drops to two columns instead of clipping. */
.eq-store__plans > * { min-width: 0; }
.eq-store__plan { border: 1px solid var(--m-rule, #CBDDD5); border-radius: var(--r-md); background: #fff; padding: 0.7rem 0.75rem; display: grid; gap: 0.25rem; }
.eq-store__plan--sel { border-color: var(--m-brand, #16513F); box-shadow: 0 0 0 1px var(--m-brand, #16513F); }
.eq-store__plan b { font-size: 0.875rem; }
.eq-store__plan .eq-amt { font-size: 1.125rem; font-weight: 700; color: var(--m-brand, #16513F); }
.eq-store__plan span { font-size: 0.75rem; color: #4A5B54; }
.eq-store__cta { background: var(--m-brand, #16513F); color: #fff; text-align: center; padding: 0.7rem; font-weight: 700; font-size: 0.9375rem; border-radius: var(--r-md); }

/* =========================================================================
   16. FAQ
   ========================================================================= */

.eq-faq { display: grid; gap: 0.75rem; max-width: 52rem; }
.eq-faq > * { margin-block: 0 !important; }
.eq-faq details, .eq-faq .wp-block-details {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.eq-faq details[open] { border-color: var(--c-line-2); box-shadow: var(--sh-md); }
.eq-faq summary {
  padding: 1.05rem 1.25rem; margin: 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.6;
  padding-inline-end: 3.4rem; position: relative;
  transition: color var(--d-base) var(--e-out);
}
.eq-faq summary::-webkit-details-marker, .eq-faq summary::marker { display: none; content: ""; }
.eq-faq summary:hover { color: var(--c-primary); }
.eq-faq summary::after {
  content: ""; position: absolute; inset-inline-end: 1.15rem; top: 1.05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; background-color: var(--c-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235120CB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
  background-size: 0.85rem; background-position: center; background-repeat: no-repeat;
  transition: transform var(--d-slow) var(--e-out), background-color var(--d-base) var(--e-out);
}
.eq-faq details[open] summary::after {
  transform: rotate(135deg); background-color: var(--c-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
}
.eq-faq details > :not(summary) { padding-inline: 1.25rem; max-width: 62ch; color: var(--c-ink-soft); }
.eq-faq details > :not(summary):last-child { padding-bottom: 1.3rem; }
@media (prefers-reduced-motion: no-preference) {
  .eq-faq details[open] > :not(summary) { animation: eq-open var(--d-slow) var(--e-out) both; }
}
@keyframes eq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   17. Pricing
   ========================================================================= */

.eq-tiers { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 54rem) { .eq-tiers { grid-template-columns: repeat(3, 1fr); } }
.eq-tiers > * { margin-block: 0 !important; }
.eq-tier {
  display: flex; flex-direction: column; gap: 0.7rem;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-2xl);
  padding: 1.85rem 1.6rem 1.9rem;
  transition: box-shadow var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.eq-tier:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.eq-tier > * { margin-block: 0 !important; }
.eq-tier--mid { background: radial-gradient(120% 100% at 80% 0%, #3A1090 0%, transparent 60%), var(--c-deep); color: #fff; border-color: transparent; box-shadow: var(--sh-xl); position: relative; }
.eq-tier--mid .eq-tier__who { color: var(--c-on-deep-soft); }
.eq-tier--mid .eq-btn { background: #fff; color: var(--c-primary); }
.eq-tier--mid .eq-btn:hover { background: var(--c-accent); }
.eq-tier__n { font-family: Axiforma, sans-serif; direction: ltr; unicode-bidi: isolate; font-size: 1.125rem; font-weight: 700; }
.eq-tier__ask { font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--c-primary); }
/* --c-primary-light is 3.36:1 on --c-deep, but this card is a radial whose
   bright stop is lighter than --c-deep, so the real ground gives 2.73:1
   against the 3:1 this size needs. */
.eq-tier--mid .eq-tier__ask { color: #fff; }
.eq-tier__who { color: var(--c-ink-soft); font-size: 1rem; line-height: 1.75; }
.eq-tier .eq-caps { margin-top: 0.5rem; padding-top: 1.1rem; border-top: 1px solid var(--c-line); }
.eq-tier--mid .eq-caps { border-top-color: var(--c-on-deep-line); }
.eq-tier .eq-btn { margin-top: auto !important; }
.eq-tier__flag { position: absolute; top: 1.15rem; inset-inline-end: 1.15rem; font-size: 0.75rem; font-weight: 700; padding: 0.22rem 0.75rem; border-radius: var(--r-full); background: rgb(255 255 255 / 0.16); color: #fff; }

/* =========================================================================
   18. Header
   ========================================================================= */

.eq-head {
  position: sticky; top: 0; z-index: 100;
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-slow) var(--e-out), box-shadow var(--d-slow) var(--e-out);
}
.eq-head[data-stuck="true"] { border-bottom-color: var(--c-line); box-shadow: var(--sh-sm); }
.eq-head__in { max-width: var(--wide); margin-inline: auto; display: flex; align-items: center; gap: 1rem; padding: 0.75rem var(--pad-x); }
.eq-head__logo { display: inline-flex; align-items: center; flex: none; }
.eq-head__logo img { height: clamp(26px, 3vw, 32px); width: auto; }
.eq-head__sp { margin-inline-start: auto; }

.eq-nav { display: none; }
@media (min-width: 64rem) { .eq-nav { display: flex; align-items: center; gap: 0.15rem; } }
.eq-nav__item { position: relative; }
.eq-nav__l {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.55rem 0.85rem; border-radius: var(--r-md);
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--c-ink);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: background var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.eq-nav__l:hover { background: var(--c-accent); color: var(--c-primary); }
.eq-nav__l[aria-current="page"] { color: var(--c-primary); font-weight: 700; }
.eq-nav__l .eq-i { width: 0.85rem; height: 0.85rem; transition: transform var(--d-base) var(--e-out); }
.eq-nav__item:hover .eq-nav__l .eq-i, .eq-nav__l[aria-expanded="true"] .eq-i { transform: rotate(180deg); }
.eq-nav__sub {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-start: 0; min-width: 19rem;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl);
  padding: 0.5rem; margin: 0; list-style: none; box-shadow: var(--sh-xl);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base);
}
.eq-nav__item:hover > .eq-nav__sub, .eq-nav__item:focus-within > .eq-nav__sub, .eq-nav__sub[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.eq-nav__sub a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--r-md); color: var(--c-ink); text-decoration: none; font-size: 1rem; font-weight: 500; transition: background var(--d-fast) var(--e-out); }
.eq-nav__sub a:hover { background: var(--c-accent); color: var(--c-primary); }
.eq-nav__d { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--c-ink-mute); margin-top: 0.1rem; }

/* The call to action stays in the header at every width. Below the desktop
   breakpoint only the CTA survives; the language and sign-in controls fold
   into the menu, because the action is what the visitor came for. */
.eq-head__util { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
.eq-head__util > :not(.eq-btn) { display: none; }
@media (min-width: 64rem) {
  .eq-head__util { margin-inline-start: 0; }
  .eq-head__util > :not(.eq-btn) { display: inline-flex; }
}
@media (max-width: 26rem) { .eq-head__util .eq-btn { font-size: 0.875rem; padding: 0.5rem 0.8rem; } }
.eq-lang { font-size: 0.875rem; font-weight: 700; color: var(--c-ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0.45rem 0.7rem; border-radius: var(--r-md); border: 1px solid var(--c-line); transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out); }
.eq-lang:hover { border-color: var(--c-primary); color: var(--c-primary); }
.eq-signin { font-size: 1rem; font-weight: 500; color: var(--c-ink); text-decoration: none; padding: 0.5rem 0.6rem; }
.eq-signin:hover { color: var(--c-primary); }

/* The burger does nothing without JavaScript, so it is not shown then. */
.eq-burger { display: none; }
.has-js .eq-burger { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.9375rem; font-weight: 700; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); padding: 0.5rem 0.8rem; cursor: pointer; }
@media (min-width: 64rem) { .eq-burger, .has-js .eq-burger { display: none; } }

/* Default open, not closed. Without this the menu is display:none and only
   JavaScript ever sets data-open, so a scripting-blocked phone had no
   navigation at all above the footer. The collapse is the enhancement. */
.eq-mnav { display: block; background: #fff; border-top: 1px solid var(--c-line); max-height: 76vh; overflow-y: auto; }
.has-js .eq-mnav { display: none; }
.has-js .eq-mnav[data-open="true"] { display: block; }
@media (min-width: 64rem) { .eq-mnav, .has-js .eq-mnav { display: none !important; } }
.eq-mnav__in { padding: 0.5rem var(--pad-x) 1.5rem; }
.eq-mnav ul { list-style: none; margin: 0; padding: 0; }
.eq-mnav > .eq-mnav__in > ul > li { border-bottom: 1px solid var(--c-line); }
.eq-mnav a:not(.eq-btn) { display: block; padding: 0.8rem 0; color: var(--c-ink); text-decoration: none; font-weight: 500; }
.eq-mnav a:not(.eq-btn):hover { color: var(--c-primary); }
.eq-mnav__g { padding: 0.9rem 0 0.2rem; font-size: 0.8125rem; font-weight: 700; color: var(--c-primary); }
.eq-mnav__sub { padding-inline-start: 1rem; border-inline-start: 2px solid var(--c-line); margin-bottom: 0.7rem; }
.eq-mnav__sub a { padding: 0.5rem 0; font-weight: 400; font-size: 1rem; }
.eq-mnav__cta { display: grid; gap: 0.6rem; padding-top: 1.1rem; }

/* =========================================================================
   19. Footer
   ========================================================================= */

.eq-foot {
  background: radial-gradient(80% 110% at 20% 100%, #34117F 0%, transparent 58%), var(--c-deep);
  color: var(--c-on-deep-soft);
  border-block-start: 1px solid var(--c-on-deep-line);
}
.eq-foot a { color: #fff; text-decoration: none; transition: opacity var(--d-fast) var(--e-out); }
.eq-foot a:hover { opacity: 0.75; text-decoration: underline; }
.eq-foot__in { max-width: var(--wide); margin-inline: auto; padding: clamp(3rem, 6vw, 4.5rem) var(--pad-x) 1.75rem; }
.eq-foot__cols { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .eq-foot__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .eq-foot__cols { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.eq-foot h2 { font-size: 0.8125rem; font-weight: 700; color: #fff; margin: 0 0 0.9rem; }
.eq-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.eq-foot li { font-size: 0.9375rem; line-height: 1.6; }
.eq-foot__legal { border-top: 1px solid var(--c-on-deep-line); margin-top: 2.5rem; padding-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .eq-foot__legal { grid-template-columns: 1fr auto; align-items: end; } }
.eq-foot__legal p { margin: 0; font-size: 0.875rem; line-height: 1.8; }
.eq-foot__logo img { height: 32px; width: auto; }


/* The three ways to reach us, as one row of official brand marks. These are
   the brands' own solid glyphs on a 24x24 box, not members of the site's
   20x20 stroked set, so they are filled with currentColor and never given a
   stroke. Each link carries its own accessible name; a mark alone is
   unreadable to anything that cannot see it. */
.eq-foot ul.eq-foot__social { display: flex; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.eq-foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.08); color: #fff; text-decoration: none;
  transition: background var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.eq-foot__social a:hover { background: #fff; color: var(--c-primary); }
.eq-foot__social .eq-i { width: 1.15rem; height: 1.15rem; }

/* =========================================================================
   20. Forms
   ========================================================================= */

.eq-form { display: grid; gap: 1.15rem; }
.eq-form__row { display: grid; gap: 0.4rem; }
.eq-form label { font-weight: 700; font-size: 0.9375rem; line-height: 1.6; }
.eq-req { color: var(--c-primary); }
.eq-form :where(input, select, textarea) {
  font: inherit; font-size: 1.0625rem; width: 100%; padding: 0.8rem 1rem;
  background: #fff; color: var(--c-ink); border: 1px solid var(--c-control); border-radius: var(--r-lg);
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.eq-form :where(input, select, textarea)::placeholder { color: var(--c-ink-mute); }
.eq-form :where(input, select, textarea):focus-visible { outline: 3px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); }
.eq-form input[type="email"], .eq-form input[type="tel"], .eq-form input[type="url"] { direction: ltr; text-align: left; }
.eq-form textarea { min-height: 8rem; resize: vertical; }
.eq-form__hint { font-size: 0.875rem; color: var(--c-ink-mute); margin: 0; }
.eq-form__err { font-size: 0.875rem; font-weight: 700; color: var(--c-err); margin: 0; display: flex; gap: 0.4rem; align-items: flex-start; }
.eq-form__err .eq-i { flex: none; margin-top: 0.28em; }
[aria-invalid="true"] { border-color: var(--c-err) !important; box-shadow: 0 0 0 3px rgb(153 27 27 / 0.12); }

.eq-note { border-radius: var(--r-lg); background: var(--c-wash); border: 1px solid var(--c-line); padding: 0.95rem 1.15rem; font-size: 0.9375rem; line-height: 1.7; }
.eq-note--err { background: var(--c-err-bg); border-color: #F3B4B4; color: #7F1D1D; }
.eq-note p { margin: 0; }
.eq-formcard { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-2xl); padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--sh-lg); }

/* Quform, dressed as one of ours. The plugin renders the contact form in
   production (see eshtarek_render_form), and it ships its own stylesheet, so
   these rules restate the .eq-form treatment against its class names rather
   than fight it selector by selector. Anything not listed here inherits the
   plugin's own layout, which is fine: what matters is that fields, labels,
   errors and the button read as the same design as every other page. */
.eq-formcard .quform-form { --qf-gap: 1.15rem; }
.eq-formcard .quform-elements { display: grid; gap: var(--qf-gap); }
.eq-formcard .quform-element { margin: 0 !important; }
.eq-formcard .quform-spacer { padding: 0 !important; }
.eq-formcard :where(.quform-label, .quform-label-text, .quform-label label) {
  font-weight: 700; font-size: 0.9375rem; line-height: 1.6; color: var(--c-ink); margin-bottom: 0.4rem; display: block;
}
.eq-formcard .quform-required { color: var(--c-primary); }
.eq-formcard :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  font: inherit; font-size: 1.0625rem; width: 100%; padding: 0.8rem 1rem;
  background: #fff; color: var(--c-ink); border: 1px solid var(--c-control); border-radius: var(--r-lg);
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.eq-formcard :where(input, select, textarea)::placeholder { color: var(--c-ink-mute); }
.eq-formcard :where(input, select, textarea):focus-visible { outline: 3px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); }
.eq-formcard :where(input[type="email"], input[type="tel"], input[type="url"]) { direction: ltr; text-align: left; }
.eq-formcard textarea { min-height: 8rem; resize: vertical; }

/* The two flows read as a choice, not as two loose dots. The plugin's own
   stylesheet loads after this one, so these carry the extra class and, where it
   sets layout on the same selector, !important. The native radio stays in the
   DOM for the keyboard and for screen readers; the label is the visible pill. */
.eq-formcard .quform-element-radio .quform-options { display: flex !important; flex-wrap: wrap; gap: 0.6rem; }
.eq-formcard .quform-element-radio .quform-options .quform-option { display: inline-flex !important; margin: 0 !important; padding: 0 !important; position: relative; }
.eq-formcard .quform-element-radio .quform-options .quform-option input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.eq-formcard .quform-element-radio .quform-options .quform-option label {
  display: inline-flex; align-items: center; cursor: pointer; margin: 0;
  border: 1px solid var(--c-control); border-radius: var(--r-full);
  padding: 0.6rem 1.15rem; font-weight: 700; font-size: 0.9375rem; line-height: 1.3;
  background: #fff; color: var(--c-ink);
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.eq-formcard .quform-element-radio .quform-options .quform-option label:hover { border-color: var(--c-primary); }
.eq-formcard .quform-element-radio .quform-options .quform-option:has(input:checked) label {
  border-color: var(--c-primary); background: var(--c-primary); color: #fff;
}
.eq-formcard .quform-element-radio .quform-options .quform-option input:focus-visible + label {
  outline: 3px solid var(--c-primary); outline-offset: 2px;
}

.eq-formcard :where(.quform-error, .quform-error-inner) { font-size: 0.875rem; font-weight: 700; color: var(--c-err); margin-top: 0.35rem; }
.eq-formcard .quform-element-error :where(input, select, textarea) { border-color: var(--c-err); box-shadow: 0 0 0 3px rgb(153 27 27 / 0.12); }
.eq-formcard .quform-description { font-size: 0.875rem; color: var(--c-ink-mute); margin-top: 0.35rem; }

/* The plugin nests the button as .quform-button-submit > button.quform-submit,
   so the wrapper has to be reset before the button can be styled, or the wrapper
   paints a block behind it. */
.eq-formcard .quform-button-submit { background: none; border: 0; padding: 0; margin: 0; display: inline-flex; }
.eq-formcard button.quform-submit,
.eq-formcard .quform-element-submit input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 0.95rem 1.6rem; border: 1px solid var(--c-primary); border-radius: var(--r-lg);
  background: var(--c-primary); color: #fff; cursor: pointer; width: auto; min-width: 0;
  transition: background var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.eq-formcard button.quform-submit:hover { transform: translateY(-1px); }
.eq-formcard button.quform-submit:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.eq-formcard .quform-button-text { color: inherit; font: inherit; }
.eq-formcard .quform-default-submit { display: none; }
.eq-formcard .quform-loading { display: none; }
.eq-formcard .quform-success-message { border-radius: var(--r-lg); background: var(--c-wash); border: 1px solid var(--c-line); padding: 0.95rem 1.15rem; }

/* =========================================================================
   21. Small parts
   ========================================================================= */

.eq-i { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eq-i--sm { width: 0.9em; height: 0.9em; }

/* --c-ink-mute is 5.2:1 on white, but the crumbs sit on the aurora tint,
   where it measures 4.45:1 and fails. --c-ink-soft clears it on both. */
.eq-crumbs { font-size: 0.875rem; color: var(--c-ink-soft); padding: 1rem var(--pad-x) 0; max-width: var(--wide); margin-inline: auto; }
.eq-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.eq-crumbs li::after { content: "/"; margin-inline-start: 0.4rem; color: var(--c-line-2); }
.eq-crumbs li:last-child::after { content: none; }
.eq-crumbs a { color: var(--c-ink-soft); text-decoration: none; }
.eq-crumbs a:hover { color: var(--c-primary); text-decoration: underline; }

.eq-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.eq-pill { display: inline-flex; font-size: 0.9375rem; font-weight: 500; padding: 0.45rem 1rem; border-radius: var(--r-full); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; background: #fff; transition: all var(--d-base) var(--e-out); }
.eq-pill:hover { border-color: var(--c-primary); color: var(--c-primary); }
.eq-pill[aria-current="true"] { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-primary); }

.eq-toc { border: 1px solid var(--c-line); background: var(--c-wash); border-radius: var(--r-xl); padding: 1.25rem 1.4rem; }
.eq-toc ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.45rem; font-size: 0.9375rem; }
.eq-toc a { color: var(--c-ink); text-decoration: none; }
.eq-toc a:hover { color: var(--c-primary); text-decoration: underline; }
.eq-toc a[aria-current="true"] { color: var(--c-primary); font-weight: 700; }
@media (min-width: 62rem) { .eq-toc { position: sticky; top: 5.5rem; } }
.eq-legal__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 62rem) { .eq-legal__grid { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; } }
.eq-legal__doc :where(h2) { scroll-margin-top: 6rem; }

.eq-share { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9375rem; }
.eq-share a { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--c-line); border-radius: var(--r-full); padding: 0.45rem 0.95rem; color: var(--c-ink); text-decoration: none; transition: all var(--d-base) var(--e-out); }
.eq-share a:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-accent); }

.eq-empty { border: 1px solid var(--c-line); border-radius: var(--r-2xl); padding: clamp(2rem, 5vw, 3rem); text-align: center; background: var(--c-wash); }
.eq-empty h2 { margin: 0 0 0.6rem; }
.eq-empty p { margin: 0 auto; max-width: 46ch; color: var(--c-ink-soft); }

.eq-searchform { display: flex; gap: 0.6rem; }
.eq-searchform .wp-block-search__input, .eq-searchform input[type="search"] { flex: 1; border: 1px solid var(--c-control); border-radius: var(--r-lg); padding: 0.8rem 1rem; font: inherit; background: #fff; }
.eq-searchform .wp-block-search__button, .eq-searchform button { border-radius: var(--r-lg); background: var(--c-primary); color: #fff; border: 0; font: inherit; font-weight: 700; padding: 0.8rem 1.5rem; cursor: pointer; box-shadow: var(--sh-primary); }
.eq-searchform button:hover { background: var(--c-primary-dark); }

.wp-block-query-pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; font-weight: 500; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 0.45rem 0.9rem; text-decoration: none; color: var(--c-ink); }
.wp-block-query-pagination .current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.eq-routes { display: grid; gap: 1rem; }
@media (min-width: 44rem) { { grid-template-columns: repeat(2, 1fr); } }
.eq-routes > * { margin-block: 0 !important; }
.eq-route { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 1.35rem 1.4rem; }
.eq-route > * { margin-block: 0 !important; }
.eq-route > * + * { margin-block-start: 0.45rem !important; }
.eq-route p { color: var(--c-ink-soft); font-size: 1rem; }
.eq-route__h { display: flex; align-items: center; gap: 0.6rem; }
.eq-route__h .eq-label { margin: 0; }

.eq-contact { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 64rem) { .eq-contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.eq-contact > * { margin-block: 0 !important; }
.eq-contact .eq-routes { grid-template-columns: 1fr; }

.eq-stack > * + * { margin-top: var(--eq-gap, 1.5rem); }
.eq-max { max-width: var(--measure); }
.eq-band__in.eq-max { max-width: var(--wide); }
.eq-band__in.eq-max > * { max-width: var(--measure); }

/* =========================================================================
   22. Consent
   ========================================================================= */

.eq-consent {
  position: fixed; inset-inline: 0.75rem; bottom: 0.75rem; z-index: 150;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2xl);
  max-width: calc(var(--wide) - 2rem); margin-inline: auto;
}
.eq-consent[hidden] { display: none; }
/* The privacy policy promises the visitor can withdraw consent at any time,
   so the control it promises has to exist. */
.eq-consent-reopen {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer;
}
.eq-consent-reopen:hover { color: var(--c-primary); }
/* While the mobile menu is open the bar steps aside; its CTA is the page's
   primary action and must stay reachable. */
body:has(.eq-mnav[data-open="true"]) .eq-consent { display: none; }
.eq-consent__in { padding: 0.9rem 1.2rem 1rem; display: grid; gap: 0.8rem; }
@media (min-width: 56rem) { .eq-consent__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; } }
.eq-consent p { margin: 0; font-size: 0.9375rem; line-height: 1.75; max-width: 70ch; color: var(--c-ink-soft); }
.eq-consent .eq-btn { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .eq-consent:not([hidden]) { animation: eq-rise var(--d-slower) var(--e-out) both; } }
@keyframes eq-rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

/* =========================================================================
   23. Motion
   Content is visible without JavaScript. The reveal engages only once the
   script has added .js to the document, and never when the visitor has asked
   for reduced motion.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); }
  .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--d-slower) var(--e-out), transform var(--d-slower) var(--e-out); }

  /* The hero settles once, on load. */
  .js .eq-hero [data-rise] { animation: eq-hero-rise 700ms var(--e-out) both; }
  .js .eq-hero [data-rise="3"] { animation-delay: 180ms; }
  @keyframes eq-hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

  /* Floating fragments drift, the way a live surface does. */
  .eq-float--drift { animation: eq-drift 7s var(--e-in-out) infinite; }
    @keyframes eq-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* The cycle strip runs, because that is what the product does. */
  .eq-cycles[data-run] .eq-cycle { animation: eq-pulse 6s var(--e-in-out) infinite; }
  .eq-cycles[data-run] .eq-cycle:nth-child(2) { animation-delay: 0.4s; }
  .eq-cycles[data-run] .eq-cycle:nth-child(3) { animation-delay: 0.8s; }
  .eq-cycles[data-run] .eq-cycle:nth-child(4) { animation-delay: 1.2s; }
  .eq-cycles[data-run] .eq-cycle:nth-child(5) { animation-delay: 1.6s; }
  @keyframes eq-pulse { 0%, 82%, 100% { box-shadow: var(--sh-sm); } 88% { box-shadow: var(--sh-md); } }
}

/* =========================================================================
   24. Hero compositions
   ========================================================================= */

.eq-hero { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.eq-hero .eq-lead { margin-top: clamp(1.1rem, 2vw, 1.5rem); }
.eq-hero .eq-actions { margin-top: clamp(1.6rem, 3vw, 2.25rem); }
.eq-hero__proof { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: clamp(1.6rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; }
.eq-hero__proof li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--c-ink-soft); }
.eq-hero__proof .eq-i { color: var(--c-ok-ink); width: 1.1rem; height: 1.1rem; }

.eq-hero__split { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 66rem) { .eq-hero__split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.eq-hero__split > * { margin-block: 0 !important; }
.eq-hero__media { position: relative; }
@media (min-width: 66rem) { .eq-hero__media { margin-inline-end: calc(var(--pad-x) * -0.75); } }

.eq-hero__row { display: grid; gap: 1.75rem; }
@media (min-width: 62rem) { .eq-hero__row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 3rem; } }
.eq-hero__row > * { margin-block: 0 !important; }

.eq-showcase { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) {
  .eq-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .eq-showcase--flip > :first-child { order: 2; }
}
.eq-showcase > * { margin-block: 0 !important; }

/* =========================================================================
   25. Core-block bridge
   Every device is composed from core WordPress blocks carrying these
   classes, so the marketing team edits them in the editor, never in HTML.
   ========================================================================= */

.wp-block-group.eq-grid, .wp-block-group.eq-tiers, .wp-block-group.eq-steps,
.wp-block-group.eq-figs, .wp-block-group.eq-cycles, .wp-block-group.eq-faq,
.wp-block-group.eq-routes, .wp-block-group.eq-conn,
.wp-block-group.eq-hero__split, .wp-block-group.eq-hero__row, .wp-block-group.eq-showcase,
.wp-block-group.eq-contact, .wp-block-group.eq-head-2col { display: grid; }
ul.eq-caps { list-style: none; }
.wp-block-button__link { border-radius: var(--r-lg) !important; }
.wp-block-separator { border: 0; border-top: 1px solid var(--c-line); opacity: 1; }
.wp-block-group.eq-band { padding: var(--band-y) var(--pad-x); }
.wp-block-group.eq-band > .eq-band__in { max-width: var(--wide); margin-inline: auto; }
/* The rhythm modifiers have to be restated here. A block-rendered band carries
   both .wp-block-group and .eq-band, so the rule above outweighs a single
   modifier class and every tight, dense, open and hero band silently rendered
   at the default height. */
.wp-block-group.eq-band--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.wp-block-group.eq-band--dense { padding-block: clamp(2.5rem, 5vw, 4rem); }
.wp-block-group.eq-band--open  { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.wp-block-group.eq-hero { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.wp-block-group.eq-hero--plain { padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }

@media print {
  .eq-head, .eq-consent, .eq-burger, .eq-mnav { display: none !important; }
  .eq-band { padding-block: 1.5rem; }
}

/* A worked example: one measured span, drawn. Used on glossary terms where a
   number is easier to see than to read. */
.eq-meter { position: relative; height: 2.75rem; background: var(--c-accent); border-radius: var(--r-md); margin: 1rem 0 0.6rem; overflow: hidden; }
.eq-meter__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--c-primary); opacity: 0.22; border-inline-end: 2px solid var(--c-primary); }
.eq-meter__mark { position: absolute; inset-block: 0; width: 1px; background: var(--c-line-2); }
.eq-meter__ends { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: var(--c-ink-mute); }
.eq-bound .eq-label { margin-top: 0.4rem; }

/* A section head with nothing to qualify it stays one column. */
.eq-head-1col { margin-bottom: clamp(2rem, 4vw, 3rem); }
.eq-head-1col > * { margin: 0 !important; }

/* A hero that opens on a statement rather than an image closes tighter: it
   carries no artefact under the words to fill the space. */
.eq-hero--plain { padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.eq-hero--plain .eq-band__in { max-width: 48rem; text-align: center; }
.eq-hero--plain .eq-lead { margin-inline: auto; max-width: 54ch; }
.eq-hero--plain .eq-actions, .eq-hero--plain .eq-hero__proof { justify-content: center; }

/* The plan name reads with the card, and its badge takes the other end. */
/* .eq-tier is a flex column, which blockifies inline-block. align-self keeps
   the plan name at the reading edge so its badge can take the other one. */
.eq-tier__n { align-self: flex-start; }
.eq-tier__flag { inset-inline-end: 1.15rem; }

/* The showcase media is one grid child, whatever it contains. */
.eq-showcase__media > * + * { margin-top: 1rem; }

/* Once the showcase stacks, its media column is the full text measure, and a
   wide table rendered into it lands around 7px. Same answer the hero already
   uses: full-bleed rather than a thumbnail nobody can read. */
@media (max-width: 61.99rem) {
  .eq-showcase__media .eq-frame { margin-inline: calc(var(--pad-x) * -1); border-radius: 0; border-inline: 0; }
}
/* Except where the showcase is one pane among several: a bleeding frame there
   escapes a composition it shares with pills, copy and its sibling panes. */
@media (max-width: 61.99rem) {
  .eq-sw .eq-showcase__media .eq-frame,
  .eq-chs .eq-showcase__media .eq-frame {
    margin-inline: 0; border-radius: var(--r-xl); border-inline: 1px solid var(--c-line);
  }
}

/* The boundary title is an h3, so it needs its own size rather than the
   heading default. */

/* =========================================================================
   26. Use-case signature devices
   The four use-case pages carry the same required beats, so each population
   gets a device the other three do not have. Without this they read as one
   page with the nouns swapped.
   ========================================================================= */

/* -- Boxes: the cycle rail. A charge and its scheduled order, over time. -- */
.eq-rail { position: relative; display: grid; gap: 1rem; }
@media (min-width: 52rem) {
  .eq-rail { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding-top: 2.75rem; }
  .eq-rail::before {
    content: ""; position: absolute; top: 1.35rem; inset-inline: 8%;
    /* to right in logical terms: the solid end belongs at the first node. */
    height: 2px; background: linear-gradient(to left, var(--c-primary) 0%, var(--c-line-2) 62%, var(--c-line) 100%);
  }
}
.eq-rail__node { position: relative; padding-inline: 0.5rem; }
@media (min-width: 52rem) { .eq-rail__node { text-align: center; } }
.eq-rail__dot {
  /* margin-inline-start, not translate: translate is physical and would put
     the dot a full width off centre the moment an LTR page ships. */
  display: none; position: absolute; top: -2.05rem; inset-inline-start: 50%; margin-inline-start: -0.7rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  /* Same reason as .eq-compare__bar: an upcoming dot at 1.42:1 on the wash
     is not visible as a shape. */
  background: #fff; border: 2px solid var(--c-control);
}
@media (min-width: 52rem) { .eq-rail__dot { display: block; } }
.eq-rail__node--done .eq-rail__dot { background: var(--c-primary); border-color: var(--c-primary); }
.eq-rail__node--now .eq-rail__dot { border-color: var(--c-primary); box-shadow: 0 0 0 4px rgb(81 32 203 / 0.14); }
.eq-rail__m { font-size: 0.8125rem; color: var(--c-ink-mute); margin: 0 0 0.2rem; }
.eq-rail__t { font-weight: 700; margin: 0 0 0.55rem; font-size: 1.0625rem; }
.eq-rail__charge {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  font-size: 0.8125rem; color: var(--c-ink-soft);
  background: var(--c-accent); border-radius: var(--r-full); padding: 0.15rem 0.7rem; margin-bottom: 0.5rem;
}

/* -- Charities: the shape of the two income models, drawn. -- */
.eq-compare { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .eq-compare { grid-template-columns: repeat(2, 1fr); } }
.eq-compare > * { margin-block: 0 !important; }
.eq-compare__col { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 1.5rem 1.5rem 1.6rem; }
.eq-compare__col--good { background: linear-gradient(180deg, #fff, var(--c-accent)); border-color: var(--c-line-2); }
.eq-compare__t { margin: 0 0 0.3rem; font-size: 1.125rem; font-weight: 700; }
.eq-compare__d { margin: 0 0 1.25rem; font-size: 1rem; color: var(--c-ink-soft); line-height: 1.75; }
.eq-compare__plot { display: flex; align-items: flex-end; gap: 0.35rem; height: 7rem; }
/* --c-line-2 is 1.54:1 on white. This series is half the comparison, so a
   low-vision reader who cannot see it cannot read the section at all.
   --c-control clears 3:1 without turning the muted series into a second
   emphasis. */
.eq-compare__bar { flex: 1; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--c-control); min-height: 3px; }
.eq-compare__col--good .eq-compare__bar { background: var(--c-primary); }
.eq-compare__axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--c-ink-mute); margin-top: 0.55rem; }

/* -- SaaS: the plan ladder, and what an upgrade actually charges. -- */
.eq-ladder { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 48rem) { .eq-ladder { grid-template-columns: repeat(3, 1fr); } }
.eq-ladder > * { margin-block: 0 !important; }
.eq-ladder__step {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl);
  padding: 1.25rem 1.3rem 1.4rem; display: grid; gap: 0.3rem; align-content: end;
}
@media (min-width: 48rem) {
  .eq-ladder__step:nth-child(1) { min-height: 7rem; }
  .eq-ladder__step:nth-child(2) { min-height: 9.25rem; }
  .eq-ladder__step:nth-child(3) { min-height: 11.5rem; }
}
.eq-ladder__step--to { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgb(81 32 203 / 0.10); }
.eq-ladder__n { font-size: 0.9375rem; color: var(--c-ink-mute); margin: 0; }
.eq-ladder__p { font-family: Axiforma, sans-serif; direction: ltr; unicode-bidi: isolate; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; margin: 0; color: var(--c-ink); }
.eq-ladder__step--to .eq-ladder__p { color: var(--c-primary); }
.eq-ladder__diff {
  margin-top: 1.25rem; border-radius: var(--r-xl); padding: 1.25rem 1.4rem;
  background: radial-gradient(120% 100% at 80% 0%, #3A1090 0%, transparent 60%), var(--c-deep); color: #fff;
  display: grid; gap: 0.35rem;
}
.eq-ladder__diff p { margin: 0; }
/* A dark island inside a light band: the .eq-band--ink overrides do not reach
   here, so the label keeps its brand purple over deep purple unless it is
   restated. Same reason as .eq-path__node--end below. */
.eq-ladder__diff .eq-label { color: var(--c-on-deep-soft); }
.eq-ladder__diff strong { font-size: 1.375rem; font-family: Axiforma, sans-serif; direction: ltr; unicode-bidi: isolate; }
.eq-ladder__diff span { color: var(--c-on-deep-soft); font-size: 0.9375rem; line-height: 1.7; }

/* -- Services: the path a renewing contract takes, once. -- */
.eq-path { display: grid; gap: 1rem; position: relative; }
@media (min-width: 54rem) {
  .eq-path { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .eq-path__node:not(:first-child)::before {
    content: ""; position: absolute; top: 50%; inset-inline-start: -2.5rem;
    width: 2.5rem; height: 2px; translate: 0 -1px;
    background: var(--c-line-2);
  }
  .eq-path__node:not(:first-child)::after {
    content: ""; position: absolute; top: 50%; inset-inline-start: -2.5rem;
    width: 0.55rem; height: 0.55rem; translate: 0 -50%; rotate: 45deg;
    /* The two borders form an L whose free vertex is the arrowhead. In RTL the
       flow runs right to left, so the head must point left: that is the
       inline-end + block-end corner. inline-start + block-end points straight
       down after the rotation. Direction-sensitive under rotate, so the LTR
       mirror below is not optional. */
    border-inline-end: 2px solid var(--c-line-2);
    border-block-end: 2px solid var(--c-line-2);
  }
  [dir="ltr"] .eq-path__node:not(:first-child)::after { rotate: -135deg; }
}
.eq-path > * { margin-block: 0 !important; }
.eq-path__node { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 1.4rem 1.4rem 1.5rem; }
.eq-path__node--end { background: radial-gradient(120% 100% at 80% 0%, #3A1090 0%, transparent 60%), var(--c-deep); color: #fff; border-color: transparent; }
.eq-path__k { font-size: 0.8125rem; font-weight: 700; color: var(--c-primary); margin: 0 0 0.4rem; }
.eq-path__node--end .eq-path__k { color: var(--c-on-deep-soft); }
.eq-path__t { margin: 0 0 0.4rem; font-size: 1.0625rem; font-weight: 700; }
.eq-path__node p:last-child { margin: 0; font-size: 1rem; color: var(--c-ink-soft); line-height: 1.75; }
/* Must sit after the rule above: both selectors weigh (0,2,1), so only source
   order decides, and without this the closing paragraph of the end node takes
   the light-ground body colour onto a deep-purple card. */
.eq-path__node--end p, .eq-path__node--end p:last-child { color: var(--c-on-deep-soft); }

/* A compact ledger of figures, for a page that already carries a card grid. */
/* Every other block on the site is held to a measure. Without this the rows
   run 1198px and put the key and its value at opposite ends of the screen. */
.eq-ledger { max-width: 46rem; border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; background: #fff; }
.eq-ledger__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--c-line); }
.eq-ledger__row:first-child { border-top: 0; }
.eq-ledger__k { color: var(--c-ink-soft); font-size: 1rem; }
.eq-ledger__v { font-family: Axiforma, sans-serif; direction: ltr; unicode-bidi: isolate; font-weight: 700; font-size: 1.25rem; color: var(--c-primary); display: inline-flex; align-items: baseline; gap: 0.2em; }
.eq-ledger__n { font-size: 0.875rem; color: var(--c-ink-mute); }

/* A statement the hero must carry but that is not the argument itself. */
.eq-hero__after {
  font-size: 1rem; line-height: 1.8; color: var(--c-ink-soft);
  max-width: 52ch; padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--c-line-2);
}