/* SELLUP PITCH — CLIENT VIEW. Plain-language layer on top of the shared system.

   Loads AFTER _kit/mockup-base.css and ../design/styles/global.css, so it
   inherits every token and primitive and only changes what a non-technical
   reader needs differently:

     - prose is wider-set and larger; this is read, not scanned
     - the tier chips say "We commit to this" instead of "Committed · FE"
     - findings become a three-column what-we-checked / found / means-for-you
     - technical detail is demoted into a visibly-secondary "for your
       developer" aside rather than deleted, so the same document still
       answers a developer's questions

   The estimate NUMBERS are identical to the delivery view. Only the words
   around them change. If a number here disagrees with pitch/design/, the
   delivery view and estimate.json are right and this file is wrong.
   ========================================================================== */

/* ---- prose: set for reading, not scanning -------------------------------
   No max-width. It was 74ch, which was close to full-width while prose lived
   in a ~700px grid column; once the page became one column that cap stranded
   every paragraph 340px short of its panel. Content fills its container — see
   the MEASURE note in ../design/styles/global.css for the cost. */
.prose p{margin:0 0 14px;font-size:15px;line-height:1.72;color:var(--ink-3)}
.prose p:last-child{margin-bottom:0}
.prose p b,.prose li b{color:var(--ink);font-weight:600}
.prose .big{font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.prose ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.prose li{position:relative;padding-left:18px;font-size:15px;line-height:1.65;color:var(--ink-3)}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:var(--r-full);background:var(--line-strong)}

.part .phead h2{font-size:25px;letter-spacing:-.022em;line-height:1.22}
.part .phead p{font-size:14.5px;line-height:1.6}
.dochero h1{font-size:35px}
.dochero .lead{font-size:15.5px;line-height:1.7}

/* ---- the answer line: one sentence, set large, on its own ---------------- */
.answer{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:20px 24px}
.answer .k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.answer .t{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.45;color:var(--ink)}
.answer .t .n{font-family:var(--mono);font-weight:700}
.answer .d{margin-top:10px;font-size:14px;line-height:1.65;color:var(--ink-3)}

/* ---- headline numbers, plain-labelled ----------------------------------- */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fig{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-xs);padding:19px 20px;display:flex;flex-direction:column;gap:8px}
.fig.dep{border-style:dashed;border-color:var(--line-strong)}
.fig.ocard{background:var(--sunken);border-style:dotted;border-color:var(--line-strong)}
.fig .k{font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.4}
.fig .v{font-family:var(--mono);font-size:30px;font-weight:640;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.fig .v .u{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.fig.ocard .v{color:var(--ink-2)}
.fig .d{font-size:12.5px;color:var(--muted);line-height:1.6}
.fig .d b{color:var(--ink-2);font-weight:600}

/* ---- findings: what we checked / what we found / what it means ----------- */
.plain{display:flex;flex-direction:column}
.plain .r{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) 132px;gap:18px;
  padding:16px 0;border-top:1px solid var(--line-soft);align-items:start}
.plain .r:first-child{border-top:0;padding-top:0}
.plain .r:last-child{padding-bottom:0}
.plain .r>.n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted-2);margin-top:3px}
.plain .r .found{font-size:14px;color:var(--ink);line-height:1.55;font-weight:500}
.plain .r .means{font-size:13.5px;color:var(--ink-3);line-height:1.6}
.plain .r .means b{color:var(--ink);font-weight:600}
.plain .r .tag{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.plain .lead-row{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) 132px;gap:18px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* good news / bad news mark — a word, always */
.mk{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--ink-2);
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 8px;white-space:nowrap}
.mk svg{width:12px;height:12px;stroke-width:2;flex:0 0 auto}
.mk-good svg{color:var(--ok)}
.mk-bad svg{color:var(--warn)}
.mk-note svg{color:var(--info)}

/* ---- the three options --------------------------------------------------
   NAMED .ocard / .ocards, NOT .opt / .opts. The shared kit declares
   `.ocard{display:flex;align-items:center;height:38px;...}` at
   _kit/mockup-base.css:481 for the picker-menu option row, and it is NOT
   scoped to .picker-menu. Cards named .opt therefore inherited height:38px,
   collapsed to a 42px box, and painted 699px of content out over the banner
   below them. Do not rename this back. --- ----------------------------------------------- */
.ocards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch}
.ocard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);
  padding:20px;display:flex;flex-direction:column;gap:13px;min-width:0}
.ocard.rec{box-shadow:var(--shadow-sm),inset 3px 0 0 var(--brand)}
.ocard.mid{border-style:dashed;border-color:var(--line-strong)}
.ocard.far{background:var(--sunken);border-style:dotted;border-color:var(--line-strong)}
.ocard .oh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ocard .oh h3{margin:0;font-size:15.5px;font-weight:620;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.ocard .oh .hrs{margin-left:auto;font-family:var(--mono);font-size:15px;font-weight:640;color:var(--ink);white-space:nowrap}
.ocard.far .oh h3,.ocard.far .oh .hrs{color:var(--muted)}
.ocard .ol{font-size:13.5px;color:var(--ink-3);line-height:1.6}
.ocard .grp{margin-top:2px}
.ocard .grp .gk{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--ink-2);
  margin-bottom:7px}
.ocard .grp .gk svg{width:13px;height:13px;stroke-width:2;flex:0 0 auto}
.ocard .grp .gk.yes svg{color:var(--ok)}
.ocard .grp .gk.no svg{color:var(--warn)}
.ocard .grp ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.ocard .grp li{position:relative;padding-left:13px;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.ocard .grp li::before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;
  border-radius:var(--r-full);background:var(--muted-2)}
.ocard .ft{margin-top:auto;padding-top:6px}

/* ---- "for your developer": present but visibly secondary ---------------- */
.dev{background:#fafafa;border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:12px 15px}
.dev .dk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.dev .dk svg{width:13px;height:13px;stroke-width:1.75;flex:0 0 auto;color:var(--muted-2)}
.dev .db{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.dev .db .m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.dev .db b{color:var(--ink-2);font-weight:600}

/* ---- plain work table --------------------------------------------------- */
.wtbl .what{font-size:14px;font-weight:500;color:var(--ink);line-height:1.5}
.wtbl .why{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:4px}
.wtbl .why b{color:var(--ink-2);font-weight:600}

/* ---- promise / cannot columns ------------------------------------------- */
/* stacked: "what we promise" then "what we cannot", divided by a rule.
   Side by side they were two reading columns; the page has one. */
.pcols{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.pcols>.c{padding:0;min-width:0}
.pcols>.c+.c{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pcols .h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:620;color:var(--ink);
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.pcols .h svg{width:15px;height:15px;stroke-width:2;flex:0 0 auto}
.pcols .h.yes svg{color:var(--ok)}
.pcols .h.no svg{color:var(--danger)}

/* .figs still steps down — three headline numbers are ONE glanceable row, read
   across, not three columns of content. .ocards and .pcols are stacked at all
   widths and must not reappear here. */
@media (max-width:1099px){
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .figs{grid-template-columns:minmax(0,1fr)}
  .plain .r,.plain .lead-row{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .plain .r .means,.plain .r .tag{grid-column:2}
  .plain .lead-row{display:none}
  .dochero h1{font-size:26px}
}

/* ---- stage-card footnotes ------------------------------------------------
   `.pc` is declared `flex:0 0 auto` in the delivery CSS because it was built
   to hold a percentage — "62%". The stage cards in part 05 reuse it for a
   whole sentence ("You end with evidence, not assurances"), which then could
   not shrink and pushed the PAGE sideways by 7px at 1280, 16px at 1100 and
   47px at 390. My misuse of the primitive, not a bug in it: let it shrink and
   wrap here rather than widening the primitive for everyone. */
.mcard .ft{flex-wrap:wrap}
.mcard .ft .pc{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.5}