/* ==========================================================================
   Public platform site

   Extends the memorial design system rather than replacing it. The memorial
   pages are the brand: a warm serif, wide margins, small letterspaced labels,
   nothing shouting. These pages have to sell rather than recede.

   The previous version borrowed the memorial palette wholesale, which meant
   cream on cream on cream for seven pages and an accent token that appeared
   exactly once in six hundred lines. It read as unfinished rather than quiet.
   This version keeps the paper and the ink and commits to one strong colour,
   used everywhere: buttons, rules, numerals, marks, and one full-width band.

   The colour is the logo's own ink, sampled straight out of it: a deep
   petrol teal. It reads 8.6:1 on paper and 9.2:1 under white, and it is not
   the grey every other memorial site in the country uses.

   It replaced an evergreen chosen before the logo existed. A logo is not
   recoloured to match a stylesheet; the stylesheet follows the logo, or the
   header ends up being the one part of the page that disagrees with the
   brand.
   ========================================================================== */

/* ----------------------------------------------------------------- fonts */

/* Schibsted Grotesk carries the headings on these pages, and only these pages.

   The memorial pages keep Newsreader, and that is the point of the split: a
   serif is right when it is setting somebody's name above their photograph,
   and wrong when it is setting "What it costs". At display sizes Newsreader
   reads thin and bookish next to the photography, which is what made the
   headings here look weak while the body copy was fine.

   Served from this domain like the other two, so no third-party request is
   made in order to render a page. 47KB, one variable file covering 400 to
   900, and it is only fetched on the marketing pages because nothing else
   loads this stylesheet. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibstedgrotesk-latin.c5e9a9901938.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.mk {
  /* Headings here. Falls back through the product's own UI stack, so a failed
     font load degrades to Source Sans 3 rather than to Times. */
  --mk-font-display: "Schibsted Grotesk", "Source Sans 3", -apple-system,
                     BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* One accent, and only one. Anything on these pages that wants to be a
     colour is this colour. */
  --mk-accent:      #214d5a;   /* the logo's own ink, sampled from it */
  --mk-accent-deep: #163640;   /* the band, and button hover */
  --mk-accent-lift: #2f7086;   /* marks and small type on paper */
  --mk-accent-wash: #eaf0f2;   /* tinted surfaces */
  --mk-accent-line: #c3d5db;
  --mk-on-accent:   #f2f6f7;   /* text on the band */

  /* One type scale for every page here, so a heading is the same size on the
     pricing page as on the home page. */
  --t-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);   /* hero only */
  --t-h2:      clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --t-h3:      clamp(1.15rem, 1.08rem + 0.32vw, 1.35rem);
  --t-lead:    clamp(1.05rem, 1.0rem + 0.25vw, 1.2rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;

  --mk-band: clamp(3.5rem, 6vw, 5.5rem);

  /* Shape rule for this site: photographs and cards are 16px, buttons keep
     the product's own button radii, hairline marks are 6px. Applied without
     exception, so nothing reads as a stray corner. */
  --mk-media-radius: 16px;
}

/* Dark mode. The accent has to invert: a #214d5a button on a near-black
   page is a hole, not a call to action. Everything else in the palette comes
   from the product's own dark tokens, so these pages darken with the app
   rather than fighting it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk {
    --mk-accent:      #8fc3d4;
    --mk-accent-deep: #0f2429;
    --mk-accent-lift: #a9d4e2;
    --mk-accent-wash: #1a2529;
    --mk-accent-line: #2f454d;
    --mk-on-accent:   #e8f1f4;
  }
}
:root[data-theme="dark"] .mk {
  --mk-accent:      #8fc3d4;
  --mk-accent-deep: #0f2429;
  --mk-accent-lift: #a9d4e2;
  --mk-accent-wash: #1a2529;
  --mk-accent-line: #2f454d;
  --mk-on-accent:   #e8f1f4;
}

/* 600 rather than 400: a grotesque at book weight in a 60px headline looks
   underset, where the serif it replaced looked light for the opposite reason.
   The negative tracking is what stops the wide counters drifting apart at
   display size, and it is deliberately not applied to the small caps labels,
   which need the opposite. */
.mk h1, .mk h2, .mk h3 {
  font-family: var(--mk-font-display);
  font-weight: 600;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

.mk section > .wrap { padding-block: var(--mk-band); }

/* A label above a section: small, letterspaced, quiet. Rationed deliberately.
   One of these above every section is what makes a page look templated, so
   the home page uses two in six sections and the sub-pages use none. */
.mk .mk-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent);
  margin: 0 0 var(--sp-4);
}

/* Links in prose carry the accent, so the one colour on the page is also the
   one thing that means "you can click this". */
.mk-doc a:not(.btn),
.mk-qa a:not(.btn) {
  color: var(--mk-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.mk-doc a:not(.btn):hover,
.mk-qa a:not(.btn):hover { color: var(--mk-accent-lift); }

/* ---------------------------------------------------------------- buttons */

/* The product's primary button is near-black, which is right inside a
   memorial where nothing should compete with a photograph. Out here the
   primary action is the only thing on the page asking to be pressed, and it
   gets the colour. */
.mk .btn--primary {
  --btn-bg: var(--mk-accent);
  --btn-ink: #ffffff;
  --btn-line: var(--mk-accent);
}
.mk .btn--primary:hover {
  --btn-bg: var(--mk-accent-deep);
  --btn-line: var(--mk-accent-deep);
}
/* On dark the accent is a pale green, so white text on it would fail. Flip to
   dark ink on the light accent instead of inheriting the light-mode rule. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk .btn--primary { --btn-ink: #0b1a1f; }
  :root:not([data-theme="light"]) .mk .btn--primary:hover {
    --btn-bg: var(--mk-accent-lift);
    --btn-line: var(--mk-accent-lift);
  }
}
:root[data-theme="dark"] .mk .btn--primary { --btn-ink: #0b1a1f; }
:root[data-theme="dark"] .mk .btn--primary:hover {
  --btn-bg: var(--mk-accent-lift);
  --btn-line: var(--mk-accent-lift);
}

.mk .btn--outline {
  --btn-bg: transparent;
  --btn-ink: var(--mk-accent);
  --btn-line: var(--mk-accent-line);
}
.mk .btn--outline:hover {
  --btn-bg: var(--mk-accent-wash);
  --btn-line: var(--mk-accent);
}

/* ---------------------------------------------------------------- preview */

/* The strip shown to a signed-in visitor looking at the public front page on
   purpose. Quiet, and above the hero rather than fixed over it: it is an
   explanation, not a warning. */
.mk-preview {
  background: var(--mk-accent-wash);
  border-bottom: 1px solid var(--mk-accent-line);
  font-family: var(--font-ui);
  font-size: var(--t-small);
}
.mk-preview__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}
.mk-preview p { margin: 0; color: var(--ink-2); }
.mk-preview a { color: var(--mk-accent); font-weight: 600; }

/* ------------------------------------------------------------------- hero */

/* Asymmetric split: the argument on the left, the photograph on the right,
   running off the right edge of the viewport so the band does not read as a
   box sitting inside a page.

   The photograph does the work the old hero asked two screenshots to do. A
   pair of phones told a visitor what the software looks like; it did not tell
   them what it is for. Somebody holding two photographs of people who are
   gone does, in the time it takes to scroll past. The product itself is still
   here, inset at the corner, because the promise needs evidence. */
.mk-hero {
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}

.mk-hero__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.mk-hero__title {
  font-size: var(--t-display);
  line-height: 1.04;
  margin: 0 0 var(--sp-5);
  /* Narrow on purpose: the headline is two sentences and it stacks. Letting
     it run the full column at this size makes a ragged four-line block that
     breaks mid-sentence instead of at the full stop. */
  max-width: 15ch;
}
/* The second sentence is the turn in the argument. Colour carries it, which
   is cheaper than a font change and does not break the line. */
.mk-hero__title span { color: var(--mk-accent); }

.mk-hero__sub {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 32ch;
  margin: 0 0 var(--sp-6);
}

.mk-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.mk-hero__link {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--mk-accent);
  text-underline-offset: 0.3em;
}
.mk-hero__link:hover { color: var(--mk-accent-lift); }

/* The photograph, and the product inset over it. */
.mk-hero__art { position: relative; }

.mk-hero__photo { margin: 0; }
.mk-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--mk-media-radius);
  background: var(--paper-3);
}

.mk-hero__inset {
  position: absolute;
  margin: 0;
  /* Large enough to be evidence. Below about 180px the memorial page inside
     it stops being a page and becomes a grey rectangle, and an illegible
     screenshot is decoration rather than proof. */
  width: 34%;
  max-width: 215px;
  left: -5%;
  bottom: -7%;
  transform: rotate(-4deg);
}
.mk-hero__inset img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--paper-2);
}

@media (min-width: 62em) {
  .mk-hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--sp-8);
  }
  /* Bleeds to the right edge of the viewport.

     The bleed is the gutter outside the container, which is half of whatever
     the viewport has spare over `--page`, plus the wrap's own padding. It has
     to be measured against the container: an earlier version wrote `100%`,
     which in a margin resolves against the element's own width, so the
     photograph ran about 500px past the viewport and the hand in it was
     clipped off. `max()` keeps it at zero below `--page`, where there is no
     spare width to give back. */
  .mk-hero__art {
    --mk-bleed: max(0px, (100vw - var(--page)) / 2);
    margin-right: calc((var(--mk-bleed) + var(--sp-5)) * -1);
  }
  .mk-hero__photo img {
    aspect-ratio: 5 / 4;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (max-width: 61.99em) {
  .mk-hero__inner { grid-template-columns: 1fr; }

  /* No character caps in the single-column layout.
     A `ch` cap is tied to the font size, not to the container, so it does not
     grow. Between a phone and the two-column breakpoint the paragraph stayed
     about 270px wide while the column grew to 960px, and every extra pixel
     piled up on the right: 120px wasted at 390px, 283px at 560px.
     Here the text takes the column, and once the column is wider than a
     comfortable measure the block is centred so the leftover is split evenly
     instead of hanging off one edge. */
  .mk-hero__title,
  .mk-hero__sub { max-width: none; }

  .mk-hero__copy,
  .mk-hero__art {
    max-width: 33rem;
    margin-inline: auto;
  }

  .mk-hero__art { margin-top: var(--sp-4); }
  .mk-hero__inset { width: 26%; left: 2%; bottom: -6%; }
}

@media (max-width: 34em) {
  /* The inset is a 90px sliver at this width, which is decoration rather
     than evidence. The product gets its own section further down instead. */
  .mk-hero__inset { display: none; }

  /* Except where the product *is* the message.
     On the funeral-directors page the visitor has never heard of us, so a mood
     photograph on its own leaves them no wiser. At this width the inset is a
     90px sliver, so the two swap rather than shrink: the screenshot takes the
     slot at a size somebody can actually read, and the photograph steps back
     until there is room for both. */
  .mk-hero--product .mk-hero__photo { display: none; }
  .mk-hero--product .mk-hero__inset {
    display: block;
    position: static;
    width: min(15rem, 62%);
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------------ steps */

/* A rail, not three cards. Three equal boxes in a row is the layout every
   marketing page reaches for first, and it makes a sequence look like a menu.
   A line with the numbers sitting on it reads as one thing after another,
   which is what these are. */
.mk-steps { background: var(--mk-accent-wash); }
.mk-steps > .wrap { padding-block: clamp(2.75rem, 4.5vw, 4rem); }

.mk-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  position: relative;
}

/* The rail itself, behind the numerals. */
.mk-steps__grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.7rem;
  height: 1px;
  background: var(--mk-accent-line);
}

.mk-step { position: relative; padding-top: var(--sp-6); }

.mk-step__n {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--mk-accent);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-step__n { color: #0b1a1f; }
}
:root[data-theme="dark"] .mk-step__n { color: #0b1a1f; }

.mk-step h2 { font-size: var(--t-h3); margin: 0 0 var(--sp-2); }
.mk-step p { font-size: var(--t-body); color: var(--ink-2); margin: 0; line-height: 1.55; }

/* The trial terms, which used to sit under the hero buttons where they were
   a price tag on a page that had not made its case yet. */
.mk-steps__note {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--mk-accent-line);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-2);
}

@media (max-width: 46em) {
  .mk-steps__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* The rail turns vertical rather than disappearing, so the sequence still
     reads as a sequence on a phone. */
  .mk-steps__grid::before {
    left: 0.7rem;
    right: auto;
    top: 0.7rem;
    bottom: 0.7rem;
    width: 1px;
    height: auto;
  }
  .mk-step { padding-top: 0; padding-left: var(--sp-6); min-height: 1.4rem; }
}

/* ----------------------------------------------------------- photographs */

/* One full-bleed photograph, with the claim set over it. This is the section
   that answers the headline: this is what "everyone has a photograph" looks
   like when it is all in one place. */
.mk-scatter {
  position: relative;
  isolation: isolate;
  min-height: clamp(20rem, 42vw, 30rem);
  display: grid;
  align-items: end;
  background: var(--ink);
}

.mk-scatter__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A scrim, not a tint. This photograph is a pile of prints with white borders
   and a bright sky in the middle of it, so a bottom-up gradient alone leaves
   the top of the heading sitting on whatever happens to be behind it. The
   left-to-right pass is the one that does the work: it guarantees the column
   the words actually occupy, whatever the image does. The vertical pass is
   there to settle the foot of the band. */
.mk-scatter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to right,
      rgba(10, 20, 24, 0.93) 0%,
      rgba(10, 20, 24, 0.86) 32%,
      rgba(10, 20, 24, 0.42) 64%,
      rgba(10, 20, 24, 0.16) 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 20, 24, 0.55) 0%,
      rgba(10, 20, 24, 0.24) 55%,
      rgba(10, 20, 24, 0.10) 100%
    );
}

/* On a phone the words run the full width of the band, so a left-to-right
   scrim would fade out underneath the end of every line. Flatten it. */
@media (max-width: 46em) {
  .mk-scatter::after {
    background: linear-gradient(
      to top,
      rgba(10, 20, 24, 0.93) 0%,
      rgba(10, 20, 24, 0.82) 48%,
      rgba(10, 20, 24, 0.58) 100%
    );
  }
}

.mk-scatter > .wrap { padding-block: var(--sp-7) var(--mk-band); }

.mk-scatter h2 {
  font-size: var(--t-h2);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 var(--sp-3);
  max-width: 20ch;
}
.mk-scatter p {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  margin: 0;
  max-width: 44ch;
}

/* --------------------------------------------------------------- decisions */

.mk-decisions__head {
  font-size: var(--t-h2);
  line-height: 1.2;
  max-width: 24ch;
  margin: 0 0 var(--sp-7);
}

.mk-decisions__list { list-style: none; margin: 0; padding: 0; }

.mk-decision {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-2);
}
.mk-decision:last-child { border-bottom: 1px solid var(--line-2); }

.mk-decision h3 {
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem);
  line-height: 1;
  margin: 0;
  color: var(--mk-accent);
}

.mk-decision p {
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 40em) {
  .mk-decision { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* --------------------------------------------------------------- promise */

/* The one colour block on the page. Deliberate, and used once: the promise
   not to delete a family's photographs is the single thing on this site that
   somebody has to believe, and it is the only section that stops the scroll
   by changing the ground under it. */
.mk-promise { background: var(--mk-accent); color: var(--mk-on-accent); }
.mk-promise__inner { max-width: 48rem; }

.mk-promise h2 {
  font-size: var(--t-h2);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 var(--sp-3);
  max-width: 20ch;
}
.mk-promise__inner > p {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--sp-6);
}

.mk-promise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--t-small);
}
.mk-promise__list li {
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

/* On dark the band is a pale green, so white text on it would be unreadable.
   Reverse to dark ink, which keeps the block reading as the same device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-promise h2 { color: #0b1a1f; }
  :root:not([data-theme="light"]) .mk-promise__inner > p { color: rgba(13, 32, 25, 0.78); }
  :root:not([data-theme="light"]) .mk-promise__list li {
    color: rgba(13, 32, 25, 0.88);
    border-top-color: rgba(13, 32, 25, 0.28);
  }
}
:root[data-theme="dark"] .mk-promise h2 { color: #0b1a1f; }
:root[data-theme="dark"] .mk-promise__inner > p { color: rgba(13, 32, 25, 0.78); }
:root[data-theme="dark"] .mk-promise__list li {
  color: rgba(13, 32, 25, 0.88);
  border-top-color: rgba(13, 32, 25, 0.28);
}

@media (max-width: 46em) {
  .mk-promise__list { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ------------------------------------------------------------------- end */

.mk-end__inner { text-align: center; max-width: 34rem; margin-inline: auto; }

.mk-end h2 { font-size: var(--t-h2); line-height: 1.15; margin: 0 0 var(--sp-2); }

.mk-end__sub {
  font-size: var(--t-lead);
  color: var(--ink-2);
  margin: 0 0 var(--sp-6);
}

.mk-end__note {
  margin: var(--sp-6) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-3);
}
.mk-end__note a { color: var(--mk-accent); }
.mk-end__note a:hover { color: var(--mk-accent-lift); }

/* ------------------------------------------------------------ navigation */

/* The accent rule across the top of every page. Not sticky: it belongs to the
   page, not to the header, and a coloured bar that follows you down a memorial
   product would be too much. */
.mk-rule {
  height: 3px;
  background: var(--mk-accent);
}

.mk-nav {
  border-bottom: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.mk-nav__inner {
  display: grid;
  grid-template-areas: "brand cta" "links links";
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-3);
}

.mk-nav__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* --------------------------------------------------------------- the logo */

/* Sized by height, because that is the dimension a header cares about; the
   width follows the file's own 3.77:1. The `height`/`width` attributes on the
   tags are the real pixel size, so the box is reserved before the PNG lands
   and the navigation does not jump.

   The accent rule that used to sit under the wordmark is gone: the logo has a
   mark of its own now, and two marks stacked is one too many. */
.mk-logo {
  display: block;
  /* The lockup is 3.77:1 and the wordmark is only part of that width, so it
     needs more height than a plain wordmark would to read at the same size.
     40px in a 74px bar leaves the header well inside its cap. */
  height: 40px;
  width: auto;
}
@media (max-width: 34em) {
  .mk-logo { height: 32px; }
}

/* Light and dark are two files, swapped here rather than in markup so that
   both `prefers-color-scheme` and an explicit `data-theme` can be honoured. */
.mk-logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-logo--light { display: none; }
  :root:not([data-theme="light"]) .mk-logo--dark { display: block; }
}
:root[data-theme="dark"] .mk-logo--light { display: none; }
:root[data-theme="dark"] .mk-logo--dark { display: block; }
/* And back again, for a page forced light inside a dark system. */
:root[data-theme="light"] .mk-logo--light { display: block; }
:root[data-theme="light"] .mk-logo--dark { display: none; }

.mk-nav__cta { grid-area: cta; }

.mk-nav__links {
  grid-area: links;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  /* Scrolls rather than wrapping to a third row on a narrow phone. */
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--sp-5) * -1);
  padding-inline: var(--sp-5);
}
.mk-nav__links::-webkit-scrollbar { display: none; }

.mk-nav__links a {
  position: relative;
  font-family: var(--font-ui);
  /* 500 rather than 400. At this size the difference between a navigation and
     a line of body copy is weight, and the old bar read as neither. */
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--sp-2);
}

/* The underline is drawn rather than being a border, so it can sit tight under
   the text on a link whose box is padded for a 44px tap target. */
.mk-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sp-2) - 4px);
  height: 2px;
  border-radius: 6px;
  background: var(--mk-accent);
  opacity: 0;
}
.mk-nav__links a:hover { color: var(--mk-accent); }
.mk-nav__links a:hover::after { opacity: 1; }

.mk-nav__links a[aria-current="page"] { color: var(--mk-accent); }
.mk-nav__links a[aria-current="page"]::after { opacity: 1; }

/* "Find a page" is the one item in the bar that is a task rather than a
   section, and the people who need it are not reading the rest of the bar.
   A quiet outline is enough to lift it out without making it a second CTA
   competing with "Create a page". */
.mk-nav__find {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.mk-nav__find::after { display: none; }
.mk-nav__find:hover { border-color: var(--mk-accent); background: var(--mk-accent-wash); }
.mk-nav__find[aria-current="page"] {
  border-color: var(--mk-accent);
  background: var(--mk-accent-wash);
}

.mk-nav__signin { color: var(--ink-3); }

/* One line once everything fits on one, which is the rule that matters at
   desktop. Sign in is pushed away from the section links so it does not read
   as another one of them. */
@media (min-width: 56em) {
  .mk-nav__inner {
    grid-template-areas: "brand links cta";
    grid-template-columns: auto 1fr auto;
    min-height: 74px;
    padding-block: 0;
  }
  .mk-nav__links { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .mk-nav__find { margin-left: auto; }
}

@media (prefers-reduced-transparency: reduce) {
  .mk-nav { background: var(--paper); backdrop-filter: none; }
}

/* ---------------------------------------------------------------- footer */

.mk-foot {
  border-top: 1px solid var(--line);
  background: var(--paper-3);
  font-family: var(--font-ui);
}

.mk-foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: var(--sp-7);
  padding-block: var(--sp-8) var(--sp-6);
}

.mk-foot__name { margin-bottom: var(--sp-4); }
.mk-foot__name .mk-logo { height: 36px; }
.mk-foot__line { color: var(--ink-3); font-size: var(--step--1); max-width: 28ch; }

.mk-foot__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.mk-foot__nav h2 {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.mk-foot__nav a {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--sp-1);
}
.mk-foot__nav a:hover { color: var(--mk-accent); text-decoration: underline; }

.mk-foot__base {
  border-top: 1px solid var(--line-2);
  padding-block: var(--sp-5) var(--sp-6);
}
.mk-foot__base p { color: var(--ink-3); font-size: var(--step--1); margin: 0; max-width: none; }

@media (max-width: 52em) {
  .mk-foot__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 34em) {
  .mk-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ sub-pages */

.mk-page__head {
  padding-block: clamp(3rem, 6vw, 5rem) var(--sp-6);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: var(--sp-7);
}
.mk-page__head h1 {
  font-size: var(--t-display);
  line-height: 1.05;
  margin: 0 0 var(--sp-4);
  max-width: 16ch;
}
.mk-page__lede {
  font-size: var(--t-lead);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
}
.mk-page__lede a { color: var(--mk-accent); }
.mk-page__lede a:hover { color: var(--mk-accent-lift); }

/* A photographic band under the header on the two pages that are being read
   by somebody deciding, rather than by somebody checking a term. Privacy and
   terms deliberately go without: a photograph over a legal page is decoration
   pretending to be reassurance. */
.mk-band-img {
  display: block;
  width: 100%;
  height: clamp(9rem, 22vw, 15rem);
  object-fit: cover;
  border-radius: var(--mk-media-radius);
  background: var(--paper-3);
  margin-bottom: var(--sp-7);
}

.mk-doc { padding-bottom: var(--mk-band); }

/* Numbered sections. A long explanatory page is much easier to hold in your
   head when you can see where you are in it, and the numeral does that without
   a sticky sidebar or a progress bar. */
.mk-doc { counter-reset: mk-section; }

.mk-doc h2 {
  counter-increment: mk-section;
  position: relative;
  font-size: var(--t-h2);
  line-height: 1.2;
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-2);
  max-width: none;
}

/* The page header already ends in a rule; a second one immediately under it
   is a double line with nothing between them. */
.mk-doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mk-doc h2::before {
  content: counter(mk-section, decimal-leading-zero);
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mk-accent);
  margin-bottom: var(--sp-3);
}
/* The FAQ pages use h2 as a plain group heading, and a numeral above each
   would read as a sequence they are not. */
.mk-doc--plain { counter-reset: none; }
.mk-doc--plain h2::before { content: none; }

.mk-doc h3 { font-size: var(--t-h3); margin: var(--sp-5) 0 var(--sp-2); }

.mk-doc p,
.mk-doc li {
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 62ch;
}
.mk-doc p { margin: 0 0 var(--sp-4); }
.mk-doc ul { list-style: none; padding-left: 0; margin: 0 0 var(--sp-4); }
.mk-doc li { position: relative; padding-left: 1.5rem; margin-bottom: var(--sp-3); }
/* An accent mark rather than a browser bullet, so a list on the funeral
   directors page belongs to the same page as the buttons on it. */
.mk-doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 6px;
  background: var(--mk-accent);
}
.mk-doc strong { color: var(--ink); font-weight: 600; }

/* A short block that needs to stand away from the prose around it. */
.mk-callout {
  background: var(--mk-accent-wash);
  border-left: 3px solid var(--mk-accent);
  border-radius: var(--mk-media-radius);
  padding: var(--sp-6);
  margin: var(--sp-6) 0;
}
/* Matches h2 as well as h3: the summary box at the top of the legal pages is
   the page's first real section, so it is an h2, and heading level should
   follow the document outline rather than the size we happen to want. */
.mk-callout h2,
.mk-callout h3 {
  margin-top: 0;
  color: var(--mk-accent);
  font-size: var(--t-h3);
  border: 0;
  padding-top: 0;
}
.mk-callout h2::before { content: none; }
.mk-callout p:last-child { margin-bottom: 0; }

.mk-doc__cta { margin-top: var(--sp-8); }

/* --------------------------------------------------------------- plans */

/* Wider than the prose column around it: two cards at 44rem squeeze the
   feature lines into three words each. */
.mk-plans {
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  /* Equal height. Two cards of different lengths sitting at different heights
     read as a rendering fault rather than as a comparison. */
  align-items: stretch;
  margin-bottom: var(--sp-8);
}

.mk-plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--mk-media-radius);
  padding: var(--sp-6);
  background: var(--paper-2);
}
/* The plan we expect most families to land on carries the colour, so the
   comparison has a subject rather than two equal boxes. */
.mk-plan--lead {
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 1px var(--mk-accent);
  background: var(--mk-accent-wash);
}

.mk-plan h2 {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent);
  margin: 0 0 var(--sp-3);
  border: 0;
  padding: 0;
}

.mk-plan__price {
  font-family: var(--mk-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
/* The second currency, set as a caption rather than as a second price. Two
   prices at the same size is a question; a price and a note is an answer. */
.mk-plan__alt {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--ink-2);
  margin: 0 0 var(--sp-3);
}

.mk-plan__note {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

.mk-plan ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 var(--sp-6);
  /* Grows, so both cards' buttons line up along the bottom. */
  flex: 1;
}
.mk-plan li {
  position: relative;
  padding: 0 0 var(--sp-3) 1.5rem;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.5;
  max-width: none;
}
/* A tick rather than a hairline under every row: these are the things you get,
   not the rows of a table. */
.mk-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 1.5px solid var(--mk-accent);
  border-bottom: 1.5px solid var(--mk-accent);
  transform: rotate(-45deg);
}

@media (max-width: 46em) {
  .mk-plans { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- terms */

/* The three numbers that decide whether a funeral director reads any further:
   what they earn, what it costs them, and how much work it is. They go above
   the prose because in this trade the answer to "what is the catch" has to
   arrive before the pitch does. */
.mk-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.mk-term { border-top: 2px solid var(--mk-accent); padding-top: var(--sp-4); }

.mk-term__figure {
  font-family: var(--mk-font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3.1rem);
  line-height: 1;
  color: var(--mk-accent);
  margin: 0 0 var(--sp-3);
}

.mk-term__label {
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 46em) {
  .mk-terms { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ------------------------------------------------------------ find a page */

/* Deliberately the largest thing on its page. Somebody using this form is
   standing in a kitchen with a phone, looking for a page they were sent three
   weeks ago, and the input should be impossible to miss. */
.mk-find {
  margin-bottom: var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid var(--mk-accent-line);
  border-radius: var(--mk-media-radius);
  background: var(--mk-accent-wash);
}

.mk-find__field { margin-bottom: var(--sp-5); }

.mk-find label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}

.mk-find input {
  width: 100%;
  min-height: 56px;
  padding: 0.75rem 1rem;
  font-family: var(--font-ui);
  font-size: var(--t-lead);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
/* The placeholder is an example address, so it has to read as an example and
   not as a value already entered. */
.mk-find input::placeholder { color: var(--ink-3); opacity: 1; }
.mk-find input:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 1px;
  border-color: var(--mk-accent);
}
.mk-find input[aria-invalid="true"] { border-color: var(--bad); }

.mk-find__error {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--bad);
  max-width: 54ch;
}

/* --------------------------------------------------------------- signup */

/* The first step of making a page, wearing the marketing site's clothes.

   It used to be the generic auth card, which several people read as a paywall:
   a boxed form asking for an email under the words "Create an account" is what
   every checkout looks like. Splitting it gives the form something to be for. */
.mk-start {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.5rem) var(--mk-band);
}

.mk-start__title {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 var(--sp-4);
}

.mk-start__lede {
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 var(--sp-6);
}

.mk-start__fields { margin-bottom: var(--sp-5); }

/* The terms sit under the button rather than after the form, so the answer to
   "is this going to ask me for a card" is in the same glance as the button. */
.mk-start__terms {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-3);
  text-align: center;
}

.mk-start__foot {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.9;
  margin: 0;
}
.mk-start__foot a { color: var(--mk-accent); }
.mk-start__foot a:hover { color: var(--mk-accent-lift); }

/* --- the three steps ---------------------------------------------------- */

.mk-steps-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.mk-steps-rail__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-3);
}

.mk-steps-rail__n {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 600;
}

.mk-steps-rail__item.is-current { color: var(--mk-accent); font-weight: 600; }
.mk-steps-rail__item.is-current .mk-steps-rail__n {
  background: var(--mk-accent);
  border-color: var(--mk-accent);
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-steps-rail__item.is-current .mk-steps-rail__n {
    color: #0b1a1f;
  }
}
:root[data-theme="dark"] .mk-steps-rail__item.is-current .mk-steps-rail__n { color: #0b1a1f; }

/* --- what happens next -------------------------------------------------- */

.mk-start__aside {
  border: 1px solid var(--mk-accent-line);
  border-radius: var(--mk-media-radius);
  background: var(--mk-accent-wash);
  padding: var(--sp-6);
}

.mk-start__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: var(--sp-5);
}

.mk-start__aside h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--sp-4);
}

.mk-start__next {
  counter-reset: mk-next;
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.mk-start__next li {
  counter-increment: mk-next;
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-4);
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.55;
}
.mk-start__next li::before {
  content: counter(mk-next);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid var(--mk-accent);
  color: var(--mk-accent);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
}

.mk-start__aside-note {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--mk-accent-line);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.55;
}

@media (min-width: 60em) {
  .mk-start {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-8);
  }
  .mk-start__aside { position: sticky; top: calc(74px + var(--sp-5)); }
}

/* The signup header carries a wordmark and one link, so it does not need the
   navigation grid the marketing pages use. */
.mk-nav__inner--bare {
  grid-template-areas: "brand cta";
  grid-template-columns: 1fr auto;
  min-height: 68px;
}

/* -------------------------------------------------------------- partners */

/* The badge at the top of a partner's landing page. Their logo if they gave
   us one, their name either way. Small: the family arriving here has already
   met this firm, and the page is for the product, not the introduction. */
.mk-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border: 1px solid var(--mk-accent-line);
  border-radius: 999px;
  background: var(--mk-accent-wash);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.mk-partner-badge img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 120px;
  border-radius: 999px;
  object-fit: contain;
}
/* No logo, no empty pill left behind. */
.mk-partner-badge:empty { display: none; }

/* --- the link and the code --------------------------------------------- */

.mk-share {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  margin-bottom: var(--sp-7);
  border: 1px solid var(--mk-accent-line);
  border-radius: var(--mk-media-radius);
  background: var(--mk-accent-wash);
}

.mk-share h2 { font-size: var(--t-h3); margin: 0 0 var(--sp-3); }

/* The address itself, at a size somebody can read off a screen and type into
   a phone. It wraps rather than scrolling: a partner's slug can be long, and
   a truncated link is worse than a wrapped one. */
.mk-share__url {
  font-family: var(--font-ui);
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--mk-accent);
  overflow-wrap: anywhere;
  margin: 0 0 var(--sp-3);
}

.mk-share__hint {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 var(--sp-4);
}

.mk-share__qr { text-align: center; }
.mk-share__qr img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-3);
  border-radius: 12px;
  background: #ffffff;
}
.mk-share__downloads {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-small);
}
.mk-share__downloads a { color: var(--mk-accent); }

@media (min-width: 46em) {
  .mk-share { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* --- the numbers --------------------------------------------------------- */

.mk-figures { margin-bottom: var(--sp-7); }

.mk-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--t-small);
}
.mk-range label { color: var(--ink-3); }
/* The base stylesheet sizes every date input to `width: 100%`, which is right
   inside a form column and wrong in a row of controls: it put each of these on
   a line of its own and turned a date range into a stack. */
.mk-range input {
  width: auto;
  flex: none;
  min-height: 0;
  padding: 0.4rem 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.mk-figures__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (min-width: 46em) {
  .mk-figures__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mk-figure {
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--mk-media-radius);
  background: var(--paper-2);
}
/* The one they came to see. */
.mk-figure--lead {
  border-color: var(--mk-accent);
  background: var(--mk-accent-wash);
}

.mk-figure__n {
  font-family: var(--mk-font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--sp-2);
}
.mk-figure--lead .mk-figure__n { color: var(--mk-accent); }

.mk-figure__label {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.4;
  margin: 0;
}

.mk-figures__note {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.55;
}
.mk-figures__note a { color: var(--mk-accent); }

/* --- a plain table of payments ------------------------------------------ */

.mk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--t-small);
}
.mk-table th, .mk-table td {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
}
.mk-table th { color: var(--ink-3); font-weight: 600; }
.mk-table td { color: var(--ink-2); }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- the join form ------------------------------------------------------- */

.mk-form { margin-bottom: var(--sp-8); }

.mk-form__group {
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--mk-media-radius);
  background: var(--paper-2);
}
.mk-form__group h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}

/* Shows the link being built, so "your link" is a thing they can see rather
   than a field they have to imagine the effect of. */
.mk-form__prefix {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--ink-3);
  margin: 0 0 var(--sp-4);
  overflow-wrap: anywhere;
}
.mk-form__prefix strong { color: var(--mk-accent); }

.mk-form__note {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 54ch;
}

.mk-form__logo { margin: 0 0 var(--sp-5); }
.mk-form__logo img { height: 56px; width: auto; }

/* ------------------------------------------------------------- questions */

.mk-qa { border-top: 1px solid var(--line-2); }
.mk-qa summary {
  cursor: pointer;
  padding: var(--sp-5) 0;
  font-family: var(--mk-font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  font-size: var(--step-1);
  color: var(--ink);
  list-style: none;
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
}
.mk-qa summary::-webkit-details-marker { display: none; }
.mk-qa summary::after {
  content: "+";
  flex: none;
  color: var(--mk-accent);
  font-family: var(--font-ui);
  font-size: var(--step-1);
  line-height: 1;
}
.mk-qa[open] summary::after { content: "-"; }
.mk-qa summary:hover { color: var(--mk-accent); }
.mk-qa > *:not(summary) { padding-bottom: var(--sp-5); }
.mk-qa p { color: var(--ink-2); line-height: 1.65; margin-bottom: var(--sp-3); max-width: 62ch; }
.mk-qa p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- motion */

/* MOTION_INTENSITY 3: hover and focus only. These pages are read by people
   arranging a funeral, often on the day. Scroll-triggered reveals and parallax
   would be at somebody's expense, so there are none, and this is a deliberate
   floor rather than a thing left unfinished. Everything below already honours
   prefers-reduced-motion through the base stylesheet's transition tokens. */
.mk-nav__links a,
.mk-hero__link,
.mk-qa summary { transition: color 0.16s var(--ease), border-color 0.16s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .mk * { transition: none !important; animation: none !important; }
}

/* The concrete offer under the partner's badge. Deliberately quiet: this is a
   memorial, and a family four days into a bereavement should not be met with
   anything that reads like a sale banner. */
.mk-partner-offer {
  display: inline-block;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 500;
}

/* The section heading above a rail or a terms row. The funeral-directors page
   needs to label two consecutive blocks ("What the family gets" and "What you
   get") that would otherwise read as one list of six things. */
.mk-steps__head {
  font-size: var(--t-h2);
  line-height: 1.2;
  margin: 0 0 var(--sp-6);
  max-width: 22ch;
}

.mk-terms-band { padding-block: var(--mk-band) 0; }