/* The filter pages, loaded after by_level.css.

   Only what by_level.css has no equivalent for: the hand-written advice list
   and the row of links to neighbouring filters. Everything else on the page
   (header, breadcrumbs, h1, grid, CTA, footer) is the level page's furniture
   and is deliberately not restyled here: two stylesheets both owning the card
   is how they drift apart.

   The advice block is styled *down*, not up. It exists because it is the only
   text on the page written by hand, and without it seventeen pages are one
   template with a word swapped, which is the duplicate-content pattern. But
   the reason a visitor came is the grid, so the block reads as a footnote to
   it: no card, no rules, body-sized text, two columns on a wide screen. It was
   a white panel with orange bars once and ate half the viewport.

   Logical properties only, same as by_level.css. These pages are English only
   today and the first Arabic one must not need a rewrite. */

/* by_level.css caps the lede at 560px, which is right on a page whose next
   element is a scrolling row and wrong here: above a full-width grid the same
   paragraph wraps at 45% and reads as a broken column. Wide, but not the full
   1140px of the wrapper, which would run past 120 characters a line. */
.lede{ max-width:62rem; margin-bottom:32px; }

.how{
  margin:56px 0 0;
  padding-top:28px;
  border-top:1px solid var(--rule);
  /* A reading measure, not the full 1140px of the grid above it. This is the
     one block on the page meant to be read rather than scanned. */
  max-width:52rem;
}

.how__sec + .how__sec{ margin-top:36px; }

.how__h{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:clamp(1.2rem,3vw,1.5rem);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.25;
}

.how__p{
  margin:0 0 16px;
  color:var(--ink-2);
  font-size:1.0625rem;
  line-height:1.6;
}

/* Real bullets. They were removed once in favour of plain paragraphs in two
   columns, and the block then read as an unformatted wall. */
.how__list{
  margin:0;
  padding-inline-start:22px;
  list-style:disc;
}

.how__list li{
  margin:0 0 9px;
  padding-inline-start:4px;
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.6;
}

.how__list li::marker{ color:var(--accent); }

/* Price and platform, the two facts that decide the tap. Small, because they
   are reassurance rather than pitch, but above and below the button so neither
   is missed. */
.get__free{
  margin:0 0 18px;
  font-size:.9375rem;
  color:var(--ink-2);
}

.get__plat{
  margin:12px 0 0;
  font-size:.875rem;
  color:var(--ink-3);
}

.near{ margin:40px 0 0; }

.near__h{
  margin:0 0 12px;
  font-size:.8125rem;
  font-weight:600;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.near__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.near__list a{
  display:inline-block;
  padding:7px 13px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:var(--card);
  color:var(--accent-t);
  text-decoration:none;
  font-size:.9375rem;
}

.near__list a:hover{ border-color:var(--accent); }

.near__n{
  margin-inline-start:6px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}