/* ============================================================================
   SoftSync — lead-magnet modules
   Loaded only on the six lead-magnet pages, via PAGE_STYLES in
   src/lib/pageStyles.ts. Everything here is scoped to a block class that
   appears nowhere else, so nothing in landing.css or pages.css changes.

   Built on landing.css's vocabulary: .wrap, .eyebrow, .lead, .hl, .reveal,
   .section-ink, and the tokens from softsync-tokens.css. No new colours are
   invented — the palette is the same warm cream + near-black ink.
============================================================================ */

/* ── Shared: screen-reader-only text ──────────────────────────────────────
   landing.css has no such utility, and only the spreadsheet block needs one
   (to label the row-number gutter). Defined here rather than added globally so
   the base stylesheet is untouched. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Shared: the small dated source stamp several of these pages carry ─────
   A claim about someone else's price needs a date and a source next to it, or
   it stops being true the week they change it. Deliberately plain and small:
   this is a footnote, not a badge. */
.stamp {
  margin-top: clamp(20px, 3vw, 32px);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-4);
  max-width: 68ch;
}
.stamp a { text-decoration: underline; text-underline-offset: 2px; }
.section-ink .stamp { color: rgba(255, 255, 255, 0.4); }

/* ── Section head shared by the new blocks ───────────────────────────────── */
.mag-head { max-width: 22ch; }
.mag-head--wide { max-width: 34ch; }
.mag-head .eyebrow { margin: 0 0 18px; }
.mag-head p.lead { margin: 20px 0 0; max-width: 58ch; }

/* ============================================================================
   1 · Feature graveyard  (/no/overkill)
   The other CRM's whole feature list, with the handful a four-person company
   will ever touch left lit and the rest dimmed almost out of sight.

   The dimming is the argument, so it has to be severe — at opacity .8 it reads
   as "a long list", at .18 it reads as "a wall you are paying for". The lit
   rows are NOT just brighter: they are a different size and carry a rule, so
   the contrast survives a greyscale print and a colourblind reader.
============================================================================ */
.graveyard { background: var(--ink); color: #fff; }
.graveyard h2, .graveyard .eyebrow { color: #fff; }
.graveyard .eyebrow { color: rgba(255, 255, 255, 0.45); }
.graveyard .lead { color: rgba(255, 255, 255, 0.7); }

.gy-mask {
  margin-top: clamp(36px, 5vw, 56px);
  position: relative;
}
.gy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4;
  column-gap: clamp(20px, 3vw, 44px);
  font-size: 14px;
  line-height: 1.45;
}
.gy-list li {
  break-inside: avoid;
  padding: 5px 0;
}
/* The mass. Not interactive, not readable at a glance, and that is the point. */
.gy-dead {
  color: rgba(255, 255, 255, 0.19);
  letter-spacing: -0.002em;
}
/* The six. */
.gy-live {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: #fff;
  font-size: 15.5px;
  font-weight: 500;
  padding-left: 11px;
  border-left: 2px solid #fff;
  margin-left: -13px;
}
.gy-live::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-3px);
}
.gy-count {
  margin: clamp(28px, 4vw, 40px) 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.gy-count b { color: #fff; font-weight: 500; }

@media (max-width: 900px) { .gy-list { columns: 2; } }
@media (max-width: 560px) {
  .gy-list { columns: 1; font-size: 13.5px; }
  .gy-live { font-size: 15px; }
}

/* ============================================================================
   2 · Price ladder  (/no/overkill)
   The tier jump, drawn as steps. The riser between two steps is the whole
   story, so the height of each step is proportional to its price — a ladder
   where every step is the same height would hide exactly what it is meant to
   show.
============================================================================ */
.ladder {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(var(--rungs, 3), minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  align-items: end;
}
.rung {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 96px;
  padding: 18px;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--ink-4);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-raised);
}
/* The tier you are actually pushed onto. */
.rung--jump {
  border-color: var(--ink);
  border-bottom-color: var(--ink);
  background: var(--bg-sunken);
  box-shadow: var(--shadow);
}
.rung-tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rung-price {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.rung-price span { font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.rung-note { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin: 0; }
.rung--jump .rung-note { color: var(--ink-2); }

@media (max-width: 700px) {
  .ladder { grid-template-columns: 1fr; align-items: stretch; }
  .rung { min-height: 0; border-radius: var(--radius); border-bottom-width: 1px; }
  .rung--jump { border-left: 3px solid var(--ink); }
}

/* ============================================================================
   3 · Sheet decay  (/no/regnearket)
   A spreadsheet that starts sane on the left and falls apart to the right.

   Real spreadsheet chrome — column letters, row numbers, a frozen first
   column — because the recognition is the emotional payload. Without the
   frozen column you scroll right and lose which customer a row belongs to,
   which is the one thing an actual spreadsheet gets right.
============================================================================ */
.sheet {
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sheet-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.sheet-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.sheet-name { color: var(--ink-2); font-weight: 500; }
.sheet-hint { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ink-4); }
.sheet-hint svg { width: 13px; height: 13px; }

.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet table {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
  min-width: 100%;
}
.sheet th, .sheet td {
  padding: 8px 14px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--bg-raised);
}
/* Column letters + row numbers: the grey gutter that says "spreadsheet". */
.sheet .sheet-ref th, .sheet .sheet-ref td,
.sheet .rownum {
  background: var(--bg-sunken);
  color: var(--ink-4);
  font-size: 11px;
  text-align: center;
  padding: 5px 10px;
}
.sheet thead.sheet-cols th {
  background: var(--bg-sunken);
  color: var(--ink);
  font-weight: 500;
  position: relative;
}
/* Frozen first data column, so the customer stays put while the mess scrolls. */
.sheet .col-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--line-strong);
  box-shadow: 3px 0 6px -4px rgba(0, 0, 0, 0.12);
}
.sheet .rownum { position: sticky; left: 0; z-index: 3; }
.sheet .col-sticky.rownum { z-index: 4; }

/* Four stages of rot. Each stage changes MORE than colour — weight, case and
   letter-spacing shift too, so the decay reads without relying on hue. */
.d-0 { }
.d-1 { color: var(--ink-3); }
.d-2 { color: var(--ink-4); font-style: italic; }
.d-3 { color: #a2402f; font-weight: 500; }
.sheet thead.sheet-cols th.d-2 { color: var(--ink-4); }
.sheet thead.sheet-cols th.d-3 { color: #a2402f; }
.sheet td.cell-flag { background: #fbeceb; color: #a2402f; }
.sheet td.cell-empty { background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--bg-sunken) 5px, var(--bg-sunken) 6px); }

.sheet-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-4);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .sheet table { font-size: 11.5px; }
  .sheet th, .sheet td { padding: 7px 10px; }
}

/* ============================================================================
   4 · Org.nr reveal  (/no/norsk)
   Nine digits, then everything those nine digits already know.

   The digits are one <span> per character rather than one string, because the
   stagger is what sells it as a lookup rather than a headline. Dotted leaders
   on the resolved rows because that is how a register prints.
============================================================================ */
.orgnr { text-align: center; }
.orgnr-digits {
  display: flex;
  justify-content: center;
  gap: clamp(5px, 1vw, 11px);
  margin: clamp(28px, 4vw, 44px) 0 clamp(12px, 2vw, 20px);
  flex-wrap: wrap;
}
.orgnr-digits b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(28px, 6.4vw, 62px);
  line-height: 1;
  padding: clamp(10px, 1.6vw, 20px) clamp(8px, 1.4vw, 16px);
  min-width: clamp(34px, 6.6vw, 68px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.orgnr-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0;
}

.orgnr-out {
  list-style: none;
  margin: clamp(34px, 5vw, 54px) auto 0;
  padding: 0;
  max-width: 640px;
  text-align: left;
  border-top: 1px solid var(--line);
}
.orgnr-out li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line-2);
  font-size: 15px;
}
.orgnr-out .k {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex: none;
}
.orgnr-out .dots {
  flex: 1;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-4px);
  min-width: 20px;
}
.orgnr-out .v { font-weight: 500; color: var(--ink); text-align: right; }

/* ============================================================================
   5 · Bad translations  (/no/norsk)
   English term · what they call it in "Norwegian" · what it is actually called.
============================================================================ */
.xlate {
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--ink);
}
.xlate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: clamp(12px, 2.4vw, 32px);
  align-items: baseline;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line-2);
}
.xlate-head {
  border-bottom: 1px solid var(--line);
  padding-block: 10px;
}
.xlate-head span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.xlate-en { font-size: 15px; color: var(--ink-3); font-family: var(--mono); }
.xlate-them { font-size: 17px; color: #a2402f; font-weight: 500; }
.xlate-them .strike { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; }
.xlate-us { font-size: 17px; font-weight: 500; color: var(--ink); }

@media (max-width: 620px) {
  .xlate-row { grid-template-columns: 1fr; gap: 3px; padding: 14px 2px; }
  .xlate-head { display: none; }
  .xlate-en { font-size: 12.5px; }
  .xlate-them::before { content: "deres: "; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
  .xlate-us::before { content: "vårt: "; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
}

/* ============================================================================
   6 · Headcount band  (/no/smaa)
   Ten filled dots, then the sizes we are honestly not for.
============================================================================ */
.band { margin-top: clamp(34px, 5vw, 52px); }
.band-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.band-dots i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex: none;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.band-dots i.out {
  background: transparent;
  border-color: var(--line-strong);
}
.band-dots .gap { width: 14px; flex: none; }
.band-legend {
  display: flex;
  gap: clamp(18px, 4vw, 48px);
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.band-legend div { max-width: 34ch; }
.band-legend b {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
  font-weight: 500;
}
.band-legend p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.band-legend div.is-us b { color: var(--ink); }

/* ============================================================================
   7 · Price receipt  (/no/prisen)
   Two till receipts side by side. Theirs is long. Ours is four lines.

   The torn bottom edge is a repeating conic gradient rather than an image, so
   it scales and inverts with the theme. It is decoration and nothing depends
   on it rendering.
============================================================================ */
.receipts {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}
.receipt {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 30px) 0;
  box-shadow: var(--shadow);
  position: relative;
}
/* Torn edge. Sits under the card and is masked into zigzag teeth. */
.receipt::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -11px;
  height: 12px;
  background:
    linear-gradient(var(--line), var(--line)) top / 100% 1px repeat-x,
    var(--bg-raised);
  -webkit-mask: repeating-conic-gradient(from -45deg at bottom, #000 0deg 90deg, transparent 90deg 180deg) 0 0 / 14px 12px;
  mask: repeating-conic-gradient(from -45deg at bottom, #000 0deg 90deg, transparent 90deg 180deg) 0 0 / 14px 12px;
}
.receipt--ours { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.receipt--ours::after { background: linear-gradient(var(--ink), var(--ink)) top / 100% 1px repeat-x, var(--bg-raised); }

.receipt h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.receipt-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  margin: 7px 0 0;
  text-transform: uppercase;
}
.receipt-lines {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
}
.receipt-lines li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--line-strong);
  color: var(--ink-2);
}
.receipt-lines .rl-label { flex: 1; min-width: 0; white-space: normal; }
.receipt-lines .rl-amount { flex: none; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.receipt-lines .rl-note {
  display: block;
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 3px;
  font-family: var(--sans);
  letter-spacing: 0;
}
.receipt-lines li.rl-forced .rl-amount { color: #a2402f; }
.receipt-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 18px 0 clamp(22px, 3vw, 30px);
  border-top: 2px solid var(--ink);
}
.receipt-total .rt-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.receipt-total .rt-v {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.receipt-foot {
  margin: -6px 0 clamp(22px, 3vw, 28px);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ============================================================================
   8 · Stack list  (/no/stack)
   One job per row: the pick, why, and the honest alternative.
============================================================================ */
.stack { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ink); }
.stack-row {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr) minmax(0, 0.75fr);
  gap: clamp(12px, 2.4vw, 34px);
  align-items: start;
  padding: clamp(18px, 2.4vw, 26px) 2px;
  border-bottom: 1px solid var(--line-2);
}
/* The one row that is us. Marked, not hidden — the page's whole claim is that
   it does not quietly sell. */
.stack-row--ours { background: var(--bg-sunken); box-shadow: inset 3px 0 0 var(--ink); padding-left: 16px; }
.stack-job {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 5px;
}
.stack-pick { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.022em; margin: 0; }
.stack-why { margin: 7px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.stack-alt { font-size: 14px; line-height: 1.5; color: var(--ink-3); padding-top: 6px; }
.stack-alt b {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 4px;
}
.stack-ours-tag {
  display: inline-block;
  margin-left: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  vertical-align: 3px;
}

/* The independence pledge. A bordered note, not a badge — it is a promise the
   reader should be able to hold us to, so it reads as prose. */
.pledge {
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 32px);
  background: var(--bg-raised);
  max-width: 62ch;
}
.pledge b {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
  font-weight: 500;
}
.pledge p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.pledge p + p { margin-top: 12px; }

@media (max-width: 760px) {
  .stack-row { grid-template-columns: 1fr; gap: 6px; }
  .stack-row--ours { padding-left: 14px; }
  .stack-alt { padding-top: 10px; }
}

/* ============================================================================
   9 · Principles (3-up)
   The block type has existed in the Studio schema since the start with no
   component behind it. Three of these pages want exactly this shape, so it is
   finally drawn: a hairline over each column, heading, text.
============================================================================ */
.principles-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(24px, 3.6vw, 52px);
  margin-top: clamp(30px, 4vw, 46px);
}
.principles-3 > div { border-top: 2px solid var(--ink); padding-top: 20px; }
.principles-3 h3 { font-size: clamp(20px, 2.2vw, 25px); margin: 0 0 10px; letter-spacing: -0.024em; }
.principles-3 p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.section-ink .principles-3 > div { border-top-color: #fff; }
.section-ink .principles-3 p { color: rgba(255, 255, 255, 0.72); }

/* ============================================================================
   10 · Consultant chain  (/no/salesforce)
   A small request, and the chain it turns into.

   Two columns per request: a numbered rail on their side that grows taller with
   every step, one line on ours. The height difference is the argument, which is
   why the rail is vertical and numbered rather than a wrapping row of pills —
   the first attempt at this wrapped ten steps into a blob and hid the very
   thing it was drawing.
============================================================================ */
.cc-score {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 4vw, 48px);
  margin-top: clamp(30px, 4vw, 44px);
  padding: clamp(20px, 3vw, 28px) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.cc-score-cell { display: flex; flex-direction: column; gap: 4px; }
.cc-score-cell b {
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}
.cc-score-cell span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cc-score-cell--ours b { color: var(--ink); }
.cc-score-div { width: 1px; background: var(--line); flex: none; }

.cc-list { margin-top: clamp(8px, 2vw, 18px); }
.cc-row { padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line-2); }
.cc-ask {
  font-size: clamp(21px, 2.7vw, 30px);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.22;
  margin: 0 0 clamp(20px, 3vw, 28px);
  max-width: 34ch;
}
.cc-ask::before { content: "\201c"; color: var(--ink-4); }
.cc-ask::after  { content: "\201d"; color: var(--ink-4); }

.cc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.cc-side-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cc-side-n {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* The rail. Counter drawn by CSS so the markup stays a plain <ol>. */
.cc-rail { list-style: none; margin: 0; padding: 0; counter-reset: rail; }
.cc-rail li {
  counter-increment: rail;
  position: relative;
  padding: 0 0 13px 34px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}
.cc-rail li::before {
  content: counter(rail, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-4);
  text-align: right;
}
/* The connector: a hairline from each number to the next. */
.cc-rail li::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 17px;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.cc-rail li:last-child { padding-bottom: 0; }
.cc-rail li:last-child::after { display: none; }
.cc-rail li:last-child { color: var(--ink); font-weight: 500; }

.cc-toll {
  margin: 16px 0 0;
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a2402f;
  background: #fbeceb;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

/* Our side sits on the sunken surface so the eye reads it as the short answer,
   not as a second list. */
.cc-side--us {
  background: var(--bg-sunken);
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(16px, 2.4vw, 22px);
}
.cc-side--us .cc-side-label { color: var(--ink); }
.cc-answer { margin: 0; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.5; color: var(--ink); }
.cc-answer--none { color: var(--ink-3); }

@media (max-width: 760px) {
  .cc-grid { grid-template-columns: 1fr; gap: 20px; }
  .cc-score-cell b { font-size: clamp(32px, 12vw, 48px); }
}

/* ============================================================================
   11 · Never done  (/no/salesforce)
   A setup checklist that never finishes.

   Percentage is computed from the list in the component, so the bar and the
   ticks can never disagree. Done and remaining are two labelled columns: mixed
   into one list it reads as a to-do list, split it shows which column is
   longer, which is the point.
============================================================================ */
.nd { margin-top: clamp(32px, 4vw, 48px); }
.nd-meter {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
}
.nd-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.nd-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nd-count { margin: 6px 0 0; font-size: 14px; color: var(--ink-4); }
.nd-pct { font-size: clamp(34px, 5vw, 54px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.nd-bar { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; border: 1px solid var(--line); }
.nd-fill { height: 100%; background: var(--ink); border-radius: 999px; }
.nd-since { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }

.nd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 56px);
  margin-top: clamp(26px, 3.5vw, 40px);
}
.nd-col h3 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.nd-col h3 span {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.nd-col ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nd-col li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; line-height: 1.45; }
.nd-col .box {
  flex: none;
  width: 15px; height: 15px;
  margin-top: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-raised);
  position: relative;
}
.nd-col--done { color: var(--ink-4); }
.nd-col--done .box { background: var(--ink-4); border-color: var(--ink-4); }
.nd-col--done .box::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--bg-raised);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(40deg);
}
.nd-col--open h3 { color: var(--ink); border-bottom-color: var(--ink); }
.nd-col--open li { color: var(--ink-2); }

@media (max-width: 700px) { .nd-cols { grid-template-columns: 1fr; gap: 26px; } }

/* ============================================================================
   12 · Crossed logo  (/no/salesforce)
   Someone else's mark, struck through, with the line that earns it.
============================================================================ */
.xlogo { text-align: center; }
.xlogo--dark { background: var(--ink); color: #fff; }
.xlogo--dark h2 { color: #fff; }
.xlogo--dark .eyebrow { color: rgba(255, 255, 255, 0.45); }
.xlogo--dark .lead { color: rgba(255, 255, 255, 0.72); }
.xlogo--dark .stamp { color: rgba(255, 255, 255, 0.4); }
.xlogo-inner { max-width: 720px; margin: 0 auto; }
.xlogo-inner h2 { margin-top: clamp(26px, 3.5vw, 38px); }
.xlogo-inner .lead { margin: 18px auto 0; max-width: 52ch; }
.xlogo-inner .stamp { margin-inline: auto; }

.xlogo-mark {
  position: relative;
  display: inline-block;
  padding: clamp(10px, 2vw, 18px) clamp(14px, 2.6vw, 26px);
}
.xlogo-mark img {
  display: block;
  width: auto;
  max-width: min(100%, 320px);
  height: auto;
  /* The mark is not ours to restyle, so it is left alone apart from being
     dimmed slightly, which keeps the strike readable over it. */
  opacity: 0.72;
}
.xlogo--dark .xlogo-mark img { filter: invert(1) grayscale(1); opacity: 0.62; }
.xlogo-strike { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xlogo-strike line { stroke: #a2402f; stroke-width: 3; stroke-linecap: round; }
.xlogo--dark .xlogo-strike line { stroke: #e8916f; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .xlogo-strike line { stroke-dasharray: 200; stroke-dashoffset: 200; }
  .reveal.in .xlogo-strike line { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease) .25s; }
}