/* AI Partnership page (rebuilt 30 Sep 2026, Kristian). Loads pages-training.css
   for the shared blocks (hero card frame, objections, month band, questions,
   closing card). This file holds the page's own pieces: the build-and-train rings,
   the built / trained panels, the milestone timeline and the cost sliders.
   Brand colours only; cards carry no shadow. */

/* ---------------------------------------------------------------- hero rings */
.ppm__svg { margin-top: 10px; }
.ppm-track { fill: none; stroke: rgba(250, 250, 248, 0.08); stroke-width: 12; }
.ppm-track--in { stroke-width: 10; }
.ppm-arc { fill: none; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms cubic-bezier(.2, .8, .2, 1); }
.ppm-arc--build { stroke: #AFC4DD; stroke-width: 12; }
.ppm-arc--train { stroke: #FAFAF8; stroke-width: 10; }
.ppm-start { fill: #FAFAF8; }
.ppm-mark { fill: #232A31; stroke: rgba(175, 196, 221, 0.35); stroke-width: 2; transition: fill 400ms ease, stroke 400ms ease; }
.ppm-mark.is-on { fill: #232A31; stroke: #FAFAF8; }
.ppm-lab { font: 600 14px 'Source Sans 3', system-ui, sans-serif; fill: rgba(175, 196, 221, 0.45); transition: fill 400ms ease; }
.ppm-lab.is-on { fill: #FAFAF8; }
.ppm-mid { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 36px; }
.ppm-amp { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 24px; fill: #AFC4DD; }
.ppm-mid--build { fill: #AFC4DD; }
.ppm-mid--train { fill: #FAFAF8; }
.ppm-key { stroke-width: 4; stroke-linecap: round; }
.ppm-key--build { stroke: #AFC4DD; }
.ppm-key--train { stroke: #FAFAF8; }
.ppm-legend { font: 400 12.5px 'Source Sans 3', system-ui, sans-serif; fill: #E5E5E2; }
@media (prefers-reduced-motion: reduce) { .ppm-arc, .ppm-mark, .ppm-lab { transition: none; } }

/* ------------------------------------------- what's included: three columns */
.pp-cmp thead th:first-child { width: 34%; }
.pp-cmp .tr-cmp__grp th { padding: 18px 20px 10px; background: rgba(175, 196, 221, 0.24); font: 500 19px/1.2 'Fraunces', Georgia, serif; color: #232A31; text-align: left; border-left: 0; }
.pp-cmp .pp-cmp__us, .pp-cmp tbody td:last-child { background: rgba(175, 196, 221, 0.14); font-weight: 600; }
.pp-cmp thead th.pp-cmp__us { background: #1B3A5B; color: #FAFAF8; }
.pp-cmp tfoot td.pp-cmp__us { background: rgba(175, 196, 221, 0.4); }
.pp-sep { margin: 20px 0 0; font-size: 15px; line-height: 1.55; color: #586069; }
.pp-sep strong { color: #232A31; }
.pp-cmp table { min-width: 800px; }
@media (max-width: 900px) { .pp-cmp-sec .tr-cmp__scroll { display: block; } }

/* -------------------------------------------- how it runs: down the page */
.ppr { position: relative; list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(36px, 5vw, 64px); --p: 1; --rail-x: 216px; }
.ppr::before, .ppr::after { content: ""; position: absolute; top: 12px; bottom: 12px; left: calc(var(--rail-x) + 9px); width: 2px; border-radius: 2px; }
.ppr::before { background: rgba(175, 196, 221, 0.2); }
.ppr::after { background: #AFC4DD; transform-origin: top; transform: scaleY(var(--p)); }
.ppr__stop { position: relative; display: grid; grid-template-columns: 200px 20px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.ppr__day { margin: 0; font: 500 15px/1.3 'IBM Plex Mono', ui-monospace, monospace; color: #AFC4DD; }
.ppr__h { margin: 8px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; color: #FAFAF8; }
.ppr__dot { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: #232A31; border: 2px solid #AFC4DD; box-sizing: border-box; }
.ppr__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-left: 20px; }
.ppr__card { padding: 22px 24px; border-radius: 18px; background: rgba(250, 250, 248, 0.06); border: 1px solid rgba(250, 250, 248, 0.12); }
.ppr__card--train { background: rgba(175, 196, 221, 0.14); }
.ppr__k { margin: 0 0 10px; font: 600 14px/1.3 'Source Sans 3', system-ui, sans-serif; color: #AFC4DD; }
.ppr__card--train .ppr__k { color: #FAFAF8; }
.ppr__card--track { background: transparent; border-style: dashed; border-color: rgba(175, 196, 221, 0.35); }
.ppr__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ppr__card li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.5; color: #E5E5E2; }
.ppr__card li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #AFC4DD; }
/* Scroll-linked states: only when the script is running. */
.ppr.is-live .ppr__stop { opacity: 0.55; transition: opacity 400ms cubic-bezier(.2, .8, .2, 1); }
.ppr.is-live .ppr__stop.is-on { opacity: 1; }
.ppr.is-live .ppr__dot { transition: background-color 300ms ease; }
.ppr.is-live .ppr__stop.is-on .ppr__dot { background: #AFC4DD; }
.ppr.is-live .ppr__cards { transform: translateY(10px); transition: transform 500ms cubic-bezier(.2, .8, .2, 1); }
.ppr.is-live .ppr__stop.is-on .ppr__cards { transform: none; }
.ppr:not(.is-live) .ppr__dot { background: #AFC4DD; }
/* Label above the cards below 1200px, so the three cards keep a readable width on laptops and tablets (deep review, 30 Sep 2026). */
@media (max-width: 1199px) {
  .ppr { --rail-x: 0px; }
  .ppr__stop { grid-template-columns: 20px minmax(0, 1fr); column-gap: 18px; }
  .ppr__dot { grid-column: 1; grid-row: 1; }
  .ppr__when { grid-column: 2; grid-row: 1; }
  .ppr__cards { grid-column: 2; grid-row: 2; padding-left: 0; margin-top: 16px; }
}
@media (max-width: 899px) { .ppr__cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .ppr__card { padding: 18px 20px; } .ppr__card li { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .ppr.is-live .ppr__stop, .ppr.is-live .ppr__cards { transition: none; } }

/* ------------------------------------------------------------ small touches */
.pp-page .tr-q #om-ans-h { max-width: none; }
.pp-page .tr-final__price { font-size: clamp(32px, 3vw, 44px); line-height: 1.1; }
.pp-page .tr-final__price span { display: block; margin-top: 6px; }