/* ==========================================================================
   compare-nicejob.css — /nicejob-alternative only.
   Load order: feature-v2, feature-v3, show, home, compare, this.

   Everything shared already exists: tokens, .col, .h, .sub and .faq-* in
   feature-v2; .matrix in feature-v3; .moment / .m-card / .m-chip in show;
   .closing in home; the matrix cell states, the quote cards, the sentiment
   list and the date stamp in compare.css. What is here is only this page's own
   shapes: the two-column "who each is for", the Locations block, the staff
   pair, and the three switching blocks.

   Contrast: #6b7088 clears 4.5:1 on white but NOT on a tint (4.42 on the
   highlighted board row, 4.37 on the matrix cross), so muted text that sits on
   a tint uses #63687f instead (4.92 at worst). Nothing here is under 13px, and
   .m-from is re-sized because show.css sets it to 12.5.
   Simplify pass 2026-09-05: the Staff recognition pair (.nj-pair / .nj-board / .nj-credit), the two "scroll
   sideways" hints and the two "Bottom line." rules went with their markup. The cost table's head was 12.5px and
   is now 13px.
   ========================================================================== */

/* ---------- 0. section rhythm ---------- */
.nj-page .nj-head { max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.nj-page .nj-head .sub { margin-inline: 0; }
.nj-page .nj-sec--tight { padding-top: 0; }

.nj-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font: 600 14.5px/1.4 var(--font-display); color: var(--blue); text-decoration: none; }
.nj-link:hover { text-decoration: underline; }
.nj-link .icon { width: 16px; height: 16px; }

/* A hint only exists while the thing it describes actually scrolls; /js/compare-nicejob.js measures and adds
   .is-on. A breakpoint guessed wrong at 11 of 19 widths (slop critique, 2026-09-05). */

/* ---------- 1. hero moment: one inbox, four offices ---------- */
.nj-page .m-from { font-size: 13px; }
.nj-hm { padding: 18px 20px 14px; }
.nj-irow { padding: 11px 0; border-top: 1px solid var(--v2-line); font-family: var(--font-body); }
.nj-irow:first-of-type { border-top: 0; padding-top: 4px; }
.nj-irow b { display: block; font: 600 14px/1.4 var(--font-display); color: var(--ink); }
.nj-irow span { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }
.nj-irow em { display: block; margin-top: 5px; font-style: normal; font: 400 13.5px/1.5 var(--font-body); color: var(--v2-body); }
/* The stars are the only difference between the five-star row and the two-star one, so they carry meaning and have
   to clear 4.5:1 on white. #c07a00 was 3.49; this is 5.14. */
.nj-stars { color: #9a6100; letter-spacing: .04em; }

/* ---------- 2. who each product is for ---------- */
.nj-who { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--v2-line); }
.nj-who > div { padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 34px); border-bottom: 1px solid var(--v2-line); }
.nj-who > div + div { border-left: 1px solid var(--v2-line); background: rgba(0, 61, 255, .035); }
.nj-who h3 { font: 500 clamp(22px, 2.2vw, 28px)/1.18 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.nj-who p { margin-top: 14px; max-width: 46ch; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.nj-who p b { color: var(--ink); font-weight: 600; }
.nj-who a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.nj-who-tag { display: inline-block; margin-bottom: 14px; padding: 5px 11px; border-radius: 999px; background: var(--ghost); font: 600 13px/1.3 var(--font-display); color: var(--blue); }
/* Ours sits on the tinted column, where the ghost pill disappears; white keeps both tags reading as pills. */
.nj-who > div + div .nj-who-tag { background: #fff; }

/* ---------- 3. the Locations block ---------- */
/* Copy left, the table right, from 992px up. The table is cropped to five columns (the seven-column version of this
   screen is on /review-insights), so 1fr of a 1032px column holds it without scrolling and it stops reading as a
   spreadsheet stretched to its container. Below 992 it stacks. minmax(0, …) and the min-width reset are load
   bearing: with a bare `auto` track the table's min-content sized the track and pushed the page wide on a phone. */
.nj-wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 30px); }
.nj-wide > * { min-width: 0; }
.nj-wide-copy { max-width: 56ch; }
.nj-wide h3 { font: 500 clamp(25px, 2.6vw, 33px)/1.16 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.nj-wide p { margin-top: 14px; max-width: 46ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.nj-wide p b { color: var(--ink); font-weight: 600; }
@media (min-width: 992px) {
  .nj-wide { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); align-items: center; }
}

.nj-shot { padding: 16px 18px 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); font-family: var(--font-body); font-size: 13px; }
.nj-shot-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.nj-shot-h span { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ghost); font: 600 13px/1.3 var(--font-display); color: var(--blue); }
.nj-tbl-sub { margin: 11px 0 2px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.nj-scroll { overflow-x: auto; }
.nj-tbl { width: 100%; min-width: 430px; border-collapse: separate; border-spacing: 0; text-align: left; }
.nj-tbl th, .nj-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--v2-line); font: 400 13.5px/1.4 var(--font-body); color: var(--v2-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nj-tbl thead th { font: 600 13px/1.35 var(--font-display); color: #6b7088; white-space: normal; vertical-align: bottom; }
.nj-tbl tbody th, .nj-tbl .c-rank { font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.nj-tbl .c-rank { width: 50px; }
.nj-tbl .c-name { min-width: 104px; }
.nj-tbl .c-status { width: 1%; }
.nj-tbl tbody tr:last-child th, .nj-tbl tbody tr:last-child td { border-bottom: 0; }
.nj-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 13px/1.35 var(--font-display); white-space: nowrap; }
.nj-pill.is-crit { background: #ffe4e9; color: #a3123a; }
.nj-pill.is-warn { background: #fff0cc; color: #7a4f00; }
.nj-pill.is-good { background: #ddf7ea; color: #0c7a52; }
.nj-shot--wide { padding-bottom: 14px; max-width: 760px; }

/* ---------- 4. the staff pair: mock left, copy right ---------- */
/* Deliberately not the site's .card + .shot grid: two of those in a row is the shape the neighbouring comparison
   pages use, and this page's tour is one wide screen and one pair. */
@media (min-width: 992px) {
}

/* Staff recognition: no header row, a value over a caption. The muted text sits on a tint in both row states. */

/* The AI search record is a sentence here, not a third mock: the second office is what this page is about. */
.nj-aside { margin-top: clamp(26px, 3vw, 38px); max-width: 68ch; font: 400 16px/1.65 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.nj-aside a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 5. switching ---------- */
.nj-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nj-sw > div { padding: 24px 24px 26px; border-radius: 16px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.nj-sw h3 { font: 600 17px/1.32 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.nj-sw p { margin-top: 10px; font: 400 15px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.nj-sw p b { color: var(--ink); font-weight: 600; }
.nj-sw p a, .nj-sw p span[data-source] { color: inherit; }
/* The band ends on the action rather than on the third card (persuasion pass, 2026-09-05). Display face, ink, one
   line at 1440 and two on a phone: it reads as the band's closing sentence, not as a fourth card. */
.nj-sw-act { margin-top: clamp(20px, 2.2vw, 28px); max-width: 720px; font: 500 clamp(17px, 1.4vw, 19px)/1.55 var(--font-display); color: var(--ink); text-wrap: pretty; }

/* ---------- 6. proof, matrix, faq ---------- */
/* The heading and the quote share one 780px column and one left edge: feature-v2 centres .tq at 780, so an 800px
   heading with no auto margin stepped the two apart by 126px. Same rule as solutions-hair-and-beauty.css. */
.nj-page .nj-proof { padding: clamp(40px, 4vw, 56px) 0 0; }
.nj-page .nj-proof .col > .h { max-width: 780px; margin: 0 auto; }
/* One sentence saying why this customer is the reader (persuasion pass, 2026-09-05). Same 780px column and left
   edge as the heading and the quote, so the proof band stays one measure. */
.nj-proof-lead { max-width: 780px; margin: 14px auto 0; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.nj-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(88px, 9vw, 128px); } /* the quote needs air before the FAQ (Lachlan, 2026-09-05) */
.nj-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.nj-page .tq figcaption { margin-top: 26px; }
.nj-page .matrix-wrap { margin-top: 0; }
.nj-page .matrix.cmp { margin-top: 0; }
/* A tie is a row where both columns carry the tick. Muting both makes the five ties legible as ties and leaves the
   seven rows that carry the argument reading first. 3.33:1 against white, above the 3:1 floor for a glyph. */
.nj-page .matrix.cmp tbody tr:has(td.us .cmp-yes):has(td:not(.us) .cmp-yes) .cmp-yes { color: #868ca4; }
/* #6b7088 on the cross's own #f1f2f7 disc is 4.37:1, and .cmp-no sits on the striped cell. */
.nj-page .matrix.cmp .cmp-no,
.nj-page .matrix.cmp .cmp-no .cmp-x { color: #63687f; }
.nj-faq-col { max-width: 800px; }
/* feature-v2 styles .faq-a p but not the links inside it, and three answers link to our own pages. */
.nj-page .faq-a a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .nj-who { grid-template-columns: 1fr; }
  .nj-who > div + div { border-left: 0; }
  .nj-shot { padding: 14px 14px 10px; }
  .nj-hm { padding: 16px 16px 12px; }
  .nj-sw { grid-template-columns: 1fr; }
  /* The table stacks rather than scrolling, so the status column (the reason against each office) is on screen
     instead of behind a sideways swipe. */
  .nj-scroll { overflow-x: visible; }
  .nj-tbl { min-width: 0; display: block; }
  .nj-tbl thead { display: none; }
  .nj-tbl tbody { display: block; }
  .nj-tbl tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: 'rank name rating' '. new new' '. status status'; gap: 3px 8px; padding: 12px 0; border-bottom: 1px solid var(--v2-line); }
  .nj-tbl tbody tr:last-child { border-bottom: 0; }
  .nj-tbl th, .nj-tbl td { display: block; padding: 0; border-bottom: 0; white-space: normal; }
  .nj-tbl .c-rank { grid-area: rank; width: auto; }
  .nj-tbl .c-name { grid-area: name; min-width: 0; }
  .nj-tbl .c-rating { grid-area: rating; text-align: right; }
  .nj-tbl .c-new { grid-area: new; }
  .nj-tbl .c-new::before { content: 'New reviews: '; }
  .nj-tbl .c-status { grid-area: status; width: auto; margin-top: 3px; }
}

/* the one-office sum: both companies publish, so the arithmetic is on the page (comparison audit, 2026-09-05) */
.nj-page .nj-cost { margin-top: clamp(28px, 3vw, 40px); }
.nj-page .nj-cost h3 { font: 500 clamp(20px, 2vw, 24px)/1.2 var(--font-serif); letter-spacing: -.012em; color: var(--ink); }
.nj-page .nj-cost-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; }
.nj-page .nj-cost table { width: 100%; min-width: 640px; border-collapse: collapse; font: 400 14.5px/1.4 var(--font-body); color: var(--ink); }
.nj-page .nj-cost th, .nj-page .nj-cost td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--v2-line); white-space: nowrap; }
/* 13px floor: this head ran at 12.5px. */
.nj-page .nj-cost thead th { font: 600 13px/1.3 var(--font-display); color: #6b7088; background: var(--v2-card); }
.nj-page .nj-cost tbody th { font: 600 14px/1.3 var(--font-display); }
.nj-page .nj-cost tbody tr:last-child th, .nj-page .nj-cost tbody tr:last-child td { border-bottom: 0; }
.nj-page .nj-cost td:nth-child(-n+4) { font-weight: 600; }
.nj-page .nj-cost .nj-cost-ask { font-weight: 400; color: #6b7088; text-align: center; }
.nj-page .nj-cost-note { margin-top: 12px; max-width: 72ch; font: 400 13.5px/1.6 var(--font-body); color: #6b7088; }
.nj-page .nj-cost-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) {
  /* stacked: each office count becomes a block with labelled lines, so their column is never off-screen */
  .nj-page .nj-cost-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .nj-page .nj-cost table, .nj-page .nj-cost tbody, .nj-page .nj-cost tr, .nj-page .nj-cost th, .nj-page .nj-cost td { display: block; min-width: 0; white-space: normal; }
  .nj-page .nj-cost thead { display: none; }
  .nj-page .nj-cost tr { margin-top: 12px; border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; overflow: hidden; }
  .nj-page .nj-cost tbody th { padding: 11px 14px; background: var(--v2-card); border-bottom: 1px solid var(--v2-line); }
  .nj-page .nj-cost td { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--v2-line); font-weight: 600; }
  .nj-page .nj-cost td::before { content: attr(data-l); font: 400 13.5px/1.4 var(--font-body); color: #6b7088; }
  .nj-page .nj-cost .nj-cost-ask { text-align: right; }
  .nj-page .nj-cost tr:first-child { margin-top: 0; }
}

/* ---------- the bottom line under each "who it's for" column: pushed to the foot of the card so the two verdicts sit
   level however long the columns above them run. The pill and the link keep their own width inside the flex column. */
.nj-who > div { display: flex; flex-direction: column; }
.nj-who .nj-who-tag, .nj-who .nj-link { align-self: flex-start; }