/* ==========================================================================
   dns-poster-inner.css
   dubainotaryservices.ae, 0.3.0, the Night poster design on the inner pages
   (service pages, hubs, legal pages, the blog), English and Arabic.

   SCOPE
   Loaded after dns-poster.css on every page except the two homes, and in the
   editor. Every class here starts with np- like phase 1. The inner pages use
   the approved vocabulary of the home (split heads, cards and surfaces,
   hairlines, outlined numerals, square checkbox glyphs, the fee table, the
   FAQ accordion, the centred final call to action) and reuse its classes
   where the same component appears (np-sec, np-shead, np-ways, np-need,
   np-track, np-ftable, np-faq, np-rev, np-quote, np-aside, np-pband,
   np-final, np-vs, np-auth). This file adds the parts the inner pages need
   and the variants of those components that carry a page's own content.

   The leaf blocks of each page (headings, paragraphs, lists, tables, the
   FAQ items, the photos) are the live blocks, unchanged apart from their
   class names. A leaf that never had a class keeps none, so it is styled
   here through its container (np-prose__body > p and so on).

   TOKENS, RIGHT TO LEFT
   No hex: colours are the --np-* aliases of dns-tokens.css. Logical
   properties only; --np-dir, --np-track and --np-upper do the rest, as in
   dns-poster.css.
   ========================================================================== */


/* ---------- 1. Inner page rhythm ------------------------------------------ */

/* The page title stops growing at the 1440 size (78px): its column stops
   growing there too (700px), and at 84px titles broke onto a third line
   with one word left on it. */
:root {
  --np-isec: clamp(64px, 6.6vw, 104px);
  --np-fs-ih1: clamp(40px, 5.4vw, 78px);
  --np-fs-ih2: clamp(30px, 3.1vw, 46px);
}

/* Inner sections are a little tighter than the home's: an inner page is
   longer, and the hairline at the top of every head already separates. */
.np-isec { padding-block: var(--np-isec); }
.np-isec--follow { padding-block-start: 0; }
.np-isec .np-shead { margin-block-end: clamp(32px, 4vw, 52px); }

/* Heads on the inner pages: the title may be an h2, an h3 or a title
   paragraph (a steps lead, a FAQ group title), all at the h2 size. */
.np-shead > :is(h2, h3),
.np-shead > p.np-shead__t {
  font: 600 var(--np-fs-ih2)/1.04 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  color: var(--np-ink);
  max-inline-size: 18em;
  text-wrap: balance;
}
.np-s-ink .np-shead > :is(h2, h3),
.np-s-ink .np-shead > p.np-shead__t { color: var(--np-white); }
.np-shead--solo { grid-template-columns: minmax(0, 1fr); }
.np-shead > p:not(.np-shead__t) { align-self: end; }

/* Text links inside running copy. */
.np-sec :is(.np-prose__body, .np-isplit__text, .np-icallout, .np-doc__body, .np-article, .np-faq__item) a:not([class]) {
  color: var(--np-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.np-sec :is(.np-prose__body, .np-isplit__text, .np-doc__body, .np-article, .np-faq__item) a:not([class]):hover { color: var(--np-green-hover); }
.np-s-ink :is(.np-prose__body, .np-icallout) a:not([class]),
.np-icallout a:not([class]) { color: var(--np-green-bright); }

/* The arrow link the inner pages use in place of the old card links: the
   arrow is the span the content already carries. */
.np-ilink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font: 600 15px/1.3 var(--np-sans);
  color: var(--np-green);
  text-decoration: none;
}
.np-sec a.np-ilink { color: var(--np-green); text-decoration: none; }
.np-sec a.np-ilink:hover {
  color: var(--np-green-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.np-ilink__i {
  display: inline-block;
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--np-i-arrow) center / contain no-repeat;
  mask: var(--np-i-arrow) center / contain no-repeat;
  transform: scaleX(var(--np-dir));
  transition: transform 0.25s var(--np-ease);
}
.np-ilink:hover .np-ilink__i { transform: translateX(calc(4px * var(--np-dir))) scaleX(var(--np-dir)); }
:is(.np-s-ink, .np-way--on, .np-aside, .np-icallout, .np-card--ink) a.np-ilink { color: var(--np-green-bright); }
:is(.np-s-ink, .np-aside, .np-icallout) a.np-ilink:hover { color: var(--np-white); }
.np-sec .np-way--on a.np-ilink,
.np-sec .np-way--on a.np-ilink:hover { color: var(--np-white); }

/* Buttons the content carries as a paragraph around an anchor. */
.np-ibtns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.np-ibtns > p { margin: 0; }


/* ---------- 2. The inner hero ---------------------------------------------
   The page's photo full width under the ink overlay, the H1 large and
   bottom aligned on the start side, the lede and the actions on the end
   side, then the rail of the page's key facts on the bottom edge. Shorter
   than the home's poster. Pages without a photo use the ink version. */

.np-ihero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-block-size: clamp(560px, 44vw, 640px);
  overflow: hidden;
  background: var(--np-ink);
  color: var(--np-white);
  font-family: var(--np-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.np-ihero,
.np-ihero *,
.np-ihero *::before,
.np-ihero *::after { box-sizing: border-box; }
.np-ihero :where(h1, p, figure, ul, li) { margin: 0; }

.np-ihero > .np-ihero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
}
.np-ihero__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 45%;
}
/* The scrim is deep enough for the small text on the lightest photos (the
   eyebrow, the note, the rail labels at 4.5:1). */
.np-ihero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--np-side, 90deg), rgba(16, 22, 25, 0.78) 0%, rgba(16, 22, 25, 0.55) 50%, rgba(16, 22, 25, 0.7) 100%),
    linear-gradient(180deg, rgba(16, 22, 25, 0.55) 0%, rgba(16, 22, 25, 0.28) 34%, rgba(16, 22, 25, 0.55) 66%, rgba(16, 22, 25, 0.95) 100%);
}
[dir="rtl"] .np-ihero { --np-side: 270deg; }

/* The ink version: no photo, a hairline grid the rail sits on. */
.np-ihero--ink {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(23, 192, 137, 0.10) 0%, rgba(23, 192, 137, 0) 55%),
    var(--np-ink);
}

.np-ihero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(32px, 5vw, 80px);
  inline-size: 100%;
  padding-block-start: clamp(48px, 5vw, 72px);
}
.np-ihero__head {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  min-inline-size: 0;
  padding-block-end: clamp(32px, 3.4vw, 44px);
}
.np-ihero__side {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-inline-size: 0;
  padding-block-end: 32px;
}
.np-ihero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 22px;
  font: 600 13px/1.3 var(--np-sans);
  letter-spacing: calc(0.12em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-bright);
}
.np-ihero__eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  flex: none;
  background: currentColor;
}
.np-ihero .np-ihero__title {
  margin: 0;
  font: 700 var(--np-fs-ih1)/0.96 var(--np-display);
  letter-spacing: calc(-0.035em * var(--np-track));
  color: var(--np-white);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}
.np-ihero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--np-text-invert);
}
.np-ihero__lede + .np-ihero__lede { margin-block-start: 14px; }
.np-ihero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block-start: 26px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}
.np-ihero__actions > p { margin: 0; }
.np-ihero__note {
  margin-block-start: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--np-text-invert);
}

/* The rail: the page's own key facts (its proof row), on the bottom edge. */
.np-irail {
  --np-rail-pad: 24px;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--np-irail-n, 4), minmax(0, 1fr));
  margin-inline: calc(-1 * var(--np-rail-pad));
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}
.np-irail--3 { --np-irail-n: 3; }
.np-irail__cell {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 20px var(--np-rail-pad) 26px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}
.np-irail__cell:first-child { border-inline-start: 0; }
.np-irail__n {
  font: 500 13px/1 var(--np-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(0.06em * var(--np-track));
  color: var(--np-green-bright);
}
.np-ihero .np-irail__fig {
  margin-block-start: 12px;
  font: 600 22px/1.15 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  font-variant-numeric: tabular-nums;
  color: var(--np-white);
}
.np-irail__label {
  margin-block-start: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--np-text-invert);
}
/* A rail of counts (services, fees): the figure is the outlined numeral. */
.np-ihero .np-irail--num .np-irail__fig {
  margin-block-start: 10px;
  font: 700 clamp(56px, 5vw, 76px)/0.85 var(--np-display);
  letter-spacing: calc(-0.04em * var(--np-track));
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}
.np-ihero .np-irail--num .np-irail__cell:first-child .np-irail__fig {
  color: var(--np-green-bright);
  -webkit-text-stroke: 0;
}

/* A compact hero: legal pages and articles. */
.np-ihero--compact { min-block-size: clamp(440px, 34vw, 520px); }
.np-ihero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-block-start: 22px;
  font-size: 15px;
  color: var(--np-muted-invert);
}
.np-ihero__meta > span + span::before {
  content: "";
  display: inline-block;
  inline-size: 4px;
  block-size: 4px;
  margin-inline-end: 14px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--np-green-bright);
}


/* ---------- 3. Prose beside its heading, statements, the intro ------------ */

.np-prose {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-s-ink .np-prose { border-block-start: var(--np-hair-d); }
.np-s-ground .np-prose,
.np-s-soft .np-prose { border-block-start-color: var(--np-tint); }
.np-prose > :is(h2, h3) {
  font: 600 var(--np-fs-ih2)/1.04 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  color: var(--np-ink);
  max-inline-size: 15em;
  text-wrap: balance;
}
.np-s-ink .np-prose > :is(h2, h3) { color: var(--np-white); }
.np-prose__body { min-inline-size: 0; }
.np-prose__body > p,
.np-prose__body > ul > li,
.np-prose__body > ol > li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--np-text);
}
.np-s-ink .np-prose__body > p,
.np-s-ink .np-prose__body > ul > li { color: var(--np-text-invert); }
.np-prose__body > * + * { margin-block-start: 18px; }
.np-prose__body > p:first-child {
  font: 500 clamp(19px, 1.6vw, 22px)/1.5 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-ink);
}
.np-s-ink .np-prose__body > p:first-child { color: var(--np-white); }
.np-prose__body > p:first-child:last-child { font: 400 18px/1.7 var(--np-sans); color: var(--np-text); }
.np-s-ink .np-prose__body > p:first-child:last-child { color: var(--np-text-invert); }

/* The statement band: an ink section whose one paragraph is the point. */
.np-prose--stmt .np-prose__body > p:first-child,
.np-prose--stmt .np-prose__body > p:first-child:last-child {
  font: 500 clamp(21px, 2vw, 28px)/1.42 var(--np-display);
  letter-spacing: calc(-0.012em * var(--np-track));
  color: var(--np-white);
}
.np-prose--stmt > :is(h2, h3) { color: var(--np-green-bright); }
.np-s-ink .np-prose--stmt > :is(h2, h3) { color: var(--np-green-bright); }

/* Lists inside prose: square checkbox glyphs, as on the home. */
.np-prose__body > ul,
.np-doc__body > ul,
.np-isplit__text > ul,
.np-article > ul,
.np-icallout > ul {
  --np-li-pad: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: var(--np-hair);
}
:is(.np-prose__body, .np-doc__body, .np-isplit__text, .np-article) > :is(ul, ol) {
  margin-block-start: 20px;
}
/* The item is a block (an item may hold a <strong> lead and its text, which
   must stay one line of prose); the glyph is placed in its start padding. */
:is(.np-prose__body, .np-doc__body, .np-isplit__text, .np-article, .np-icallout) > ul > li {
  position: relative;
  display: block;
  margin: 0;
  padding-block: 12px;
  padding-inline-start: 38px;
  border-block-start: var(--np-hair);
  font-size: 16px;
  line-height: 1.55;
}
:is(.np-prose__body, .np-isplit__text, .np-article) > ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 13px;
  inline-size: 22px;
  block-size: 22px;
  box-sizing: border-box;
  border: 1.5px solid var(--np-green);
  border-radius: var(--np-r-sm);
}
:is(.np-prose__body, .np-isplit__text, .np-article) > ul > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 17px;
  inline-size: 14px;
  block-size: 14px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-check-b) center / contain no-repeat;
  mask: var(--np-i-check-b) center / contain no-repeat;
}
/* A document's lists and a callout's lists are plain lists: a small square. */
:is(.np-doc__body, .np-icallout) > ul > li { padding-inline-start: 24px; }
:is(.np-doc__body, .np-icallout) > ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: calc(12px + 0.78em - 4px);
  inline-size: 8px;
  block-size: 8px;
  border-radius: 1px;
  background: var(--np-green);
}
/* Numbered lists keep their numbers (the poster resets every list to no
   marker): the figure in green, the items spaced like the article's. */
:is(.np-prose__body, .np-doc__body, .np-isplit__text) > ol {
  padding-inline-start: 1.6em;
  list-style: decimal;
}
:is(.np-prose__body, .np-doc__body, .np-isplit__text) > ol > li { padding-inline-start: 6px; }
:is(.np-prose__body, .np-doc__body, .np-isplit__text) > ol > li + li { margin-block-start: 10px; }
:is(.np-prose__body, .np-doc__body, .np-isplit__text) > ol > li::marker {
  color: var(--np-green-hover);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.np-s-ink .np-prose__body > ol > li { color: var(--np-text-invert); }
.np-s-ink .np-prose__body > ol > li::marker { color: var(--np-green-bright); }
.np-s-ink :is(.np-prose__body, .np-icallout) > ul,
.np-icallout > ul { border-block-end-color: rgba(255, 255, 255, 0.14); }
/* A list in a callout may list what is not done, so its marker is the small
   square of a plain list, never a tick. */
.np-icallout > ul > li { border-block-start-color: rgba(255, 255, 255, 0.14); color: var(--np-text-invert); }
.np-icallout > ul > li::before { background: var(--np-green-bright); }

/* The intro paragraph some hubs open with, set as a statement. */
.np-intro {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 20px 48px;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-intro::before {
  content: "";
  inline-size: 44px;
  block-size: 4px;
  margin-block-start: 14px;
  border-radius: var(--np-r-sm);
  background: var(--np-green);
}
.np-intro > p {
  font: 500 clamp(20px, 1.75vw, 25px)/1.45 var(--np-display);
  letter-spacing: calc(-0.015em * var(--np-track));
  color: var(--np-ink);
}


/* ---------- 4. Cards: the page's documents, with fee and what to bring ----
   White cards with a hairline, the icon the content carries in a green soft
   tile, the title, the fee in tabular figures, the text, a tick list, the
   "bring" line under a hairline, and the arrow link at the foot. */

.np-icards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.np-icards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.np-icard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 28px 28px 20px;
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-lg);
  background: var(--np-white);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.np-icard:hover { border-color: var(--np-border-strong); box-shadow: var(--np-shadow); }
.np-s-white .np-icard { background: var(--np-white); }
.np-icard > .dns-leaf__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: 22px;
  border-radius: var(--np-r);
  background: var(--np-green-soft);
  color: var(--np-green-hover);
}
.np-icard > .dns-leaf__icon svg { display: block; inline-size: 24px; block-size: 24px; }
.np-sec .np-icard__title {
  font: 600 var(--np-fs-h3l)/1.12 var(--np-display);
  letter-spacing: calc(-0.02em * var(--np-track));
  color: var(--np-ink);
}
.np-icard__fee {
  margin-block-start: 10px;
  font: 600 19px/1.3 var(--np-display);
  font-variant-numeric: tabular-nums;
  color: var(--np-green-hover);
}
.np-icard > p:not([class*="np-icard__"]),
.np-icard > p.wp-block-paragraph:not([class*="np-icard__"]) {
  margin-block-start: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--np-muted);
}
.np-icard__list { margin-block-start: 16px; }
.np-icard__list > li,
.np-dir__list > li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding-block: 8px;
  border-block-start: var(--np-hair);
  font-size: 14px;
  line-height: 1.5;
  color: var(--np-text);
}
.np-icard__list > li::before,
.np-dir__list > li::before {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 2px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-check) center / contain no-repeat;
  mask: var(--np-i-check) center / contain no-repeat;
}
.np-icard__meta {
  margin-block-start: 18px;
  padding-block-start: 14px;
  border-block-start: var(--np-hair);
  font-size: 14px;
  line-height: 1.5;
  color: var(--np-muted);
}
.np-icard__go { margin-block-start: auto; padding-block-start: 14px; }

/* The contact channels: the meta line is the number, the address or the
   email, set large. */
.np-icards--talk .np-icard { padding-block-end: 24px; }
.np-icards--talk .np-icard__meta {
  order: 9;
  margin-block-start: auto;
  padding-block-start: 18px;
  font: 600 18px/1.35 var(--np-display);
  color: var(--np-ink);
  overflow-wrap: anywhere;
}
.np-icards--talk .np-icard__go { order: 10; margin-block-start: 0; padding-block-start: 6px; }
.np-icards--talk .np-icard:nth-child(2) { background: var(--np-ink); border-color: var(--np-ink); color: var(--np-text-invert); }
.np-icards--talk .np-icard:nth-child(2) .np-icard__title,
.np-icards--talk .np-icard:nth-child(2) .np-icard__meta { color: var(--np-white); }
.np-icards--talk .np-icard:nth-child(2) > p:not([class*="np-icard__"]),
.np-icards--talk .np-icard:nth-child(2) .np-icard__list > li { color: var(--np-text-invert); }
.np-icards--talk .np-icard:nth-child(2) :is(.np-icard__list > li, .np-icard__meta) { border-block-start-color: rgba(255, 255, 255, 0.14); }
.np-icards--talk .np-icard:nth-child(2) .np-icard__list > li::before { background-color: var(--np-green-bright); }
.np-icards--talk .np-icard:nth-child(2) > .dns-leaf__icon { background: rgba(23, 192, 137, 0.16); color: var(--np-green-bright); }
.np-icards--talk .np-icard:nth-child(2) a.np-ilink { color: var(--np-green-bright); }

/* Worked examples (fees): the fee is the headline figure of the card. */
.np-icards--fee .np-icard__fee {
  order: -1;
  margin-block: 0 18px;
  font: 600 clamp(26px, 2.4vw, 34px)/1.05 var(--np-display);
  letter-spacing: calc(-0.02em * var(--np-track));
  color: var(--np-ink);
}
.np-icards--fee .np-icard > .dns-leaf__icon { display: none; }
.np-icards--fee .np-icard { border-block-start: 4px solid var(--np-green); }


/* ---------- 5. Directory: the services hub's instruments ------------------
   One row per instrument across the container: name and fee, what it is
   and the two things to bring, what to bring and the link. */

.np-dir { border-block-end: var(--np-hair); }
.np-s-ground .np-dir { border-block-end-color: var(--np-tint); }
.np-dir__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: 16px clamp(24px, 3.4vw, 56px);
  align-items: start;
  padding-block: 32px;
  border-block-start: var(--np-hair);
}
.np-s-ground .np-dir__item { border-block-start-color: var(--np-tint); }
.np-dir__a,
.np-dir__b,
.np-dir__c { min-inline-size: 0; }
.np-dir__a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}
.np-dir__a > .dns-leaf__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--np-r);
  background: var(--np-white);
  color: var(--np-green-hover);
}
.np-s-white .np-dir__a > .dns-leaf__icon { background: var(--np-green-soft); }
.np-dir__a > .dns-leaf__icon svg { inline-size: 24px; block-size: 24px; }
.np-dir__a > :not(.dns-leaf__icon) { grid-column: 2; }
.np-sec .np-dir__title {
  font: 600 clamp(22px, 2vw, 28px)/1.1 var(--np-display);
  letter-spacing: calc(-0.02em * var(--np-track));
  color: var(--np-ink);
}
.np-dir__fee {
  margin-block-start: 8px;
  font: 600 18px/1.3 var(--np-display);
  font-variant-numeric: tabular-nums;
  color: var(--np-green-hover);
}
.np-dir__b > p { font-size: 16px; line-height: 1.6; color: var(--np-text); }
.np-dir__list { margin-block-start: 14px; }
.np-s-ground .np-dir__list > li { border-block-start-color: var(--np-tint); }
.np-dir__meta { font-size: 14px; line-height: 1.5; color: var(--np-muted); }
.np-dir__go { margin-block-start: 8px; }


/* ---------- 6. Related pages, and the short lists of who and what ---------
   A row of hairline columns, like the hero rail on a light ground: a title,
   one line, the arrow link. */

.np-rel {
  display: grid;
  grid-template-columns: repeat(var(--np-rel-n, 4), minmax(0, 1fr));
  border-block: var(--np-hair);
}
.np-rel--3 { --np-rel-n: 3; }
.np-rel--2 { --np-rel-n: 2; }
.np-rel--6 { --np-rel-n: 3; }
.np-s-ground .np-rel { border-block-color: var(--np-tint); }
.np-rel__item {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 28px 28px 22px;
  border-inline-start: var(--np-hair);
}
.np-s-ground .np-rel__item { border-inline-start-color: var(--np-tint); }
.np-rel--6 .np-rel__item:nth-child(n+4) { border-block-start: var(--np-hair); }
.np-rel--6 .np-rel__item:nth-child(3n+1),
.np-rel__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.np-rel__item:last-child { padding-inline-end: 0; }
.np-rel--6 .np-rel__item:nth-child(3n) { padding-inline-end: 0; }
.np-sec .np-rel__title {
  font: 600 20px/1.2 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-ink);
}
.np-rel__item > p:not(.np-rel__go) { margin-block-start: 10px; font-size: 15px; line-height: 1.55; color: var(--np-muted); }
.np-rel__go { margin-block-start: auto; padding-block-start: 12px; }
.np-rel__item:has(.np-rel__go) { transition: background-color 0.22s ease; }


/* ---------- 7. Three ways (the home's ink band, numbered by the CSS) ------- */

.np-ways--i { counter-reset: np-way; }
.np-ways--i > .np-way::before {
  counter-increment: np-way;
  content: counter(np-way, decimal-leading-zero);
  display: block;
  font: 700 clamp(88px, 8vw, 112px)/0.8 var(--np-display);
  letter-spacing: calc(-0.05em * var(--np-track));
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.np-ways--i > .np-way--on::before { color: var(--np-white); -webkit-text-stroke: 0; }
.np-ways--i .np-way > h3 { margin-block-start: 36px; }
.np-ways--i .np-way > p:not(.np-way__go) { margin-block-start: 12px; color: var(--np-muted-invert); }
.np-ways--i .np-way--on > p:not(.np-way__go) { color: var(--np-white); }
.np-ways--i .np-way__go { margin-block-start: auto; padding-block-start: 24px; }


/* ---------- 8. Numbered rows (the home's "what we need" card) -------------- */

.np-need--i .np-need__row > .np-need__t {
  grid-column: 2;
  font: 600 17px/1.4 var(--np-sans);
  letter-spacing: 0;
  color: var(--np-ink);
}
.np-need--i .np-need__row > .np-need__d {
  grid-column: 2;
  margin-block-start: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--np-muted);
}
.np-need--one { grid-template-columns: minmax(0, 1fr); }
.np-s-white .np-need--i { background: var(--np-ground); border-color: var(--np-ground); }
.np-s-white .np-need--i .np-need__row { border-block-start-color: var(--np-tint); }
.np-s-white .np-need--i .np-need__col + .np-need__col { border-inline-start-color: var(--np-tint); }


/* ---------- 9. Steps on the home's track ----------------------------------- */

.np-track--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np-track--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.np-track--i .np-step > h3 { font-size: 20px; }
.np-s-ground .np-track--i .np-step__disc { background: var(--np-ground); }
.np-s-ground .np-step--on .np-step__disc { box-shadow: 0 0 0 6px var(--np-ground); }
/* The highlighted step stays a green disc with a white numeral on every
   ground: the ground disc above repaints the plain steps only. */
.np-s-ground .np-track--i .np-step--on .np-step__disc {
  background: var(--np-green);
  border-color: var(--np-green);
  color: var(--np-white);
}
.np-s-ink .np-track--i::before { background: rgba(255, 255, 255, 0.2); }
.np-sec.np-s-ink .np-track--i .np-step__disc { background: var(--np-ink); border-color: rgba(255, 255, 255, 0.5); color: var(--np-white); }
.np-sec.np-s-ink .np-track--i .np-step--on .np-step__disc { background: var(--np-green); border-color: var(--np-green); box-shadow: 0 0 0 6px var(--np-ink); }
.np-s-ink .np-track--i .np-step > h3 { color: var(--np-white); }
.np-s-ink .np-track--i .np-step > p:not(.np-step__disc) { color: var(--np-muted-invert); }


/* ---------- 10. Callouts --------------------------------------------------- */

/* Two callouts side by side keep their own heights: stretched to a long
   neighbour, a two line callout was mostly empty ink. */
.np-icallouts {
  display: grid;
  grid-template-columns: repeat(var(--np-co-n, 1), minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.np-icallouts--2 { --np-co-n: 2; }
.np-icallout {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 18px;
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--np-r-lg);
  background: var(--np-ink);
  color: var(--np-text-invert);
}
.np-icallout::before {
  content: "";
  grid-row: 1;
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: 4px;
  background-color: var(--np-green-bright);
  -webkit-mask: var(--np-i-info) center / contain no-repeat;
  mask: var(--np-i-info) center / contain no-repeat;
}
.np-icallout > * { grid-column: 2; }
.np-sec .np-icallout__title {
  grid-row: 1;
  font: 600 clamp(21px, 1.9vw, 26px)/1.2 var(--np-display);
  letter-spacing: calc(-0.015em * var(--np-track));
  color: var(--np-white);
}
.np-icallout__body { margin-block-start: 14px; font-size: 16px; line-height: 1.65; color: var(--np-text-invert); }
.np-icallout > ul { margin-block-start: 18px; }
/* A single callout spans the measure: the title beside the text. */
.np-icallouts--1 .np-icallout {
  grid-template-columns: 24px minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 18px;
}
.np-icallouts--1 .np-icallout > .np-icallout__title { grid-column: 2; padding-inline-end: clamp(16px, 3vw, 48px); }
.np-icallouts--1 .np-icallout > :not(.np-icallout__title) { grid-column: 3; }
.np-icallouts--1 .np-icallout > .np-icallout__body { grid-row: 1; margin-block-start: 0; }
.np-icallouts--1 .np-icallout > .np-icallout__body + .np-icallout__body { grid-row: auto; margin-block-start: 14px; }


/* ---------- 11. Two contrasting cards (the home's general or special) ------ */

.np-vs--i .np-vs__card { min-block-size: 0; padding: clamp(28px, 3.4vw, 44px); }
.np-vs--i .np-vs__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  padding: 5px 12px;
  border-radius: var(--np-r-sm);
  background: var(--np-green-soft);
  color: var(--np-green-hover);
  /* A label that wraps on a phone keeps room between its lines; one line
     stays 28px tall. */
  font: 600 12px/1.3 var(--np-sans);
  letter-spacing: calc(0.08em * var(--np-track));
  text-transform: var(--np-upper);
}
.np-vs--i .np-vs__card--spe .np-vs__tag { background: var(--np-green-hover); color: var(--np-white); }
.np-sec .np-vs--i .np-vs__card > :is(h2, h3) {
  margin-block-start: 22px;
  font: 600 clamp(24px, 2.4vw, 34px)/1.08 var(--np-display);
  letter-spacing: calc(-0.025em * var(--np-track));
  color: inherit;
}
.np-sec .np-vs--i .np-vs__card--gen > :is(h2, h3) { color: var(--np-ink); }
.np-vs--i .np-vs__card > p:not(.np-vs__tag) { margin-block-start: 18px; font-size: 17px; line-height: 1.65; }
.np-vs--i .np-vs__card--spe > p:not(.np-vs__tag) { color: var(--np-white); }
/* A text link on the green card takes the card's text colour and an
   underline: the green link colour would vanish into the card. */
.np-vs--i .np-vs__card--spe a:not([class]),
.np-vs--i .np-vs__card--spe a:not([class]):is(:hover, :focus-visible, :visited) {
  color: var(--np-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.np-vs--i .np-vs__card--spe a:not([class]):hover { text-decoration-thickness: 2px; }
.np-vs--i + .np-vs--i { margin-block-start: 16px; }
.np-s-ground .np-vs--i .np-vs__card--gen { border-color: var(--np-white); }


/* ---------- 12. A photo beside its text ------------------------------------ */

.np-isplit {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: center;
}
.np-isplit--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.np-isplit--flip > .np-isplit__img { order: 2; }
.np-isplit__img { margin: 0; min-inline-size: 0; }
.np-isplit__img img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--np-r-lg);
}
.np-isplit--flip .np-isplit__img img { aspect-ratio: 4 / 3; }
.np-isplit__text { min-inline-size: 0; }
.np-isplit__text > :is(h2, h3) {
  font: 600 var(--np-fs-ih2)/1.04 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  color: var(--np-ink);
  max-inline-size: 15em;
}
.np-isplit__text > p { margin-block-start: 20px; font-size: 17px; line-height: 1.7; color: var(--np-text); }
.np-isplit__text > ul { margin-block-start: 26px; }


/* ---------- 13. Checklists with square glyphs ------------------------------ */

.np-ichecks {
  --np-li-pad: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  border-block-end: var(--np-hair);
}
.np-ichecks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np-s-ground .np-ichecks { border-block-end-color: var(--np-tint); }
.np-ichk {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
  padding-block: 18px;
  border-block-start: var(--np-hair);
  font-size: 16px;
  line-height: 1.55;
  color: var(--np-text);
}
.np-s-ground .np-ichk { border-block-start-color: var(--np-tint); }
.np-ichk::before {
  content: "";
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  box-sizing: border-box;
  border: 1.5px solid var(--np-green);
  border-radius: var(--np-r-sm);
  background: var(--np-white);
}
.np-ichk::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 22px;
  inline-size: 16px;
  block-size: 16px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-check-b) center / contain no-repeat;
  mask: var(--np-i-check-b) center / contain no-repeat;
}

/* Square chips (the home's power of attorney chips, without links). */
.np-ichips { display: flex; flex-wrap: wrap; gap: 10px; }
.np-ichip {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-sm);
  background: var(--np-white);
  color: var(--np-ink);
  font: 500 15px/1.35 var(--np-sans);
}


/* ---------- 14. Fee tables (the home's published fees, any column count) --
   The table block is the live block, unchanged. On ink it is the home's
   fee table; the first column may be a td here. dns-poster.js copies the
   head labels into data-label for the card view on phones. */

.np-ifees > .np-ftable + .np-ftable { margin-block-start: 48px; }
.np-sec .np-ftable tbody td:first-child {
  inline-size: 40%;
  font-weight: 500;
  color: var(--np-text-invert);
}
.np-sec .np-ftable--2 tbody td:first-child { inline-size: 60%; }
.np-sec .np-ftable--2 tbody td:nth-child(2) { inline-size: 40%; }
.np-sec .np-ftable--4 tbody td:nth-child(n+3) { inline-size: 22%; font-size: 15px; color: var(--np-muted-invert); }
.np-sec .np-ftable--4 tbody td:first-child { inline-size: 34%; }
.np-sec .np-ftable tbody td:nth-child(2) { white-space: normal; }
/* A table that is not a fee schedule (a comparison, the stages, the
   cookies): the columns after the first are ordinary text. */
.np-sec .np-ftable--plain tbody td:nth-child(n+2) {
  inline-size: auto;
  font: 400 15px/1.55 var(--np-sans);
  color: var(--np-text-invert);
  white-space: normal;
}
.np-sec .np-ftable--plain tbody td:first-child { inline-size: 26%; }
.np-sec .np-ftable--plain thead th:empty { padding: 0; }
.np-sec .np-ftable thead th { white-space: nowrap; }
.np-ifees__foot {
  margin-block-start: 28px;
  padding-block-start: 20px;
  border-block-start: var(--np-hair-d);
}
/* The note is one sentence that may hold a link, so it stays a block (a
   flex box made the text, the link and the full stop three columns); the
   info icon sits in its start padding. */
.np-ifees__foot > p {
  position: relative;
  display: block;
  padding-inline-start: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--np-muted-invert);
}
.np-ifees__foot > p::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 3px;
  inline-size: 18px;
  block-size: 18px;
  background-color: var(--np-green-bright);
  -webkit-mask: var(--np-i-info) center / contain no-repeat;
  mask: var(--np-i-info) center / contain no-repeat;
}
.np-ifees__foot > p + p { margin-block-start: 10px; }
/* Links on the ink fee band: the bright green of the dark grounds, and an
   underline so a link never relies on colour alone. */
.np-sec :is(.np-ifees__foot, .np-ftable td) a:not([class]),
.np-sec :is(.np-ifees__foot, .np-ftable td) a:not([class]):visited {
  color: var(--np-green-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.np-sec :is(.np-ifees__foot, .np-ftable td) a:not([class]):is(:hover, :focus-visible) { color: var(--np-white); }

/* A light table (articles, legal pages): the same anatomy on white. */
.np-itable { overflow-x: auto; margin: 0; }
.np-itable table {
  inline-size: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  color: var(--np-text);
}
.np-itable :is(th, td) {
  padding: 14px 20px 14px 0;
  padding-inline: 0 20px;
  border: 0;
  border-block-end: var(--np-hair);
  vertical-align: top;
  text-align: start;
}
.np-itable :is(th, td):last-child { padding-inline-end: 0; }
.np-itable thead th {
  padding-block: 0 12px;
  border-block-end: 2px solid var(--np-ink);
  font: 600 12px/1.2 var(--np-sans);
  letter-spacing: calc(0.08em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-hover);
}
.np-itable tbody td:first-child { font-weight: 600; color: var(--np-ink); }


/* ---------- 15. Authorities: the page's lead, the logos, the names --------- */

.np-iauth { color: var(--np-muted-invert); }
.np-iauth__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: 24px 48px;
}
.np-iauth__lead {
  padding-inline-end: 32px;
  border-inline-end: var(--np-hair-d);
  font: 500 clamp(18px, 1.6vw, 22px)/1.35 var(--np-display);
  color: var(--np-white);
}
.np-iauth__logos,
.np-auth__marquee { min-inline-size: 0; }
.np-iauth__logos .np-marquee { padding-block: 8px; }
.np-inames {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 36px;
  padding-block-start: 24px;
  border-block-start: var(--np-hair-d);
}
.np-inames > p {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--np-r-sm);
  font: 500 14px/1.2 var(--np-sans);
  color: var(--np-text-invert);
}


/* ---------- 16. Questions --------------------------------------------------
   The home's two column accordion. On the FAQ page each group is a row:
   the group's title in the start column, its questions beside it. */

.np-faqg {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-s-ground .np-faqg { border-block-start-color: var(--np-tint); }
.np-faqg__head {
  position: sticky;
  inset-block-start: calc(var(--np-hdr) + 32px + var(--wp-admin--admin-bar--height, 0px));
}
.np-faqg__head > p {
  font: 600 var(--np-fs-ih2)/1.04 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  color: var(--np-ink);
}
.np-faq--one { grid-template-columns: minmax(0, 1fr); }
.np-faqg__list { min-inline-size: 0; }
.np-faqg .np-faq__col { border-block-end: 1px solid var(--np-tint); min-inline-size: 0; }
.np-faq .np-faq__item > p { margin: 0; padding-block: 0 26px; padding-inline: 0 56px; color: var(--np-text); }

/* The note under the reviews (it was printed by the old review list). */
.np-rev__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-block-start: 32px;
  padding-block-start: 20px;
  border-block-start: var(--np-hair);
  font-size: 14px;
  line-height: 1.55;
  color: var(--np-muted);
}
.np-rev__note::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 1px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-info) center / contain no-repeat;
  mask: var(--np-i-info) center / contain no-repeat;
}


/* ---------- 17. The written quote beside the office ----------------------- */

.np-iaside > :is(h2, h3) {
  font: 600 24px/1.15 var(--np-display);
  letter-spacing: calc(-0.015em * var(--np-track));
  color: var(--np-white);
}
.np-ioffice__rows { margin-block: 20px 8px; }
.np-ioffice__row {
  padding-block: 14px;
  border-block-start: var(--np-hair-d);
}
.np-ioffice__label {
  font: 600 12px/1.2 var(--np-sans);
  letter-spacing: calc(0.08em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-bright);
}
.np-ioffice__value {
  margin-block-start: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--np-white);
  overflow-wrap: anywhere;
}
/* The phone and email links: a 44px tall tap area without moving the line
   (block padding on an inline box). */
.np-ioffice__value a { padding-block: 12px; }
/* The map link follows the office rows; pushed to the foot of a panel as
   tall as the form, it left a gap of 600px under the email. */
.np-iaside .np-ioffice__go { margin-block-start: 0; padding-block-start: 8px; }

/* The office on its own (pages without a form): a band of four facts. */
.np-ioffice__grid {
  display: grid;
  grid-template-columns: repeat(var(--np-of-n, 4), minmax(0, 1fr));
  border-block: var(--np-hair);
}
.np-ioffice__grid--3 { --np-of-n: 3; }
.np-s-ground .np-ioffice__grid { border-block-color: var(--np-tint); }
.np-ioffice__grid > .np-ioffice__row {
  position: relative;
  min-inline-size: 0;
  padding: 24px 24px 26px;
  padding-inline-start: 0;
  border-block-start: 0;
}
.np-ioffice__grid > .np-ioffice__row + .np-ioffice__row { padding-inline-start: 24px; border-inline-start: var(--np-hair); }
.np-s-ground .np-ioffice__grid > .np-ioffice__row + .np-ioffice__row { border-inline-start-color: var(--np-tint); }
.np-ioffice__grid .np-ioffice__label { color: var(--np-green-hover); }
.np-ioffice__grid .np-ioffice__value { font: 600 17px/1.45 var(--np-display); color: var(--np-ink); }
.np-ioffice__foot { margin-block-start: 12px; }


/* ---------- 18. Photo band and the final call to action -------------------- */

.np-ipband .np-pband__text > p.np-pband__lede { margin-block-start: 22px; font-size: 17px; color: var(--np-text-invert); }
.np-ipband .np-ibtns { margin-block-start: 32px; }
.np-ifinal .np-final__lede {
  max-inline-size: 40em;
  margin-block-start: 24px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.6;
  color: var(--np-text-invert);
  text-align: center;
}
.np-ifinal .np-ibtns { justify-content: center; margin-block-start: 40px; }
.np-sec.np-final .np-final__title {
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1;
  letter-spacing: calc(-0.035em * var(--np-track));
  color: var(--np-white);
  text-align: center;
}


/* ---------- 19. Pillars (the home's three acts, at a working size) --------- */

.np-terms--i .np-term { padding-block-start: 0; }
.np-terms--i .np-term > .dns-leaf__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: 24px;
  border-radius: var(--np-r);
  background: var(--np-green-soft);
  color: var(--np-green-hover);
}
.np-terms--i .np-term--soft > .dns-leaf__icon { background: var(--np-white); }
.np-terms--i .np-term > .dns-leaf__icon svg { inline-size: 26px; block-size: 26px; }
.np-terms--i .np-term--soft { padding-block: 32px; }
.np-sec .np-terms--i .np-term__word {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08;
  padding-block-end: 20px;
}
.np-terms--i .np-term__def { margin-block-start: 20px; }


/* ---------- 20. Stages (the process page's roll) --------------------------- */

.np-roll { border-block-end: var(--np-hair); }
.np-s-ground .np-roll { border-block-end-color: var(--np-tint); }
.np-roll__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: 12px clamp(24px, 4vw, 56px);
  align-items: baseline;
  padding-block: 24px;
  border-block-start: var(--np-hair);
}
.np-s-ground .np-roll__row { border-block-start-color: var(--np-tint); }
.np-roll__ref {
  font: 600 14px/1.2 var(--np-display);
  letter-spacing: calc(0.04em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green);
}
.np-roll__entry { min-inline-size: 0; }
.np-roll__name { font: 600 20px/1.25 var(--np-display); color: var(--np-ink); }
.np-roll__desc { margin-block-start: 6px; font-size: 15px; line-height: 1.6; color: var(--np-muted); }
.np-roll__who {
  justify-self: end;
  text-align: end;
  font: 500 14px/1.35 var(--np-sans);
  color: var(--np-green-hover);
}


/* ---------- 21. Send the draft for a free reading (contact) ---------------- */

.np-idraft {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--np-tint);
}
.np-idraft__text > :is(h2, h3) {
  font: 600 var(--np-fs-ih2)/1.04 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  color: var(--np-ink);
}
.np-idraft__text > p { margin-block-start: 20px; font-size: 17px; line-height: 1.7; color: var(--np-text); }
.np-idraft__form {
  overflow: hidden;
  border: 1px solid var(--np-tint);
  border-radius: var(--np-r-lg);
  background: var(--np-white);
  box-shadow: var(--np-shadow);
}
.np-draft { min-inline-size: 0; background: var(--np-white); }
.np-idraft__form .np-form { grid-template-columns: minmax(0, 1fr); }
.np-form__lede {
  font: 500 20px/1.35 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-ink);
}


/* ---------- 22. Legal pages: a readable document --------------------------
   One row per section: the heading in the start column, the text in the
   end column at a reading measure. */

.np-doc { border-block-end: var(--np-hair); }
.np-doc__sec {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 16px clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block: 40px;
  border-block-start: var(--np-hair);
}
.np-doc__sec > :is(h2, h3) {
  position: sticky;
  inset-block-start: calc(var(--np-hdr) + 24px + var(--wp-admin--admin-bar--height, 0px));
  font: 600 clamp(22px, 2vw, 28px)/1.15 var(--np-display);
  letter-spacing: calc(-0.02em * var(--np-track));
  color: var(--np-ink);
}
.np-doc__body {
  min-inline-size: 0;
  max-inline-size: 46rem;
}
.np-doc__body > p,
.np-doc__body > ul > li { font-size: 17px; line-height: 1.75; color: var(--np-text); }
.np-doc__body > * + * { margin-block-start: 18px; }
.np-doc__body > ul { margin-block-start: 18px; }


/* ---------- 23. Articles (the blog posts) ---------------------------------- */

.np-article {
  display: grid;
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
  row-gap: 0;
}
.np-article > * { min-inline-size: 0; }
.np-article > p,
.np-article > ul > li,
.np-article > ol > li { font-size: 18px; line-height: 1.75; color: var(--np-text); }
.np-article > p + p { margin-block-start: 20px; }
.np-article > :is(h2, h3) {
  margin-block-start: 56px;
  padding-block-start: 24px;
  border-block-start: var(--np-hair);
  font: 600 clamp(26px, 2.4vw, 34px)/1.1 var(--np-display);
  letter-spacing: calc(-0.025em * var(--np-track));
  color: var(--np-ink);
}
.np-article > h3 { font-size: clamp(21px, 1.8vw, 24px); border-block-start: 0; padding-block-start: 0; margin-block-start: 36px; }
.np-article > :is(h2, h3) + * { margin-block-start: 18px; }
.np-article > p:first-child {
  font: 500 clamp(20px, 1.8vw, 24px)/1.5 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-ink);
}
.np-article > :is(ul, ol) { margin-block-start: 20px; }
.np-article > ol { padding-inline-start: 1.4em; }
.np-article > .np-itable { margin-block-start: 28px; }
.np-article > .np-itable + p { margin-block-start: 20px; }
.np-afig { margin: 0; }
.np-afig img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: none;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--np-r-lg);
}
.np-afig-wrap { padding-block: clamp(8px, 2vw, 24px); }

/* The note under an article, in place of the old after post box. */
.np-after {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px 48px;
  align-items: end;
}
.np-after__title {
  font: 600 var(--np-fs-ih2)/1.04 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  color: var(--np-white);
}
.np-after__body { margin-block-start: 16px; font-size: 17px; line-height: 1.65; color: var(--np-text-invert); }
.np-after .np-btns { justify-content: flex-end; }


/* ---------- 24. The blog list (the posts page and the archives) ----------- */

.np-plist { padding-block: var(--np-isec); background: var(--np-white); }
.np-plist .np-postgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
}
.np-postgrid > article { margin: 0; min-inline-size: 0; }
.np-postgrid > article > .inside-article {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: 0;
  border-block-start: var(--np-hair);
  background: transparent;
  box-shadow: none;
}
.np-postgrid .post-image { order: -1; margin: 0 0 22px; }
.np-postgrid .post-image a { display: block; overflow: hidden; border-radius: var(--np-r-lg); }
.np-postgrid .post-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.9s var(--np-ease);
}
.np-postgrid article:hover .post-image img { transform: scale(1.03); }
.np-postgrid .entry-header { display: flex; flex-direction: column; margin: 0; padding-block-start: 4px; }
.np-postgrid .entry-title {
  margin: 0;
  font: 600 clamp(21px, 1.7vw, 24px)/1.18 var(--np-display);
  letter-spacing: calc(-0.015em * var(--np-track));
}
.np-postgrid .entry-title a { color: var(--np-ink); text-decoration: none; }
.np-postgrid .entry-title a:hover { color: var(--np-green-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.np-postgrid .entry-meta {
  order: -1;
  margin: 0 0 10px;
  font: 600 12px/1.2 var(--np-sans);
  letter-spacing: calc(0.08em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-hover);
}
.np-postgrid .entry-meta a { color: inherit; text-decoration: none; }
.np-postgrid .updated:not(.published) { display: none; }
.np-postgrid .entry-summary { margin: 14px 0 0; }
.np-postgrid .entry-summary p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--np-muted); }
.np-postgrid > nav,
.np-postgrid > .paging-navigation { grid-column: 1 / -1; }
.np-plist .np-postgrid > article:first-child { grid-column: span 2; }
.np-plist .np-postgrid > article:first-child .entry-title { font-size: clamp(26px, 2.6vw, 36px); }
.np-plist .np-postgrid > article:first-child .post-image img { aspect-ratio: 16 / 9; }


/* ---------- 25. Responsive ------------------------------------------------- */

@media (max-width: 1100px) {
  .np-icards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last card spans the row instead of leaving an empty cell. */
  .np-icards > .np-icard:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .np-dir__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .np-dir__c { grid-column: 2; }
  .np-rel,
  .np-rel--6 { --np-rel-n: 2; }
  .np-rel__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .np-rel__item:nth-child(even) { padding-inline-end: 0; }
  .np-rel__item:nth-child(n+3) { border-block-start: var(--np-hair); }
  .np-s-ground .np-rel__item:nth-child(n+3) { border-block-start-color: var(--np-tint); }
  .np-ioffice__grid { --np-of-n: 2; }
  .np-ioffice__grid > .np-ioffice__row:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .np-ioffice__grid > .np-ioffice__row:nth-child(n+3) { border-block-start: var(--np-hair); }
  .np-track--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .np-track--5::before { display: none; }
  .np-iauth__grid { grid-template-columns: minmax(0, 1fr); }
  .np-iauth__lead { padding: 0; border: 0; }
}

@media (max-width: 900px) {
  .np-ihero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .np-ihero__head { grid-column: 1; grid-row: 1; padding-block-end: 0; }
  .np-ihero__side { grid-column: 1; grid-row: 2; padding-block: 28px 32px; }
  .np-irail { grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-irail__cell:nth-child(odd) { border-inline-start: 0; }
  .np-irail__cell:nth-child(n+3) { border-block-start: 1px solid rgba(255, 255, 255, 0.18); }
  .np-irail--3 .np-irail__cell:nth-child(3) { grid-column: 1 / -1; }
  .np-ihero { min-block-size: 0; }
  .np-prose,
  .np-isplit,
  .np-isplit--flip,
  .np-faqg,
  .np-doc__sec,
  .np-idraft,
  .np-after { grid-template-columns: minmax(0, 1fr); }
  .np-isplit--flip > .np-isplit__img { order: 0; }
  .np-isplit__img img,
  .np-isplit--flip .np-isplit__img img { aspect-ratio: 4 / 3; }
  .np-faqg__head,
  .np-doc__sec > :is(h2, h3) { position: static; }
  .np-intro { grid-template-columns: minmax(0, 1fr); }
  .np-icallouts--2 { --np-co-n: 1; }
  .np-icallouts--1 .np-icallout { grid-template-columns: 24px minmax(0, 1fr); }
  .np-icallouts--1 .np-icallout > :not(.np-icallout__title) { grid-column: 2; }
  .np-icallouts--1 .np-icallout > .np-icallout__body { grid-row: auto; margin-block-start: 14px; }
  .np-track--3,
  .np-track--5 { grid-template-columns: 1fr 1fr; }
  .np-roll__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .np-roll__who { justify-self: start; text-align: start; }
  .np-ichecks--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-plist .np-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-after .np-btns { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .np-ihero__grid { padding-block-start: 36px; }
  .np-ihero .np-ihero__title { font-size: clamp(34px, 10.4vw, 44px); line-height: 1; }
  .np-ihero__lede { font-size: 17px; }
  /* Two short buttons share a row (each grows to fill it), long ones take
     a row each: the second button no longer drops under the phone's
     action bar on the first screen. */
  .np-ihero__actions > p { flex: 1 1 auto; }
  .np-ihero__actions > p > a { inline-size: 100%; }
  .np-irail { --np-rail-pad: 16px; margin-inline: 0; }
  .np-irail__cell { padding: 18px 16px 20px; }
  .np-irail__cell:nth-child(odd) { padding-inline-start: 0; }
  .np-irail__cell:nth-child(even) { padding-inline-end: 0; }
  .np-ihero .np-irail__fig { font-size: 19px; }
  /* On a phone the rail sits higher on the photo: the small numerals take
     the white of the figures (as on the home's rail). */
  .np-irail__n { color: var(--np-white); }
  .np-ihero .np-irail--num .np-irail__fig { font-size: 52px; }

  .np-icards,
  .np-icards--4 { grid-template-columns: minmax(0, 1fr); }
  .np-icard { padding: 24px 22px 18px; }
  .np-dir__item { grid-template-columns: minmax(0, 1fr); padding-block: 26px; }
  .np-dir__c { grid-column: 1; }
  .np-dir__a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .np-dir__a > .dns-leaf__icon { inline-size: 44px; block-size: 44px; }
  .np-rel,
  .np-rel--6,
  .np-rel--3 { --np-rel-n: 1; }
  .np-rel__item,
  .np-rel__item:nth-child(n) { padding: 22px 0; border-inline-start: 0; border-block-start: var(--np-hair); }
  .np-rel__item:first-child { border-block-start: 0; }
  .np-s-ground .np-rel__item:nth-child(n) { border-block-start-color: var(--np-tint); }
  .np-ichecks,
  .np-ichecks--3 { grid-template-columns: minmax(0, 1fr); }
  .np-ichip { flex: 1 1 100%; }
  .np-ioffice__grid { --np-of-n: 1; }
  .np-ioffice__grid > .np-ioffice__row,
  .np-ioffice__grid > .np-ioffice__row + .np-ioffice__row { padding: 18px 0; border-inline-start: 0; border-block-start: var(--np-hair); }
  .np-ioffice__grid > .np-ioffice__row:first-child { border-block-start: 0; }
  .np-track--3,
  .np-track--5 { grid-template-columns: minmax(0, 1fr); }
  .np-icallout { padding: 24px 20px; column-gap: 14px; }
  .np-vs--i .np-vs__card { padding: 26px 22px; }
  .np-sec .np-vs--i .np-vs__card > :is(h2, h3) { font-size: 24px; }
  .np-faq .np-faq__item > p { padding-inline-end: 0; }
  .np-doc__sec { padding-block: 28px; }
  .np-article > p,
  .np-article > ul > li { font-size: 17px; }
  .np-afig img { aspect-ratio: 4 / 3; }
  .np-plist .np-postgrid { grid-template-columns: minmax(0, 1fr); }
  .np-plist .np-postgrid > article:first-child { grid-column: auto; }
  .np-ifinal .np-ibtns > p,
  .np-ifinal .np-ibtns > p > a,
  .np-ipband .np-ibtns > p,
  .np-ipband .np-ibtns > p > a { inline-size: 100%; }
  .np-sec .np-ftable--2 tbody tr:has(td) { grid-template-columns: minmax(0, 1fr); }
  .np-sec .np-ftable tbody tr:has(td) td:first-child { grid-column: 1 / -1; inline-size: auto; font-weight: 600; color: var(--np-white); }
  .np-sec .np-ftable--4 tbody td:nth-child(n+3) { grid-column: 1 / -1; inline-size: auto; }
  /* The row is a wrapping flex line on phones (dns-poster.css): the cells
     after the second, and every cell of a plain table (they are sentences,
     not figures), take the full width under their label. */
  .np-sec .np-ftable--4 tbody tr:has(td) td:nth-child(n+3),
  .np-sec .np-ftable--plain tbody tr:has(td) td:nth-child(n+2) { flex: 1 1 100%; min-inline-size: 0; }
  .np-sec .np-ftable tbody td:first-child::before,
  .np-itable tbody td:first-child::before { display: none; }
  /* A light table whose first column has a heading is data, not a row
     title, so its label stays (an empty corner heading means row titles). */
  .np-itable tbody td:first-child:not([data-label=""])[data-label]::before { display: block; }
  .np-itable tbody td:empty { display: none; }
  /* The light table becomes one card per row on phones. */
  .np-itable thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .np-itable :is(table, tbody, tr, td) { display: block; }
  .np-itable tbody tr { padding-block: 14px; border-block-end: var(--np-hair); }
  .np-itable tbody td { padding: 4px 0; border: 0; }
  .np-itable td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 2px;
    font: 600 11px/1.3 var(--np-sans);
    letter-spacing: calc(0.04em * var(--np-track));
    text-transform: var(--np-upper);
    color: var(--np-green-hover);
  }
}


/* ---------- 26. Arabic route ----------------------------------------------- */

[dir="rtl"] .np-ihero .np-ihero__title { line-height: 1.3; }
[dir="rtl"] :is(.np-shead, .np-prose, .np-isplit__text, .np-idraft__text, .np-faqg__head, .np-doc__sec, .np-article) > :is(h2, h3, p.np-shead__t) { line-height: 1.35; }
[dir="rtl"] :is(.np-faqg__head > p, .np-after__title, .np-iauth__lead, .np-intro > p) { line-height: 1.4; }
[dir="rtl"] .np-ways--i > .np-way::before { line-height: 0.9; }
[dir="rtl"] .np-irail__n,
[dir="rtl"] .np-need__n { font-family: "Familjen Grotesk", "Familjen Fallback", system-ui, sans-serif; }

/* ---------- 27. Hooks the builder and the templates set --------------------- */

/* The rail with four facts (the default count, named so a page can say so). */
.np-irail--4 { --np-irail-n: 4; }
/* The photo band's title: the measure of the home's band. */
.np-ipband .np-pband__title { max-inline-size: 16em; }
/* The office band and the written quote of the inner pages. */
.np-ioffice .np-shead { margin-block-end: 28px; }
.np-iquote { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
@media (max-width: 900px) {
  .np-iquote { grid-template-columns: minmax(0, 1fr); }
}
/* The blog templates (inc/blog.php): the body classes, the band after a post. */
.np-t-post .site-main,
.np-t-list .site-main { margin: 0; }
.np-t-list .np-postgrid > article { box-shadow: none; }
.np-iafter { padding-block: clamp(56px, 6vw, 96px); }
.np-after__text { min-inline-size: 0; }