/*
 * COMPONENTS — the shared nav and footer used by every page, plus the set of
 * primitives the four pages are assembled from.
 *
 * Reads tokens.css only. Two rules hold throughout and check.sh enforces
 * the first:
 *
 *   1. No raw hex and no raw px font sizes. Add a token instead.
 *   2. No resting shadows. Depth on this design system is surface colour
 *      plus a 10%-white hairline; the only shadows that exist are
 *      accent-tinted and hover-only. Adding grey drop shadows breaks the
 *      family resemblance faster than a wrong hex would.
 *
 * Accent colour flows through one local custom property, --c, set inline per
 * card or module section. Every accent-dependent property below reads
 * var(--c, var(--ms-accent)), so a component with no --c renders in the
 * primary teal. There are no per-module variant classes anywhere.
 *
 * Breakpoints, literal: 620px, 720px, 760px, 960px.
 */

/* ==========================================================================
   Eyebrow / section tag
   ========================================================================== */

.ms-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2xs);
  margin-bottom: var(--ms-space-xl);
  color: var(--ms-text-dim);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono-lg);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-mono-xl);
  text-transform: uppercase;
}

.ms-tag::before {
  content: "";
  width: var(--ms-tag-rule);
  height: 1px;
  background: var(--ms-text);
}

/* Centred heads get the rule on both sides; left-aligned ones lead with it. */
.ms-head--center .ms-tag::after {
  content: "";
  width: var(--ms-tag-rule);
  height: 1px;
  background: var(--ms-text);
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.ms-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: var(--ms-bg-nav);
  backdrop-filter: var(--ms-blur-nav);
  -webkit-backdrop-filter: var(--ms-blur-nav);
  transition:
    border-color var(--ms-dur-base),
    background var(--ms-dur-base);
}

/* The nav earns its border on scroll: seamless at the top of the page, a
   hairline once there is content behind it. main.js toggles the class. */
.ms-nav.is-scrolled {
  border-bottom-color: var(--ms-line);
}

.ms-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--ms-nav-h);
}

.ms-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-sm);
  color: var(--ms-text);
  font-size: var(--ms-text-h4);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-title);
}

.ms-brand__mark {
  height: var(--ms-logo-h);
  width: auto;
}

.ms-nav__links {
  display: flex;
  align-items: center;
  gap: var(--ms-space-7xl);
  list-style: none;
}

.ms-nav__link {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-nav);
  font-weight: var(--ms-weight-medium);
  transition: color var(--ms-dur-fast);
}

.ms-nav__link:hover,
.ms-nav__link[aria-current="page"] {
  color: var(--ms-text);
}

/*
 * The nav's CTA is a .ms-btn, and .ms-btn must win. Scoping the link colour
 * to .ms-nav__link rather than to `.ms-nav a` is what keeps it winning — the
 * looser selector painted the solid button's label muted grey against its
 * near-white fill, which measured 2.39:1.
 */

/* ---------- Mobile nav --------------------------------------------------- *
 * Desktop nav starts at 720px, not 620px. At 620px this nav's content
 * measured 631px against 605px of space and overflowed — it carries a
 * "Request access" button that monksuite's nav does not. 720px is one of
 * MON-2's own breakpoints.
 */

.ms-nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ms-nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--ms-radius-xs);
  background: var(--ms-text);
  transition: transform var(--ms-dur-snap), opacity var(--ms-dur-snap);
}

@media (max-width: 719px) {
  /*
   * NO-JAVASCRIPT STATE FIRST.
   *
   * The toggle ships `hidden` and is only revealed by main.js, so with
   * scripting off there is no button to press. The menu therefore has to be a
   * plain, visible, stacked list — which means it must wrap onto its own row
   * rather than sit in the brand row, where its content is far wider than a
   * phone and blew the whole page out horizontally. `overflow-x: hidden` on
   * body hid the scrollbar and clipped the right edge of every page, so this
   * did not show up as overflow: it showed up as missing words.
   */
  .ms-nav__menu {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ms-space-3xl);
    padding-bottom: var(--ms-space-3xl);
  }

  /* Then, only once the toggle actually exists, collapse it behind that. */
  .ms-nav__toggle:not([hidden]) {
    display: inline-flex;
  }

  .ms-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .ms-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .ms-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .ms-nav__toggle:not([hidden]) ~ .ms-nav__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: var(--ms-space-3xl) var(--ms-pad) var(--ms-space-5xl);
    border-bottom: 1px solid var(--ms-line);
    background: var(--ms-bg-nav-mobile);
    backdrop-filter: var(--ms-blur-nav);
    -webkit-backdrop-filter: var(--ms-blur-nav);
  }

  .ms-nav__toggle:not([hidden])[aria-expanded="false"] ~ .ms-nav__menu {
    display: none;
  }

  .ms-nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ms-space-3xl);
  }

  .ms-nav__link {
    font-size: var(--ms-text-btn);
  }
}

@media (min-width: 720px) {
  /* Belt and braces: the hamburger must never render or stay tab-reachable
     on desktop, even if script unhides it. */
  .ms-nav__toggle {
    display: none !important;
  }

  .ms-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--ms-space-7xl);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-xs);
  border: 1px solid transparent;
  border-radius: var(--ms-radius-full);
  padding: var(--ms-space-md) var(--ms-space-3xl);
  font-family: inherit;
  font-size: var(--ms-text-btn-sm);
  font-weight: var(--ms-weight-semibold);
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--ms-dur-fast),
    border-color var(--ms-dur-fast),
    filter var(--ms-dur-fast);
}

/* The primary action on a page is ink-on-dark. */
.ms-btn--solid {
  background: var(--ms-text);
  color: var(--ms-on-light);
}

.ms-btn--solid:hover {
  transform: translateY(var(--ms-lift-sm));
  color: var(--ms-on-light);
}

/* Ghost buttons never fill on hover — they brighten their border to ink.
   That is this design system's universal "interactive but secondary". */
.ms-btn--ghost {
  border-color: var(--ms-line-strong);
  background: transparent;
  color: var(--ms-text);
}

.ms-btn--ghost:hover {
  border-color: var(--ms-text);
  color: var(--ms-text);
}

/* The primary action inside a card is accent-filled. */
.ms-btn--accent {
  background: var(--c, var(--ms-accent));
  color: var(--ms-on-accent);
}

.ms-btn--accent:hover {
  filter: brightness(1.08);
  color: var(--ms-on-accent);
}

.ms-btn--lg {
  padding: var(--ms-space-lg) var(--ms-space-4xl);
  font-size: var(--ms-text-btn);
}

.ms-btn--block {
  width: 100%;
}

/* ---------- Accent text link -------------------------------------------- */

.ms-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2xs);
  color: var(--c, var(--ms-accent));
  font-size: var(--ms-text-ui-sm);
  font-weight: var(--ms-weight-semibold);
  transition: gap var(--ms-dur-fast);
}

.ms-link:hover {
  gap: var(--ms-space-sm);
}

/* Inline link inside prose — the one place an underline is correct, because
   there is nothing else to mark it out mid-sentence. */
.ms-link-inline {
  color: var(--ms-text);
  text-decoration: underline;
  text-decoration-color: var(--ms-accent);
  text-underline-offset: 0.2em;
}

.ms-link-inline:hover {
  color: var(--ms-accent);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.ms-hero {
  position: relative;
  overflow: hidden;
  padding: var(--ms-hero-pt) 0 var(--ms-hero-pb);
}

@media (max-width: 620px) {
  .ms-hero {
    padding: var(--ms-hero-pt-sm) 0 var(--ms-hero-pb-sm);
  }
}

/* ---------- Dot field --------------------------------------------------- *
 * Three stacked layers, each masked to a different region, so the texture is
 * dense in two off-centre blooms and fades through the middle. The asymmetry
 * is the point — a uniform grid reads as a texture, not as this one.
 */

.ms-hero__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ms-hero__dots span {
  position: absolute;
  inset: 0;
}

.ms-dot-base {
  background-image: radial-gradient(
    var(--ms-dot-base) var(--ms-dot-size),
    transparent var(--ms-dot-size)
  );
  background-size: var(--ms-dot-grid) var(--ms-dot-grid);
  -webkit-mask-image: linear-gradient(#000 0%, #00000059 38%, transparent 72%);
  mask-image: linear-gradient(#000 0%, #00000059 38%, transparent 72%);
}

.ms-dot-tl {
  background-image: radial-gradient(
    var(--ms-dot-bright) var(--ms-dot-size-lg),
    transparent var(--ms-dot-size-lg)
  );
  background-size: var(--ms-dot-grid) var(--ms-dot-grid);
  -webkit-mask-image: radial-gradient(440px at 15% 10%, #000, transparent 70%);
  mask-image: radial-gradient(440px at 15% 10%, #000, transparent 70%);
}

.ms-dot-br {
  background-image: radial-gradient(
    var(--ms-dot-mid) var(--ms-dot-size-lg),
    transparent var(--ms-dot-size-lg)
  );
  background-size: var(--ms-dot-grid) var(--ms-dot-grid);
  -webkit-mask-image: radial-gradient(480px at 87% 66%, #000, transparent 70%);
  mask-image: radial-gradient(480px at 87% 66%, #000, transparent 70%);
}

/* ---------- Hero content ------------------------------------------------ */

.ms-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ms-hero__title {
  max-width: var(--ms-measure-headline-wide);
  margin-bottom: var(--ms-space-4xl);
  font-size: var(--ms-text-display-1);
  font-weight: var(--ms-weight-black);
  line-height: var(--ms-leading-display);
  letter-spacing: var(--ms-tracking-display);
}

/*
 * Underlined words in the headline are drawn with a background gradient, not
 * text-decoration: a flat 4px bar at 86% of the line box, which is thicker
 * and more controllable than any underline property. Each of the three nouns
 * takes the accent of the module that owns it.
 */
.ms-u {
  background-image: linear-gradient(
    var(--c, var(--ms-accent)),
    var(--c, var(--ms-accent))
  );
  background-repeat: no-repeat;
  background-size: 100% var(--ms-underline-h);
  background-position: 0 var(--ms-underline-pos);
}

.ms-hero__sub {
  max-width: var(--ms-measure-sub);
  margin-bottom: var(--ms-space-7xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-lead-hero);
  line-height: var(--ms-leading-sub);
}

/* ---------- Page header (the three subpages) ---------------------------- */

.ms-pagehead {
  padding: var(--ms-space-11xl) 0 var(--ms-space-9xl);
}

.ms-pagehead__title {
  max-width: var(--ms-measure-sub);
  margin-bottom: var(--ms-space-4xl);
  font-size: var(--ms-text-display-2);
  font-weight: var(--ms-weight-black);
  line-height: var(--ms-leading-hero);
  letter-spacing: var(--ms-tracking-display);
}

.ms-pagehead--center {
  text-align: center;
}

.ms-pagehead--center .ms-pagehead__title,
.ms-pagehead--center .ms-pagehead__sub {
  margin-right: auto;
  margin-left: auto;
}

.ms-pagehead__sub {
  max-width: var(--ms-measure-prose);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-lead);
  line-height: var(--ms-leading-lead);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-3xl);
  background: var(--ms-surface);
  padding: var(--ms-space-4xl);
}

/* The 3px accent bar across the top edge is the card's identity marker. */
.ms-card--marked::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--ms-accent-bar);
  background: var(--c, var(--ms-accent));
}

.ms-card--hover {
  transition:
    transform var(--ms-dur-base),
    border-color var(--ms-dur-base),
    box-shadow var(--ms-dur-base);
}

.ms-card--hover:hover {
  transform: translateY(var(--ms-lift-lg));
  border-color: var(--c, var(--ms-accent));
  box-shadow: var(--ms-shadow-card-hover);
}

/* A panel is a card that is a region rather than an item: no accent bar, no
   hover, used for the CTA band, the comparison block and the form. */
.ms-panel {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-3xl);
  background: var(--ms-surface);
  padding: var(--ms-space-9xl);
}

@media (max-width: 620px) {
  .ms-panel {
    padding: var(--ms-space-4xl);
  }
}

.ms-panel--sunken {
  background: var(--ms-surface-sunken);
}

/* ---------- Icon tile --------------------------------------------------- */

.ms-tile {
  display: grid;
  place-items: center;
  width: var(--ms-tile);
  height: var(--ms-tile);
  margin-bottom: var(--ms-space-3xl);
  padding: var(--ms-space-md);
  border: 1px solid
    color-mix(in srgb, var(--c, var(--ms-accent)) var(--ms-mix-tile-border), transparent);
  border-radius: var(--ms-radius-2xl);
  background: color-mix(
    in srgb,
    var(--c, var(--ms-accent)) var(--ms-mix-tile-fill),
    transparent
  );
  color: var(--c, var(--ms-accent));
}

.ms-tile svg {
  width: 100%;
  height: 100%;
}

/* ---------- Module card (Home, three up) -------------------------------- */

.ms-modcard__title {
  margin-bottom: var(--ms-space-3xs);
  font-size: var(--ms-text-h3);
}

/* The one-line role. Mono uppercase in the module's own accent. */
.ms-modcard__role {
  margin-bottom: var(--ms-space-lg);
  color: var(--c, var(--ms-accent));
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono-sm);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-mono-lg);
  text-transform: uppercase;
}

/* flex: 1 so every card in the row bottoms out level regardless of copy. */
.ms-modcard__body {
  flex: 1;
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

.ms-modcard__foot {
  margin-top: var(--ms-space-3xl);
  padding-top: var(--ms-space-2xl);
  border-top: 1px solid var(--ms-line-soft);
}

/* ==========================================================================
   Question / example cards — accent left rule
   ========================================================================== */

.ms-quote {
  border: 1px solid var(--ms-line);
  border-left: var(--ms-quote-bar) solid var(--c, var(--ms-accent));
  border-radius: var(--ms-radius-md);
  background: var(--ms-surface);
  padding: var(--ms-space-xl) var(--ms-space-3xl);
  color: var(--ms-text);
  font-size: var(--ms-text-body-lg);
  line-height: var(--ms-leading-lead);
}

/* The AI examples are things someone types, so they are set in mono. */
.ms-quote--mono {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-body);
}

/* ==========================================================================
   Labelled point — bold label, muted body. Used all over the argument
   sections and the module capability lists.
   ========================================================================== */

.ms-points {
  display: grid;
  gap: var(--ms-space-3xl);
  list-style: none;
}

.ms-point__label {
  display: block;
  margin-bottom: var(--ms-space-3xs);
  color: var(--ms-text);
  font-size: var(--ms-text-body-lg);
  font-weight: var(--ms-weight-bold);
}

.ms-point__body {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

/* Dash-marked variant for the capability lists. */
.ms-points--dashed .ms-point {
  position: relative;
  padding-left: var(--ms-space-3xl);
}

.ms-points--dashed .ms-point::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: var(--ms-space-md);
  height: 1px;
  background: var(--c, var(--ms-accent));
}

.ms-points--dashed .ms-point__label {
  display: inline;
  margin-right: var(--ms-space-3xs);
}

.ms-points--dashed .ms-point__body {
  display: inline;
}

/* Tick-marked variant for the pricing feature lists. */
.ms-points--ticked {
  gap: var(--ms-space-md);
}

.ms-points--ticked .ms-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ms-space-sm);
  align-items: start;
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

.ms-points--ticked .ms-tick {
  margin-top: 0.3em;
  width: var(--ms-space-md);
  height: var(--ms-space-md);
  flex: none;
  color: var(--c, var(--ms-accent));
}

/* ==========================================================================
   Mono meta label — "WHO IT'S FOR", tier names, footer headings
   ========================================================================== */

.ms-meta {
  display: block;
  margin-bottom: var(--ms-space-md);
  color: var(--ms-text-dim);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono-sm);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-mono-lg);
  text-transform: uppercase;
}

.ms-meta--accent {
  color: var(--c, var(--ms-accent));
}

/* Standalone mono line — "Slack today. Microsoft Teams next." */
.ms-mono-line {
  color: var(--ms-text-dim);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono);
  letter-spacing: var(--ms-tracking-mono-xl);
  text-transform: uppercase;
}

/* ==========================================================================
   Module section (Modules page) — the vertical-bar heading variant
   ========================================================================== */

.ms-module__head {
  display: flex;
  align-items: center;
  gap: var(--ms-space-lg);
  margin-bottom: var(--ms-space-2xs);
}

.ms-module__head::before {
  content: "";
  width: var(--ms-marker-w);
  height: var(--ms-marker-h);
  flex: none;
  border-radius: var(--ms-radius-full);
  background: var(--c, var(--ms-accent));
}

.ms-module__title {
  font-size: var(--ms-text-h2-page);
  font-weight: var(--ms-weight-black);
}

.ms-module__role {
  margin-bottom: var(--ms-space-xl);
  color: var(--c, var(--ms-accent));
  font-size: var(--ms-text-h4);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-title);
}

.ms-module__intro {
  max-width: var(--ms-measure-prose);
  margin-bottom: var(--ms-space-9xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-lg);
  line-height: var(--ms-leading-body);
}

/* The two closing panels — who it's for / what it unlocks elsewhere. */
.ms-module__notes {
  margin-top: var(--ms-space-9xl);
}

.ms-note {
  border: 1px solid var(--ms-line-soft);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-surface);
  padding: var(--ms-space-3xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

/* ==========================================================================
   Pricing
   ========================================================================== */

/*
 * Card rows stay equal-height (the grid's default stretch), so a row of cards
 * reads as one object rather than a ragged set. Do not add align-items: start
 * here — the module cards rely on stretch to bottom out their footer rules
 * level, and the tier cards rely on it to line up their feature lists.
 */
.ms-tier {
  height: 100%;
}

/* Run carries the most-popular badge and the accent border at rest — it is
   the product, and Start and Scale exist to make it look correct. */
.ms-tier--featured {
  border-color: color-mix(
    in srgb,
    var(--c, var(--ms-accent)) 50%,
    transparent
  );
}

.ms-tier__badge {
  position: absolute;
  top: var(--ms-accent-bar);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 var(--ms-radius-md) var(--ms-radius-md);
  background: var(--c, var(--ms-accent));
  padding: var(--ms-space-3xs) var(--ms-space-md);
  color: var(--ms-on-accent);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono-2xs);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-mono-lg);
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-tier--featured .ms-tier__name {
  margin-top: var(--ms-space-xl);
}

.ms-tier__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ms-space-2xs);
  margin-bottom: var(--ms-space-3xs);
}

/* Metric sizing is applied to a real price, not to the placeholder chip: an
   unbreakable chip at 44px forced a 476px minimum layout width and put a
   horizontal scrollbar on every phone. The chip stays at its own size until
   a real value replaces it. */
.ms-tier__amount {
  font-size: var(--ms-text-metric-sm);
  font-weight: var(--ms-weight-black);
  line-height: var(--ms-leading-none);
  letter-spacing: var(--ms-tracking-heading);
}

.ms-tier__per {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
}

.ms-tier__unit {
  margin-bottom: var(--ms-space-xl);
}

.ms-tier__body {
  margin-bottom: var(--ms-space-3xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

.ms-tier__cta {
  margin-bottom: var(--ms-space-3xl);
}

/* Top-aligned, not bottomed out: the lists differ in length, and aligning
   them to the top lets the eye scan across the row. Scale simply runs longer,
   and Start carries the slack at the bottom. */
.ms-tier__features {
  padding-top: var(--ms-space-2xl);
  border-top: 1px solid var(--ms-line-soft);
}

/* ---------- Band selector and billing toggle ---------------------------- *
 * Built, labelled and keyboard-operable, but hidden: with every price still
 * a placeholder there is nothing to switch between, and a control that
 * changes nothing is worse than no control. main.js reveals them the moment
 * the tier cards carry real data-price-* values. No other change needed.
 */

.ms-pricing-controls[hidden] {
  display: none;
}

.ms-pricing-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ms-space-xl);
  margin-bottom: var(--ms-space-9xl);
}

.ms-segment {
  display: inline-flex;
  gap: var(--ms-space-3xs);
  border: 1px solid var(--ms-line-chip);
  border-radius: var(--ms-radius-full);
  padding: var(--ms-space-3xs);
}

.ms-segment__option {
  border: 0;
  border-radius: var(--ms-radius-full);
  background: transparent;
  padding: var(--ms-space-xs) var(--ms-space-xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-ui-sm);
  font-weight: var(--ms-weight-semibold);
  cursor: pointer;
  transition: background var(--ms-dur-fast), color var(--ms-dur-fast);
}

.ms-segment__option[aria-pressed="true"] {
  background: var(--ms-text);
  color: var(--ms-on-light);
}

/* ---------- Enterprise strip -------------------------------------------- */

.ms-enterprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3xl);
  margin-top: var(--ms-space-2xl);
}

.ms-enterprise__body {
  max-width: var(--ms-measure-prose);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

/* ---------- Comparison block -------------------------------------------- */

.ms-compare {
  display: grid;
  gap: var(--ms-space-2xl);
  margin-top: var(--ms-space-9xl);
}

@media (min-width: 620px) {
  .ms-compare {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ms-compare__box {
  border: 1px solid var(--ms-line-soft);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-surface-sunken);
  padding: var(--ms-space-3xl);
}

.ms-compare__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ms-space-2xs);
  margin-bottom: var(--ms-space-xs);
  color: var(--c, var(--ms-accent));
  font-size: var(--ms-text-metric-sm);
  font-weight: var(--ms-weight-black);
  line-height: var(--ms-leading-none);
  letter-spacing: var(--ms-tracking-heading);
}

.ms-compare__note {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
}

.ms-footnote {
  max-width: var(--ms-measure-prose);
  margin-top: var(--ms-space-3xl);
  color: var(--ms-text-dim);
  font-size: var(--ms-text-ui-xs);
  line-height: var(--ms-leading-body);
}

/* ==========================================================================
   FAQ — native <details>, so it works with JavaScript off
   ========================================================================== */

.ms-faq {
  display: grid;
  gap: var(--ms-space-md);
  max-width: var(--ms-maxw-legal);
  margin: 0 auto;
}

.ms-faq__item {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-surface);
}

.ms-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-xl);
  padding: var(--ms-space-xl) var(--ms-space-3xl);
  color: var(--ms-text);
  font-size: var(--ms-text-body-lg);
  font-weight: var(--ms-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.ms-faq__q::-webkit-details-marker {
  display: none;
}

.ms-faq__q::after {
  content: "+";
  flex: none;
  color: var(--ms-accent);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-lead);
}

.ms-faq__item[open] .ms-faq__q::after {
  content: "−";
}

.ms-faq__a {
  padding: 0 var(--ms-space-3xl) var(--ms-space-3xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

.ms-faq__a > * + * {
  margin-top: var(--ms-space-md);
}

/* ==========================================================================
   Numbered steps — "What happens next"
   ========================================================================== */

.ms-steps {
  display: grid;
  gap: var(--ms-space-3xl);
  list-style: none;
  counter-reset: ms-step;
}

.ms-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ms-space-lg);
  align-items: start;
}

.ms-step::before {
  counter-increment: ms-step;
  content: counter(ms-step);
  display: grid;
  place-items: center;
  width: var(--ms-space-5xl);
  height: var(--ms-space-5xl);
  border: 1px solid
    color-mix(in srgb, var(--c, var(--ms-accent)) var(--ms-mix-tile-border), transparent);
  border-radius: var(--ms-radius-full);
  background: color-mix(
    in srgb,
    var(--c, var(--ms-accent)) var(--ms-mix-tile-fill),
    transparent
  );
  color: var(--c, var(--ms-accent));
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono);
  font-weight: var(--ms-weight-bold);
}

/* ==========================================================================
   Form
   ========================================================================== */

.ms-form {
  display: grid;
  gap: var(--ms-space-3xl);
}

/* `display: grid` above silently beats the browser's own `[hidden]` rule, which
   is only a bare `display: none` on an attribute selector. So main.js setting
   form.hidden = true did nothing at all, and a visitor who submitted got the
   "Got it." panel with the whole filled-in form still sitting underneath it.
   Harmless while the form had no endpoint and never reached that branch;
   the first thing anyone would have seen once it did.

   Any class that sets `display` has to restate this. */
.ms-form[hidden] {
  display: none;
}

/* Honeypot (MON-9). Moved off-screen rather than `display: none`, because a
   bot that skips hidden inputs still finds this one — which is the whole
   point. Together with aria-hidden and tabindex="-1" in the markup, it is kept
   away from sight, screen readers and the tab order by three separate
   mechanisms, so no person ever meets it. */
.ms-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The success state, for visitors with JavaScript switched off.

   The endpoint 303s to /contact.html?sent=1#form-success. With scripting on,
   main.js renders the success state and these two rules never match. With
   scripting off there is nothing to run — so the fragment makes #form-success
   the :target, this reveals it, and :has() hides the form it replaces.

   That is what makes "works with JavaScript disabled" true rather than
   aspirational: without it, a no-JS visitor submits successfully and is
   returned to a page that looks like it ignored them. */
#form-success:target {
  display: block;
}

.ms-panel:has(#form-success:target) .ms-form {
  display: none;
}

.ms-field {
  display: grid;
  gap: var(--ms-space-xs);
}

.ms-field__label {
  color: var(--ms-text);
  font-size: var(--ms-text-body-sm);
  font-weight: var(--ms-weight-semibold);
}

/* "REQUIRED" rider on the label. A mono tag, not a bare asterisk — an
   asterisk needs a legend somewhere else on the page to mean anything. */
.ms-field__req {
  margin-left: var(--ms-space-2xs);
  color: var(--ms-text-dim);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono-2xs);
  font-weight: var(--ms-weight-regular);
  letter-spacing: var(--ms-tracking-mono-lg);
  text-transform: uppercase;
}

/* Help text is a real element referenced by aria-describedby, never a
   placeholder attribute — placeholder text vanishes the moment you type. */
.ms-field__hint {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-ui-xs);
  line-height: var(--ms-leading-body);
}

.ms-field__control {
  width: 100%;
  border: 1px solid var(--ms-field-border);
  border-radius: var(--ms-field-radius);
  background: var(--ms-field-bg);
  padding: var(--ms-field-pad-y) var(--ms-field-pad-x);
  color: var(--ms-text);
  font-size: var(--ms-field-text);
  transition: border-color var(--ms-dur-fast);
}

.ms-field__control:hover {
  border-color: var(--ms-line-strong);
}

.ms-field__control::placeholder {
  color: var(--ms-text-dim);
}

textarea.ms-field__control {
  min-height: 7.5em;
  resize: vertical;
}

select.ms-field__control {
  appearance: none;
  padding-right: var(--ms-space-9xl);
  background-image: linear-gradient(
      45deg,
      transparent 50%,
      var(--ms-text-muted) 50%
    ),
    linear-gradient(135deg, var(--ms-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.ms-form__consent {
  color: var(--ms-text-muted);
  font-size: var(--ms-text-ui-xs);
  line-height: var(--ms-leading-body);
}

/* ---------- Notice ------------------------------------------------------ *
 * A visible, non-dismissable warning. Used where the form's endpoint would
 * otherwise be silently broken: the form looks complete, so it must say that
 * it is not wired rather than swallow a submission.
 */

.ms-notice {
  border: 1px solid var(--ms-todo-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-todo-fill);
  padding: var(--ms-space-xl) var(--ms-space-3xl);
  color: var(--ms-text);
  font-size: var(--ms-text-body-sm);
  line-height: var(--ms-leading-body);
}

/* ==========================================================================
   Unresolved-value marker
   ========================================================================== */

/*
 * One of the 14 values the founder still owes. Rendered so that nobody could
 * mistake it for finished copy: mono, coral, dashed border. Never replace one
 * of these with a guess — the register is on MON-8 and check.sh counts them.
 */
.ms-todo {
  display: inline-block;
  border: 1px dashed var(--ms-todo-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-todo-fill);
  padding: 0.1em var(--ms-space-2xs);
  color: var(--ms-todo);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-mono);
  /* Must be breakable. An unbreakable placeholder at metric size is what put
     a horizontal scrollbar on the pricing page at every phone width. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================================
   CTA band — shared by /modules and /pricing
   ========================================================================== */

.ms-cta {
  text-align: center;
}

.ms-cta__title {
  margin-bottom: var(--ms-space-xl);
  font-size: var(--ms-text-h2);
}

.ms-cta__body {
  max-width: var(--ms-measure-sub);
  margin: 0 auto var(--ms-space-4xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-lg);
  line-height: var(--ms-leading-body);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ms-footer {
  margin-top: var(--ms-space-xl);
  background: var(--ms-surface-footer);
  padding: var(--ms-footer-pt) 0 var(--ms-footer-pb);
}

.ms-footer__grid {
  display: grid;
  gap: var(--ms-space-9xl);
  grid-template-columns: 1fr;
  margin-bottom: var(--ms-space-10xl);
}

@media (min-width: 760px) {
  .ms-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.ms-footer__brand .ms-brand__mark {
  height: var(--ms-logo-h-footer);
}

.ms-footer__blurb {
  max-width: var(--ms-measure-blurb);
  margin-top: var(--ms-space-xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-xs);
  line-height: var(--ms-leading-body);
}

/*
 * Footer column headings. MON-2 specifies --ms-text-dimmer here, and that is
 * the one value from the extraction this site does not use: on the footer
 * band it measures 3.57:1, under AA even at this size. Stepped up to
 * --ms-text-dim, which clears it.
 */
.ms-footer__heading {
  margin-bottom: var(--ms-space-2xl);
  color: var(--ms-text-dim);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono-sm);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-mono-lg);
  text-transform: uppercase;
}

.ms-footer__list {
  list-style: none;
}

/* Deliberate hierarchy inversion: the links are brighter than the headings
   that label them. Navigation matters more than its categories. */
.ms-footer__list a {
  display: block;
  margin-bottom: var(--ms-space-md);
  color: var(--ms-text-soft);
  font-size: var(--ms-text-body-xs);
  transition: color var(--ms-dur-fast);
}

.ms-footer__list a:hover {
  color: var(--ms-text);
}

.ms-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-xl);
  padding-top: var(--ms-space-5xl);
  border-top: 1px solid var(--ms-line);
  color: var(--ms-text-dim);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-mono);
  letter-spacing: var(--ms-tracking-mono-xs);
}

/* ==========================================================================
   404
   ========================================================================== */

.ms-notfound {
  padding: var(--ms-space-13xl) 0;
  text-align: center;
}

.ms-notfound__links {
  justify-content: center;
  margin-top: var(--ms-space-4xl);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-lg);
}

/* ==========================================================================
   Legal prose — privacy policy and anything like it

   Uses the --ms-maxw-legal and --ms-text-h2-legal tokens MON-2 extracted for
   this page type. Long-form running text, so the measure is narrower than a
   content section and the leading is the body value, not the lead value.
   ========================================================================== */

/* Left-aligned, not centred: the page heading above it sits at the container's
   left edge, and a centred measure under a left-aligned h1 reads as a mistake. */
.ms-legal {
  max-width: var(--ms-maxw-legal);
  color: var(--ms-text-muted);
  font-size: var(--ms-text-body-lg);
  line-height: var(--ms-leading-body);
}

.ms-legal p {
  margin-bottom: var(--ms-space-4xl);
}

/* --ms-text-dim, not --ms-text-dimmer: the dimmer value is the one token from
   MON-2's extraction this site does not use, because it lands at 3.57:1 and
   fails AA. A date nobody can read is not a subtle date. */
.ms-legal__meta {
  color: var(--ms-text-dim);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-ui-xs);
}

/* First heading sits under the meta line, so it does not need the full
   separation the later ones get. */
.ms-legal__h2 {
  margin-top: var(--ms-space-9xl);
  margin-bottom: var(--ms-space-4xl);
  color: var(--ms-text);
  font-size: var(--ms-text-h2-legal);
  font-weight: var(--ms-weight-bold);
  line-height: var(--ms-leading-tight);
  letter-spacing: var(--ms-tracking-heading);
}

.ms-legal__meta + .ms-legal__h2 {
  margin-top: var(--ms-space-6xl);
}

.ms-legal__list {
  margin-bottom: var(--ms-space-4xl);
  padding-left: var(--ms-space-4xl);
  list-style: disc;
}

.ms-legal__list li {
  margin-bottom: var(--ms-space-2xl);
}

.ms-legal__list li::marker {
  color: var(--ms-accent);
}

.ms-legal strong {
  color: var(--ms-text);
  font-weight: var(--ms-weight-semibold);
}

/* An id target on a heading must clear the sticky nav when linked to. */
.ms-legal__h2[id] {
  scroll-margin-top: var(--ms-nav-h);
}