/* SELLUP PITCH — GROWTH PROGRAMME. Loads after _kit/mockup-base.css and
   ../design/styles/global.css, so it inherits every token and primitive.

   NAMING: nothing here may reuse a class the shared kit declares. The kit owns
   `.opt`, `.cb` and `.sw` unscoped and all three have bitten this project.
   New names are distinct and were checked against the kit before use. */

/* objective vs commitment — the central distinction on this page */
.oc{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-xs);overflow:hidden}
.oc>.c{padding:18px 20px;min-width:0}
.oc>.c+.c{border-top:1px solid var(--line)}
.oc>.c.target{background:var(--sunken)}
.oc .h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:620;color:var(--ink);
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.oc .h svg{width:15px;height:15px;stroke-width:2;flex:0 0 auto}
.oc .h.tgt svg{color:var(--warn)}
.oc .h.cmt svg{color:var(--ok)}
.oc .h .tail{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* per-unit rate card

   CELL CLASSES ARE .ru / .rq / .rtot — NOT .u / .q / .t.
   `pitch/design/styles/global.css` declares a BARE `.q{padding:14px 0;
   border-top:1px solid var(--line-soft)}` for the question-card primitive in
   the delivery view's part 10, and this page inherits that stylesheet. A cell
   classed `.q` therefore picked up 28px of vertical padding AND a stray top
   border, which rendered as short rules floating above every row and a header
   row 58px tall instead of 25px. SIXTH class collision on this project — and
   the first against a genuinely UNSCOPED shared rule, which is the dangerous
   kind. Do not rename these back.

   The header also has its own selectors rather than sharing the data-cell
   ones: when both used `.u/.q/.t`, the data rule's 12.5px font-size overrode
   the header's 10px micro type, so "DELIVERABLE" and "UNIT RATE" rendered at
   two different sizes. */
.rate{display:flex;flex-direction:column}
.rate .r{display:grid;grid-template-columns:minmax(0,1fr) 116px 70px 96px;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line-soft)}
.rate .r:first-of-type{border-top:0;padding-top:0}
.rate .hd{display:grid;grid-template-columns:minmax(0,1fr) 116px 70px 96px;gap:14px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.rate .hd>*{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);line-height:1.4;white-space:normal}
.rate .hd .ru,.rate .hd .rq,.rate .hd .rtot{text-align:right}
.rate .nm{font-size:13.5px;color:var(--ink);line-height:1.5;min-width:0}
.rate .nm .d{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:2px}
.rate .r .ru,.rate .r .rq,.rate .r .rtot{font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap}
.rate .r .ru{color:var(--ink-2)}
.rate .r .rq{color:var(--muted)}
.rate .r .rtot{font-weight:600;color:var(--ink)}

/* checklist — ONE column. Two columns made a 58-item list read as a zig-zag:
   the reader had to guess whether item order ran down the left column or
   across the pair. Class name kept (`ck2`) so the fragment needs no edit. */
.ck2{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.ck2 .g{min-width:0;break-inside:avoid}
.ck2 .gh{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 0 8px;
  border-bottom:1px solid var(--line);margin-bottom:2px}
.ck2 .gh .n{margin-left:auto;color:var(--ink-2)}
.ck2 .i{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;padding:8px 0;
  border-top:1px solid var(--line-soft);align-items:start}
.ck2 .g .i:first-of-type{border-top:0}
.ck2 .i .bx{width:13px;height:13px;margin-top:3px;border:1px solid var(--line-strong);
  border-radius:3px;background:var(--card);flex:0 0 auto}
.ck2 .i .bx.done{background:var(--primary);border-color:var(--primary);position:relative}
.ck2 .i .bx.done::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.ck2 .i .tx{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.ck2 .i .tx b{color:var(--ink);font-weight:600}
.ck2 .i .tx .m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
/* NAMED .ckst, NOT .st: the delivery stylesheet declares
   `.st{display:inline-flex;white-space:nowrap}` for the status-code primitive,
   and this page inherits it. A scoped `.ck2 .i .tx .st` set display:block but
   not white-space, so nowrap won and one evidence note rendered 671px wide
   inside a 483px column — clipped by `.panel{overflow:hidden}`. FIFTH class
   collision on this project; the first four were against the kit, this one
   against the shared product CSS. Do not rename this back. */
.ck2 .i .tx .ckst{display:block;margin-top:3px;font-size:11px;color:var(--muted);line-height:1.5}

/* .oc and .ck2 are single-column at every width — nothing to collapse here. */
@media (max-width:899px){
  .rate .r,.rate .hd{grid-template-columns:minmax(0,1fr) 96px 60px 84px;gap:10px}
}
@media (max-width:639px){
  .rate .hd{display:none}
  .rate .r{grid-template-columns:minmax(0,1fr) 84px;gap:6px 10px}
  .rate .r .rq{grid-column:1}
}

/* ---- grid children must be allowed to shrink -----------------------------
   Two clipping bugs, same cause. A grid item's default `min-width:auto` is its
   MIN-CONTENT width, so a track declared `minmax(0,1fr)` still refuses to go
   below the longest unbreakable string inside it — and `.panel` is
   `overflow:hidden`, so the excess is cut off rather than scrolled.

   · `.rate .nm` overflowed the rate tables by 5px at 640.
   · `.ck2 .i .tx` overflowed the checklist panel by 172px at 1440, because the
     evidence notes carry long mono paths — `/buy/{category}/{brand}/{model}`,
     `/profile/ /checkout /api/` — that have no break opportunity.

   min-width:0 lets the track shrink; overflow-wrap:anywhere gives the mono
   strings somewhere to break. Nothing is truncated and nothing is hidden. */
.rate .nm{min-width:0}
.ck2 .i .tx{min-width:0}
.ck2 .i .tx .m,.ck2 .i .tx .ckst{overflow-wrap:anywhere}