/* The restrained comparison (2026-10-22). Loaded only by index-clean.html. */
/* 1. two-tone headlines: only the hero keeps its orange */
section:not(.hero) h2 em, .mod h3 em { color: inherit; }
/* 2. monospace only for numbers and prices: captions and labels in the normal font */
.shot figcaption, .docs-cap, .cost-note, .fn, .together .fn, .data .fn { font-family: var(--sans); font-size: 13.5px; }
.eyebrow, .onsale, .tag, .steps b { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.cmp .t, .cost-t { font-family: var(--sans); }
/* 3. one accent: prices white, rivals grey, Mach orange, refund line as plain text */
.cmp .row.ours b, .tile b, .vs td.ours, .bar-row.ours b, .tiers .amt { color: var(--ink); }
.tile.best { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bar-row .bar { background: #5b6372; }
.bar-row.ours .bar { background: var(--accent); }
.terms { font: 13.5px/1.5 var(--sans); letter-spacing: 0; color: var(--muted); }
.grid4 li::before { color: var(--accent); }
.upg, .signup-done { border-left-color: var(--accent); }
.signup-done b { color: var(--accent); }
.principles h2 { color: var(--ink); }
.cmp .row.ours b { font-family: var(--mono); }
.cmp .row.ours small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cmp .terms-hero { color: var(--ink); font-weight: 600; }
.shot-hero .theme-switch { justify-content: flex-end; margin: 0 0 12px; }

/* One starred pricing note above the footer (2026-10-23) */
.fine { font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--dim); margin: 0; padding: 0 var(--gutter) 28px; }
.fine b { color: var(--accent); }
a.star { color: var(--accent); text-decoration: none; margin-left: 1px; }
.fine { padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.fine { max-width: none; }

/* Phone (2026-10-24): text-and-screenshot rows stack, words first, screenshot full width below.
   wide.css:141 re-set the two columns after its own phone rule, so this restates the stack last. */
@media (max-width: 760px) {
  .feat, .feat.flip { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 56px; }
  .feat.flip .feat-copy { order: 0; }
  .feat .feat-copy { padding-top: 0; }
  .feat .feat-copy h3 { font-size: 22px; }
  .feature-star .feat-copy { display: block; }
}

/* Round-9 mark + white wordmark (app, 2026-10-24). The app's lockup is 17px words with a 27px
   picture whose visible diamond is 19 x 17, 5.5px from each word; scaled here to 28px words
   (x1.647) and 20px on phones (x1.176). Module marks copy the app: 44px picture, diamond 30 x 26. */
.mw-brand { color: var(--ink); }
.mw-brand .mach-mark { width: 31.3px; height: 28px; margin: 0 9px; }
.mw-brand .mach-mark img { width: 44.5px; height: 44.5px; left: calc((31.3px - 44.5px) / 2); top: calc((28px - 44.5px) / 2); }
@media (max-width: 560px) {
  .mw-brand .mach-mark { width: 22.35px; height: 20px; margin: 0 6.5px; }
  .mw-brand .mach-mark img { width: 31.75px; height: 31.75px; left: calc((22.35px - 31.75px) / 2); top: calc((20px - 31.75px) / 2); }
}
.whats-in .mod-h .mach-mark { width: 30px; height: 26px; }
.whats-in .mod-h .mach-mark img { width: 44px; height: 44px; left: calc((30px - 44px) / 2); top: calc((26px - 44px) / 2); }

/* The bottom form's note is empty until there's an error to show (2026-10-24) */
.closer .sg-note:empty { display: none; }

/* The big Mach diamond closes the page (owner, 2026-10-24): right of the signup on desktop,
   above the heading on a phone. Same round-9 art as the header, rendered at 360px. */
.closer { position: relative; }
.closer .big-mark { position: absolute; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); top: 50%;
  transform: translateY(-50%); width: 220px; height: 220px; pointer-events: none; }
@media (max-width: 760px) {
  .closer .big-mark { position: static; transform: none; display: block; width: 110px; height: 110px; margin: -8px 0 4px -12px; }
}

/* Header lockup smaller (owner, 2026-10-24): just a step above the 13px links. App proportions
   (17px words, 27px picture, diamond 19 x 17, 5.5px gaps) scaled to 18px, and 16px on phones. */
.mw-brand svg { height: 18px; }
.mw-brand .mach-mark { width: 20.1px; height: 18px; margin: 0 5.8px; }
.mw-brand .mach-mark img { width: 28.6px; height: 28.6px; left: calc((20.1px - 28.6px) / 2); top: calc((18px - 28.6px) / 2); }
@media (max-width: 560px) {
  .mw-brand svg { height: 16px; }
  .mw-brand .mach-mark { width: 17.9px; height: 16px; margin: 0 5.2px; }
  .mw-brand .mach-mark img { width: 25.4px; height: 25.4px; left: calc((17.9px - 25.4px) / 2); top: calc((16px - 25.4px) / 2); }
}

/* Utility pages (/opensource, /updates, /download, /privacy): one readable column (2026-10-24) */
.doc h1 { font-size: 40px; line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.doc h2 { font-size: 19px; margin: 34px 0 8px; color: var(--ink); }
.doc p, .doc li { max-width: 68ch; font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.doc .lede { color: var(--soft); font-size: 17px; margin-bottom: 20px; }
.doc a:not(.btn) { color: var(--accent); }
.doc .btn { display: inline-block; text-decoration: none; margin-top: 4px; }
.doc .steps { margin: 0; padding-left: 22px; display: grid; grid-template-columns: 1fr; list-style: decimal; gap: 6px; }
.doc table.src { border-collapse: collapse; width: 100%; min-width: 560px; margin: 14px 0 10px; font-size: 15px; }
.doc table.src th, .doc table.src td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); color: var(--muted); vertical-align: top; }
.doc table.src thead th { font-size: 13px; color: var(--dim); font-weight: 500; }
.doc table.src tbody th { color: var(--ink); font-weight: 600; }
.doc .fine-inline { font-size: 14px; color: var(--dim); }
.doc .rel { border: 1px solid var(--hair); border-radius: 6px; padding: 20px 22px; display: grid; gap: 10px; justify-items: start; max-width: 640px; margin: 8px 0 0; }
.doc .rel-v { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; color: var(--ink); }
.doc .rel-v span { color: var(--dim); font-size: 14px; }
@media (max-width: 560px) { .doc h1 { font-size: 30px; } }

/* Mix-and-match: buying both = two checkouts, two keys (PMO 2026-10-25) */
.mix-note { font: 400 14px/1.5 var(--sans); color: var(--muted); margin: -8px 0 14px; }

/* S-corp panel: the form grid became one line (plain-words pass 2026-10-26) */
.forms-line { display: block; margin-top: 14px; font-size: 14px; color: var(--muted); }