/* Shared training journey on Weights, Train RVC and Audio to PTH.
   Restyled 20 Oct 2026 (owner: "cleaner, more professional", then "no empty
   space in steps 1 and 2"): a bento layout. Steps 1 and 2 stack on the left,
   step 3 - the result, which needs the height - spans both rows on the right.
   The path reads 1 down to 2, across to 3, marked by round connectors. */
.rvc-journey { margin: 36px 0 44px; color: #2f2924; }
html[lang="pt-BR"] .rvc-journey { --rj-step-label: "Etapa"; --rj-result-label: "· Resultado"; }
html[lang="de"] .rvc-journey { --rj-step-label: "Schritt"; --rj-result-label: "· Ergebnis"; }
html[lang="fr"] .rvc-journey { --rj-step-label: "Étape"; --rj-result-label: "· Résultat"; }
html[lang="es"] .rvc-journey { --rj-step-label: "Paso"; --rj-result-label: "· Resultado"; }
html[lang="ko"] .rvc-journey { --rj-step-label: "단계"; --rj-result-label: "· 결과"; }
html[lang="vi"] .rvc-journey { --rj-step-label: "Bước"; --rj-result-label: "· Kết quả"; }
.rvc-journey *, .rvc-journey *::before, .rvc-journey *::after { box-sizing: border-box; }
.rvc-journey .rj-eyebrow { margin: 0 0 6px; color: #b0491d; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.rvc-journey .rj-lede { margin: 6px 0 20px; color: #6f655d; font-size: .92rem; }
.rvc-journey h2 { margin: 0; font-size: clamp(1.2rem, 2.1vw, 1.45rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.rvc-journey .rj-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto; gap: 20px 32px; margin: 0; padding: 0; list-style: none; }
.rvc-journey .rj-flow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
.rvc-journey .rj-flow-step:nth-child(2) { grid-column: 1; grid-row: 2; }
.rvc-journey .rj-flow-step:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
/* The payoff: a warm accent card, a "Result" badge, and one strong arrow into it. */
.rvc-journey .rj-flow-step:nth-child(3) { border-color: #efc7ad; background: linear-gradient(180deg, #fff 0%, #fff7f1 100%); box-shadow: 0 1px 2px rgba(50,32,22,.05), 0 18px 44px rgba(196,86,31,.10); }
.rvc-journey .rj-flow-step:nth-child(3) .rj-step-number { background: #c4561f; color: #fff; }
.rvc-journey .rj-flow-step:nth-child(3) .rj-step-number::after { content: var(--rj-result-label, "· Result"); font-weight: 600; opacity: .9; }
.rvc-journey .rj-flow::after { content: ""; position: absolute; z-index: 2; top: 50%; left: calc((100% - 32px) / 2.2 + 16px); width: 28px; height: 28px; border: 1px solid #e9ded7; border-radius: 50%; transform: translate(-50%, -50%);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b4562a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 2px 6px rgba(50,32,22,.06); }

.rj-flow-step { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid #e9ded7; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(50,32,22,.04), 0 14px 34px rgba(50,32,22,.045); }
/* Connectors: a small round chevron in each gap, over both card edges -
   down from 1 to 2, across from 2 to 3. */
.rj-flow-step:not(:last-child)::after { content: ""; position: absolute; z-index: 1; width: 28px; height: 28px; border: 1px solid #e9ded7; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b4562a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 2px 6px rgba(50,32,22,.06); }
.rvc-journey .rj-flow-step:nth-child(1)::after { left: 50%; bottom: -24px; transform: translateX(-50%) rotate(90deg); }
.rvc-journey .rj-flow-step:nth-child(2)::after { display: none; }

.rj-step-number { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; margin: 0 0 14px; padding: 4px 10px; border-radius: 999px; background: #fdf0e8; color: #b0491d; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.rj-step-number::before { content: var(--rj-step-label, "Step"); font-weight: 600; }
.rvc-journey h3 { margin: 0; color: #2f2924; font-size: 1rem; font-weight: 650; line-height: 1.4; letter-spacing: -.01em; }
.rvc-journey .rj-flow-step > p { margin: 6px 0 0; color: #6f655d; font-size: .875rem; line-height: 1.6; }
.rvc-journey .rj-flow-step > p code { display: inline-block; padding: 0 6px; border: 1px solid #eadfd6; border-radius: 6px; background: #fbf7f3; color: #4f443b; font-size: .8rem; line-height: 1.55; }

/* Media and actions sit at the foot of every card. */
.rvc-journey .compare-listen { display: grid; gap: 12px; margin: 20px 0 0; }
.rvc-journey .rj-flow-step:nth-child(1) > .compare-listen { margin-top: 18px; }
.rvc-journey .cmp-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rvc-journey .cmp-row[data-waveform-ready] audio { display: none; }
.rvc-journey .cmp-label { color: #6f655d; font-size: .75rem; font-weight: 500; letter-spacing: .01em; }
.rvc-journey .cmp-label strong { margin-right: 4px; color: #2f2924; font-weight: 700; }
.rvc-journey .cmp-slot { display: flex; align-items: center; gap: 10px; }
.rvc-journey .cmp-stage { height: 64px; border-radius: 10px; }
.rvc-journey .rj-flow-step:nth-child(3) .compare-listen { gap: 16px; margin-top: 22px; }
.rvc-journey .rj-flow-step:nth-child(3) .cmp-stage { height: 76px; }
.rvc-journey .cmp-play { width: 32px; height: 32px; }

.rvc-journey .rj-train-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 18px; padding: 11px 18px; color: #fff; font-size: .85rem; line-height: 1.4; text-align: center; text-decoration: none; }
.rvc-journey .rj-flow-step > p.rj-use-note { margin: auto 0 0; padding-top: 20px; color: #4f453d; font-size: .84rem; font-weight: 600; line-height: 1.5; }
.rvc-journey .rj-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; border: 0; }
.rvc-journey .rj-branches a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 10px; border: 1px solid #e6d8ce; white-space: nowrap; border-radius: 10px; background: #fff; color: #a8451b; font-size: .8rem; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.rvc-journey .rj-branches a:hover { background: #fff6f0; border-color: #e7b597; text-decoration: none; }
.rvc-journey .rj-branches a span { color: inherit; font-size: .75rem; }
.rvc-journey :is(a, .cmp-stage, .cmp-play):focus-visible { outline: 2px solid #c55725; outline-offset: 3px; }

@media (max-width: 960px) {
  .rvc-journey { margin: 28px 0 36px; }
  .rvc-journey .rj-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 22px; }
  .rvc-journey .rj-flow-step:nth-child(n) { grid-column: 1; grid-row: auto; padding: 20px; }
  .rvc-journey .rj-flow-step:nth-child(n)::after { top: auto; right: auto; bottom: -26px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .rvc-journey .rj-flow-step:nth-child(3) .cmp-stage { height: 64px; }
  .rvc-journey .rj-flow::after { display: none; }
  .rvc-journey .rj-flow-step:nth-child(2)::after { display: block; }
}
@media (max-width: 380px) {
  .rvc-journey .rj-branches { grid-template-columns: 1fr; }
}