/*
 * The ManOS Table (/manos).
 *
 * Sibling to /the-next-twenty: same type system (Spectral, IBM Plex Mono),
 * same type floor for a 45-to-65 readership, same section rhythm of eyebrow,
 * heading, intro, the same card geometry and paper ground, all resolved to
 * the sitewide tokens in application.css.
 *
 * What is local to this room, scoped here and leaking nowhere:
 *
 *   1. The dark ground. The programme's dark bands sit on --mn-ink, a step
 *      darker and cooler than the sitewide ink, so the two rooms read as the
 *      same house and different rooms at a glance.
 *
 *   2. One accent, in two tones, and it is not the Next Twenty's bronze.
 *      Patina — oxidised copper green, the ManOS register. --mn-accent on
 *      dark grounds (7.3:1 on --mn-ink), --mn-accent-deep on light ones
 *      (6.5:1 on paper). Both clear AA for normal text on their own ground.
 *
 *   3. The rule of thirty: thirty marks, fifteen filled, the daily receipt.
 *      (The Next Twenty runs twenty marks with eight filled, for the years.)
 *
 * All rules are prefixed .mn- so nothing leaks into the rest of the site.
 */

:root {
  --mn-ink: #14181B;
  --mn-ink-line: #2E3538;
  --mn-accent: #7FB09A;
  --mn-accent-deep: #33604F;
  /* Reversed-text greys, the same steps the sibling page uses on its dark band. */
  --mn-chalk: #C3CACE;
  --mn-chalk-muted: #A9B3B9;
  --mn-chalk-dim: #8A9299;
  /* Ledger red, the bookkeeping convention for a missing entry, not a brand
     colour. 5.5:1 on paper; the wording and italics carry the meaning without it. */
  --mn-ledger-red: #A2453B;
}

.mn-hero,
.mn-band { font-family: var(--reading); }

/* ── Hero, the first dark band ───────────────────────────────────── */
.mn-hero {
  background: var(--mn-ink);
  color: var(--bone);
  padding: 92px 0 76px;
}
.mn-hero .mn-eyebrow { color: var(--mn-chalk-dim); display: block; margin-bottom: 22px; }
.mn-hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bone);
  max-width: 20ch;
}
.mn-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mn-accent); }
.mn-lede { margin-top: 26px; font-size: 18.5px; line-height: 1.7; color: var(--mn-chalk); max-width: 62ch; }
.mn-lede b { color: var(--bone); font-weight: 500; }

.mn-eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mn-cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.mn-hero .btn { border-color: #4A555B; color: var(--bone); }
.mn-hero .btn:hover { background: var(--bone); color: var(--mn-ink); border-color: var(--bone); }
.mn-hero .btn-ink { background: var(--mn-accent); color: var(--mn-ink); border-color: var(--mn-accent); }
.mn-hero .btn-ink:hover { background: #93BFAB; border-color: #93BFAB; color: var(--mn-ink); }

.mn-clause {
  margin-top: 34px;
  max-width: 62ch;
  border-left: 2px solid var(--mn-accent-deep);
  padding-left: 18px;
  font-size: 17px;
  color: var(--mn-chalk-muted);
}
.mn-clause b { color: var(--bone); font-weight: 500; }

/* ── The rule of thirty: fifteen of thirty, the daily receipt ────── */
.mn-rule30 { display: flex; gap: 4px; padding: 34px 0; }
.mn-rule30 span { flex: 1; height: 3px; background: var(--hairline); }
.mn-rule30 span:nth-child(-n+15) { background: var(--mn-accent-deep); }

/* ── Section heads ───────────────────────────────────────────────── */
.mn-sec-head { max-width: 720px; margin-bottom: 12px; }
.mn-sec-head .mn-eyebrow { color: var(--mn-accent-deep); display: block; margin-bottom: 14px; }
.mn-sec-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--ink);
}
.mn-sec-head p.mn-intro { margin-top: 16px; max-width: 66ch; color: var(--ink-soft); font-size: 17.5px; }

section.mn-band { padding: 80px 0; }

/* ── Four findings ───────────────────────────────────────────────── */
.mn-pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.mn-pain {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--mn-accent-deep);
  padding: 28px 26px;
}
.mn-pain .mn-tag { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mn-accent-deep); }
.mn-pain h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 12px 0 6px; color: var(--ink); }
.mn-pain .mn-killer { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--mn-accent-deep); margin-bottom: 12px; }
.mn-pain p { font-size: 17px; color: var(--ink-soft); }
.mn-recognition { margin-top: 28px; max-width: 66ch; color: var(--ink-soft); font-size: 17.5px; }

/* ── The ledger, the signature element ───────────────────────────── */
/* The one block this page has that its sibling does not: the mechanism in a
   single glance. Said in italic serif, banked in mono, so the two columns stay
   distinguishable by voice alone when they stack and when colour is absent. */
.mn-ledger { background: var(--card); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.mn-ledger-sheet { margin-top: 38px; border: 1px solid var(--mn-ink); background: var(--paper); max-width: 820px; }
.mn-ledger-sheet .mn-lhead { display: grid; grid-template-columns: 1fr 1fr; background: var(--mn-ink); }
.mn-ledger-sheet .mn-lhead div {
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
}
.mn-ledger-sheet .mn-lhead div:first-child { color: var(--mn-chalk-muted); border-right: 1px solid var(--mn-ink-line); }
.mn-lrow { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.mn-lrow:first-of-type { border-top: none; }
.mn-lrow > div { padding: 15px 20px; font-size: 17px; }
.mn-lrow .mn-said { color: var(--ink-soft); border-right: 1px solid var(--hairline); font-family: var(--serif); font-style: italic; }
.mn-lrow .mn-did { color: var(--mn-ink); font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.mn-lrow .mn-did.mn-none { color: var(--mn-ledger-red); font-style: italic; }
.mn-ledger .mn-after { margin-top: 26px; max-width: 66ch; font-size: 17px; color: var(--ink-soft); }
.mn-ledger .mn-after b { color: var(--mn-ink); font-weight: 500; }

/* ── How it works ────────────────────────────────────────────────── */
.mn-how { background: var(--paper); }
.mn-timeline { overflow-x: auto; margin-top: 36px; -webkit-overflow-scrolling: touch; }
.mn-timeline svg { min-width: 900px; width: 100%; height: auto; display: block; }
.mn-after { margin-top: 26px; max-width: 66ch; color: var(--ink-soft); font-size: 17px; }

/* ── What you hold, the second dark band ─────────────────────────── */
.mn-hold { background: var(--mn-ink); color: var(--mn-chalk); }
.mn-hold .mn-sec-head h2 { color: var(--bone); }
.mn-hold .mn-sec-head .mn-eyebrow { color: var(--mn-accent); }
.mn-hold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.mn-hold-card { border: 1px solid var(--mn-ink-line); padding: 24px 22px; }
.mn-hold-card .mn-eyebrow { color: var(--mn-accent); display: block; margin-bottom: 12px; font-size: 12.5px; }
.mn-hold-card h3 { font-family: var(--serif); font-weight: 500; color: var(--bone); font-size: 20px; margin-bottom: 8px; }
.mn-hold-card p { font-size: 16px; color: var(--mn-chalk-muted); }
.mn-guarantee { margin-top: 38px; border: 1px solid var(--mn-accent); padding: 26px 28px; max-width: 780px; }
.mn-guarantee b { color: var(--bone); font-weight: 500; }
.mn-guarantee p { color: var(--mn-chalk); font-size: 17px; }
.mn-guarantee p + p { margin-top: 12px; color: var(--mn-chalk-muted); font-size: 16px; }

/* ── The spec ────────────────────────────────────────────────────── */
.mn-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-top: 36px; }
.mn-cellhead { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mn-accent-deep); margin-bottom: 10px; }
.mn-spec-grid p { font-size: 17px; color: var(--ink-soft); }

.mn-quote { margin: 44px 0 0; border-left: 3px solid var(--mn-accent-deep); padding-left: 20px; max-width: 64ch; }
.mn-quote p { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink); }
.mn-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 15.5px; color: var(--ink-soft); }

/* ── Where this room stops ───────────────────────────────────────── */
.mn-clinical { background: var(--paper); }
.mn-clinical .mn-box { border: 1px solid var(--hairline); border-top: 3px solid var(--mn-ink); background: var(--card); padding: 28px 26px; max-width: 780px; }
.mn-clinical .mn-box h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink); margin-bottom: 10px; }
.mn-clinical .mn-box p { font-size: 17px; color: var(--ink-soft); }
.mn-clinical .mn-box p + p { margin-top: 12px; }

/* ── Two rooms ───────────────────────────────────────────────────── */
.mn-rooms { background: var(--card); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.mn-room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 34px; }
.mn-room { border: 1px solid var(--hairline); border-left: 3px solid var(--muted); background: var(--paper); padding: 26px 24px; }
.mn-room.mn-this { border-left-color: var(--mn-accent-deep); }
.mn-room .mn-eyebrow { color: var(--mn-accent-deep); display: block; margin-bottom: 10px; font-size: 12px; }
.mn-room h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink); margin-bottom: 8px; }
.mn-room p { font-size: 17px; color: var(--ink-soft); }
.mn-room p b { color: var(--ink); font-weight: 500; }
.mn-room a { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-accent-deep); text-decoration: none; }
.mn-room a:hover { text-decoration: underline; }

/* ── The ask ─────────────────────────────────────────────────────── */
.mn-final { background: var(--paper); border-top: 1px solid var(--mn-ink); }
.mn-final .mn-eyebrow { color: var(--mn-accent-deep); display: block; margin-bottom: 14px; }
.mn-final h2 { font-family: var(--serif); font-weight: 500; line-height: 1.12; font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); max-width: 24ch; }
.mn-final p { margin-top: 16px; max-width: 66ch; color: var(--ink-soft); font-size: 17px; }
.mn-final p b { color: var(--ink); font-weight: 500; }
.mn-final .btn-ink { background: var(--mn-accent-deep); color: var(--paper); border-color: var(--mn-accent-deep); }
.mn-final .btn-ink:hover { background: #2A5142; border-color: #2A5142; color: var(--paper); }
.mn-fine { margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--mn-accent-deep); }

/* ── Founding terms ──────────────────────────────────────────────── */
.mn-terms { margin-top: 34px; border-collapse: collapse; width: 100%; max-width: 820px; }
.mn-terms th {
  background: var(--mn-ink);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
}
.mn-terms td { border: 1px solid var(--hairline); padding: 13px 16px; font-size: 16.5px; color: var(--ink-soft); vertical-align: top; }
.mn-terms td:first-child { white-space: nowrap; font-weight: 500; color: var(--ink); }
.mn-fineprint { margin-top: 18px; font-size: 15.5px; color: var(--ink-soft); max-width: 74ch; }

/* ── The Receipt Audit request ───────────────────────────────────── */
/* An application to a room of twelve, so it is a document, not a signup box:
   two columns on the desk, one on the phone, every group in its own fieldset.
   Same skeleton as the sibling room's Map form, drawn in patina rather than
   bronze, and scoped under .mn-form so neither leaks into the other. */
.mn-form { margin-top: 34px; max-width: 680px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.mn-form .mn-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.mn-form .mn-field-wide { grid-column: 1 / -1; }
.mn-form label,
.mn-form legend {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mn-accent-deep);
}
.mn-form .mn-help {
  margin: 0;
  font-family: var(--reading);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  max-width: 62ch;
}
.mn-form input[type="text"],
.mn-form input[type="email"],
.mn-form input[type="tel"],
.mn-form select,
.mn-form textarea {
  width: 100%;
  font-family: var(--reading);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--mn-ink-line);
  border-radius: 2px;
  padding: 12px 13px;
}
/* The timezone list. Kept on the same slab as the text fields, with the native
   chevron drawn in rather than hidden, so it reads as a list and not a box the
   applicant is meant to type into. */
.mn-form select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mn-accent-deep) 50%), linear-gradient(135deg, var(--mn-accent-deep) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.mn-form textarea { resize: vertical; min-height: 104px; }
.mn-form ::placeholder { color: var(--muted); opacity: 1; }

/* Groups. A fieldset carries the group's own name, so the legend is the label
   and each option gets a real one of its own. */
.mn-form .mn-group { border: 1px solid var(--hairline); background: var(--paper); padding: 20px 22px 18px; gap: 10px; }
.mn-form .mn-group legend { padding: 0 8px; }
.mn-form .mn-check { display: flex; align-items: flex-start; gap: 11px; }
.mn-form .mn-check input { flex: none; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--mn-accent-deep); }
.mn-form .mn-check label {
  font-family: var(--reading);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
.mn-form .mn-consent { gap: 8px; }

/* Focus and error, both in the room's deep patina: 6.5:1 on paper. */
.mn-form input:focus-visible,
.mn-form select:focus-visible,
.mn-form textarea:focus-visible {
  outline: 2px solid var(--mn-accent-deep);
  outline-offset: 1px;
  border-color: var(--mn-accent-deep);
}
/* A fault is drawn in the ledger red the sheet already uses for a missing
   entry, and the wording carries the meaning without the colour. */
.mn-form-summary {
  grid-column: 1 / -1;
  border: 1px solid var(--mn-ledger-red);
  border-left-width: 3px;
  background: var(--paper);
  padding: 18px 20px;
}
.mn-form-summary:focus-visible { outline: 2px solid var(--mn-ledger-red); outline-offset: 2px; }
.mn-form-summary-head {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mn-ledger-red);
}
.mn-form-summary ul { margin: 0; padding-left: 20px; }
.mn-form-summary li { font-size: 16px; line-height: 1.5; color: var(--ink); }
.mn-form-summary a { color: var(--mn-ledger-red); }
.mn-form .field-error {
  margin: 0;
  font-family: var(--reading);
  font-size: 15.5px;
  color: var(--mn-ledger-red);
  text-transform: none;
  letter-spacing: 0;
}
.mn-form [aria-invalid="true"] { border-color: var(--mn-ledger-red); }

.mn-form .mn-privacy {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.mn-form .mn-privacy a { color: var(--mn-accent-deep); }
.mn-form input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  cursor: pointer;
  font-size: 15px;
  background: var(--mn-accent-deep);
  color: var(--paper);
  border-color: var(--mn-accent-deep);
}
.mn-form input[type="submit"]:hover { background: #2A5142; border-color: #2A5142; color: var(--paper); }
.mn-form .mn-submit-note {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mn-accent-deep);
}
.mn-form .mn-submit-note a { color: inherit; }
.mn-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Reveal, matching the sibling page, gated on motion preference ── */
@media (prefers-reduced-motion: no-preference) {
  .mn-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .mn-reveal.is-in { opacity: 1; transform: none; }
}

/* Keyboard focus in the room's own accent. */
.mn-hero a:focus-visible, .mn-band a:focus-visible { outline: 3px solid var(--mn-accent-deep); outline-offset: 3px; }
.mn-hero a:focus-visible, .mn-hold a:focus-visible { outline-color: var(--mn-accent); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mn-hero { padding: 64px 0 56px; }
  section.mn-band { padding: 60px 0; }
  .mn-rule30 { gap: 3px; }
  .mn-rule30 span { height: 2px; }
  .mn-form { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* The ledger stacks: said above banked, one entry per band. The dashed rule
     splits the pair inside an entry; the solid rule splits entries. The voices
     (italic serif vs mono) keep the columns tellable apart without the grid. */
  .mn-lrow, .mn-ledger-sheet .mn-lhead { grid-template-columns: 1fr; }
  .mn-lrow .mn-said { border-right: none; border-bottom: 1px dashed var(--hairline); }
  .mn-ledger-sheet .mn-lhead div:first-child { border-right: none; border-bottom: 1px solid var(--mn-ink-line); }
  .mn-lrow > div { padding: 12px 16px; }
  .mn-lrow .mn-did { font-size: 13px; }
  .mn-terms td:first-child { white-space: normal; }
}

@media (max-width: 380px) {
  .mn-hero h1 { font-size: 30px; }
  .mn-cta-row .btn { width: 100%; text-align: center; }
  .mn-terms th, .mn-terms td { padding: 10px 10px; font-size: 15px; }
}