/*
  managero.co.uk/compare, the comparison page.

  Loads AFTER /styles.css and adds only what this page needs. Tokens come from
  there; nothing is redefined here. No new font, no new image, no script.

  THE ORBIT, and the two rules that must survive any tidy-up:

    1. prefers-reduced-motion: reduce REMOVES the animation, it does not slow
       it. The static `transform` on .orbit-disc is written so the frozen
       arrangement is still correct and every name still upright with no
       animation running. If you move that rotation into the keyframes only,
       the frozen state breaks and a person with vestibular sensitivity gets a
       pile of sideways text.
    2. Below 860px the figure is display:none and .stack-list carries the same
       information. The orbit is decorative and aria-hidden; the argument lives
       in the table and the arithmetic. Never put a fact in the orbit alone.

  WHY THE RATIONALE LIVES HERE AND NOT IN THE HTML: the shipped pages carry no
  explanatory comments. Engineering notes belong in the stylesheet that owns the
  behaviour, not in markup a visitor can read.

  .stack-list is the mobile rendering of the orbit AND the screen-reader
  rendering of it at every size. It is not a duplicate to be deleted.

  TYPE AND NEUTRALS, 2 September 2026: Toby asked for the marketing pages to
  be white rather than off-white and for ordinary type. The tokens in
  /styles.css are now true neutrals with no yellow in them, and the tracking
  in this file is the face's normal spacing - the tight negative tracking on
  the orbit name and the 0.04-0.08em on the uppercase micro-labels are both
  "generated page" tells and both are gone. Do not re-warm the greys and do
  not re-track the labels.

  How the counter-rotation works: the ring rotates +360deg over --spin. Each
  disc rotates -360deg over the same --spin, starting from -(--a). The item's
  own rotate(var(--a)) is cancelled by the disc's -var(--a), so the text sits
  upright at every frame while the position travels. Custom properties resolve
  per element inside keyframes, which is what makes one keyframe pair serve
  every disc.
*/

.wrap--wide {
  max-width: 60rem;
}

.stack-section .stack-list,
.stack-section .stack-list-note {
  max-width: 44rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the stack: orbit beside the managero card ---------- */

.stack-layout {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
}

.orbit-figure {
  display: none; /* mobile-first: the list below is the default rendering */
  margin: 0;
}

.beside-card {
  background: var(--slate-50);
  border: 2px solid var(--brand);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.beside-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: normal;
  color: var(--green-700);
  margin-bottom: 8px;
}

/* ---------- the plain list (mobile, and the accessible rendering) ---------- */

.stack-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.stack-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 4px;
}

.stack-list b {
  font-weight: 600;
}

.stack-list span {
  font-size: 14px;
  color: var(--slate-700);
}

.stack-list-note {
  margin-bottom: 0;
}

/* On a phone the heading is followed by what you'd be replacing, and the
   managero card lands after it. Same DOM, reordered, so the desktop layout
   keeps the card beside the orbit where Toby asked for it. */
@media (max-width: 859px) {
  .stack-section .wrap {
    display: flex;
    flex-direction: column;
  }

  .stack-section h2 {
    order: 1;
  }

  .stack-section .stack-list {
    order: 2;
    margin-top: 8px;
  }

  .stack-section .stack-list-note {
    order: 3;
  }

  .stack-section .stack-layout {
    order: 4;
    margin-top: 8px;
  }
}

/* ================= THE ORBIT ================= */

@media (min-width: 860px) {
  .stack-layout {
    grid-template-columns: 440px minmax(280px, 1fr);
    gap: 40px;
  }

  .orbit-figure {
    display: block;
  }

  /* On desktop the orbit carries the names, so the list steps back to a
     compact caption rather than repeating itself at full size. */
  .stack-list {
    display: none;
  }

  .stack-list-note {
    margin-top: 20px;
  }
}

.orbit {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  /* Flat, not a gradient. A soft radial wash behind a diagram is texture
     standing in for content, and it is one of the things that marks a page
     out as generated. The ring carries the names; it does not need a glow. */
  background: var(--surface);
  border: 1px dashed var(--slate-300);
}

.orbit-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--slate-700);
}

.orbit-ring {
  position: absolute;
  inset: 0;
  /* LONGHANDS, DELIBERATELY. `animation: name var(--spin) linear infinite`
     parses but never runs in Chrome: a var() anywhere in the animation
     shorthand defers the whole declaration and the name stops resolving, so
     the orbit sits dead still with no error anywhere. Caught by screenshotting
     the page at two virtual times and getting identical bytes. Do not
     "tidy" these four lines back into a shorthand. */
  animation-name: orbit-ring-spin;
  animation-duration: var(--spin);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.orbit-ring--outer {
  --spin: 56s;
}

.orbit-ring--inner {
  --spin: 76s;
  animation-direction: reverse;
}

.orbit-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r)));
}

.orbit-disc {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 156px;
  height: 84px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-card);
  text-align: center;

  /* The static, no-animation state. Load-bearing: this is what the
     reduced-motion rendering falls back to. */
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  /* Longhands for the same reason as the ring above. */
  animation-name: orbit-disc-upright;
  animation-duration: var(--spin);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.orbit-ring--inner .orbit-disc {
  animation-direction: reverse;
}

/*
  THE VENDOR MARKS. `object-fit: contain` with both dimensions bounded is what
  keeps each logo unmodified: it scales uniformly and is never cropped,
  stretched or recoloured. The white card behind it is a container, not a mask.
  Do not give it overflow:hidden and a circular radius to "match" our styling,
  because that would crop somebody else's trademark into our shape.
*/
.orbit-logo {
  display: block;
  max-width: 124px;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Trail is set as a name in our own typeface rather than as its logo. See the
   trademark note in the page footer for why. */
.orbit-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.1;
  color: var(--ink);
}

.orbit-disc i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--slate-700);
  line-height: 1;
}

@keyframes orbit-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit-disc-upright {
  from {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg));
  }
}

/*
  REDUCED MOTION. Remove the animation entirely rather than slowing it. The
  discs keep their static transform above, so the arrangement freezes into a
  legible, upright, evenly spaced diagram with the same eight names on it.
*/
@media (prefers-reduced-motion: reduce) {
  .orbit-ring,
  .orbit-disc {
    animation-name: none;
    animation-duration: 0s;
    animation-iteration-count: 1;
  }
}

/* ---------- trademark note ---------- */

.trademark-note {
  font-size: 13px;
  line-height: 1.6;
  /* It sits in the dark footer bar now, so it takes the footer's muted
     paper-on-ink colour rather than the light page's slate. */
  color: #848484;
  max-width: 78ch;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

/* ==========================================================================
   THE FEATURE MATRIX  (#matrix / .mx)

   TWO RENDERINGS OF ONE TABLE, and the reason there are two:

     >= 880px  a real grid. Features down the first column, four products
               across, managero first and tinted so the eye lands on it.
     <  880px  the same <table> re-flowed to one CARD PER FEATURE. A
               four-column matrix cannot fit 390px, and the failure mode of
               forcing it (horizontal scroll with the row label scrolled out
               of view) leaves a tick on screen with nothing to say what it
               is a tick FOR. Here the feature label is the card's heading and
               every mark inside carries its product name from data-vendor, so
               a mark can never be orphaned from either.

   The markup does not change between the two. There is one <table>, one set of
   cells, one source of truth; only `display` moves.

   THE MARKS CARRY MEANING IN MORE THAN COLOUR. Tick, cross, dash and clock are
   four different glyphs and every cell also holds a visually-hidden sentence
   naming the product, the verdict and the source. Colour is confirmation, never
   the carrier.

   prefers-reduced-motion: the tier thumb stops sliding. It does not slow down,
   and the checked state is still obvious without it because the label goes
   bold and dark.
   ========================================================================== */

.matrix-section {
  --mx-sticky-top: 68px;
  --mx-yes: var(--green-700);
  --mx-no: #a33a30; /* 5.9:1 on white; never the only signal */
  --mx-dash: var(--slate-700);
  --mx-soon: #8a6116; /* 5.5:1 on white; the clock, never the only signal */
}

/* ---------- the key: one line, tight to the grid ----------

   It used to be four paragraphs in a panel, which is more words than the table
   it explains. What each mark ASSERTS is carried where it belongs instead: by
   four different SHAPES, and by the visually-hidden sentence every cell already
   holds, which names the product, the verdict and any qualifier.

   FOUR SHAPES, NOT FOUR COLOURS. Tick, cross, dash and clock are four distinct
   glyphs at the same stroke weight. The colours below are confirmation and are
   never the only difference between two states, which is the bar the rest of
   this page is built to and must not regress. */

.mx-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 10px;
  padding: 0;
  font-size: 13.5px;
  line-height: 1;
  color: var(--ink-2);
}

.mx-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mx-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex: none;
}

.mx-key--yes {
  color: var(--mx-yes);
  background: var(--green-50);
}

.mx-key--no {
  color: var(--mx-no);
  background: #fbeeec;
}

.mx-key--na {
  color: var(--mx-dash);
  background: var(--slate-100);
}

/* The fourth mark. Deliberately NOT green: a row that is coming soon is not a
   row that works, and the key is the one place a reader decides what each
   colour is worth. */
.mx-key--soon {
  color: var(--mx-soon);
  background: #f7efe1;
}

/* ---------- the two numbers, shared with the calculator ---------- */

.mx-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.mx-field {
  display: grid;
  gap: 6px;
}

/* `> label` on purpose: the segmented site picker's own 1-5 labels are nested
   inside .mx-seg and must not pick this up. .mx-field-label is the radiogroup's
   name, a <span> rather than a <label> because a group of radios is named by
   aria-labelledby and not by a `for`. */
.mx-field > label,
.mx-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
}

.mx-field input[type='number'] {
  font: inherit;
  font-size: 15px;
  padding: 9px 12px;
  min-width: 10rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: 4px;
}

.mx-controls-note {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-700);
}

.mx-live {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--slate-700);
}

/* The horizontal-scroll safety net is only needed in the band where the grid
   layout is on (>= 880px) but the viewport is narrower than the table's
   min-width. Above that the container must NOT establish a scroll port at all,
   because an ancestor with a non-visible overflow makes `position: sticky`
   resolve against that box instead of the viewport, and the sticky header
   silently stops sticking. Below 880px the table is cards and there is nothing
   to scroll sideways. */
.mx-scroll {
  overflow-x: auto;
  border-radius: var(--radius-card);
}

@media (min-width: 1000px) {
  .mx-scroll {
    overflow-x: visible;
  }
}

.mx-scroll:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: 2px;
}

.mx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* ---------- >= 880px: the grid ---------- */

@media (min-width: 880px) {
  .mx-table {
    min-width: 780px;
    table-layout: fixed;
  }

  .mx-corner {
    width: 27%;
  }

  .mx-vh {
    width: 18.25%;
  }

  /* The header sticks. With this many rows the logos scroll off long before
     the reader reaches the bottom of the table, and a tick in an unlabelled
     column is worse than no tick at all: it is the same orphaning problem the
     mobile card layout exists to solve, just at the other end of the range.
     The background is opaque on purpose: rows must pass BEHIND it, not through
     it. z-index keeps it over the tinted managero column, which paints later
     in document order. */
  .mx-table thead th {
    position: sticky;
    /* clears the site header, which is itself sticky at top: 0 */
    top: var(--mx-sticky-top);
    z-index: 2;
    background: var(--paper);
    vertical-align: bottom;
    padding: 0 10px 14px;
    text-align: center;
    border-bottom: 3px solid var(--ink);
  }

  /* A sticky cell's own border does not travel with it in every engine, so the
     rule under the header is redrawn as a shadow that definitely does. */
  .mx-table thead th::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--ink);
  }

  .mx-table thead .mx-vh--primary::after {
    background: var(--brand);
  }

  .mx-corner {
    text-align: left;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--slate-700);
    padding-left: 2px;
  }

  /* TWO EXPLICIT ROWS IN EVERY COLUMN: the logo box, then a slot for Trail's
     tier switch. Trail is the only column that fills the second row, but every
     column reserves it, and that is the whole point. The header cells are
     bottom-aligned, so without a reserved slot Trail's logo rode ~60px higher
     than the other three and no amount of sizing the images fixes that. With
     the slot reserved, all four logo boxes are the same track at the same
     height and the four marks share one centre line. */
  .mx-vh-in {
    display: grid;
    /* row 1 the logo box, row 2 the tier slot. minmax so the slot is RESERVED
       in the three columns that have nothing to put in it, and still grows if
       Trail's label ever wraps. */
    grid-template-rows: 46px minmax(52px, auto);
    align-content: end;
    align-items: center;
    justify-items: center;
    gap: 8px;
  }

  .mx-vh--primary {
    background: var(--green-50);
    /* wins over the sticky header's paper fill above */
    border-bottom-color: var(--brand);
    border-radius: 6px 6px 0 0;
    padding-top: 16px;
  }

  .mx-table tbody td,
  .mx-table tbody th {
    padding: 12px 10px;
    border-bottom: 1px solid var(--slate-200);
  }

  .mx-f {
    text-align: left;
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink);
    position: sticky;
    left: 0;
    background: #fff;
  }

  .mx-c {
    text-align: center;
  }

  .mx-c--us {
    background: var(--green-50);
  }

  .mx-grouprow th {
    text-align: left;
    padding: 26px 2px 8px;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--green-700);
    border-bottom: 2px solid var(--slate-300);
    background: #fff;
  }

  .mx-table tfoot th,
  .mx-table tfoot td {
    padding: 18px 12px;
    vertical-align: top;
    border-top: 3px solid var(--ink);
  }

  .mx-f--total {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
  }

  .mx-total--us {
    background: var(--green-50);
    border-radius: 0 0 6px 6px;
    text-align: center;
  }

  .mx-total--stack {
    text-align: center;
  }
}

/* ---------- the header cells ----------

   ONE BOX, FOUR LOGOS, OPTICAL SIZING (task P138-#45). The four files have
   nothing in common dimensionally: managero is 150x28, Trail is a 70x46 badge,
   RotaCloud is a 132x15 wordmark, Menutech is 118x31. Set to one pixel height
   they came out at wildly different weights and sat at different heights in the
   row, which is what made the header look ragged.

   So: .mx-logobox is a fixed-height box every logo is centred in, giving one
   common centre line across all four columns. Inside it each mark is sized by
   what it IS rather than by its file. The three wordmarks are matched on WIDTH,
   because a wordmark's optical weight is its length. Trail's badge is matched on
   HEIGHT and capped well under the box, because a compact badge set to a
   wordmark's width would tower over the row.

   The prices that used to sit under each logo are gone with the rest of the
   page's pricing, so .mx-price and .mx-price--none went with them. */

.mx-logobox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
}

.mx-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* the wordmarks, matched on width */
.mx-logo--us {
  width: 132px;
}

.mx-vh--rotacloud .mx-logo {
  width: 126px;
}

.mx-vh--menutech .mx-logo {
  width: 106px;
}

/* the badge, matched on height */
.mx-vh--trail .mx-logo {
  height: 38px;
}

/* ---------- the segmented controls ----------

   .mx-seg is ONE skin worn by two controls: Trail's tier switch in the table
   header, and the site picker above it (task P138-#45, which replaced a bare
   native <select> — two idioms for the same kind of choice on one page).

   THE CHECKED STATE IS NEVER CARRIED BY COLOUR. It is a white pill on a grey
   track, plus a heavier weight, plus the radio's own checked state for anything
   listening. Native radios, so arrow keys move through the group for free; the
   input itself is visually hidden and the focus ring is drawn on its label, so
   keyboard focus stays visible.

   .mx-tier-seg adds the sliding thumb on top. That is a two-option trick and
   the five-option site picker does not use it: there the pill is painted on the
   checked label itself. */

.mx-seg {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 4px;
}

.mx-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.mx-seg label {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--slate-700);
  white-space: nowrap;
  transition: color 0.18s ease;
}

.mx-seg input:checked + label {
  color: var(--ink);
  font-weight: 700;
}

.mx-seg input:focus-visible + label {
  outline: 3px solid var(--green-700);
  outline-offset: 2px;
}

/* the site picker: five options, so the pill is painted on the label */
.mx-seg--sites label {
  min-width: 2.4rem;
  padding: 7px 10px;
  font-size: 14px;
  text-align: center;
}

.mx-seg--sites input:checked + label {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* ---------- the tier toggle ---------- */

.mx-tier {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.mx-tier-lead {
  font-size: 10.5px;
  letter-spacing: normal;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-700);
}

.mx-tier-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease;
}

#mx-tier-standard:checked ~ .mx-tier-thumb {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  .mx-tier-thumb,
  .mx-seg label {
    transition: none;
  }
}

/* ---------- the marks ---------- */

.mx-mark {
  display: block;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.mx-c--yes .mx-mark {
  color: var(--mx-yes);
}

.mx-c--no .mx-mark {
  color: var(--mx-no);
}

.mx-c--na .mx-mark {
  color: var(--mx-dash);
  opacity: 0.65;
}

/* Full opacity, unlike the dash: a clock is a claim about our own roadmap and
   the reader is meant to see it, whereas a dash is the absence of a claim. */
.mx-c--soon .mx-mark {
  color: var(--mx-soon);
}

/* "optional" beside a tick. NOT a citation, but a qualification of the claim
   itself, which is the opposite of padding the column. A module that ships
   switched off is a real feature and a real caveat, and both belong in the
   cell rather than one of them in a footnote nobody reads. */
.mx-opt {
  display: inline-block;
  margin-top: 5px;
  padding: 1px 6px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--slate-700);
  background: #fff;
}

/* ---------- the total row ---------- */

.mx-total-lead {
  display: block;
  font-size: 11px;
  letter-spacing: normal;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: 6px;
}

.mx-sum {
  display: block;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
}

.mx-sum--us {
  font-size: 28px;
  color: var(--green-700);
}

.mx-total-note {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--slate-700);
  text-align: left;
}

.mx-total-note a {
  color: var(--slate-700);
}

/* The line that keeps this page defensible. It is quiet, but it is VISIBLE and
   it is above the fold of the Sources panel it points at: a comparison naming
   identified competitors has to be verifiable, and a citation nobody can find
   is not one. */
.mx-sourced {
  margin: 16px 0 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-700);
}

.mx-sourced a {
  color: var(--green-700);
}

.mx-disclaimer {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-700);
}

/* ---------- the Sources panel ----------

   Quiet on purpose. Toby's brief: the citations are for "the weirdos who are
   interested", and a sales page that shouts its footnotes on every row reads
   as a page expecting to be argued with. Shut by default, one line high, and
   the whole apparatus is behind it. It is styled DOWN, not hidden: the data is
   the thing that makes naming competitors defensible, so it has to be reachable
   in one click, print, and open when linked to.
   ---------------------------------------------------------------------- */

.mx-srcs {
  margin-top: 18px;
  border-top: 1px solid var(--slate-200);
  padding-top: 14px;
}

.mx-srcs > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
  list-style: none;
}

.mx-srcs > summary::-webkit-details-marker {
  display: none;
}

.mx-srcs > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
}

.mx-srcs[open] > summary::before {
  transform: rotate(45deg);
}

.mx-srcs > summary:hover,
.mx-srcs > summary:focus-visible {
  color: var(--ink);
}

.mx-srcs-body {
  padding-top: 14px;
}

.mx-srcs-lead {
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-700);
  max-width: 72ch;
  margin: 0 0 18px;
}

.mx-srcs-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.mx-srcs-v h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.mx-srcs-claim {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--slate-700);
}

.mx-srcs-v ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mx-srcs-v li {
  display: grid;
  gap: 1px;
  font-size: 12px;
  line-height: 1.5;
  /* min-width:0 keeps a long URL from blowing the grid column out sideways at
     390px, which is the whole reason this panel is a grid and not a table. */
  min-width: 0;
}

.mx-srcs-what {
  color: var(--ink);
  font-weight: 600;
}

.mx-srcs-v li a {
  color: var(--green-700);
  overflow-wrap: anywhere;
}


/* Printing a page to hand to somebody is exactly when the citations stop being
   optional, so the panel prints open whatever state it was left in. */
@media print {
  .mx-srcs > summary {
    display: none;
  }

  .mx-srcs-body {
    display: block !important;
  }
}

/* ---------- < 880px: one card per feature ---------- */

/* Every rule below the reset is written `.mx-table X` on purpose. The reset
   itself has to name the element (`.mx-table td`) to flatten the table, which
   makes it a class-plus-type selector; a bare `.mx-c` would lose to it and the
   cards would silently come out as a stack of full-width blocks. Match the
   reset's specificity or the layout does not happen. */

@media (max-width: 879px) {
  .mx-scroll {
    overflow-x: visible;
  }

  .mx-table,
  .mx-table thead,
  .mx-table tbody,
  .mx-table tfoot,
  .mx-table tr,
  .mx-table th,
  .mx-table td {
    display: block;
    width: auto;
  }

  .mx-table .mx-corner {
    display: none;
  }

  /* The head becomes a key: who the four products are, and the tier switch.
     With the prices gone each cell is a logo and, for Trail, its tier switch
     beside it, so this is a row rather than the two-column grid it was. */
  .mx-table thead tr {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
  }

  .mx-table thead th {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    background: #fff;
  }

  .mx-table .mx-vh--primary {
    background: var(--green-50);
    border-color: var(--brand);
  }

  .mx-table .mx-vh-in {
    display: contents;
  }

  .mx-table thead .mx-logobox {
    width: 132px;
    height: 40px;
    justify-content: flex-start;
    flex: none;
  }

  .mx-table .mx-vh--trail .mx-tier {
    justify-items: start;
  }

  .mx-table .mx-grouprow th {
    margin: 26px 0 10px;
    padding: 0 0 8px;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--green-700);
    border-bottom: 2px solid var(--slate-300);
    text-align: left;
  }

  .mx-table .mx-row {
    margin-bottom: 12px;
    padding: 14px 15px;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    background: #fff;
  }

  /* The card's heading. This is the guarantee that no mark below it is ever
     orphaned from the thing it is a mark for: the label is never off-screen
     and never scrolled away, because nothing here scrolls sideways. */
  .mx-table .mx-f {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    text-align: left;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--slate-200);
    margin-bottom: 2px;
  }

  .mx-table .mx-c {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px 10px;
    align-items: center;
    padding: 8px 0;
    text-align: left;
  }

  .mx-table .mx-c + .mx-c {
    border-top: 1px solid var(--slate-100);
  }

  .mx-table .mx-c::before {
    content: attr(data-vendor);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
  }

  .mx-table .mx-c--us {
    margin: 0 -15px;
    padding: 8px 15px;
    background: var(--green-50);
  }

  .mx-table .mx-c--us::before {
    color: var(--green-700);
  }

  .mx-table .mx-mark {
    order: 3;
    justify-content: flex-end;
  }

  .mx-table .mx-opt {
    margin-top: 0;
    order: 2;
  }

  .mx-table tfoot tr {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 3px solid var(--ink);
  }

  .mx-table .mx-f--total {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--slate-700);
    padding: 0;
    border: 0;
    margin: 0;
  }

  .mx-table .mx-total {
    padding: 14px 15px;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    text-align: left;
  }

  .mx-table .mx-total--us {
    background: var(--green-50);
    border-color: var(--brand);
  }

  .mx-controls {
    padding-left: 0;
    padding-right: 0;
  }
}

/* The marks are drawn, not typed. See matrixRender.mjs for why. The stroke
   inherits `color`, so the three states colour themselves from the rules
   above and nothing needs a second declaration. */
.mx-glyph {
  display: block;
  width: 22px;
  height: 22px;
}

.mx-key .mx-glyph,
.mx-c .mx-mark .mx-glyph {
  width: 20px;
  height: 20px;
}

.mx-mark {
  display: flex;
  justify-content: center;
}

.mx-glyph--na {
  opacity: 0.75;
}

/* The ring carries more ink than a tick or a dash at the same stroke weight, so
   it is held a hair back rather than allowed to shout down the column it sits
   in. Colour only — the shape is what does the work. */
.mx-glyph--soon {
  color: var(--mx-soon);
  opacity: 0.95;
}

/* The sprite itself renders nothing; only its symbols are ever drawn. */
.mx-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   THE MODE SWITCH, AND THE "+ MORE" BLOCK (task P138-#52)

   /compare answers two different questions and used to only ask one of them.
   The switch above the table picks: managero against Trail, which is the
   default and the fight most readers arrive with, or managero against the
   whole stack, which is the four-column view and where "one subscription, not
   four" is argued.

   NO NEW CONTROL IDIOM. The switch is .mx-seg, the same segmented radio group
   the site picker and the Trail tier toggle already wear. Only the sizing is
   new.
   ========================================================================== */

.mx-mode {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-bottom: 18px;
}

.mx-seg--mode label {
  padding: 7px 14px;
  font-size: 13.5px;
}

.mx-seg--mode input:checked + label {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* Very narrow phones (320px). Both mode labels on one row measure 338px, which
   is wider than the 280px of content width available here, so the page picked
   up a horizontal scroll. Stack the two options instead of shrinking the text
   to an unreadable size. Above 359px the row already fits and is left alone. */
@media (max-width: 359px) {
  .mx-seg--mode {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .mx-seg--mode label {
    text-align: center;
  }
}

/* TWO COLUMNS NEED DIFFERENT COLUMN WIDTHS. The four-column view splits 27/18.25
   four ways; leaving those widths on a two-column table strands half the row on
   white space. */
@media (min-width: 880px) {
  .mx[data-mode='trail'] .mx-corner {
    width: 44%;
  }

  .mx[data-mode='trail'] .mx-vh {
    width: 28%;
  }
}

/* NEITHER PRODUCT IN THE TWO-COLUMN VIEW PRICES BY HEADCOUNT. managero and
   Trail are both per site and both say so in their own terms, so an employees
   box in that mode is a control that cannot move a number on screen. RotaCloud
   is the only vendor here whose bill turns on headcount, and RotaCloud is only
   on screen in the four-column view. */
.mx[data-mode='trail'] .mx-field--emp {
  display: none;
}

/* THE COLLAPSE ITSELF.

   `hidden` on a <tbody> is a UA rule (`[hidden] { display: none }`) and the
   card layout below 880px sets `.mx-table tbody { display: block }`, which is
   an AUTHOR rule and therefore beats it. Without the line below the block is
   collapsed on desktop and permanently open on a phone, which is exactly the
   sort of split-brain bug this page has shipped before. Written with enough
   specificity to win in both layouts. */
.mx-table tbody[hidden],
.mx-table tr[hidden] {
  display: none;
}

.mx-table .mx-morerow th {
  padding: 24px 2px 10px;
  background: #fff;
  border: 0;
  text-align: left;
}

/* The heading is a BUTTON, and it is headed as what you get. Not "what Trail
   does not do": comparative advertising has to compare products meeting the
   same needs, and rota software is not a need Trail is sold against. The
   crosses in the rows below are unchanged; the framing is the part that has to
   be right. */
.mx-more-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 13px 15px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  background: var(--green-50);
  border: 1px solid var(--brand);
  border-radius: 6px;
  transition: background 0.15s ease;
}

.mx-more-btn:hover {
  background: #e6f1e9;
}

.mx-more-btn:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: 2px;
}

.mx-more-sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--brand);
  color: var(--green-700);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.mx-more-sign::before {
  content: '+';
}

.mx-more-btn[aria-expanded='true'] .mx-more-sign::before {
  /* U+2212 MINUS SIGN, which is in the subsetted face; a hyphen at this size
     reads as a dropped character. */
  content: '\2212';
}

.mx-more-text {
  display: grid;
  gap: 2px;
}

.mx-more-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.mx-more-sub {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-700);
}

@media (prefers-reduced-motion: reduce) {
  .mx-more-btn {
    transition: none;
  }
}

@media (max-width: 879px) {
  .mx-table .mx-morerow th {
    margin: 20px 0 12px;
    padding: 0;
  }
}