/*
 * Marketing site.
 *
 * Own file on purpose: notarium.css is the shared design-token + component
 * layer and is not edited from here. Everything below is marketing-only
 * chrome, built strictly on the --nt-* tokens, so a token change in
 * notarium.css moves this surface too — including dark mode, which needs no
 * rules of its own here.
 *
 * Prefix: .mk-
 *
 * ── ONE DECLARATION PER CLASS ─────────────────────────────────────────────
 * This file used to be two stacked passes: a structural block, and an
 * art-direction block appended after it that re-declared every single .mk-*
 * class. The later block won, so the first was dead weight that misled every
 * reader — and where the two only *partly* overlapped, the result was
 * whatever the cascade happened to produce rather than anything anyone drew:
 *
 *   · .mk-hero::before  — the second rule's full-width band inherited
 *     `width: 44rem` and `border-radius: 50%` from the first, so the hero
 *     glow was an ellipse pinned to the left edge, not light falling behind
 *     the document.
 *   · .mk-faq           — the ruled register kept the first pass's card
 *     background, padding and 0.6rem grid gap, so every answer was a padded
 *     box inside a ruled row; and `details[open] summary::after` took the
 *     rotation from one rule and the "–" glyph from the other, so the plus
 *     turned into a slash.
 *   · .mk-field-label   — a mono field *caption* and a form label under one
 *     name; kontakt.html.erb carried a scoped workaround to undo the
 *     uppercase and tracking that leaked into its form. Both are gone.
 *   · .mk-plan-badge / .mk-plans / .mk-section / .mk-grid-2 — each had two
 *     values with no way to tell which was current.
 *
 * The two passes are merged below, property by property (a later block that
 * did not restate a property was still inheriting it). If a class needs a
 * variant, give the variant its own name — never a second block further down.
 *
 * ── Relationship to notarium.css ──────────────────────────────────────────
 *   · The page measure is --nt-shell with --nt-gutter, the same one .nt-shell
 *     uses, so a marketing band and an app page share a content edge. The
 *     narrow variant takes the SAME gutter, so on a phone the two line up
 *     exactly and only diverge once there is room to diverge.
 *   · .mk-section / -sunken / -raised are the .nt-section + .nt-band pair
 *     under an older name, with identical values. They stay because
 *     events.css composes with them (.ev-frist-band.mk-section-sunken,
 *     .ev-do.mk-section-raised) and that file is not ours; everything under
 *     app/views/pages has moved to .nt-band + .nt-section.
 *   · .mk-eyebrow / .mk-h2 / .mk-h3 carry the .nt-* values verbatim, so a
 *     section head reads identically whichever vocabulary it is written in.
 *     Prefer the .nt-* names in new markup.
 */

:root {
  /* The three measures, named. Anything narrower than the shell is a reading
     decision and should say which reading. */
  --mk-narrow: 44rem;    /* .mk-container-narrow: a whole page of prose */
  --mk-measure: 46rem;   /* a heading and its lede; the FAQ register */
  --mk-prose: 40rem;     /* running legal text — ~72 characters at 1.02rem */

  /* The pricing block's own measure: two 23rem plan cards and the gap between
     them. The plans, the two footnotes and the currency line all take it, so
     the whole block reads as one column instead of a narrow pair of cards
     over a full-width panel. */
  --mk-plans: 47.15rem;
}

/* ── Layout primitives ────────────────────────────────────────────────── */

/* `.mk-container` is declared in notarium.css, beside `.nt-shell`, as an
   alias of it — the two carried identical values here and there. */

.mk-container-narrow {
  width: 100%;
  max-width: var(--mk-narrow);
  margin-inline: auto;
  /* Same gutter as the shell on purpose: below ~44rem the two containers are
     the identical box, so a narrow page and a wide one have one phone layout. */
  padding-inline: var(--nt-gutter);
}

/* Identical to .nt-section — see the header note. */
.mk-section { padding-block: clamp(4rem, 8vw, 7.5rem); }

.mk-section-sunken {
  background: var(--nt-surface-sunken);
  border-block: 1px solid var(--nt-hairline);
}

/* --nt-surface, not --nt-surface-raised: this is the .nt-band-surface ground,
   and a band that is half a step off its own system reads as a mistake. */
.mk-section-raised {
  background: var(--nt-surface);
  border-block: 1px solid var(--nt-hairline);
}

.mk-section-head {
  max-width: var(--mk-measure);
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

/* Two even columns that fold to one. The workhorse split for a form beside
   its rail, replacing three near-identical inline grid overrides. */
.mk-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: start;
}

.mk-teaser-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 62rem) {
  .mk-teaser-grid { grid-template-columns: 0.9fr 1.1fr; }
}

/* ── Type ─────────────────────────────────────────────────────────────── */

.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--nt-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* 11 px tracked wide: the tertiary tier measures 4.1:1 on the sunken band,
     so eyebrows sit on the secondary one. */
  color: var(--nt-text-secondary);
  margin: 0 0 1.1rem;
}

.mk-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--nt-seal);
  opacity: 0.7;
}

.mk-h2 {
  font-family: var(--nt-font-display);
  font-size: clamp(1.9rem, 3.3vw, 2.85rem);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 20, "WONK" 1;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.mk-h3 {
  font-family: var(--nt-font-display);
  font-size: 1.22rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

/* No bottom margin: what follows a lede owns the space after it (.mk-cta-row
   has 1.75rem, .mk-section-head has its own). The old rule's 2.25rem on top
   of those is why section heads read as floating. */
.mk-lede {
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--nt-ink-soft);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}

.mk-note {
  margin: 1rem 0 0;
  color: var(--nt-text-secondary);
  font-size: 0.84rem;
  line-height: 1.55;
}

.mk-subhead {
  font-family: var(--nt-font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nt-ink-faint);
  border-top: 1px solid var(--nt-hairline);
  padding-top: 1.1rem;
  margin: 1.4rem 0 0.6rem;
}

.mk-keyword-line {
  font-family: var(--nt-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--nt-ink-faint);
  line-height: 1.7;
  margin-top: 2rem;
}

/* The trail is `<nav aria-label><ol>` — see shared/_breadcrumb for why, and
   for the rule that the array feeding it is the same one that feeds the
   BreadcrumbList in the head. */
.mk-breadcrumb {
  font-family: var(--nt-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nt-ink-faint);
  margin: 0 0 1.5rem;
}

.mk-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The separator is drawn, never written. A "·" in the markup is content: a
   screen reader announces it between every crumb, and it lands in the copied
   text. ::before on the SECOND and later items also means the first crumb
   cannot start with one. */
.mk-breadcrumb li + li::before {
  content: "·";
  margin-right: 0.55rem;
  color: var(--nt-ink-faint);
  opacity: 0.7;
}

.mk-breadcrumb a { color: var(--nt-ink-faint); text-decoration: none; }
.mk-breadcrumb a:hover { color: var(--nt-seal); }
.mk-breadcrumb [aria-current="page"] { color: var(--nt-ink-soft); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* Only the event landings still use this hero; app/views/pages is on
   .nt-hero-band. events.css composes with it (.mk-hero.ev-hero), so the
   shape has to stay put. */
.mk-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--nt-paper);
}

/* One atmospheric gesture: warm light falling from behind the document. */
.mk-hero::before {
  content: "";
  position: absolute;
  inset: -18% -10% auto -10%;
  height: 85%;
  background:
    radial-gradient(52% 62% at 68% 26%, rgba(127, 29, 43, 0.07), transparent 72%),
    radial-gradient(46% 52% at 16% 6%, rgba(30, 107, 79, 0.045), transparent 70%);
  pointer-events: none;
}

.mk-hero h1 {
  font-family: var(--nt-font-display);
  font-size: clamp(2.6rem, 5.2vw, 4.1rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 14, "WONK" 1;
  letter-spacing: -0.032em;
  line-height: 1;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

/* .mk-hero-grid is gone. It was governed by two conflicting media queries
   (62rem and 1000px), leaving an 8 px window with the wrong column ratio, and
   nothing uses it any more: the event landings bring their own .ev-hero-grid
   and app/views/pages is on .nt-hero-grid. */

.mk-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Proof list: not bullets — small facts on their own rule. */
.mk-proof {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--nt-hairline);
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  font-size: 0.86rem;
  color: var(--nt-ink-soft);
}

.mk-proof li { display: grid; grid-template-columns: 0.9rem 1fr; gap: 0.55rem; align-items: start; }

.mk-proof li::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--nt-ok);
}

/* ── Cards and grids ──────────────────────────────────────────────────── */

.mk-grid {
  display: grid;
  /* 21rem, not 16: at 16rem the shell fits four tracks and /stiftelse's six
     "det får I" cards came out 4 + 2, with two stranded on the second row.
     Three columns divide six, and four, evenly. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1.15rem;
}

/* Genuinely two columns. At a 19rem floor the shell fits three tracks, and
   both callers pass four cards — so the fourth was stranded alone on a second
   row. 26rem is the smallest floor that gives two and only two. */
.mk-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1.5rem;
}

/* No hover lift. Not one .mk-card on this surface is a link or a control, and
   a card that rises under the cursor promises a click that never happens —
   the same argument kontakt.html.erb already makes for using .mk-notice
   around its form. Interactive cards have their own classes (.ev-related-card). */
.mk-card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-hairline);
  border-radius: 12px;
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: var(--nt-shadow-1);
}

.mk-card p { color: var(--nt-ink-soft); font-size: 0.92rem; line-height: 1.6; margin: 0; }

.mk-card-number {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--nt-seal-soft);
  color: var(--nt-seal-ink);
  font-family: var(--nt-font-mono);
  font-size: 0.7rem;
  /* No tracking: the old caption rule's 0.1em pushed a two-digit number off
     the centre of its own circle. */
  letter-spacing: 0;
}

/* ── Checked list of what is included ─────────────────────────────────── */

/* Used standalone on /priser and inside every plan card. It is a list, never
   a card grid. Capped at 52rem so a five-item list reads as two comfortable
   columns instead of three thin ones across the full shell. */
.mk-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0.6rem 2rem;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--nt-ink-soft);
}

.mk-features li { display: grid; grid-template-columns: 0.95rem 1fr; gap: 0.65rem; align-items: start; }

.mk-features li::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.3rem;
  background: var(--nt-ok);
  clip-path: polygon(14% 46%, 8% 55%, 38% 84%, 92% 26%, 84% 18%, 38% 66%);
}

/* ── Priser ───────────────────────────────────────────────────────────── */

.mk-plans {
  display: grid;
  /* Capped, not 1fr: with two plans a stretched track makes each card the
     width of a small billboard and the price stops being comparable. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 23rem));
  justify-content: center;
  gap: 1.15rem;
  align-items: stretch;
  max-width: var(--mk-plans);
  margin-inline: auto;
}

.mk-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--nt-surface);
  border: 1px solid var(--nt-hairline);
  border-radius: 12px;
  padding: 1.7rem 1.5rem 1.6rem;
  box-shadow: var(--nt-shadow-1);
}

/* Only the featured card carries a badge, and only its title *line* has to
   clear it — the badge ends above the tagline. Indenting the whole title block
   made the featured tagline wrap where the other's did not, which pushed the
   two prices out of line; indenting both blocks (the previous rule) also gave
   Basis a 6.5rem gutter to clear something that was not there. */
.mk-plan-card.is-featured > div:first-of-type > :first-child { padding-right: 7rem; }

.mk-plan-card.is-featured {
  border-color: color-mix(in oklab, var(--nt-seal) 40%, var(--nt-hairline));
  box-shadow: var(--nt-shadow-3);
}

.mk-plan-card.is-featured::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--nt-seal-deep), var(--nt-seal), var(--nt-seal-lift));
}

/* Inside the card's padding rather than straddling its edge: on the edge it
   cut the featured card's top rule, and in flow it pushed the featured card's
   price out of line with the other's. */
.mk-plan-badge {
  position: absolute;
  top: 1.15rem;
  right: 1.35rem;
  display: inline-flex;
  padding: 0.16rem 0.62rem;
  border-radius: 999px;
  background: var(--nt-seal);
  color: var(--nt-on-seal);
  font-family: var(--nt-font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mk-price {
  font-family: var(--nt-font-display);
  font-size: 2.5rem;
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 14, "WONK" 1;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--nt-ink);
  margin: 0 0 0.4rem;
}

.mk-price span {
  font-family: var(--nt-font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--nt-ink-faint);
  margin-left: 0.35rem;
}

/* The stiftelse offer, on /stiftelse only. Same construction as the onboarding
   picker's .nt-pick-was / renewal line, because the two screens are the same
   decision seen twice: the ordinary price struck through beside the discounted
   one, and what it renews to spelled out underneath. A first-year price shown
   on its own is the kind of thing customers are right to distrust.

   An <s>, not a <span>: .mk-price span above is the unit ("kr. første år") and
   would otherwise style this too. */
.mk-price-was {
  margin-left: 0.5rem;
  font-family: var(--nt-font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--nt-ink-faint);
  text-decoration-thickness: 1px;
}

/* Pulled up under the price: .mk-plan-card is a flex column with a 1rem gap,
   and the renewal line belongs to the figure above it, not to the feature list
   below. */
.mk-price-renews {
  margin: -0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--nt-ink-soft);
}

/* Inside a plan card the feature list is one column, and it grows so every
   card's button lands on the same line. */
.mk-plan-card .mk-features {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  flex: 1;
  max-width: none;
  margin: 1.1rem 0 1.5rem;
  padding: 1.1rem 0 0;
  font-size: 0.87rem;
}

/* The separator is a pseudo-element: both `border-top` and `box-shadow` on
   this list lose to a reset further down the cascade, and a painted 1px bar
   cannot be argued with. */
.mk-plan-card .mk-features::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--nt-hairline);
}

.mk-plan-card .nt-btn,
.mk-plan-card .nt-cta-btn { margin-top: auto; width: 100%; justify-content: center; }

/* The two footnotes under the plans ("flere selskaber", "stiftelse") are one
   panel split by a rule, not two cards. As cards their very different copy
   lengths left the short one a tall box with a dead half; in one panel the
   columns simply end where they end. */
.mk-plan-notes {
  display: grid;
  gap: 1.5rem;
  max-width: var(--mk-plans);
  margin: 2rem auto 0;
  padding: 1.5rem;
  border: 1px solid var(--nt-hairline);
  border-radius: 12px;
  background: var(--nt-surface);
}

/* Anything else in the pricing band that has to line up with the plan cards:
   the section head above them and the currency line below. */
.mk-plans-measure { max-width: var(--mk-plans); margin-inline: auto; }

.mk-plan-notes p { margin: 0; color: var(--nt-ink-soft); font-size: 0.92rem; line-height: 1.6; }

@media (min-width: 48rem) {
  .mk-plan-notes { grid-template-columns: 1fr 1fr; gap: 2.25rem; padding: 1.75rem 2rem; }
  .mk-plan-notes > * + * { padding-left: 2.25rem; border-left: 1px solid var(--nt-hairline); }
}

/* ── Tables ───────────────────────────────────────────────────────────── */

.mk-table-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--nt-hairline); }

.mk-table {
  width: 100%;
  /* Below this the three columns start hyphenating; the wrapper scrolls
     instead, which is the honest failure mode for a comparison. */
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--nt-surface);
}

.mk-table th,
.mk-table td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--nt-hairline);
  vertical-align: top;
}

.mk-table thead th {
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--nt-ink-faint);
  background: var(--nt-surface-raised);
}

.mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table td { color: var(--nt-ink-soft); }
.mk-table td:first-child { color: var(--nt-ink); font-weight: 550; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

/* The heading holds the left rail and the questions take the rest of the
   shell. Stacked, a 46rem register under a 46rem heading left the right half
   of a full-bleed band empty. */
.mk-faq-band { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.mk-faq-band .mk-section-head { margin-bottom: 0; }

@media (min-width: 62rem) {
  .mk-faq-band { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 4rem; }

  /* One step down from the full section scale: at 2.85rem a three-word
     heading breaks over three lines in a rail this wide. */
  .mk-faq-band :is(.nt-h2, .mk-h2) { font-size: clamp(1.75rem, 2.4vw, 2.3rem); }
}

/* A ruled register, not a stack of cards: hairline above the first row and
   under every row, and no gap between them. */
.mk-faq { max-width: var(--mk-measure); }

.mk-faq details { border-bottom: 1px solid var(--nt-hairline); }
.mk-faq details:first-of-type { border-top: 1px solid var(--nt-hairline); }

.mk-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--nt-font-display);
  font-size: 1.06rem;
  font-weight: 600;
  font-variation-settings: "opsz" 20, "SOFT" 26, "WONK" 0;
  letter-spacing: -0.008em;
  color: var(--nt-ink);
  transition: color var(--nt-motion-fast) var(--nt-ease-out);
}

.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::marker { content: ""; }
.mk-faq summary:hover { color: var(--nt-seal); }

/* A plus that turns into a cross. The rotation is on a pseudo-element, so
   opening the answer never moves the summary text. The glyph must not be
   restated for [open] — a rotated "–" is a slash, which is what the old
   duplicate produced. */
.mk-faq summary::after {
  content: "＋";
  flex: 0 0 auto;
  font-family: var(--nt-font-body);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--nt-ink-faint);
  transition: transform var(--nt-motion-base) var(--nt-ease-out),
              color var(--nt-motion-fast) var(--nt-ease-out);
}

.mk-faq details[open] summary::after { transform: rotate(135deg); color: var(--nt-seal); }

.mk-faq details p {
  margin: 0;
  padding: 0 3rem 1.3rem 0.25rem;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--nt-ink-soft);
  animation: nt-rise-in 320ms var(--nt-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .mk-faq details p { animation: none; }
}

/* ── Long-form prose (the legal set, /om) ─────────────────────────────── */

.mk-prose {
  max-width: var(--mk-prose);
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--nt-ink-soft);
}

.mk-prose > * + * { margin-top: 1.05em; }

.mk-prose h2 {
  font-family: var(--nt-font-display);
  font-size: 1.7rem;
  font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 22, "WONK" 1;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--nt-ink);
  margin-top: 2.6em;
  margin-bottom: 0.7rem;
  /* The nav is sticky, so a #afsnit-N link has to stop below it. */
  scroll-margin-top: 5.5rem;
}

.mk-prose h3 {
  font-family: var(--nt-font-display);
  font-size: 1.14rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 28, "WONK" 0;
  color: var(--nt-ink);
  margin-top: 2em;
  scroll-margin-top: 5.5rem;
}

.mk-prose strong { color: var(--nt-ink); font-weight: 650; }
/* The reset strips list-style globally, so the marker has to be asked for
   again before ::marker has anything to colour. */
.mk-prose ul { list-style: disc; }
.mk-prose ol { list-style: decimal; }
.mk-prose ul, .mk-prose ol { padding-left: 1.35em; }
.mk-prose li + li { margin-top: 0.4em; }
.mk-prose li::marker { color: var(--nt-seal); }

.mk-prose a,
.mk-inline-link {
  color: var(--nt-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--nt-seal) 55%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--nt-motion-fast) var(--nt-ease-out);
}

.mk-prose a:hover,
.mk-inline-link:hover { text-decoration-color: var(--nt-seal); }

/* Table of contents on the legal pages: a bound index, not a nav bar and not
   a card. One column — the old two-column `columns: 2` survived the second
   pass and broke the rail into a pair of stubs. */
.mk-toc {
  border-left: 2px solid var(--nt-hairline);
  padding: 0.2rem 0 0.2rem 1.15rem;
  margin-bottom: 2.5rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.mk-toc a { color: var(--nt-ink-soft); text-decoration: none; }
.mk-toc a:hover { color: var(--nt-seal); text-decoration: underline; text-underline-offset: 3px; }

/* ── Notices, callouts ────────────────────────────────────────────────── */

.mk-notice {
  background: var(--nt-surface);
  border: 1px solid var(--nt-hairline);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--nt-shadow-1);
}

.mk-callout {
  background: var(--nt-seal-soft);
  border: 1px solid var(--nt-hairline);
  border-left: 3px solid var(--nt-seal);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  margin: 1.6rem 0;
}

.mk-callout p:last-child { margin-bottom: 0; }

/* ── Forms (kontakt) ──────────────────────────────────────────────────── */

.mk-form { display: grid; gap: 1.05rem; max-width: 34rem; }
.mk-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.05rem; }

/* A form label. Sentence case and no tracking — the uppercase mono caption
   that used to share this name is gone, and so is the workaround in
   kontakt.html.erb that undid it. */
.mk-field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nt-ink);
  margin-bottom: 0.45rem;
}

.mk-textarea {
  min-height: 9rem;
  resize: vertical;
  /* textarea does not inherit the page face on its own. */
  font-family: var(--nt-font-body);
}

.mk-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mk-errors {
  border-left: 3px solid var(--nt-danger);
  background: var(--nt-danger-soft);
  color: var(--nt-danger);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
}

.mk-errors ul { list-style: disc; margin: 0.35rem 0 0; padding-left: 1.15rem; }

/* ── Small helpers ────────────────────────────────────────────────────── */

.mk-stack-sm > * + * { margin-top: 0.6rem; }

.mk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--nt-seal);
  color: var(--nt-on-seal);
  border-radius: 0 0 8px 0;
  font-size: 0.9rem;
}

.mk-skip:focus { left: 0; }

/* ── Scroll choreography, without a single byte of JavaScript ─────────────
 * `animation-timeline: view()` ties an animation to how far an element has
 * travelled through the viewport. Where it is unsupported the @supports guard
 * simply leaves the content in its finished state, which is the correct
 * fallback for a marketing page: never invisible, never dependent on script.
 *
 * The :not() is load-bearing. app/views/pages now arrives with the reveal
 * controller (.nt-reveal inside [data-controller="reveal"]), and an element
 * driven by both systems fights itself — the keyframes win the cascade over
 * .nt-reveal's opacity: 0, so the element flashes in twice. One element, one
 * motion system; this block is for the pages that have no controller
 * (the legal set, /om's narrative, the event landings).
 */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main :is(
      .mk-section-head,
      .mk-card,
      .mk-plan-card,
      .mk-notice,
      .mk-callout,
      .mk-table-scroll,
      .mk-faq details
    ):not(.nt-reveal, [data-controller~="reveal"] *) {
      animation: nt-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 20%;
    }
  }
}