/* ============================================================
   CRM Migration. Same chrome, type and rhythm as the other v17
   product pages; the page's own hue is the logo's sky blue. The site
   header, nav and footer keep the brand lavender, so every rule here
   is scoped to .page--crm-migration.
   ============================================================ */
.page--crm-migration {
    --sky: #7AA2E3;       /* the logo's blue: rules, dots, lines */
    --sky-700: #4F76B8;   /* text-safe shade: labels, accent words, links */
    --sky-200: #C9DAF3;
    --sky-50: #E4EDFA;    /* light tint */
}

/* ---- Accent: labels, accent words, the process line ---- */
.page--crm-migration main .label { color: var(--sky-700); }
.page--crm-migration .accent-em h2 em { color: var(--sky-700); }
.page--crm-migration .steps::before { background: var(--sky); }
.page--crm-migration .steps .step-n { color: var(--sky-700); }
.page--crm-migration .section-head .lede strong { font-weight: 600; color: var(--ink-900); }
.page--crm-migration .link { color: var(--sky-700); border-bottom-color: var(--sky-200); }
.page--crm-migration .link:hover { border-bottom-color: var(--sky-700); }

/* ------------------------------------------------------------
   The problem: two records, one customer, merged into the new CRM
   ------------------------------------------------------------ */
.merge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 0.6fr) minmax(0, 1fr); align-items: stretch; }
.merge-src { display: grid; gap: 24px; }
.mrec { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px 20px; }
.mrec-h { font-size: 0.75rem; font-weight: 500; color: var(--ink-500); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ink-100); }
.mrec dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; font-size: 0.875rem; }
.mrec dt { color: var(--ink-500); }
.mrec dd { color: var(--ink-900); overflow-wrap: anywhere; }
.mrec dd.nil { color: var(--ink-400); font-style: italic; }
.mrec--new { border-color: var(--sky); box-shadow: 0 16px 40px rgba(79, 118, 184, 0.12); }
.mrec--new .mrec-h { color: var(--sky-700); border-bottom-color: var(--sky-50); }
.merge-out { display: flex; flex-direction: column; justify-content: center; }
.merge-out::before { content: ""; height: 34px; }
.merge-out figcaption { margin-top: 14px; height: 20px; font-size: 0.8125rem; color: var(--ink-500); }

.merge-wire { position: relative; }
/* The wires: each source runs right, then turns to the junction; one
   line runs on to the merged record. The card centres sit at about a
   quarter and three quarters of the column. */
.merge-wire .w { position: absolute; display: block; border: 0 solid var(--sky); }
.merge-wire .w-a { left: 0; right: 50%; top: 23.5%; bottom: 50%; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 10px; }
.merge-wire .w-b { left: 0; right: 50%; top: 50%; bottom: 23.5%; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 10px; }
.merge-wire .w-out { left: 50%; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--sky); }
.merge-wire .w-a, .merge-wire .w-b { margin-right: -0.75px; }
.merge-node { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--sky-700); box-shadow: 0 0 0 4px var(--parchment); }
.merge-label { position: absolute; left: 75%; bottom: calc(50% + 10px); transform: translateX(-50%); font-size: 0.75rem; font-weight: 500; color: var(--sky-700); white-space: nowrap; }

/* Plays once (the page script adds .is-played when half of it is in
   view): the sources arrive, the lines draw to the junction and on,
   then the merged record fills in a field at a time. */
html.js .merge .mrec--a, html.js .merge .mrec--b { opacity: 0; transform: translateX(-14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
html.js .merge .mrec--b { transition-delay: 0.12s; }
html.js .merge .w-a, html.js .merge .w-b { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s ease-in-out 0.55s; }
html.js .merge .w-out { transform: scaleX(0); transform-origin: left center; transition: transform 0.4s ease-out 1.35s; }
html.js .merge .merge-node { transform: scale(0); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s; }
html.js .merge .merge-label { opacity: 0; transition: opacity 0.5s ease 1.4s; }
html.js .merge .mrec--new { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease 1.65s, transform 0.6s var(--ease-out) 1.65s; }
html.js .merge .mrec--new dt, html.js .merge .mrec--new dd { opacity: 0; transition: opacity 0.45s ease; transition-delay: calc(1.95s + var(--i) * 0.15s); }
html.js .merge figcaption { opacity: 0; transition: opacity 0.6s ease 2.6s; }
html.js .merge.is-played .mrec, html.js .merge.is-played .mrec--new dt, html.js .merge.is-played .mrec--new dd,
html.js .merge.is-played figcaption { opacity: 1; transform: none; }
html.js .merge.is-played .merge-label { opacity: 1; }
html.js .merge.is-played .w-a, html.js .merge.is-played .w-b { clip-path: inset(0 0 0 0); }
html.js .merge.is-played .w-out { transform: none; }
html.js .merge.is-played .merge-node { transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .merge .mrec, html.js .merge .mrec--new dt, html.js .merge .mrec--new dd, html.js .merge figcaption, html.js .merge .merge-label { opacity: 1 !important; transition: none !important; }
    html.js .merge .mrec, html.js .merge .w-out, html.js .merge .merge-node { transform: none !important; transition: none !important; }
    html.js .merge .w-a, html.js .merge .w-b { clip-path: none !important; transition: none !important; }
}

@media (max-width: 900px) {
    .merge { grid-template-columns: 1fr; }
    .merge-src { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .merge-wire { height: 88px; }
    .merge-wire .w { display: none; }
    .merge-wire::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1.5px; margin-left: -0.75px; background: var(--sky); }
    .merge-label { left: calc(50% + 18px); bottom: auto; top: 50%; transform: translateY(-50%); }
    .merge-out::before { display: none; }
    .merge-out { align-items: center; }
    .merge-out .mrec { width: 100%; max-width: 460px; }
    .merge-out figcaption { text-align: center; }
    html.js .merge-wire::before { transform: scaleY(0); transform-origin: top; transition: transform 0.6s ease-in-out 0.55s; }
    html.js .merge.is-played .merge-wire::before { transform: none; }
    html.js .merge .mrec--a, html.js .merge .mrec--b { transform: translateY(-10px); }
}
@media (max-width: 560px) { .merge-src { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html.js .merge-wire::before { transform: none !important; transition: none !important; } }

/* ------------------------------------------------------------
   What goes wrong: a ledger of the ways a migration breaks. Each
   row opens with a short sky-blue stroke on the rule.
   ------------------------------------------------------------ */
.breaks { border-bottom: 1px solid var(--line); }
.breaks > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: baseline; padding: 28px 0 30px; border-top: 1px solid var(--line); }
.breaks > div::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--sky); }
.breaks h3 { font-family: var(--serif); font-weight: 450; font-size: clamp(1.5rem, 1.95vw, 1.75rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); text-wrap: balance; }
.breaks p { color: var(--ink-600); max-width: 52ch; }
@media (max-width: 900px) { .breaks > div { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; } }

/* ------------------------------------------------------------
   When to use Quill: each case drawn as the shape of the move
   ------------------------------------------------------------ */
.moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.move .shape { width: 160px; height: 64px; overflow: visible; }
.move h3 { margin-top: 32px; font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; }
.move p { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-600); }
.shape rect { stroke-width: 1.5; }
.shape .s-sys { fill: #fff; stroke: var(--ink-400); }
.shape .s-old { fill: none; stroke: var(--ink-300); stroke-dasharray: 4 3; }
.shape .s-new { fill: var(--sky-50); stroke: var(--sky); }
.shape .s-ln { stroke: var(--ink-300); stroke-width: 1.5; stroke-linecap: round; }
.shape .s-ln--new { stroke: var(--sky); }
.shape .s-go, .shape .s-tip { fill: none; stroke: var(--sky-700); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) { .moves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; } }
@media (max-width: 560px) { .moves { grid-template-columns: 1fr; gap: 48px; } }

/* ------------------------------------------------------------
   What we fix: sticky heading over the record wall, the agents as a
   numbered roster on the right
   ------------------------------------------------------------ */
.page--crm-migration .why-note { margin-top: 24px; max-width: 40ch; color: var(--ink-600); }
.page--crm-migration .why .roster { border-top: 1px solid var(--line); }
.page--crm-migration .why .roster li { padding: 18px 0 18px 56px; font-size: 1.0625rem; color: var(--ink-900); }
.page--crm-migration .why .roster li::before { top: 20px; color: var(--sky-700); }
.page--crm-migration .why .roster .roster-more { font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: var(--sky-700); padding-top: 16px; padding-bottom: 16px; }
.page--crm-migration .why .roster .roster-more::before { content: "+"; top: 18px; font-family: var(--font); font-style: normal; font-size: 1rem; }
.roster-foot { margin-top: 28px; color: var(--ink-600); }
.roster-foot a { color: var(--sky-700); border-bottom: 1px solid var(--sky-200); }
.roster-foot a:hover { border-bottom-color: var(--sky-700); }
/* The record wall in this page's blue, with struck values in ink */
.page--crm-migration .datawall--mini::before { background: rgba(79, 118, 184, 0.35); }
.page--crm-migration .datawall--mini .r { background: linear-gradient(transparent 29px, rgba(79, 118, 184, 0.12) 29px); }
.page--crm-migration .datawall--mini .src { color: rgba(79, 118, 184, 0.85); }
.page--crm-migration .datawall--mini .bad { color: var(--ink-400); text-decoration: line-through; text-decoration-color: rgba(79, 118, 184, 0.55); }
.page--crm-migration .datawall--mini .fixed { text-decoration: none; }
.page--crm-migration .datawall--mini .fixed::after { color: var(--sky-700); }
.page--crm-migration .datawall--mini .swap { animation: wall-swap .5s var(--ease-out), wall-mark-sky 1.8s ease-out; }
@keyframes wall-mark-sky { from { background: rgba(122, 162, 227, 0.4); } to { background: rgba(122, 162, 227, 0); } }
@media (prefers-reduced-motion: reduce) { .page--crm-migration .datawall--mini .swap { animation: none; } }

/* ------------------------------------------------------------
   Migration paths: a board of from-to pairs, each one a booking link
   ------------------------------------------------------------ */
.paths-pick { margin-top: 16px; color: var(--ink-600); }
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid var(--ink-900); }
.paths a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.paths h3 { font-family: var(--serif); font-weight: 450; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); transition: color 0.15s ease; }
.paths h3 i { font-style: italic; font-weight: 420; color: var(--sky-700); padding: 0 0.1em; }
.paths .go { flex: none; font-size: 0.9375rem; color: var(--sky-700); transition: transform 0.15s ease; }
.paths a:hover h3 { color: var(--sky-700); }
.paths a:hover .go { transform: translateX(3px); }
.paths-note { margin-top: 56px; max-width: 72ch; color: var(--ink-600); }
.paths-note strong { font-weight: 600; color: var(--ink-900); }
.paths-note a { color: var(--sky-700); border-bottom: 1px solid var(--sky-200); }
.paths-note a:hover { border-bottom-color: var(--sky-700); }
@media (max-width: 1000px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .paths { grid-template-columns: 1fr; } .paths h3 { font-size: 1.125rem; } }
@media (prefers-reduced-motion: reduce) { .paths .go { transition: none; } }

/* ------------------------------------------------------------
   You stay in control: the console, in this page's blue
   ------------------------------------------------------------ */
.page--crm-migration .plate--console { margin-top: 0; }
.page--crm-migration .app-org i { background: var(--sky); }
.page--crm-migration .app-side a.is-agent { color: var(--sky-700); background: var(--sky-50); }
.page--crm-migration .mbtn--primary { background: var(--sky-700); border-color: var(--sky-700); }
.page--crm-migration .finding-fix span { color: var(--sky-700); }
.page--crm-migration .app--findings .finding dl { grid-template-columns: 84px minmax(0, 1fr); }

/* ------------------------------------------------------------
   For partners: one panel, three things a partner gets
   ------------------------------------------------------------ */
.handoff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }
.handoff > div { padding: 32px 32px 36px; }
.handoff > div + div { border-left: 1px solid var(--line); }
.handoff h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-900); }
.handoff p { margin-top: 10px; color: var(--ink-600); }
.handoff-foot { margin-top: 40px; color: var(--ink-600); }
@media (max-width: 760px) {
    .handoff { grid-template-columns: 1fr; }
    .handoff > div { padding: 24px 24px 28px; }
    .handoff > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- FAQ in this page's blue ---- */
.page--crm-migration .faq-list summary::after {
    background: linear-gradient(var(--sky-700), var(--sky-700)) center / 14px 1.5px no-repeat, linear-gradient(var(--sky-700), var(--sky-700)) center / 1.5px 14px no-repeat;
}
.page--crm-migration .faq-list summary:hover { color: var(--sky-700); }
.page--crm-migration .faq-list details p a { color: var(--sky-700); border-bottom-color: var(--sky-200); }

/* ------------------------------------------------------------
   From v2 (page-crm-migration-v2.css), kept on its mg- prefix:
   the systems belt over the migration paths, and the dots that
   travel the merge diagram's wires.
   ------------------------------------------------------------ */

/* ---- Systems belt: "Migrate or merge across", looping above the
   path grid. The hero's customer strip, redrawn for a section: four
   sets would do, six keep the loop full on wide screens; the track
   moves by half its width so the loop is seamless. Hover pauses it;
   reduced motion shows one still set. ---- */
.mg-belt { display: flex; align-items: center; gap: 20px 48px; margin-bottom: 40px; }
.mg-belt p { flex: none; white-space: nowrap; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-600); }
.mg-belt-row { flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.mg-belt-track { display: flex; width: max-content; animation: mg-belt-drift 80s linear infinite; }
.mg-belt-set { display: flex; align-items: center; flex: none; }
.mg-belt-set img { width: auto; margin-right: 64px; flex: none; filter: brightness(0); opacity: 0.55; }
.mg-belt-row:hover .mg-belt-track { animation-play-state: paused; }
.mg-tool--salesforce { height: 28px; }
.mg-tool--hubspot    { height: 19px; }
.mg-tool--oracle     { height: 12px; }
.mg-tool--sap        { height: 20px; }
.mg-tool--pipedrive  { height: 19px; transform: translateY(1.5px); }
@keyframes mg-belt-drift { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 900px) {
    .mg-belt { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
    .mg-belt-row { width: 100%; }
    .mg-belt-set img { margin-right: 44px; }
    .mg-belt-track { animation-duration: 64s; }
}
@media (prefers-reduced-motion: reduce) {
    .mg-belt-track { animation: none; }
    .mg-belt-set[aria-hidden] { display: none; }
    .mg-belt-row { -webkit-mask-image: none; mask-image: none; }
    .mg-belt-set { flex-wrap: wrap; row-gap: 18px; }
}

/* ---- Travelling dots on the merge wires. Each runner fills the wire
   box, so translate(x%, y%) is a point in that box: a dot rides the top
   wire (from a quarter down) or the bottom wire (from three quarters
   down) to the junction, then on to the merged record. The keyframe
   stops split the run by each leg's length at a typical desktop width.
   They start once the diagram has played, then loop. ---- */
.mg-run { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.mg-run i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--sky-700); }
.mg-run-v { display: none; }
html.js .merge.is-played .mg-run-a { animation: mg-travel-a 3.6s linear 3s infinite; }
html.js .merge.is-played .mg-run-b { animation: mg-travel-b 3.6s linear 4.8s infinite; }
@keyframes mg-travel-a {
    0%    { transform: translate(0, 23.5%); opacity: 0; }
    5%    { opacity: 1; }
    21.5% { transform: translate(50%, 23.5%); }
    38.5% { transform: translate(50%, 50%); }
    54%   { opacity: 1; }
    60%   { transform: translate(100%, 50%); opacity: 0; }
    100%  { transform: translate(100%, 50%); opacity: 0; }
}
@keyframes mg-travel-b {
    0%    { transform: translate(0, 76.5%); opacity: 0; }
    5%    { opacity: 1; }
    21.5% { transform: translate(50%, 76.5%); }
    38.5% { transform: translate(50%, 50%); }
    54%   { opacity: 1; }
    60%   { transform: translate(100%, 50%); opacity: 0; }
    100%  { transform: translate(100%, 50%); opacity: 0; }
}
/* Stacked, the diagram has one vertical wire; one dot runs down it */
@media (max-width: 900px) {
    .mg-run-a, .mg-run-b { display: none; }
    .mg-run-v { display: block; inset: 10px 0; }
    html.js .merge.is-played .mg-run-v { animation: mg-travel-v 2.4s ease-in-out 1.4s infinite; }
}
@keyframes mg-travel-v {
    0%   { transform: translate(50%, 0); opacity: 0; }
    10%  { opacity: 1; }
    60%  { opacity: 1; }
    70%  { transform: translate(50%, 100%); opacity: 0; }
    100% { transform: translate(50%, 100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mg-run { display: none !important; animation: none !important; } }

/* ---- Hero: the systems Quill migrates between, in the logo band's place.
   Same marquee as the customer logos; each system keeps its own height. ---- */
.mg-systems .set img.mg-tool { margin-right: 64px; }
.mg-systems .set img.mg-tool--salesforce { height: 26px; }
.mg-systems .set img.mg-tool--oracle { height: 12px; }
.mg-customers { position: relative; z-index: 1; }
@media (max-width: 900px) { .mg-systems .set img.mg-tool { margin-right: 44px; } }

/* ---- What goes wrong, compact: a 3x2 grid of soft cards, no rules ---- */
#what-goes-wrong .section-head { margin-bottom: 48px; }
.breaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-bottom: 0; }
.breaks > div { display: block; padding: 28px 28px 30px; border-top: 0; background: #fff; border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(30, 35, 48, 0.04); }
.breaks > div::before { display: none; }
.breaks h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.breaks p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.55; }
@media (max-width: 1000px) { .breaks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .breaks { grid-template-columns: minmax(0, 1fr); } .breaks > div { padding: 22px 22px 24px; } }

/* ---- What we fix: the same "wash" hover as CRM Hygiene, in this page's sky
   blue. The row fills with a soft band from the left and the text deepens. ---- */
.page--crm-migration .why .roster { position: relative; z-index: 0; }
.page--crm-migration .why .roster li { position: relative; transition: color .25s ease, padding-left .3s var(--ease-out); }
.page--crm-migration .why .roster li::after { content: ""; position: absolute; inset: 0 -12px; z-index: -1; background: var(--sky-50); border-radius: 4px; transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease-out); }
@media (hover: hover) {
    .page--crm-migration .why .roster li:hover { color: var(--sky-700); padding-left: 62px; }
    .page--crm-migration .why .roster li:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    .page--crm-migration .why .roster li, .page--crm-migration .why .roster li::after { transition: none; }
    .page--crm-migration .why .roster li:hover { padding-left: 56px; }
}

/* ---- Console: taller, calmer, less text. More room around each finding;
   stage mappings read as simple "from -> to" rows. ---- */
.page--crm-migration .plate--console { padding-top: 88px; }
.page--crm-migration .app--findings { min-height: 560px; font-size: 14px; }
.page--crm-migration .app--findings .app-main { padding: 32px 36px 36px; }
.page--crm-migration .app--findings .finding { padding: 26px 28px 24px; }
.page--crm-migration .app--findings .finding-top h4 { font-size: 16px; }
.page--crm-migration .app--findings .finding > p { margin-top: 10px; font-size: 14px; color: var(--ink-600); }
.page--crm-migration .app--findings .finding dl { margin-top: 20px; padding-top: 18px; gap: 12px 18px; grid-template-columns: 104px 1fr; }
.page--crm-migration .app--findings .finding dd { font-size: 14px; }
.page--crm-migration .app--findings .finding-fix { margin-top: 20px; padding-top: 18px; }
.page--crm-migration .app--findings .finding-fix p { font-size: 14px; }
.page--crm-migration .app--findings .finding-actions { margin-top: 22px; }
.page--crm-migration .app-side a { padding: 8px 10px; }
.map-rows { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.map-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; font-size: 14px; color: var(--ink-800); }
.map-rows li i { font-style: normal; text-align: center; color: var(--sky-700); }
.map-rows li span:last-child { color: var(--sky-700); font-weight: 500; }
/* Console sidebar: wider and airier so the agent names read cleanly; the
   console now ends just below the finding (no fixed height) */
.page--crm-migration .app--findings { grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.page--crm-migration .app--findings .app-side { padding: 18px 14px 24px; }
.page--crm-migration .app--findings .app-side-label { padding: 18px 12px 10px; }
.page--crm-migration .app--findings .app-side a { padding: 11px 14px; margin-bottom: 4px; font-size: 14px; line-height: 1.45; border-radius: var(--r); }
@media (max-width: 1000px) { .page--crm-migration .app--findings { grid-template-columns: 232px minmax(0, 1fr); } }
@media (max-width: 900px) { .page--crm-migration .app--findings { grid-template-columns: minmax(0, 1fr); } .page--crm-migration .app--findings .app-side a { margin-bottom: 0; } }
.page--crm-migration .app--findings .app-side a { text-wrap: balance; }

/* ---- What we fix: the list runs across the page in three columns.
   Numbered, no divider lines, sky-blue wash on hover. ---- */
.roster--grid { list-style: none; counter-reset: roster; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 40px; position: relative; z-index: 0; }
.roster--grid li { counter-increment: roster; position: relative; padding: 14px 12px 14px 44px; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-900); transition: color .25s ease; }
.roster--grid li::before { content: counter(roster, decimal-leading-zero); position: absolute; left: 12px; top: 17px; font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--sky-700); }
.roster--grid li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sky-50); border-radius: var(--r); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease-out); }
.roster--grid .roster-more { font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: var(--sky-700); }
.roster--grid .roster-more::before { content: "+"; top: 15px; font-family: var(--font); font-style: normal; font-size: 1rem; }
@media (hover: hover) {
    .roster--grid li:hover { color: var(--sky-700); }
    .roster--grid li:hover::after { transform: scaleX(1); }
}
.page--crm-migration #agents .roster-foot { margin-top: 32px; padding-left: 12px; }
@media (max-width: 1000px) { .roster--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .roster--grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .roster--grid li, .roster--grid li::after { transition: none; } }
.roster--grid li { font-size: 1rem; text-wrap: pretty; } .roster--grid li::before { top: 16px; }
/* Sidebar names fill the width before wrapping */
.page--crm-migration .app--findings { grid-template-columns: 300px minmax(0, 1fr); }
.page--crm-migration .app--findings .app-side { padding-left: 12px; padding-right: 12px; }
.page--crm-migration .app--findings .app-side a { padding: 11px 12px; text-wrap: wrap; }
@media (max-width: 1000px) { .page--crm-migration .app--findings { grid-template-columns: 240px minmax(0, 1fr); } }
@media (max-width: 900px) { .page--crm-migration .app--findings { grid-template-columns: minmax(0, 1fr); } }
.page--crm-migration .app--findings { grid-template-columns: 316px minmax(0, 1fr); } @media (max-width: 1000px) { .page--crm-migration .app--findings { grid-template-columns: 240px minmax(0, 1fr); } } @media (max-width: 900px) { .page--crm-migration .app--findings { grid-template-columns: minmax(0, 1fr); } }
/* Console, tighter (matches CRM Hygiene) */
.page--crm-migration .plate--console { padding: 48px 56px 0; }
.page--crm-migration .app--findings .app-main { padding: 24px 28px 28px; }
.page--crm-migration .app--findings .finding { padding: 20px 24px 20px; }
.page--crm-migration .app--findings .finding dl, .page--crm-migration .map-rows { margin-top: 16px; padding-top: 14px; }
.page--crm-migration .app--findings .finding-fix { margin-top: 16px; padding-top: 14px; }
.page--crm-migration .app--findings .finding-actions { margin-top: 18px; }
@media (max-width: 640px) { .page--crm-migration .plate--console { padding: 24px 16px 0; } }
/* v19: "what goes wrong" is the second half of the problem section */
[data-was="what-goes-wrong"] { padding-top: 0; }
.wrong-label { margin-bottom: 24px; }
/* on the problem section's light background the cards get a hairline edge */
[data-was="what-goes-wrong"] .breaks > div { border: 1px solid var(--line); box-shadow: none; }

/* 9) sky blue everywhere on this page: the console backdrop, tags, the
   Reviewer cursor label, and the closing sky (the dusk art shifted to blue) */
.page--crm-migration .art-plate { background: #E4EDFA; }
.page--crm-migration .st--lav { background: var(--sky-50); color: var(--sky-700); }
.page--crm-migration .reviewer span { background: var(--sky-700); }
.page--crm-migration .closing--dusk { background-color: #14223A; }
.page--crm-migration .closing--dusk .closing-bg { filter: hue-rotate(-32deg) saturate(0.9); }

/* 18) Paths are separated by space, not a rule under each one */
.paths { padding-top: 12px; }
.paths a { border-bottom: 0; padding: 16px 0; }

/* ---- What goes wrong: the six failures placed along the move itself,
   before, during, and after (replaces the 3x2 cards). The track fills on arrival. ---- */
.journey { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.journey::before, .journey::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; }
.journey::before { background: var(--sky-200); }
.journey::after { background: var(--sky); transform-origin: left center; }
.journey-stop { position: relative; padding-top: 36px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sky-700); }
.journey-stop::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--sky); background: var(--parchment); z-index: 1; }
.journey-phase:last-child .journey-stop::before { background: var(--sky); }
.journey-item { margin-top: 28px; }
.journey-item h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; }
.journey-item p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-600); max-width: 40ch; }
html.js .journey::after { transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
html.js .journey.is-shown::after { transform: none; }
html.js .journey .journey-phase { opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s var(--ease-out); }
html.js .journey.is-shown .journey-phase { opacity: 1; transform: none; }
html.js .journey.is-shown .journey-phase:nth-child(2) { transition-delay: .5s; }
html.js .journey.is-shown .journey-phase:nth-child(3) { transition-delay: 1s; }
@media (max-width: 900px) {
    .journey { grid-template-columns: 1fr; gap: 40px; padding-left: 36px; }
    .journey::before, .journey::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
    .journey::after { transform-origin: center top; }
    html.js .journey::after { transform: scaleY(0); }
    .journey-stop { padding-top: 0; }
    .journey-stop::before { left: -36px; top: 0; }
    .journey-item { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { html.js .journey::after { transform: none !important; transition: none; } html.js .journey .journey-phase { opacity: 1; transform: none; transition: none; } }

/* What our agents do: the same list as CRM Hygiene's "What we fix" (thin rows,
   wash on hover), in this page's sky blue instead of lavender */
.page--crm-migration .fixlist li::before { background: var(--sky-50); }
.page--crm-migration .fixlist .fixlist-more { color: var(--sky-700); }
@media (hover: hover) { .page--crm-migration .fixlist li:hover { color: var(--sky-700); } }
.page--crm-migration #agents .roster-foot { padding-left: 0; }

/* What goes wrong, v2: three equal segments instead of a progress track.
   Every phase is its own solid bar, so no phase reads as "where we are". */
.journey::before, .journey::after { display: none; }
.journey-stop { padding-top: 22px; }
.journey-stop::before, .journey-phase:last-child .journey-stop::before { left: 0; right: 0; top: 0; width: auto; height: 3px; border: 0; border-radius: 2px; background: var(--sky); }
html.js .journey .journey-phase { transition-delay: 0s !important; }
@media (max-width: 900px) {
    .journey { padding-left: 0; gap: 44px; }
    .journey-stop { padding-top: 18px; }
    .journey-stop::before, .journey-phase:last-child .journey-stop::before { left: 0; top: 0; }
}
/* Phase names head their two problems: the site's 28px card-title size */
.journey-stop { padding-top: 24px; font-family: var(--serif); font-weight: 450; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); }
.journey-item { margin-top: 24px; }
@media (max-width: 900px) { .journey-stop { padding-top: 20px; font-size: 1.5rem; } }
/* Design pass: phase names in sans, blue, semibold, so the three levels
   (phase, problem, detail) differ by typeface and color, not only size */
.journey { gap: 64px; }
.journey-stop { padding-top: 20px; font-family: var(--font); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; color: var(--sky-700); }
.journey-stop::before, .journey-phase:last-child .journey-stop::before { height: 4px; }
.journey-item { margin-top: 28px; }
.journey-item + .journey-item { margin-top: 32px; }
.journey-item h3 { font-size: 1.375rem; }
.journey-item p { margin-top: 10px; }
.wrong-label { margin-bottom: 36px; }
@media (max-width: 900px) { .journey { gap: 48px; } .journey-stop { padding-top: 16px; font-size: 1rem; } .journey-item { margin-top: 20px; } .journey-item + .journey-item { margin-top: 24px; } }
.journey-item h3 { text-wrap: pretty; }

/* ---- What goes wrong, v3: each failure shown as it looks in the data.
   A two-line record sits above the title; the broken value is in clay. ---- */
.symptoms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }
.symptom-rec { display: grid; gap: 8px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 2px rgba(30, 35, 48, 0.04); }
.symptom-rec > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 0.875rem; line-height: 1.4; }
.symptom-rec dt { color: var(--ink-500); }
.symptom-rec dd { color: var(--ink-900); font-weight: 500; overflow-wrap: anywhere; }
.symptom-rec dd.off { justify-self: start; padding: 1px 6px; margin-left: -6px; border-radius: 4px; background: #F7ECE6; color: #A0583E; }
.symptom h3 { margin-top: 28px; font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: pretty; }
.symptom p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-600); }
@media (max-width: 1000px) { .symptoms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .symptoms { grid-template-columns: minmax(0, 1fr); gap: 48px; } .symptom-rec > div { grid-template-columns: 104px minmax(0, 1fr); } }
/* The heading over the symptom cards uses the statement's type, so the two
   read as one voice: serif, regular weight, the statement size */
.wrong-head { max-width: 38ch; margin-bottom: 56px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-900); }