/* acquisition-budget, pilot round 4 (2026-10-04). Linked only from article-acquisition-budget.html.
   Format: two companies, one tenant. The article runs in two columns, your side and their side,
   that sit far apart at signing and move closer with every line item, then merge into one column
   at the command center. A strip under the site header carries the two company names and slides
   them together with the columns. The deal-model budget against what Day 1 takes is drawn on paper:
   the five unfunded steps lift down into one total. Motion lives in assets/pilot/acquisition-budget.js. */

.tc-page{--ink:#16150f;--ink2:#33312a;--mut:#6b6660;--paper:#f7f5f0;--paper2:#efece4;--nv:#16304F;--rd:#e5322d;--rd2:#A93A3A;--gd:#B8862F;
  --hair:rgba(22,21,15,.16);background:var(--paper);}
.tc-page ::selection{background:#16304F;color:#f7f5f0;}
.tc a:focus-visible,.tc button:focus-visible{outline:2px solid #B8862F;outline-offset:3px;}
.tc section{padding:0;}
.tc p{margin:0;}
.tc-w{width:min(1160px,calc(100vw - 48px));margin:0 auto;}

/* ---------- opener ---------- */
.tc-open{padding:clamp(1.8rem,4vw,2.8rem) 0 clamp(2.5rem,5vw,3.5rem) !important;}
.tc-open .back-link{display:inline-block;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink);margin:0 0 2.4rem;}
.tc-open h1{font-family:var(--serif);font-weight:400;margin:0 0 2rem;color:var(--ink);letter-spacing:-.035em;max-width:none;text-align:center;}
.tc-h1a{display:block;font-size:clamp(2.7rem,7.2vw,6rem);line-height:.95;}
.tc-h1b{display:block;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink2);margin-top:.9rem;}
.tc-open-r{max-width:640px;margin:0 auto;text-align:center;}
.tc-open .dek{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.32rem);line-height:1.48;color:var(--ink);margin:0 0 1.2rem;}
.tc-open .article-meta{font-family:var(--sans);font-size:.84rem;color:var(--mut);font-variant-numeric:tabular-nums;}
.tc-open .article-meta b{color:var(--ink);font-weight:600;}
.tc-open .sep{margin:0 .55rem;color:#b9b2a4;}

/* ---------- the two columns, closer at every stage ---------- */
.tc-stages{--g0:min(260px,17vw);}
.tc-stage{--k:1;--g:calc(var(--g0) * var(--k));--cw:min(460px,calc((100vw - 48px - var(--g)) / 2));
  padding:clamp(2.6rem,5vw,3.6rem) 0 0 !important;}
.tc-stage[data-s="1"]{--k:.66;} .tc-stage[data-s="2"]{--k:.42;} .tc-stage[data-s="3"]{--k:.22;} .tc-stage[data-s="4"]{--k:.07;}
.tc-stage[data-s="0"]{padding-top:0 !important;}
.tc-cols{display:grid;grid-template-columns:var(--cw) var(--cw);column-gap:var(--g);justify-content:center;}
.tc-you{grid-column:1;grid-row:1;min-width:0;}
.tc-them{grid-column:2;grid-row:1;min-width:0;background:var(--paper2);padding:1.3rem 1.5rem .3rem;align-self:start;}
.tc-cols > div > p{font-family:var(--serif);font-size:1.12rem;line-height:1.62;color:var(--ink2);margin:0 0 1.1rem;}
.tc-side{font-family:var(--sans) !important;font-size:.92rem !important;font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.06em;
  color:var(--mut) !important;margin:0 0 .9rem !important;line-height:1.2 !important;}
.tc-you .tc-side{padding-top:1.3rem;}
.tc-h{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3vw,2.55rem);line-height:1.08;letter-spacing:-.025em;color:var(--ink);
  text-align:center;max-width:22ch;margin:0 auto 1.6rem;}
.tc-stage > .tc-h{padding-top:1.4rem;border-top:1px solid var(--ink);max-width:calc(var(--cw) * 2 + var(--g));}

/* the deal-model sheet: the one framed object, because it is a literal document */
.dml{margin:0 0 1.8rem;background:#fbfaf6;border:1px solid rgba(22,21,15,.22);box-shadow:0 1px 0 rgba(22,21,15,.06),0 10px 24px -18px rgba(22,21,15,.35);
  padding:1.1rem 1.2rem .5rem;font-family:var(--sans);}
.dml-t{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--ink);margin:0 0 .8rem;}
.dml-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;padding:.6rem 0;border-top:1px solid var(--hair);font-size:.92rem;}
.dml-hd{font-size:.78rem;font-weight:600;color:var(--mut);border-top:1.5px solid var(--ink);}
.dml-row .li{color:var(--ink);font-weight:500;}
.dml-row .st{font-variant-numeric:tabular-nums;color:var(--nv);font-weight:600;text-align:right;}
.dml-row .ann{grid-column:1/-1;font-family:var(--serif);font-size:.98rem;color:var(--mut);}
.dml-gap{background:repeating-linear-gradient(135deg,rgba(169,58,58,.09) 0 2px,transparent 2px 7px);padding-left:.45rem;padding-right:.45rem;margin:0 -.45rem;}
.dml-gap .st{color:var(--rd2);}

/* their data into yours: three rows that cross the gap between the columns */
.xmap{display:grid;grid-template-columns:var(--cw) var(--cw);column-gap:var(--g);justify-content:center;margin:.4rem 0 2.2rem;font-family:var(--serif);}
.xm-r{display:contents;}
.xm-y,.xm-t{padding:.85rem 0;border-top:1px solid var(--hair);font-size:1.1rem;line-height:1.3;}
.xm-y{grid-column:1;text-align:right;color:var(--ink);}
.xm-y b{font-weight:500;}
.xm-t{grid-column:2;color:var(--ink2);background:var(--paper2);padding-left:1.5rem;padding-right:1.5rem;}
/* connectors sit in the gap, drawn as pseudo elements on the right cell */
.xm-t{position:relative;}
.xm-t::before{content:"";position:absolute;right:100%;top:50%;width:var(--g);height:0;border-top:1.5px solid var(--nv);}
.xm-t::after{content:"";position:absolute;left:-4px;top:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:var(--nv);}
.xm-r:nth-child(2) .xm-t::before{border-top-style:dashed;border-color:var(--rd2);width:calc(var(--g) * .55);}
.xm-r:nth-child(2) .xm-t::after{background:var(--rd2);}
.xm-r:nth-child(3) .xm-t::before{border-color:var(--gd);}
.xm-r:nth-child(3) .xm-t::after{background:var(--gd);}

/* first-year attrition */
.attr{margin:.4rem 0 1.4rem;font-family:var(--sans);}
.at-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;padding:.55rem 0;border-top:1px solid var(--hair);}
.at-l{font-size:.86rem;color:var(--ink2);}
.at-v{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.at-acq .at-v{color:var(--rd2);}
.at-bar{grid-column:1/-1;height:8px;position:relative;background:linear-gradient(rgba(22,21,15,.18),rgba(22,21,15,.18)) 0 50%/100% 1px no-repeat;}
.at-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(var(--w));background:var(--mut);}
.at-acq .at-bar i{background:var(--rd2);}
.at-note{font-size:.8rem;line-height:1.45;color:var(--mut);padding-top:.5rem;border-top:1px solid var(--hair);}

/* ---------- the strip that carries the two names ---------- */
.tc-mast{display:none;}
.tc-live .tc-mast{display:block;position:fixed;left:0;right:0;top:64px;height:40px;z-index:40;pointer-events:none;background:rgba(247,245,240,.97);
  border-bottom:1px solid var(--hair);opacity:0;transition:opacity .3s;}
.tc-live .tc-mast.on{opacity:1;}
.tc-mast-in{position:relative;height:100%;}
.tc-mast span{position:absolute;left:0;top:50%;white-space:nowrap;font-family:var(--sans);font-size:.95rem;font-weight:600;
  font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--ink);display:flex;align-items:center;gap:.5rem;
  transform:translate(calc(var(--x,0px) - 50%),-50%);}
.tc-mast span::before{content:"";width:9px;height:9px;flex:none;}
.m-you::before{background:var(--nv);}
.m-them::before{background:var(--paper2);box-shadow:inset 0 0 0 1.5px var(--ink2);}
.m-one::before{background:linear-gradient(90deg,var(--nv) 50%,var(--gd) 50%);}
.tc-mast .m-one{opacity:0;}
.tc-mast b{font-weight:600;} .tc-mast .sh{display:none;}
@media (max-width:640px){ .tc-mast .lg{display:none;} .tc-mast .sh{display:inline;} }
.tc-mast.merged .m-you,.tc-mast.merged .m-them{opacity:0;}
.tc-mast.merged .m-one{opacity:1;}

/* ---------- merged: one column ---------- */
.tc-one{padding:clamp(3rem,6vw,4.4rem) 0 1rem !important;}
.tc-col{width:min(680px,calc(100vw - 48px));margin:0 auto;}
.tc-col > p{font-family:var(--serif);font-size:1.18rem;line-height:1.66;color:var(--ink2);margin:0 0 1.2rem;}
.tc-col > .tc-h{margin-top:3.4rem;}
.tc-col > .tc-h:first-child{margin-top:1.6rem;}
.tc-col a{color:var(--nv);}
.tc-seam{position:relative;width:min(680px,calc(100vw - 48px));height:3px;margin:0 auto;}
.tc-seam i{position:absolute;inset:0;transform-origin:50% 50%;}
.tc-seam .sy{background:var(--nv);} .tc-seam .st{background:var(--gd);mix-blend-mode:multiply;}

/* the comparison, drawn on paper */
.tcf{width:min(980px,calc(100vw - 48px));margin:1.2rem auto 3rem;--rh:48px;--lw:15.5rem;}
.tcf-t{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1.5px solid var(--ink);}
.tcf-rows{position:relative;}
.tr{display:grid;grid-template-columns:var(--lw) minmax(0,1fr);align-items:center;height:var(--rh);}
.tl{font-family:var(--sans);font-size:.88rem;color:var(--ink2);padding-right:1rem;line-height:1.25;}
.tl b{color:var(--ink);font-weight:600;}
.tt{position:relative;height:100%;background:linear-gradient(rgba(22,21,15,.12),rgba(22,21,15,.12)) 0 100%/100% 1px no-repeat;}
.sg{position:absolute;top:calc(50% - 9px);height:18px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--gd);}
.sg.base{background:var(--nv);}
.tr:not(.tr-total) .sg::after{content:"";position:absolute;right:0;top:100%;height:calc(var(--rh) - 18px);border-right:1px dotted var(--ink);opacity:.55;}
.tr.r5 .sg::after{display:none;}
.tr-total{height:calc(var(--rh) + 46px);align-items:start;padding-top:12px;border-top:1.5px solid var(--ink);margin-top:10px;}
.tt-total{height:var(--rh);background:none;box-shadow:inset 0 0 0 1px rgba(22,21,15,.0);}
.tt-total .sg{top:calc(50% - 12px);height:24px;}
.tt-total .sg + .sg{box-shadow:inset 1px 0 0 rgba(247,245,240,.7);}
.tcf-gap{position:absolute;left:27%;right:0;top:calc(50% + 20px);height:9px;border:solid var(--rd2);border-width:0 1.5px 1.5px;transform-origin:0 0;}
.tcf-gap span{position:absolute;right:0;top:14px;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--rd2);white-space:nowrap;}
.tcf figcaption{font-family:var(--sans);font-size:.86rem;line-height:1.55;color:var(--mut);max-width:76ch;margin-top:.4rem;}
.tcf figcaption b{color:var(--ink);font-weight:600;}
.tcf-ctl{font:600 .86rem var(--sans);color:var(--nv);background:none;border:0;padding:0 0 0 .3rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* closing ledger */
.tc-ledger{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);margin:1.4rem 0 2rem;border-top:1.5px solid var(--ink);}
.tc-ledger dt,.tc-ledger dd{margin:0;padding:.85rem 0;border-bottom:1px solid var(--hair);}
.tc-ledger dt{font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--ink);padding-right:1.4rem;line-height:1.4;}
.tc-ledger dd{font-family:var(--serif);font-size:1.06rem;line-height:1.5;color:var(--ink2);}
.tc-src{font-family:var(--sans) !important;font-size:.84rem !important;line-height:1.6 !important;color:var(--mut) !important;
  margin-top:2.2rem !important;padding-top:1.1rem;border-top:1px solid var(--hair);}
.tc-cta{padding:2rem 0 4rem !important;}

/* ---------- narrow: the columns stack, the strip still carries the names together ---------- */
@media (max-width:860px){
  .tc-stage{--cw:calc(100vw - 32px);}
  .tc-cols,.xmap{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .tc-them{grid-column:1;grid-row:auto;margin:.4rem 0 1.4rem;}
  .tc-you{grid-row:auto;}
  .tc-stage[data-s="4"] .tc-you{order:-1;}
  .tc-you .tc-side{padding-top:0;}
  .xm-y{grid-column:1;text-align:left;padding-bottom:.2rem;}
  .xm-t{grid-column:1;border-top:0;margin-bottom:.3rem;padding:.6rem 1rem;}
  .xm-t::before,.xm-t::after{display:none;}
  .xm-r{display:flex;flex-direction:column-reverse;}
  .xm-y{border-top:0;padding-top:.5rem;}
  .xm-y::before{content:"";display:inline-block;width:18px;height:0;border-top:1.5px solid var(--nv);vertical-align:middle;margin-right:.55rem;}
  .xm-t{border-top:0;}
  .tcf{--lw:minmax(0,1fr);--rh:62px;}
  .tr{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:end;}
  .tl{padding:0 0 .2rem;font-size:.82rem;}
  .tt{height:30px;}
  .tr:not(.tr-total) .sg{top:6px;}
  .tr:not(.tr-total) .sg::after{display:none;}
  .tr-total{height:calc(var(--rh) + 84px);}
  .tt-total{height:40px;}
  .tc-ledger{grid-template-columns:minmax(0,1fr);}
  .tc-ledger dt{border-bottom:0;padding-bottom:.1rem;}
  .tc-h1a{font-size:clamp(2.4rem,11vw,3.4rem);}
}
@media (max-width:560px){
  .tc-cols > div > p,.tc-col > p{font-size:1.08rem;}
  .tc-them{padding:1.1rem 1rem .2rem;}
  .tc-mast span{font-size:.85rem;}
}

/* ---------- motion: only when the script is live and motion is welcome ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  .tc-live .tc-mast span{transition:opacity .18s ease;}
  .tc-live .tc-mast.merged .m-one{transition:opacity .4s ease .22s;}
  .tc-live .tc-cols > div.slide{transition:transform .9s cubic-bezier(.25,.8,.2,1);}
  .tc-live .tc-seam i.slide{transition:transform 1.1s cubic-bezier(.25,.8,.2,1);}
  .tcf.prep .tt-total .sg{transform:translateY(calc(var(--k) * var(--rh) * -1 - 12px));opacity:0;}
  .tcf.prep .tt-total .sg.on{transform:none;opacity:1;transition:transform 1.1s cubic-bezier(.3,.7,.15,1),opacity .2s ease;}
  .tcf.prep .tt-total{box-shadow:inset 0 0 0 1px rgba(22,21,15,.28);}
  .tcf.prep.done .tt-total{box-shadow:none;transition:box-shadow .3s;}
  .tcf.prep .tcf-gap{transform:scaleX(0);opacity:0;}
  .tcf.prep.done .tcf-gap{transform:none;opacity:1;transition:transform .9s cubic-bezier(.3,.7,.15,1),opacity .2s;}
  .tcf.prep.skip .sg,.tcf.prep.skip .tcf-gap{transition:none !important;}
}
@media print{
  .tc-mast{display:none !important;}
  .tc-cols > div,.tc-seam i{transform:none !important;}
  .tcf .sg,.tcf-gap{transform:none !important;opacity:1 !important;}
  .tcf-ctl{display:none !important;}
}

/* print: site.js hides main > section as .reveal until scrolled into view; print it whether or not the reader scrolled (added 2026-10-05) */
@media print{main .reveal{opacity:1 !important;transform:none !important;}}

/* ---------- QA 2026-10-05 ---------- */
/* The names strip was 97% opaque, so the paragraph scrolling under it showed through behind the two labels. Make it solid. */
.tc-live .tc-mast{background:var(--paper);}
/* The shared "shadows off" rule (styles.css, !important) stripped the faint outline that marks the empty "What Day 1 takes" row
   before the comparison plays, so the row read as missing. Draw it with an outline. */
@media screen and (prefers-reduced-motion:no-preference){
  .tcf.prep .tt-total{outline:1px solid rgba(22,21,15,.28);outline-offset:-1px;}
  .tcf.prep.done .tt-total{outline-color:transparent;transition:outline-color .3s;}
}
/* Phone: the stage columns ran edge to edge, so "Your side" text and the deal-model sheet touched the screen edge. Give them the gutter.
   The data-mapping pairs were spaced tighter between pairs than within them, so each "yours" line read as belonging to the next row. */
@media (max-width:860px){
  .tc-you{padding-left:16px;padding-right:16px;}
  .xm-y{padding-left:16px;padding-right:16px;padding-top:.35rem;}
  .xm-t{margin-bottom:0;}
  .xm-r{margin-bottom:1.1rem;}
}
/* Phone: the byline wrapped with a separator left dangling at the end of the line. */
@media (max-width:560px){
  .tc-open .article-meta{column-gap:0;row-gap:.2rem;justify-content:center;}
  .tc-open .sep{margin:0 .45rem;}
}
/* The page's paragraph reset (.tc p) also zeroed the CTA band's paragraph margins, jamming its heading, text and button together. */
.tc .cta-band p{margin:1rem 0 1.7rem;}
/* Phone comparison: each bar sat closer to the next row's label than to its own, so labels read as belonging to the wrong bar.
   Keep each label directly over its bar, with the spare height above the label; the total row keeps its label tight to the box. */
@media (max-width:860px){
  .tr{grid-template-rows:auto auto;align-content:end;}
  .tr-total{align-content:start;}
}

/* ---------- Color 2026-10-09 ----------
   Lead red (#e5322d, deep #A93A3A for small text, tint #FDF3F3). Red is the money the deal
   model never carried and the company you bought; navy (#16304F) stays your company.
   The two meet in the strip and the seam as navy and red. */
.tc-page{--rt:#FDF3F3;}

/* the company you bought is red wherever the page names the two sides */
.tc-them .tc-side{color:var(--rd2) !important;}
.tc-you .tc-side{color:var(--nv) !important;}
.m-them::before{background:var(--rd);box-shadow:none;}
.m-one::before{background:linear-gradient(90deg,var(--nv) 50%,var(--rd) 50%);}
.tc-seam .st{background:var(--rd);}

/* the deal-model sheet: your company's document, under a navy header bar */
.dml{padding-top:0;}
.dml-t{margin:0 -1.2rem .9rem;padding:.7rem 1.2rem;background:var(--nv);color:#fff;font-size:1.04rem;}
.dml-gap{background:repeating-linear-gradient(135deg,rgba(229,50,45,.12) 0 2px,var(--rt) 2px 7px);}

/* the research, as a row of big red figures */
.tc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(calc(100% - 32px),calc(var(--cw) * 2 + var(--g)));margin:clamp(2rem,4vw,3rem) auto 0;padding:0;border-top:2px solid var(--rd);}
.tc-stats > div{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem 1rem 1.3rem 0;border-bottom:1px solid var(--hair);}
.tc-stats > div:nth-child(2n){padding-left:1rem;border-left:1px solid var(--hair);}
.tc-stats dt{font-family:var(--serif);font-size:clamp(2.5rem,5.4vw,3.7rem);font-weight:400;line-height:.95;letter-spacing:-.035em;color:var(--rd);font-variant-numeric:lining-nums;}
.tc-stats dt small{font-size:.42em;letter-spacing:0;font-weight:500;color:var(--rd2);}
.tc-stats dd{margin:0;font-family:var(--serif);font-size:1rem;line-height:1.42;color:var(--ink2);}
.tc-stats dd span{display:block;margin-top:.35rem;font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--mut);}
/* QA 2026-10-10: sources sit on one line across the row */
.tc-stats dd{flex:1;display:flex;flex-direction:column;}
.tc-stats dd span{margin-top:auto;padding-top:.35rem;}
@media (min-width:861px){
  .tc-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .tc-stats > div{border-bottom:0;padding:1.4rem 1.4rem .4rem;border-left:1px solid var(--hair);}
  .tc-stats > div:first-child{padding-left:0;border-left:0;}
}

/* the comparison sits on a full-bleed red band; the five unfunded steps are red */
.tc-band{margin:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem);padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(1.6rem,3vw,2.4rem);
  background-color:var(--rt);background-image:linear-gradient(rgba(169,58,58,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(169,58,58,.045) 1px,transparent 1px);background-size:32px 32px;
  border-top:1px solid rgba(169,58,58,.2);border-bottom:1px solid rgba(169,58,58,.2);}
.tc-band .tc-col > .tc-h{margin-top:0;}
.tc-band .tcf{margin-bottom:0;}
.sg{background:var(--rd);}
.sg.base{background:var(--nv);}
.tt-total .sg + .sg{border-left:1px solid var(--rt);}
.tcf-t{border-bottom-color:var(--ink);}

/* closing ledger: each line item carries the red mark of the step it funds */
.tc-ledger dt{position:relative;padding-left:1.25rem;}
.tc-ledger dt::before{content:"";position:absolute;left:0;top:1.12rem;width:.6rem;height:.6rem;background:var(--rd);}

@media print{
  .tc-band,.tc-stats,.dml-t,.sg,.tc-ledger dt::before{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* testing: the ten-times figure from the paragraph above, set as a margin number */
.tc-cols > div > p.tc-ten{display:flex;align-items:center;gap:1rem;margin:.4rem 0 1.4rem;padding:.9rem 0;border-top:2px solid var(--rd);border-bottom:1px solid var(--hair);}
.tc-ten b{flex:none;font-family:var(--serif);font-size:clamp(2.6rem,4.6vw,3.4rem);font-weight:400;line-height:1;letter-spacing:-.03em;color:var(--rd);}
.tc-ten span{font-family:var(--sans);font-size:.88rem;line-height:1.4;color:var(--ink2);max-width:18rem;}
@media print{.tc-ten{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}