/* Custom-Built Systems page (30 Sep 2026, Kristian): same framework as Training.
   The page loads pages-training.css for the shared blocks; this file only holds
   the hero visual's drawing. The card frame reuses the Training .trm classes. */
.cbm-doc { fill: #232A31; stroke: #AFC4DD; stroke-width: 1.5; }
.cbm-doc--back { stroke: rgba(175, 196, 221, 0.45); }
.cbm-line { stroke: #AFC4DD; stroke-width: 1.5; stroke-linecap: round; opacity: 0.7; }
.cbm-arrow { fill: none; stroke: #AFC4DD; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 5; }
.cbm-head { fill: none; stroke: #AFC4DD; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbm-box { fill: rgba(175, 196, 221, 0.12); stroke: #AFC4DD; stroke-width: 1.5; }
.cbm-loop { fill: none; stroke: #AFC4DD; stroke-width: 2.5; stroke-linecap: round; }
.cbm-p circle, .cbm-p path { fill: #AFC4DD; }
.cbm-badge circle { fill: #FAFAF8; }
.cbm-badge path { fill: none; stroke: #1B3A5B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cbm-track { fill: rgba(250, 250, 248, 0.1); }
.cbm-fill { fill: #AFC4DD; transform-box: fill-box; transform-origin: left center; transition: transform 900ms cubic-bezier(.2,.8,.2,1), fill 600ms ease; }
.cbm-flow, .cbm-sys, .cbm-badge, .cbm-num { transition: opacity 500ms cubic-bezier(.2,.8,.2,1); }
.cbm-spin { transform-box: fill-box; transform-origin: center; }
/* step 1: done by hand, full bar, the system not there yet */
.trm[data-step="1"] .cbm-flow, .trm[data-step="1"] .cbm-sys { opacity: 0.15; }
.trm[data-step="1"] .cbm-fill { fill: #586069; }
.trm:not([data-step="1"]) .cbm-fill { transform: scaleX(0.25); }
.trm[data-step="1"] .cbm-num--after, .trm:not([data-step="1"]) .cbm-num--before { opacity: 0; }
/* step 2: the system runs; step 3: the person signs it off */
.trm:not([data-step="1"]) .cbm-arrow { animation: cbm-dash 1.2s linear infinite; }
.trm:not([data-step="1"]) .cbm-spin { animation: cbm-turn 6s linear infinite; }
.trm:not([data-step="3"]) .cbm-badge { opacity: 0; }
@keyframes cbm-dash { to { stroke-dashoffset: -20; } }
@keyframes cbm-turn { to { transform: rotate(360deg); } }
.trm.is-done .cbm-arrow, .trm.is-done .cbm-spin { animation: none; }
@media (prefers-reduced-motion: reduce) { .cbm-arrow, .cbm-spin { animation: none !important; } .cbm-fill, .cbm-flow, .cbm-sys, .cbm-badge, .cbm-num { transition: none !important; } }
/* Words, not a figure, in the closing price and the package prices. */
.cb-page .tr-final__price { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; }
.cb-page .tr-offer__price { font-size: clamp(26px, 2.4vw, 34px); }

/* Breathing room (Kristian, 30 Sep 2026): the illustrative note is gone, so the
   card gets more padding, more space between drawing, bar and caption, and a
   larger bar label. */
.cb-page .trm.cbm { padding: 34px 30px 26px; }
.cb-page .cbm .trm__svg { margin-top: 26px; }
.cb-page .cbm .trm__barlabel { font-size: 15px; }
.cb-page .cbm .trm__cap { margin-top: 22px; font-size: 22px; line-height: 1.3; }
.cb-page .cbm .trm__foot { margin-top: 18px; }