/* The marketing pages the header's row names — what the product does, who it is
   for, what it costs, what 2027 brings. One vocabulary they all share: a
   breadcrumb, a page hero, rows of prose, a set of questions, a closing card.
   The column they sit in is `main`'s, so none of them restates its width.

   The design comes from prototypes with a palette of their own (`--ft-purple`,
   `--ft-navy`, px radii, no dark pairs). They are not transliterated here: the
   brand is the same purple the app already has a token for, so these read the
   app's own tokens instead and the dark mode comes free rather than being
   forgotten. */

@layer components {
  .mpage {
    padding-block-end: 4.5rem;

    @media (width >= 768px) {
      padding-block-end: 6rem;
    }
  }

  /* ─── Breadcrumb ──────────────────────────── */

  /* Where the reader is, and the way back. The separator is drawn rather than
     typed so a screen reader reads the trail as two links, not as punctuation. */
  .mpage__crumbs {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.5rem;
    padding-block: 1.5rem 0;
  }

  .mpage__crumb-link {
    color: var(--color-ink-secondary);
    text-decoration: none;
  }

  .mpage__crumb-link:hover {
    color: var(--color-brand);
  }

  .mpage__crumb-separator {
    color: var(--color-ink-faint);
  }

  /* ─── Page hero ───────────────────────────── */

  .mpage-hero {
    padding-block: 2.5rem 3rem;

    @media (width >= 768px) {
      padding-block: 3.5rem 4rem;
    }
  }

  .mpage-hero__title {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0.75rem 0 0;
    max-inline-size: 36rem;
    text-wrap: balance;
  }

  .mpage-hero__lead {
    color: var(--color-ink-secondary);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 1.25rem 0 0;
    max-inline-size: 38rem;
  }

  .mpage-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2rem;
  }

  .mpage-hero__note {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin: 1.25rem 0 0;
  }

  /* A hero with a drawing beside it. On a phone the words come first and the
     drawing follows them; from the tablet width the two share the row. */
  .mpage-hero--illustrated {
    display: grid;
    gap: 2.5rem;

    @media (width >= 768px) {
      align-items: center;
      grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }
  }

  /* ─── The trades that send an invoice ─────────
     The freelancers' page opens on a drawing: one invoice, and the trades it
     could have come from set around it. Drawn rather than photographed, so it
     stays sharp at any size, weighs nothing and follows the theme. */

  .mpage-trades {
    /* The ring the trades ride and the dashed line that shows it are the same
       circle, so its size is written once. A full turn takes a minute: slow
       enough to read as ambient rather than as something asking to be
       watched. */
    --mpage-orbit-size: 74%;
    --mpage-orbit-period: 60s;
    --mpage-trade-size: 3.25rem;

    aspect-ratio: 1;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 23.75rem;
    position: relative;

    @media (width >= 768px) {
      margin-inline: auto 0;
      max-inline-size: 28.75rem;
    }
  }

  .mpage-trades__glow,
  .mpage-trades__orbit {
    border-radius: 50%;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .mpage-trades__glow {
    background: radial-gradient(circle, var(--color-brand-tint) 0%, transparent 70%);
    block-size: 100%;
    inline-size: 100%;
  }

  .mpage-trades__orbit {
    block-size: var(--mpage-orbit-size);
    border: 1.5px dashed var(--color-border);
    inline-size: var(--mpage-orbit-size);
  }

  /* The invoice itself, tipped a little so it reads as an object on the page
     rather than as another panel of the layout. */
  .mpage-trades__invoice {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lifted);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    inline-size: 46%;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    padding: 1rem;
    position: absolute;
    transform: translate(-50%, -50%) rotate(-4deg);
  }

  .mpage-trades__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.25rem;
  }

  .mpage-trades__mark {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 1.5rem;
    border-radius: 0.4375rem;
    color: var(--color-ink-inverted);
    display: flex;
    font-size: 0.8125rem;
    font-weight: 700;
    inline-size: 1.5rem;
    justify-content: center;
  }

  .mpage-trades__number {
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  /* The body of the invoice is not readable at this size, so it is ruled
     rather than written: inventing words nobody can read would only be noise. */
  .mpage-trades__line {
    background: var(--color-border-subtle);
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
  }

  .mpage-trades__line--long {
    inline-size: 88%;
  }

  .mpage-trades__line--short {
    inline-size: 70%;
  }

  .mpage-trades__line--medium {
    inline-size: 80%;
  }

  .mpage-trades__total {
    align-items: baseline;
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0 0;
    padding-block-start: 0.5rem;

    & span {
      color: var(--color-ink-muted);
      font-size: 0.65625rem;
    }

    & b {
      color: var(--color-brand);
      font-size: 0.875rem;
      font-variant-numeric: tabular-nums;
    }
  }

  .mpage-trades__paid {
    align-items: center;
    align-self: start;
    background: var(--color-positive-tint);
    border-radius: var(--radius-pill);
    color: var(--color-positive);
    display: inline-flex;
    font-size: 0.6875rem;
    font-weight: 700;
    gap: 0.3125rem;
    padding: 0.25rem 0.5625rem;
  }

  /* The trades ride the ring. Each is an arm reaching from the centre of the
     drawing to a point on the circle: the arm turns, so the trade on its end
     travels the line, and the trade turns back the other way at the same rate
     so its label never ends up upside down.

     The turn is expressed with the `rotate` and `translate` properties rather
     than with `transform`, because those apply before `transform` does — the
     centring stays in the unrotated frame and the arm sweeps cleanly.

     Each carries its starting angle from the template, and declares it as a
     static value too: the reset cuts every animation to 0.01ms under
     `prefers-reduced-motion`, so the trades then simply hold that angle and
     the ring stays a tidy pentagon instead of collapsing to one point. */
  .mpage-trades__orbiter {
    animation: mpage-orbit var(--mpage-orbit-period) linear infinite;
    block-size: var(--mpage-orbit-size);
    inline-size: var(--mpage-orbit-size);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    rotate: var(--mpage-orbit-start);
    translate: -50% -50%;
  }

  /* The anchor is the icon alone, not the icon and its label together: with
     the pair anchored, the icon rode above the point and its distance from the
     centre swung in and out against the dashed line as it went round. So the
     trade is the icon's own box and the label hangs out of flow beneath it. */
  .mpage-trades__trade {
    animation: mpage-orbit-upright var(--mpage-orbit-period) linear infinite;
    block-size: var(--mpage-trade-size);
    inline-size: var(--mpage-trade-size);
    inset-block-start: 0;
    inset-inline-start: 50%;
    position: absolute;
    rotate: calc(-1 * var(--mpage-orbit-start));
    translate: -50% -50%;
  }

  @keyframes mpage-orbit {
    from {
      rotate: var(--mpage-orbit-start);
    }

    to {
      rotate: calc(var(--mpage-orbit-start) + 1turn);
    }
  }

  @keyframes mpage-orbit-upright {
    from {
      rotate: calc(-1 * var(--mpage-orbit-start));
    }

    to {
      rotate: calc(-1 * var(--mpage-orbit-start) - 1turn);
    }
  }

  .mpage-trades__icon {
    align-items: center;
    background: var(--color-surface);
    block-size: 100%;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: var(--color-brand);
    display: flex;
    inline-size: 100%;
    justify-content: center;
  }

  .mpage-trades__label {
    font-size: 0.71875rem;
    font-weight: 700;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% 0.3125rem;
    white-space: nowrap;
  }

  /* One of them is inverted, so the ring reads as a set with a near member
     rather than as five identical stickers. */
  .mpage-trades__icon--inverted {
    background: var(--color-surface-inverted);
    border-color: var(--color-surface-inverted);
    color: var(--color-brand-inverted);
  }

  /* ─── Rows of prose ───────────────────────── */

  /* The heading and its links on one side, the paragraph on the other. One
     column on a phone, where two would leave each too narrow to read. */
  .mpage-rows {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Every block the page stacks at its top level keeps the same rhythm — a
     section, a band, the questions, the closing call. This one was the
     exception, so a set of rows following a section began flush against it:
     its first rule was drawn on the last line of what came before. Only at the
     top level; a set of rows nested inside a band or a list spaces itself. */
  .mpage > .mpage-rows {
    margin-block-start: 4.5rem;
  }

  .mpage-row {
    border-block-start: 1px solid var(--color-border-subtle);
    display: grid;
    gap: 1rem;
    padding-block-start: 2.5rem;

    @media (width >= 768px) {
      gap: 3rem;
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
  }

  .mpage-row__title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
    text-wrap: balance;
  }

  .mpage-row__text {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
    text-wrap: pretty;

    /* A row can carry a second paragraph — the qualifying one under the
       explanation — and it ran straight on from the first. */
    & + & {
      margin-block-start: 1rem;
    }
  }

  .mpage-row__links {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-block-start: 1.25rem;
  }

  .mpage-row__link {
    align-items: center;
    color: var(--color-brand);
    display: inline-flex;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 0.375rem;
    text-decoration: none;
    width: fit-content;
  }

  .mpage-row__link:hover {
    color: var(--color-brand-strong);
  }

  /* ─── Questions ───────────────────────────── */

  /* Native `details`, as the front page's own questions are: the answer opens
     without a line of JavaScript, and a reader who cannot run any still gets it
     with the summary. */
  .mpage-faq {
    margin-block-start: 4.5rem;
  }

  .mpage-faq__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 2rem;
    text-wrap: balance;
  }

  .mpage-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .mpage-faq__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
  }

  .mpage-faq__question {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    padding: 1rem 1.125rem;

    @media (width >= 768px) {
      font-size: 1rem;
      padding: 1.125rem 1.25rem;
    }
  }

  .mpage-faq__question::-webkit-details-marker {
    display: none;
  }

  .mpage-faq__chevron {
    color: var(--color-ink-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .mpage-faq__item[open] .mpage-faq__chevron {
    transform: rotate(180deg);
  }

  .mpage-faq__answer {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
    line-height: 1.75;
    margin: 0;
    max-inline-size: 44rem;
    padding: 0 1.125rem 1.25rem;

    @media (width >= 768px) {
      padding: 0 1.25rem 1.375rem;
    }
  }

  /* ─── Section head ────────────────────────── */

  /* A centred introduction to a block that is not prose: the numbered steps,
     a grid of cards. The eyebrow above it is the shared `micro-label`. */
  .mpage-section {
    margin-block-start: 4.5rem;
  }

  .mpage-section__head {
    margin-block-end: 2.5rem;

    @media (width >= 768px) {
      margin-block-end: 3.25rem;
      margin-inline: auto;
      text-align: center;
    }
  }

  .mpage-section__title {
    font-size: clamp(1.625rem, 3vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0.75rem auto 0;
    max-inline-size: 46ch;
    text-wrap: balance;
  }

  /* The lead runs the full width of the column while the title above it keeps
     its own measure: at the head's old 46ch this paragraph ran to seven lines
     with a badly ragged edge. */
  .mpage-section__subtitle {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0.875rem 0 0;
    text-wrap: pretty;
  }

  /* ─── A full-bleed band ───────────────────────
     The tinted strip the steps sit on. The bleed itself is the front page's
     own `home-bleed` — these pages are the same marketing surface, and the
     band is its one job — so only the tint and the padding are new. */

  .mpage-band {
    --home-bleed-background: var(--color-surface-tint);

    margin-block-start: 4.5rem;
    padding-block: 3.5rem 4rem;

    @media (width >= 768px) {
      padding-block: 4.5rem 5rem;
    }
  }

  .mpage-band .mpage-section {
    margin-block-start: 0;
  }

  /* ─── Numbered steps ──────────────────────────
     A sequence, so the numbers carry information the reader needs and are not
     decoration. Laid side by side where there is room, stacked on a phone. */

  .mpage-steps {
    display: grid;
    gap: 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (width >= 768px) {
      /* 18rem so a five-step sequence breaks 3 + 2 rather than 4 + 1, which
         reads as a dropped step rather than as a second row. */
      gap: 2.5rem 2.125rem;
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
  }

  /* A set that reads better as a fixed grid than as the default fit — four
     steps meant to stay four across. The track has no minimum of its own, so
     the count is what decides; they pair up on a tablet, where four would be
     too narrow to read. */
  .mpage-steps--fixed {
    @media (768px <= width < 1024px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width >= 1024px) {
      grid-template-columns: repeat(var(--mpage-steps-columns), minmax(0, 1fr));
    }
  }

  /* A set of four or more holds two columns until the widest breakpoint: at
     1024 four of them leave about twelve words to a line, which reads as a
     cramped column rather than as a step. */
  .mpage-steps--fixed:has(> :nth-child(4)) {
    @media (1024px <= width < 1280px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* The head of a step: the number, and opposite it the glyph where the step
     is drawn as a card. */
  .mpage-step__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0;
  }

  .mpage-step__icon {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 2.375rem;
    border-radius: var(--radius-sm);
    color: var(--color-brand);
    display: flex;
    flex: none;
    inline-size: 2.375rem;
    justify-content: center;
  }

  /* A step drawn as a card of its own, for a short set read side by side. */
  .mpage-steps--boxed .mpage-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.375rem;
  }

  .mpage-steps--boxed {
    gap: 1rem;

    @media (width >= 768px) {
      gap: 1rem;
    }
  }

  .mpage-steps--boxed .mpage-step__number {
    block-size: 2.125rem;
    font-size: 1rem;
    inline-size: 2.125rem;
    margin-block-end: 0;

    @media (width >= 768px) {
      block-size: 2.125rem;
      font-size: 1rem;
      inline-size: 2.125rem;
      margin-block-end: 0;
    }
  }

  .mpage-steps--boxed .mpage-step__head {
    margin-block-end: 1rem;
  }

  /* An invitation rather than a mechanism: the numbers carry the brand. */
  .mpage-steps--brand .mpage-step__number {
    background: var(--color-brand-fill);
  }

  .mpage-step__number {
    align-items: center;
    background: var(--color-surface-inverted);
    block-size: 2.75rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: flex;
    font-size: 1.125rem;
    font-weight: 700;
    inline-size: 2.75rem;
    justify-content: center;
    margin-block-end: 1rem;

    @media (width >= 768px) {
      block-size: 3.25rem;
      font-size: 1.25rem;
      inline-size: 3.25rem;
      margin-block-end: 1.375rem;
    }
  }

  .mpage-step__title {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    text-wrap: pretty;
  }

  .mpage-step__text {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
    line-height: 1.66;
    margin: 0;
  }

  /* ─── A step's own little screen ──────────────
     Above each step, a drawing of the part of the app it talks about: the
     customer being picked, the lines being written, the dates, the finished
     document. Drawn rather than screenshotted, so it stays sharp, follows the
     theme and never goes out of date with the interface.

     They share one height so the numbers below them line up across the row,
     and they clip rather than stretch: each is a glimpse, not a full screen. */

  .mpage-viz {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    /* One height for all of them, so the numbers underneath line up across the
       row. They clip rather than stretch: each is a glimpse of a screen, not
       the screen. */
    block-size: 9.5rem;
    margin-block-end: 1.375rem;
    overflow: hidden;
    padding: 0.875rem 1rem;
  }

  .mpage-viz__label {
    color: var(--color-ink-muted);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin: 0;
    text-transform: uppercase;
  }

  .mpage-viz__field {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 0.5625rem;
    color: var(--color-ink);
    display: flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5625rem 0.6875rem;

    & svg {
      color: var(--color-brand);
      flex-shrink: 0;
    }
  }

  /* The match the directory offers back, with the tick that says it is the one
     being taken. */
  .mpage-viz__result {
    align-items: center;
    background: var(--color-brand-tint);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.5625rem;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5625rem 0.6875rem;

    & b {
      font-size: 0.8125rem;
      font-weight: 700;
    }

    & span {
      color: var(--color-ink-muted);
      font-size: 0.6875rem;
      font-variant-numeric: tabular-nums;
    }

    & i {
      align-items: center;
      background: var(--color-brand-fill);
      block-size: 1.25rem;
      border-radius: var(--radius-pill);
      color: var(--color-ink-inverted);
      display: flex;
      flex-shrink: 0;
      inline-size: 1.25rem;
      justify-content: center;
      margin-inline-start: auto;
    }
  }

  /* The invoice's lines: what, how many, what it costs. */
  .mpage-viz__head,
  .mpage-viz__row {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) 1.625rem 3.875rem;
    margin: 0;
  }

  .mpage-viz__head span {
    color: var(--color-ink-muted);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mpage-viz__row {
    border-block-start: 1px solid var(--color-border-subtle);
    padding-block: 0.375rem;

    & b {
      font-size: 0.78125rem;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & span {
      color: var(--color-ink-secondary);
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
    }
  }

  .mpage-viz__head span:nth-child(2),
  .mpage-viz__row span:nth-child(2) {
    text-align: center;
  }

  .mpage-viz__head span:last-child,
  .mpage-viz__row span:last-child {
    text-align: end;
  }

  .mpage-viz__sum {
    align-items: center;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin: 0;
    padding-block-start: 0.5625rem;

    & b {
      color: var(--color-brand);
      font-size: 0.875rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
  }

  .mpage-viz__pill {
    background: var(--color-brand-tint);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    font-size: 0.65625rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
  }

  /* The lines want the tighter rhythm: a header, two lines and a total is the
     most any of these drawings carries, and it has to fit the shared height
     without the total being the thing that gets clipped. */
  .mpage-viz--lines {
    gap: 0.375rem;
  }

  /* A row of the document's own settings: what it is, and what it says. */
  .mpage-viz--pairs {
    gap: 0.625rem;
  }

  .mpage-viz__pair {
    align-items: center;
    border-block-end: 1px solid var(--color-border-subtle);
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
    margin: 0;
    padding-block-end: 0.625rem;

    &:last-child {
      border-block-end: 0;
      padding-block-end: 0;
    }

    & span {
      color: var(--color-ink-muted);
      font-size: 0.65625rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    & b {
      align-items: center;
      display: inline-flex;
      font-size: 0.8125rem;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      gap: 0.375rem;
    }

    & b svg {
      color: var(--color-brand);
    }
  }

  /* The finished document beside what becomes of it. */
  .mpage-viz--split {
    align-items: center;
    flex-direction: row;
    gap: 0.875rem;
  }

  .mpage-viz__page {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.5rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4375rem;
    justify-content: center;
    padding: 0.8125rem 0.75rem;
  }

  .mpage-viz__line {
    background: var(--color-border);
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
  }

  .mpage-viz__line--accent {
    background: var(--color-brand);
    inline-size: 70%;
    opacity: 0.55;
  }

  .mpage-viz__line--full {
    inline-size: 100%;
  }

  .mpage-viz__line--half {
    inline-size: 55%;
  }

  .mpage-viz__side {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.5625rem;
  }

  .mpage-viz__state {
    background: var(--color-positive-tint);
    border-radius: var(--radius-pill);
    color: var(--color-positive);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.3125rem 0.6875rem;
    text-align: center;
  }

  .mpage-viz__download {
    align-items: center;
    background: var(--color-brand-fill);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-size: 0.71875rem;
    font-weight: 700;
    gap: 0.375rem;
    justify-content: center;
    padding: 0.375rem 0.75rem;
  }

  /* ─── Cards ───────────────────────────────────
     A set of equal things to scan: what a reader has to have ready, an
     article, a guide. The tag and the meta line are optional. */

  .mpage-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  }

  /* Swiped on a phone, the row's columns come from `home-swipe`'s auto flow,
     so the explicit track list has to go — left in place it would lay its own
     columns first and the flow would add more after them. */
  .mpage-cards.home-swipe {
    @media (width < 768px) {
      grid-template-columns: none;
    }
  }

  /* The stack's own spacing is the breathing room between blocks of prose;
     side by side it is the gap between two cards, which wants to be tighter.

     The bleed is restated here because the list's own `margin: 0` and
     `padding: 0` sit at the same specificity as `home-swipe`'s, and this file
     loads after `home.css` — so the reset won and the row stopped reaching the
     screen's edges. Two classes settle it in the file that adds the second. */
  .mpage-steps.home-swipe {
    @media (width < 768px) {
      gap: 1rem;
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--gutter);
    }
  }

  /* On a phone each step holds the screen — its drawing, its number and its
     words together — and the next rises over it and holds in turn, so they
     read one at a time. The front page's own steps behave this way; this is
     the same recipe against our own block.

     A sticky element travels only inside its containing block, which here is
     the list, so the scroll a step holds for is the next step's own height:
     nothing is padded out and the page below stays where it was. The later
     step paints over the earlier by document order, so there is no z-index to
     keep in step.

     Because they overlap, a step has to be opaque and has to show its leading
     edge, or the one beneath reads through it. It carries the band's own tint
     so the section still reads as one surface, and the border and the rounded
     corners are what you see arrive.

     The steps have to be the same height, or a taller one shows a strip of
     itself under the step that has just covered it. `1fr` rows in a grid of
     no definite height all take the size of the largest, so the grid works
     the height out: it follows the copy and the screen width instead of a
     number picked for one phone. Measured, the tallest step is 491px at
     320px wide and 441px at 430px — a single figure would either leave a
     strip showing on a narrow phone or dead space at the bottom on a wide
     one. */
  .mpage-steps--pinned {
    @media (width < 768px) {
      gap: 0;
      grid-auto-rows: 1fr;
    }
  }

  /* The section's own head holds too, above the steps, so the reader can see
     what the step they are on is a step of. The head pins first and the steps
     stop below it.

     It sits on the sticky layer because of the very end of the section: a
     sticky element cannot leave its containing block, so at the list's bottom
     all four steps pile at the same place and rise together — over the head,
     which is still holding, since the steps paint after it in document order.
     `--z-sticky` keeps the head above them for that last stretch.

     `--mpage-pinned-head` is how much room the head takes when it holds. It is
     a figure rather than the head's own height because CSS cannot read one
     element's height into another's offset; measured, the head is 89px at
     every width from 320px to 767px — the title does not wrap — so the room it
     needs does not move with the screen. */
  .mpage-section:has(.mpage-steps--pinned) {
    @media (width < 768px) {
      --mpage-pinned-head: 7.5rem;

      .mpage-section__head {
        background: var(--color-surface-tint);
        inset-block-start: var(--home-header-block-size);
        margin-block-end: 0;
        min-block-size: var(--mpage-pinned-head);
        position: sticky;
        z-index: var(--z-sticky);
      }
    }
  }

  .mpage-steps--pinned .mpage-step {
    @media (width < 768px) {
      background: var(--color-surface-tint);
      border-block-start: 1px solid var(--color-border);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      inset-block-start: calc(var(--home-header-block-size) + var(--mpage-pinned-head));
      padding: 1.5rem 1.25rem 2rem;
      position: sticky;
    }
  }

  /* `card` gives the surface and the rounding, but no edge — and the page's own
     ground is that same surface, so without a border a card had nothing to be
     read by. */
  .mpage-card {
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    padding: 1.5rem 1.375rem;
  }

  /* The glyph a card opens on, in its own tinted tile. */
  .mpage-card__icon {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 2.625rem;
    border-radius: var(--radius-md);
    color: var(--color-brand);
    display: flex;
    inline-size: 2.625rem;
    justify-content: center;
    margin-block-end: 0.5rem;
  }

  .mpage-card__tag {
    color: var(--color-brand);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin: 0;
    text-transform: uppercase;
  }

  .mpage-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-wrap: pretty;
  }

  .mpage-card__text {
    color: var(--color-ink-secondary);
    font-size: 0.90625rem;
    line-height: 1.62;
    margin: 0;
  }

  /* What closes a card is a note about it, not part of it — a paragraph of the
     law, a reading time — so it is set apart as a chip and in the figures' face. */
  .mpage-card__meta {
    background: var(--color-surface-tint);
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.71875rem;
    font-weight: 700;
    margin: 0.75rem 0 0;
    padding: 0.25rem 0.5625rem;
    width: fit-content;
  }

  .mpage-card__link {
    align-items: center;
    color: var(--color-brand);
    display: inline-flex;
    font-size: 0.90625rem;
    font-weight: 600;
    gap: 0.375rem;
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    text-decoration: none;
    width: fit-content;
  }

  .mpage-card__link:hover {
    color: var(--color-brand-strong);
  }

  /* ─── The part a phone does without ───────────
     The copy is written for a wide display, where a paragraph can afford its
     elaboration. On a phone the same paragraph turns into a wall, so it keeps
     the sentences that carry the point and drops the ones that qualify it.

     Marked rather than rewritten: one copy of the words, so a wide display and
     search still get all of them, and the two versions cannot drift apart. */
  .mpage-more {
    @media (width < 768px) {
      display: none;
    }
  }

  /* ─── Words beside a drawing ──────────────────
     A block the design sets in two: what it says on one side, the screen it
     is talking about on the other. One column on a phone, where two would
     leave both too narrow. `--reverse` puts the drawing first on a wide
     display; below it the words lead either way, because a reader should meet
     the point before the picture of it. */

  .mpage-split {
    align-items: center;
    display: grid;
    gap: 2rem;
    margin-block-start: 3rem;

    @media (width >= 768px) {
      gap: 3.5rem;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
  }

  .mpage-split--reverse {
    @media (width >= 768px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

      > :first-child {
        order: 2;
      }
    }
  }

  .mpage-split__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0.75rem 0 0;
    text-wrap: balance;
  }

  .mpage-split__text {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0.875rem 0 0;

    & + & {
      margin-block-start: 0.75rem;
    }
  }

  .mpage-split__actions {
    margin-block-start: 1.75rem;
  }

  /* ─── Points, each marked with a dot ──────────
     What a reader gets, three lines of it, the lead-in of each in the ink of
     the page so the line reads as a label and its explanation. */

  .mpage-points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
  }

  .mpage-point {
    align-items: center;
    color: var(--color-ink-secondary);
    display: flex;
    font-size: 1rem;
    gap: 0.75rem;
    line-height: 1.55;

    &::before {
      background: var(--color-brand);
      block-size: 0.5625rem;
      border-radius: var(--radius-pill);
      content: "";
      flex-shrink: 0;
      inline-size: 0.5625rem;
    }

    & b {
      color: var(--color-ink);
    }
  }

  /* ─── Who is in the company ───────────────────
     The company being switched to, and the seats under it. A drawing of the
     screen, so the figures in it are invented and it says so. */

  .mpage-seats {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lifted);
    inline-size: 100%;
    max-inline-size: 27.5rem;
    padding: 1.25rem;

    @media (width >= 768px) {
      margin-inline-start: auto;
    }
  }

  .mpage-seats__current {
    align-items: center;
    background: var(--color-brand-tint);
    border: 1.5px solid var(--color-brand);
    border-radius: var(--radius-lg);
    display: flex;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 0.875rem;

    & b {
      display: block;
      font-size: 0.875rem;
    }

    & em {
      color: var(--color-ink-muted);
      display: block;
      font-size: 0.71875rem;
      font-style: normal;
      font-variant-numeric: tabular-nums;
    }
  }

  .mpage-seats__avatar {
    align-items: center;
    background: var(--color-surface-inverted);
    block-size: 2.125rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    inline-size: 2.125rem;
    justify-content: center;
  }

  /* The seats are told apart by their colour as well as by what they say. */
  .mpage-seats__avatar--clerk {
    background: var(--color-brand-fill);
  }

  .mpage-seats__avatar--accountant {
    background: var(--color-positive);
  }

  .mpage-seats__chevron {
    color: var(--color-brand);
    display: flex;
    margin-inline-start: auto;
    rotate: 180deg;
  }

  .mpage-seats__companies {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    margin: 0.375rem 0 1.125rem;
    padding: 0.375rem;
  }

  .mpage-seats__company {
    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--color-ink-secondary);
    display: flex;
    font-size: 0.84375rem;
    font-weight: 600;
    gap: 0.625rem;
    padding: 0.5625rem 0.625rem;

    & i {
      background: var(--color-border);
      block-size: 0.5rem;
      border-radius: var(--radius-pill);
      inline-size: 0.5rem;
    }
  }

  .mpage-seats__company--current {
    background: var(--color-surface-tint);
    color: var(--color-ink);
    font-weight: 700;

    & i {
      background: var(--color-brand);
    }
  }

  .mpage-seats__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.375rem;
  }

  .mpage-seats__badge {
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.1875rem 0.5625rem;
    text-transform: uppercase;
  }

  .mpage-seats__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mpage-seats__seat {
    align-items: center;
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    gap: 0.75rem;
    padding-block: 0.6875rem;

    & b {
      display: block;
      font-size: 0.84375rem;
    }

    & em {
      color: var(--color-ink-muted);
      display: block;
      font-size: 0.75rem;
      font-style: normal;
    }
  }

  /* ─── Templates to pick from ──────────────────
     Three pages, told apart by the weight of their header. The chosen one
     carries the brand's border, which is the whole point of the picture. */

  .mpage-templates {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 32.5rem;
    position: relative;
  }

  .mpage-templates__badge {
    background: var(--color-surface);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    font-size: 0.625rem;
    font-weight: 700;
    inset-block-start: -0.875rem;
    inset-inline-end: 0;
    letter-spacing: 0.1em;
    padding: 0.1875rem 0.5625rem;
    position: absolute;
    text-transform: uppercase;
  }

  .mpage-templates__row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    @media (width >= 768px) {
      gap: 0.875rem;
    }
  }

  .mpage-templates__option {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .mpage-templates__page {
    aspect-ratio: 1 / 1.35;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    inline-size: 100%;
    padding: 0.875rem 0.75rem;
  }

  .mpage-templates__option--chosen {
    & .mpage-templates__page {
      border-color: var(--color-brand);
      box-shadow: var(--shadow-glow);
    }

    & .mpage-templates__name {
      color: var(--color-brand);
    }
  }

  .mpage-templates__head {
    block-size: 0.875rem;
    border-radius: var(--radius-xs);
  }

  .mpage-templates__head--1 {
    background: var(--color-surface-inverted);
    inline-size: 55%;
  }

  .mpage-templates__head--2 {
    background: var(--color-brand);
    block-size: 1.125rem;
    inline-size: 100%;
  }

  .mpage-templates__head--3 {
    background: var(--color-border);
    inline-size: 35%;
  }

  .mpage-templates__line {
    background: var(--color-border-subtle);
    block-size: 0.3125rem;
    border-radius: var(--radius-pill);
  }

  .mpage-templates__line--short {
    inline-size: 60%;
  }

  .mpage-templates__block {
    background: var(--color-surface-tint);
    border-radius: var(--radius-xs);
    flex: 1;
    margin-block: 0.25rem;
  }

  .mpage-templates__name {
    font-size: 0.8125rem;
    font-weight: 700;
  }

  /* ─── The app on a phone ──────────────────────
     A drawn handset around a real screenshot — the one picture on these pages
     that shows the product rather than standing in for it. */

  .mpage-phone {
    display: flex;
    justify-content: center;
  }

  .mpage-phone__frame {
    aspect-ratio: 9 / 19;
    background: var(--color-surface-inverted);
    border-radius: 2.75rem;
    box-shadow: var(--shadow-lifted);
    display: block;
    inline-size: 16.25rem;
    padding: 0.75rem;
    position: relative;
  }

  .mpage-phone__notch {
    background: oklch(from var(--color-surface-inverted) calc(l - 0.05) c h);
    block-size: 1.5rem;
    border-radius: var(--radius-md);
    inline-size: 5.25rem;
    inset-block-start: 1.375rem;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% 0;
  }

  .mpage-phone__screen {
    block-size: 100%;
    border-radius: 2.125rem;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    object-position: top;
  }

  /* Who a question goes to, and what it is about. */
  .mpage-viz--person {
    gap: 0.75rem;
    justify-content: center;
  }

  .mpage-viz__person {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    margin: 0;

    & b {
      display: block;
      font-size: 0.8125rem;
    }

    & em {
      color: var(--color-ink-muted);
      display: block;
      font-size: 0.71875rem;
      font-style: normal;
    }
  }

  .mpage-viz__initials {
    align-items: center;
    background: var(--color-positive);
    block-size: 2rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    inline-size: 2rem;
    justify-content: center;
  }

  .mpage-viz__note {
    background: var(--color-surface-tint);
    border-radius: var(--radius-sm);
    color: var(--color-ink-secondary);
    font-size: 0.78125rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem 0.625rem;
  }

  /* ─── The accountant's client list ────────────
     A sketch of the screen a firm's staff land on: the search, a row per
     client saying what the firm may do in it and when it was last opened, and
     the way in. Drawn from what the app does, in the app's own words, so the
     reader recognises the real thing when they get there. */

  .mpage-clients {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lifted);
    inline-size: 100%;
    max-inline-size: 27.5rem;
    padding: 1.25rem;

    @media (width >= 768px) {
      margin-inline-start: auto;
    }
  }

  .mpage-clients__head {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0 0 0.875rem;
  }

  .mpage-clients__title {
    font-size: 1.125rem;
    font-weight: 700;
  }

  .mpage-clients__search {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.625rem;
  }

  .mpage-clients__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mpage-clients__client {
    align-items: center;
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding-block: 0.75rem;
  }

  .mpage-clients__who {
    & b {
      display: block;
      font-size: 0.875rem;
    }

    & em {
      color: var(--color-ink-muted);
      display: block;
      font-size: 0.71875rem;
      font-style: normal;
    }
  }

  /* Drawn as the button it is in the app, without being one. */
  .mpage-clients__open {
    background: var(--color-brand-fill);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
  }

  /* ─── A sample of the screen ──────────────────
     A few rows of a reader's own invoices, shown to say what the list looks
     like. It is an illustration, so it is labelled as one; the figures are
     made up and the table says so rather than implying live data.

     Wide content gets its own scroll container so the page itself never
     scrolls sideways on a phone. */

  .mpage-sample {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-block-start: 1.625rem;

    /* So the tinted header row is cut by the card's own rounding. */
    overflow: hidden;
  }

  .mpage-sample__scroll {
    overflow-x: auto;
  }

  .mpage-table {
    border-collapse: collapse;
    font-size: 0.90625rem;
    inline-size: 100%;
    min-inline-size: 30rem;
  }

  /* `th` is centred by the browser, which beats a `text-align` inherited from
     the table — hence from the start on every cell, not on the table. */
  .mpage-table :is(th, td) {
    padding: 0.875rem 1.25rem;
    text-align: start;
    vertical-align: middle;
  }

  /* The head carries the tint; the rows below it are told apart by a hairline. */
  .mpage-table thead th {
    background: var(--color-brand-tint);
    font-size: 0.84375rem;
    font-weight: 700;
  }

  .mpage-table tbody tr {
    border-block-start: 1px solid var(--color-border-subtle);
  }

  .mpage-table tbody th {
    font-weight: 700;
  }

  .mpage-table td {
    color: var(--color-ink-secondary);
  }







  /* ─── Named facts ─────────────────────────────
     Who provides what, as a definition list: the term is the role and the
     description is who fills it. */

  .mpage-defs {
    background: var(--color-surface-tint);
    border-radius: var(--radius-lg);
    display: grid;
    gap: 1.25rem;
    margin-block-start: 2rem;
    padding: 1.5rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
      padding: 1.75rem 2rem;
    }
  }

  .mpage-def__term {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mpage-def__value {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.3125rem 0 0;
  }

  /* ─── A panel set apart ───────────────────────
     One reader's afternoon and the line that says what it proves, or the one
     point a section has to make on its own. A tinted panel rather than more
     prose, so the eye stops on it. */

  .mpage-example {
    background: var(--color-brand-tint);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-block-start: 2rem;
    padding: 1.5rem 1.25rem;

    @media (width >= 768px) {
      padding: 2rem 2.125rem;
    }
  }

  .mpage-example__kicker {
    color: var(--color-brand);
    margin: 0 0 0.375rem;
  }

  .mpage-example__title {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    text-wrap: pretty;
  }

  .mpage-example__text {
    color: var(--color-ink-secondary);
    font-size: 0.96875rem;
    line-height: 1.68;
    margin: 0;
    max-inline-size: 72ch;

    & + & {
      margin-block-start: 0.75rem;
    }

    & a {
      color: var(--color-brand);
      font-weight: 600;
    }
  }

  .mpage-example__link {
    align-items: center;
    color: var(--color-brand);
    display: inline-flex;
    font-size: 0.9375rem;
    font-weight: 700;
    gap: 0.4375rem;
    margin-block-start: 1rem;
    text-decoration: none;
  }

  .mpage-example__link:hover {
    color: var(--color-brand-strong);
  }

  /* The one line of this section that answers the reader's worry about XML, so
     it is a tinted band of its own with the claim in bold. */
  .mpage-callout {
    background: var(--color-brand-tint);
    border: 1px solid oklch(from var(--color-brand) l c h / 18%);
    border-radius: var(--radius-md);
    font-size: 0.90625rem;
    line-height: 1.65;
    margin: 1rem 0 0;
    padding: 1.125rem 1.375rem;
    text-wrap: pretty;

    & strong {
      font-weight: 700;
    }
  }

  /* ─── Glossary ────────────────────────────────
     Terms under their initial, with a bar of initials that jumps to each. The
     bar is a real navigation: every letter it shows has terms under it. */

  .mpage-azbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 2rem;
  }

  .mpage-azbar__letter {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    display: flex;
    font-size: 0.875rem;
    font-weight: 700;
    justify-content: center;
    min-inline-size: 2.25rem;
    padding: 0.4375rem 0.5rem;
    text-decoration: none;
  }

  .mpage-azbar__letter:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
    color: var(--color-brand);
  }

  .mpage-glossary {
    margin-block-start: 3.5rem;
  }

  .mpage-glossary__initial {
    border-block-end: 1px solid var(--color-border-strong);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    padding-block-end: 0.5rem;
    scroll-margin-block-start: calc(var(--nav-height) + 1rem);
  }

  .mpage-terms {
    display: grid;
    gap: 1.5rem;

    @media (width >= 768px) {
      gap: 1.75rem 2.5rem;
      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
  }

  .mpage-term__name {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
  }

  .mpage-term__meaning {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    max-inline-size: 42rem;
  }

  /* ─── Figures ─────────────────────────────────
     Four short claims about the product, read as a row of numbers. The rules
     above and below tie them into one band rather than four loose cells. */

  .mpage-stats {
    border-block: 1px solid var(--color-border-subtle);
    display: grid;
    gap: 0 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-block-start: 3rem;
  }

  .mpage-stat {
    padding-block: 1.625rem;
  }

  .mpage-stat__value {
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .mpage-stat__label {
    color: var(--color-ink-muted);
    font-size: 0.84375rem;
    font-weight: 600;
    margin: 0.375rem 0 0;
  }

  /* ─── Three facts, up front ───────────────────
     What a reader needs before anything else: the date, the format, and that
     receiving concerns them too. A label and the sentence that qualifies it. */

  .mpage-facts {
    display: grid;
    gap: 1rem;
    margin-block-start: 2.25rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .mpage-fact {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.375rem;
  }

  /* Filled with the brand rather than outlined, unlike the Peppol fields':
     these three open the page and carry its one note of colour. */
  .mpage-fact__icon {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 2.125rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-inverted);
    display: flex;
    inline-size: 2.125rem;
    justify-content: center;
    margin-block-end: 0.75rem;
  }

  .mpage-fact__what {
    display: block;
    font-size: 1rem;
    font-weight: 700;
  }

  .mpage-fact__detail {
    color: var(--color-ink-secondary);
    display: block;
    font-size: 0.84375rem;
    line-height: 1.55;
    margin-block-start: 0.3125rem;
  }

  /* ─── Notes under a rule ──────────────────────
     The cases that are neither one profile nor another, kept quieter than the
     profiles above them because they qualify rather than answer. */

  .mpage-notes {
    border-block-start: 1px solid var(--color-border-subtle);
    display: grid;
    gap: 1.625rem;
    margin-block-start: 2rem;
    padding-block-start: 1.625rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .mpage-note__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
  }

  .mpage-note__text {
    color: var(--color-ink-secondary);
    font-size: 0.90625rem;
    line-height: 1.6;
    margin: 0;
  }

  /* A line of fine print: true, needed, and not the point. */
  .mpage-fine {
    color: var(--color-ink-muted);
    font-size: 0.84375rem;
    line-height: 1.6;
    margin: 1.5rem 0 0;
    max-inline-size: 80ch;
  }

  /* ─── What the invoice must carry ─────────────
     The drawing and the list read together: each requirement carries a number,
     and the same number sits on the drawing where that field belongs. Side by
     side where there is room; on a phone the drawing comes first, so the
     numbers in the list have something to refer back to. */

  .mpage-nz {
    display: grid;
    gap: 2rem;
    margin-block-start: 2.125rem;

    @media (width >= 768px) {
      align-items: start;
      gap: 2.75rem;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }
  }

  .mpage-nz__list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
  }

  .mpage-nz__item {
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    transition: background 150ms;
  }

  .mpage-nz__mark {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 1.375rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    inline-size: 1.375rem;
    justify-content: center;
    margin-block-start: 0.0625rem;
  }

  .mpage-nz__name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.96875rem;
    font-weight: 700;
    gap: 0.5rem;
    margin: 0 0 0.3125rem;
  }

  .mpage-nz__tag {
    background: var(--color-surface-inverted);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem;
    text-transform: uppercase;
  }

  .mpage-nz__text {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0;
  }

  /* What the dashed fields on the drawing mean. */
  .mpage-nz__legend {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.78125rem;
    gap: 0.625rem;
    margin-block-start: 1rem;
    padding-inline-start: 1rem;
  }

  .mpage-nz__swatch {
    block-size: 0.875rem;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    inline-size: 1.375rem;
  }

  /* ─── A half of a section ─────────────────────
     Where one section answers in two halves — what the data has to be, and how
     it travels — each half opens on its own heading and lead, set from the
     start at a readable measure under the section's centred title. */

  .mpage-sub {
    margin-block-start: 3rem;
    max-inline-size: 74ch;

    /* The first half follows the section's own head, which brings its own space. */
    &:first-child {
      margin-block-start: 0;
    }
  }

  .mpage-sub__title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 0.625rem;
    text-wrap: pretty;
  }

  .mpage-sub__lead {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 0.875rem;
    text-wrap: pretty;

    &:last-child {
      margin-block-end: 0;
    }
  }

  /* A drawing that answers the half above it: `mpage-flow` brings no space of
     its own, since elsewhere it follows a section's head, which does. */
  .mpage-sub + .mpage-flow {
    margin-block-start: 1.5rem;
  }

  /* ─── The checklist of preparations ───────────
     Six steps the reader ticks off as they go. The real checkbox stays in the
     tab order under `for-screen-reader`; the box beside it is what is drawn,
     and it takes the focus ring on the input's behalf. A step that is done is
     struck through and quietened, so what is left reads as what is left. */

  .mpage-progress {
    background: var(--color-brand-tint);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    justify-self: start;
    margin: 0 0 1.125rem;
    padding: 0.4375rem 0.875rem;
    width: fit-content;
  }

  .mpage-checks {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mpage-check {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: background 150ms, border-color 150ms;

    &:hover {
      border-color: oklch(from var(--color-brand) l c h / 45%);
    }

    /* The ring is drawn on the card, since the input it belongs to is the one
       thing here that is not drawn. */
    &:has(:focus-visible) {
      outline: 2px solid var(--color-brand);
      outline-offset: 2px;
    }

    &:has(:checked) {
      background: var(--color-surface-tint);
    }
  }

  .mpage-check__toggle {
    align-items: start;
    cursor: pointer;
    display: flex;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
  }

  .mpage-check__box {
    align-items: center;
    block-size: 1.5rem;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: transparent;
    display: flex;
    flex: none;
    inline-size: 1.5rem;
    justify-content: center;
    margin-block-start: 0.0625rem;
    transition: background 150ms, border-color 150ms, color 150ms;

    :checked + & {
      background: var(--color-brand);
      border-color: var(--color-brand);
      color: var(--color-ink-inverted);
    }
  }

  .mpage-check__title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-block-end: 0.3125rem;

    :checked ~ .mpage-check__body & {
      color: var(--color-ink-muted);
      text-decoration: line-through;
    }
  }

  .mpage-check__number {
    color: var(--color-brand);
    font-family: var(--font-mono);
    margin-inline-end: 0.125rem;
  }

  .mpage-check__text {
    color: var(--color-ink-secondary);
    display: block;
    font-size: 0.90625rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  /* Lines up with the text above it, not with the box: the toggle's own padding
     plus the box and the gap beside it. */
  .mpage-check__links {
    margin: 0;
    padding: 0 1.25rem 1.125rem 3.625rem;
  }

  /* ─── An e-invoice on its way ──────────────────
     The opening's drawing: the document, the hop it travels over, and the
     receipt at the other end, on a tinted panel so the three read as one
     journey rather than as three cards. */

  .mpage-route {
    background: var(--color-brand-tint);
    border: 1px solid oklch(from var(--color-brand) l c h / 25%);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
  }

  .mpage-route__doc {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lifted);
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 1.125rem 1.25rem;
  }

  .mpage-route__label {
    color: var(--color-brand);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mpage-route__number {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    margin-block-end: 0.375rem;
  }

  /* The body of the document is drawn rather than written: it says nothing, so
     there is nothing to read out. */
  .mpage-route__line {
    background: var(--color-border-subtle);
    block-size: 6px;
    border-radius: var(--radius-xs);
  }

  .mpage-route__line--long { inline-size: 78%; }
  .mpage-route__line--full { inline-size: 92%; }
  .mpage-route__line--short { inline-size: 60%; }

  .mpage-route__sum {
    border-block-start: 1px solid var(--color-border-subtle);
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.75rem;
    justify-content: space-between;
    margin: 0.5rem 0 0;
    padding-block-start: 0.625rem;

    & b {
      color: var(--color-brand);
      font-family: var(--font-mono);
      font-size: 0.875rem;
    }
  }

  /* The hop: two ends and the network between them, drawn dashed because the
     invoice is in transit rather than at rest. */
  .mpage-route__hop {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding-inline: 0.375rem;
  }

  .mpage-route__dot {
    background: var(--color-brand);
    block-size: 0.625rem;
    border-radius: var(--radius-pill);
    flex: none;
    inline-size: 0.625rem;
  }

  .mpage-route__wire {
    border-block-start: 2px dashed oklch(from var(--color-brand) l c h / 55%);
    flex: 1;
  }

  .mpage-route__net {
    background: var(--color-surface-inverted);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    font-size: 0.71875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
  }

  .mpage-route__state {
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: flex;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1rem;

    & b {
      display: block;
      font-size: 0.90625rem;
    }

    & em {
      color: var(--color-ink-muted);
      display: block;
      font-size: 0.6875rem;
      font-style: normal;
    }
  }

  .mpage-route__ok {
    align-items: center;
    background: var(--color-positive-tint);
    block-size: 1.875rem;
    border-radius: var(--radius-pill);
    color: var(--color-positive);
    display: flex;
    flex: none;
    inline-size: 1.875rem;
    justify-content: center;
  }

  /* ─── What the register says about us ──────────
     The one card on the page that states a fact about the service rather than
     about the law: the two companies behind it, the record number, and what
     that arrangement means. */

  .mpage-record {
    background: var(--color-surface);
    border: 1.5px solid oklch(from var(--color-brand) l c h / 35%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.625rem;
  }

  .mpage-record__head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin: 0 0 1.125rem;
  }

  .mpage-record__icon {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 2.375rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-inverted);
    display: flex;
    flex: none;
    inline-size: 2.375rem;
    justify-content: center;
  }

  .mpage-record__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .mpage-record__rows {
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    margin: 0 0 1rem;
    padding-inline: 1rem;

    & > div {
      border-block-end: 1px solid var(--color-border-subtle);
      display: flex;
      gap: 0.75rem;
      justify-content: space-between;
      padding-block: 0.6875rem;

      &:last-child {
        border-block-end: 0;
      }
    }

    & dt {
      color: var(--color-ink-muted);
      font-size: 0.8125rem;
    }

    & dd {
      font-size: 0.875rem;
      font-weight: 700;
      margin: 0;
      text-align: end;
    }
  }

  .mpage-record__figure {
    color: var(--color-brand);
    font-family: var(--font-mono);
  }

  .mpage-record__text {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0.625rem 0 0;
    text-wrap: pretty;
  }

  /* ─── Who answers for what ─────────────────────
     Two cards side by side — what the service does, filled dark because it is
     ours to answer for, against what stays with the reader — and under them the
     one sentence about what passing through us does and does not mean. */

  .mpage-duties {
    display: grid;
    gap: 1rem;
    margin-block-start: 1rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .mpage-duty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  .mpage-duty--ours {
    background: var(--color-surface-inverted);
    border-color: transparent;
    color: var(--color-ink-inverted);

    .mpage-duty__text {
      color: var(--color-ink-inverted-muted);
    }
  }

  .mpage-duty__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
  }

  .mpage-duty__text {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0;
    text-wrap: pretty;
  }

  /* What passing through us means, which is the qualifier under both. */
  .mpage-duty-note {
    background: var(--color-brand-tint);
    border: 1px solid oklch(from var(--color-brand) l c h / 25%);
    border-radius: var(--radius-lg);
    margin-block-start: 1rem;
    padding: 1.25rem 1.5rem;
  }

  /* ─── A measured column of prose ───────────────
     A section that answers in paragraphs rather than in parts: set from the
     start at a readable measure, with the phrases the reader is scanning for
     in bold. */

  .mpage-prose {
    margin-inline: auto;
    max-inline-size: 74ch;

    & p {
      color: var(--color-ink-secondary);
      font-size: 1rem;
      line-height: 1.72;
      margin: 0 0 1rem;
      text-wrap: pretty;

      &:last-child {
        margin-block-end: 0;
      }
    }

    & strong {
      color: var(--color-ink);
      font-weight: 700;
    }
  }

  /* ─── The opening's illustration ──────────────
     A page whose opening carries a picture rather than a drawn mock: the
     design's own artwork, filling the column beside the words. */

  .mpage-art {
    display: flex;
    justify-content: center;
  }

  .mpage-art__image {
    block-size: auto;
    inline-size: 100%;
    max-inline-size: 28rem;

    @media (width >= 1024px) {
      max-inline-size: 34rem;
    }
  }

  /* ─── The invoice, drawn ──────────────────────
     Drawn as the invoice the app actually issues: the sections, their order and
     the palette follow the PDF (`Invoices::PdfDocuments::Theme`) — the year
     picked out of the number, the lavender band of dates, the supplier's purple
     rule against the client's dark one, every figure in the monospace face and
     the dark payment box at the foot. Small type throughout: it is read as a
     shape first and only then for its figures. */

  .mpage-invoice {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lifted);
    display: flex;
    flex-direction: column;
    font-size: 0.6875rem;
    gap: 0.5rem;
    line-height: 1.35;
    position: relative;
    padding: 0.875rem 1.125rem;
    padding-inline-start: 2.5rem;

    @media (width >= 768px) {
      padding: 0.875rem 1.375rem;
      padding-inline-start: 2.75rem;
    }
  }

  /* The markers run down a gutter of their own, clear of the fields they name.
     On the trailing corner the fields along the right edge — the dates, the
     items, the due date — pushed them past the card and they were drawn half
     outside; on the leading corner they sat on top of the labels. */
  .mpage-invoice__mark {
    inset-block-start: 0;
    inset-inline-start: -1.875rem;
    position: absolute;
  }

  .mpage-invoice__label {
    color: var(--color-ink-muted);
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin: 0;
    text-transform: uppercase;
  }

  .mpage-invoice__label--brand {
    color: var(--color-brand);
  }

  .mpage-invoice__top {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
  }

  .mpage-invoice__number {
    margin: 0;

    & em {
      color: var(--color-ink-secondary);
      font-size: 0.625rem;
      font-style: normal;
      font-weight: 700;
    }
  }

  /* The series and the number run together, told apart by colour alone — as
     the PDF sets them. */
  .mpage-invoice__figure {
    color: var(--color-ink);
    display: block;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-block: 0.125rem;

    & span {
      color: var(--color-brand);
    }
  }

  .mpage-invoice__logo {
    align-items: center;
    background: var(--color-surface-inverted);
    block-size: 2.25rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    inline-size: 2.25rem;
    justify-content: center;
  }

  /* The lavender band, with the due date picked out — the one figure on it a
     reader is usually looking for. */
  .mpage-invoice__dates {
    background: var(--color-brand-tint);
    border: 1px solid oklch(from var(--color-brand) l c h / 18%);
    border-radius: var(--radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
    padding: 0.5rem 0.875rem;

    & dt {
      color: var(--color-ink-muted);
      font-size: 0.5625rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    & dd {
      font-family: var(--font-mono);
      font-weight: 700;
      margin: 0;
    }
  }

  .mpage-invoice__due dd {
    color: var(--color-brand);
  }

  .mpage-invoice__parties {
    display: grid;
    gap: 1.125rem;

    @media (width >= 480px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* The supplier's heading and rule are the brand's, the client's the ink —
     the PDF's way of saying which side of the invoice you are reading. */
  .mpage-invoice__party {
    display: flex;
    flex-direction: column;

    & .mpage-invoice__label {
      border-block-end: 1.5px solid var(--color-ink);
      padding-block-end: 0.375rem;
    }

    & .mpage-invoice__label--brand {
      border-block-end-color: var(--color-brand);
      border-block-end-width: 2px;
    }

    & b {
      font-size: 0.8125rem;
      margin-block: 0.375rem 0.125rem;
    }

    & span:not(.mpage-nz__mark) {
      color: var(--color-ink-secondary);
    }
  }

  .mpage-invoice__ids {
    display: flex;
    flex-direction: column;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    margin: 0.375rem 0 0;
  }

  .mpage-invoice__items {
    border-block-end: 1px solid var(--color-border-subtle);
    padding-block-end: 0.5rem;
  }

  .mpage-invoice__row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) 1.75rem 2.75rem 2.75rem 2.5rem 3rem;
    margin: 0;

    /* Six columns and the marker gutter do not fit a phone at the drawing's
       usual size: the name broke a letter to a line and the headers ran into
       each other. The whole row is set smaller instead of dropping a column —
       it is a drawing of a document, and the document has six. */
    @media (width < 480px) {
      font-size: 0.5625rem;
      gap: 0.25rem;
      grid-template-columns: minmax(0, 1fr) 1.25rem 2rem 2rem 1.75rem 2.25rem;
    }

    & > :nth-child(n + 2) {
      font-family: var(--font-mono);
      text-align: end;
    }

    & b {
      display: block;
      font-size: 0.71875rem;

      @media (width < 480px) {
        font-size: 0.625rem;
      }
    }

    & em {
      color: var(--color-ink-muted);
      font-size: 0.5625rem;
      font-style: normal;

      @media (width < 480px) {
        font-size: 0.5rem;
      }
    }
  }

  /* The headers are the one row that must not wrap: "Sadzba" broke over two
     lines and read as two columns. */
  .mpage-invoice__row--head {
    border-block-end: 1px solid var(--color-ink);
    color: var(--color-ink-muted);
    font-size: 0.5rem;

    @media (width < 480px) {
      font-size: 0.4375rem;
      letter-spacing: 0.02em;
    }
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-block-end: 0.5rem;
    padding-block-end: 0.375rem;
    text-transform: uppercase;
    white-space: nowrap;

    & > :nth-child(n + 2) {
      font-family: inherit;
    }
  }

  .mpage-invoice__totals {
    display: grid;
    gap: 0.25rem;
    margin: 0 0 0 auto;
    max-inline-size: 13rem;

    & > div {
      display: flex;
      gap: 1rem;
      justify-content: space-between;
    }

    & dt {
      color: var(--color-ink-secondary);
    }

    & dd {
      font-family: var(--font-mono);
      font-weight: 700;
      margin: 0;
    }
  }

  .mpage-invoice__due-total {
    border-block-start: 1px solid var(--color-ink);
    margin-block-start: 0.375rem;
    padding-block-start: 0.375rem;

    & dt {
      color: var(--color-ink);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    & dd {
      color: var(--color-brand);
      font-size: 0.9375rem;
    }
  }

  .mpage-invoice__vat {
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.875rem;
  }

  .mpage-invoice__row--vat {
    border-block-start: 1px solid var(--color-border-subtle);
    color: var(--color-ink-secondary);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-start: 0.375rem;
    padding-block-start: 0.375rem;

    & > :nth-child(n + 2) {
      text-align: start;
    }
  }

  /* Drawn dashed because neither is generally required — the list's legend
     says as much, so the drawing has to show which two it means. */
  .mpage-invoice__optional {
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-xs);
    color: var(--color-ink-muted);
    margin: 0;
    padding: 0.3125rem 0.5rem;
  }

  .mpage-invoice__note {
    max-inline-size: 18rem;
  }

  /* The dark box the invoice closes on. */
  .mpage-invoice__pay {
    background: var(--color-surface-inverted);
    border-radius: var(--radius-md);
    color: var(--color-ink-inverted);
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.625rem 0.75rem;

    & p {
      margin: 0;
    }

    & .mpage-invoice__label {
      color: var(--color-ink-inverted-muted);
    }

    & b {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      margin-block-start: 0.1875rem;
    }
  }

  .mpage-invoice__pay-head {
    display: flex;
    gap: 1rem;
    grid-column: 1;
    justify-content: space-between;
  }

  .mpage-invoice__iban {
    grid-column: 1;
  }

  .mpage-invoice__pay-row {
    display: grid;
    gap: 0.75rem;
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    & > p {
      padding: 0.375rem 0.5rem;
    }
  }

  /* The dashed field inside the dark box takes the box's own ink, or it would
     be drawn in the page's muted grey against the navy. */
  .mpage-invoice__pay .mpage-invoice__optional {
    border-color: oklch(from var(--color-ink-inverted) l c h / 35%);
    color: var(--color-ink-inverted);
  }

  /* A tap on a field says on the drawing which requirement it answers. Only
     where there is no pointer: a hovering one has the list beside the drawing
     and lights both at once, so a popover would be in the way. The controller
     sets its position, under the field it describes or over it. */
  .mpage-invoice__hint {
    align-items: center;
    background: var(--color-surface-inverted);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    color: var(--color-ink-inverted);
    display: none;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.5rem;
    inset-block-start: var(--mpage-hint-block-start, 0);
    inset-inline: 0.5rem;
    line-height: 1.35;
    margin: 0;
    padding: 0.5rem 0.625rem;
    position: absolute;
    z-index: var(--z-popover);

    @media (width < 768px) and (hover: none) {
      &.is-shown {
        display: flex;
      }
    }
  }

  /* On a phone the seven requirements are read off the drawing itself — a tap
     on a field pops up the one it answers — so the list below is a second copy
     of the same seven, several screens long. It is hidden the way
     `for-screen-reader` hides a label rather than with `display: none`: the
     text stays in the page for search and for a reader who is not looking at
     it. The condition is the popover's own, so the list is only taken away
     where something has replaced it: a tablet and a narrow window on a desktop
     keep both. */
  @media (width < 768px) and (hover: none) {
    .mpage-nz__list,
    .mpage-nz .mpage-split__title {
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
  }

  /* Drawn, not scannable: the pattern reads as a QR code at this size, and the
     invoice's own words say the rest. */
  .mpage-invoice__qr {
    align-self: center;
    background:
      repeating-conic-gradient(var(--color-ink) 0% 25%, var(--color-surface) 0% 50%) 0 0 / 0.25rem 0.25rem;
    block-size: 2.875rem;
    border: 0.1875rem solid var(--color-surface);
    border-radius: var(--radius-xs);
    grid-column: 2;
    grid-row: 1 / -1;
    inline-size: 2.875rem;
  }

  /* The list runs a good deal taller than the drawing, so the drawing it points
     at stays in view while the reader goes down the seven. It is never a pane to
     scroll: the drawing is set compactly enough to stand whole under the header
     on any ordinary window, and on a shorter one its foot goes below the fold
     rather than putting a scrollbar down the middle of a document. */
  .mpage-nz .mpage-invoice {
    @media (width >= 1024px) {
      inset-block-start: calc(var(--home-header-block-size) + 0.75rem);
      position: sticky;
    }
  }

  /* ─── Pointing at a field ─────────────────────
     Every field on the drawing is framed, so the drawing reads as answerable;
     pointing at one, or at the requirement that asks for it, lights that field
     and dims the others. The frame and its tint are drawn outside the box —
     an `outline` and a spread `box-shadow` — so nothing on the drawing moves as
     the reader goes down the list. */

  .mpage-invoice__zone {
    border-radius: var(--radius-xs);
    cursor: pointer;
    position: relative;
    outline: 1.5px solid var(--color-border-subtle);
    outline-offset: 0.25rem;
    transition: box-shadow 150ms, opacity 150ms, outline-color 150ms;
  }

  /* The two dashed fields carry a border of their own, so they take no frame. */
  .mpage-invoice__optional.mpage-invoice__zone {
    outline: none;
  }

  /* A field holding the lit one — a party around its identifiers, the dates
     around the due date — keeps its opacity, or the one inside it would be
     dimmed along with its parent. */
  .mpage-nz.is-focused .mpage-invoice__zone:not(.is-active):not(:has(.is-active)) {
    opacity: 0.35;
  }

  .mpage-invoice__zone.is-active {
    box-shadow: 0 0 0 0.25rem var(--color-brand-tint);
    outline-color: var(--color-brand);
  }

  .mpage-nz__item.is-active {
    background: var(--color-brand-tint);
  }


  /* ─── The four extra fields Peppol wants ──────
     Not on the paper invoice, but required of the data. Each names the field
     and, under it, what it actually is. */

  .mpage-fields {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 1.375rem;

    @media (width >= 480px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width >= 1024px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .mpage-field {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.125rem;
  }

  /* The glyph sits in a tile of its own, its surface lifted off the card's
     tint so it reads as an object rather than as painted-on ink. */
  .mpage-field__icon {
    align-items: center;
    background: var(--color-surface);
    block-size: 2.25rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-brand);
    display: flex;
    inline-size: 2.25rem;
    justify-content: center;
    margin-block-end: 0.375rem;
  }

  .mpage-field__name {
    font-size: 0.90625rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .mpage-field__hint {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  /* ─── The last word before sending ────────────
     Dark, because it is the one thing on the section a reader should not
     skim: a document the system accepts may still be wrong. */

  .mpage-verdict {
    align-items: start;
    background: var(--color-surface-inverted);
    border-radius: 0.875rem;
    color: var(--color-ink-inverted-muted);
    display: flex;
    gap: 0.875rem;
    margin-block-start: 1.75rem;
    padding: 1.25rem 1.5rem;
  }

  .mpage-verdict__icon {
    color: var(--color-brand-inverted);
    flex-shrink: 0;
    margin-block-start: 0.125rem;
  }

  .mpage-verdict__text {
    font-size: 0.90625rem;
    line-height: 1.65;
    margin: 0;
  }

  /* ─── What changes in the week ────────────────
     Five things, three of them with the figure the law puts on them. */

  .mpage-changes {
    display: grid;
    gap: 1.375rem;
    margin-block-start: 1.625rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .mpage-change {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 1.375rem;
  }

  .mpage-change__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.625rem;
  }

  .mpage-change__text {
    color: var(--color-ink-secondary);
    font-size: 0.90625rem;
    line-height: 1.62;
    margin: 0;
  }

  /* ─── Jump links ──────────────────────────────
     A long page's own table of contents: every link lands on a heading of
     this page, so the reader can go straight to the part that concerns them. */

  .mpage-anchors {
    border-block: 1px solid var(--color-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-block-start: 2rem;
    padding-block: 1rem;
  }

  .mpage-anchors__link {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
  }

  .mpage-anchors__link:hover {
    color: var(--color-brand);
  }

  /* A heading a jump link lands on has to clear the fixed bar above it. */
  .mpage-rows[id],
  .mpage-section[id],
  .mpage-faq[id],
  .mpage-band[id] {
    scroll-margin-block-start: calc(var(--nav-height) + 1rem);
  }

  /* ─── The way a document travels ──────────────
     Who hands the invoice to whom, drawn as one card. The two carriers are one
     leg of the journey — that is the part the reader is choosing — so they are
     grouped and filled with the brand, and the office hangs under that leg
     rather than standing in the line: nothing passes through it on the way to
     the customer. */

  .mpage-flow {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: 0.625rem;
    padding: 1.625rem 1.375rem;

    @media (width >= 768px) {
      align-items: center;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 2.1fr) auto minmax(0, 1fr);
    }
  }

  .mpage-flow__stop {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.84375rem;
    font-weight: 700;
    min-inline-size: 0;
    padding: 0.75rem 0.875rem;
    text-align: center;
  }

  /* The carriers carry the brand as a surface: they are the part being chosen. */
  .mpage-flow__stop--carrier {
    background: var(--color-brand-fill);
    border-color: var(--color-brand-fill);
    color: var(--color-ink-inverted);
  }

  .mpage-flow__leg {
    background: var(--color-brand-tint);
    border: 1px dashed oklch(from var(--color-brand) l c h / 35%);
    border-radius: var(--radius-md);
    display: grid;
    gap: 0.625rem;
    padding: 0.625rem;

    @media (width >= 768px) {
      align-items: center;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
  }

  /* Down the column on a phone, along the row on a wide display. */
  .mpage-flow__arrow {
    color: var(--color-ink-muted);
    display: flex;
    justify-content: center;
    rotate: 90deg;

    @media (width >= 768px) {
      rotate: none;
    }
  }

  .mpage-flow__branch {
    align-items: center;
    display: flex;
    flex-direction: column;

    @media (width >= 768px) {
      grid-column: 1 / -1;
    }
  }

  .mpage-flow__stem {
    background: oklch(from var(--color-brand) l c h / 35%);
    block-size: 1.375rem;
    inline-size: 2px;
  }

  .mpage-flow__stop--office {
    background: var(--color-surface);
    border-color: oklch(from var(--color-brand) l c h / 35%);
    color: var(--color-brand);
  }

  .mpage-flow__note {
    color: var(--color-ink-muted);
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    margin-block-start: 0.1875rem;
  }

  /* Three dates on one axis. On a wide display the axis lies across the page
     with a dot over each date; on a phone it stands on its leading edge and the
     dates read down it. The line and the dots are drawn rather than marked up:
     they say nothing the dates do not. */
  .mpage-timeline {
    display: grid;
    gap: 1.625rem;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.625rem;
    position: relative;

    /* Between the first and the last dot, not across the whole row: the dots
       sit at the centres of the outer thirds. */
    &::before {
      background: linear-gradient(to bottom, var(--color-brand), var(--color-border));
      content: "";
      inset: 0.375rem auto 0.375rem 0.375rem;
      inline-size: 2px;
      position: absolute;
    }

    @media (width >= 768px) {
      gap: 1.5rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 2.125rem 0 0;
      text-align: center;

      &::before {
        background: linear-gradient(to right, var(--color-brand), var(--color-border));
        block-size: 2px;
        inline-size: auto;
        inset: 0.5rem calc(100% / 6) auto calc(100% / 6);
      }
    }
  }

  .mpage-moment {
    position: relative;

    /* The dot rides the axis: on the leading edge on a phone, over the date on
       a wide display. */
    &::before {
      background: var(--color-surface);
      block-size: 1rem;
      border: 3px solid var(--color-brand-tint);
      border-radius: var(--radius-pill);
      content: "";
      inline-size: 1rem;
      inset-block-start: 0.125rem;
      inset-inline-start: -1.625rem;
      position: absolute;

      @media (width >= 768px) {
        inset-block-start: -2.125rem;
        inset-inline-start: 50%;
        translate: -50% 0;
      }
    }
  }

  /* The date the reader has to act on. */
  .mpage-moment--now::before {
    background: var(--color-brand);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 5px var(--color-brand-tint);
  }

  /* Four years out: on the axis, but drawn back. */
  .mpage-moment--soft {
    opacity: 0.65;

    &::before {
      border-color: var(--color-border);
    }

    .mpage-moment__date {
      color: var(--color-ink-muted);
    }
  }

  .mpage-moment__date {
    color: var(--color-brand);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
  }

  .mpage-moment__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    text-wrap: pretty;

    @media (width >= 768px) {
      margin-inline: auto;
      max-inline-size: 24ch;
    }
  }

  /* ─── A change, with the number that defines it ───
     What changes in the reader's week, and the figure the law puts on it —
     fifteen days, five days, ten years. */

  .mpage-figure {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
  }

  .mpage-figure__value {
    color: var(--color-brand);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .mpage-figure__unit {
    color: var(--color-ink-muted);
    font-size: 0.84375rem;
    font-weight: 600;
    max-inline-size: 11rem;
  }

  /* ─── Short lists side by side ────────────────
     Three cases a reader falls into, each with its lead, its list and the
     footnote that qualifies it. */

  .mpage-minis {
    display: grid;
    gap: 1rem;
    margin-block-start: 2.5rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
  }

  /* Each of the three is a card, so the reader can tell where one answer ends
     and the next begins. The closing remark is pushed to the card's foot, so
     the three cards end level however long their lists are. */
  .mpage-mini {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
  }

  .mpage-mini__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
  }

  .mpage-mini__lead {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 0.875rem;
  }

  /* A situation and the sentence the invoice must carry for it. The label is
     the quieter of the two, so the sentence is what the eye lands on. */
  .mpage-mini__pairs {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
  }

  .mpage-mini__pair {
    background: var(--color-surface-tint);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5625rem 0.75rem;
  }

  .mpage-mini__label {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .mpage-mini__value {
    font-size: 0.84375rem;
    font-weight: 700;
  }

  .mpage-mini__checks {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
  }

  .mpage-mini__check {
    align-items: center;
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.625rem;
  }

  .mpage-mini__mark {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 1.375rem;
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    display: flex;
    flex-shrink: 0;
    inline-size: 1.375rem;
    justify-content: center;
  }

  /* What is not required is only marked, never recommended: the same row, grey. */
  .mpage-mini__checks--no {
    color: var(--color-ink-secondary);

    .mpage-mini__mark {
      background: var(--color-surface-tint);
      color: var(--color-ink-muted);
    }
  }

  .mpage-mini__note {
    border-block-start: 1px solid var(--color-border-subtle);
    color: var(--color-ink-muted);
    font-size: 0.78125rem;
    line-height: 1.55;
    margin: auto 0 0;
    padding-block-start: 0.875rem;

    & strong {
      color: var(--color-ink);
      font-weight: 700;
    }
  }

  /* The column the comparison is making the case for: named in the brand's
     colour in the head, and set as the answer in the rows. */
  .mpage-table__on {
    color: var(--color-ink);
    font-weight: 700;
  }

  .mpage-table thead .mpage-table__on {
    color: var(--color-brand);
  }

  /* ─── Where the rules come from ───────────────
     The laws and the official pages the page is written from, each with the
     way to read it in full. They leave the site, so they open in their own
     tab and carry `noopener`. */

  /* What the page stands on, and deliberately the quietest thing on it: a small
     heading, the date it was checked, and a numbered list whose link sits at the
     end of the line rather than on a line of its own. */

  .mpage-refs {
    margin-block-start: 4.5rem;
  }

  .mpage-refs__group + .mpage-refs__group {
    margin-block-start: 1.75rem;
  }

  .mpage-refs__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.625rem;
  }

  .mpage-refs__note {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
    max-inline-size: 86ch;
  }

  .mpage-sources {
    color: var(--color-ink-muted);
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    margin: 0;
    padding-inline-start: 1.25rem;
  }

  .mpage-source {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  /* Inline with the line it belongs to, and spaced from the one beside it. */
  .mpage-source__link {
    color: var(--color-brand);
    font-weight: 700;
    text-decoration: none;

    & + & {
      margin-inline-start: 0.625rem;
    }

    &:hover {
      color: var(--color-brand-strong);
      text-decoration: underline;
    }
  }

  /* ─── Closing card ────────────────────────── */

  .mpage-cta {
    background: var(--color-canvas);
    border-radius: var(--radius-xl);
    margin-block-start: 4.5rem;
    padding: 3rem 1.5rem;
    text-align: center;

    @media (width >= 768px) {
      padding: 3.5rem 3rem;
    }
  }

  .mpage-cta__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
  }

  .mpage-cta__text {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 1rem auto 0;
    max-inline-size: 34rem;
  }

  .mpage-cta__button {
    margin-block-start: 2rem;
  }

  /* The one further reading a page offers after its closing card. */
  .mpage-cta__after {
    margin: 1.125rem 0 0;
    text-align: center;
  }
}