/* Only the requested units layout changes. All other styles come from the current site. */
[data-current-preview] .unit-flow {
  display: block;
  position: relative;
  max-width: 1060px;
  margin: 54px auto 0;
}
[data-current-preview] .unit-flow-arrow { display: none; }
[data-current-preview] .unit-moment {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 120px;
  padding: 48px 0;
}
[data-current-preview] .unit-moment-copy { text-align: right; }
[data-current-preview] .unit-moment-copy p { margin: 14px 0 0; max-width: 330px; }
@media (min-width: 901px) {
  body[data-current-preview] .unit-moment:not([data-unit-stage="listen"]) .unit-moment-copy {
    width: 285px;
    max-width: 100%;
    justify-self: end;
    direction: rtl;
    text-align: left;
  }
  body[data-current-preview] .unit-moment:not([data-unit-stage="listen"]) .unit-moment-copy p {
    max-width: 100%;
  }
}
[data-current-preview] .unit-moment[data-unit-stage="listen"] .unit-moment-copy { grid-column: 2; grid-row: 1; }
[data-current-preview] .unit-moment[data-unit-stage="listen"] .app-preview { grid-column: 1; grid-row: 1; }
.current-step { display: inline-grid; place-items: center; width: 35px; height: 35px; margin-bottom: 18px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--blue); background: var(--surface); font-weight: 700; font-size: 17px; }
.current-journey-line { position: absolute; left: 50%; top: 48px; width: 2px; height: calc(100% - 96px); transform: translateX(-50%); fill: none; stroke-width: 2; }
.current-path-base { stroke: var(--border); }
.current-path-fill { stroke: var(--blue); stroke-dasharray: 1000; stroke-dashoffset: 0; }
[data-current-preview] .unit-moment::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; box-sizing: content-box; transform: translate(-50%, -50%); border: 6px solid var(--surface); background: var(--blue); border-radius: 50%; }

/* Small screens keep each explanation beside the path, followed by its original card. */
@media (max-width: 900px) {
  [data-current-preview] .unit-flow { max-width: 540px; }
  [data-current-preview] .unit-moment {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 25px;
    padding: 32px 40px 32px 0;
  }
  [data-current-preview] .unit-moment[data-unit-stage="listen"] .unit-moment-copy,
  [data-current-preview] .unit-moment[data-unit-stage="listen"] .app-preview { grid-column: auto; grid-row: auto; }
  .current-journey-line { left: auto; right: 10px; top: 32px; height: calc(100% - 64px); transform: none; }
  [data-current-preview] .unit-moment::after { left: auto; right: 11px; top: 52px; transform: translate(50%, -50%); }
  .current-step { margin-bottom: 12px; }
}
@media (max-width: 420px) {
  [data-current-preview] .unit-moment { padding-right: 30px; }
  .current-journey-line { right: 6px; }
  [data-current-preview] .unit-moment::after { right: 7px; border-width: 4px; width: 8px; height: 8px; }
}

/* Approved homepage: the Personal Journey palette, with the current site's typography. */
body[data-journey-colors] {
  --canvas: #f5f9fb;
  --surface: #fff;
  --surface-blue: #e6f0f7;
  --surface-purple: #e6f0f7;
  --ink: #18344f;
  --ink-soft: #57718a;
  --blue: #2c6898;
  --blue-bright: #387daf;
  --purple: #2c6898;
  --purple-deep: #2c6898;
  --border: #ccdee9;
  --border-strong: #c8dce9;
  --navy: #18344f;
}
[data-journey-colors] .site-header,
[data-journey-colors] .site-nav,
[data-journey-colors] .hero { background: var(--canvas); }
[data-journey-colors] .button-primary { background: var(--blue); }
[data-journey-colors] .journey-title-accent { color: var(--blue); }

/* Connected units and learning routes. */
[data-journey-colors] .personalization { background: #eaf2f7; }
[data-journey-colors] .current-path-base { stroke: #c6dae9; }
[data-journey-colors] .current-path-fill { stroke: #387daf; }
[data-journey-colors] .unit-moment::after { border-color: #eaf2f7; background: #387daf; }
[data-journey-colors] .personalization { padding-block: 56px; }
[data-journey-colors] .unit-flow { margin-top: 24px; }
[data-journey-colors] .unit-moment { padding-block: 18px; }
[data-journey-colors] .app-preview { height: auto; min-height: 330px; }
[data-journey-colors] .current-journey-line { top: 18px; height: calc(100% - 36px); }
[data-journey-colors] .unit-flow-caption { margin-top: 24px; }
@media (max-width: 900px) {
  [data-journey-colors] .unit-moment { gap: 14px; }
  [data-journey-colors] .current-step { margin-bottom: 8px; }
  [data-journey-colors] .unit-moment-copy p { margin-top: 8px; }
}
[data-journey-colors] .program { background: var(--canvas); }
[data-journey-colors] .track { background: var(--surface); border-color: var(--border-strong); }
[data-journey-colors] .track:nth-child(2) { background: var(--surface-blue); }

/* Teachers use the same soft blue chapter background as Personal Journey. */
[data-journey-colors] .about { background: var(--surface-blue); color: var(--ink); }
[data-journey-colors] .about h2,
[data-journey-colors] .about blockquote { color: var(--ink); }
[data-journey-colors] .about-copy > p:not(.about-lead):not(.about-summary),
[data-journey-colors] .teacher-portraits p { color: var(--ink-soft); }
[data-journey-colors] .about-copy,
[data-journey-colors] .about blockquote,
[data-journey-colors] .teacher-portraits figure,
[data-journey-colors] .teacher-portraits article:nth-child(2) figure { border-color: var(--border-strong); }
[data-journey-colors] .about blockquote::before,
[data-journey-colors] .about-summary b { color: var(--blue); }

/* Closing sections and the Journey's dark ink footer. */
[data-journey-colors] .trial,
[data-journey-colors] .faq { background: var(--canvas); }
[data-journey-colors] .site-footer { background: var(--ink); color: var(--canvas); }
[data-journey-colors] .footer-inner p,
[data-journey-colors] .footer-inner small,
[data-journey-colors] .site-footer a { color: #e6f0f7; }
[data-journey-colors] .site-footer a:hover { color: #fff; }
[data-journey-colors] .footer-brand {
  padding: 12px 18px;
  width: 246px;
  border-radius: 10px;
  background: #fff;
}
[data-journey-colors] .site-footer .footer-whatsapp { color: #5cdb95; }
[data-journey-colors] .site-footer .footer-whatsapp:hover,
[data-journey-colors] .site-footer .footer-whatsapp:focus-visible { color: #8ceab6; }