/* ROI3 v18 Business Development and Marketing. Every selector is anchored to #revenue and a bd18 or mk18 hook. Amber always means "what has to be true". Reuses the retained revenue-v17.css label, gate and table classes as they are. */

/* Shared headline scale, matching the Sales headline */
#revenue .bd18-h, #revenue .mk18-h { max-width: 22ch; margin-bottom: .5rem; font-size: clamp(1.9rem, 4.4vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }

/* Openers */
#revenue .bd18-open:hover .rev17-n, #revenue .mk18-open:hover .rev17-n { text-decoration-color: var(--blue); }
#revenue .bd18-open:hover > .rev17-plus, #revenue .mk18-open:hover > .rev17-plus { background: var(--ink); }

/* SVG paint */
#revenue .bd18-f-ink { fill: var(--ink); stroke: none; }
#revenue .bd18-f-partner { fill: #d9dcf5; }
#revenue .bd18-t-white { fill: #fff; stroke: none; }
#revenue .bd18-l-follow { stroke: var(--blue); stroke-width: 1.5; }
#revenue .bd18-l-thick { stroke-width: 3; }

/* BD: research desk and Marketing: workbench */
#revenue .bd18-desk, #revenue .mk18-bench { position: relative; display: grid; grid-template-areas: "art text" "clocks clocks"; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: .5rem .75rem; align-items: center; min-height: 44px; margin-top: 1.1rem; padding: .25rem 2rem .25rem 0; }
#revenue .bd18-briefs, #revenue .mk18-tiles { grid-area: art; width: 100%; height: auto; }
#revenue .bd18-desk-t, #revenue .mk18-bench-t { grid-area: text; min-width: 0; }
#revenue .bd18-time .rev17-clock-t strong, #revenue .mk18-time .rev17-clock-t strong { white-space: nowrap; }

/* Released-hours scale: one common scale, no gap between segments */
#revenue .bd18-scale, #revenue .mk18-scale { margin-top: .6rem; }
#revenue .bd18-split, #revenue .mk18-split { position: relative; display: grid; }
#revenue .bd18-split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
#revenue .mk18-split { grid-template-columns: minmax(0, 12fr) minmax(0, 12fr); }
#revenue .bd18-split-scale { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); margin-top: .15rem; color: var(--muted); font-size: .8rem; line-height: 1.2; }
#revenue .bd18-split-scale-r { display: flex; justify-content: space-between; }
#revenue .mk18-split-scale { display: flex; justify-content: space-between; margin-top: .15rem; color: var(--muted); font-size: .8rem; line-height: 1.2; }
#revenue .bd18-under { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; margin-top: .2rem; }
#revenue .bd18-under-use { display: flex; align-items: center; gap: .5rem; padding-left: 1.5rem; }
#revenue .bd18-under-rest { padding-top: .25rem; }
#revenue .bd18-under-use .rev17-under-t { font-weight: 800; }

/* BD: partner network band */
#revenue .bd18-band { min-width: 0; margin-top: .75rem; padding: .8rem; border-radius: .35rem; background: #f1f0fb; }
#revenue .bd18-network { display: grid; gap: 1rem; }
#revenue .bd18-netfig { position: relative; display: block; min-width: 0; padding-right: 0; }
#revenue .bd18-net { width: 100%; max-width: 22rem; height: auto; margin: 0 auto .5rem; }
#revenue .bd18-netcap { display: block; padding-right: 2rem; }
#revenue .bd18-netfig > .rev17-plus { top: auto; right: 0; bottom: .35rem; }
#revenue .bd18-rungs { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
#revenue .bd18-rungs li { min-width: 0; }
#revenue .bd18-rung { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem; align-items: center; min-height: 44px; padding: .35rem 2rem .35rem 0; }
#revenue .bd18-key { width: 100%; height: auto; }
#revenue .bd18-rung-t { min-width: 0; }
#revenue .bd18-rung-link { display: flex; align-items: center; gap: .6rem; padding-left: 1.6rem; }

/* BD: handoffs between lanes */
#revenue .bd18-handoff { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .5rem 0 .5rem 1.6rem; }
#revenue .bd18-handoff .rev17-gate { min-width: 0; }
#revenue .bd18-pic-opps { max-width: 8rem; }

/* Reader content shared by BD and Marketing, both in the article and cloned into the dialog */
#revenue .bd18-content p, #revenue .mk18-content p { margin: 0 0 .8rem; }
#revenue .bd18-content .bd18-lead, #revenue .mk18-content .mk18-lead { font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
#revenue .bd18-content .bd18-decide, #revenue .mk18-content .mk18-decide { margin: 1rem 0; padding: .7rem .85rem; border-left: 4px solid var(--amber); border-radius: .25rem; background: #fff7ea; }
#revenue .bd18-content .rev17-next, #revenue .mk18-content .rev17-next { margin: 1rem 0 0; }
#revenue .bd18-content .bd18-calc { margin: .6rem 0 0; font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
#revenue .bd18-calc strong { color: var(--teal); font-weight: 800; }
#revenue .bd18-w33 { width: 33.33%; }
#revenue .bd18-w67 { width: 66.67%; }
#revenue .bd18-w70 { width: 70%; }
#revenue .bd18-w30 { width: 30%; }

/* BD reader: paper records */
#revenue .bd18-record { margin: 0 0 1rem; padding: .7rem .85rem; border: 2px solid var(--ink); border-radius: .25rem; background: #fff; }
#revenue .bd18-content .bd18-record-h { margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); font-size: .92rem; font-weight: 800; line-height: 1.25; }
#revenue .bd18-record-dl { display: grid; gap: .45rem; margin: 0; }
#revenue .bd18-record-dl dt { font-size: .84rem; font-weight: 800; line-height: 1.25; }
#revenue .bd18-record-dl dd { margin: 0; font-size: .95rem; line-height: 1.35; }

/* BD reader: hour blocks */
#revenue .bd18-hours { width: 100%; height: auto; }

/* BD reader: the anatomy of a follow-up */
#revenue .bd18-msg { display: grid; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
#revenue .bd18-msg li { padding: .45rem .6rem; border-left: 4px solid var(--blue); border-radius: .2rem; background: var(--bg); font-size: .95rem; line-height: 1.3; }
#revenue .bd18-msg-k { display: block; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

/* BD reader: relationship line */
#revenue .bd18-tri { width: 100%; height: auto; }
#revenue .bd18-tri-key { display: grid; gap: .3rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: .92rem; line-height: 1.3; }
#revenue .bd18-tri-key strong { font-size: 1.1rem; font-weight: 800; }

/* BD reader: win arithmetic */
#revenue .bd18-winfig { display: grid; gap: .75rem; }
#revenue .bd18-winpic { width: 100%; max-width: 12rem; height: auto; }
#revenue .bd18-sums { min-width: 0; }
#revenue .bd18-content .bd18-sum { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.25; }
#revenue .bd18-content .bd18-sum:last-child { margin-bottom: 0; }
#revenue .bd18-sum span { display: block; color: var(--muted); }
#revenue .bd18-sum strong { display: block; font-size: 1.2rem; font-weight: 800; }
#revenue .bd18-checks { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
#revenue .bd18-checks li { padding: .3rem .7rem; border: 2px solid var(--amber); border-radius: 2rem; background: #fff; font-size: .9rem; font-weight: 700; line-height: 1.2; }

/* BD reader: margin bar and value path */
#revenue .bd18-bar { display: flex; width: 100%; }
#revenue .bd18-bar-cost, #revenue .bd18-bar-profit { display: flex; align-items: center; min-height: 2.25rem; padding: .2rem .45rem; color: #fff; font-size: .95rem; font-weight: 800; }
#revenue .bd18-bar-cost { background: #6b7a90; }
#revenue .bd18-bar-profit { background: var(--teal); }
#revenue .bd18-valuepath { display: grid; gap: .3rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: bd18step; }
#revenue .bd18-valuepath li { position: relative; padding: .35rem .6rem .35rem 2.1rem; border-radius: .2rem; background: var(--bg); font-size: .92rem; font-weight: 700; line-height: 1.25; counter-increment: bd18step; }
#revenue .bd18-valuepath li::before { content: counter(bd18step); position: absolute; top: .3rem; left: .55rem; display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 800; }
#revenue .bd18-valuepath li:last-child { background: #e6f4f2; }
#revenue .bd18-valuepath li:last-child::before { background: var(--teal); }

/* Marketing: test card */
#revenue .mk18-testcard { position: relative; display: block; min-height: 44px; margin-top: .8rem; padding: .7rem 2.1rem .7rem .8rem; border: 2px solid var(--line); border-radius: .35rem; background: #fff; }
#revenue .mk18-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 .2rem; }
#revenue .mk18-chip { padding: .2rem .55rem; border: 1px solid #8796ab; border-radius: .25rem; background: var(--bg); color: var(--muted); font-size: .84rem; font-weight: 600; line-height: 1.2; }
#revenue .mk18-chip-on { border-color: var(--teal); background: var(--teal); color: #fff; font-weight: 800; }

/* Marketing: comparable lanes. Two columns stay side by side, even on a phone, so the comparison survives. */
#revenue .mk18-lanes { margin-top: 1.5rem; padding-top: 1rem; border-top: 3px solid var(--ink); }
#revenue .mk18-lanes-h { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 800; }
#revenue .mk18-lanes-p { max-width: 62ch; margin: 0 0 .75rem; color: var(--muted); line-height: 1.35; }
#revenue .mk18-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .5rem; padding: .55rem 0; border-top: 1px solid var(--line); }
#revenue .mk18-row-top { padding: .25rem 0; border-top: 0; }
#revenue .mk18-lane-name { font-size: .92rem; font-weight: 800; line-height: 1.2; }
#revenue .mk18-row-h { grid-column: 1 / -1; min-width: 0; margin: 0; font-size: .98rem; font-weight: 800; line-height: 1.2; }
#revenue .mk18-row-h span { display: block; color: var(--muted); font-size: .84rem; font-weight: 400; line-height: 1.25; }
#revenue .mk18-row-key .mk18-row-h { color: var(--teal); }
#revenue .mk18-cell { position: relative; display: grid; align-content: start; gap: .3rem; min-width: 0; min-height: 44px; padding: .5rem 1.9rem .5rem .55rem; border-radius: .25rem; background: var(--bg); }
#revenue .mk18-cell-b { background: #e6f4f2; }
#revenue .mk18-cell > .rev17-plus { top: .3rem; right: .3rem; width: 1.3rem; height: 1.3rem; font-size: .95rem; }
#revenue .mk18-medium { color: var(--muted); font-size: .84rem; line-height: 1.2; }
#revenue .mk18-slips { width: 100%; max-width: 11rem; height: auto; }
#revenue .mk18-slip-raw { fill: #fff; stroke: #8796ab; stroke-width: 1; }
#revenue .mk18-slip-q { fill: var(--teal); stroke: var(--teal); stroke-width: 1; }
#revenue .mk18-people { width: 100%; max-width: 5rem; height: auto; }
#revenue .mk18-bar { display: block; width: 100%; height: .7rem; background: var(--track); }
#revenue .mk18-fill { display: block; height: 100%; }
#revenue .mk18-fill-cost { background: #6b7a90; }
#revenue .mk18-fill-after { background: var(--teal); }
#revenue .mk18-fill-booked { background: var(--blue); }
#revenue .mk18-fill-profit { background: var(--teal); }
#revenue .mk18-fill-media { background: var(--amber); }
#revenue .mk18-w100 { width: 100%; }
#revenue .mk18-w70 { width: 70%; }
#revenue .mk18-w67 { width: 66.67%; }
#revenue .mk18-w47 { width: 46.67%; }
#revenue .mk18-w30 { width: 30%; }
#revenue .mk18-w23 { width: 23.33%; }
#revenue .mk18-w20 { width: 20%; }
#revenue .mk18-w13 { width: 13.33%; }
#revenue .mk18-w7 { width: 6.67%; }
#revenue .mk18-gaterow { display: flex; align-items: center; gap: .7rem; padding: .5rem 0 .5rem 1.6rem; border-top: 1px solid var(--line); }
#revenue .mk18-gaterow .rev17-gate { min-width: 0; }
#revenue .mk18-scale-note { margin: .1rem 0 .7rem; color: var(--muted); font-size: .84rem; line-height: 1.25; }
#revenue .mk18-result { display: grid; gap: .5rem; justify-items: start; }
#revenue .mk18-delta { position: relative; display: block; width: 100%; min-height: 44px; padding: .7rem 2.1rem .7rem .8rem; border-radius: .35rem; background: var(--ink); }
#revenue .mk18-delta .rev17-k { color: #8fe0d2; }
#revenue .mk18-delta .rev17-n { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
#revenue .mk18-delta .rev17-d { color: #c9d4e3; }
#revenue .mk18-delta > .rev17-plus { background: #fff; color: var(--ink); }
#revenue .mk18-delta:hover > .rev17-plus { background: #5eead4; }

/* Marketing reader */
#revenue .mk18-test-on th, #revenue .mk18-test-on td { background: #e6f4f2; color: var(--ink); font-weight: 800; }
#revenue .mk18-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
#revenue .mk18-duo > div { min-width: 0; }
#revenue .mk18-content .mk18-duo-h { margin: 0 0 .3rem; font-size: .92rem; font-weight: 800; line-height: 1.2; }
#revenue .mk18-content .mk18-duo-t { margin: .4rem 0 0; font-size: .9rem; line-height: 1.25; }
#revenue .mk18-factors { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
#revenue .mk18-factors li { padding: .3rem .7rem; border: 2px dashed var(--amber); border-radius: .25rem; background: #fff; font-size: .9rem; font-weight: 700; line-height: 1.2; }
#revenue .mk18-content .mk18-unit-l { margin: 0 0 .15rem; font-size: .9rem; font-weight: 700; line-height: 1.25; }
#revenue .mk18-content .mk18-unit-track { display: flex; margin: 0 0 .55rem; }
#revenue .mk18-unit-fill { display: flex; align-items: center; min-height: 2.25rem; padding: .2rem .5rem; color: #fff; font-size: .95rem; font-weight: 800; line-height: 1.1; }
#revenue .mk18-content .mk18-stack { display: flex; margin: 0 0 .55rem; }
#revenue .mk18-seg { display: block; min-height: 2rem; }
#revenue .mk18-seg-cost { background: #6b7a90; }
#revenue .mk18-seg-media { background: var(--amber); }
#revenue .mk18-seg-contrib { background: var(--teal); }
#revenue .mk18-content .mk18-legend { margin: .45rem 0 0; font-size: .86rem; line-height: 1.5; }
#revenue .mk18-key { display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; }
#revenue .mk18-key + .mk18-key { margin-left: .5rem; }

@media (min-width: 640px) {
  #revenue .bd18-record-dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; }
  #revenue .bd18-tri-key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  #revenue .bd18-winfig { grid-template-columns: 12rem minmax(0, 1fr); align-items: center; }
}

@media (min-width: 760px) {
  #revenue .mk18-row { grid-template-columns: 12rem repeat(2, minmax(0, 1fr)); align-items: start; gap: .5rem .75rem; }
  #revenue .mk18-row-h { grid-column: auto; padding-top: .35rem; }
  #revenue .mk18-row-top .mk18-lane-name:first-child { grid-column: 2; }
  #revenue .mk18-result { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
}

@media (min-width: 900px) {
  #revenue .bd18-desk, #revenue .mk18-bench { grid-template-areas: "art clocks text"; grid-template-columns: 12rem auto minmax(0, 1fr); gap: 1.5rem; }
  #revenue .bd18-desk-t .rev17-n, #revenue .mk18-bench-t .rev17-n { font-size: 1.3rem; }
  #revenue .bd18-desk-t .rev17-d, #revenue .mk18-bench-t .rev17-d { font-size: 1rem; }
  #revenue .bd18-band { padding: .9rem 1rem 1rem; }
  #revenue .bd18-network { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
  #revenue .bd18-net { max-width: 24rem; }
}