/* Gradien — fincore/mono · components
   Buttons, registration marks, hairline table, hairline lists, dividers.
   Everything inherits currentColor / var(--rule) / var(--quiet) so a single
   component definition works on the base, ink and signal surfaces. */

/* ---- CTA ---------------------------------------------------------------
   Two-part block: right-aligned label, 1px separator, an empty framed box
   carrying a registration crosshair that travels on hover. */
.mn-btn {
  display: inline-grid;
  grid-template-columns: auto 230px;
  align-items: stretch;
  color: inherit;
}
.mn-btn__text {
  align-self: end;
  padding: 0 12px 8px 0;
  text-align: right;
  font-size: var(--body);
  line-height: 1.35;
  border-right: 1px solid currentColor;
}
.mn-btn__box {
  position: relative;
  height: 64px;
  border-right: 1px solid currentColor;
  background: transparent;
  transition: background 300ms var(--ease);
}
.mn-mark {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 9px;
  height: 9px;
  transition: transform 300ms var(--ease);
}
.mn-mark::before,
.mn-mark::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.mn-mark::before { inset: 4px 0 4px 0; height: 1px; }
.mn-mark::after  { inset: 0 4px 0 4px; width: 1px; }

.mn-btn:hover .mn-btn__box,
.mn-btn:focus-visible .mn-btn__box { background: color-mix(in srgb, currentColor 8%, transparent); }
.mn-btn:hover .mn-mark,
.mn-btn:focus-visible .mn-mark { transform: translateX(205px); }
.mn-btn:active { transform: translateY(1px); }

/* ---- Pilot terms table -------------------------------------------------- */
.mn-table { border-bottom: 1px solid var(--rule); }
.mn-table__row {
  display: grid;
  grid-template-columns: 190px 1fr 260px;
  align-items: baseline;
  gap: 16px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.mn-table dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--micro);
  letter-spacing: 0.04em;
  color: var(--quiet);
}
.mn-table dd { margin: 0; }
.mn-table .mn-d-s { text-align: right; }

/* ---- Hairline lists ----------------------------------------------------- */
.mn-list li {
  border-top: 1px solid var(--rule);
  padding-block: 10px;
  font-size: var(--body);
}
.mn-list li:last-child { border-bottom: 1px solid var(--rule); }
.mn-list--out li { color: var(--quiet); }

/* ---- Utilities ---------------------------------------------------------- */
.mn-rule { height: 1px; background: var(--rule); }

/* Four L-shaped corner brackets, drawn as background gradients — no extra DOM. */
.mn-crop {
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 6px 1px, 1px 6px, 6px 1px, 1px 6px, 6px 1px, 1px 6px, 6px 1px, 1px 6px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}

/* Circled ordinals — authored, not a font glyph: neither Plus Jakarta Sans
   nor IBM Plex Mono ships U+2460, so a codepoint would fall back to a
   system face mid-headline. */
.mn-ord {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.34em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.78em;
  line-height: 1;
  vertical-align: 0.06em;
}

@media (max-width: 900px) {
  .mn-btn { grid-template-columns: auto 140px; }
  .mn-btn:hover .mn-mark,
  .mn-btn:focus-visible .mn-mark { transform: translateX(115px); }
  .mn-table__row { grid-template-columns: 1fr; gap: 4px; }
  .mn-table .mn-d-s { text-align: left; }
}