/* ============================================================================
   New Merchant Kit — rebuilt from Figma "Get started > New merchant kit"
   (4738:20095 / desktop frame 3341:16972).

   Page-scoped: linked only from new-merchant-kit.html, after the shared sheets.
   Type, weight and colour come from the global tokens in dash.css; the only
   literals are the two tints Figma names directly (blue-10, and the green used
   on the "Receive Dash" card) plus gray-20, none of which have tokens yet.

   Layout follows the site section contract: the section spans the screen with
   100px side padding, and the block inside is centred and capped at 1440px, so
   this page lines up with the header, footer and social band.

   Figma drew the frame at 100px padding + a 232px sidebar + a 30px gutter + a
   1028px content column. Holding the block to 1440 instead makes the content
   column 1178, so the sections that deliberately fill only its left half are
   574 wide here rather than Figma's 499. That widening is the intended result
   of the 1440 cap, not drift.
   ========================================================================== */

.nmk {
  background: #fff;

  --nmk-surface: #f7f9fa;                    /* Figma Color/gray/gray-20      */
  --nmk-blue-10: rgba(0, 141, 228, 0.1);     /* Figma Color/blue/blue-10      */
  --nmk-green-10: rgba(62, 180, 137, 0.1);   /* "Receive Dash" card tint      */
  --nmk-sidebar-w: 232px;
  --nmk-gutter: 30px;
  --nmk-content-w: 1028px;                   /* Figma's column; now a floor   */
  --nmk-block-max: 1440px;                   /* site-wide block cap           */
  --nmk-acc-dur: 0.28s;                      /* glossary open/close           */
}

/* Section spans the screen and carries the side padding; the content inside
   caps at the sidebar + gutter + content column, matching the other pages. */
.nmk-shell {
  padding-inline: 100px;
  padding-block: calc(var(--bz-header-h, 84px) + 60px) 120px;
}

/* The block: fills the padded section, centred, capped at 1440 like every other
   section on the site. The content column is 1fr rather than a fixed width so
   it takes whatever the cap leaves after the sidebar and gutter — 1178px at the
   full 1440, against the 1028px the Figma frame was drawn at. */
.nmk-layout {
  display: grid;
  grid-template-columns: var(--nmk-sidebar-w) minmax(0, 1fr);
  column-gap: var(--nmk-gutter);
  width: 100%;
  max-width: var(--nmk-block-max);
  margin-inline: auto;
}

/* --- Sidebar ------------------------------------------------------------- */

/* Pinned to the vertical centre of the viewport for the whole scroll. `top`
   plus the -50% shift is what keeps it centred rather than stuck to the top;
   `align-self: start` stops the grid stretching it, which would defeat sticky. */
.nmk-sidebar {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  align-self: start;
  height: max-content;
}

.nmk-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.nmk-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  font-size: var(--ds-s-size);
  line-height: var(--ds-s-lh);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-text-primary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}

.nmk-nav__item:hover,
.nmk-nav__item:focus {
  color: var(--ds-text-primary);
  text-decoration: none;
  opacity: 0.6;
}

/* Scroll-spy state, set by the small script at the foot of the page. */
.nmk-nav__item.is-current {
  color: var(--ds-btn-filled-blue-bg);
}

.nmk-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* The 30x30 wrapper is constant; each glyph keeps its own size and is centred
   inside it, exactly as Figma draws them. Three of the six are smaller than the
   tile (the Dash mark is 20.823x20, POS and Downloads are 19.2 square) — forcing
   all six to 30x30 stretched the Dash mark and blew the other two up by ~56%.
   The width/height attributes carry the rounded values for layout; these rules
   restore the exact sub-pixel sizes. */
.nmk-nav__icon img {
  display: block;
}

.nmk-nav__icon img[src$="nmk-nav-why-dash.svg"] {
  width: 20.823px;
  height: 20px;
}

.nmk-nav__icon img[src$="nmk-nav-pos.svg"],
.nmk-nav__icon img[src$="nmk-nav-downloads.svg"] {
  width: 19.2px;
  height: 19.2px;
}

/* --- Content column ------------------------------------------------------ */

.nmk-content {
  display: flex;
  flex-direction: column;
  gap: 100px;
  min-width: 0;
}

/* Every section is a 2-column grid; the intro sits in column 1 and each
   section decides whether its body spans one column or both. */
.nmk-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  scroll-margin-top: 120px;
}

.nmk-section__intro {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 20px;
}

/* Figma uses "Heading/h2 - bold" here — 44/52 at weight 700, not the 800 the
   global h2 rule applies, so the weight is restated (size and line-height are
   already the global values). */
.nmk-section__intro h2 {
  margin: 0;
  font-weight: var(--ds-fw-bold);
}

.nmk-section__intro p {
  margin: 0;
  font-size: var(--ds-l-size);
  line-height: var(--ds-l-lh);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-tertiary);
}

.nmk-section__intro p + p {
  margin-top: 8px;
}

/* Body spanning both columns, or held to the left half. */
.nmk-body--wide {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.nmk-body--half {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* --- Buttons ------------------------------------------------------------- */

.nmk-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.nmk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding-inline: 26px;
  border-radius: 999px;
  font-size: var(--ds-btn-lg-size);
  line-height: var(--ds-btn-lg-lh);
  font-weight: var(--ds-btn-weight);
  text-decoration: none;
  white-space: nowrap;
}

.nmk-btn--blue {
  background: var(--ds-btn-filled-blue-bg);
  color: #fff;
}

.nmk-btn--tinted {
  background: var(--nmk-blue-10);
  color: var(--ds-btn-filled-blue-bg);
}

/* Figma "Button large - Stroke black", 40px tall inside a step card. */
.nmk-btn--stroke {
  height: 40px;
  background: none;
  border: 1px solid var(--ds-btn-stroke-black);
  color: var(--ds-text-primary);
}

.nmk-btn:hover,
.nmk-btn:focus {
  text-decoration: none;
  opacity: 0.9;
}

.nmk-btn--blue:hover,
.nmk-btn--blue:focus { color: #fff; }
.nmk-btn--tinted:hover,
.nmk-btn--tinted:focus { color: var(--ds-btn-filled-blue-bg); }
.nmk-btn--stroke:hover,
.nmk-btn--stroke:focus { color: var(--ds-text-primary); }

/* --- Accordion (glossary) ------------------------------------------------ */

.nmk-accordion {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.nmk-item {
  background: var(--nmk-surface);
  border-radius: 40px;
  overflow: hidden;
}

/* The open/close height is animated in page script (see the accordion block in
   new-merchant-kit.html): the CSS-only routes need interpolate-size, which is
   Chrome-only, so Safari and Firefox would snap. `overflow: hidden` above is
   what clips the body while that animation runs. --nmk-acc-dur is the shared
   duration — the script reads it, so timing stays defined here. */

/* <summary> carries the row; the marker is replaced by the chevron image. */
.nmk-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 30px 40px 30px 50px;
  cursor: pointer;
  list-style: none;
  font-size: var(--ds-l-size);
  line-height: var(--ds-l-lh);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-primary);
}

.nmk-item > summary::-webkit-details-marker { display: none; }

.nmk-item__label { flex: 1 0 0; min-width: 0; }

.nmk-item__chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--nmk-acc-dur) ease;
}

.nmk-item[open] .nmk-item__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .nmk { --nmk-acc-dur: 0s; }
}

/* The open body continues the same row box, so it keeps summary's left inset
   and sits 10px under the label (Figma's gap inside the open card). */
.nmk-item__body {
  margin: 0;
  padding: 0 40px 30px 50px;
  font-size: var(--ds-l-size);
  line-height: var(--ds-l-lh);
  font-weight: var(--ds-fw-regular);
  color: var(--ds-text-primary);
}

.nmk-item__body p { margin: 0; }
.nmk-item__body p + p { margin-top: 8px; }

/* --- Cards --------------------------------------------------------------- */

.nmk-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  padding: 25px 50px 50px;
  border-radius: 40px;
  overflow: hidden;
  background: var(--nmk-surface);
}

.nmk-card--blue { background: var(--nmk-blue-10); }
.nmk-card--green { background: var(--nmk-green-10); }

/* The POS cards have no icon and use even 50px padding. */
.nmk-card--flat { padding: 50px; }

.nmk-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.nmk-card__icon img { display: block; }

.nmk-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  width: 100%;
}

.nmk-card__text h3 {
  margin: 0;
  font-size: var(--ds-xl-size);
  line-height: var(--ds-xl-lh);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-primary);
}

.nmk-card__text p {
  margin: 0;
  font-size: var(--ds-l-size);
  line-height: var(--ds-l-lh);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-tertiary);
}

.nmk-card__text p + p { margin-top: 8px; }

.nmk-card__text a { color: inherit; text-decoration: underline; }

/* --- Check pills ("What sets Dash apart") -------------------------------- */

.nmk-pill {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 25px 50px;
  border-radius: 40px;
  background: var(--nmk-blue-10);
  overflow: hidden;
}

.nmk-pill__icon { width: 30px; height: 30px; flex-shrink: 0; display: block; }

.nmk-pill__text {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--ds-l-size);
  line-height: var(--ds-l-lh);
  font-weight: var(--ds-fw-semibold);
}

.nmk-pill__text strong { font-weight: inherit; color: var(--ds-text-primary); }
.nmk-pill__text span { color: var(--ds-text-tertiary); }

/* --- Numbered step cards ------------------------------------------------- */

.nmk-step {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 25px 50px 50px;
  border-radius: 40px;
  overflow: hidden;
  background: var(--nmk-surface);
}

.nmk-step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 60px;
  flex-shrink: 0;
  font-size: var(--ds-xl-size);
  line-height: var(--ds-xl-lh);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-primary);
  opacity: 0.3;
}

.nmk-step__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 0 0;
  min-width: 0;
  justify-content: center;
  padding-top: 17px;
}

.nmk-step__text h3 {
  margin: 0;
  font-size: var(--ds-xl-size);
  line-height: var(--ds-xl-lh);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-primary);
}

.nmk-step__text p {
  margin: 0;
  font-size: var(--ds-l-size);
  line-height: var(--ds-l-lh);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-tertiary);
}

.nmk-step__text p + p { margin-top: 8px; }
/* Inline links underline; buttons never do (Figma "Button large - Stroke black"). */
.nmk-step__text a:not(.nmk-btn) { color: inherit; text-decoration: underline; }
/* Hug the label (Figma: 199px for "Explore exchanges"), not the column width —
   inline-flex is blockified here because the step text is a column flex box. */
.nmk-step__text .nmk-btn { margin-top: 26px; align-self: flex-start; }

/* --- Download rows ------------------------------------------------------- */

.nmk-download {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  padding: 50px;
  border-radius: 40px;
  overflow: hidden;
  background: var(--nmk-surface);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Whole block reacts on hover, tinting to Figma's Color/blue/blue-10
   (#008DE4 at 10%). Colour only — no opacity shift, which would wash the text
   out along with the surface. */
.nmk-download:hover,
.nmk-download:focus-visible {
  background: var(--nmk-blue-10);
  text-decoration: none;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
  .nmk-shell {
    padding-inline: 40px;
    padding-block: calc(var(--bz-header-h, 84px) + 40px) 80px;
  }

  .nmk-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    row-gap: 40px;
  }

  /* No section nav on narrow screens. It used to become a horizontal strip
     above the content, but there is no room for six labels: on a phone it
     showed one item and hid the rest behind a sideways scroll nobody would
     find, and the sticky centring it exists for only makes sense beside a tall
     column. The headings themselves are the navigation here.

     display:none also takes it out of the grid, so it leaves no empty row. The
     links stay in the markup for the desktop layout; the scroll-spy script
     keeps updating them harmlessly while they are hidden. */
  .nmk-sidebar {
    display: none;
  }

  .nmk-content { gap: 70px; }

  .nmk-section,
  .nmk-body--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .nmk-section__intro,
  .nmk-body--wide,
  .nmk-body--half {
    grid-column: 1;
  }
}

@media (max-width: 768px) {
  .nmk-shell { padding-inline: 20px; }

  /* Figma's mobile frame (4738:19445) turns the sidebar into a tab strip under
     the header: 40px-tall options, 30px icon inset 10px, label at 46px. */
  .nmk-nav__item {
    padding: 5px 10px;
    flex-shrink: 0;
  }

  /* Three sections become horizontal card scrollers — cards 280 wide on a
     300 step (280 + 20 gap). The others stack full width, as Figma shows:
     the check pills, both step lists and send/receive are all 388 wide. */
  #why-crypto .nmk-body--wide,
  #pos-options .nmk-body--wide {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -20px;
    padding-inline: 20px;
  }

  #why-crypto .nmk-card,
  #pos-options .nmk-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }

  /* #downloads used to join the two scrollers above and pin its cards to
     280px. It now holds a single card (the sticker files), so a one-item
     horizontal scroller would just strand a narrow card in a wide section —
     it stacks full width like the other sections instead. */

  /* Mobile type mode — the same tokens resolve smaller in Figma's phone mode.
     Scoped to .nmk so no other page is affected. */
  .nmk {
    --ds-h1-size: 38px;  --ds-h1-lh: 44px;
    --ds-h2-size: 32px;  --ds-h2-lh: 38px;
    --ds-h3-size: 26px;  --ds-h3-lh: 32px;
    --ds-xl-size: 17px;  --ds-xl-lh: 22px;
    --ds-l-size: 15px;   --ds-l-lh: 20px;
  }

  .nmk-card,
  .nmk-step,
  .nmk-download { padding: 25px 30px 30px; }

  .nmk-card--flat { padding: 30px; }

  .nmk-pill { padding: 20px 25px; gap: 15px; }

  .nmk-item > summary { padding: 25px 25px 25px 30px; gap: 20px; }
  .nmk-item__body { padding: 0 25px 25px 30px; }

  .nmk-step { gap: 15px; }

  .nmk-actions .nmk-btn { width: 100%; }
}

/* --- "Explore POS systems" button + overlay ------------------------------ */
/* Figma: button 5686:21986 in "How to choose a POS system", overlay "POS
   systems" 5686:22006 (desktop) and 5699:14001 (mobile).

   The button is the design system's medium button with a style the system
   does not have yet — blue label on a 5% blue tint, and a 28px plus-circle
   on the right with tighter padding around it. It is set here, on this page
   only, until it becomes a design-system style. */
.nmk .nmk-pos-open {
  --_btn-bg: color-mix(in srgb, var(--dash-blue) 5%, transparent);
  --_btn-content: var(--dash-blue);
  padding: 8px 8px 9px 22px;
  /* The intro is a 10px-gap column; Figma has 30px above the button. */
  margin-top: 20px;
}

.nmk .nmk-pos-open img {
  display: block;
  flex: none;
}

/* The overlay: centred and as wide as the site's content block — the same
   1440 cap and 100px side gutter as the header and every section, so its
   edges line up with them (Figma drew it at 960; widened on Ross's call).
   50px above and below; on phones 20px all round and full width. When the
   content is taller than that, the overlay scrolls inside itself. */
.nmk-pos {
  --nmk-pos-pad: 80px;
  --nmk-pos-gray-50: #f0f1f2;               /* Figma Color/gray/gray-50 */
  width: min(var(--nmk-block-max), 100% - 200px);
  max-width: none;
  max-height: calc(100% - 100px);
  padding: 0;
  border: 0;
  border-radius: 37px;
  background: var(--surface);
  color: var(--ds-text-primary);
  overflow: hidden;
}

.nmk-pos[open] {
  display: flex;
  flex-direction: column;
}

/* ::backdrop does not inherit custom properties in every browser still in
   use, so the token can't be read here: this is --ink (#191c1f) at 50%. */
.nmk-pos::backdrop {
  background: rgb(25 28 31 / 0.5);
}

/* The page under the overlay stays put while it is open. */
html:has(.nmk-pos[open]) {
  overflow: hidden;
}

/* The scrolling box. No right padding: the table scrolls out to the overlay's
   edge, as in Figma, and only the heading keeps clear of the close button. */
.nmk-pos__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 0;
  padding: var(--nmk-pos-pad) 0 var(--nmk-pos-pad) var(--nmk-pos-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Nothing inside shrinks: when the overlay is shorter than its content, the
   body scrolls. Left to shrink, the table's scroller (a scroll box on both
   axes once overflow-x is set) was squeezed and scrolled on its own. */
.nmk-pos__body > * {
  flex-shrink: 0;
}

.nmk-pos__title {
  margin: 0;
  padding-right: 80px;
}

.nmk-pos__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 20px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nmk-pos__close img {
  display: block;
  transition: transform 0.2s ease;
}

/* Grows slightly on hover or keyboard focus. */
.nmk-pos__close:hover img,
.nmk-pos__close:focus-visible img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .nmk-pos__close img { transition: none; }
}

/* --- Table: scrolls sideways, first column stays put ---------------------- */
.nmk-pos__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Columns from Figma (1040 in all) are the minimum: a wider overlay stretches
   the table to fill it, and the columns grow in proportion; a narrower one
   scrolls. The transparent right border is the room left after the last
   column once it is scrolled into view — the same as the overlay's left
   padding (80 desktop, 30 phone). Padding on the scroller itself would be
   simpler, but some browsers drop it from the scroll width. */
.nmk-pos__table {
  width: 100%;
  min-width: calc(1040px + var(--nmk-pos-pad));
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-right: var(--nmk-pos-pad) solid transparent;
}

.nmk-pos__table col:nth-child(1) { width: 160px; }
.nmk-pos__table col:nth-child(2) { width: 120px; }
.nmk-pos__table col:nth-child(3) { width: 140px; }
.nmk-pos__table col:nth-child(4) { width: 70px; }
.nmk-pos__table col:nth-child(5) { width: 70px; }
.nmk-pos__table col:nth-child(6) { width: 120px; }
.nmk-pos__table col:nth-child(7) { width: 100px; }
.nmk-pos__table col:nth-child(8) { width: 120px; }
.nmk-pos__table col:nth-child(9) { width: 140px; }

.nmk-pos__table th,
.nmk-pos__table td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
  font: inherit;
}

/* Header: one grey pill, 12px above and below the labels. */
.nmk-pos__table thead th {
  padding-block: 12px;
  background: var(--surface-subtle);
  color: var(--ds-text-tertiary);
}

.nmk-pos__table thead th:first-child { border-radius: 12px 0 0 12px; }
.nmk-pos__table thead th:last-child { border-radius: 0 12px 12px 0; }

.nmk-pos__table tbody th,
.nmk-pos__table tbody td {
  box-sizing: border-box;
  height: 60px;
  border-bottom: 1px solid var(--nmk-pos-gray-50);
}

.nmk-pos__table tbody tr:last-child > * {
  border-bottom: 0;
}

/* The first column stays put while the rest scroll under it. Once the table
   is scrolled sideways, a 1px line on its right edge (Figma 5700:14244)
   separates it from the columns passing underneath — body rows only; the
   grey header pill has none. The script below sets .is-scrolled. The border
   is always there, transparent until then, so the column never shifts. */
.nmk-pos__table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.nmk-pos__table tbody th {
  background: var(--surface);
  border-right: 1px solid transparent;
  transition: border-right-color 0.2s ease;
}

.nmk-pos__scroller.is-scrolled tbody th {
  border-right-color: var(--nmk-pos-gray-50);
}

.nmk-pos__table td img,
.nmk-pos__info img {
  display: block;
}

/* The "i" is a link to the provider's country list; the box hugs the icon. */
.nmk-pos__info {
  display: inline-block;
  vertical-align: middle;
}

/* Yes/no columns — Physical POS device, POS app, eCommerce plugin, Invoice
   builder, Fiat conversion — are centred, header label included, so each
   mark sits under the middle of its label. Text columns stay left-aligned,
   and so do the "i" links in Countries/Regions, in line with "Global". */
.nmk-pos__table tr > :is(:nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(8)) {
  text-align: center;
}

.nmk-pos__table td > img {
  margin-inline: auto;
}

/* The name is one link — logo and label together (Figma 5693:22298). It hugs
   its content; on hover or keyboard focus it turns into a grey pill, with
   10px of room after the label, instead of underlining. dash.css gives every
   <a> a blue colour, a darker hover colour and `transition: all 0.5s`, so
   each is restated here. */
.nmk-pos__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  border-radius: 999px;
  color: var(--ds-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.nmk-pos__name:hover,
.nmk-pos__name:focus-visible {
  background: var(--surface-subtle);
  color: var(--ds-text-primary);
  text-decoration: none;
}

/* Every logo sits centred in a 26px slot, whatever its own size (16 or 18). */
.nmk-pos__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.nmk-pos__logo img {
  display: block;
}

.nmk-pos__logo img.is-round {
  border-radius: 50%;
}

@media (max-width: 768px) {
  /* Phone: 20px from every edge, full width; 30px inside and 30px between the
     heading and the table. Type follows Figma's mobile mode — h4 22/28, small
     text 12/17. */
  .nmk-pos {
    --nmk-pos-pad: 30px;
    --ds-h4-size: 22px;  --ds-h4-lh: 28px;
    --ds-s-size: 12px;   --ds-s-lh: 17px;
    width: calc(100% - 40px);
    max-height: calc(100% - 40px);
  }

  .nmk-pos__body {
    gap: 30px;
  }
}